claude-sonnet-5 @ max · cursor-xl
cursor-xlmax
- config
- claude-sonnet-5-eff-max--cli--cursor-xl--dev
- batch
- 2026-07-19--unified
- transport
- cursor-agent-cli-isolated-home
- protocol
- cli · plan
- served model
- claude-sonnet-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 tempambiguousinsufficient-distinct-temperature-nodes
- min tempambiguousinsufficient-distinct-temperature-nodes
- 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" />
<title>Weather</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232f9bf0'/%3E%3Cstop offset='1' stop-color='%23134e8a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='46' fill='url(%23g)'/%3E%3Cellipse cx='40' cy='62' rx='20' ry='14' fill='white' opacity='0.9'/%3E%3Cellipse cx='60' cy='54' rx='24' ry='19' fill='white' opacity='0.9'/%3E%3C/svg%3E" />
<style>
:root {
--accent: #bcd6f2;
--accent-strong: #eaf3fc;
color-scheme: dark;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
width: 1280px;
height: 800px;
overflow: hidden;
background: #0a1220;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: #fff;
-webkit-font-smoothing: antialiased;
}
body {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
/* ---------- Ambient background scene ---------- */
.scene {
position: absolute;
inset: 0;
overflow: hidden;
z-index: 0;
}
.theme-layer {
position: absolute;
inset: -5%;
opacity: 0;
transition: opacity 900ms ease;
background: linear-gradient(160deg, #1a3a5c 0%, #2c5d8a 45%, #4d84ad 100%);
}
.theme-layer.ready { opacity: 1; }
.blob {
position: absolute;
border-radius: 50%;
filter: blur(70px);
opacity: 0.55;
background: radial-gradient(circle, var(--accent) 0%, rgba(255,255,255,0) 72%);
will-change: transform;
}
.blob-a { width: 620px; height: 620px; top: -220px; left: -160px; animation: float-a 22s ease-in-out infinite; }
.blob-b { width: 520px; height: 520px; bottom: -200px; right: -120px; animation: float-b 26s ease-in-out infinite; }
.blob-c { width: 380px; height: 380px; top: 40%; right: 18%; opacity: 0.3; animation: float-a 19s ease-in-out infinite reverse; }
@keyframes float-a {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(40px, 30px) scale(1.08); }
}
@keyframes float-b {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-30px, -35px) scale(1.05); }
}
.fx-layer {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.rain-streaks {
position: absolute;
inset: -10% -10%;
background-image: repeating-linear-gradient(
110deg,
transparent 0px,
transparent 34px,
rgba(255,255,255,0.16) 35px,
rgba(255,255,255,0.16) 36px
);
animation: rain-shift 550ms linear infinite;
}
@keyframes rain-shift {
from { transform: translate(0, -40px); }
to { transform: translate(-28px, 40px); }
}
.snowflake {
position: absolute;
top: -5%;
border-radius: 50%;
background: #ffffff;
opacity: 0.85;
animation-name: snow-fall;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes snow-fall {
from { transform: translate(0, 0) translateX(0); }
to { transform: translate(0, 860px) translateX(30px); }
}
.storm-flash {
position: absolute;
inset: 0;
background: #fff;
opacity: 0;
animation: flash 7s ease-in-out infinite;
}
@keyframes flash {
0%, 92%, 100% { opacity: 0; }
93% { opacity: 0.18; }
94% { opacity: 0.02; }
95% { opacity: 0.28; }
96.5% { opacity: 0; }
}
.fog-band {
position: absolute;
left: -20%;
width: 140%;
height: 140px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
filter: blur(6px);
animation: fog-drift 16s ease-in-out infinite;
}
@keyframes fog-drift {
0%, 100% { transform: translateX(-4%); }
50% { transform: translateX(4%); }
}
/* ---------- Card ---------- */
.card {
position: relative;
z-index: 1;
width: 1160px;
height: 712px;
padding: 40px 46px;
border-radius: 30px;
background: linear-gradient(165deg, rgba(16,23,38,0.62), rgba(10,15,26,0.58));
border: 1px solid rgba(255,255,255,0.14);
box-shadow:
0 30px 90px -20px rgba(0,0,0,0.55),
0 0 0 1px rgba(255,255,255,0.02) inset,
0 1px 0 rgba(255,255,255,0.18) inset;
backdrop-filter: blur(30px) saturate(150%);
-webkit-backdrop-filter: blur(30px) saturate(150%);
display: flex;
flex-direction: column;
gap: 22px;
opacity: 0;
transform: translateY(14px);
animation: card-in 700ms cubic-bezier(.22,.9,.32,1) 80ms forwards;
}
@keyframes card-in {
to { opacity: 1; transform: translateY(0); }
}
/* ---------- Header ---------- */
.card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex: 0 0 auto;
}
.location {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.location-icon {
flex: 0 0 auto;
width: 30px;
height: 30px;
opacity: 0.85;
margin-top: 4px;
}
.location-text { min-width: 0; }
.location-name {
font-size: 34px;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.15;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 640px;
}
.location-date {
margin-top: 4px;
font-size: 16px;
font-weight: 500;
color: rgba(255,255,255,0.68);
}
.header-badges {
display: flex;
gap: 10px;
flex: 0 0 auto;
margin-top: 6px;
}
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 13px;
border-radius: 999px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.16);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255,255,255,0.78);
white-space: nowrap;
}
.badge svg { width: 13px; height: 13px; opacity: 0.85; }
.divider {
height: 1px;
flex: 0 0 auto;
background: linear-gradient(90deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02));
}
/* ---------- Content row ---------- */
.content-row {
flex: 1 1 auto;
display: flex;
gap: 36px;
min-height: 0;
}
.left-panel {
flex: 0 0 308px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 6px;
border-radius: 22px;
background: linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
border: 1px solid rgba(255,255,255,0.08);
position: relative;
overflow: hidden;
padding: 20px;
}
.icon-wrap {
position: relative;
width: 140px;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2px;
}
.icon-glow {
position: absolute;
inset: 6px;
border-radius: 50%;
background: radial-gradient(circle, var(--accent) 0%, rgba(255,255,255,0) 70%);
filter: blur(18px);
opacity: 0.55;
animation: glow-pulse 4.5s ease-in-out infinite;
}
@keyframes glow-pulse {
0%, 100% { opacity: 0.4; transform: scale(0.96); }
50% { opacity: 0.65; transform: scale(1.05); }
}
.icon-wrap svg { position: relative; width: 132px; height: 132px; }
.condition-label {
font-size: 21px;
font-weight: 600;
letter-spacing: -0.01em;
margin-top: 4px;
}
.temps-row {
display: flex;
align-items: baseline;
gap: 18px;
margin-top: 14px;
}
.temp-block { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.temp-value {
font-size: 56px;
font-weight: 250;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
line-height: 1;
}
.temp-block.is-min .temp-value {
font-size: 34px;
font-weight: 350;
color: rgba(255,255,255,0.72);
}
.temp-tag {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
}
.temp-sep {
width: 1px;
height: 40px;
background: rgba(255,255,255,0.16);
align-self: center;
}
/* ---------- Right panel / chart ---------- */
.right-panel {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-width: 0;
border-radius: 22px;
background: linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
border: 1px solid rgba(255,255,255,0.08);
padding: 22px 26px 16px;
min-height: 0;
}
.panel-title-row {
display: flex;
align-items: baseline;
justify-content: space-between;
flex: 0 0 auto;
}
.panel-title {
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.panel-subtitle {
font-size: 12.5px;
color: rgba(255,255,255,0.4);
}
.chart-wrap {
flex: 1 1 auto;
min-height: 0;
margin-top: 6px;
position: relative;
}
.chart-wrap svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart-empty-note {
position: absolute;
bottom: 2px;
right: 2px;
font-size: 10.5px;
color: rgba(255,255,255,0.35);
}
/* ---------- Footer ---------- */
.card-footer {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12.5px;
color: rgba(255,255,255,0.42);
}
.card-footer .footer-left { display: flex; align-items: center; gap: 8px; }
.card-footer svg { width: 13px; height: 13px; opacity: 0.7; }
/* ---------- Skeletons ---------- */
.skel {
border-radius: 12px;
background: linear-gradient(100deg, rgba(255,255,255,0.06) 30%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.06) 70%);
background-size: 200% 100%;
animation: shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
.skel-icon { width: 132px; height: 132px; border-radius: 50%; margin-bottom: 14px; }
.skel-line { height: 16px; border-radius: 8px; }
.skel-condition { width: 140px; height: 20px; margin-bottom: 16px; }
.skel-temp { width: 180px; height: 52px; margin-top: 4px; }
.skel-chart { width: 100%; height: 100%; border-radius: 16px; }
.fade-group { animation: fade-in 500ms ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
/* ---------- Error state ---------- */
.error-state {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 10px;
border-radius: 22px;
background: linear-gradient(165deg, rgba(255,120,120,0.08), rgba(255,255,255,0.015));
border: 1px solid rgba(255,140,140,0.18);
padding: 30px;
}
.error-state svg { width: 52px; height: 52px; opacity: 0.85; margin-bottom: 4px; }
.error-title { font-size: 19px; font-weight: 700; }
.error-detail {
font-size: 13.5px;
color: rgba(255,255,255,0.62);
max-width: 520px;
line-height: 1.5;
}
.error-hint {
font-size: 12px;
color: rgba(255,255,255,0.4);
margin-top: 6px;
}
/* ---------- SVG chart text ---------- */
.pt-label { font-size: 12px; font-weight: 600; fill: rgba(255,255,255,0.82); font-variant-numeric: tabular-nums; }
.pt-label.is-max { fill: #ffd27a; font-weight: 700; }
.pt-label.is-min { fill: #8fd0ff; font-weight: 700; }
.hr-label { font-size: 11px; fill: rgba(255,255,255,0.4); }
.now-label { font-size: 11px; font-weight: 700; fill: rgba(255,255,255,0.92); }
</style>
</head>
<body>
<div class="scene" aria-hidden="true">
<div class="theme-layer" id="themeLayer">
<div class="blob blob-a" id="blobA"></div>
<div class="blob blob-b" id="blobB"></div>
<div class="blob blob-c" id="blobC"></div>
<div class="fx-layer" id="fxLayer"></div>
</div>
</div>
<main class="card" id="card" aria-live="polite">
<header class="card-header">
<div class="location">
<svg class="location-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M12 21s7-6.5 7-12a7 7 0 1 0-14 0c0 5.5 7 12 7 12z" stroke="rgba(255,255,255,0.85)" stroke-width="1.6" stroke-linejoin="round"/>
<circle cx="12" cy="9" r="2.6" stroke="rgba(255,255,255,0.85)" stroke-width="1.6"/>
</svg>
<div class="location-text">
<div class="location-name" id="locationName"> </div>
<div class="location-date" id="locationDate"> </div>
</div>
</div>
<div class="header-badges">
<div class="badge" id="sourceBadge" style="display:none;"></div>
<div class="badge">
<svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.6"/><path d="M12 7v5l3.5 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
UTC
</div>
</div>
</header>
<div class="divider"></div>
<div class="content-row" id="contentRow">
<div class="left-panel" id="leftPanel">
<div class="skel-icon skel" id="skelIcon"></div>
<div class="skel-condition skel" id="skelCondition"></div>
<div class="skel-temp skel" id="skelTemp"></div>
</div>
<div class="right-panel" id="rightPanel">
<div class="panel-title-row">
<div class="panel-title">Hourly Temperature</div>
<div class="panel-subtitle" id="panelSubtitle"></div>
</div>
<div class="chart-wrap" id="chartWrap">
<div class="skel-chart skel"></div>
</div>
</div>
</div>
<footer class="card-footer">
<div class="footer-left">
<svg viewBox="0 0 24 24" fill="none"><path d="M12 21s7-6.5 7-12a7 7 0 1 0-14 0c0 5.5 7 12 7 12z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg>
<span id="coordsText"> </span>
</div>
<div id="attribution">Weather data by Open‑Meteo</div>
</footer>
</main>
<script>
(function () {
'use strict';
/* ============================== Constants ============================== */
const DEFAULTS = { lat: 52.52, lon: 13.405, name: 'Berlin' };
const WEATHER_CODES = {
0: { label: 'Clear Sky', icon: 'sun', theme: 'clear' },
1: { label: 'Mainly Clear', icon: 'sun-cloud', theme: 'clear' },
2: { label: 'Partly Cloudy', icon: 'sun-cloud', theme: 'cloudy' },
3: { label: 'Overcast', icon: 'cloud', theme: 'cloudy' },
45: { label: 'Fog', icon: 'fog', theme: 'fog' },
48: { label: 'Rime Fog', icon: 'fog', theme: 'fog' },
51: { label: 'Light Drizzle', icon: 'drizzle', theme: 'rain' },
53: { label: 'Drizzle', icon: 'drizzle', theme: 'rain' },
55: { label: 'Dense Drizzle', icon: 'drizzle', theme: 'rain' },
56: { label: 'Freezing Drizzle', icon: 'drizzle', theme: 'rain' },
57: { label: 'Freezing Drizzle', icon: 'drizzle', theme: 'rain' },
61: { label: 'Light Rain', icon: 'rain', theme: 'rain' },
63: { label: 'Rain', icon: 'rain', theme: 'rain' },
65: { label: 'Heavy Rain', icon: 'rain', theme: 'rain' },
66: { label: 'Freezing Rain', icon: 'rain', theme: 'rain' },
67: { label: 'Heavy Freezing Rain', icon: 'rain', theme: 'rain' },
71: { label: 'Light Snow', icon: 'snow', theme: 'snow' },
73: { label: 'Snow', icon: 'snow', theme: 'snow' },
75: { label: 'Heavy Snow', icon: 'snow', theme: 'snow' },
77: { label: 'Snow Grains', icon: 'snow', theme: 'snow' },
80: { label: 'Light Showers', icon: 'rain', theme: 'rain' },
81: { label: 'Showers', icon: 'rain', theme: 'rain' },
82: { label: 'Violent Showers', icon: 'rain', theme: 'rain' },
85: { label: 'Snow Showers', icon: 'snow', theme: 'snow' },
86: { label: 'Heavy Snow Showers', icon: 'snow', theme: 'snow' },
95: { label: 'Thunderstorm', icon: 'storm', theme: 'storm' },
96: { label: 'Thunderstorm & Hail', icon: 'storm', theme: 'storm' },
99: { label: 'Severe Thunderstorm', icon: 'storm', theme: 'storm' },
};
const THEMES = {
clear: {
bg: 'linear-gradient(160deg, #12437a 0%, #2d84c9 46%, #8fcbf0 100%)',
accent: '#ffd27a', accentSoft: 'rgba(255,210,122,0.35)', fx: 'glow',
},
cloudy: {
bg: 'linear-gradient(160deg, #3c5068 0%, #6f88a0 48%, #b7c8d6 100%)',
accent: '#eaf2fb', accentSoft: 'rgba(234,242,251,0.28)', fx: 'none',
},
fog: {
bg: 'linear-gradient(160deg, #5c6b76 0%, #8b9aa4 50%, #c9d3d8 100%)',
accent: '#e8edf0', accentSoft: 'rgba(232,237,240,0.28)', fx: 'fog',
},
rain: {
bg: 'linear-gradient(160deg, #1c2b3d 0%, #2f4a63 46%, #4c6d87 100%)',
accent: '#8fd0ff', accentSoft: 'rgba(143,208,255,0.32)', fx: 'rain',
},
snow: {
bg: 'linear-gradient(160deg, #3f5670 0%, #7d9cb8 46%, #dcecf5 100%)',
accent: '#ffffff', accentSoft: 'rgba(255,255,255,0.32)', fx: 'snow',
},
storm: {
bg: 'linear-gradient(160deg, #0f1220 0%, #262238 46%, #423a5c 100%)',
accent: '#ffd23f', accentSoft: 'rgba(255,210,63,0.3)', fx: 'storm',
},
};
/* ============================== DOM refs ============================== */
const el = {
themeLayer: document.getElementById('themeLayer'),
fxLayer: document.getElementById('fxLayer'),
locationName: document.getElementById('locationName'),
locationDate: document.getElementById('locationDate'),
sourceBadge: document.getElementById('sourceBadge'),
leftPanel: document.getElementById('leftPanel'),
rightPanel: document.getElementById('rightPanel'),
contentRow: document.getElementById('contentRow'),
chartWrap: document.getElementById('chartWrap'),
panelSubtitle: document.getElementById('panelSubtitle'),
coordsText: document.getElementById('coordsText'),
attribution: document.getElementById('attribution'),
};
/* ============================== Helpers ============================== */
function clamp(v, min, max) { return Math.min(max, Math.max(min, v)); }
function toNum(v, fallback) {
if (v === null || v === undefined || v === '') return fallback;
const n = parseFloat(v);
return Number.isFinite(n) ? n : fallback;
}
function pad2(n) { return String(n).padStart(2, '0'); }
function todayUTC() {
const d = new Date();
return `${d.getUTCFullYear()}-${pad2(d.getUTCMonth() + 1)}-${pad2(d.getUTCDate())}`;
}
function formatLongDate(dateStr) {
const parts = dateStr.split('-').map(Number);
const dt = new Date(Date.UTC(parts[0], parts[1] - 1, parts[2]));
return dt.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' });
}
function formatCoord(v, posLabel, negLabel) {
const label = v >= 0 ? posLabel : negLabel;
return `${Math.abs(v).toFixed(2)}\u00b0${label}`;
}
function fmtTemp(v) {
if (v === null || v === undefined || Number.isNaN(v)) return '--';
return `${Math.round(v)}\u00b0`;
}
/* ============================== Query params ============================== */
function readParams() {
const qp = new URLSearchParams(window.location.search);
let lat = toNum(qp.get('lat'), DEFAULTS.lat);
let lon = toNum(qp.get('lon'), DEFAULTS.lon);
lat = clamp(lat, -90, 90);
lon = clamp(lon, -180, 180);
let name = qp.get('name');
name = (name && name.trim()) ? name.trim() : DEFAULTS.name;
const dateParam = qp.get('date');
const today = todayUTC();
const date = (dateParam && /^\d{4}-\d{2}-\d{2}$/.test(dateParam)) ? dateParam : today;
return { lat, lon, name, date, today };
}
/* ============================== Icons ============================== */
function cloudPath(shade) {
const fill = shade === 'dark' ? 'url(#cloudDark)' : shade === 'snow' ? 'url(#cloudSnow)' : 'url(#cloudLight)';
return `<g fill="${fill}">
<ellipse cx="33" cy="63" rx="23" ry="16"/>
<ellipse cx="58" cy="47" rx="29" ry="24"/>
<ellipse cx="81" cy="61" rx="19" ry="15"/>
<rect x="17" y="55" width="75" height="24" rx="12"/>
</g>`;
}
function sunRays(cx, cy, r) {
let out = '';
for (let i = 0; i < 8; i++) {
const a = (i * Math.PI) / 4;
const x1 = cx + Math.cos(a) * (r + 7);
const y1 = cy + Math.sin(a) * (r + 7);
const x2 = cx + Math.cos(a) * (r + 17);
const y2 = cy + Math.sin(a) * (r + 17);
out += `<line x1="${x1.toFixed(1)}" y1="${y1.toFixed(1)}" x2="${x2.toFixed(1)}" y2="${y2.toFixed(1)}" stroke="url(#sunGrad)" stroke-width="6" stroke-linecap="round"/>`;
}
return out;
}
const ICON_DEFS = `
<defs>
<linearGradient id="sunGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#ffe485"/>
<stop offset="1" stop-color="#ffa733"/>
</linearGradient>
<linearGradient id="cloudLight" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffffff"/>
<stop offset="1" stop-color="#d7e4f0"/>
</linearGradient>
<linearGradient id="cloudDark" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#8494a6"/>
<stop offset="1" stop-color="#4d5c70"/>
</linearGradient>
<linearGradient id="cloudSnow" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffffff"/>
<stop offset="1" stop-color="#cfe7f6"/>
</linearGradient>
<linearGradient id="boltGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffe485"/>
<stop offset="1" stop-color="#ffb400"/>
</linearGradient>
<filter id="iconShadow" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="0" dy="7" stdDeviation="6" flood-color="#000000" flood-opacity="0.35"/>
</filter>
</defs>
`;
function iconMarkup(kind) {
let body = '';
switch (kind) {
case 'sun':
body = `${sunRays(50, 48, 21)}<circle cx="50" cy="48" r="21" fill="url(#sunGrad)"/>`;
break;
case 'sun-cloud':
body = `${sunRays(36, 36, 15)}<circle cx="36" cy="36" r="15" fill="url(#sunGrad)"/>${cloudPath('light')}`;
break;
case 'cloud':
body = `<g opacity="0.55" transform="translate(-8,-10) scale(0.8)">${cloudPath('dark')}</g>${cloudPath('light')}`;
break;
case 'fog':
body = `<g transform="translate(0,-6) scale(1,0.9)">${cloudPath('light')}</g>
<line x1="14" y1="80" x2="86" y2="80" stroke="#e8f0f6" stroke-width="5" stroke-linecap="round" opacity="0.85"/>
<line x1="22" y1="89" x2="78" y2="89" stroke="#e8f0f6" stroke-width="5" stroke-linecap="round" opacity="0.6"/>
<line x1="30" y1="98" x2="70" y2="98" stroke="#e8f0f6" stroke-width="5" stroke-linecap="round" opacity="0.4"/>`;
break;
case 'drizzle':
body = `${cloudPath('dark')}
<line x1="37" y1="82" x2="34" y2="92" stroke="#a9d8ff" stroke-width="5" stroke-linecap="round"/>
<line x1="53" y1="86" x2="50" y2="96" stroke="#a9d8ff" stroke-width="5" stroke-linecap="round"/>
<line x1="69" y1="82" x2="66" y2="92" stroke="#a9d8ff" stroke-width="5" stroke-linecap="round"/>`;
break;
case 'rain':
body = `${cloudPath('dark')}
<line x1="30" y1="80" x2="24" y2="97" stroke="#8fd0ff" stroke-width="6" stroke-linecap="round"/>
<line x1="49" y1="84" x2="43" y2="101" stroke="#8fd0ff" stroke-width="6" stroke-linecap="round"/>
<line x1="68" y1="80" x2="62" y2="97" stroke="#8fd0ff" stroke-width="6" stroke-linecap="round"/>`;
break;
case 'snow':
body = `${cloudPath('snow')}
${['33,86', '50,92', '67,86'].map((p) => {
const [x, y] = p.split(',').map(Number);
return `<g stroke="#ffffff" stroke-width="4" stroke-linecap="round">
<line x1="${x - 6}" y1="${y}" x2="${x + 6}" y2="${y}"/>
<line x1="${x}" y1="${y - 6}" x2="${x}" y2="${y + 6}"/>
<line x1="${x - 4.2}" y1="${y - 4.2}" x2="${x + 4.2}" y2="${y + 4.2}"/>
<line x1="${x - 4.2}" y1="${y + 4.2}" x2="${x + 4.2}" y2="${y - 4.2}"/>
</g>`;
}).join('')}`;
break;
case 'storm':
body = `${cloudPath('dark')}
<path d="M54,58 L39,86 L50,86 L44,101 L71,70 L57,70 Z" fill="url(#boltGrad)"/>`;
break;
default:
body = cloudPath('light');
}
return `<svg viewBox="0 0 100 100" filter="url(#iconShadow)">${ICON_DEFS}${body}</svg>`;
}
/* ============================== Background FX ============================== */
function setupFx(themeKey) {
el.fxLayer.innerHTML = '';
const theme = THEMES[themeKey];
if (theme.fx === 'rain') {
el.fxLayer.innerHTML = '<div class="rain-streaks"></div>';
} else if (theme.fx === 'snow') {
let html = '';
const count = 34;
for (let i = 0; i < count; i++) {
const left = Math.random() * 100;
const size = 3 + Math.random() * 5;
const dur = 9 + Math.random() * 10;
const delay = -Math.random() * 20;
const opacity = 0.4 + Math.random() * 0.5;
html += `<div class="snowflake" style="left:${left}%;width:${size}px;height:${size}px;opacity:${opacity};animation-duration:${dur}s;animation-delay:${delay}s;"></div>`;
}
el.fxLayer.innerHTML = html;
} else if (theme.fx === 'storm') {
el.fxLayer.innerHTML = '<div class="storm-flash"></div><div class="rain-streaks" style="opacity:0.5;"></div>';
} else if (theme.fx === 'fog') {
el.fxLayer.innerHTML = '<div class="fog-band" style="top:22%;"></div><div class="fog-band" style="top:55%;animation-delay:-6s;"></div><div class="fog-band" style="top:78%;animation-delay:-11s;"></div>';
}
}
function applyTheme(themeKey) {
const theme = THEMES[themeKey] || THEMES.cloudy;
el.themeLayer.style.background = theme.bg;
document.documentElement.style.setProperty('--accent', theme.accent);
document.documentElement.style.setProperty('--accent-strong', theme.accent);
setupFx(themeKey);
requestAnimationFrame(() => el.themeLayer.classList.add('ready'));
return theme;
}
/* ============================== Chart ============================== */
function smoothPath(points) {
if (points.length < 2) return '';
if (points.length === 2) return `M ${points[0][0]},${points[0][1]} L ${points[1][0]},${points[1][1]}`;
let d = `M ${points[0][0]},${points[0][1]}`;
for (let i = 0; i < points.length - 1; i++) {
const p0 = points[i - 1] || points[i];
const p1 = points[i];
const p2 = points[i + 1];
const p3 = points[i + 2] || p2;
const cp1x = p1[0] + (p2[0] - p0[0]) / 6;
const cp1y = p1[1] + (p2[1] - p0[1]) / 6;
const cp2x = p2[0] - (p3[0] - p1[0]) / 6;
const cp2y = p2[1] - (p3[1] - p1[1]) / 6;
d += ` C ${cp1x.toFixed(2)},${cp1y.toFixed(2)} ${cp2x.toFixed(2)},${cp2y.toFixed(2)} ${p2[0].toFixed(2)},${p2[1].toFixed(2)}`;
}
return d;
}
function buildChartSvg(hours, temps, theme, nowFrac) {
const W = 1000, H = 340;
const padL = 6, padR = 6, padTop = 34, padBottom = 30;
const innerW = W - padL - padR;
const innerH = H - padTop - padBottom;
const n = temps.length;
const min = Math.min.apply(null, temps);
const max = Math.max.apply(null, temps);
const range = (max - min) || 2;
const yPad = range * 0.18;
const yFor = (t) => padTop + innerH - ((t - (min - yPad)) / (range + yPad * 2)) * innerH;
const xFor = (i) => padL + (i / (n - 1)) * innerW;
const points = temps.map((t, i) => [xFor(i), yFor(t)]);
const linePath = smoothPath(points);
const baseline = padTop + innerH;
const areaPath = `${linePath} L ${points[n - 1][0].toFixed(2)},${baseline} L ${points[0][0].toFixed(2)},${baseline} Z`;
let maxIdx = 0, minIdx = 0;
temps.forEach((t, i) => { if (t > temps[maxIdx]) maxIdx = i; if (t < temps[minIdx]) minIdx = i; });
const gridLines = [0.2, 0.5, 0.8].map((f) => {
const y = padTop + innerH * f;
return `<line x1="${padL}" y1="${y.toFixed(1)}" x2="${W - padR}" y2="${y.toFixed(1)}" stroke="rgba(255,255,255,0.08)" stroke-width="1" stroke-dasharray="1 6"/>`;
}).join('');
let dots = '';
let labels = '';
let hourTicks = '';
for (let i = 0; i < n; i++) {
const [x, y] = points[i];
const isMax = i === maxIdx;
const isMin = i === minIdx;
const r = isMax || isMin ? 5 : 2.6;
const fill = isMax ? '#ffd27a' : isMin ? '#8fd0ff' : 'rgba(255,255,255,0.75)';
dots += `<circle cx="${x.toFixed(2)}" cy="${y.toFixed(2)}" r="${r}" fill="${fill}"${isMax || isMin ? ' stroke="rgba(10,15,26,0.6)" stroke-width="1.5"' : ''}/>`;
const showLabel = isMax || isMin || i % 3 === 0;
if (showLabel) {
const cls = isMax ? 'pt-label is-max' : isMin ? 'pt-label is-min' : 'pt-label';
const ly = clamp(y - 15, 14, H - 6);
labels += `<text class="${cls}" x="${x.toFixed(2)}" y="${ly.toFixed(2)}" text-anchor="middle">${Math.round(temps[i])}\u00b0</text>`;
}
if (i % 3 === 0) {
hourTicks += `<text class="hr-label" x="${x.toFixed(2)}" y="${H - 8}" text-anchor="middle">${hours[i]}</text>`;
}
}
let nowMarker = '';
if (nowFrac !== null && nowFrac >= 0 && nowFrac <= n - 1) {
const nx = padL + (nowFrac / (n - 1)) * innerW;
const lo = Math.floor(nowFrac), hi = Math.min(n - 1, lo + 1);
const frac = nowFrac - lo;
const nt = temps[lo] + (temps[hi] - temps[lo]) * frac;
const ny = yFor(nt);
nowMarker = `
<line x1="${nx.toFixed(2)}" y1="${padTop - 10}" x2="${nx.toFixed(2)}" y2="${baseline}" stroke="rgba(255,255,255,0.5)" stroke-width="1.4" stroke-dasharray="3 4"/>
<circle cx="${nx.toFixed(2)}" cy="${ny.toFixed(2)}" r="6" fill="#fff"/>
<circle cx="${nx.toFixed(2)}" cy="${ny.toFixed(2)}" r="10" fill="none" stroke="#fff" stroke-width="1.5" opacity="0.6"/>
<text class="now-label" x="${nx.toFixed(2)}" y="${padTop - 16}" text-anchor="middle">Now</text>`;
}
return `
<svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="areaFill" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="${theme.accent}" stop-opacity="0.45"/>
<stop offset="1" stop-color="${theme.accent}" stop-opacity="0"/>
</linearGradient>
</defs>
${gridLines}
<path d="${areaPath}" fill="url(#areaFill)"/>
<path d="${linePath}" fill="none" stroke="${theme.accent}" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
${nowMarker}
${dots}
${labels}
${hourTicks}
</svg>
`;
}
/* ============================== Rendering ============================== */
function renderHeader(params) {
el.locationName.textContent = params.name;
el.locationDate.textContent = formatLongDate(params.date);
el.coordsText.textContent = `${formatCoord(params.lat, 'N', 'S')}, ${formatCoord(params.lon, 'E', 'W')}`;
document.title = `${params.name} \u00b7 Weather`;
}
function renderWeather(params, data, sourceLabel) {
const dailyCode = data.daily.weather_code[0];
const tMax = data.daily.temperature_2m_max[0];
const tMin = data.daily.temperature_2m_min[0];
const info = WEATHER_CODES[dailyCode] || { label: 'Unknown', icon: 'cloud', theme: 'cloudy' };
const theme = applyTheme(info.theme);
el.leftPanel.innerHTML = `
<div class="icon-wrap fade-group">
<div class="icon-glow"></div>
${iconMarkup(info.icon)}
</div>
<div class="condition-label fade-group">${info.label}</div>
<div class="temps-row fade-group">
<div class="temp-block is-max">
<span class="temp-value">${fmtTemp(tMax)}</span>
<span class="temp-tag">High</span>
</div>
<div class="temp-sep"></div>
<div class="temp-block is-min">
<span class="temp-value">${fmtTemp(tMin)}</span>
<span class="temp-tag">Low</span>
</div>
</div>
`;
const times = data.hourly.time;
const temps = data.hourly.temperature_2m;
const hourLabels = times.map((t) => {
const h = parseInt(t.slice(11, 13), 10);
if (h === 0) return '12A';
if (h === 12) return '12P';
return h > 12 ? `${h - 12}P` : `${h}A`;
});
let nowFrac = null;
if (params.date === params.today) {
const now = new Date();
nowFrac = now.getUTCHours() + now.getUTCMinutes() / 60;
}
el.chartWrap.innerHTML = `<div class="fade-group" style="width:100%;height:100%;">${buildChartSvg(hourLabels, temps, theme, nowFrac)}</div>`;
el.panelSubtitle.textContent = `${Math.round(Math.min.apply(null, temps))}\u00b0 \u2013 ${Math.round(Math.max.apply(null, temps))}\u00b0 range`;
el.sourceBadge.style.display = 'inline-flex';
el.sourceBadge.textContent = sourceLabel;
}
function renderError(message) {
el.leftPanel.classList.add('is-error');
el.contentRow.innerHTML = `
<div class="error-state fade-group" style="flex: 1 1 auto;">
<svg viewBox="0 0 24 24" fill="none">
<path d="M12 9v4.5M12 17h.01M10.29 3.86 1.82 18a1.5 1.5 0 0 0 1.28 2.25h17.8A1.5 1.5 0 0 0 22.18 18L13.71 3.86a1.5 1.5 0 0 0-2.62 0Z" stroke="#ffb4b4" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/>
</svg>
<div class="error-title">Weather data unavailable</div>
<div class="error-detail">We couldn't load the forecast for this location and date. ${message ? `(${message})` : ''}</div>
<div class="error-hint">Please check your connection or try a different date.</div>
</div>
`;
applyTheme('cloudy');
}
/* ============================== Data fetch ============================== */
function buildRequestUrl(params) {
const isPast = params.date < params.today;
const endpoint = isPast ? '/api/om/forecast'.replace('forecast', isPast ? 'archive' : 'forecast') : '/api/om/forecast';
const path = isPast ? '/api/om/archive' : '/api/om/forecast';
const qs = new URLSearchParams({
latitude: String(params.lat),
longitude: String(params.lon),
daily: 'temperature_2m_max,temperature_2m_min,weather_code',
hourly: 'temperature_2m',
timezone: 'UTC',
temperature_unit: 'celsius',
start_date: params.date,
end_date: params.date,
});
return { url: `${path}?${qs.toString()}`, sourceLabel: isPast ? 'Archive' : 'Forecast' };
}
function validatePayload(data) {
if (!data || typeof data !== 'object') return 'Malformed response';
if (data.error) return data.reason || 'API reported an error';
if (!data.daily || !Array.isArray(data.daily.time) || data.daily.time.length === 0) return 'No daily data returned';
if (!Array.isArray(data.daily.temperature_2m_max) || !Array.isArray(data.daily.temperature_2m_min) || !Array.isArray(data.daily.weather_code)) return 'Incomplete daily data';
if (!data.hourly || !Array.isArray(data.hourly.time) || !Array.isArray(data.hourly.temperature_2m) || data.hourly.time.length === 0) return 'No hourly data returned';
return null;
}
async function main() {
const params = readParams();
renderHeader(params);
const { url, sourceLabel } = buildRequestUrl(params);
try {
const res = await fetch(url);
let payload = null;
try { payload = await res.json(); } catch (e) { /* fall through to error below */ }
if (!res.ok) {
const reason = (payload && payload.reason) ? payload.reason : `Request failed with status ${res.status}`;
throw new Error(reason);
}
const validationError = validatePayload(payload);
if (validationError) throw new Error(validationError);
renderWeather(params, payload, sourceLabel);
} catch (err) {
renderError(err && err.message ? err.message : 'Unknown error');
}
}
main();
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 36,359 | html / css / js | 3,185 / 11,142 / 22,032 |
|---|---|---|---|
| dom nodes | 48 | dom depth | 7 |
| css rules | 98 | js present | yes |
| brightness | 56.7 | contrast | 20.0 |
| colorfulness | 19.8 | whitespace | 58.3% |
This slot's telemetry
| prompt tokens | 16 | completion tokens | 57,698 |
|---|---|---|---|
| total tokens | 57,714 | wall | 644.9 s |
| cost | — | request id | — |
config.json584 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "claude-sonnet-5-eff-max--cli--cursor-xl--dev",
"effort": "max",
"family": "claude",
"m": {
"min": 1,
"q": 1
},
"model_id": "claude-sonnet-5",
"protocol": "cli",
"served_model": "claude-sonnet-5-max",
"telemetry": {
"completion_tokens": 121459,
"cost_usd": null,
"prompt_tokens": 132,
"total_tokens": 121591,
"wall_ms": 2466965
},
"transport": "cursor-agent-cli-isolated-home",
"vendor_sanction_ref": null
}send-log2.5 KB
{
"N": 2,
"batch_id": "2026-08-13--cursor-xl-s1",
"config_id": "claude-sonnet-5-eff-max--cli--cursor-xl--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-08-13T12:22:05.729097+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T12:11:20.835268+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:52:32.329999+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T12:22:10.286611+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:52:35.956576+00:00",
"http_status": null,
"outcome": "infra-failed",
"reached_model": true,
"reason": "mid-stream-death",
"request_id": null,
"started_at": "2026-08-13T12:52:35.893379+00:00"
}
],
"block_index": 1,
"model_reaching_attempt_index": 0,
"slot_index": 1,
"terminal_state": "infra-failed",
"variant": "P-min"
},
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-08-13T14:32:39.345420+00:00",
"http_status": null,
"outcome": "infra-failed",
"reached_model": true,
"reason": "mid-stream-death",
"request_id": null,
"started_at": "2026-08-13T13:52:35.957523+00:00"
}
],
"block_index": 1,
"model_reaching_attempt_index": 0,
"slot_index": 1,
"terminal_state": "infra-failed",
"variant": "P-q"
}
],
"retry_policy": {
"max_unreachable_retries": 5,
"rate_limit_backoff": {
"max_attempts": 4,
"max_total_ms": 60000
}
}
}