claude-sonnet-5-thinking @ xhigh · cursor
cursorxhigh
- config
- claude-sonnet-5-thinking-eff-xhigh--cli--cursor--dev
- batch
- 2026-07-19--unified
- transport
- cursor-agent-cli-isolated-home
- protocol
- cli · plan
- served model
- claude-sonnet-5-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-fable-5 @xhigh · cursor-xl0.70claude-fable-5 @high · cursor-xl0.69gpt-5.6-sol @low · cursor0.69gemini-3.6-flash @low · api0.69claude-fable-5 @medium · cursor-xl0.69farthest
north-mini-code-free · api0.48claude-sonnet-4 · cursor0.51claude-haiku-4-5 @xhigh · CC0.52claude-haiku-4-5 @high · CC0.52claude-sonnet-4-5-thinking · cursor-xl0.52within 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 tempmatchshown: 25
- min tempmatchshown: 16
- hourlymismatchcoverage 0/24 · 0 match · 8 mismatch · 16 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{
--accent: #8ecae6;
--accent-soft: rgba(142,202,230,0.35);
}
*{ box-sizing: border-box; }
html, body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: #f4f6fb;
background: #0d1224;
}
body{
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background:
radial-gradient(circle at 15% 15%, rgba(255,255,255,0.05), transparent 40%),
linear-gradient(155deg, #0b0f22 0%, #171d3f 45%, #241a4a 100%);
}
.bg{
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.orb{
position: absolute;
border-radius: 50%;
filter: blur(70px);
opacity: 0.55;
background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
transition: background 0.8s ease;
animation: float 14s ease-in-out infinite;
}
.orb-1{ width: 480px; height: 480px; top: -160px; left: -120px; animation-delay: 0s; }
.orb-2{ width: 380px; height: 380px; bottom: -140px; right: -80px; animation-delay: -4s; opacity: 0.4; }
.orb-3{ width: 260px; height: 260px; top: 55%; left: 55%; animation-delay: -8s; opacity: 0.3; }
@keyframes float{
0%, 100%{ transform: translate(0, 0) scale(1); }
50%{ transform: translate(30px, -25px) scale(1.08); }
}
.stage{
position: relative;
z-index: 1;
width: 1280px;
height: 800px;
display: flex;
align-items: center;
justify-content: center;
}
.card{
width: 1120px;
max-height: 720px;
overflow: auto;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 28px;
box-shadow:
0 30px 80px rgba(0,0,0,0.45),
inset 0 1px 0 rgba(255,255,255,0.08);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
padding: 44px 52px;
position: relative;
}
.card::-webkit-scrollbar{ width: 8px; }
.card::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.15); border-radius: 8px; }
.card::-webkit-scrollbar-track{ background: transparent; }
/* ---------- Loading state ---------- */
.state-loading{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 22px;
height: 560px;
}
.spinner{
width: 54px;
height: 54px;
border-radius: 50%;
border: 4px solid rgba(255,255,255,0.15);
border-top-color: var(--accent);
animation: spin 0.85s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.state-loading p{
margin: 0;
font-size: 15px;
letter-spacing: 0.02em;
color: rgba(244,246,251,0.65);
}
/* ---------- Error state ---------- */
.state-error{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 14px;
height: 560px;
padding: 0 60px;
}
.state-error h2{
margin: 6px 0 0;
font-size: 22px;
font-weight: 700;
}
.state-error p{
margin: 0;
max-width: 460px;
font-size: 14.5px;
line-height: 1.55;
color: rgba(244,246,251,0.6);
}
/* ---------- Content ---------- */
.state-content{
animation: fadeInUp 0.55s ease both;
}
@keyframes fadeInUp{
from{ opacity: 0; transform: translateY(10px); }
to{ opacity: 1; transform: translateY(0); }
}
.card-header{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
}
.location{
display: flex;
align-items: center;
gap: 14px;
}
.pin{
color: var(--accent);
flex-shrink: 0;
filter: drop-shadow(0 0 10px var(--accent-soft));
}
.location h1{
margin: 0;
font-size: 32px;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.15;
}
.location .date{
margin: 4px 0 0;
font-size: 15px;
color: rgba(244,246,251,0.6);
}
.source-badge{
display: flex;
align-items: center;
gap: 9px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 999px;
padding: 9px 18px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(244,246,251,0.75);
white-space: nowrap;
margin-top: 4px;
}
.source-badge .dot{
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 8px 1px var(--accent);
}
.hero{
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
padding: 34px 0;
margin-top: 6px;
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hero-left{
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-width: 200px;
position: relative;
}
.icon-glow{
position: absolute;
top: -10px;
width: 140px;
height: 140px;
border-radius: 50%;
background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
filter: blur(6px);
z-index: 0;
}
.hero-icon{
width: 108px;
height: 108px;
position: relative;
z-index: 1;
}
.hero-icon svg{ width: 100%; height: 100%; display: block; }
.hero-condition{
position: relative;
z-index: 1;
font-size: 19px;
font-weight: 600;
margin-top: 4px;
text-align: center;
}
.hero-stats{
display: flex;
gap: 16px;
flex: 1;
justify-content: flex-end;
}
.stat-card{
display: flex;
align-items: center;
gap: 14px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 18px;
padding: 16px 20px;
min-width: 150px;
transition: transform 0.25s ease, background 0.25s ease;
}
.stat-card:hover{
transform: translateY(-4px);
background: rgba(255,255,255,0.1);
}
.stat-icon{ width: 24px; height: 24px; flex-shrink: 0; }
.stat-label{
margin: 0;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: rgba(244,246,251,0.55);
}
.stat-value{
margin: 3px 0 0;
font-size: 23px;
font-weight: 700;
}
.chart-section{ margin-top: 30px; }
.chart-header{
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 10px;
}
.chart-header h2{
margin: 0;
font-size: 17px;
font-weight: 700;
}
.chart-sub{
font-size: 12.5px;
color: rgba(244,246,251,0.5);
letter-spacing: 0.02em;
}
.chart-wrap{
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
padding: 16px 10px 6px;
}
.chart-svg{ width: 100%; height: 236px; display: block; overflow: visible; }
.chart-svg .pt{
cursor: pointer;
transition: r 0.15s ease;
}
.chart-svg .pt:hover{
r: 6;
filter: drop-shadow(0 0 6px rgba(255,255,255,0.7));
}
.card-footer{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 26px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,0.08);
font-size: 12.5px;
color: rgba(244,246,251,0.45);
letter-spacing: 0.02em;
}
[hidden]{ display: none !important; }
</style>
</head>
<body>
<div class="bg">
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
<div class="orb orb-3"></div>
</div>
<main class="stage">
<section class="card" id="card">
<div class="state-loading" id="loadingState">
<div class="spinner"></div>
<p>Fetching weather data…</p>
</div>
<div class="state-error" id="errorState" hidden>
<svg viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="#ff6b6b" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 3 2 20h20L12 3z"/>
<line x1="12" y1="9" x2="12" y2="14"/>
<circle cx="12" cy="17" r="0.9" fill="#ff6b6b" stroke="none"/>
</svg>
<h2>Unable to load weather data</h2>
<p id="errorMessage">Something went wrong while contacting the weather service.</p>
</div>
<div class="state-content" id="contentState" hidden>
<header class="card-header">
<div class="location">
<svg class="pin" viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 21s-7-7.58-7-12a7 7 0 1 1 14 0c0 4.42-7 12-7 12z"/>
<circle cx="12" cy="9" r="2.5"/>
</svg>
<div>
<h1 id="locationName">—</h1>
<p class="date" id="dateLabel">—</p>
</div>
</div>
<div class="source-badge">
<span class="dot"></span>
<span id="sourceLabel">—</span>
</div>
</header>
<section class="hero">
<div class="hero-left">
<div class="icon-glow"></div>
<div class="hero-icon" id="heroIcon"></div>
<div class="hero-condition" id="heroCondition">—</div>
</div>
<div class="hero-stats">
<div class="stat-card">
<svg class="stat-icon" viewBox="0 0 24 24" fill="none" stroke="#ff8a5c" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
<div>
<p class="stat-label">High</p>
<p class="stat-value" id="statHigh">—</p>
</div>
</div>
<div class="stat-card">
<svg class="stat-icon" viewBox="0 0 24 24" fill="none" stroke="#5ec8ff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
<div>
<p class="stat-label">Low</p>
<p class="stat-value" id="statLow">—</p>
</div>
</div>
<div class="stat-card">
<svg class="stat-icon" viewBox="0 0 24 24" fill="none" stroke="#c792ff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h4l3 8 4-16 3 8h4"/></svg>
<div>
<p class="stat-label">Average</p>
<p class="stat-value" id="statAvg">—</p>
</div>
</div>
</div>
</section>
<section class="chart-section">
<div class="chart-header">
<h2>Hourly Temperature</h2>
<span class="chart-sub" id="chartSub">—</span>
</div>
<div class="chart-wrap" id="chartWrap"></div>
</section>
<footer class="card-footer">
<span id="coordsLabel">—</span>
<span>Data via Open‑Meteo</span>
</footer>
</div>
</section>
</main>
<script>
(function(){
"use strict";
var WEATHER_META = {
0: ["Clear sky", "clear"],
1: ["Mainly clear", "partly-cloudy"],
2: ["Partly cloudy", "partly-cloudy"],
3: ["Overcast", "cloudy"],
45: ["Fog", "fog"],
48: ["Freezing 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: ["Slight rain", "rain"],
63: ["Moderate rain", "rain"],
65: ["Heavy rain", "rain"],
66: ["Light freezing rain", "rain"],
67: ["Heavy freezing rain", "rain"],
71: ["Slight snow fall", "snow"],
73: ["Moderate snow fall", "snow"],
75: ["Heavy snow fall", "snow"],
77: ["Snow grains", "snow"],
80: ["Slight rain showers", "rain"],
81: ["Moderate rain showers", "rain"],
82: ["Violent rain showers", "rain"],
85: ["Slight snow showers", "snow"],
86: ["Heavy snow showers", "snow"],
95: ["Thunderstorm", "storm"],
96: ["Thunderstorm with hail", "storm"],
99: ["Thunderstorm with heavy hail", "storm"]
};
var ACCENTS = {
"clear": "#ffc93c",
"partly-cloudy": "#ffd580",
"cloudy": "#aab4c4",
"fog": "#c3ccd6",
"drizzle": "#7ec8e3",
"rain": "#4a90e2",
"snow": "#9fdcff",
"storm": "#b98cff"
};
var ICONS = {
"clear": function(){
return '<svg viewBox="0 0 100 100">' +
'<defs><radialGradient id="g-sun" cx="50%" cy="45%" r="55%">' +
'<stop offset="0%" stop-color="#fff6d5"/><stop offset="55%" stop-color="#ffc93c"/><stop offset="100%" stop-color="#ff9f1c"/>' +
'</radialGradient></defs>' +
'<g stroke="#ffc93c" stroke-width="4" stroke-linecap="round" opacity="0.9">' +
'<line x1="50" y1="4" x2="50" y2="16"/><line x1="50" y1="84" x2="50" y2="96"/>' +
'<line x1="4" y1="50" x2="16" y2="50"/><line x1="84" y1="50" x2="96" y2="50"/>' +
'<line x1="15" y1="15" x2="24" y2="24"/><line x1="76" y1="76" x2="85" y2="85"/>' +
'<line x1="15" y1="85" x2="24" y2="76"/><line x1="76" y1="24" x2="85" y2="15"/>' +
'</g><circle cx="50" cy="50" r="27" fill="url(#g-sun)"/></svg>';
},
"partly-cloudy": function(){
return '<svg viewBox="0 0 100 100">' +
'<defs><radialGradient id="g-sun2" cx="50%" cy="45%" r="55%">' +
'<stop offset="0%" stop-color="#fff6d5"/><stop offset="60%" stop-color="#ffc93c"/><stop offset="100%" stop-color="#ff9f1c"/>' +
'</radialGradient><linearGradient id="g-cloud2" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0%" stop-color="#ffffff"/><stop offset="100%" stop-color="#cfd8e3"/></linearGradient></defs>' +
'<circle cx="36" cy="32" r="17" fill="url(#g-sun2)"/>' +
'<g><ellipse cx="42" cy="66" rx="20" ry="15" fill="url(#g-cloud2)"/>' +
'<ellipse cx="62" cy="56" rx="24" ry="20" fill="url(#g-cloud2)"/>' +
'<ellipse cx="78" cy="66" rx="14" ry="11" fill="url(#g-cloud2)"/>' +
'<rect x="34" y="62" width="56" height="18" rx="9" fill="url(#g-cloud2)"/></g></svg>';
},
"cloudy": function(){
return '<svg viewBox="0 0 100 100">' +
'<defs><linearGradient id="g-cloud3" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0%" stop-color="#e4e9ef"/><stop offset="100%" stop-color="#9aa7b8"/></linearGradient></defs>' +
'<g><ellipse cx="34" cy="58" rx="20" ry="16" fill="url(#g-cloud3)"/>' +
'<ellipse cx="56" cy="46" rx="26" ry="22" fill="url(#g-cloud3)"/>' +
'<ellipse cx="76" cy="58" rx="16" ry="13" fill="url(#g-cloud3)"/>' +
'<rect x="26" y="54" width="58" height="20" rx="10" fill="url(#g-cloud3)"/></g></svg>';
},
"fog": function(){
return '<svg viewBox="0 0 100 100">' +
'<defs><linearGradient id="g-cloud4" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0%" stop-color="#e8edf2"/><stop offset="100%" stop-color="#b7c2cf"/></linearGradient></defs>' +
'<g><ellipse cx="40" cy="40" rx="22" ry="16" fill="url(#g-cloud4)"/>' +
'<ellipse cx="63" cy="35" rx="15" ry="12" fill="url(#g-cloud4)"/></g>' +
'<g stroke="#c3cdd8" stroke-width="5" stroke-linecap="round">' +
'<line x1="16" y1="60" x2="84" y2="60"/><line x1="24" y1="73" x2="76" y2="73"/>' +
'<line x1="12" y1="86" x2="88" y2="86"/></g></svg>';
},
"drizzle": function(){
return '<svg viewBox="0 0 100 100">' +
'<defs><linearGradient id="g-cloud5" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0%" stop-color="#dfe7ee"/><stop offset="100%" stop-color="#8f9fb3"/></linearGradient></defs>' +
'<g><ellipse cx="34" cy="44" rx="19" ry="15" fill="url(#g-cloud5)"/>' +
'<ellipse cx="56" cy="34" rx="25" ry="20" fill="url(#g-cloud5)"/>' +
'<ellipse cx="74" cy="45" rx="15" ry="12" fill="url(#g-cloud5)"/>' +
'<rect x="26" y="40" width="56" height="18" rx="9" fill="url(#g-cloud5)"/></g>' +
'<g stroke="#7ec8e3" stroke-width="4" stroke-linecap="round">' +
'<line x1="38" y1="72" x2="34" y2="82"/><line x1="56" y1="74" x2="52" y2="84"/>' +
'<line x1="74" y1="72" x2="70" y2="82"/></g></svg>';
},
"rain": function(){
return '<svg viewBox="0 0 100 100">' +
'<defs><linearGradient id="g-cloud6" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0%" stop-color="#c9d3de"/><stop offset="100%" stop-color="#5f7186"/></linearGradient></defs>' +
'<g><ellipse cx="34" cy="42" rx="19" ry="15" fill="url(#g-cloud6)"/>' +
'<ellipse cx="56" cy="32" rx="25" ry="20" fill="url(#g-cloud6)"/>' +
'<ellipse cx="74" cy="43" rx="15" ry="12" fill="url(#g-cloud6)"/>' +
'<rect x="26" y="38" width="56" height="18" rx="9" fill="url(#g-cloud6)"/></g>' +
'<g stroke="#4a90e2" stroke-width="4" stroke-linecap="round">' +
'<line x1="34" y1="70" x2="29" y2="86"/><line x1="52" y1="72" x2="47" y2="88"/>' +
'<line x1="70" y1="70" x2="65" y2="86"/></g></svg>';
},
"snow": function(){
return '<svg viewBox="0 0 100 100">' +
'<defs><linearGradient id="g-cloud7" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0%" stop-color="#eef4fa"/><stop offset="100%" stop-color="#bcd0e0"/></linearGradient></defs>' +
'<g><ellipse cx="34" cy="42" rx="19" ry="15" fill="url(#g-cloud7)"/>' +
'<ellipse cx="56" cy="32" rx="25" ry="20" fill="url(#g-cloud7)"/>' +
'<ellipse cx="74" cy="43" rx="15" ry="12" fill="url(#g-cloud7)"/>' +
'<rect x="26" y="38" width="56" height="18" rx="9" fill="url(#g-cloud7)"/></g>' +
'<g fill="#bfe4ff"><circle cx="34" cy="78" r="4"/><circle cx="54" cy="84" r="4"/>' +
'<circle cx="72" cy="78" r="4"/></g></svg>';
},
"storm": function(){
return '<svg viewBox="0 0 100 100">' +
'<defs><linearGradient id="g-cloud8" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0%" stop-color="#8891a5"/><stop offset="100%" stop-color="#454d5f"/></linearGradient></defs>' +
'<g><ellipse cx="34" cy="40" rx="19" ry="15" fill="url(#g-cloud8)"/>' +
'<ellipse cx="56" cy="30" rx="25" ry="20" fill="url(#g-cloud8)"/>' +
'<ellipse cx="74" cy="41" rx="15" ry="12" fill="url(#g-cloud8)"/>' +
'<rect x="26" y="36" width="56" height="18" rx="9" fill="url(#g-cloud8)"/></g>' +
'<path d="M58,58 L44,78 L54,78 L46,96 L70,70 L58,70 Z" fill="#ffd23f"/></svg>';
}
};
var WEEKDAYS = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var MONTHS = ["January","February","March","April","May","June","July","August","September","October","November","December"];
function todayUTC(){
return new Date().toISOString().slice(0, 10);
}
function formatDateLabel(dateStr){
var parts = dateStr.split("-").map(Number);
var d = new Date(Date.UTC(parts[0], parts[1] - 1, parts[2]));
return WEEKDAYS[d.getUTCDay()] + ", " + MONTHS[d.getUTCMonth()] + " " + d.getUTCDate() + ", " + parts[0];
}
function formatCoord(lat, lon){
var latDir = lat >= 0 ? "N" : "S";
var lonDir = lon >= 0 ? "E" : "W";
return Math.abs(lat).toFixed(2) + "\u00B0" + latDir + ", " + Math.abs(lon).toFixed(2) + "\u00B0" + lonDir;
}
function getFloatParam(params, name, def){
var v = params.get(name);
if(v === null || v.trim() === "") return def;
var n = parseFloat(v);
return isNaN(n) ? def : n;
}
function getStringParam(params, name, def){
var v = params.get(name);
if(v === null || v.trim() === "") return def;
return v;
}
function getDateParam(params){
var v = params.get("date");
if(v && /^\d{4}-\d{2}-\d{2}$/.test(v)){
var parts = v.split("-").map(Number);
var d = new Date(Date.UTC(parts[0], parts[1] - 1, parts[2]));
if(d.getUTCFullYear() === parts[0] && d.getUTCMonth() === parts[1] - 1 && d.getUTCDate() === parts[2]){
return v;
}
}
return todayUTC();
}
function buildChart(times, temps, accent){
var W = 1000, H = 236;
var padL = 46, padR = 16, padT = 18, padB = 30;
var innerW = W - padL - padR;
var innerH = H - padT - padB;
var n = temps.length;
var min = Math.min.apply(null, temps);
var max = Math.max.apply(null, temps);
if(min === max){ min -= 1; max += 1; }
var pad = (max - min) * 0.25;
min = Math.floor(min - pad);
max = Math.ceil(max + pad);
if(min === max){ max = min + 1; }
function xPos(i){ return n === 1 ? padL + innerW / 2 : padL + (i * innerW) / (n - 1); }
function yPos(t){ return padT + innerH - ((t - min) / (max - min)) * innerH; }
var pts = [];
for(var i = 0; i < n; i++){
pts.push({ x: xPos(i), y: yPos(temps[i]), t: temps[i], time: times[i] });
}
var linePath = "M " + pts[0].x.toFixed(1) + " " + pts[0].y.toFixed(1);
for(var j = 0; j < pts.length - 1; j++){
var p0 = pts[j], p1 = pts[j + 1];
var cx = ((p0.x + p1.x) / 2).toFixed(1);
linePath += " C " + cx + " " + p0.y.toFixed(1) + ", " + cx + " " + p1.y.toFixed(1) + ", " + p1.x.toFixed(1) + " " + p1.y.toFixed(1);
}
var baseline = (padT + innerH).toFixed(1);
var areaPath = linePath + " L " + pts[n - 1].x.toFixed(1) + " " + baseline + " L " + pts[0].x.toFixed(1) + " " + baseline + " Z";
var gridCount = 4;
var gridLines = "";
var gridLabels = "";
for(var g = 0; g <= gridCount; g++){
var val = min + (max - min) * g / gridCount;
var gy = yPos(val);
gridLines += '<line x1="' + padL + '" y1="' + gy.toFixed(1) + '" x2="' + (W - padR) + '" y2="' + gy.toFixed(1) + '" stroke="rgba(255,255,255,0.08)" stroke-width="1"/>';
gridLabels += '<text x="' + (padL - 10) + '" y="' + (gy + 4).toFixed(1) + '" text-anchor="end" font-size="12" fill="rgba(244,246,251,0.45)">' + Math.round(val) + '\u00B0</text>';
}
var xLabels = "";
for(var k = 0; k < n; k++){
var hour = parseInt(times[k].slice(11, 13), 10);
if(hour % 3 === 0){
xLabels += '<text x="' + pts[k].x.toFixed(1) + '" y="' + (H - 8) + '" text-anchor="middle" font-size="12" fill="rgba(244,246,251,0.45)">' + String(hour).padStart(2, "0") + ':00</text>';
}
}
var dots = "";
for(var m = 0; m < n; m++){
var hh = times[m].slice(11, 16);
dots += '<circle class="pt" cx="' + pts[m].x.toFixed(1) + '" cy="' + pts[m].y.toFixed(1) + '" r="3.5" fill="' + accent + '"><title>' + hh + ' \u2014 ' + Math.round(pts[m].t) + '\u00B0C</title></circle>';
}
return '<svg viewBox="0 0 ' + W + ' ' + H + '" preserveAspectRatio="none" class="chart-svg">' +
'<defs><linearGradient id="areaFill" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0%" stop-color="' + accent + '" stop-opacity="0.45"/>' +
'<stop offset="100%" stop-color="' + accent + '" stop-opacity="0"/></linearGradient></defs>' +
gridLines + gridLabels +
'<path d="' + areaPath + '" fill="url(#areaFill)"/>' +
'<path d="' + linePath + '" fill="none" stroke="' + accent + '" stroke-width="3" stroke-linecap="round"/>' +
dots + xLabels +
'</svg>';
}
async function fetchWeather(lat, lon, dateStr){
var today = todayUTC();
var endpoint = dateStr < today ? "/api/om/archive" : "/api/om/forecast";
var qs = new URLSearchParams({
latitude: String(lat),
longitude: String(lon),
daily: "temperature_2m_max,temperature_2m_min,weather_code",
hourly: "temperature_2m",
timezone: "UTC",
temperature_unit: "celsius",
start_date: dateStr,
end_date: dateStr
});
var res;
try{
res = await fetch(endpoint + "?" + qs.toString());
}catch(networkErr){
throw new Error("network error while contacting the weather service");
}
if(!res.ok){
throw new Error("the weather service responded with status " + res.status);
}
var data;
try{
data = await res.json();
}catch(parseErr){
throw new Error("the weather service returned an invalid response");
}
if(!data || !data.daily || !data.hourly ||
!Array.isArray(data.daily.time) || data.daily.time.length === 0 ||
!Array.isArray(data.hourly.time) || data.hourly.time.length === 0){
throw new Error("the weather service returned incomplete data");
}
return data;
}
var els = {
loading: document.getElementById("loadingState"),
error: document.getElementById("errorState"),
errorMessage: document.getElementById("errorMessage"),
content: document.getElementById("contentState")
};
function showLoading(){
els.loading.hidden = false;
els.error.hidden = true;
els.content.hidden = true;
}
function showError(msg){
els.loading.hidden = true;
els.error.hidden = false;
els.content.hidden = true;
els.errorMessage.textContent = msg;
}
function showContent(){
els.loading.hidden = true;
els.error.hidden = true;
els.content.hidden = false;
}
function renderContent(ctx){
var lat = ctx.lat, lon = ctx.lon, name = ctx.name, dateStr = ctx.dateStr, data = ctx.data;
var code = data.daily.weather_code[0];
var meta = WEATHER_META[code] || ["Unknown conditions", "cloudy"];
var label = meta[0], category = meta[1];
var accent = ACCENTS[category] || "#8ecae6";
document.documentElement.style.setProperty("--accent", accent);
document.documentElement.style.setProperty("--accent-soft", accent + "59");
document.getElementById("locationName").textContent = name;
document.getElementById("dateLabel").textContent = formatDateLabel(dateStr);
document.getElementById("coordsLabel").textContent = formatCoord(lat, lon);
var iconFn = ICONS[category] || ICONS["cloudy"];
document.getElementById("heroIcon").innerHTML = iconFn();
document.getElementById("heroCondition").textContent = label;
var tmax = data.daily.temperature_2m_max[0];
var tmin = data.daily.temperature_2m_min[0];
var temps = data.hourly.temperature_2m;
var sum = 0;
for(var i = 0; i < temps.length; i++) sum += temps[i];
var avg = sum / temps.length;
document.getElementById("statHigh").textContent = Math.round(tmax) + "\u00B0C";
document.getElementById("statLow").textContent = Math.round(tmin) + "\u00B0C";
document.getElementById("statAvg").textContent = Math.round(avg) + "\u00B0C";
document.getElementById("chartWrap").innerHTML = buildChart(data.hourly.time, temps, accent);
document.getElementById("chartSub").textContent = temps.length + " readings \u00B7 UTC";
var today = todayUTC();
var sourceLabel = document.getElementById("sourceLabel");
if(dateStr < today) sourceLabel.textContent = "Historical data";
else if(dateStr === today) sourceLabel.textContent = "Today";
else sourceLabel.textContent = "Forecast";
document.title = name + " \u00B7 Weather";
}
async function init(){
var params = new URLSearchParams(window.location.search);
var lat = getFloatParam(params, "lat", 52.52);
var lon = getFloatParam(params, "lon", 13.405);
var name = getStringParam(params, "name", "Berlin");
var dateStr = getDateParam(params);
showLoading();
try{
var data = await fetchWeather(lat, lon, dateStr);
renderContent({ lat: lat, lon: lon, name: name, dateStr: dateStr, data: data });
showContent();
}catch(err){
var msg = (err && err.message) ? err.message : "an unknown error occurred";
showError("We couldn't load the weather data (" + msg + "). Please try again later.");
}
}
init();
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 27,864 | html / css / js | 3,849 / 7,428 / 16,587 |
|---|---|---|---|
| dom nodes | 68 | dom depth | 10 |
| css rules | 58 | js present | yes |
| brightness | 52.4 | contrast | 20.6 |
| colorfulness | 19.0 | whitespace | 67.5% |
This slot's telemetry
| prompt tokens | 54 | completion tokens | 64,277 |
|---|---|---|---|
| total tokens | 64,331 | wall | 790.8 s |
| cost | — | request id | — |
config.json614 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "claude-sonnet-5-thinking-eff-xhigh--cli--cursor--dev",
"effort": "xhigh",
"family": "claude",
"m": {
"min": 2,
"q": 2
},
"model_id": "claude-sonnet-5-thinking",
"protocol": "cli",
"served_model": "claude-sonnet-5-thinking-xhigh",
"telemetry": {
"completion_tokens": 190842,
"cost_usd": null,
"prompt_tokens": 236,
"total_tokens": 191078,
"wall_ms": 2405714
},
"transport": "cursor-agent-cli-isolated-home",
"vendor_sanction_ref": null
}send-log2.5 KB
{
"N": 2,
"batch_id": "2026-08-13--cursor-s3",
"config_id": "claude-sonnet-5-thinking-eff-xhigh--cli--cursor--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-08-12T17:50:24.082512+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T17:37:13.252577+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-12T17:56:25.532964+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T17:50:27.714669+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-12T18:01:23.284937+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T17:56:28.852636+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-12T18:17:29.586424+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T18:01:26.899300+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
}
}
}