claude-sonnet-5 @ medium · kiro

kiromedium

config: claude-sonnet-5-eff-medium--cli--kiro--dev
batch: 2026-07-19--unified
transport: kiro-cli-isolated-home-github-social
protocol: cli · plan
served model: claude-sonnet-5
captured: Jul 18, 2026, 11:54 AM · N=2

variant

live

slot 0 · P-q · sandboxed iframe

claude-sonnet-5 @medium · kiro P-q slot 0 screenshot

The screenshot is the exact frozen pixels the similarity channels measured. Run live re-executes the raw output in a sandboxed iframe; its rendering depends on your browser and fonts and is not guaranteed to match the measured pixels.

similarity neighbors

nearest

claude-opus-4-8 @low · kiro0.72 mimo-v2.5 · go0.69 claude-opus-4-7 @high · kiro0.67 claude-opus-4-8 @xhigh · kiro0.67 claude-sonnet-4-6 @low · kiro0.67

farthest

gpt-5.6-luna @high · kiro0.44 mimo-v2.5-pro · go0.45 mimo-v2.5-free · api0.45 minimax-m2.5 · kiro0.47 minimax-m2.1 · kiro0.47

within session 2026-07-19--unified

similarity measures convergence within this session — not quality.

Fidelity — does the card show the right data?

namematch
conditionmatch
datematch
max tempmatchshown: 25
min tempmatchshown: 16
hourlymatchcoverage 24/24 · 24 match · 0 mismatch · 0 not shown
request sidematch0 violation(s)

extractor fidelity-extractor-v1+Berlin-2026-07-15

Source — raw model output, one byte unchanged

download card.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather Card</title>
<style>
  :root {
    --bg-top: #4facfe;
    --bg-bottom: #00c2ff;
    --card-bg: rgba(255, 255, 255, 0.14);
    --card-border: rgba(255, 255, 255, 0.35);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.75);
    --accent: #ffd166;
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    width: 1280px;
    height: 800px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: radial-gradient(circle at 20% 15%, #6fc3ff 0%, #3a8dde 45%, #1c5fb8 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
  }

  body::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 80% 80%, rgba(255,255,255,0.10) 0%, transparent 40%),
      radial-gradient(circle at 10% 90%, rgba(255,255,255,0.08) 0%, transparent 35%);
    pointer-events: none;
  }

  .card {
    position: relative;
    width: 900px;
    height: 620px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 28px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
      0 30px 60px rgba(0, 30, 70, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .location-block .location {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin: 0;
  }

  .location-block .date {
    margin: 6px 0 0;
    font-size: 16px;
    color: var(--text-secondary);
    font-weight: 500;
  }

  .header-icon {
    font-size: 56px;
    line-height: 1;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25));
  }

  .main-temp-row {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 8px 0 4px;
  }

  .temp-now {
    font-size: 96px;
    font-weight: 200;
    letter-spacing: -2px;
    line-height: 1;
  }

  .temp-now sup {
    font-size: 40px;
    font-weight: 300;
    top: -0.5em;
  }

  .condition-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .condition-label {
    font-size: 22px;
    font-weight: 600;
  }

  .hi-lo {
    display: flex;
    gap: 18px;
    font-size: 16px;
    color: var(--text-secondary);
  }

  .hi-lo span.hi { color: #ffd166; font-weight: 700; }
  .hi-lo span.lo { color: #9fd8ff; font-weight: 700; }

  .divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    margin: 4px 0;
  }

  .hourly-title {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    margin: 0 0 14px;
    font-weight: 600;
  }

  .hourly-scroll {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 8px;
    flex: 1;
  }

  .hourly-scroll::-webkit-scrollbar {
    height: 6px;
  }
  .hourly-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.35);
    border-radius: 3px;
  }
  .hourly-scroll::-webkit-scrollbar-track {
    background: transparent;
  }

  .hour-item {
    flex: 0 0 auto;
    width: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 4px;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    transition: background 0.15s ease;
  }

  .hour-item.current {
    background: rgba(255, 209, 102, 0.22);
    border: 1px solid rgba(255, 209, 102, 0.5);
  }

  .hour-item .h-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
  }

  .hour-item .h-temp {
    font-size: 16px;
    font-weight: 700;
  }

  .status-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
    text-align: center;
  }

  .status-message .icon {
    font-size: 48px;
  }

  .status-message .title {
    font-size: 22px;
    font-weight: 700;
  }

  .status-message .detail {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 480px;
  }

  .spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,0.25);
    border-top-color: #fff;
    animation: spin 0.9s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  .hidden { display: none !important; }

  .footer-note {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: right;
    letter-spacing: 0.3px;
  }
