claude-sonnet-4-6-thinking @ medium · cursor-xl
cursor-xlmedium
- config
- claude-sonnet-4-6-thinking-eff-medium--cli--cursor-xl--dev
- batch
- 2026-07-19--unified
- transport
- cursor-agent-cli-isolated-home
- protocol
- cli · plan
- served model
- claude-4.6-sonnet-medium-thinking
- 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-sonnet-4-6 @medium · kiro0.72claude-opus-4-6 @max · kiro0.70claude-opus-4-7 @low · kiro0.70deepseek-v4.1-flash @none · api0.70claude-opus-4-7 @high · kiro0.69farthest
north-mini-code-free · api0.48gpt-6-astra · codex0.52claude-sonnet-4 · cursor0.52grok-4.6 @high · grok-cli0.52cursor-grok-4.5 @high · cursor-xl0.52within 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 8/24 · 8 match · 0 mismatch · 16 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">
<title>Weather</title>
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:1280px;height:800px;overflow:hidden}
body{
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
display:flex;align-items:center;justify-content:center;
background:#070c17;position:relative;
}
/* ── Background ── */
#bg{
position:fixed;inset:0;overflow:hidden;
background:#070c17;
transition:background 1.6s ease;
}
.blob{
position:absolute;border-radius:50%;
filter:blur(110px);will-change:transform;
}
#b1{
width:780px;height:780px;top:-260px;left:-180px;
background:var(--b1,#1c3d7a);opacity:.65;
animation:d1 22s ease-in-out infinite alternate;
}
#b2{
width:680px;height:680px;bottom:-200px;right:-140px;
background:var(--b2,#0c1f55);opacity:.6;
animation:d2 28s ease-in-out infinite alternate;
}
#b3{
width:460px;height:460px;top:55%;left:42%;
background:var(--b3,#162a60);opacity:.32;
animation:d3 34s ease-in-out infinite alternate;
}
@keyframes d1{to{transform:translate(90px,70px) scale(1.08)}}
@keyframes d2{to{transform:translate(-75px,-65px) scale(1.07)}}
@keyframes d3{to{transform:translate(-55px,55px) scale(1.12)}}
/* ── Loading ── */
#st-load{
position:relative;z-index:2;
display:flex;flex-direction:column;align-items:center;gap:20px;
}
.spinner{
width:38px;height:38px;border-radius:50%;
border:2px solid rgba(255,255,255,.1);
border-top-color:rgba(255,255,255,.78);
animation:spin .85s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.load-lbl{
font-size:12px;letter-spacing:.12em;text-transform:uppercase;
color:rgba(255,255,255,.32);font-weight:500;
}
/* ── Error ── */
#st-err{
position:relative;z-index:2;
display:flex;flex-direction:column;align-items:center;
gap:14px;text-align:center;padding:40px;
}
.err-ico{font-size:52px;opacity:.38}
.err-h{font-size:22px;font-weight:300;color:rgba(255,255,255,.68)}
.err-d{font-size:13.5px;color:rgba(255,255,255,.32);max-width:400px;line-height:1.65}
/* ── Card ── */
#card{
position:relative;z-index:2;
width:940px;
background:rgba(255,255,255,.082);
border:1px solid rgba(255,255,255,.13);
border-radius:28px;
backdrop-filter:blur(40px) saturate(180%);
-webkit-backdrop-filter:blur(40px) saturate(180%);
box-shadow:
0 55px 130px rgba(0,0,0,.58),
0 0 0 .5px rgba(255,255,255,.06) inset,
0 1px 0 rgba(255,255,255,.16) inset;
overflow:hidden;
opacity:0;
animation:cardIn .55s cubic-bezier(.22,1,.36,1) .05s forwards;
}
@keyframes cardIn{
from{opacity:0;transform:translateY(12px) scale(.99)}
to {opacity:1;transform:translateY(0) scale(1)}
}
/* top shimmer */
#card::before{
content:'';position:absolute;
top:0;left:12%;right:12%;height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
pointer-events:none;z-index:4;
}
/* inner radial glow */
#card::after{
content:'';position:absolute;inset:0;
background:radial-gradient(ellipse at 38% 36%,rgba(255,255,255,.055) 0%,transparent 68%);
pointer-events:none;z-index:0;
}
/* ── Card grid ── */
.card-top{
display:grid;
grid-template-columns:360px 1fr;
position:relative;z-index:1;
}
/* ── Left panel ── */
.pl{
padding:48px 44px;
border-right:1px solid rgba(255,255,255,.07);
display:flex;flex-direction:column;
min-height:380px;
}
.meta{margin-bottom:44px}
.loc-row{
display:flex;align-items:center;gap:8px;
margin-bottom:7px;
}
.pin{flex-shrink:0;color:rgba(255,255,255,.42)}
.loc-name{
font-size:17px;font-weight:500;
color:rgba(255,255,255,.88);
letter-spacing:.005em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.date-str{
font-size:13px;color:rgba(255,255,255,.38);
letter-spacing:.02em;padding-left:22px;
}
.icon-block{
flex:1;display:flex;flex-direction:column;
justify-content:center;padding-bottom:8px;
}
.w-icon{width:100px;height:100px;margin-bottom:16px}
.cond{
font-size:18.5px;font-weight:400;
color:rgba(255,255,255,.55);
letter-spacing:.01em;
}
.coords{
font-size:11.5px;color:rgba(255,255,255,.22);
letter-spacing:.04em;margin-top:auto;padding-top:20px;
font-variant-numeric:tabular-nums;
}
/* ── Right panel ── */
.pr{
padding:48px 54px 48px 48px;
display:flex;flex-direction:column;
justify-content:center;align-items:flex-end;
}
.temp-hero{
display:flex;align-items:flex-start;
line-height:1;
margin-bottom:26px;
}
.temp-num{
font-size:116px;font-weight:100;
color:rgba(255,255,255,.95);
letter-spacing:-6px;
font-variant-numeric:tabular-nums;
}
.temp-sup{
font-size:48px;font-weight:200;
color:rgba(255,255,255,.82);
letter-spacing:-1px;
padding-top:14px;
}
.hilo{
display:flex;align-items:center;
background:rgba(255,255,255,.065);
border:1px solid rgba(255,255,255,.1);
border-radius:16px;overflow:hidden;
}
.hilo-cell{
display:flex;flex-direction:column;
align-items:center;padding:14px 30px;gap:3px;
}
.hilo-lbl{
font-size:9.5px;text-transform:uppercase;
letter-spacing:.15em;font-weight:700;
color:rgba(255,255,255,.30);
}
.hilo-val{
font-size:25px;font-weight:300;
color:rgba(255,255,255,.78);
letter-spacing:-.5px;
font-variant-numeric:tabular-nums;
}
.hilo-sep{width:1px;height:38px;background:rgba(255,255,255,.11)}
/* ── Chart ── */
.chart-sec{
border-top:1px solid rgba(255,255,255,.07);
padding:22px 44px 40px;
position:relative;z-index:1;
}
.chart-ttl{
font-size:9.5px;text-transform:uppercase;
letter-spacing:.15em;font-weight:700;
color:rgba(255,255,255,.26);
margin-bottom:14px;
}
#chart{display:block;width:852px;height:90px;overflow:visible}
</style>
</head>
<body>
<div id="bg">
<div class="blob" id="b1"></div>
<div class="blob" id="b2"></div>
<div class="blob" id="b3"></div>
</div>
<div id="st-load">
<div class="spinner"></div>
<div class="load-lbl">Loading weather data</div>
</div>
<div id="st-err" style="display:none">
<div class="err-ico">⛅</div>
<div class="err-h">Weather unavailable</div>
<div class="err-d" id="err-d"></div>
</div>
<div id="card" style="display:none">
<div class="card-top">
<div class="pl">
<div class="meta">
<div class="loc-row">
<svg class="pin" width="13" height="17" viewBox="0 0 13 17" fill="none">
<path d="M6.5.75a5.75 5.75 0 0 1 5.75 5.75c0 4.38-5.75 9.75-5.75 9.75S.75 10.88.75 6.5A5.75 5.75 0 0 1 6.5.75zm0 7.75a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="currentColor"/>
</svg>
<span class="loc-name" id="loc-name"></span>
</div>
<div class="date-str" id="date-str"></div>
</div>
<div class="icon-block">
<div class="w-icon" id="w-icon"></div>
<div class="cond" id="cond"></div>
</div>
<div class="coords" id="coords"></div>
</div>
<div class="pr">
<div class="temp-hero">
<span class="temp-num" id="temp-num">—</span><span class="temp-sup">°C</span>
</div>
<div class="hilo">
<div class="hilo-cell">
<span class="hilo-lbl">High</span>
<span class="hilo-val" id="h-hi">—</span>
</div>
<div class="hilo-sep"></div>
<div class="hilo-cell">
<span class="hilo-lbl">Low</span>
<span class="hilo-val" id="h-lo">—</span>
</div>
</div>
</div>
</div>
<div class="chart-sec">
<div class="chart-ttl">Hourly Temperature</div>
<svg id="chart" viewBox="0 0 852 90" xmlns="http://www.w3.org/2000/svg"></svg>
</div>
</div>
<script>
// ── WMO Weather Codes ────────────────────────────────────────────────────────
const WMO = {
0:{l:'Clear Sky', g:'clear'},
1:{l:'Mainly Clear', g:'clear'},
2:{l:'Partly Cloudy', g:'pcloudy'},
3:{l:'Overcast', g:'cloudy'},
45:{l:'Fog', g:'fog'},
48:{l:'Rime Fog', g:'fog'},
51:{l:'Light Drizzle', g:'drizzle'},
53:{l:'Moderate Drizzle', g:'drizzle'},
55:{l:'Dense Drizzle', g:'drizzle'},
61:{l:'Slight Rain', g:'rain'},
63:{l:'Moderate Rain', g:'rain'},
65:{l:'Heavy Rain', g:'rain'},
71:{l:'Slight Snowfall', g:'snow'},
73:{l:'Moderate Snowfall', g:'snow'},
75:{l:'Heavy Snowfall', g:'snow'},
77:{l:'Snow Grains', g:'snow'},
80:{l:'Slight Showers', g:'showers'},
81:{l:'Moderate Showers', g:'showers'},
82:{l:'Violent Showers', g:'showers'},
85:{l:'Slight Snow Showers',g:'snow'},
86:{l:'Heavy Snow Showers', g:'snow'},
95:{l:'Thunderstorm', g:'thunder'},
96:{l:'Thunderstorm + Hail',g:'thunder'},
99:{l:'Thunderstorm + Hail',g:'thunder'},
};
// ── Themes ───────────────────────────────────────────────────────────────────
const THEMES = {
clear: {b1:'#c87a0a',b2:'#1a3870',b3:'#d98c20',accent:'#f0c050',bg:'#0e0900'},
pcloudy: {b1:'#2558aa',b2:'#1a2d6a',b3:'#3464b4',accent:'#78aee8',bg:'#07101e'},
cloudy: {b1:'#334060',b2:'#1e2840',b3:'#445070',accent:'#98aac8',bg:'#080c14'},
fog: {b1:'#3e4e68',b2:'#232e44',b3:'#4e5e78',accent:'#a8b8cc',bg:'#080c14'},
drizzle: {b1:'#1a4890',b2:'#0c2050',b3:'#1e5898',accent:'#5898e0',bg:'#050b1a'},
rain: {b1:'#103878',b2:'#081535',b3:'#163e80',accent:'#4484d4',bg:'#040918'},
showers: {b1:'#153c88',b2:'#0a1838',b3:'#1a4890',accent:'#508cd8',bg:'#040a18'},
snow: {b1:'#2c58b0',b2:'#182850',b3:'#4070c4',accent:'#a8c4f4',bg:'#060c1c'},
thunder: {b1:'#281870',b2:'#0a081e',b3:'#381e8a',accent:'#a888ff',bg:'#03020d'},
};
// ── SVG Weather Icons ────────────────────────────────────────────────────────
function sunSvg(sz=50,cx=50,cy=50,rays=8){
const out=[];
out.push(`<circle cx="${cx}" cy="${cy}" r="${sz*.38}" fill="#f7cf50"/>`);
const inner=sz*.52, outer=sz*.72;
for(let i=0;i<rays;i++){
const a=i*(Math.PI*2/rays);
const x1=(cx+inner*Math.cos(a)).toFixed(2), y1=(cy+inner*Math.sin(a)).toFixed(2);
const x2=(cx+outer*Math.cos(a)).toFixed(2), y2=(cy+outer*Math.sin(a)).toFixed(2);
out.push(`<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="#f7cf50" stroke-width="${(sz*.08).toFixed(1)}" stroke-linecap="round"/>`);
}
return out.join('');
}
function cloudPath(cx,cy,w,h,fill,op=1){
const r=h*.5;
return `<path d="M${cx-w*.3} ${cy+r}
a${r} ${r} 0 0 1 ${-r*.1}-${h*.9}
a${h*.38} ${h*.38} 0 0 1 ${h*.62}-${h*.08}
a${h*.52} ${h*.52} 0 0 1 ${h*.88} ${h*.55}
a${h*.46} ${h*.46} 0 0 1 ${-h*.16} ${h*.92}z"
fill="${fill}" opacity="${op}"/>`;
}
const ICONS = {
clear(){
return `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">${sunSvg(50)}</svg>`;
},
pcloudy(){
const sunRays=[];
for(let i=0;i<6;i++){
const a=i*(Math.PI/3),r1=23,r2=31;
sunRays.push(`<line x1="${(35+r1*Math.cos(a)).toFixed(1)}" y1="${(42+r1*Math.sin(a)).toFixed(1)}" x2="${(35+r2*Math.cos(a)).toFixed(1)}" y2="${(42+r2*Math.sin(a)).toFixed(1)}" stroke="#f7cf50" stroke-width="3.5" stroke-linecap="round" opacity=".85"/>`);
}
return `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="35" cy="42" r="15" fill="#f7cf50" opacity=".9"/>
${sunRays.join('')}
<path d="M76 64H40a16 16 0 0 1-1.6-31.9A20 20 0 0 1 76 46a14 14 0 0 1 0 18z" fill="#c0d4f0" opacity=".92"/>
</svg>`;
},
cloudy(){
return `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M78 56H34a18 18 0 0 1-1.8-35.9A22 22 0 0 1 78 36a16 16 0 0 1 0 20z" fill="#8898b8" opacity=".85"/>
<path d="M64 72H26a13 13 0 0 1-1.3-25.9A16 16 0 0 1 64 58a11 11 0 0 1 0 14z" fill="#6878a0" opacity=".72"/>
</svg>`;
},
fog(){
return `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M70 40H30a13 13 0 0 1-1.3-25.9A16 16 0 0 1 70 24a12 12 0 0 1 0 16z" fill="#7888a8" opacity=".7"/>
<line x1="14" y1="54" x2="86" y2="54" stroke="rgba(175,188,210,.58)" stroke-width="5.5" stroke-linecap="round"/>
<line x1="20" y1="67" x2="80" y2="67" stroke="rgba(165,178,200,.42)" stroke-width="5.5" stroke-linecap="round"/>
<line x1="28" y1="80" x2="72" y2="80" stroke="rgba(155,168,190,.28)" stroke-width="5.5" stroke-linecap="round"/>
</svg>`;
},
drizzle(){
const drops=[[30,65],[44,65],[58,65],[72,65]].map(([x,y])=>
`<line x1="${x}" y1="${y}" x2="${x-3}" y2="${y+13}" stroke="rgba(120,185,245,.82)" stroke-width="2.5" stroke-linecap="round"/>`
).join('');
return `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M76 52H34a16 16 0 0 1-1.6-31.9A20 20 0 0 1 76 34a14 14 0 0 1 0 18z" fill="#6888b0" opacity=".9"/>
${drops}
</svg>`;
},
rain(){
const drops=[[28,63],[46,63],[64,63],[37,75],[55,75]].map(([x,y])=>
`<line x1="${x}" y1="${y}" x2="${x-4}" y2="${y+15}" stroke="rgba(100,168,235,.88)" stroke-width="3" stroke-linecap="round"/>`
).join('');
return `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M76 50H34a16 16 0 0 1-1.6-31.9A20 20 0 0 1 76 32a14 14 0 0 1 0 18z" fill="#4870a8" opacity=".92"/>
${drops}
</svg>`;
},
showers(){
const drops=[[28,63],[46,63],[64,63]].map(([x,y])=>
`<line x1="${x}" y1="${y}" x2="${x-4}" y2="${y+15}" stroke="rgba(100,168,235,.88)" stroke-width="3" stroke-linecap="round"/>`
).join('');
return `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="28" r="14" fill="#f7cf50" opacity=".78"/>
${[0,60,120,180,240,300].map(a=>{
const rd=a*Math.PI/180,r1=18,r2=25;
return `<line x1="${(30+r1*Math.cos(rd)).toFixed(1)}" y1="${(28+r1*Math.sin(rd)).toFixed(1)}" x2="${(30+r2*Math.cos(rd)).toFixed(1)}" y2="${(28+r2*Math.sin(rd)).toFixed(1)}" stroke="#f7cf50" stroke-width="3" stroke-linecap="round" opacity=".75"/>`;
}).join('')}
<path d="M76 50H34a16 16 0 0 1-1.6-31.9A20 20 0 0 1 76 32a14 14 0 0 1 0 18z" fill="#4870a8" opacity=".92"/>
${drops}
</svg>`;
},
snow(){
const flakes=[[30,68],[50,68],[70,68]].map(([cx,cy])=>{
const sz=8;
return [0,60,120].map(a=>{
const rd=a*Math.PI/180;
const dx=(sz*Math.cos(rd)).toFixed(1), dy=(sz*Math.sin(rd)).toFixed(1);
return `<line x1="${cx-dx}" y1="${cy-dy}" x2="${+cx+ +dx}" y2="${+cy+ +dy}" stroke="rgba(175,210,255,.88)" stroke-width="2.2" stroke-linecap="round"/>
<line x1="${cx+ +(sz*.55*Math.cos(rd+Math.PI*.33)).toFixed(1)}" y1="${cy+ +(sz*.55*Math.sin(rd+Math.PI*.33)).toFixed(1)}" x2="${cx+ +(sz*.9*Math.cos(rd)).toFixed(1)}" y2="${cy+ +(sz*.9*Math.sin(rd)).toFixed(1)}" stroke="rgba(175,210,255,.6)" stroke-width="1.8" stroke-linecap="round"/>`;
}).join('');
}).join('');
return `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M76 50H34a16 16 0 0 1-1.6-31.9A20 20 0 0 1 76 32a14 14 0 0 1 0 18z" fill="#6888c8" opacity=".9"/>
${flakes}
</svg>`;
},
thunder(){
return `<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M76 50H34a16 16 0 0 1-1.6-31.9A20 20 0 0 1 76 32a14 14 0 0 1 0 18z" fill="#504878" opacity=".92"/>
<path d="M56 54l-14 21h12L44 96l23-30H54l13-12z" fill="#ffe050" opacity=".96"/>
</svg>`;
},
};
function getIcon(g){
return (ICONS[g]||ICONS.cloudy)();
}
// ── Theme application ────────────────────────────────────────────────────────
function applyTheme(g){
const t=THEMES[g]||THEMES.pcloudy;
const bg=document.getElementById('bg');
bg.style.backgroundColor=t.bg;
document.getElementById('b1').style.background=t.b1;
document.getElementById('b2').style.background=t.b2;
document.getElementById('b3').style.background=t.b3;
return t;
}
// ── Temperature chart ────────────────────────────────────────────────────────
function buildChart(temps, accent){
const svg=document.getElementById('chart');
const W=852, H=90, PL=6, PR=6, PT=18, PB=20;
const n=temps.length;
if(n<2){svg.innerHTML='';return;}
const pts=temps.map((v,i)=>({v,i})).filter(x=>x.v!=null);
if(pts.length<2){svg.innerHTML='';return;}
const minV=Math.min(...pts.map(p=>p.v));
const maxV=Math.max(...pts.map(p=>p.v));
const rng=maxV-minV||1;
const xOf=i=>PL+(i/(n-1))*(W-PL-PR);
const yOf=v=>PT+(1-(v-minV)/rng)*(H-PT-PB);
// smooth bezier through all valid points
const mapped=pts.map(({v,i})=>[xOf(i),yOf(v)]);
let line=`M${mapped[0][0].toFixed(2)} ${mapped[0][1].toFixed(2)}`;
for(let i=1;i<mapped.length;i++){
const [px,py]=mapped[i-1],[cx2,cy2]=mapped[i];
const mpx=((px+cx2)/2).toFixed(2);
line+=` C${mpx} ${py.toFixed(2)},${mpx} ${cy2.toFixed(2)},${cx2.toFixed(2)} ${cy2.toFixed(2)}`;
}
const last=mapped[mapped.length-1], first=mapped[0];
const area=`${line} L${last[0].toFixed(2)} ${H} L${first[0].toFixed(2)} ${H}Z`;
// labeled ticks every 3 hours
const ticks=[0,3,6,9,12,15,18,21];
const fmtH=h=>h===0?'12 AM':h<12?`${h} AM`:h===12?'12 PM':`${h-12} PM`;
const gid='g'+Math.random().toString(36).slice(2,7);
const ac=accent||'#78aee8';
svg.innerHTML=`
<defs>
<linearGradient id="${gid}" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="${ac}" stop-opacity=".38"/>
<stop offset="100%" stop-color="${ac}" stop-opacity=".02"/>
</linearGradient>
</defs>
<path d="${area}" fill="url(#${gid})"/>
<path d="${line}" stroke="${ac}" stroke-width="2" fill="none" stroke-linejoin="round" stroke-linecap="round" opacity=".92"/>
${ticks.map(h=>{
if(h>=n||temps[h]==null)return'';
const cx=xOf(h).toFixed(2), cy=yOf(temps[h]).toFixed(2);
const tv=Math.round(temps[h]);
return `
<circle cx="${cx}" cy="${cy}" r="3.5" fill="${ac}" opacity=".85"/>
<text x="${cx}" y="${(parseFloat(cy)-9).toFixed(1)}" text-anchor="middle"
font-size="9.5" font-weight="500" fill="${ac}" opacity=".82"
font-family="-apple-system,sans-serif">${tv}°</text>
<text x="${cx}" y="${H-2}" text-anchor="middle"
font-size="9" fill="rgba(255,255,255,.28)"
font-family="-apple-system,sans-serif">${fmtH(h)}</text>`;
}).join('')}`;
}
// ── Helpers ──────────────────────────────────────────────────────────────────
function todayUTC(){return new Date().toISOString().slice(0,10)}
function fmtDate(d){
return new Date(d+'T12:00:00Z').toLocaleDateString('en-US',{
weekday:'long',month:'long',day:'numeric',year:'numeric',timeZone:'UTC'
});
}
function fmtCoord(lat,lon){
const la=`${Math.abs(lat).toFixed(3)}° ${lat>=0?'N':'S'}`;
const lo=`${Math.abs(lon).toFixed(3)}° ${lon>=0?'E':'W'}`;
return `${la} · ${lo}`;
}
function params(){
const p=new URLSearchParams(location.search);
const t=todayUTC();
return{
lat:parseFloat(p.get('lat')||'52.52'),
lon:parseFloat(p.get('lon')||'13.405'),
name:p.get('name')||'Berlin',
date:p.get('date')||t,
};
}
function showError(msg){
document.getElementById('st-load').style.display='none';
document.getElementById('st-err').style.display='flex';
document.getElementById('err-d').textContent=msg;
}
function render(data,par){
const{name,lat,lon,date}=par;
const daily=data.daily;
if(!daily||!daily.temperature_2m_max){
showError('No daily data in API response.');return;
}
const maxT=Math.round(daily.temperature_2m_max[0]);
const minT=Math.round(daily.temperature_2m_min[0]);
const code=daily.weather_code[0];
const wmo=WMO[code]||{l:`Condition ${code}`,g:'cloudy'};
// hourly temps for requested date
let hrs=[];
if(data.hourly&&data.hourly.time&&data.hourly.temperature_2m){
const pfx=date+'T';
for(let i=0;i<data.hourly.time.length;i++){
if(data.hourly.time[i].startsWith(pfx))
hrs.push(data.hourly.temperature_2m[i]);
}
}
const theme=applyTheme(wmo.g);
document.getElementById('loc-name').textContent=name;
document.getElementById('date-str').textContent=fmtDate(date);
document.getElementById('cond').textContent=wmo.l;
document.getElementById('coords').textContent=fmtCoord(lat,lon);
document.getElementById('temp-num').textContent=maxT;
document.getElementById('h-hi').textContent=maxT+'°';
document.getElementById('h-lo').textContent=minT+'°';
document.getElementById('w-icon').innerHTML=getIcon(wmo.g);
document.getElementById('st-load').style.display='none';
const card=document.getElementById('card');
card.style.display='block';
if(hrs.length>0) buildChart(hrs,theme.accent);
}
// ── Main ─────────────────────────────────────────────────────────────────────
(async()=>{
const par=params();
const{lat,lon,date}=par;
const t=todayUTC();
const endpoint=date<t?'/api/om/archive':'/api/om/forecast';
try{
const url=new URL(endpoint,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 res=await fetch(url.toString());
if(!res.ok) throw new Error(`HTTP ${res.status} — ${res.statusText}`);
const data=await res.json();
if(data.error) throw new Error(data.reason||'API returned an error');
render(data,par);
}catch(e){
showError(e.message||'An unknown error occurred.');
}
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 22,628 | html / css / js | 2,013 / 5,695 / 14,920 |
|---|---|---|---|
| dom nodes | 46 | dom depth | 8 |
| css rules | 52 | js present | yes |
| brightness | 37.7 | contrast | 20.6 |
| colorfulness | 42.5 | whitespace | 46.0% |
This slot's telemetry
| prompt tokens | 8 | completion tokens | 46,600 |
|---|---|---|---|
| total tokens | 46,608 | wall | 635.5 s |
| cost | — | request id | — |
config.json623 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "claude-sonnet-4-6-thinking-eff-medium--cli--cursor-xl--dev",
"effort": "medium",
"family": "claude",
"m": {
"min": 2,
"q": 2
},
"model_id": "claude-sonnet-4-6-thinking",
"protocol": "cli",
"served_model": "claude-4.6-sonnet-medium-thinking",
"telemetry": {
"completion_tokens": 86617,
"cost_usd": null,
"prompt_tokens": 30,
"total_tokens": 86647,
"wall_ms": 1173307
},
"transport": "cursor-agent-cli-isolated-home",
"vendor_sanction_ref": null
}send-log2.5 KB
{
"N": 2,
"batch_id": "2026-08-13--cursor-xl-s0",
"config_id": "claude-sonnet-4-6-thinking-eff-medium--cli--cursor-xl--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-08-13T14:14:02.082929+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T14:03:26.576201+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-08-13T14:15:26.188108+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T14:14:06.597707+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-08-13T14:16:55.086718+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T14:15:29.408526+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-08-13T14:23:11.450395+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T14:16:58.903053+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
}
}
}