claude-opus-5 @ low · CC

CClow
config
claude-opus-5-eff-low--cli--claude-code--dev
batch
2026-07-19--unified
transport
claude-code-cli-headless
protocol
cli · plan
served model
claude-opus-5
captured
Jul 18, 2026, 11:54 AM · N=2
variant
live
slot 0 · P-q · sandboxed iframe
claude-opus-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

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 Card</title>
<style>
  *, *::before, *::after { box-sizing: border-box; }
  :root {
    --ink: #0d1b2a;
    --ink-2: #3c4f63;
    --ink-3: #7a8ca0;
    --line: rgba(13, 27, 42, 0.10);
    --card: rgba(255, 255, 255, 0.72);
    --accent: #2f6fed;
    --warm: #e8833a;
    --cool: #4a9fd8;
  }
  html, body { height: 100%; }
  body {
    margin: 0;
    font-family: ui-sans-serif, -apple-system, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background:
      radial-gradient(1100px 700px at 12% -10%, #cfe4ff 0%, rgba(207,228,255,0) 60%),
      radial-gradient(900px 600px at 92% 8%, #ffe6cf 0%, rgba(255,230,207,0) 58%),
      radial-gradient(1000px 800px at 60% 110%, #e3dcff 0%, rgba(227,220,255,0) 60%),
      linear-gradient(160deg, #f4f7fb 0%, #eef2f8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px;
    -webkit-font-smoothing: antialiased;
  }

  .card {
    width: 1120px;
    background: var(--card);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    border: 1px solid rgba(255,255,255,0.75);
    border-radius: 28px;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.9) inset,
      0 30px 70px -30px rgba(13, 27, 42, 0.35),
      0 2px 8px rgba(13, 27, 42, 0.06);
    overflow: hidden;
  }

  .head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    padding: 38px 44px 30px;
    border-bottom: 1px solid var(--line);
  }
  .place { min-width: 0; }
  .eyebrow {
    font-size: 11px; font-weight: 650; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 10px;
  }
  h1 {
    margin: 0; font-size: 42px; line-height: 1.05; font-weight: 660; letter-spacing: -0.025em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 560px;
  }
  .date { margin-top: 10px; font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .coords { margin-top: 4px; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

  .now { display: flex; align-items: center; gap: 26px; }
  .icon { width: 92px; height: 92px; flex: none; }
  .readout { text-align: right; }
  .cond { font-size: 17px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
  .temps { display: flex; align-items: baseline; gap: 16px; justify-content: flex-end; }
  .tmax {
    font-size: 68px; font-weight: 300; letter-spacing: -0.035em; line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .tmin {
    font-size: 30px; font-weight: 300; color: var(--ink-3); line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .deg { font-size: 0.55em; vertical-align: super; font-weight: 400; }

  .body { padding: 30px 44px 40px; }
  .sec-head {
    display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px;
  }
  .sec-title { font-size: 11px; font-weight: 650; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
  .legend { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

  .chart { position: relative; height: 210px; margin-top: 14px; }
  .chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .axis { display: flex; margin-top: 10px; }
  .axis span {
    flex: 1 1 0; text-align: center; font-size: 10.5px; color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .axis span.on { color: var(--ink-2); font-weight: 600; }

  .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; margin-top: 26px; }
  .cell {
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.9);
    border-radius: 12px;
    padding: 9px 6px 10px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(13,27,42,0.05);
  }
  .cell .h { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }
  .cell .t { font-size: 16px; font-weight: 560; margin-top: 3px; font-variant-numeric: tabular-nums; }

  .state {
    padding: 90px 44px; text-align: center; color: var(--ink-2);
  }
  .state h2 { margin: 0 0 8px; font-size: 21px; font-weight: 620; letter-spacing: -0.01em; color: var(--ink); }
  .state p { margin: 0; font-size: 14px; color: var(--ink-3); max-width: 520px; margin-inline: auto; line-height: 1.6; }
  .spinner {
    width: 26px; height: 26px; border-radius: 50%; margin: 0 auto 20px;
    border: 2.5px solid rgba(13,27,42,0.12); border-top-color: var(--accent);
    animation: spin 0.85s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .hidden { display: none !important; }
</style>
</head>
<body>
<main class="card">
  <div id="loading" class="state">
    <div class="spinner"></div>
    <h2>Loading weather…</h2>
    <p>Fetching conditions for the requested location and date.</p>
  </div>

  <div id="error" class="state hidden">
    <h2>Weather data could not be loaded</h2>
    <p id="errmsg">The forecast service did not return usable data.</p>
  </div>

  <div id="content" class="hidden">
    <header class="head">
      <div class="place">
        <div class="eyebrow">Daily Weather</div>
        <h1 id="name">—</h1>
        <div class="date" id="date">—</div>
        <div class="coords" id="coords">—</div>
      </div>
      <div class="now">
        <div class="icon" id="icon"></div>
        <div class="readout">
          <div class="cond" id="cond">—</div>
          <div class="temps">
            <div class="tmax" id="tmax">—<span class="deg">°C</span></div>
            <div class="tmin" id="tmin">—<span class="deg">°C</span></div>
          </div>
        </div>
      </div>
    </header>
    <section class="body">
      <div class="sec-head">
        <div class="sec-title">Hourly temperature — UTC</div>
        <div class="legend" id="legend"></div>
      </div>
      <div class="chart" id="chart"></div>
      <div class="axis" id="axis"></div>
      <div class="grid" id="grid"></div>
    </section>
  </div>
</main>

<script>
(function () {
  var q = new URLSearchParams(location.search);
  function num(v, d) { var n = parseFloat(v); return isFinite(n) ? n : d; }
  var lat = num(q.get('lat'), 52.52);
  var lon = num(q.get('lon'), 13.405);
  var name = (q.get('name') || '').trim() || 'Berlin';
  var today = new Date().toISOString().slice(0, 10);
  var date = /^\d{4}-\d{2}-\d{2}$/.test(q.get('date') || '') ? q.get('date') : today;

  var CODES = {
    0: ['Clear sky', 'sun'], 1: ['Mainly clear', 'sun-cloud'], 2: ['Partly cloudy', 'sun-cloud'],
    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']
  };

  var S = 'stroke-linecap="round" stroke-linejoin="round" fill="none"';
  var ICONS = {
    sun: '<circle cx="32" cy="32" r="13" fill="#f6b73c"/><g stroke="#f6b73c" stroke-width="4.5" ' + S + '><path d="M32 6v7M32 51v7M6 32h7M51 32h7M13.6 13.6l5 5M45.4 45.4l5 5M50.4 13.6l-5 5M18.6 45.4l-5 5"/></g>',
    'sun-cloud': '<circle cx="24" cy="23" r="10" fill="#f6b73c"/><g stroke="#f6b73c" stroke-width="4" ' + S + '><path d="M24 3v6M4 23h6M9.9 8.9l4.2 4.2M38.1 8.9l-4.2 4.2"/></g><path d="M20 46a9.5 9.5 0 0 1 .8-19 13.5 13.5 0 0 1 25.6 4.2A8.4 8.4 0 0 1 45 46z" fill="#dbe6f2" stroke="#a8bdd2" stroke-width="2.5"/>',
    cloud: '<path d="M18 48a11 11 0 0 1 1-22 15 15 0 0 1 28.6 4.7A9.5 9.5 0 0 1 46 48z" fill="#dbe6f2" stroke="#a8bdd2" stroke-width="2.5"/>',
    fog: '<path d="M18 38a11 11 0 0 1 1-22 15 15 0 0 1 28.6 4.7A9.5 9.5 0 0 1 46 38z" fill="#dbe6f2" stroke="#a8bdd2" stroke-width="2.5"/><g stroke="#a8bdd2" stroke-width="4" ' + S + '><path d="M12 47h40M18 56h30"/></g>',
    drizzle: '<path d="M18 38a11 11 0 0 1 1-22 15 15 0 0 1 28.6 4.7A9.5 9.5 0 0 1 46 38z" fill="#dbe6f2" stroke="#a8bdd2" stroke-width="2.5"/><g stroke="#4a9fd8" stroke-width="4" ' + S + '><path d="M24 45v4M34 45v6M44 45v4"/></g>',
    rain: '<path d="M18 36a11 11 0 0 1 1-22 15 15 0 0 1 28.6 4.7A9.5 9.5 0 0 1 46 36z" fill="#dbe6f2" stroke="#a8bdd2" stroke-width="2.5"/><g stroke="#3d87c9" stroke-width="4.5" ' + S + '><path d="M23 43l-3 10M34 43l-3 12M45 43l-3 10"/></g>',
    snow: '<path d="M18 36a11 11 0 0 1 1-22 15 15 0 0 1 28.6 4.7A9.5 9.5 0 0 1 46 36z" fill="#dbe6f2" stroke="#a8bdd2" stroke-width="2.5"/><g fill="#7fb8e0"><circle cx="23" cy="47" r="3"/><circle cx="34" cy="53" r="3"/><circle cx="45" cy="47" r="3"/></g>',
    storm: '<path d="M18 36a11 11 0 0 1 1-22 15 15 0 0 1 28.6 4.7A9.5 9.5 0 0 1 46 36z" fill="#cdd9e6" stroke="#93a8bd" stroke-width="2.5"/><path d="M34 38l-9 13h8l-3 11 12-15h-8l4-9z" fill="#f6b73c"/>'
  };

  function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
  function show(id) {
    ['loading', 'error', 'content'].forEach(function (k) { document.getElementById(k).classList.toggle('hidden', k !== id); });
  }
  function fail(msg) {
    document.getElementById('errmsg').textContent = msg;
    show('error');
  }
  function r1(v) { return (Math.round(v * 10) / 10).toFixed(1); }

  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(temps) {
    var el = document.getElementById('chart');
    var pts = [];
    temps.forEach(function (t, i) { if (typeof t === 'number' && isFinite(t)) pts.push([i, t]); });
    if (pts.length < 2) { el.innerHTML = '<div style="color:var(--ink-3);font-size:13px;padding-top:80px;text-align:center">No hourly series available.</div>'; return; }

    var W = 1032, H = 210, padT = 26, padB = 14;
    var vals = pts.map(function (p) { return p[1]; });
    var lo = Math.min.apply(null, vals), hi = Math.max.apply(null, vals);
    if (hi - lo < 1) { hi += 0.5; lo -= 0.5; }
    var n = temps.length;
    function X(i) { return (i + 0.5) / n * W; }
    function Y(v) { return padT + (1 - (v - lo) / (hi - lo)) * (H - padT - padB); }

    var d = pts.map(function (p, i) { return (i ? 'L' : 'M') + X(p[0]).toFixed(2) + ' ' + Y(p[1]).toFixed(2); }).join(' ');
    var area = d + ' L' + X(pts[pts.length - 1][0]).toFixed(2) + ' ' + H + ' L' + X(pts[0][0]).toFixed(2) + ' ' + H + ' Z';

    var iMax = 0, iMin = 0;
    pts.forEach(function (p, i) { if (p[1] > pts[iMax][1]) iMax = i; if (p[1] < pts[iMin][1]) iMin = i; });

    function marker(p, color, label, above) {
      var x = X(p[0]), y = Y(p[1]);
      return '<circle cx="' + x.toFixed(2) + '" cy="' + y.toFixed(2) + '" r="5" fill="#fff" stroke="' + color + '" stroke-width="3"/>' +
        '<text x="' + x.toFixed(2) + '" y="' + (y + (above ? -14 : 22)).toFixed(2) + '" text-anchor="middle" font-size="12.5" font-weight="600" fill="' + color + '">' + r1(p[1]) + '°</text>';
    }

    var lines = '';
    for (var g = 0; g <= 3; g++) {
      var y = padT + g / 3 * (H - padT - padB);
      var v = hi - g / 3 * (hi - lo);
      lines += '<line x1="0" y1="' + y.toFixed(1) + '" x2="' + W + '" y2="' + y.toFixed(1) + '" stroke="rgba(13,27,42,0.07)" stroke-width="1"/>' +
        '<text x="4" y="' + (y - 5).toFixed(1) + '" font-size="10.5" fill="#7a8ca0">' + Math.round(v) + '°</text>';
    }

    el.innerHTML =
      '<svg viewBox="0 0 ' + W + ' ' + H + '" preserveAspectRatio="none" role="img" aria-label="Hourly temperature chart">' +
      '<defs><linearGradient id="fill" x1="0" y1="0" x2="0" y2="1">' +
      '<stop offset="0%" stop-color="#2f6fed" stop-opacity="0.28"/>' +
      '<stop offset="100%" stop-color="#2f6fed" stop-opacity="0.02"/></linearGradient>' +
      '<linearGradient id="stroke" x1="0" y1="0" x2="1" y2="0">' +
      '<stop offset="0%" stop-color="#4a9fd8"/><stop offset="100%" stop-color="#e8833a"/></linearGradient></defs>' +
      lines +
      '<path d="' + area + '" fill="url(#fill)"/>' +
      '<path d="' + d + '" stroke="url(#stroke)" stroke-width="2.75" fill="none" stroke-linecap="round" stroke-linejoin="round"/>' +
      marker(pts[iMax], '#d16a22', 'max', true) +
      marker(pts[iMin], '#3d87c9', 'min', false) +
      '</svg>';
  }

  function render(data) {
    var daily = data.daily || {};
    var hourly = data.hourly || {};
    var times = hourly.time || [];
    var temps = hourly.temperature_2m || [];
    var hs = [], hv = [];
    for (var i = 0; i < times.length; i++) {
      if (String(times[i]).slice(0, 10) === date) { hs.push(String(times[i]).slice(11, 16)); hv.push(temps[i]); }
    }

    var tmax = (daily.temperature_2m_max || [])[0];
    var tmin = (daily.temperature_2m_min || [])[0];
    var code = (daily.weather_code || [])[0];
    var clean = hv.filter(function (t) { return typeof t === 'number' && isFinite(t); });
    if (typeof tmax !== 'number' && clean.length) tmax = Math.max.apply(null, clean);
    if (typeof tmin !== 'number' && clean.length) tmin = Math.min.apply(null, clean);

    if (typeof tmax !== 'number' && typeof tmin !== 'number' && !clean.length) {
      fail('The service returned no temperature data for ' + date + '.');
      return;
    }

    var info = CODES[code] || ['Condition unavailable', 'cloud'];
    document.getElementById('name').textContent = name;
    document.getElementById('name').title = name;
    document.getElementById('date').textContent = fmtDate(date) + ' · ' + date;
    document.getElementById('coords').textContent = lat.toFixed(3) + '°, ' + lon.toFixed(3) + '°';
    document.getElementById('cond').textContent = info[0];
    document.getElementById('icon').innerHTML = '<svg viewBox="0 0 64 64" width="92" height="92" aria-hidden="true">' + ICONS[info[1]] + '</svg>';
    document.getElementById('tmax').innerHTML = (typeof tmax === 'number' ? r1(tmax) : '—') + '<span class="deg">°C</span>';
    document.getElementById('tmin').innerHTML = (typeof tmin === 'number' ? r1(tmin) : '—') + '<span class="deg">°C</span>';
    document.getElementById('legend').textContent = clean.length ? clean.length + ' hourly readings · °C' : 'no hourly readings';

    drawChart(hv);

    var axis = '';
    hs.forEach(function (h, i) {
      axis += '<span class="' + (i % 3 === 0 ? 'on' : '') + '">' + (i % 3 === 0 ? esc(h) : '·') + '</span>';
    });
    document.getElementById('axis').innerHTML = axis;

    var grid = '';
    hs.forEach(function (h, i) {
      var t = hv[i];
      grid += '<div class="cell"><div class="h">' + esc(h) + '</div><div class="t">' +
        (typeof t === 'number' && isFinite(t) ? r1(t) + '°' : '—') + '</div></div>';
    });
    document.getElementById('grid').innerHTML = grid;

    show('content');
  }

  var isPast = date < today;
  var url = (isPast ? '/api/om/archive' : '/api/om/forecast') + '?' + 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
  }).toString();

  fetch(url, { headers: { accept: 'application/json' } })
    .then(function (res) {
      if (!res.ok) throw new Error('Service responded with HTTP ' + res.status + '.');
      return res.json();
    })
    .then(function (data) {
      if (!data || data.error) throw new Error(data && data.reason ? String(data.reason) : 'Invalid response payload.');
      render(data);
    })
    .catch(function (e) {
      fail('Weather data for ' + name + ' on ' + date + ' is unavailable. ' + (e && e.message ? e.message : ''));
    });
})();
</script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total16,570html / css / js1,586 / 4,667 / 10,317
dom nodes39dom depth10
css rules39js presentyes
brightness241.3contrast15.5
colorfulness14.6whitespace98.4%

This slot's telemetry

prompt tokens2completion tokens8,283
total tokens8,285wall81 s
costrequest id
config.json565 B
{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_NONE",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "claude-opus-5-eff-low--cli--claude-code--dev",
  "effort": "low",
  "family": "claude",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "claude-opus-5",
  "protocol": "cli",
  "served_model": "claude-opus-5",
  "telemetry": {
    "completion_tokens": 23186,
    "cost_usd": null,
    "prompt_tokens": 8,
    "total_tokens": 23194,
    "wall_ms": 231039
  },
  "transport": "claude-code-cli-headless",
  "vendor_sanction_ref": null
}
send-log2.5 KB
{
  "N": 2,
  "batch_id": "2026-07-25--cc-opus5",
  "config_id": "claude-opus-5-eff-low--cli--claude-code--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-24T17:26:56.779371+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-24T17:26:24.769680+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-24T17:28:21.617098+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-24T17:27:00.589394+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-24T17:29:45.558046+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-24T17:28:25.193283+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-24T17:30:28.066551+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-24T17:29:50.422926+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
    }
  }
}