</style>
</head>
<body>

<div class="card" id="card">

  <div id="loadingState" class="status-message">
    <div class="spinner"></div>
    <div class="title">Loading weather…</div>
  </div>

  <div id="errorState" class="status-message hidden">
    <div class="icon">⚠️</div>
    <div class="title">Unable to load weather data</div>
    <div class="detail" id="errorDetail">Something went wrong while contacting the weather service.</div>
  </div>

  <div id="content" class="hidden" style="display:flex; flex-direction:column; height:100%; gap:20px;">
    <div class="header">
      <div class="location-block">
        <p class="location" id="locationName">—</p>
        <p class="date" id="dateLabel">—</p>
      </div>
      <div class="header-icon" id="headerIcon">☀️</div>
    </div>

    <div class="main-temp-row">
      <div class="temp-now"><span id="tempNow">--</span><sup>°C</sup></div>
      <div class="condition-block">
        <div class="condition-label" id="conditionLabel">—</div>
        <div class="hi-lo">
          <span>High <span class="hi" id="tempMax">--°</span></span>
          <span>Low <span class="lo" id="tempMin">--°</span></span>
        </div>
      </div>
    </div>

    <div class="divider"></div>

    <div style="display:flex; flex-direction:column; flex:1; min-height:0;">
      <p class="hourly-title">Hourly temperature</p>
      <div class="hourly-scroll" id="hourlyScroll"></div>
    </div>

    <div class="footer-note">Data via Open-Meteo · UTC</div>
  </div>

</div>

