claude-fable-5 @ medium · CC

CCmedium

config: claude-fable-5-eff-medium--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 @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 neighbors

nearest

claude-opus-4-8 @max · CC0.58 claude-sonnet-4-6 @max · kiro0.58 deepseek-v4-flash-free · api0.58 gpt-5.2-codex @high · api0.58 kimi-k3 · opencode0.58

farthest

claude-fable-5 @low · CC0.41 claude-sonnet-5 @xhigh · kiro0.44 claude-haiku-4-5 @max · CC0.44 north-mini-code-free · api0.45 gpt-5.6-sol @max · codex-oauth0.45

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=1280, initial-scale=1">
<title>Weather</title>
<style>
  :root {
    --ink: #eaf1f7;
    --ink-dim: rgba(234, 241, 247, 0.62);
    --ink-faint: rgba(234, 241, 247, 0.38);
    --card-bg: rgba(16, 26, 40, 0.55);
    --hair: rgba(234, 241, 247, 0.14);
    --accent: #8fd3ff;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background: linear-gradient(160deg, #0c1524 0%, #16263e 46%, #23405d 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
  }
  body::before {
    content: "";
    position: fixed;
    inset: -30%;
    background:
      radial-gradient(42% 38% at 72% 20%, rgba(143, 211, 255, 0.16), transparent 70%),
      radial-gradient(50% 46% at 18% 82%, rgba(96, 132, 255, 0.12), transparent 70%);
    pointer-events: none;
  }
  .card {
    position: relative;
    width: 880px;
    border-radius: 28px;
    background: var(--card-bg);
    border: 1px solid var(--hair);
    box-shadow: 0 30px 80px rgba(3, 8, 16, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    padding: 44px 48px 40px;
  }
  .top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
  }
  .place h1 {
    font-size: 34px;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1.15;
  }
  .place .date {
    margin-top: 6px;
    font-size: 15px;
    color: var(--ink-dim);
    letter-spacing: 0.4px;
  }
  .now {
    display: flex;
    align-items: center;
    gap: 22px;
  }
  .icon { width: 84px; height: 84px; flex: none; }
  .readout { text-align: right; }
  .readout .hi {
    font-size: 56px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -1px;
  }
  .readout .hi sup { font-size: 24px; font-weight: 400; vertical-align: 18px; color: var(--ink-dim); }
  .readout .lo {
    margin-top: 6px;
    font-size: 16px;
    color: var(--ink-dim);
  }
  .cond {
    margin-top: 26px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    letter-spacing: 0.3px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(143, 211, 255, 0.10);
    border: 1px solid rgba(143, 211, 255, 0.22);
    color: #cfeaff;
  }
  .cond .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
  .divider { height: 1px; background: var(--hair); margin: 32px 0 24px; }
  .hourly-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 16px;
  }
  .chart-wrap { position: relative; }
  svg.chart { display: block; width: 100%; height: 190px; overflow: visible; }
  .chart text { font-family: inherit; }
  .status {
    padding: 60px 0 40px;
    text-align: center;
  }
  .status .msg { font-size: 20px; color: var(--ink-dim); }
  .status .sub { margin-top: 10px; font-size: 14px; color: var(--ink-faint); }
  .spinner {
    width: 34px; height: 34px;
    margin: 0 auto 20px;
    border-radius: 50%;
    border: 3px solid rgba(234, 241, 247, 0.15);
    border-top-color: var(--accent);
    animation: spin 0.9s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .hidden { display: none; }
</style>
</head>
<body>
  <main class="card">
    <div id="loading" class="status">
      <div class="spinner"></div>
      <div class="msg">Loading weather…</div>
    </div>

    <div id="error" class="status hidden">
      <div class="msg">Weather data could not be loaded.</div>
      <div class="sub" id="errorDetail"></div>
    </div>

    <div id="content" class="hidden">
      <div class="top">
        <div class="place">
          <h1 id="locName"></h1>
          <div class="date" id="dateLabel"></div>
          <div class="cond"><span class="dot"></span><span id="condLabel"></span></div>
        </div>
        <div class="now">
          <svg id="icon" class="icon" viewBox="0 0 64 64" aria-hidden="true"></svg>
          <div class="readout">
            <div class="hi"><span id="tMax"></span><sup>°C</sup></div>
            <div class="lo">Low <span id="tMin"></span>°C</div>
          </div>
        </div>
      </div>

      <div class="divider"></div>
      <div class="hourly-label">Hourly temperature</div>
      <div class="chart-wrap">
        <svg id="chart" class="chart" viewBox="0 0 800 190" preserveAspectRatio="none"></svg>
      </div>
    </div>
  </main>

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

  var qs = new URLSearchParams(location.search);
  var todayUTC = new Date().toISOString().slice(0, 10);

  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 date = qs.get("date");
  if (!date || !/^\d{4}-\d{2}-\d{2}$/.test(date)) date = todayUTC;

  var 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"
  };

  function iconKind(code) {
    if (code === 0 || code === 1) return "sun";
    if (code === 2) return "partly";
    if (code === 3 || code === 45 || code === 48) return "cloud";
    if (code >= 51 && code <= 67) return "rain";
    if ((code >= 71 && code <= 77) || code === 85 || code === 86) return "snow";
    if (code >= 80 && code <= 82) return "rain";
    if (code >= 95) return "storm";
    return "cloud";
  }

  function drawIcon(kind) {
    var svg = document.getElementById("icon");
    var sun = '<circle cx="32" cy="32" r="12" fill="#ffd479"/><g stroke="#ffd479" stroke-width="3" stroke-linecap="round">' +
      [0,45,90,135,180,225,270,315].map(function (a) {
        var r = a * Math.PI / 180;
        var x1 = 32 + Math.cos(r) * 17, y1 = 32 + Math.sin(r) * 17;
        var x2 = 32 + Math.cos(r) * 23, y2 = 32 + Math.sin(r) * 23;
        return '<line x1="' + x1.toFixed(1) + '" y1="' + y1.toFixed(1) + '" x2="' + x2.toFixed(1) + '" y2="' + y2.toFixed(1) + '"/>';
      }).join("") + "</g>";
    var cloud = function (fill) {
      return '<path fill="' + fill + '" d="M20 46a9 9 0 0 1-1-17.9A13 13 0 0 1 44.4 26 10 10 0 0 1 44 46H20z"/>';
    };
    var drops = '<g stroke="#8fd3ff" stroke-width="3" stroke-linecap="round"><line x1="24" y1="51" x2="22" y2="58"/><line x1="33" y1="51" x2="31" y2="58"/><line x1="42" y1="51" x2="40" y2="58"/></g>';
    var flakes = '<g fill="#eaf1f7"><circle cx="24" cy="54" r="2.4"/><circle cx="33" cy="58" r="2.4"/><circle cx="42" cy="54" r="2.4"/></g>';
    var bolt = '<path fill="#ffd479" d="M33 44 26 56h6l-3 9 10-13h-6l4-8z"/>';
    var html;
    if (kind === "sun") html = sun;
    else if (kind === "partly") html = '<g transform="translate(-6,-6) scale(0.8)">' + sun + "</g>" + cloud("#d7e3ef");
    else if (kind === "cloud") html = cloud("#c3d2e2");
    else if (kind === "rain") html = '<g transform="translate(0,-4)">' + cloud("#b6c8db") + "</g>" + drops;
    else if (kind === "snow") html = '<g transform="translate(0,-4)">' + cloud("#d7e3ef") + "</g>" + flakes;
    else html = '<g transform="translate(0,-6)">' + cloud("#9fb3c8") + "</g>" + bolt;
    svg.innerHTML = html;
  }

  function fmtDate(d) {
    var p = d.split("-");
    var dt = new Date(Date.UTC(+p[0], +p[1] - 1, +p[2]));
    return dt.toLocaleDateString("en-GB", {
      weekday: "long", day: "numeric", month: "long", year: "numeric", timeZone: "UTC"
    });
  }

  function drawChart(hours, temps) {
    var svg = document.getElementById("chart");
    var W = 800, H = 190, padL = 34, padR = 14, padT = 18, padB = 30;
    var n = temps.length;
    var min = Math.min.apply(null, temps), max = Math.max.apply(null, temps);
    if (max - min < 2) { max += 1; min -= 1; }
    var x = function (i) { return padL + (i / (n - 1)) * (W - padL - padR); };
    var y = function (t) { return padT + (1 - (t - min) / (max - min)) * (H - padT - padB); };

    var line = "", area = "";
    for (var i = 0; i < n; i++) {
      var px = x(i).toFixed(1), py = y(temps[i]).toFixed(1);
      line += (i ? " L" : "M") + px + " " + py;
    }
    area = line + " L" + x(n - 1).toFixed(1) + " " + (H - padB) + " L" + x(0).toFixed(1) + " " + (H - padB) + " Z";

    var parts = [];
    parts.push('<defs><linearGradient id="fillGrad" x1="0" y1="0" x2="0" y2="1">' +
      '<stop offset="0" stop-color="#8fd3ff" stop-opacity="0.30"/>' +
      '<stop offset="1" stop-color="#8fd3ff" stop-opacity="0"/></linearGradient></defs>');

    var gridVals = [min, (min + max) / 2, max];
    gridVals.forEach(function (v) {
      var gy = y(v).toFixed(1);
      parts.push('<line x1="' + padL + '" y1="' + gy + '" x2="' + (W - padR) + '" y2="' + gy +
        '" stroke="rgba(234,241,247,0.10)" stroke-width="1" vector-effect="non-scaling-stroke"/>');
      parts.push('<text x="' + (padL - 8) + '" y="' + (+gy + 4) + '" text-anchor="end" font-size="11" fill="rgba(234,241,247,0.45)">' +
        Math.round(v) + "°</text>");
    });

    parts.push('<path d="' + area + '" fill="url(#fillGrad)"/>');
    parts.push('<path d="' + line + '" fill="none" stroke="#8fd3ff" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round" vector-effect="non-scaling-stroke"/>');

    var step = Math.max(1, Math.round(n / 8));
    for (var j = 0; j < n; j += step) {
      var hh = hours[j].slice(11, 16);
      parts.push('<text x="' + x(j).toFixed(1) + '" y="' + (H - 8) + '" text-anchor="middle" font-size="11" fill="rgba(234,241,247,0.45)">' + hh + "</text>");
      parts.push('<circle cx="' + x(j).toFixed(1) + '" cy="' + y(temps[j]).toFixed(1) + '" r="3" fill="#0c1524" stroke="#8fd3ff" stroke-width="2"/>');
    }

    var peak = temps.indexOf(Math.max.apply(null, temps));
    parts.push('<circle cx="' + x(peak).toFixed(1) + '" cy="' + y(temps[peak]).toFixed(1) + '" r="4" fill="#ffd479"/>');
    parts.push('<text x="' + x(peak).toFixed(1) + '" y="' + (y(temps[peak]) - 10).toFixed(1) +
      '" text-anchor="middle" font-size="12" font-weight="600" fill="#ffd479">' + temps[peak].toFixed(1) + "°</text>");

    svg.innerHTML = parts.join("");
  }

  function fail(detail) {
    document.getElementById("loading").classList.add("hidden");
    document.getElementById("content").classList.add("hidden");
    var err = document.getElementById("error");
    err.classList.remove("hidden");
    if (detail) document.getElementById("errorDetail").textContent = detail;
  }

  var base = date < todayUTC ? "/api/om/archive" : "/api/om/forecast";
  var url = base + "?latitude=" + encodeURIComponent(lat) +
    "&longitude=" + encodeURIComponent(lon) +
    "&daily=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 (r) {
      if (!r.ok) throw new Error("HTTP " + r.status);
      return r.json();
    })
    .then(function (data) {
      if (!data || !data.daily || !data.daily.time || !data.daily.time.length ||
          !data.hourly || !data.hourly.time || !data.hourly.time.length) {
        throw new Error("Response missing expected data");
      }
      var tmax = data.daily.temperature_2m_max[0];
      var tmin = data.daily.temperature_2m_min[0];
      var code = data.daily.weather_code[0];
      if (tmax == null || tmin == null) throw new Error("No temperature data for this date");

      var hours = [], temps = [];
      for (var i = 0; i < data.hourly.time.length; i++) {
        if (data.hourly.time[i].slice(0, 10) === date && data.hourly.temperature_2m[i] != null) {
          hours.push(data.hourly.time[i]);
          temps.push(data.hourly.temperature_2m[i]);
        }
      }
      if (!temps.length) throw new Error("No hourly data for this date");

      document.getElementById("locName").textContent = name;
      document.getElementById("dateLabel").textContent = fmtDate(date);
      document.getElementById("tMax").textContent = Math.round(tmax);
      document.getElementById("tMin").textContent = Math.round(tmin);
      document.getElementById("condLabel").textContent =
        (code != null && WMO[code]) ? WMO[code] : "Unknown conditions";
      drawIcon(iconKind(code));
      drawChart(hours, temps);

      document.getElementById("loading").classList.add("hidden");
      document.getElementById("content").classList.remove("hidden");
    })
    .catch(function (e) {
      fail(e && e.message ? e.message : "");
    });
})();
</script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total	13,369	html / css / js	1,382 / 3,355 / 8,632
dom nodes	35	dom depth	9
css rules	29	js present	yes
brightness	39.1	contrast	13.1
colorfulness	18.6	whitespace	56.6%

This slot's telemetry

prompt tokens	2	completion tokens	6,448
total tokens	6,450	wall	63.5 s
cost	—	request id	—

config.json575 B

{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_NONE",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "claude-fable-5-eff-medium--cli--claude-code--dev",
  "effort": "medium",
  "family": "claude",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "claude-fable-5",
  "protocol": "cli",
  "served_model": "claude-fable-5",
  "telemetry": {
    "completion_tokens": 22379,
    "cost_usd": null,
    "prompt_tokens": 10,
    "total_tokens": 22389,
    "wall_ms": 227990
  },
  "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-medium--cli--claude-code--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-17T14:41:01.791089+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T14:39:58.294134+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-17T14:41:35.920307+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T14:41:05.509748+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:42:13.221575+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T14:41:39.514071+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-17T14:43:57.195612+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T14:42:16.817550+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
    }
  }
}