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
all efforts & arms of this model →
variant
live
slot 0 · P-q · sandboxed iframe
claude-haiku-4-5 · 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

nearest
claude-opus-4-8 @high · CC0.63gpt-5.4 @medium · codex-oauth0.61minimax-m2.7 · opencode0.61big-pickle · api0.59claude-haiku-4-5 @low · CC0.59
farthest
minimax-m2.5 · go0.44gpt-5.6-terra @medium · kiro0.44qwen3.5-plus · go0.45minimax-m2.7 · go0.45kimi-k2.6 · go0.45

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 tempmismatchshown: 17.4
  • min tempmismatchshown: 17.2
  • hourlymatchcoverage 22/24 · 22 match · 0 mismatch · 2 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;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px;
        }

        .container {
            width: 100%;
            max-width: 600px;
        }

        .card {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 40px 30px 30px;
        }

        .location {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .date {
            font-size: 14px;
            opacity: 0.9;
            font-weight: 500;
        }

        .main-content {
            padding: 40px 30px;
        }

        .temperature-row {
            display: flex;
            align-items: flex-start;
            gap: 40px;
            margin-bottom: 30px;
        }

        .temp-display {
            display: flex;
            flex-direction: column;
            gap: 20px;
            flex: 1;
        }

        .temp-item {
            display: flex;
            align-items: baseline;
            gap: 10px;
        }

        .temp-label {
            font-size: 14px;
            color: #666;
            font-weight: 500;
            min-width: 100px;
        }

        .temp-value {
            font-size: 36px;
            font-weight: 700;
            color: #333;
        }

        .temp-unit {
            font-size: 20px;
            color: #999;
            margin-left: -5px;
        }

        .condition {
            font-size: 16px;
            color: #555;
            font-weight: 500;
            padding: 12px 16px;
            background: #f5f5f5;
            border-radius: 8px;
            text-align: center;
        }

        .hourly-section {
            margin-top: 30px;
        }

        .section-title {
            font-size: 14px;
            font-weight: 600;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 16px;
        }

        .hourly-chart {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding-bottom: 10px;
            scroll-behavior: smooth;
        }

        .hourly-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
            padding: 8px 4px;
        }

        .hourly-time {
            font-size: 12px;
            color: #999;
            font-weight: 500;
        }

        .hourly-bar {
            width: 30px;
            background: linear-gradient(to top, #667eea, #764ba2);
            border-radius: 4px 4px 0 0;
            min-height: 20px;
            position: relative;
        }

        .hourly-temp {
            font-size: 12px;
            font-weight: 600;
            color: #333;
            margin-top: 2px;
        }

        .error {
            background: #fee;
            color: #c33;
            padding: 30px;
            border-radius: 20px;
            text-align: center;
            font-size: 16px;
        }

        .loading {
            padding: 60px 30px;
            text-align: center;
            color: #999;
        }

        .spinner {
            display: inline-block;
            width: 40px;
            height: 40px;
            border: 4px solid #ddd;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin-bottom: 16px;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card" id="card">
            <div class="loading">
                <div class="spinner"></div>
                <p>Loading weather data...</p>
            </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(dateStr) {
            const date = new Date(dateStr + 'T00:00:00Z');
            return date.toLocaleDateString('en-US', { 
                weekday: 'long', 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric',
                timeZone: 'UTC'
            });
        }

        function formatTime(hour) {
            return `${String(hour).padStart(2, '0')}:00`;
        }

        function getUrlParam(param, defaultValue) {
            const params = new URLSearchParams(window.location.search);
            return params.get(param) || defaultValue;
        }

        function getTodayUTC() {
            const now = new Date();
            return now.toISOString().split('T')[0];
        }

        async function fetchWeatherData() {
            const lat = getUrlParam('lat', '52.52');
            const lon = getUrlParam('lon', '13.405');
            const name = getUrlParam('name', 'Berlin');
            const date = getUrlParam('date', getTodayUTC());

            const requestDate = new Date(date);
            const today = new Date();
            today.setUTCHours(0, 0, 0, 0);
            
            const isHistorical = requestDate < today;
            const endpoint = isHistorical ? '/api/om/archive' : '/api/om/forecast';

            const params = 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 response = await fetch(`${endpoint}?${params}`);
                if (!response.ok) throw new Error('API request failed');
                
                const data = await response.json();
                renderWeather(data, name, date);
            } catch (error) {
                renderError(`Unable to load weather data. ${error.message}`);
            }
        }

        function renderWeather(data, locationName, date) {
            const dailyIndex = 0;
            const maxTemp = data.daily.temperature_2m_max[dailyIndex];
            const minTemp = data.daily.temperature_2m_min[dailyIndex];
            const weatherCode = data.daily.weather_code[dailyIndex];
            const hourlyTemps = data.hourly.temperature_2m;

            const card = document.getElementById('card');
            card.innerHTML = `
                <div class="header">
                    <div class="location">${escapeHtml(locationName)}</div>
                    <div class="date">${formatDate(date)}</div>
                </div>
                <div class="main-content">
                    <div class="temperature-row">
                        <div class="temp-display">
                            <div class="temp-item">
                                <span class="temp-label">High</span>
                                <span class="temp-value">${maxTemp}<span class="temp-unit">°C</span></span>
                            </div>
                            <div class="temp-item">
                                <span class="temp-label">Low</span>
                                <span class="temp-value">${minTemp}<span class="temp-unit">°C</span></span>
                            </div>
                        </div>
                    </div>
                    <div class="condition">${getWeatherDescription(weatherCode)}</div>
                    <div class="hourly-section">
                        <div class="section-title">Hourly Temperature</div>
                        <div class="hourly-chart">
                            ${hourlyTemps.map((temp, i) => {
                                const minT = Math.min(...hourlyTemps);
                                const maxT = Math.max(...hourlyTemps);
                                const range = maxT - minT || 1;
                                const barHeight = ((temp - minT) / range) * 60 + 20;
                                return `
                                    <div class="hourly-item">
                                        <div class="hourly-time">${formatTime(i)}</div>
                                        <div class="hourly-bar" style="height: ${barHeight}px;"></div>
                                        <div class="hourly-temp">${temp}°</div>
                                    </div>
                                `;
                            }).join('')}
                        </div>
                    </div>
                </div>
            `;
        }

        function renderError(message) {
            const card = document.getElementById('card');
            card.innerHTML = `
                <div class="header">
                    <div class="location">Weather Card</div>
                </div>
                <div class="error">${escapeHtml(message)}</div>
            `;
        }

        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

        fetchWeatherData();
    </script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total10,890html / css / js482 / 4,157 / 6,251
dom nodes13dom depth6
css rules27js presentyes
brightness149.4contrast60.7
colorfulness64.5whitespace39.2%

This slot's telemetry

prompt tokens0completion tokens0
total tokens0wall25.7 s
cost—request id—
config.json570 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": 1,
    "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": 60153
  },
  "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-haiku-4-5--cli--kiro--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-19T06:40:19.693216+00:00",
          "http_status": null,
          "outcome": "infra-failed",
          "reached_model": true,
          "reason": "mid-stream-death",
          "request_id": null,
          "started_at": "2026-07-19T06:39:49.239715+00:00"
        }
      ],
      "block_index": 0,
      "model_reaching_attempt_index": 0,
      "slot_index": 0,
      "terminal_state": "infra-failed",
      "variant": "P-min"
    },
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-19T06:40:45.375958+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-19T06:40:19.695304+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-19T06:41:05.896585+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-19T06:40:49.560060+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-19T06:41:27.086545+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-19T06:41:08.946390+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
    }
  }
}