gpt-5.5 @ high · codex-oauth

codex-oauthhigh
config
gpt-5.5-eff-high--cli--codex-oauth--dev
batch
2026-07-19--unified
transport
codex-cli-oauth-chatgpt
protocol
cli · plan
served model
gpt-5.5
captured
Jul 18, 2026, 11:54 AM · N=2
variant
live
slot 0 · P-q · sandboxed iframe
gpt-5.5 @high · 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

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 1/24 · 1 match · 1 mismatch · 22 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=device-width, initial-scale=1">
<title>Weather Card</title>
<style>
  :root {
    --ink: #17212b;
    --muted: #65717f;
    --panel: rgba(255,255,255,.82);
    --line: rgba(23,33,43,.12);
    --teal: #0f8b8d;
    --coral: #f25f5c;
    --gold: #f5b841;
    --mint: #7fc8a9;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    min-height: 100vh;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background:
      radial-gradient(circle at 16% 18%, rgba(245,184,65,.40), transparent 28%),
      radial-gradient(circle at 82% 14%, rgba(15,139,141,.35), transparent 30%),
      radial-gradient(circle at 76% 82%, rgba(242,95,92,.24), transparent 34%),
      linear-gradient(135deg, #f9f4e8 0%, #d9f0eb 45%, #f8d8c9 100%);
    display: grid;
    place-items: center;
    overflow: hidden;
  }

  .scene {
    width: 1280px;
    height: 800px;
    padding: 56px;
    position: relative;
  }

  .scene:before {
    content: "";
    position: absolute;
    inset: 32px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 28px;
    pointer-events: none;
  }

  .card {
    width: 100%;
    height: 100%;
    border-radius: 28px;
    background: var(--panel);
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 28px 90px rgba(28,42,54,.20);
    backdrop-filter: blur(22px);
    display: grid;
    grid-template-columns: 420px 1fr;
    overflow: hidden;
  }

  .hero {
    position: relative;
    padding: 46px;
    background:
      linear-gradient(160deg, rgba(15,139,141,.92), rgba(20,122,117,.78) 46%, rgba(242,95,92,.70)),
      radial-gradient(circle at 40% 22%, rgba(255,255,255,.35), transparent 26%);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .weather-art {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: .95;
  }

  .sun {
    position: absolute;
    width: 158px;
    height: 158px;
    border-radius: 50%;
    right: 44px;
    top: 52px;
    background: radial-gradient(circle, #ffe6a3 0 42%, #f5b841 43% 70%, rgba(245,184,65,0) 71%);
    box-shadow: 0 0 70px rgba(255,230,163,.55);
  }

  .cloud {
    position: absolute;
    left: 42px;
    top: 168px;
    width: 240px;
    height: 86px;
    border-radius: 999px;
    background: rgba(255,255,255,.78);
    box-shadow: 80px 46px 0 -8px rgba(255,255,255,.38);
  }

  .cloud:before,
  .cloud:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: inherit;
  }

  .cloud:before {
    width: 112px;
    height: 112px;
    left: 34px;
    top: -54px;
  }

  .cloud:after {
    width: 136px;
    height: 136px;
    left: 104px;
    top: -74px;
  }

  .hero-content {
    position: relative;
    z-index: 1;
  }

  .eyebrow {
    margin: 0 0 18px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .78;
  }

  h1 {
    margin: 0;
    max-width: 330px;
    font-size: 54px;
    line-height: .95;
    letter-spacing: 0;
  }

  .date {
    margin-top: 18px;
    font-size: 19px;
    opacity: .86;
  }

  .condition {
    position: relative;
    z-index: 1;
  }

  .condition-name {
    font-size: 24px;
    font-weight: 750;
    margin-bottom: 14px;
  }

  .temp-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .temp-box {
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 18px;
    padding: 16px;
    background: rgba(255,255,255,.16);
  }

  .temp-box span {
    display: block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .10em;
    opacity: .72;
  }

  .temp-box strong {
    display: block;
    margin-top: 6px;
    font-size: 34px;
    line-height: 1;
  }

  .details {
    padding: 46px 48px 42px;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 30px;
  }

  .topline {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: start;
  }

  .summary h2 {
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: 0;
  }

  .summary p {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 16px;
  }

  .badge {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 14px;
    color: #33404c;
    background: rgba(255,255,255,.48);
    white-space: nowrap;
  }

  .metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .metric {
    min-height: 118px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.55);
    padding: 20px;
  }

  .metric .label {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  .metric .value {
    margin-top: 13px;
    font-size: 34px;
    font-weight: 780;
    line-height: 1;
  }

  .hourly {
    min-height: 0;
    border-radius: 22px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.48);
    padding: 22px 22px 18px;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 16px;
  }

  .hourly-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }

  .hourly h3 {
    margin: 0;
    font-size: 19px;
  }

  .range {
    color: var(--muted);
    font-size: 14px;
  }

  .chart {
    height: 280px;
    display: grid;
    grid-template-columns: repeat(24, minmax(18px, 1fr));
    gap: 8px;
    align-items: end;
    padding-top: 8px;
  }

  .bar-wrap {
    min-width: 0;
    height: 100%;
    display: grid;
    grid-template-rows: 28px 1fr 22px;
    gap: 8px;
    align-items: end;
  }

  .bar-temp {
    text-align: center;
    font-size: 12px;
    font-weight: 750;
    color: #34414d;
    white-space: nowrap;
  }

  .bar-track {
    height: 100%;
    display: flex;
    align-items: end;
    justify-content: center;
  }

  .bar {
    width: 100%;
    max-width: 25px;
    min-height: 8px;
    border-radius: 999px 999px 7px 7px;
    background: linear-gradient(180deg, var(--coral), var(--gold) 52%, var(--teal));
    box-shadow: 0 8px 18px rgba(15,139,141,.18);
  }

  .bar-hour {
    text-align: center;
    font-size: 11px;
    color: var(--muted);
  }

  .state {
    grid-column: 1 / -1;
    display: grid;
    place-items: center;
    height: 100%;
    text-align: center;
    padding: 40px;
  }

  .state strong {
    display: block;
    font-size: 28px;
    margin-bottom: 10px;
  }

  .state span {
    color: var(--muted);
    font-size: 16px;
  }
