claude-fable-5 @ low · CC

CClow
config
claude-fable-5-eff-low--cli--claude-code--dev
batch
2026-07-19--unified
transport
claude-code-cli-headless
protocol
cli · plan
served model
claude-fable-5
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 · 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 neighbors

nearest
kimi-k2.6 · go0.70gpt-5.5 @low · codex-oauth0.66claude-haiku-4-5 @medium · CC0.64claude-haiku-4-5 @low · CC0.63gpt-5.6-luna @low · codex-oauth0.63
farthest
claude-opus-4-6 @low · kiro0.38kimi-k3 · opencode0.41claude-sonnet-4-6 @max · kiro0.41claude-fable-5 @medium · CC0.41kimi-k2.5 · go0.42

within session 2026-07-19--unified

similarity measures convergence within this session — not quality.

Fidelity — does the card show the right data?

  • namematch
  • conditionmatch
  • datematch
  • max tempmismatchshown: 13.405
  • min tempmismatchshown: 52.52
  • 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">
<title>Weather Card</title>
<style>
  :root{
    --bg1:#0f1b2d; --bg2:#1c3252;
    --card:#ffffff;
    --ink:#16233a; --ink-soft:#5b6b84; --ink-faint:#8fa0b8;
    --accent:#2f6fed; --accent-soft:#e8f0fe;
    --hot:#e5643c; --cold:#3a8fd9;
    --radius:24px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
    background:
      radial-gradient(1200px 700px at 15% -10%, #33507e 0%, transparent 60%),
      radial-gradient(1000px 600px at 95% 110%, #274268 0%, transparent 55%),
      linear-gradient(160deg,var(--bg1),var(--bg2));
    display:flex;align-items:center;justify-content:center;
    color:var(--ink);
    min-height:800px;
  }
  .card{
    width:880px;
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:0 30px 80px rgba(4,12,28,.55), 0 2px 6px rgba(4,12,28,.25);
    overflow:hidden;
  }
  .hero{
    padding:40px 48px 32px;
    display:flex;justify-content:space-between;align-items:flex-start;gap:32px;
    background:linear-gradient(135deg,#eaf2ff 0%,#f8fbff 55%,#ffffff 100%);
    border-bottom:1px solid #e6ecf5;
  }
  .loc h1{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
  .loc .date{margin-top:6px;font-size:15px;color:var(--ink-soft);font-weight:500}
  .loc .coords{margin-top:4px;font-size:12px;color:var(--ink-faint);letter-spacing:.03em}
  .cond{
    margin-top:22px;display:inline-flex;align-items:center;gap:10px;
    background:var(--accent-soft);color:var(--accent);
    padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;
  }
  .cond .icon{font-size:20px;line-height:1}
  .temps{display:flex;gap:36px;align-items:flex-start;text-align:right}
  .temp-block .label{
    font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink-faint);margin-bottom:6px;
  }
  .temp-block .value{font-size:56px;font-weight:700;letter-spacing:-.03em;line-height:1}
  .temp-block .value sup{font-size:24px;font-weight:500;color:var(--ink-soft)}
  .temp-block.max .value{color:var(--hot)}
  .temp-block.min .value{color:var(--cold)}
  .hourly{padding:28px 48px 40px}
  .hourly h2{
    font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-faint);margin-bottom:18px;
  }
  .chart-wrap{position:relative}
  svg{display:block;width:100%;height:auto}
  .strip{
    margin-top:14px;display:grid;grid-template-columns:repeat(12,1fr);gap:8px;
  }
  .cell{
    background:#f4f7fc;border:1px solid #e8edf5;border-radius:10px;
    padding:8px 4px;text-align:center;
  }
  .cell .h{font-size:10px;color:var(--ink-faint);font-weight:600;margin-bottom:3px}
  .cell .t{font-size:13px;font-weight:700;color:var(--ink)}
  .status{
    padding:80px 48px;text-align:center;color:var(--ink-soft);font-size:17px;
  }
  .status.error{color:#b3372a;font-weight:600}
  .spinner{
    width:34px;height:34px;margin:0 auto 18px;border-radius:50%;
    border:3px solid #dbe5f2;border-top-color:var(--accent);
    animation:spin .8s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg)}}
</style>
</head>
<body>
<div class="card" id="card">
  <div class="status" id="status"><div class="spinner"></div>Loading weather…</div>
</div>
<script>
(async function(){
  const q = new URLSearchParams(location.search);
  const lat = parseFloat(q.get('lat') ?? '52.52');
  const lon = parseFloat(q.get('lon') ?? '13.405');
  const name = q.get('name') || 'Berlin';
  const todayUTC = new Date().toISOString().slice(0,10);
  const date = /^\d{4}-\d{2}-\d{2}$/.test(q.get('date')||'') ? q.get('date') : todayUTC;

  const WMO = {
    0:['Clear sky','☀️'],1:['Mainly clear','🌤️'],2:['Partly cloudy','⛅'],3:['Overcast','☁️'],
    45:['Fog','🌫️'],48:['Depositing rime fog','🌫️'],
    51:['Light drizzle','🌦️'],53:['Moderate drizzle','🌦️'],55:['Dense drizzle','🌧️'],
    56:['Light freezing drizzle','🌧️'],57:['Dense freezing drizzle','🌧️'],
    61:['Slight rain','🌧️'],63:['Moderate rain','🌧️'],65:['Heavy rain','🌧️'],
    66:['Light freezing rain','🌧️'],67:['Heavy freezing rain','🌧️'],
    71:['Slight snowfall','🌨️'],73:['Moderate snowfall','🌨️'],75:['Heavy snowfall','❄️'],
    77:['Snow grains','❄️'],
    80:['Slight rain showers','🌦️'],81:['Moderate rain showers','🌧️'],82:['Violent rain showers','⛈️'],
    85:['Slight snow showers','🌨️'],86:['Heavy snow showers','❄️'],
    95:['Thunderstorm','⛈️'],96:['Thunderstorm with slight hail','⛈️'],99:['Thunderstorm with heavy hail','⛈️']
  };

  const card = document.getElementById('card');
  const fail = msg => { card.innerHTML = '<div class="status error">'+msg+'</div>'; };

  try{
    const base = 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
    });
    const res = await fetch(base + '?' + params);
    if(!res.ok) throw new Error('HTTP '+res.status);
    const data = await res.json();
    if(!data.daily || !data.hourly) throw new Error('bad payload');

    const tmax = data.daily.temperature_2m_max?.[0];
    const tmin = data.daily.temperature_2m_min?.[0];
    const code = data.daily.weather_code?.[0];
    const hours = data.hourly.time || [];
    const temps = data.hourly.temperature_2m || [];
    if(tmax == null || tmin == null) throw new Error('no data for date');

    const [condText, condIcon] = WMO[code] || ['Unknown ('+code+')','🌡️'];
    const dateLabel = new Date(date+'T00:00:00Z').toLocaleDateString('en-GB',
      {weekday:'long', day:'numeric', month:'long', year:'numeric', timeZone:'UTC'});
    const fmt = t => t==null ? '–' : Math.round(t*10)/10;

    // hourly series for the requested day
    const pts = hours.map((h,i)=>({h:+h.slice(11,13), t:temps[i]}))
                     .filter(p=>p.t!=null).slice(0,24);

    // SVG line chart
    let svg = '';
    if(pts.length > 1){
      const W=784, H=180, padL=34, padR=10, padT=14, padB=24;
      const lo = Math.min(...pts.map(p=>p.t)), hi = Math.max(...pts.map(p=>p.t));
      const span = (hi-lo)||1;
      const x = i => padL + (W-padL-padR) * (pts[i].h/23);
      const y = t => padT + (H-padT-padB) * (1-(t-lo)/span);
      let path = pts.map((p,i)=>(i?'L':'M')+x(i).toFixed(1)+' '+y(p.t).toFixed(1)).join(' ');
      let area = path + ' L'+x(pts.length-1).toFixed(1)+' '+(H-padB)+' L'+x(0).toFixed(1)+' '+(H-padB)+' Z';
      let grid='', labels='';
      for(let g=0; g<=3; g++){
        const tv = lo + span*g/3, gy = y(tv);
        grid += '<line x1="'+padL+'" x2="'+(W-padR)+'" y1="'+gy+'" y2="'+gy+'" stroke="#edf1f7"/>';
        labels += '<text x="'+(padL-8)+'" y="'+(gy+4)+'" text-anchor="end" font-size="10" fill="#8fa0b8">'+(Math.round(tv*10)/10)+'°</text>';
      }
      [0,6,12,18,23].forEach(hh=>{
        const gx = padL + (W-padL-padR)*(hh/23);
        labels += '<text x="'+gx+'" y="'+(H-6)+'" text-anchor="middle" font-size="10" fill="#8fa0b8">'+String(hh).padStart(2,'0')+':00</text>';
      });
      svg = '<svg viewBox="0 0 '+W+' '+H+'" role="img" aria-label="Hourly temperature">'
        + '<defs><linearGradient id="g" x1="0" y1="0" x2="0" y2="1">'
        + '<stop offset="0" stop-color="#2f6fed" stop-opacity=".22"/>'
        + '<stop offset="1" stop-color="#2f6fed" stop-opacity="0"/></linearGradient></defs>'
        + grid
        + '<path d="'+area+'" fill="url(#g)"/>'
        + '<path d="'+path+'" fill="none" stroke="#2f6fed" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>'
        + pts.map((p,i)=>'<circle cx="'+x(i).toFixed(1)+'" cy="'+y(p.t).toFixed(1)+'" r="2.6" fill="#fff" stroke="#2f6fed" stroke-width="1.6"/>').join('')
        + labels + '</svg>';
    }

    const strip = pts.map(p=>
      '<div class="cell"><div class="h">'+String(p.h).padStart(2,'0')+':00</div>'
      +'<div class="t">'+fmt(p.t)+'°</div></div>').join('');

    card.innerHTML =
      '<div class="hero">'
      +  '<div class="loc">'
      +    '<h1>'+String(name).replace(/[<>&]/g,c=>({'<':'&lt;','>':'&gt;','&':'&amp;'}[c]))+'</h1>'
      +    '<div class="date">'+dateLabel+'</div>'
      +    '<div class="coords">'+lat.toFixed(3)+'°, '+lon.toFixed(3)+'° · UTC</div>'
      +    '<div class="cond"><span class="icon">'+condIcon+'</span>'+condText+'</div>'
      +  '</div>'
      +  '<div class="temps">'
      +    '<div class="temp-block max"><div class="label">High</div><div class="value">'+fmt(tmax)+'<sup>°C</sup></div></div>'
      +    '<div class="temp-block min"><div class="label">Low</div><div class="value">'+fmt(tmin)+'<sup>°C</sup></div></div>'
      +  '</div>'
      +'</div>'
      +'<div class="hourly"><h2>Hourly temperature</h2>'
      +  '<div class="chart-wrap">'+svg+'</div>'
      +  '<div class="strip">'+(strip||'<div class="cell"><div class="t">No hourly data</div></div>')+'</div>'
      +'</div>';
  }catch(e){
    fail('Weather data could not be loaded. ('+e.message+')');
  }
})();
</script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total9,380html / css / js277 / 3,133 / 5,970
dom nodes10dom depth5
css rules30js presentyes
brightness148.1contrast102.6
colorfulness27.2whitespace49.7%

This slot's telemetry

prompt tokens2completion tokens4,649
total tokens4,651wall48.7 s
cost—request id—
config.json568 B
{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_NONE",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "claude-fable-5-eff-low--cli--claude-code--dev",
  "effort": "low",
  "family": "claude",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "claude-fable-5",
  "protocol": "cli",
  "served_model": "claude-fable-5",
  "telemetry": {
    "completion_tokens": 14588,
    "cost_usd": null,
    "prompt_tokens": 8,
    "total_tokens": 14596,
    "wall_ms": 148170
  },
  "transport": "claude-code-cli-headless",
  "vendor_sanction_ref": null
}
send-log2.5 KB
{
  "N": 2,
  "batch_id": "2026-07-17--dev-cc-fable5",
  "config_id": "claude-fable-5-eff-low--cli--claude-code--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-17T13:52:49.182467+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T13:52:22.396006+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-07-17T13:53:42.603164+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T13:52:53.913963+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-07-17T13:54:30.238773+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T13:53:46.223666+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-07-17T13:55:02.400825+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T13:54:33.716307+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
    }
  }
}