gpt-5.6-luna @ high · codex-oauth
codex-oauthhigh
- config
- gpt-5.6-luna-eff-high--cli--codex-oauth--dev
- batch
- 2026-07-19--unified
- transport
- codex-cli-oauth-chatgpt
- protocol
- cli · plan
- served model
- gpt-5.6-luna
- 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
gemini-3.5-flash @minimal · api0.67gpt-5.4 @xhigh · api0.67gpt-5.6-luna @max · codex-oauth0.67grok-4.5 @medium · grok-cli0.67gpt-5.4 @high · api0.66farthest
gpt-5.5 @medium · codex-oauth0.39gpt-5.5 @xhigh · codex-oauth0.41gpt-5.6-luna @medium · codex-oauth0.42gpt-5.6-luna @high · kiro0.42gpt-5.6-luna @low · codex-oauth0.44within 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
- 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.0">
<title>Weather Card</title>
<style>
:root {
color-scheme: dark;
--ink: #f7fbff;
--muted: #a9bbce;
--line: rgba(255,255,255,.13);
--panel: rgba(12, 30, 53, .68);
--panel-soft: rgba(255,255,255,.08);
--accent: #7dd9ff;
--accent-2: #ffd98a;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
width: 100%;
min-height: 100%;
background: #091522;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
}
body {
min-height: 800px;
display: grid;
place-items: center;
overflow: hidden;
background:
radial-gradient(circle at 17% 14%, rgba(52, 125, 178, .42), transparent 34%),
radial-gradient(circle at 87% 15%, rgba(255, 191, 105, .18), transparent 28%),
linear-gradient(140deg, #081521 0%, #102c45 48%, #162b4c 100%);
}
body::before,
body::after {
content: "";
position: fixed;
border-radius: 999px;
filter: blur(2px);
pointer-events: none;
}
body::before {
width: 420px;
height: 420px;
left: -150px;
bottom: -180px;
background: rgba(53, 152, 203, .12);
}
body::after {
width: 300px;
height: 300px;
right: -80px;
bottom: -120px;
background: rgba(124, 92, 189, .12);
}
.shell {
width: 1120px;
height: 700px;
position: relative;
border: 1px solid rgba(255,255,255,.18);
border-radius: 34px;
overflow: hidden;
background: linear-gradient(135deg, rgba(35, 71, 104, .68), rgba(8, 24, 43, .84));
box-shadow: 0 34px 90px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
backdrop-filter: blur(22px);
}
.shell::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(115deg, rgba(255,255,255,.09), transparent 28%, transparent 70%, rgba(255,255,255,.04));
}
.topbar {
position: relative;
z-index: 1;
height: 92px;
padding: 28px 42px 22px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--line);
}
.brand {
display: flex;
align-items: center;
gap: 13px;
color: #d8f4ff;
letter-spacing: .08em;
font-size: 12px;
font-weight: 750;
text-transform: uppercase;
}
.brand-mark {
width: 31px;
height: 31px;
display: grid;
place-items: center;
border: 1px solid rgba(145, 226, 255, .42);
border-radius: 10px;
background: linear-gradient(145deg, rgba(124, 220, 255, .28), rgba(100, 122, 237, .16));
}
.brand-mark svg { width: 19px; height: 19px; }
.updated {
color: var(--muted);
font-size: 12px;
letter-spacing: .03em;
}
.content {
position: relative;
z-index: 1;
height: calc(100% - 92px);
padding: 38px 42px 34px;
display: grid;
grid-template-columns: 43% 57%;
gap: 36px;
}
.overview {
padding: 11px 28px 0 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.location {
display: flex;
align-items: center;
gap: 10px;
color: #d9e9f6;
font-size: 17px;
font-weight: 650;
}
.pin {
width: 11px;
height: 11px;
border: 2px solid var(--accent);
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
box-shadow: 0 0 16px rgba(125,217,255,.5);
}
.date {
margin-top: 10px;
color: var(--muted);
font-size: 14px;
}
.hero {
display: flex;
align-items: center;
gap: 24px;
margin-top: 12px;
}
.hero-icon {
width: 142px;
height: 142px;
display: grid;
place-items: center;
border-radius: 39px;
background: radial-gradient(circle at 38% 28%, rgba(255,255,255,.19), rgba(255,255,255,.03) 64%);
border: 1px solid rgba(255,255,255,.12);
}
.hero-icon svg {
width: 108px;
height: 108px;
filter: drop-shadow(0 10px 20px rgba(0,0,0,.2));
}
.temperature {
font-size: 92px;
line-height: .9;
font-weight: 300;
letter-spacing: -.08em;
}
.temperature sup {
position: relative;
top: -31px;
margin-left: 6px;
color: var(--accent);
font-size: 27px;
font-weight: 500;
letter-spacing: 0;
}
.condition {
margin-top: 14px;
color: #d7e8f6;
font-size: 18px;
font-weight: 650;
}
.highlow {
display: flex;
gap: 25px;
margin-top: 10px;
color: var(--muted);
font-size: 13px;
}
.highlow strong {
margin-left: 5px;
color: var(--ink);
font-size: 15px;
font-weight: 600;
}
.summary {
max-width: 320px;
padding: 18px 0 3px;
color: var(--muted);
font-size: 13px;
line-height: 1.6;
}
.details {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.stat {
min-height: 96px;
padding: 17px 16px;
border: 1px solid var(--line);
border-radius: 18px;
background: var(--panel-soft);
}
.stat-label {
color: var(--muted);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
}
.stat-value {
margin-top: 13px;
color: #f4fbff;
font-size: 24px;
font-weight: 560;
letter-spacing: -.04em;
}
.stat-value small {
color: var(--accent);
font-size: 14px;
font-weight: 500;
}
.hourly-wrap {
margin-top: 22px;
min-height: 245px;
padding: 22px 22px 19px;
border: 1px solid var(--line);
border-radius: 22px;
background: rgba(3, 17, 33, .28);
}
.section-title {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.section-title h2 {
margin: 0;
font-size: 14px;
font-weight: 650;
letter-spacing: .01em;
}
.section-title span {
color: var(--muted);
font-size: 11px;
}
.hourly {
display: grid;
grid-template-columns: repeat(12, minmax(46px, 1fr));
gap: 8px;
}
.hour {
min-width: 0;
padding: 11px 4px 10px;
text-align: center;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.045);
}
.hour.current {
border-color: rgba(125,217,255,.52);
background: linear-gradient(180deg, rgba(83, 180, 224, .25), rgba(255,255,255,.05));
box-shadow: 0 0 20px rgba(71, 180, 226, .1);
}
.hour-time {
color: var(--muted);
font-size: 11px;
}
.hour.current .hour-time { color: #c4f1ff; }
.hour svg {
width: 28px;
height: 28px;
margin: 11px auto 9px;
display: block;
}
.hour-temp {
color: #effaff;
font-size: 13px;
font-weight: 650;
}
.hourly-empty {
grid-column: 1 / -1;
padding: 45px 0;
color: var(--muted);
text-align: center;
font-size: 13px;
}
.footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 19px;
color: #8ea7bd;
font-size: 11px;
}
.footer .source {
display: flex;
align-items: center;
gap: 8px;
}
.source-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #79d9a8;
box-shadow: 0 0 10px #79d9a8;
}
.error {
position: absolute;
inset: 92px 0 0;
z-index: 5;
display: none;
place-items: center;
padding: 40px;
background: rgba(7, 20, 35, .74);
backdrop-filter: blur(10px);
}
.error.visible { display: grid; }
.error-box {
max-width: 390px;
padding: 30px;
text-align: center;
border: 1px solid rgba(255, 184, 184, .22);
border-radius: 22px;
background: rgba(63, 28, 45, .48);
}
.error-icon {
width: 44px;
height: 44px;
margin: 0 auto 16px;
display: grid;
place-items: center;
border-radius: 50%;
color: #ffc1c1;
background: rgba(255, 130, 130, .14);
font-size: 22px;
}
.error h2 {
margin: 0 0 8px;
font-size: 19px;
}
.error p {
margin: 0;
color: #d4bfc9;
font-size: 13px;
line-height: 1.55;
}
.loading {
color: var(--muted);
font-size: 13px;
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
50% { opacity: .45; }
}
@media (max-width: 900px) {
body { overflow: auto; }
.shell { width: calc(100% - 28px); height: auto; min-height: 700px; }
.content { height: auto; grid-template-columns: 1fr; }
.overview { min-height: 390px; padding-right: 0; }
.hourly { grid-template-columns: repeat(6, 1fr); }
}
</style>
</head>
<body>
<main class="shell">
<header class="topbar">
<div class="brand">
<div class="brand-mark">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7">
<path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.64 5.64l2.12 2.12M16.24 16.24l2.12 2.12M18.36 5.64l-2.12 2.12M7.76 16.24l-2.12 2.12"/>
<circle cx="12" cy="12" r="4.2"/>
</svg>
</div>
Daily forecast
</div>
<div class="updated" id="updated">UTC · Loading forecast</div>
</header>
<section class="content">
<div class="overview">
<div>
<div class="location"><span class="pin"></span><span id="location">Berlin</span></div>
<div class="date" id="date">Loading date…</div>
</div>
<div class="hero">
<div class="hero-icon" id="heroIcon"></div>
<div>
<div class="temperature" id="temperature">—<sup>°C</sup></div>
<div class="condition" id="condition">Loading weather</div>
<div class="highlow">
<span>High <strong id="high">—</strong></span>
<span>Low <strong id="low">—</strong></span>
</div>
</div>
</div>
<div class="summary" id="summary">Fetching the latest hourly conditions for this location.</div>
</div>
<div class="details">
<div class="stats">
<div class="stat">
<div class="stat-label">Maximum</div>
<div class="stat-value" id="maxStat">— <small>°C</small></div>
</div>
<div class="stat">
<div class="stat-label">Minimum</div>
<div class="stat-value" id="minStat">— <small>°C</small></div>
</div>
<div class="stat">
<div class="stat-label">Readings</div>
<div class="stat-value" id="readingStat">— <small>hours</small></div>
</div>
</div>
<div class="hourly-wrap">
<div class="section-title">
<h2>Hourly temperature</h2>
<span>24-hour view · UTC</span>
</div>
<div class="hourly" id="hourly">
<div class="hourly-empty loading">Loading hourly temperatures…</div>
</div>
</div>
<div class="footer">
<div class="source"><span class="source-dot"></span> Open-Meteo compatible data</div>
<div>Temperatures shown in Celsius</div>
</div>
</div>
</section>
<div class="error" id="error">
<div class="error-box">
<div class="error-icon">!</div>
<h2>Weather unavailable</h2>
<p id="errorMessage">The weather data could not be loaded. Please try again later.</p>
</div>
</div>
</main>
<script>
(() => {
const params = new URLSearchParams(window.location.search);
const fallbackDate = new Date().toISOString().slice(0, 10);
const lat = Number(params.get("lat"));
const lon = Number(params.get("lon"));
const latitude = Number.isFinite(lat) ? lat : 52.52;
const longitude = Number.isFinite(lon) ? lon : 13.405;
const locationName = params.get("name") || "Berlin";
const requestedDate = /^\d{4}-\d{2}-\d{2}$/.test(params.get("date") || "")
? params.get("date")
: fallbackDate;
const $ = id => document.getElementById(id);
$("location").textContent = locationName;
const dateObject = new Date(requestedDate + "T00:00:00Z");
$("date").textContent = Number.isNaN(dateObject.getTime())
? requestedDate
: new Intl.DateTimeFormat("en-US", {
weekday: "long", month: "long", day: "numeric", year: "numeric",
timeZone: "UTC"
}).format(dateObject);
const today = new Date().toISOString().slice(0, 10);
const endpoint = requestedDate < today ? "/api/om/archive" : "/api/om/forecast";
const query = new URLSearchParams({
latitude: String(latitude),
longitude: String(longitude),
daily: "temperature_2m_max,temperature_2m_min,weather_code",
hourly: "temperature_2m",
timezone: "UTC",
temperature_unit: "celsius",
start_date: requestedDate,
end_date: requestedDate
});
const weatherInfo = code => {
if (code === 0) return { name: "Clear sky", icon: "sun", color: "#ffd477" };
if ([1, 2].includes(code)) return { name: "Partly cloudy", icon: "partly", color: "#ffd477" };
if (code === 3) return { name: "Overcast", icon: "cloud", color: "#bdd1df" };
if ([45, 48].includes(code)) return { name: "Foggy", icon: "fog", color: "#c4d5df" };
if ([51, 53, 55, 56, 57].includes(code)) return { name: "Drizzle", icon: "drizzle", color: "#8dd8f4" };
if ([61, 63, 65, 66, 67].includes(code)) return { name: "Rain", icon: "rain", color: "#8dd8f4" };
if ([71, 73, 75, 77, 85, 86].includes(code)) return { name: "Snow", icon: "snow", color: "#e6f7ff" };
if ([80, 81, 82].includes(code)) return { name: "Rain showers", icon: "showers", color: "#8dd8f4" };
if ([95, 96, 99].includes(code)) return { name: "Thunderstorms", icon: "storm", color: "#d3b9ff" };
return { name: "Variable conditions", icon: "cloud", color: "#bdd1df" };
};
const iconSvg = (type, color) => {
const sun = `<circle cx="32" cy="31" r="12" fill="${color}"/><g stroke="${color}" stroke-width="3" stroke-linecap="round"><path d="M32 8v7M32 49v7M9 31h7M48 31h7M15.7 14.7l5 5M43.3 42.3l5 5M48.3 14.7l-5 5M20.7 42.3l-5 5"/></g>`;
const cloud = `<path d="M18 48h31a12 12 0 0 0 1-24 18 18 0 0 0-34-1A13 13 0 0 0 18 48Z" fill="${color}" opacity=".93"/>`;
const smallCloud = `<path d="M31 55h21a9 9 0 0 0 0-18 14 14 0 0 0-26-2A10 10 0 0 0 31 55Z" fill="#dbe8ee" opacity=".95"/>`;
let body = "";
if (type === "sun") body = sun;
if (type === "partly") body = `<g transform="translate(-5 -7) scale(.82)">${sun}</g>${smallCloud}`;
if (type === "cloud" || type === "fog") body = cloud;
if (type === "rain" || type === "showers" || type === "drizzle") body = `${cloud}<g stroke="${color}" stroke-width="3" stroke-linecap="round"><path d="M25 55l-3 7M38 55l-3 7M51 55l-3 7"/></g>`;
if (type === "snow") body = `${cloud}<g fill="${color}"><circle cx="25" cy="61" r="2.5"/><circle cx="39" cy="61" r="2.5"/><circle cx="53" cy="61" r="2.5"/></g>`;
if (type === "storm") body = `${cloud}<path d="M38 48l-8 14h8l-5 11 14-17h-9l7-8Z" fill="${color}"/>`;
return `<svg viewBox="0 0 70 70" fill="none" aria-hidden="true">${body}</svg>`;
};
const formatTemp = value => Number.isFinite(Number(value)) ? `${Math.round(Number(value))}°` : "—";
const formatHour = value => {
const match = String(value).match(/T(\d{2}):/);
if (!match) return "—";
const hour = Number(match[1]);
return `${String(hour).padStart(2, "0")}:00`;
};
const showError = message => {
$("errorMessage").textContent = message;
$("error").classList.add("visible");
$("updated").textContent = "UTC · Unable to load forecast";
};
fetch(`${endpoint}?${query.toString()}`, { headers: { Accept: "application/json" } })
.then(response => {
if (!response.ok) throw new Error(`Request failed (${response.status})`);
return response.json();
})
.then(data => {
const daily = data.daily || {};
const hourly = data.hourly || {};
const dates = Array.isArray(daily.time) ? daily.time : [];
const index = Math.max(0, dates.indexOf(requestedDate));
const max = Number(daily.temperature_2m_max?.[index]);
const min = Number(daily.temperature_2m_min?.[index]);
const code = Number(daily.weather_code?.[index]);
if (!Number.isFinite(max) && !Number.isFinite(min) && !Array.isArray(hourly.temperature_2m)) {
throw new Error("No weather data was returned");
}
const info = weatherInfo(code);
$("heroIcon").innerHTML = iconSvg(info.icon, info.color);
$("temperature").innerHTML = `${formatTemp(Number.isFinite(max) ? max : min).replace("°", "")}<sup>°C</sup>`;
$("condition").textContent = info.name;
$("high").textContent = formatTemp(max);
$("low").textContent = formatTemp(min);
$("maxStat").innerHTML = `${formatTemp(max).replace("°", "")} <small>°C</small>`;
$("minStat").innerHTML = `${formatTemp(min).replace("°", "")} <small>°C</small>`;
const hours = Array.isArray(hourly.time) ? hourly.time : [];
const temperatures = Array.isArray(hourly.temperature_2m) ? hourly.temperature_2m : [];
const readings = hours.map((time, i) => ({ time, temp: Number(temperatures[i]) }))
.filter(item => item.time && Number.isFinite(item.temp));
$("readingStat").innerHTML = `${readings.length} <small>hours</small>`;
$("updated").textContent = `UTC · ${readings.length ? "Forecast loaded" : "Daily forecast loaded"}`;
$("summary").textContent = Number.isFinite(max) && Number.isFinite(min)
? `Expect ${info.name.toLowerCase()} with temperatures ranging from ${formatTemp(min)} to ${formatTemp(max)} across the day.`
: `Hourly conditions for ${locationName}.`;
const hourlyEl = $("hourly");
hourlyEl.innerHTML = "";
if (!readings.length) {
hourlyEl.innerHTML = `<div class="hourly-empty">No hourly temperatures available for this date.</div>`;
return;
}
readings.forEach((reading, i) => {
const item = document.createElement("div");
item.className = "hour" + (i === 0 ? " current" : "");
const hourInfo = weatherInfo(code);
item.innerHTML = `
<div class="hour-time">${formatHour(reading.time)}</div>
${iconSvg(hourInfo.icon, hourInfo.color)}
<div class="hour-temp">${formatTemp(reading.temp)}</div>
`;
hourlyEl.appendChild(item);
});
})
.catch(error => showError(error.message || "The weather data could not be loaded."));
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 18,651 | html / css / js | 3,013 / 8,565 / 7,073 |
|---|---|---|---|
| dom nodes | 64 | dom depth | 10 |
| css rules | 64 | js present | yes |
| brightness | 47.8 | contrast | 19.7 |
| colorfulness | 22.2 | whitespace | 62.5% |
This slot's telemetry
| prompt tokens | 0 | completion tokens | 12,439 |
|---|---|---|---|
| total tokens | 0 | wall | 121.1 s |
| cost | — | request id | — |
config.json562 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "gpt-5.6-luna-eff-high--cli--codex-oauth--dev",
"effort": "high",
"family": "gpt",
"m": {
"min": 2,
"q": 2
},
"model_id": "gpt-5.6-luna",
"protocol": "cli",
"served_model": "gpt-5.6-luna",
"telemetry": {
"completion_tokens": 38897,
"cost_usd": null,
"prompt_tokens": null,
"total_tokens": null,
"wall_ms": 390984
},
"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.6-luna",
"config_id": "gpt-5.6-luna-eff-high--cli--codex-oauth--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-17T13:46:57.524198+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T13:44:56.447550+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:48:13.565818+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T13:47:02.865176+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:20.621325+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T13:48:17.507497+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:40.569926+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T13:49:24.463190+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
}
}
}