claude-fable-5-1 @ high · CC
CChigh
- config
- claude-fable-5-1-eff-high--cli--claude-code--dev
- batch
- 2026-07-19--unified
- transport
- claude-code-cli-headless
- protocol
- cli · plan
- served model
- claude-fable-5-1
- 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 neighborsNo similarity data for this session — this batch has no computed pairs.
Fidelity — does the card show the right data?
- namematch
- conditionmatch
- datematch
- max tempmismatchshown: 13.405
- min tempmismatchshown: 25.3
- 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=1280">
<title>Weather</title>
<style>
:root{
--bg:#0b1020;
--surface:rgba(255,255,255,0.045);
--surface-2:rgba(255,255,255,0.075);
--border:rgba(255,255,255,0.10);
--ink:#f2f4f8;
--ink-2:#aab1c2;
--ink-3:#6f7890;
--accent:#7fb8ff;
--accent-soft:rgba(127,184,255,0.16);
--warm:#ffb17a;
--cool:#8fd3ff;
--grid:rgba(255,255,255,0.07);
--radius:28px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
font-family:"Inter","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
background:var(--bg);
color:var(--ink);
min-height:800px;
display:grid;
place-items:center;
overflow:hidden;
-webkit-font-smoothing:antialiased;
font-feature-settings:"tnum" 1,"cv11" 1;
}
.sky{
position:fixed;inset:0;z-index:0;
background:
radial-gradient(900px 600px at 15% 10%, var(--sky-a,#1e2a55) 0%, transparent 60%),
radial-gradient(800px 700px at 85% 90%, var(--sky-b,#3a1f4d) 0%, transparent 60%),
radial-gradient(600px 500px at 70% 20%, var(--sky-c,#123a4a) 0%, transparent 60%),
var(--bg);
transition:background 900ms ease;
}
.sky::after{
content:"";position:absolute;inset:0;
background-image:radial-gradient(rgba(255,255,255,0.08) 0.5px, transparent 0.6px);
background-size:3px 3px;opacity:.35;mix-blend-mode:overlay;
}
.card{
position:relative;z-index:1;
width:1080px;
border-radius:var(--radius);
background:linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
border:1px solid var(--border);
box-shadow:0 40px 100px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12);
backdrop-filter:blur(30px);
padding:40px 44px 36px;
display:grid;
grid-template-columns:1fr;
gap:28px;
}
header{
display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
}
.place{display:flex;flex-direction:column;gap:6px}
.eyebrow{
font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600;
display:flex;align-items:center;gap:8px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
h1{font-size:38px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.date{font-size:16px;color:var(--ink-2);margin-top:2px}
.coords{font-size:12px;color:var(--ink-3);letter-spacing:.04em;margin-top:6px}
.badge{
font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
padding:6px 10px;border-radius:999px;border:1px solid var(--border);
color:var(--ink-2);background:var(--surface);white-space:nowrap;
}
.hero{
display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:36px;
}
.icon{
width:132px;height:132px;display:grid;place-items:center;
border-radius:32px;background:var(--surface);border:1px solid var(--border);
box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.icon svg{width:96px;height:96px;overflow:visible}
.condition{display:flex;flex-direction:column;gap:6px}
.condition .label{font-size:34px;font-weight:600;letter-spacing:-.015em;line-height:1.1}
.condition .sub{font-size:15px;color:var(--ink-2)}
.range{display:flex;gap:14px}
.stat{
min-width:150px;padding:18px 22px;border-radius:20px;
background:var(--surface);border:1px solid var(--border);
display:flex;flex-direction:column;gap:6px;
}
.stat .k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600;display:flex;align-items:center;gap:7px}
.stat .k i{width:8px;height:8px;border-radius:50%;display:inline-block}
.stat.hi .k i{background:var(--warm)}
.stat.lo .k i{background:var(--cool)}
.stat .v{font-size:40px;font-weight:600;letter-spacing:-.03em;line-height:1}
.stat .v small{font-size:18px;color:var(--ink-2);font-weight:500;margin-left:2px}
section.hourly{
border-radius:22px;background:var(--surface);border:1px solid var(--border);
padding:22px 24px 18px;
}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.sec-head h2{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.sec-head .hint{font-size:12px;color:var(--ink-3)}
.chart-wrap{position:relative}
.chart{width:100%;height:220px;display:block}
.chart text{font-family:inherit;font-size:11.5px;fill:var(--ink-3)}
.chart .grid line{stroke:var(--grid);stroke-width:1}
.chart .line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .area{fill:url(#areaGrad)}
.chart .pt{fill:var(--accent);stroke:var(--bg);stroke-width:2}
.chart .pt.hi{fill:var(--warm)}
.chart .pt.lo{fill:var(--cool)}
.chart .lbl{fill:var(--ink);font-weight:600;font-size:12px}
.chart .crosshair{stroke:rgba(255,255,255,.35);stroke-width:1;stroke-dasharray:3 3;opacity:0}
.chart .hover-dot{fill:var(--accent);stroke:var(--ink);stroke-width:2;r:5;opacity:0}
.tip{
position:absolute;top:8px;pointer-events:none;opacity:0;transition:opacity .12s;
background:rgba(16,20,36,.92);border:1px solid var(--border);border-radius:10px;
padding:8px 11px;font-size:12px;color:var(--ink-2);white-space:nowrap;
transform:translateX(-50%);box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.tip b{display:block;color:var(--ink);font-size:16px;font-weight:600;letter-spacing:-.01em}
.strip{
display:grid;grid-template-columns:repeat(24,1fr);gap:4px;margin-top:14px;
padding-top:14px;border-top:1px solid var(--border);
}
.cell{
text-align:center;padding:8px 0 6px;border-radius:10px;
display:flex;flex-direction:column;gap:4px;
transition:background .15s;
}
.cell.hot{background:rgba(255,177,122,.09)}
.cell.cold{background:rgba(143,211,255,.09)}
.cell .h{font-size:10px;color:var(--ink-3);letter-spacing:.04em}
.cell .t{font-size:13px;font-weight:600;color:var(--ink)}
.cell .t.na{color:var(--ink-3);font-weight:400}
.state{
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:14px;min-height:300px;text-align:center;
}
.state .big{font-size:26px;font-weight:600;letter-spacing:-.015em}
.state .msg{font-size:14px;color:var(--ink-2);max-width:520px;line-height:1.5}
.state code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--ink-3);background:var(--surface);padding:3px 7px;border-radius:6px}
.spinner{
width:36px;height:36px;border-radius:50%;
border:3px solid var(--border);border-top-color:var(--accent);
animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.err-ico{
width:56px;height:56px;border-radius:18px;display:grid;place-items:center;
background:rgba(255,120,120,.12);border:1px solid rgba(255,120,120,.3);color:#ff9b9b;font-size:26px;font-weight:700;
}
.hidden{display:none!important}
.fade-in{animation:fade .5s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
</style>
</head>
<body>
<div class="sky" id="sky"></div>
<main class="card" id="card">
<header>
<div class="place">
<div class="eyebrow"><span class="dot"></span><span id="eyebrow">Weather</span></div>
<h1 id="name">—</h1>
<div class="date" id="date">—</div>
<div class="coords" id="coords"></div>
</div>
<div class="badge" id="source">Loading</div>
</header>
<div id="loading" class="state">
<div class="spinner"></div>
<div class="msg">Fetching conditions…</div>
</div>
<div id="error" class="state hidden">
<div class="err-ico">!</div>
<div class="big">Weather data could not be loaded</div>
<div class="msg" id="errmsg"></div>
</div>
<div id="content" class="hidden" style="display:contents">
<div class="hero fade-in">
<div class="icon" id="icon"></div>
<div class="condition">
<div class="label" id="cond">—</div>
<div class="sub" id="condsub"></div>
</div>
<div class="range">
<div class="stat hi"><div class="k"><i></i>High</div><div class="v"><span id="tmax">—</span><small>°C</small></div></div>
<div class="stat lo"><div class="k"><i></i>Low</div><div class="v"><span id="tmin">—</span><small>°C</small></div></div>
</div>
</div>
<section class="hourly fade-in" style="animation-delay:.08s">
<div class="sec-head">
<h2>Hourly temperature</h2>
<div class="hint">UTC · °C · hover for detail</div>
</div>
<div class="chart-wrap">
<svg class="chart" id="chart" viewBox="0 0 992 220" preserveAspectRatio="none" role="img" aria-label="Hourly temperature line chart"></svg>
<div class="tip" id="tip"></div>
</div>
<div class="strip" id="strip"></div>
</section>
</div>
</main>
<script>
(function(){
const $ = id => document.getElementById(id);
const params = new URLSearchParams(location.search);
const todayUTC = new Date().toISOString().slice(0,10);
const numOr = (v, d) => { const n = parseFloat(v); return Number.isFinite(n) ? n : d; };
const lat = numOr(params.get('lat'), 52.52);
const lon = numOr(params.get('lon'), 13.405);
const name = (params.get('name') || '').trim() || 'Berlin';
let date = (params.get('date') || '').trim();
if (!/^\d{4}-\d{2}-\d{2}$/.test(date) || isNaN(Date.parse(date + 'T00:00:00Z'))) date = todayUTC;
const isPast = date < todayUTC;
const endpoint = isPast ? '/api/om/archive' : '/api/om/forecast';
// ---- Weather codes (WMO) ----
const WMO = {
0:['Clear sky','clear'],1:['Mainly clear','clear'],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:['Slight rain','rain'],63:['Moderate rain','rain'],65:['Heavy rain','rain'],
66:['Light freezing rain','rain'],67:['Heavy freezing rain','rain'],
71:['Slight snowfall','snow'],73:['Moderate snowfall','snow'],75:['Heavy snowfall','snow'],77:['Snow grains','snow'],
80:['Slight rain showers','rain'],81:['Moderate rain showers','rain'],82:['Violent rain showers','rain'],
85:['Slight snow showers','snow'],86:['Heavy snow showers','snow'],
95:['Thunderstorm','storm'],96:['Thunderstorm with slight hail','storm'],99:['Thunderstorm with heavy hail','storm']
};
const SKY = {
clear:['#3b4f9a','#6a3f7a','#1f5a6e'],
partly:['#2f4680','#4b3866','#1a4a5c'],
cloud:['#2a3550','#3a3a55','#243444'],
fog:['#2c3446','#3a3a48','#2a3340'],
drizzle:['#233a5e','#2f3a5a','#1b4658'],
rain:['#1c3560','#252c55','#153e5a'],
snow:['#33456e','#4a4a72','#2c5266'],
storm:['#1a1f3d','#3a1f4d','#14283a']
};
function icon(kind){
const sun = `<circle cx="48" cy="48" r="18" fill="url(#gSun)"/>` +
Array.from({length:8},(_,i)=>{const a=i*Math.PI/4;const x1=48+Math.cos(a)*26,y1=48+Math.sin(a)*26,x2=48+Math.cos(a)*34,y2=48+Math.sin(a)*34;return `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="#ffd27a" stroke-width="4" stroke-linecap="round" opacity=".9"/>`}).join('');
const cloud = (dx=0,dy=0,s=1,op=1)=>`<g transform="translate(${dx} ${dy}) scale(${s})" opacity="${op}"><path d="M26 66a14 14 0 0 1 2-27.8A20 20 0 0 1 66 34a15 15 0 0 1 6 29.5H26z" fill="url(#gCloud)"/></g>`;
const drops = (n,col='#8fd3ff')=>Array.from({length:n},(_,i)=>`<line x1="${34+i*14}" y1="74" x2="${30+i*14}" y2="86" stroke="${col}" stroke-width="4" stroke-linecap="round"/>`).join('');
const flakes = n=>Array.from({length:n},(_,i)=>`<circle cx="${34+i*14}" cy="${78+(i%2)*6}" r="3.5" fill="#e6f4ff"/>`).join('');
const defs = `<defs>
<radialGradient id="gSun" cx="40%" cy="35%"><stop offset="0" stop-color="#fff3c4"/><stop offset="1" stop-color="#ffb347"/></radialGradient>
<linearGradient id="gCloud" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ffffff"/><stop offset="1" stop-color="#b9c4d8"/></linearGradient>
</defs>`;
let body='';
switch(kind){
case 'clear': body = sun; break;
case 'partly': body = `<g transform="translate(10 -8) scale(.75)">${sun}</g>` + cloud(4,6,.95); break;
case 'cloud': body = cloud(-2,-10,.8,.6) + cloud(4,6,.95); break;
case 'fog': body = cloud(4,-4,.9,.8) + [0,1,2].map(i=>`<line x1="${22+i*6}" y1="${74+i*8}" x2="${74-i*6}" y2="${74+i*8}" stroke="#c8d2e2" stroke-width="4" stroke-linecap="round" opacity="${.9-i*.25}"/>`).join(''); break;
case 'drizzle': body = cloud(4,-4,.95) + drops(3,'#a9dcff'); break;
case 'rain': body = cloud(4,-4,.95) + drops(4,'#8fd3ff'); break;
case 'snow': body = cloud(4,-4,.95) + flakes(4); break;
case 'storm': body = cloud(4,-6,.95) + `<path d="M50 62 L40 82 H52 L44 98 L64 74 H52 L58 62 Z" fill="#ffd66b"/>`; break;
default: body = cloud(4,6,.95);
}
return `<svg viewBox="0 0 96 96" aria-hidden="true">${defs}${body}</svg>`;
}
function fmtDate(iso){
const d = new Date(iso + 'T00:00:00Z');
return d.toLocaleDateString('en-GB',{weekday:'long',day:'numeric',month:'long',year:'numeric',timeZone:'UTC'});
}
const fmt1 = v => (Math.round(v*10)/10).toLocaleString('en-US',{minimumFractionDigits:1,maximumFractionDigits:1});
const fmt0 = v => Math.round(v).toString();
// ---- Header (render immediately) ----
$('name').textContent = name;
$('date').textContent = fmtDate(date);
$('coords').textContent = `${Math.abs(lat).toFixed(3)}° ${lat>=0?'N':'S'} · ${Math.abs(lon).toFixed(3)}° ${lon>=0?'E':'W'}`;
$('eyebrow').textContent = date === todayUTC ? 'Today' : (isPast ? 'Historical' : 'Forecast');
document.title = `${name} · ${date} · Weather`;
function showError(msg){
$('loading').classList.add('hidden');
$('content').classList.add('hidden');
$('error').classList.remove('hidden');
$('errmsg').innerHTML = msg;
$('source').textContent = 'Unavailable';
}
// ---- Chart ----
function renderChart(hours, temps){
const svg = $('chart');
const W=992, H=220, padL=40, padR=16, padT=22, padB=30;
const valid = temps.map((t,i)=>({t,i})).filter(o=>Number.isFinite(o.t));
if (valid.length < 2){
svg.innerHTML = `<text x="${W/2}" y="${H/2}" text-anchor="middle">No hourly values available</text>`;
return;
}
const n = temps.length;
const lo = Math.min(...valid.map(o=>o.t)), hi = Math.max(...valid.map(o=>o.t));
const span = Math.max(hi-lo, 2);
const yMin = Math.floor((lo - span*0.15)), yMax = Math.ceil((hi + span*0.15));
const x = i => padL + (i/(n-1))*(W-padL-padR);
const y = t => padT + (1-(t-yMin)/(yMax-yMin))*(H-padT-padB);
// grid: 4 lines
const ticks = 4, grid=[];
for (let k=0;k<=ticks;k++){
const v = yMin + (yMax-yMin)*k/ticks;
grid.push(`<line x1="${padL}" x2="${W-padR}" y1="${y(v)}" y2="${y(v)}"/>`);
grid.push(`<text x="${padL-8}" y="${y(v)+4}" text-anchor="end">${fmt0(v)}°</text>`);
}
// x labels every 3h
const xl=[];
for (let i=0;i<n;i+=3) xl.push(`<text x="${x(i)}" y="${H-8}" text-anchor="middle">${String(i).padStart(2,'0')}</text>`);
// path (segments across gaps)
let d='', area='';
let seg=[];
const flush=()=>{ if(seg.length){ d += 'M'+seg.map(p=>`${p[0]},${p[1]}`).join(' L '); area += `M${seg[0][0]},${y(yMin)} L`+seg.map(p=>`${p[0]},${p[1]}`).join(' L ')+` L${seg[seg.length-1][0]},${y(yMin)} Z `; seg=[]; } };
temps.forEach((t,i)=>{ if(Number.isFinite(t)) seg.push([x(i),y(t)]); else flush(); }); flush();
const iHi = valid.reduce((a,b)=>b.t>a.t?b:a).i, iLo = valid.reduce((a,b)=>b.t<a.t?b:a).i;
const labelAt=(i,cls,dy)=>`<circle class="pt ${cls}" cx="${x(i)}" cy="${y(temps[i])}" r="4.5"/><text class="lbl" x="${x(i)}" y="${y(temps[i])+dy}" text-anchor="middle">${fmt1(temps[i])}°</text>`;
svg.innerHTML = `
<defs><linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#7fb8ff" stop-opacity=".28"/><stop offset="1" stop-color="#7fb8ff" stop-opacity="0"/></linearGradient></defs>
<g class="grid">${grid.join('')}</g>
<g>${xl.join('')}</g>
<path class="area" d="${area}"/>
<path class="line" d="${d}"/>
${labelAt(iHi,'hi',-12)}${iLo!==iHi?labelAt(iLo,'lo',22):''}
<line class="crosshair" id="xh" y1="${padT}" y2="${H-padB}" x1="0" x2="0"/>
<circle class="hover-dot" id="hd" cx="0" cy="0" r="5"/>
<rect x="${padL}" y="0" width="${W-padL-padR}" height="${H}" fill="transparent" id="hit"/>`;
const tip=$('tip'), xh=$('xh'), hd=$('hd'), hit=$('hit');
const strip=$('strip');
let active=-1;
const setActive=i=>{
if(i===active) return; active=i;
[...strip.children].forEach((c,k)=>c.style.background = k===i ? 'var(--accent-soft)' : '');
};
hit.addEventListener('mousemove', e=>{
const r = svg.getBoundingClientRect();
const px = (e.clientX - r.left) * (W / r.width);
let i = Math.round((px-padL)/(W-padL-padR)*(n-1)); i=Math.max(0,Math.min(n-1,i));
const t = temps[i];
xh.setAttribute('x1',x(i)); xh.setAttribute('x2',x(i)); xh.style.opacity=1;
if (Number.isFinite(t)){ hd.setAttribute('cx',x(i)); hd.setAttribute('cy',y(t)); hd.style.opacity=1; } else hd.style.opacity=0;
tip.innerHTML = `${hours[i]} UTC<b>${Number.isFinite(t)?fmt1(t)+' °C':'no data'}</b>`;
tip.style.left = (x(i)/W*r.width)+'px'; tip.style.opacity=1;
setActive(i);
});
hit.addEventListener('mouseleave', ()=>{ xh.style.opacity=0; hd.style.opacity=0; tip.style.opacity=0; setActive(-1); });
}
function renderStrip(hours, temps){
const valid = temps.filter(Number.isFinite);
const hi = Math.max(...valid), lo = Math.min(...valid);
$('strip').innerHTML = hours.map((h,i)=>{
const t=temps[i]; const cls = t===hi?'hot':(t===lo?'cold':'');
return `<div class="cell ${cls}"><span class="h">${h.slice(0,2)}</span><span class="t ${Number.isFinite(t)?'':'na'}">${Number.isFinite(t)?fmt0(t)+'°':'–'}</span></div>`;
}).join('');
}
// ---- Fetch ----
const q = 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
});
fetch(`${endpoint}?${q}`, {headers:{'Accept':'application/json'}})
.then(async r=>{
let j=null; try{ j = await r.json(); }catch(e){}
if(!r.ok || !j || j.error) throw new Error((j && j.reason) || `HTTP ${r.status}`);
return j;
})
.then(j=>{
const daily=j.daily||{}, hourly=j.hourly||{};
const tmax = daily.temperature_2m_max?.[0], tmin = daily.temperature_2m_min?.[0], code = daily.weather_code?.[0];
const hTimes = hourly.time||[], hTemps = hourly.temperature_2m||[];
const hours=[], temps=[];
hTimes.forEach((ts,i)=>{ if(ts.startsWith(date)){ hours.push(ts.slice(11,16)); temps.push(typeof hTemps[i]==='number'?hTemps[i]:NaN); } });
const haveHourly = temps.some(Number.isFinite);
if(!Number.isFinite(tmax) && !Number.isFinite(tmin) && !haveHourly) throw new Error('The response contained no data for this date.');
const [label, kind] = WMO[code] || (Number.isFinite(code)?['Code '+code,'cloud']:['Conditions unavailable','cloud']);
const sky = SKY[kind]||SKY.cloud;
const s=$('sky').style; s.setProperty('--sky-a',sky[0]); s.setProperty('--sky-b',sky[1]); s.setProperty('--sky-c',sky[2]);
$('icon').innerHTML = icon(kind);
$('cond').textContent = label;
$('condsub').textContent = Number.isFinite(code) ? `WMO code ${code} · daily summary` : 'Daily weather code not provided';
$('tmax').textContent = Number.isFinite(tmax)?fmt1(tmax):'–';
$('tmin').textContent = Number.isFinite(tmin)?fmt1(tmin):'–';
$('source').textContent = isPast ? 'Archive · Open-Meteo' : 'Forecast · Open-Meteo';
if(haveHourly){ renderChart(hours,temps); renderStrip(hours,temps); }
else { $('chart').innerHTML=`<text x="496" y="110" text-anchor="middle">Hourly temperatures unavailable for this date</text>`; $('strip').innerHTML=''; }
$('loading').classList.add('hidden');
$('content').classList.remove('hidden');
})
.catch(err=>{
showError(`We couldn't retrieve weather for <strong>${name.replace(/</g,'<')}</strong> on ${fmtDate(date)}.<br><code>${String(err.message||err).replace(/</g,'<')}</code>`);
});
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 20,880 | html / css / js | 1,986 / 7,098 / 11,796 |
|---|---|---|---|
| dom nodes | 53 | dom depth | 9 |
| css rules | 67 | js present | yes |
| brightness | 46.8 | contrast | 19.6 |
| colorfulness | 17.8 | whitespace | 45.2% |
This slot's telemetry
| prompt tokens | 4 | completion tokens | 11,065 |
|---|---|---|---|
| total tokens | 11,069 | wall | 116.4 s |
| cost | — | request id | — |
config.json577 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "claude-fable-5-1-eff-high--cli--claude-code--dev",
"effort": "high",
"family": "claude",
"m": {
"min": 2,
"q": 2
},
"model_id": "claude-fable-5-1",
"protocol": "cli",
"served_model": "claude-fable-5-1",
"telemetry": {
"completion_tokens": 32099,
"cost_usd": null,
"prompt_tokens": 10,
"total_tokens": 32109,
"wall_ms": 330375
},
"transport": "claude-code-cli-headless",
"vendor_sanction_ref": null
}send-log2.5 KB
{
"N": 2,
"batch_id": "2026-09-02--cc-fable51-s0",
"config_id": "claude-fable-5-1-eff-high--cli--claude-code--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-09-02T01:24:49.814790+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-09-02T01:23:50.116555+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-09-02T01:26:49.080594+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-09-02T01:24:52.650122+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-09-02T01:28:48.030772+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-09-02T01:26:52.692667+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-09-02T01:29:31.031328+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-09-02T01:28:52.113385+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
}
}
}