claude-opus-4-7 @ xhigh · cursor
cursorxhigh
- config
- claude-opus-4-7-eff-xhigh--cli--cursor--dev
- batch
- 2026-07-19--unified
- transport
- cursor-agent-cli-isolated-home
- protocol
- cli · plan
- served model
- claude-opus-4-7-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-7-thinking @high · cursor-xl0.68claude-opus-4-7 @low · kiro0.68gpt-5.6-sol @low · cursor0.68qwen3.7-max · go0.67claude-opus-4-7 @high · cursor-xl0.67farthest
north-mini-code-free · api0.52qwen3.6-plus · go0.54deepseek-v4-flash · go0.55claude-sonnet-4-thinking · cursor0.55deepseek-v4-pro-0812 @none · api0.55within 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 tempmismatchshown: 21
- min tempmismatchshown: 9
- hourlymismatchcoverage 0/24 · 0 match · 2 mismatch · 22 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 Card</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
width: 100%;
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: #0f1c2e;
overflow: hidden;
}
body {
width: 1280px;
height: 800px;
display: flex;
align-items: center;
justify-content: center;
background: #e9eef5;
padding: 40px;
}
.card {
width: 100%;
height: 100%;
max-width: 1200px;
max-height: 720px;
border-radius: 28px;
overflow: hidden;
position: relative;
box-shadow:
0 40px 80px -20px rgba(15, 28, 46, 0.35),
0 20px 40px -20px rgba(15, 28, 46, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
background: linear-gradient(135deg, #6ea8ff 0%, #4a7fdc 55%, #2f5cb4 100%);
color: #fff;
display: grid;
grid-template-columns: 1.15fr 1fr;
transition: background 0.6s ease;
}
/* Weather-driven themes */
.theme-sunny { background: linear-gradient(135deg, #ffd66b 0%, #ff9a5a 55%, #f26b4a 100%); }
.theme-clear-night { background: linear-gradient(135deg, #223a6b 0%, #172554 55%, #0a0f2c 100%); }
.theme-cloudy { background: linear-gradient(135deg, #a3b6cf 0%, #6d84a3 55%, #4a5f80 100%); }
.theme-overcast { background: linear-gradient(135deg, #8595ac 0%, #5d6d86 55%, #3d4a62 100%); }
.theme-rain { background: linear-gradient(135deg, #6b8fb5 0%, #45607e 55%, #263a52 100%); }
.theme-storm { background: linear-gradient(135deg, #4a5170 0%, #2a2d47 55%, #16182b 100%); }
.theme-snow { background: linear-gradient(135deg, #dfe9f3 0%, #a7bcd4 55%, #6f8bab 100%); color: #1a2540; }
.theme-fog { background: linear-gradient(135deg, #c5cdd7 0%, #96a2b3 55%, #6a7688 100%); color: #1a2540; }
.theme-snow .divider, .theme-fog .divider { background: rgba(26, 37, 64, 0.15); }
.theme-snow .muted, .theme-fog .muted { color: rgba(26, 37, 64, 0.65); }
.theme-snow .chip, .theme-fog .chip { background: rgba(26, 37, 64, 0.08); color: #1a2540; }
.theme-snow .hour, .theme-fog .hour { background: rgba(255, 255, 255, 0.4); }
.theme-snow .hour-temp, .theme-fog .hour-temp { color: #1a2540; }
/* Decorative background elements */
.bg-decor {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.glow {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.55;
}
.glow-1 { width: 380px; height: 380px; top: -120px; right: -80px; background: rgba(255, 255, 255, 0.45); }
.glow-2 { width: 260px; height: 260px; bottom: -80px; left: 30%; background: rgba(255, 255, 255, 0.2); }
.theme-clear-night .glow-1 { background: rgba(180, 200, 255, 0.35); }
.theme-storm .glow-1 { background: rgba(180, 180, 220, 0.25); }
/* Star field for night */
.stars { display: none; position: absolute; inset: 0; }
.theme-clear-night .stars { display: block; }
.star {
position: absolute;
width: 2px; height: 2px;
background: #fff;
border-radius: 50%;
opacity: 0.8;
box-shadow: 0 0 6px rgba(255,255,255,0.7);
}
/* LEFT PANEL */
.left {
padding: 44px 44px 36px;
display: flex;
flex-direction: column;
position: relative;
z-index: 2;
}
.header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
}
.location {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2.5px;
opacity: 0.85;
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
}
.location-dot {
width: 6px; height: 6px; border-radius: 50%;
background: currentColor;
opacity: 0.7;
}
.name {
font-size: 42px;
font-weight: 700;
letter-spacing: -1px;
margin-top: 6px;
line-height: 1.05;
}
.date {
font-size: 15px;
opacity: 0.85;
margin-top: 8px;
font-weight: 500;
}
.icon-slot {
width: 96px; height: 96px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.hero {
margin-top: auto;
padding-top: 32px;
}
.condition {
font-size: 22px;
font-weight: 600;
margin-bottom: 10px;
letter-spacing: -0.3px;
}
.temp-main {
font-size: 140px;
font-weight: 200;
line-height: 0.95;
letter-spacing: -6px;
display: flex;
align-items: flex-start;
}
.temp-main .deg {
font-size: 60px;
font-weight: 300;
margin-top: 12px;
margin-left: 4px;
letter-spacing: 0;
}
.range {
margin-top: 18px;
display: flex;
gap: 20px;
font-size: 16px;
font-weight: 500;
}
.range .chip {
padding: 8px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
gap: 8px;
}
.range .chip .label { opacity: 0.75; font-size: 13px; }
.range .chip .val { font-weight: 600; }
.divider {
width: 1px;
background: rgba(255, 255, 255, 0.18);
}
/* RIGHT PANEL */
.right {
padding: 44px 40px 36px;
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
z-index: 2;
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(4px);
}
.section-title {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
opacity: 0.8;
}
.stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.stat {
background: rgba(255, 255, 255, 0.12);
border-radius: 16px;
padding: 14px 16px;
border: 1px solid rgba(255, 255, 255, 0.15);
}
.stat .label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; opacity: 0.7; }
.stat .value { font-size: 22px; font-weight: 600; margin-top: 4px; letter-spacing: -0.5px; }
/* Hourly chart */
.hourly {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.chart-wrap {
margin-top: 12px;
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 18px;
padding: 16px 14px 10px;
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
svg.chart {
width: 100%;
height: 140px;
display: block;
overflow: visible;
}
.hours-row {
display: grid;
grid-template-columns: repeat(24, 1fr);
gap: 2px;
margin-top: 8px;
font-size: 9px;
opacity: 0.75;
text-align: center;
font-variant-numeric: tabular-nums;
}
.hours-row span { padding: 2px 0; }
.hours-row .maj { opacity: 1; font-weight: 700; }
.footer-note {
font-size: 11px;
opacity: 0.65;
text-align: right;
letter-spacing: 0.3px;
}
/* Error state */
.error-card {
width: 640px;
padding: 48px;
background: #fff;
border-radius: 20px;
box-shadow: 0 30px 60px rgba(15, 28, 46, 0.25);
text-align: center;
color: #0f1c2e;
}
.error-card h1 { font-size: 24px; margin-bottom: 12px; }
.error-card p { color: #56637a; font-size: 15px; line-height: 1.5; }
.error-icon {
width: 64px; height: 64px;
margin: 0 auto 20px;
border-radius: 50%;
background: #fdecec;
display: flex; align-items: center; justify-content: center;
color: #d94848;
}
/* Loading */
.loading {
color: #56637a;
font-size: 14px;
}
/* SVG icon styling */
.wicon { width: 100%; height: 100%; }
@keyframes floaty {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
.icon-slot svg { animation: floaty 5s ease-in-out infinite; }
</style>
</head>
<body>
<div id="root">
<div class="loading" style="display:flex;align-items:center;justify-content:center;width:100%;height:100%;">Loading weather…</div>
</div>
<script>
(function () {
const params = new URLSearchParams(location.search);
const lat = parseFloat(params.get('lat')) || 52.52;
const lon = parseFloat(params.get('lon')) || 13.405;
const name = params.get('name') || 'Berlin';
const todayUTC = new Date().toISOString().slice(0, 10);
const date = params.get('date') || todayUTC;
const root = document.getElementById('root');
function isPastDate(d) {
return d < todayUTC;
}
const WMO = {
0: { label: 'Clear sky', theme: 'sunny', icon: 'sun' },
1: { label: 'Mainly clear', theme: 'sunny', icon: 'sun-cloud' },
2: { label: 'Partly cloudy', theme: 'cloudy', icon: 'sun-cloud' },
3: { label: 'Overcast', theme: 'overcast', icon: 'cloud' },
45: { label: 'Fog', theme: 'fog', icon: 'fog' },
48: { label: 'Depositing rime fog', theme: 'fog', icon: 'fog' },
51: { label: 'Light drizzle', theme: 'rain', icon: 'drizzle' },
53: { label: 'Moderate drizzle', theme: 'rain', icon: 'drizzle' },
55: { label: 'Dense drizzle', theme: 'rain', icon: 'drizzle' },
56: { label: 'Freezing drizzle', theme: 'rain', icon: 'drizzle' },
57: { label: 'Freezing drizzle', theme: 'rain', icon: 'drizzle' },
61: { label: 'Light rain', theme: 'rain', icon: 'rain' },
63: { label: 'Moderate rain', theme: 'rain', icon: 'rain' },
65: { label: 'Heavy rain', theme: 'rain', icon: 'rain' },
66: { label: 'Freezing rain', theme: 'rain', icon: 'rain' },
67: { label: 'Freezing rain', theme: 'rain', icon: 'rain' },
71: { label: 'Light snow', theme: 'snow', icon: 'snow' },
73: { label: 'Moderate snow', theme: 'snow', icon: 'snow' },
75: { label: 'Heavy snow', theme: 'snow', icon: 'snow' },
77: { label: 'Snow grains', theme: 'snow', icon: 'snow' },
80: { label: 'Rain showers', theme: 'rain', icon: 'rain' },
81: { label: 'Rain showers', theme: 'rain', icon: 'rain' },
82: { label: 'Violent rain showers',theme: 'rain', icon: 'rain' },
85: { label: 'Snow showers', theme: 'snow', icon: 'snow' },
86: { label: 'Heavy snow showers', theme: 'snow', icon: 'snow' },
95: { label: 'Thunderstorm', theme: 'storm', icon: 'storm' },
96: { label: 'Thunderstorm w/ hail',theme: 'storm', icon: 'storm' },
99: { label: 'Thunderstorm w/ hail',theme: 'storm', icon: 'storm' }
};
function iconSVG(kind, size) {
const s = size || 96;
const svgs = {
sun: `
<svg viewBox="0 0 100 100" class="wicon" xmlns="http://www.w3.org/2000/svg" width="${s}" height="${s}">
<defs>
<radialGradient id="sunG" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#fff8cf"/>
<stop offset="60%" stop-color="#ffd25a"/>
<stop offset="100%" stop-color="#ff8a3d"/>
</radialGradient>
</defs>
<g stroke="#fff" stroke-width="3" stroke-linecap="round" opacity="0.9">
<line x1="50" y1="6" x2="50" y2="16"/>
<line x1="50" y1="84" x2="50" y2="94"/>
<line x1="6" y1="50" x2="16" y2="50"/>
<line x1="84" y1="50" x2="94" y2="50"/>
<line x1="18" y1="18" x2="26" y2="26"/>
<line x1="74" y1="74" x2="82" y2="82"/>
<line x1="18" y1="82" x2="26" y2="74"/>
<line x1="74" y1="26" x2="82" y2="18"/>
</g>
<circle cx="50" cy="50" r="22" fill="url(#sunG)"/>
</svg>`,
'sun-cloud': `
<svg viewBox="0 0 100 100" class="wicon" xmlns="http://www.w3.org/2000/svg" width="${s}" height="${s}">
<defs>
<radialGradient id="sc-sun" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#fff8cf"/><stop offset="100%" stop-color="#ffb84d"/>
</radialGradient>
<linearGradient id="sc-cloud" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#ffffff"/><stop offset="100%" stop-color="#dfe6f2"/>
</linearGradient>
</defs>
<circle cx="38" cy="38" r="18" fill="url(#sc-sun)"/>
<g fill="url(#sc-cloud)">
<ellipse cx="62" cy="65" rx="26" ry="16"/>
<ellipse cx="42" cy="68" rx="18" ry="13"/>
<ellipse cx="78" cy="68" rx="14" ry="10"/>
</g>
</svg>`,
cloud: `
<svg viewBox="0 0 100 100" class="wicon" xmlns="http://www.w3.org/2000/svg" width="${s}" height="${s}">
<defs>
<linearGradient id="cl" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#ffffff"/><stop offset="100%" stop-color="#c9d3e4"/>
</linearGradient>
</defs>
<g fill="url(#cl)">
<ellipse cx="50" cy="55" rx="30" ry="18"/>
<ellipse cx="32" cy="60" rx="18" ry="14"/>
<ellipse cx="70" cy="60" rx="18" ry="13"/>
</g>
</svg>`,
fog: `
<svg viewBox="0 0 100 100" class="wicon" xmlns="http://www.w3.org/2000/svg" width="${s}" height="${s}">
<g fill="#ffffff" opacity="0.9">
<ellipse cx="50" cy="40" rx="30" ry="12"/>
</g>
<g stroke="#ffffff" stroke-width="4" stroke-linecap="round" opacity="0.85">
<line x1="20" y1="62" x2="80" y2="62"/>
<line x1="16" y1="74" x2="72" y2="74"/>
<line x1="26" y1="86" x2="84" y2="86"/>
</g>
</svg>`,
drizzle: `
<svg viewBox="0 0 100 100" class="wicon" xmlns="http://www.w3.org/2000/svg" width="${s}" height="${s}">
<defs><linearGradient id="dz" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#c9d3e4"/></linearGradient></defs>
<g fill="url(#dz)">
<ellipse cx="50" cy="45" rx="28" ry="16"/>
<ellipse cx="34" cy="50" rx="16" ry="12"/>
<ellipse cx="70" cy="50" rx="16" ry="12"/>
</g>
<g stroke="#bfe0ff" stroke-width="3" stroke-linecap="round">
<line x1="34" y1="72" x2="30" y2="82"/>
<line x1="50" y1="72" x2="46" y2="82"/>
<line x1="66" y1="72" x2="62" y2="82"/>
</g>
</svg>`,
rain: `
<svg viewBox="0 0 100 100" class="wicon" xmlns="http://www.w3.org/2000/svg" width="${s}" height="${s}">
<defs><linearGradient id="rn" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#a5b4cc"/></linearGradient></defs>
<g fill="url(#rn)">
<ellipse cx="50" cy="42" rx="30" ry="17"/>
<ellipse cx="32" cy="48" rx="16" ry="13"/>
<ellipse cx="72" cy="48" rx="16" ry="12"/>
</g>
<g fill="#8ec8ff">
<path d="M30 70 q -3 6 0 10 q 3 -4 0 -10z"/>
<path d="M46 74 q -3 6 0 10 q 3 -4 0 -10z"/>
<path d="M62 70 q -3 6 0 10 q 3 -4 0 -10z"/>
<path d="M78 74 q -3 6 0 10 q 3 -4 0 -10z"/>
</g>
</svg>`,
snow: `
<svg viewBox="0 0 100 100" class="wicon" xmlns="http://www.w3.org/2000/svg" width="${s}" height="${s}">
<defs><linearGradient id="sn" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#d5deee"/></linearGradient></defs>
<g fill="url(#sn)">
<ellipse cx="50" cy="42" rx="30" ry="17"/>
<ellipse cx="32" cy="48" rx="16" ry="13"/>
<ellipse cx="72" cy="48" rx="16" ry="12"/>
</g>
<g stroke="#eaf3ff" stroke-width="2.5" stroke-linecap="round">
<g transform="translate(30,78)"><line x1="-5" y1="0" x2="5" y2="0"/><line x1="0" y1="-5" x2="0" y2="5"/><line x1="-3.5" y1="-3.5" x2="3.5" y2="3.5"/><line x1="-3.5" y1="3.5" x2="3.5" y2="-3.5"/></g>
<g transform="translate(50,84)"><line x1="-5" y1="0" x2="5" y2="0"/><line x1="0" y1="-5" x2="0" y2="5"/><line x1="-3.5" y1="-3.5" x2="3.5" y2="3.5"/><line x1="-3.5" y1="3.5" x2="3.5" y2="-3.5"/></g>
<g transform="translate(70,78)"><line x1="-5" y1="0" x2="5" y2="0"/><line x1="0" y1="-5" x2="0" y2="5"/><line x1="-3.5" y1="-3.5" x2="3.5" y2="3.5"/><line x1="-3.5" y1="3.5" x2="3.5" y2="-3.5"/></g>
</g>
</svg>`,
storm: `
<svg viewBox="0 0 100 100" class="wicon" xmlns="http://www.w3.org/2000/svg" width="${s}" height="${s}">
<defs><linearGradient id="st" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stop-color="#e6eaf3"/><stop offset="1" stop-color="#8590a8"/></linearGradient></defs>
<g fill="url(#st)">
<ellipse cx="50" cy="40" rx="30" ry="16"/>
<ellipse cx="32" cy="46" rx="16" ry="12"/>
<ellipse cx="72" cy="46" rx="16" ry="12"/>
</g>
<path d="M50 55 L38 78 L48 78 L42 92 L64 70 L54 70 L60 55 Z" fill="#ffd85a" stroke="#f4a300" stroke-width="1"/>
</svg>`,
moon: `
<svg viewBox="0 0 100 100" class="wicon" xmlns="http://www.w3.org/2000/svg" width="${s}" height="${s}">
<defs>
<radialGradient id="mn" cx="40%" cy="40%" r="60%">
<stop offset="0" stop-color="#fff"/>
<stop offset="1" stop-color="#c9d3ef"/>
</radialGradient>
</defs>
<path d="M62 20 a30 30 0 1 0 22 52 a24 24 0 1 1 -22 -52z" fill="url(#mn)"/>
</svg>`
};
return svgs[kind] || svgs.cloud;
}
function fmtDate(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 renderError(msg) {
document.body.style.background = '#eef2f8';
root.innerHTML = `
<div class="error-card">
<div class="error-icon">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
</svg>
</div>
<h1>Weather data unavailable</h1>
<p>${msg}</p>
</div>`;
}
function buildURL(base) {
const 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: date,
end_date: date
});
return base + '?' + qs.toString();
}
function render(data) {
const daily = data && data.daily;
const hourly = data && data.hourly;
if (!daily || !hourly || !Array.isArray(daily.temperature_2m_max) || daily.temperature_2m_max.length === 0) {
renderError('The weather service returned no data for the requested date.');
return;
}
const tmax = daily.temperature_2m_max[0];
const tmin = daily.temperature_2m_min[0];
const wcode = daily.weather_code[0];
const hoursT = hourly.temperature_2m || [];
const hoursTime = hourly.time || [];
// Slice to exactly this date (24 entries)
const dayHours = [];
for (let i = 0; i < hoursTime.length; i++) {
if (hoursTime[i].startsWith(date)) dayHours.push({ t: hoursT[i], time: hoursTime[i] });
}
while (dayHours.length < 24) dayHours.push({ t: null, time: null });
const info = WMO[wcode] || { label: 'Unknown', theme: 'cloudy', icon: 'cloud' };
// Pick icon variant (night/day) for clear-ish codes
let iconKind = info.icon;
let theme = info.theme;
// Determine representative daytime: use noon UTC temp for context; treat sunny label as day-only.
// We keep sunny theme for day; if wcode==0 and date is a "night presentation" — we'll leave as sunny.
// For visual variety, we don't force night unless code says so.
document.body.style.background = '#e9eef5';
const avg = dayHours.filter(h => h.t != null).reduce((a, b) => a + b.t, 0) / Math.max(1, dayHours.filter(h => h.t != null).length);
const noonT = dayHours[12] && dayHours[12].t != null ? dayHours[12].t : avg;
// Compute chart
const validVals = dayHours.map(h => h.t).filter(v => v != null);
let minV = Math.min(...validVals);
let maxV = Math.max(...validVals);
if (minV === maxV) { minV -= 1; maxV += 1; }
const padV = (maxV - minV) * 0.15;
minV -= padV; maxV += padV;
const chartW = 460, chartH = 140, padL = 6, padR = 6, padT = 18, padB = 20;
const innerW = chartW - padL - padR;
const innerH = chartH - padT - padB;
const points = dayHours.map((h, i) => {
const x = padL + (i / 23) * innerW;
const v = h.t == null ? (minV + maxV) / 2 : h.t;
const y = padT + (1 - (v - minV) / (maxV - minV)) * innerH;
return { x, y, t: h.t };
});
// Smooth path (Catmull-Rom → Bezier)
function smoothPath(pts) {
if (pts.length === 0) return '';
let d = `M ${pts[0].x} ${pts[0].y}`;
for (let i = 0; i < pts.length - 1; i++) {
const p0 = pts[i - 1] || pts[i];
const p1 = pts[i];
const p2 = pts[i + 1];
const p3 = pts[i + 2] || p2;
const cp1x = p1.x + (p2.x - p0.x) / 6;
const cp1y = p1.y + (p2.y - p0.y) / 6;
const cp2x = p2.x - (p3.x - p1.x) / 6;
const cp2y = p2.y - (p3.y - p1.y) / 6;
d += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`;
}
return d;
}
const linePath = smoothPath(points);
const areaPath = linePath + ` L ${points[points.length - 1].x} ${padT + innerH} L ${points[0].x} ${padT + innerH} Z`;
// Peak & trough
let peakIdx = 0, troughIdx = 0;
dayHours.forEach((h, i) => {
if (h.t == null) return;
if (dayHours[peakIdx].t == null || h.t > dayHours[peakIdx].t) peakIdx = i;
if (dayHours[troughIdx].t == null || h.t < dayHours[troughIdx].t) troughIdx = i;
});
// Stars for night theme
let starsHTML = '';
if (theme === 'clear-night') {
for (let i = 0; i < 40; i++) {
const x = Math.random() * 100;
const y = Math.random() * 60;
const sz = Math.random() * 1.5 + 1;
const op = Math.random() * 0.6 + 0.4;
starsHTML += `<div class="star" style="left:${x}%;top:${y}%;width:${sz}px;height:${sz}px;opacity:${op}"></div>`;
}
}
const hoursRow = dayHours.map((h, i) => {
const isMaj = i % 3 === 0;
const lbl = String(i).padStart(2, '0');
return `<span class="${isMaj ? 'maj' : ''}">${isMaj ? lbl : ''}</span>`;
}).join('');
const fmtT = (v) => (v == null ? '—' : Math.round(v) + '°');
root.innerHTML = `
<div class="card theme-${theme}">
<div class="bg-decor">
<div class="glow glow-1"></div>
<div class="glow glow-2"></div>
<div class="stars">${starsHTML}</div>
</div>
<div class="left">
<div class="header">
<div>
<div class="location"><span class="location-dot"></span>Current Location</div>
<div class="name">${escapeHTML(name)}</div>
<div class="date">${fmtDate(date)}</div>
</div>
<div class="icon-slot">${iconSVG(iconKind, 96)}</div>
</div>
<div class="hero">
<div class="condition">${info.label}</div>
<div class="temp-main">${Math.round(noonT)}<span class="deg">°C</span></div>
<div class="range">
<div class="chip">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="M6 9l6-6 6 6"/></svg>
<span class="label">High</span><span class="val">${fmtT(tmax)}</span>
</div>
<div class="chip">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21V9"/><path d="M6 15l6 6 6-6"/></svg>
<span class="label">Low</span><span class="val">${fmtT(tmin)}</span>
</div>
</div>
</div>
</div>
<div class="divider"></div>
<div class="right">
<div>
<div class="section-title">Overview</div>
<div class="stats" style="margin-top:12px;">
<div class="stat"><div class="label">Average</div><div class="value">${fmtT(avg)}</div></div>
<div class="stat"><div class="label">Range</div><div class="value">${Math.round(tmax - tmin)}°</div></div>
<div class="stat"><div class="label">Peak at</div><div class="value">${String(peakIdx).padStart(2,'0')}:00</div></div>
<div class="stat"><div class="label">Coolest at</div><div class="value">${String(troughIdx).padStart(2,'0')}:00</div></div>
</div>
</div>
<div class="hourly">
<div class="section-title">Hourly Temperature</div>
<div class="chart-wrap">
<svg class="chart" viewBox="0 0 ${chartW} ${chartH}" preserveAspectRatio="none">
<defs>
<linearGradient id="areaFill" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="rgba(255,255,255,0.55)"/>
<stop offset="100%" stop-color="rgba(255,255,255,0.02)"/>
</linearGradient>
<linearGradient id="lineFill" x1="0" x2="1" y1="0" y2="0">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="100%" stop-color="#ffffff"/>
</linearGradient>
</defs>
<path d="${areaPath}" fill="url(#areaFill)"/>
<path d="${linePath}" fill="none" stroke="url(#lineFill)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
${points.map((p, i) => (i % 3 === 0 && p.t != null) ? `<circle cx="${p.x}" cy="${p.y}" r="2.5" fill="#fff"/>` : '').join('')}
<g fill="#fff" font-size="10" font-weight="600" text-anchor="middle" font-family="-apple-system,Segoe UI,Roboto,sans-serif">
<circle cx="${points[peakIdx].x}" cy="${points[peakIdx].y}" r="4" fill="#ffd85a" stroke="#fff" stroke-width="1.5"/>
<text x="${points[peakIdx].x}" y="${Math.max(12, points[peakIdx].y - 8)}">${fmtT(dayHours[peakIdx].t)}</text>
<circle cx="${points[troughIdx].x}" cy="${points[troughIdx].y}" r="4" fill="#7ecbff" stroke="#fff" stroke-width="1.5"/>
<text x="${points[troughIdx].x}" y="${Math.min(chartH - 4, points[troughIdx].y + 14)}">${fmtT(dayHours[troughIdx].t)}</text>
</g>
</svg>
<div class="hours-row">${hoursRow}</div>
</div>
</div>
<div class="footer-note">${isPastDate(date) ? 'Archive data' : 'Forecast data'} · ${lat.toFixed(2)}°, ${lon.toFixed(2)}° · UTC</div>
</div>
</div>
`;
}
function escapeHTML(s) {
return String(s).replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
}
const base = isPastDate(date) ? '/api/om/archive' : '/api/om/forecast';
const url = buildURL(base);
fetch(url, { headers: { 'Accept': 'application/json' } })
.then(r => {
if (!r.ok) throw new Error('HTTP ' + r.status);
return r.json();
})
.then(render)
.catch(err => {
renderError('Could not reach the weather service. ' + (err && err.message ? '(' + err.message + ')' : ''));
});
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 27,965 | html / css / js | 314 / 7,639 / 20,012 |
|---|---|---|---|
| dom nodes | 9 | dom depth | 4 |
| css rules | 65 | js present | yes |
| brightness | 136.5 | contrast | 56.9 |
| colorfulness | 29.5 | whitespace | 35.4% |
This slot's telemetry
| prompt tokens | 6 | completion tokens | 13,125 |
|---|---|---|---|
| total tokens | 13,131 | wall | 112.3 s |
| cost | — | request id | — |
config.json583 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "claude-opus-4-7-eff-xhigh--cli--cursor--dev",
"effort": "xhigh",
"family": "claude",
"m": {
"min": 2,
"q": 2
},
"model_id": "claude-opus-4-7",
"protocol": "cli",
"served_model": "claude-opus-4-7-xhigh",
"telemetry": {
"completion_tokens": 36344,
"cost_usd": null,
"prompt_tokens": 24,
"total_tokens": 36368,
"wall_ms": 343515
},
"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-7-eff-xhigh--cli--cursor--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-08-13T00:56:17.659216+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T00:55:03.197583+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-13T00:58:13.584204+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T00:56:21.327762+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-13T00:59:39.676857+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T00:58:17.318248+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-13T01:00:57.394102+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T00:59:42.953860+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
}
}
}