claude-sonnet-5 @ xhigh · cursor-xl
cursor-xlxhigh
- config
- claude-sonnet-5-eff-xhigh--cli--cursor-xl--dev
- batch
- 2026-07-19--unified
- transport
- cursor-agent-cli-isolated-home
- protocol
- cli · plan
- served model
- claude-sonnet-5-xhigh
- 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-opus-4-8 @xhigh · cursor0.72claude-opus-4-7-thinking @xhigh · cursor0.72claude-opus-4-8-thinking @medium · cursor0.71claude-opus-4-8-thinking @max · cursor0.71claude-sonnet-5-thinking @medium · cursor-xl0.70farthest
north-mini-code-free · api0.48grok-4.3 · api0.48grok-4.3 @low · api0.49grok-4.3 @medium · api0.49deepseek-v4-pro · opencode0.51within 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 tempmismatchshown: 13.4
- min tempmismatchshown: 52.52
- 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, initial-scale=1">
<link rel="icon" href="data:,">
<title>Weather</title>
<style>
:root{
--g1:#3a4a63; --g2:#2c3a50; --g3:#232c3d; --accent:#9db6d4;
--card-bg: rgba(255,255,255,0.13);
--card-border: rgba(255,255,255,0.32);
--ink:#ffffff;
}
*{ box-sizing:border-box; }
html,body{
margin:0; padding:0; width:100%; height:100%;
font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color:var(--ink);
overflow:hidden;
}
body{
display:flex; align-items:center; justify-content:center;
min-height:100vh; position:relative;
}
.bg-base{
position:fixed; inset:0; z-index:-3;
background: linear-gradient(160deg, #3a4a63 0%, #2c3a50 55%, #232c3d 100%);
}
.bg-theme{
position:fixed; inset:0; z-index:-2; opacity:0;
transition: opacity 1.2s ease;
background: linear-gradient(160deg, var(--g1) 0%, var(--g2) 55%, var(--g3) 100%);
}
.bg-theme.show{ opacity:1; }
.bg-decor{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.glow{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; }
.glow-a{ width:520px; height:520px; top:-180px; left:-140px; background: var(--accent); }
.glow-b{ width:460px; height:460px; bottom:-200px; right:-120px; background: var(--accent); opacity:.35; }
.drift-cloud{
position:absolute; border-radius:50%;
background: rgba(255,255,255,0.10);
filter: blur(2px);
animation: drift linear infinite;
}
@keyframes drift{
from{ transform: translateX(-10vw); }
to{ transform: translateX(110vw); }
}
.drop{
position:absolute; top:-40px; width:2px; height:22px; border-radius:2px;
background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(210,230,255,.75));
animation: fallRain linear infinite;
}
@keyframes fallRain{
from{ transform: translateY(-40px); opacity:0; }
10%{ opacity:.9; }
to{ transform: translateY(108vh); opacity:.2; }
}
.flake{
position:absolute; top:-20px; border-radius:50%;
background: rgba(255,255,255,.85);
animation: fallSnow linear infinite;
}
@keyframes fallSnow{
from{ transform: translate(0,-20px) rotate(0deg); opacity:0; }
10%{ opacity:.95; }
to{ transform: translate(18px, 106vh) rotate(200deg); opacity:.25; }
}
.flash{
position:fixed; inset:0; z-index:5; background:#eaf1ff; opacity:0; pointer-events:none;
transition: opacity .12s ease-out;
}
.flash.on{ opacity:.28; }
.card{
position:relative;
width:1040px;
padding:46px 54px 34px;
border-radius:32px;
background: var(--card-bg);
border:1px solid var(--card-border);
-webkit-backdrop-filter: blur(26px) saturate(160%);
backdrop-filter: blur(26px) saturate(160%);
box-shadow: 0 40px 90px -25px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18);
opacity:0; transform: translateY(14px) scale(.99);
animation: cardIn .7s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes cardIn{ to{ opacity:1; transform:translateY(0) scale(1); } }
.card::before{
content:''; position:absolute; inset:0; border-radius:32px; pointer-events:none;
background: linear-gradient(120deg, rgba(255,255,255,.16), rgba(255,255,255,0) 40%);
}
#stage{ position:relative; }
/* ---------- Loading state ---------- */
.loading{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:120px 0; }
.spinner{ width:52px; height:52px; border-radius:50%; border:3px solid rgba(255,255,255,.22); border-top-color:rgba(255,255,255,.85); animation: spin 1s linear infinite; }
.loading p{ margin:0; font-size:15px; letter-spacing:.4px; opacity:.75; }
/* ---------- Error state ---------- */
.error-box{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:96px 60px; }
.error-box svg{ width:64px; height:64px; opacity:.9; }
.error-box h2{ margin:6px 0 0; font-size:24px; font-weight:600; }
.error-box p{ margin:0; font-size:14.5px; line-height:1.55; opacity:.72; max-width:480px; }
.retry-btn{
margin-top:10px; padding:11px 26px; border-radius:999px; border:1px solid rgba(255,255,255,.4);
background: rgba(255,255,255,.14); color:#fff; font-size:14px; font-weight:600; letter-spacing:.3px;
cursor:pointer; transition: background .2s ease, transform .15s ease;
}
.retry-btn:hover{ background: rgba(255,255,255,.24); transform: translateY(-1px); }
/* ---------- Content state ---------- */
.content{ display:flex; flex-direction:column; gap:26px; }
.top-row{ display:flex; justify-content:space-between; align-items:flex-start; }
.location h1{ margin:0; font-size:32px; font-weight:700; letter-spacing:-.3px; }
.location .coords{ margin-top:7px; font-size:12.5px; letter-spacing:1.1px; text-transform:uppercase; opacity:.62; font-weight:500; }
.date-block{ text-align:right; }
.date-block .rel-pill{
display:inline-block; margin-bottom:8px; padding:5px 13px; border-radius:999px;
background: rgba(255,255,255,.16); font-size:11.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
}
.date-block .full-date{ font-size:19px; font-weight:600; letter-spacing:-.1px; }
.hero{ display:flex; align-items:center; gap:36px; padding:6px 0 4px; }
.hero-icon-wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; flex-shrink:0; }
.hero-icon-wrap svg{ width:132px; height:132px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.28)); }
.condition-pill{
display:inline-flex; align-items:center; padding:7px 16px; border-radius:999px;
background: rgba(255,255,255,.18); font-size:13.5px; font-weight:600; letter-spacing:.2px; white-space:nowrap;
}
.hero-divider{ width:1px; align-self:stretch; background: rgba(255,255,255,.22); margin: 4px 0; }
.stats-row{ display:flex; gap:56px; margin-left:auto; padding-right:8px; }
.stat{ text-align:center; min-width:96px; }
.stat .stat-label{ font-size:12px; text-transform:uppercase; letter-spacing:1.6px; opacity:.65; font-weight:600; }
.stat .stat-value{ font-size:58px; font-weight:200; line-height:1; margin-top:10px; letter-spacing:-1px; }
.stat .stat-value sup{ font-size:26px; font-weight:300; opacity:.8; top:-.5em; }
.stat.high .stat-value{ background: linear-gradient(180deg,#fff,rgba(255,255,255,.75)); -webkit-background-clip:text; background-clip:text; }
.hourly{ margin-top:2px; }
.hourly-header{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; }
.hourly-header h2{ margin:0; font-size:13.5px; text-transform:uppercase; letter-spacing:1.6px; font-weight:700; opacity:.75; }
.hourly-header .hint{ font-size:11.5px; opacity:.5; font-weight:500; }
.chart-wrap{ position:relative; width:100%; }
.chart-wrap svg{ width:100%; height:196px; display:block; overflow:visible; }
.hover-dot, .hover-line{ opacity:0; transition: opacity .12s ease; }
.chart-wrap.active .hover-dot, .chart-wrap.active .hover-line{ opacity:1; }
.chart-tooltip{
position:absolute; top:0; left:0; pointer-events:none; opacity:0; transition: opacity .12s ease;
background: rgba(20,26,36,.88); border:1px solid rgba(255,255,255,.22); border-radius:10px;
padding:6px 11px; font-size:12.5px; font-weight:600; white-space:nowrap; transform: translate(-50%,-120%);
box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.chart-tooltip.show{ opacity:1; }
.chart-tooltip .tt-time{ opacity:.65; font-weight:500; margin-right:6px; }
.footer-row{ display:flex; justify-content:space-between; align-items:center; margin-top:6px; padding-top:14px; border-top:1px solid rgba(255,255,255,.14); }
.footer-row span{ font-size:11.5px; opacity:.5; letter-spacing:.3px; }
@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes floaty{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }
.icon-sun .rays{ transform-origin: 60px 60px; animation: spin 26s linear infinite; }
.icon-anim{ animation: floaty 5s ease-in-out infinite; }
.fog-line{ animation: fogDrift 6s ease-in-out infinite; }
@keyframes fogDrift{ 0%,100%{ opacity:.55; transform: translateX(0); } 50%{ opacity:.9; transform: translateX(4px); } }
.bolt{ animation: boltFlicker 3.2s ease-in-out infinite; }
@keyframes boltFlicker{ 0%,40%,100%{ opacity:1; } 45%{ opacity:.3; } 50%{ opacity:1; } 55%{ opacity:.4; } 60%{ opacity:1; } }
</style>
</head>
<body>
<div class="bg-base"></div>
<div class="bg-theme" id="bgTheme"></div>
<div class="bg-decor" id="bgDecor"></div>
<div class="flash" id="flash"></div>
<main class="card" id="card">
<div id="stage"></div>
</main>
<script>
(function(){
'use strict';
/* ============ URL params & defaults ============ */
var params = new URLSearchParams(window.location.search);
var DEFAULTS = { lat: 52.52, lon: 13.405, name: 'Berlin' };
function pad2(n){ return String(n).padStart(2,'0'); }
function todayUTC(){
var d = new Date();
return d.getUTCFullYear() + '-' + pad2(d.getUTCMonth()+1) + '-' + pad2(d.getUTCDate());
}
function parseCoord(v, fallback){
if(v === null || v === '') return fallback;
var n = parseFloat(v);
return Number.isFinite(n) ? n : fallback;
}
var rawDate = params.get('date');
var dateOk = !!(rawDate && /^\d{4}-\d{2}-\d{2}$/.test(rawDate) && !isNaN(Date.parse(rawDate + 'T00:00:00Z')));
var state = {
lat: parseCoord(params.get('lat'), DEFAULTS.lat),
lon: parseCoord(params.get('lon'), DEFAULTS.lon),
name: (function(){ var n = params.get('name'); return (n && n.trim()) ? n.trim() : DEFAULTS.name; })(),
date: dateOk ? rawDate : todayUTC()
};
document.title = state.name + ' \u00B7 Weather';
/* ============ Weather code catalogue ============ */
var WEATHER_CODES = {
0:{label:'Clear Sky', cat:'clear'}, 1:{label:'Mainly Clear', cat:'clear'},
2:{label:'Partly Cloudy', cat:'partly'}, 3:{label:'Overcast', cat:'cloudy'},
45:{label:'Fog', cat:'fog'}, 48:{label:'Rime Fog', cat:'fog'},
51:{label:'Light Drizzle', cat:'rain'}, 53:{label:'Drizzle', cat:'rain'}, 55:{label:'Dense Drizzle', cat:'rain'},
56:{label:'Freezing Drizzle', cat:'rain'}, 57:{label:'Dense Freezing Drizzle', cat:'rain'},
61:{label:'Light Rain', cat:'rain'}, 63:{label:'Rain', cat:'rain'}, 65:{label:'Heavy Rain', cat:'rain'},
66:{label:'Freezing Rain', cat:'rain'}, 67:{label:'Heavy Freezing Rain', cat:'rain'},
71:{label:'Light Snow', cat:'snow'}, 73:{label:'Snow', cat:'snow'}, 75:{label:'Heavy Snow', cat:'snow'},
77:{label:'Snow Grains', cat:'snow'},
80:{label:'Light Rain Showers', cat:'rain'}, 81:{label:'Rain Showers', cat:'rain'}, 82:{label:'Violent Rain Showers', cat:'rain'},
85:{label:'Snow Showers', cat:'snow'}, 86:{label:'Heavy Snow Showers', cat:'snow'},
95:{label:'Thunderstorm', cat:'thunder'}, 96:{label:'Thunderstorm w/ Hail', cat:'thunder'}, 99:{label:'Severe Thunderstorm', cat:'thunder'}
};
function weatherInfo(code){
return WEATHER_CODES[code] || {label:'Unknown', cat:'cloudy'};
}
var THEMES = {
clear: { g:['#2f8fdd','#5fb3ea','#ffd98a'], accent:'#ffcf6b' },
partly: { g:['#3f7cc4','#6a9bd6','#cdd9ea'], accent:'#bcd3ef' },
cloudy: { g:['#5c6b80','#7c8ba0','#b7c2d1'], accent:'#c7d0dc' },
fog: { g:['#7c8898','#a3adba','#dbe1e8'], accent:'#d7dee6' },
rain: { g:['#25344a','#3c5570','#5c7591'], accent:'#8fb3d9', particles:'rain' },
snow: { g:['#4c6c8f','#7fa2c4','#e6f0f7'], accent:'#dcedf9', particles:'snow' },
thunder: { g:['#12151d','#262b36','#3d4250'], accent:'#ffd54a', particles:'rain', flash:true }
};
/* ============ Icon builders (inline SVG) ============ */
function cloudShape(id, c1, c2){
return '<defs><linearGradient id="'+id+'" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0%" stop-color="'+c1+'"/><stop offset="100%" stop-color="'+c2+'"/></linearGradient></defs>' +
'<g fill="url(#'+id+')">' +
'<ellipse cx="44" cy="72" rx="21" ry="16"/>' +
'<ellipse cx="68" cy="60" rx="27" ry="21"/>' +
'<ellipse cx="91" cy="73" rx="19" ry="15"/>' +
'<rect x="33" y="68" width="66" height="26" rx="13"/>' +
'</g>';
}
function sunRays(cx, cy, r1, r2, count, stroke){
var s = '<g class="rays" stroke="'+stroke+'" stroke-width="4" stroke-linecap="round" opacity=".85">';
for(var i=0;i<count;i++){
var a = (360/count)*i;
s += '<line x1="'+cx+'" y1="'+(cy-r1)+'" x2="'+cx+'" y2="'+(cy-r2)+'" transform="rotate('+a+' '+cx+' '+cy+')"/>';
}
return s + '</g>';
}
function iconClear(){
return '<svg class="icon-anim icon-sun" viewBox="0 0 120 120">' +
'<defs><radialGradient id="sg" cx="46%" cy="42%" r="60%">' +
'<stop offset="0%" stop-color="#fff6d2"/><stop offset="55%" stop-color="#ffd35f"/><stop offset="100%" stop-color="#ffab3d"/>' +
'</radialGradient></defs>' +
sunRays(60,60,34,46,8,'#ffe6a0') +
'<circle cx="60" cy="60" r="28" fill="url(#sg)"/>' +
'</svg>';
}
function iconPartly(){
return '<svg class="icon-anim" viewBox="0 0 120 120">' +
'<defs><radialGradient id="sg2" cx="42%" cy="40%" r="60%">' +
'<stop offset="0%" stop-color="#fff6d2"/><stop offset="60%" stop-color="#ffd35f"/><stop offset="100%" stop-color="#ffab3d"/>' +
'</radialGradient></defs>' +
sunRays(46,44,20,28,8,'#ffe6a0').replace('class="rays"','class="rays" style="transform-origin:46px 44px"') +
'<circle cx="46" cy="44" r="17" fill="url(#sg2)"/>' +
cloudShape('cg2','#ffffff','#dbe6f2').replace('<g ', '<g transform="translate(6,14)" ') +
'</svg>';
}
function iconCloudy(){
return '<svg class="icon-anim" viewBox="0 0 120 120">' +
cloudShape('cg3a','#9fb0c2','#7f93a9').replace('<g ', '<g transform="translate(-8,-6) scale(.92)" opacity="0.8" ') +
cloudShape('cg3b','#ffffff','#d7e0ea') +
'</svg>';
}
function iconFog(){
var lines = '';
var ys = [50,64,78,92];
for(var i=0;i<ys.length;i++){
lines += '<path class="fog-line" style="animation-delay:'+(i*0.4)+'s" d="M18,'+ys[i]+' Q40,'+(ys[i]-6)+' 60,'+ys[i]+' T102,'+ys[i]+'" stroke="rgba(255,255,255,.8)" stroke-width="5" stroke-linecap="round" fill="none" opacity="'+(0.9-i*0.12)+'"/>';
}
return '<svg class="icon-anim" viewBox="0 0 120 120">' +
'<circle cx="60" cy="42" r="18" fill="rgba(255,255,255,.35)"/>' + lines +
'</svg>';
}
function iconRain(){
var drops = '';
var dx = [40,58,76,94];
for(var i=0;i<dx.length;i++){
drops += '<line class="rain-drop" x1="'+dx[i]+'" y1="90" x2="'+(dx[i]-6)+'" y2="106" stroke="#bfe0ff" stroke-width="4" stroke-linecap="round" style="animation:dropFall 1.1s ease-in '+(i*0.18)+'s infinite"/>';
}
return '<svg class="icon-anim" viewBox="0 0 120 120">' +
'<style>@keyframes dropFall{0%{opacity:0;transform:translateY(-4px)}30%{opacity:1}100%{opacity:0;transform:translateY(10px)}}</style>' +
cloudShape('cgR','#c9d8e8','#8fa3b8') + drops +
'</svg>';
}
function iconSnow(){
var flakes = '';
var dx = [40,58,76,94];
for(var i=0;i<dx.length;i++){
flakes += '<text class="snow-flake" x="'+dx[i]+'" y="100" font-size="14" fill="#fff" text-anchor="middle" style="animation:flakeFall 2.2s ease-in-out '+(i*0.3)+'s infinite">\u2744</text>';
}
return '<svg class="icon-anim" viewBox="0 0 120 120">' +
'<style>@keyframes flakeFall{0%{opacity:.2;transform:translateY(-2px)}50%{opacity:1;transform:translateY(6px)}100%{opacity:.2;transform:translateY(12px)}}</style>' +
cloudShape('cgS','#eef4fa','#c3d3e4') + flakes +
'</svg>';
}
function iconThunder(){
return '<svg class="icon-anim" viewBox="0 0 120 120">' +
cloudShape('cgT','#8b95a5','#4d5563') +
'<polygon class="bolt" points="64,58 50,86 62,86 54,104 82,72 68,72 78,58" fill="#ffd54a"/>' +
'</svg>';
}
var ICONS = { clear:iconClear, partly:iconPartly, cloudy:iconCloudy, fog:iconFog, rain:iconRain, snow:iconSnow, thunder:iconThunder };
var ERROR_ICON = '<svg viewBox="0 0 64 64" fill="none"><circle cx="32" cy="32" r="29" stroke="#fff" stroke-opacity=".55" stroke-width="3"/>' +
'<path d="M32 18v20" stroke="#fff" stroke-width="4" stroke-linecap="round"/><circle cx="32" cy="46" r="2.6" fill="#fff"/></svg>';
/* ============ Formatting helpers ============ */
function round(n){ return Math.round(n); }
function formatCoord(lat, lon){
var latDir = lat >= 0 ? 'N' : 'S';
var lonDir = lon >= 0 ? 'E' : 'W';
return Math.abs(lat).toFixed(2) + '\u00B0 ' + latDir + ', ' + Math.abs(lon).toFixed(2) + '\u00B0 ' + lonDir;
}
function formatFullDate(dateStr){
var d = new Date(dateStr + 'T00:00:00Z');
return d.toLocaleDateString('en-US', { weekday:'long', month:'long', day:'numeric', year:'numeric', timeZone:'UTC' });
}
function relativeDayLabel(dateStr){
var t = todayUTC();
if(dateStr === t) return 'Today';
var diff = Math.round((Date.parse(dateStr+'T00:00:00Z') - Date.parse(t+'T00:00:00Z')) / 86400000);
if(diff === 1) return 'Tomorrow';
if(diff === -1) return 'Yesterday';
if(diff > 1) return 'In ' + diff + ' days';
if(diff < -1) return Math.abs(diff) + ' days ago';
return '';
}
function escapeHtml(s){
return String(s).replace(/[&<>"']/g, function(c){
return { '&':'&', '<':'<', '>':'>', '"':'"', "'":''' }[c];
});
}
/* ============ Theming / background decor ============ */
var bgTheme = document.getElementById('bgTheme');
var bgDecor = document.getElementById('bgDecor');
var flashEl = document.getElementById('flash');
var lightningTimer = null;
function applyTheme(cat){
var t = THEMES[cat] || THEMES.cloudy;
document.documentElement.style.setProperty('--g1', t.g[0]);
document.documentElement.style.setProperty('--g2', t.g[1]);
document.documentElement.style.setProperty('--g3', t.g[2]);
document.documentElement.style.setProperty('--accent', t.accent);
bgTheme.style.background = 'linear-gradient(160deg, ' + t.g[0] + ' 0%, ' + t.g[1] + ' 55%, ' + t.g[2] + ' 100%)';
requestAnimationFrame(function(){ bgTheme.classList.add('show'); });
bgDecor.innerHTML = '<div class="glow glow-a"></div><div class="glow glow-b"></div>';
spawnDriftClouds();
if(t.particles === 'rain') spawnParticles('rain', 46);
if(t.particles === 'snow') spawnParticles('snow', 40);
if(t.flash) startLightning();
}
function spawnDriftClouds(){
for(var i=0;i<3;i++){
var el = document.createElement('div');
el.className = 'drift-cloud';
var w = 140 + Math.random()*160;
el.style.width = w + 'px';
el.style.height = (w*0.5) + 'px';
el.style.top = (8 + Math.random()*55) + '%';
el.style.animationDuration = (55 + Math.random()*40) + 's';
el.style.animationDelay = (-Math.random()*40) + 's';
bgDecor.appendChild(el);
}
}
function spawnParticles(type, count){
var frag = document.createDocumentFragment();
for(var i=0;i<count;i++){
var el = document.createElement('div');
if(type === 'rain'){
el.className = 'drop';
el.style.height = (16 + Math.random()*18) + 'px';
el.style.animationDuration = (0.6 + Math.random()*0.5) + 's';
} else {
el.className = 'flake';
var s = 3 + Math.random()*4;
el.style.width = s + 'px';
el.style.height = s + 'px';
el.style.animationDuration = (4 + Math.random()*4) + 's';
}
el.style.left = Math.random()*100 + '%';
el.style.animationDelay = (-Math.random()*6) + 's';
frag.appendChild(el);
}
bgDecor.appendChild(frag);
}
function startLightning(){
function flashOnce(){
flashEl.classList.add('on');
setTimeout(function(){ flashEl.classList.remove('on'); }, 120);
setTimeout(function(){
flashEl.classList.add('on');
setTimeout(function(){ flashEl.classList.remove('on'); }, 90);
}, 220);
}
lightningTimer = setInterval(flashOnce, 4500 + Math.random()*3500);
setTimeout(flashOnce, 900);
}
/* ============ Rendering: states ============ */
var stage = document.getElementById('stage');
function renderLoading(){
stage.innerHTML =
'<div class="loading"><div class="spinner"></div><p>Loading weather for ' + escapeHtml(state.name) + '\u2026</p></div>';
}
function renderError(message){
stage.innerHTML =
'<div class="error-box">' + ERROR_ICON +
'<h2>Unable to load weather</h2>' +
'<p>We couldn\u2019t retrieve conditions for <strong>' + escapeHtml(state.name) + '</strong> on ' + escapeHtml(state.date) + '. ' + escapeHtml(message) + '</p>' +
'<button class="retry-btn" id="retryBtn">Try Again</button>' +
'</div>';
var btn = document.getElementById('retryBtn');
if(btn) btn.addEventListener('click', function(){ window.location.reload(); });
}
function renderWeather(data){
var daily = data.daily, hourly = data.hourly;
var max = daily.temperature_2m_max[0];
var min = daily.temperature_2m_min[0];
var code = daily.weather_code[0];
var info = weatherInfo(code);
var hours = [];
for(var i=0;i<hourly.time.length;i++){
if(String(hourly.time[i]).indexOf(state.date) === 0){
var temp = hourly.temperature_2m[i];
if(temp !== null && temp !== undefined){
hours.push({ time: String(hourly.time[i]).slice(11,16), temp: temp });
}
}
}
if(!hours.length){ throw new Error('No hourly readings were returned for this date.'); }
applyTheme(info.cat);
var rel = relativeDayLabel(state.date);
stage.innerHTML =
'<div class="content">' +
'<div class="top-row">' +
'<div class="location">' +
'<h1>' + escapeHtml(state.name) + '</h1>' +
'<div class="coords">' + formatCoord(state.lat, state.lon) + '</div>' +
'</div>' +
'<div class="date-block">' +
(rel ? '<div class="rel-pill">' + escapeHtml(rel) + '</div>' : '') +
'<div class="full-date">' + formatFullDate(state.date) + '</div>' +
'</div>' +
'</div>' +
'<div class="hero">' +
'<div class="hero-icon-wrap">' +
ICONS[info.cat]() +
'<span class="condition-pill">' + escapeHtml(info.label) + '</span>' +
'</div>' +
'<div class="hero-divider"></div>' +
'<div class="stats-row">' +
'<div class="stat high"><div class="stat-label">High</div><div class="stat-value">' + round(max) + '<sup>\u00B0C</sup></div></div>' +
'<div class="stat low"><div class="stat-label">Low</div><div class="stat-value">' + round(min) + '<sup>\u00B0C</sup></div></div>' +
'</div>' +
'</div>' +
'<div class="hourly">' +
'<div class="hourly-header"><h2>Hourly Temperature</h2><span class="hint">' + hours.length + ' readings \u00B7 UTC</span></div>' +
'<div class="chart-wrap" id="chartWrap"></div>' +
'</div>' +
'<div class="footer-row"><span>Weather data \u00B7 Open-Meteo</span><span>' + escapeHtml(state.lat.toFixed(3)) + ', ' + escapeHtml(state.lon.toFixed(3)) + '</span></div>' +
'</div>';
buildHourlyChart(document.getElementById('chartWrap'), hours);
}
/* ============ Hourly chart ============ */
function smoothPath(pts){
if(pts.length < 2) return '';
if(pts.length === 2) return 'M ' + pts[0].x + ' ' + pts[0].y + ' L ' + pts[1].x + ' ' + pts[1].y;
var d = 'M ' + pts[0].x + ' ' + pts[0].y;
for(var i=0;i<pts.length-1;i++){
var p0 = pts[i-1] || pts[i];
var p1 = pts[i];
var p2 = pts[i+1];
var p3 = pts[i+2] || p2;
var c1x = p1.x + (p2.x - p0.x)/6;
var c1y = p1.y + (p2.y - p0.y)/6;
var c2x = p2.x - (p3.x - p1.x)/6;
var c2y = p2.y - (p3.y - p1.y)/6;
d += ' C ' + c1x + ' ' + c1y + ', ' + c2x + ' ' + c2y + ', ' + p2.x + ' ' + p2.y;
}
return d;
}
function buildHourlyChart(container, hours){
var W = 968, H = 196, padX = 42, padTop = 26, padBottom = 34;
var innerW = W - padX*2, innerH = H - padTop - padBottom;
var temps = hours.map(function(h){ return h.temp; });
var min = Math.min.apply(null, temps), max = Math.max.apply(null, temps);
if(min === max){ min -= 1; max += 1; }
var pad = (max - min) * 0.22;
min -= pad; max += pad;
var stepX = hours.length > 1 ? innerW / (hours.length - 1) : 0;
var pts = hours.map(function(h, i){
return {
x: padX + i*stepX,
y: padTop + innerH - ((h.temp - min) / (max - min)) * innerH,
temp: h.temp,
time: h.time
};
});
var linePath = smoothPath(pts);
var areaPath = linePath +
' L ' + pts[pts.length-1].x + ' ' + (padTop+innerH) +
' L ' + pts[0].x + ' ' + (padTop+innerH) + ' Z';
var gridSvg = '';
var gridLevels = [max - pad*0.6, (min+max)/2, min + pad*0.6];
gridLevels.forEach(function(lvl){
var y = padTop + innerH - ((lvl - min)/(max-min))*innerH;
gridSvg += '<line x1="' + padX + '" y1="' + y + '" x2="' + W + '" y2="' + y + '" stroke="rgba(255,255,255,.14)" stroke-width="1" stroke-dasharray="3,5"/>';
gridSvg += '<text x="0" y="' + (y+4) + '" font-size="11" fill="rgba(255,255,255,.55)" font-weight="600">' + round(lvl) + '\u00B0</text>';
});
var labelSvg = '';
for(var i=0;i<pts.length;i++){
if(i % 3 === 0){
labelSvg += '<text x="' + pts[i].x + '" y="' + (H-6) + '" font-size="11" fill="rgba(255,255,255,.55)" text-anchor="middle" font-weight="500">' + hours[i].time.slice(0,2) + '</text>';
}
}
var minIdx = 0, maxIdx = 0;
for(var j=1;j<hours.length;j++){
if(hours[j].temp < hours[minIdx].temp) minIdx = j;
if(hours[j].temp > hours[maxIdx].temp) maxIdx = j;
}
var markSvg = '';
[ {idx:maxIdx, dy:-14}, {idx:minIdx, dy:20} ].forEach(function(m){
var p = pts[m.idx];
markSvg += '<circle cx="' + p.x + '" cy="' + p.y + '" r="4.5" fill="#fff"/>';
markSvg += '<text x="' + p.x + '" y="' + (p.y + m.dy) + '" font-size="12.5" fill="#fff" text-anchor="middle" font-weight="700">' + round(p.temp) + '\u00B0</text>';
});
var svg =
'<svg viewBox="0 0 ' + W + ' ' + H + '" preserveAspectRatio="none">' +
'<defs><linearGradient id="areaFill" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0%" stop-color="rgba(255,255,255,.38)"/>' +
'<stop offset="100%" stop-color="rgba(255,255,255,0)"/>' +
'</linearGradient></defs>' +
gridSvg +
'<path d="' + areaPath + '" fill="url(#areaFill)"/>' +
'<path d="' + linePath + '" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>' +
labelSvg + markSvg +
'<line class="hover-line" id="hoverLine" x1="0" y1="' + padTop + '" x2="0" y2="' + (padTop+innerH) + '" stroke="rgba(255,255,255,.55)" stroke-width="1.5" stroke-dasharray="2,4"/>' +
'<circle class="hover-dot" id="hoverDot" r="5.5" fill="#fff" stroke="rgba(0,0,0,.25)" stroke-width="1"/>' +
'</svg>' +
'<div class="chart-tooltip" id="chartTooltip"></div>';
container.innerHTML = svg;
var svgEl = container.querySelector('svg');
var hoverLine = container.querySelector('#hoverLine');
var hoverDot = container.querySelector('#hoverDot');
var tooltip = container.querySelector('#chartTooltip');
function updateHover(idx){
var p = pts[idx];
hoverLine.setAttribute('x1', p.x); hoverLine.setAttribute('x2', p.x);
hoverDot.setAttribute('cx', p.x); hoverDot.setAttribute('cy', p.y);
tooltip.innerHTML = '<span class="tt-time">' + hours[idx].time + '</span>' + round(p.temp) + '\u00B0C';
var rect = svgEl.getBoundingClientRect();
var pxRatio = rect.width / W;
tooltip.style.left = (p.x * pxRatio) + 'px';
tooltip.style.top = (p.y * (rect.height / H)) + 'px';
tooltip.classList.add('show');
container.classList.add('active');
}
function hideHover(){
tooltip.classList.remove('show');
container.classList.remove('active');
}
container.addEventListener('pointermove', function(e){
var rect = svgEl.getBoundingClientRect();
if(rect.width === 0) return;
var relX = (e.clientX - rect.left) / rect.width * W;
var idx = Math.round((relX - padX) / (stepX || 1));
idx = Math.max(0, Math.min(pts.length-1, idx));
updateHover(idx);
});
container.addEventListener('pointerleave', hideHover);
}
/* ============ Fetch ============ */
function validateResponse(data){
if(!data || typeof data !== 'object') throw new Error('The response was empty or malformed.');
var d = data.daily, h = data.hourly;
if(!d || !Array.isArray(d.temperature_2m_max) || !d.temperature_2m_max.length ||
!Array.isArray(d.temperature_2m_min) || !d.temperature_2m_min.length ||
!Array.isArray(d.weather_code) || !d.weather_code.length ||
d.temperature_2m_max[0] === null || d.temperature_2m_min[0] === null){
throw new Error('Daily temperature data is missing.');
}
if(!h || !Array.isArray(h.time) || !Array.isArray(h.temperature_2m) || !h.time.length){
throw new Error('Hourly temperature data is missing.');
}
}
function fetchWeather(){
var isPast = state.date < todayUTC();
var base = isPast ? '/api/om/archive' : '/api/om/forecast';
var qs = new URLSearchParams({
latitude: String(state.lat),
longitude: String(state.lon),
daily: 'temperature_2m_max,temperature_2m_min,weather_code',
hourly: 'temperature_2m',
timezone: 'UTC',
temperature_unit: 'celsius',
start_date: state.date,
end_date: state.date
});
var url = base + '?' + qs.toString();
return fetch(url).then(function(res){
if(!res.ok){ throw new Error('The weather service responded with status ' + res.status + '.'); }
return res.json();
}).then(function(data){
validateResponse(data);
return data;
});
}
/* ============ Init ============ */
renderLoading();
fetchWeather().then(renderWeather).catch(function(err){
renderError(err && err.message ? err.message : 'An unknown error occurred.');
});
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 30,520 | html / css / js | 471 / 8,356 / 21,693 |
|---|---|---|---|
| dom nodes | 15 | dom depth | 4 |
| css rules | 90 | js present | yes |
| brightness | 105.2 | contrast | 23.3 |
| colorfulness | 26.5 | whitespace | 57.6% |
This slot's telemetry
| prompt tokens | 136 | completion tokens | 78,849 |
|---|---|---|---|
| total tokens | 78,985 | wall | 1,381.7 s |
| cost | — | request id | — |
config.json590 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "claude-sonnet-5-eff-xhigh--cli--cursor-xl--dev",
"effort": "xhigh",
"family": "claude",
"m": {
"min": 2,
"q": 2
},
"model_id": "claude-sonnet-5",
"protocol": "cli",
"served_model": "claude-sonnet-5-xhigh",
"telemetry": {
"completion_tokens": 174931,
"cost_usd": null,
"prompt_tokens": 242,
"total_tokens": 175173,
"wall_ms": 2456436
},
"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-5-eff-xhigh--cli--cursor-xl--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-08-13T13:37:33.946200+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T13:14:32.249687+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-13T13:42:14.628426+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T13:37:38.031440+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-13T13:44:49.374234+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T13:42:17.911018+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-13T13:55:39.521873+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T13:44:52.847821+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
}
}
}