claude-haiku-4-5 · kiro
kiro
- config
- claude-haiku-4-5--cli--kiro--dev
- batch
- 2026-07-19--unified
- transport
- kiro-cli-isolated-home-github-social
- protocol
- cli · plan
- served model
- claude-haiku-4.5
- 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 neighborsNo similarity data for this session — this batch has no computed pairs.
Fidelity — does the card show the right data?
- namematch
- conditionmatch
- datematch
- max tempmatchshown: 25
- min tempmatchshown: 16
- hourlymatchcoverage 24/24 · 24 match · 0 mismatch · 0 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%);
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
}
.container {
width: 100%;
max-width: 1280px;
height: 800px;
display: flex;
gap: 40px;
background: rgba(255, 255, 255, 0.95);
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
overflow: hidden;
backdrop-filter: blur(10px);
}
.main-section {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 60px 50px;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}
.header {
display: flex;
flex-direction: column;
gap: 8px;
}
.location {
font-size: 32px;
font-weight: 600;
color: #1a1a1a;
letter-spacing: -0.5px;
}
.date {
font-size: 16px;
color: #666;
font-weight: 500;
}
.current-conditions {
display: flex;
align-items: flex-end;
gap: 30px;
margin: 40px 0;
}
.temperature-display {
display: flex;
align-items: flex-start;
gap: 0;
}
.temp-value {
font-size: 140px;
font-weight: 300;
color: #1a1a1a;
line-height: 1;
letter-spacing: -2px;
}
.temp-unit {
font-size: 42px;
color: #666;
margin-top: 20px;
font-weight: 500;
}
.condition-section {
display: flex;
flex-direction: column;
gap: 16px;
}
.condition-text {
font-size: 28px;
font-weight: 600;
color: #1a1a1a;
}
.temp-range {
display: flex;
gap: 30px;
font-size: 18px;
color: #666;
}
.range-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.range-label {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #999;
}
.range-value {
font-size: 24px;
font-weight: 600;
color: #1a1a1a;
}
.hourly-section {
flex: 0 0 280px;
display: flex;
flex-direction: column;
gap: 20px;
padding: 40px 30px;
background: rgba(255, 255, 255, 0.6);
border-left: 1px solid rgba(0, 0, 0, 0.08);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #ccc transparent;
}
.hourly-section::-webkit-scrollbar {
width: 6px;
}
.hourly-section::-webkit-scrollbar-track {
background: transparent;
}
.hourly-section::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}
.hourly-title {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #999;
position: sticky;
top: 0;
background: rgba(255, 255, 255, 0.6);
padding-bottom: 10px;
}
.hourly-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.hourly-item {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
background: white;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.06);
transition: all 0.2s ease;
}
.hourly-item:hover {
background: #f8f9fa;
border-color: rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.hourly-time {
font-size: 12px;
font-weight: 700;
color: #999;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.hourly-temp {
font-size: 18px;
font-weight: 600;
color: #1a1a1a;
}
.error-state {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 40px;
text-align: center;
}
.error-content {
max-width: 400px;
}
.error-icon {
font-size: 64px;
margin-bottom: 20px;
}
.error-title {
font-size: 28px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 12px;
}
.error-message {
font-size: 16px;
color: #666;
line-height: 1.6;
}
.loading {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.spinner {
width: 50px;
height: 50px;
border: 4px solid rgba(102, 126, 234, 0.2);
border-top-color: #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="container" id="container">
<div class="loading">
<div class="spinner"></div>
</div>
</div>
<script>
const weatherCodes = {
0: 'Clear sky',
1: 'Mainly clear',
2: 'Partly cloudy',
3: 'Overcast',
45: 'Foggy',
48: 'Depositing rime fog',
51: 'Light drizzle',
53: 'Moderate drizzle',
55: 'Dense drizzle',
61: 'Slight rain',
63: 'Moderate rain',
65: 'Heavy rain',
71: 'Slight snow',
73: 'Moderate snow',
75: 'Heavy snow',
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'
};
function getWeatherDescription(code) {
return weatherCodes[code] || 'Unknown';
}
function formatDate(dateString) {
const date = new Date(dateString + 'T00:00:00Z');
const options = { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' };
return date.toLocaleDateString('en-US', options);
}
function formatTime(hour) {
return hour.toString().padStart(2, '0') + ':00';
}
async function fetchWeatherData() {
const params = new URLSearchParams(window.location.search);
const lat = params.get('lat') || '52.52';
const lon = params.get('lon') || '13.405';
const name = params.get('name') || 'Berlin';
const date = params.get('date') || new Date().toISOString().split('T')[0];
try {
const endpoint = isDateInPast(date) ? '/api/om/archive' : '/api/om/forecast';
const url = new URL(endpoint, window.location.origin);
url.searchParams.append('latitude', lat);
url.searchParams.append('longitude', lon);
url.searchParams.append('daily', 'temperature_2m_max,temperature_2m_min,weather_code');
url.searchParams.append('hourly', 'temperature_2m');
url.searchParams.append('timezone', 'UTC');
url.searchParams.append('temperature_unit', 'celsius');
url.searchParams.append('start_date', date);
url.searchParams.append('end_date', date);
const response = await fetch(url.toString());
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const data = await response.json();
renderWeatherCard(data, name, date);
} catch (error) {
renderError('Unable to load weather data. Please try again later.');
}
}
function isDateInPast(dateString) {
const targetDate = new Date(dateString + 'T00:00:00Z');
const today = new Date();
today.setUTCHours(0, 0, 0, 0);
return targetDate < today;
}
function renderWeatherCard(data, name, date) {
const daily = data.daily || {};
const hourly = data.hourly || {};
const tempMax = daily.temperature_2m_max?.[0];
const tempMin = daily.temperature_2m_min?.[0];
const weatherCode = daily.weather_code?.[0];
const hourlyTemps = hourly.temperature_2m || [];
if (tempMax === undefined || tempMin === undefined || weatherCode === undefined) {
renderError('Incomplete weather data received.');
return;
}
const condition = getWeatherDescription(weatherCode);
const formattedDate = formatDate(date);
let hourlyHTML = '';
for (let i = 0; i < Math.min(24, hourlyTemps.length); i++) {
const temp = Math.round(hourlyTemps[i] * 10) / 10;
hourlyHTML += `
<div class="hourly-item">
<div class="hourly-time">${formatTime(i)}</div>
<div class="hourly-temp">${temp}°</div>
</div>
`;
}
const html = `
<div class="main-section">
<div class="header">
<div class="location">${name}</div>
<div class="date">${formattedDate}</div>
</div>
<div class="current-conditions">
<div class="temperature-display">
<div class="temp-value">${Math.round(tempMax)}</div>
<div class="temp-unit">°C</div>
</div>
<div class="condition-section">
<div class="condition-text">${condition}</div>
<div class="temp-range">
<div class="range-item">
<div class="range-label">High</div>
<div class="range-value">${Math.round(tempMax)}°</div>
</div>
<div class="range-item">
<div class="range-label">Low</div>
<div class="range-value">${Math.round(tempMin)}°</div>
</div>
</div>
</div>
</div>
</div>
<div class="hourly-section">
<div class="hourly-title">Hourly</div>
<div class="hourly-grid">
${hourlyHTML}
</div>
</div>
`;
document.getElementById('container').innerHTML = html;
}
function renderError(message) {
const html = `
<div class="error-state">
<div class="error-content">
<div class="error-icon">⚠️</div>
<div class="error-title">Unable to Load</div>
<div class="error-message">${message}</div>
</div>
</div>
`;
document.getElementById('container').innerHTML = html;
}
fetchWeatherData();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 13,039 | html / css / js | 386 / 6,123 / 6,530 |
|---|---|---|---|
| dom nodes | 11 | dom depth | 5 |
| css rules | 36 | js present | yes |
| brightness | 229.1 | contrast | 33.6 |
| colorfulness | 24.1 | whitespace | 92.4% |
This slot's telemetry
| prompt tokens | 0 | completion tokens | 0 |
|---|---|---|---|
| total tokens | 0 | wall | 41.2 s |
| cost | — | request id | — |
config.json571 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "claude-haiku-4-5--cli--kiro--dev",
"effort": null,
"family": "claude",
"m": {
"min": 2,
"q": 2
},
"model_id": "claude-haiku-4-5",
"protocol": "cli",
"served_model": "claude-haiku-4.5",
"telemetry": {
"completion_tokens": null,
"cost_usd": null,
"prompt_tokens": null,
"total_tokens": null,
"wall_ms": 103136
},
"transport": "kiro-cli-isolated-home-github-social",
"vendor_sanction_ref": null
}send-log2.5 KB
{
"N": 2,
"batch_id": "2026-07-20--refill3-kiro-haiku",
"config_id": "claude-haiku-4-5--cli--kiro--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-20T11:17:11.966484+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-20T11:16:45.808904+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-20T11:17:57.687129+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-20T11:17:16.510636+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-20T11:18:19.048439+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-20T11:18:01.016621+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-20T11:18:39.540878+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-20T11:18:21.761318+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
}
}
}