gpt-5.6-sol @ max · codex-oauth
codex-oauthmax
- config
- gpt-5.6-sol-eff-max--cli--codex-oauth--dev
- batch
- 2026-07-19--unified
- transport
- codex-cli-oauth-chatgpt
- protocol
- cli · plan
- served model
- gpt-5.6-sol
- 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.6-terra @xhigh · codex-oauth0.67gpt-5.6-luna @max · kiro0.66gpt-5.6-terra @high · kiro0.66claude-opus-4-7 @xhigh · kiro0.64gpt-5.4-mini @low · api0.64farthest
claude-opus-4-6 @low · kiro0.38qwen3.7-max · qoder0.41claude-opus-4-6 @medium · kiro0.41claude-opus-4-6 @max · kiro0.41claude-opus-4-6 @high · kiro0.41within 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.3
- 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=device-width, initial-scale=1.0">
<meta name="color-scheme" content="dark">
<title>Daily Weather</title>
<style>
:root {
--accent: #9bd5ff;
--accent-2: #718cff;
--sky-1: #172d45;
--sky-2: #0b182b;
--sky-3: #07101e;
--text: #f7fbff;
--muted: rgba(231, 242, 255, 0.65);
--faint: rgba(226, 239, 255, 0.09);
--border: rgba(225, 241, 255, 0.14);
}
body[data-weather="clear"] {
--accent: #ffd36a;
--accent-2: #ff9458;
--sky-1: #204c7b;
--sky-2: #102b52;
--sky-3: #08172f;
}
body[data-weather="partly"] {
--accent: #ffc96b;
--accent-2: #78c8ff;
--sky-1: #31597b;
--sky-2: #142d4c;
--sky-3: #09172a;
}
body[data-weather="fog"] {
--accent: #d4e2e9;
--accent-2: #93abb8;
--sky-1: #4c626d;
--sky-2: #263a46;
--sky-3: #14222c;
}
body[data-weather="rain"] {
--accent: #62d1ff;
--accent-2: #4f79ff;
--sky-1: #20455f;
--sky-2: #10283e;
--sky-3: #071522;
}
body[data-weather="snow"] {
--accent: #dcf7ff;
--accent-2: #89cfff;
--sky-1: #41627b;
--sky-2: #203d57;
--sky-3: #102337;
}
body[data-weather="storm"] {
--accent: #c6a6ff;
--accent-2: #ffca62;
--sky-1: #292b5c;
--sky-2: #171932;
--sky-3: #090a18;
}
* {
box-sizing: border-box;
}
[hidden] {
display: none !important;
}
html,
body {
width: 100%;
min-width: 960px;
height: 100%;
min-height: 700px;
margin: 0;
}
body {
display: grid;
place-items: center;
overflow: hidden;
color: var(--text);
font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background:
radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--accent) 30%, transparent) 0, transparent 27%),
radial-gradient(circle at 8% 86%, color-mix(in srgb, var(--accent-2) 18%, transparent) 0, transparent 31%),
linear-gradient(145deg, var(--sky-1), var(--sky-2) 48%, var(--sky-3));
transition: background 700ms ease;
}
body::before {
position: fixed;
inset: 0;
content: "";
pointer-events: none;
opacity: 0.22;
background-image:
linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: linear-gradient(to bottom, black, transparent 88%);
}
body::after {
position: fixed;
top: -220px;
right: -150px;
width: 580px;
height: 580px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 50%;
box-shadow:
0 0 0 90px rgba(255, 255, 255, 0.018),
0 0 0 180px rgba(255, 255, 255, 0.012);
content: "";
pointer-events: none;
}
.ambient {
position: fixed;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.ambient span {
position: absolute;
border-radius: 999px;
filter: blur(2px);
background: color-mix(in srgb, var(--accent) 13%, transparent);
}
.ambient span:nth-child(1) {
top: 12%;
left: 5%;
width: 210px;
height: 210px;
}
.ambient span:nth-child(2) {
right: 7%;
bottom: 4%;
width: 310px;
height: 110px;
transform: rotate(-18deg);
background: color-mix(in srgb, var(--accent-2) 11%, transparent);
}
.weather-card {
position: relative;
z-index: 1;
display: flex;
width: min(1160px, calc(100vw - 80px));
height: min(690px, calc(100vh - 80px));
min-height: 620px;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--border);
border-radius: 34px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.035)),
rgba(5, 14, 28, 0.58);
box-shadow:
0 36px 100px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
backdrop-filter: blur(24px) saturate(125%);
}
.weather-card::before {
position: absolute;
top: -140px;
left: 33%;
width: 500px;
height: 300px;
border-radius: 50%;
content: "";
pointer-events: none;
background: color-mix(in srgb, var(--accent) 10%, transparent);
filter: blur(70px);
}
.topbar {
position: relative;
z-index: 2;
display: flex;
min-height: 84px;
align-items: center;
justify-content: space-between;
padding: 0 34px;
border-bottom: 1px solid rgba(225, 241, 255, 0.1);
background: rgba(255, 255, 255, 0.018);
}
.topbar-left {
display: flex;
min-width: 0;
align-items: center;
gap: 22px;
}
.brand {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 11px;
}
.brand-mark {
display: flex;
width: 27px;
height: 27px;
align-items: flex-end;
justify-content: center;
gap: 3px;
padding: 5px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 9px;
background: rgba(255, 255, 255, 0.07);
}
.brand-mark i {
width: 3px;
border-radius: 3px;
background: var(--accent);
box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.brand-mark i:nth-child(1) { height: 7px; }
.brand-mark i:nth-child(2) { height: 15px; }
.brand-mark i:nth-child(3) { height: 11px; }
.brand-name {
font-size: 11px;
font-weight: 750;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.divider {
width: 1px;
height: 31px;
background: rgba(255, 255, 255, 0.13);
}
.place {
display: flex;
min-width: 0;
align-items: center;
gap: 11px;
}
.place-icon,
.date-icon {
display: grid;
width: 31px;
height: 31px;
flex: 0 0 auto;
place-items: center;
border-radius: 10px;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 11%, transparent);
}
.place-icon svg,
.date-icon svg {
width: 15px;
height: 15px;
}
.place-name {
max-width: 400px;
overflow: hidden;
font-size: 16px;
font-weight: 650;
text-overflow: ellipsis;
white-space: nowrap;
}
.coordinates {
margin-top: 3px;
color: var(--muted);
font-size: 10px;
font-weight: 550;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.date-chip {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 11px;
padding: 8px 13px 8px 9px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 14px;
background: rgba(255, 255, 255, 0.055);
}
.date-label {
color: var(--muted);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.date-value {
margin-top: 2px;
font-size: 13px;
font-weight: 600;
}
.content {
position: relative;
z-index: 1;
display: flex;
min-height: 0;
flex: 1;
flex-direction: column;
gap: 18px;
padding: 22px 32px 26px;
}
.summary {
display: grid;
min-height: 268px;
flex: 0 0 268px;
grid-template-columns: minmax(0, 1fr) 390px;
align-items: stretch;
gap: 28px;
}
.summary-copy {
display: flex;
min-width: 0;
flex-direction: column;
justify-content: center;
padding-left: 10px;
}
.eyebrow {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 9px;
color: var(--accent);
font-size: 10px;
font-weight: 750;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.eyebrow::before {
width: 22px;
height: 2px;
border-radius: 2px;
content: "";
background: var(--accent);
box-shadow: 0 0 12px var(--accent);
}
.condition {
max-width: 590px;
margin: 0;
font-size: clamp(38px, 4vw, 53px);
font-weight: 590;
letter-spacing: -0.045em;
line-height: 0.98;
}
.condition-copy {
max-width: 540px;
min-height: 38px;
margin: 13px 0 17px;
color: var(--muted);
font-size: 14px;
line-height: 1.55;
}
.temperature-row {
display: flex;
align-items: center;
gap: 21px;
}
.hero-temperature {
display: flex;
align-items: flex-start;
min-width: 116px;
color: var(--text);
font-size: 78px;
font-weight: 270;
letter-spacing: -0.075em;
line-height: 0.8;
}
.hero-temperature sup {
margin: -1px 0 0 6px;
color: var(--accent);
font-size: 31px;
font-weight: 450;
letter-spacing: 0;
}
.metrics {
display: flex;
gap: 10px;
}
.metric {
min-width: 104px;
padding: 10px 14px;
border: 1px solid rgba(255, 255, 255, 0.095);
border-radius: 14px;
background: rgba(255, 255, 255, 0.045);
}
.metric-label {
display: flex;
align-items: center;
gap: 6px;
color: var(--muted);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.metric-label::before {
width: 5px;
height: 5px;
border-radius: 50%;
content: "";
background: var(--accent);
box-shadow: 0 0 8px var(--accent);
}
.metric.low .metric-label::before {
background: var(--accent-2);
box-shadow: 0 0 8px var(--accent-2);
}
.metric-value {
margin-top: 5px;
font-size: 19px;
font-weight: 620;
}
.visual-panel {
position: relative;
display: grid;
min-width: 0;
overflow: hidden;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 27px;
background:
radial-gradient(circle at 55% 45%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 46%),
linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.022));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.visual-panel::before,
.visual-panel::after {
position: absolute;
border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
border-radius: 50%;
content: "";
}
.visual-panel::before {
width: 225px;
height: 225px;
}
.visual-panel::after {
width: 175px;
height: 175px;
}
.weather-art {
position: relative;
z-index: 1;
width: 95%;
filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.24));
}
.weather-art svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.visual-caption {
position: absolute;
right: 16px;
bottom: 14px;
z-index: 2;
display: flex;
align-items: center;
gap: 7px;
color: rgba(238, 247, 255, 0.55);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.visual-caption::before {
width: 6px;
height: 6px;
border-radius: 50%;
content: "";
background: var(--accent);
box-shadow: 0 0 9px var(--accent);
}
.hourly-panel {
display: flex;
min-height: 0;
flex: 1;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.095);
border-radius: 24px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
}
.hourly-header {
display: flex;
min-height: 55px;
align-items: center;
justify-content: space-between;
padding: 0 18px 0 21px;
border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}
.hourly-heading {
display: flex;
align-items: center;
gap: 11px;
}
.hourly-heading h2 {
margin: 0;
font-size: 14px;
font-weight: 650;
letter-spacing: -0.01em;
}
.live-dot {
position: relative;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 10px var(--accent);
}
.live-dot::after {
position: absolute;
inset: -4px;
border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
border-radius: 50%;
content: "";
}
.hourly-meta {
display: flex;
align-items: center;
gap: 13px;
color: var(--muted);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
}
.range-chip {
padding: 6px 9px;
border-radius: 9px;
color: var(--text);
background: rgba(255, 255, 255, 0.06);
}
.chart {
position: relative;
min-height: 0;
flex: 1;
margin: 0 17px 6px;
overflow: hidden;
}
.guide {
position: absolute;
right: 0;
left: 0;
border-top: 1px dashed rgba(255, 255, 255, 0.075);
}
.guide:nth-child(1) { top: 23%; }
.guide:nth-child(2) { top: 44%; }
.guide:nth-child(3) { top: 65%; }
.chart-lines {
position: absolute;
top: 0;
right: calc(100% / (var(--hours) * 2));
bottom: 0;
left: calc(100% / (var(--hours) * 2));
width: auto;
height: 100%;
overflow: visible;
pointer-events: none;
}
.hour-grid {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(var(--hours), minmax(0, 1fr));
}
.hour {
position: relative;
min-width: 0;
border-left: 1px solid rgba(255, 255, 255, 0.025);
}
.hour:first-child {
border-left: 0;
}
.hour-temperature {
position: absolute;
top: calc(var(--point-y) * 1% - 21px);
left: 50%;
color: rgba(247, 251, 255, 0.92);
font-size: 10px;
font-weight: 650;
transform: translateX(-50%);
white-space: nowrap;
}
.hour-dot {
position: absolute;
top: calc(var(--point-y) * 1%);
left: 50%;
width: 6px;
height: 6px;
border: 1.5px solid rgba(7, 18, 32, 0.85);
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 65%, transparent);
transform: translate(-50%, -50%);
}
.hour-time {
position: absolute;
bottom: 2px;
left: 50%;
color: rgba(231, 242, 255, 0.45);
font-size: 8px;
font-weight: 650;
letter-spacing: 0.04em;
transform: translateX(-50%);
}
.state-panel {
position: relative;
z-index: 2;
display: flex;
min-height: 0;
flex: 1;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.loader {
position: relative;
width: 66px;
height: 66px;
margin-bottom: 21px;
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 50%;
}
.loader::before {
position: absolute;
inset: 8px;
border: 2px solid transparent;
border-top-color: var(--accent);
border-right-color: color-mix(in srgb, var(--accent) 35%, transparent);
border-radius: 50%;
content: "";
animation: spin 900ms linear infinite;
}
.loader::after {
position: absolute;
inset: 25px;
border-radius: 50%;
content: "";
background: var(--accent);
box-shadow: 0 0 18px var(--accent);
}
.state-panel h2 {
margin: 0 0 8px;
font-size: 24px;
font-weight: 570;
letter-spacing: -0.025em;
}
.state-panel p {
max-width: 440px;
margin: 0;
color: var(--muted);
font-size: 14px;
line-height: 1.55;
}
.error-symbol {
display: grid;
width: 72px;
height: 72px;
margin-bottom: 22px;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 23px;
color: var(--accent);
font-size: 29px;
background: rgba(255, 255, 255, 0.055);
}
.retry {
margin-top: 22px;
padding: 10px 18px;
border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
border-radius: 12px;
color: var(--text);
font: inherit;
font-size: 12px;
font-weight: 650;
cursor: pointer;
background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.retry:hover {
background: color-mix(in srgb, var(--accent) 19%, transparent);
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes drift {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
@keyframes ray {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
.art-drift {
animation: drift 5s ease-in-out infinite;
}
.art-rays {
animation: ray 3.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation: none !important;
transition: none !important;
}
}
</style>
</head>
<body data-weather="cloud">
<div class="ambient" aria-hidden="true"><span></span><span></span></div>
<main class="weather-card" aria-live="polite">
<header class="topbar">
<div class="topbar-left">
<div class="brand" aria-label="Atmos weather">
<span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>
<span class="brand-name">Atmos</span>
</div>
<span class="divider" aria-hidden="true"></span>
<div class="place">
<span class="place-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<path d="M12 21s6-5.4 6-12A6 6 0 0 0 6 9c0 6.6 6 12 6 12Z" stroke="currentColor" stroke-width="1.8"/>
<circle cx="12" cy="9" r="2.2" stroke="currentColor" stroke-width="1.8"/>
</svg>
</span>
<div>
<div class="place-name" id="locationName">Berlin</div>
<div class="coordinates" id="coordinates">52.520° N · 13.405° E</div>
</div>
</div>
</div>
<div class="date-chip">
<span class="date-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<rect x="3.5" y="5.5" width="17" height="15" rx="3" stroke="currentColor" stroke-width="1.7"/>
<path d="M7.5 3.5v4M16.5 3.5v4M3.5 10h17" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
</svg>
</span>
<div>
<div class="date-label">Forecast date</div>
<time class="date-value" id="dateValue"></time>
</div>
</div>
</header>
<section class="state-panel" id="loadingState">
<div class="loader" aria-hidden="true"></div>
<h2>Reading the atmosphere</h2>
<p>Loading the daily outlook and hourly temperatures in UTC.</p>
</section>
<section class="content" id="weatherContent" hidden>
<section class="summary">
<div class="summary-copy">
<div class="eyebrow">Daily outlook · UTC</div>
<h1 class="condition" id="condition">Weather</h1>
<p class="condition-copy" id="conditionCopy"></p>
<div class="temperature-row">
<div class="hero-temperature" aria-label="Maximum temperature">
<span id="heroHigh">—</span><sup>°</sup>
</div>
<div class="metrics">
<div class="metric">
<div class="metric-label">Maximum</div>
<div class="metric-value" id="maximum">—</div>
</div>
<div class="metric low">
<div class="metric-label">Minimum</div>
<div class="metric-value" id="minimum">—</div>
</div>
</div>
</div>
</div>
<div class="visual-panel">
<div class="weather-art" id="weatherArt" aria-hidden="true"></div>
<div class="visual-caption" id="visualCaption">Daily conditions</div>
</div>
</section>
<section class="hourly-panel" aria-labelledby="hourlyTitle">
<div class="hourly-header">
<div class="hourly-heading">
<span class="live-dot" aria-hidden="true"></span>
<h2 id="hourlyTitle">Hourly temperatures</h2>
</div>
<div class="hourly-meta">
<span>UTC · Celsius</span>
<span class="range-chip" id="hourlyRange">—</span>
</div>
</div>
<div class="chart" id="chart" role="img" aria-label="Hourly temperature chart">
<span class="guide" aria-hidden="true"></span>
<span class="guide" aria-hidden="true"></span>
<span class="guide" aria-hidden="true"></span>
<svg class="chart-lines" id="chartLines" preserveAspectRatio="none" aria-hidden="true"></svg>
<div class="hour-grid" id="hourGrid"></div>
</div>
</section>
</section>
<section class="state-panel" id="errorState" hidden>
<div class="error-symbol" aria-hidden="true">!</div>
<h2>Weather data couldn’t be loaded</h2>
<p id="errorDetail">The forecast service did not return usable weather data. Please try again.</p>
<button class="retry" id="retryButton" type="button">Try again</button>
</section>
</main>
<script>
(() => {
const query = new URLSearchParams(window.location.search);
const utcToday = new Date().toISOString().slice(0, 10);
function validDate(value) {
if (!/^\d{4}-\d{2}-\d{2}$/.test(value || "")) return false;
const [year, month, day] = value.split("-").map(Number);
const parsed = new Date(Date.UTC(year, month - 1, day));
return parsed.getUTCFullYear() === year &&
parsed.getUTCMonth() === month - 1 &&
parsed.getUTCDate() === day;
}
function coordinate(value, fallback, minimum, maximum) {
const parsed = Number.parseFloat(value);
return Number.isFinite(parsed) && parsed >= minimum && parsed <= maximum
? parsed
: fallback;
}
const latitude = coordinate(query.get("lat"), 52.52, -90, 90);
const longitude = coordinate(query.get("lon"), 13.405, -180, 180);
const locationLabel = (query.get("name") || "").trim() || "Berlin";
const requestedDate = validDate(query.get("date")) ? query.get("date") : utcToday;
const elements = {
location: document.getElementById("locationName"),
coordinates: document.getElementById("coordinates"),
date: document.getElementById("dateValue"),
loading: document.getElementById("loadingState"),
content: document.getElementById("weatherContent"),
error: document.getElementById("errorState"),
errorDetail: document.getElementById("errorDetail"),
retry: document.getElementById("retryButton"),
condition: document.getElementById("condition"),
conditionCopy: document.getElementById("conditionCopy"),
heroHigh: document.getElementById("heroHigh"),
maximum: document.getElementById("maximum"),
minimum: document.getElementById("minimum"),
art: document.getElementById("weatherArt"),
caption: document.getElementById("visualCaption"),
range: document.getElementById("hourlyRange"),
chart: document.getElementById("chart"),
chartLines: document.getElementById("chartLines"),
hourGrid: document.getElementById("hourGrid")
};
function cardinal(value, positive, negative) {
return `${Math.abs(value).toFixed(3)}° ${value >= 0 ? positive : negative}`;
}
const dateObject = new Date(`${requestedDate}T00:00:00Z`);
const formattedDate = new Intl.DateTimeFormat(undefined, {
weekday: "long",
day: "numeric",
month: "long",
year: "numeric",
timeZone: "UTC"
}).format(dateObject);
elements.location.textContent = locationLabel;
elements.coordinates.textContent =
`${cardinal(latitude, "N", "S")} · ${cardinal(longitude, "E", "W")}`;
elements.date.textContent = formattedDate;
elements.date.dateTime = requestedDate;
document.title = `${locationLabel} weather — ${requestedDate}`;
function weatherInfo(code) {
if (code === 0) {
return {
name: "Clear sky",
kind: "clear",
copy: "A clear, settled pattern is expected across the day."
};
}
if (code === 1) {
return {
name: "Mainly clear",
kind: "partly",
copy: "Mostly open skies, with only light cloud passing through."
};
}
if (code === 2) {
return {
name: "Partly cloudy",
kind: "partly",
copy: "A balanced mix of cloud and clearer intervals through the day."
};
}
if (code === 3) {
return {
name: "Overcast",
kind: "cloud",
copy: "Cloud cover is expected to remain established across the day."
};
}
if (code === 45 || code === 48) {
return {
name: code === 48 ? "Rime fog" : "Fog",
kind: "fog",
copy: "Low visibility and a muted, misty atmosphere are expected."
};
}
if ([51, 53, 55, 56, 57].includes(code)) {
return {
name: code >= 56 ? "Freezing drizzle" : "Drizzle",
kind: "rain",
copy: "Light, fine precipitation may linger during the day."
};
}
if ([61, 63, 65, 66, 67].includes(code)) {
return {
name: code >= 66 ? "Freezing rain" : code === 65 ? "Heavy rain" : "Rain",
kind: "rain",
copy: "Wet conditions are expected, with periods of rainfall."
};
}
if ([71, 73, 75, 77].includes(code)) {
return {
name: code === 75 ? "Heavy snow" : "Snow",
kind: "snow",
copy: "Wintry conditions are expected, with snow across the day."
};
}
if ([80, 81, 82].includes(code)) {
return {
name: code === 82 ? "Heavy showers" : "Rain showers",
kind: "rain",
copy: "Intermittent showers will shape the weather through the day."
};
}
if ([85, 86].includes(code)) {
return {
name: "Snow showers",
kind: "snow",
copy: "Passing snow showers are expected at intervals."
};
}
if ([95, 96, 99].includes(code)) {
return {
name: code >= 96 ? "Thunderstorm with hail" : "Thunderstorm",
kind: "storm",
copy: "An unsettled, energetic atmosphere may bring thunderstorms."
};
}
return {
name: "Unclassified weather",
kind: "cloud",
copy: "Weather conditions are available, but no standard description was provided."
};
}
function weatherArtwork(kind) {
const defs = `
<defs>
<linearGradient id="sunFill" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#fff1a8"/>
<stop offset="0.5" stop-color="#ffd05f"/>
<stop offset="1" stop-color="#ff9257"/>
</linearGradient>
<linearGradient id="cloudFill" x1="0" y1="0" x2="0.8" y2="1">
<stop offset="0" stop-color="#f8fcff"/>
<stop offset="0.48" stop-color="#cbe1ee"/>
<stop offset="1" stop-color="#7b9bb0"/>
</linearGradient>
<linearGradient id="darkCloud" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#9baec2"/>
<stop offset="1" stop-color="#43566f"/>
</linearGradient>
<linearGradient id="rainFill" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#9ee9ff"/>
<stop offset="1" stop-color="#398dff"/>
</linearGradient>
<filter id="sunGlow" x="-80%" y="-80%" width="260%" height="260%">
<feGaussianBlur stdDeviation="12"/>
</filter>
</defs>`;
const sun = `
<g class="art-rays" stroke="#ffd675" stroke-width="4" stroke-linecap="round" opacity=".85">
<path d="M244 29v-14M244 173v14M172 101h-14M316 101h14M193 50l-10-10M295 152l10 10M193 152l-10 10M295 50l10-10"/>
</g>
<circle cx="244" cy="101" r="53" fill="#ffc85f" opacity=".22" filter="url(#sunGlow)"/>
<circle cx="244" cy="101" r="43" fill="url(#sunFill)"/>
<circle cx="230" cy="86" r="12" fill="#fff" opacity=".22"/>`;
const cloud = `
<g class="art-drift">
<ellipse cx="174" cy="150" rx="91" ry="39" fill="url(#cloudFill)"/>
<circle cx="137" cy="132" r="46" fill="url(#cloudFill)"/>
<circle cx="187" cy="113" r="59" fill="url(#cloudFill)"/>
<circle cx="235" cy="139" r="43" fill="url(#cloudFill)"/>
<ellipse cx="178" cy="170" rx="72" ry="17" fill="#66879d" opacity=".2"/>
<ellipse cx="168" cy="109" rx="25" ry="13" fill="#fff" opacity=".22"/>
</g>`;
const rain = `
<g fill="url(#rainFill)">
<path d="M126 190c7 10 10 16 10 22a10 10 0 1 1-20 0c0-6 3-12 10-22Z"/>
<path d="M175 191c7 10 10 16 10 22a10 10 0 1 1-20 0c0-6 3-12 10-22Z"/>
<path d="M224 190c7 10 10 16 10 22a10 10 0 1 1-20 0c0-6 3-12 10-22Z"/>
</g>`;
const snow = `
<g stroke="#e9fbff" stroke-width="3" stroke-linecap="round">
<path d="M126 191v32M112 199l28 16M140 199l-28 16"/>
<path d="M177 194v32M163 202l28 16M191 202l-28 16"/>
<path d="M228 191v32M214 199l28 16M242 199l-28 16"/>
</g>`;
const fog = `
<g stroke="#d7e8ee" stroke-width="8" stroke-linecap="round" opacity=".82">
<path d="M89 183h170"/>
<path d="M112 205h174"/>
<path d="M78 227h147"/>
</g>`;
const storm = `
<path d="M175 177l-25 42h24l-9 31 43-50h-25l16-23Z" fill="#ffd567" stroke="#fff0a5" stroke-width="2"/>
<g stroke="#9a8cff" stroke-width="4" stroke-linecap="round">
<path d="M119 190l-12 24M237 190l-12 24"/>
</g>`;
let scene = cloud;
if (kind === "clear") scene = sun;
if (kind === "partly") scene = sun + cloud;
if (kind === "rain") scene = cloud.replaceAll("cloudFill", "darkCloud") + rain;
if (kind === "snow") scene = cloud + snow;
if (kind === "fog") scene = cloud + fog;
if (kind === "storm") scene = cloud.replaceAll("cloudFill", "darkCloud") + storm;
return `<svg viewBox="0 0 360 260" xmlns="http://www.w3.org/2000/svg">${defs}${scene}</svg>`;
}
function formatTemperature(value, decimals = 1) {
return `${Number(value).toFixed(decimals)}°C`;
}
function renderChart(hours) {
const temperatures = hours.map(hour => hour.temperature);
const minimum = Math.min(...temperatures);
const maximum = Math.max(...temperatures);
const spread = Math.max(maximum - minimum, 1);
const count = hours.length;
const span = Math.max(count - 1, 1);
const plotted = hours.map((hour, index) => ({
...hour,
x: count === 1 ? 0.5 : index,
y: 23 + ((maximum - hour.temperature) / spread) * 42
}));
const linePath = plotted
.map((point, index) => `${index ? "L" : "M"} ${point.x.toFixed(3)} ${point.y.toFixed(3)}`)
.join(" ");
const areaPath = `${linePath} L ${plotted.at(-1).x.toFixed(3)} 78 L ${plotted[0].x.toFixed(3)} 78 Z`;
elements.chart.style.setProperty("--hours", count);
elements.chartLines.setAttribute("viewBox", `0 0 ${span} 100`);
elements.chartLines.innerHTML = `
<defs>
<linearGradient id="chartArea" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="var(--accent)" stop-opacity=".22"/>
<stop offset="1" stop-color="var(--accent)" stop-opacity="0"/>
</linearGradient>
</defs>
<path d="${areaPath}" fill="url(#chartArea)"/>
<path d="${linePath}" fill="none" stroke="rgba(255,255,255,.14)" stroke-width="5"
vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
<path d="${linePath}" fill="none" stroke="var(--accent)" stroke-width="2"
vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>`;
elements.hourGrid.replaceChildren();
plotted.forEach(point => {
const column = document.createElement("div");
column.className = "hour";
column.style.setProperty("--point-y", point.y.toFixed(2));
column.setAttribute(
"aria-label",
`${point.label} UTC, ${formatTemperature(point.temperature, 1)}`
);
const temperature = document.createElement("span");
temperature.className = "hour-temperature";
temperature.textContent = `${Math.round(point.temperature)}°`;
const dot = document.createElement("span");
dot.className = "hour-dot";
dot.setAttribute("aria-hidden", "true");
const time = document.createElement("span");
time.className = "hour-time";
time.textContent = point.label.slice(0, 2);
column.append(temperature, dot, time);
elements.hourGrid.appendChild(column);
});
elements.range.textContent =
`${minimum.toFixed(1)}° — ${maximum.toFixed(1)}°`;
elements.chart.setAttribute(
"aria-label",
`Hourly temperatures from ${minimum.toFixed(1)} to ${maximum.toFixed(1)} degrees Celsius`
);
}
function showState(state) {
elements.loading.hidden = state !== "loading";
elements.content.hidden = state !== "content";
elements.error.hidden = state !== "error";
}
async function loadWeather() {
showState("loading");
const endpoint = requestedDate < utcToday
? "/api/om/archive"
: "/api/om/forecast";
const parameters = 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
});
try {
const response = await fetch(`${endpoint}?${parameters}`, {
headers: { Accept: "application/json" }
});
if (!response.ok) {
throw new Error(`Weather service returned ${response.status}`);
}
const data = await response.json();
const daily = data && data.daily;
const hourly = data && data.hourly;
if (!daily || !hourly || !Array.isArray(daily.time) || !Array.isArray(hourly.time)) {
throw new Error("Weather response was incomplete");
}
const dailyIndex = daily.time.indexOf(requestedDate);
const index = dailyIndex >= 0 ? dailyIndex : 0;
const maxValues = daily.temperature_2m_max;
const minValues = daily.temperature_2m_min;
const codeValues = daily.weather_code || daily.weathercode;
const maximum = Number(maxValues && maxValues[index]);
const minimum = Number(minValues && minValues[index]);
const code = Number(codeValues && codeValues[index]);
if (!Number.isFinite(maximum) || !Number.isFinite(minimum) || !Number.isFinite(code)) {
throw new Error("Daily weather values were unavailable");
}
const hours = hourly.time
.map((time, hourIndex) => ({
time,
label: String(time).slice(11, 16),
temperature: Number(hourly.temperature_2m && hourly.temperature_2m[hourIndex])
}))
.filter(hour =>
String(hour.time).startsWith(requestedDate) &&
Number.isFinite(hour.temperature)
);
if (!hours.length) {
throw new Error("Hourly temperatures were unavailable");
}
const info = weatherInfo(code);
document.body.dataset.weather = info.kind;
elements.condition.textContent = info.name;
elements.conditionCopy.textContent = info.copy;
elements.heroHigh.textContent = String(Math.round(maximum));
elements.maximum.textContent = formatTemperature(maximum);
elements.minimum.textContent = formatTemperature(minimum);
elements.art.innerHTML = weatherArtwork(info.kind);
elements.caption.textContent = info.name;
renderChart(hours);
showState("content");
} catch (error) {
console.error(error);
elements.errorDetail.textContent = navigator.onLine === false
? "You appear to be offline. Weather data cannot be loaded without a connection."
: "The forecast service did not return usable weather data for this date and location. Please try again.";
showState("error");
}
}
elements.retry.addEventListener("click", loadWeather);
loadWeather();
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 38,424 | html / css / js | 4,577 / 17,483 / 16,364 |
|---|---|---|---|
| dom nodes | 81 | dom depth | 10 |
| css rules | 102 | js present | yes |
| brightness | 50.8 | contrast | 20.8 |
| colorfulness | 20.3 | whitespace | 49.2% |
This slot's telemetry
| prompt tokens | 0 | completion tokens | 21,925 |
|---|---|---|---|
| total tokens | 0 | wall | 346.9 s |
| cost | — | request id | — |
config.json558 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "gpt-5.6-sol-eff-max--cli--codex-oauth--dev",
"effort": "max",
"family": "gpt",
"m": {
"min": 2,
"q": 2
},
"model_id": "gpt-5.6-sol",
"protocol": "cli",
"served_model": "gpt-5.6-sol",
"telemetry": {
"completion_tokens": 83771,
"cost_usd": null,
"prompt_tokens": null,
"total_tokens": null,
"wall_ms": 1281705
},
"transport": "codex-cli-oauth-chatgpt",
"vendor_sanction_ref": null
}send-log2.5 KB
{
"N": 2,
"batch_id": "2026-07-19--codex-oauth-extra",
"config_id": "gpt-5.6-sol-eff-max--cli--codex-oauth--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-18T21:46:49.233007+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-18T21:41:50.752579+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-18T21:52:39.790891+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-18T21:46:52.859983+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-18T21:59:44.957991+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-18T21:52:43.731804+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-18T22:03:23.972620+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-18T21:59:48.908149+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
}
}
}