gpt-5.6-luna @ medium · kiro

kiromedium
config
gpt-5.6-luna-eff-medium--cli--kiro--dev
batch
2026-07-19--unified
transport
kiro-cli-isolated-home-github-social
protocol
cli · plan
served model
gpt-5.6-luna
captured
Jul 18, 2026, 11:54 AM · N=2
variant
live
slot 0 · P-q · sandboxed iframe
gpt-5.6-luna @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

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 tempambiguousno-remaining-candidate
  • min tempmatchshown: 16
  • hourlyambiguouscoverage · 0 match · 0 mismatch · 24 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">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weather Card</title>
  <style>
    :root {
      color-scheme: dark;
      --bg: #08111f;
      --panel: rgba(17, 31, 53, .78);
      --panel-strong: #142641;
      --line: rgba(196, 221, 255, .13);
      --text: #f4f8ff;
      --muted: #9eb1ca;
      --accent: #8fd3ff;
      --accent-2: #b6a6ff;
      --warm: #ffc46b;
      --shadow: 0 30px 80px rgba(0, 0, 0, .34);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-width: 1024px;
      min-height: 800px;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 15% 12%, rgba(87, 157, 255, .24), transparent 31%),
        radial-gradient(circle at 88% 10%, rgba(171, 126, 255, .22), transparent 26%),
        linear-gradient(135deg, #07101d 0%, #0d1a2e 52%, #10172d 100%);
      overflow-x: auto;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .26;
      background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(to bottom, black, transparent 75%);
    }

    .app {
      width: 1120px;
      margin: 0 auto;
      padding: 62px 0 54px;
      position: relative;
    }

    .topline {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 30px;
    }

    .eyebrow {
      margin: 0 0 10px;
      color: var(--accent);
      font-size: 12px;
      font-weight: 750;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    h1 {
      margin: 0;
      font-size: 43px;
      line-height: 1;
      letter-spacing: -.045em;
      font-weight: 720;
    }

    .updated {
      color: var(--muted);
      font-size: 13px;
      padding-top: 8px;
      text-align: right;
    }

    .weather-card {
      position: relative;
      overflow: hidden;
      min-height: 625px;
      padding: 33px 36px 30px;
      border: 1px solid var(--line);
      border-radius: 28px;
      background: linear-gradient(145deg, rgba(25, 46, 78, .83), rgba(11, 23, 42, .84));
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
    }

    .weather-card::after {
      content: "";
      position: absolute;
      width: 420px;
      height: 420px;
      right: -150px;
      top: -210px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(121, 187, 255, .18), transparent 68%);
      pointer-events: none;
    }

    .summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 207px;
      border-bottom: 1px solid var(--line);
      padding-bottom: 32px;
    }

    .date-label {
      color: var(--muted);
      font-size: 16px;
      letter-spacing: .01em;
      margin-bottom: 23px;
    }

    .condition {
      display: flex;
      align-items: center;
      gap: 19px;
    }

    .weather-icon {
      display: grid;
      place-items: center;
      width: 88px;
      height: 88px;
      border-radius: 25px;
      color: var(--warm);
      background: linear-gradient(145deg, rgba(255, 198, 113, .18), rgba(122, 169, 255, .12));
      border: 1px solid rgba(255, 210, 133, .18);
      font-size: 47px;
      line-height: 1;
    }

    .condition-text {
      font-size: 21px;
      font-weight: 640;
      letter-spacing: -.02em;
    }

    .condition-sub {
      margin-top: 6px;
      color: var(--muted);
      font-size: 13px;
    }

    .temperatures {
      display: flex;
      align-items: flex-end;
      gap: 30px;
      text-align: right;
    }

    .high {
      font-size: 78px;
      line-height: .87;
      font-weight: 250;
      letter-spacing: -.08em;
    }

    .high sup {
      font-size: 30px;
      vertical-align: top;
      margin-left: 5px;
      letter-spacing: -.02em;
      font-weight: 400;
    }

    .low {
      color: var(--muted);
      font-size: 25px;
      line-height: 1;
      font-weight: 420;
      padding-bottom: 4px;
    }

    .low strong {
      color: #dce9fa;
      font-weight: 500;
    }

    .section-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 27px 0 15px;
    }

    .section-title h2 {
      margin: 0;
      font-size: 14px;
      letter-spacing: .11em;
      text-transform: uppercase;
      color: #d1e0f4;
      font-weight: 720;
    }

    .section-title span {
      color: var(--muted);
      font-size: 12px;
    }

    .hourly {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 9px;
    }

    .hour {
      min-width: 0;
      padding: 14px 6px 13px;
      border: 1px solid transparent;
      border-radius: 16px;
      text-align: center;
      background: rgba(255, 255, 255, .045);
    }

    .hour.current {
      border-color: rgba(143, 211, 255, .39);
      background: linear-gradient(180deg, rgba(98, 174, 255, .25), rgba(98, 174, 255, .08));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    }

    .hour-time {
      color: var(--muted);
      font-size: 11px;
      font-weight: 650;
      letter-spacing: .04em;
    }

    .hour-icon {
      height: 31px;
      display: grid;
      place-items: center;
      color: #a9d8ff;
      font-size: 19px;
      margin: 7px 0 4px;
    }

    .hour-temp {
      color: #f5f8ff;
      font-size: 15px;
      font-weight: 700;
    }

    .hour-unit {
      color: var(--muted);
      font-size: 11px;
      font-weight: 500;
    }

    .footer {
      display: flex;
      justify-content: space-between;
      color: #7188a8;
      font-size: 11px;
      margin-top: 24px;
    }

    .status {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 40px;
      background: rgba(9, 19, 35, .72);
      z-index: 2;
      text-align: center;
    }

    .status[hidden] { display: none; }

    .status-box {
      max-width: 390px;
      padding: 30px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 20px;
      background: rgba(25, 42, 68, .9);
    }

    .status-box h2 { margin: 0 0 9px; font-size: 21px; }
    .status-box p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

    .loading {
      animation: pulse 1.3s ease-in-out infinite alternate;
    }

    @keyframes pulse { from { opacity: .45; } to { opacity: 1; } }
  </style>
