grok-4.5 · opencode

opencode
config
grok-4.5--cli--opencode--dev
batch
2026-07-19--unified
transport
opencode-cli-isolated-xdg-go-subscription
protocol
cli · plan
served model
grok-4.5
captured
Jul 18, 2026, 11:54 AM · N=2
all efforts & arms of this model →
variant
live
slot 1 · P-q · sandboxed iframe
grok-4.5 · opencode P-q slot 1 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-sonnet-5 @medium · kiro0.67gpt-5.6-sol @xhigh · kiro0.67gpt-5.6-terra @medium · codex-oauth0.67gpt-5.4 @low · api0.66gpt-5.4 @medium · api0.66
farthest
qwen3.7-max · qoder0.44minimax-m2.5 · kiro0.44gpt-5.6-terra @medium · kiro0.44gpt-5.6-luna @high · kiro0.44gpt-5.5 @low · codex-oauth0.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 tempmatchshown: 25
  • min tempmatchshown: 16
  • 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, height=800">
<title>Weather Card</title>
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --bg-deep: #0b1020;
    --bg-mid: #121a32;
    --glass: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.12);
    --text: #f4f7ff;
    --text-muted: rgba(244, 247, 255, 0.62);
    --accent: #7eb6ff;
    --accent-warm: #ffb86b;
    --accent-cool: #6ee7c5;
    --danger: #ff7b8a;
    --shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  }

  html, body {
    width: 1280px;
    height: 800px;
    overflow: hidden;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--text);
    background: var(--bg-deep);
  }

  body {
    display: grid;
    place-items: center;
    background:
      radial-gradient(1200px 600px at 15% 10%, rgba(80, 120, 255, 0.28), transparent 55%),
      radial-gradient(900px 500px at 90% 85%, rgba(255, 140, 90, 0.18), transparent 50%),
      radial-gradient(700px 400px at 50% 50%, rgba(80, 220, 180, 0.08), transparent 60%),
      linear-gradient(160deg, #0b1020 0%, #121a32 45%, #0e1528 100%);
  }

  .card {
    width: 1080px;
    height: 640px;
    border-radius: 32px;
    background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(24px);
    padding: 40px 48px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 28px;
    position: relative;
    overflow: hidden;
  }

  .card::before {
    content: "";
    position: absolute;
    inset: -40% auto auto -20%;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(126, 182, 255, 0.22), transparent 70%);
    pointer-events: none;
  }

  .card::after {
    content: "";
    position: absolute;
    inset: auto -15% -35% auto;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 184, 107, 0.16), transparent 70%);
    pointer-events: none;
  }

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

  .location-block h1 {
    font-size: 42px;
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.1;
  }

  .location-block .date {
    margin-top: 10px;
    font-size: 18px;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
  }

  .condition-badge {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }

  .condition-icon {
    font-size: 56px;
    line-height: 1;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.25));
  }

  .condition-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--accent);
    background: rgba(126, 182, 255, 0.12);
    border: 1px solid rgba(126, 182, 255, 0.22);
    padding: 6px 14px;
    border-radius: 999px;
    letter-spacing: 0.03em;
  }

  .main {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 36px;
    align-items: center;
    position: relative;
    z-index: 1;
  }

  .temps {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .temp-pill {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .temp-pill .label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    font-weight: 600;
  }

  .temp-pill .value {
    font-size: 40px;
    font-weight: 650;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
  }

  .temp-pill.max .value { color: var(--accent-warm); }
  .temp-pill.min .value { color: var(--accent-cool); }

  .hourly-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
  }

  .hourly-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    font-weight: 600;
  }

  .hourly-chart {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 16px 8px 0;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    min-height: 220px;
  }

  .hour-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    height: 100%;
    min-width: 0;
  }

  .hour-temp {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    opacity: 0.9;
  }

  .hour-bar-track {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    max-height: 140px;
  }

  .hour-bar {
    width: 70%;
    max-width: 18px;
    border-radius: 8px 8px 4px 4px;
    background: linear-gradient(180deg, var(--accent) 0%, rgba(126, 182, 255, 0.35) 100%);
    min-height: 4px;
    transition: height 0.4s ease;
    box-shadow: 0 0 12px rgba(126, 182, 255, 0.25);
  }

  .hour-label {
    font-size: 10px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    padding-bottom: 10px;
  }

  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }

  .footer-meta {
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
  }

  .footer-meta strong {
    color: rgba(244, 247, 255, 0.85);
    font-weight: 600;
  }

  .state {
    grid-row: 1 / -1;
    display: grid;
    place-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
  }

  .state.hidden { display: none; }

  .spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.12);
    border-top-color: var(--accent);
    animation: spin 0.8s linear infinite;
    margin: 0 auto 20px;
  }

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

  .state p {
    font-size: 20px;
    color: var(--text-muted);
    font-weight: 500;
  }

  .state.error p {
    color: var(--danger);
    max-width: 520px;
    line-height: 1.5;
  }

  .content.hidden { display: none; }

  .content {
    display: contents;
  }
