claude-fable-5 @ max · cursor-xl
cursor-xlmax
- config
- claude-fable-5-eff-max--cli--cursor-xl--dev
- batch
- 2026-07-19--unified
- transport
- cursor-agent-cli-isolated-home
- protocol
- cli · plan
- served model
- claude-fable-5-max
- 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 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"/>
<meta name="color-scheme" content="light"/>
<title>Weather</title>
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
color:var(--ink);
--ink:#17233b;--muted:#5a6a83;--hi:#e0653f;--lo:#3d6fbe;
--bg1:#3568b4;--bg2:#7ba6d8;--bg3:#dfeaf4;--accent:#f09a3c;--accent2:#7fb1e2;--glow-a:#ffd9a0;--glow-b:#9cc4ef;
background:
radial-gradient(1100px 700px at 88% -12%, color-mix(in srgb, var(--bg3) 55%, transparent), transparent 62%),
linear-gradient(168deg, var(--bg1) 0%, var(--bg2) 55%, var(--bg3) 100%);
}
body[data-theme="clear"]{--bg1:#2a63c0;--bg2:#5f9de6;--bg3:#f4d9a4;--accent:#ff9724;--accent2:#ffc95e;--glow-a:#ffcf7d;--glow-b:#8ec1f5}
body[data-theme="partly"]{--bg1:#3568b4;--bg2:#7ba6d8;--bg3:#dfeaf4;--accent:#f09a3c;--accent2:#7fb1e2;--glow-a:#ffd9a0;--glow-b:#9cc4ef}
body[data-theme="cloudy"]{--bg1:#47566c;--bg2:#7b8ba1;--bg3:#d3dbe4;--accent:#5c7ea6;--accent2:#9db3ca;--glow-a:#c3d0de;--glow-b:#8fa5bd}
body[data-theme="fog"]{--bg1:#66727e;--bg2:#98a3ae;--bg3:#e1e6ea;--accent:#68839c;--accent2:#9fb1c0;--glow-a:#cfd9e1;--glow-b:#93a6b6}
body[data-theme="rain"]{--bg1:#24446e;--bg2:#486c9c;--bg3:#a3bdd6;--accent:#2f86eb;--accent2:#6fb2ff;--glow-a:#7fb3ff;--glow-b:#3f6ea6}
body[data-theme="snow"]{--bg1:#5c7ea8;--bg2:#93b6d9;--bg3:#eaf2fa;--accent:#4f95e0;--accent2:#a8cdf0;--glow-a:#dcebfb;--glow-b:#9dc3ea}
body[data-theme="thunder"]{--bg1:#2e2a52;--bg2:#584b82;--bg3:#a89ac8;--accent:#f2ae35;--accent2:#9c8bd8;--glow-a:#c9b8f0;--glow-b:#f5c76a}
.scene{position:relative;min-height:100%;display:flex;align-items:center;justify-content:center;padding:44px;overflow:hidden}
.blob{position:absolute;width:560px;height:560px;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none}
.blob-a{top:-170px;left:-130px;background:var(--glow-a)}
.blob-b{bottom:-190px;right:-130px;background:var(--glow-b)}
.scene::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.card{position:relative;width:min(1064px,100%);border-radius:32px;padding:38px 46px 32px;
background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.74));
-webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);
border:1px solid rgba(255,255,255,.65);
box-shadow:0 40px 90px -28px rgba(12,28,58,.5),0 12px 30px -18px rgba(12,28,58,.35),inset 0 1px 0 rgba(255,255,255,.85);
animation:card-in .8s cubic-bezier(.18,.8,.22,1) both}
.fx{opacity:0;animation:fade-up .65s cubic-bezier(.16,.7,.3,1) forwards}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.loc{display:flex;align-items:center;gap:10px}
.loc .pin{width:21px;height:21px;flex:none;filter:drop-shadow(0 2px 4px rgba(20,40,80,.2))}
.loc h1{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.12;overflow-wrap:anywhere}
.sub{margin-top:7px;font-size:15px;font-weight:500;color:var(--muted)}
.sub b{font-weight:700;color:color-mix(in srgb,var(--ink) 82%,var(--muted))}
.badges{display:flex;gap:8px;flex:none;padding-top:5px}
.badge{font-size:12.5px;font-weight:700;letter-spacing:.04em;padding:7px 13px;border-radius:999px;background:rgba(23,37,60,.055);border:1px solid rgba(23,37,60,.07);color:var(--muted);white-space:nowrap}
.badge.rel{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:color-mix(in srgb,var(--accent) 26%,transparent);color:color-mix(in srgb,var(--accent) 60%,var(--ink))}
.hero{display:flex;justify-content:space-between;align-items:center;gap:40px;margin-top:24px;padding:0 6px}
.hero-left{flex:1;min-width:0}
.big{display:flex;align-items:stretch}
.big-num{font-size:132px;line-height:.86;font-weight:800;letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.big-num{background:linear-gradient(178deg,var(--ink) 30%,color-mix(in srgb,var(--ink) 52%,var(--accent)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}
.big-side{display:flex;flex-direction:column;justify-content:space-between;margin-left:12px;padding:10px 0 16px}
.big-unit{font-size:30px;font-weight:700;color:var(--muted)}
.big-tag{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--accent) 68%,var(--ink))}
.chips{display:flex;gap:10px;margin-top:22px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;background:rgba(255,255,255,.66);border:1px solid rgba(23,37,60,.08);box-shadow:0 4px 12px -6px rgba(20,40,80,.16);font-size:14.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.chip small{font-size:12.5px;font-weight:600;color:var(--muted)}
.chip .arr{font-weight:800}
.chip.hi .arr{color:var(--hi)}
.chip.lo .arr{color:var(--lo)}
.hero-right{display:flex;flex-direction:column;align-items:center;flex:none;min-width:240px}
.wicon{width:148px;height:148px;filter:drop-shadow(0 16px 24px rgba(18,40,80,.22))}
.cond{font-size:23px;font-weight:700;letter-spacing:-.01em;text-align:center;margin-top:2px}
.cond-sub{font-size:12.5px;font-weight:600;color:var(--muted);margin-top:4px;letter-spacing:.02em}
.rule{height:1px;margin:28px 0 18px;background:linear-gradient(90deg,transparent,rgba(23,37,60,.16) 18%,rgba(23,37,60,.16) 82%,transparent)}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;padding:0 4px}
.eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.chart-meta{font-size:12.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.hchart{display:block;width:100%;height:auto}
.hchart text{font-family:inherit;font-variant-numeric:tabular-nums}
.grid-g{opacity:0;animation:fadein .5s .15s ease forwards}
.grid{stroke:rgba(23,37,60,.1);stroke-width:1;stroke-dasharray:3 5}
.ylab{font-size:11px;font-weight:600;fill:#8794a9;text-anchor:end}
.area{opacity:0;animation:fadein .9s .85s ease forwards}
.line{stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.25s .4s cubic-bezier(.33,.62,.28,1) forwards}
.pts-g{opacity:0;animation:fadein .7s 1.05s ease forwards}
.vlabs-g{opacity:0;animation:fadein .7s 1.15s ease forwards}
.hlabs-g{opacity:0;animation:fadein .6s .5s ease forwards}
.pt{fill:#fff;stroke:var(--accent);stroke-width:1.8}
.ptmax{fill:var(--accent);stroke:#fff;stroke-width:2.2}
.ptmin{fill:var(--lo);stroke:#fff;stroke-width:2.2}
.vlab{font-size:11px;font-weight:600;fill:#4c5c74;text-anchor:middle}
.vmax{font-size:12.5px;font-weight:800;fill:color-mix(in srgb,var(--accent) 72%,var(--ink))}
.vmin{font-size:12.5px;font-weight:800;fill:var(--lo)}
.hlab{font-size:10.5px;font-weight:600;fill:#93a0b4;text-anchor:middle}
.hoff{opacity:.45}
.nowline{stroke:color-mix(in srgb,var(--accent) 55%,transparent);stroke-width:1.5;stroke-dasharray:4 5}
.nowtag rect{fill:var(--accent)}
.nowtag text{fill:#fff;font-size:10.5px;font-weight:800;text-anchor:middle;letter-spacing:.09em}
.cross{opacity:0;transition:opacity .18s ease;pointer-events:none}
#cl{stroke:rgba(23,37,60,.3);stroke-width:1.2;stroke-dasharray:3 4}
#cc{fill:var(--accent);stroke:#fff;stroke-width:2.4}
#tt rect{fill:rgba(18,30,52,.93)}
#tt text{fill:#fff;font-size:12.5px;font-weight:600;text-anchor:middle}
.nochart{display:flex;align-items:center;justify-content:center;min-height:180px;border:1.5px dashed rgba(23,37,60,.18);border-radius:18px;color:var(--muted);font-size:15px;font-weight:600}
.state{min-height:460px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px}
.spinner{width:46px;height:46px;border-radius:50%;border:3.5px solid rgba(23,37,60,.12);border-top-color:var(--accent);animation:spin .9s linear infinite}
.state-title{margin-top:22px;font-size:21px;font-weight:800}
.state-sub{margin-top:9px;font-size:15px;color:var(--muted);font-weight:500;max-width:560px;line-height:1.55}
.state-detail{margin-top:14px;font-size:12.5px;color:#8c99ad;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:rgba(23,37,60,.05);padding:8px 14px;border-radius:9px;max-width:640px;overflow-wrap:anywhere}
.err-icon{width:120px;height:120px;filter:drop-shadow(0 12px 20px rgba(20,40,80,.15))}
.btn{appearance:none;border:0;cursor:pointer;margin-top:22px;padding:12px 24px;border-radius:13px;font:inherit;font-weight:700;font-size:15px;color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 90%,#fff),var(--accent));box-shadow:0 10px 22px -8px color-mix(in srgb,var(--accent) 70%,transparent);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 26px -8px color-mix(in srgb,var(--accent) 75%,transparent)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 40%,transparent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rays,.cloud-front,.drop,.flake,.bolt,.fl{transform-box:fill-box;transform-origin:center}
.rays{animation:spin 48s linear infinite}
.cloud-front{animation:bob 6s ease-in-out infinite}
.drop{animation:fall 1.6s linear infinite}
.flake{animation:drift 3s linear infinite}
.bolt{animation:flicker 5s linear infinite}
.fl{animation:slidex 5.5s ease-in-out infinite}
.f2{animation-delay:-2.6s}
.f3{animation-delay:-1.2s}
@keyframes card-in{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes fall{0%{transform:translateY(-6px);opacity:0}25%{opacity:1}80%{opacity:.9}100%{transform:translateY(12px);opacity:0}}
@keyframes drift{0%{transform:translateY(-4px) rotate(0deg);opacity:0}20%{opacity:1}100%{transform:translateY(12px) rotate(60deg);opacity:0}}
@keyframes flicker{0%,86%,92%,100%{opacity:1}89%{opacity:.2}95%{opacity:.6}}
@keyframes slidex{0%,100%{transform:translateX(-5px)}50%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
.fx,.grid-g,.area,.pts-g,.vlabs-g,.hlabs-g{opacity:1!important}
.line{stroke-dasharray:none!important;stroke-dashoffset:0!important}
}
</style>
</head>
<body>
<div class="scene">
<div class="blob blob-a"></div>
<div class="blob blob-b"></div>
<main class="card" id="card" aria-live="polite">
<noscript><div class="state"><p class="state-title">JavaScript is required</p><p class="state-sub">Enable JavaScript to view the weather card.</p></div></noscript>
</main>
</div>
<script>
(function(){
'use strict';
var $card=document.getElementById('card');
var params=new URLSearchParams(location.search);
function num(v,d){var n=parseFloat(v);return Number.isFinite(n)?n:d}
var lat=num(params.get('lat'),52.52);
var lon=num(params.get('lon'),13.405);
var rawName=(params.get('name')||'').trim();
var name=rawName?rawName.slice(0,60):'Berlin';
var todayISO=new Date().toISOString().slice(0,10);
var dRaw=(params.get('date')||'').trim();
var dateISO=/^\d{4}-\d{2}-\d{2}$/.test(dRaw)?dRaw:todayISO;
var dObj=new Date(dateISO+'T00:00:00Z');
if(isNaN(dObj)||dObj.toISOString().slice(0,10)!==dateISO){dateISO=todayISO;dObj=new Date(dateISO+'T00:00:00Z')}
var isPast=dateISO<todayISO;
var api=isPast?'/api/om/archive':'/api/om/forecast';
var url=api+'?latitude='+lat+'&longitude='+lon+'&daily=temperature_2m_max,temperature_2m_min,weather_code&hourly=temperature_2m&timezone=UTC&temperature_unit=celsius&start_date='+dateISO+'&end_date='+dateISO;
var dateLong=(function(){
var wd=new Intl.DateTimeFormat('en-GB',{weekday:'long',timeZone:'UTC'}).format(dObj);
var dm=new Intl.DateTimeFormat('en-GB',{day:'numeric',month:'long',year:'numeric',timeZone:'UTC'}).format(dObj);
return wd+', '+dm;
})();
function esc(s){return String(s).replace(/[&<>"']/g,function(c){return{'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]})}
function rnd(v){var r=Math.round(v);return r===0?0:r}
function fmt1(v){var r=Math.round(v*10)/10;if(r===0)r=0;var s=r.toFixed(1);return s.slice(-2)==='.0'?s.slice(0,-2):s}
function fmtT(v){var r=Math.round(v*10)/10;if(r===0)r=0;return r.toFixed(1)}
function tick(v,span){if(span<4)return fmt1(v);return String(rnd(v))}
function coordsLabel(){return Math.abs(lat).toFixed(2)+'\u00B0 '+(lat>=0?'N':'S')+', '+Math.abs(lon).toFixed(2)+'\u00B0 '+(lon>=0?'E':'W')}
function relLabel(){var d=Math.round((Date.parse(dateISO)-Date.parse(todayISO))/864e5);
return d===0?'Today':d===-1?'Yesterday':d===1?'Tomorrow':d<0?(-d)+' days ago':'In '+d+' days'}
var WMO_MAP={0:['Clear sky','sun','clear'],1:['Mainly clear','sun','clear'],2:['Partly cloudy','partly','partly'],3:['Overcast','cloud','cloudy'],
45:['Fog','fog','fog'],48:['Depositing rime fog','fog','fog'],
51:['Light drizzle','drizzle','rain'],53:['Moderate drizzle','drizzle','rain'],55:['Dense drizzle','drizzle','rain'],
56:['Light freezing drizzle','drizzle','snow'],57:['Dense freezing drizzle','drizzle','snow'],
61:['Slight rain','rain','rain'],63:['Moderate rain','rain','rain'],65:['Heavy rain','rain','rain'],
66:['Light freezing rain','rain','snow'],67:['Heavy freezing rain','rain','snow'],
71:['Slight snowfall','snow','snow'],73:['Moderate snowfall','snow','snow'],75:['Heavy snowfall','snow','snow'],77:['Snow grains','snow','snow'],
80:['Slight rain showers','rain','rain'],81:['Moderate rain showers','rain','rain'],82:['Violent rain showers','rain','rain'],
85:['Slight snow showers','snow','snow'],86:['Heavy snow showers','snow','snow'],
95:['Thunderstorm','thunder','thunder'],96:['Thunderstorm with hail','thunder','thunder'],99:['Thunderstorm with heavy hail','thunder','thunder']};
function metaFor(code){var e=(code!=null)&&WMO_MAP[code];return e?{label:e[0],icon:e[1],theme:e[2]}:{label:'Unknown conditions',icon:'cloud',theme:'cloudy'}}
var CLOUD='M26 66A17 17 0 0 1 32 33A26 26 0 0 1 82 30A18 18 0 0 1 95 66Z';
var PIN='<svg class="pin" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21.6C10.4 20.2 5 15.2 5 10.2 5 6.2 8.1 3 12 3s7 3.2 7 7.2c0 5-5.4 10-7 11.4Z" style="fill:var(--accent)"/><circle cx="12" cy="10" r="2.9" fill="#fff"/></svg>';
var ERRICON='<svg class="err-icon" viewBox="0 0 160 160" aria-hidden="true"><defs><linearGradient id="ecg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#eef2f7"/><stop offset="1" stop-color="#c3cfdd"/></linearGradient></defs><path d="'+CLOUD+'" transform="translate(20,30) scale(1.05)" fill="url(#ecg)"/><circle cx="112" cy="106" r="21" fill="#e0653f"/><rect x="109.4" y="93.5" width="5.2" height="16.5" rx="2.6" fill="#fff"/><circle cx="112" cy="116.5" r="3.1" fill="#fff"/></svg>';
function wrap(inner,label){return '<svg class="wicon" viewBox="0 0 160 160" role="img" aria-label="'+label+'">'+inner+'</svg>'}
function rays(cx,cy,r1,r2,w,color){
var s='<g class="rays" stroke="'+color+'" stroke-width="'+w+'" stroke-linecap="round">';
for(var k=0;k<8;k++){var a=k*Math.PI/4,c=Math.cos(a),sn=Math.sin(a);
s+='<line x1="'+(cx+c*r1).toFixed(1)+'" y1="'+(cy+sn*r1).toFixed(1)+'" x2="'+(cx+c*r2).toFixed(1)+'" y2="'+(cy+sn*r2).toFixed(1)+'"/>'}
return s+'</g>'}
function flake(cx,cy,r,delay){
var s='<g class="flake" style="animation-delay:'+delay+'s" stroke="#86b4e4" stroke-width="3.2" stroke-linecap="round">';
for(var k=0;k<3;k++){var a=k*Math.PI/3,c=Math.cos(a),sn=Math.sin(a);
s+='<line x1="'+(cx-c*r).toFixed(1)+'" y1="'+(cy-sn*r).toFixed(1)+'" x2="'+(cx+c*r).toFixed(1)+'" y2="'+(cy+sn*r).toFixed(1)+'"/>'}
return s+'</g>'}
function grad(id,a,b){return '<linearGradient id="'+id+'" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="'+a+'"/><stop offset="1" stop-color="'+b+'"/></linearGradient>'}
var ICONS={
sun:function(l){return wrap('<defs><radialGradient id="sgl" cx="50%" cy="50%" r="50%"><stop offset="0" stop-color="#ffd76a" stop-opacity=".85"/><stop offset="1" stop-color="#ffd76a" stop-opacity="0"/></radialGradient>'+grad('sbd','#ffe289','#ff9d2e')+'</defs><circle cx="80" cy="80" r="58" fill="url(#sgl)"/>'+rays(80,80,44,57,7,'#ffb43a')+'<circle cx="80" cy="80" r="30" fill="url(#sbd)"/>',l)},
partly:function(l){return wrap('<defs>'+grad('psb','#ffe289','#ffa23a')+grad('pcg','#ffffff','#ccd9e8')+'</defs>'+rays(58,48,29,40,5.5,'#ffbd4a')+'<circle cx="58" cy="48" r="22" fill="url(#psb)"/><g class="cloud-front"><path d="'+CLOUD+'" transform="translate(26,56) scale(1.05)" fill="url(#pcg)"/></g>',l)},
cloud:function(l){return wrap('<defs>'+grad('cg1','#ffffff','#c9d6e5')+grad('cg2','#e9eef5','#aebdd0')+'</defs><path d="'+CLOUD+'" transform="translate(52,26) scale(.66)" fill="url(#cg2)" opacity=".9"/><g class="cloud-front"><path d="'+CLOUD+'" transform="translate(16,50) scale(1.1)" fill="url(#cg1)"/></g>',l)},
fog:function(l){return wrap('<defs>'+grad('fcg','#ffffff','#ccd7e2')+'</defs><path d="'+CLOUD+'" transform="translate(24,18) scale(.92)" fill="url(#fcg)"/><g stroke-linecap="round"><line class="fl" x1="38" y1="102" x2="124" y2="102" stroke="#a2b4c4" stroke-width="8"/><line class="fl f2" x1="28" y1="119" x2="104" y2="119" stroke="#b4c4d3" stroke-width="8"/><line class="fl f3" x1="50" y1="136" x2="130" y2="136" stroke="#c6d3e0" stroke-width="8"/></g>',l)},
drizzle:function(l){var d=[[58,102],[82,102],[106,102],[70,122],[94,122]].map(function(p,i){return '<circle class="drop" style="animation-delay:'+(i*0.33).toFixed(2)+'s" cx="'+p[0]+'" cy="'+p[1]+'" r="3.4"/>'}).join('');
return wrap('<defs>'+grad('dcg','#ffffff','#c9d6e5')+'</defs><g class="cloud-front"><path d="'+CLOUD+'" transform="translate(22,20) scale(1.02)" fill="url(#dcg)"/></g><g fill="#57a7ee">'+d+'</g>',l)},
rain:function(l){var d=[[60,100],[84,100],[108,100]].map(function(p,i){return '<line class="drop" style="animation-delay:'+(i*0.5).toFixed(1)+'s" x1="'+p[0]+'" y1="'+p[1]+'" x2="'+(p[0]-7)+'" y2="'+(p[1]+18)+'"/>'}).join('');
return wrap('<defs>'+grad('rcg','#f7fafd','#b9c8da')+'</defs><g class="cloud-front"><path d="'+CLOUD+'" transform="translate(22,20) scale(1.02)" fill="url(#rcg)"/></g><g stroke="#3f97ec" stroke-width="6.5" stroke-linecap="round">'+d+'</g>',l)},
snow:function(l){return wrap('<defs>'+grad('scg','#ffffff','#ccdaea')+'</defs><g class="cloud-front"><path d="'+CLOUD+'" transform="translate(22,18) scale(1.0)" fill="url(#scg)"/></g>'+flake(54,104,8,0)+flake(82,120,8,0.9)+flake(110,102,8,1.7),l)},
thunder:function(l){return wrap('<defs>'+grad('tcg','#e9eef6','#9fb0c6')+grad('tbg','#ffd54f','#ff9d2e')+'</defs><g class="cloud-front"><path d="'+CLOUD+'" transform="translate(20,18) scale(1.05)" fill="url(#tcg)"/></g><path class="bolt" d="M84 88 62 122 78 122 68 150 104 108 86 108 98 88 Z" fill="url(#tbg)"/>',l)}
};
function smooth(P){
if(P.length<2)return '';
if(P.length===2)return 'M'+P[0][0]+' '+P[0][1]+'L'+P[1][0]+' '+P[1][1];
var d='M'+P[0][0]+' '+P[0][1];
for(var i=0;i<P.length-1;i++){
var p0=P[i-1]||P[i],p1=P[i],p2=P[i+1],p3=P[i+2]||p2;
d+='C'+(p1[0]+(p2[0]-p0[0])/6).toFixed(1)+' '+(p1[1]+(p2[1]-p0[1])/6).toFixed(1)+' '
+(p2[0]-(p3[0]-p1[0])/6).toFixed(1)+' '+(p2[1]-(p3[1]-p1[1])/6).toFixed(1)+' '+p2[0]+' '+p2[1];
}
return d;
}
function buildChart(hoursArr){
var byHour=new Array(24).fill(null);
hoursArr.forEach(function(p){if(p.h>=0&&p.h<24&&p.v!=null)byHour[p.h]=p.v});
var have=byHour.filter(function(v){return v!=null}).length;
if(have<2)return {html:'<div class="nochart">Hourly temperatures are unavailable for this date.</div>',meta:null,have:have};
var W=1000,H=260,L=46,R=14,T=36,B=34,yB=H-B;
var vals=byHour.filter(function(v){return v!=null});
var lo=Math.min.apply(null,vals),hi=Math.max.apply(null,vals);
var span=hi-lo;
if(span<2){var c=(lo+hi)/2;lo=c-1;hi=c+1;span=2}
var pl=lo-span*0.16,ph=hi+span*0.24,pr=ph-pl;
function X(h){return L+h/23*(W-L-R)}
function Y(v){return T+(ph-v)/pr*(yB-T)}
var pts=[];
byHour.forEach(function(v,h){if(v!=null)pts.push({h:h,v:v,x:+X(h).toFixed(1),y:+Y(v).toFixed(1)})});
var grid='',glab='';
for(var k=0;k<4;k++){var gv=lo+span*k/3,gy=Y(gv).toFixed(1);
grid+='<line class="grid" x1="'+L+'" x2="'+(W-R)+'" y1="'+gy+'" y2="'+gy+'"/>';
glab+='<text class="ylab" x="'+(L-9)+'" y="'+(+gy+3.6).toFixed(1)+'">'+tick(gv,span)+'\u00B0</text>'}
var line=smooth(pts.map(function(p){return [p.x,p.y]}));
var area=line+'L'+pts[pts.length-1].x+' '+yB+'L'+pts[0].x+' '+yB+'Z';
var maxI=0,minI=0;
pts.forEach(function(p,i){if(p.v>pts[maxI].v)maxI=i;if(p.v<pts[minI].v)minI=i});
var dots='',vlabs='';
pts.forEach(function(p,i){
if(i===maxI)dots+='<circle class="pt ptmax" cx="'+p.x+'" cy="'+p.y+'" r="4.6"/>';
else if(i===minI)dots+='<circle class="pt ptmin" cx="'+p.x+'" cy="'+p.y+'" r="4.2"/>';
else dots+='<circle class="pt" cx="'+p.x+'" cy="'+p.y+'" r="2.6"/>';
var cls=i===maxI?'vlab vmax':i===minI?'vlab vmin':'vlab';
vlabs+='<text class="'+cls+'" x="'+p.x+'" y="'+(p.y-11).toFixed(1)+'">'+rnd(p.v)+'\u00B0</text>';
});
var hlabs='';
for(var h=0;h<24;h++){hlabs+='<text class="hlab'+(byHour[h]==null?' hoff':'')+'" x="'+X(h).toFixed(1)+'" y="'+(H-10)+'">'+String(h).padStart(2,'0')+'</text>'}
var now='';
if(dateISO===todayISO){
var t=new Date(),fh=Math.min(23,t.getUTCHours()+t.getUTCMinutes()/60),nx=X(fh).toFixed(1);
now='<line class="nowline" x1="'+nx+'" x2="'+nx+'" y1="24" y2="'+yB+'"/>'+
'<g class="nowtag" transform="translate('+nx+',2)"><rect x="-25" y="0" width="50" height="19" rx="9.5"/><text x="0" y="13.5">NOW</text></g>';
}
var html='<svg id="hchart" class="hchart" viewBox="0 0 '+W+' '+H+'" aria-label="Hourly temperatures in degrees Celsius">'+
'<defs><linearGradient id="areag" x1="0" y1="0" x2="0" y2="1">'+
'<stop offset="0" style="stop-color:var(--accent);stop-opacity:.32"/>'+
'<stop offset="1" style="stop-color:var(--accent);stop-opacity:0"/></linearGradient>'+
'<linearGradient id="lineg" x1="0" y1="0" x2="1" y2="0">'+
'<stop offset="0" style="stop-color:var(--accent2)"/><stop offset="1" style="stop-color:var(--accent)"/></linearGradient></defs>'+
'<g class="grid-g">'+grid+glab+'</g>'+
'<path class="area" d="'+area+'" fill="url(#areag)"/>'+
'<path class="line" d="'+line+'" pathLength="1" fill="none" stroke="url(#lineg)"/>'+
now+
'<g class="pts-g">'+dots+'</g>'+
'<g class="vlabs-g">'+vlabs+'</g>'+
'<g class="hlabs-g">'+hlabs+'</g>'+
'<g id="cross" class="cross"><line id="cl" x1="0" x2="0" y1="'+(T-6)+'" y2="'+yB+'"/><circle id="cc" r="5.2"/>'+
'<g id="tt"><rect x="-63" y="0" width="126" height="26" rx="8"/><text id="ttx" x="0" y="17"></text></g></g>'+
'<rect id="hit" x="'+(L-10)+'" y="0" width="'+(W-L-R+20)+'" height="'+H+'" fill="rgba(0,0,0,0)"/>'+
'</svg>';
return {html:html,meta:{pts:pts},have:have};
}
function wireChart(meta){
var svg=document.getElementById('hchart');if(!svg)return;
var cross=document.getElementById('cross'),cl=document.getElementById('cl'),cc=document.getElementById('cc'),
tt=document.getElementById('tt'),ttx=document.getElementById('ttx'),hit=document.getElementById('hit');
hit.addEventListener('mousemove',function(e){
var r=svg.getBoundingClientRect();if(!r.width)return;
var vx=(e.clientX-r.left)/r.width*1000,best=null,bd=Infinity;
for(var i=0;i<meta.pts.length;i++){var p=meta.pts[i],d=Math.abs(p.x-vx);if(d<bd){bd=d;best=p}}
if(!best)return;
cl.setAttribute('x1',best.x);cl.setAttribute('x2',best.x);
cc.setAttribute('cx',best.x);cc.setAttribute('cy',best.y);
var tx=Math.max(112,Math.min(920,best.x));
tt.setAttribute('transform','translate('+tx+',6)');
ttx.textContent=String(best.h).padStart(2,'0')+':00 \u00B7 '+fmtT(best.v)+' \u00B0C';
cross.style.opacity='1';
});
hit.addEventListener('mouseleave',function(){cross.style.opacity='0'});
}
function renderLoading(){
$card.innerHTML='<div class="state" role="status"><div class="spinner" aria-hidden="true"></div>'+
'<p class="state-title">Fetching weather\u2026</p>'+
'<p class="state-sub">'+esc(name)+' \u00B7 '+dateLong+'</p></div>';
}
function renderError(msg){
document.body.dataset.theme='fog';
$card.innerHTML='<div class="state" role="alert">'+ERRICON+
'<p class="state-title">Weather data unavailable</p>'+
'<p class="state-sub">We couldn\u2019t load the '+(isPast?'historical':'forecast')+' weather for <strong>'+esc(name)+'</strong> on '+dateLong+'. Please try again.</p>'+
'<p class="state-detail">'+esc(String(msg))+'</p>'+
'<button class="btn" onclick="location.reload()">Try again</button></div>';
}
function renderCard(w){
var m=metaFor(w.code);
document.body.dataset.theme=m.theme;
var c=buildChart(w.hours);
$card.innerHTML=
'<header class="top fx" style="animation-delay:.04s"><div>'+
'<div class="loc">'+PIN+'<h1>'+esc(name)+'</h1></div>'+
'<p class="sub"><b>'+dateLong+'</b> \u00B7 '+coordsLabel()+'</p></div>'+
'<div class="badges"><span class="badge rel">'+relLabel()+'</span><span class="badge">UTC \u00B7 \u00B0C</span></div>'+
'</header>'+
'<section class="hero">'+
'<div class="hero-left fx" style="animation-delay:.12s">'+
'<div class="big"><span class="big-num">'+rnd(w.tmax)+'</span>'+
'<span class="big-side"><span class="big-unit">\u00B0C</span><span class="big-tag">Daily high</span></span></div>'+
'<div class="chips">'+
'<span class="chip hi"><span class="arr">\u2191</span><small>High</small> '+fmt1(w.tmax)+'\u00B0</span>'+
'<span class="chip lo"><span class="arr">\u2193</span><small>Low</small> '+fmt1(w.tmin)+'\u00B0</span>'+
'</div></div>'+
'<div class="hero-right fx" style="animation-delay:.2s">'+ICONS[m.icon](m.label)+
'<p class="cond">'+m.label+'</p>'+
'<p class="cond-sub">'+(w.code!=null?'WMO '+w.code+' \u00B7 ':'')+(isPast?'Archive data':'Forecast data')+'</p></div>'+
'</section>'+
'<div class="rule fx" style="animation-delay:.26s"></div>'+
'<section class="chart-sec fx" style="animation-delay:.3s">'+
'<div class="chart-head"><span class="eyebrow">Hourly temperature</span>'+
'<span class="chart-meta">'+(c.have===24?'00\u201323 UTC':c.have+' of 24 hours \u00B7 UTC')+'</span></div>'+c.html+
'</section>'+
'<p class="sr-only">'+esc(name)+' on '+dateLong+': '+m.label+', high '+fmt1(w.tmax)+' and low '+fmt1(w.tmin)+' degrees Celsius.</p>';
if(c.meta)wireChart(c.meta);
document.title=name+' \u2014 Weather, '+dateISO;
}
function extract(data){
var d=data.daily||{};
var idx=Array.isArray(d.time)?d.time.indexOf(dateISO):-1;
var i=idx>=0?idx:0;
var tmax=Array.isArray(d.temperature_2m_max)?d.temperature_2m_max[i]:null;
var tmin=Array.isArray(d.temperature_2m_min)?d.temperature_2m_min[i]:null;
var code=Array.isArray(d.weather_code)?d.weather_code[i]:null;
if(typeof tmax!=='number'||typeof tmin!=='number')throw new Error('The response did not include daily temperatures for '+dateISO+'.');
var h=data.hourly||{};
var times=Array.isArray(h.time)?h.time:[],temps=Array.isArray(h.temperature_2m)?h.temperature_2m:[];
var hours=[];
times.forEach(function(t,j){
if(typeof t==='string'&&t.indexOf(dateISO)===0){
var hh=parseInt(t.slice(11,13),10),v=temps[j];
if(Number.isFinite(hh))hours.push({h:hh,v:(typeof v==='number'&&isFinite(v))?v:null});
}
});
return {tmax:tmax,tmin:tmin,code:(typeof code==='number'?code:null),hours:hours};
}
function load(){
renderLoading();
var opts={};
if(typeof AbortSignal!=='undefined'&&AbortSignal.timeout)opts.signal=AbortSignal.timeout(12000);
fetch(url,opts).then(function(res){
if(!res.ok)throw new Error('The weather service responded with HTTP '+res.status+' for '+api+'.');
return res.json();
}).then(function(data){
if(data&&data.error)throw new Error(data.reason||'The weather service returned an error.');
renderCard(extract(data));
}).catch(function(err){
var msg=err&&err.name==='TimeoutError'?'The request timed out after 12 seconds.':(err&&err.message)||'Network request failed.';
renderError(msg);
});
}
load();
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 29,112 | html / css / js | 589 / 11,090 / 17,433 |
|---|---|---|---|
| dom nodes | 17 | dom depth | 7 |
| css rules | 132 | js present | yes |
| brightness | 191.3 | contrast | 52.3 |
| colorfulness | 35.0 | whitespace | 61.5% |
This slot's telemetry
| prompt tokens | 2 | completion tokens | 72,069 |
|---|---|---|---|
| total tokens | 72,071 | wall | 894.8 s |
| cost | — | request id | — |
config.json579 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "claude-fable-5-eff-max--cli--cursor-xl--dev",
"effort": "max",
"family": "claude",
"m": {
"min": 2,
"q": 2
},
"model_id": "claude-fable-5",
"protocol": "cli",
"served_model": "claude-fable-5-max",
"telemetry": {
"completion_tokens": 212833,
"cost_usd": null,
"prompt_tokens": 8,
"total_tokens": 212841,
"wall_ms": 2625968
},
"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-fable-5-eff-max--cli--cursor-xl--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-08-13T11:39:38.086624+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T11:29:28.489605+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-13T11:54:36.787657+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T11:39:41.892340+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-13T12:06:49.133632+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T11:54:41.312802+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-08-13T12:13:26.635825+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T12:06:52.966813+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
}
}
}