claude-sonnet-4-6 @ high · kiro

kirohigh
config
claude-sonnet-4-6-eff-high--cli--kiro--dev
batch
2026-07-19--unified
transport
kiro-cli-isolated-home-github-social
protocol
cli · plan
served model
claude-sonnet-4.6
captured
Jul 18, 2026, 11:54 AM · N=2
variant
live
slot 0 · P-q · sandboxed iframe
claude-sonnet-4-6 @high · 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 tempnot-foundno-temperature-candidate
  • min tempnot-foundno-temperature-candidate
  • hourlynot-foundcoverage · 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=1280" />
  <title>Weather Card</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      min-height: 100vh;
      background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      color: #fff;
    }

    .page {
      width: 100%;
      max-width: 980px;
      padding: 40px 24px;
    }

    /* ── Main card ── */
    .card {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 28px;
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      box-shadow: 0 32px 80px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.1);
      overflow: hidden;
    }

    /* ── Header row ── */
    .card-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 40px 48px 0;
    }

    .location-block {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

    .pin-icon {
      width: 22px;
      height: 22px;
      margin-top: 4px;
      opacity: 0.6;
      flex-shrink: 0;
    }

    .location-name {
      font-size: 2rem;
      font-weight: 700;
      letter-spacing: -0.5px;
      line-height: 1.1;
    }

    .location-date {
      margin-top: 6px;
      font-size: 0.95rem;
      font-weight: 400;
      opacity: 0.55;
      letter-spacing: 0.4px;
    }

    .condition-block {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
    }

    .condition-icon {
      font-size: 3.6rem;
      line-height: 1;
      filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
    }

    .condition-label {
      font-size: 0.9rem;
      font-weight: 500;
      opacity: 0.65;
      text-align: right;
      max-width: 180px;
    }

    /* ── Temperature block ── */
    .temp-block {
      display: flex;
      align-items: baseline;
      gap: 4px;
      padding: 28px 48px 0;
    }

    .temp-max {
      font-size: 5.5rem;
      font-weight: 800;
      letter-spacing: -3px;
      line-height: 1;
      background: linear-gradient(135deg, #fff 30%, rgba(255,255,255,0.6));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .temp-divider {
      font-size: 3rem;
      font-weight: 300;
      opacity: 0.35;
      padding: 0 6px;
      line-height: 1;
      margin-bottom: 4px;
    }

    .temp-min {
      font-size: 3rem;
      font-weight: 300;
      opacity: 0.55;
      line-height: 1;
      margin-bottom: 4px;
    }

    .temp-unit {
      font-size: 2rem;
      font-weight: 300;
      opacity: 0.5;
      margin-left: 4px;
      margin-bottom: 8px;
    }

    /* ── Hourly section ── */
    .hourly-section {
      padding: 36px 48px 40px;
    }

    .hourly-title {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      opacity: 0.4;
      margin-bottom: 20px;
    }

    .hourly-chart-wrap {
      width: 100%;
      overflow: hidden;
      border-radius: 12px;
    }

    canvas#hourly-canvas {
      width: 100%;
      height: 160px;
      display: block;
    }

    .hourly-labels {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      padding: 0 2px;
    }

    .hourly-label {
      font-size: 0.72rem;
      opacity: 0.4;
      font-weight: 500;
      letter-spacing: 0.3px;
    }

    /* ── Error card ── */
    .error-card {
      background: rgba(255, 80, 80, 0.08);
      border: 1px solid rgba(255, 100, 100, 0.25);
      border-radius: 28px;
      padding: 60px 48px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      text-align: center;
    }

    .error-card svg {
      width: 52px;
      height: 52px;
      opacity: 0.55;
      color: #ff6b6b;
    }

    .error-title {
      font-size: 1.4rem;
      font-weight: 600;
      opacity: 0.85;
    }

    .error-msg {
      font-size: 0.9rem;
      opacity: 0.5;
      max-width: 420px;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <div class="page">
    <div class="card" id="card">
      <div class="card-header">
        <div class="location-block">
          <svg class="pin-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
          <div>
            <div class="location-name" id="location-name">—</div>
            <div class="location-date" id="location-date">—</div>
          </div>
        </div>
        <div class="condition-block">
          <div class="condition-icon" id="condition-icon">—</div>
          <div class="condition-label" id="condition-label">—</div>
        </div>
      </div>

      <div class="temp-block">
        <div class="temp-max" id="temp-max">—</div>
        <div class="temp-divider">/</div>
        <div class="temp-min" id="temp-min">—</div>
        <div class="temp-unit">°C</div>
      </div>

      <div class="hourly-section">
        <div class="hourly-title">Hourly Temperature</div>
        <div class="hourly-chart-wrap">
          <canvas id="hourly-canvas" width="900" height="160"></canvas>
        </div>
        <div class="hourly-labels" id="hourly-labels"></div>
      </div>
    </div>

    <div class="error-card" id="error-card" style="display:none">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
      <div class="error-title">Unable to load weather data</div>
      <div class="error-msg" id="error-msg"></div>
    </div>
  </div>

  <script>
  (function () {
    // ── URL param parsing ───────────────────────────────────────────────────
    const sp   = new URLSearchParams(location.search);
    const lat  = parseFloat(sp.get('lat')  ?? '52.52');
    const lon  = parseFloat(sp.get('lon')  ?? '13.405');
    const name = sp.get('name') ?? 'Berlin';
    const todayUTC = new Date().toISOString().slice(0, 10);
    const date = sp.get('date') ?? todayUTC;

    // ── Weather-code helpers ────────────────────────────────────────────────
    const WMO = {
      0:  ['Clear sky',              '☀️'],
      1:  ['Mainly clear',           '🌤️'],
      2:  ['Partly cloudy',          '⛅'],
      3:  ['Overcast',               '☁️'],
      45: ['Foggy',                  '🌫️'],
      48: ['Icy fog',                '🌫️'],
      51: ['Light drizzle',          '🌦️'],
      53: ['Moderate drizzle',       '🌦️'],
      55: ['Dense drizzle',          '🌧️'],
      61: ['Slight rain',            '🌧️'],
      63: ['Moderate rain',          '🌧️'],
      65: ['Heavy rain',             '🌧️'],
      66: ['Light freezing rain',    '🌨️'],
      67: ['Heavy freezing rain',    '🌨️'],
      71: ['Slight snow',            '❄️'],
      73: ['Moderate snow',          '❄️'],
      75: ['Heavy snow',             '❄️'],
      77: ['Snow grains',            '🌨️'],
      80: ['Slight showers',         '🌦️'],
      81: ['Moderate showers',       '🌦️'],
      82: ['Violent showers',        '⛈️'],
      85: ['Slight snow showers',    '🌨️'],
      86: ['Heavy snow showers',     '🌨️'],
      95: ['Thunderstorm',           '⛈️'],
      96: ['Thunderstorm w/ hail',   '⛈️'],
      99: ['Thunderstorm w/ hail',   '⛈️'],
    };

    function wmoInfo(code) {
      return WMO[code] ?? ['Unknown', '🌡️'];
    }

    // ── Date formatting ─────────────────────────────────────────────────────
    function formatDate(iso) {
      const [y, m, d] = iso.split('-').map(Number);
      const dt = new Date(Date.UTC(y, m - 1, d));
      return dt.toLocaleDateString('en-GB', {
        weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC'
      });
    }

    // ── Determine endpoint ──────────────────────────────────────────────────
    function chooseEndpoint(iso) {
      // archive for strictly past dates; forecast for today or future
      const today = new Date();
      today.setUTCHours(0, 0, 0, 0);
      const req = new Date(iso + 'T00:00:00Z');
      return req < today ? '/api/om/archive' : '/api/om/forecast';
    }

    // ── Fetch weather ───────────────────────────────────────────────────────
    async function fetchWeather() {
      const endpoint = chooseEndpoint(date);
      const params = new URLSearchParams({
        latitude:         lat,
        longitude:        lon,
        daily:            'temperature_2m_max,temperature_2m_min,weather_code',
        hourly:           'temperature_2m',
        timezone:         'UTC',
        temperature_unit: 'celsius',
        start_date:       date,
        end_date:         date,
      });
      const url = `${endpoint}?${params}`;
      const res = await fetch(url);
      if (!res.ok) throw new Error(`HTTP ${res.status} from ${endpoint}`);
      return res.json();
    }

    // ── Canvas chart ────────────────────────────────────────────────────────
    function drawChart(temps) {
      const canvas = document.getElementById('hourly-canvas');
      const ctx    = canvas.getContext('2d');
      const W      = canvas.width;
      const H      = canvas.height;
      const PAD    = { top: 24, right: 24, bottom: 24, left: 24 };
      const innerW = W - PAD.left - PAD.right;
      const innerH = H - PAD.top  - PAD.bottom;

      ctx.clearRect(0, 0, W, H);

      const min = Math.min(...temps);
      const max = Math.max(...temps);
      const range = max - min || 1;

      const xStep = innerW / (temps.length - 1);
      const yOf   = t => PAD.top + innerH * (1 - (t - min) / range);

      // Build point array
      const pts = temps.map((t, i) => [PAD.left + i * xStep, yOf(t)]);

      // Gradient fill under the curve
      const grad = ctx.createLinearGradient(0, PAD.top, 0, H);
      grad.addColorStop(0,   'rgba(130, 180, 255, 0.35)');
      grad.addColorStop(1,   'rgba(130, 180, 255, 0.02)');

      ctx.beginPath();
      ctx.moveTo(pts[0][0], pts[0][1]);
      for (let i = 1; i < pts.length; i++) {
        const [x0, y0] = pts[i - 1];
        const [x1, y1] = pts[i];
        const cx = (x0 + x1) / 2;
        ctx.bezierCurveTo(cx, y0, cx, y1, x1, y1);
      }
      ctx.lineTo(pts[pts.length - 1][0], H);
      ctx.lineTo(pts[0][0], H);
      ctx.closePath();
      ctx.fillStyle = grad;
      ctx.fill();

      // Stroke the curve
      ctx.beginPath();
      ctx.moveTo(pts[0][0], pts[0][1]);
      for (let i = 1; i < pts.length; i++) {
        const [x0, y0] = pts[i - 1];
        const [x1, y1] = pts[i];
        const cx = (x0 + x1) / 2;
        ctx.bezierCurveTo(cx, y0, cx, y1, x1, y1);
      }
      ctx.strokeStyle = 'rgba(160, 210, 255, 0.85)';
      ctx.lineWidth   = 2.5;
      ctx.lineJoin    = 'round';
      ctx.stroke();

      // Dots and temperature labels every 3 hours
      ctx.font      = '11px "Segoe UI", system-ui, sans-serif';
      ctx.textAlign = 'center';
      for (let i = 0; i < pts.length; i++) {
        const [x, y] = pts[i];
        ctx.beginPath();
        ctx.arc(x, y, i % 3 === 0 ? 4 : 2.5, 0, Math.PI * 2);
        ctx.fillStyle   = 'rgba(200, 230, 255, 0.9)';
        ctx.fill();
        ctx.strokeStyle = 'rgba(100, 160, 220, 0.6)';
        ctx.lineWidth   = 1;
        ctx.stroke();

        if (i % 3 === 0) {
          ctx.fillStyle = 'rgba(200, 225, 255, 0.7)';
          ctx.fillText(`${Math.round(temps[i])}°`, x, y - 10);
        }
      }
    }

    // ── Render success ──────────────────────────────────────────────────────
    function render(data) {
      document.getElementById('location-name').textContent = name;
      document.getElementById('location-date').textContent = formatDate(date);

      const daily = data.daily;
      const tMax  = daily.temperature_2m_max[0];
      const tMin  = daily.temperature_2m_min[0];
      const code  = daily.weather_code[0];
      const [label, icon] = wmoInfo(code);

      document.getElementById('temp-max').textContent       = tMax != null ? Math.round(tMax) : '—';
      document.getElementById('temp-min').textContent       = tMin != null ? Math.round(tMin) : '—';
      document.getElementById('condition-icon').textContent  = icon;
      document.getElementById('condition-label').textContent = label;

      // Hourly — slice to 24 values for the requested day
      const allHourly = data.hourly?.temperature_2m ?? [];
      const temps     = allHourly.slice(0, 24);

      if (temps.length > 1) {
        drawChart(temps);
        const labelsEl = document.getElementById('hourly-labels');
        ['00:00', '06:00', '12:00', '18:00', '24:00'].forEach(h => {
          const span = document.createElement('span');
          span.className   = 'hourly-label';
          span.textContent = h;
          labelsEl.appendChild(span);
        });
      } else {
        document.querySelector('.hourly-section').style.display = 'none';
      }

      document.getElementById('card').style.display       = '';
      document.getElementById('error-card').style.display = 'none';
    }

    // ── Render error ────────────────────────────────────────────────────────
    function renderError(msg) {
      document.getElementById('card').style.display       = 'none';
      document.getElementById('error-card').style.display = '';
      document.getElementById('error-msg').textContent    = msg;
    }

    // ── Bootstrap ───────────────────────────────────────────────────────────
    document.getElementById('card').style.display       = '';
    document.getElementById('error-card').style.display = 'none';

    fetchWeather()
      .then(render)
      .catch(err => renderError(`Could not fetch data for ${name} on ${date}. ${err.message}`));
  })();
  </script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total15,336html / css / js1,967 / 4,216 / 9,153
dom nodes38dom depth8
css rules27js presentyes
brightness50.8contrast19.2
colorfulness20.9whitespace81.4%

This slot's telemetry

prompt tokens0completion tokens0
total tokens0wall281 s
costrequest id
config.json585 B
{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_NONE",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "claude-sonnet-4-6-eff-high--cli--kiro--dev",
  "effort": "high",
  "family": "claude",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "claude-sonnet-4-6",
  "protocol": "cli",
  "served_model": "claude-sonnet-4.6",
  "telemetry": {
    "completion_tokens": null,
    "cost_usd": null,
    "prompt_tokens": null,
    "total_tokens": null,
    "wall_ms": 535381
  },
  "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-4-6-eff-high--cli--kiro--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-18T16:43:53.539656+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-18T16:43:02.616489+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-18T16:48:38.051351+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-18T16:43:56.900262+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-18T16:51:04.603874+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-18T16:48:42.747234+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-18T16:52:09.660483+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-18T16:51:07.604494+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
    }
  }
}