claude-opus-4-7 @ medium · kiro
kiromedium
- config
- claude-opus-4-7-eff-medium--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
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-7 @low · kiro0.66grok-4.5 @low · grok-cli0.66claude-opus-4-8 @medium · kiro0.64claude-sonnet-4-6 @high · kiro0.64claude-sonnet-4-6 @medium · kiro0.64farthest
gpt-5.6-luna @medium · codex-oauth0.39qwen3.7-max · qoder0.45qwen3.6-plus · go0.45nemotron-3-ultra-free · api0.45minimax-m2.5 · kiro0.45within 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.3
- min tempmatchshown: 16
- hourlymismatchcoverage 1/24 · 1 match · 7 mismatch · 16 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>
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
width: 100%; min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
background: radial-gradient(ellipse at top left, #1e3a5f 0%, #0f1729 45%, #050914 100%);
color: #e8eef7;
display: flex; align-items: center; justify-content: center;
padding: 40px;
}
.card {
width: 960px;
background: linear-gradient(145deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 28px;
box-shadow: 0 30px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
padding: 44px 52px;
position: relative;
overflow: hidden;
}
.card::before {
content: "";
position: absolute; top: -100px; right: -100px;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(255,200,100,0.15) 0%, transparent 70%);
pointer-events: none;
}
.header {
display: flex; justify-content: space-between; align-items: flex-start;
margin-bottom: 32px;
}
.location {
font-size: 34px; font-weight: 600; letter-spacing: -0.5px;
display: flex; align-items: center; gap: 10px;
}
.location .pin {
width: 18px; height: 18px; opacity: 0.7;
}
.date {
font-size: 15px; color: #9fb0c8; margin-top: 6px; font-weight: 400;
}
.badge {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
padding: 8px 16px; border-radius: 999px;
font-size: 13px; color: #cfd9e8;
letter-spacing: 0.3px;
}
.main {
display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px;
align-items: center; margin-bottom: 36px;
}
.temp-block { display: flex; align-items: center; gap: 24px; }
.icon-wrap {
width: 140px; height: 140px;
display: flex; align-items: center; justify-content: center;
filter: drop-shadow(0 10px 30px rgba(255,200,80,0.25));
}
.icon-wrap svg { width: 100%; height: 100%; }
.big-temp {
font-size: 88px; font-weight: 200; line-height: 1;
letter-spacing: -3px;
}
.big-temp .unit { font-size: 40px; color: #9fb0c8; vertical-align: super; margin-left: 4px; font-weight: 300; }
.condition {
font-size: 20px; color: #d3ddec; margin-top: 6px; font-weight: 500;
}
.minmax {
display: flex; flex-direction: column; gap: 14px;
}
.minmax .row {
display: flex; justify-content: space-between; align-items: center;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 18px 22px;
}
.minmax .label { font-size: 13px; color: #9fb0c8; text-transform: uppercase; letter-spacing: 1px; }
.minmax .value { font-size: 26px; font-weight: 500; }
.row.max .value { color: #ffb265; }
.row.min .value { color: #7fc0ff; }
.hourly-section {
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 28px;
}
.hourly-title {
font-size: 13px; color: #9fb0c8; text-transform: uppercase;
letter-spacing: 1.2px; margin-bottom: 18px;
display: flex; justify-content: space-between; align-items: center;
}
.hourly-title .range { color: #6b7d96; text-transform: none; letter-spacing: 0; font-size: 12px; }
.chart {
position: relative;
height: 130px;
margin-bottom: 10px;
}
.chart svg { width: 100%; height: 100%; overflow: visible; }
.hours-row {
display: grid;
grid-template-columns: repeat(24, 1fr);
gap: 2px;
font-size: 10px; color: #7f92ad;
text-align: center;
}
.hours-row div { padding-top: 4px; }
.hours-row div:nth-child(3n+1) { color: #b8c6dc; }
.error, .loading {
text-align: center; padding: 40px;
font-size: 18px; color: #cfd9e8;
}
.error { color: #ff9b9b; }
</style>
</head>
<body>
<div class="card" id="card">
<div class="loading">Loading weather…</div>
</div>
<script>
(function() {
const params = new URLSearchParams(location.search);
const lat = parseFloat(params.get('lat')) || 52.52;
const lon = parseFloat(params.get('lon')) || 13.405;
const name = params.get('name') || 'Berlin';
const today = new Date().toISOString().slice(0, 10);
const date = params.get('date') || today;
const WEATHER = {
0: { label: "Clear sky", icon: "sun" },
1: { label: "Mainly clear", icon: "sun" },
2: { label: "Partly cloudy", icon: "partly" },
3: { label: "Overcast", icon: "cloud" },
45: { label: "Fog", icon: "fog" },
48: { label: "Depositing rime fog", icon: "fog" },
51: { label: "Light drizzle", icon: "rain" },
53: { label: "Moderate drizzle", icon: "rain" },
55: { label: "Dense drizzle", icon: "rain" },
56: { label: "Light freezing drizzle", icon: "rain" },
57: { label: "Dense freezing drizzle", icon: "rain" },
61: { label: "Slight rain", icon: "rain" },
63: { label: "Moderate rain", icon: "rain" },
65: { label: "Heavy rain", icon: "rain" },
66: { label: "Light freezing rain", icon: "rain" },
67: { label: "Heavy freezing rain", icon: "rain" },
71: { label: "Slight snow", icon: "snow" },
73: { label: "Moderate snow", icon: "snow" },
75: { label: "Heavy snow", icon: "snow" },
77: { label: "Snow grains", icon: "snow" },
80: { label: "Slight rain showers", icon: "rain" },
81: { label: "Moderate rain showers", icon: "rain" },
82: { label: "Violent rain showers", icon: "rain" },
85: { label: "Slight snow showers", icon: "snow" },
86: { label: "Heavy snow showers", icon: "snow" },
95: { label: "Thunderstorm", icon: "storm" },
96: { label: "Thunderstorm with slight hail", icon: "storm" },
99: { label: "Thunderstorm with heavy hail", icon: "storm" },
};
const ICONS = {
sun: '<svg viewBox="0 0 100 100"><defs><radialGradient id="g1" cx="50%" cy="50%"><stop offset="0%" stop-color="#ffd76b"/><stop offset="100%" stop-color="#ff9a3c"/></radialGradient></defs><g><circle cx="50" cy="50" r="20" fill="url(#g1)"/><g stroke="#ffc46b" stroke-width="3" stroke-linecap="round"><line x1="50" y1="12" x2="50" y2="22"/><line x1="50" y1="78" x2="50" y2="88"/><line x1="12" y1="50" x2="22" y2="50"/><line x1="78" y1="50" x2="88" y2="50"/><line x1="23" y1="23" x2="30" y2="30"/><line x1="70" y1="70" x2="77" y2="77"/><line x1="77" y1="23" x2="70" y2="30"/><line x1="30" y1="70" x2="23" y2="77"/></g></g></svg>',
partly: '<svg viewBox="0 0 100 100"><defs><radialGradient id="g2" cx="50%" cy="50%"><stop offset="0%" stop-color="#ffd76b"/><stop offset="100%" stop-color="#ff9a3c"/></radialGradient></defs><circle cx="38" cy="38" r="16" fill="url(#g2)"/><g stroke="#ffc46b" stroke-width="2.5" stroke-linecap="round"><line x1="38" y1="12" x2="38" y2="18"/><line x1="12" y1="38" x2="18" y2="38"/><line x1="19" y1="19" x2="24" y2="24"/><line x1="57" y1="19" x2="52" y2="24"/></g><path d="M35,68 a15,15 0 0,1 15,-15 a18,18 0 0,1 18,10 a12,12 0 0,1 -3,24 h-30 a12,12 0 0,1 0,-19 z" fill="#dbe4f2" stroke="#a8b7ce" stroke-width="1"/></svg>',
cloud: '<svg viewBox="0 0 100 100"><path d="M28,68 a18,18 0 0,1 18,-18 a22,22 0 0,1 22,12 a14,14 0 0,1 -3,28 h-37 a14,14 0 0,1 0,-22 z" fill="#c9d4e6" stroke="#8fa0bd" stroke-width="1.2"/></svg>',
rain: '<svg viewBox="0 0 100 100"><path d="M25,55 a17,17 0 0,1 17,-17 a21,21 0 0,1 21,12 a13,13 0 0,1 -3,26 h-35 a13,13 0 0,1 0,-21 z" fill="#a8b7ce" stroke="#7688a3" stroke-width="1"/><g stroke="#5db4ff" stroke-width="3" stroke-linecap="round"><line x1="38" y1="78" x2="34" y2="90"/><line x1="52" y1="78" x2="48" y2="90"/><line x1="66" y1="78" x2="62" y2="90"/></g></svg>',
snow: '<svg viewBox="0 0 100 100"><path d="M25,55 a17,17 0 0,1 17,-17 a21,21 0 0,1 21,12 a13,13 0 0,1 -3,26 h-35 a13,13 0 0,1 0,-21 z" fill="#d8e2f2" stroke="#8fa0bd" stroke-width="1"/><g fill="#e8f2ff" stroke="#b8d4ee" stroke-width="1"><circle cx="36" cy="84" r="3"/><circle cx="52" cy="88" r="3"/><circle cx="68" cy="84" r="3"/></g></svg>',
fog: '<svg viewBox="0 0 100 100"><path d="M25,50 a17,17 0 0,1 17,-17 a21,21 0 0,1 21,12 a13,13 0 0,1 -3,26 h-35 a13,13 0 0,1 0,-21 z" fill="#c9d4e6" stroke="#8fa0bd" stroke-width="1"/><g stroke="#b8c6dc" stroke-width="4" stroke-linecap="round"><line x1="20" y1="80" x2="80" y2="80"/><line x1="28" y1="90" x2="72" y2="90"/></g></svg>',
storm: '<svg viewBox="0 0 100 100"><path d="M25,50 a17,17 0 0,1 17,-17 a21,21 0 0,1 21,12 a13,13 0 0,1 -3,26 h-35 a13,13 0 0,1 0,-21 z" fill="#8b98b3" stroke="#5a6a86" stroke-width="1"/><path d="M48,68 L40,86 L50,86 L44,98 L60,80 L50,80 L56,68 Z" fill="#ffd23f" stroke="#e0a020" stroke-width="1"/></svg>',
};
function pad(n){ return n<10 ? '0'+n : ''+n; }
function fmtDate(iso) {
const d = new Date(iso + 'T00:00:00Z');
return d.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' });
}
function isPast(dstr) {
const t = new Date().toISOString().slice(0,10);
return dstr < t;
}
async function load() {
const endpoint = isPast(date) ? '/api/om/archive' : '/api/om/forecast';
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,
});
try {
const r = await fetch(url);
if (!r.ok) throw new Error('HTTP ' + r.status);
const data = await r.json();
render(data);
} catch (e) {
document.getElementById('card').innerHTML =
'<div class="error">Unable to load weather data.<br><span style="font-size:14px;color:#9fb0c8;display:block;margin-top:8px">' +
(e.message || 'Please try again later.') + '</span></div>';
}
}
function render(data) {
if (!data || !data.daily || !data.hourly) {
throw new Error('Malformed response');
}
const tmax = data.daily.temperature_2m_max?.[0];
const tmin = data.daily.temperature_2m_min?.[0];
const code = data.daily.weather_code?.[0];
const hourlyTimes = data.hourly.time || [];
const hourlyTemps = data.hourly.temperature_2m || [];
if (tmax == null || tmin == null || code == null) {
throw new Error('Incomplete data');
}
const info = WEATHER[code] || { label: 'Unknown', icon: 'cloud' };
// Filter hourly data to the requested date only
const hours = [];
for (let i = 0; i < hourlyTimes.length; i++) {
if (hourlyTimes[i].startsWith(date)) {
const h = parseInt(hourlyTimes[i].slice(11, 13), 10);
hours.push({ h, t: hourlyTemps[i] });
}
}
// Chart
const validTemps = hours.map(x=>x.t).filter(v => v != null);
const minT = Math.min(...validTemps);
const maxT = Math.max(...validTemps);
const range = Math.max(1, maxT - minT);
const W = 860, H = 130, pad = 14;
const stepX = (W - pad*2) / Math.max(1, hours.length - 1);
const pts = hours.map((x, i) => {
const px = pad + i * stepX;
const py = pad + (H - pad*2) * (1 - (x.t - minT) / range);
return [px, py, x.t, x.h];
});
let pathD = '';
pts.forEach((p, i) => { pathD += (i===0?'M':'L') + p[0].toFixed(1) + ',' + p[1].toFixed(1) + ' '; });
let areaD = pathD + 'L' + pts[pts.length-1][0].toFixed(1) + ',' + (H-pad) + ' L' + pts[0][0].toFixed(1) + ',' + (H-pad) + ' Z';
const labelPts = pts.filter((_,i)=> i%3===0);
const dots = labelPts.map(p =>
`<circle cx="${p[0].toFixed(1)}" cy="${p[1].toFixed(1)}" r="3" fill="#ffb265" stroke="#1a2540" stroke-width="1.5"/>` +
`<text x="${p[0].toFixed(1)}" y="${(p[1]-9).toFixed(1)}" text-anchor="middle" font-size="10" fill="#e8eef7" font-weight="500">${Math.round(p[2])}°</text>`
).join('');
const hourLabels = hours.map((x,i) => `<div>${i%3===0 ? pad2(x.h)+':00' : ''}</div>`).join('');
document.getElementById('card').innerHTML = `
<div class="header">
<div>
<div class="location">
<svg class="pin" viewBox="0 0 24 24" fill="none" stroke="#ffb265" stroke-width="2"><path d="M12 21s-7-6.5-7-12a7 7 0 1114 0c0 5.5-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></svg>
${escapeHtml(name)}
</div>
<div class="date">${fmtDate(date)}</div>
</div>
<div class="badge">${isPast(date) ? 'Historical' : 'Forecast'}</div>
</div>
<div class="main">
<div class="temp-block">
<div class="icon-wrap">${ICONS[info.icon]}</div>
<div>
<div class="big-temp">${Math.round(tmax)}<span class="unit">°C</span></div>
<div class="condition">${info.label}</div>
</div>
</div>
<div class="minmax">
<div class="row max">
<span class="label">High</span>
<span class="value">${tmax.toFixed(1)}°C</span>
</div>
<div class="row min">
<span class="label">Low</span>
<span class="value">${tmin.toFixed(1)}°C</span>
</div>
</div>
</div>
<div class="hourly-section">
<div class="hourly-title">
<span>Hourly Temperature</span>
<span class="range">${Math.round(minT)}°C — ${Math.round(maxT)}°C</span>
</div>
<div class="chart">
<svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="none">
<defs>
<linearGradient id="areaG" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#ffb265" stop-opacity="0.4"/>
<stop offset="100%" stop-color="#ffb265" stop-opacity="0"/>
</linearGradient>
</defs>
<path d="${areaD}" fill="url(#areaG)"/>
<path d="${pathD}" fill="none" stroke="#ffb265" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"/>
${dots}
</svg>
</div>
<div class="hours-row">${hourLabels}</div>
</div>
`;
}
function pad2(n){ return n<10?'0'+n:''+n; }
function escapeHtml(s){ return String(s).replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c])); }
load();
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 14,331 | html / css / js | 240 / 3,813 / 10,278 |
|---|---|---|---|
| dom nodes | 9 | dom depth | 4 |
| css rules | 32 | js present | yes |
| brightness | 33.9 | contrast | 19.4 |
| colorfulness | 19.9 | whitespace | 77.1% |
This slot's telemetry
| prompt tokens | 0 | completion tokens | 0 |
|---|---|---|---|
| total tokens | 0 | wall | 64 s |
| cost | — | request id | — |
config.json583 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "claude-opus-4-7-eff-medium--cli--kiro--dev",
"effort": "medium",
"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": 188416
},
"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-opus-4-7-eff-medium--cli--kiro--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-18T15:26:17.065086+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-18T15:25:13.021592+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-18T15:26:52.972791+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-18T15:26:20.793466+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-18T15:27:27.237637+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-18T15:26:56.536266+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-18T15:28:32.370893+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-18T15:27:30.767777+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
}
}
}