claude-opus-4-7 @ high · kiro

kirohigh
config
claude-opus-4-7-eff-high--cli--kiro--dev
batch
2026-07-19--unified
transport
kiro-cli-isolated-home-github-social
protocol
cli · plan
served model
claude-opus-4.7
captured
Jul 18, 2026, 11:54 AM · N=2
variant
live
slot 0 · P-q · sandboxed iframe
claude-opus-4-7 @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 tempambiguousinsufficient-distinct-temperature-nodes
  • min tempambiguousinsufficient-distinct-temperature-nodes
  • 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=1280">
<title>Weather</title>
<style>
  :root{
    --bg-a:#0b1220;
    --bg-b:#1b2942;
    --card:rgba(255,255,255,0.08);
    --card-border:rgba(255,255,255,0.14);
    --ink:#f5f8ff;
    --ink-dim:rgba(245,248,255,0.72);
    --ink-mute:rgba(245,248,255,0.5);
    --accent:#ffd166;
    --hi:#ff8a5b;
    --lo:#7cc4ff;
    --shadow:0 30px 80px rgba(0,0,0,0.45);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;height:100%}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,Roboto,sans-serif;
    color:var(--ink);
    background:
      radial-gradient(1200px 700px at 80% -10%,rgba(255,209,102,0.18),transparent 60%),
      radial-gradient(900px 600px at 10% 110%,rgba(124,196,255,0.20),transparent 60%),
      linear-gradient(160deg,var(--bg-a) 0%,var(--bg-b) 100%);
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    letter-spacing:-0.01em;
    -webkit-font-smoothing:antialiased;
  }
  .stage{width:1280px;height:800px;display:flex;align-items:center;justify-content:center;padding:60px}
  .card{
    width:100%;
    height:100%;
    background:var(--card);
    backdrop-filter:blur(20px) saturate(140%);
    -webkit-backdrop-filter:blur(20px) saturate(140%);
    border:1px solid var(--card-border);
    border-radius:28px;
    box-shadow:var(--shadow);
    padding:44px 52px;
    display:grid;
    grid-template-columns:1.05fr 1fr;
    grid-template-rows:auto 1fr auto;
    gap:28px 44px;
    position:relative;
    overflow:hidden;
  }
  .card::before{
    content:"";
    position:absolute;inset:0;
    background:radial-gradient(600px 300px at 90% 0%,rgba(255,255,255,0.10),transparent 60%);
    pointer-events:none;
  }
  header{
    grid-column:1 / -1;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
  }
  .place{display:flex;flex-direction:column;gap:6px;min-width:0}
  .eyebrow{
    text-transform:uppercase;
    letter-spacing:0.22em;
    font-size:11px;
    color:var(--ink-mute);
    font-weight:600;
  }
  .name{
    font-size:44px;
    font-weight:700;
    line-height:1.05;
    letter-spacing:-0.02em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .date{
    font-size:15px;
    color:var(--ink-dim);
    font-weight:500;
  }
  .coords{
    font-size:12px;
    color:var(--ink-mute);
    font-variant-numeric:tabular-nums;
    text-align:right;
    line-height:1.5;
  }

  .primary{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:24px;
    min-width:0;
  }
  .icon-wrap{
    display:flex;align-items:center;gap:20px;
  }
  .icon{
    width:96px;height:96px;
    flex:0 0 96px;
    filter:drop-shadow(0 10px 24px rgba(0,0,0,0.35));
  }
  .cond{
    font-size:26px;
    font-weight:600;
    letter-spacing:-0.01em;
  }
  .cond-sub{
    font-size:13px;
    color:var(--ink-mute);
    margin-top:2px;
    text-transform:uppercase;
    letter-spacing:0.15em;
  }
  .temps{
    display:flex;
    align-items:baseline;
    gap:22px;
    flex-wrap:wrap;
  }
  .t-max{
    font-size:120px;
    font-weight:700;
    line-height:0.9;
    letter-spacing:-0.05em;
    color:var(--ink);
    font-variant-numeric:tabular-nums;
  }
  .t-max .deg{color:var(--hi)}
  .t-min-block{display:flex;flex-direction:column;gap:4px}
  .t-min-label{
    font-size:11px;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--ink-mute);
    font-weight:600;
  }
  .t-min{
    font-size:34px;
    font-weight:600;
    color:var(--lo);
    font-variant-numeric:tabular-nums;
    letter-spacing:-0.02em;
  }
  .range{
    height:6px;
    background:linear-gradient(90deg,var(--lo),var(--accent),var(--hi));
    border-radius:99px;
    max-width:340px;
    opacity:0.85;
  }

  .hourly{
    grid-column:2;
    grid-row:2;
    display:flex;
    flex-direction:column;
    gap:14px;
    min-width:0;
  }
  .hourly-head{
    display:flex;align-items:center;justify-content:space-between;
  }
  .hourly-title{
    text-transform:uppercase;
    letter-spacing:0.22em;
    font-size:11px;
    color:var(--ink-mute);
    font-weight:600;
  }
  .hourly-summary{
    font-size:12px;color:var(--ink-mute);font-variant-numeric:tabular-nums;
  }
  .chart{
    flex:1;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:18px;
    padding:16px 14px 10px;
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  .chart svg{display:block;width:100%;height:100%;overflow:visible}
  .chart-axis text{fill:var(--ink-mute);font-size:10px;font-family:inherit}
  .chart-grid line{stroke:rgba(255,255,255,0.06);stroke-width:1}
  .chart-line{fill:none;stroke:url(#lineGrad);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
  .chart-area{fill:url(#areaGrad);opacity:0.55}
  .chart-dot{fill:#fff}
  .chart-hilabel{fill:var(--hi);font-size:10px;font-weight:600;font-family:inherit;font-variant-numeric:tabular-nums}
  .chart-lolabel{fill:var(--lo);font-size:10px;font-weight:600;font-family:inherit;font-variant-numeric:tabular-nums}

  footer{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,0.08);
    font-size:12px;
    color:var(--ink-mute);
    letter-spacing:0.06em;
  }
  footer .bullet{opacity:0.5;margin:0 10px}

  .state{
    grid-column:1 / -1;
    grid-row:2;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:14px;
    color:var(--ink-dim);
  }
  .state.error{color:#ffb3b3}
  .spinner{
    width:36px;height:36px;border-radius:50%;
    border:3px solid rgba(255,255,255,0.15);
    border-top-color:#fff;
    animation:spin 0.9s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg)}}

  .hidden{display:none !important}
</style>
</head>
<body>
<div class="stage">
  <div class="card" id="card">
    <header>
      <div class="place">
        <div class="eyebrow">Weather</div>
        <div class="name" id="name">—</div>
        <div class="date" id="date">—</div>
      </div>
      <div class="coords" id="coords">—</div>
    </header>

    <section class="primary" id="primary" style="visibility:hidden">
      <div class="icon-wrap">
        <div id="iconSlot"></div>
        <div>
          <div class="cond" id="cond">—</div>
          <div class="cond-sub" id="condSub">—</div>
        </div>
      </div>
      <div class="temps">
        <div class="t-max"><span id="tmax">–</span><span class="deg">°</span></div>
        <div class="t-min-block">
          <div class="t-min-label">Low</div>
          <div class="t-min"><span id="tmin">–</span>°</div>
        </div>
      </div>
      <div class="range"></div>
    </section>

    <section class="hourly" id="hourly" style="visibility:hidden">
      <div class="hourly-head">
        <div class="hourly-title">Hourly · °C</div>
        <div class="hourly-summary" id="hsum">—</div>
      </div>
      <div class="chart" id="chart"></div>
    </section>

    <div class="state" id="loading">
      <div class="spinner"></div>
      <div>Loading forecast…</div>
    </div>
    <div class="state error hidden" id="error">
      <div style="font-size:34px">⚠︎</div>
      <div id="errMsg">Unable to load weather data.</div>
    </div>

    <footer>
      <div>Open-Meteo compatible · same-origin API</div>
      <div id="metaRight">— <span class="bullet">·</span> —</div>
    </footer>
  </div>
</div>

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

  const isPast = date < todayUTC;
  const endpoint = isPast ? '/api/om/archive' : '/api/om/forecast';

  // Header basics
  document.getElementById('name').textContent = name;
  document.getElementById('date').textContent = formatDate(date);
  document.getElementById('coords').innerHTML =
    fmtCoord(lat,'N','S') + '<br>' + fmtCoord(lon,'E','W');
  document.getElementById('metaRight').innerHTML =
    (isPast ? 'Archive' : 'Forecast') + ' <span class="bullet">·</span> ' + date;

  function fmtCoord(v, pos, neg){
    const s = v >= 0 ? pos : neg;
    return Math.abs(v).toFixed(3) + '° ' + s;
  }
  function formatDate(iso){
    const [y,m,d] = iso.split('-').map(Number);
    if(!y||!m||!d) return iso;
    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'});
  }

  const url = endpoint + '?' + 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
  }).toString();

  fetch(url, {headers:{'Accept':'application/json'}})
    .then(r => {
      if(!r.ok) throw new Error('HTTP ' + r.status);
      return r.json();
    })
    .then(render)
    .catch(err => showError(err && err.message ? err.message : 'Network error'));

  function showError(msg){
    document.getElementById('loading').classList.add('hidden');
    const e = document.getElementById('error');
    e.classList.remove('hidden');
    document.getElementById('errMsg').textContent = 'Unable to load weather data. ' + msg;
  }

  function render(data){
    try{
      const daily = data && data.daily;
      const hourly = data && data.hourly;
      if(!daily || !Array.isArray(daily.time) || daily.time.length === 0) throw new Error('No daily data');

      const idx = Math.max(0, daily.time.indexOf(date));
      const tmax = daily.temperature_2m_max[idx];
      const tmin = daily.temperature_2m_min[idx];
      const wcode = daily.weather_code[idx];

      document.getElementById('tmax').textContent = Math.round(tmax);
      document.getElementById('tmin').textContent = Math.round(tmin);

      const wc = describeWeather(wcode);
      document.getElementById('cond').textContent = wc.label;
      document.getElementById('condSub').textContent = wc.sub;
      document.getElementById('iconSlot').innerHTML = wc.icon;

      // Hourly
      let times = [], temps = [];
      if(hourly && Array.isArray(hourly.time)){
        for(let i=0;i<hourly.time.length;i++){
          const t = hourly.time[i];
          if(typeof t === 'string' && t.startsWith(date)){
            times.push(t.slice(11,16));
            temps.push(hourly.temperature_2m[i]);
          }
        }
      }
      if(temps.length > 0){
        drawChart(times, temps);
        const avg = temps.reduce((a,b)=>a+b,0)/temps.length;
        document.getElementById('hsum').textContent =
          'avg ' + avg.toFixed(1) + '°  ·  ' + temps.length + ' hrs';
      } else {
        document.getElementById('chart').innerHTML =
          '<div style="margin:auto;color:var(--ink-mute);font-size:13px">No hourly data</div>';
      }

      document.getElementById('loading').classList.add('hidden');
      document.getElementById('primary').style.visibility = 'visible';
      document.getElementById('hourly').style.visibility = 'visible';
    }catch(e){
      showError(e.message || 'Malformed response');
    }
  }

  function drawChart(labels, values){
    const W = 560, H = 300;
    const pad = {l:36,r:20,t:26,b:28};
    const iw = W - pad.l - pad.r;
    const ih = H - pad.t - pad.b;
    const min = Math.min.apply(null, values);
    const max = Math.max.apply(null, values);
    const span = Math.max(1, max - min);
    const yMin = min - span*0.15;
    const yMax = max + span*0.15;
    const xOf = i => pad.l + (values.length===1?iw/2:(iw * i / (values.length-1)));
    const yOf = v => pad.t + ih - ((v - yMin)/(yMax - yMin))*ih;

    // Line path
    let d = '';
    for(let i=0;i<values.length;i++){
      d += (i===0?'M':'L') + xOf(i).toFixed(1) + ',' + yOf(values[i]).toFixed(1) + ' ';
    }
    // Area path
    let a = d + 'L' + xOf(values.length-1).toFixed(1) + ',' + (pad.t+ih) +
                ' L' + xOf(0).toFixed(1) + ',' + (pad.t+ih) + ' Z';

    // Y ticks
    const ticks = 4;
    let grid = '', axis = '';
    for(let i=0;i<=ticks;i++){
      const y = pad.t + (ih*i/ticks);
      const v = yMax - (yMax-yMin)*i/ticks;
      grid += `<line x1="${pad.l}" y1="${y}" x2="${W-pad.r}" y2="${y}"/>`;
      axis += `<text x="${pad.l-8}" y="${y+3}" text-anchor="end">${Math.round(v)}°</text>`;
    }
    // X labels every few hours
    let xax = '';
    const step = Math.max(1, Math.ceil(values.length/6));
    for(let i=0;i<values.length;i+=step){
      xax += `<text x="${xOf(i)}" y="${H-pad.b+16}" text-anchor="middle">${labels[i]}</text>`;
    }
    // Highlight hi/lo dots
    const iMax = values.indexOf(max);
    const iMin = values.indexOf(min);
    const dots = `
      <circle class="chart-dot" cx="${xOf(iMax)}" cy="${yOf(max)}" r="4" fill="#ff8a5b"/>
      <circle class="chart-dot" cx="${xOf(iMin)}" cy="${yOf(min)}" r="4" fill="#7cc4ff"/>
      <text class="chart-hilabel" x="${xOf(iMax)}" y="${yOf(max)-10}" text-anchor="middle">${Math.round(max)}°</text>
      <text class="chart-lolabel" x="${xOf(iMin)}" y="${yOf(min)+16}" text-anchor="middle">${Math.round(min)}°</text>
    `;

    document.getElementById('chart').innerHTML = `
      <svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="none">
        <defs>
          <linearGradient id="lineGrad" x1="0" x2="1" y1="0" y2="0">
            <stop offset="0%" stop-color="#7cc4ff"/>
            <stop offset="60%" stop-color="#ffd166"/>
            <stop offset="100%" stop-color="#ff8a5b"/>
          </linearGradient>
          <linearGradient id="areaGrad" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stop-color="#ffd166" stop-opacity="0.45"/>
            <stop offset="100%" stop-color="#ffd166" stop-opacity="0"/>
          </linearGradient>
        </defs>
        <g class="chart-grid">${grid}</g>
        <path class="chart-area" d="${a}"/>
        <path class="chart-line" d="${d}"/>
        ${dots}
        <g class="chart-axis">${axis}${xax}</g>
      </svg>
    `;
  }

  function describeWeather(code){
    // WMO weather interpretation codes
    const map = {
      0:  {label:'Clear sky',           sub:'Sunny',              icon:'sun'},
      1:  {label:'Mainly clear',        sub:'Mostly sunny',       icon:'sun-cloud'},
      2:  {label:'Partly cloudy',       sub:'Mixed sun & cloud',  icon:'sun-cloud'},
      3:  {label:'Overcast',            sub:'Cloudy skies',       icon:'cloud'},
      45: {label:'Fog',                 sub:'Low visibility',     icon:'fog'},
      48: {label:'Depositing rime fog', sub:'Freezing fog',       icon:'fog'},
      51: {label:'Light drizzle',       sub:'Drizzle',            icon:'drizzle'},
      53: {label:'Drizzle',             sub:'Moderate drizzle',   icon:'drizzle'},
      55: {label:'Dense drizzle',       sub:'Heavy drizzle',      icon:'drizzle'},
      56: {label:'Light freezing drizzle', sub:'Freezing',        icon:'drizzle'},
      57: {label:'Freezing drizzle',    sub:'Freezing',           icon:'drizzle'},
      61: {label:'Slight rain',         sub:'Light rain',         icon:'rain'},
      63: {label:'Rain',                sub:'Moderate rain',      icon:'rain'},
      65: {label:'Heavy rain',          sub:'Downpour',           icon:'rain'},
      66: {label:'Freezing rain',       sub:'Freezing',           icon:'rain'},
      67: {label:'Heavy freezing rain', sub:'Freezing',           icon:'rain'},
      71: {label:'Slight snow',         sub:'Light snow',         icon:'snow'},
      73: {label:'Snow',                sub:'Moderate snow',      icon:'snow'},
      75: {label:'Heavy snow',          sub:'Snowfall',           icon:'snow'},
      77: {label:'Snow grains',         sub:'Snow',               icon:'snow'},
      80: {label:'Rain showers',        sub:'Showers',            icon:'rain'},
      81: {label:'Rain showers',        sub:'Moderate showers',   icon:'rain'},
      82: {label:'Violent showers',     sub:'Heavy showers',      icon:'rain'},
      85: {label:'Snow showers',        sub:'Light snow showers', icon:'snow'},
      86: {label:'Snow showers',        sub:'Heavy snow showers', icon:'snow'},
      95: {label:'Thunderstorm',        sub:'Storm',              icon:'storm'},
      96: {label:'Thunderstorm w/ hail',sub:'Severe storm',       icon:'storm'},
      99: {label:'Thunderstorm w/ hail',sub:'Severe storm',       icon:'storm'}
    };
    const d = map[code] || {label:'Unknown', sub:'Code '+code, icon:'cloud'};
    return {label:d.label, sub:d.sub, icon:iconSvg(d.icon)};
  }

  function iconSvg(kind){
    const size = 96;
    const common = `width="${size}" height="${size}" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg"`;
    switch(kind){
      case 'sun':
        return `<svg ${common}>
          <defs><radialGradient id="g1" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stop-color="#ffe08a"/><stop offset="100%" stop-color="#ffb347"/>
          </radialGradient></defs>
          <g stroke="#ffd166" stroke-width="3" stroke-linecap="round">
            <line x1="48" y1="8"  x2="48" y2="18"/>
            <line x1="48" y1="78" x2="48" y2="88"/>
            <line x1="8"  y1="48" x2="18" y2="48"/>
            <line x1="78" y1="48" x2="88" y2="48"/>
            <line x1="19" y1="19" x2="26" y2="26"/>
            <line x1="70" y1="70" x2="77" y2="77"/>
            <line x1="77" y1="19" x2="70" y2="26"/>
            <line x1="26" y1="70" x2="19" y2="77"/>
          </g>
          <circle cx="48" cy="48" r="20" fill="url(#g1)"/>
        </svg>`;
      case 'sun-cloud':
        return `<svg ${common}>
          <defs><radialGradient id="g2" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stop-color="#ffe08a"/><stop offset="100%" stop-color="#ffb347"/>
          </radialGradient></defs>
          <circle cx="34" cy="34" r="14" fill="url(#g2)"/>
          <g stroke="#ffd166" stroke-width="2.5" stroke-linecap="round">
            <line x1="34" y1="10" x2="34" y2="16"/>
            <line x1="10" y1="34" x2="16" y2="34"/>
            <line x1="17" y1="17" x2="21" y2="21"/>
            <line x1="47" y1="21" x2="51" y2="17"/>
          </g>
          <path d="M30 66 Q30 54 42 54 Q46 44 58 46 Q70 46 72 58 Q84 58 84 68 Q84 78 74 78 L38 78 Q28 78 30 66 Z"
            fill="#e8eefc" stroke="#c9d4ec" stroke-width="1.5"/>
        </svg>`;
      case 'cloud':
        return `<svg ${common}>
          <path d="M22 62 Q22 48 36 48 Q40 34 56 36 Q72 36 74 52 Q86 52 86 64 Q86 76 74 76 L32 76 Q20 76 22 62 Z"
            fill="#dfe7f7" stroke="#b8c5e0" stroke-width="1.5"/>
        </svg>`;
      case 'fog':
        return `<svg ${common}>
          <path d="M22 46 Q22 32 36 32 Q40 20 56 22 Q72 22 74 38 Q86 38 86 50 Q86 62 74 62 L32 62 Q20 62 22 46 Z"
            fill="#dfe7f7" stroke="#b8c5e0" stroke-width="1.5"/>
          <g stroke="#b8c5e0" stroke-width="3" stroke-linecap="round">
            <line x1="18" y1="72" x2="78" y2="72"/>
            <line x1="26" y1="82" x2="86" y2="82"/>
          </g>
        </svg>`;
      case 'drizzle':
        return `<svg ${common}>
          <path d="M22 50 Q22 36 36 36 Q40 22 56 24 Q72 24 74 40 Q86 40 86 52 Q86 64 74 64 L32 64 Q20 64 22 50 Z"
            fill="#dfe7f7" stroke="#b8c5e0" stroke-width="1.5"/>
          <g stroke="#7cc4ff" stroke-width="2.5" stroke-linecap="round">
            <line x1="34" y1="72" x2="30" y2="82"/>
            <line x1="48" y1="72" x2="44" y2="82"/>
            <line x1="62" y1="72" x2="58" y2="82"/>
            <line x1="76" y1="72" x2="72" y2="82"/>
          </g>
        </svg>`;
      case 'rain':
        return `<svg ${common}>
          <path d="M22 46 Q22 32 36 32 Q40 18 56 20 Q72 20 74 36 Q86 36 86 48 Q86 60 74 60 L32 60 Q20 60 22 46 Z"
            fill="#dfe7f7" stroke="#b8c5e0" stroke-width="1.5"/>
          <g stroke="#7cc4ff" stroke-width="3" stroke-linecap="round">
            <line x1="34" y1="68" x2="28" y2="84"/>
            <line x1="50" y1="68" x2="44" y2="84"/>
            <line x1="66" y1="68" x2="60" y2="84"/>
            <line x1="80" y1="68" x2="74" y2="84"/>
          </g>
        </svg>`;
      case 'snow':
        return `<svg ${common}>
          <path d="M22 46 Q22 32 36 32 Q40 18 56 20 Q72 20 74 36 Q86 36 86 48 Q86 60 74 60 L32 60 Q20 60 22 46 Z"
            fill="#e8eefc" stroke="#c9d4ec" stroke-width="1.5"/>
          <g fill="#fff">
            <circle cx="32" cy="74" r="3"/>
            <circle cx="48" cy="80" r="3"/>
            <circle cx="64" cy="72" r="3"/>
            <circle cx="78" cy="80" r="3"/>
          </g>
        </svg>`;
      case 'storm':
        return `<svg ${common}>
          <path d="M22 46 Q22 32 36 32 Q40 18 56 20 Q72 20 74 36 Q86 36 86 48 Q86 60 74 60 L32 60 Q20 60 22 46 Z"
            fill="#c8d1e6" stroke="#94a3c2" stroke-width="1.5"/>
          <path d="M52 60 L40 80 L50 80 L44 92 L64 72 L54 72 L60 60 Z"
            fill="#ffd166" stroke="#e0a83a" stroke-width="1"/>
        </svg>`;
      default:
        return '';
    }
  }
})();
</script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total21,426html / css / js1,843 / 5,844 / 13,739
dom nodes46dom depth9
css rules46js presentyes
brightness51.2contrast22.6
colorfulness20.8whitespace56.7%

This slot's telemetry

prompt tokens0completion tokens0
total tokens0wall91.2 s
costrequest id
config.json579 B
{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_NONE",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "claude-opus-4-7-eff-high--cli--kiro--dev",
  "effort": "high",
  "family": "claude",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "claude-opus-4-7",
  "protocol": "cli",
  "served_model": "claude-opus-4.7",
  "telemetry": {
    "completion_tokens": null,
    "cost_usd": null,
    "prompt_tokens": null,
    "total_tokens": null,
    "wall_ms": 250169
  },
  "transport": "kiro-cli-isolated-home-github-social",
  "vendor_sanction_ref": null
}
send-log2.5 KB
{
  "N": 2,
  "batch_id": "2026-07-20--refill2-kiro-claude-opus-4-7-eff-high",
  "config_id": "claude-opus-4-7-eff-high--cli--kiro--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-20T10:54:46.671538+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-20T10:53:58.952851+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-20T10:56:22.918437+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-20T10:54:51.645391+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-20T10:57:41.688090+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-20T10:56:26.433881+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-20T10:58:21.592369+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-20T10:57:45.482114+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
    }
  }
}