</style>
</head>
<body>
  <main class="scene">
    <section class="card" aria-live="polite">
      <aside class="hero">
        <div class="weather-art" aria-hidden="true">
          <div class="sun"></div>
          <div class="cloud"></div>
        </div>
        <div class="hero-content">
          <p class="eyebrow">Daily weather</p>
          <h1 id="location">Berlin</h1>
          <div class="date" id="dateLabel">Loading...</div>
        </div>
        <div class="condition">
          <div class="condition-name" id="condition">Loading weather</div>
          <div class="temp-pair">
            <div class="temp-box">
              <span>Maximum</span>
              <strong id="maxTemp">--</strong>
            </div>
            <div class="temp-box">
              <span>Minimum</span>
              <strong id="minTemp">--</strong>
            </div>
          </div>
        </div>
      </aside>

      <section class="details" id="details">
        <div class="topline">
          <div class="summary">
            <h2 id="headline">Fetching forecast</h2>
            <p id="subhead">Hourly temperatures will appear once the data loads.</p>
          </div>
          <div class="badge" id="sourceBadge">UTC timezone</div>
        </div>

        <div class="metrics">
          <div class="metric">
            <div class="label">High</div>
            <div class="value" id="metricHigh">--</div>
          </div>
          <div class="metric">
            <div class="label">Low</div>
            <div class="value" id="metricLow">--</div>
          </div>
          <div class="metric">
            <div class="label">Condition</div>
            <div class="value" id="metricCondition" style="font-size:24px;line-height:1.15">--</div>
          </div>
        </div>

        <div class="hourly">
          <div class="hourly-head">
            <h3>Hourly temperature</h3>
            <div class="range" id="hourlyRange">00:00 to 23:00 UTC</div>
          </div>
          <div class="chart" id="chart"></div>
        </div>
      </section>
    </section>
  </main>

