claude-haiku-4-5 @ xhigh · CC

CCxhigh
config
claude-haiku-4-5-eff-xhigh--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 @xhigh · 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
gpt-5.6-terra @medium · codex-oauth0.59claude-haiku-4-5 @high · CC0.58claude-haiku-4-5 @medium · CC0.58gpt-5.5 @low · codex-oauth0.58hy3-free · api0.58
farthest
claude-opus-4-8 @max · CC0.38gpt-5.4 @low · codex-oauth0.39minimax-m2.7 · opencode0.41grok-4.5 @high · grok-cli0.41gpt-5.6-terra @low · codex-oauth0.41

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 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;
        }

        html, body {
            width: 100%;
            height: 100%;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .container {
            background: white;
            border-radius: 24px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            width: 100%;
            max-width: 600px;
            padding: 40px;
            min-height: 500px;
        }

        .error {
            color: #d32f2f;
            font-size: 16px;
            padding: 20px;
            background: #ffebee;
            border-radius: 8px;
            text-align: center;
        }

        .loading {
            color: #666;
            font-size: 16px;
            text-align: center;
            padding: 40px 20px;
        }

        .header {
            margin-bottom: 32px;
        }

        .location {
            font-size: 32px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 4px;
            letter-spacing: -0.5px;
        }

        .date {
            font-size: 14px;
            color: #999;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .weather-section {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 40px;
            padding-bottom: 32px;
            border-bottom: 1px solid #e8e8e8;
        }

        .weather-main {
            flex: 1;
        }

        .condition {
            font-size: 48px;
            margin-bottom: 12px;
            line-height: 1;
        }

        .condition-text {
            font-size: 18px;
            color: #666;
            margin-bottom: 16px;
            font-weight: 500;
        }

        .temperatures {
            display: flex;
            gap: 20px;
        }

        .temp-item {
            display: flex;
            flex-direction: column;
        }

        .temp-label {
            font-size: 12px;
            color: #999;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }

        .temp-value {
            font-size: 24px;
            font-weight: 600;
            color: #1a1a1a;
        }

        .hourly-section {
            margin-top: 0;
        }

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

        .hourly-chart {
            display: flex;
            align-items: flex-end;
            justify-content: space-around;
            height: 120px;
            gap: 4px;
        }

        .hour {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }

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

        .bar:hover {
            opacity: 0.8;
        }

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

        .hour-label {
            font-size: 10px;
            color: #aaa;
            margin-top: 4px;
        }
    </style>
</head>
<body>
    <div class="container" id="app">
        <div class="loading">Loading weather data...</div>
    </div>

    <script>
        function getWMODescription(code) {
            const codes = {
                0: { text: 'Clear Sky', emoji: '☀️' },
                1: { text: 'Mainly Clear', emoji: '🌤️' },
                2: { text: 'Partly Cloudy', emoji: '⛅' },
                3: { text: 'Overcast', emoji: '☁️' },
                45: { text: 'Foggy', emoji: '🌫️' },
                48: { text: 'Rime Fog', emoji: '🌫️' },
                51: { text: 'Light Drizzle', emoji: '🌧️' },
                53: { text: 'Drizzle', emoji: '🌧️' },
                55: { text: 'Heavy Drizzle', emoji: '🌧️' },
                61: { text: 'Light Rain', emoji: '🌧️' },
                63: { text: 'Rain', emoji: '🌧️' },
                65: { text: 'Heavy Rain', emoji: '⛈️' },
                71: { text: 'Light Snow', emoji: '🌨️' },
                73: { text: 'Snow', emoji: '🌨️' },
                75: { text: 'Heavy Snow', emoji: '🌨️' },
                77: { text: 'Snow Grains', emoji: '🌨️' },
                80: { text: 'Light Showers', emoji: '🌧️' },
                81: { text: 'Showers', emoji: '🌧️' },
                82: { text: 'Heavy Showers', emoji: '⛈️' },
                85: { text: 'Snow Showers', emoji: '🌨️' },
                86: { text: 'Heavy Snow Showers', emoji: '🌨️' },
                95: { text: 'Thunderstorm', emoji: '⛈️' },
                96: { text: 'Thunderstorm with Hail', emoji: '⛈️' },
                99: { text: 'Thunderstorm with Hail', emoji: '⛈️' }
            };
            return codes[code] || { text: 'Unknown', emoji: '🌡️' };
        }

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

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

        async function loadWeatherData() {
            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 today = new Date().toISOString().split('T')[0];
                const isArchive = date < today;
                const apiPath = isArchive ? '/api/om/archive' : '/api/om/forecast';

                const url = new URL(apiPath, window.location.origin);
                url.searchParams.set('latitude', lat);
                url.searchParams.set('longitude', lon);
                url.searchParams.set('daily', 'temperature_2m_max,temperature_2m_min,weather_code');
                url.searchParams.set('hourly', 'temperature_2m');
                url.searchParams.set('timezone', 'UTC');
                url.searchParams.set('temperature_unit', 'celsius');
                url.searchParams.set('start_date', date);
                url.searchParams.set('end_date', date);

                const response = await fetch(url.toString());
                if (!response.ok) throw new Error(`HTTP ${response.status}`);
                
                const data = await response.json();
                renderWeather(name, date, data);
            } catch (error) {
                renderError(`Unable to load weather data: ${error.message}`);
            }
        }

        function renderError(message) {
            const app = document.getElementById('app');
            app.innerHTML = `<div class="error">${message}</div>`;
        }

        function renderWeather(name, date, data) {
            const dailyData = data.daily;
            const hourlyData = data.hourly;
            const timezone = data.timezone;

            if (!dailyData || dailyData.time.length === 0) {
                renderError('No weather data available for this date.');
                return;
            }

            const dateIndex = 0;
            const maxTemp = dailyData.temperature_2m_max[dateIndex];
            const minTemp = dailyData.temperature_2m_min[dateIndex];
            const weatherCode = dailyData.weather_code[dateIndex];
            const { text: conditionText, emoji: conditionEmoji } = getWMODescription(weatherCode);

            const hourlyTemps = hourlyData.temperature_2m.slice(0, 24);
            const minHourly = Math.min(...hourlyTemps);
            const maxHourly = Math.max(...hourlyTemps);
            const rangeHourly = maxHourly - minHourly || 1;

            let hourlyHtml = '<div class="hourly-chart">';
            hourlyTemps.forEach((temp, hour) => {
                const normalizedHeight = ((temp - minHourly) / rangeHourly) * 100 + 10;
                hourlyHtml += `
                    <div class="hour">
                        <div class="bar" style="height: ${normalizedHeight}px;" title="${temp}°C"></div>
                        <div class="hour-temp">${Math.round(temp)}°</div>
                        <div class="hour-label">${formatTime(hour)}</div>
                    </div>
                `;
            });
            hourlyHtml += '</div>';

            const app = document.getElementById('app');
            app.innerHTML = `
                <div class="header">
                    <div class="location">${name}</div>
                    <div class="date">${formatDate(date)}</div>
                </div>
                <div class="weather-section">
                    <div class="weather-main">
                        <div class="condition">${conditionEmoji}</div>
                        <div class="condition-text">${conditionText}</div>
                        <div class="temperatures">
                            <div class="temp-item">
                                <div class="temp-label">Max</div>
                                <div class="temp-value">${Math.round(maxTemp)}°</div>
                            </div>
                            <div class="temp-item">
                                <div class="temp-label">Min</div>
                                <div class="temp-value">${Math.round(minTemp)}°</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="hourly-section">
                    <div class="hourly-title">Hourly Temperature</div>
                    ${hourlyHtml}
                </div>
            `;
        }

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

L1 — cheap deterministic descriptors

bytes total10,959html / css / js354 / 3,868 / 6,737
dom nodes10dom depth4
css rules24js presentyes
brightness152.7contrast62.2
colorfulness64.8whitespace38.9%

This slot's telemetry

prompt tokens9completion tokens3,808
total tokens3,817wall23 s
cost—request id—
config.json579 B
{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_NONE",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "claude-haiku-4-5-eff-xhigh--cli--claude-code--dev",
  "effort": "xhigh",
  "family": "claude",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "claude-haiku-4-5",
  "protocol": "cli",
  "served_model": "claude-haiku-4-5",
  "telemetry": {
    "completion_tokens": 28549,
    "cost_usd": null,
    "prompt_tokens": 36,
    "total_tokens": 28585,
    "wall_ms": 214614
  },
  "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-xhigh--cli--claude-code--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-17T14:01:24.831731+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T14:01:01.822573+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-17T14:02:03.936980+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T14:01:28.882947+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-17T14:03:16.009655+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T14:02:07.610188+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-17T14:04:47.801608+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T14:03:19.644384+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
    }
  }
}