claude-haiku-4-5 @ low · CC

CClow
config
claude-haiku-4-5-eff-low--cli--claude-code--dev
batch
2026-07-19--unified
transport
claude-code-cli-headless
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 @low · CC 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
kimi-k2.6 · go0.66claude-sonnet-5 @medium · kiro0.64doubao-seed-2-1-pro-260628 @disabled · api0.64claude-fable-5 @low · CC0.63claude-opus-4-8 @low · kiro0.63
farthest
gpt-5.6-luna @medium · kiro0.42gpt-5.4 @low · codex-oauth0.42gpt-5.6-terra @none · codex-oauth0.44gpt-5.6-sol @medium · codex-oauth0.44claude-sonnet-5 @xhigh · CC0.44

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 tempambiguousinsufficient-distinct-temperature-nodes
  • min tempambiguousinsufficient-distinct-temperature-nodes
  • hourlyambiguouscoverage · 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%);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            width: 100%;
            max-width: 1280px;
            height: 800px;
            display: flex;
            gap: 30px;
        }

        .card {
            flex: 1;
            background: white;
            border-radius: 24px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-width: 0;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 10px;
        }

        .location-info h1 {
            font-size: 32px;
            font-weight: 600;
            color: #1a1a1a;
            margin-bottom: 4px;
        }

        .date {
            font-size: 14px;
            color: #666;
            font-weight: 500;
        }

        .main-content {
            display: flex;
            gap: 40px;
            align-items: center;
            margin-bottom: 30px;
        }

        .temperature-section {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .temperature-display {
            display: flex;
            align-items: baseline;
            gap: 8px;
        }

        .temp-main {
            font-size: 72px;
            font-weight: 300;
            color: #667eea;
            line-height: 1;
        }

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

        .temp-range {
            display: flex;
            gap: 20px;
            font-size: 16px;
            color: #333;
        }

        .temp-range div {
            display: flex;
            gap: 6px;
        }

        .temp-range label {
            color: #999;
            font-weight: 500;
        }

        .condition {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .condition-text {
            font-size: 18px;
            font-weight: 500;
            color: #1a1a1a;
        }

        .condition-secondary {
            font-size: 13px;
            color: #999;
        }

        .hourly-section {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .hourly-label {
            font-size: 12px;
            font-weight: 600;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .hourly-chart {
            display: flex;
            gap: 2px;
            align-items: flex-end;
            height: 120px;
            background: #f8f9fa;
            padding: 12px;
            border-radius: 12px;
            overflow-x: auto;
            scroll-behavior: smooth;
        }

        .hour-bar {
            flex: 0 0 calc(100% / 24);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            gap: 4px;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .hour-bar:hover {
            opacity: 0.8;
        }

        .bar {
            width: 100%;
            background: linear-gradient(to top, #667eea, #764ba2);
            border-radius: 4px 4px 0 0;
            min-height: 4px;
            transition: opacity 0.2s;
        }

        .hour-time {
            font-size: 10px;
            color: #999;
            font-weight: 500;
        }

        .hour-temp {
            font-size: 11px;
            font-weight: 600;
            color: #1a1a1a;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .hour-bar:hover .hour-temp {
            opacity: 1;
        }

        .error {
            background: #fff5f5;
            border: 1px solid #fecaca;
            border-radius: 12px;
            padding: 24px;
            color: #991b1b;
            font-size: 14px;
            line-height: 1.6;
        }

        .loading {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            font-size: 16px;
            color: #666;
        }

        .spinner {
            width: 20px;
            height: 20px;
            border: 2px solid #e0e0e0;
            border-top-color: #667eea;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card" id="weatherCard">
            <div class="loading">
                <div class="spinner"></div>
                Loading weather data...
            </div>
        </div>
    </div>

    <script>
        const WEATHER_CODE_MAP = {
            0: 'Clear sky',
            1: 'Partly cloudy',
            2: 'Partly cloudy',
            3: 'Overcast',
            45: 'Foggy',
            48: 'Foggy',
            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 hail',
            99: 'Thunderstorm with hail'
        };

        function getWeatherDescription(code) {
            return WEATHER_CODE_MAP[code] || 'Unknown';
        }

        function formatDate(dateString) {
            const date = new Date(dateString + 'T00:00:00Z');
            return date.toLocaleDateString('en-US', { 
                weekday: 'long', 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric' 
            });
        }

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

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

        function isDateInFuture(dateString) {
            const targetDate = new Date(dateString + 'T00:00:00Z');
            const today = new Date();
            today.setUTCHours(0, 0, 0, 0);
            return targetDate >= today;
        }

        async function fetchWeatherData(lat, lon, date) {
            const isFuture = isDateInFuture(date);
            const endpoint = isFuture ? '/api/om/forecast' : '/api/om/archive';
            
            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
            });

            const response = await fetch(`${endpoint}?${params}`);
            if (!response.ok) {
                throw new Error(`API error: ${response.status}`);
            }
            return response.json();
        }

        function renderWeatherCard(data, location, date) {
            const card = document.getElementById('weatherCard');
            
            const daily = data.daily;
            const hourly = data.hourly;
            
            if (!daily || !daily.time || daily.time.length === 0) {
                card.innerHTML = '<div class="error">No weather data available for the selected date.</div>';
                return;
            }

            const maxTemp = daily.temperature_2m_max[0];
            const minTemp = daily.temperature_2m_min[0];
            const weatherCode = daily.weather_code[0];
            const weatherDesc = getWeatherDescription(weatherCode);

            const hourlyTemps = hourly?.temperature_2m || [];
            const hourlyTime = hourly?.time || [];

            let hourlyHtml = '';
            if (hourlyTemps.length > 0) {
                const minHourly = Math.min(...hourlyTemps);
                const maxHourly = Math.max(...hourlyTemps);
                const range = maxHourly - minHourly || 1;

                hourlyHtml = hourlyTemps.map((temp, idx) => {
                    const timeStr = hourlyTime[idx] || '';
                    const hour = timeStr.split('T')[1]?.split(':')[0] || '';
                    const height = ((temp - minHourly) / range) * 100 + 20;
                    return `
                        <div class="hour-bar" title="${hour}:00 - ${temp}°C">
                            <div class="bar" style="height: ${height}%"></div>
                            <div class="hour-time">${hour}h</div>
                            <div class="hour-temp">${Math.round(temp)}°</div>
                        </div>
                    `;
                }).join('');
            }

            const formattedDate = formatDate(date);

            card.innerHTML = `
                <div class="header">
                    <div class="location-info">
                        <h1>${location}</h1>
                        <div class="date">${formattedDate}</div>
                    </div>
                </div>

                <div class="main-content">
                    <div class="temperature-section">
                        <div class="temperature-display">
                            <div class="temp-main">${Math.round(maxTemp)}°</div>
                            <div class="temp-label">max</div>
                        </div>
                        <div class="temp-range">
                            <div>
                                <label>Min:</label>
                                <span>${Math.round(minTemp)}°C</span>
                            </div>
                        </div>
                    </div>
                    <div class="condition">
                        <div class="condition-text">${weatherDesc}</div>
                        <div class="condition-secondary">Code ${weatherCode}</div>
                    </div>
                </div>

                ${hourlyHtml ? `
                    <div class="hourly-section">
                        <div class="hourly-label">Hourly Temperature</div>
                        <div class="hourly-chart">${hourlyHtml}</div>
                    </div>
                ` : ''}
            `;
        }

        async function init() {
            try {
                const lat = parseFloat(getQueryParam('lat', '52.52'));
                const lon = parseFloat(getQueryParam('lon', '13.405'));
                const name = getQueryParam('name', 'Berlin');
                const date = getQueryParam('date', getTodayDateString());

                const data = await fetchWeatherData(lat, lon, date);
                renderWeatherCard(data, name, date);
            } catch (error) {
                const card = document.getElementById('weatherCard');
                card.innerHTML = `<div class="error">Unable to load weather data: ${error.message}</div>`;
            }
        }

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

L1 — cheap deterministic descriptors

bytes total12,217html / css / js482 / 5,088 / 6,647
dom nodes12dom depth6
css rules32js presentyes
brightness244.3contrast33.7
colorfulness23.1whitespace94.0%

This slot's telemetry

prompt tokens9completion tokens3,895
total tokens3,904wall38.6 s
cost—request id—
config.json575 B
{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_NONE",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "claude-haiku-4-5-eff-low--cli--claude-code--dev",
  "effort": "low",
  "family": "claude",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "claude-haiku-4-5",
  "protocol": "cli",
  "served_model": "claude-haiku-4-5",
  "telemetry": {
    "completion_tokens": 24811,
    "cost_usd": null,
    "prompt_tokens": 36,
    "total_tokens": 24847,
    "wall_ms": 215668
  },
  "transport": "claude-code-cli-headless",
  "vendor_sanction_ref": null
}
send-log2.5 KB
{
  "N": 2,
  "batch_id": "2026-07-17--dev-cc-haiku45",
  "config_id": "claude-haiku-4-5-eff-low--cli--claude-code--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-17T13:50:27.776640+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T13:49:28.433842+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-17T13:51:10.138743+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T13:50:31.507129+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-17T13:52:12.380783+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T13:51:12.997354+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-17T13:53:13.858974+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T13:52:15.537048+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
    }
  }
}