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
claude-fable-5-thinking @medium · cursor-xl P-q slot 0 screenshot

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 total15,775html / css / js1,333 / 4,416 / 10,026
dom nodes35dom depth10
css rules37js presentyes
brightness45.1contrast16.8
colorfulness17.5whitespace59.5%

This slot's telemetry

prompt tokens2completion tokens7,765
total tokens7,767wall83.5 s
costrequest 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
    }
  }
}