claude-opus-4-7-thinking @ high · cursor-xl
cursor-xlhigh
- config
- claude-opus-4-7-thinking-eff-high--cli--cursor-xl--dev
- batch
- 2026-07-19--unified
- transport
- cursor-agent-cli-isolated-home
- protocol
- cli · plan
- served model
- claude-opus-4-7-thinking-high
- 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-7-thinking @low · cursor0.74claude-opus-4-7-thinking @high · cursor0.73claude-opus-4-7 @max · cursor0.72claude-opus-4-7 @medium · cursor-xl0.72claude-opus-4-7 @high · kiro0.72farthest
north-mini-code-free · api0.50claude-sonnet-4 · cursor0.53qwen3.5-plus · go0.53minimax-m2.5 · go0.53claude-sonnet-4-5-thinking · cursor-xl0.53within session 2026-07-19--unified
similarity measures convergence within this session — not quality.
Fidelity — does the card show the right data?
- namematch
- conditionmatch
- dateambiguousmulti-candidate-conflict
- max tempmatchshown: 25
- 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" />
<title>Weather</title>
<style>
:root {
--bg-0: #0b1020;
--bg-1: #131a33;
--ink: #eef2ff;
--ink-dim: #aeb6d8;
--ink-mute: #7a83a8;
--line: rgba(255,255,255,0.08);
--line-strong: rgba(255,255,255,0.14);
--card: rgba(255,255,255,0.045);
--card-hi: rgba(255,255,255,0.08);
--accent: #ffd166;
--cool: #7cc4ff;
--warm: #ff8a65;
--hot: #ff5c7a;
--cold: #93c5fd;
--shadow: 0 30px 80px -20px rgba(0,0,0,0.55), 0 8px 24px -12px rgba(0,0,0,0.4);
--radius: 22px;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--ink);
background: var(--bg-0);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
letter-spacing: -0.01em;
}
body {
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
min-height: 100vh;
background:
radial-gradient(1200px 700px at 12% -10%, #22305e 0%, transparent 55%),
radial-gradient(900px 600px at 100% 110%, #2a1a4a 0%, transparent 55%),
linear-gradient(160deg, #0b1020 0%, #0a0f1f 100%);
}
.card {
position: relative;
width: 1200px;
min-height: 720px;
border-radius: var(--radius);
padding: 40px;
background:
linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015) 60%),
linear-gradient(180deg, #171d38 0%, #10152a 100%);
border: 1px solid var(--line-strong);
box-shadow: var(--shadow);
overflow: hidden;
isolation: isolate;
}
.card::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(160deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 40%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.halo {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
border-radius: inherit;
}
.halo::before,
.halo::after {
content: "";
position: absolute;
width: 640px;
height: 640px;
border-radius: 50%;
filter: blur(80px);
opacity: 0.45;
}
.halo::before {
top: -220px;
left: -160px;
background: radial-gradient(closest-side, #4a7bff, transparent);
}
.halo::after {
bottom: -260px;
right: -180px;
background: radial-gradient(closest-side, #b26bff, transparent);
opacity: 0.35;
}
.content {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 36px;
height: 100%;
}
header.meta {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
color: var(--ink-dim);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.brand .dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px rgba(255,209,102,0.15);
}
.coords {
color: var(--ink-mute);
font-variant-numeric: tabular-nums;
font-size: 12.5px;
letter-spacing: 0.06em;
}
.primary {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 28px;
min-height: 560px;
}
.place {
display: flex;
flex-direction: column;
gap: 6px;
}
.place .date {
color: var(--ink-dim);
font-size: 15px;
letter-spacing: 0.02em;
}
.place h1 {
margin: 0;
font-size: 68px;
line-height: 1.02;
font-weight: 700;
letter-spacing: -0.03em;
background: linear-gradient(180deg, #ffffff, #cfd6ff 120%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.place .condition {
margin-top: 8px;
color: var(--ink);
font-size: 20px;
font-weight: 500;
}
.place .condition .sep {
color: var(--ink-mute);
margin: 0 10px;
}
.hero {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 28px;
}
.icon-wrap {
width: 170px;
height: 170px;
border-radius: 28px;
background:
radial-gradient(120% 120% at 20% 15%, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 60%),
linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
border: 1px solid var(--line-strong);
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.icon-wrap svg { width: 128px; height: 128px; display: block; }
.temp {
display: flex;
flex-direction: column;
gap: 10px;
}
.temp .now {
font-size: 92px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: flex-start;
}
.temp .now .deg {
font-size: 44px;
margin-top: 8px;
margin-left: 4px;
color: var(--ink-dim);
font-weight: 500;
}
.temp .range {
display: flex;
align-items: center;
gap: 18px;
color: var(--ink-dim);
font-size: 16px;
font-variant-numeric: tabular-nums;
}
.pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
background: var(--card);
border: 1px solid var(--line);
font-size: 14px;
color: var(--ink);
font-weight: 500;
}
.pill .swatch {
width: 10px; height: 10px; border-radius: 50%;
}
.pill.high .swatch { background: var(--warm); box-shadow: 0 0 12px var(--warm); }
.pill.low .swatch { background: var(--cold); box-shadow: 0 0 12px var(--cold); }
.pill .lbl { color: var(--ink-mute); font-weight: 500; letter-spacing: 0.02em; }
.pill .val { font-variant-numeric: tabular-nums; }
.stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.stat {
padding: 16px 18px;
border-radius: 16px;
background: var(--card);
border: 1px solid var(--line);
}
.stat .k {
display: block;
color: var(--ink-mute);
font-size: 11.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 6px;
}
.stat .v {
font-size: 22px;
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.stat .u {
color: var(--ink-mute);
font-size: 14px;
font-weight: 500;
margin-left: 4px;
}
.side {
display: flex;
flex-direction: column;
gap: 20px;
min-height: 560px;
}
.panel {
background:
linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
border: 1px solid var(--line);
border-radius: 20px;
padding: 22px 22px 18px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.panel h2 {
margin: 0 0 14px 0;
font-size: 12px;
font-weight: 600;
color: var(--ink-mute);
letter-spacing: 0.18em;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: space-between;
}
.panel h2 .aux {
color: var(--ink-mute);
font-size: 11px;
letter-spacing: 0.14em;
font-weight: 500;
}
.chart {
position: relative;
height: 200px;
margin: 4px -4px 4px;
}
.chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart .axis-y {
position: absolute;
left: 0; top: 0; bottom: 20px;
display: flex; flex-direction: column;
justify-content: space-between;
color: var(--ink-mute);
font-size: 10.5px;
font-variant-numeric: tabular-nums;
pointer-events: none;
}
.chart .axis-x {
display: flex;
justify-content: space-between;
color: var(--ink-mute);
font-size: 10.5px;
padding: 6px 2px 0;
font-variant-numeric: tabular-nums;
}
.hours {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 8px;
margin-top: 6px;
}
.hour {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 12px 6px 10px;
border-radius: 14px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--line);
transition: transform 0.15s ease, background 0.15s ease;
}
.hour.now {
background: linear-gradient(180deg, rgba(255,209,102,0.14), rgba(255,209,102,0.03));
border-color: rgba(255,209,102,0.35);
box-shadow: 0 0 0 1px rgba(255,209,102,0.15), 0 8px 24px -12px rgba(255,209,102,0.4);
}
.hour .h {
color: var(--ink-mute);
font-size: 11px;
letter-spacing: 0.06em;
font-variant-numeric: tabular-nums;
}
.hour .t {
font-size: 15px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.hour .bar {
width: 4px;
height: 22px;
border-radius: 3px;
background: linear-gradient(180deg, var(--warm), var(--cold));
opacity: 0.85;
}
.footer {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
color: var(--ink-mute);
font-size: 12px;
padding-top: 8px;
border-top: 1px dashed var(--line);
margin-top: 4px;
letter-spacing: 0.04em;
}
.footer .lhs { display: flex; gap: 18px; align-items: center; }
.footer .rhs { font-variant-numeric: tabular-nums; }
/* Status states */
.state {
position: relative;
z-index: 1;
padding: 60px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 14px;
min-height: 560px;
}
.state .icon {
width: 72px; height: 72px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(255,90,110,0.12);
border: 1px solid rgba(255,90,110,0.35);
color: #ff8fa0;
font-size: 32px;
font-weight: 600;
}
.state h3 {
margin: 6px 0 0;
font-size: 22px;
font-weight: 600;
}
.state p {
margin: 0;
color: var(--ink-dim);
font-size: 14px;
max-width: 520px;
line-height: 1.5;
}
/* Loading skeleton */
.skeleton {
background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.09), rgba(255,255,255,0.04));
background-size: 200% 100%;
animation: shimmer 1.6s linear infinite;
border-radius: 8px;
color: transparent !important;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Weather icon animations */
.sun-core { transform-origin: 50% 50%; animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
</style>
</head>
<body>
<main class="card" id="card" aria-live="polite">
<div class="halo" aria-hidden="true"></div>
<div id="root"></div>
</main>
<script>
(function () {
"use strict";
const params = new URLSearchParams(location.search);
const lat = clampNum(parseFloat(params.get("lat")), -90, 90, 52.52);
const lon = clampNum(parseFloat(params.get("lon")), -180, 180, 13.405);
const name = (params.get("name") || "Berlin").trim() || "Berlin";
const date = normalizeDate(params.get("date"));
const root = document.getElementById("root");
function clampNum(n, min, max, fb) {
if (!Number.isFinite(n)) return fb;
return Math.min(max, Math.max(min, n));
}
function pad(n){ return String(n).padStart(2,"0"); }
function todayUTC() {
const d = new Date();
return `${d.getUTCFullYear()}-${pad(d.getUTCMonth()+1)}-${pad(d.getUTCDate())}`;
}
function normalizeDate(s) {
if (!s) return todayUTC();
const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s.trim());
if (!m) return todayUTC();
const d = new Date(Date.UTC(+m[1], +m[2]-1, +m[3]));
if (isNaN(d.getTime())) return todayUTC();
return `${m[1]}-${m[2]}-${m[3]}`;
}
function isPastDate(dstr) {
const today = todayUTC();
return dstr < today;
}
function formatLongDate(dstr) {
const [y,m,d] = dstr.split("-").map(Number);
const dt = new Date(Date.UTC(y, m-1, d));
return dt.toLocaleDateString("en-US", {
weekday: "long", year: "numeric", month: "long", day: "numeric", timeZone: "UTC"
});
}
function formatCoords(la, lo) {
const laStr = `${Math.abs(la).toFixed(3)}° ${la >= 0 ? "N" : "S"}`;
const loStr = `${Math.abs(lo).toFixed(3)}° ${lo >= 0 ? "E" : "W"}`;
return `${laStr}, ${loStr}`;
}
const WMO = {
0: { label: "Clear sky", icon: "sun" },
1: { label: "Mainly clear", icon: "sun-cloud" },
2: { label: "Partly cloudy", icon: "sun-cloud" },
3: { label: "Overcast", icon: "cloud" },
45: { label: "Fog", icon: "fog" },
48: { label: "Depositing rime fog", icon: "fog" },
51: { label: "Light drizzle", icon: "drizzle" },
53: { label: "Moderate drizzle", icon: "drizzle" },
55: { label: "Dense drizzle", icon: "drizzle" },
56: { label: "Light freezing drizzle", icon: "drizzle" },
57: { label: "Dense freezing drizzle", icon: "drizzle" },
61: { label: "Slight rain", icon: "rain" },
63: { label: "Moderate rain", icon: "rain" },
65: { label: "Heavy rain", icon: "rain" },
66: { label: "Light freezing rain", icon: "rain" },
67: { label: "Heavy freezing rain", icon: "rain" },
71: { label: "Slight snow", icon: "snow" },
73: { label: "Moderate snow", icon: "snow" },
75: { label: "Heavy snow", icon: "snow" },
77: { label: "Snow grains", icon: "snow" },
80: { label: "Rain showers", icon: "rain" },
81: { label: "Heavy rain showers", icon: "rain" },
82: { label: "Violent rain showers", icon: "rain" },
85: { label: "Snow showers", icon: "snow" },
86: { label: "Heavy snow showers", icon: "snow" },
95: { label: "Thunderstorm", icon: "storm" },
96: { label: "Thunderstorm w/ hail", icon: "storm" },
99: { label: "Thunderstorm w/ hail", icon: "storm" }
};
function wmoInfo(code) {
return WMO[code] || { label: "Unknown conditions", icon: "cloud" };
}
function iconSVG(kind) {
const g = (inner) => `<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">${inner}</svg>`;
const sunGrad = `
<defs>
<radialGradient id="sg" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffe8a8"/>
<stop offset="60%" stop-color="#ffcb59"/>
<stop offset="100%" stop-color="#ff9d3d"/>
</radialGradient>
<linearGradient id="cg" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#eef2ff"/>
<stop offset="100%" stop-color="#b8c2e0"/>
</linearGradient>
<linearGradient id="rg" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#8bd0ff"/>
<stop offset="100%" stop-color="#4a92ff"/>
</linearGradient>
</defs>`;
const sun = `
<g class="sun-core">
<circle cx="64" cy="64" r="26" fill="url(#sg)"/>
<g stroke="#ffcb59" stroke-width="4" stroke-linecap="round">
<line x1="64" y1="14" x2="64" y2="28"/>
<line x1="64" y1="100" x2="64" y2="114"/>
<line x1="14" y1="64" x2="28" y2="64"/>
<line x1="100" y1="64" x2="114" y2="64"/>
<line x1="28" y1="28" x2="38" y2="38"/>
<line x1="90" y1="90" x2="100" y2="100"/>
<line x1="28" y1="100" x2="38" y2="90"/>
<line x1="90" y1="38" x2="100" y2="28"/>
</g>
</g>`;
const cloud = `
<g>
<path d="M36 82c-11 0-20-8-20-19s9-19 20-19c2 0 4 0 5 1 4-9 13-15 24-15 14 0 25 11 25 25 0 1 0 2 0 3 8 1 14 8 14 16 0 9-7 16-16 16H36z"
fill="url(#cg)" stroke="rgba(0,0,0,0.05)" />
</g>`;
const sunCloud = `
<g class="sun-core" style="transform-origin:44px 44px">
<circle cx="44" cy="44" r="18" fill="url(#sg)"/>
<g stroke="#ffcb59" stroke-width="3" stroke-linecap="round">
<line x1="44" y1="14" x2="44" y2="22"/>
<line x1="44" y1="66" x2="44" y2="74"/>
<line x1="14" y1="44" x2="22" y2="44"/>
<line x1="66" y1="44" x2="74" y2="44"/>
<line x1="24" y1="24" x2="30" y2="30"/>
<line x1="58" y1="58" x2="64" y2="64"/>
<line x1="24" y1="64" x2="30" y2="58"/>
<line x1="58" y1="30" x2="64" y2="24"/>
</g>
</g>
<g>
<path d="M48 96c-9 0-16-6-16-15s7-15 16-15c1 0 3 0 4 1 3-7 10-12 19-12 11 0 20 9 20 20v2c7 1 12 6 12 13 0 7-6 13-13 13H48z"
fill="url(#cg)" />
</g>`;
const rain = `
<g>
<path d="M36 66c-11 0-20-8-20-19s9-19 20-19c2 0 4 0 5 1 4-9 13-15 24-15 14 0 25 11 25 25v3c8 1 14 8 14 16 0 9-7 16-16 16H36z"
fill="url(#cg)" />
<g stroke="url(#rg)" stroke-width="4" stroke-linecap="round">
<line x1="42" y1="86" x2="36" y2="106"/>
<line x1="62" y1="86" x2="56" y2="106"/>
<line x1="82" y1="86" x2="76" y2="106"/>
</g>
</g>`;
const drizzle = `
<g>
<path d="M36 66c-11 0-20-8-20-19s9-19 20-19c2 0 4 0 5 1 4-9 13-15 24-15 14 0 25 11 25 25v3c8 1 14 8 14 16 0 9-7 16-16 16H36z"
fill="url(#cg)" />
<g fill="url(#rg)">
<circle cx="42" cy="94" r="3"/>
<circle cx="62" cy="100" r="3"/>
<circle cx="82" cy="94" r="3"/>
<circle cx="52" cy="108" r="2.5"/>
<circle cx="72" cy="108" r="2.5"/>
</g>
</g>`;
const snow = `
<g>
<path d="M36 66c-11 0-20-8-20-19s9-19 20-19c2 0 4 0 5 1 4-9 13-15 24-15 14 0 25 11 25 25v3c8 1 14 8 14 16 0 9-7 16-16 16H36z"
fill="url(#cg)" />
<g fill="#e8f2ff" stroke="#c3d8ff" stroke-width="1">
<circle cx="42" cy="96" r="4"/>
<circle cx="64" cy="104" r="4"/>
<circle cx="86" cy="96" r="4"/>
</g>
</g>`;
const fog = `
<g>
<path d="M36 58c-11 0-20-8-20-19s9-19 20-19c2 0 4 0 5 1 4-9 13-15 24-15 14 0 25 11 25 25v3c8 1 14 8 14 16 0 9-7 16-16 16H36z"
fill="url(#cg)" />
<g stroke="#c9d3f0" stroke-width="5" stroke-linecap="round" opacity="0.85">
<line x1="22" y1="82" x2="106" y2="82"/>
<line x1="30" y1="96" x2="98" y2="96"/>
<line x1="22" y1="110" x2="106" y2="110"/>
</g>
</g>`;
const storm = `
<g>
<path d="M36 66c-11 0-20-8-20-19s9-19 20-19c2 0 4 0 5 1 4-9 13-15 24-15 14 0 25 11 25 25v3c8 1 14 8 14 16 0 9-7 16-16 16H36z"
fill="url(#cg)" />
<path d="M62 78 L48 104 L60 104 L54 118 L82 92 L68 92 L74 78 Z"
fill="#ffd166" stroke="#f0a900" stroke-width="1.5" stroke-linejoin="round"/>
</g>`;
const map = { sun, cloud, "sun-cloud": sunCloud, rain, drizzle, snow, fog, storm };
return g(sunGrad + (map[kind] || cloud));
}
function tempColor(t, tmin, tmax) {
if (tmax === tmin) return "#ffd166";
const p = (t - tmin) / (tmax - tmin);
// interpolate from cold (#7cc4ff) -> warm (#ffd166) -> hot (#ff5c7a)
const stops = [
{ p: 0, c: [124, 196, 255] },
{ p: 0.5, c: [255, 209, 102] },
{ p: 1, c: [255, 92, 122] }
];
let a = stops[0], b = stops[stops.length-1];
for (let i = 0; i < stops.length - 1; i++) {
if (p >= stops[i].p && p <= stops[i+1].p) { a = stops[i]; b = stops[i+1]; break; }
}
const t2 = (p - a.p) / (b.p - a.p || 1);
const rgb = a.c.map((v, i) => Math.round(v + (b.c[i] - v) * t2));
return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
}
function renderLoading() {
root.innerHTML = `
<div class="content">
<header class="meta">
<div class="brand"><span class="dot"></span> Weather Report</div>
<div class="coords">${formatCoords(lat, lon)}</div>
</header>
<section class="primary">
<div class="place">
<div class="date">${formatLongDate(date)}</div>
<h1><span class="skeleton" style="display:inline-block;width:320px;height:64px">.</span></h1>
<div class="condition"><span class="skeleton" style="display:inline-block;width:220px;height:20px">.</span></div>
</div>
<div class="hero">
<div class="icon-wrap"><div class="skeleton" style="width:120px;height:120px;border-radius:24px"></div></div>
<div class="temp">
<div class="now"><span class="skeleton" style="display:inline-block;width:180px;height:80px">.</span></div>
<div class="range">
<span class="pill high skeleton" style="width:120px;height:32px"></span>
<span class="pill low skeleton" style="width:120px;height:32px"></span>
</div>
</div>
</div>
<div class="stats">
<div class="stat"><span class="k">High</span><div class="v skeleton">—</div></div>
<div class="stat"><span class="k">Low</span><div class="v skeleton">—</div></div>
<div class="stat"><span class="k">Range</span><div class="v skeleton">—</div></div>
</div>
</section>
<aside class="side">
<div class="panel">
<h2>Hourly temperature <span class="aux">Loading…</span></h2>
<div class="chart"><div class="skeleton" style="width:100%;height:100%;border-radius:12px"></div></div>
</div>
<div class="panel">
<h2>By hour</h2>
<div class="hours">
${Array.from({length: 8}, () => `<div class="hour"><div class="h skeleton">—</div><div class="bar skeleton"></div><div class="t skeleton">—</div></div>`).join("")}
</div>
</div>
</aside>
<div class="footer">
<div class="lhs"><span>Source: Open-Meteo</span></div>
<div class="rhs">Loading data…</div>
</div>
</div>
`;
}
function renderError(message, detail) {
root.innerHTML = `
<div class="state">
<div class="icon" aria-hidden="true">!</div>
<h3>${escapeHTML(message)}</h3>
<p>${escapeHTML(detail || "")}</p>
<div class="pill" style="margin-top:8px">
<span class="lbl">Location</span>
<span class="val">${escapeHTML(name)}</span>
</div>
<div class="coords" style="margin-top:6px">${formatCoords(lat, lon)} · ${escapeHTML(date)}</div>
</div>
`;
}
function escapeHTML(s) {
return String(s ?? "").replace(/[&<>"']/g, c => ({
"&":"&", "<":"<", ">":">", '"':""", "'":"'"
})[c]);
}
function renderData(data) {
const daily = data.daily || {};
const hourly = data.hourly || {};
const idx = (daily.time || []).indexOf(date);
const tmax = idx >= 0 ? daily.temperature_2m_max?.[idx] : null;
const tmin = idx >= 0 ? daily.temperature_2m_min?.[idx] : null;
const wcode = idx >= 0 ? daily.weather_code?.[idx] : null;
const cond = wmoInfo(wcode);
const hTimes = hourly.time || [];
const hTemps = hourly.temperature_2m || [];
const dayHours = [];
for (let i = 0; i < hTimes.length; i++) {
if (String(hTimes[i]).startsWith(date)) {
dayHours.push({ time: hTimes[i], temp: hTemps[i] });
}
}
if (tmax == null || tmin == null || dayHours.length === 0) {
renderError("No data for this date", "The API returned no values for the requested date.");
return;
}
// Pick "current" hour for today, or midday for others
const nowUTC = new Date();
const isToday = date === todayUTC();
let nowIdx = 12;
if (isToday) {
nowIdx = nowUTC.getUTCHours();
}
let currentTemp = null;
for (const h of dayHours) {
const hh = parseInt(h.time.slice(11, 13), 10);
if (hh === nowIdx) { currentTemp = h.temp; break; }
}
if (currentTemp == null) {
// fallback: pick closest hour
let best = dayHours[0], bestDiff = 999;
for (const h of dayHours) {
const hh = parseInt(h.time.slice(11, 13), 10);
const d = Math.abs(hh - nowIdx);
if (d < bestDiff) { bestDiff = d; best = h; }
}
currentTemp = best.temp;
}
const validTemps = dayHours.map(h => h.temp).filter(v => Number.isFinite(v));
const chartMin = Math.floor(Math.min(...validTemps, tmin));
const chartMax = Math.ceil(Math.max(...validTemps, tmax));
const range = Math.max(1, chartMax - chartMin);
const chartW = 520, chartH = 200, padL = 34, padR = 12, padT = 14, padB = 24;
const iw = chartW - padL - padR;
const ih = chartH - padT - padB;
const pts = dayHours.map((h, i) => {
const x = padL + (i / Math.max(1, dayHours.length - 1)) * iw;
const y = padT + (1 - (h.temp - chartMin) / range) * ih;
return { x, y, t: h.temp, hour: parseInt(h.time.slice(11,13), 10) };
});
const linePath = pts.map((p, i) => `${i===0?"M":"L"}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(" ");
const areaPath = linePath + ` L${pts[pts.length-1].x.toFixed(1)},${(padT+ih).toFixed(1)} L${pts[0].x.toFixed(1)},${(padT+ih).toFixed(1)} Z`;
// y-axis ticks
const ticks = 4;
const tickVals = [];
for (let i = 0; i <= ticks; i++) {
tickVals.push(Math.round(chartMax - (i * range / ticks)));
}
// Hour tiles — pick 8 evenly-spaced entries
const tileCount = Math.min(8, dayHours.length);
const step = dayHours.length / tileCount;
const tiles = [];
for (let i = 0; i < tileCount; i++) {
const idx2 = Math.min(dayHours.length - 1, Math.round(i * step));
tiles.push(dayHours[idx2]);
}
const currentHourStr = String(nowIdx).padStart(2, "0") + ":00";
root.innerHTML = `
<div class="content">
<header class="meta">
<div class="brand"><span class="dot"></span> Weather Report</div>
<div class="coords">${formatCoords(lat, lon)}</div>
</header>
<section class="primary">
<div class="place">
<div class="date">${formatLongDate(date)}</div>
<h1>${escapeHTML(name)}</h1>
<div class="condition">
${escapeHTML(cond.label)}
<span class="sep">·</span>
<span style="color:var(--ink-dim)">${isPastDate(date) ? "Historical" : (isToday ? "Today" : "Forecast")}</span>
</div>
</div>
<div class="hero">
<div class="icon-wrap">${iconSVG(cond.icon)}</div>
<div class="temp">
<div class="now">
<span>${Math.round(currentTemp)}</span><span class="deg">°C</span>
</div>
<div class="range">
<span class="pill high">
<span class="swatch"></span>
<span class="lbl">High</span>
<span class="val">${Math.round(tmax)}°</span>
</span>
<span class="pill low">
<span class="swatch"></span>
<span class="lbl">Low</span>
<span class="val">${Math.round(tmin)}°</span>
</span>
</div>
</div>
</div>
<div class="stats">
<div class="stat">
<span class="k">High</span>
<div class="v">${Math.round(tmax)}<span class="u">°C</span></div>
</div>
<div class="stat">
<span class="k">Low</span>
<div class="v">${Math.round(tmin)}<span class="u">°C</span></div>
</div>
<div class="stat">
<span class="k">Δ Range</span>
<div class="v">${Math.round(tmax - tmin)}<span class="u">°C</span></div>
</div>
</div>
</section>
<aside class="side">
<div class="panel">
<h2>Hourly temperature <span class="aux">${dayHours.length} hours · UTC</span></h2>
<div class="chart" style="height:220px">
<div class="axis-y">
${tickVals.map(v => `<span>${v}°</span>`).join("")}
</div>
<svg viewBox="0 0 ${chartW} ${chartH}" preserveAspectRatio="none" style="margin-left:22px;width:calc(100% - 22px)">
<defs>
<linearGradient id="area" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ffd166" stop-opacity="0.5"/>
<stop offset="60%" stop-color="#7cc4ff" stop-opacity="0.18"/>
<stop offset="100%" stop-color="#7cc4ff" stop-opacity="0"/>
</linearGradient>
<linearGradient id="stroke" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ffcb59"/>
<stop offset="100%" stop-color="#7cc4ff"/>
</linearGradient>
</defs>
${tickVals.map((v, i) => {
const y = padT + (i * ih / ticks);
return `<line x1="${padL}" x2="${chartW - padR}" y1="${y}" y2="${y}" stroke="rgba(255,255,255,0.06)" stroke-dasharray="2 4" />`;
}).join("")}
<path d="${areaPath}" fill="url(#area)"/>
<path d="${linePath}" fill="none" stroke="url(#stroke)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
${pts.map((p, i) => (i % 3 === 0 || i === pts.length - 1)
? `<circle cx="${p.x.toFixed(1)}" cy="${p.y.toFixed(1)}" r="3" fill="${tempColor(p.t, chartMin, chartMax)}" stroke="#0b1020" stroke-width="1.5"/>`
: ""
).join("")}
</svg>
<div class="axis-x" style="margin-left:22px">
<span>00:00</span><span>06:00</span><span>12:00</span><span>18:00</span><span>23:00</span>
</div>
</div>
</div>
<div class="panel">
<h2>Selected hours <span class="aux">${isToday ? "Now highlighted" : "Midday reference"}</span></h2>
<div class="hours">
${tiles.map(t => {
const hh = t.time.slice(11, 16);
const c = tempColor(t.temp, chartMin, chartMax);
const isNow = parseInt(t.time.slice(11,13), 10) === nowIdx;
return `
<div class="hour ${isNow ? "now" : ""}">
<div class="h">${hh}</div>
<div class="bar" style="background:linear-gradient(180deg, ${c}, rgba(255,255,255,0.08))"></div>
<div class="t" style="color:${c}">${Math.round(t.temp)}°</div>
</div>
`;
}).join("")}
</div>
</div>
</aside>
<div class="footer">
<div class="lhs">
<span>Data · Open-Meteo</span>
<span>Timezone · UTC</span>
<span>Units · Celsius</span>
</div>
<div class="rhs">Updated ${new Date().toISOString().replace("T", " ").slice(0, 16)} UTC</div>
</div>
</div>
`;
}
async function fetchWeather() {
const endpoint = isPastDate(date) ? "/api/om/archive" : "/api/om/forecast";
const url = new URL(endpoint, location.origin);
url.searchParams.set("latitude", String(lat));
url.searchParams.set("longitude", String(lon));
url.searchParams.set("daily", "temperature_2m_max,temperature_2m_min,weather_code");
url.searchParams.set("hourly", "temperature_2m");
url.searchParams.set("timezone", "UTC");
url.searchParams.set("temperature_unit", "celsius");
url.searchParams.set("start_date", date);
url.searchParams.set("end_date", date);
let resp;
try {
resp = await fetch(url.toString(), { headers: { "Accept": "application/json" } });
} catch (e) {
throw new Error(`Network request failed: ${e && e.message ? e.message : e}`);
}
if (!resp.ok) {
let bodyMsg = "";
try { const b = await resp.text(); bodyMsg = b.slice(0, 200); } catch (_) {}
throw new Error(`Request failed with status ${resp.status}${bodyMsg ? ` — ${bodyMsg}` : ""}`);
}
let json;
try {
json = await resp.json();
} catch (e) {
throw new Error("The API returned an invalid response.");
}
if (json && json.error) {
throw new Error(json.reason || "The API returned an error.");
}
return json;
}
renderLoading();
fetchWeather()
.then(renderData)
.catch((err) => {
renderError("Weather data unavailable", err && err.message ? err.message : String(err));
});
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 33,098 | html / css / js | 334 / 10,854 / 21,910 |
|---|---|---|---|
| dom nodes | 11 | dom depth | 4 |
| css rules | 67 | js present | yes |
| brightness | 42.6 | contrast | 23.7 |
| colorfulness | 22.0 | whitespace | 52.7% |
This slot's telemetry
| prompt tokens | 7 | completion tokens | 15,585 |
|---|---|---|---|
| total tokens | 15,592 | wall | 142.9 s |
| cost | — | request id | — |
config.json610 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "claude-opus-4-7-thinking-eff-high--cli--cursor-xl--dev",
"effort": "high",
"family": "claude",
"m": {
"min": 2,
"q": 2
},
"model_id": "claude-opus-4-7-thinking",
"protocol": "cli",
"served_model": "claude-opus-4-7-thinking-high",
"telemetry": {
"completion_tokens": 35160,
"cost_usd": null,
"prompt_tokens": 26,
"total_tokens": 35186,
"wall_ms": 340651
},
"transport": "cursor-agent-cli-isolated-home",
"vendor_sanction_ref": null
}send-log2.5 KB
{
"N": 2,
"batch_id": "2026-08-13--cursor-xl-s2",
"config_id": "claude-opus-4-7-thinking-eff-high--cli--cursor-xl--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-08-13T15:10:16.925175+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T15:07:54.103159+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-13T15:11:12.924976+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T15:10:20.534842+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-13T15:12:03.024940+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T15:11:16.188156+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-13T15:13:44.995519+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T15:12:06.429891+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
}
}
}