</style>
</head>
<body>
  <div class="card" id="card">
    <div class="state" id="loading">
      <div>
        <div class="spinner"></div>
        <p>Loading weather…</p>
      </div>
    </div>
    <div class="state error hidden" id="error">
      <div>
        <p id="error-msg">Weather data could not be loaded.</p>
      </div>
    </div>
    <div class="content hidden" id="content">
      <header class="header">
        <div class="location-block">
          <h1 id="loc-name">—</h1>
          <div class="date" id="loc-date">—</div>
        </div>
        <div class="condition-badge">
          <div class="condition-icon" id="cond-icon">☁️</div>
          <div class="condition-label" id="cond-label">—</div>
        </div>
      </header>
      <section class="main">
        <div class="temps">
          <div class="temp-pill max">
            <span class="label">Maximum</span>
            <span class="value" id="temp-max">—</span>
          </div>
          <div class="temp-pill min">
            <span class="label">Minimum</span>
            <span class="value" id="temp-min">—</span>
          </div>
        </div>
        <div class="hourly-wrap">
          <div class="hourly-title">Hourly temperature</div>
          <div class="hourly-chart" id="hourly"></div>
        </div>
      </section>
      <footer class="footer">
        <div class="footer-meta">UTC · Celsius · Open-Meteo compatible</div>
        <div class="footer-meta" id="coords">—</div>
      </footer>
    </div>
  </div>
