claude-fable-5 @ max · CC
CCmax
- config
- claude-fable-5-eff-max--cli--claude-code--dev
- batch
- 2026-07-19--unified
- transport
- claude-code-cli-headless
- protocol
- cli · plan
- served model
- claude-fable-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-fable-5 @xhigh · CC0.64claude-sonnet-4-6 @max · kiro0.64gpt-5.4-mini @medium · codex-oauth0.64gpt-5.6-sol @xhigh · codex-oauth0.64kimi-k2.5 · go0.64farthest
gpt-5.6-luna @medium · codex-oauth0.41gpt-5.6-terra @medium · kiro0.44gpt-5.6-luna @high · kiro0.44grok-4.3 @medium · api0.45north-mini-code-free · api0.47within 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.3
- min tempmatchshown: 16
- 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">
<title>Weather</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
:root{color-scheme:light}
html,body{height:100%}
body{
--bg1:#8FB6DE; --bg2:#E6EEF6;
--glow1:rgba(255,255,255,.55); --glow2:rgba(70,120,200,.28);
--accent:#2E90FA; --accent-deep:#1B6ED6;
--ink:#15243C; --muted:#5F7089; --muted-2:#8593A9;
--hairline:rgba(22,44,80,.08);
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
color:var(--ink);
background:linear-gradient(165deg,#8FB6DE,#E6EEF6);
min-height:100vh; display:grid; place-items:center; padding:24px; overflow:auto;
-webkit-font-smoothing:antialiased;
}
body[data-theme=clear] {--bg1:#5BB2EE;--bg2:#FBE7B4;--accent:#F59E0B;--accent-deep:#B96F06;--glow1:rgba(255,235,170,.7);--glow2:rgba(255,180,70,.35)}
body[data-theme=partly] {--bg1:#6FABE0;--bg2:#DDEAF6;--accent:#2E90FA;--accent-deep:#1B6ED6}
body[data-theme=cloud] {--bg1:#8C9FB8;--bg2:#E0E7EE;--accent:#5B7C9E;--accent-deep:#46617D;--glow2:rgba(90,120,160,.3)}
body[data-theme=fog] {--bg1:#A9B5C1;--bg2:#E9EDF1;--accent:#78899A;--accent-deep:#5A6B7C;--glow2:rgba(120,140,160,.3)}
body[data-theme=rain] {--bg1:#4E6E9E;--bg2:#A9C0DC;--accent:#2563EB;--accent-deep:#1D4FBF;--glow2:rgba(40,80,160,.35)}
body[data-theme=snow] {--bg1:#9FC2E4;--bg2:#F1F6FC;--accent:#4E9AD9;--accent-deep:#2F7CBF;--glow1:rgba(255,255,255,.8)}
body[data-theme=thunder]{--bg1:#454273;--bg2:#9D90CC;--accent:#6D4AE0;--accent-deep:#5535C4;--glow2:rgba(90,60,180,.4)}
#bgTheme{position:fixed;inset:0;z-index:-1;opacity:0;transition:opacity 1.1s ease;
background:linear-gradient(165deg,var(--bg1) 0%,var(--bg2) 100%)}
#bgTheme.on{opacity:1}
#bgTheme::before,#bgTheme::after{content:"";position:absolute;border-radius:50%;filter:blur(14px)}
#bgTheme::before{width:560px;height:560px;top:-170px;left:6%;background:radial-gradient(circle,var(--glow1),transparent 70%)}
#bgTheme::after{width:640px;height:640px;bottom:-220px;right:4%;background:radial-gradient(circle,var(--glow2),transparent 70%)}
.card{
width:1128px; max-width:calc(100vw - 40px);
background:rgba(255,255,255,.78);
-webkit-backdrop-filter:blur(28px) saturate(1.35); backdrop-filter:blur(28px) saturate(1.35);
border:1px solid rgba(255,255,255,.7);
border-radius:30px;
box-shadow:0 44px 90px -30px rgba(12,32,66,.4), 0 4px 18px rgba(12,32,66,.08);
padding:30px 44px 22px;
animation:rise .7s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
/* ── header ─────────────────────────────── */
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.top h1{display:flex;align-items:center;gap:9px;font-size:29px;font-weight:700;letter-spacing:-.015em}
.top h1 svg{flex:none;fill:var(--accent-deep)}
#loc-text{display:block;max-width:540px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#date-label{margin-top:5px;font-size:15px;color:var(--muted)}
.chips{display:flex;gap:8px;padding-top:4px}
.chip{background:rgba(255,255,255,.6);border:1px solid rgba(120,140,175,.28);border-radius:999px;
padding:5px 13px;font-size:12px;font-weight:600;color:#4A5C77;white-space:nowrap;
font-variant-numeric:tabular-nums}
.chip.acc{background:color-mix(in srgb,var(--accent) 14%,white);border-color:transparent;color:var(--accent-deep)}
/* ── hero ───────────────────────────────── */
.hero{display:flex;align-items:center;gap:36px;padding:20px 0 20px;border-bottom:1px solid var(--hairline);margin-bottom:16px}
.icon-wrap{width:132px;height:132px;flex:none}
.icon-wrap svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 16px 26px rgba(25,55,105,.22))}
.kicker{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.big{display:flex;align-items:flex-start;line-height:.95}
#big-num{font-size:102px;font-weight:200;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.deg{font-size:34px;font-weight:450;color:var(--accent-deep);margin-top:12px;margin-left:4px}
.cond{font-size:19px;font-weight:650;color:var(--accent-deep);margin-top:6px}
.range{margin-left:auto;border-left:1px solid rgba(18,38,70,.1);padding-left:36px;display:flex;flex-direction:column;gap:18px}
.stat{display:flex;align-items:center;gap:13px}
.badge{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none}
.badge.hi-b{background:rgba(226,96,58,.15)}
.badge.lo-b{background:rgba(43,108,220,.14)}
.slab{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sval{display:block;font-size:27px;font-weight:640;letter-spacing:-.01em;margin-top:1px;font-variant-numeric:tabular-nums;min-width:96px}
/* ── chart ──────────────────────────────── */
.chart-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.chart-head h2{font-size:13px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#42557400;color:#425574}
.cap{font-size:12px;color:var(--muted-2)}
.chart-wrap{position:relative;width:1040px;max-width:100%}
.chart-wrap svg{display:block;user-select:none;-webkit-user-select:none}
.ytick{font-size:11px;fill:#6B7A93;font-variant-numeric:tabular-nums}
.now-lab{font-size:9.5px;font-weight:800;letter-spacing:.12em;fill:var(--accent-deep)}
.tline{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s cubic-bezier(.3,0,.2,1) .1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.area{opacity:0;animation:fadein .8s ease .5s forwards}
@keyframes fadein{to{opacity:1}}
.pt{fill:#fff;stroke:var(--accent);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:50% 50%;
animation:pop .3s ease forwards}
@keyframes pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
.mk-hi{stroke:#D14B28;stroke-width:2.4}
.mk-lo{stroke:#1D6FD8;stroke-width:2.4}
.hl-lab{font-size:12.5px;font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round;font-variant-numeric:tabular-nums}
.lab-hi{fill:#C2410C}
.lab-lo{fill:#1D6FD8}
#tip{position:absolute;left:0;top:0;opacity:0;pointer-events:none;background:rgba(13,26,45,.93);color:#fff;
border-radius:11px;padding:8px 12px;font-size:13px;white-space:nowrap;transform:translate(-50%,-140%);
transition:opacity .15s;box-shadow:0 12px 28px -8px rgba(8,22,48,.55);z-index:3}
#tip.below{transform:translate(-50%,22px)}
#tip.show{opacity:1}
#tip b{font-size:14px;font-weight:650;margin-right:7px}
#tip span{opacity:.72;font-size:12px}
/* ── hourly readout strip ───────────────── */
.readout{display:grid;grid-template-columns:repeat(24,1fr);margin:10px 14px 0 46px}
.cell{text-align:center;padding:7px 0 6px;border-radius:9px;min-width:0;transition:background .15s}
.cell .ch{display:block;font-size:10.5px;color:var(--muted-2);letter-spacing:.02em}
.cell .cv{display:block;font-size:12.5px;font-weight:640;margin-top:3px;font-variant-numeric:tabular-nums}
.cell .cv.nul{color:var(--muted-2);font-weight:400}
.cell.hot{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.cell.hi .cv{color:#C2410C}
.cell.lo .cv{color:#1D6FD8}
.foot{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted-2);
border-top:1px solid var(--hairline);margin-top:14px;padding-top:11px}
/* ── skeleton ───────────────────────────── */
.sk{background:linear-gradient(90deg,#E7EDF5 25%,#F6F9FC 37%,#E7EDF5 63%);background-size:400% 100%;
animation:sh 1.4s ease infinite;border-radius:12px}
@keyframes sh{0%{background-position:100% 0}100%{background-position:0 0}}
#skel{padding-top:22px}
.skrow{display:flex;gap:36px;align-items:center}
.skc{width:132px;height:132px;border-radius:50%;flex:none}
/* ── error ──────────────────────────────── */
#err{padding:66px 0 74px;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
#err h2{font-size:21px;font-weight:700;margin-top:10px}
#err-msg{color:var(--muted);font-size:14.5px;max-width:560px;line-height:1.55}
.hint{color:var(--muted-2);font-size:13px}
.retry{margin-top:18px;background:var(--accent);color:#fff;border:none;border-radius:999px;padding:11px 28px;
font-size:14.5px;font-weight:650;font-family:inherit;cursor:pointer;
box-shadow:0 10px 22px -8px var(--accent);transition:filter .15s,transform .15s}
.retry:hover{filter:brightness(.94)}
.retry:active{transform:translateY(1px)}
.retry:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px}
#content{animation:fadeup .5s ease both}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* ── icon animations ────────────────────── */
.a-spin{transform-box:fill-box;transform-origin:50% 50%;animation:spin 80s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.a-drift{animation:drift 7s ease-in-out infinite}
.a-drift2{animation:drift 8s ease-in-out -4s infinite}
@keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
.a-fog{animation:fogx 3.4s ease-in-out infinite alternate}
@keyframes fogx{from{transform:translateX(-3px)}to{transform:translateX(3px)}}
.a-drop{animation:dropfall 1.6s ease-in infinite}
@keyframes dropfall{0%{transform:translateY(0);opacity:0}18%{opacity:1}75%{opacity:1}100%{transform:translateY(13px);opacity:0}}
.a-rain{animation:rainfall 1.1s linear infinite}
@keyframes rainfall{0%{transform:translate(0,0);opacity:0}12%{opacity:1}80%{opacity:.9}100%{transform:translate(-4px,12px);opacity:0}}
.a-snow{animation:snowfall 3s ease-in-out infinite}
@keyframes snowfall{0%{transform:translateY(0) rotate(0deg);opacity:0}14%{opacity:1}82%{opacity:.9}100%{transform:translateY(12px) rotate(60deg);opacity:0}}
.a-flash{animation:flash 6s ease infinite}
@keyframes flash{0%,86%,94%,100%{opacity:1}90%{opacity:.25}}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
.tline{stroke-dasharray:none;stroke-dashoffset:0}
.area,.pt,#content,.card{opacity:1}
}
</style>
</head>
<body>
<div id="bgTheme" aria-hidden="true"></div>
<main class="card">
<header class="top">
<div>
<h1>
<svg width="17" height="17" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2a7.4 7.4 0 0 0-7.4 7.4c0 5.1 6.3 11.6 6.9 12.2a.7.7 0 0 0 1 0c.6-.6 6.9-7.1 6.9-12.2A7.4 7.4 0 0 0 12 2Zm0 10.2a2.9 2.9 0 1 1 0-5.8 2.9 2.9 0 0 1 0 5.8Z"/></svg>
<span id="loc-text">…</span>
</h1>
<p id="date-label"> </p>
</div>
<div class="chips">
<span class="chip acc" id="day-chip">—</span>
<span class="chip" id="coords"></span>
<span class="chip">UTC</span>
</div>
</header>
<section id="skel" aria-hidden="true">
<div class="skrow">
<div class="sk skc"></div>
<div>
<div class="sk" style="width:250px;height:80px"></div>
<div class="sk" style="width:150px;height:20px;margin-top:14px"></div>
</div>
<div class="sk" style="width:200px;height:100px;margin-left:auto"></div>
</div>
<div class="sk" style="height:290px;margin-top:28px"></div>
<div class="sk" style="height:46px;margin-top:12px"></div>
</section>
<section id="err" hidden role="alert">
<svg viewBox="0 0 96 96" width="78" height="78" aria-hidden="true">
<g fill="#DCE4EF"><circle cx="34" cy="57" r="15"/><circle cx="54" cy="49" r="19"/><circle cx="69" cy="59" r="13"/><rect x="34" y="56" width="35" height="16" rx="8"/></g>
<g fill="#E2703A"><rect x="50" y="40" width="7" height="21" rx="3.5"/><circle cx="53.5" cy="69.5" r="4"/></g>
</svg>
<h2>Couldn’t load weather data</h2>
<p id="err-msg"></p>
<p class="hint">Check your connection or the URL parameters, then try again.</p>
<button class="retry" onclick="location.reload()">Try again</button>
</section>
<section id="content" hidden>
<div class="hero">
<div class="icon-wrap" id="icon-wrap" aria-hidden="true"></div>
<div>
<div class="kicker" id="kicker"></div>
<div class="big"><span id="big-num">–</span><span class="deg">°C</span></div>
<div class="cond" id="cond"></div>
</div>
<div class="range">
<div class="stat">
<span class="badge hi-b"><svg width="13" height="13" viewBox="0 0 24 24"><path d="M12 5l7 10H5z" fill="#D14B28"/></svg></span>
<div><span class="slab">High</span><span class="sval" id="hi-val">–</span></div>
</div>
<div class="stat">
<span class="badge lo-b"><svg width="13" height="13" viewBox="0 0 24 24"><path d="M12 19L5 9h14z" fill="#1D6FD8"/></svg></span>
<div><span class="slab">Low</span><span class="sval" id="lo-val">–</span></div>
</div>
</div>
</div>
<div class="chart-head">
<h2>Hourly temperature</h2>
<span class="cap">24 hours · °C · UTC</span>
</div>
<div class="chart-wrap">
<svg id="chart" width="1040" height="292" role="img"></svg>
<div id="tip"></div>
</div>
<div class="readout" id="readout" aria-label="Hourly temperatures in degrees Celsius"></div>
<footer class="foot">
<span>Source: Open-Meteo</span>
<span>All times UTC · Temperatures in °C</span>
</footer>
</section>
<noscript>
<style>#skel{display:none}</style>
<p style="padding:60px 0;text-align:center;color:#5F7089">This page needs JavaScript to load weather data.</p>
</noscript>
</main>
<script>
(async function(){
'use strict';
var $ = function(s){ return document.querySelector(s); };
var pad2 = function(n){ return String(n).padStart(2,'0'); };
var f1 = function(v){ return String(Math.round(v*10)/10); };
var R = function(n){ return Math.round(n*100)/100; };
var R1 = function(n){ return Math.round(n*10)/10; };
var WMO = {
0:['Clear sky','sun'], 1:['Mainly clear','sun'], 2:['Partly cloudy','partly'], 3:['Overcast','cloud'],
45:['Fog','fog'], 48:['Depositing rime fog','fog'],
51:['Light drizzle','drizzle'], 53:['Moderate drizzle','drizzle'], 55:['Dense drizzle','drizzle'],
56:['Light freezing drizzle','drizzle'], 57:['Dense freezing drizzle','drizzle'],
61:['Light rain','rain'], 63:['Moderate rain','rain'], 65:['Heavy rain','rain'],
66:['Light freezing rain','rain'], 67:['Heavy freezing rain','rain'],
71:['Light snowfall','snow'], 73:['Moderate snowfall','snow'], 75:['Heavy snowfall','snow'],
77:['Snow grains','snow'],
80:['Light rain showers','rain'], 81:['Rain showers','rain'], 82:['Violent rain showers','rain'],
85:['Light snow showers','snow'], 86:['Heavy snow showers','snow'],
95:['Thunderstorm','thunder'], 96:['Thunderstorm with slight hail','thunder'], 99:['Thunderstorm with heavy hail','thunder']
};
var THEME = {sun:'clear', partly:'partly', cloud:'cloud', fog:'fog', drizzle:'rain', rain:'rain', snow:'snow', thunder:'thunder'};
var CLOUD_GRAD = '<linearGradient id="gc" x1="0" y1="32" x2="0" y2="74" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#FFFFFF"/><stop offset="1" stop-color="#C7D3E4"/></linearGradient>';
function cloudG(fill){
return '<circle cx="34" cy="57" r="15" fill="'+fill+'"/><circle cx="54" cy="49" r="19" fill="'+fill+'"/>'+
'<circle cx="69" cy="59" r="13" fill="'+fill+'"/><rect x="34" y="56" width="35" height="16" rx="8" fill="'+fill+'"/>';
}
function sunG(cx,cy,r,r1,r2,sw,spin){
var rays='';
for(var k=0;k<8;k++){
var a=k*Math.PI/4, c=Math.cos(a), s2=Math.sin(a);
rays+='<line x1="'+R1(cx+c*r1)+'" y1="'+R1(cy+s2*r1)+'" x2="'+R1(cx+c*r2)+'" y2="'+R1(cy+s2*r2)+'"/>';
}
return '<g class="'+(spin?'a-spin':'')+'" stroke="#FFB94D" stroke-width="'+sw+'" stroke-linecap="round">'+rays+'</g>'+
'<circle cx="'+cx+'" cy="'+cy+'" r="'+r+'" fill="url(#gsun)"/>';
}
var SUN_GRAD = '<radialGradient id="gsun" cx="38%" cy="34%" r="80%"><stop offset="0" stop-color="#FFE9A8"/><stop offset="1" stop-color="#FFA726"/></radialGradient>';
function flakeG(x,y,d){
return '<g class="a-snow" style="animation-delay:'+d+'s"><g transform="translate('+x+' '+y+')" stroke="#79B4E8" stroke-width="2.4" stroke-linecap="round">'+
'<line x1="-5" y1="0" x2="5" y2="0"/><line x1="-5" y1="0" x2="5" y2="0" transform="rotate(60)"/><line x1="-5" y1="0" x2="5" y2="0" transform="rotate(120)"/></g></g>';
}
var svgOpen = '<svg viewBox="0 0 96 96" aria-hidden="true">';
var ICONS = {
sun: function(){ return svgOpen+'<defs>'+SUN_GRAD+'</defs>'+sunG(48,48,22.5,30,39.5,5.5,true)+'</svg>'; },
partly: function(){ return svgOpen+'<defs>'+SUN_GRAD+CLOUD_GRAD+'</defs>'+sunG(31,30,12,16.5,22.5,4.5,true)+
'<g class="a-drift"><g transform="translate(4,6)">'+cloudG('url(#gc)')+'</g></g></svg>'; },
cloud: function(){ return svgOpen+'<defs>'+CLOUD_GRAD+'</defs>'+
'<g class="a-drift2"><g transform="translate(18,-7) scale(.72)">'+cloudG('#BBC8DB')+'</g></g>'+
'<g class="a-drift">'+cloudG('url(#gc)')+'</g></svg>'; },
fog: function(){ return svgOpen+'<defs>'+CLOUD_GRAD+'</defs>'+
'<g transform="translate(0,-9)">'+cloudG('url(#gc)')+'</g>'+
'<g stroke="#9FB2C6" stroke-width="5" stroke-linecap="round">'+
'<line class="a-fog" x1="26" y1="74" x2="70" y2="74"/>'+
'<line class="a-fog" style="animation-delay:-1.7s" x1="32" y1="84" x2="64" y2="84"/></g></svg>'; },
drizzle: function(){ return svgOpen+'<defs>'+CLOUD_GRAD+'</defs>'+
'<g transform="translate(0,-9)">'+cloudG('url(#gc)')+'</g>'+
'<g fill="#4E9CE8"><circle class="a-drop" cx="36" cy="74" r="2.6"/>'+
'<circle class="a-drop" style="animation-delay:.5s" cx="50" cy="74" r="2.6"/>'+
'<circle class="a-drop" style="animation-delay:1s" cx="64" cy="74" r="2.6"/></g></svg>'; },
rain: function(){ return svgOpen+'<defs>'+CLOUD_GRAD+'</defs>'+
'<g transform="translate(0,-9)">'+cloudG('url(#gc)')+'</g>'+
'<g stroke="#3D8FE0" stroke-width="4.5" stroke-linecap="round">'+
'<line class="a-rain" x1="38" y1="72" x2="34" y2="82"/>'+
'<line class="a-rain" style="animation-delay:.35s" x1="52" y1="72" x2="48" y2="82"/>'+
'<line class="a-rain" style="animation-delay:.7s" x1="66" y1="72" x2="62" y2="82"/></g></svg>'; },
snow: function(){ return svgOpen+'<defs>'+CLOUD_GRAD+'</defs>'+
'<g transform="translate(0,-9)">'+cloudG('url(#gc)')+'</g>'+
flakeG(37,76,0)+flakeG(51,72,1)+flakeG(65,76,2)+'</svg>'; },
thunder: function(){ return svgOpen+
'<defs><linearGradient id="gtc" x1="0" y1="32" x2="0" y2="74" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#F4F7FB"/><stop offset="1" stop-color="#93A7C4"/></linearGradient></defs>'+
'<g transform="translate(0,-11)">'+cloudG('url(#gtc)')+'</g>'+
'<path class="a-flash" d="M51 57 L40 77 L48 77 L44 92 L62 69 L52 69 L59 57 Z" fill="#FFC431" stroke="#E8A50A" stroke-width="1" stroke-linejoin="round"/></svg>'; }
};
function firstNum(a){ return (Array.isArray(a) && typeof a[0]==='number' && isFinite(a[0])) ? a[0] : null; }
function ticks(lo,hi,n){
var span=hi-lo; if(span<=0) return [lo];
var s0=span/n, mag=Math.pow(10,Math.floor(Math.log10(s0))), nm=s0/mag;
var st=(nm<1.5?1:nm<3?2:nm<7?5:10)*mag, out=[];
for(var v=Math.ceil(lo/st)*st; v<=hi+1e-9; v+=st) out.push(v);
return out;
}
function fmtTick(v){ return Math.abs(v-Math.round(v))<1e-6 ? String(Math.round(v)) : v.toFixed(1); }
function mono(p){
var n=p.length;
if(n===2) return 'M '+R(p[0][0])+' '+R(p[0][1])+' L '+R(p[1][0])+' '+R(p[1][1]);
var dx=[], m=[], i;
for(i=0;i<n-1;i++){ dx.push(p[i+1][0]-p[i][0]); m.push((p[i+1][1]-p[i][1])/dx[i]); }
var t=[m[0]];
for(i=1;i<n-1;i++){
if(m[i-1]*m[i]<=0) t.push(0);
else { var w1=2*dx[i]+dx[i-1], w2=dx[i]+2*dx[i-1]; t.push((w1+w2)/(w1/m[i-1]+w2/m[i])); }
}
t.push(m[n-2]);
var d='M '+R(p[0][0])+' '+R(p[0][1]);
for(i=0;i<n-1;i++){
var h=dx[i];
d+=' C '+R(p[i][0]+h/3)+' '+R(p[i][1]+t[i]*h/3)+' '+R(p[i+1][0]-h/3)+' '+R(p[i+1][1]-t[i+1]*h/3)+' '+R(p[i+1][0])+' '+R(p[i+1][1]);
}
return d;
}
function buildChart(temps,tmax,tmin,iMax,iMin,isToday){
var W=1040, Hh=292, PL=46, PR=14, PT=30, PB=16;
var pw=W-PL-PR, ph=Hh-PT-PB, cw=pw/24;
var X=function(i){ return PL+(i+.5)*cw; };
var vals=temps.filter(function(v){ return v!=null; });
var lo=Math.min(Math.min.apply(null,vals),tmin), hi=Math.max(Math.max.apply(null,vals),tmax);
var pad=Math.max(.8,(hi-lo)*.18); if(hi===lo) pad=2;
var dLo=lo-pad, dHi=hi+pad;
var Y=function(v){ return PT+(dHi-v)/(dHi-dLo)*ph; };
var base=PT+ph, s='', i;
s+='<defs><linearGradient id="ga" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="var(--accent)" stop-opacity=".26"/><stop offset="1" stop-color="var(--accent)" stop-opacity="0"/></linearGradient></defs>';
ticks(dLo,dHi,4).forEach(function(t){
var y=R(Y(t));
s+='<line x1="'+PL+'" x2="'+(W-PR)+'" y1="'+y+'" y2="'+y+'" stroke="rgba(22,44,80,.07)"/>'+
'<text class="ytick" x="'+(PL-9)+'" y="'+(y+3.5)+'" text-anchor="end">'+fmtTick(t)+'°</text>';
});
[6,12,18].forEach(function(h){
var x=R(PL+h*cw);
s+='<line x1="'+x+'" x2="'+x+'" y1="'+PT+'" y2="'+base+'" stroke="rgba(22,44,80,.055)"/>';
});
s+='<line x1="'+PL+'" x2="'+(W-PR)+'" y1="'+base+'" y2="'+base+'" stroke="rgba(22,44,80,.14)"/>';
var segs=[], cur=[];
temps.forEach(function(v,i){
if(v==null){ if(cur.length){ segs.push(cur); cur=[]; } }
else cur.push([X(i),Y(v)]);
});
if(cur.length) segs.push(cur);
segs.forEach(function(seg){
if(seg.length<2) return;
s+='<path class="area" d="'+mono(seg)+' L '+R(seg[seg.length-1][0])+' '+base+' L '+R(seg[0][0])+' '+base+' Z" fill="url(#ga)"/>';
});
if(isToday){
var n=new Date(), tN=n.getUTCHours()+n.getUTCMinutes()/60;
var xn=R(Math.min(PL+pw-1, PL+(tN+.5)*cw));
s+='<line x1="'+xn+'" x2="'+xn+'" y1="'+(PT-2)+'" y2="'+base+'" stroke="var(--accent-deep)" stroke-opacity=".5" stroke-dasharray="3 4"/>'+
'<text class="now-lab" x="'+xn+'" y="'+(PT-9)+'" text-anchor="middle">NOW</text>';
}
segs.forEach(function(seg){
if(seg.length<2) return;
s+='<path class="tline" pathLength="1" d="'+mono(seg)+'"/>';
});
temps.forEach(function(v,i){
if(v==null) return;
s+='<circle class="pt" style="animation-delay:'+(0.45+i*0.022).toFixed(2)+'s" cx="'+R(X(i))+'" cy="'+R(Y(v))+'" r="2.7"/>';
});
function mark(i,cls,above){
var x=R(X(i)), y=R(Y(temps[i]));
var lx=Math.min(W-PR-30, Math.max(PL+30, x));
var ly=above ? y-13 : Math.min(Hh-5, y+22);
s+='<circle cx="'+x+'" cy="'+y+'" r="4.8" fill="#fff" class="'+(cls==='lab-hi'?'mk-hi':'mk-lo')+'"/>'+
'<text class="hl-lab '+cls+'" x="'+lx+'" y="'+ly+'" text-anchor="middle">'+f1(temps[i])+'°</text>';
}
mark(iMax,'lab-hi',true);
mark(iMin,'lab-lo',false);
s+='<g id="gd" opacity="0"><line id="gd-l" x1="0" x2="0" y1="'+PT+'" y2="'+base+'" stroke="rgba(20,40,80,.3)" stroke-dasharray="2 3"/>'+
'<circle id="gd-c" r="5.6" fill="none" stroke="var(--accent)" stroke-width="2"/></g>';
s+='<rect id="ov" x="'+PL+'" y="'+PT+'" width="'+pw+'" height="'+ph+'" fill="transparent" style="cursor:crosshair"/>';
return {svg:s, X:X, Y:Y, PL:PL, cw:cw};
}
/* ── params & static header ── */
var qs = new URLSearchParams(location.search);
var todayStr = new Date().toISOString().slice(0,10);
var num = function(s,d){ var n=parseFloat(s); return Number.isFinite(n)?n:d; };
var lat = num(qs.get('lat'), 52.52);
var lon = num(qs.get('lon'), 13.405);
var name = (qs.get('name')||'').trim() || 'Berlin';
var dateStr = (qs.get('date')||'').trim() || todayStr;
var isToday = dateStr===todayStr;
$('#loc-text').textContent = name;
$('#loc-text').title = name;
var dObj = new Date(dateStr+'T00:00:00Z');
var dateLabel = isNaN(dObj) ? dateStr :
dObj.toLocaleDateString('en-GB',{weekday:'long',day:'numeric',month:'long',year:'numeric',timeZone:'UTC'});
$('#date-label').textContent = dateLabel;
$('#coords').textContent = Math.abs(lat).toFixed(2)+'° '+(lat>=0?'N':'S')+', '+Math.abs(lon).toFixed(2)+'° '+(lon>=0?'E':'W');
$('#day-chip').textContent = isToday ? 'Today' : (dateStr<todayStr ? 'Past' : 'Forecast');
document.title = name+' — '+dateLabel;
function fail(msg){
$('#skel').hidden = true;
$('#content').hidden = true;
$('#err').hidden = false;
$('#err-msg').textContent = msg;
}
if(!/^\d{4}-\d{2}-\d{2}$/.test(dateStr)){
fail('"'+dateStr+'" is not a valid date. Expected format: YYYY-MM-DD.');
return;
}
/* ── fetch ── */
var data;
try{
var apiBase = dateStr<todayStr ? '/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:dateStr, end_date:dateStr
});
var res = await fetch(apiBase+'?'+p.toString());
var body = null;
try{ body = await res.json(); }catch(e){}
if(!res.ok) throw new Error((body&&body.reason) || ('The weather service responded with HTTP '+res.status+'.'));
if(!body || body.error) throw new Error((body&&body.reason) || 'The weather service returned an unexpected response.');
data = body;
}catch(err){
fail((err&&err.message) ? err.message : 'The network request failed.');
return;
}
/* ── render ── */
try{
var hy=data.hourly||{}, dy=data.daily||{};
var times=Array.isArray(hy.time)?hy.time:[], hv=Array.isArray(hy.temperature_2m)?hy.temperature_2m:[];
var temps=new Array(24).fill(null);
times.forEach(function(t,i){
if(typeof t==='string' && t.indexOf(dateStr)===0){
var h=parseInt(t.slice(11,13),10), v=hv[i];
if(h>=0 && h<24 && typeof v==='number' && isFinite(v)) temps[h]=v;
}
});
var valid=temps.filter(function(v){ return v!=null; });
if(!valid.length) throw new Error('no hourly temperatures are available for this date — it may be outside the range this data source covers');
var tmax=firstNum(dy.temperature_2m_max); if(tmax==null) tmax=Math.max.apply(null,valid);
var tmin=firstNum(dy.temperature_2m_min); if(tmin==null) tmin=Math.min.apply(null,valid);
var wcode=firstNum(dy.weather_code);
var cond = WMO[wcode] || (wcode==null ? ['Conditions unavailable','cloud'] : ['Weather code '+wcode,'cloud']);
var condText=cond[0], group=cond[1];
document.body.dataset.theme = THEME[group] || 'partly';
$('#bgTheme').classList.add('on');
$('#icon-wrap').innerHTML = ICONS[group]();
var nowH=new Date().getUTCHours();
var nowVal=isToday ? temps[nowH] : null;
$('#kicker').textContent = nowVal!=null ? 'Now · '+pad2(nowH)+':00 UTC' : (dateStr>todayStr ? 'Forecast high' : 'Daily high');
$('#big-num').textContent = String(Math.round(nowVal!=null?nowVal:tmax));
$('#cond').textContent = condText;
$('#hi-val').textContent = f1(tmax)+'°';
$('#lo-val').textContent = f1(tmin)+'°';
var iMax=temps.indexOf(Math.max.apply(null,valid));
var iMin=temps.indexOf(Math.min.apply(null,valid));
var ch=buildChart(temps,tmax,tmin,iMax,iMin,isToday);
var svg=$('#chart');
svg.innerHTML=ch.svg;
svg.setAttribute('aria-label','Hourly temperature chart. High '+f1(tmax)+' degrees Celsius, low '+f1(tmin)+' degrees Celsius.');
var ro=$('#readout');
temps.forEach(function(v,i){
var c=document.createElement('div');
c.className='cell'+(i===iMax?' hi':'')+(i===iMin?' lo':'');
var cv=v==null ? '<span class="cv nul">–</span>' : '<span class="cv">'+Math.round(v)+'°</span>';
c.innerHTML='<span class="ch">'+pad2(i)+'</span>'+cv;
c.addEventListener('pointerenter', function(){ setHot(i); });
ro.appendChild(c);
});
ro.addEventListener('pointerleave', clearHot);
var gd=svg.querySelector('#gd'), gl=svg.querySelector('#gd-l'), gc2=svg.querySelector('#gd-c'),
ov=svg.querySelector('#ov'), tip=$('#tip'), cells=[].slice.call(ro.children);
function setHot(i){
if(i==null || temps[i]==null){ clearHot(); return; }
var x=ch.X(i), y=ch.Y(temps[i]);
gd.setAttribute('opacity','1');
gl.setAttribute('x1',x); gl.setAttribute('x2',x);
gc2.setAttribute('cx',x); gc2.setAttribute('cy',y);
tip.innerHTML='<b>'+f1(temps[i])+'°C</b><span>'+pad2(i)+':00 UTC</span>';
tip.style.left=Math.max(64,Math.min(1040-64,x))+'px';
tip.style.top=y+'px';
tip.classList.toggle('below', y<80);
tip.classList.add('show');
cells.forEach(function(c,k){ c.classList.toggle('hot',k===i); });
}
function clearHot(){
gd.setAttribute('opacity','0');
tip.classList.remove('show');
cells.forEach(function(c){ c.classList.remove('hot'); });
}
ov.addEventListener('pointermove', function(e){
var r=svg.getBoundingClientRect();
var i=Math.floor((e.clientX-r.left-ch.PL)/ch.cw);
i=Math.max(0,Math.min(23,i));
if(temps[i]==null){
var j=null;
for(var d=1;d<24;d++){
if(i-d>=0 && temps[i-d]!=null){ j=i-d; break; }
if(i+d<24 && temps[i+d]!=null){ j=i+d; break; }
}
i=j;
}
setHot(i);
});
ov.addEventListener('pointerleave', clearHot);
$('#skel').hidden=true;
$('#content').hidden=false;
}catch(err){
fail('Could not read the weather data: '+((err&&err.message)?err.message:err)+'.');
}
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 30,655 | html / css / js | 3,617 / 10,820 / 16,218 |
|---|---|---|---|
| dom nodes | 81 | dom depth | 9 |
| css rules | 138 | js present | yes |
| brightness | 208.5 | contrast | 37.1 |
| colorfulness | 26.1 | whitespace | 74.0% |
This slot's telemetry
| prompt tokens | 8 | completion tokens | 58,965 |
|---|---|---|---|
| total tokens | 58,973 | wall | 771.4 s |
| cost | — | request id | — |
config.json572 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "claude-fable-5-eff-max--cli--claude-code--dev",
"effort": "max",
"family": "claude",
"m": {
"min": 2,
"q": 2
},
"model_id": "claude-fable-5",
"protocol": "cli",
"served_model": "claude-fable-5",
"telemetry": {
"completion_tokens": 214449,
"cost_usd": null,
"prompt_tokens": 51,
"total_tokens": 214500,
"wall_ms": 2679323
},
"transport": "claude-code-cli-headless",
"vendor_sanction_ref": null
}send-log2.5 KB
{
"N": 2,
"batch_id": "2026-07-17--dev-cc-fable5",
"config_id": "claude-fable-5-eff-max--cli--claude-code--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-17T14:07:56.746435+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T13:55:05.343554+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:17:05.330464+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T14:08:00.525126+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:22:58.022132+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T14:17:08.358587+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:39:54.561975+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T14:23:01.107183+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
}
}
}