claude-fable-5-thinking @ medium · cursor
cursormedium
- config
- claude-fable-5-thinking-eff-medium--cli--cursor--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 tempmismatchshown: 52.52
- min tempmismatchshown: 13.405
- 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: #0e1428;
--bg-2: #1b2745;
--card-glass: rgba(255, 255, 255, 0.06);
--card-border: rgba(255, 255, 255, 0.12);
--text-1: #f4f7ff;
--text-2: #a8b3d1;
--text-3: #6b7699;
--accent: #7fb8ff;
--accent-warm: #ffb36b;
--radius: 24px;
font-size: 16px;
}
* { 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;
background:
radial-gradient(1100px 700px at 15% -10%, #2b3f77 0%, transparent 55%),
radial-gradient(900px 600px at 95% 110%, #23345e 0%, transparent 55%),
linear-gradient(160deg, var(--bg-1), var(--bg-2));
color: var(--text-1);
display: flex;
align-items: center;
justify-content: center;
min-height: 800px;
overflow: hidden;
}
.stars {
position: fixed;
inset: 0;
pointer-events: none;
opacity: 0.55;
}
.card {
position: relative;
width: 980px;
border-radius: var(--radius);
background: var(--card-glass);
border: 1px solid var(--card-border);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow:
0 30px 80px rgba(3, 8, 22, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
padding: 44px 52px 40px;
animation: rise 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes rise {
from { opacity: 0; transform: translateY(22px) scale(0.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
}
.place h1 {
font-size: 2.6rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.1;
}
.place .date {
margin-top: 8px;
font-size: 1.05rem;
color: var(--text-2);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.place .coords {
margin-top: 6px;
font-size: 0.8rem;
color: var(--text-3);
letter-spacing: 0.05em;
font-variant-numeric: tabular-nums;
}
.hero {
display: flex;
align-items: center;
gap: 26px;
}
.hero .icon { width: 120px; height: 120px; flex: none; }
.hero .temps { text-align: right; }
.hero .hi {
font-size: 3.6rem;
font-weight: 300;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.hero .hi .unit { font-size: 1.6rem; color: var(--text-2); vertical-align: 18px; margin-left: 2px; }
.hero .lo {
margin-top: 6px;
font-size: 1.25rem;
color: var(--text-2);
font-variant-numeric: tabular-nums;
}
.hero .cond {
margin-top: 10px;
font-size: 1rem;
color: var(--accent);
letter-spacing: 0.04em;
}
.divider {
margin: 34px 0 26px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
}
.section-label {
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: 18px;
}
.chart-wrap { position: relative; }
svg.chart { display: block; width: 100%; height: 240px; overflow: visible; }
.hours {
display: grid;
grid-template-columns: repeat(24, 1fr);
margin-top: 10px;
}
.hours span {
text-align: center;
font-size: 0.66rem;
color: var(--text-3);
font-variant-numeric: tabular-nums;
}
.state {
text-align: center;
padding: 90px 0;
color: var(--text-2);
font-size: 1.1rem;
letter-spacing: 0.03em;
}
.state.error { color: #ff9d9d; }
.state .sub { margin-top: 10px; font-size: 0.85rem; color: var(--text-3); }
.spinner {
width: 34px; height: 34px;
margin: 0 auto 20px;
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); } }
.hidden { display: none !important; }
</style>
</head>
<body>
<canvas class="stars" id="stars"></canvas>
<div class="card">
<div id="loading" class="state">
<div class="spinner"></div>
Loading weather data…
</div>
<div id="error" class="state error hidden">
<div style="font-size:2.2rem; margin-bottom:14px;">⚠</div>
Weather data could not be loaded.
<div class="sub" id="error-detail"></div>
</div>
<div id="content" class="hidden">
<div class="top">
<div class="place">
<h1 id="loc-name">—</h1>
<div class="date" id="loc-date">—</div>
<div class="coords" id="loc-coords"></div>
</div>
<div class="hero">
<div class="icon" id="wx-icon"></div>
<div class="temps">
<div class="hi"><span id="t-max">—</span><span class="unit">°C</span></div>
<div class="lo">Low <span id="t-min">—</span>°C</div>
<div class="cond" id="wx-cond">—</div>
</div>
</div>
</div>
<div class="divider"></div>
<div class="section-label">Hourly temperature · UTC</div>
<div class="chart-wrap">
<svg class="chart" id="chart" viewBox="0 0 876 240" preserveAspectRatio="none"></svg>
<div class="hours" id="hour-labels"></div>
</div>
</div>
</div>
<script>
(function () {
"use strict";
/* ---------- starfield background ---------- */
var cv = document.getElementById("stars");
var ctx = cv.getContext("2d");
cv.width = window.innerWidth || 1280;
cv.height = window.innerHeight || 800;
for (var i = 0; i < 130; i++) {
var x = Math.random() * cv.width, y = Math.random() * cv.height;
var r = Math.random() * 1.2 + 0.2;
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2);
ctx.fillStyle = "rgba(255,255,255," + (Math.random() * 0.5 + 0.1).toFixed(2) + ")";
ctx.fill();
}
/* ---------- params ---------- */
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 isPast = dateStr < todayUTC();
var endpoint = isPast ? "/api/om/archive" : "/api/om/forecast";
/* ---------- weather code map ---------- */
var WMO = {
0: ["Clear sky", "sun"], 1: ["Mainly clear", "sun"], 2: ["Partly cloudy", "suncloud"],
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 100 100"><circle cx="50" cy="50" r="20" fill="#ffd166"/><g stroke="#ffd166" stroke-width="5" stroke-linecap="round">' +
'<line x1="50" y1="10" x2="50" y2="22"/><line x1="50" y1="78" x2="50" y2="90"/><line x1="10" y1="50" x2="22" y2="50"/><line x1="78" y1="50" x2="90" y2="50"/>' +
'<line x1="22" y1="22" x2="30" y2="30"/><line x1="70" y1="70" x2="78" y2="78"/><line x1="22" y1="78" x2="30" y2="70"/><line x1="70" y1="30" x2="78" y2="22"/></g></svg>',
suncloud: '<svg viewBox="0 0 100 100"><circle cx="38" cy="38" r="16" fill="#ffd166"/>' +
'<path d="M30 72a14 14 0 0 1 2-27.8A20 20 0 0 1 70 48a12 12 0 0 1 2 24z" fill="#cdd8ef"/></svg>',
cloud: '<svg viewBox="0 0 100 100"><path d="M28 74a16 16 0 0 1 2-31.8A22 22 0 0 1 73 47a13 13 0 0 1 3 27z" fill="#cdd8ef"/></svg>',
fog: '<svg viewBox="0 0 100 100"><path d="M28 58a16 16 0 0 1 2-31.8A22 22 0 0 1 73 31a13 13 0 0 1 3 27z" fill="#cdd8ef"/>' +
'<g stroke="#8fa3c8" stroke-width="5" stroke-linecap="round"><line x1="24" y1="72" x2="76" y2="72"/><line x1="32" y1="84" x2="68" y2="84"/></g></svg>',
rain: '<svg viewBox="0 0 100 100"><path d="M28 62a16 16 0 0 1 2-31.8A22 22 0 0 1 73 35a13 13 0 0 1 3 27z" fill="#cdd8ef"/>' +
'<g stroke="#7fb8ff" stroke-width="5" stroke-linecap="round"><line x1="36" y1="72" x2="32" y2="86"/><line x1="52" y1="72" x2="48" y2="86"/><line x1="68" y1="72" x2="64" y2="86"/></g></svg>',
snow: '<svg viewBox="0 0 100 100"><path d="M28 62a16 16 0 0 1 2-31.8A22 22 0 0 1 73 35a13 13 0 0 1 3 27z" fill="#cdd8ef"/>' +
'<g fill="#eaf2ff"><circle cx="36" cy="78" r="4"/><circle cx="52" cy="86" r="4"/><circle cx="68" cy="78" r="4"/></g></svg>',
storm: '<svg viewBox="0 0 100 100"><path d="M28 58a16 16 0 0 1 2-31.8A22 22 0 0 1 73 31a13 13 0 0 1 3 27z" fill="#cdd8ef"/>' +
'<polygon points="54,60 40,80 50,80 44,96 62,72 52,72" fill="#ffd166"/></svg>'
};
/* ---------- dom refs ---------- */
function $(id) { return document.getElementById(id); }
function showError(detail) {
$("loading").classList.add("hidden");
$("content").classList.add("hidden");
$("error").classList.remove("hidden");
$("error-detail").textContent = detail || "";
}
function fmtDate(s) {
var p = s.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 fmt1(v) { return (Math.round(v * 10) / 10).toFixed(1).replace(/\.0$/, ""); }
/* ---------- chart ---------- */
function drawChart(hours, temps) {
var W = 876, H = 240, padT = 28, padB = 26, padX = 14;
var svg = $("chart");
var min = Math.min.apply(null, temps), max = Math.max.apply(null, temps);
var span = (max - min) || 1;
var n = temps.length;
function px(i) { return padX + (i / (n - 1)) * (W - 2 * padX); }
function py(t) { return padT + (1 - (t - min) / span) * (H - padT - padB); }
var pts = temps.map(function (t, i) { return [px(i), py(t)]; });
// smooth path (catmull-rom -> bezier)
var d = "M" + pts[0][0].toFixed(1) + "," + pts[0][1].toFixed(1);
for (var i = 0; i < n - 1; i++) {
var p0 = pts[Math.max(0, i - 1)], p1 = pts[i], p2 = pts[i + 1], p3 = pts[Math.min(n - 1, i + 2)];
var c1x = p1[0] + (p2[0] - p0[0]) / 6, c1y = p1[1] + (p2[1] - p0[1]) / 6;
var c2x = p2[0] - (p3[0] - p1[0]) / 6, c2y = p2[1] - (p3[1] - p1[1]) / 6;
d += " C" + c1x.toFixed(1) + "," + c1y.toFixed(1) + " " + c2x.toFixed(1) + "," + c2y.toFixed(1) + " " + p2[0].toFixed(1) + "," + p2[1].toFixed(1);
}
var area = d + " L" + pts[n - 1][0].toFixed(1) + "," + (H - 4) + " L" + pts[0][0].toFixed(1) + "," + (H - 4) + " Z";
var html =
'<defs>' +
'<linearGradient id="fillg" x1="0" y1="0" x2="0" y2="1">' +
'<stop offset="0%" stop-color="#7fb8ff" stop-opacity="0.35"/>' +
'<stop offset="100%" stop-color="#7fb8ff" stop-opacity="0"/>' +
'</linearGradient>' +
'<linearGradient id="lineg" x1="0" y1="0" x2="1" y2="0">' +
'<stop offset="0%" stop-color="#7fb8ff"/>' +
'<stop offset="100%" stop-color="#ffb36b"/>' +
'</linearGradient>' +
'</defs>';
// grid lines
[0.25, 0.5, 0.75].forEach(function (f) {
var y = padT + f * (H - padT - padB);
html += '<line x1="' + padX + '" y1="' + y + '" x2="' + (W - padX) + '" y2="' + y + '" stroke="rgba(255,255,255,0.06)" stroke-width="1"/>';
});
html += '<path d="' + area + '" fill="url(#fillg)"/>';
html += '<path d="' + d + '" fill="none" stroke="url(#lineg)" stroke-width="2.5" stroke-linecap="round"/>';
// dots + temp labels (every 3rd hour + extremes)
var iMax = temps.indexOf(max), iMin = temps.indexOf(min);
for (var j = 0; j < n; j++) {
var show = (j % 3 === 0) || j === iMax || j === iMin;
if (!show) continue;
var hot = j === iMax, cold = j === iMin;
var col = hot ? "#ffb36b" : (cold ? "#7fb8ff" : "rgba(255,255,255,0.85)");
html += '<circle cx="' + pts[j][0].toFixed(1) + '" cy="' + pts[j][1].toFixed(1) + '" r="' + (hot || cold ? 4 : 2.5) + '" fill="' + col + '"/>';
var ly = pts[j][1] - 10;
html += '<text x="' + pts[j][0].toFixed(1) + '" y="' + ly.toFixed(1) + '" text-anchor="middle" font-size="11" fill="' +
(hot || cold ? col : "rgba(220,228,248,0.75)") + '" font-family="inherit" font-weight="' + (hot || cold ? '600' : '400') + '">' +
fmt1(temps[j]) + '°</text>';
}
svg.innerHTML = html;
// hour labels
var lbl = "";
for (var h = 0; h < n; h++) {
var hh = hours[h] != null ? hours[h] : h;
lbl += "<span>" + (h % 3 === 0 ? (String(hh).padStart(2, "0")) : "·") + "</span>";
}
$("hour-labels").innerHTML = lbl;
}
/* ---------- render ---------- */
function render(data) {
var daily = data.daily, hourly = data.hourly;
if (!daily || !daily.time || !daily.time.length || !hourly || !hourly.temperature_2m) {
showError("The API response did not contain the expected data.");
return;
}
var tmax = daily.temperature_2m_max && daily.temperature_2m_max[0];
var tmin = daily.temperature_2m_min && daily.temperature_2m_min[0];
var code = daily.weather_code && daily.weather_code[0];
if (tmax == null || tmin == null) {
showError("No temperature data is available for this date.");
return;
}
var temps = [], hoursOfDay = [];
for (var i = 0; i < hourly.time.length; i++) {
if (hourly.time[i].slice(0, 10) === dateStr && hourly.temperature_2m[i] != null) {
temps.push(hourly.temperature_2m[i]);
hoursOfDay.push(parseInt(hourly.time[i].slice(11, 13), 10));
}
}
var wmo = WMO[code] || ["Unknown conditions", "cloud"];
$("loc-name").textContent = name;
$("loc-date").textContent = fmtDate(dateStr);
$("loc-coords").textContent = lat.toFixed(3) + "°, " + lon.toFixed(3) + "°";
$("t-max").textContent = fmt1(tmax);
$("t-min").textContent = fmt1(tmin);
$("wx-cond").textContent = wmo[0];
$("wx-icon").innerHTML = ICONS[wmo[1]] || ICONS.cloud;
if (temps.length >= 2) {
drawChart(hoursOfDay, temps);
} else {
$("chart").outerHTML = '<div class="state" style="padding:40px 0;">No hourly data available for this date.</div>';
$("hour-labels").innerHTML = "";
}
$("loading").classList.add("hidden");
$("content").classList.remove("hidden");
}
/* ---------- fetch ---------- */
var url = endpoint +
"?latitude=" + encodeURIComponent(lat) +
"&longitude=" + encodeURIComponent(lon) +
"&daily=temperature_2m_max,temperature_2m_min,weather_code" +
"&hourly=temperature_2m" +
"&timezone=UTC" +
"&temperature_unit=celsius" +
"&start_date=" + encodeURIComponent(dateStr) +
"&end_date=" + encodeURIComponent(dateStr);
fetch(url)
.then(function (r) {
if (!r.ok) throw new Error("HTTP " + r.status);
return r.json();
})
.then(function (data) {
if (data && data.error) throw new Error(data.reason || "API error");
render(data);
})
.catch(function (e) {
showError(String(e && e.message ? e.message : e));
});
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 15,998 | html / css / js | 1,466 / 4,003 / 10,529 |
|---|---|---|---|
| dom nodes | 35 | dom depth | 9 |
| css rules | 33 | js present | yes |
| brightness | 42.5 | contrast | 17.2 |
| colorfulness | 17.3 | whitespace | 52.3% |
This slot's telemetry
| prompt tokens | 2 | completion tokens | 7,950 |
|---|---|---|---|
| total tokens | 7,952 | wall | 80.6 s |
| cost | — | request id | — |
config.json609 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "claude-fable-5-thinking-eff-medium--cli--cursor--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": 23436,
"cost_usd": null,
"prompt_tokens": 8,
"total_tokens": 23444,
"wall_ms": 252207
},
"transport": "cursor-agent-cli-isolated-home",
"vendor_sanction_ref": null
}send-log2.5 KB
{
"N": 2,
"batch_id": "2026-08-13--cursor-s1",
"config_id": "claude-fable-5-thinking-eff-medium--cli--cursor--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-08-12T21:31:03.158428+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T21:30:19.071737+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-12T21:32:27.506873+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T21:31:06.863826+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-12T21:33:56.724088+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T21:32:30.861501+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-12T21:34:41.824121+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-08-12T21:34:00.201691+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
}
}
}