claude-sonnet-4-6 @ medium · cursor-xl
cursor-xlmedium
- config
- claude-sonnet-4-6-eff-medium--cli--cursor-xl--dev
- batch
- 2026-07-19--unified
- transport
- cursor-agent-cli-isolated-home
- protocol
- cli · plan
- served model
- claude-4.6-sonnet-medium
- 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
gemini-3.7-flash @medium · agy0.73gemini-3.8-flash @low · agy0.73gemini-3.8-flash @medium · agy0.72claude-sonnet-4-6 @medium · kiro0.72gemini-3.7-flash @high · agy0.72farthest
north-mini-code-free · api0.51grok-4.6 @medium · grok-cli0.53gpt-6-astra · codex0.53claude-fable-5 @max · cursor-xl0.53grok-4.6 @high · grok-cli0.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 tempmismatchshown: 9
- min tempmismatchshown: 25
- hourlymatchcoverage 24/24 · 24 match · 0 mismatch · 0 not shown
- request sidematch0 violation(s)
extractor fidelity-extractor-v1+Berlin-2026-07-15
Source — raw model output, one byte unchanged
download card.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280">
<title>Weather Card</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #0f1117;
--card-bg: #16181f;
--card-border: rgba(255,255,255,0.07);
--text-primary: #f0f2f8;
--text-secondary: #8b8fa8;
--text-muted: #5a5d72;
--accent: #4f8ef7;
--accent-warm: #f7914f;
--accent-cold: #4fc8f7;
--gradient-sunny: linear-gradient(135deg, #f7a94f 0%, #f7514f 100%);
--gradient-cloudy: linear-gradient(135deg, #5a6580 0%, #3a4060 100%);
--gradient-rain: linear-gradient(135deg, #3a6080 0%, #1a3050 100%);
--gradient-snow: linear-gradient(135deg, #7090b0 0%, #4060a0 100%);
--gradient-thunder: linear-gradient(135deg, #4a2080 0%, #1a0840 100%);
--gradient-clear-night: linear-gradient(135deg, #1a1a4a 0%, #0a0a2a 100%);
--radius: 24px;
--radius-sm: 12px;
}
body {
min-height: 100vh;
background: var(--bg);
display: flex;
align-items: center;
justify-content: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
padding: 40px 20px;
}
.card {
width: 860px;
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
position: relative;
}
/* Hero section */
.hero {
padding: 48px 52px 40px;
position: relative;
overflow: hidden;
min-height: 280px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.hero-bg {
position: absolute;
inset: 0;
opacity: 0.85;
transition: opacity 0.5s;
}
.hero-glow {
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
filter: blur(80px);
opacity: 0.25;
top: -100px;
right: -80px;
pointer-events: none;
}
.hero-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
position: relative;
z-index: 2;
}
.location-block {}
.location-name {
font-size: 15px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
}
.location-name svg { opacity: 0.7; }
.location-date {
font-size: 28px;
font-weight: 300;
color: rgba(255,255,255,0.95);
letter-spacing: -0.5px;
}
.condition-block {
text-align: right;
}
.condition-icon {
font-size: 72px;
line-height: 1;
display: block;
filter: drop-shadow(0 4px 16px rgba(0,0,0,0.4));
margin-bottom: 8px;
}
.condition-text {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
}
.hero-bottom {
position: relative;
z-index: 2;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.temp-display {
display: flex;
align-items: baseline;
gap: 2px;
}
.temp-main {
font-size: 100px;
font-weight: 200;
color: #fff;
letter-spacing: -6px;
line-height: 1;
}
.temp-unit {
font-size: 36px;
font-weight: 300;
color: rgba(255,255,255,0.7);
margin-left: 4px;
letter-spacing: 0;
}
.temp-range {
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-end;
padding-bottom: 8px;
}
.temp-range-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: rgba(255,255,255,0.75);
font-weight: 500;
}
.temp-range-label {
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.6;
}
.dot-max { width: 8px; height: 8px; border-radius: 50%; background: #ffb366; }
.dot-min { width: 8px; height: 8px; border-radius: 50%; background: #66c8ff; }
/* Body section */
.body {
padding: 32px 52px 40px;
}
/* Hourly chart */
.section-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 20px;
}
.hourly-chart-wrap {
position: relative;
height: 160px;
margin-bottom: 32px;
}
canvas#chart {
width: 100%;
height: 100%;
display: block;
}
/* Hourly scroll row */
.hourly-row {
display: flex;
gap: 6px;
overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: none;
margin-bottom: 32px;
}
.hourly-row::-webkit-scrollbar { display: none; }
.hour-pill {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 10px 12px;
border-radius: var(--radius-sm);
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
min-width: 56px;
transition: background 0.15s, border-color 0.15s;
}
.hour-pill:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.12);
}
.hour-pill.current {
background: rgba(79,142,247,0.15);
border-color: rgba(79,142,247,0.4);
}
.hour-label {
font-size: 11px;
font-weight: 500;
color: var(--text-muted);
letter-spacing: 0.04em;
}
.hour-pill.current .hour-label { color: var(--accent); }
.hour-temp {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
}
/* Divider */
.divider {
height: 1px;
background: rgba(255,255,255,0.06);
margin: 0 -52px 32px;
}
/* Stats row */
.stats-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}
.stat-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--radius-sm);
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.stat-card-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
.stat-card-value {
font-size: 22px;
font-weight: 300;
color: var(--text-primary);
letter-spacing: -0.5px;
}
.stat-card-sub {
font-size: 12px;
color: var(--text-muted);
}
/* Temp bar */
.temp-bar-wrap {
display: flex;
align-items: center;
gap: 10px;
margin-top: 4px;
}
.temp-bar-track {
flex: 1;
height: 4px;
border-radius: 2px;
background: rgba(255,255,255,0.08);
position: relative;
overflow: hidden;
}
.temp-bar-fill {
position: absolute;
top: 0; bottom: 0;
border-radius: 2px;
background: linear-gradient(90deg, var(--accent-cold), var(--accent-warm));
}
.temp-bar-label {
font-size: 11px;
color: var(--text-muted);
min-width: 28px;
text-align: right;
}
/* Error state */
.error-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 40px;
text-align: center;
gap: 16px;
color: var(--text-secondary);
}
.error-icon { font-size: 48px; }
.error-title { font-size: 20px; font-weight: 500; color: var(--text-primary); }
.error-msg { font-size: 14px; line-height: 1.6; max-width: 400px; }
/* Loading state */
.loading-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 40px;
gap: 20px;
color: var(--text-secondary);
}
.spinner {
width: 36px; height: 36px;
border: 2px solid rgba(255,255,255,0.08);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 14px; }
.hidden { display: none !important; }
</style>
</head>
<body>
<div class="card" id="card">
<div id="loadingState" class="loading-state">
<div class="spinner"></div>
<div class="loading-text">Fetching weather data…</div>
</div>
<div id="errorState" class="error-state hidden">
<div class="error-icon">⛈</div>
<div class="error-title">Unable to load weather data</div>
<div class="error-msg" id="errorMsg">Something went wrong while fetching the forecast. Please try again later.</div>
</div>
<div id="weatherContent" class="hidden">
<div class="hero" id="hero">
<div class="hero-bg" id="heroBg"></div>
<div class="hero-glow" id="heroGlow"></div>
<div class="hero-top">
<div class="location-block">
<div class="location-name">
<svg width="12" height="14" viewBox="0 0 12 14" fill="none"><path d="M6 0C3.24 0 1 2.24 1 5c0 3.75 5 9 5 9s5-5.25 5-9c0-2.76-2.24-5-5-5zm0 6.5A1.5 1.5 0 1 1 6 3.5 1.5 1.5 0 0 1 6 6.5z" fill="currentColor"/></svg>
<span id="locationName">Berlin</span>
</div>
<div class="location-date" id="locationDate">—</div>
</div>
<div class="condition-block">
<span class="condition-icon" id="conditionIcon">🌤</span>
<div class="condition-text" id="conditionText">—</div>
</div>
</div>
<div class="hero-bottom">
<div class="temp-display">
<span class="temp-main" id="tempMain">—</span>
<span class="temp-unit">°C</span>
</div>
<div class="temp-range">
<div class="temp-range-item">
<div class="dot-max"></div>
<span class="temp-range-label">High</span>
<strong id="tempMax">—</strong>
</div>
<div class="temp-range-item">
<div class="dot-min"></div>
<span class="temp-range-label">Low</span>
<strong id="tempMin">—</strong>
</div>
</div>
</div>
</div>
<div class="body">
<div class="section-label">Hourly Temperature</div>
<div class="hourly-chart-wrap">
<canvas id="chart"></canvas>
</div>
<div class="hourly-row" id="hourlyRow"></div>
<div class="divider"></div>
<div class="stats-row">
<div class="stat-card">
<div class="stat-card-label">Temperature Range</div>
<div class="stat-card-value" id="statRange">—</div>
<div class="temp-bar-wrap">
<div class="temp-bar-label" id="barLabelMin" style="min-width:36px;text-align:left">—</div>
<div class="temp-bar-track">
<div class="temp-bar-fill" id="tempBarFill" style="left:0%;right:0%"></div>
</div>
<div class="temp-bar-label" id="barLabelMax">—</div>
</div>
</div>
<div class="stat-card">
<div class="stat-card-label">Peak Temperature</div>
<div class="stat-card-value" id="statPeak">—</div>
<div class="stat-card-sub" id="statPeakTime">—</div>
</div>
<div class="stat-card">
<div class="stat-card-label">Coolest Hour</div>
<div class="stat-card-value" id="statCool">—</div>
<div class="stat-card-sub" id="statCoolTime">—</div>
</div>
</div>
</div>
</div>
</div>
<script>
(async () => {
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 isPast = date < todayUTC;
const apiBase = isPast ? '/api/om/archive' : '/api/om/forecast';
const apiParams = 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,
});
const WEATHER_CODES = {
0: { label: 'Clear Sky', icon: '☀️' },
1: { label: 'Mainly Clear', icon: '🌤️' },
2: { label: 'Partly Cloudy', icon: '⛅' },
3: { label: 'Overcast', icon: '☁️' },
45: { label: 'Foggy', icon: '🌫️' },
48: { label: 'Icy Fog', icon: '🌫️' },
51: { label: 'Light Drizzle', icon: '🌦️' },
53: { label: 'Drizzle', icon: '🌦️' },
55: { label: 'Heavy Drizzle', icon: '🌧️' },
61: { label: 'Light Rain', icon: '🌧️' },
63: { label: 'Rain', icon: '🌧️' },
65: { label: 'Heavy Rain', icon: '🌧️' },
71: { label: 'Light Snow', icon: '🌨️' },
73: { label: 'Snow', icon: '❄️' },
75: { label: 'Heavy Snow', icon: '❄️' },
77: { label: 'Snow Grains', icon: '🌨️' },
80: { label: 'Light Showers', icon: '🌦️' },
81: { label: 'Showers', icon: '🌧️' },
82: { label: 'Heavy Showers', icon: '🌧️' },
85: { label: 'Snow Showers', icon: '🌨️' },
86: { label: 'Heavy Snow Showers',icon: '🌨️' },
95: { label: 'Thunderstorm', icon: '⛈️' },
96: { label: 'Thunderstorm', icon: '⛈️' },
99: { label: 'Heavy Thunderstorm',icon: '⛈️' },
};
function getWeatherStyle(code, isNight) {
if (code === 0 && isNight) return { gradient: 'linear-gradient(135deg, #1e2d5a 0%, #0c1230 100%)', glow: '#4466dd' };
if (code <= 1) return { gradient: 'linear-gradient(135deg, #f4a340 0%, #e85d30 100%)', glow: '#f07830' };
if (code <= 3) return { gradient: 'linear-gradient(135deg, #5a6e90 0%, #323c58 100%)', glow: '#5a6e90' };
if (code <= 48) return { gradient: 'linear-gradient(135deg, #6a7880 0%, #3a4448 100%)', glow: '#6a7880' };
if (code <= 67) return { gradient: 'linear-gradient(135deg, #2c5070 0%, #162838 100%)', glow: '#3a7aaa' };
if (code <= 77) return { gradient: 'linear-gradient(135deg, #6080a0 0%, #304060 100%)', glow: '#88aacc' };
if (code <= 82) return { gradient: 'linear-gradient(135deg, #2a4060 0%, #101e30 100%)', glow: '#3a60aa' };
if (code <= 86) return { gradient: 'linear-gradient(135deg, #5070a0 0%, #283858 100%)', glow: '#88aadd' };
return { gradient: 'linear-gradient(135deg, #3a1a6a 0%, #180a30 100%)', glow: '#7744cc' };
}
function formatDate(d) {
const [y, m, day] = d.split('-').map(Number);
return new Date(Date.UTC(y, m - 1, day)).toLocaleDateString('en-US', {
weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC'
});
}
function fmt(v) {
return v == null ? '—' : (v > 0 ? '+' : '') + Math.round(v) + '°';
}
function showError(msg) {
document.getElementById('loadingState').classList.add('hidden');
document.getElementById('errorState').classList.remove('hidden');
document.getElementById('errorMsg').textContent = msg;
}
let data;
try {
const res = await fetch(`${apiBase}?${apiParams}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
data = await res.json();
if (data.error) throw new Error(data.reason || 'API error');
} catch (e) {
showError(`Could not fetch weather data: ${e.message}`);
return;
}
const daily = data.daily;
const hourly = data.hourly;
if (!daily || !hourly) {
showError('Unexpected response format from the weather API.');
return;
}
const tMax = daily.temperature_2m_max?.[0];
const tMin = daily.temperature_2m_min?.[0];
const wCode = daily.weather_code?.[0] ?? 0;
const avgTemp = (tMax + tMin) / 2;
// Hourly data (24 values for the day)
const hourlyTemps = hourly.temperature_2m?.slice(0, 24) || [];
const hourlyTimes = hourly.time?.slice(0, 24) || [];
// Weather info
const wInfo = WEATHER_CODES[wCode] || { label: `Code ${wCode}`, icon: '🌡️' };
// Is it night (rough check: avg temp and no sun codes)
const isNight = wCode === 0 && (date === todayUTC && new Date().getUTCHours() >= 20 || new Date().getUTCHours() < 6);
const style = getWeatherStyle(wCode, isNight);
// Populate hero
document.getElementById('locationName').textContent = name;
document.getElementById('locationDate').textContent = formatDate(date);
document.getElementById('conditionIcon').textContent = wInfo.icon;
document.getElementById('conditionText').textContent = wInfo.label;
document.getElementById('tempMain').textContent = Math.round(avgTemp);
document.getElementById('tempMax').textContent = fmt(tMax);
document.getElementById('tempMin').textContent = fmt(tMin);
const heroBg = document.getElementById('heroBg');
heroBg.style.background = style.gradient;
const heroGlow = document.getElementById('heroGlow');
heroGlow.style.background = style.glow;
// Hourly pills
const nowHour = new Date().getUTCHours();
const row = document.getElementById('hourlyRow');
hourlyTemps.forEach((t, i) => {
const h = i;
const pill = document.createElement('div');
pill.className = 'hour-pill' + (h === nowHour && date === todayUTC ? ' current' : '');
const label = document.createElement('div');
label.className = 'hour-label';
label.textContent = `${String(h).padStart(2,'0')}:00`;
const temp = document.createElement('div');
temp.className = 'hour-temp';
temp.textContent = t != null ? `${Math.round(t)}°` : '—';
pill.appendChild(label);
pill.appendChild(temp);
row.appendChild(pill);
});
// Stats
const validTemps = hourlyTemps.filter(t => t != null);
const peakVal = Math.max(...validTemps);
const coolVal = Math.min(...validTemps);
const peakIdx = hourlyTemps.indexOf(peakVal);
const coolIdx = hourlyTemps.indexOf(coolVal);
document.getElementById('statRange').textContent = `${Math.round(tMax - tMin)}°C spread`;
document.getElementById('statPeak').textContent = `${Math.round(peakVal)}°C`;
document.getElementById('statPeakTime').textContent = peakIdx >= 0 ? `at ${String(peakIdx).padStart(2,'0')}:00 UTC` : '';
document.getElementById('statCool').textContent = `${Math.round(coolVal)}°C`;
document.getElementById('statCoolTime').textContent = coolIdx >= 0 ? `at ${String(coolIdx).padStart(2,'0')}:00 UTC` : '';
// Bar
const allRange = 40;
const barMin = -10;
const leftPct = Math.max(0, Math.min(100, ((tMin - barMin) / allRange) * 100));
const rightPct = Math.max(0, Math.min(100, (1 - (tMax - barMin) / allRange) * 100));
document.getElementById('tempBarFill').style.left = `${leftPct}%`;
document.getElementById('tempBarFill').style.right = `${rightPct}%`;
document.getElementById('barLabelMin').textContent = `${Math.round(tMin)}°`;
document.getElementById('barLabelMax').textContent = `${Math.round(tMax)}°`;
// Show content
document.getElementById('loadingState').classList.add('hidden');
document.getElementById('weatherContent').classList.remove('hidden');
// Scroll current hour into view
const pills = row.querySelectorAll('.hour-pill');
const currentPill = row.querySelector('.current');
if (currentPill) {
setTimeout(() => currentPill.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' }), 100);
}
// Canvas chart
const canvas = document.getElementById('chart');
const dpr = window.devicePixelRatio || 1;
const W = canvas.offsetWidth;
const H = canvas.offsetHeight;
canvas.width = W * dpr;
canvas.height = H * dpr;
const ctx = canvas.getContext('2d');
ctx.scale(dpr, dpr);
const temps = hourlyTemps;
const tChartMin = Math.min(...validTemps) - 2;
const tChartMax = Math.max(...validTemps) + 2;
const tSpan = tChartMax - tChartMin;
const padL = 36, padR = 16, padT = 20, padB = 28;
const cW = W - padL - padR;
const cH = H - padT - padB;
function xOf(i) { return padL + (i / (temps.length - 1)) * cW; }
function yOf(t) { return padT + (1 - (t - tChartMin) / tSpan) * cH; }
// Grid lines
ctx.strokeStyle = 'rgba(255,255,255,0.05)';
ctx.lineWidth = 1;
const steps = 4;
for (let s = 0; s <= steps; s++) {
const t = tChartMin + (tSpan / steps) * s;
const y = yOf(t);
ctx.beginPath();
ctx.moveTo(padL, y);
ctx.lineTo(padL + cW, y);
ctx.stroke();
ctx.fillStyle = 'rgba(255,255,255,0.25)';
ctx.font = '10px system-ui, sans-serif';
ctx.textAlign = 'right';
ctx.fillText(`${Math.round(t)}°`, padL - 6, y + 4);
}
// Hour labels
ctx.fillStyle = 'rgba(255,255,255,0.2)';
ctx.font = '10px system-ui, sans-serif';
ctx.textAlign = 'center';
[0, 6, 12, 18, 23].forEach(i => {
const label = `${String(i).padStart(2,'0')}h`;
ctx.fillText(label, xOf(i), H - 6);
});
// Area fill
const grad = ctx.createLinearGradient(0, padT, 0, padT + cH);
grad.addColorStop(0, 'rgba(79,142,247,0.35)');
grad.addColorStop(1, 'rgba(79,142,247,0.02)');
ctx.beginPath();
ctx.moveTo(xOf(0), yOf(temps[0] ?? tChartMin));
for (let i = 1; i < temps.length; i++) {
if (temps[i] == null) continue;
const x0 = xOf(i - 1), y0 = yOf(temps[i - 1] ?? temps[i]);
const x1 = xOf(i), y1 = yOf(temps[i]);
const cx = (x0 + x1) / 2;
ctx.bezierCurveTo(cx, y0, cx, y1, x1, y1);
}
ctx.lineTo(xOf(temps.length - 1), padT + cH);
ctx.lineTo(xOf(0), padT + cH);
ctx.closePath();
ctx.fillStyle = grad;
ctx.fill();
// Line
ctx.beginPath();
ctx.moveTo(xOf(0), yOf(temps[0] ?? tChartMin));
for (let i = 1; i < temps.length; i++) {
if (temps[i] == null) continue;
const x0 = xOf(i - 1), y0 = yOf(temps[i - 1] ?? temps[i]);
const x1 = xOf(i), y1 = yOf(temps[i]);
const cx = (x0 + x1) / 2;
ctx.bezierCurveTo(cx, y0, cx, y1, x1, y1);
}
ctx.strokeStyle = 'rgba(79,142,247,0.9)';
ctx.lineWidth = 2.5;
ctx.lineJoin = 'round';
ctx.stroke();
// Peak & cool dots
const dotData = [
{ idx: peakIdx, color: '#ffb366', label: `${Math.round(peakVal)}°` },
{ idx: coolIdx, color: '#66c8ff', label: `${Math.round(coolVal)}°` },
];
dotData.forEach(({ idx, color, label }) => {
if (idx < 0 || temps[idx] == null) return;
const dx = xOf(idx), dy = yOf(temps[idx]);
ctx.beginPath();
ctx.arc(dx, dy, 5, 0, Math.PI * 2);
ctx.fillStyle = color;
ctx.fill();
ctx.strokeStyle = 'rgba(22,24,31,0.8)';
ctx.lineWidth = 2;
ctx.stroke();
const above = dy > padT + 20;
ctx.fillStyle = color;
ctx.font = 'bold 11px system-ui, sans-serif';
ctx.textAlign = dx > cW * 0.8 ? 'right' : 'center';
ctx.fillText(label, dx, dy + (above ? -10 : 16));
});
// Current hour indicator
if (date === todayUTC && nowHour < temps.length && temps[nowHour] != null) {
const nx = xOf(nowHour), ny = yOf(temps[nowHour]);
ctx.beginPath();
ctx.moveTo(nx, padT);
ctx.lineTo(nx, padT + cH);
ctx.strokeStyle = 'rgba(255,255,255,0.12)';
ctx.lineWidth = 1;
ctx.setLineDash([4, 4]);
ctx.stroke();
ctx.setLineDash([]);
ctx.beginPath();
ctx.arc(nx, ny, 4, 0, Math.PI * 2);
ctx.fillStyle = '#fff';
ctx.fill();
}
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 23,117 | html / css / js | 3,513 / 7,774 / 11,830 |
|---|---|---|---|
| dom nodes | 66 | dom depth | 10 |
| css rules | 56 | js present | yes |
| brightness | 32.1 | contrast | 21.1 |
| colorfulness | 21.8 | whitespace | 73.5% |
This slot's telemetry
| prompt tokens | 7 | completion tokens | 9,346 |
|---|---|---|---|
| total tokens | 9,353 | wall | 119.9 s |
| cost | — | request id | — |
config.json595 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "claude-sonnet-4-6-eff-medium--cli--cursor-xl--dev",
"effort": "medium",
"family": "claude",
"m": {
"min": 2,
"q": 2
},
"model_id": "claude-sonnet-4-6",
"protocol": "cli",
"served_model": "claude-4.6-sonnet-medium",
"telemetry": {
"completion_tokens": 27938,
"cost_usd": null,
"prompt_tokens": 20,
"total_tokens": 27958,
"wall_ms": 372297
},
"transport": "cursor-agent-cli-isolated-home",
"vendor_sanction_ref": null
}send-log2.5 KB
{
"N": 2,
"batch_id": "2026-08-13--cursor-xl-s2",
"config_id": "claude-sonnet-4-6-eff-medium--cli--cursor-xl--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-08-13T14:45:48.091361+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T14:43:48.180678+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-13T14:46:42.535457+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T14:45:51.284422+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-13T14:47:40.950418+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T14:46:45.711947+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-13T14:50:09.993094+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T14:47:44.084320+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
}
}
}