gpt-5.4 @ medium · codex-oauth

codex-oauthmedium

config: gpt-5.4-eff-medium--cli--codex-oauth--dev
batch: 2026-07-19--unified
transport: codex-cli-oauth-chatgpt
protocol: cli · plan
served model: gpt-5.4
captured: Jul 18, 2026, 11:54 AM · N=2

variant

live

slot 0 · P-q · sandboxed iframe

gpt-5.4 @medium · codex-oauth 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

gpt-5.4 @low · codex-oauth0.69 gpt-5.4 @low · api0.67 gpt-5.4-mini @high · codex-oauth0.67 gpt-5.6-sol @xhigh · codex-oauth0.67 glm-5.2 · opencode0.66

farthest

gpt-5.6-luna @high · kiro0.39 gpt-5.6-luna @medium · codex-oauth0.42 minimax-m2.5 · kiro0.44 kimi-k3 @low · api0.44 gpt-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 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.0" />
  <title>Weather Card</title>
  <style>
    :root {
      --bg-1: #0d1b2a;
      --bg-2: #1b263b;
      --bg-3: #415a77;
      --glass: rgba(255, 255, 255, 0.12);
      --glass-strong: rgba(255, 255, 255, 0.18);
      --line: rgba(255, 255, 255, 0.16);
      --text: #f7fbff;
      --muted: rgba(247, 251, 255, 0.72);
      --soft: rgba(247, 251, 255, 0.56);
      --accent: #ffd166;
      --accent-2: #7bdff2;
      --danger: #ff8e8e;
      --shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
      --radius-xl: 30px;
      --radius-lg: 20px;
      --radius-md: 14px;
    }

    * {
      box-sizing: border-box;
    }

    html, body {
      margin: 0;
      width: 1280px;
      height: 800px;
      overflow: hidden;
      background:
        radial-gradient(circle at 15% 20%, rgba(123, 223, 242, 0.22), transparent 26%),
        radial-gradient(circle at 82% 18%, rgba(255, 209, 102, 0.18), transparent 24%),
        radial-gradient(circle at 75% 72%, rgba(154, 140, 255, 0.15), transparent 30%),
        linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 46%, #22385b 100%);
      color: var(--text);
      font-family: Avenir Next, Segoe UI, Helvetica Neue, Arial, sans-serif;
    }

    body::before,
    body::after {
      content: "";
      position: absolute;
      inset: auto;
      pointer-events: none;
      filter: blur(8px);
      opacity: 0.55;
    }

    body::before {
      width: 420px;
      height: 420px;
      left: -110px;
      top: 480px;
      background: radial-gradient(circle, rgba(123, 223, 242, 0.18), transparent 68%);
    }

    body::after {
      width: 520px;
      height: 520px;
      right: -150px;
      top: -120px;
      background: radial-gradient(circle, rgba(255, 209, 102, 0.16), transparent 70%);
    }

    .frame {
      position: relative;
      width: 100%;
      height: 100%;
      padding: 34px;
      display: flex;
      align-items: stretch;
      justify-content: center;
    }

    .card {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 34px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08)),
        linear-gradient(120deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: var(--shadow);
      backdrop-filter: blur(24px);
      overflow: hidden;
      display: grid;
      grid-template-columns: 1.08fr 1fr;
      min-height: 0;
    }

    .card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%);
      pointer-events: none;
    }

    .left,
    .right {
      position: relative;
      padding: 42px 42px 34px;
      min-height: 0;
    }

    .left {
      border-right: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 22px;
    }

    .eyebrow {
      font-size: 12px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--soft);
      margin-bottom: 16px;
    }

    .location {
      font-size: 58px;
      line-height: 0.95;
      font-weight: 700;
      max-width: 520px;
      margin: 0 0 14px;
      text-wrap: balance;
    }

    .date {
      font-size: 22px;
      line-height: 1.3;
      color: var(--muted);
      margin: 0;
    }

    .hero {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 20px;
      margin-top: 10px;
    }

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

    .temp-max {
      font-size: 118px;
      line-height: 0.9;
      font-weight: 800;
      letter-spacing: -0.06em;
      margin: 0;
    }

    .temp-range {
      display: flex;
      gap: 14px;
      align-items: center;
      color: var(--muted);
      font-size: 18px;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: var(--text);
      font-size: 15px;
      white-space: nowrap;
      align-self: start;
    }

    .glyph-wrap {
      width: 112px;
      height: 112px;
      border-radius: 28px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
      border: 1px solid rgba(255, 255, 255, 0.12);
      display: grid;
      place-items: center;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
      flex: 0 0 auto;
    }

    .glyph {
      font-size: 58px;
      filter: drop-shadow(0 10px 16px rgba(0,0,0,0.22));
    }

    .summary-panel {
      padding: 24px 24px 22px;
      border-radius: var(--radius-xl);
      background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
      border: 1px solid rgba(255,255,255,0.10);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .metric-label {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--soft);
      margin-bottom: 8px;
    }

    .metric-value {
      font-size: 24px;
      font-weight: 700;
      line-height: 1.1;
    }

    .metric-sub {
      margin-top: 6px;
      font-size: 13px;
      color: var(--soft);
    }

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

    .right-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .section-title {
      margin: 0;
      font-size: 28px;
      font-weight: 700;
      letter-spacing: -0.03em;
    }

    .section-subtitle {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 15px;
    }

    .hourly {
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      align-content: start;
    }

    .hour {
      min-height: 86px;
      border-radius: var(--radius-lg);
      padding: 14px 14px 12px;
      background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05));
      border: 1px solid rgba(255,255,255,0.09);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }

    .hour-time {
      font-size: 13px;
      color: var(--soft);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .hour-temp {
      font-size: 28px;
      line-height: 1;
      font-weight: 700;
      letter-spacing: -0.04em;
      margin-top: 10px;
    }

    .status {
      position: absolute;
      inset: 34px;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 40px;
      text-align: center;
      z-index: 4;
    }

    .status.visible {
      display: flex;
    }

    .status-box {
      width: min(720px, 100%);
      padding: 34px 30px;
      border-radius: 28px;
      background: linear-gradient(180deg, rgba(8, 15, 29, 0.82), rgba(20, 34, 54, 0.72));
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: var(--shadow);
    }

    .status-title {
      margin: 0 0 10px;
      font-size: 30px;
      font-weight: 700;
      letter-spacing: -0.03em;
    }

    .status-copy {
      margin: 0;
      font-size: 18px;
      color: var(--muted);
      line-height: 1.5;
    }

    .loading .card-content {
      opacity: 0.42;
      filter: saturate(0.88);
    }

    .error .card-content {
      opacity: 0.16;
      filter: blur(1px);
    }

    .footer-note {
      position: absolute;
      right: 26px;
      bottom: 20px;
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(247, 251, 255, 0.4);
    }
  </style>
</head>
<body>
  <div class="frame">
    <div class="card" id="app">
      <div class="card-content" style="display: contents;">
        <section class="left">
          <div>
            <div class="eyebrow">Daily Snapshot</div>
            <h1 class="location" id="location">Berlin</h1>
            <p class="date" id="dateLabel">Loading date</p>
          </div>

          <div class="hero">
            <div class="temps">
              <p class="temp-max" id="tempMax">--°</p>
              <div class="temp-range">
                <span id="tempMin">Min --°</span>
                <span>•</span>
                <span id="condition">Loading condition</span>
              </div>
            </div>
            <div class="glyph-wrap" aria-hidden="true">
              <div class="glyph" id="weatherGlyph">⛅</div>
            </div>
          </div>

          <div class="summary-panel">
            <div>
              <div class="metric-label">Condition</div>
              <div class="metric-value" id="conditionPanel">--</div>
              <div class="metric-sub">WMO weather code</div>
            </div>
            <div>
              <div class="metric-label">Maximum</div>
              <div class="metric-value" id="maxPanel">--°C</div>
              <div class="metric-sub">Daily high</div>
            </div>
            <div>
              <div class="metric-label">Minimum</div>
              <div class="metric-value" id="minPanel">--°C</div>
              <div class="metric-sub">Daily low</div>
            </div>
          </div>
        </section>

        <section class="right">
          <div class="right-head">
            <div>
              <h2 class="section-title">Hourly Temperatures</h2>
              <p class="section-subtitle">UTC for the selected day</p>
            </div>
            <div class="chip" id="sourceChip">Preparing data</div>
          </div>
          <div class="hourly" id="hourlyGrid"></div>
        </section>
      </div>

      <div class="status visible" id="loadingState">
        <div class="status-box">
          <h2 class="status-title">Loading weather data</h2>
          <p class="status-copy">Fetching the selected date and building the hourly temperature view.</p>
        </div>
      </div>

      <div class="status" id="errorState">
        <div class="status-box">
          <h2 class="status-title">Weather data could not be loaded</h2>
          <p class="status-copy" id="errorCopy">Please try again with a valid location and date.</p>
        </div>
      </div>

      <div class="footer-note">Open-Meteo compatible API • Celsius • UTC</div>
    </div>
  </div>

  <script>
    (function () {
      var app = document.getElementById("app");
      var loadingState = document.getElementById("loadingState");
      var errorState = document.getElementById("errorState");
      var errorCopy = document.getElementById("errorCopy");
      var locationEl = document.getElementById("location");
      var dateLabelEl = document.getElementById("dateLabel");
      var tempMaxEl = document.getElementById("tempMax");
      var tempMinEl = document.getElementById("tempMin");
      var conditionEl = document.getElementById("condition");
      var conditionPanelEl = document.getElementById("conditionPanel");
      var maxPanelEl = document.getElementById("maxPanel");
      var minPanelEl = document.getElementById("minPanel");
      var weatherGlyphEl = document.getElementById("weatherGlyph");
      var sourceChipEl = document.getElementById("sourceChip");
      var hourlyGridEl = document.getElementById("hourlyGrid");

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

      function getParam(name, fallback) {
        var value = params.get(name);
        return value == null || value.trim() === "" ? fallback : value.trim();
      }

      function parseNumber(value, fallback) {
        var num = Number(value);
        return Number.isFinite(num) ? num : fallback;
      }

      function isValidDateString(value) {
        return /^\d{4}-\d{2}-\d{2}$/.test(value);
      }

      var lat = parseNumber(getParam("lat", "52.52"), 52.52);
      var lon = parseNumber(getParam("lon", "13.405"), 13.405);
      var name = getParam("name", "Berlin");
      var requestedDate = getParam("date", todayUTC);
      if (!isValidDateString(requestedDate)) requestedDate = todayUTC;

      function formatDate(dateStr) {
        var parts = dateStr.split("-");
        var d = new Date(Date.UTC(Number(parts[0]), Number(parts[1]) - 1, Number(parts[2])));
        return new Intl.DateTimeFormat("en-US", {
          weekday: "long",
          year: "numeric",
          month: "long",
          day: "numeric",
          timeZone: "UTC"
        }).format(d);
      }

      function roundTemp(value) {
        return Math.round(value) + "°";
      }

      function roundTempC(value) {
        return Math.round(value) + "°C";
      }

      function codeToCondition(code) {
        var map = {
          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 hail", "⛈️"],
          99: ["Thunderstorm with heavy hail", "⛈️"]
        };
        return map[code] || ["Unknown conditions", "✨"];
      }

      function setLoading(isLoading) {
        loadingState.classList.toggle("visible", isLoading);
        app.classList.toggle("loading", isLoading);
      }

      function showError(message) {
        setLoading(false);
        app.classList.add("error");
        errorState.classList.add("visible");
        errorCopy.textContent = message || "The page could not load weather data.";
      }

      function clearError() {
        app.classList.remove("error");
        errorState.classList.remove("visible");
      }

      function buildHourly(times, temps) {
        hourlyGridEl.innerHTML = "";
        if (!Array.isArray(times) || !Array.isArray(temps) || times.length === 0 || temps.length === 0) {
          var empty = document.createElement("div");
          empty.className = "hour";
          empty.style.gridColumn = "1 / -1";
          empty.innerHTML = '<div class="hour-time">No hourly data</div><div class="hour-temp">--</div>';
          hourlyGridEl.appendChild(empty);
          return;
        }

        for (var i = 0; i < times.length; i++) {
          var time = times[i];
          var temp = temps[i];
          var hourText = String(time).slice(11, 16) || "00:00";

          var el = document.createElement("div");
          el.className = "hour";
          el.innerHTML =
            '<div class="hour-time">' + hourText + ' UTC</div>' +
            '<div class="hour-temp">' + roundTemp(temp) + '</div>';
          hourlyGridEl.appendChild(el);
        }
      }

      async function loadWeather() {
        setLoading(true);
        clearError();

        locationEl.textContent = name;
        dateLabelEl.textContent = formatDate(requestedDate);

        var endpoint = requestedDate < todayUTC ? "/api/om/archive" : "/api/om/forecast";
        sourceChipEl.textContent = endpoint === "/api/om/archive" ? "Archive data" : "Forecast data";

        var query = new URLSearchParams({
          latitude: String(lat),
          longitude: String(lon),
          daily: "temperature_2m_max,temperature_2m_min,weather_code",
          hourly: "temperature_2m",
          timezone: "UTC",
          temperature_unit: "celsius",
          start_date: requestedDate,
          end_date: requestedDate
        });

        try {
          var response = await fetch(endpoint + "?" + query.toString(), {
            headers: { "Accept": "application/json" }
          });

          if (!response.ok) {
            throw new Error("HTTP " + response.status);
          }

          var data = await response.json();
          var daily = data && data.daily;
          var hourly = data && data.hourly;

          if (
            !daily ||
            !Array.isArray(daily.temperature_2m_max) ||
            !Array.isArray(daily.temperature_2m_min) ||
            !Array.isArray(daily.weather_code) ||
            daily.temperature_2m_max.length === 0 ||
            daily.temperature_2m_min.length === 0 ||
            daily.weather_code.length === 0
          ) {
            throw new Error("Incomplete daily weather data");
          }

          var max = daily.temperature_2m_max[0];
          var min = daily.temperature_2m_min[0];
          var code = daily.weather_code[0];
          var conditionInfo = codeToCondition(code);

          tempMaxEl.textContent = roundTemp(max);
          tempMinEl.textContent = "Min " + roundTemp(min);
          conditionEl.textContent = conditionInfo[0];
          conditionPanelEl.textContent = conditionInfo[0];
          maxPanelEl.textContent = roundTempC(max);
          minPanelEl.textContent = roundTempC(min);
          weatherGlyphEl.textContent = conditionInfo[1];

          buildHourly(hourly && hourly.time, hourly && hourly.temperature_2m);

          setLoading(false);
        } catch (err) {
          showError("Weather data could not be loaded for " + name + " on " + requestedDate + ".");
        }
      }

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

L1 — cheap deterministic descriptors

bytes total	18,490	html / css / js	2,876 / 7,919 / 7,695
dom nodes	54	dom depth	10
css rules	41	js present	yes
brightness	84.1	contrast	30.8
colorfulness	17.9	whitespace	56.4%

This slot's telemetry

prompt tokens	0	completion tokens	11,676
total tokens	0	wall	104.2 s
cost	—	request id	—

config.json551 B

{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_NONE",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "gpt-5.4-eff-medium--cli--codex-oauth--dev",
  "effort": "medium",
  "family": "gpt",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "gpt-5.4",
  "protocol": "cli",
  "served_model": "gpt-5.4",
  "telemetry": {
    "completion_tokens": 44731,
    "cost_usd": null,
    "prompt_tokens": null,
    "total_tokens": null,
    "wall_ms": 384185
  },
  "transport": "codex-cli-oauth-chatgpt",
  "vendor_sanction_ref": null
}

send-log2.5 KB

{
  "N": 2,
  "batch_id": "2026-07-17--dev-codex-oauth-gpt-5.4",
  "config_id": "gpt-5.4-eff-medium--cli--codex-oauth--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-17T14:06:01.624451+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T14:04:17.440730+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:07:22.885606+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T14:06:05.391949+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:08:52.160358+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T14:07:26.495763+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:10:52.881237+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T14:08:56.027013+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
    }
  }
}