claude-sonnet-4-6 @ medium · kiro
kiromedium
- config
- claude-sonnet-4-6-eff-medium--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
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 @medium · kiro0.75claude-sonnet-4-6 @max · kiro0.75mimo-v2.5-pro @none · api0.72claude-opus-4-6 @max · kiro0.70claude-opus-4-6 @medium · kiro0.70farthest
gpt-5.5 @medium · codex-oauth0.41gpt-5.6-luna @medium · codex-oauth0.42gpt-5.6-luna @low · codex-oauth0.42gpt-5.6-luna @high · kiro0.45claude-haiku-4-5 @max · CC0.45within session 2026-07-19--unified
similarity measures convergence within this session — not quality.
Fidelity — does the card show the right data?
- namematch
- conditionmismatchother-wmo-code
- 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;
display: flex;
align-items: center;
justify-content: center;
background: #0f1117;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
overflow: hidden;
}
.scene {
position: relative;
width: 1280px;
height: 800px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.bg-gradient {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #0d1b2a 0%, #1b2a4a 40%, #0d2235 70%, #0a0e1a 100%);
z-index: 0;
}
.bg-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.35;
z-index: 0;
}
.orb1 { width: 600px; height: 600px; background: radial-gradient(circle, #1e6fa8 0%, transparent 70%); top: -150px; left: -100px; }
.orb2 { width: 500px; height: 500px; background: radial-gradient(circle, #0d3f6e 0%, transparent 70%); bottom: -100px; right: -80px; }
.orb3 { width: 300px; height: 300px; background: radial-gradient(circle, #4a90d9 0%, transparent 70%); top: 200px; right: 300px; opacity: 0.15; }
.card {
position: relative;
z-index: 1;
width: 900px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 32px;
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-shadow:
0 0 0 1px rgba(255,255,255,0.05) inset,
0 32px 80px rgba(0,0,0,0.6),
0 8px 32px rgba(0,0,0,0.4);
overflow: hidden;
}
.card-inner {
padding: 48px 56px 40px;
}
/* ── Header ── */
.header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 36px;
}
.location-block {}
.location-name {
font-size: 38px;
font-weight: 700;
letter-spacing: -0.5px;
color: #fff;
line-height: 1.1;
}
.location-date {
margin-top: 6px;
font-size: 15px;
font-weight: 400;
color: rgba(255,255,255,0.45);
letter-spacing: 0.3px;
}
.condition-block {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.weather-icon {
font-size: 64px;
line-height: 1;
filter: drop-shadow(0 4px 16px rgba(0,0,0,0.4));
}
.condition-label {
font-size: 14px;
font-weight: 500;
color: rgba(255,255,255,0.5);
text-align: right;
max-width: 160px;
letter-spacing: 0.2px;
}
/* ── Temps ── */
.temps-row {
display: flex;
align-items: flex-end;
gap: 32px;
margin-bottom: 44px;
}
.temp-max {
font-size: 96px;
font-weight: 200;
letter-spacing: -4px;
line-height: 1;
color: #fff;
position: relative;
}
.temp-max .unit {
font-size: 36px;
font-weight: 300;
letter-spacing: 0;
color: rgba(255,255,255,0.5);
vertical-align: super;
margin-left: 2px;
}
.temp-range {
display: flex;
flex-direction: column;
gap: 8px;
padding-bottom: 12px;
}
.temp-range-item {
display: flex;
align-items: center;
gap: 8px;
}
.range-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.range-dot.hot { background: #ff7043; box-shadow: 0 0 8px rgba(255,112,67,0.6); }
.range-dot.cold { background: #42a5f5; box-shadow: 0 0 8px rgba(66,165,245,0.6); }
.range-label {
font-size: 12px;
font-weight: 500;
color: rgba(255,255,255,0.35);
text-transform: uppercase;
letter-spacing: 0.8px;
width: 24px;
}
.range-value {
font-size: 22px;
font-weight: 500;
color: rgba(255,255,255,0.8);
letter-spacing: -0.5px;
}
.range-value .small-unit {
font-size: 14px;
color: rgba(255,255,255,0.4);
}
/* ── Divider ── */
.divider {
height: 1px;
background: linear-gradient(to right, transparent, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.1) 80%, transparent);
margin-bottom: 32px;
}
/* ── Hourly chart ── */
.hourly-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 1.2px;
color: rgba(255,255,255,0.3);
text-transform: uppercase;
margin-bottom: 20px;
}
.chart-wrap {
position: relative;
height: 120px;
margin-bottom: 10px;
}
canvas#hourlyChart {
width: 100%;
height: 100%;
display: block;
}
.hour-labels {
display: flex;
justify-content: space-between;
padding: 0 2px;
}
.hour-tick {
font-size: 11px;
color: rgba(255,255,255,0.25);
font-weight: 500;
letter-spacing: 0.2px;
text-align: center;
width: 32px;
}
/* ── Error state ── */
.error-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
padding: 80px 0;
text-align: center;
}
.error-icon { font-size: 48px; opacity: 0.6; }
.error-title {
font-size: 22px;
font-weight: 600;
color: rgba(255,255,255,0.7);
}
.error-sub {
font-size: 14px;
color: rgba(255,255,255,0.3);
max-width: 380px;
line-height: 1.6;
}
/* ── Loading ── */
.loading-state {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 80px 0;
}
.spinner {
width: 24px;
height: 24px;
border: 2px solid rgba(255,255,255,0.1);
border-top-color: rgba(255,255,255,0.6);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text {
font-size: 15px;
color: rgba(255,255,255,0.4);
letter-spacing: 0.2px;
}
/* ── Fade-in animation ── */
.fade-in {
animation: fadeIn 0.6s ease forwards;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<div class="scene">
<div class="bg-gradient"></div>
<div class="bg-orb orb1"></div>
<div class="bg-orb orb2"></div>
<div class="bg-orb orb3"></div>
<div class="card">
<div class="card-inner" id="cardContent">
<div class="loading-state">
<div class="spinner"></div>
<span class="loading-text">Fetching weather data…</span>
</div>
</div>
</div>
</div>
<script>
(function () {
// ── Parse query params ──────────────────────────────────────────────
const params = new URLSearchParams(window.location.search);
const lat = parseFloat(params.get('lat') ?? '52.52');
const lon = parseFloat(params.get('lon') ?? '13.405');
const name = params.get('name') ?? 'Berlin';
function todayUTC() {
const d = new Date();
return d.toISOString().slice(0, 10);
}
const date = params.get('date') ?? todayUTC();
// ── Determine endpoint ──────────────────────────────────────────────
function isArchive(dateStr) {
const d = new Date(dateStr + 'T00:00:00Z');
const now = new Date();
// Use archive for dates more than 5 days before today UTC
const cutoff = new Date(now.toISOString().slice(0, 10) + 'T00:00:00Z');
cutoff.setUTCDate(cutoff.getUTCDate() - 5);
return d < cutoff;
}
const endpoint = isArchive(date) ? '/api/om/archive' : '/api/om/forecast';
// ── Weather code mapping ────────────────────────────────────────────
const WMO = {
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: 'Icy Fog', icon: '🌫️' },
51: { label: 'Light Drizzle', icon: '🌦️' },
53: { label: 'Drizzle', icon: '🌦️' },
55: { label: 'Heavy Drizzle', icon: '🌧️' },
61: { label: 'Light Rain', icon: '🌧️' },
63: { label: 'Rain', icon: '🌧️' },
65: { label: 'Heavy 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: 'Snow Showers', icon: '🌨️' },
86: { label: 'Heavy Snow Showers', icon: '❄️' },
95: { label: 'Thunderstorm', icon: '⛈️' },
96: { label: 'Thunderstorm + Hail', icon: '⛈️' },
99: { label: 'Thunderstorm + Hail', icon: '⛈️' },
};
function wmo(code) {
return WMO[code] ?? { label: 'Unknown', icon: '🌡️' };
}
// ── Format date nicely ──────────────────────────────────────────────
function fmtDate(str) {
const [y, m, d] = str.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'
});
}
// ── Render helpers ──────────────────────────────────────────────────
function fmt1(n) { return n == null ? '—' : n.toFixed(1); }
function renderError(msg) {
document.getElementById('cardContent').innerHTML = `
<div class="error-state fade-in">
<div class="error-icon">⚠️</div>
<div class="error-title">Weather data unavailable</div>
<div class="error-sub">${msg}</div>
</div>`;
}
// ── Draw the hourly sparkline / area chart ──────────────────────────
function drawChart(canvas, temps) {
const dpr = window.devicePixelRatio || 1;
const W = canvas.offsetWidth;
const H = canvas.offsetHeight;
canvas.width = W * dpr;
canvas.height = H * dpr;
const ctx = canvas.getContext('2d');
ctx.scale(dpr, dpr);
const valid = temps.filter(t => t != null);
if (!valid.length) return;
const mn = Math.min(...valid) - 1;
const mx = Math.max(...valid) + 1;
const rng = mx - mn || 1;
const padX = 2;
const padT = 12;
const padB = 4;
const n = temps.length;
function px(i) { return padX + (i / (n - 1)) * (W - padX * 2); }
function py(t) { return padT + (1 - (t - mn) / rng) * (H - padT - padB); }
// Gradient fill
const grad = ctx.createLinearGradient(0, padT, 0, H);
grad.addColorStop(0, 'rgba(74,157,235,0.35)');
grad.addColorStop(0.6, 'rgba(74,157,235,0.08)');
grad.addColorStop(1, 'rgba(74,157,235,0)');
ctx.beginPath();
temps.forEach((t, i) => {
const tv = t ?? valid[0];
if (i === 0) ctx.moveTo(px(0), py(tv));
else ctx.lineTo(px(i), py(tv));
});
ctx.lineTo(px(n - 1), H);
ctx.lineTo(px(0), H);
ctx.closePath();
ctx.fillStyle = grad;
ctx.fill();
// Grid lines (light)
const steps = 3;
ctx.strokeStyle = 'rgba(255,255,255,0.05)';
ctx.lineWidth = 1;
for (let s = 0; s <= steps; s++) {
const y = padT + (s / steps) * (H - padT - padB);
ctx.beginPath();
ctx.moveTo(padX, y);
ctx.lineTo(W - padX, y);
ctx.stroke();
}
// Line
ctx.beginPath();
ctx.strokeStyle = 'rgba(100,180,255,0.85)';
ctx.lineWidth = 2.5;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
temps.forEach((t, i) => {
const tv = t ?? valid[0];
if (i === 0) ctx.moveTo(px(0), py(tv));
else ctx.lineTo(px(i), py(tv));
});
ctx.stroke();
// Dots + temp labels for every 3 hours
temps.forEach((t, i) => {
if (t == null) return;
if (i % 3 !== 0) return;
const x = px(i);
const y = py(t);
// Glow dot
ctx.beginPath();
ctx.arc(x, y, 4.5, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(100,180,255,0.2)';
ctx.fill();
ctx.beginPath();
ctx.arc(x, y, 3, 0, Math.PI * 2);
ctx.fillStyle = '#64b4ff';
ctx.fill();
// Label
const label = fmt1(t) + '°';
ctx.font = '600 11px -apple-system, BlinkMacSystemFont, sans-serif';
ctx.fillStyle = 'rgba(255,255,255,0.55)';
ctx.textAlign = 'center';
const labelY = y > padT + 20 ? y - 10 : y + 20;
ctx.fillText(label, x, labelY);
});
}
// ── Render success ──────────────────────────────────────────────────
function renderData(data) {
const di = data.daily;
const hi = data.hourly;
const code = di.weather_code?.[0] ?? 0;
const tmax = di.temperature_2m_max?.[0];
const tmin = di.temperature_2m_min?.[0];
const { label, icon } = wmo(code);
// Extract hours belonging to the requested date (timezone=UTC, so times are YYYY-MM-DDTHH:MM)
const prefix = date + 'T';
const hourlyTemps = [];
const hourLabels = [];
if (hi?.time && hi?.temperature_2m) {
hi.time.forEach((t, idx) => {
if (t.startsWith(prefix)) {
hourlyTemps.push(hi.temperature_2m[idx]);
hourLabels.push(t.slice(11, 16)); // HH:MM
}
});
}
// Pick representative label hours (0,3,6,9,12,15,18,21) if 24-slot array
const tickIdxs = hourlyTemps.length === 24 ? [0, 3, 6, 9, 12, 15, 18, 21] : [];
const tickLabels = tickIdxs.map(i => hourLabels[i] ?? '');
document.getElementById('cardContent').innerHTML = `
<div class="fade-in">
<div class="header">
<div class="location-block">
<div class="location-name">${name}</div>
<div class="location-date">${fmtDate(date)}</div>
</div>
<div class="condition-block">
<div class="weather-icon">${icon}</div>
<div class="condition-label">${label}</div>
</div>
</div>
<div class="temps-row">
<div class="temp-max">
${fmt1(tmax)}<span class="unit">°C</span>
</div>
<div class="temp-range">
<div class="temp-range-item">
<span class="range-dot hot"></span>
<span class="range-label">Hi</span>
<span class="range-value">${fmt1(tmax)}<span class="small-unit">°C</span></span>
</div>
<div class="temp-range-item">
<span class="range-dot cold"></span>
<span class="range-label">Lo</span>
<span class="range-value">${fmt1(tmin)}<span class="small-unit">°C</span></span>
</div>
</div>
</div>
${hourlyTemps.length ? `
<div class="divider"></div>
<div class="hourly-label">Hourly Temperature</div>
<div class="chart-wrap">
<canvas id="hourlyChart"></canvas>
</div>
<div class="hour-labels">
${tickLabels.map(l => `<span class="hour-tick">${l}</span>`).join('')}
</div>
` : ''}
</div>`;
if (hourlyTemps.length) {
const canvas = document.getElementById('hourlyChart');
// Wait a tick for layout
requestAnimationFrame(() => drawChart(canvas, hourlyTemps));
}
}
// ── Fetch ───────────────────────────────────────────────────────────
const url = new URL(endpoint, window.location.origin);
url.searchParams.set('latitude', lat);
url.searchParams.set('longitude', 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', date);
url.searchParams.set('end_date', date);
fetch(url.toString())
.then(r => {
if (!r.ok) throw new Error(`HTTP ${r.status} ${r.statusText}`);
return r.json();
})
.then(data => {
if (!data.daily) throw new Error('Unexpected response format from weather API.');
renderData(data);
})
.catch(err => {
renderError(`Could not load weather data for <strong>${name}</strong> on ${date}.<br><br>
<span style="font-size:12px;opacity:0.6;">${err.message}</span>`);
});
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 17,232 | html / css / js | 601 / 5,958 / 10,673 |
|---|---|---|---|
| dom nodes | 18 | dom depth | 7 |
| css rules | 47 | js present | yes |
| brightness | 40.8 | contrast | 16.7 |
| colorfulness | 19.1 | whitespace | 61.6% |
This slot's telemetry
| prompt tokens | 0 | completion tokens | 0 |
|---|---|---|---|
| total tokens | 0 | wall | 73.7 s |
| cost | — | request id | — |
config.json589 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "claude-sonnet-4-6-eff-medium--cli--kiro--dev",
"effort": "medium",
"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": 263805
},
"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-medium--cli--kiro--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-18T17:06:46.437010+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-18T17:05:52.931396+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:08:04.133617+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-18T17:06:50.298591+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:09:31.098963+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-18T17:08:09.724776+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:10:30.623308+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-18T17:09:34.910687+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
}
}
}