claude-fable-5 @ xhigh · CC

CCxhigh

config: claude-fable-5-eff-xhigh--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

variant

live

slot 0 · P-q · sandboxed iframe

claude-fable-5 @xhigh · 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

grok-4.5 · go0.72 qwen3.7-max · go0.72 gpt-5.6-sol @none · codex-oauth0.70 kimi-k3 @high · api0.69 claude-opus-4-8 @xhigh · kiro0.67

farthest

grok-4.3 @medium · api0.41 gpt-5.6-luna @medium · codex-oauth0.41 nemotron-3-ultra-free · api0.42 minimax-m2.5 · kiro0.44 gpt-5.6-luna @high · kiro0.44

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 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=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<title>Weather</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --accent: #86b7e8;
    --ink: #eef2fa;
    --muted: #96a2b9;
    --faint: #5c6780;
    --disc: color-mix(in srgb, var(--accent) 13%, #0e1425);
  }

  html, body { height: 100%; }

  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--ink);
    background:
      radial-gradient(900px 620px at 86% 112%, rgba(30, 41, 66, .85), transparent 65%),
      radial-gradient(1100px 700px at 10% -18%, rgba(26, 35, 60, .95), transparent 60%),
      #080c17;
    display: grid;
    place-items: center;
    overflow: auto;
    padding: 40px;
  }

  .glow {
    position: fixed;
    border-radius: 50%;
    filter: blur(95px);
    pointer-events: none;
    z-index: 0;
    transition: background .6s ease;
  }
  .g1 { width: 560px; height: 560px; left: 7%; top: -18%; background: color-mix(in srgb, var(--accent) 24%, transparent); }
  .g2 { width: 660px; height: 660px; right: 3%; bottom: -26%; background: color-mix(in srgb, var(--accent) 14%, transparent); }

  .card {
    position: relative;
    z-index: 1;
    width: 1120px;
    border-radius: 26px;
    padding: 42px 48px 40px;
    background:
      linear-gradient(165deg, rgba(150, 172, 222, .10), rgba(150, 172, 222, .028) 42%, rgba(10, 14, 26, 0) 72%),
      rgba(13, 18, 32, .72);
    border: 1px solid rgba(150, 172, 222, .16);
    box-shadow: 0 32px 90px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(22px);
    animation: rise .55s cubic-bezier(.22, .8, .3, 1) both;
  }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

  .head { display: flex; justify-content: space-between; align-items: flex-start; }
  .head h1 {
    font-size: 30px; font-weight: 650; letter-spacing: -.02em;
    max-width: 660px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .date { margin-top: 8px; font-size: 14.5px; color: var(--muted); display: flex; align-items: center; gap: 11px; }
  .tag {
    font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    padding: 3px 10px; border-radius: 999px;
  }
  .chips { display: flex; gap: 10px; padding-top: 7px; }
  .chip {
    font-size: 12px; color: var(--muted); letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
    padding: 6px 13px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
  }

  .body { min-height: 524px; }

  .loading {
    min-height: 524px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 18px;
    color: var(--muted); font-size: 14px;
  }
  .spin {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .10);
    border-top-color: var(--accent);
    animation: rot 1s linear infinite;
  }
  @keyframes rot { to { transform: rotate(360deg); } }

  .hero { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; }
  .hero-left { display: flex; align-items: center; gap: 26px; }
  .disc {
    width: 106px; height: 106px; border-radius: 30px;
    display: grid; place-items: center;
    background: var(--disc);
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
    color: var(--accent);
    box-shadow: 0 14px 38px color-mix(in srgb, var(--accent) 20%, transparent);
  }
  .disc svg { width: 60px; height: 60px; }
  .mask { fill: var(--disc); }
  .dot { stroke-width: 2.6; }

  .k {
    font-size: 11px; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
  }
  .cond .v { font-size: 23px; font-weight: 600; letter-spacing: -.01em; margin-top: 7px; }
  .cond .s { font-size: 12.5px; color: var(--faint); margin-top: 6px; font-variant-numeric: tabular-nums; }

  .temps { display: flex; align-items: flex-end; gap: 28px; }
  .tcol { display: flex; flex-direction: column; align-items: flex-end; }
  .tcol .k { margin-bottom: 8px; }
  .big { font-size: 66px; font-weight: 300; line-height: .92; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  .mid { font-size: 40px; font-weight: 300; line-height: .95; letter-spacing: -.02em; color: #c2cce0; font-variant-numeric: tabular-nums; }
  .vsep { width: 1px; height: 54px; background: rgba(255, 255, 255, .12); margin-bottom: 4px; }

  .sect { display: flex; justify-content: space-between; align-items: baseline; margin: 32px 0 12px; }
  .units { font-size: 11px; color: var(--faint); letter-spacing: .08em; }

  .chartwrap { position: relative; }
  .chartwrap svg { display: block; width: 100%; height: auto; }
  .axis { font-size: 10.5px; fill: rgba(148, 163, 190, .72); font-variant-numeric: tabular-nums; }
  .grid { stroke: rgba(148, 163, 190, .15); stroke-width: 1; }
  .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1s .2s cubic-bezier(.4, 0, .2, 1) forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  .fade { opacity: 0; animation: fade .8s .55s ease forwards; }
  @keyframes fade { to { opacity: 1; } }

  .tip {
    position: absolute; left: 0; top: 0;
    transform: translate(-50%, -135%);
    background: rgba(10, 15, 28, .94);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 10px;
    padding: 7px 12px;
    font-size: 12.5px; color: var(--muted); white-space: nowrap;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
    opacity: 0; transition: opacity .12s ease;
    pointer-events: none;
  }
  .tip b { color: var(--ink); font-weight: 650; margin-right: 7px; }
  .tip em { font-style: normal; color: var(--accent); font-weight: 650; }

  .strip { display: flex; padding: 0 10px 0 34px; margin-top: 8px; }
  .cell {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 9px 0 8px; border-radius: 9px; transition: background .15s ease;
  }
  .cell.on { background: color-mix(in srgb, var(--accent) 14%, transparent); }
  .ch { font-size: 10px; color: var(--faint); font-variant-numeric: tabular-nums; }
  .ct { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .cell.hi .ct { color: var(--accent); }
  .cell.lo .ct { color: #8fc3ee; }

  .nodata {
    min-height: 220px; display: grid; place-items: center;
    color: var(--faint); font-size: 14px;
    border: 1px dashed rgba(255, 255, 255, .12); border-radius: 14px;
  }

  .err {
    min-height: 524px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    color: var(--muted);
  }
  .err svg { width: 54px; height: 54px; color: var(--faint); margin-bottom: 20px; }
  .err h2 { color: var(--ink); font-size: 21px; font-weight: 650; margin-bottom: 10px; }
  .err p { font-size: 14px; max-width: 480px; line-height: 1.6; }
  .err .why {
    margin-top: 16px; font-size: 12.5px; color: var(--faint);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    padding: 7px 14px; border-radius: 8px;
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
  }
</style>
</head>
<body>
  <div class="glow g1"></div>
  <div class="glow g2"></div>

  <main class="card">
    <header class="head">
      <div>
        <h1 id="loc">—</h1>
        <p class="date" id="date">—</p>
      </div>
      <div class="chips">
        <span class="chip" id="coords"></span>
        <span class="chip" id="src"></span>
      </div>
    </header>
    <section class="body" id="body">
      <div class="loading"><div class="spin"></div><p>Loading weather…</p></div>
    </section>
  </main>

  <noscript><p style="position:fixed;inset:auto 0 20px 0;text-align:center;color:#96a2b9">This page requires JavaScript to load weather data.</p></noscript>

<script>
(function () {
  'use strict';

  var $ = function (id) { return document.getElementById(id); };

  /* ---------- Params ---------- */
  var p = new URLSearchParams(location.search);
  var lat = parseFloat(p.get('lat')); if (!isFinite(lat)) lat = 52.52;
  var lon = parseFloat(p.get('lon')); if (!isFinite(lon)) lon = 13.405;
  var name = (p.get('name') || '').trim() || 'Berlin';
  var today = new Date().toISOString().slice(0, 10);
  var date = (p.get('date') || '').trim();
  if (!/^\d{4}-\d{2}-\d{2}$/.test(date) || isNaN(Date.parse(date + 'T00:00:00Z'))) date = today;
  var isPast = date < today;

  /* ---------- WMO codes & themes ---------- */
  var WMO = {
    0: ['Clear sky', 'clear'], 1: ['Mainly clear', 'clear'], 2: ['Partly cloudy', 'partly'], 3: ['Overcast', 'cloudy'],
    45: ['Fog', 'fog'], 48: ['Depositing rime fog', 'fog'],
    51: ['Light drizzle', 'drizzle'], 53: ['Moderate drizzle', 'drizzle'], 55: ['Dense drizzle', 'drizzle'],
    56: ['Light freezing drizzle', 'freezing'], 57: ['Dense freezing drizzle', 'freezing'],
    61: ['Slight rain', 'rain'], 63: ['Moderate rain', 'rain'], 65: ['Heavy rain', 'rain'],
    66: ['Light freezing rain', 'freezing'], 67: ['Heavy freezing rain', 'freezing'],
    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', 'thunder'], 96: ['Thunderstorm with slight hail', 'thunder'], 99: ['Thunderstorm with heavy hail', 'thunder']
  };
  var THEME = {
    clear: '#f5b74e', partly: '#8ab9ea', cloudy: '#9aa8c0', fog: '#aab6ca',
    drizzle: '#6ec6ec', rain: '#5ea8f2', freezing: '#74d4e6', snow: '#b9e2f8', thunder: '#b28cf4'
  };

  var CLOUD = 'M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z';
  var CLOUD2 = 'M20 16.58A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.25';
  var ICONS = {
    clear: '<circle cx="12" cy="12" r="4.4"/><path d="M12 2.2v2.3M12 19.5v2.3M2.2 12h2.3M19.5 12h2.3M5.1 5.1l1.6 1.6M17.3 17.3l1.6 1.6M5.1 18.9l1.6-1.6M17.3 6.7l1.6-1.6"/>',
    partly: '<circle cx="17.3" cy="6.2" r="2.5"/><path d="M17.3 1.4v1.4M20.7 6.2h1.5M12.4 6.2h1.4M19.6 3.9l1-1M15 3.9l-1-1M19.6 8.5l1 1"/><path class="mask" d="' + CLOUD + '" transform="translate(-1 2) scale(0.95)"/>',
    cloudy: '<path d="' + CLOUD + '"/>',
    fog: '<path d="' + CLOUD + '" transform="translate(1.4 -2.6) scale(0.92)"/><path d="M4.8 18.4h13.6M7.6 21.5h9.6"/>',
    drizzle: '<path d="' + CLOUD2 + '"/><path d="M8 13.5v1.7M8 18.7v1.7M12 15.5v1.7M12 20.7v1.7M16 13.5v1.7M16 18.7v1.7"/>',
    rain: '<path d="' + CLOUD2 + '"/><path d="M16 13v7.5M8 13v7.5M12 15.2v7.3"/>',
    freezing: '<path d="' + CLOUD2 + '"/><path d="M8 13.2v7M16 13.2v7"/><path class="dot" d="M12 15.6h.01M12 19.4h.01M12 23h.01"/>',
    snow: '<path d="' + CLOUD2 + '"/><path class="dot" d="M8 15.5h.01M8 19.5h.01M12 17.5h.01M12 21.5h.01M16 15.5h.01M16 19.5h.01"/>',
    thunder: '<path d="M19 16.9A5 5 0 0 0 18 7h-1.26a8 8 0 1 0-11.62 9"/><polyline points="13.2 10.5 9.5 16.5 14.5 16.5 10.8 22.5"/>'
  };
  function iconSvg(group) {
    return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">'
      + (ICONS[group] || ICONS.cloudy) + '</svg>';
  }

  function deg(v) { return v == null ? '–' : (+v.toFixed(1)).toString() + '°'; }

  /* ---------- Header (rendered immediately) ---------- */
  document.title = name + ' · Weather';
  $('loc').textContent = name;

  var dObj = new Date(date + 'T00:00:00Z');
  $('date').textContent = new Intl.DateTimeFormat('en-GB', {
    timeZone: 'UTC', weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'
  }).format(dObj);
  var diff = Math.round((dObj - new Date(today + 'T00:00:00Z')) / 864e5);
  var tagText = diff === 0 ? 'Today' : diff === 1 ? 'Tomorrow' : diff === -1 ? 'Yesterday' : '';
  if (tagText) {
    var t = document.createElement('span');
    t.className = 'tag';
    t.textContent = tagText;
    $('date').appendChild(t);
  }
  $('coords').textContent =
    Math.abs(lat).toFixed(2) + '° ' + (lat >= 0 ? 'N' : 'S') + ' · ' +
    Math.abs(lon).toFixed(2) + '° ' + (lon >= 0 ? 'E' : 'W');
  $('src').textContent = (isPast ? 'Archive' : 'Forecast') + ' · UTC';

  function setTheme(group) {
    document.documentElement.style.setProperty('--accent', THEME[group] || THEME.partly);
  }

  /* ---------- Error view ---------- */
  function renderError(reason) {
    $('body').innerHTML =
      '<div class="err">' +
        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">' +
          '<path d="' + CLOUD + '"/><path d="M4 3.5l16.5 17"/></svg>' +
        '<h2>Weather data could not be loaded</h2>' +
        '<p>Something went wrong while fetching the ' + (isPast ? 'archived' : 'forecast') +
        ' weather for this location and date. Please try again.</p>' +
        (reason ? '<span class="why"></span>' : '') +
      '</div>';
    if (reason) $('body').querySelector('.why').textContent = String(reason);
  }

  /* ---------- Chart ---------- */
  function smoothPath(pts) {
    var d = 'M' + pts[0].x.toFixed(2) + ',' + pts[0].y.toFixed(2);
    for (var i = 0; i < pts.length - 1; i++) {
      var p0 = pts[Math.max(0, i - 1)], p1 = pts[i], p2 = pts[i + 1], p3 = pts[Math.min(pts.length - 1, i + 2)];
      d += 'C' + (p1.x + (p2.x - p0.x) / 6).toFixed(2) + ',' + (p1.y + (p2.y - p0.y) / 6).toFixed(2) +
           ',' + (p2.x - (p3.x - p1.x) / 6).toFixed(2) + ',' + (p2.y - (p3.y - p1.y) / 6).toFixed(2) +
           ',' + p2.x.toFixed(2) + ',' + p2.y.toFixed(2);
    }
    return d;
  }

  function render(data) {
    var accent = THEME[data.group] || THEME.partly;
    var temps = data.temps, hours = data.hours;
    var vals = temps.filter(function (v) { return v != null; });

    var W = 1024, H = 240, L = 34, R = 10, T = 28, B = 26;
    var plotW = W - L - R, plotH = H - T - B;
    var n = Math.max(temps.length, 1);
    var step = plotW / n;

    var chartHtml, xs = [], ys = [];
    if (vals.length >= 2) {
      var dMin = Math.min.apply(null, vals), dMax = Math.max.apply(null, vals);
      var pad = Math.max(0.8, (dMax - dMin) * 0.18);
      var lo = dMin - pad, hi = dMax + pad;
      var y = function (v) { return T + (hi - v) / (hi - lo) * plotH; };

      var pts = [];
      for (var i = 0; i < n; i++) {
        xs[i] = L + (i + 0.5) * step;
        if (temps[i] != null) { ys[i] = y(temps[i]); pts.push({ x: xs[i], y: ys[i], i: i }); }
        else ys[i] = null;
      }

      var stepOpts = [0.5, 1, 2, 2.5, 5, 10, 20, 50], range = hi - lo;
      var tick = stepOpts.find(function (s) { return range / s <= 5.5; }) || 100;
      var s = [];
      s.push('<svg width="' + W + '" height="' + H + '" viewBox="0 0 ' + W + ' ' + H + '">');
      s.push('<defs><linearGradient id="ag" x1="0" y1="0" x2="0" y2="1">' +
        '<stop offset="0" stop-color="' + accent + '" stop-opacity="0.30"/>' +
        '<stop offset="1" stop-color="' + accent + '" stop-opacity="0"/></linearGradient></defs>');

      for (var v = Math.ceil(lo / tick) * tick; v <= hi + 1e-9; v += tick) {
        var gy = y(v).toFixed(1);
        s.push('<line class="grid" x1="' + L + '" y1="' + gy + '" x2="' + (W - R) + '" y2="' + gy + '"/>');
        s.push('<text class="axis" x="' + (L - 8) + '" y="' + gy + '" text-anchor="end" dy="0.35em">' + deg(+v.toFixed(1)) + '</text>');
      }

      var line = smoothPath(pts);
      var bottom = (T + plotH).toFixed(1);
      s.push('<path class="fade" d="' + line + ' L' + pts[pts.length - 1].x.toFixed(2) + ',' + bottom +
             ' L' + pts[0].x.toFixed(2) + ',' + bottom + ' Z" fill="url(#ag)"/>');
      s.push('<path class="draw" d="' + line + '" fill="none" stroke="' + accent +
             '" stroke-width="2.25" stroke-linecap="round" pathLength="1"/>');

      var iMax = temps.indexOf(dMax), iMin = temps.indexOf(dMin);
      for (var j = 0; j < pts.length; j++) {
        if (pts[j].i === iMax || pts[j].i === iMin) continue;
        s.push('<circle class="fade" cx="' + pts[j].x.toFixed(1) + '" cy="' + pts[j].y.toFixed(1) + '" r="2" fill="' + accent + '" opacity="0.8"/>');
      }
      var clampX = function (x) { return Math.min(Math.max(x, L + 20), W - R - 22); };
      s.push('<g class="fade"><circle cx="' + xs[iMax].toFixed(1) + '" cy="' + ys[iMax].toFixed(1) + '" r="4" fill="none" stroke="' + accent + '" stroke-width="1.6"/>' +
        '<circle cx="' + xs[iMax].toFixed(1) + '" cy="' + ys[iMax].toFixed(1) + '" r="1.7" fill="' + accent + '"/>' +
        '<text x="' + clampX(xs[iMax]).toFixed(1) + '" y="' + (ys[iMax] - 11).toFixed(1) + '" text-anchor="middle" font-size="11.5" font-weight="650" fill="' + accent +
        '" stroke="#0a0f1e" stroke-width="3.5" paint-order="stroke">' + deg(dMax) + '</text></g>');
      s.push('<g class="fade"><circle cx="' + xs[iMin].toFixed(1) + '" cy="' + ys[iMin].toFixed(1) + '" r="4" fill="none" stroke="#8fc3ee" stroke-width="1.6"/>' +
        '<circle cx="' + xs[iMin].toFixed(1) + '" cy="' + ys[iMin].toFixed(1) + '" r="1.7" fill="#8fc3ee"/>' +
        '<text x="' + clampX(xs[iMin]).toFixed(1) + '" y="' + (ys[iMin] + 16).toFixed(1) + '" text-anchor="middle" font-size="11.5" font-weight="650" fill="#8fc3ee"' +
        ' stroke="#0a0f1e" stroke-width="3.5" paint-order="stroke">' + deg(dMin) + '</text></g>');

      s.push('<line id="ch" x1="0" y1="' + T + '" x2="0" y2="' + (T + plotH) + '" stroke="rgba(255,255,255,.2)" stroke-dasharray="3 3" opacity="0"/>');
      s.push('<circle id="hd" r="4.5" fill="' + accent + '" stroke="#0b1020" stroke-width="2" opacity="0"/>');
      s.push('</svg>');
      chartHtml = s.join('');
    } else {
      chartHtml = '<div class="nodata">No hourly temperatures are available for this date.</div>';
    }

    var iHi = vals.length ? temps.indexOf(Math.max.apply(null, vals)) : -1;
    var iLo = vals.length ? temps.indexOf(Math.min.apply(null, vals)) : -1;
    var cells = '';
    for (var c = 0; c < n; c++) {
      cells += '<div class="cell' + (c === iHi ? ' hi' : c === iLo ? ' lo' : '') + '" data-i="' + c + '">' +
        '<span class="ch">' + hours[c].slice(0, 2) + '</span>' +
        '<span class="ct">' + (temps[c] == null ? '–' : Math.round(temps[c]) + '°') + '</span></div>';
    }

    $('body').innerHTML =
      '<div class="hero">' +
        '<div class="hero-left">' +
          '<div class="disc">' + iconSvg(data.group) + '</div>' +
          '<div class="cond"><div class="k">Condition</div><div class="v" id="condv"></div><div class="s" id="conds"></div></div>' +
        '</div>' +
        '<div class="temps">' +
          '<div class="tcol"><span class="k">High</span><span class="big">' + deg(data.tmax) + '</span></div>' +
          '<div class="vsep"></div>' +
          '<div class="tcol"><span class="k">Low</span><span class="mid">' + deg(data.tmin) + '</span></div>' +
        '</div>' +
      '</div>' +
      '<div class="sect"><span class="k">Hourly temperature</span><span class="units">°C · UTC</span></div>' +
      '<div class="chartwrap" id="cw">' + chartHtml + '<div class="tip" id="tip"></div></div>' +
      '<div class="strip" id="strip">' + cells + '</div>';

    $('condv').textContent = data.label;
    $('conds').textContent = data.code == null ? 'Daily summary' : 'WMO code ' + data.code + ' · Daily summary';

    /* Hover interaction */
    if (vals.length >= 2) {
      var cw = $('cw'), svgEl = cw.querySelector('svg'), tip = $('tip');
      var ch = document.getElementById('ch'), hd = document.getElementById('hd');
      var cellEls = $('strip').children;
      var cur = -1;

      var showAt = function (i) {
        var k = i, off = 0;
        while (ys[k] == null && off < n) { off++; k = (off % 2 ? i + (off + 1) / 2 : i - off / 2 + n) % n; }
        if (ys[k] == null) return;
        if (cur >= 0 && cellEls[cur]) cellEls[cur].classList.remove('on');
        cur = k;
        if (cellEls[k]) cellEls[k].classList.add('on');
        ch.setAttribute('x1', xs[k]); ch.setAttribute('x2', xs[k]); ch.setAttribute('opacity', '1');
        hd.setAttribute('cx', xs[k]); hd.setAttribute('cy', ys[k]); hd.setAttribute('opacity', '1');
        var r = svgEl.getBoundingClientRect(), sc = r.width / W;
        tip.style.left = (xs[k] * sc) + 'px';
        tip.style.top = (ys[k] * sc) + 'px';
        tip.innerHTML = '<b>' + hours[k] + '</b><em>' + (+temps[k].toFixed(1)) + ' °C</em>';
        tip.style.opacity = '1';
      };
      var hide = function () {
        tip.style.opacity = '0';
        ch.setAttribute('opacity', '0'); hd.setAttribute('opacity', '0');
        if (cur >= 0 && cellEls[cur]) cellEls[cur].classList.remove('on');
        cur = -1;
      };

      cw.addEventListener('mousemove', function (e) {
        var r = svgEl.getBoundingClientRect();
        var x = (e.clientX - r.left) * (W / r.width);
        var i = Math.floor((x - L) / step);
        showAt(Math.max(0, Math.min(n - 1, i)));
      });
      cw.addEventListener('mouseleave', hide);
      Array.prototype.forEach.call(cellEls, function (el) {
        el.addEventListener('mouseenter', function () { showAt(+el.dataset.i); });
      });
      $('strip').addEventListener('mouseleave', hide);
    }
  }

  /* ---------- Fetch ---------- */
  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('/api/om/' + (isPast ? 'archive' : 'forecast') + '?' + qs.toString())
    .then(function (r) {
      return r.json().catch(function () { return {}; }).then(function (j) {
        if (!r.ok || j.error) throw new Error(j.reason || ('Request failed with HTTP ' + r.status));
        return j;
      });
    })
    .then(function (j) {
      var d = j.daily || {};
      var hAll = (j.hourly && j.hourly.time) || [];
      var tAll = (j.hourly && j.hourly.temperature_2m) || [];
      var hours = [], temps = [];
      for (var i = 0; i < hAll.length; i++) {
        if (String(hAll[i]).slice(0, 10) === date) {
          hours.push(String(hAll[i]).slice(11, 16) || '00:00');
          temps.push(tAll[i] == null ? null : tAll[i]);
        }
      }
      var vals = temps.filter(function (v) { return v != null; });
      var tmax = d.temperature_2m_max ? d.temperature_2m_max[0] : null;
      var tmin = d.temperature_2m_min ? d.temperature_2m_min[0] : null;
      var code = d.weather_code ? d.weather_code[0] : null;
      if (tmax == null && vals.length) tmax = Math.max.apply(null, vals);
      if (tmin == null && vals.length) tmin = Math.min.apply(null, vals);
      if (tmax == null && tmin == null && !vals.length) {
        throw new Error('The API returned no temperature data for this date.');
      }
      var meta = WMO[code] || [code == null ? 'Conditions unavailable' : 'Unknown conditions', 'cloudy'];
      setTheme(meta[1]);
      render({ tmax: tmax, tmin: tmin, code: code, label: meta[0], group: meta[1], hours: hours, temps: temps });
    })
    .catch(function (e) {
      renderError(e && e.message ? e.message : 'Network error');
    });
})();
</script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total	23,873	html / css / js	905 / 7,529 / 15,439
dom nodes	25	dom depth	6
css rules	67	js present	yes
brightness	26.8	contrast	14.1
colorfulness	13.7	whitespace	90.1%

This slot's telemetry

prompt tokens	8	completion tokens	37,727
total tokens	37,735	wall	486.4 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-xhigh--cli--claude-code--dev",
  "effort": "xhigh",
  "family": "claude",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "claude-fable-5",
  "protocol": "cli",
  "served_model": "claude-fable-5",
  "telemetry": {
    "completion_tokens": 103465,
    "cost_usd": null,
    "prompt_tokens": 24,
    "total_tokens": 103489,
    "wall_ms": 1301147
  },
  "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-xhigh--cli--claude-code--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-17T14:45:29.762419+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T14:44:00.548276+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-17T14:53:40.184561+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T14:45:33.844931+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-17T15:04:19.324371+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T14:53:44.122517+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-17T15:05:53.077100+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:04:22.743266+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
    }
  }
}