claude-sonnet-5 @ low · CC

CClow

config: claude-sonnet-5-eff-low--cli--claude-code--dev
batch: 2026-07-19--unified
transport: claude-code-cli-headless
protocol: cli · plan
served model: claude-sonnet-5
captured: Jul 18, 2026, 11:54 AM · N=2

variant

live

slot 0 · P-q · sandboxed iframe

claude-sonnet-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

nearest

claude-opus-4-7 @low · kiro0.78 claude-sonnet-4-6 @max · kiro0.77 grok-4.5 @high · grok-cli0.77 gpt-5.6-sol @low · codex-oauth0.75 gpt-5.6-terra @low · kiro0.75

farthest

gpt-5.6-terra @medium · kiro0.42 deepseek-v3.2 · kiro0.45 claude-haiku-4-5 @high · CC0.45 minimax-m2.5 · go0.47 gpt-5.6-luna @medium · codex-oauth0.47

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">
<title>Weather Card</title>
<style>
  :root {
    --bg1: #0f2027;
    --bg2: #203a43;
    --bg3: #2c5364;
    --card-bg: rgba(255,255,255,0.08);
    --text: #eef3f7;
    --muted: #9fb3c1;
    --accent: #6ec6ff;
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0;
    padding: 0;
    width: 1280px;
    height: 800px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: radial-gradient(circle at 20% 15%, #274b5e 0%, var(--bg1) 45%, #060d10 100%);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .card {
    width: 980px;
    height: 660px;
    background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.1);
    backdrop-filter: blur(20px);
    padding: 44px 52px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
  }

  .card::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, rgba(110,198,255,0.35), transparent 70%);
    pointer-events: none;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 1;
  }

  .location {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.5px;
  }

  .date {
    font-size: 16px;
    color: var(--muted);
    margin-top: 6px;
    font-weight: 500;
  }

  .condition-badge {
    text-align: right;
  }

  .condition-icon {
    font-size: 52px;
    line-height: 1;
  }

  .condition-text {
    font-size: 15px;
    color: var(--muted);
    margin-top: 6px;
    font-weight: 600;
  }

  .main-stats {
    display: flex;
    align-items: baseline;
    gap: 28px;
    margin-top: 34px;
    z-index: 1;
  }

  .temp-range {
    display: flex;
    align-items: baseline;
    gap: 18px;
  }

  .temp-max {
    font-size: 96px;
    font-weight: 800;
    letter-spacing: -3px;
    background: linear-gradient(180deg, #ffffff, #c8dce6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .temp-min {
    font-size: 40px;
    font-weight: 500;
    color: var(--muted);
  }

  .stat-pill {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 18px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
  }

  .stat-pill .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
  }

  .stat-pill .value {
    font-size: 20px;
    font-weight: 700;
  }

  .divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    margin: 32px 0 24px;
  }

  .hourly-title {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 18px;
  }

  .hourly-chart {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 0 2px;
  }

  .hour-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 6px;
  }

  .hour-bar .temp-label {
    font-size: 11px;
    color: var(--text);
    font-weight: 600;
    opacity: 0.85;
  }

  .hour-bar .bar {
    width: 100%;
    max-width: 16px;
    border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, var(--accent), #2f6690);
    box-shadow: 0 0 12px rgba(110,198,255,0.25);
  }

  .hour-bar .hour-label {
    font-size: 10px;
    color: var(--muted);
    margin-top: 2px;
  }

  .status {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 20px;
    color: var(--muted);
    text-align: center;
    gap: 12px;
  }

  .spinner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.15);
    border-top-color: var(--accent);
    animation: spin 0.9s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  .error-box {
    color: #ffb4b4;
    font-weight: 600;
  }

  .hidden { display: none !important; }
</style>
</head>
<body>
  <div class="card">
    <div id="statusView" class="status">
      <div class="spinner"></div>
      <div>Loading weather data…</div>
    </div>

    <div id="contentView" class="hidden" style="display:flex; flex-direction:column; height:100%;">
      <div class="header">
        <div>
          <div class="location" id="locationName"></div>
          <div class="date" id="dateLabel"></div>
        </div>
        <div class="condition-badge">
          <div class="condition-icon" id="conditionIcon"></div>
          <div class="condition-text" id="conditionText"></div>
        </div>
      </div>

      <div class="main-stats">
        <div class="temp-range">
          <div class="temp-max" id="tempMax"></div>
          <div class="temp-min" id="tempMin"></div>
        </div>
        <div class="stat-pill">
          <div class="label">High</div>
          <div class="value" id="pillHigh"></div>
        </div>
        <div class="stat-pill">
          <div class="label">Low</div>
          <div class="value" id="pillLow"></div>
        </div>
      </div>

      <div class="divider"></div>
      <div class="hourly-title">Hourly Temperature</div>
      <div class="hourly-chart" id="hourlyChart"></div>
    </div>
  </div>