</head>
<body>
  <main class="app">
    <header class="topline">
      <div>
        <p class="eyebrow">Daily conditions</p>
        <h1 id="location" class="loading">Loading…</h1>
      </div>
      <div id="updated" class="updated">Fetching forecast</div>
    </header>

    <section class="weather-card" aria-live="polite">
      <div id="status" class="status">
        <div class="status-box">
          <h2 id="status-title">Loading weather</h2>
          <p id="status-text">Getting the latest conditions for your selected date.</p>
        </div>
      </div>

      <div class="summary">
        <div>
          <div id="date" class="date-label">—</div>
          <div class="condition">
            <div id="weather-icon" class="weather-icon">☼</div>
            <div>
              <div id="condition" class="condition-text">—</div>
              <div id="condition-sub" class="condition-sub">Daily outlook</div>
            </div>
          </div>
        </div>
        <div class="temperatures">
          <div id="high" class="high">—<sup>°</sup></div>
          <div id="low" class="low">Low <strong id="low-value">—°</strong></div>
        </div>
      </div>

      <div class="section-title">
        <h2>Hourly temperature</h2>
        <span>UTC · Celsius</span>
      </div>
      <div id="hourly" class="hourly"></div>
      <div class="footer">
        <span>Open-Meteo compatible forecast</span>
        <span id="coordinates">—</span>
      </div>
    </section>
  </main>

  <script>
    (() => {
      const params = new URLSearchParams(location.search);
      const lat = Number.isFinite(Number(params.get("lat"))) ? Number(params.get("lat")) : 52.52;
      const lon = Number.isFinite(Number(params.get("lon"))) ? Number(params.get("lon")) : 13.405;
      const name = params.get("name") || "Berlin";
      const today = new Date().toISOString().slice(0, 10);
      const requestedDate = /^\d{4}-\d{2}-\d{2}$/.test(params.get("date") || "") ? params.get("date") : today;
      const selected = new Date(requestedDate + "T00:00:00Z");
      const isPast = selected < new Date(today + "T00:00:00Z");

      const $ = id => document.getElementById(id);
      const weather = {
        0: ["Clear sky", "☼"], 1: ["Mainly clear", "◒"], 2: ["Partly cloudy", "◐"], 3: ["Overcast", "☁"],
        45: ["Fog", "≋"], 48: ["Depositing rime fog", "≋"],
        51: ["Light drizzle", "⌁"], 53: ["Drizzle", "⌁"], 55: ["Heavy drizzle", "⌁"],
        56: ["Freezing drizzle", "⌁"], 57: ["Freezing drizzle", "⌁"],
        61: ["Light rain", "☂"], 63: ["Rain", "☂"], 65: ["Heavy rain", "☂"],
        66: ["Freezing rain", "☂"], 67: ["Heavy freezing rain", "☂"],
        71: ["Light snow", "✣"], 73: ["Snow", "✣"], 75: ["Heavy snow", "✣"], 77: ["Snow grains", "✣"],
        80: ["Light showers", "☂"], 81: ["Showers", "☂"], 82: ["Heavy showers", "☂"],
        85: ["Snow showers", "✣"], 86: ["Heavy snow showers", "✣"],
        95: ["Thunderstorm", "ϟ"], 96: ["Thunderstorm with hail", "ϟ"], 99: ["Thunderstorm with hail", "ϟ"]
      };

      $("location").textContent = name;
      $("coordinates").textContent = `${lat.toFixed(2)}°, ${lon.toFixed(2)}°`;
      $("date").textContent = selected.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric", year: "numeric", timeZone: "UTC" });

      function fail(message) {
        $("status-title").textContent = "Weather unavailable";
        $("status-text").textContent = message || "The weather data could not be loaded. Please try again.";
        $("location").classList.remove("loading");
        $("status").hidden = false;
      }

      function formatTemp(value) {
        return value == null || Number.isNaN(Number(value)) ? "—" : `${Math.round(Number(value))}°`;
      }

      async function load() {
        const endpoint = isPast ? "/api/om/archive" : "/api/om/forecast";
        const query = new URLSearchParams({
          latitude: String(lat),
          longitude: String(lon),
          daily: "temperature_2m_max,temperature_2m_min,weather_code",
          hourly: "temperature_2m",
          timezone: "UTC",
          temperature_unit: "celsius",
          start_date: requestedDate,
          end_date: requestedDate
        });

        try {
          const response = await fetch(`${endpoint}?${query.toString()}`, { headers: { Accept: "application/json" } });
          if (!response.ok) throw new Error(`Request failed (${response.status})`);
          const data = await response.json();
          if (!data.daily || !data.hourly || !Array.isArray(data.daily.time) || !data.daily.time.length) throw new Error("Incomplete weather data");

          const code = Number(data.daily.weather_code?.[0]);
          const details = weather[code] || ["Conditions unavailable", "•"];
          $("high").innerHTML = `${formatTemp(data.daily.temperature_2m_max?.[0]).replace("°", "")}<sup>°</sup>`;
          $("low-value").textContent = formatTemp(data.daily.temperature_2m_min?.[0]);
          $("condition").textContent = details[0];
          $("condition-sub").textContent = isPast ? "Recorded conditions" : "Daily outlook";
          $("weather-icon").textContent = details[1];
          $("updated").textContent = `${isPast ? "Historical weather" : "Forecast"} · UTC`;
          $("location").classList.remove("loading");

          const times = data.hourly.time || [];
          const values = data.hourly.temperature_2m || [];
          const start = times.findIndex(t => t.startsWith(requestedDate));
          const offset = start >= 0 ? start : 0;
          $("hourly").innerHTML = times.slice(offset, offset + 12).map((time, i) => {
            const hour = new Date(time + "Z").getUTCHours();
            const current = hour === new Date().getUTCHours() && requestedDate === today;
            return `<div class="hour${current ? " current" : ""}">
              <div class="hour-time">${String(hour).padStart(2, "0")}:00</div>
              <div class="hour-icon">${details[1]}</div>
              <div class="hour-temp">${formatTemp(values[offset + i]).replace("°", "")}<span class="hour-unit">°</span></div>
            </div>`;
          }).join("");
          $("status").hidden = true;
        } catch (error) {
          fail("The weather data could not be loaded for this date. Please check the location or try again.");
        }
      }

      if (!Number.isFinite(lat) || !Number.isFinite(lon)) {
        fail("The latitude or longitude is not valid.");
      } else {
        load();
      }
    })();
  </script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total13,343html / css / js1,737 / 6,515 / 5,091
