claude-haiku-4-5 @ max · CC
CCmax
- config
- claude-haiku-4-5-eff-max--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
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
qwen3.5-plus · go0.66gpt-5.6-sol @xhigh · kiro0.63claude-fable-5 @high · CC0.61qwen3.7-max · go0.61gpt-5.6-luna @max · kiro0.59farthest
claude-opus-4-6 @high · kiro0.38grok-4.3 · api0.39claude-opus-4-6 @max · kiro0.39qwen3.7-max · qoder0.41grok-4.3 @medium · api0.41within 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;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 40px 20px;
}
.container {
width: 100%;
max-width: 640px;
background: white;
border-radius: 28px;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
overflow: hidden;
animation: slideIn 0.4s ease-out;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 40px 32px;
text-align: center;
}
.location-name {
font-size: 32px;
font-weight: 700;
margin-bottom: 8px;
letter-spacing: -0.5px;
}
.date-display {
font-size: 14px;
opacity: 0.95;
font-weight: 500;
}
.content {
padding: 40px 32px;
}
.main-weather {
display: flex;
align-items: center;
gap: 32px;
margin-bottom: 48px;
}
.icon-container {
flex-shrink: 0;
}
.weather-icon {
font-size: 96px;
display: flex;
justify-content: center;
align-items: center;
width: 120px;
height: 120px;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
border-radius: 20px;
}
.weather-info {
flex: 1;
}
.condition {
font-size: 24px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 16px;
}
.temperature-row {
display: flex;
gap: 32px;
}
.temp-item {
display: flex;
flex-direction: column;
}
.temp-label {
font-size: 12px;
font-weight: 600;
color: #999;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.temp-value {
font-size: 42px;
font-weight: 700;
color: #667eea;
line-height: 1;
}
.hourly-section {
margin-top: 48px;
}
.section-header {
font-size: 13px;
font-weight: 700;
color: #666;
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 20px;
}
.hourly-bars {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 3px;
height: 140px;
padding-bottom: 28px;
position: relative;
}
.bar-wrapper {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
height: 100%;
}
.bar {
width: 100%;
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
border-radius: 4px 4px 0 0;
min-height: 6px;
flex-grow: 1;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
transition: all 0.2s;
}
.bar:hover {
opacity: 0.85;
transform: scaleY(1.05);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.bar-label {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font-size: 10px;
color: #999;
font-weight: 500;
margin-top: 4px;
white-space: nowrap;
}
.bar-temp {
position: absolute;
top: -24px;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
font-weight: 600;
color: #1a1a1a;
white-space: nowrap;
}
.error-box {
padding: 32px;
text-align: center;
color: #d32f2f;
}
.error-icon {
font-size: 48px;
margin-bottom: 16px;
}
.error-text {
font-size: 16px;
font-weight: 500;
}
.error-detail {
font-size: 13px;
color: #999;
margin-top: 8px;
}
.loading {
padding: 60px 32px;
text-align: center;
color: #999;
font-size: 16px;
}
.spinner {
display: inline-block;
width: 24px;
height: 24px;
border: 3px solid #e0e0e0;
border-top-color: #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="header">
<div class="location-name" id="location">Loading</div>
<div class="date-display" id="dateDisplay">—</div>
</div>
<div class="content" id="content">
<div class="loading">
<div class="spinner"></div>
<div>Loading weather data</div>
</div>
</div>
</div>
<script>
const WEATHER_CODES = {
0: { icon: '☀️', desc: 'Clear sky' },
1: { icon: '🌤️', desc: 'Mainly clear' },
2: { icon: '⛅', desc: 'Partly cloudy' },
3: { icon: '☁️', desc: 'Overcast' },
45: { icon: '🌫️', desc: 'Foggy' },
48: { icon: '🌫️', desc: 'Foggy' },
51: { icon: '🌧️', desc: 'Drizzle' },
53: { icon: '🌧️', desc: 'Drizzle' },
55: { icon: '🌧️', desc: 'Heavy drizzle' },
61: { icon: '🌧️', desc: 'Rain' },
63: { icon: '🌧️', desc: 'Rain' },
65: { icon: '⛈️', desc: 'Heavy rain' },
71: { icon: '❄️', desc: 'Snow' },
73: { icon: '❄️', desc: 'Snow' },
75: { icon: '❄️', desc: 'Heavy snow' },
77: { icon: '❄️', desc: 'Snow grains' },
80: { icon: '🌧️', desc: 'Rain showers' },
81: { icon: '⛈️', desc: 'Rain showers' },
82: { icon: '⛈️', desc: 'Violent rain' },
85: { icon: '❄️', desc: 'Snow showers' },
86: { icon: '❄️', desc: 'Heavy snow showers' },
95: { icon: '⛈️', desc: 'Thunderstorm' },
96: { icon: '⛈️', desc: 'Thunderstorm' },
99: { icon: '⛈️', desc: 'Thunderstorm' },
};
function getWeatherInfo(code) {
return WEATHER_CODES[code] || { icon: '🌡️', desc: 'Unknown' };
}
function formatDate(dateStr) {
const date = new Date(dateStr + 'T00:00:00Z');
return new Intl.DateTimeFormat('en-US', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
}).format(date);
}
function formatHour(hour) {
return `${String(hour).padStart(2, '0')}:00`;
}
async function fetchWeather(lat, lon, date) {
const today = new Date();
today.setUTCHours(0, 0, 0, 0);
const requestDate = new Date(date + 'T00:00:00Z');
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,
});
const response = await fetch(`${endpoint}?${params}`);
if (!response.ok) throw new Error(`API error: ${response.status}`);
return response.json();
}
function renderCard(data, location, date) {
const daily = data.daily;
const hourly = data.hourly;
const maxTemp = Math.round(daily.temperature_2m_max[0]);
const minTemp = Math.round(daily.temperature_2m_min[0]);
const code = daily.weather_code[0];
const { icon, desc } = getWeatherInfo(code);
let html = `
<div class="main-weather">
<div class="icon-container">
<div class="weather-icon">${icon}</div>
</div>
<div class="weather-info">
<div class="condition">${desc}</div>
<div class="temperature-row">
<div class="temp-item">
<div class="temp-label">High</div>
<div class="temp-value">${maxTemp}°</div>
</div>
<div class="temp-item">
<div class="temp-label">Low</div>
<div class="temp-value">${minTemp}°</div>
</div>
</div>
</div>
</div>
`;
if (hourly?.temperature_2m?.length > 0) {
const temps = hourly.temperature_2m;
const minVal = Math.min(...temps);
const maxVal = Math.max(...temps);
const range = maxVal - minVal || 1;
html += `<div class="hourly-section">
<div class="section-header">Hourly Forecast</div>
<div class="hourly-bars">`;
temps.forEach((temp, idx) => {
const pct = ((temp - minVal) / range) * 100 + 15;
const rounded = Math.round(temp);
html += `
<div class="bar-wrapper" style="justify-self: stretch; flex: 1;">
<div class="bar" style="height: ${pct}%">
<div class="bar-temp">${rounded}°</div>
</div>
<div class="bar-label">${formatHour(idx)}</div>
</div>`;
});
html += `</div></div>`;
}
document.getElementById('location').textContent = location;
document.getElementById('dateDisplay').textContent = formatDate(date);
document.getElementById('content').innerHTML = html;
}
function showError(err) {
document.getElementById('content').innerHTML = `
<div class="error-box">
<div class="error-icon">⚠️</div>
<div class="error-text">Unable to load weather</div>
<div class="error-detail">${err}</div>
</div>`;
}
(async () => {
try {
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];
const data = await fetchWeather(lat, lon, date);
renderCard(data, name, date);
} catch (err) {
showError(err.message);
}
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 13,003 | html / css / js | 665 / 5,878 / 6,460 |
|---|---|---|---|
| dom nodes | 16 | dom depth | 6 |
| css rules | 35 | js present | yes |
| brightness | 141.6 | contrast | 54.6 |
| colorfulness | 62.6 | whitespace | 41.3% |
This slot's telemetry
| prompt tokens | 9 | completion tokens | 7,356 |
|---|---|---|---|
| total tokens | 7,365 | wall | 39.4 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-max--cli--claude-code--dev",
"effort": "max",
"family": "claude",
"m": {
"min": 2,
"q": 2
},
"model_id": "claude-haiku-4-5",
"protocol": "cli",
"served_model": "claude-haiku-4-5",
"telemetry": {
"completion_tokens": 27971,
"cost_usd": null,
"prompt_tokens": 36,
"total_tokens": 28007,
"wall_ms": 197242
},
"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-max--cli--claude-code--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-17T13:54:09.756044+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T13:53:17.581515+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:54:52.577856+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T13:54:13.129219+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:55:20.393921+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T13:54:56.759230+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:56:46.199242+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T13:55:24.209861+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
}
}
}