<script>
(function () {
  const WEATHER_CODE_MAP = {
    0:  { label: "Clear sky", icon: "☀️" },
    1:  { label: "Mainly clear", icon: "🌤️" },
    2:  { label: "Partly cloudy", icon: "⛅" },
    3:  { label: "Overcast", icon: "☁️" },
    45: { label: "Fog", icon: "🌫️" },
    48: { label: "Rime fog", icon: "🌫️" },
    51: { label: "Light drizzle", icon: "🌦️" },
    53: { label: "Drizzle", icon: "🌦️" },
    55: { label: "Dense drizzle", icon: "🌧️" },
    56: { label: "Light freezing drizzle", icon: "🌧️" },
    57: { label: "Freezing drizzle", icon: "🌧️" },
    61: { label: "Light rain", icon: "🌦️" },
    63: { label: "Rain", icon: "🌧️" },
    65: { label: "Heavy rain", icon: "🌧️" },
    66: { label: "Light freezing rain", icon: "🌧️" },
    67: { label: "Freezing rain", icon: "🌧️" },
    71: { label: "Light snow", icon: "🌨️" },
    73: { label: "Snow", icon: "❄️" },
    75: { label: "Heavy snow", icon: "❄️" },
    77: { label: "Snow grains", icon: "❄️" },
    80: { label: "Light showers", icon: "🌦️" },
    81: { label: "Showers", icon: "🌧️" },
    82: { label: "Violent showers", icon: "⛈️" },
    85: { label: "Light snow showers", icon: "🌨️" },
    86: { label: "Snow showers", icon: "❄️" },
    95: { label: "Thunderstorm", icon: "⛈️" },
    96: { label: "Thunderstorm, light hail", icon: "⛈️" },
    99: { label: "Thunderstorm, heavy hail", icon: "⛈️" }
  };

  function getWeatherInfo(code) {
    return WEATHER_CODE_MAP[code] || { label: "Unknown", icon: "❓" };
  }

  function todayUTCString() {
    const now = new Date();
    return now.toISOString().slice(0, 10);
  }

  function getParams() {
    const params = new URLSearchParams(window.location.search);
    const lat = parseFloat(params.get("lat"));
    const lon = parseFloat(params.get("lon"));
    const name = params.get("name");
    const date = params.get("date");

    const dateRegex = /^\d{4}-\d{2}-\d{2}$/;

    return {
      lat: isNaN(lat) ? 52.52 : lat,
      lon: isNaN(lon) ? 13.405 : lon,
      name: name && name.trim() ? name.trim() : "Berlin",
      date: date && dateRegex.test(date) ? date : todayUTCString()
    };
  }

  function formatDateLabel(dateStr) {
    const [y, m, d] = dateStr.split("-").map(Number);
    const dt = new Date(Date.UTC(y, m - 1, d));
    return dt.toLocaleDateString("en-US", {
      weekday: "long",
      year: "numeric",
      month: "long",
      day: "numeric",
      timeZone: "UTC"
    });
  }

  function formatHourLabel(isoHour) {
    const hourPart = isoHour.split("T")[1];
    const h = parseInt(hourPart.slice(0, 2), 10);
    if (h === 0) return "12A";
    if (h === 12) return "12P";
    return h > 12 ? (h - 12) + "P" : h + "A";
  }

  function isDateInPast(dateStr) {
    const todayStr = todayUTCString();
    return dateStr < todayStr;
  }

  function showError(message) {
    document.getElementById("loadingState").classList.add("hidden");
    document.getElementById("content").classList.add("hidden");
    document.getElementById("errorState").classList.remove("hidden");
    if (message) {
      document.getElementById("errorDetail").textContent = message;
    }
  }

  function showContent() {
    document.getElementById("loadingState").classList.add("hidden");
    document.getElementById("errorState").classList.add("hidden");
    document.getElementById("content").classList.remove("hidden");
  }

  async function fetchWeather(params) {
    const usePast = isDateInPast(params.date);
    const basePath = usePast ? "/api/om/archive" : "/api/om/forecast";

    const url = new URL(basePath, window.location.origin);
    url.searchParams.set("latitude", params.lat);
    url.searchParams.set("longitude", params.lon);
    url.searchParams.set("daily", "temperature_2m_max,temperature_2m_min,weather_code");
    url.searchParams.set("hourly", "temperature_2m");
    url.searchParams.set("timezone", "UTC");
    url.searchParams.set("temperature_unit", "celsius");
    url.searchParams.set("start_date", params.date);
    url.searchParams.set("end_date", params.date);

    let response;
    try {
      response = await fetch(url.toString());
    } catch (err) {
      throw new Error("Network request failed. Please check your connection and try again.");
    }

    if (!response.ok) {
      throw new Error("Weather service responded with an error (HTTP " + response.status + ").");
    }

    let data;
    try {
      data = await response.json();
    } catch (err) {
      throw new Error("Received an invalid response from the weather service.");
    }

    if (data && data.error) {
      throw new Error(data.reason || "The weather service reported an error.");
    }

    if (!data || !data.daily || !data.hourly) {
      throw new Error("The weather service returned incomplete data.");
    }

    return data;
  }

  function render(data, params) {
    const dailyTimes = data.daily.time || [];
    const idx = dailyTimes.indexOf(params.date);
    const dayIndex = idx >= 0 ? idx : 0;

    const tMax = data.daily.temperature_2m_max ? data.daily.temperature_2m_max[dayIndex] : null;
    const tMin = data.daily.temperature_2m_min ? data.daily.temperature_2m_min[dayIndex] : null;
    const code = data.daily.weather_code ? data.daily.weather_code[dayIndex] : null;

    if (tMax === null || tMax === undefined || tMin === null || tMin === undefined) {
      throw new Error("No temperature data is available for the selected date.");
    }

    const info = getWeatherInfo(code);

    document.getElementById("locationName").textContent = params.name;
    document.getElementById("dateLabel").textContent = formatDateLabel(params.date);
    document.getElementById("headerIcon").textContent = info.icon;
    document.getElementById("conditionLabel").textContent = info.label;
    document.getElementById("tempMax").textContent = Math.round(tMax) + "°";
    document.getElementById("tempMin").textContent = Math.round(tMin) + "°";

    // "Now" temp: use current hour if today, else midday value as representative.
    const hourlyTimes = data.hourly.time || [];
    const hourlyTemps = data.hourly.temperature_2m || [];

    let displayTemp = tMax;
    const nowUTC = new Date();
    const nowHourISO = nowUTC.toISOString().slice(0, 13); // YYYY-MM-DDTHH
    let currentHourIdx = -1;

    for (let i = 0; i < hourlyTimes.length; i++) {
      if (hourlyTimes[i].slice(0, 13) === nowHourISO) {
        currentHourIdx = i;
        break;
      }
    }

    if (currentHourIdx >= 0 && hourlyTemps[currentHourIdx] !== undefined) {
      displayTemp = hourlyTemps[currentHourIdx];
    } else if (hourlyTemps.length) {
      const midIdx = Math.floor(hourlyTemps.length / 2);
      displayTemp = hourlyTemps[midIdx];
    }

    document.getElementById("tempNow").textContent = Math.round(displayTemp);

    const scroll = document.getElementById("hourlyScroll");
    scroll.innerHTML = "";

    hourlyTimes.forEach(function (isoTime, i) {
      const temp = hourlyTemps[i];
      if (temp === undefined || temp === null) return;

      const item = document.createElement("div");
      item.className = "hour-item" + (i === currentHourIdx ? " current" : "");

      const label = document.createElement("div");
      label.className = "h-label";
      label.textContent = formatHourLabel(isoTime);

      const temperature = document.createElement("div");
      temperature.className = "h-temp";
      temperature.textContent = Math.round(temp) + "°";

      item.appendChild(label);
      item.appendChild(temperature);
      scroll.appendChild(item);
    });

    showContent();
  }

  async function init() {
    const params = getParams();
    try {
      const data = await fetchWeather(params);
      render(data, params);
    } catch (err) {
      showError(err && err.message ? err.message : "An unknown error occurred while loading weather data.");
    }
  }

  init();
})();
</script>

