claude-fable-5 @ medium · cursor-xl
cursor-xlmedium
- config
- claude-fable-5-eff-medium--cli--cursor-xl--dev
- batch
- 2026-07-19--unified
- transport
- cursor-agent-cli-isolated-home
- protocol
- cli · plan
- served model
- claude-fable-5-medium
- captured
- Jul 18, 2026, 11:54 AM · N=2
variant
live
slot 0 · P-q · sandboxed iframe
non-deterministic render — re-rendering the same input yields different pixels (random or time-dependent content), so the visual channels read this card less stably than the others.
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 neighborsNo similarity data for this session — this batch has no computed pairs.
Fidelity — does the card show the right data?
- namematch
- conditionmatch
- datematch
- max tempambiguousinsufficient-distinct-temperature-nodes
- min tempambiguousinsufficient-distinct-temperature-nodes
- hourlyambiguouscoverage · 0 match · 0 mismatch · 24 not shown
- request sidematch0 violation(s)
extractor fidelity-extractor-v1+Berlin-2026-07-15
Source — raw model output, one byte unchanged
download card.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280, initial-scale=1">
<title>Weather</title>
<style>
:root {
--ink: #eef3fb;
--ink-dim: rgba(238, 243, 251, 0.62);
--ink-faint: rgba(238, 243, 251, 0.38);
--card-bg: rgba(255, 255, 255, 0.07);
--card-line: rgba(255, 255, 255, 0.14);
--accent: #ffd166;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
background: #0b1026;
color: var(--ink);
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
-webkit-font-smoothing: antialiased;
}
/* Animated backdrop */
.sky {
position: fixed;
inset: 0;
background: linear-gradient(160deg, #101a3f 0%, #0b1026 45%, #251a3d 100%);
z-index: 0;
transition: background 1.2s ease;
}
.sky.clear { background: linear-gradient(160deg, #1a4a8f 0%, #0e2c5c 55%, #0a1c3e 100%); }
.sky.cloudy { background: linear-gradient(160deg, #3a4a63 0%, #232e44 55%, #171f31 100%); }
.sky.rain { background: linear-gradient(160deg, #24344f 0%, #16203a 55%, #0e1526 100%); }
.sky.snow { background: linear-gradient(160deg, #43597a 0%, #2b3a55 55%, #1a2438 100%); }
.sky.storm { background: linear-gradient(160deg, #2a2440 0%, #191430 55%, #0d0a1e 100%); }
.sky.fog { background: linear-gradient(160deg, #46506330 0%, #2c3446 55%, #1b2130 100%); background-color:#2c3446; }
.glow {
position: fixed;
width: 720px; height: 720px;
border-radius: 50%;
filter: blur(140px);
opacity: 0.35;
z-index: 0;
pointer-events: none;
}
.glow.one { background: #4f7fe0; top: -240px; left: -160px; }
.glow.two { background: #a35ce0; bottom: -280px; right: -180px; opacity: 0.22; }
.stars {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
}
.stars span {
position: absolute;
width: 2px; height: 2px;
background: #fff;
border-radius: 50%;
opacity: 0.5;
animation: twinkle 3.4s ease-in-out infinite;
}
@keyframes twinkle {
0%, 100% { opacity: 0.15; }
50% { opacity: 0.7; }
}
/* Card */
.card {
position: relative;
z-index: 1;
width: 960px;
border-radius: 28px;
background: var(--card-bg);
border: 1px solid var(--card-line);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.10);
padding: 44px 48px 36px;
opacity: 0;
transform: translateY(14px);
animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes rise {
to { opacity: 1; transform: translateY(0); }
}
.top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 32px;
}
.place h1 {
font-size: 44px;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.1;
}
.place .date {
margin-top: 8px;
font-size: 17px;
color: var(--ink-dim);
letter-spacing: 0.02em;
}
.place .badge {
display: inline-block;
margin-top: 14px;
padding: 6px 14px;
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-dim);
border: 1px solid var(--card-line);
border-radius: 999px;
background: rgba(255,255,255,0.05);
}
.now {
display: flex;
align-items: center;
gap: 28px;
text-align: right;
}
.icon-wrap { width: 120px; height: 120px; flex-shrink: 0; }
.icon-wrap svg { width: 100%; height: 100%; display: block; }
.temps .hi {
font-size: 64px;
font-weight: 300;
letter-spacing: -0.03em;
line-height: 1;
}
.temps .hi sup { font-size: 28px; font-weight: 400; color: var(--ink-dim); }
.temps .lo {
margin-top: 6px;
font-size: 22px;
color: var(--ink-dim);
font-weight: 400;
}
.temps .cond {
margin-top: 12px;
font-size: 17px;
color: var(--accent);
font-weight: 500;
letter-spacing: 0.02em;
}
.divider {
height: 1px;
background: linear-gradient(90deg, transparent, var(--card-line) 18%, var(--card-line) 82%, transparent);
margin: 34px 0 26px;
}
.hourly-label {
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 18px;
}
/* Hourly chart */
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: 190px; overflow: visible; }
.chart .hour-temp { font-size: 12.5px; fill: var(--ink); font-weight: 600; }
.chart .hour-time { font-size: 11px; fill: var(--ink-faint); }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .area { fill: url(#areaGrad); }
.chart .dot { fill: #0b1026; stroke: var(--accent); stroke-width: 2; }
/* States */
.state {
text-align: center;
padding: 60px 0 48px;
}
.state .spinner {
width: 42px; height: 42px;
margin: 0 auto 22px;
border-radius: 50%;
border: 3px solid var(--card-line);
border-top-color: var(--accent);
animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.state p { color: var(--ink-dim); font-size: 17px; }
.state.error .err-icon {
width: 52px; height: 52px;
margin: 0 auto 20px;
border-radius: 50%;
border: 2px solid rgba(255, 120, 120, 0.5);
color: #ff8a8a;
font-size: 26px;
line-height: 50px;
font-weight: 600;
}
.state.error h2 { font-size: 22px; font-weight: 600; margin-bottom: 10px; }
.state.error p { color: var(--ink-faint); font-size: 15px; max-width: 460px; margin: 0 auto; line-height: 1.5; }
.hidden { display: none !important; }
</style>
</head>
<body>
<div class="sky" id="sky"></div>
<div class="glow one"></div>
<div class="glow two"></div>
<div class="stars" id="stars"></div>
<main class="card">
<div class="state" id="loading">
<div class="spinner"></div>
<p>Loading weather…</p>
</div>
<div class="state error hidden" id="error">
<div class="err-icon">!</div>
<h2>Weather data could not be loaded</h2>
<p id="errorDetail">Something went wrong while fetching the forecast. Please try again later.</p>
</div>
<div class="hidden" id="content">
<div class="top">
<div class="place">
<h1 id="placeName">—</h1>
<div class="date" id="dateLabel">—</div>
<span class="badge" id="modeBadge">Forecast</span>
</div>
<div class="now">
<div class="temps">
<div class="hi"><span id="tMax">—</span><sup>°C</sup></div>
<div class="lo">Low <span id="tMin">—</span>°C</div>
<div class="cond" id="condition">—</div>
</div>
<div class="icon-wrap" id="iconWrap"></div>
</div>
</div>
<div class="divider"></div>
<div class="hourly-label">Hourly temperature (UTC)</div>
<div class="chart" id="chart"></div>
</div>
</main>
<script>
(function () {
"use strict";
/* ---------- helpers ---------- */
var qs = new URLSearchParams(location.search);
var lat = parseFloat(qs.get("lat"));
var lon = parseFloat(qs.get("lon"));
if (!isFinite(lat)) lat = 52.52;
if (!isFinite(lon)) lon = 13.405;
var name = qs.get("name") || "Berlin";
function todayUTC() {
var d = new Date();
return d.toISOString().slice(0, 10);
}
var dateStr = qs.get("date");
if (!dateStr || !/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) dateStr = todayUTC();
var WMO = {
0: ["Clear sky", "clear", "sun"],
1: ["Mainly clear", "clear", "sun"],
2: ["Partly cloudy", "cloudy", "partly"],
3: ["Overcast", "cloudy", "cloud"],
45: ["Fog", "fog", "fog"],
48: ["Depositing rime fog", "fog", "fog"],
51: ["Light drizzle", "rain", "rain"],
53: ["Moderate drizzle", "rain", "rain"],
55: ["Dense drizzle", "rain", "rain"],
56: ["Light freezing drizzle", "rain", "rain"],
57: ["Dense freezing drizzle", "rain", "rain"],
61: ["Slight rain", "rain", "rain"],
63: ["Moderate rain", "rain", "rain"],
65: ["Heavy rain", "rain", "rain"],
66: ["Light freezing rain", "rain", "rain"],
67: ["Heavy freezing rain", "rain", "rain"],
71: ["Slight snowfall", "snow", "snow"],
73: ["Moderate snowfall", "snow", "snow"],
75: ["Heavy snowfall", "snow", "snow"],
77: ["Snow grains", "snow", "snow"],
80: ["Slight rain showers", "rain", "rain"],
81: ["Moderate rain showers", "rain", "rain"],
82: ["Violent rain showers", "rain", "rain"],
85: ["Slight snow showers", "snow", "snow"],
86: ["Heavy snow showers", "snow", "snow"],
95: ["Thunderstorm", "storm", "storm"],
96: ["Thunderstorm with slight hail", "storm", "storm"],
99: ["Thunderstorm with heavy hail", "storm", "storm"]
};
function describe(code) {
return WMO[code] || ["Unknown conditions", "cloudy", "cloud"];
}
function fmtDate(iso) {
var p = iso.split("-");
var d = new Date(Date.UTC(+p[0], +p[1] - 1, +p[2]));
return d.toLocaleDateString("en-US", {
weekday: "long", year: "numeric", month: "long", day: "numeric", timeZone: "UTC"
});
}
function round1(v) {
return Math.round(v * 10) / 10;
}
/* ---------- weather icons (inline SVG) ---------- */
var ICONS = {
sun: '<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="20" fill="#ffd166"/><g stroke="#ffd166" stroke-width="4" stroke-linecap="round">' +
[0,45,90,135,180,225,270,315].map(function(a){
var r = a * Math.PI / 180;
var x1 = 50 + Math.cos(r) * 28, y1 = 50 + Math.sin(r) * 28;
var x2 = 50 + Math.cos(r) * 38, y2 = 50 + Math.sin(r) * 38;
return '<line x1="'+x1+'" y1="'+y1+'" x2="'+x2+'" y2="'+y2+'"/>';
}).join("") + '</g></svg>',
partly: '<svg viewBox="0 0 100 100"><circle cx="38" cy="38" r="16" fill="#ffd166"/>' +
'<path d="M30 72a13 13 0 0 1 2-25.8A19 19 0 0 1 68 50a14 14 0 0 1 2 27.8L30 78z" fill="#dbe4f5"/></svg>',
cloud: '<svg viewBox="0 0 100 100"><path d="M28 74a15 15 0 0 1 2.3-29.8A22 22 0 0 1 73 48a16 16 0 0 1 1 31.9L28 80z" fill="#c8d3ea"/></svg>',
rain: '<svg viewBox="0 0 100 100"><path d="M28 62a15 15 0 0 1 2.3-29.8A22 22 0 0 1 73 36a16 16 0 0 1 1 31.9L28 68z" fill="#c8d3ea"/>' +
'<g stroke="#7fb2ff" stroke-width="4" stroke-linecap="round"><line x1="38" y1="76" x2="34" y2="88"/><line x1="54" y1="76" x2="50" y2="88"/><line x1="70" y1="76" x2="66" y2="88"/></g></svg>',
snow: '<svg viewBox="0 0 100 100"><path d="M28 62a15 15 0 0 1 2.3-29.8A22 22 0 0 1 73 36a16 16 0 0 1 1 31.9L28 68z" fill="#c8d3ea"/>' +
'<g fill="#eef3fb"><circle cx="38" cy="80" r="4"/><circle cx="54" cy="86" r="4"/><circle cx="70" cy="80" r="4"/></g></svg>',
storm: '<svg viewBox="0 0 100 100"><path d="M28 58a15 15 0 0 1 2.3-29.8A22 22 0 0 1 73 32a16 16 0 0 1 1 31.9L28 64z" fill="#c8d3ea"/>' +
'<path d="M52 58 40 78h10l-6 16 20-24H52l8-12z" fill="#ffd166"/></svg>',
fog: '<svg viewBox="0 0 100 100"><path d="M28 52a15 15 0 0 1 2.3-29.8A22 22 0 0 1 73 26a16 16 0 0 1 1 31.9L28 58z" fill="#c8d3ea"/>' +
'<g stroke="#9fb0cc" stroke-width="5" stroke-linecap="round"><line x1="26" y1="70" x2="74" y2="70"/><line x1="32" y1="82" x2="68" y2="82"/></g></svg>'
};
/* ---------- stars backdrop ---------- */
var starBox = document.getElementById("stars");
var starHtml = "";
for (var i = 0; i < 60; i++) {
starHtml += '<span style="left:' + (Math.random() * 100).toFixed(2) +
'%;top:' + (Math.random() * 100).toFixed(2) +
'%;animation-delay:' + (Math.random() * 3).toFixed(2) + 's"></span>';
}
starBox.innerHTML = starHtml;
/* ---------- chart rendering ---------- */
function renderChart(hours, temps) {
var W = 864, H = 190;
var padL = 8, padR = 8, padT = 42, padB = 34;
var n = temps.length;
if (!n) return;
var min = Math.min.apply(null, temps);
var max = Math.max.apply(null, temps);
var span = (max - min) || 1;
function x(i) { return padL + (W - padL - padR) * (n === 1 ? 0.5 : i / (n - 1)); }
function y(v) { return padT + (H - padT - padB) * (1 - (v - min) / span); }
var path = "", area = "";
for (var i = 0; i < n; i++) {
var px = x(i), py = y(temps[i]);
path += (i === 0 ? "M" : "L") + px.toFixed(1) + " " + py.toFixed(1);
}
area = path + " L" + x(n - 1).toFixed(1) + " " + (H - padB + 6) +
" L" + x(0).toFixed(1) + " " + (H - padB + 6) + " Z";
var labelEvery = n > 12 ? 3 : 1;
var parts = [];
parts.push('<svg viewBox="0 0 ' + W + ' ' + H + '" preserveAspectRatio="none" aria-label="Hourly temperatures">');
parts.push('<defs><linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0%" stop-color="rgba(255,209,102,0.28)"/>' +
'<stop offset="100%" stop-color="rgba(255,209,102,0)"/></linearGradient></defs>');
parts.push('<path class="area" d="' + area + '"/>');
parts.push('<path class="line" d="' + path + '"/>');
for (var j = 0; j < n; j++) {
var cx = x(j), cy = y(temps[j]);
var showLabel = j % labelEvery === 0;
if (showLabel) {
parts.push('<circle class="dot" cx="' + cx.toFixed(1) + '" cy="' + cy.toFixed(1) + '" r="3.5"/>');
parts.push('<text class="hour-temp" x="' + cx.toFixed(1) + '" y="' + (cy - 12).toFixed(1) +
'" text-anchor="middle">' + Math.round(temps[j]) + '°</text>');
parts.push('<text class="hour-time" x="' + cx.toFixed(1) + '" y="' + (H - 8) +
'" text-anchor="middle">' + hours[j] + '</text>');
}
}
parts.push('</svg>');
document.getElementById("chart").innerHTML = parts.join("");
}
/* ---------- data loading ---------- */
function showError(msg) {
document.getElementById("loading").classList.add("hidden");
document.getElementById("content").classList.add("hidden");
var err = document.getElementById("error");
err.classList.remove("hidden");
if (msg) document.getElementById("errorDetail").textContent = msg;
}
function render(data, isPast) {
var daily = data && data.daily;
var hourly = data && data.hourly;
if (!daily || !daily.time || !daily.time.length ||
daily.temperature_2m_max == null || daily.temperature_2m_min == null) {
showError("The weather service returned no data for " + name + " on " + dateStr + ".");
return;
}
var tMax = daily.temperature_2m_max[0];
var tMin = daily.temperature_2m_min[0];
var code = daily.weather_code ? daily.weather_code[0] : null;
if (tMax == null || tMin == null) {
showError("Temperature data is unavailable for " + name + " on " + dateStr + ".");
return;
}
var desc = describe(code);
document.getElementById("placeName").textContent = name;
document.getElementById("dateLabel").textContent = fmtDate(dateStr) + " · UTC";
document.getElementById("modeBadge").textContent = isPast ? "Historical" : "Forecast";
document.getElementById("tMax").textContent = round1(tMax);
document.getElementById("tMin").textContent = round1(tMin);
document.getElementById("condition").textContent = desc[0];
document.getElementById("iconWrap").innerHTML = ICONS[desc[2]] || ICONS.cloud;
document.getElementById("sky").className = "sky " + desc[1];
var hourLabels = [], hourTemps = [];
if (hourly && hourly.time && hourly.temperature_2m) {
for (var i = 0; i < hourly.time.length; i++) {
var t = hourly.time[i];
var v = hourly.temperature_2m[i];
if (t && t.slice(0, 10) === dateStr && v != null) {
hourLabels.push(t.slice(11, 16));
hourTemps.push(v);
}
}
}
if (hourTemps.length) {
renderChart(hourLabels, hourTemps);
} else {
document.getElementById("chart").innerHTML =
'<p style="color:var(--ink-faint);font-size:15px;padding:24px 0;">Hourly data is not available for this date.</p>';
}
document.getElementById("loading").classList.add("hidden");
document.getElementById("content").classList.remove("hidden");
}
var isPast = dateStr < todayUTC();
var endpoint = isPast ? "/api/om/archive" : "/api/om/forecast";
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: dateStr,
end_date: dateStr
});
fetch(endpoint + "?" + params.toString())
.then(function (res) {
if (!res.ok) throw new Error("The weather service responded with status " + res.status + ".");
return res.json();
})
.then(function (data) { render(data, isPast); })
.catch(function (e) {
showError(e && e.message ? e.message : "A network error prevented loading the weather data.");
});
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 17,190 | html / css / js | 1,507 / 5,734 / 9,949 |
|---|---|---|---|
| dom nodes | 38 | dom depth | 9 |
| css rules | 51 | js present | yes |
| brightness | 53.2 | contrast | 19.6 |
| colorfulness | 27.3 | whitespace | 56.0% |
This slot's telemetry
| prompt tokens | 2 | completion tokens | 8,216 |
|---|---|---|---|
| total tokens | 8,218 | wall | 87 s |
| cost | — | request id | — |
config.json585 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "claude-fable-5-eff-medium--cli--cursor-xl--dev",
"effort": "medium",
"family": "claude",
"m": {
"min": 2,
"q": 2
},
"model_id": "claude-fable-5",
"protocol": "cli",
"served_model": "claude-fable-5-medium",
"telemetry": {
"completion_tokens": 21887,
"cost_usd": null,
"prompt_tokens": 8,
"total_tokens": 21895,
"wall_ms": 241531
},
"transport": "cursor-agent-cli-isolated-home",
"vendor_sanction_ref": null
}send-log2.5 KB
{
"N": 2,
"batch_id": "2026-08-13--cursor-xl-s0",
"config_id": "claude-fable-5-eff-medium--cli--cursor-xl--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-08-13T11:26:36.112137+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T11:25:09.086475+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-13T11:27:19.038998+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T11:26:40.043107+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-13T11:28:02.290443+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T11:27:22.449522+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-13T11:29:21.560633+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T11:28:05.889149+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
}
}
}