dom nodes39dom depth9
css rules42js presentyes
brightness34.8contrast15.5
colorfulness17.4whitespace67.8%

This slot's telemetry

prompt tokens0completion tokens0
total tokens0wall22 s
costrequest id
config.json570 B
{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_NONE",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "gpt-5.6-luna-eff-medium--cli--kiro--dev",
  "effort": "medium",
  "family": "gpt",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "gpt-5.6-luna",
  "protocol": "cli",
  "served_model": "gpt-5.6-luna",
  "telemetry": {
    "completion_tokens": null,
    "cost_usd": null,
    "prompt_tokens": null,
    "total_tokens": null,
    "wall_ms": 86837
  },
  "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": "gpt-5.6-luna-eff-medium--cli--kiro--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-18T18:18:39.253973+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-18T18:18:17.220385+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-18T18:19:07.216599+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-18T18:18:43.532908+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-18T18:19:29.945781+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-18T18:19:10.769008+00:00"
        }
      ],
      "block_index": 1,
      "model_reaching_attempt_index": 0,
      "slot_index": 1,
      "terminal_state": "valid",
      "variant": "P-min"
    },
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-18T18:19:55.508288+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-18T18:19:33.410662+00:00"
        }
      ],
      "block_index": 1,
      "model_reaching_attempt_index": 0,
      "slot_index": 1,
      "terminal_state": "valid",
      "variant": "P-q"
    }
  ],
  "retry_policy": {
    "max_unreachable_retries": 5,
    "rate_limit_backoff": {
      "max_attempts": 4,
      "max_total_ms": 60000
    }
  }
}