claude-fable-5 · CC

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

gpt-5.6-terra @medium · codex-oauth0.66 glm-5.2 · go0.63 gpt-5.5 @xhigh · codex-oauth0.63 claude-fable-5 @xhigh · CC0.61 deepseek-v4-pro · go0.61

farthest

deepseek-v4-flash · opencode0.38 kimi-k3 · go0.42 claude-opus-4-8 @max · CC0.42 claude-opus-4-6 @max · kiro0.42 grok-4.5 @medium · grok-cli0.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 tempmismatchshown: 52.52
min tempmismatchshown: 13.405
hourlymismatchcoverage 0/24 · 0 match · 8 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-0: #0a1020;
    --bg-1: #0e1730;
    --card: rgba(255, 255, 255, 0.045);
    --card-border: rgba(255, 255, 255, 0.09);
    --text-hi: #f2f6fc;
    --text-mid: rgba(236, 243, 252, 0.72);
    --text-low: rgba(236, 243, 252, 0.45);
    --accent: #7cb8ff;
    --grid: rgba(255, 255, 255, 0.07);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html, body { height: 100%; }

  body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Inter, "Helvetica Neue", sans-serif;
    background:
      radial-gradient(1100px 600px at 18% -10%, rgba(94, 140, 255, 0.16), transparent 60%),
      radial-gradient(900px 700px at 92% 110%, rgba(64, 105, 224, 0.12), transparent 55%),
      linear-gradient(160deg, var(--bg-0), var(--bg-1) 55%, #0a1226);
    color: var(--text-hi);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-font-smoothing: antialiased;
  }

  .card {
    width: 1060px;
    border-radius: 26px;
    background: linear-gradient(175deg, rgba(255,255,255,0.075), rgba(255,255,255,0.028) 40%), var(--card);
    border: 1px solid var(--card-border);
    box-shadow:
      0 40px 80px -24px rgba(2, 6, 20, 0.75),
      0 2px 0 rgba(255, 255, 255, 0.05) inset;
    padding: 44px 48px 40px;
    backdrop-filter: blur(14px);
  }

  .status {
    text-align: center;
    padding: 90px 0;
  }
  .status .spinner {
    width: 34px; height: 34px;
    margin: 0 auto 22px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.12);
    border-top-color: var(--accent);
    animation: spin 0.9s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .status h2 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
  .status p { color: var(--text-mid); font-size: 14.5px; line-height: 1.5; }
  .status.error .glyph {
    width: 52px; height: 52px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(255, 120, 120, 0.12);
    border: 1px solid rgba(255, 120, 120, 0.3);
    display: flex; align-items: center; justify-content: center;
    color: #ff9d9d; font-size: 24px; font-weight: 600;
  }

  .head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
  }
  .place { display: flex; gap: 24px; align-items: flex-start; }
  .icon-wrap {
    width: 88px; height: 88px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.09);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent);
    box-shadow: 0 12px 28px -12px rgba(0,0,0,0.5);
    flex: none;
  }
  .icon-wrap svg { width: 56px; height: 56px; }

  .kicker {
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-low);
    font-weight: 600;
    margin-bottom: 7px;
  }
  h1 {
    font-size: 34px;
    font-weight: 680;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 8px;
  }
  .date { font-size: 15px; color: var(--text-mid); margin-bottom: 10px; }
  .cond {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-hi);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 6px 14px;
    border-radius: 999px;
  }
  .cond .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
  }

  .temps { display: flex; gap: 36px; align-items: flex-start; text-align: right; }
  .temp-block .label {
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-low);
    font-weight: 600;
    margin-bottom: 4px;
  }
  .temp-block .val {
    font-size: 58px;
    font-weight: 250;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .temp-block .val sup { font-size: 26px; font-weight: 400; color: var(--text-mid); }
  .temp-block.min .val { font-size: 42px; color: var(--text-mid); margin-top: 14px; }
  .temp-block.min .val sup { font-size: 20px; }

  .divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    margin: 34px 0 26px;
  }

  .chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
  }
  .chart-head h3 {
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-mid);
  }
  .chart-head .unit { font-size: 12.5px; color: var(--text-low); }

  .chart-box { position: relative; }
  svg.chart { display: block; width: 100%; height: auto; }

  .tooltip {
    position: absolute;
    pointer-events: none;
    background: rgba(14, 22, 44, 0.95);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 10px;
    padding: 7px 11px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    transform: translate(-50%, -130%);
    box-shadow: 0 10px 24px rgba(0,0,0,0.45);
    opacity: 0;
    transition: opacity 0.12s ease;
  }
  .tooltip .t-hour { color: var(--text-low); font-weight: 500; margin-right: 6px; }

  .hours {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 0;
    margin-top: 22px;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,0.02);
  }
  .hour-cell {
    text-align: center;
    padding: 10px 0 11px;
    border-left: 1px solid rgba(255,255,255,0.05);
  }
  .hour-cell:first-child { border-left: none; }
  .hour-cell .h {
    font-size: 10px;
    color: var(--text-low);
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 5px;
  }
  .hour-cell .t {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-mid);
    font-variant-numeric: tabular-nums;
  }
  .hour-cell.is-max { background: rgba(255,255,255,0.05); }
  .hour-cell.is-max .t { color: var(--accent); }
  .hour-cell.is-min .t { color: #9fb6d8; }

  .foot {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-low);
  }