</body>
</html>

L1 — cheap deterministic descriptors

bytes total	14,299	html / css / js	1,670 / 4,662 / 7,967
dom nodes	37	dom depth	9
css rules	36	js present	yes
brightness	140.6	contrast	24.6
colorfulness	52.6	whitespace	69.2%

This slot's telemetry

prompt tokens	0	completion tokens	0
total tokens	0	wall	91 s
cost	—	request id	—

config.json583 B

{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_NONE",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "claude-sonnet-5-eff-medium--cli--kiro--dev",
  "effort": "medium",
  "family": "claude",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "claude-sonnet-5",
  "protocol": "cli",
  "served_model": "claude-sonnet-5",
  "telemetry": {
    "completion_tokens": null,
    "cost_usd": null,
    "prompt_tokens": null,
    "total_tokens": null,
    "wall_ms": 444665
  },
  "transport": "kiro-cli-isolated-home-github-social",
  "vendor_sanction_ref": null
}

send-log2.5 KB

{
  "N": 2,
  "batch_id": "2026-07-18--kiro-cli",
  "config_id": "claude-sonnet-5-eff-medium--cli--kiro--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-18T17:32:24.972823+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-18T17:31:08.575330+00:00"
        }
      ],
      "block_index": 0,
      "model_reaching_attempt_index": 0,
      "slot_index": 0,
      "terminal_state": "valid",
      "variant": "P-min"
    },
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-18T17:33:59.620192+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-18T17:32:28.571087+00:00"
        }
      ],
      "block_index": 0,
      "model_reaching_attempt_index": 0,
      "slot_index": 0,
      "terminal_state": "valid",
      "variant": "P-q"
    },
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-18T17:37:19.016098+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-18T17:34:03.370716+00:00"
        }
      ],
      "block_index": 1,
      "model_reaching_attempt_index": 0,
      "slot_index": 1,
      "terminal_state": "valid",
      "variant": "P-q"
    },
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-18T17:38:44.713851+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-18T17:37:22.996679+00:00"
        }
      ],
      "block_index": 1,
      "model_reaching_attempt_index": 0,
      "slot_index": 1,
      "terminal_state": "valid",
      "variant": "P-min"
    }
  ],
  "retry_policy": {
    "max_unreachable_retries": 5,
    "rate_limit_backoff": {
      "max_attempts": 4,
      "max_total_ms": 60000
    }
  }
}