claude-opus-4-8 @ medium · CC
CCmedium
- config
- claude-opus-4-8-eff-medium--cli--claude-code--dev
- batch
- 2026-07-19--unified
- transport
- claude-code-cli-headless
- protocol
- cli · plan
- served model
- claude-opus-4-8
- 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
glm-5.1 · opencode0.67claude-sonnet-4-6 @high · kiro0.66kimi-k2.6 · opencode0.66glm-5.1-eff-enabled--api--official--dev0.63gpt-5.6-luna @high · codex-oauth0.63farthest
gpt-5.5 @medium · codex-oauth0.47gpt-5.4-mini @high · codex-oauth0.47minimax-m2.7 · go0.48gpt-5.5 @high · codex-oauth0.48claude-sonnet-5 @max · CC0.48within 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
- hourlymismatchcoverage 0/24 · 0 match · 2 mismatch · 22 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=1280, initial-scale=1">
<title>Weather Card</title>
<style>
:root {
--ink: #0f172a;
--ink-soft: #475569;
--ink-faint: #94a3b8;
--card-bg: rgba(255, 255, 255, 0.72);
--stroke: rgba(15, 23, 42, 0.08);
--accent: #f59e0b;
--accent-2: #38bdf8;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 1280px; height: 800px; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
color: var(--ink);
display: flex;
align-items: center;
justify-content: center;
background: #e2e8f0;
overflow: hidden;
-webkit-font-smoothing: antialiased;
}
/* Ambient full-page backdrop, tinted by weather */
.scene {
position: fixed;
inset: 0;
background:
radial-gradient(1200px 700px at 78% -10%, var(--sky-hi), transparent 60%),
linear-gradient(160deg, var(--sky-1) 0%, var(--sky-2) 55%, var(--sky-3) 100%);
transition: background 0.6s ease;
}
.scene::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(1000px 500px at 20% 110%, rgba(255,255,255,0.18), transparent 55%);
pointer-events: none;
}
.card {
position: relative;
width: 940px;
background: var(--card-bg);
backdrop-filter: blur(28px) saturate(140%);
-webkit-backdrop-filter: blur(28px) saturate(140%);
border: 1px solid rgba(255,255,255,0.55);
border-radius: 32px;
box-shadow:
0 40px 80px -30px rgba(15, 23, 42, 0.45),
0 2px 6px rgba(15, 23, 42, 0.06),
inset 0 1px 0 rgba(255,255,255,0.6);
padding: 44px 52px 40px;
overflow: hidden;
}
/* HEADER */
.head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
}
.place { min-width: 0; }
.place .eyebrow {
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-faint);
font-weight: 700;
margin-bottom: 8px;
}
.place h1 {
font-size: 40px;
line-height: 1.05;
font-weight: 800;
letter-spacing: -0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 520px;
}
.place .date {
margin-top: 8px;
font-size: 17px;
color: var(--ink-soft);
font-weight: 500;
}
.glyph {
flex: 0 0 auto;
width: 108px;
height: 108px;
display: grid;
place-items: center;
font-size: 68px;
line-height: 1;
filter: drop-shadow(0 10px 18px rgba(15,23,42,0.18));
}
/* HERO TEMPS */
.hero {
margin-top: 28px;
display: flex;
align-items: flex-end;
gap: 40px;
}
.big-temp {
font-size: 128px;
font-weight: 800;
line-height: 0.9;
letter-spacing: -0.05em;
}
.big-temp sup { font-size: 44px; font-weight: 600; top: -1.4em; color: var(--ink-soft); }
.cond {
padding-bottom: 14px;
}
.cond .label {
font-size: 24px;
font-weight: 700;
}
.cond .sub {
margin-top: 6px;
font-size: 15px;
color: var(--ink-soft);
}
.minmax {
margin-left: auto;
display: flex;
gap: 14px;
padding-bottom: 14px;
}
.pill {
background: rgba(255,255,255,0.55);
border: 1px solid var(--stroke);
border-radius: 16px;
padding: 14px 20px;
min-width: 116px;
text-align: center;
}
.pill .k { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }
.pill .v { font-size: 30px; font-weight: 800; margin-top: 4px; letter-spacing: -0.02em; }
.pill.max .v { color: #ea580c; }
.pill.min .v { color: #0284c7; }
/* HOURLY */
.hourly {
margin-top: 34px;
background: rgba(255,255,255,0.42);
border: 1px solid var(--stroke);
border-radius: 22px;
padding: 22px 24px 16px;
}
.hourly .cap {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 6px;
}
.hourly .cap h2 {
font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ink-soft); font-weight: 700;
}
.hourly .cap .rng { font-size: 13px; color: var(--ink-faint); font-weight: 600; }
.chart-wrap { width: 100%; }
svg { display: block; width: 100%; height: 168px; }
.axis text { fill: var(--ink-faint); font-size: 11px; font-weight: 600; }
.val text { fill: var(--ink); font-size: 11px; font-weight: 700; }
/* STATES */
.state {
text-align: center;
padding: 60px 20px;
}
.state .em { font-size: 56px; }
.state h2 { font-size: 24px; margin-top: 14px; font-weight: 800; }
.state p { margin-top: 10px; color: var(--ink-soft); font-size: 15px; }
.foot {
margin-top: 22px;
display: flex; justify-content: space-between; align-items: center;
font-size: 12px; color: var(--ink-faint); font-weight: 600;
}
.foot .dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; display: inline-block; margin-right: 6px; vertical-align: middle;}
.hidden { display: none !important; }
</style>
</head>
<body>
<div class="scene" id="scene"></div>
<div class="card" id="card">
<!-- Loading / error state -->
<div class="state" id="state">
<div class="em" id="stateEmoji">⛅</div>
<h2 id="stateTitle">Loading weather…</h2>
<p id="stateMsg">Fetching the latest conditions.</p>
</div>
<!-- Content -->
<div id="content" class="hidden">
<div class="head">
<div class="place">
<div class="eyebrow">Weather</div>
<h1 id="name">Berlin</h1>
<div class="date" id="date">—</div>
</div>
<div class="glyph" id="glyph">⛅</div>
</div>
<div class="hero">
<div class="big-temp" id="heroTemp">—<sup>°C</sup></div>
<div class="cond">
<div class="label" id="condLabel">—</div>
<div class="sub" id="condSub">Daily maximum</div>
</div>
<div class="minmax">
<div class="pill max"><div class="k">High</div><div class="v" id="tmax">—°</div></div>
<div class="pill min"><div class="k">Low</div><div class="v" id="tmin">—°</div></div>
</div>
</div>
<div class="hourly">
<div class="cap">
<h2>Hourly temperature</h2>
<div class="rng" id="hourRange">00:00 – 23:00 UTC</div>
</div>
<div class="chart-wrap"><svg id="chart" viewBox="0 0 900 168" preserveAspectRatio="none"></svg></div>
</div>
<div class="foot">
<div><span class="dot"></span><span id="srcNote">Open-Meteo · UTC</span></div>
<div id="coordNote">—</div>
</div>
</div>
</div>
<script>
(function () {
"use strict";
// ---- Params -------------------------------------------------------------
var qs = new URLSearchParams(location.search);
function num(v, d) { var n = parseFloat(v); return isFinite(n) ? n : d; }
function todayUTC() {
var d = new Date();
return d.getUTCFullYear() + "-" +
String(d.getUTCMonth() + 1).padStart(2, "0") + "-" +
String(d.getUTCDate()).padStart(2, "0");
}
var lat = num(qs.get("lat"), 52.52);
var lon = num(qs.get("lon"), 13.405);
var name = (qs.get("name") || "Berlin").trim() || "Berlin";
var date = (qs.get("date") || "").trim();
if (!/^\d{4}-\d{2}-\d{2}$/.test(date)) date = todayUTC();
// ---- WMO weather-code table --------------------------------------------
var WMO = {
0: ["Clear sky", "☀️", "clear"],
1: ["Mainly clear", "🌤️", "clear"],
2: ["Partly cloudy", "⛅", "cloud"],
3: ["Overcast", "☁️", "cloud"],
45: ["Fog", "🌫️", "fog"],
48: ["Depositing rime fog", "🌫️", "fog"],
51: ["Light drizzle", "🌦️", "rain"],
53: ["Moderate drizzle", "🌦️", "rain"],
55: ["Dense drizzle", "🌧️", "rain"],
56: ["Freezing drizzle", "🌧️", "rain"],
57: ["Freezing drizzle", "🌧️", "rain"],
61: ["Slight rain", "🌦️", "rain"],
63: ["Rain", "🌧️", "rain"],
65: ["Heavy rain", "🌧️", "rain"],
66: ["Freezing rain", "🌧️", "rain"],
67: ["Freezing rain", "🌧️", "rain"],
71: ["Slight snow", "🌨️", "snow"],
73: ["Snow", "🌨️", "snow"],
75: ["Heavy snow", "❄️", "snow"],
77: ["Snow grains", "❄️", "snow"],
80: ["Rain showers", "🌦️", "rain"],
81: ["Rain showers", "🌧️", "rain"],
82: ["Violent rain showers", "⛈️", "rain"],
85: ["Snow showers", "🌨️", "snow"],
86: ["Heavy snow showers", "❄️", "snow"],
95: ["Thunderstorm", "⛈️", "storm"],
96: ["Thunderstorm w/ hail", "⛈️", "storm"],
99: ["Thunderstorm w/ hail", "⛈️", "storm"]
};
function decodeCode(c) { return WMO[c] || ["Unknown conditions", "🌡️", "cloud"]; }
// Sky palettes keyed by condition family
var SKIES = {
clear: ["#7ec8f6", "#4a9fe0", "#2f6fb0", "rgba(255,236,179,0.85)"],
cloud: ["#a9bccf", "#8399b0", "#5f7488", "rgba(255,255,255,0.5)"],
fog: ["#c4ccd4", "#a3adb8", "#7c8794", "rgba(255,255,255,0.55)"],
rain: ["#7c94ad", "#566d88", "#374a63", "rgba(180,205,230,0.5)"],
snow: ["#cdd9e6", "#a9bccf", "#8093a8", "rgba(255,255,255,0.7)"],
storm: ["#5b6b82", "#3d4a5f", "#242e40", "rgba(150,140,200,0.45)"]
};
// ---- Date formatting ----------------------------------------------------
function fmtDate(iso) {
var p = iso.split("-");
var d = new Date(Date.UTC(+p[0], +p[1] - 1, +p[2]));
return d.toLocaleDateString("en-US", {
weekday: "long", year: "numeric", month: "long", day: "numeric", timeZone: "UTC"
});
}
// ---- Fetch --------------------------------------------------------------
function isPast(iso) { return iso < todayUTC(); }
function buildUrl() {
var base = isPast(date) ? "/api/om/archive" : "/api/om/forecast";
var p = 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
});
return base + "?" + p.toString();
}
function showError(msg) {
var st = document.getElementById("state");
st.classList.remove("hidden");
document.getElementById("content").classList.add("hidden");
document.getElementById("stateEmoji").textContent = "⚠️";
document.getElementById("stateTitle").textContent = "Weather data unavailable";
document.getElementById("stateMsg").textContent = msg || "The weather data could not be loaded. Please try again later.";
}
fetch(buildUrl(), { headers: { "Accept": "application/json" } })
.then(function (r) {
if (!r.ok) throw new Error("HTTP " + r.status);
return r.json();
})
.then(function (data) { render(data); })
.catch(function (e) { showError("Could not reach the weather service (" + e.message + ")."); });
// ---- Render -------------------------------------------------------------
function render(data) {
if (!data || !data.daily || !data.hourly) {
showError("The weather service returned no data for this date.");
return;
}
var d = data.daily, h = data.hourly;
var tmax = d.temperature_2m_max && d.temperature_2m_max[0];
var tmin = d.temperature_2m_min && d.temperature_2m_min[0];
var code = d.weather_code && d.weather_code[0];
var times = h.time || [];
var temps = h.temperature_2m || [];
if (tmax == null || tmin == null || !times.length) {
showError("The weather service returned incomplete data for this date.");
return;
}
var dec = decodeCode(code);
var sky = SKIES[dec[2]] || SKIES.cloud;
var scene = document.getElementById("scene");
scene.style.setProperty("--sky-1", sky[0]);
scene.style.setProperty("--sky-2", sky[1]);
scene.style.setProperty("--sky-3", sky[2]);
scene.style.setProperty("--sky-hi", sky[3]);
document.getElementById("name").textContent = name;
document.getElementById("name").title = name;
document.getElementById("date").textContent = fmtDate(date);
document.getElementById("glyph").textContent = dec[1];
document.getElementById("condLabel").textContent = dec[0];
document.getElementById("tmax").textContent = Math.round(tmax) + "°";
document.getElementById("tmin").textContent = Math.round(tmin) + "°";
document.getElementById("heroTemp").innerHTML = Math.round(tmax) + '<sup>°C</sup>';
document.getElementById("coordNote").textContent =
lat.toFixed(3) + "°, " + lon.toFixed(3) + "°";
drawChart(times, temps, tmin, tmax);
document.getElementById("state").classList.add("hidden");
document.getElementById("content").classList.remove("hidden");
}
// ---- Hourly chart (SVG line + area) ------------------------------------
function drawChart(times, temps, dayMin, dayMax) {
var svg = document.getElementById("chart");
var W = 900, H = 168;
var padT = 26, padB = 26, padL = 8, padR = 8;
var innerW = W - padL - padR, innerH = H - padT - padB;
// Build clean numeric series
var pts = [];
for (var i = 0; i < times.length; i++) {
var t = temps[i];
if (t == null || isNaN(t)) continue;
var hh = parseInt(times[i].slice(11, 13), 10);
pts.push({ h: isNaN(hh) ? i : hh, t: t, i: i });
}
if (!pts.length) { svg.innerHTML = ""; return; }
var vals = pts.map(function (p) { return p.t; });
var lo = Math.min.apply(null, vals), hi = Math.max.apply(null, vals);
if (hi - lo < 4) { var mid = (hi + lo) / 2; lo = mid - 2; hi = mid + 2; }
var span = hi - lo;
var n = pts.length;
function X(idx) { return padL + (n === 1 ? innerW / 2 : innerW * idx / (n - 1)); }
function Y(v) { return padT + innerH * (1 - (v - lo) / span); }
// Smooth path (Catmull-Rom -> Bezier)
function pathD(closed) {
var d = "";
var P = pts.map(function (p, k) { return [X(k), Y(p.t)]; });
for (var k = 0; k < P.length; k++) {
if (k === 0) { d += "M" + P[0][0].toFixed(1) + "," + P[0][1].toFixed(1); continue; }
var p0 = P[k - 2] || P[k - 1], p1 = P[k - 1], p2 = P[k], p3 = P[k + 1] || P[k];
var c1x = p1[0] + (p2[0] - p0[0]) / 6, c1y = p1[1] + (p2[1] - p0[1]) / 6;
var c2x = p2[0] - (p3[0] - p1[0]) / 6, c2y = p2[1] - (p3[1] - p1[1]) / 6;
d += "C" + c1x.toFixed(1) + "," + c1y.toFixed(1) + " " +
c2x.toFixed(1) + "," + c2y.toFixed(1) + " " +
p2[0].toFixed(1) + "," + p2[1].toFixed(1);
}
if (closed) {
d += "L" + X(n - 1).toFixed(1) + "," + (padT + innerH) +
"L" + X(0).toFixed(1) + "," + (padT + innerH) + "Z";
}
return d;
}
var svgNS = "http://www.w3.org/2000/svg";
var out = "";
// Defs
out += '<defs>' +
'<linearGradient id="area" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0%" stop-color="rgba(245,158,11,0.34)"/>' +
'<stop offset="100%" stop-color="rgba(245,158,11,0)"/>' +
'</linearGradient>' +
'<linearGradient id="line" x1="0" y1="0" x2="1" y2="0">' +
'<stop offset="0%" stop-color="#0ea5e9"/>' +
'<stop offset="50%" stop-color="#f59e0b"/>' +
'<stop offset="100%" stop-color="#ef4444"/>' +
'</linearGradient>' +
'</defs>';
// Baseline
out += '<line x1="' + padL + '" y1="' + (padT + innerH) + '" x2="' + (W - padR) +
'" y2="' + (padT + innerH) + '" stroke="rgba(15,23,42,0.10)" stroke-width="1"/>';
// Area + line
out += '<path d="' + pathD(true) + '" fill="url(#area)"/>';
out += '<path d="' + pathD(false) + '" fill="none" stroke="url(#line)" stroke-width="3" ' +
'stroke-linecap="round" stroke-linejoin="round"/>';
// Axis labels every ~3h + points
var step = n > 12 ? Math.ceil(n / 8) : 1;
out += '<g class="axis">';
for (var a = 0; a < n; a += step) {
var hx = X(a);
var lbl = String(pts[a].h).padStart(2, "0");
out += '<text x="' + hx.toFixed(1) + '" y="' + (H - 8) + '" text-anchor="middle">' + lbl + '</text>';
}
out += '</g>';
// Dots at min & max of the day's hourly curve
var iHi = 0, iLo = 0;
pts.forEach(function (p, k) { if (p.t > pts[iHi].t) iHi = k; if (p.t < pts[iLo].t) iLo = k; });
[[iHi, "#ef4444"], [iLo, "#0ea5e9"]].forEach(function (m) {
var k = m[0];
out += '<circle cx="' + X(k).toFixed(1) + '" cy="' + Y(pts[k].t).toFixed(1) +
'" r="4.5" fill="#fff" stroke="' + m[1] + '" stroke-width="3"/>';
out += '<g class="val"><text x="' + X(k).toFixed(1) + '" y="' +
(Y(pts[k].t) - 10).toFixed(1) + '" text-anchor="middle">' +
Math.round(pts[k].t) + '°</text></g>';
});
svg.innerHTML = out;
// Range caption
var first = pts[0].h, last = pts[pts.length - 1].h;
document.getElementById("hourRange").textContent =
String(first).padStart(2, "0") + ":00 – " + String(last).padStart(2, "0") + ":00 UTC";
}
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 17,187 | html / css / js | 1,832 / 4,950 / 10,405 |
|---|---|---|---|
| dom nodes | 45 | dom depth | 8 |
| css rules | 40 | js present | yes |
| brightness | 173.1 | contrast | 56.0 |
| colorfulness | 26.4 | whitespace | 53.3% |
This slot's telemetry
| prompt tokens | 2 | completion tokens | 8,393 |
|---|---|---|---|
| total tokens | 8,395 | wall | 87.7 s |
| cost | — | request id | — |
config.json577 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "claude-opus-4-8-eff-medium--cli--claude-code--dev",
"effort": "medium",
"family": "claude",
"m": {
"min": 2,
"q": 2
},
"model_id": "claude-opus-4-8",
"protocol": "cli",
"served_model": "claude-opus-4-8",
"telemetry": {
"completion_tokens": 22797,
"cost_usd": null,
"prompt_tokens": 8,
"total_tokens": 22805,
"wall_ms": 246172
},
"transport": "claude-code-cli-headless",
"vendor_sanction_ref": null
}send-log2.5 KB
{
"N": 2,
"batch_id": "2026-07-17--dev-cc-opus48",
"config_id": "claude-opus-4-8-eff-medium--cli--claude-code--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-17T14:46:31.697250+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T14:45:03.982974+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:47:17.803998+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T14:46:35.406372+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:48:04.565216+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T14:47:21.326250+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:49:20.939870+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T14:48:08.114350+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
}
}
}