<script>
(function () {
  const WMO = {
    0:  { label: "Clear sky", icon: "☀️" },
    1:  { label: "Mainly clear", icon: "🌤️" },
    2:  { label: "Partly cloudy", icon: "⛅" },
    3:  { label: "Overcast", icon: "☁️" },
    45: { label: "Fog", icon: "🌫️" },
    48: { label: "Depositing rime fog", icon: "🌫️" },
    51: { label: "Light drizzle", icon: "🌦️" },
    53: { label: "Moderate drizzle", icon: "🌦️" },
    55: { label: "Dense drizzle", icon: "🌧️" },
    56: { label: "Light freezing drizzle", icon: "🌧️" },
    57: { label: "Dense freezing drizzle", icon: "🌧️" },
    61: { label: "Slight rain", icon: "🌧️" },
    63: { label: "Moderate rain", icon: "🌧️" },
    65: { label: "Heavy rain", icon: "🌧️" },
    66: { label: "Light freezing rain", icon: "🌧️" },
    67: { label: "Heavy freezing rain", icon: "🌧️" },
    71: { label: "Slight snow", icon: "🌨️" },
    73: { label: "Moderate snow", icon: "🌨️" },
    75: { label: "Heavy snow", icon: "❄️" },
    77: { label: "Snow grains", icon: "❄️" },
    80: { label: "Slight rain showers", icon: "🌦️" },
    81: { label: "Moderate rain showers", icon: "🌧️" },
    82: { label: "Violent rain showers", icon: "⛈️" },
    85: { label: "Slight snow showers", icon: "🌨️" },
    86: { label: "Heavy snow showers", icon: "❄️" },
    95: { label: "Thunderstorm", icon: "⛈️" },
    96: { label: "Thunderstorm with slight hail", icon: "⛈️" },
    99: { label: "Thunderstorm with heavy hail", icon: "⛈️" }
  };

  function todayUTC() {
    const d = new Date();
    const y = d.getUTCFullYear();
    const m = String(d.getUTCMonth() + 1).padStart(2, "0");
    const day = String(d.getUTCDate()).padStart(2, "0");
    return y + "-" + m + "-" + day;
  }

  function parseParams() {
    const q = new URLSearchParams(window.location.search);
    const lat = parseFloat(q.get("lat"));
    const lon = parseFloat(q.get("lon"));
    return {
      lat: Number.isFinite(lat) ? lat : 52.52,
      lon: Number.isFinite(lon) ? lon : 13.405,
      name: q.get("name") || "Berlin",
      date: q.get("date") || todayUTC()
    };
  }

  function isPastDate(dateStr) {
    return dateStr < todayUTC();
  }

  function formatDisplayDate(dateStr) {
    const parts = dateStr.split("-").map(Number);
    const d = new Date(Date.UTC(parts[0], parts[1] - 1, parts[2]));
    return d.toLocaleDateString("en-US", {
      weekday: "long",
      year: "numeric",
      month: "long",
      day: "numeric",
      timeZone: "UTC"
    });
  }

  function weatherInfo(code) {
    return WMO[code] || { label: "Unknown (" + code + ")", icon: "🌡️" };
  }

  function showError(msg) {
    document.getElementById("loading").classList.add("hidden");
    document.getElementById("content").classList.add("hidden");
    const err = document.getElementById("error");
    err.classList.remove("hidden");
    document.getElementById("error-msg").textContent = msg || "Weather data could not be loaded.";
  }

  function showContent() {
    document.getElementById("loading").classList.add("hidden");
    document.getElementById("error").classList.add("hidden");
    document.getElementById("content").classList.remove("hidden");
  }

  function buildQuery(params) {
    const sp = new URLSearchParams({
      latitude: String(params.lat),
      longitude: String(params.lon),
      daily: "temperature_2m_max,temperature_2m_min,weather_code",
      hourly: "temperature_2m",
      timezone: "UTC",
      temperature_unit: "celsius",
      start_date: params.date,
      end_date: params.date
    });
    return sp.toString();
  }

  function renderHourly(times, temps) {
    const el = document.getElementById("hourly");
    el.innerHTML = "";
    if (!temps || !temps.length) {
      el.innerHTML = '<div style="margin:auto;color:var(--text-muted);font-size:14px">No hourly data</div>';
      return;
    }

    const finite = temps.filter(function (t) { return typeof t === "number" && !isNaN(t); });
    const minT = Math.min.apply(null, finite);
    const maxT = Math.max.apply(null, finite);
    const range = Math.max(maxT - minT, 1);

    const step = temps.length > 12 ? 2 : 1;
    for (var i = 0; i < temps.length; i += step) {
      var t = temps[i];
      var time = times[i] || "";
      var hour = time.length >= 13 ? time.slice(11, 13) : String(i).padStart(2, "0");
      var col = document.createElement("div");
      col.className = "hour-col";

      var tempLabel = document.createElement("div");
      tempLabel.className = "hour-temp";
      tempLabel.textContent = (typeof t === "number" && !isNaN(t)) ? Math.round(t) + "°" : "—";

      var track = document.createElement("div");
      track.className = "hour-bar-track";
      var bar = document.createElement("div");
      bar.className = "hour-bar";
      var h = (typeof t === "number" && !isNaN(t))
        ? 12 + ((t - minT) / range) * 120
        : 4;
      bar.style.height = h + "px";
      track.appendChild(bar);

      var hourLabel = document.createElement("div");
      hourLabel.className = "hour-label";
      hourLabel.textContent = hour;

      col.appendChild(tempLabel);
      col.appendChild(track);
      col.appendChild(hourLabel);
      el.appendChild(col);
    }
  }

  function render(params, data) {
    var daily = data.daily || {};
    var hourly = data.hourly || {};
    var max = daily.temperature_2m_max && daily.temperature_2m_max[0];
    var min = daily.temperature_2m_min && daily.temperature_2m_min[0];
    var code = daily.weather_code && daily.weather_code[0];
    var info = weatherInfo(code);

    document.getElementById("loc-name").textContent = params.name;
    document.getElementById("loc-date").textContent = formatDisplayDate(params.date);
    document.getElementById("temp-max").textContent =
      (typeof max === "number" && !isNaN(max)) ? Math.round(max) + "°C" : "—";
    document.getElementById("temp-min").textContent =
      (typeof min === "number" && !isNaN(min)) ? Math.round(min) + "°C" : "—";
    document.getElementById("cond-icon").textContent = info.icon;
    document.getElementById("cond-label").textContent = info.label;
    document.getElementById("coords").textContent =
      params.lat.toFixed(2) + "°, " + params.lon.toFixed(2) + "°";

    renderHourly(hourly.time || [], hourly.temperature_2m || []);
    showContent();
  }

  async function load() {
    var params = parseParams();
    var endpoint = isPastDate(params.date) ? "/api/om/archive" : "/api/om/forecast";
    var url = endpoint + "?" + buildQuery(params);

    try {
      var res = await fetch(url);
      if (!res.ok) throw new Error("HTTP " + res.status);
      var data = await res.json();
      if (data.error) throw new Error(data.reason || data.error || "API error");
      if (!data.daily || !data.daily.time || !data.daily.time.length) {
        throw new Error("No weather data for this date");
      }
      render(params, data);
    } catch (e) {
      showError("Weather data could not be loaded. " + (e && e.message ? e.message : ""));
    }
  }

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

L1 — cheap deterministic descriptors

bytes total15,177html / css / js1,722 / 6,325 / 7,130
dom nodes38dom depth8
css rules40js presentyes
brightness44.7contrast21.3
colorfulness23.3whitespace47.5%

This slot's telemetry

prompt tokens0completion tokens0
total tokens0wall44.5 s
cost—request id—
config.json562 B
{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_OPENCODE_KEY",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "grok-4.5--cli--opencode--dev",
  "effort": null,
  "family": "grok",
  "m": {
    "min": 2,
    "q": 1
  },
  "model_id": "grok-4.5",
  "protocol": "cli",
  "served_model": "grok-4.5",
  "telemetry": {
    "completion_tokens": null,
    "cost_usd": null,
    "prompt_tokens": null,
    "total_tokens": null,
    "wall_ms": 173693
  },
  "transport": "opencode-cli-isolated-xdg-go-subscription",
  "vendor_sanction_ref": null
}
send-log2.5 KB
{
  "N": 2,
  "batch_id": "2026-07-18--dev-opencode-cli",
  "config_id": "grok-4.5--cli--opencode--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-17T14:58:08.204726+00:00",
          "http_status": null,
          "outcome": "infra-failed",
          "reached_model": true,
          "reason": "mid-stream-death",
          "request_id": null,
          "started_at": "2026-07-17T14:53:17.957994+00:00"
        }
      ],
      "block_index": 0,
      "model_reaching_attempt_index": 0,
      "slot_index": 0,
      "terminal_state": "infra-failed",
      "variant": "P-q"
    },
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-17T14:59:14.344886+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T14:58:08.205674+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-17T15:00:21.121610+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T14:59:18.027363+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-17T15:01:08.867962+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:00:24.407647+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
    }
  }
}