claude-haiku-4-5 @ high · CC
CChigh
- config
- claude-haiku-4-5-eff-high--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
claude-haiku-4-5 @xhigh · CC0.58claude-sonnet-4 · kiro0.56glm-5.2 · opencode0.56gpt-5.5 @xhigh · codex-oauth0.56qwen3.5-plus · go0.56farthest
grok-4.5 @medium · grok-cli0.36glm-5.1-eff-enabled--api--official--dev0.41deepseek-v4-flash · opencode0.41minimax-m2.7 · opencode0.42gpt-5.6-sol @medium · codex-oauth0.42within 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 tempambiguousshown: 17max-equals-min
- min tempambiguousshown: 17max-equals-min
- 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;
}
html, body {
width: 100%;
height: 100%;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
}
.card {
background: white;
border-radius: 24px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
padding: 50px;
width: 90%;
max-width: 700px;
}
.header {
text-align: center;
margin-bottom: 40px;
}
.location {
font-size: 40px;
font-weight: 700;
color: #0f172a;
margin-bottom: 8px;
letter-spacing: -0.5px;
}
.date {
font-size: 16px;
color: #64748b;
font-weight: 500;
letter-spacing: 0.3px;
}
.main-weather {
text-align: center;
margin-bottom: 50px;
padding-bottom: 40px;
border-bottom: 1px solid #e2e8f0;
}
.weather-icon {
font-size: 64px;
margin-bottom: 16px;
}
.weather-condition {
font-size: 22px;
color: #475569;
margin-bottom: 30px;
font-weight: 500;
}
.temperatures {
display: flex;
justify-content: center;
gap: 60px;
}
.temp-box {
text-align: center;
}
.temp-label {
font-size: 12px;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 12px;
font-weight: 600;
}
.temp-value {
font-size: 56px;
font-weight: 300;
color: #0f172a;
line-height: 1;
}
.temp-unit {
font-size: 32px;
font-weight: 400;
margin-left: 4px;
}
.hourly-section {
margin-top: 30px;
}
.hourly-title {
font-size: 12px;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 24px;
}
.hourly-chart {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 6px;
height: 160px;
}
.hour-bar {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
min-width: 0;
}
.bar {
width: 100%;
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
border-radius: 3px 3px 0 0;
min-height: 3px;
transition: all 0.2s ease;
cursor: pointer;
}
.bar:hover {
filter: brightness(0.9);
transform: scaleY(1.05);
transform-origin: bottom;
}
.hour-temp {
font-size: 11px;
color: #475569;
margin-top: 8px;
font-weight: 500;
}
.hour-time {
font-size: 10px;
color: #94a3b8;
margin-top: 4px;
}
.error {
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 12px;
padding: 32px 24px;
color: #991b1b;
text-align: center;
font-size: 16px;
line-height: 1.6;
}
.error strong {
display: block;
font-size: 18px;
margin-bottom: 8px;
}
.loading {
text-align: center;
font-size: 18px;
color: #64748b;
padding: 60px 40px;
font-weight: 500;
}
</style>
</head>
<body>
<div class="card">
<div id="content">
<div class="loading">Loading weather data...</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 getWeatherEmoji(code) {
if (code === 0) return '☀️';
if (code === 1 || code === 2) return '⛅';
if (code === 3) return '☁️';
if (code === 45 || code === 48) return '🌫️';
if (code >= 51 && code <= 55) return '🌧️';
if (code >= 61 && code <= 65) return '🌧️';
if (code >= 71 && code <= 77) return '❄️';
if (code >= 80 && code <= 82) return '🌧️';
if (code >= 85 && code <= 86) return '🌨️';
if (code >= 95 && code <= 99) return '⛈️';
return '🌤️';
}
function formatDate(dateStr) {
const date = new Date(dateStr + 'T00:00:00Z');
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
return date.toLocaleDateString('en-US', options);
}
function getQueryParam(name, defaultValue) {
const params = new URLSearchParams(window.location.search);
return params.get(name) || defaultValue;
}
async function loadWeather() {
try {
const lat = getQueryParam('lat', '52.52');
const lon = getQueryParam('lon', '13.405');
const name = getQueryParam('name', 'Berlin');
const date = getQueryParam('date', new Date().toISOString().split('T')[0]);
const today = new Date().toISOString().split('T')[0];
const useArchive = date < today;
const apiPath = useArchive ? '/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(`Unable to fetch weather data (${response.status})`);
}
const data = await response.json();
if (!data.daily || !data.daily.time) {
throw new Error('Invalid API response format');
}
const dateIndex = data.daily.time.indexOf(date);
if (dateIndex === -1) {
throw new Error('Requested date not found in weather data');
}
const maxTemp = data.daily.temperature_2m_max[dateIndex];
const minTemp = data.daily.temperature_2m_min[dateIndex];
const weatherCode = data.daily.weather_code[dateIndex];
const hourlyTemps = data.hourly.temperature_2m || [];
if (typeof maxTemp !== 'number' || typeof minTemp !== 'number') {
throw new Error('Temperature data is invalid');
}
const weatherCondition = weatherCodes[weatherCode] || 'Unknown';
const emoji = getWeatherEmoji(weatherCode);
const formattedDate = formatDate(date);
const filteredHourlyTemps = hourlyTemps.slice(0, 24);
if (filteredHourlyTemps.length === 0) {
throw new Error('No hourly temperature data available');
}
const minHourlyTemp = Math.min(...filteredHourlyTemps);
const maxHourlyTemp = Math.max(...filteredHourlyTemps);
const tempRange = Math.max(maxHourlyTemp - minHourlyTemp, 1);
const hourlyBarsHtml = filteredHourlyTemps.map((temp, idx) => {
const height = ((temp - minHourlyTemp) / tempRange) * 140 + 20;
const hour = String(idx).padStart(2, '0');
return `
<div class="hour-bar">
<div class="bar" style="height: ${height}px;"></div>
<div class="hour-temp">${Math.round(temp)}°</div>
<div class="hour-time">${hour}:00</div>
</div>
`;
}).join('');
const html = `
<div class="header">
<div class="location">${name}</div>
<div class="date">${formattedDate}</div>
</div>
<div class="main-weather">
<div class="weather-icon">${emoji}</div>
<div class="weather-condition">${weatherCondition}</div>
<div class="temperatures">
<div class="temp-box">
<div class="temp-label">Max</div>
<div class="temp-value">${Math.round(maxTemp)}<span class="temp-unit">°</span></div>
</div>
<div class="temp-box">
<div class="temp-label">Min</div>
<div class="temp-value">${Math.round(minTemp)}<span class="temp-unit">°</span></div>
</div>
</div>
</div>
<div class="hourly-section">
<div class="hourly-title">Hourly Temperature</div>
<div class="hourly-chart">
${hourlyBarsHtml}
</div>
</div>
`;
document.getElementById('content').innerHTML = html;
} catch (error) {
console.error('Weather loading error:', error);
document.getElementById('content').innerHTML = `
<div class="error">
<strong>Unable to load weather data</strong>
${error.message}
</div>
`;
}
}
loadWeather();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 11,889 | html / css / js | 386 / 4,232 / 7,271 |
|---|---|---|---|
| dom nodes | 11 | dom depth | 5 |
| css rules | 26 | js present | yes |
| brightness | 177.3 | contrast | 68.2 |
| colorfulness | 62.9 | whitespace | 44.5% |
This slot's telemetry
| prompt tokens | 9 | completion tokens | 10,955 |
|---|---|---|---|
| total tokens | 10,964 | wall | 91.5 s |
| cost | — | request id | — |
config.json577 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "claude-haiku-4-5-eff-high--cli--claude-code--dev",
"effort": "high",
"family": "claude",
"m": {
"min": 2,
"q": 2
},
"model_id": "claude-haiku-4-5",
"protocol": "cli",
"served_model": "claude-haiku-4-5",
"telemetry": {
"completion_tokens": 32272,
"cost_usd": null,
"prompt_tokens": 36,
"total_tokens": 32308,
"wall_ms": 256536
},
"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-high--cli--claude-code--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-17T13:46:24.571970+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T13:44:53.109669+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:47:26.563960+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T13:46:29.303787+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:48:02.615694+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T13:47:30.519480+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-17T13:49:21.729100+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T13:48:06.006790+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
}
}
}