claude-sonnet-4 · kiro
kiro
- config
- claude-sonnet-4--cli--kiro--dev
- batch
- 2026-07-19--unified
- transport
- kiro-cli-isolated-home-github-social
- protocol
- cli · plan
- served model
- claude-sonnet-4
- 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
grok-4.5 @high · api0.63claude-opus-4-8 @low · kiro0.61claude-fable-5 @low · CC0.59glm-5 · go0.59glm-5.2 · opencode0.59farthest
gpt-5.5 @xhigh · codex-oauth0.45qwen3-coder-next · kiro0.47north-mini-code-free · api0.47gpt-5.6-terra @xhigh · kiro0.47gpt-5.6-luna @medium · codex-oauth0.47within session 2026-07-19--unified
similarity measures convergence within this session — not quality.
Fidelity — does the card show the right data?
- namenot-foundtext-present-no-name-hit
- conditionnot-foundno-condition-text
- datenot-foundno-parseable-date
- 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=device-width, initial-scale=1.0">
<title>Weather Card</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.weather-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
padding: 40px;
width: 100%;
max-width: 800px;
min-height: 500px;
display: flex;
flex-direction: column;
}
.header {
text-align: center;
margin-bottom: 30px;
}
.location {
font-size: 2.5em;
font-weight: 300;
color: #2c3e50;
margin-bottom: 10px;
}
.date {
font-size: 1.2em;
color: #7f8c8d;
font-weight: 400;
}
.main-weather {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 40px;
padding: 20px 0;
}
.temperature-main {
display: flex;
align-items: center;
}
.temp-range {
font-size: 3em;
font-weight: 200;
color: #2c3e50;
}
.temp-max {
color: #e74c3c;
}
.temp-min {
color: #3498db;
margin-left: 20px;
}
.weather-condition {
font-size: 1.4em;
color: #34495e;
text-align: right;
font-weight: 400;
}
.hourly-section {
flex: 1;
}
.hourly-title {
font-size: 1.3em;
color: #2c3e50;
margin-bottom: 20px;
font-weight: 500;
}
.hourly-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 15px;
max-height: 200px;
overflow-y: auto;
}
.hourly-item {
text-align: center;
padding: 15px 10px;
background: rgba(52, 73, 94, 0.05);
border-radius: 12px;
transition: all 0.3s ease;
}
.hourly-item:hover {
background: rgba(52, 73, 94, 0.1);
transform: translateY(-2px);
}
.hour {
font-size: 0.9em;
color: #7f8c8d;
margin-bottom: 8px;
font-weight: 500;
}
.hourly-temp {
font-size: 1.1em;
color: #2c3e50;
font-weight: 600;
}
.loading, .error {
text-align: center;
padding: 60px 20px;
color: #7f8c8d;
}
.loading {
font-size: 1.2em;
}
.error {
font-size: 1.1em;
color: #e74c3c;
}
.spinner {
width: 40px;
height: 40px;
margin: 20px auto;
border: 4px solid #ecf0f1;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.unit {
font-size: 0.6em;
color: #95a5a6;
font-weight: 400;
}
</style>
</head>
<body>
<div class="weather-card">
<div class="loading" id="loading">
<div class="spinner"></div>
Loading weather data...
</div>
<div id="content" style="display: none;">
<div class="header">
<div class="location" id="location"></div>
<div class="date" id="date"></div>
</div>
<div class="main-weather">
<div class="temperature-main">
<div class="temp-range">
<span class="temp-max" id="tempMax"></span><span class="unit">°C</span>
<span class="temp-min" id="tempMin"></span><span class="unit">°C</span>
</div>
</div>
<div class="weather-condition" id="condition"></div>
</div>
<div class="hourly-section">
<div class="hourly-title">Hourly Temperature</div>
<div class="hourly-grid" id="hourlyGrid"></div>
</div>
</div>
<div class="error" id="error" style="display: none;">
Unable to load weather data. Please check your connection and try again.
</div>
</div>
<script>
// Weather condition mapping
const weatherConditions = {
0: 'Clear sky',
1: 'Mainly clear',
2: 'Partly cloudy',
3: 'Overcast',
45: 'Fog',
48: 'Depositing rime fog',
51: 'Light drizzle',
53: 'Moderate drizzle',
55: 'Dense drizzle',
56: 'Light freezing drizzle',
57: 'Dense freezing drizzle',
61: 'Slight rain',
63: 'Moderate rain',
65: 'Heavy rain',
66: 'Light freezing rain',
67: 'Heavy freezing rain',
71: 'Slight snow fall',
73: 'Moderate snow fall',
75: 'Heavy snow fall',
77: 'Snow grains',
80: 'Slight rain showers',
81: 'Moderate rain showers',
82: 'Violent rain showers',
85: 'Slight snow showers',
86: 'Heavy snow showers',
95: 'Thunderstorm',
96: 'Thunderstorm with slight hail',
99: 'Thunderstorm with heavy hail'
};
// Get URL parameters
function getUrlParams() {
const urlParams = new URLSearchParams(window.location.search);
const today = new Date().toISOString().split('T')[0];
return {
lat: parseFloat(urlParams.get('lat')) || 52.52,
lon: parseFloat(urlParams.get('lon')) || 13.405,
name: urlParams.get('name') || 'Berlin',
date: urlParams.get('date') || today
};
}
// Format date for display
function formatDate(dateStr) {
const date = new Date(dateStr + 'T00:00:00Z');
return date.toLocaleDateString('en-US', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
timeZone: 'UTC'
});
}
// Determine if date is in the past
function isPastDate(dateStr) {
const date = new Date(dateStr + 'T00:00:00Z');
const today = new Date();
today.setUTCHours(0, 0, 0, 0);
return date < today;
}
// Fetch weather data
async function fetchWeatherData(params) {
const { lat, lon, date } = params;
const isPast = isPastDate(date);
const endpoint = isPast ? '/api/om/archive' : '/api/om/forecast';
const queryParams = new URLSearchParams({
latitude: lat.toString(),
longitude: lon.toString(),
daily: 'temperature_2m_max,temperature_2m_min,weather_code',
hourly: 'temperature_2m',
timezone: 'UTC',
temperature_unit: 'celsius',
start_date: date,
end_date: date
});
const response = await fetch(${endpoint}?${queryParams});
if (!response.ok) {
throw new Error(HTTP error! status: ${response.status});
}
return await response.json();
}
// Show error state
function showError() {
document.getElementById('loading').style.display = 'none';
document.getElementById('content').style.display = 'none';
document.getElementById('error').style.display = 'block';
}
// Render weather data
function renderWeatherData(data, params) {
// Update location and date
document.getElementById('location').textContent = params.name;
document.getElementById('date').textContent = formatDate(params.date);
// Update daily data
if (data.daily) {
const maxTemp = data.daily.temperature_2m_max?.[0];
const minTemp = data.daily.temperature_2m_min?.[0];
const weatherCode = data.daily.weather_code?.[0];
if (maxTemp !== undefined) {
document.getElementById('tempMax').textContent = Math.round(maxTemp);
}
if (minTemp !== undefined) {
document.getElementById('tempMin').textContent = Math.round(minTemp);
}
if (weatherCode !== undefined) {
document.getElementById('condition').textContent = weatherConditions[weatherCode] || 'Unknown';
}
}
// Update hourly data
const hourlyGrid = document.getElementById('hourlyGrid');
if (data.hourly && data.hourly.time && data.hourly.temperature_2m) {
hourlyGrid.innerHTML = '';
data.hourly.time.forEach((timeStr, index) => {
const temp = data.hourly.temperature_2m[index];
if (temp !== undefined) {
const time = new Date(timeStr);
const hour = time.getUTCHours().toString().padStart(2, '0') + ':00';
const hourlyItem = document.createElement('div');
hourlyItem.className = 'hourly-item';
hourlyItem.innerHTML =
<div class="hour">${hour}</div>
<div class="hourly-temp">${Math.round(temp)}°C</div>
;
hourlyGrid.appendChild(hourlyItem);
}
});
}
// Show content
document.getElementById('loading').style.display = 'none';
document.getElementById('content').style.display = 'block';
}
// Main initialization
async function init() {
try {
const params = getUrlParams();
const data = await fetchWeatherData(params);
renderWeatherData(data, params);
} catch (error) {
console.error('Weather data fetch failed:', error);
showError();
}
}
// Start the application
init();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 11,249 | html / css / js | 1,473 / 3,668 / 6,108 |
|---|---|---|---|
| dom nodes | 27 | dom depth | 8 |
| css rules | 27 | js present | yes |
| brightness | 165.9 | contrast | 65.4 |
| colorfulness | 63.3 | whitespace | 39.0% |
This slot's telemetry
| prompt tokens | 0 | completion tokens | 0 |
|---|---|---|---|
| total tokens | 0 | wall | 30.3 s |
| cost | — | request id | — |
config.json568 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "claude-sonnet-4--cli--kiro--dev",
"effort": null,
"family": "claude",
"m": {
"min": 2,
"q": 2
},
"model_id": "claude-sonnet-4",
"protocol": "cli",
"served_model": "claude-sonnet-4",
"telemetry": {
"completion_tokens": null,
"cost_usd": null,
"prompt_tokens": null,
"total_tokens": null,
"wall_ms": 112596
},
"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--cli--kiro--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-18T16:36:15.251458+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-18T16:35:49.087447+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:37:33.033125+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-18T16:37:02.705825+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:38:51.280469+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-18T16:38:20.397110+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:40:04.349282+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-18T16:39:39.121953+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
}
}
}