claude-fable-5 @ low · cursor-xl

cursor-xllow
config
claude-fable-5-eff-low--cli--cursor-xl--dev
batch
2026-07-19--unified
transport
cursor-agent-cli-isolated-home
protocol
cli · plan
served model
claude-fable-5-low
captured
Jul 18, 2026, 11:54 AM · N=2
all efforts & arms of this model →
variant
live
slot 0 · P-q · sandboxed iframe
claude-fable-5 @low · 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 tempmismatchshown: 13.405
  • min tempmismatchshown: 52.52
  • hourlymatchcoverage 8/24 · 8 match · 0 mismatch · 16 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>
  :root {
    --bg1: #0f1c3f;
    --bg2: #1b3a6b;
    --card-glass: rgba(255,255,255,0.08);
    --card-border: rgba(255,255,255,0.16);
    --text: #f2f6ff;
    --text-dim: rgba(242,246,255,0.62);
    --accent: #7fd4ff;
    --accent-warm: #ffc38a;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text);
    background: radial-gradient(1200px 700px at 20% -10%, #2b5aa0 0%, transparent 55%),
                radial-gradient(1000px 600px at 90% 110%, #143a5e 0%, transparent 60%),
                linear-gradient(160deg, var(--bg1), var(--bg2));
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .stars {
    position: fixed; inset: 0; pointer-events: none; opacity: .5;
    background-image:
      radial-gradient(1.5px 1.5px at 12% 20%, #fff, transparent),
      radial-gradient(1px 1px at 30% 65%, #cfe4ff, transparent),
      radial-gradient(1.5px 1.5px at 55% 15%, #fff, transparent),
      radial-gradient(1px 1px at 72% 45%, #cfe4ff, transparent),
      radial-gradient(1.5px 1.5px at 88% 22%, #fff, transparent),
      radial-gradient(1px 1px at 40% 85%, #cfe4ff, transparent),
      radial-gradient(1px 1px at 65% 78%, #fff, transparent),
      radial-gradient(1.5px 1.5px at 8% 80%, #cfe4ff, transparent);
  }
  .card {
    width: 960px;
    border-radius: 28px;
    background: var(--card-glass);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 30px 80px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12);
    padding: 44px 52px 40px;
    position: relative;
    overflow: hidden;
  }
  .card::before {
    content: "";
    position: absolute; top: -140px; right: -120px;
    width: 380px; height: 380px; border-radius: 50%;
    background: radial-gradient(circle, rgba(127,212,255,0.20), transparent 70%);
    pointer-events: none;
  }
  header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 30px;
  }
  .loc {
    font-size: 38px; font-weight: 700; letter-spacing: -0.5px;
    display: flex; align-items: center; gap: 12px;
  }
  .loc svg { flex: none; opacity: .85; }
  .date {
    margin-top: 8px; font-size: 16px; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 2.5px; font-weight: 500;
  }
  .coords { font-size: 13px; color: var(--text-dim); text-align: right; margin-top: 8px; letter-spacing: .5px; }
  .main {
    display: flex; align-items: center; gap: 48px; margin-bottom: 36px;
  }
  .icon-wrap { width: 150px; height: 150px; flex: none; }
  .icon-wrap svg { width: 100%; height: 100%; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.35)); }
  .cond { font-size: 26px; font-weight: 600; margin-bottom: 10px; }
  .temps { display: flex; gap: 36px; align-items: baseline; }
  .temp-block .lbl {
    font-size: 12px; text-transform: uppercase; letter-spacing: 2px;
    color: var(--text-dim); margin-bottom: 4px;
  }
  .temp-block .val { font-size: 64px; font-weight: 200; letter-spacing: -2px; line-height: 1; }
  .temp-block .val sup { font-size: 26px; font-weight: 400; vertical-align: super; }
  .val.hi { color: var(--accent-warm); }
  .val.lo { color: var(--accent); }
  .section-title {
    font-size: 12px; text-transform: uppercase; letter-spacing: 2.5px;
    color: var(--text-dim); margin-bottom: 16px; font-weight: 600;
  }
  .hourly {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 26px;
  }
  #chart { width: 100%; height: 200px; display: block; }
  .status {
    text-align: center; padding: 110px 0; font-size: 20px; color: var(--text-dim);
  }
  .status.error { color: #ff9d9d; }
  .spinner {
    width: 36px; height: 36px; margin: 0 auto 18px;
    border: 3px solid rgba(255,255,255,0.15); border-top-color: var(--accent);
    border-radius: 50%; animation: spin 0.9s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .hidden { display: none; }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .content { animation: fadeUp .5s ease both; }
</style>
</head>
<body>
<div class="stars"></div>
<div class="card">
  <div id="loading" class="status">
    <div class="spinner"></div>
    Loading weather…
  </div>
  <div id="error" class="status error hidden">Weather data could not be loaded.</div>
  <div id="content" class="content hidden">
    <header>
      <div>
        <div class="loc">
          <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
            <path d="M12 21s7-6.1 7-11a7 7 0 1 0-14 0c0 4.9 7 11 7 11z"/><circle cx="12" cy="10" r="2.6"/>
          </svg>
          <span id="name"></span>
        </div>
        <div class="date" id="dateLabel"></div>
      </div>
      <div class="coords" id="coords"></div>
    </header>
    <div class="main">
      <div class="icon-wrap" id="icon"></div>
      <div>
        <div class="cond" id="cond"></div>
        <div class="temps">
          <div class="temp-block">
            <div class="lbl">High</div>
            <div class="val hi"><span id="tmax"></span><sup>°C</sup></div>
          </div>
          <div class="temp-block">
            <div class="lbl">Low</div>
            <div class="val lo"><span id="tmin"></span><sup>°C</sup></div>
          </div>
        </div>
      </div>
    </div>
    <div class="hourly">
      <div class="section-title">Hourly Temperature (°C)</div>
      <svg id="chart" viewBox="0 0 856 200" preserveAspectRatio="none"></svg>
    </div>
  </div>
</div>
<script>
(function () {
  const qs = new URLSearchParams(location.search);
  const lat = parseFloat(qs.get('lat')) || 52.52;
  const lon = parseFloat(qs.get('lon')) || 13.405;
  const name = qs.get('name') || 'Berlin';
  const todayUTC = new Date().toISOString().slice(0, 10);
  const date = /^\d{4}-\d{2}-\d{2}$/.test(qs.get('date') || '') ? qs.get('date') : todayUTC;

  const 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']
  };

  const ICONS = {
    sun: '<svg viewBox="0 0 64 64"><circle cx="32" cy="32" r="13" fill="#ffd66b"/><g stroke="#ffd66b" stroke-width="3.4" 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>',
    suncloud: '<svg viewBox="0 0 64 64"><circle cx="24" cy="24" r="10" fill="#ffd66b"/><path d="M20 46a9 9 0 0 1 1.5-17.9A12 12 0 0 1 44.5 30 8 8 0 0 1 46 46z" fill="#e8effa"/></svg>',
    cloud: '<svg viewBox="0 0 64 64"><path d="M18 48a10 10 0 0 1 1.7-19.9A13 13 0 0 1 45 30.5 9 9 0 0 1 47 48z" fill="#dfe8f5"/></svg>',
    fog: '<svg viewBox="0 0 64 64"><path d="M18 38a10 10 0 0 1 1.7-19.9A13 13 0 0 1 45 20.5 9 9 0 0 1 47 38z" fill="#dfe8f5"/><g stroke="#b9c8de" stroke-width="3.2" stroke-linecap="round"><line x1="14" y1="46" x2="50" y2="46"/><line x1="20" y1="53" x2="44" y2="53"/></g></svg>',
    rain: '<svg viewBox="0 0 64 64"><path d="M18 40a10 10 0 0 1 1.7-19.9A13 13 0 0 1 45 22.5 9 9 0 0 1 47 40z" fill="#dfe8f5"/><g stroke="#7fd4ff" stroke-width="3.2" stroke-linecap="round"><line x1="22" y1="46" x2="19" y2="55"/><line x1="33" y1="46" x2="30" y2="55"/><line x1="44" y1="46" x2="41" y2="55"/></g></svg>',
    snow: '<svg viewBox="0 0 64 64"><path d="M18 40a10 10 0 0 1 1.7-19.9A13 13 0 0 1 45 22.5 9 9 0 0 1 47 40z" fill="#dfe8f5"/><g fill="#eaf4ff"><circle cx="22" cy="50" r="2.6"/><circle cx="33" cy="54" r="2.6"/><circle cx="44" cy="50" r="2.6"/></g></svg>',
    storm: '<svg viewBox="0 0 64 64"><path d="M18 38a10 10 0 0 1 1.7-19.9A13 13 0 0 1 45 20.5 9 9 0 0 1 47 38z" fill="#dfe8f5"/><path d="M33 40 25 52h7l-3 10 11-14h-7l4-8z" fill="#ffd66b"/></svg>'
  };

  const $ = id => document.getElementById(id);

  function drawChart(times, temps) {
    const svg = $('chart');
    const W = 856, H = 200, padL = 40, padR = 12, padT = 20, padB = 30;
    const n = temps.length;
    if (!n) { svg.innerHTML = ''; return; }
    const min = Math.min(...temps), max = Math.max(...temps);
    const span = (max - min) || 1;
    const x = i => padL + (i / (n - 1 || 1)) * (W - padL - padR);
    const y = t => padT + (1 - (t - min) / span) * (H - padT - padB);
    let d = '', area = '';
    temps.forEach((t, i) => {
      const px = x(i).toFixed(1), py = y(t).toFixed(1);
      d += (i ? ' L' : 'M') + px + ' ' + py;
    });
    area = d + ` L${x(n - 1).toFixed(1)} ${H - padB} L${x(0).toFixed(1)} ${H - padB} Z`;
    let el = `<defs><linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="rgba(127,212,255,0.35)"/><stop offset="1" stop-color="rgba(127,212,255,0)"/>
      </linearGradient></defs>`;
    // gridlines + y labels
    for (let g = 0; g <= 3; g++) {
      const tv = min + span * g / 3, gy = y(tv);
      el += `<line x1="${padL}" y1="${gy}" x2="${W - padR}" y2="${gy}" stroke="rgba(255,255,255,0.08)"/>`;
      el += `<text x="${padL - 8}" y="${gy + 4}" text-anchor="end" font-size="11" fill="rgba(242,246,255,0.55)">${tv.toFixed(0)}°</text>`;
    }
    el += `<path d="${area}" fill="url(#g)"/>`;
    el += `<path d="${d}" fill="none" stroke="#7fd4ff" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"/>`;
    temps.forEach((t, i) => {
      if (i % 3 === 0) {
        el += `<circle cx="${x(i)}" cy="${y(t)}" r="3" fill="#7fd4ff"/>`;
        el += `<text x="${x(i)}" y="${y(t) - 9}" text-anchor="middle" font-size="11" fill="#f2f6ff">${Math.round(t)}°</text>`;
        const hh = times[i].slice(11, 16);
        el += `<text x="${x(i)}" y="${H - 8}" text-anchor="middle" font-size="11" fill="rgba(242,246,255,0.55)">${hh}</text>`;
      }
    });
    svg.innerHTML = el;
  }

  function fail() {
    $('loading').classList.add('hidden');
    $('error').classList.remove('hidden');
  }

  const endpoint = date < todayUTC ? '/api/om/archive' : '/api/om/forecast';
  const params = 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 + '?' + params)
    .then(r => { if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); })
    .then(data => {
      const d = data.daily, h = data.hourly;
      if (!d || !d.temperature_2m_max || d.temperature_2m_max[0] == null) throw new Error('no data');
      $('name').textContent = name;
      $('dateLabel').textContent = new Date(date + 'T00:00:00Z').toLocaleDateString('en-US', {
        weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC'
      });
      $('coords').textContent = lat.toFixed(3) + '°, ' + lon.toFixed(3) + '° · UTC';
      $('tmax').textContent = Math.round(d.temperature_2m_max[0]);
      $('tmin').textContent = Math.round(d.temperature_2m_min[0]);
      const code = d.weather_code ? d.weather_code[0] : null;
      const [label, iconKey] = WMO[code] || ['Unknown conditions', 'cloud'];
      $('cond').textContent = label;
      $('icon').innerHTML = ICONS[iconKey];
      const times = [], temps = [];
      if (h && h.time) {
        h.time.forEach((t, i) => {
          if (t.slice(0, 10) === date && h.temperature_2m[i] != null) {
            times.push(t); temps.push(h.temperature_2m[i]);
          }
        });
      }
      drawChart(times, temps);
      $('loading').classList.add('hidden');
      $('content').classList.remove('hidden');
    })
    .catch(fail);
})();
</script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total13,016html / css / js1,650 / 4,300 / 7,066
dom nodes41dom depth10
css rules35js presentyes
brightness57.6contrast20.2
colorfulness27.0whitespace68.9%

This slot's telemetry

prompt tokens2completion tokens6,573
total tokens6,575wall71.6 s
cost—request id—
config.json576 B
{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_NONE",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "claude-fable-5-eff-low--cli--cursor-xl--dev",
  "effort": "low",
  "family": "claude",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "claude-fable-5",
  "protocol": "cli",
  "served_model": "claude-fable-5-low",
  "telemetry": {
    "completion_tokens": 18288,
    "cost_usd": null,
    "prompt_tokens": 8,
    "total_tokens": 18296,
    "wall_ms": 210669
  },
  "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-eff-low--cli--cursor-xl--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-08-13T12:45:06.389489+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T12:43:54.748288+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-13T12:45:48.428899+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T12:45:10.017857+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-13T12:46:28.799077+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T12:45:52.013941+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-13T12:47:36.264063+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T12:46:32.428176+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
    }
  }
}