gpt-5.5 @ medium · codex-oauth
codex-oauthmedium
- config
- gpt-5.5-eff-medium--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

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.5 @high · codex-oauth0.59gpt-5.6-luna @low · codex-oauth0.59minimax-m2.7 · go0.59claude-opus-4-7 @xhigh · kiro0.58gpt-5.5 @xhigh · codex-oauth0.58farthest
gemini-3.5-flash @low · api0.34gpt-5.4 @low · codex-oauth0.38gemini-3.5-flash @minimal · api0.38mimo-v2.5-pro · go0.39grok-4.5 @high · api0.39within session 2026-07-19--unified
similarity measures convergence within this session — not quality.
Fidelity — does the card show the right data?
- namematch
- conditionmismatchother-wmo-code
- datematch
- max tempmismatchshown: 16
- min tempmismatchshown: 25
- hourlymatchcoverage 24/24 · 24 match · 0 mismatch · 0 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: #17202a;
--muted: #637083;
--line: rgba(23, 32, 42, 0.12);
--panel: rgba(255, 255, 255, 0.78);
--panel-strong: rgba(255, 255, 255, 0.92);
--blue: #3a7bd5;
--teal: #18a99d;
--amber: #f4a33a;
--rose: #d95870;
--shadow: 0 30px 80px rgba(20, 35, 60, 0.22);
}
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
min-height: 100%;
margin: 0;
}
body {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background:
radial-gradient(circle at 12% 16%, rgba(255, 214, 122, 0.55), transparent 26%),
radial-gradient(circle at 84% 18%, rgba(89, 189, 210, 0.48), transparent 28%),
linear-gradient(135deg, #eef7f2 0%, #dbeef7 43%, #f7ece0 100%);
overflow: hidden;
}
main {
width: 1280px;
height: 800px;
max-width: 100vw;
max-height: 100vh;
margin: 0 auto;
display: grid;
place-items: center;
padding: 42px;
}
.card {
position: relative;
width: min(1080px, calc(100vw - 84px));
height: min(640px, calc(100vh - 84px));
min-height: 560px;
display: grid;
grid-template-columns: 380px 1fr;
gap: 0;
border: 1px solid rgba(255, 255, 255, 0.72);
border-radius: 28px;
background: var(--panel);
box-shadow: var(--shadow);
overflow: hidden;
backdrop-filter: blur(24px) saturate(1.18);
}
.card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(120deg, rgba(255, 255, 255, 0.68), transparent 42%),
linear-gradient(0deg, rgba(255, 255, 255, 0.28), transparent);
}
.hero,
.details {
position: relative;
z-index: 1;
}
.hero {
padding: 42px 38px;
display: flex;
flex-direction: column;
justify-content: space-between;
background:
linear-gradient(160deg, rgba(44, 120, 190, 0.86), rgba(26, 159, 145, 0.8) 54%, rgba(242, 166, 70, 0.72)),
radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.45), transparent 30%);
color: white;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
width: 300px;
height: 300px;
left: -92px;
bottom: -96px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
}
.hero::after {
content: "";
position: absolute;
width: 170px;
height: 170px;
right: -36px;
top: 78px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
}
.location {
position: relative;
min-width: 0;
}
.label {
margin: 0 0 12px;
font-size: 13px;
line-height: 1;
letter-spacing: 0.16em;
text-transform: uppercase;
opacity: 0.78;
font-weight: 760;
}
h1 {
margin: 0;
max-width: 300px;
font-size: clamp(38px, 4vw, 58px);
line-height: 0.95;
font-weight: 820;
letter-spacing: 0;
overflow-wrap: anywhere;
}
.date {
margin-top: 18px;
font-size: 18px;
line-height: 1.35;
opacity: 0.9;
font-weight: 560;
}
.condition-block {
position: relative;
}
.weather-mark {
width: 150px;
height: 150px;
margin: 0 0 22px -6px;
display: grid;
place-items: center;
}
.sun,
.cloud,
.rain,
.snow,
.bolt,
.fog {
position: relative;
width: 118px;
height: 118px;
}
.sun::before {
content: "";
position: absolute;
inset: 16px;
border-radius: 50%;
background: #ffd268;
box-shadow: 0 0 42px rgba(255, 210, 104, 0.75);
}
.sun::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.86) 0deg 8deg, transparent 8deg 20deg);
mask: radial-gradient(circle, transparent 0 47px, #000 48px 59px, transparent 60px);
}
.cloud::before,
.rain::before,
.snow::before,
.bolt::before,
.fog::before {
content: "";
position: absolute;
width: 94px;
height: 40px;
left: 12px;
top: 48px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.92);
box-shadow:
22px -20px 0 2px rgba(255, 255, 255, 0.92),
48px -10px 0 6px rgba(255, 255, 255, 0.92);
}
.cloud::after {
content: "";
position: absolute;
width: 72px;
height: 72px;
left: 6px;
top: 12px;
border-radius: 50%;
background: rgba(255, 210, 104, 0.86);
box-shadow: 0 0 36px rgba(255, 210, 104, 0.42);
z-index: -1;
}
.rain::after {
content: "";
position: absolute;
width: 8px;
height: 34px;
left: 34px;
top: 90px;
border-radius: 8px;
background: rgba(211, 241, 255, 0.95);
box-shadow: 26px 9px 0 rgba(211, 241, 255, 0.95), 52px 0 0 rgba(211, 241, 255, 0.95);
transform: skewX(-15deg);
}
.snow::after {
content: "* * *";
position: absolute;
left: 28px;
top: 84px;
color: white;
font-size: 30px;
font-weight: 700;
letter-spacing: 8px;
}
.bolt::after {
content: "";
position: absolute;
left: 46px;
top: 78px;
width: 28px;
height: 52px;
background: #ffd268;
clip-path: polygon(40% 0, 100% 0, 62% 40%, 88% 40%, 20% 100%, 42% 52%, 8% 52%);
}
.fog::after {
content: "";
position: absolute;
left: 8px;
top: 92px;
width: 100px;
height: 28px;
border-top: 5px solid rgba(255, 255, 255, 0.9);
border-bottom: 5px solid rgba(255, 255, 255, 0.72);
border-radius: 12px;
}
.condition {
margin: 0;
font-size: 26px;
line-height: 1.1;
font-weight: 760;
}
.updated {
margin-top: 12px;
font-size: 14px;
opacity: 0.72;
}
.details {
padding: 42px;
display: grid;
grid-template-rows: auto auto 1fr;
gap: 26px;
}
.summary {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.metric {
min-height: 142px;
padding: 26px;
border-radius: 22px;
background: var(--panel-strong);
border: 1px solid rgba(255, 255, 255, 0.72);
box-shadow: 0 16px 36px rgba(30, 55, 84, 0.09);
}
.metric .k {
margin: 0 0 12px;
color: var(--muted);
font-size: 13px;
line-height: 1;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 790;
}
.metric .v {
margin: 0;
font-size: 68px;
line-height: 0.95;
font-weight: 820;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
}
.metric .v small {
font-size: 30px;
vertical-align: 0.72em;
font-weight: 720;
color: var(--muted);
}
.range {
display: flex;
align-items: center;
gap: 14px;
min-height: 72px;
padding: 18px 20px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.58);
border: 1px solid var(--line);
}
.range-track {
position: relative;
flex: 1;
height: 12px;
border-radius: 999px;
background: linear-gradient(90deg, #58a6e8, #1fb7a8, #f4b54b, #d95870);
overflow: hidden;
}
.range-label {
width: 96px;
color: var(--muted);
font-size: 13px;
font-weight: 760;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.range-values {
min-width: 128px;
text-align: right;
font-size: 20px;
font-weight: 760;
font-variant-numeric: tabular-nums;
}
.hourly {
min-height: 0;
padding: 26px 26px 22px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.66);
border: 1px solid rgba(255, 255, 255, 0.72);
box-shadow: 0 16px 36px rgba(30, 55, 84, 0.08);
display: grid;
grid-template-rows: auto 1fr;
gap: 18px;
}
.section-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 20px;
}
h2 {
margin: 0;
font-size: 18px;
line-height: 1.15;
font-weight: 800;
letter-spacing: 0;
}
.hint {
color: var(--muted);
font-size: 13px;
font-weight: 650;
}
.chart {
position: relative;
min-height: 210px;
display: grid;
grid-template-columns: repeat(24, minmax(0, 1fr));
align-items: end;
gap: 6px;
padding: 6px 0 0;
}
.bar-wrap {
height: 100%;
min-width: 0;
display: grid;
grid-template-rows: 1fr auto auto;
align-items: end;
gap: 7px;
}
.bar {
width: 100%;
min-height: 10px;
border-radius: 999px 999px 8px 8px;
background: linear-gradient(180deg, var(--bar-top), var(--bar-bottom));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.58), 0 10px 18px rgba(45, 105, 150, 0.12);
}
.temp {
text-align: center;
color: #243141;
font-size: 12px;
line-height: 1;
font-weight: 760;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.hour {
text-align: center;
color: var(--muted);
font-size: 11px;
line-height: 1;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.state {
position: absolute;
inset: 0;
z-index: 5;
display: grid;
place-items: center;
padding: 42px;
background: linear-gradient(135deg, rgba(241, 248, 251, 0.96), rgba(251, 245, 237, 0.96));
text-align: center;
}
.state-box {
width: min(560px, 100%);
padding: 38px;
border-radius: 24px;
background: white;
border: 1px solid var(--line);
box-shadow: 0 24px 56px rgba(30, 55, 84, 0.14);
}
.spinner {
width: 44px;
height: 44px;
margin: 0 auto 22px;
border-radius: 50%;
border: 4px solid rgba(58, 123, 213, 0.18);
border-top-color: var(--blue);
animation: spin 0.9s linear infinite;
}
.state h2 {
font-size: 24px;
margin-bottom: 10px;
}
.state p {
margin: 0;
color: var(--muted);
font-size: 16px;
line-height: 1.5;
}
.hidden {
display: none;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<main>
<section class="card" aria-live="polite">
<aside class="hero">
<div class="location">
<p class="label">Weather</p>
<h1 id="place">Berlin</h1>
<div class="date" id="dateText">Today</div>
</div>
<div class="condition-block">
<div class="weather-mark" id="weatherIcon"><div class="sun"></div></div>
<p class="condition" id="condition">Loading</p>
<div class="updated" id="sourceText">UTC daily forecast</div>
</div>
</aside>
<section class="details">
<div class="summary">
<article class="metric">
<p class="k">Maximum</p>
<p class="v" id="maxTemp">--<small>°C</small></p>
</article>
<article class="metric">
<p class="k">Minimum</p>
<p class="v" id="minTemp">--<small>°C</small></p>
</article>
</div>
<div class="range">
<div class="range-label">Daily span</div>
<div class="range-track" aria-hidden="true"></div>
<div class="range-values" id="rangeText">-- / --</div>
</div>
<article class="hourly">
<div class="section-head">
<h2>Hourly temperatures</h2>
<div class="hint">UTC</div>
</div>
<div class="chart" id="chart"></div>
</article>
</section>
<div class="state" id="state">
<div class="state-box">
<div class="spinner" id="spinner"></div>
<h2 id="stateTitle">Loading weather</h2>
<p id="stateText">Fetching the requested date in Celsius.</p>
</div>
</div>
</section>
</main>
<script>
(function () {
"use strict";
const params = new URLSearchParams(window.location.search);
const nowUtc = new Date();
const todayUtc = nowUtc.toISOString().slice(0, 10);
const lat = readNumber(params.get("lat"), 52.52);
const lon = readNumber(params.get("lon"), 13.405);
const name = cleanText(params.get("name") || "Berlin");
const date = validDate(params.get("date")) ? params.get("date") : todayUtc;
const els = {
place: document.getElementById("place"),
dateText: document.getElementById("dateText"),
condition: document.getElementById("condition"),
weatherIcon: document.getElementById("weatherIcon"),
sourceText: document.getElementById("sourceText"),
maxTemp: document.getElementById("maxTemp"),
minTemp: document.getElementById("minTemp"),
rangeText: document.getElementById("rangeText"),
chart: document.getElementById("chart"),
state: document.getElementById("state"),
spinner: document.getElementById("spinner"),
stateTitle: document.getElementById("stateTitle"),
stateText: document.getElementById("stateText")
};
els.place.textContent = name;
els.dateText.textContent = formatDate(date);
loadWeather();
async function loadWeather() {
try {
const endpoint = date < todayUtc ? "/api/om/archive" : "/api/om/forecast";
const 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
});
const response = await fetch(endpoint + "?" + query.toString(), { cache: "no-store" });
if (!response.ok) throw new Error("Weather service returned " + response.status);
const data = await response.json();
const dailyIndex = (data.daily && data.daily.time || []).indexOf(date);
if (dailyIndex < 0) throw new Error("No daily data for requested date");
const max = numberAt(data.daily.temperature_2m_max, dailyIndex);
const min = numberAt(data.daily.temperature_2m_min, dailyIndex);
const code = numberAt(data.daily.weather_code, dailyIndex);
const hours = extractHours(data.hourly);
if (!Number.isFinite(max) || !Number.isFinite(min) || !Number.isFinite(code) || hours.length === 0) {
throw new Error("Weather response is incomplete");
}
renderWeather({ endpoint, max, min, code, hours });
hideState();
} catch (error) {
showError();
}
}
function renderWeather(weather) {
const condition = describeCode(weather.code);
els.condition.textContent = condition.text;
els.weatherIcon.innerHTML = '<div class="' + condition.icon + '"></div>';
els.sourceText.textContent = weather.endpoint.indexOf("archive") >= 0 ? "UTC historical weather" : "UTC forecast weather";
els.maxTemp.innerHTML = formatTemp(weather.max) + "<small>°C</small>";
els.minTemp.innerHTML = formatTemp(weather.min) + "<small>°C</small>";
els.rangeText.textContent = formatTemp(weather.min) + "° / " + formatTemp(weather.max) + "°";
renderChart(weather.hours);
}
function renderChart(hours) {
els.chart.innerHTML = "";
const values = hours.map(function (h) { return h.temp; }).filter(Number.isFinite);
const min = Math.min.apply(null, values);
const max = Math.max.apply(null, values);
const span = Math.max(1, max - min);
hours.forEach(function (point) {
const pct = 24 + ((point.temp - min) / span) * 68;
const color = tempColors(point.temp);
const wrap = document.createElement("div");
wrap.className = "bar-wrap";
wrap.title = pad(point.hour) + ":00 UTC, " + formatTemp(point.temp) + "°C";
const bar = document.createElement("div");
bar.className = "bar";
bar.style.height = pct.toFixed(2) + "%";
bar.style.setProperty("--bar-top", color.top);
bar.style.setProperty("--bar-bottom", color.bottom);
const temp = document.createElement("div");
temp.className = "temp";
temp.textContent = formatTemp(point.temp) + "°";
const hour = document.createElement("div");
hour.className = "hour";
hour.textContent = point.hour % 3 === 0 ? pad(point.hour) : "";
wrap.appendChild(bar);
wrap.appendChild(temp);
wrap.appendChild(hour);
els.chart.appendChild(wrap);
});
}
function extractHours(hourly) {
if (!hourly || !Array.isArray(hourly.time) || !Array.isArray(hourly.temperature_2m)) return [];
const out = [];
for (let i = 0; i < hourly.time.length; i++) {
const stamp = hourly.time[i];
if (typeof stamp !== "string" || stamp.slice(0, 10) !== date) continue;
const hour = Number(stamp.slice(11, 13));
const temp = Number(hourly.temperature_2m[i]);
if (Number.isFinite(hour) && Number.isFinite(temp)) out.push({ hour, temp });
}
return out.slice(0, 24);
}
function describeCode(code) {
if (code === 0) return { text: "Clear sky", icon: "sun" };
if ([1, 2].includes(code)) return { text: "Partly cloudy", icon: "cloud" };
if (code === 3) return { text: "Overcast", icon: "cloud" };
if ([45, 48].includes(code)) return { text: "Fog", icon: "fog" };
if ([51, 53, 55, 56, 57, 61, 63, 65, 66, 67, 80, 81, 82].includes(code)) return { text: "Rain", icon: "rain" };
if ([71, 73, 75, 77, 85, 86].includes(code)) return { text: "Snow", icon: "snow" };
if ([95, 96, 99].includes(code)) return { text: "Thunderstorm", icon: "bolt" };
return { text: "Mixed weather", icon: "cloud" };
}
function tempColors(value) {
if (value < 0) return { top: "#93d5ff", bottom: "#3f83d6" };
if (value < 12) return { top: "#65c8df", bottom: "#2d8fc3" };
if (value < 22) return { top: "#53d1b0", bottom: "#159b90" };
if (value < 31) return { top: "#ffc761", bottom: "#ef8f35" };
return { top: "#ff8a72", bottom: "#d95870" };
}
function showError() {
els.spinner.classList.add("hidden");
els.stateTitle.textContent = "Weather data could not be loaded";
els.stateText.textContent = "The page could not load the requested date from the weather API.";
els.condition.textContent = "Unavailable";
els.maxTemp.innerHTML = "--<small>°C</small>";
els.minTemp.innerHTML = "--<small>°C</small>";
els.rangeText.textContent = "-- / --";
els.chart.innerHTML = "";
}
function hideState() {
els.state.classList.add("hidden");
}
function readNumber(value, fallback) {
const n = Number(value);
return Number.isFinite(n) ? n : fallback;
}
function validDate(value) {
return typeof value === "string" && /^\d{4}-\d{2}-\d{2}$/.test(value) && !Number.isNaN(Date.parse(value + "T00:00:00Z"));
}
function cleanText(value) {
return String(value).trim().replace(/\s+/g, " ").slice(0, 80) || "Berlin";
}
function numberAt(list, index) {
return Array.isArray(list) ? Number(list[index]) : NaN;
}
function formatTemp(value) {
return Math.round(Number(value)).toString();
}
function formatDate(value) {
const d = new Date(value + "T00:00:00Z");
return new Intl.DateTimeFormat("en", {
weekday: "long",
month: "long",
day: "numeric",
year: "numeric",
timeZone: "UTC"
}).format(d);
}
function pad(value) {
return String(value).padStart(2, "0");
}
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 19,218 | html / css / js | 1,831 / 9,914 / 7,473 |
|---|---|---|---|
| dom nodes | 44 | dom depth | 9 |
| css rules | 55 | js present | yes |
| brightness | 213.1 | contrast | 40.2 |
| colorfulness | 58.9 | whitespace | 64.9% |
This slot's telemetry
| prompt tokens | 0 | completion tokens | 12,094 |
|---|---|---|---|
| total tokens | 0 | wall | 114.1 s |
| cost | — | request id | — |
config.json551 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "gpt-5.5-eff-medium--cli--codex-oauth--dev",
"effort": "medium",
"family": "gpt",
"m": {
"min": 2,
"q": 2
},
"model_id": "gpt-5.5",
"protocol": "cli",
"served_model": "gpt-5.5",
"telemetry": {
"completion_tokens": 43569,
"cost_usd": null,
"prompt_tokens": null,
"total_tokens": null,
"wall_ms": 371270
},
"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-medium--cli--codex-oauth--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-17T13:58:14.274949+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T13:56:46.929326+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:00:11.777525+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T13:58:17.699254+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:01:43.438993+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T14:00:15.640478+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-17T14:03:09.370832+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T14:01:47.311261+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
}
}
}