claude-fable-5-1 @ medium · CC

CCmedium

config: claude-fable-5-1-eff-medium--cli--claude-code--dev
batch: 2026-07-19--unified
transport: claude-code-cli-headless
protocol: cli · plan
served model: claude-fable-5-1
captured: Jul 18, 2026, 11:54 AM · N=2

variant

live

slot 0 · P-q · sandboxed iframe

claude-fable-5-1 @medium · CC 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 tempmatchshown: 25
min tempmatchshown: 16
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, initial-scale=1">
<title>Weather</title>
<style>
  :root {
    --bg-1: #0b1020;
    --bg-2: #141c33;
    --card: rgba(255,255,255,0.06);
    --card-border: rgba(255,255,255,0.12);
    --text: #f2f4fa;
    --muted: #9aa3bd;
    --accent: #ffb86b;
    --accent-2: #7cc4ff;
    --line: rgba(255,255,255,0.08);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text);
    background:
      radial-gradient(1100px 600px at 15% -10%, rgba(124,196,255,0.22), transparent 60%),
      radial-gradient(900px 500px at 95% 110%, rgba(255,184,107,0.18), transparent 60%),
      linear-gradient(160deg, var(--bg-1), var(--bg-2));
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    -webkit-font-smoothing: antialiased;
  }
  .card {
    width: 1120px;
    max-width: 100%;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 28px;
    backdrop-filter: blur(20px);
    box-shadow: 0 30px 80px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
    padding: 44px 48px 40px;
    display: grid;
    grid-template-rows: auto auto;
    gap: 36px;
    position: relative;
    overflow: hidden;
  }
  .card::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 40%);
    pointer-events: none;
  }
  .top {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
  }
  .place { display: flex; flex-direction: column; gap: 10px; }
  .eyebrow {
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
  }
  .name {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
  }
  .date { font-size: 18px; color: var(--muted); }
  .coords { font-size: 12px; color: var(--muted); opacity: 0.7; font-variant-numeric: tabular-nums; }

  .hero {
    display: flex;
    align-items: center;
    gap: 28px;
  }
  .icon { width: 132px; height: 132px; flex: none; filter: drop-shadow(0 12px 30px rgba(0,0,0,0.35)); }
  .temps { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
  .temp-max {
    font-size: 84px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, #fff, #cfd8ee);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .temp-max sup { font-size: 34px; vertical-align: top; top: 10px; position: relative; color: var(--accent); }
  .range {
    display: flex; gap: 18px; font-size: 16px; color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
  .range b { color: var(--text); font-weight: 600; }
  .range .hi b { color: var(--accent); }
  .range .lo b { color: var(--accent-2); }
  .condition {
    margin-top: 4px;
    font-size: 20px;
    font-weight: 500;
    color: var(--text);
  }

  .hourly {
    border-top: 1px solid var(--line);
    padding-top: 28px;
  }
  .hourly-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 14px;
  }
  .hourly-head h2 { font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
  .hourly-head span { font-size: 13px; color: var(--muted); }
  .chart { width: 100%; height: 250px; display: block; }
  .chart text { font-family: inherit; }

  .state {
    text-align: center;
    padding: 80px 20px;
    color: var(--muted);
    font-size: 18px;
  }
  .state.error { color: #ffb4b4; }
  .state .big { font-size: 30px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
  .state.error .big { color: #ff8a8a; }
  .state code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; opacity: 0.8; display: block; margin-top: 14px; }

  @keyframes pulse { 0%,100% { opacity: 0.5 } 50% { opacity: 1 } }
  .loading { animation: pulse 1.4s ease-in-out infinite; }
</style>
</head>
<body>
  <main class="card" id="card">
    <div class="state loading" id="state">
      <div class="big">Loading weather…</div>
      <div id="state-sub"></div>
    </div>
  </main>

<script>
(function () {
  const params = new URLSearchParams(location.search);
  const todayUTC = new Date().toISOString().slice(0, 10);
  const lat = parseFloat(params.get('lat'));
  const lon = parseFloat(params.get('lon'));
  const latitude = Number.isFinite(lat) ? lat : 52.52;
  const longitude = Number.isFinite(lon) ? lon : 13.405;
  const name = (params.get('name') || 'Berlin').trim() || 'Berlin';
  const rawDate = params.get('date');
  const date = /^\d{4}-\d{2}-\d{2}$/.test(rawDate || '') ? rawDate : todayUTC;

  const card = document.getElementById('card');
  const stateEl = document.getElementById('state');
  document.getElementById('state-sub').textContent = name + ' · ' + date;
  document.title = 'Weather · ' + name + ' · ' + date;

  const 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', 'drizzle'], 53: ['Moderate drizzle', 'drizzle'], 55: ['Dense drizzle', 'drizzle'],
    56: ['Light freezing drizzle', 'drizzle'], 57: ['Dense freezing drizzle', 'drizzle'],
    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']
  };

  function icon(kind) {
    const sun = '<circle cx="50" cy="50" r="20" fill="url(#gSun)"/><g stroke="#ffd27a" stroke-width="5" stroke-linecap="round">' +
      [0,45,90,135,180,225,270,315].map(a => { const r = a*Math.PI/180, x1 = 50+Math.cos(r)*30, y1 = 50+Math.sin(r)*30, x2 = 50+Math.cos(r)*40, y2 = 50+Math.sin(r)*40; return `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}"/>`; }).join('') + '</g>';
    const cloud = (x, y, s, fill) => `<g transform="translate(${x} ${y}) scale(${s})"><path d="M25 70 a15 15 0 0 1 3-29.7 A22 22 0 0 1 70 34 a16 16 0 0 1 4 36 z" fill="${fill}"/></g>`;
    const drops = (color) => '<g stroke="' + color + '" stroke-width="5" stroke-linecap="round">' +
      [30,45,60].map((x,i)=>`<line x1="${x}" y1="${78+i*2}" x2="${x-5}" y2="${92+i*2}"/>`).join('') + '</g>';
    const flakes = '<g fill="#e8f3ff">' + [30,47,64].map((x,i)=>`<circle cx="${x}" cy="${85+(i%2)*6}" r="4"/>`).join('') + '</g>';
    const defs = '<defs><radialGradient id="gSun" cx="35%" cy="35%"><stop offset="0" stop-color="#fff2c4"/><stop offset="1" stop-color="#ffb347"/></radialGradient>' +
      '<linearGradient id="gCloud" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ffffff"/><stop offset="1" stop-color="#c7d2e8"/></linearGradient>' +
      '<linearGradient id="gDark" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#b9c4dc"/><stop offset="1" stop-color="#7d8aa8"/></linearGradient></defs>';
    let body;
    switch (kind) {
      case 'sun': body = sun; break;
      case 'partly': body = '<g transform="translate(8 -6) scale(0.8)">' + sun + '</g>' + cloud(8, 12, 1, 'url(#gCloud)'); break;
      case 'cloud': body = cloud(0, 4, 1.1, 'url(#gCloud)'); break;
      case 'fog': body = cloud(0, -6, 1, 'url(#gDark)') + '<g stroke="#dfe7f5" stroke-width="5" stroke-linecap="round" opacity=".9"><line x1="18" y1="76" x2="82" y2="76"/><line x1="28" y1="88" x2="72" y2="88"/></g>'; break;
      case 'drizzle': body = cloud(0, -8, 1, 'url(#gCloud)') + drops('#8fd0ff'); break;
      case 'rain': body = cloud(0, -8, 1, 'url(#gDark)') + drops('#7cc4ff'); break;
      case 'snow': body = cloud(0, -8, 1, 'url(#gCloud)') + flakes; break;
      case 'storm': body = cloud(0, -10, 1, 'url(#gDark)') + '<path d="M52 62 L40 84 H52 L46 100 L64 76 H52 L58 62 Z" fill="#ffd94d"/>'; break;
      default: body = cloud(0, 4, 1.1, 'url(#gCloud)');
    }
    return `<svg class="icon" viewBox="0 0 100 100" aria-hidden="true">${defs}${body}</svg>`;
  }

  function fmtDate(d) {
    const dt = new Date(d + 'T00:00:00Z');
    return dt.toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric', timeZone: 'UTC' });
  }
  function esc(s) { return String(s).replace(/[&<>"]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c])); }
  function r(n) { return Math.round(n); }

  function chart(hours) {
    const W = 1024, H = 250, padL = 16, padR = 16, padT = 40, padB = 34;
    const vals = hours.map(h => h.t);
    let min = Math.min(...vals), max = Math.max(...vals);
    if (max - min < 4) { const mid = (max + min) / 2; min = mid - 2; max = mid + 2; }
    const n = hours.length;
    const x = i => padL + (n > 1 ? i * (W - padL - padR) / (n - 1) : (W / 2));
    const y = v => padT + (max - v) * (H - padT - padB) / (max - min);
    const pts = hours.map((h, i) => [x(i), y(h.t)]);
    let d = '';
    for (let i = 0; i < pts.length; i++) {
      const [px, py] = pts[i];
      if (i === 0) { d += `M${px} ${py}`; continue; }
      const [qx, qy] = pts[i - 1];
      const cx = (qx + px) / 2;
      d += ` C${cx} ${qy} ${cx} ${py} ${px} ${py}`;
    }
    const area = d + ` L${pts[n-1][0]} ${H - padB} L${pts[0][0]} ${H - padB} Z`;
    const maxI = vals.indexOf(Math.max(...vals)), minI = vals.indexOf(Math.min(...vals));
    let s = `<svg class="chart" viewBox="0 0 ${W} ${H}" role="img" aria-label="Hourly temperatures">
      <defs><linearGradient id="gArea" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ffb86b" stop-opacity=".35"/><stop offset="1" stop-color="#7cc4ff" stop-opacity="0"/></linearGradient>
      <linearGradient id="gLine" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#7cc4ff"/><stop offset="1" stop-color="#ffb86b"/></linearGradient></defs>`;
    for (let i = 0; i < n; i += 3) s += `<line x1="${x(i)}" y1="${padT - 8}" x2="${x(i)}" y2="${H - padB}" stroke="rgba(255,255,255,0.06)"/>`;
    s += `<line x1="${padL}" y1="${H - padB}" x2="${W - padR}" y2="${H - padB}" stroke="rgba(255,255,255,0.15)"/>`;
    s += `<path d="${area}" fill="url(#gArea)"/><path d="${d}" fill="none" stroke="url(#gLine)" stroke-width="3" stroke-linecap="round"/>`;
    hours.forEach((h, i) => {
      const [px, py] = pts[i];
      const hot = i === maxI, cold = i === minI;
      const col = hot ? '#ffb86b' : cold ? '#7cc4ff' : '#ffffff';
      s += `<circle cx="${px}" cy="${py}" r="${hot || cold ? 5 : 3}" fill="${col}" stroke="#141c33" stroke-width="2"/>`;
      s += `<text x="${px}" y="${py - 12}" text-anchor="middle" font-size="12" font-weight="${hot || cold ? 700 : 500}" fill="${hot || cold ? col : 'rgba(242,244,250,0.85)'}">${r(h.t)}°</text>`;
      if (i % 3 === 0 || n <= 8) s += `<text x="${px}" y="${H - 12}" text-anchor="middle" font-size="12" fill="#9aa3bd">${h.label}</text>`;
    });
    return s + '</svg>';
  }

  function render(data) {
    const daily = data.daily || {};
    const idx = (daily.time || []).indexOf(date);
    const tmax = daily.temperature_2m_max?.[idx >= 0 ? idx : 0];
    const tmin = daily.temperature_2m_min?.[idx >= 0 ? idx : 0];
    const code = daily.weather_code?.[idx >= 0 ? idx : 0];
    const hourly = data.hourly || {};
    const hours = [];
    (hourly.time || []).forEach((t, i) => {
      const v = hourly.temperature_2m?.[i];
      if (t.startsWith(date) && typeof v === 'number') hours.push({ label: t.slice(11, 16), t: v });
    });
    if (typeof tmax !== 'number' || typeof tmin !== 'number' || hours.length === 0) {
      throw new Error('No data available for ' + date);
    }
    const [label, kind] = WMO[code] || ['Unknown conditions', 'cloud'];
    const sourceNote = date < todayUTC ? 'Historical record' : date === todayUTC ? 'Today’s forecast' : 'Forecast';

    card.innerHTML = `
      <section class="top">
        <div class="place">
          <div class="eyebrow">${sourceNote} · UTC</div>
          <h1 class="name">${esc(name)}</h1>
          <div class="date">${fmtDate(date)}</div>
          <div class="coords">${latitude.toFixed(3)}°, ${longitude.toFixed(3)}°</div>
        </div>
        <div class="hero">
          ${icon(kind)}
          <div class="temps">
            <div class="temp-max">${r(tmax)}<sup>°C</sup></div>
            <div class="range">
              <span class="hi">High <b>${r(tmax)}°</b></span>
              <span class="lo">Low <b>${r(tmin)}°</b></span>
            </div>
            <div class="condition">${esc(label)}</div>
          </div>
        </div>
      </section>
      <section class="hourly">
        <div class="hourly-head"><h2>Hourly temperature</h2><span>${hours.length} readings · °C</span></div>
        ${chart(hours)}
      </section>`;
  }

  function fail(msg, detail) {
    card.innerHTML = `<div class="state error"><div class="big">Weather data unavailable</div><div>${esc(msg)}</div>${detail ? `<code>${esc(detail)}</code>` : ''}</div>`;
  }

  const endpoint = date < todayUTC ? '/api/om/archive' : '/api/om/forecast';
  const q = new URLSearchParams({
    latitude: String(latitude),
    longitude: String(longitude),
    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 + '?' + q.toString())
    .then(res => {
      if (!res.ok) throw new Error('Request failed with HTTP ' + res.status);
      return res.json();
    })
    .then(data => {
      if (data && data.error) throw new Error(data.reason || 'API returned an error');
      render(data);
    })
    .catch(err => fail('Could not load the weather for ' + name + ' on ' + date + '.', err && err.message ? err.message : String(err)));
})();
</script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total	14,526	html / css / js	389 / 4,149 / 9,988
dom nodes	12	dom depth	5
css rules	37	js present	yes
brightness	39.4	contrast	21.9
colorfulness	12.9	whitespace	79.8%

This slot's telemetry

prompt tokens	2	completion tokens	7,588
total tokens	7,590	wall	79.1 s
cost	—	request id	—

config.json580 B

{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_NONE",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "claude-fable-5-1-eff-medium--cli--claude-code--dev",
  "effort": "medium",
  "family": "claude",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "claude-fable-5-1",
  "protocol": "cli",
  "served_model": "claude-fable-5-1",
  "telemetry": {
    "completion_tokens": 23850,
    "cost_usd": null,
    "prompt_tokens": 8,
    "total_tokens": 23858,
    "wall_ms": 249238
  },
  "transport": "claude-code-cli-headless",
  "vendor_sanction_ref": null
}

send-log2.5 KB

{
  "N": 2,
  "batch_id": "2026-09-02--cc-fable51-s1",
  "config_id": "claude-fable-5-1-eff-medium--cli--claude-code--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-09-02T01:22:02.251414+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-09-02T01:20:43.144464+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-09-02T01:23:09.988446+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-09-02T01:22:07.189396+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-09-02T01:23:48.399351+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-09-02T01:23:12.983904+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-09-02T01:25:03.885459+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-09-02T01:23:51.961165+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
    }
  }
}