</style>
</head>
<body>
<main class="card" id="app">
  <div class="status">
    <div class="spinner"></div>
    <h2>Loading weather</h2>
    <p>Fetching conditions for the requested location…</p>
  </div>
</main>

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

  var app = document.getElementById("app");

  // ---------- Query parameters ----------
  var qs = new URLSearchParams(location.search);
  var lat = parseFloat(qs.get("lat"));
  var lon = parseFloat(qs.get("lon"));
  if (!isFinite(lat)) lat = 52.52;
  if (!isFinite(lon)) lon = 13.405;
  var name = qs.get("name") || "Berlin";

  var todayUTC = new Date().toISOString().slice(0, 10);
  var date = qs.get("date") || "";
  if (!/^\d{4}-\d{2}-\d{2}$/.test(date)) date = todayUTC;

  var isPast = date < todayUTC;
  var base = isPast ? "/api/om/archive" : "/api/om/forecast";

  // ---------- WMO weather codes ----------
  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", "thunder"], 96: ["Thunderstorm with slight hail", "thunder"],
    99: ["Thunderstorm with heavy hail", "thunder"]
  };

  var ACCENTS = {
    sun: "#fbbf24", partly: "#d9c07a", cloud: "#9fb0c6",
    fog: "#aebccb", rain: "#5fb8f7", snow: "#bfe2f7", thunder: "#b294f7"
  };

  var ICONS = {
    sun: '<g fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round"><circle cx="32" cy="32" r="10.5"/><path d="M32 9v6M32 49v6M9 32h6M49 32h6M15.7 15.7l4.3 4.3M44 44l4.3 4.3M48.3 15.7L44 20M20 44l-4.3 4.3"/></g>',
    partly: '<g fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="24" cy="24" r="8"/><path d="M24 9.5V13M9.5 24H13M13.7 13.7l2.5 2.5M34.3 13.7l-2.5 2.5M13.7 34.3l2.5-2.5"/><path d="M27 51h18.5a8 8 0 0 0 1-15.9A11.5 11.5 0 0 0 24.4 32 8.5 8.5 0 0 0 27 51z"/></g>',
    cloud: '<g fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 47h24.5a9 9 0 0 0 1.2-17.9A13.5 13.5 0 0 0 19.5 25 10 10 0 0 0 20 47z"/></g>',
    fog: '<g fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 38h23.5a8.5 8.5 0 0 0 1.1-16.9A12.5 12.5 0 0 0 21.6 18 9.4 9.4 0 0 0 21 38z"/><path d="M17 46h30M22 53h20"/></g>',
    rain: '<g fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 40h24.5a9 9 0 0 0 1.2-17.9A13.5 13.5 0 0 0 19.5 18 10 10 0 0 0 20 40z"/><path d="M24 46.5l-2 6M33 46.5l-2 6M42 46.5l-2 6"/></g>',
    snow: '<g fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 40h24.5a9 9 0 0 0 1.2-17.9A13.5 13.5 0 0 0 19.5 18 10 10 0 0 0 20 40z"/><path d="M23 48.5v.1M32 52.5v.1M41 48.5v.1M27.5 55v.1M36.5 45.5v.1" stroke-width="4.4"/></g>',
    thunder: '<g fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 38h25.5a9 9 0 0 0 1.2-17.9A13.5 13.5 0 0 0 18.5 16 10 10 0 0 0 19 38z"/><path d="M33 40l-6 9.5h7L29.5 58"/></g>'
  };

  function esc(s) {
    return String(s).replace(/[&<>"']/g, function (c) {
      return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c];
    });
  }

  function fmtDate(d) {
    try {
      return new Date(d + "T00:00:00Z").toLocaleDateString("en-GB", {
        weekday: "long", day: "numeric", month: "long", year: "numeric", timeZone: "UTC"
      });
    } catch (e) { return d; }
  }

  function fmtTemp(v, dec) {
    return v.toFixed(dec === undefined ? 0 : dec).replace("-0", "0");
  }

  function showError(msg) {
    app.innerHTML =
      '<div class="status error">' +
        '<div class="glyph">!</div>' +
        '<h2>Weather data could not be loaded</h2>' +
        '<p>' + esc(msg) + '</p>' +
        '<p style="margin-top:6px">' + esc(name) + " · " + esc(date) + " · " +
          lat.toFixed(3) + "°, " + lon.toFixed(3) + "°</p>" +
      "</div>";
  }

  // ---------- Chart ----------
  function buildChart(points, accent) {
    // points: [{h: 0..23, v: number}], length >= 2
    var W = 964, H = 250, L = 46, R = 14, T = 22, B = 30;
    var iw = W - L - R, ih = H - T - B;

    var vals = points.map(function (p) { return p.v; });
    var vMin = Math.min.apply(null, vals), vMax = Math.max.apply(null, vals);
    var span = Math.max(vMax - vMin, 2);
    var pad = span * 0.18;
    var yLo = vMin - pad, yHi = vMax + pad;

    // nice tick step
    var rough = (yHi - yLo) / 4;
    var mag = Math.pow(10, Math.floor(Math.log(rough) / Math.LN10));
    var step = [1, 2, 2.5, 5, 10].map(function (m) { return m * mag; })
      .filter(function (s) { return s >= rough; })[0] || 10 * mag;
    var tickLo = Math.ceil(yLo / step) * step;

    function X(h) { return L + (h / 23) * iw; }
    function Y(v) { return T + (1 - (v - yLo) / (yHi - yLo)) * ih; }

    var s = '<svg class="chart" viewBox="0 0 ' + W + " " + H + '" role="img" aria-label="Hourly temperature chart">';
    s += '<defs><linearGradient id="fillGrad" x1="0" y1="0" x2="0" y2="1">' +
         '<stop offset="0" stop-color="' + accent + '" stop-opacity="0.28"/>' +
         '<stop offset="1" stop-color="' + accent + '" stop-opacity="0"/></linearGradient></defs>';

    // horizontal gridlines + y labels
    for (var t = tickLo; t <= yHi + 1e-9; t += step) {
      var gy = Y(t);
      s += '<line x1="' + L + '" x2="' + (W - R) + '" y1="' + gy + '" y2="' + gy +
           '" stroke="rgba(255,255,255,0.07)" stroke-width="1"/>';
      s += '<text x="' + (L - 9) + '" y="' + (gy + 3.5) + '" text-anchor="end" font-size="11" ' +
           'fill="rgba(236,243,252,0.42)">' + fmtTemp(t) + "°</text>";
    }

    // x labels every 3h
    for (var h = 0; h <= 23; h += 3) {
      s += '<text x="' + X(h) + '" y="' + (H - 9) + '" text-anchor="middle" font-size="11" ' +
           'fill="rgba(236,243,252,0.42)">' + (h < 10 ? "0" + h : h) + ":00</text>";
    }

    // paths
    var line = "", area = "";
    points.forEach(function (p, i) {
      var cmd = (i === 0 ? "M" : "L") + X(p.h).toFixed(1) + " " + Y(p.v).toFixed(1);
      line += cmd;
      area += cmd;
    });
    area += "L" + X(points[points.length - 1].h).toFixed(1) + " " + (T + ih) +
            "L" + X(points[0].h).toFixed(1) + " " + (T + ih) + "Z";

    s += '<path d="' + area + '" fill="url(#fillGrad)"/>';
    s += '<path d="' + line + '" fill="none" stroke="' + accent +
         '" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/>';

    // min / max markers
    var pMax = points.reduce(function (a, b) { return b.v > a.v ? b : a; });
    var pMin = points.reduce(function (a, b) { return b.v < a.v ? b : a; });
    [[pMax, "H"], [pMin, "L"]].forEach(function (m) {
      var p = m[0], px = X(p.h), py = Y(p.v);
      var lx = Math.min(Math.max(px, L + 30), W - R - 34);
      var above = m[1] === "H";
      s += '<circle cx="' + px + '" cy="' + py + '" r="4.4" fill="' + accent +
           '" stroke="#0d1428" stroke-width="2"/>';
      s += '<text x="' + lx + '" y="' + (above ? py - 11 : py + 19) +
           '" text-anchor="middle" font-size="11.5" font-weight="700" fill="rgba(242,246,252,0.9)">' +
           m[1] + " " + fmtTemp(p.v, 1) + "°</text>";
    });

    // hover targets + guide (guide/dot toggled by JS)
    s += '<line id="guide" x1="0" x2="0" y1="' + T + '" y2="' + (T + ih) +
         '" stroke="rgba(255,255,255,0.22)" stroke-width="1" stroke-dasharray="3 4" opacity="0"/>';
    s += '<circle id="hoverDot" r="4.6" fill="#0d1428" stroke="' + accent + '" stroke-width="2.4" opacity="0"/>';
    s += '<rect id="hitbox" x="' + L + '" y="' + T + '" width="' + iw + '" height="' + ih + '" fill="transparent"/>';
    s += "</svg>";

    return { svg: s, X: X, Y: Y, L: L, iw: iw, W: W, H: H };
  }

  function attachHover(box, geo, points) {
    var svg = box.querySelector("svg.chart");
    var tip = box.querySelector(".tooltip");
    var guide = svg.querySelector("#guide");
    var dot = svg.querySelector("#hoverDot");

    function move(ev) {
      var rect = svg.getBoundingClientRect();
      var relX = (ev.clientX - rect.left) / rect.width * geo.W;
      var best = points[0], bd = Infinity;
      points.forEach(function (p) {
        var d = Math.abs(geo.X(p.h) - relX);
        if (d < bd) { bd = d; best = p; }
      });
      var px = geo.X(best.h), py = geo.Y(best.v);
      guide.setAttribute("x1", px); guide.setAttribute("x2", px);
      guide.setAttribute("opacity", "1");
      dot.setAttribute("cx", px); dot.setAttribute("cy", py);
      dot.setAttribute("opacity", "1");
      tip.style.left = (px / geo.W * rect.width) + "px";
      tip.style.top = (py / geo.H * rect.height) + "px";
      tip.innerHTML = '<span class="t-hour">' + (best.h < 10 ? "0" + best.h : best.h) +
                      ":00</span>" + fmtTemp(best.v, 1) + "°C";
      tip.style.opacity = "1";
    }
    function leave() {
      tip.style.opacity = "0";
      guide.setAttribute("opacity", "0");
      dot.setAttribute("opacity", "0");
    }
    svg.addEventListener("mousemove", move);
    svg.addEventListener("mouseleave", leave);
  }

  // ---------- Render ----------
  function render(data) {
    var daily = data && data.daily;
    var hourly = data && data.hourly;
    if (!daily || !daily.time || !daily.time.length ||
        daily.temperature_2m_max == null || daily.temperature_2m_min == null) {
      throw new Error("The API response did not contain daily data for this date.");
    }

    var tMax = daily.temperature_2m_max[0];
    var tMin = daily.temperature_2m_min[0];
    var code = daily.weather_code ? daily.weather_code[0] : null;
    if (tMax == null || tMin == null) {
      throw new Error("No temperature data is available for this date and location.");
    }

    var wmo = WMO[code] || ["Unknown conditions", "cloud"];
    var condition = wmo[0], group = wmo[1];
    var accent = ACCENTS[group] || ACCENTS.cloud;

    // hourly points for the requested date
    var points = [];
    if (hourly && hourly.time && hourly.temperature_2m) {
      hourly.time.forEach(function (ts, i) {
        if (ts.slice(0, 10) === date && hourly.temperature_2m[i] != null) {
          points.push({ h: parseInt(ts.slice(11, 13), 10), v: hourly.temperature_2m[i] });
        }
      });
    }
    var hMax = points.length ? Math.max.apply(null, points.map(function (p) { return p.v; })) : null;
    var hMin = points.length ? Math.min.apply(null, points.map(function (p) { return p.v; })) : null;

    var byHour = {};
    points.forEach(function (p) { byHour[p.h] = p.v; });

    var geo = points.length >= 2 ? buildChart(points, accent) : null;

    var cells = "";
    for (var h = 0; h < 24; h++) {
      var v = byHour[h];
      var cls = "hour-cell" + (v === hMax ? " is-max" : v === hMin ? " is-min" : "");
      cells += '<div class="' + cls + '"><div class="h">' + (h < 10 ? "0" + h : h) +
               '</div><div class="t">' + (v == null ? "–" : fmtTemp(v) + "°") + "</div></div>";
    }

    app.style.setProperty("--accent", accent);
    app.innerHTML =
      '<header class="head">' +
        '<div class="place">' +
          '<div class="icon-wrap" style="color:' + accent + '">' +
            '<svg viewBox="0 0 64 64" aria-hidden="true">' + ICONS[group] + "</svg></div>" +
          "<div>" +
            '<div class="kicker">Weather report</div>' +
            "<h1>" + esc(name) + "</h1>" +
            '<div class="date">' + esc(fmtDate(date)) + " · UTC</div>" +
            '<span class="cond"><span class="dot" style="background:' + accent +
              ";box-shadow:0 0 10px " + accent + '"></span>' + esc(condition) + "</span>" +
          "</div>" +
        "</div>" +
        '<div class="temps">' +
          '<div class="temp-block"><div class="label">High</div>' +
            '<div class="val">' + fmtTemp(tMax) + "<sup>°C</sup></div></div>" +
          '<div class="temp-block min"><div class="label">Low</div>' +
            '<div class="val">' + fmtTemp(tMin) + "<sup>°C</sup></div></div>" +
        "</div>" +
      "</header>" +
      '<div class="divider"></div>' +
      '<div class="chart-head"><h3>Hourly temperature</h3><span class="unit">°C · 24 hours, UTC</span></div>' +
      (geo
        ? '<div class="chart-box">' + geo.svg + '<div class="tooltip"></div></div>'
        : '<p style="color:var(--text-mid);font-size:14px;padding:18px 0">Hourly temperatures are not available for this date.</p>') +
      '<div class="hours">' + cells + "</div>" +
      '<div class="foot"><span>' + lat.toFixed(3) + "°N, " + lon.toFixed(3) + "°E</span>" +
        "<span>Source: Open-Meteo " + (isPast ? "archive" : "forecast") + "</span></div>";

    if (geo) attachHover(app.querySelector(".chart-box"), geo, points);
  }

  // ---------- Fetch ----------
  var url = base +
    "?latitude=" + encodeURIComponent(lat) +
    "&longitude=" + encodeURIComponent(lon) +
    "&daily=" + encodeURIComponent("temperature_2m_max,temperature_2m_min,weather_code") +
    "&hourly=temperature_2m" +
    "&timezone=UTC" +
    "&temperature_unit=celsius" +
    "&start_date=" + encodeURIComponent(date) +
    "&end_date=" + encodeURIComponent(date);

  fetch(url)
    .then(function (res) {
      if (!res.ok) throw new Error("The weather service responded with status " + res.status + ".");
      return res.json();
    })
    .then(render)
    .catch(function (err) {
      showError(err && err.message ? err.message : "An unexpected error occurred while fetching the data.");
    });
})();
</script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total	20,754	html / css / js	403 / 6,243 / 14,108
dom nodes	13	dom depth	5
css rules	44	js present	yes
brightness	37.7	contrast	14.5
colorfulness	14.8	whitespace	71.8%

This slot's telemetry

prompt tokens	4	completion tokens	13,931
total tokens	13,935	wall	166.9 s
cost	—	request id	—

config.json560 B

{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_NONE",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "claude-fable-5--cli--claude-code--dev",
  "effort": null,
  "family": "claude",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "claude-fable-5",
  "protocol": "cli",
  "served_model": "claude-fable-5",
  "telemetry": {
    "completion_tokens": 42269,
    "cost_usd": null,
    "prompt_tokens": 16,
    "total_tokens": 42285,
    "wall_ms": 507498
  },
  "transport": "claude-code-cli-headless",
  "vendor_sanction_ref": null
}

send-log2.5 KB

{
  "N": 2,
  "batch_id": "2026-07-17--dev-claude",
  "config_id": "claude-fable-5--cli--claude-code--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-17T09:46:54.015449+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T09:44:07.100751+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-17T09:48:30.964323+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T09:46:59.054173+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-17T09:49:16.115709+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T09:48:34.154644+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-07-17T09:52:46.509352+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T09:49:19.780078+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
    }
  }
}