<script>
(function() {
  const WMO_CODES = {
    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 snow fall", "🌨️"],
    73: ["Moderate snow fall", "🌨️"],
    75: ["Heavy snow fall", "❄️"],
    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 getParams() {
    const p = new URLSearchParams(window.location.search);
    const today = new Date().toISOString().slice(0, 10);
    return {
      lat: parseFloat(p.get("lat")) || 52.52,
      lon: parseFloat(p.get("lon")) || 13.405,
      name: p.get("name") || "Berlin",
      date: p.get("date") || today,
    };
  }

  function formatDateLabel(dateStr) {
    const d = new Date(dateStr + "T00:00:00Z");
    return d.toLocaleDateString("en-US", {
      weekday: "long", year: "numeric", month: "long", day: "numeric", timeZone: "UTC"
    });
  }

  function formatHour(hourStr) {
    const h = parseInt(hourStr.split("T")[1].split(":")[0], 10);
    if (h === 0) return "12a";
    if (h === 12) return "12p";
    return h < 12 ? h + "a" : (h - 12) + "p";
  }

  function showError(msg) {
    const statusView = document.getElementById("statusView");
    statusView.innerHTML = '<div class="error-box">⚠️ ' + msg + '</div>';
  }

  async function loadWeather() {
    const { lat, lon, name, date } = getParams();

    const todayUTC = new Date().toISOString().slice(0, 10);
    const isPast = date < todayUTC;
    const basePath = isPast ? "/api/om/archive" : "/api/om/forecast";

    const url = new URL(basePath, window.location.origin);
    url.searchParams.set("latitude", lat);
    url.searchParams.set("longitude", lon);
    url.searchParams.set("daily", "temperature_2m_max,temperature_2m_min,weather_code");
    url.searchParams.set("hourly", "temperature_2m");
    url.searchParams.set("timezone", "UTC");
    url.searchParams.set("temperature_unit", "celsius");
    url.searchParams.set("start_date", date);
    url.searchParams.set("end_date", date);

    let data;
    try {
      const res = await fetch(url.toString());
      if (!res.ok) throw new Error("HTTP " + res.status);
      data = await res.json();
    } catch (e) {
      showError("Could not load weather data. Please try again later.");
      return;
    }

    try {
      const daily = data.daily;
      const hourly = data.hourly;
      if (!daily || !daily.time || daily.time.length === 0) {
        throw new Error("No daily data");
      }

      const tMax = daily.temperature_2m_max[0];
      const tMin = daily.temperature_2m_min[0];
      const code = daily.weather_code[0];
      const [condText, condIcon] = WMO_CODES[code] || ["Unknown", "❓"];

      document.getElementById("locationName").textContent = name;
      document.getElementById("dateLabel").textContent = formatDateLabel(date);
      document.getElementById("conditionIcon").textContent = condIcon;
      document.getElementById("conditionText").textContent = condText;
      document.getElementById("tempMax").textContent = Math.round(tMax) + "°";
      document.getElementById("tempMin").textContent = Math.round(tMin) + "°";
      document.getElementById("pillHigh").textContent = tMax.toFixed(1) + "°C";
      document.getElementById("pillLow").textContent = tMin.toFixed(1) + "°C";

      const hourlyChart = document.getElementById("hourlyChart");
      hourlyChart.innerHTML = "";

      if (hourly && hourly.time && hourly.temperature_2m) {
        const temps = hourly.temperature_2m;
        const times = hourly.time;
        const validTemps = temps.filter(t => t !== null && t !== undefined);
        const minT = Math.min(...validTemps);
        const maxT = Math.max(...validTemps);
        const range = Math.max(maxT - minT, 1);

        times.forEach((t, i) => {
          const temp = temps[i];
          if (temp === null || temp === undefined) return;
          const heightPct = 15 + ((temp - minT) / range) * 75;
          const bar = document.createElement("div");
          bar.className = "hour-bar";
          bar.innerHTML =
            '<div class="temp-label">' + Math.round(temp) + '°</div>' +
            '<div class="bar" style="height:' + heightPct + '%"></div>' +
            '<div class="hour-label">' + formatHour(t) + '</div>';
          hourlyChart.appendChild(bar);
        });
      }

      document.getElementById("statusView").classList.add("hidden");
      document.getElementById("contentView").classList.remove("hidden");
    } catch (e) {
      showError("Weather data was returned in an unexpected format.");
    }
  }

  loadWeather();
})();
</script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total	11,221	html / css / js	1,399 / 4,377 / 5,445
dom nodes	32	dom depth	7
css rules	31	js present	yes
brightness	47.1	contrast	30.8
colorfulness	29.0	whitespace	59.6%

This slot's telemetry

prompt tokens	4	completion tokens	5,156
total tokens	5,160	wall	41.8 s
cost	—	request id	—

config.json572 B

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

send-log2.5 KB

{
  "N": 2,
  "batch_id": "2026-07-17--dev-cc-sonnet5",
  "config_id": "claude-sonnet-5-eff-low--cli--claude-code--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-17T13:50:47.844248+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T13:50:16.932107+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:51:32.680223+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T13:50:50.915182+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:52:19.075229+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T13:51:36.652921+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:52:57.046978+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T13:52:22.543915+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
    }
  }
}