claude-opus-4-8 @ low · CC

CClow
config
claude-opus-4-8-eff-low--cli--claude-code--dev
batch
2026-07-19--unified
transport
claude-code-cli-headless
protocol
cli · plan
served model
claude-opus-4-8
captured
Jul 18, 2026, 11:54 AM · N=2
variant
live
slot 0 · P-q · sandboxed iframe
claude-opus-4-8 @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 tempmatchshown: 25
  • min tempmatchshown: 16
  • 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 Card</title>
<style>
  :root{
    --bg-1:#0f1729;
    --bg-2:#1e2a4a;
    --card:rgba(255,255,255,0.08);
    --card-border:rgba(255,255,255,0.16);
    --text:#f3f6ff;
    --muted:#a8b4d4;
    --accent:#ffd166;
    --shadow:0 30px 80px -20px rgba(0,0,0,0.6);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html,body{height:100%;}
  body{
    width:1280px;height:800px;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--text);
    background:
      radial-gradient(1200px 600px at 15% -10%, rgba(120,150,255,0.35), transparent 55%),
      radial-gradient(1000px 700px at 110% 120%, rgba(255,150,120,0.20), transparent 55%),
      linear-gradient(160deg, var(--bg-1), var(--bg-2));
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
  }
  .card{
    width:1080px;height:640px;
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:32px;
    box-shadow:var(--shadow);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    display:grid;
    grid-template-columns:420px 1fr;
    overflow:hidden;
  }
  /* Left panel */
  .left{
    padding:48px 44px;
    display:flex;flex-direction:column;
    background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0));
    border-right:1px solid var(--card-border);
  }
  .loc{font-size:34px;font-weight:700;letter-spacing:-0.5px;line-height:1.1;}
  .date{margin-top:8px;color:var(--muted);font-size:17px;font-weight:500;}
  .hero{margin-top:auto;display:flex;flex-direction:column;gap:6px;}
  .icon{font-size:96px;line-height:1;filter:drop-shadow(0 8px 20px rgba(0,0,0,0.35));}
  .cond{font-size:24px;font-weight:600;margin-top:12px;}
  .temps{display:flex;align-items:baseline;gap:20px;margin-top:20px;}
  .tmax{font-size:76px;font-weight:800;letter-spacing:-2px;line-height:0.9;}
  .tmax .deg{font-size:40px;font-weight:700;vertical-align:top;color:var(--accent);}
  .tmin{font-size:22px;color:var(--muted);font-weight:600;}
  .tmin .lbl{display:block;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:2px;}
  .range{display:flex;gap:28px;margin-top:6px;}
  .range .lbl{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);}
  .range .val{font-size:26px;font-weight:700;}
  .range .val.min{color:#8fb4ff;}
  .range .val.max{color:var(--accent);}
  /* Right panel */
  .right{padding:44px 40px;display:flex;flex-direction:column;}
  .right h2{font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:24px;}
  .chart{flex:1;position:relative;}
  .chart svg{width:100%;height:100%;overflow:visible;}
  .hours{display:flex;justify-content:space-between;margin-top:14px;}
  .hour{font-size:11px;color:var(--muted);text-align:center;width:0;white-space:nowrap;}
  .dot{fill:var(--accent);}
  .valtxt{fill:var(--text);font-size:11px;font-weight:600;text-anchor:middle;}
  /* States */
  .state{
    width:1080px;color:var(--text);text-align:center;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:14px;
  }
  .state .big{font-size:60px;}
  .state .msg{font-size:22px;font-weight:600;}
  .state .sub{font-size:15px;color:var(--muted);max-width:520px;}
  .spinner{
    width:44px;height:44px;border-radius:50%;
    border:4px solid rgba(255,255,255,0.15);border-top-color:var(--accent);
    animation:spin 0.9s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
</style>
</head>
<body>
<div id="root">
  <div class="state">
    <div class="spinner"></div>
    <div class="msg">Loading weather…</div>
  </div>
</div>
<script>
(function(){
  var WMO = {
    0:["Clear sky","☀️"],1:["Mainly clear","🌤️"],2:["Partly cloudy","⛅"],3:["Overcast","☁️"],
    45:["Fog","🌫️"],48:["Rime fog","🌫️"],
    51:["Light drizzle","🌦️"],53:["Drizzle","🌦️"],55:["Dense drizzle","🌧️"],
    56:["Freezing drizzle","🌧️"],57:["Freezing drizzle","🌧️"],
    61:["Slight rain","🌦️"],63:["Rain","🌧️"],65:["Heavy rain","🌧️"],
    66:["Freezing rain","🌧️"],67:["Freezing rain","🌧️"],
    71:["Slight snow","🌨️"],73:["Snow","❄️"],75:["Heavy snow","❄️"],77:["Snow grains","❄️"],
    80:["Rain showers","🌦️"],81:["Rain showers","🌧️"],82:["Violent showers","⛈️"],
    85:["Snow showers","🌨️"],86:["Snow showers","🌨️"],
    95:["Thunderstorm","⛈️"],96:["Thunderstorm","⛈️"],99:["Thunderstorm","⛈️"]
  };
  function cond(code){ return WMO[code] || ["Unknown","❓"]; }

  var q = new URLSearchParams(location.search);
  var lat = q.get("lat") || "52.52";
  var lon = q.get("lon") || "13.405";
  var name = q.get("name") || "Berlin";
  function todayUTC(){
    var d = new Date();
    return d.toISOString().slice(0,10);
  }
  var date = q.get("date") || todayUTC();

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

  var isPast = date < todayUTC();
  var base = isPast ? "/api/om/archive" : "/api/om/forecast";
  var params = new URLSearchParams({
    latitude: lat, longitude: lon,
    daily: "temperature_2m_max,temperature_2m_min,weather_code",
    hourly: "temperature_2m",
    timezone: "UTC",
    temperature_unit: "celsius",
    start_date: date, end_date: date
  });

  function fail(sub){
    document.getElementById("root").innerHTML =
      '<div class="state">'+
      '<div class="big">⚠️</div>'+
      '<div class="msg">Weather data could not be loaded.</div>'+
      '<div class="sub">'+ (sub||"") +'</div>'+
      '</div>';
  }

  fetch(base + "?" + params.toString())
    .then(function(r){ if(!r.ok) throw new Error("HTTP "+r.status); return r.json(); })
    .then(function(d){ render(d); })
    .catch(function(e){ fail(String(e.message||e)); });

  function render(d){
    if(!d || !d.daily || !d.hourly) { fail("Response missing expected fields."); return; }
    var dy = d.daily;
    var tmax = dy.temperature_2m_max && dy.temperature_2m_max[0];
    var tmin = dy.temperature_2m_min && dy.temperature_2m_min[0];
    var code = dy.weather_code && dy.weather_code[0];
    if(tmax==null || tmin==null){ fail("No temperature data for this date."); return; }
    var c = cond(code);

    var times = d.hourly.time || [];
    var temps = d.hourly.temperature_2m || [];
    var pts = [];
    for(var i=0;i<times.length;i++){
      if(temps[i]==null) continue;
      var hh = times[i].slice(11,13);
      pts.push({h:parseInt(hh,10), t:temps[i]});
    }
    if(pts.length===0){ fail("No hourly data for this date."); return; }

    var round = function(x){ return Math.round(x); };

    // chart geometry
    var W=560,H=300;
    var vals = pts.map(function(p){return p.t;});
    var lo = Math.min.apply(null,vals), hi = Math.max.apply(null,vals);
    if(hi===lo){ hi=lo+1; lo=lo-1; }
    var padTop=36, padBot=18;
    function x(i){ return pts.length>1 ? (i/(pts.length-1))*W : W/2; }
    function y(t){ return padTop + (1-(t-lo)/(hi-lo))*(H-padTop-padBot); }

    var linePts = pts.map(function(p,i){ return x(i)+","+y(p.t); }).join(" ");
    var areaPts = "0,"+H+" " + linePts + " " + W+","+H;

    // dots + labels: show every 3rd hour to avoid clutter
    var marks="", hourLabels="";
    for(var i=0;i<pts.length;i++){
      if(i%3===0){
        marks += '<circle class="dot" cx="'+x(i)+'" cy="'+y(pts[i].t)+'" r="4"></circle>';
        marks += '<text class="valtxt" x="'+x(i)+'" y="'+(y(pts[i].t)-12)+'">'+round(pts[i].t)+'°</text>';
        var lbl = (pts[i].h<10?"0":"")+pts[i].h+":00";
        hourLabels += '<div class="hour" style="width:'+(100/Math.ceil(pts.length/3))+'%">'+lbl+'</div>';
      }
    }

    var html =
    '<div class="card">'+
      '<div class="left">'+
        '<div class="loc">'+ esc(name) +'</div>'+
        '<div class="date">'+ fmtDate(date) +'</div>'+
        '<div class="hero">'+
          '<div class="icon">'+ c[1] +'</div>'+
          '<div class="cond">'+ c[0] +'</div>'+
          '<div class="range">'+
            '<div><div class="lbl">High</div><div class="val max">'+ round(tmax) +'°C</div></div>'+
            '<div><div class="lbl">Low</div><div class="val min">'+ round(tmin) +'°C</div></div>'+
          '</div>'+
        '</div>'+
      '</div>'+
      '<div class="right">'+
        '<h2>Hourly Temperature · °C</h2>'+
        '<div class="chart">'+
          '<svg viewBox="0 0 '+W+' '+H+'" preserveAspectRatio="none">'+
            '<defs>'+
              '<linearGradient id="fill" x1="0" y1="0" x2="0" y2="1">'+
                '<stop offset="0%" stop-color="rgba(255,209,102,0.45)"/>'+
                '<stop offset="100%" stop-color="rgba(255,209,102,0)"/>'+
              '</linearGradient>'+
            '</defs>'+
            '<polygon points="'+areaPts+'" fill="url(#fill)"/>'+
            '<polyline points="'+linePts+'" fill="none" stroke="#ffd166" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/>'+
            marks+
          '</svg>'+
        '</div>'+
        '<div class="hours">'+ hourLabels +'</div>'+
      '</div>'+
    '</div>';

    document.getElementById("root").innerHTML = html;
  }

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

L1 — cheap deterministic descriptors

bytes total9,688html / css / js348 / 3,522 / 5,818
dom nodes12dom depth5
css rules36js presentyes
brightness53.6contrast22.4
colorfulness23.5whitespace60.0%

This slot's telemetry

prompt tokens2completion tokens4,900
total tokens4,902wall54.8 s
costrequest id
config.json572 B
{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_NONE",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "claude-opus-4-8-eff-low--cli--claude-code--dev",
  "effort": "low",
  "family": "claude",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "claude-opus-4-8",
  "protocol": "cli",
  "served_model": "claude-opus-4-8",
  "telemetry": {
    "completion_tokens": 18736,
    "cost_usd": null,
    "prompt_tokens": 10,
    "total_tokens": 18746,
    "wall_ms": 207733
  },
  "transport": "claude-code-cli-headless",
  "vendor_sanction_ref": null
}
send-log2.5 KB
{
  "N": 2,
  "batch_id": "2026-07-17--dev-cc-opus48",
  "config_id": "claude-opus-4-8-eff-low--cli--claude-code--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-17T13:51:17.078285+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T13:50:41.811634+00:00"
        }
      ],
      "block_index": 0,
      "model_reaching_attempt_index": 0,
      "slot_index": 0,
      "terminal_state": "valid",
      "variant": "P-min"
    },
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-17T13:52:15.526161+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T13:51:20.733340+00:00"
        }
      ],
      "block_index": 0,
      "model_reaching_attempt_index": 0,
      "slot_index": 0,
      "terminal_state": "valid",
      "variant": "P-q"
    },
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-17T13:53:27.065801+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T13:52:18.818443+00:00"
        }
      ],
      "block_index": 1,
      "model_reaching_attempt_index": 0,
      "slot_index": 1,
      "terminal_state": "valid",
      "variant": "P-q"
    },
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-17T13:54:20.051259+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T13:53:30.612921+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
    }
  }
}