claude-fable-5-thinking @ medium · cursor-xl
cursor-xlmedium
- config
- claude-fable-5-thinking-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-thinking-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 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 Card</title>
<style>
:root {
--bg-1: #0e1a2e;
--bg-2: #16273f;
--card: rgba(255, 255, 255, 0.06);
--card-border: rgba(255, 255, 255, 0.12);
--text: #eef4fb;
--text-dim: #9db2c9;
--accent: #7ec8ff;
--accent-warm: #ffc470;
--shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: 100%;
height: 100%;
}
body {
font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
color: var(--text);
background:
radial-gradient(1100px 600px at 15% -10%, #274a72 0%, transparent 60%),
radial-gradient(900px 700px at 95% 110%, #1d3a5c 0%, transparent 55%),
linear-gradient(160deg, var(--bg-1), var(--bg-2));
display: flex;
align-items: center;
justify-content: center;
min-height: 800px;
overflow: hidden;
}
.stars {
position: fixed;
inset: 0;
pointer-events: none;
opacity: 0.5;
}
.card {
position: relative;
width: 960px;
border-radius: 28px;
background: var(--card);
border: 1px solid var(--card-border);
box-shadow: var(--shadow);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
padding: 44px 52px 40px;
animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes rise {
from { opacity: 0; transform: translateY(26px) scale(0.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 32px;
}
.place h1 {
font-size: 44px;
font-weight: 600;
letter-spacing: -0.5px;
line-height: 1.1;
}
.place .date {
margin-top: 8px;
font-size: 17px;
color: var(--text-dim);
letter-spacing: 0.4px;
}
.place .coords {
margin-top: 6px;
font-size: 13px;
color: var(--text-dim);
opacity: 0.7;
letter-spacing: 0.5px;
font-variant-numeric: tabular-nums;
}
.now {
display: flex;
align-items: center;
gap: 22px;
text-align: right;
}
.icon-wrap { width: 96px; height: 96px; flex-shrink: 0; }
.icon-wrap svg { width: 100%; height: 100%; display: block; }
.cond {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.cond .label {
font-size: 20px;
font-weight: 500;
color: var(--text);
}
.temps {
display: flex;
align-items: baseline;
gap: 16px;
font-variant-numeric: tabular-nums;
}
.temps .hi {
font-size: 56px;
font-weight: 300;
letter-spacing: -2px;
color: var(--accent-warm);
}
.temps .lo {
font-size: 30px;
font-weight: 300;
color: var(--accent);
}
.temps .tag {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.4px;
color: var(--text-dim);
display: block;
margin-top: 2px;
text-align: center;
}
.divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
margin: 34px 0 26px;
}
.section-title {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--text-dim);
margin-bottom: 16px;
}
.chart-wrap { position: relative; }
#chart { display: block; width: 100%; height: 210px; }
.hours {
margin-top: 18px;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 8px 6px;
font-variant-numeric: tabular-nums;
}
.hour {
text-align: center;
padding: 8px 2px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.hour .h {
font-size: 11px;
color: var(--text-dim);
letter-spacing: 0.5px;
}
.hour .t {
margin-top: 4px;
font-size: 14px;
font-weight: 600;
}
.state {
text-align: center;
padding: 90px 40px;
}
.state .msg {
font-size: 22px;
font-weight: 500;
}
.state .sub {
margin-top: 10px;
font-size: 15px;
color: var(--text-dim);
}
.spinner {
width: 44px;
height: 44px;
margin: 0 auto 24px;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.15);
border-top-color: var(--accent);
animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.error-icon {
width: 56px;
height: 56px;
margin: 0 auto 20px;
}
</style>
</head>
<body>
<svg class="stars" width="100%" height="100%" aria-hidden="true"></svg>
<main class="card" id="card">
<div class="state" id="state">
<div class="spinner"></div>
<div class="msg">Loading weather…</div>
</div>
<div id="content" style="display:none">
<div class="top">
<div class="place">
<h1 id="name"></h1>
<div class="date" id="date"></div>
<div class="coords" id="coords"></div>
</div>
<div class="now">
<div class="cond">
<div class="label" id="cond"></div>
<div class="temps">
<span><span class="hi" id="tmax"></span><span class="tag">High</span></span>
<span><span class="lo" id="tmin"></span><span class="tag">Low</span></span>
</div>
</div>
<div class="icon-wrap" id="icon"></div>
</div>
</div>
<div class="divider"></div>
<div class="section-title">Hourly temperature</div>
<div class="chart-wrap">
<svg id="chart" viewBox="0 0 856 210" preserveAspectRatio="none"></svg>
</div>
<div class="hours" id="hours"></div>
</div>
</main>
<script>
(function () {
"use strict";
var params = new URLSearchParams(location.search);
var lat = parseFloat(params.get("lat"));
var lon = parseFloat(params.get("lon"));
if (!isFinite(lat)) lat = 52.52;
if (!isFinite(lon)) lon = 13.405;
var name = params.get("name") || "Berlin";
var todayUTC = new Date().toISOString().slice(0, 10);
var date = params.get("date");
if (!date || !/^\d{4}-\d{2}-\d{2}$/.test(date)) date = todayUTC;
var WMO = {
0: ["Clear sky", "sun"],
1: ["Mainly clear", "sun"],
2: ["Partly cloudy", "partly"],
3: ["Overcast", "cloud"],
45: ["Fog", "fog"],
48: ["Depositing rime fog", "fog"],
51: ["Light drizzle", "rain"],
53: ["Moderate drizzle", "rain"],
55: ["Dense drizzle", "rain"],
56: ["Light freezing drizzle", "rain"],
57: ["Dense freezing drizzle", "rain"],
61: ["Slight rain", "rain"],
63: ["Moderate rain", "rain"],
65: ["Heavy rain", "rain"],
66: ["Light freezing rain", "rain"],
67: ["Heavy freezing rain", "rain"],
71: ["Slight snowfall", "snow"],
73: ["Moderate snowfall", "snow"],
75: ["Heavy snowfall", "snow"],
77: ["Snow grains", "snow"],
80: ["Slight rain showers", "rain"],
81: ["Moderate rain showers", "rain"],
82: ["Violent rain showers", "rain"],
85: ["Slight snow showers", "snow"],
86: ["Heavy snow showers", "snow"],
95: ["Thunderstorm", "storm"],
96: ["Thunderstorm with slight hail", "storm"],
99: ["Thunderstorm with heavy hail", "storm"]
};
var ICONS = {
sun: '<svg viewBox="0 0 64 64" fill="none"><circle cx="32" cy="32" r="13" fill="#FFD166"/><g stroke="#FFD166" stroke-width="3" stroke-linecap="round"><line x1="32" y1="6" x2="32" y2="14"/><line x1="32" y1="50" x2="32" y2="58"/><line x1="6" y1="32" x2="14" y2="32"/><line x1="50" y1="32" x2="58" y2="32"/><line x1="13.6" y1="13.6" x2="19.3" y2="19.3"/><line x1="44.7" y1="44.7" x2="50.4" y2="50.4"/><line x1="13.6" y1="50.4" x2="19.3" y2="44.7"/><line x1="44.7" y1="19.3" x2="50.4" y2="13.6"/></g></svg>',
partly: '<svg viewBox="0 0 64 64" fill="none"><circle cx="24" cy="24" r="11" fill="#FFD166"/><path d="M20 46a9 9 0 0 1 1.6-17.9A12 12 0 0 1 44.6 32 8.5 8.5 0 0 1 44 49H22z" fill="#DCE8F5"/></svg>',
cloud: '<svg viewBox="0 0 64 64" fill="none"><path d="M18 48a10 10 0 0 1 1.8-19.8A13 13 0 0 1 45 30.5 9.5 9.5 0 0 1 45.5 49H20z" fill="#C6D5E6"/><path d="M28 24a11 11 0 0 1 17 6.5" stroke="#AEC2D8" stroke-width="0" /></svg>',
fog: '<svg viewBox="0 0 64 64" fill="none"><path d="M18 34a10 10 0 0 1 1.8-19.8A13 13 0 0 1 45 16.5 9.5 9.5 0 0 1 45.5 35H20z" fill="#C6D5E6"/><g stroke="#9DB2C9" stroke-width="3.5" stroke-linecap="round"><line x1="14" y1="44" x2="50" y2="44"/><line x1="20" y1="52" x2="44" y2="52"/></g></svg>',
rain: '<svg viewBox="0 0 64 64" fill="none"><path d="M18 38a10 10 0 0 1 1.8-19.8A13 13 0 0 1 45 20.5 9.5 9.5 0 0 1 45.5 39H20z" fill="#C6D5E6"/><g stroke="#7EC8FF" stroke-width="3.5" stroke-linecap="round"><line x1="24" y1="46" x2="21" y2="54"/><line x1="34" y1="46" x2="31" y2="54"/><line x1="44" y1="46" x2="41" y2="54"/></g></svg>',
snow: '<svg viewBox="0 0 64 64" fill="none"><path d="M18 38a10 10 0 0 1 1.8-19.8A13 13 0 0 1 45 20.5 9.5 9.5 0 0 1 45.5 39H20z" fill="#C6D5E6"/><g fill="#EAF4FF"><circle cx="24" cy="49" r="2.6"/><circle cx="34" cy="54" r="2.6"/><circle cx="44" cy="48" r="2.6"/></g></svg>',
storm: '<svg viewBox="0 0 64 64" fill="none"><path d="M18 36a10 10 0 0 1 1.8-19.8A13 13 0 0 1 45 18.5 9.5 9.5 0 0 1 45.5 37H20z" fill="#B4C6DA"/><path d="M33 38l-8 12h6l-3 10 11-14h-6l4-8z" fill="#FFD166"/></svg>'
};
function drawStars() {
var svg = document.querySelector(".stars");
var w = window.innerWidth, h = window.innerHeight;
var frag = "";
for (var i = 0; i < 70; i++) {
var x = (Math.random() * w).toFixed(1);
var y = (Math.random() * h).toFixed(1);
var r = (Math.random() * 1.1 + 0.3).toFixed(2);
var o = (Math.random() * 0.5 + 0.15).toFixed(2);
frag += '<circle cx="' + x + '" cy="' + y + '" r="' + r + '" fill="#fff" opacity="' + o + '"/>';
}
svg.innerHTML = frag;
}
drawStars();
function fmtDate(iso) {
var parts = iso.split("-");
var d = new Date(Date.UTC(+parts[0], +parts[1] - 1, +parts[2]));
return d.toLocaleDateString("en-US", {
weekday: "long", year: "numeric", month: "long", day: "numeric", timeZone: "UTC"
});
}
function showError(sub) {
var state = document.getElementById("state");
state.innerHTML =
'<svg class="error-icon" viewBox="0 0 64 64" fill="none">' +
'<circle cx="32" cy="32" r="28" stroke="#FF8A8A" stroke-width="3"/>' +
'<line x1="32" y1="18" x2="32" y2="36" stroke="#FF8A8A" stroke-width="4" stroke-linecap="round"/>' +
'<circle cx="32" cy="45" r="2.8" fill="#FF8A8A"/></svg>' +
'<div class="msg">Weather data could not be loaded</div>' +
'<div class="sub"></div>';
state.querySelector(".sub").textContent = sub || "Please try again later.";
state.style.display = "";
document.getElementById("content").style.display = "none";
}
function drawChart(temps, hours) {
var svg = document.getElementById("chart");
var W = 856, H = 210, padT = 26, padB = 30, padL = 18, padR = 18;
var min = Math.min.apply(null, temps);
var max = Math.max.apply(null, temps);
var span = max - min || 1;
var n = temps.length;
function px(i) { return padL + (i / (n - 1)) * (W - padL - padR); }
function py(t) { return padT + (1 - (t - min) / span) * (H - padT - padB); }
var line = "", area = "";
for (var i = 0; i < n; i++) {
var x = px(i).toFixed(1), y = py(temps[i]).toFixed(1);
line += (i === 0 ? "M" : "L") + x + "," + y;
}
area = line + "L" + px(n - 1).toFixed(1) + "," + (H - padB + 6) +
"L" + px(0).toFixed(1) + "," + (H - padB + 6) + "Z";
var iMax = temps.indexOf(max), iMin = temps.indexOf(min);
var s = '<defs><linearGradient id="ag" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0%" stop-color="#7ec8ff" stop-opacity="0.35"/>' +
'<stop offset="100%" stop-color="#7ec8ff" stop-opacity="0"/></linearGradient></defs>';
s += '<path d="' + area + '" fill="url(#ag)"/>';
s += '<path d="' + line + '" fill="none" stroke="#7ec8ff" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"/>';
[[iMax, "#ffc470"], [iMin, "#7ec8ff"]].forEach(function (m) {
var i = m[0], c = m[1];
var x = px(i), y = py(temps[i]);
s += '<circle cx="' + x.toFixed(1) + '" cy="' + y.toFixed(1) + '" r="4.5" fill="' + c + '" stroke="#0e1a2e" stroke-width="2"/>';
var ty = y - 10 < 14 ? y + 20 : y - 10;
var anchor = i < 2 ? "start" : (i > n - 3 ? "end" : "middle");
s += '<text x="' + x.toFixed(1) + '" y="' + ty.toFixed(1) + '" text-anchor="' + anchor +
'" font-size="13" font-weight="600" fill="' + c + '" font-family="inherit">' +
Math.round(temps[i]) + '°</text>';
});
for (var k = 0; k < n; k += 3) {
s += '<text x="' + px(k).toFixed(1) + '" y="' + (H - 8) + '" text-anchor="middle" font-size="11" fill="#9db2c9" font-family="inherit">' + hours[k] + '</text>';
}
svg.innerHTML = s;
}
function render(data) {
var daily = data.daily, hourly = data.hourly;
if (!daily || !daily.time || !daily.time.length ||
!hourly || !hourly.time || !hourly.time.length) {
throw new Error("empty");
}
var tmax = daily.temperature_2m_max[0];
var tmin = daily.temperature_2m_min[0];
var code = daily.weather_code[0];
if (tmax == null || tmin == null) throw new Error("empty");
var wmo = WMO[code] || ["Unknown conditions", "cloud"];
document.getElementById("name").textContent = name;
document.getElementById("date").textContent = fmtDate(date);
document.getElementById("coords").textContent =
Math.abs(lat).toFixed(2) + "°" + (lat >= 0 ? "N" : "S") + " · " +
Math.abs(lon).toFixed(2) + "°" + (lon >= 0 ? "E" : "W");
document.getElementById("cond").textContent = wmo[0];
document.getElementById("icon").innerHTML = ICONS[wmo[1]];
document.getElementById("tmax").textContent = Math.round(tmax) + "°";
document.getElementById("tmin").textContent = Math.round(tmin) + "°";
var temps = [], hourLabels = [];
for (var i = 0; i < hourly.time.length; i++) {
if (hourly.time[i].slice(0, 10) === date && hourly.temperature_2m[i] != null) {
temps.push(hourly.temperature_2m[i]);
hourLabels.push(hourly.time[i].slice(11, 16));
}
}
if (temps.length < 2) throw new Error("empty");
drawChart(temps, hourLabels);
var hoursEl = document.getElementById("hours");
var frag = document.createDocumentFragment();
for (var j = 0; j < temps.length; j++) {
var cell = document.createElement("div");
cell.className = "hour";
var h = document.createElement("div");
h.className = "h";
h.textContent = hourLabels[j];
var t = document.createElement("div");
t.className = "t";
t.textContent = Math.round(temps[j]) + "°";
cell.appendChild(h);
cell.appendChild(t);
frag.appendChild(cell);
}
hoursEl.appendChild(frag);
document.getElementById("state").style.display = "none";
document.getElementById("content").style.display = "";
}
var endpoint = date < todayUTC ? "/api/om/archive" : "/api/om/forecast";
var qs = 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
});
fetch(endpoint + "?" + qs.toString())
.then(function (res) {
if (!res.ok) throw new Error("HTTP " + res.status);
return res.json();
})
.then(render)
.catch(function (err) {
showError("Could not fetch weather for " + name + " on " + date + ".");
});
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 15,775 | html / css / js | 1,333 / 4,416 / 10,026 |
|---|---|---|---|
| dom nodes | 35 | dom depth | 10 |
| css rules | 37 | js present | yes |
| brightness | 45.1 | contrast | 16.8 |
| colorfulness | 17.5 | whitespace | 59.5% |
This slot's telemetry
| prompt tokens | 2 | completion tokens | 7,765 |
|---|---|---|---|
| total tokens | 7,767 | wall | 83.5 s |
| cost | — | request id | — |
config.json612 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "claude-fable-5-thinking-eff-medium--cli--cursor-xl--dev",
"effort": "medium",
"family": "claude",
"m": {
"min": 2,
"q": 2
},
"model_id": "claude-fable-5-thinking",
"protocol": "cli",
"served_model": "claude-fable-5-thinking-medium",
"telemetry": {
"completion_tokens": 23240,
"cost_usd": null,
"prompt_tokens": 8,
"total_tokens": 23248,
"wall_ms": 273682
},
"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-fable-5-thinking-eff-medium--cli--cursor-xl--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-08-13T13:02:41.344228+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T13:01:53.055621+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-13T13:04:08.540465+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T13:02:44.996884+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-13T13:05:45.397345+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T13:04:11.919812+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-13T13:06:37.429387+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-13T13:05:49.052712+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
}
}
}