claude-sonnet-5 @ xhigh · cursor
cursorxhigh
- config
- claude-sonnet-5-eff-xhigh--cli--cursor--dev
- batch
- 2026-07-19--unified
- transport
- cursor-agent-cli-isolated-home
- protocol
- cli · plan
- served model
- claude-sonnet-5-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-sonnet-5 @xhigh · cursor-xl0.69claude-sonnet-5-thinking @high · cursor-xl0.69claude-sonnet-5-thinking @medium · cursor-xl0.68claude-opus-4-7-thinking @xhigh · cursor0.67claude-sonnet-5-thinking @high · cursor0.67farthest
grok-4.3 · api0.51deepseek-v4-pro · opencode0.52qwen3.6-plus · go0.52grok-4.3 @low · api0.52grok-4.3 @medium · api0.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 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">
<title>Weather</title>
<meta name="viewport" content="width=1280, height=800">
<style>
:root{
color-scheme: light;
}
*{ box-sizing: border-box; }
html, body{
margin: 0;
padding: 0;
width: 1280px;
height: 800px;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
#app{
position: relative;
width: 1280px;
height: 800px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(160deg, #3a6ea5 0%, #6fa8d8 45%, #cfe4f5 100%);
transition: background 0.8s ease;
isolation: isolate;
}
/* ---------- decorative background ---------- */
#bg-decor{
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.sun-glow{
position: absolute;
top: -180px;
right: -140px;
width: 560px;
height: 560px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,225,140,0.95) 0%, rgba(255,200,90,0.55) 35%, rgba(255,200,90,0) 70%);
animation: pulse 6s ease-in-out infinite;
}
@keyframes pulse{
0%, 100% { transform: scale(1); opacity: 0.9; }
50% { transform: scale(1.08); opacity: 1; }
}
.cloud-shape{
position: absolute;
background: rgba(255,255,255,0.5);
border-radius: 100px;
filter: blur(6px);
animation: drift linear infinite;
}
@keyframes drift{
from{ transform: translateX(-120px); }
to{ transform: translateX(1400px); }
}
.fog-band{
position: absolute;
left: -10%;
width: 120%;
height: 90px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
filter: blur(4px);
animation: fogdrift ease-in-out infinite;
}
@keyframes fogdrift{
0%, 100% { transform: translateX(-60px); }
50% { transform: translateX(60px); }
}
.raindrop{
position: absolute;
top: -40px;
width: 2px;
height: 46px;
background: linear-gradient(180deg, rgba(210,230,255,0), rgba(210,230,255,0.75));
animation: fall linear infinite;
}
@keyframes fall{
from{ transform: translateY(-60px); }
to{ transform: translateY(860px); }
}
.snowflake{
position: absolute;
top: -20px;
border-radius: 50%;
background: rgba(255,255,255,0.9);
animation: snowfall linear infinite;
}
@keyframes snowfall{
from{ transform: translateY(-20px) translateX(0); }
to{ transform: translateY(840px) translateX(30px); }
}
.lightning-flash{
position: absolute;
inset: 0;
background: rgba(255,255,255,0.85);
opacity: 0;
animation: flash 7s infinite;
}
@keyframes flash{
0%, 92%, 100% { opacity: 0; }
93% { opacity: 0.55; }
94% { opacity: 0.05; }
95% { opacity: 0.4; }
96% { opacity: 0; }
}
/* ---------- card ---------- */
.card{
position: relative;
z-index: 1;
width: 1000px;
height: 660px;
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.35);
border-radius: 32px;
backdrop-filter: blur(22px) saturate(160%);
-webkit-backdrop-filter: blur(22px) saturate(160%);
box-shadow: 0 30px 70px rgba(10,20,40,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
padding: 44px 56px;
display: flex;
flex-direction: column;
color: #ffffff;
text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
/* ---------- states ---------- */
#state-loading, #state-error{
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 22px;
color: #ffffff;
text-align: center;
}
#state-loading{ width: 1000px; height: 660px; }
.spinner{
width: 54px;
height: 54px;
border-radius: 50%;
border: 4px solid rgba(255,255,255,0.3);
border-top-color: #ffffff;
animation: spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.loading-text{ font-size: 18px; letter-spacing: 0.3px; opacity: 0.9; }
#state-error{
width: 760px;
background: rgba(30, 20, 20, 0.35);
border: 1px solid rgba(255,255,255,0.3);
border-radius: 28px;
padding: 48px 56px;
backdrop-filter: blur(16px);
}
.error-icon{
width: 56px;
height: 56px;
}
.error-title{
font-size: 24px;
font-weight: 700;
margin: 0;
}
.error-detail{
font-size: 15px;
opacity: 0.85;
max-width: 520px;
line-height: 1.5;
margin: 0;
}
.hidden{ display: none !important; }
/* ---------- header ---------- */
.card-header{
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.location{
display: flex;
align-items: center;
gap: 14px;
}
.location svg{ width: 34px; height: 34px; flex-shrink: 0; opacity: 0.95; }
.location-name{
font-size: 34px;
font-weight: 700;
margin: 0;
line-height: 1.15;
letter-spacing: -0.3px;
}
.coords{
margin: 2px 0 0;
font-size: 14px;
font-weight: 500;
opacity: 0.78;
letter-spacing: 0.2px;
}
.date-badge{
text-align: right;
padding: 10px 20px;
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.3);
border-radius: 16px;
}
.date-main{
display: block;
font-size: 17px;
font-weight: 600;
}
.date-year{
display: block;
font-size: 13px;
opacity: 0.75;
margin-top: 1px;
}
/* ---------- hero ---------- */
.hero{
display: flex;
align-items: center;
margin-top: 18px;
padding: 26px 6px;
flex: 1;
}
.hero-icon-wrap{
width: 170px;
height: 170px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hero-icon-wrap svg{ width: 160px; height: 160px; }
.hero-mid{
margin-left: 18px;
flex: 1;
}
.condition-text{
font-size: 26px;
font-weight: 600;
margin: 0 0 6px;
letter-spacing: -0.2px;
}
.condition-sub{
font-size: 14px;
opacity: 0.75;
margin: 0;
}
.hero-temps{
display: flex;
align-items: center;
gap: 30px;
margin-left: auto;
padding-left: 30px;
}
.temp-block{
text-align: center;
}
.temp-block .value{
display: block;
font-size: 72px;
font-weight: 700;
line-height: 1;
letter-spacing: -2px;
}
.temp-block.min .value{ font-size: 52px; opacity: 0.85; }
.temp-block .label{
display: block;
margin-top: 6px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
opacity: 0.7;
}
.temp-divider{
width: 1px;
height: 78px;
background: rgba(255,255,255,0.3);
}
/* ---------- hourly ---------- */
.hourly{
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.25);
border-radius: 22px;
padding: 22px 26px 14px;
}
.hourly-header{
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 4px;
}
.hourly-header h2{
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.4px;
margin: 0;
opacity: 0.85;
}
.hourly-header span{
font-size: 12px;
opacity: 0.6;
font-weight: 600;
}
.chart-wrap{
position: relative;
}
.chart-svg{ display: block; }
.chart-point{ cursor: default; }
.chart-tooltip{
position: absolute;
transform: translate(-50%, -100%);
background: rgba(20, 30, 45, 0.92);
color: #fff;
padding: 6px 10px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.12s ease;
box-shadow: 0 6px 16px rgba(0,0,0,0.3);
z-index: 5;
}
.chart-tooltip.visible{ opacity: 1; }
.chart-tooltip::after{
content: "";
position: absolute;
left: 50%;
top: 100%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: rgba(20, 30, 45, 0.92);
}
</style>
</head>
<body>
<div id="app">
<div id="bg-decor"></div>
<div id="state-loading">
<div class="spinner"></div>
<div class="loading-text">Loading weather data…</div>
</div>
<div id="state-error" class="hidden">
<svg class="error-icon" viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="10" stroke="#ffffff" stroke-width="1.6" opacity="0.9"/>
<path d="M12 7.5V13" stroke="#ffffff" stroke-width="1.8" stroke-linecap="round"/>
<circle cx="12" cy="16.3" r="1.05" fill="#ffffff"/>
</svg>
<p class="error-title">Weather data unavailable</p>
<p class="error-detail" id="error-detail">We couldn't load the forecast for this location right now. Please try again later.</p>
</div>
<div class="card hidden" id="state-content">
<header class="card-header">
<div class="location">
<svg viewBox="0 0 24 24" fill="none">
<path d="M12 22s7-7.58 7-12.5A7 7 0 0 0 5 9.5C5 14.42 12 22 12 22Z" fill="#ffffff" fill-opacity="0.9"/>
<circle cx="12" cy="9.5" r="2.6" fill="#3a6ea5"/>
</svg>
<div>
<h1 class="location-name" id="location-name"> </h1>
<p class="coords" id="coords"> </p>
</div>
</div>
<div class="date-badge">
<span class="date-main" id="date-main"> </span>
<span class="date-year" id="date-year"> </span>
</div>
</header>
<section class="hero">
<div class="hero-icon-wrap" id="hero-icon"></div>
<div class="hero-mid">
<p class="condition-text" id="condition-text"> </p>
<p class="condition-sub" id="condition-sub">Weather condition</p>
</div>
<div class="hero-temps">
<div class="temp-block max">
<span class="value" id="temp-max">–</span>
<span class="label">High</span>
</div>
<div class="temp-divider"></div>
<div class="temp-block min">
<span class="value" id="temp-min">–</span>
<span class="label">Low</span>
</div>
</div>
</section>
<section class="hourly">
<div class="hourly-header">
<h2>Hourly Temperature</h2>
<span id="hourly-range">UTC</span>
</div>
<div class="chart-wrap" id="chart-wrap">
<div class="chart-tooltip" id="chart-tooltip"></div>
</div>
</section>
</div>
</div>
<script>
(function(){
"use strict";
/* ---------------- URL params & defaults ---------------- */
var qs = new URLSearchParams(window.location.search);
function toNumber(v, fallback){
var n = parseFloat(v);
return (v !== null && !isNaN(n)) ? n : fallback;
}
function todayUTC(){
return new Date().toISOString().slice(0, 10);
}
var DEFAULT_LAT = 52.52;
var DEFAULT_LON = 13.405;
var DEFAULT_NAME = "Berlin";
var lat = toNumber(qs.get("lat"), DEFAULT_LAT);
var lon = toNumber(qs.get("lon"), DEFAULT_LON);
var locationName = qs.get("name") || DEFAULT_NAME;
var rawDate = qs.get("date");
var dateRe = /^\d{4}-\d{2}-\d{2}$/;
var requestDate = (rawDate && dateRe.test(rawDate)) ? rawDate : todayUTC();
var isPast = requestDate < todayUTC();
var apiBase = isPast ? "/api/om/archive" : "/api/om/forecast";
/* ---------------- weather code lookup ---------------- */
var WEATHER_INFO = {
0: { text: "Clear sky", icon: "sun", theme: "clear" },
1: { text: "Mainly clear", icon: "sunCloud", theme: "clear" },
2: { text: "Partly cloudy", icon: "sunCloud", theme: "cloudy" },
3: { text: "Overcast", icon: "cloud", theme: "cloudy" },
45: { text: "Fog", icon: "fog", theme: "fog" },
48: { text: "Rime fog", icon: "fog", theme: "fog" },
51: { text: "Light drizzle", icon: "drizzle", theme: "rain" },
53: { text: "Moderate drizzle", icon: "drizzle", theme: "rain" },
55: { text: "Dense drizzle", icon: "drizzle", theme: "rain" },
56: { text: "Light freezing drizzle", icon: "drizzle", theme: "rain" },
57: { text: "Dense freezing drizzle", icon: "drizzle", theme: "rain" },
61: { text: "Slight rain", icon: "rain", theme: "rain" },
63: { text: "Moderate rain", icon: "rain", theme: "rain" },
65: { text: "Heavy rain", icon: "rain", theme: "rain" },
66: { text: "Light freezing rain", icon: "rain", theme: "rain" },
67: { text: "Heavy freezing rain", icon: "rain", theme: "rain" },
71: { text: "Slight snow fall", icon: "snow", theme: "snow" },
73: { text: "Moderate snow fall", icon: "snow", theme: "snow" },
75: { text: "Heavy snow fall", icon: "snow", theme: "snow" },
77: { text: "Snow grains", icon: "snow", theme: "snow" },
80: { text: "Slight rain showers", icon: "rain", theme: "rain" },
81: { text: "Moderate rain showers", icon: "rain", theme: "rain" },
82: { text: "Violent rain showers", icon: "rain", theme: "rain" },
85: { text: "Slight snow showers", icon: "snow", theme: "snow" },
86: { text: "Heavy snow showers", icon: "snow", theme: "snow" },
95: { text: "Thunderstorm", icon: "storm", theme: "storm" },
96: { text: "Thunderstorm, slight hail", icon: "storm", theme: "storm" },
99: { text: "Thunderstorm, heavy hail", icon: "storm", theme: "storm" }
};
var THEMES = {
clear: { bg: "linear-gradient(160deg, #2f80c9 0%, #6fc0f2 45%, #ffe6a9 100%)" },
cloudy: { bg: "linear-gradient(160deg, #5c7690 0%, #8fa5bb 50%, #d3dde6 100%)" },
rain: { bg: "linear-gradient(160deg, #1c2b3a 0%, #33506a 50%, #587896 100%)" },
snow: { bg: "linear-gradient(160deg, #46617e 0%, #9cb8d1 50%, #eef4fa 100%)" },
fog: { bg: "linear-gradient(160deg, #4b5a66 0%, #8b9aa6 50%, #cfd8dd 100%)" },
storm: { bg: "linear-gradient(160deg, #10162a 0%, #2c2b52 55%, #4c3c70 100%)" }
};
/* ---------------- icon svg builders ---------------- */
function svgWrap(inner){
return '<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">' + inner + '</svg>';
}
var ICONS = {
sun: svgWrap(
'<defs><radialGradient id="sunGrad" cx="50%" cy="45%" r="60%">' +
'<stop offset="0%" stop-color="#fff6d8"/><stop offset="55%" stop-color="#ffd35c"/><stop offset="100%" stop-color="#ff9d3d"/>' +
'</radialGradient></defs>' +
'<g stroke="#ffd35c" stroke-width="4.5" stroke-linecap="round">' +
'<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="16.5" y1="16.5" x2="25" y2="25"/><line x1="75" y1="75" x2="83.5" y2="83.5"/>' +
'<line x1="16.5" y1="83.5" x2="25" y2="75"/><line x1="75" y1="25" x2="83.5" y2="16.5"/>' +
'</g>' +
'<circle cx="50" cy="50" r="24" fill="url(#sunGrad)"/>'
),
sunCloud: svgWrap(
'<defs><radialGradient id="sunGrad2" cx="50%" cy="45%" r="60%">' +
'<stop offset="0%" stop-color="#fff6d8"/><stop offset="55%" stop-color="#ffd35c"/><stop offset="100%" stop-color="#ff9d3d"/>' +
'</radialGradient>' +
'<linearGradient id="cloudGrad2" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0%" stop-color="#ffffff"/><stop offset="100%" stop-color="#dfe9f2"/>' +
'</linearGradient></defs>' +
'<circle cx="62" cy="36" r="20" fill="url(#sunGrad2)"/>' +
'<path d="M20 74a15 15 0 0 1 3-29.7A19 19 0 0 1 59 40a13.5 13.5 0 0 1 3 26.7A14 14 0 0 1 60 74Z" fill="url(#cloudGrad2)"/>'
),
cloud: svgWrap(
'<defs><linearGradient id="cloudGrad" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0%" stop-color="#ffffff"/><stop offset="100%" stop-color="#c7d3de"/>' +
'</linearGradient></defs>' +
'<path d="M22 72a17 17 0 0 1 2-33.9A21 21 0 0 1 63 34a15 15 0 0 1 4 29.9A16 16 0 0 1 64 72Z" fill="url(#cloudGrad)"/>'
),
fog: svgWrap(
'<defs><linearGradient id="cloudGrad3" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0%" stop-color="#f3f6f8"/><stop offset="100%" stop-color="#c3ccd3"/>' +
'</linearGradient></defs>' +
'<path d="M24 56a15 15 0 0 1 2-29.8A19 19 0 0 1 61 22a13.5 13.5 0 0 1 3 26.9A14 14 0 0 1 62 56Z" fill="url(#cloudGrad3)"/>' +
'<g stroke="#eef2f5" stroke-width="5" stroke-linecap="round" opacity="0.95">' +
'<line x1="14" y1="70" x2="86" y2="70"/><line x1="24" y1="82" x2="76" y2="82"/><line x1="10" y1="94" x2="90" y2="94"/>' +
'</g>'
),
drizzle: svgWrap(
'<defs><linearGradient id="cloudGradD" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0%" stop-color="#eef3f7"/><stop offset="100%" stop-color="#b9c6d3"/>' +
'</linearGradient></defs>' +
'<path d="M22 58a15 15 0 0 1 2-29.8A19 19 0 0 1 59 24a13.5 13.5 0 0 1 3 26.9A14 14 0 0 1 60 58Z" fill="url(#cloudGradD)"/>' +
'<g stroke="#8fc4ef" stroke-width="4.5" stroke-linecap="round">' +
'<line x1="34" y1="70" x2="30" y2="80"/><line x1="50" y1="72" x2="46" y2="84"/><line x1="66" y1="70" x2="62" y2="80"/>' +
'</g>'
),
rain: svgWrap(
'<defs><linearGradient id="cloudGradR" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0%" stop-color="#e4ebf1"/><stop offset="100%" stop-color="#9fb0c1"/>' +
'</linearGradient></defs>' +
'<path d="M22 54a15 15 0 0 1 2-29.8A19 19 0 0 1 59 20a13.5 13.5 0 0 1 3 26.9A14 14 0 0 1 60 54Z" fill="url(#cloudGradR)"/>' +
'<g stroke="#5b9bdb" stroke-width="5" stroke-linecap="round">' +
'<line x1="30" y1="66" x2="25" y2="82"/><line x1="48" y1="68" x2="43" y2="88"/><line x1="66" y1="66" x2="61" y2="82"/>' +
'</g>'
),
snow: svgWrap(
'<defs><linearGradient id="cloudGradS" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0%" stop-color="#eef4f9"/><stop offset="100%" stop-color="#c7d6e3"/>' +
'</linearGradient></defs>' +
'<path d="M22 54a15 15 0 0 1 2-29.8A19 19 0 0 1 59 20a13.5 13.5 0 0 1 3 26.9A14 14 0 0 1 60 54Z" fill="url(#cloudGradS)"/>' +
'<g fill="#ffffff"><circle cx="30" cy="76" r="4"/><circle cx="50" cy="84" r="4"/><circle cx="70" cy="76" r="4"/></g>'
),
storm: svgWrap(
'<defs><linearGradient id="cloudGradT" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0%" stop-color="#7c8aa0"/><stop offset="100%" stop-color="#454f63"/>' +
'</linearGradient></defs>' +
'<path d="M22 52a15 15 0 0 1 2-29.8A19 19 0 0 1 59 18a13.5 13.5 0 0 1 3 26.9A14 14 0 0 1 60 52Z" fill="url(#cloudGradT)"/>' +
'<path d="M53 58 L38 78 L48 78 L42 96 L64 70 L53 70 Z" fill="#ffd35c"/>'
)
};
/* ---------------- decorative background ---------------- */
function clearDecor(){
var el = document.getElementById("bg-decor");
el.innerHTML = "";
return el;
}
function rand(min, max){ return Math.random() * (max - min) + min; }
function renderDecor(theme){
var el = clearDecor();
var frag = document.createDocumentFragment();
if (theme === "clear"){
var glow = document.createElement("div");
glow.className = "sun-glow";
frag.appendChild(glow);
} else if (theme === "cloudy"){
for (var i = 0; i < 4; i++){
var c = document.createElement("div");
c.className = "cloud-shape";
var w = rand(160, 320);
c.style.width = w + "px";
c.style.height = (w * 0.4) + "px";
c.style.top = rand(40, 500) + "px";
c.style.left = rand(-200, 900) + "px";
c.style.animationDuration = rand(35, 60) + "s";
c.style.animationDelay = "-" + rand(0, 40) + "s";
frag.appendChild(c);
}
} else if (theme === "fog"){
for (var f = 0; f < 5; f++){
var band = document.createElement("div");
band.className = "fog-band";
band.style.top = (90 + f * 130) + "px";
band.style.animationDuration = rand(9, 15) + "s";
band.style.animationDelay = "-" + rand(0, 8) + "s";
band.style.opacity = rand(0.4, 0.9);
frag.appendChild(band);
}
} else if (theme === "rain"){
for (var r = 0; r < 60; r++){
var drop = document.createElement("div");
drop.className = "raindrop";
drop.style.left = rand(0, 100) + "%";
drop.style.animationDuration = rand(0.5, 1.1) + "s";
drop.style.animationDelay = "-" + rand(0, 2) + "s";
drop.style.opacity = rand(0.4, 1);
frag.appendChild(drop);
}
} else if (theme === "snow"){
for (var s = 0; s < 46; s++){
var flake = document.createElement("div");
flake.className = "snowflake";
var size = rand(3, 7);
flake.style.width = size + "px";
flake.style.height = size + "px";
flake.style.left = rand(0, 100) + "%";
flake.style.animationDuration = rand(5, 11) + "s";
flake.style.animationDelay = "-" + rand(0, 10) + "s";
flake.style.opacity = rand(0.5, 1);
frag.appendChild(flake);
}
} else if (theme === "storm"){
for (var t = 0; t < 70; t++){
var d2 = document.createElement("div");
d2.className = "raindrop";
d2.style.left = rand(0, 100) + "%";
d2.style.animationDuration = rand(0.4, 0.8) + "s";
d2.style.animationDelay = "-" + rand(0, 2) + "s";
d2.style.opacity = rand(0.4, 1);
frag.appendChild(d2);
}
var flash = document.createElement("div");
flash.className = "lightning-flash";
flash.style.animationDelay = "-" + rand(0, 6) + "s";
frag.appendChild(flash);
}
el.appendChild(frag);
}
/* ---------------- formatting helpers ---------------- */
var WEEKDAYS = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var MONTHS = ["January","February","March","April","May","June","July","August","September","October","November","December"];
function formatDisplayDate(dateStr){
var parts = dateStr.split("-").map(Number);
var dt = new Date(Date.UTC(parts[0], parts[1] - 1, parts[2]));
return {
main: WEEKDAYS[dt.getUTCDay()] + ", " + MONTHS[dt.getUTCMonth()] + " " + parts[2],
year: String(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 roundTemp(v){
return Math.round(v);
}
/* ---------------- chart ---------------- */
function buildSmoothPath(points){
if (points.length < 2) return "";
var d = "M " + points[0].x + " " + points[0].y;
for (var i = 0; i < points.length - 1; i++){
var p0 = points[i];
var p1 = points[i + 1];
var mx = (p0.x + p1.x) / 2;
var my = (p0.y + p1.y) / 2;
d += " Q " + p0.x + " " + p0.y + " " + mx + " " + my;
}
var last = points[points.length - 1];
d += " L " + last.x + " " + last.y;
return d;
}
function renderChart(hourlyTimes, hourlyTemps){
var wrap = document.getElementById("chart-wrap");
var width = 888;
var height = 200;
var padL = 26, padR = 26, padTop = 30, padBottom = 46;
var plotW = width - padL - padR;
var plotH = height - padTop - padBottom;
var n = hourlyTemps.length;
var minT = Math.min.apply(null, hourlyTemps);
var maxT = Math.max.apply(null, hourlyTemps);
var range = (maxT - minT) || 1;
var minIdx = hourlyTemps.indexOf(minT);
var maxIdx = hourlyTemps.indexOf(maxT);
var points = [];
for (var i = 0; i < n; i++){
var x = padL + (n === 1 ? plotW / 2 : (plotW * i) / (n - 1));
var y = padTop + plotH - ((hourlyTemps[i] - minT) / range) * plotH;
points.push({ x: x, y: y, temp: hourlyTemps[i], hour: hourlyTimes[i] });
}
var linePath = buildSmoothPath(points);
var areaPath = linePath + " L " + points[n - 1].x + " " + (padTop + plotH) + " L " + points[0].x + " " + (padTop + plotH) + " Z";
var svgParts = [];
svgParts.push('<svg class="chart-svg" width="' + width + '" height="' + height + '" viewBox="0 0 ' + width + ' ' + height + '" xmlns="http://www.w3.org/2000/svg">');
svgParts.push('<defs><linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0%" stop-color="#ffffff" stop-opacity="0.55"/>' +
'<stop offset="100%" stop-color="#ffffff" stop-opacity="0.02"/>' +
'</linearGradient></defs>');
// horizontal grid lines
for (var g = 0; g < 3; g++){
var gy = padTop + (plotH * g) / 2;
svgParts.push('<line x1="' + padL + '" y1="' + gy + '" x2="' + (width - padR) + '" y2="' + gy + '" stroke="rgba(255,255,255,0.16)" stroke-width="1"/>');
}
svgParts.push('<path d="' + areaPath + '" fill="url(#areaGrad)"/>');
svgParts.push('<path d="' + linePath + '" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>');
// hour labels every 3 hours
for (var h = 0; h < n; h += 3){
var hourLabel = hourlyTimes[h].split("T")[1];
svgParts.push('<text x="' + points[h].x + '" y="' + (height - 10) + '" text-anchor="middle" font-size="11" font-weight="600" fill="rgba(255,255,255,0.72)">' + hourLabel + '</text>');
}
// points
for (var p = 0; p < n; p++){
var isExtreme = (p === minIdx || p === maxIdx);
var r = isExtreme ? 5 : 3;
svgParts.push('<circle class="chart-point" data-idx="' + p + '" cx="' + points[p].x + '" cy="' + points[p].y + '" r="' + r + '" fill="' + (isExtreme ? "#ffd35c" : "#ffffff") + '" stroke="rgba(20,30,45,0.35)" stroke-width="1"/>');
if (isExtreme){
var labelY = (p === maxIdx) ? points[p].y - 12 : points[p].y + 15;
svgParts.push('<text x="' + points[p].x + '" y="' + labelY + '" text-anchor="middle" font-size="13" font-weight="700" fill="#ffffff">' + roundTemp(points[p].temp) + '\u00B0</text>');
}
svgParts.push('<circle class="chart-point-hit" data-idx="' + p + '" cx="' + points[p].x + '" cy="' + points[p].y + '" r="10" fill="transparent"/>');
}
svgParts.push('</svg>');
var tooltip = document.getElementById("chart-tooltip");
wrap.innerHTML = svgParts.join("");
wrap.appendChild(tooltip);
var hits = wrap.querySelectorAll(".chart-point-hit");
hits.forEach(function(hit){
hit.addEventListener("mouseenter", function(){
var idx = parseInt(this.getAttribute("data-idx"), 10);
var pt = points[idx];
var hourStr = pt.hour.split("T")[1];
tooltip.textContent = hourStr + " \u00B7 " + roundTemp(pt.temp) + "\u00B0C";
tooltip.style.left = pt.x + "px";
tooltip.style.top = (pt.y - 10) + "px";
tooltip.classList.add("visible");
});
hit.addEventListener("mouseleave", function(){
tooltip.classList.remove("visible");
});
});
}
/* ---------------- rendering ---------------- */
function showLoading(){
document.getElementById("state-loading").classList.remove("hidden");
document.getElementById("state-error").classList.add("hidden");
document.getElementById("state-content").classList.add("hidden");
}
function showError(message){
document.getElementById("state-loading").classList.add("hidden");
document.getElementById("state-content").classList.add("hidden");
var errEl = document.getElementById("state-error");
errEl.classList.remove("hidden");
document.getElementById("error-detail").textContent = message;
}
function showContent(data){
document.getElementById("state-loading").classList.add("hidden");
document.getElementById("state-error").classList.add("hidden");
document.getElementById("state-content").classList.remove("hidden");
var info = WEATHER_INFO[data.weatherCode] || { text: "Unknown conditions", icon: "cloud", theme: "cloudy" };
var theme = THEMES[info.theme] || THEMES.cloudy;
document.getElementById("app").style.background = theme.bg;
renderDecor(info.theme);
document.getElementById("location-name").textContent = locationName;
document.getElementById("coords").textContent = formatCoord(lat, lon);
var d = formatDisplayDate(requestDate);
document.getElementById("date-main").textContent = d.main;
document.getElementById("date-year").textContent = d.year;
document.getElementById("hero-icon").innerHTML = ICONS[info.icon] || ICONS.cloud;
document.getElementById("condition-text").textContent = info.text;
document.getElementById("condition-sub").textContent = "Weather condition \u00B7 " + (isPast ? "Historical data" : "Forecast");
document.getElementById("temp-max").textContent = roundTemp(data.tempMax) + "\u00B0";
document.getElementById("temp-min").textContent = roundTemp(data.tempMin) + "\u00B0";
document.getElementById("hourly-range").textContent = requestDate + " \u00B7 UTC";
renderChart(data.hourlyTimes, data.hourlyTemps);
}
/* ---------------- data fetching ---------------- */
function buildUrl(){
var params = 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: requestDate,
end_date: requestDate
});
return apiBase + "?" + params.toString();
}
function loadWeather(){
showLoading();
fetch(buildUrl())
.then(function(res){
return res.json().then(function(json){
return { ok: res.ok, json: json };
}).catch(function(){
throw new Error("The weather service returned an unreadable response.");
});
})
.then(function(result){
var json = result.json;
if (!result.ok || json.error){
throw new Error(json && json.reason ? json.reason : "The weather service returned an error.");
}
if (!json.daily || !json.hourly ||
!Array.isArray(json.daily.temperature_2m_max) || !json.daily.temperature_2m_max.length ||
!Array.isArray(json.daily.temperature_2m_min) || !json.daily.temperature_2m_min.length ||
!Array.isArray(json.daily.weather_code) || !json.daily.weather_code.length ||
!Array.isArray(json.hourly.temperature_2m) || !json.hourly.temperature_2m.length ||
!Array.isArray(json.hourly.time) || !json.hourly.time.length){
throw new Error("The weather service returned incomplete data for this date.");
}
var dailyIdx = json.daily.time ? json.daily.time.indexOf(requestDate) : 0;
if (dailyIdx < 0) dailyIdx = 0;
var data = {
tempMax: json.daily.temperature_2m_max[dailyIdx],
tempMin: json.daily.temperature_2m_min[dailyIdx],
weatherCode: json.daily.weather_code[dailyIdx],
hourlyTimes: json.hourly.time,
hourlyTemps: json.hourly.temperature_2m
};
if (data.tempMax == null || data.tempMin == null || data.weatherCode == null){
throw new Error("The weather service returned incomplete data for this date.");
}
showContent(data);
})
.catch(function(err){
showError(err && err.message ? err.message : "We couldn't load the forecast for this location right now.");
});
}
loadWeather();
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 31,905 | html / css / js | 2,715 / 7,936 / 21,254 |
|---|---|---|---|
| dom nodes | 51 | dom depth | 8 |
| css rules | 74 | js present | yes |
| brightness | 101.1 | contrast | 31.7 |
| colorfulness | 27.1 | whitespace | 32.2% |
This slot's telemetry
| prompt tokens | 80 | completion tokens | 56,704 |
|---|---|---|---|
| total tokens | 56,784 | wall | 806.8 s |
| cost | — | request id | — |
config.json587 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "claude-sonnet-5-eff-xhigh--cli--cursor--dev",
"effort": "xhigh",
"family": "claude",
"m": {
"min": 2,
"q": 2
},
"model_id": "claude-sonnet-5",
"protocol": "cli",
"served_model": "claude-sonnet-5-xhigh",
"telemetry": {
"completion_tokens": 159824,
"cost_usd": null,
"prompt_tokens": 188,
"total_tokens": 160012,
"wall_ms": 2490402
},
"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-sonnet-5-eff-xhigh--cli--cursor--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-08-12T19:49:50.102160+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T19:36:23.265558+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:52:52.664136+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T19:49:53.779257+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:55:35.435663+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T19:52:56.116465+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-12T20:18:04.168155+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T19:55:38.813667+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
}
}
}