<script>
(function () {
  "use strict";

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

  function validDate(value) {
    if (!/^\d{4}-\d{2}-\d{2}$/.test(value || "")) return false;
    var d = new Date(value + "T00:00:00Z");
    return !Number.isNaN(d.getTime()) && d.toISOString().slice(0, 10) === value;
  }

  var lat = Number(params.get("lat"));
  var lon = Number(params.get("lon"));
  var name = (params.get("name") || "Berlin").trim() || "Berlin";
  var date = params.get("date");
  if (!Number.isFinite(lat)) lat = 52.52;
  if (!Number.isFinite(lon)) lon = 13.405;
  if (!validDate(date)) date = todayUtc;

  var conditionMap = {
    0: "Clear sky",
    1: "Mainly clear",
    2: "Partly cloudy",
    3: "Overcast",
    45: "Fog",
    48: "Rime fog",
    51: "Light drizzle",
    53: "Drizzle",
    55: "Heavy drizzle",
    56: "Freezing drizzle",
    57: "Heavy freezing drizzle",
    61: "Light rain",
    63: "Rain",
    65: "Heavy rain",
    66: "Freezing rain",
    67: "Heavy freezing rain",
    71: "Light snow",
    73: "Snow",
    75: "Heavy snow",
    77: "Snow grains",
    80: "Light showers",
    81: "Showers",
    82: "Violent showers",
    85: "Snow showers",
    86: "Heavy snow showers",
    95: "Thunderstorm",
    96: "Thunderstorm with hail",
    99: "Severe thunderstorm"
  };

  function formatDate(value) {
    return new Intl.DateTimeFormat("en", {
      weekday: "long",
      year: "numeric",
      month: "long",
      day: "numeric",
      timeZone: "UTC"
    }).format(new Date(value + "T00:00:00Z"));
  }

  function temp(value) {
    if (value === null || value === undefined || Number.isNaN(Number(value))) return "--";
    return Math.round(Number(value)) + "°C";
  }

  function setText(id, value) {
    var node = document.getElementById(id);
    if (node) node.textContent = value;
  }

  function fail(message) {
    setText("condition", "Unable to load");
    setText("headline", "Weather data could not be loaded.");
    setText("subhead", message || "Please check the requested location and date.");
    setText("maxTemp", "--");
    setText("minTemp", "--");
    setText("metricHigh", "--");
    setText("metricLow", "--");
    setText("metricCondition", "--");
    document.getElementById("chart").innerHTML =
      '<div class="state"><div><strong>Weather data could not be loaded.</strong><span>Please try another date or location.</span></div></div>';
  }

  function render(data) {
    if (!data || !data.daily || !data.hourly) throw new Error("Missing weather data");

    var dailyIndex = (data.daily.time || []).indexOf(date);
    if (dailyIndex < 0) dailyIndex = 0;

    var high = data.daily.temperature_2m_max && data.daily.temperature_2m_max[dailyIndex];
    var low = data.daily.temperature_2m_min && data.daily.temperature_2m_min[dailyIndex];
    var code = data.daily.weather_code && data.daily.weather_code[dailyIndex];
    var condition = conditionMap[code] || "Weather code " + code;

    var hourlyTimes = data.hourly.time || [];
    var hourlyTemps = data.hourly.temperature_2m || [];
    var points = hourlyTimes.map(function (time, index) {
      return { time: time, value: hourlyTemps[index] };
    }).filter(function (point) {
      return typeof point.time === "string" && point.time.slice(0, 10) === date && point.value !== null && point.value !== undefined;
    });

    if (!points.length) throw new Error("No hourly temperatures were returned");

    var values = points.map(function (p) { return Number(p.value); }).filter(Number.isFinite);
    var min = Math.min.apply(null, values);
    var max = Math.max.apply(null, values);
    var spread = Math.max(1, max - min);

    setText("condition", condition);
    setText("headline", condition + " in " + name);
    setText("subhead", "Temperatures shown in Celsius for the requested UTC day.");
    setText("maxTemp", temp(high));
    setText("minTemp", temp(low));
    setText("metricHigh", temp(high));
    setText("metricLow", temp(low));
    setText("metricCondition", condition);

    var chart = document.getElementById("chart");
    chart.innerHTML = "";
    points.forEach(function (point) {
      var hour = point.time.slice(11, 13);
      var value = Number(point.value);
      var height = 18 + ((value - min) / spread) * 82;
      var wrap = document.createElement("div");
      wrap.className = "bar-wrap";
      wrap.title = hour + ":00 UTC, " + temp(value);
      wrap.innerHTML =
        '<div class="bar-temp">' + temp(value) + '</div>' +
        '<div class="bar-track"><div class="bar" style="height:' + height.toFixed(1) + '%"></div></div>' +
        '<div class="bar-hour">' + hour + '</div>';
      chart.appendChild(wrap);
    });
  }

  setText("location", name);
  setText("dateLabel", formatDate(date));
  setText("sourceBadge", date < todayUtc ? "Archive data" : "Forecast data");

  var endpoint = date < todayUtc ? "/api/om/archive" : "/api/om/forecast";
  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: date,
    end_date: date
  });

  fetch(endpoint + "?" + query.toString())
    .then(function (response) {
      if (!response.ok) throw new Error("Request failed");
      return response.json();
    })
    .then(render)
    .catch(function (error) {
      fail(error && error.message);
    });
})();
</script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total14,363html / css / js2,291 / 6,537 / 5,535
dom nodes48dom depth9
css rules45js presentyes
brightness205.9contrast45.0
colorfulness53.4whitespace57.9%

This slot's telemetry

prompt tokens0completion tokens10,995
total tokens0wall91.4 s
costrequest id
config.json547 B
{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_NONE",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "gpt-5.5-eff-high--cli--codex-oauth--dev",
  "effort": "high",
  "family": "gpt",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "gpt-5.5",
  "protocol": "cli",
  "served_model": "gpt-5.5",
  "telemetry": {
    "completion_tokens": 42542,
    "cost_usd": null,
    "prompt_tokens": null,
    "total_tokens": null,
    "wall_ms": 353111
  },
  "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.5",
  "config_id": "gpt-5.5-eff-high--cli--codex-oauth--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-17T13:46:27.843933+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T13:44:56.480806+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:47:50.618102+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T13:46:33.364666+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:49:11.159168+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T13:47:53.902947+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-17T13:51:02.039495+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T13:49:14.792364+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
    }
  }
}