claude-opus-4-8-thinking @ xhigh · cursor
cursorxhigh
- config
- claude-opus-4-8-thinking-eff-xhigh--cli--cursor--dev
- batch
- 2026-07-19--unified
- transport
- cursor-agent-cli-isolated-home
- protocol
- cli · plan
- served model
- claude-opus-4-8-thinking-xhigh
- captured
- Jul 18, 2026, 11:54 AM · N=2
variant
live
slot 0 · P-q · sandboxed iframe

The screenshot is the exact frozen pixels the similarity channels measured. Run live re-executes the raw output in a sandboxed iframe; its rendering depends on your browser and fonts and is not guaranteed to match the measured pixels.
similarity neighbors
nearest
claude-opus-4-8-thinking @max · cursor0.73claude-opus-4-8 @xhigh · kiro0.71claude-opus-4-8 @max · cursor-xl0.71claude-opus-4-7-thinking @xhigh · cursor0.70claude-sonnet-5 @xhigh · cursor-xl0.70farthest
north-mini-code-free · api0.51deepseek-v4-pro-0812 @none · api0.52grok-4.3 @high · api0.52qwen3.5-plus · go0.53grok-4.3 @low · api0.53within session 2026-07-19--unified
similarity measures convergence within this session — not quality.
Fidelity — does the card show the right data?
- namematch
- conditionmatch
- datematch
- max 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>
<style>
:root {
--sky-1: #2b5876;
--sky-2: #4e4376;
--accent: #7dd3fc;
--ink: #f8fafc;
--ink-soft: rgba(248, 250, 252, 0.72);
--ink-faint: rgba(248, 250, 252, 0.45);
--card-bg: rgba(255, 255, 255, 0.10);
--card-brd: rgba(255, 255, 255, 0.22);
--chart-line: #ffffff;
--chart-fill-1: rgba(255, 255, 255, 0.34);
--chart-fill-2: rgba(255, 255, 255, 0.02);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 40px;
color: var(--ink);
background:
radial-gradient(1200px 600px at 18% -10%, rgba(255,255,255,0.18), transparent 60%),
linear-gradient(135deg, var(--sky-1), var(--sky-2));
background-attachment: fixed;
transition: background 900ms ease;
overflow: hidden;
}
/* Ambient floating orbs for depth */
.orb {
position: fixed;
border-radius: 50%;
filter: blur(60px);
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
.orb.a { width: 460px; height: 460px; top: -140px; right: -80px; background: rgba(255,255,255,0.20); }
.orb.b { width: 360px; height: 360px; bottom: -120px; left: -60px; background: rgba(125,211,252,0.28); }
.card {
position: relative;
z-index: 1;
width: 1040px;
max-width: 100%;
padding: 40px 44px 36px;
border-radius: 30px;
background: var(--card-bg);
border: 1px solid var(--card-brd);
box-shadow:
0 40px 90px -30px rgba(0,0,0,0.55),
inset 0 1px 0 rgba(255,255,255,0.30);
-webkit-backdrop-filter: blur(26px) saturate(150%);
backdrop-filter: blur(26px) saturate(150%);
overflow: hidden;
}
.card::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(180deg, rgba(255,255,255,0.08), transparent 40%);
pointer-events: none;
}
/* ---------- Header ---------- */
header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
}
.place .name {
font-size: 40px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.05;
}
.place .name::before {
content: "";
display: inline-block;
width: 10px; height: 10px;
margin-right: 12px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px rgba(125,211,252,0.20);
vertical-align: middle;
transform: translateY(-3px);
}
.place .date {
margin-top: 8px;
font-size: 16px;
color: var(--ink-soft);
letter-spacing: 0.01em;
}
.place .coords {
margin-top: 4px;
font-size: 12.5px;
color: var(--ink-faint);
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
}
.condition-pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
border-radius: 999px;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.20);
font-size: 15px;
font-weight: 600;
white-space: nowrap;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.condition-pill .dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent);
}
/* ---------- Hero ---------- */
.hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin: 30px 0 26px;
}
.hero-left { display: flex; align-items: center; gap: 26px; }
.icon-wrap {
width: 148px; height: 148px;
display: grid;
place-items: center;
border-radius: 28px;
background: radial-gradient(120px 120px at 50% 35%, rgba(255,255,255,0.20), rgba(255,255,255,0.04));
border: 1px solid rgba(255,255,255,0.16);
flex: none;
}
.icon-wrap svg { width: 104px; height: 104px; overflow: visible; }
.hero-caption .cond-label {
font-size: 26px;
font-weight: 650;
letter-spacing: -0.01em;
}
.hero-caption .cond-sub {
margin-top: 6px;
font-size: 15px;
color: var(--ink-soft);
max-width: 320px;
line-height: 1.4;
}
.temps {
text-align: right;
line-height: 1;
}
.temps .hi {
font-size: 112px;
font-weight: 250;
letter-spacing: -0.04em;
line-height: 0.92;
}
.temps .hi .deg { font-weight: 250; }
.temps .hilo-row {
margin-top: 12px;
display: flex;
gap: 18px;
justify-content: flex-end;
font-size: 16px;
color: var(--ink-soft);
font-variant-numeric: tabular-nums;
}
.temps .hilo-row b { color: var(--ink); font-weight: 700; }
.temps .hilo-row .lbl { color: var(--ink-faint); font-weight: 600; margin-right: 4px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; }
/* ---------- Chart ---------- */
.chart-card {
margin-top: 8px;
padding: 22px 20px 12px;
border-radius: 22px;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.14);
}
.chart-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin: 0 6px 6px;
}
.chart-head .title {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-soft);
}
.chart-head .range {
font-size: 13px;
color: var(--ink-faint);
font-variant-numeric: tabular-nums;
}
.chart-wrap { width: 100%; }
svg.chart { display: block; width: 100%; height: 236px; }
.grid-line { stroke: rgba(255,255,255,0.10); stroke-width: 1; }
.area { fill: url(#areaGrad); }
.line { fill: none; stroke: var(--chart-line); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hr-label { fill: var(--ink-faint); font-size: 12px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.pt { fill: #fff; stroke: rgba(0,0,0,0.10); stroke-width: 1; }
.pt-marker { fill: var(--sky-2); stroke: #fff; stroke-width: 2.5; }
.pt-tag {
fill: #fff;
font-size: 12.5px;
font-weight: 700;
text-anchor: middle;
paint-order: stroke;
stroke: rgba(0,0,0,0.25);
stroke-width: 3px;
font-variant-numeric: tabular-nums;
}
.pt-tag.min { fill: var(--accent); }
/* ---------- States ---------- */
.state {
display: none;
align-items: center;
gap: 14px;
padding: 30px 4px 10px;
font-size: 16px;
color: var(--ink-soft);
}
.state.show { display: flex; }
.spinner {
width: 22px; height: 22px; border-radius: 50%;
border: 3px solid rgba(255,255,255,0.25);
border-top-color: #fff;
animation: spin 0.9s linear infinite;
flex: none;
}
.error-box {
display: none;
margin-top: 26px;
padding: 22px 24px;
border-radius: 18px;
background: rgba(244, 63, 94, 0.16);
border: 1px solid rgba(244, 63, 94, 0.45);
}
.error-box.show { display: block; }
.error-box .etitle {
display: flex; align-items: center; gap: 10px;
font-size: 18px; font-weight: 700;
}
.error-box .etitle svg { width: 22px; height: 22px; }
.error-box .emsg { margin-top: 8px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }
#content { transition: opacity 400ms ease; }
#content.hidden { display: none; }
/* ---------- Animations ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sun-spin { to { transform: rotate(360deg); } }
@keyframes drift { 0%,100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes fall { 0% { transform: translateY(-6px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(10px); opacity: 0; } }
@keyframes flake { 0% { transform: translateY(-6px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }
@keyframes flash { 0%,88%,100% { opacity: 0.85; } 90%,94% { opacity: 0.25; } 92% { opacity: 1; } }
.rays { transform-origin: center; animation: sun-spin 40s linear infinite; }
.cloud-anim { animation: drift 6s ease-in-out infinite; }
.bob-anim { animation: bob 5s ease-in-out infinite; }
.drop { animation: fall 1.4s linear infinite; }
.drop:nth-child(2) { animation-delay: 0.45s; }
.drop:nth-child(3) { animation-delay: 0.9s; }
.snowflake { animation: flake 2.4s linear infinite; }
.snowflake:nth-child(2) { animation-delay: 0.6s; }
.snowflake:nth-child(3) { animation-delay: 1.2s; }
.bolt { animation: flash 3.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; }
}
</style>
</head>
<body>
<div class="orb a"></div>
<div class="orb b"></div>
<main class="card" role="main" aria-label="Weather card">
<div id="loading" class="state show">
<div class="spinner"></div>
<span>Loading weather…</span>
</div>
<div id="content" class="hidden">
<header>
<div class="place">
<div class="name" id="place-name">—</div>
<div class="date" id="place-date">—</div>
<div class="coords" id="place-coords">—</div>
</div>
<div class="condition-pill"><span class="dot"></span><span id="pill-cond">—</span></div>
</header>
<section class="hero">
<div class="hero-left">
<div class="icon-wrap" id="icon-wrap"></div>
<div class="hero-caption">
<div class="cond-label" id="cond-label">—</div>
<div class="cond-sub" id="cond-sub"></div>
</div>
</div>
<div class="temps">
<div class="hi" id="temp-hi">—<span class="deg">°</span></div>
<div class="hilo-row">
<span><span class="lbl">High</span><b id="t-max">—°</b></span>
<span><span class="lbl">Low</span><b id="t-min">—°</b></span>
</div>
</div>
</section>
<section class="chart-card">
<div class="chart-head">
<div class="title">Hourly temperature</div>
<div class="range" id="chart-range">—</div>
</div>
<div class="chart-wrap">
<svg class="chart" id="chart" viewBox="0 0 1000 236" preserveAspectRatio="none" role="img" aria-label="Hourly temperature chart"></svg>
</div>
</section>
</div>
<div id="error" class="error-box">
<div class="etitle">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
<span>Weather data unavailable</span>
</div>
<div class="emsg" id="error-msg">We couldn't load the weather for this location.</div>
</div>
</main>
<script>
(function () {
"use strict";
// ---------- Query params & defaults ----------
var qs = new URLSearchParams(window.location.search);
var lat = parseFloat(qs.get("lat"));
var lon = parseFloat(qs.get("lon"));
if (!isFinite(lat)) lat = 52.52;
if (!isFinite(lon)) lon = 13.405;
var name = qs.get("name");
if (!name || !name.trim()) name = "Berlin";
function todayUTC() {
var d = new Date();
return d.getUTCFullYear() + "-" +
String(d.getUTCMonth() + 1).padStart(2, "0") + "-" +
String(d.getUTCDate()).padStart(2, "0");
}
var dateParam = qs.get("date");
var dateRe = /^\d{4}-\d{2}-\d{2}$/;
var date = (dateParam && dateRe.test(dateParam)) ? dateParam : todayUTC();
// ---------- Endpoint selection ----------
// Past dates -> archive; today & future -> forecast.
var isPast = date < todayUTC();
var base = isPast ? "/api/om/archive" : "/api/om/forecast";
var params = new URLSearchParams({
latitude: lat,
longitude: lon,
daily: "temperature_2m_max,temperature_2m_min,weather_code",
hourly: "temperature_2m",
timezone: "UTC",
temperature_unit: "celsius",
start_date: date,
end_date: date
});
var url = base + "?" + params.toString();
// ---------- WMO weather code metadata ----------
function weatherInfo(code) {
var map = {
0: ["Clear sky", "clear", "Not a cloud in sight."],
1: ["Mainly clear", "clear", "A bright, mostly open sky."],
2: ["Partly cloudy", "partly", "Sun weaving through clouds."],
3: ["Overcast", "cloud", "A blanket of grey above."],
45: ["Fog", "fog", "Low visibility and haze."],
48: ["Depositing rime fog", "fog", "Freezing fog leaving frost."],
51: ["Light drizzle", "drizzle", "A fine, gentle mist."],
53: ["Moderate drizzle", "drizzle", "Steady light drizzle."],
55: ["Dense drizzle", "drizzle", "Heavy, persistent drizzle."],
56: ["Light freezing drizzle", "drizzle", "Icy drizzle, watch for glaze."],
57: ["Dense freezing drizzle", "drizzle", "Heavy freezing drizzle."],
61: ["Slight rain", "rain", "A light, easy rain."],
63: ["Moderate rain", "rain", "Steady rainfall throughout."],
65: ["Heavy rain", "rain", "Bring a sturdy umbrella."],
66: ["Light freezing rain", "rain", "Freezing rain, slick surfaces."],
67: ["Heavy freezing rain", "rain", "Heavy freezing rain."],
71: ["Slight snow", "snow", "A light dusting of snow."],
73: ["Moderate snow", "snow", "Steady snowfall."],
75: ["Heavy snow", "snow", "Heavy snow accumulating."],
77: ["Snow grains", "snow", "Fine grains of snow."],
80: ["Slight rain showers", "rain", "Passing light showers."],
81: ["Moderate rain showers", "rain", "Bursts of moderate rain."],
82: ["Violent rain showers", "rain", "Intense downpours."],
85: ["Slight snow showers", "snow", "Scattered snow showers."],
86: ["Heavy snow showers", "snow", "Heavy snow showers."],
95: ["Thunderstorm", "thunder", "Rumbles and lightning about."],
96: ["Thunderstorm w/ slight hail", "thunder", "Storms with some hail."],
99: ["Thunderstorm w/ heavy hail", "thunder", "Severe storm with hail."]
};
return map[code] || ["Unknown", "cloud", ""];
}
// ---------- Theme palettes by weather group ----------
var THEMES = {
clear: { s1: "#2b6cb0", s2: "#f6ad55", accent: "#ffe08a" },
partly: { s1: "#3b6ea5", s2: "#8aa9c7", accent: "#dbeafe" },
cloud: { s1: "#4b5d70", s2: "#77839a", accent: "#cbd5e1" },
fog: { s1: "#5b6472", s2: "#9aa2ad", accent: "#e2e8f0" },
drizzle: { s1: "#2c5364", s2: "#4a7a8c", accent: "#a5f3fc" },
rain: { s1: "#1f3b57", s2: "#3a6073", accent: "#7dd3fc" },
snow: { s1: "#516395", s2: "#b6cfe0", accent: "#e0f2fe" },
thunder: { s1: "#232526", s2: "#414345", accent: "#c4b5fd" }
};
function applyTheme(group) {
var t = THEMES[group] || THEMES.cloud;
var root = document.documentElement.style;
root.setProperty("--sky-1", t.s1);
root.setProperty("--sky-2", t.s2);
root.setProperty("--accent", t.accent);
}
// ---------- SVG icons ----------
function iconSVG(group) {
var sun = '<g class="rays" stroke="#ffd166" stroke-width="4" stroke-linecap="round">' +
raysPaths() + '</g>' +
'<circle cx="50" cy="50" r="20" fill="url(#sunGrad)"/>';
var cloud = '<g class="cloud-anim">' +
'<path d="M28 66 Q20 66 20 58 Q20 50 29 49 Q31 38 44 38 Q56 38 59 48 Q70 47 72 57 Q80 58 80 66 Z" fill="url(#cloudGrad)"/>' +
'</g>';
var defs = '<defs>' +
'<radialGradient id="sunGrad" cx="50%" cy="40%" r="60%"><stop offset="0%" stop-color="#fff3c4"/><stop offset="100%" stop-color="#f6ad30"/></radialGradient>' +
'<linearGradient id="cloudGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#ffffff"/><stop offset="100%" stop-color="#d8e3ee"/></linearGradient>' +
'</defs>';
var inner;
switch (group) {
case "clear":
inner = '<g class="bob-anim">' + sun + '</g>';
break;
case "partly":
inner = '<g class="rays" stroke="#ffd166" stroke-width="3.5" stroke-linecap="round" transform="translate(-8,-10) scale(0.7)">' + raysPaths() + '</g>' +
'<circle cx="38" cy="38" r="14" fill="url(#sunGrad)"/>' + cloud;
break;
case "fog":
inner = cloud +
'<g stroke="#e2e8f0" stroke-width="4" stroke-linecap="round" opacity="0.85">' +
'<line class="cloud-anim" x1="26" y1="76" x2="74" y2="76"/>' +
'<line class="cloud-anim" x1="32" y1="84" x2="80" y2="84" style="animation-delay:.6s"/>' +
'</g>';
break;
case "drizzle":
case "rain":
var dropCount = group === "rain" ? 3 : 3;
var drops = '<g stroke="#7dd3fc" stroke-width="4" stroke-linecap="round">';
var xs = [38, 50, 62];
for (var i = 0; i < dropCount; i++) {
drops += '<line class="drop" x1="' + xs[i] + '" y1="72" x2="' + (xs[i]-2) + '" y2="82"/>';
}
drops += '</g>';
inner = cloud + drops;
break;
case "snow":
var flakes = '<g fill="#eaf6ff">';
var fx = [38, 50, 62];
for (var j = 0; j < 3; j++) {
flakes += '<circle class="snowflake" cx="' + fx[j] + '" cy="76" r="3"/>';
}
flakes += '</g>';
inner = cloud + flakes;
break;
case "thunder":
inner = cloud +
'<polygon class="bolt" points="52,68 44,84 51,84 47,96 62,78 54,78 58,68" fill="#ffe066" stroke="#f59e0b" stroke-width="1"/>';
break;
default:
inner = cloud;
}
return '<svg viewBox="0 0 100 100">' + defs + inner + '</svg>';
}
function raysPaths() {
var out = "";
for (var k = 0; k < 8; k++) {
var ang = (k * Math.PI) / 4;
var x1 = 50 + Math.cos(ang) * 28, y1 = 50 + Math.sin(ang) * 28;
var x2 = 50 + Math.cos(ang) * 36, y2 = 50 + Math.sin(ang) * 36;
out += '<line x1="' + x1.toFixed(1) + '" y1="' + y1.toFixed(1) + '" x2="' + x2.toFixed(1) + '" y2="' + y2.toFixed(1) + '"/>';
}
return out;
}
// ---------- Formatting helpers ----------
function fmtTemp(v) { return (v === null || v === undefined || isNaN(v)) ? "—" : Math.round(v) + "°"; }
function fmtDate(iso) {
try {
var d = new Date(iso + "T00:00:00Z");
return new Intl.DateTimeFormat("en-US", {
weekday: "long", year: "numeric", month: "long", day: "numeric", timeZone: "UTC"
}).format(d);
} catch (e) { return iso; }
}
// ---------- Chart rendering ----------
function renderChart(times, temps) {
var svg = document.getElementById("chart");
var W = 1000, H = 236;
var padL = 20, padR = 20, padT = 30, padB = 34;
var innerW = W - padL - padR;
var innerH = H - padT - padB;
var valid = [];
for (var i = 0; i < temps.length; i++) {
if (temps[i] !== null && temps[i] !== undefined && !isNaN(temps[i])) valid.push(temps[i]);
}
if (!valid.length) { svg.innerHTML = ""; return; }
var minV = Math.min.apply(null, valid);
var maxV = Math.max.apply(null, valid);
if (minV === maxV) { minV -= 1; maxV += 1; }
var pad = (maxV - minV) * 0.18 || 1;
var lo = minV - pad, hi = maxV + pad;
var n = temps.length;
function xAt(i) { return padL + (n <= 1 ? innerW / 2 : (innerW * i) / (n - 1)); }
function yAt(v) { return padT + innerH - ((v - lo) / (hi - lo)) * innerH; }
var parts = [];
// gradient + grid defs
parts.push('<defs><linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0%" stop-color="var(--chart-fill-1)"/>' +
'<stop offset="100%" stop-color="var(--chart-fill-2)"/></linearGradient></defs>');
// horizontal grid lines (4)
for (var g = 0; g <= 3; g++) {
var gy = padT + (innerH * g) / 3;
parts.push('<line class="grid-line" x1="' + padL + '" y1="' + gy.toFixed(1) + '" x2="' + (W - padR) + '" y2="' + gy.toFixed(1) + '"/>');
}
// build smooth-ish line path (linear points)
var linePts = [];
var minIdx = -1, maxIdx = -1, minVal = Infinity, maxVal = -Infinity;
for (var p = 0; p < n; p++) {
var v = temps[p];
if (v === null || v === undefined || isNaN(v)) { linePts.push(null); continue; }
linePts.push([xAt(p), yAt(v)]);
if (v < minVal) { minVal = v; minIdx = p; }
if (v > maxVal) { maxVal = v; maxIdx = p; }
}
// area path
var d = "";
var started = false;
var firstX = null, lastX = null;
for (var a = 0; a < linePts.length; a++) {
if (!linePts[a]) continue;
if (!started) { d += "M" + linePts[a][0].toFixed(1) + "," + linePts[a][1].toFixed(1); firstX = linePts[a][0]; started = true; }
else { d += " L" + linePts[a][0].toFixed(1) + "," + linePts[a][1].toFixed(1); }
lastX = linePts[a][0];
}
if (started) {
var baseY = padT + innerH;
var areaD = d + " L" + lastX.toFixed(1) + "," + baseY + " L" + firstX.toFixed(1) + "," + baseY + " Z";
parts.push('<path class="area" d="' + areaD + '"/>');
parts.push('<path class="line" d="' + d + '"/>');
}
// hour labels every 3 hours
for (var t = 0; t < n; t++) {
if (t % 3 !== 0) continue;
var label;
if (times && times[t]) {
var hh = times[t].slice(11, 13);
label = hh + ":00";
} else {
label = (t < 10 ? "0" + t : t) + ":00";
}
parts.push('<text class="hr-label" x="' + xAt(t).toFixed(1) + '" y="' + (H - 12) + '">' + label + '</text>');
}
// small dots
for (var dpt = 0; dpt < linePts.length; dpt++) {
if (!linePts[dpt]) continue;
if (dpt === minIdx || dpt === maxIdx) continue;
parts.push('<circle class="pt" cx="' + linePts[dpt][0].toFixed(1) + '" cy="' + linePts[dpt][1].toFixed(1) + '" r="2.4"/>');
}
// max & min markers with tags
function marker(idx, val, cls) {
if (idx < 0 || !linePts[idx]) return;
var x = linePts[idx][0], y = linePts[idx][1];
parts.push('<circle class="pt-marker" cx="' + x.toFixed(1) + '" cy="' + y.toFixed(1) + '" r="4.5"/>');
var ty = cls === "min" ? y + 20 : y - 12;
// keep labels within bounds
if (ty < 16) ty = y + 20;
if (ty > H - 4) ty = y - 12;
var tx = x;
if (tx < 22) tx = 22; if (tx > W - 22) tx = W - 22;
parts.push('<text class="pt-tag ' + cls + '" x="' + tx.toFixed(1) + '" y="' + ty.toFixed(1) + '">' + Math.round(val) + '°</text>');
}
marker(maxIdx, maxVal, "max");
marker(minIdx, minVal, "min");
svg.innerHTML = parts.join("");
}
// ---------- UI state ----------
function showError(msg) {
document.getElementById("loading").classList.remove("show");
document.getElementById("content").classList.add("hidden");
var box = document.getElementById("error");
box.classList.add("show");
if (msg) document.getElementById("error-msg").textContent = msg;
}
function showContent() {
document.getElementById("loading").classList.remove("show");
document.getElementById("content").classList.remove("hidden");
}
// ---------- Fetch & render ----------
function pickDayIndex(daily) {
if (!daily || !daily.time || !daily.time.length) return -1;
var idx = daily.time.indexOf(date);
return idx >= 0 ? idx : 0;
}
function run() {
fetch(url, { headers: { "Accept": "application/json" } })
.then(function (res) {
if (!res.ok) throw new Error("Server responded with " + res.status + " " + res.statusText);
return res.json();
})
.then(function (data) {
if (!data || data.error) {
throw new Error((data && data.reason) ? data.reason : "The weather service returned an error.");
}
var daily = data.daily;
var idx = pickDayIndex(daily);
if (idx < 0 || !daily.temperature_2m_max) {
throw new Error("No daily data was returned for " + date + ".");
}
var tMax = daily.temperature_2m_max[idx];
var tMin = daily.temperature_2m_min[idx];
var code = daily.weather_code ? daily.weather_code[idx] : 0;
var info = weatherInfo(code);
var label = info[0], group = info[1], sub = info[2];
applyTheme(group);
// Header
document.getElementById("place-name").textContent = name;
document.getElementById("place-date").textContent = fmtDate(date);
document.getElementById("place-coords").textContent =
lat.toFixed(3) + "°, " + lon.toFixed(3) + "° · UTC";
document.getElementById("pill-cond").textContent = label;
// Hero
document.getElementById("icon-wrap").innerHTML = iconSVG(group);
document.getElementById("cond-label").textContent = label;
document.getElementById("cond-sub").textContent = sub;
document.getElementById("temp-hi").innerHTML = fmtTemp(tMax) + '<span class="deg"></span>';
document.getElementById("t-max").textContent = fmtTemp(tMax);
document.getElementById("t-min").textContent = fmtTemp(tMin);
// Chart
var hTimes = (data.hourly && data.hourly.time) ? data.hourly.time : [];
var hTemps = (data.hourly && data.hourly.temperature_2m) ? data.hourly.temperature_2m : [];
// Restrict to the requested date (defensive; start=end already scopes it).
var fTimes = [], fTemps = [];
for (var i = 0; i < hTimes.length; i++) {
if (String(hTimes[i]).slice(0, 10) === date) {
fTimes.push(hTimes[i]);
fTemps.push(hTemps[i]);
}
}
if (!fTimes.length) { fTimes = hTimes; fTemps = hTemps; }
if (fTemps.length) {
var validT = fTemps.filter(function (v) { return v !== null && v !== undefined && !isNaN(v); });
if (validT.length) {
var lo = Math.round(Math.min.apply(null, validT));
var hiV = Math.round(Math.max.apply(null, validT));
document.getElementById("chart-range").textContent = lo + "° to " + hiV + "°";
}
renderChart(fTimes, fTemps);
} else {
document.getElementById("chart-range").textContent = "no hourly data";
}
showContent();
})
.catch(function (err) {
showError(err && err.message ? err.message : "An unexpected error occurred while loading the weather.");
});
}
run();
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 26,680 | html / css / js | 2,454 / 8,757 / 15,469 |
|---|---|---|---|
| dom nodes | 53 | dom depth | 9 |
| css rules | 86 | js present | yes |
| brightness | 112.3 | contrast | 19.1 |
| colorfulness | 31.0 | whitespace | 44.3% |
This slot's telemetry
| prompt tokens | 4 | completion tokens | 16,501 |
|---|---|---|---|
| total tokens | 16,505 | wall | 187 s |
| cost | — | request id | — |
config.json610 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "claude-opus-4-8-thinking-eff-xhigh--cli--cursor--dev",
"effort": "xhigh",
"family": "claude",
"m": {
"min": 2,
"q": 2
},
"model_id": "claude-opus-4-8-thinking",
"protocol": "cli",
"served_model": "claude-opus-4-8-thinking-xhigh",
"telemetry": {
"completion_tokens": 63125,
"cost_usd": null,
"prompt_tokens": 12,
"total_tokens": 63137,
"wall_ms": 724473
},
"transport": "cursor-agent-cli-isolated-home",
"vendor_sanction_ref": null
}send-log2.5 KB
{
"N": 2,
"batch_id": "2026-08-13--cursor-s0",
"config_id": "claude-opus-4-8-thinking-eff-xhigh--cli--cursor--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-08-12T19:06:14.729629+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T19:04:28.132254+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-12T19:09:25.205294+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T19:06:18.165030+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-12T19:15:18.319223+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T19:09:28.809145+00:00"
}
],
"block_index": 1,
"model_reaching_attempt_index": 0,
"slot_index": 1,
"terminal_state": "valid",
"variant": "P-q"
},
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-08-12T19:16:43.382039+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T19:15:22.042697+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
}
}
}