claude-opus-4-7-thinking @ max · cursor
cursormax
- config
- claude-opus-4-7-thinking-eff-max--cli--cursor--dev
- batch
- 2026-07-19--unified
- transport
- cursor-agent-cli-isolated-home
- protocol
- cli · plan
- served model
- claude-opus-4-7-thinking-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 tempambiguousno-remaining-candidate
- 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=1280, initial-scale=1">
<title>Weather</title>
<style>
:root {
color-scheme: dark;
--bg-inner: #3b82f6;
--bg-outer: #0c1e4b;
--accent: #93c5fd;
--text: #f8fafc;
--text-dim: rgba(248, 250, 252, 0.65);
--text-faint: rgba(248, 250, 252, 0.32);
--card-bg: rgba(255, 255, 255, 0.04);
--card-border: rgba(255, 255, 255, 0.09);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
width: 100%; height: 100%;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
color: var(--text);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
background: #000;
display: flex; align-items: center; justify-content: center;
padding: 40px; position: relative; overflow: hidden;
}
.bg {
position: fixed; inset: 0; z-index: -2;
background:
radial-gradient(ellipse 55% 45% at 18% 20%, var(--bg-inner) 0%, transparent 55%),
radial-gradient(ellipse 65% 55% at 82% 82%, var(--bg-inner) 0%, transparent 55%),
linear-gradient(160deg, var(--bg-outer) 0%, #020617 100%);
opacity: 0.9;
transition: background 0.8s ease;
}
.noise {
position: fixed; inset: 0; z-index: -1;
opacity: 0.04; pointer-events: none; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.card {
width: 100%; max-width: 1120px; height: 680px;
background: var(--card-bg);
backdrop-filter: blur(30px) saturate(1.4);
-webkit-backdrop-filter: blur(30px) saturate(1.4);
border: 1px solid var(--card-border);
border-radius: 32px;
display: grid; grid-template-columns: 440px 1fr;
overflow: hidden;
box-shadow:
0 40px 80px -20px rgba(0, 0, 0, 0.7),
0 0 0 1px rgba(255, 255, 255, 0.02),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
position: relative;
opacity: 0;
animation: fadeIn 0.6s ease 0.1s forwards;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.hero {
padding: 44px;
display: flex; flex-direction: column;
background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.2) 100%);
border-right: 1px solid var(--card-border);
position: relative;
min-width: 0;
}
.location-row {
display: flex; align-items: center; gap: 10px;
margin-bottom: 6px;
color: var(--accent);
}
.pin { width: 12px; height: 12px; flex-shrink: 0; }
.location-label {
font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.22em;
}
.name {
font-size: 34px; font-weight: 600;
letter-spacing: -0.025em; line-height: 1.15;
margin-bottom: 5px;
overflow-wrap: break-word;
}
.date {
font-size: 14.5px; color: var(--text-dim); font-weight: 500;
letter-spacing: -0.005em;
}
.icon-wrap {
flex: 1;
display: flex; justify-content: center; align-items: center;
position: relative; min-height: 0; margin: 12px 0;
}
.icon-glow {
position: absolute; inset: 0;
background: radial-gradient(circle at center, var(--accent) 0%, transparent 42%);
opacity: 0.35; filter: blur(20px); pointer-events: none;
}
.icon {
width: 200px; height: 200px;
position: relative; z-index: 1;
filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.4));
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.condition {
font-size: 19px; font-weight: 500;
letter-spacing: -0.01em; margin-bottom: 14px;
}
.temps {
display: flex; align-items: flex-start; gap: 24px;
}
.temp-max {
font-size: 108px; font-weight: 200;
letter-spacing: -0.055em; line-height: 1;
display: flex; align-items: flex-start;
}
.temp-max .deg {
font-size: 52px; font-weight: 200;
color: var(--text-dim);
margin-top: 8px; margin-left: 2px; line-height: 1;
}
.temp-min-wrap {
display: flex; flex-direction: column; gap: 4px;
padding-top: 24px;
}
.temp-min-label {
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.22em;
color: var(--text-faint);
}
.temp-min {
font-size: 24px; font-weight: 400;
color: var(--text-dim); letter-spacing: -0.02em;
}
.chart-section {
padding: 44px;
display: flex; flex-direction: column;
min-width: 0;
}
.chart-header {
display: flex; justify-content: space-between; align-items: flex-start;
margin-bottom: 20px;
}
.chart-title {
font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.22em;
color: var(--accent); margin-bottom: 6px;
}
.chart-subtitle {
font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
}
.chart-meta {
text-align: right; padding-top: 6px;
font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.18em;
color: var(--text-faint);
}
.chart-wrap {
flex: 1; position: relative; min-height: 0;
}
svg.chart-svg {
width: 100%; height: 100%; display: block; overflow: visible;
}
.chart-empty {
display: flex; align-items: center; justify-content: center;
height: 100%; color: var(--text-dim); font-size: 14px;
}
.error, .loading {
grid-column: 1 / -1;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center; padding: 40px; gap: 14px;
}
.error-icon {
width: 52px; height: 52px; color: var(--text-dim); margin-bottom: 4px;
}
.error-title {
font-size: 22px; font-weight: 600; letter-spacing: -0.01em;
}
.error-msg {
font-size: 14px; color: var(--text-dim);
max-width: 480px; line-height: 1.55;
}
.spinner {
width: 28px; height: 28px;
border: 2px solid var(--card-border); border-top-color: var(--text);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.loading-text {
font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.22em;
color: var(--text-dim);
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.icon, .card { animation: none !important; }
}
</style>
</head>
<body>
<div class="bg"></div>
<div class="noise"></div>
<main class="card" id="card">
<div class="loading">
<div class="spinner"></div>
<div class="loading-text">Loading weather</div>
</div>
</main>
<script>
const WMO = {
0: ['Clear sky', 'clear'],
1: ['Mainly clear', 'clear'],
2: ['Partly cloudy', 'partly'],
3: ['Overcast', 'cloudy'],
45: ['Fog', 'fog'],
48: ['Depositing rime fog', 'fog'],
51: ['Light drizzle', 'drizzle'],
53: ['Moderate drizzle', 'drizzle'],
55: ['Dense drizzle', 'drizzle'],
56: ['Light freezing drizzle', 'drizzle'],
57: ['Dense freezing drizzle', 'drizzle'],
61: ['Light rain', 'rain'],
63: ['Moderate rain', 'rain'],
65: ['Heavy rain', 'rain'],
66: ['Light freezing rain', 'rain'],
67: ['Heavy freezing rain', 'rain'],
71: ['Light snowfall', 'snow'],
73: ['Moderate snowfall', 'snow'],
75: ['Heavy snowfall', 'snow'],
77: ['Snow grains', 'snow'],
80: ['Light rain showers', 'rain'],
81: ['Moderate rain showers', 'rain'],
82: ['Violent rain showers', 'rain'],
85: ['Light snow showers', 'snow'],
86: ['Heavy snow showers', 'snow'],
95: ['Thunderstorm', 'thunder'],
96: ['Thunderstorm with hail', 'thunder'],
99: ['Severe thunderstorm with hail', 'thunder'],
};
const THEMES = {
clear: { inner:'#f97316', outer:'#431407', accent:'#fcd34d', chart:'#fbbf24', fill:'#f59e0b' },
partly: { inner:'#3b82f6', outer:'#0c1e4b', accent:'#93c5fd', chart:'#7dd3fc', fill:'#0ea5e9' },
cloudy: { inner:'#64748b', outer:'#0f172a', accent:'#cbd5e1', chart:'#94a3b8', fill:'#64748b' },
fog: { inner:'#94a3b8', outer:'#1e293b', accent:'#e2e8f0', chart:'#cbd5e1', fill:'#94a3b8' },
drizzle: { inner:'#38bdf8', outer:'#082f49', accent:'#bae6fd', chart:'#7dd3fc', fill:'#0ea5e9' },
rain: { inner:'#2563eb', outer:'#0c1e4b', accent:'#93c5fd', chart:'#60a5fa', fill:'#2563eb' },
snow: { inner:'#7dd3fc', outer:'#0c4a6e', accent:'#f0f9ff', chart:'#e0f2fe', fill:'#7dd3fc' },
thunder: { inner:'#a855f7', outer:'#2e1065', accent:'#c4b5fd', chart:'#a78bfa', fill:'#7c3aed' },
};
const CLOUD_PATH = 'M 55,145 C 30,145 25,115 52,108 C 52,72 105,62 122,95 C 138,72 172,82 172,115 C 195,120 190,148 165,148 Z';
const SMALL_CLOUD_PATH = 'M 82,158 C 62,158 60,132 82,127 C 82,102 118,95 132,120 C 146,105 172,112 172,132 C 190,135 186,158 165,158 Z';
const ICON_DEFS = `<defs>
<radialGradient id="sunGrad" cx="0.35" cy="0.35"><stop offset="0%" stop-color="#fef9c3"/><stop offset="55%" stop-color="#fbbf24"/><stop offset="100%" stop-color="#c2410c"/></radialGradient>
<linearGradient id="cloudGrad" x1="0.3" y1="0" x2="0.7" y2="1"><stop offset="0%" stop-color="#ffffff"/><stop offset="55%" stop-color="#e2e8f0"/><stop offset="100%" stop-color="#94a3b8"/></linearGradient>
<linearGradient id="darkCloudGrad" x1="0.3" y1="0" x2="0.7" y2="1"><stop offset="0%" stop-color="#94a3b8"/><stop offset="100%" stop-color="#475569"/></linearGradient>
<linearGradient id="dropGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#7dd3fc"/><stop offset="100%" stop-color="#2563eb"/></linearGradient>
<radialGradient id="snowGrad"><stop offset="0%" stop-color="#ffffff"/><stop offset="100%" stop-color="#bae6fd"/></radialGradient>
<linearGradient id="boltGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#fef08a"/><stop offset="100%" stop-color="#f59e0b"/></linearGradient>
</defs>`;
function iconSun() {
return `<svg class="icon" viewBox="0 0 200 200" fill="none">${ICON_DEFS}
<g stroke="#fbbf24" stroke-width="5" stroke-linecap="round" opacity="0.95">
<line x1="100" y1="14" x2="100" y2="34"/><line x1="100" y1="166" x2="100" y2="186"/>
<line x1="14" y1="100" x2="34" y2="100"/><line x1="166" y1="100" x2="186" y2="100"/>
<line x1="39" y1="39" x2="53" y2="53"/><line x1="147" y1="147" x2="161" y2="161"/>
<line x1="39" y1="161" x2="53" y2="147"/><line x1="147" y1="53" x2="161" y2="39"/>
</g>
<circle cx="100" cy="100" r="48" fill="url(#sunGrad)"/>
</svg>`;
}
function iconPartly() {
return `<svg class="icon" viewBox="0 0 200 200" fill="none">${ICON_DEFS}
<g stroke="#fbbf24" stroke-width="4" stroke-linecap="round" opacity="0.95">
<line x1="72" y1="12" x2="72" y2="26"/><line x1="14" y1="70" x2="28" y2="70"/>
<line x1="126" y1="70" x2="112" y2="70"/><line x1="28" y1="26" x2="38" y2="36"/>
<line x1="116" y1="26" x2="106" y2="36"/>
</g>
<circle cx="72" cy="70" r="30" fill="url(#sunGrad)"/>
<path d="${SMALL_CLOUD_PATH}" fill="url(#cloudGrad)"/>
</svg>`;
}
function iconCloudy() {
return `<svg class="icon" viewBox="0 0 200 200" fill="none">${ICON_DEFS}
<path d="${CLOUD_PATH}" fill="url(#cloudGrad)"/>
</svg>`;
}
function iconFog() {
return `<svg class="icon" viewBox="0 0 200 200" fill="none">${ICON_DEFS}
<path d="${CLOUD_PATH}" fill="url(#cloudGrad)" opacity="0.85"/>
<g stroke="#cbd5e1" stroke-width="6" stroke-linecap="round" opacity="0.75">
<line x1="40" y1="168" x2="145" y2="168"/>
<line x1="55" y1="185" x2="170" y2="185"/>
</g>
</svg>`;
}
function iconRain() {
return `<svg class="icon" viewBox="0 0 200 200" fill="none">${ICON_DEFS}
<path d="${CLOUD_PATH}" fill="url(#darkCloudGrad)"/>
<g fill="url(#dropGrad)">
<path d="M 68,158 Q 78,172 68,182 Q 58,172 68,158 Z"/>
<path d="M 100,162 Q 110,178 100,190 Q 90,178 100,162 Z"/>
<path d="M 132,158 Q 142,172 132,182 Q 122,172 132,158 Z"/>
</g>
</svg>`;
}
function iconDrizzle() {
return `<svg class="icon" viewBox="0 0 200 200" fill="none">${ICON_DEFS}
<path d="${CLOUD_PATH}" fill="url(#cloudGrad)"/>
<g stroke="url(#dropGrad)" stroke-width="3" stroke-linecap="round">
<line x1="72" y1="158" x2="66" y2="180"/>
<line x1="100" y1="162" x2="94" y2="184"/>
<line x1="128" y1="158" x2="122" y2="180"/>
</g>
</svg>`;
}
function iconSnow() {
return `<svg class="icon" viewBox="0 0 200 200" fill="none">${ICON_DEFS}
<path d="${CLOUD_PATH}" fill="url(#cloudGrad)"/>
<g fill="url(#snowGrad)">
<circle cx="70" cy="170" r="6"/>
<circle cx="100" cy="180" r="6"/>
<circle cx="132" cy="170" r="6"/>
</g>
</svg>`;
}
function iconThunder() {
return `<svg class="icon" viewBox="0 0 200 200" fill="none">${ICON_DEFS}
<path d="${CLOUD_PATH}" fill="url(#darkCloudGrad)"/>
<path d="M 105,148 L 82,178 L 100,178 L 90,198 L 128,168 L 108,168 L 118,148 Z" fill="url(#boltGrad)" stroke="#fef08a" stroke-width="1" stroke-linejoin="round"/>
</svg>`;
}
function iconFor(kind) {
return ({ clear:iconSun, partly:iconPartly, cloudy:iconCloudy, fog:iconFog, drizzle:iconDrizzle, rain:iconRain, snow:iconSnow, thunder:iconThunder }[kind] || iconCloudy)();
}
function iconPin() {
return `<svg class="pin" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C7.58 2 4 5.58 4 10c0 5.25 8 12 8 12s8-6.75 8-12c0-4.42-3.58-8-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg>`;
}
function iconErr() {
return `<svg class="error-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9.5"/><path d="M12 7v6"/><circle cx="12" cy="16.5" r="0.8" fill="currentColor"/></svg>`;
}
function parseDateUTC(s) {
const [y, m, d] = s.split('-').map(Number);
return new Date(Date.UTC(y, m - 1, d));
}
function todayUTC() { return new Date().toISOString().slice(0, 10); }
function formatDate(dateStr) {
const d = parseDateUTC(dateStr);
const days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
const months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
return `${days[d.getUTCDay()]}, ${months[d.getUTCMonth()]} ${d.getUTCDate()}, ${d.getUTCFullYear()}`;
}
function fmtTemp(t) { return `${Math.round(t)}°`; }
function smoothPath(pts, tension) {
tension = tension == null ? 0.2 : tension;
if (!pts.length) return '';
let d = `M ${pts[0][0].toFixed(1)},${pts[0][1].toFixed(1)}`;
for (let i = 0; i < pts.length - 1; i++) {
const p0 = pts[i - 1] || pts[i];
const p1 = pts[i];
const p2 = pts[i + 1];
const p3 = pts[i + 2] || p2;
const cp1x = p1[0] + (p2[0] - p0[0]) * tension;
const cp1y = p1[1] + (p2[1] - p0[1]) * tension;
const cp2x = p2[0] - (p3[0] - p1[0]) * tension;
const cp2y = p2[1] - (p3[1] - p1[1]) * tension;
d += ` C ${cp1x.toFixed(1)},${cp1y.toFixed(1)} ${cp2x.toFixed(1)},${cp2y.toFixed(1)} ${p2[0].toFixed(1)},${p2[1].toFixed(1)}`;
}
return d;
}
function buildChart(times, temps, theme) {
const w = 600, h = 520;
const padL = 32, padR = 28, padT = 58, padB = 52;
const pw = w - padL - padR;
const ph = h - padT - padB;
const cleanTemps = [];
const cleanTimes = [];
for (let i = 0; i < temps.length; i++) {
if (Number.isFinite(temps[i])) {
cleanTemps.push(temps[i]);
cleanTimes.push(times[i]);
}
}
if (cleanTemps.length === 0) {
return `<div class="chart-empty">No hourly data available</div>`;
}
const rawMin = Math.min.apply(null, cleanTemps);
const rawMax = Math.max.apply(null, cleanTemps);
const rawRange = Math.max(rawMax - rawMin, 2);
const padY = Math.max(rawRange * 0.18, 1.5);
const yMin = Math.floor(rawMin - padY);
const yMax = Math.ceil(rawMax + padY);
const N = cleanTemps.length;
const xOf = i => padL + (N === 1 ? pw / 2 : (i / (N - 1)) * pw);
const yOf = t => padT + ((yMax - t) / (yMax - yMin)) * ph;
const pts = cleanTemps.map((t, i) => [xOf(i), yOf(t)]);
const linePath = smoothPath(pts);
const areaPath = pts.length > 1
? `${linePath} L ${xOf(N-1).toFixed(1)},${(padT + ph).toFixed(1)} L ${xOf(0).toFixed(1)},${(padT + ph).toFixed(1)} Z`
: '';
let minIdx = 0, maxIdx = 0;
for (let i = 1; i < cleanTemps.length; i++) {
if (cleanTemps[i] < cleanTemps[minIdx]) minIdx = i;
if (cleanTemps[i] > cleanTemps[maxIdx]) maxIdx = i;
}
const yStep = Math.max(1, Math.ceil((yMax - yMin) / 4));
let gridLines = '', gridLabels = '';
for (let t = yMin; t <= yMax; t += yStep) {
const y = yOf(t);
gridLines += `<line x1="${padL}" y1="${y.toFixed(1)}" x2="${(padL + pw).toFixed(1)}" y2="${y.toFixed(1)}" stroke="rgba(255,255,255,0.06)" stroke-width="1"/>`;
gridLabels += `<text x="${(padL - 8).toFixed(1)}" y="${(y + 4).toFixed(1)}" fill="rgba(255,255,255,0.35)" font-size="11" font-weight="500" text-anchor="end">${t}°</text>`;
}
let hourLabels = '';
const marks = N >= 24 ? [0, 6, 12, 18, 23] : (N > 1 ? [0, Math.floor(N/2), N-1] : [0]);
for (const idx of marks) {
if (idx >= N) continue;
const timeStr = cleanTimes[idx] ? String(cleanTimes[idx]).slice(11, 16) : '';
if (!timeStr) continue;
const x = xOf(idx);
hourLabels += `<text x="${x.toFixed(1)}" y="${(padT + ph + 26).toFixed(1)}" fill="rgba(255,255,255,0.5)" font-size="11" font-weight="600" text-anchor="middle" letter-spacing="0.05em">${timeStr}</text>`;
}
let dots = '';
for (let i = 0; i < pts.length; i++) {
dots += `<circle cx="${pts[i][0].toFixed(1)}" cy="${pts[i][1].toFixed(1)}" r="2" fill="${theme.chart}" opacity="0.55"/>`;
}
const maxX = pts[maxIdx][0], maxY = pts[maxIdx][1];
const minX = pts[minIdx][0], minY = pts[minIdx][1];
const maxLabel = `<g>
<circle cx="${maxX.toFixed(1)}" cy="${maxY.toFixed(1)}" r="11" fill="${theme.chart}" opacity="0.22"/>
<circle cx="${maxX.toFixed(1)}" cy="${maxY.toFixed(1)}" r="5" fill="${theme.chart}" stroke="rgba(255,255,255,0.7)" stroke-width="1.5"/>
<text x="${maxX.toFixed(1)}" y="${(maxY - 15).toFixed(1)}" fill="#ffffff" stroke="rgba(0,0,0,0.6)" stroke-width="3" paint-order="stroke" font-size="13" font-weight="700" text-anchor="middle">${fmtTemp(cleanTemps[maxIdx])}</text>
</g>`;
const minLabel = minIdx !== maxIdx ? `<g>
<circle cx="${minX.toFixed(1)}" cy="${minY.toFixed(1)}" r="11" fill="${theme.chart}" opacity="0.22"/>
<circle cx="${minX.toFixed(1)}" cy="${minY.toFixed(1)}" r="5" fill="${theme.chart}" stroke="rgba(255,255,255,0.7)" stroke-width="1.5"/>
<text x="${minX.toFixed(1)}" y="${(minY + 22).toFixed(1)}" fill="#ffffff" stroke="rgba(0,0,0,0.6)" stroke-width="3" paint-order="stroke" font-size="13" font-weight="700" text-anchor="middle">${fmtTemp(cleanTemps[minIdx])}</text>
</g>` : '';
return `<svg class="chart-svg" viewBox="0 0 ${w} ${h}" preserveAspectRatio="xMidYMid meet">
<defs>
<linearGradient id="areaFill" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="${theme.fill}" stop-opacity="0.55"/>
<stop offset="100%" stop-color="${theme.fill}" stop-opacity="0"/>
</linearGradient>
<linearGradient id="lineGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="${theme.chart}" stop-opacity="0.9"/>
<stop offset="100%" stop-color="${theme.accent}" stop-opacity="1"/>
</linearGradient>
</defs>
<g>${gridLines}</g>
<g>${gridLabels}</g>
${areaPath ? `<path d="${areaPath}" fill="url(#areaFill)"/>` : ''}
<path d="${linePath}" fill="none" stroke="url(#lineGrad)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<g>${dots}</g>
${maxLabel}
${minLabel}
<g>${hourLabels}</g>
</svg>`;
}
function applyTheme(theme) {
const root = document.documentElement;
root.style.setProperty('--bg-inner', theme.inner);
root.style.setProperty('--bg-outer', theme.outer);
root.style.setProperty('--accent', theme.accent);
}
function escapeHtml(s) {
return String(s).replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
}
function render(ctx) {
const name = ctx.name, date = ctx.date, data = ctx.data;
const daily = data && data.daily;
const hourly = data && data.hourly;
if (!daily || !hourly) throw new Error('Malformed response');
const tMax = daily.temperature_2m_max && daily.temperature_2m_max[0];
const tMin = daily.temperature_2m_min && daily.temperature_2m_min[0];
const code = daily.weather_code && daily.weather_code[0];
if (!Number.isFinite(tMax) || !Number.isFinite(tMin)) {
throw new Error('Missing temperature data');
}
const info = WMO[code] || ['Unknown conditions', 'cloudy'];
const theme = THEMES[info[1]] || THEMES.partly;
applyTheme(theme);
const times = hourly.time || [];
const temps = hourly.temperature_2m || [];
document.title = `${name} · ${fmtTemp(tMax)} / ${fmtTemp(tMin)} · Weather`;
const card = document.getElementById('card');
card.innerHTML = `
<section class="hero">
<div>
<div class="location-row">${iconPin()}<span class="location-label">Location</span></div>
<h1 class="name">${escapeHtml(name)}</h1>
<div class="date">${escapeHtml(formatDate(date))}</div>
</div>
<div class="icon-wrap">
<div class="icon-glow"></div>
${iconFor(info[1])}
</div>
<div>
<div class="condition">${escapeHtml(info[0])}</div>
<div class="temps">
<div class="temp-max">${Math.round(tMax)}<span class="deg">°</span></div>
<div class="temp-min-wrap">
<div class="temp-min-label">Low</div>
<div class="temp-min">${Math.round(tMin)}°</div>
</div>
</div>
</div>
</section>
<section class="chart-section">
<div class="chart-header">
<div>
<div class="chart-title">Hourly Temperature</div>
<div class="chart-subtitle">Throughout the day</div>
</div>
<div class="chart-meta">UTC · °C</div>
</div>
<div class="chart-wrap">${buildChart(times, temps, theme)}</div>
</section>
`;
}
function renderError(err) {
const detail = err && err.message ? `: ${escapeHtml(err.message)}` : '.';
document.getElementById('card').innerHTML = `
<div class="error">
${iconErr()}
<div class="error-title">Weather data unavailable</div>
<div class="error-msg">We couldn't load the forecast for this location and date${detail}</div>
</div>
`;
}
async function main() {
try {
const params = new URLSearchParams(location.search);
const latRaw = parseFloat(params.get('lat'));
const lonRaw = parseFloat(params.get('lon'));
const latitude = Number.isFinite(latRaw) ? latRaw : 52.52;
const longitude = Number.isFinite(lonRaw) ? lonRaw : 13.405;
const name = params.get('name') || 'Berlin';
const today = todayUTC();
const dateParam = params.get('date');
const date = (dateParam && /^\d{4}-\d{2}-\d{2}$/.test(dateParam)) ? dateParam : today;
const isPast = date < today;
const endpoint = isPast ? '/api/om/archive' : '/api/om/forecast';
const qs = new URLSearchParams({
latitude: String(latitude),
longitude: String(longitude),
daily: 'temperature_2m_max,temperature_2m_min,weather_code',
hourly: 'temperature_2m',
timezone: 'UTC',
temperature_unit: 'celsius',
start_date: date,
end_date: date,
});
const resp = await fetch(`${endpoint}?${qs.toString()}`);
if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
const data = await resp.json();
render({ name: name, date: date, data: data });
} catch (err) {
console.error(err);
renderError(err);
}
}
main();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 23,975 | html / css / js | 415 / 6,114 / 17,446 |
|---|---|---|---|
| dom nodes | 14 | dom depth | 5 |
| css rules | 47 | js present | yes |
| brightness | 49.7 | contrast | 33.9 |
| colorfulness | 65.2 | whitespace | 46.1% |
This slot's telemetry
| prompt tokens | 6 | completion tokens | 101,716 |
|---|---|---|---|
| total tokens | 101,722 | wall | 820.8 s |
| cost | — | request id | — |
config.json607 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "claude-opus-4-7-thinking-eff-max--cli--cursor--dev",
"effort": "max",
"family": "claude",
"m": {
"min": 2,
"q": 1
},
"model_id": "claude-opus-4-7-thinking",
"protocol": "cli",
"served_model": "claude-opus-4-7-thinking-max",
"telemetry": {
"completion_tokens": 150258,
"cost_usd": null,
"prompt_tokens": 20,
"total_tokens": 150278,
"wall_ms": 1214840
},
"transport": "cursor-agent-cli-isolated-home",
"vendor_sanction_ref": null
}send-log2.5 KB
{
"N": 2,
"batch_id": "2026-08-13--cursor-s2",
"config_id": "claude-opus-4-7-thinking-eff-max--cli--cursor--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-08-13T01:14:21.794508+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T01:12:47.462202+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-13T01:28:05.959864+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T01:14:25.114582+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-13T01:53:09.956891+00:00",
"http_status": null,
"outcome": "infra-failed",
"reached_model": true,
"reason": "mid-stream-death",
"request_id": null,
"started_at": "2026-08-13T01:28:09.863760+00:00"
}
],
"block_index": 1,
"model_reaching_attempt_index": 0,
"slot_index": 1,
"terminal_state": "infra-failed",
"variant": "P-q"
},
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-08-13T01:58:09.630258+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T01:53:09.958042+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
}
}
}