gpt-6-luna @ max · codex

codexdevmax
config
gpt-6-luna-eff-max--cli--codex--dev
batch
2026-07-19--unified
transport
codex-cli-isolated-home
protocol
cli · plan
served model
gpt-6-luna
captured
Jul 18, 2026, 11:54 AM · N=2
variant
live
slot 0 · P-q · sandboxed iframe
gpt-6-luna @max · codex 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 tempambiguousshown: 17max-equals-min
  • min tempambiguousshown: 17max-equals-min
  • 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">
  <meta name="theme-color" content="#0b1423">
  <title>Daily Weather</title>
  <style>
    :root {
      color-scheme: dark;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-synthesis: none;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      --muted: #92a2b6;
      --soft: #c4cfdd;
      --text: #f3f6fb;
      --accent: #f6c66d;
      --line: rgba(204, 221, 240, .12);
    }

    * { box-sizing: border-box; }

    body {
      min-width: 360px;
      min-height: 100vh;
      margin: 0;
      display: grid;
      place-items: center;
      padding: 28px;
      overflow-x: hidden;
      color: var(--text);
      background:
        radial-gradient(ellipse at 18% 12%, rgba(54, 94, 145, .28), transparent 38%),
        radial-gradient(ellipse at 84% 82%, rgba(113, 91, 61, .17), transparent 35%),
        linear-gradient(145deg, #0a1220 0%, #111e30 52%, #0a1422 100%);
    }

    .ambient {
      position: fixed;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: -1;
    }

    .ambient::before,
    .ambient::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      filter: blur(2px);
    }

    .ambient::before {
      width: 420px;
      height: 420px;
      top: -235px;
      left: 45%;
      border: 1px solid rgba(188, 211, 239, .1);
      box-shadow: 0 0 0 48px rgba(188, 211, 239, .018), 0 0 0 96px rgba(188, 211, 239, .014);
    }

    .ambient::after {
      width: 260px;
      height: 260px;
      right: -110px;
      bottom: 9%;
      background: rgba(246, 198, 109, .055);
      filter: blur(45px);
    }

    .weather-card {
      width: min(1160px, 100%);
      min-height: 700px;
      padding: 29px 36px 24px;
      border: 1px solid rgba(209, 226, 247, .16);
      border-radius: 25px;
      background:
        radial-gradient(ellipse at 12% 0%, rgba(79, 115, 159, .13), transparent 39%),
        linear-gradient(145deg, rgba(21, 35, 53, .98), rgba(14, 26, 41, .98));
      box-shadow: 0 32px 90px rgba(0, 0, 0, .37), inset 0 1px 0 rgba(255, 255, 255, .04);
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 21px;
      border-bottom: 1px solid var(--line);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .brand-mark {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(246, 198, 109, .36);
      border-radius: 12px;
      color: var(--accent);
      background: rgba(246, 198, 109, .08);
    }

    .brand-name {
      margin: 0;
      font-size: 12px;
      font-weight: 750;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .brand-caption {
      margin: 3px 0 0;
      color: var(--muted);
      font-size: 10px;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 32px;
      padding: 0 12px;
      border: 1px solid rgba(204, 221, 240, .13);
      border-radius: 999px;
      color: var(--soft);
      background: rgba(5, 13, 23, .24);
      font-size: 10px;
      font-weight: 650;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .status-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #9badc2;
      box-shadow: 0 0 10px rgba(155, 173, 194, .5);
    }

    .status-pill[data-state="loaded"] .status-dot {
      background: #8dd8b1;
      box-shadow: 0 0 10px rgba(141, 216, 177, .6);
    }

    .status-pill[data-state="error"] .status-dot {
      background: #ff8c83;
      box-shadow: 0 0 10px rgba(255, 140, 131, .55);
    }

    .overview {
      display: grid;
      grid-template-columns: 1.18fr .82fr;
      gap: 35px;
      min-height: 341px;
      padding: 31px 0 29px;
      border-bottom: 1px solid var(--line);
    }

    .summary {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
    }

    .eyebrow {
      margin: 0;
      color: var(--accent);
      font-size: 10px;
      font-weight: 750;
      letter-spacing: .17em;
      text-transform: uppercase;
    }

    h1 {
      margin: 9px 0 0;
      overflow: hidden;
      color: var(--text);
      font-size: clamp(38px, 4.3vw, 55px);
      font-weight: 620;
      letter-spacing: -.055em;
      line-height: 1.05;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .date-label {
      margin: 9px 0 0;
      color: var(--muted);
      font-size: 14px;
      letter-spacing: .01em;
    }

    .hero-reading {
      display: flex;
      align-items: center;
      gap: 22px;
      margin-top: 19px;
    }

    .weather-icon {
      width: 138px;
      height: 138px;
      flex: 0 0 138px;
      display: grid;
      place-items: center;
      color: var(--accent);
      filter: drop-shadow(0 10px 18px rgba(246, 198, 109, .14));
    }

    .weather-icon svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .reading-copy { min-width: 0; }

    .high-reading {
      display: flex;
      align-items: flex-start;
      color: var(--text);
      font-size: clamp(88px, 10vw, 116px);
      font-weight: 520;
      letter-spacing: -.095em;
      line-height: .88;
    }

    .degree {
      margin: 11px 0 0 5px;
      color: var(--soft);
      font-size: .37em;
      font-weight: 400;
      letter-spacing: -.04em;
    }

    .reading-caption {
      margin-top: 12px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .low-reading {
      margin-top: 9px;
      color: var(--soft);
      font-size: 13px;
      font-weight: 550;
    }

    .low-reading span {
      margin-left: 5px;
      color: var(--text);
      font-weight: 700;
    }

    .condition-line {
      display: flex;
      align-items: center;
      gap: 9px;
      margin: 0;
      color: #e5ebf4;
      font-size: 14px;
      font-weight: 550;
    }

    .condition-line::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 12px rgba(246, 198, 109, .48);
    }

    .insight-panel {
      align-self: center;
      padding: 23px 23px 21px;
      border: 1px solid rgba(204, 221, 240, .13);
      border-radius: 18px;
      background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    }

    .panel-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 0;
      color: var(--soft);
      font-size: 10px;
      font-weight: 750;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    .panel-unit {
      color: var(--muted);
      font-size: 9px;
      letter-spacing: .08em;
    }

    .range-values {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-top: 27px;
    }

    .range-value-label {
      margin: 0 0 5px;
      color: var(--muted);
      font-size: 9px;
      font-weight: 650;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .range-value {
      color: var(--text);
      font-size: 29px;
      font-weight: 570;
      letter-spacing: -.055em;
    }

    .range-value.low { color: #a9c4e4; }

    .range-track {
      position: relative;
      height: 6px;
      margin: 17px 2px 20px;
      border-radius: 999px;
      background: linear-gradient(90deg, #719ac5, #f6c66d);
    }

    .range-track::before,
    .range-track::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 12px;
      height: 12px;
      border: 2px solid #172639;
      border-radius: 50%;
      transform: translateY(-50%);
    }

    .range-track::before {
      left: -1px;
      background: #9fc2e8;
    }

    .range-track::after {
      right: -1px;
      background: var(--accent);
    }

    .panel-divider {
      height: 1px;
      background: var(--line);
    }

    .condition-detail {
      display: flex;
      align-items: center;
      gap: 13px;
      padding-top: 19px;
    }

    .condition-detail-icon {
      width: 41px;
      height: 41px;
      display: grid;
      flex: 0 0 41px;
      place-items: center;
      border: 1px solid rgba(246, 198, 109, .22);
      border-radius: 13px;
      color: var(--accent);
      background: rgba(246, 198, 109, .07);
    }

    .condition-detail-icon svg {
      width: 25px;
      height: 25px;
    }

    .condition-detail p { margin: 0; }

    .condition-detail-label {
      color: var(--muted);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .condition-detail-name {
      margin-top: 5px !important;
      color: var(--text);
      font-size: 14px;
      font-weight: 600;
    }

    .hourly {
      padding-top: 22px;
    }

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

    .hourly-title {
      margin: 0;
      color: var(--text);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: -.01em;
    }

    .hourly-note {
      margin: 0;
      color: var(--muted);
      font-size: 10px;
      letter-spacing: .04em;
    }

    .chart-wrap {
      height: 77px;
      margin: 12px 0 4px;
      overflow: hidden;
    }

    #hourly-chart {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .hour-values {
      display: grid;
      grid-template-columns: repeat(24, minmax(0, 1fr));
      gap: 4px;
    }

    .hour-slot {
      min-width: 0;
      padding: 7px 1px 5px;
      border: 1px solid rgba(204, 221, 240, .07);
      border-radius: 8px;
      text-align: center;
      background: rgba(255, 255, 255, .018);
    }

    .hour-time {
      display: block;
      color: var(--muted);
      font-size: 9px;
      font-variant-numeric: tabular-nums;
      line-height: 1;
    }

    .hour-temp {
      display: block;
      margin-top: 6px;
      color: #e9eef6;
      font-size: 11px;
      font-weight: 650;
      font-variant-numeric: tabular-nums;
      line-height: 1;
      white-space: nowrap;
    }

    .footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-top: 19px;
      color: #71839a;
      font-size: 9px;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .footer-mark {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .footer-mark::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #88a0bb;
    }

    .error-box {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      margin-top: 18px;
      padding: 12px 14px;
      border: 1px solid rgba(255, 140, 131, .28);
      border-radius: 12px;
      color: #ffd3ce;
      background: rgba(255, 112, 99, .08);
      font-size: 12px;
      line-height: 1.5;
    }

    .error-box[hidden] { display: none; }

    .error-icon {
      flex: 0 0 auto;
      color: #ff9b91;
      font-size: 15px;
      line-height: 1.25;
    }

    @media (max-width: 900px) {
      body { padding: 18px; }
      .weather-card { padding: 24px; }
      .overview { grid-template-columns: 1fr .8fr; gap: 20px; }
      .weather-icon { width: 112px; height: 112px; flex-basis: 112px; }
      .insight-panel { padding: 19px; }
      .hour-values { gap: 3px; }
      .hour-slot { padding-inline: 0; }
      .hour-temp { font-size: 10px; }
    }

    @media (max-width: 680px) {
      body {
        display: block;
        min-width: 320px;
        padding: 12px;
      }

      .weather-card {
        width: 100%;
        min-height: 0;
        padding: 19px 17px 18px;
        border-radius: 20px;
      }

      .topbar { padding-bottom: 16px; }
      .brand-mark { width: 33px; height: 33px; }
      .brand-caption { font-size: 9px; }
      .status-pill { min-height: 29px; padding: 0 9px; font-size: 8px; }
      .overview {
        grid-template-columns: 1fr;
        gap: 21px;
        padding: 24px 0;
      }

      h1 { font-size: 43px; }
      .hero-reading { gap: 14px; margin-top: 11px; }
      .weather-icon { width: 105px; height: 105px; flex-basis: 105px; }
      .high-reading { font-size: 91px; }
      .insight-panel { padding: 19px; }
      .hourly { padding-top: 20px; }
      .hourly-note { font-size: 9px; }
      .chart-wrap { height: 62px; }
      .hour-values {
        width: max(100%, 820px);
        gap: 4px;
      }

      .hours-scroll {
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-color: rgba(204, 221, 240, .25) transparent;
        scrollbar-width: thin;
      }

      .hour-slot { padding: 7px 2px 6px; }
      .hour-time { font-size: 10px; }
      .hour-temp { font-size: 11px; }
      .footer { margin-top: 15px; font-size: 8px; }
    }
  </style>
</head>
<body>
  <div class="ambient" aria-hidden="true"></div>

  <main class="weather-card" aria-label="Daily weather card">
    <header class="topbar">
      <div class="brand">
        <div class="brand-mark" aria-hidden="true">
          <svg width="21" height="21" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="4" stroke="currentColor" stroke-width="1.7"/>
            <path d="M12 2.5v2M12 19.5v2M21.5 12h-2M4.5 12h-2m16.22-6.72-1.42 1.42M6.7 17.3l-1.42 1.42m13.44 0-1.42-1.42M6.7 6.7 5.28 5.28" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
          </svg>
        </div>
        <div>
          <p class="brand-name">Weather / Field</p>
          <p class="brand-caption">A clear view of your day</p>
        </div>
      </div>
      <div class="status-pill" id="status-pill" data-state="loading" role="status">
        <span class="status-dot" aria-hidden="true"></span>
        <span id="status-text">Loading weather</span>
      </div>
    </header>

    <div class="overview">
      <section class="summary" aria-labelledby="location-title">
        <p class="eyebrow">Daily outlook</p>
        <h1 id="location-title">Berlin</h1>
        <p class="date-label" id="date-label">Loading date…</p>

        <div class="hero-reading">
          <div class="weather-icon" id="weather-icon" aria-hidden="true"></div>
          <div class="reading-copy">
            <div class="high-reading">
              <span id="high-temp">—</span><span class="degree">°</span>
            </div>
            <div class="reading-caption">Maximum temperature</div>
            <div class="low-reading">LOW <span id="low-temp">—°</span></div>
          </div>
        </div>

        <p class="condition-line" id="condition">Weather condition loading</p>
      </section>

      <aside class="insight-panel" aria-label="Temperature range and weather condition">
        <p class="panel-heading">
          <span>Temperature range</span>
          <span class="panel-unit">CELSIUS</span>
        </p>

        <div class="range-values">
          <div>
            <p class="range-value-label">Minimum</p>
            <div class="range-value low" id="panel-low">—°</div>
          </div>
          <div style="text-align:right">
            <p class="range-value-label">Maximum</p>
            <div class="range-value" id="panel-high">—°</div>
          </div>
        </div>

        <div class="range-track" aria-hidden="true"></div>
        <div class="panel-divider"></div>

        <div class="condition-detail">
          <div class="condition-detail-icon" id="condition-detail-icon" aria-hidden="true"></div>
          <div>
            <p class="condition-detail-label">Expected conditions</p>
            <p class="condition-detail-name" id="condition-detail">Waiting for forecast</p>
          </div>
        </div>
      </aside>
    </div>

    <section class="hourly" aria-labelledby="hourly-title">
      <div class="hourly-head">
        <h2 class="hourly-title" id="hourly-title">Hourly temperature</h2>
        <p class="hourly-note">24 hours · UTC</p>
      </div>

      <div class="chart-wrap" aria-hidden="true">
        <svg id="hourly-chart" viewBox="0 0 1000 100" preserveAspectRatio="none">
          <defs>
            <linearGradient id="area-gradient" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stop-color="#f6c66d" stop-opacity=".22"/>
              <stop offset="100%" stop-color="#f6c66d" stop-opacity="0"/>
            </linearGradient>
          </defs>
          <path d="M0 22H1000M0 52H1000M0 82H1000" fill="none" stroke="rgba(204,221,240,.08)" stroke-width="1"/>
          <path id="chart-area" fill="url(#area-gradient)" d=""/>
          <path id="chart-line" fill="none" stroke="#f6c66d" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d=""/>
          <g id="chart-points"></g>
        </svg>
      </div>

      <div class="hours-scroll">
        <div class="hour-values" id="hour-values" aria-label="Hourly temperatures"></div>
      </div>
    </section>

    <div class="error-box" id="load-error" role="alert" hidden>
      <span class="error-icon" aria-hidden="true">!</span>
      <span id="error-message">Weather data could not be loaded.</span>
    </div>

    <footer class="footer">
      <span class="footer-mark">Weather data for your selected date</span>
      <span id="data-source">Open-Meteo compatible</span>
    </footer>
  </main>

  <script>
    (() => {
      const query = new URLSearchParams(window.location.search);
      const today = new Date().toISOString().slice(0, 10);
      const requestedDate = query.get("date") || today;
      const locationName = (query.get("name") || "Berlin").trim() || "Berlin";
      const latitude = Number(query.get("lat") ?? "52.52");
      const longitude = Number(query.get("lon") ?? "13.405");

      const statusPill = document.getElementById("status-pill");
      const statusText = document.getElementById("status-text");
      const errorBox = document.getElementById("load-error");
      const errorMessage = document.getElementById("error-message");

      const conditions = (code) => {
        if (code === 0) return { name: "Clear sky", icon: "sun" };
        if (code === 1) return { name: "Mainly clear", icon: "partly" };
        if (code === 2) return { name: "Partly cloudy", icon: "partly" };
        if (code === 3) return { name: "Overcast", icon: "cloud" };
        if (code === 45 || code === 48) return { name: "Fog", icon: "fog" };
        if ([51, 53, 55, 56, 57].includes(code)) return { name: "Drizzle", icon: "rain" };
        if ([61, 63, 65, 66, 67].includes(code)) return { name: "Rain", icon: "rain" };
        if ([71, 73, 75, 77].includes(code)) return { name: "Snow", icon: "snow" };
        if ([80, 81, 82].includes(code)) return { name: "Rain showers", icon: "rain" };
        if ([85, 86].includes(code)) return { name: "Snow showers", icon: "snow" };
        if ([95, 96, 99].includes(code)) return { name: "Thunderstorm", icon: "storm" };
        return { name: "Weather condition unavailable", icon: "cloud" };
      };

      const iconMarkup = (kind) => {
        const icons = {
          sun: '<circle cx="50" cy="50" r="17" fill="#f6c66d" stroke="#f6c66d" stroke-width="2"/><g stroke="#f6c66d" stroke-width="4" stroke-linecap="round"><path d="M50 8v10M50 82v10M8 50h10M82 50h10M20.3 20.3l7.1 7.1M72.6 72.6l7.1 7.1M79.7 20.3l-7.1 7.1M27.4 72.6l-7.1 7.1"/></g>',
          partly: '<g stroke="#f6c66d" stroke-width="3.5" stroke-linecap="round"><path d="M61 12v8M88 39h-8M80.1 19.9l-5.7 5.7M41.9 19.9l5.7 5.7"/></g><circle cx="61" cy="39" r="15" fill="#f6c66d"/><path d="M30 72h38a14 14 0 0 0 0-28 18 18 0 0 0-34-2 15 15 0 0 0-4 30Z" fill="#d7e5f5" stroke="#d7e5f5" stroke-width="2" stroke-linejoin="round"/>',
          cloud: '<path d="M26 72h46a17 17 0 0 0 0-34 21 21 0 0 0-40-3 18 18 0 0 0-6 37Z" fill="#d7e5f5" stroke="#d7e5f5" stroke-width="2" stroke-linejoin="round"/>',
          fog: '<path d="M27 59h45a15 15 0 0 0 0-30 19 19 0 0 0-36-3 16 16 0 0 0-9 33Z" fill="#d7e5f5" stroke="#d7e5f5" stroke-width="2" stroke-linejoin="round"/><g stroke="#a9c2df" stroke-width="3" stroke-linecap="round"><path d="M20 70h43M33 80h42"/></g>',
          rain: '<path d="M26 59h46a17 17 0 0 0 0-34 21 21 0 0 0-40-3 18 18 0 0 0-6 37Z" fill="#d7e5f5" stroke="#d7e5f5" stroke-width="2" stroke-linejoin="round"/><g stroke="#8eb7e4" stroke-width="4" stroke-linecap="round"><path d="m34 70-4 9M51 70l-4 9M68 70l-4 9"/></g>',
          snow: '<path d="M26 57h46a17 17 0 0 0 0-34 21 21 0 0 0-40-3 18 18 0 0 0-6 37Z" fill="#d7e5f5" stroke="#d7e5f5" stroke-width="2" stroke-linejoin="round"/><g fill="#a9c9ec"><circle cx="34" cy="73" r="3.5"/><circle cx="51" cy="78" r="3.5"/><circle cx="68" cy="72" r="3.5"/></g>',
          storm: '<path d="M26 57h46a17 17 0 0 0 0-34 21 21 0 0 0-40-3 18 18 0 0 0-6 37Z" fill="#d7e5f5" stroke="#d7e5f5" stroke-width="2" stroke-linejoin="round"/><path d="m53 59-14 20h11l-3 15 18-24H54l6-11Z" fill="#f6c66d" stroke="#f6c66d" stroke-linejoin="round"/>'
        };
        return '<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">' + (icons[kind] || icons.cloud) + "</svg>";
      };

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

      const fail = (message) => {
        statusPill.dataset.state = "error";
        statusText.textContent = "Weather unavailable";
        errorMessage.textContent = message;
        errorBox.hidden = false;
      };

      const setTemperature = (id, value) => {
        document.getElementById(id).textContent = String(Math.round(value));
      };

      const renderChart = (values) => {
        const points = values.map((value, index) => ({
          x: values.length === 1 ? 500 : index * 1000 / (values.length - 1),
          value
        }));
        let minimum = Math.min(...values);
        let maximum = Math.max(...values);
        if (minimum === maximum) {
          minimum -= 1;
          maximum += 1;
        }
        const coords = points.map((point) => ({
          x: point.x,
          y: 78 - ((point.value - minimum) / (maximum - minimum)) * 56
        }));
        const linePath = coords.map((point, index) =>
          (index === 0 ? "M" : "L") + point.x.toFixed(1) + " " + point.y.toFixed(1)
        ).join(" ");
        const first = coords[0];
        const last = coords[coords.length - 1];
        const areaPath = linePath + " L " + last.x.toFixed(1) + " 96 L " + first.x.toFixed(1) + " 96 Z";
        document.getElementById("chart-line").setAttribute("d", linePath);
        document.getElementById("chart-area").setAttribute("d", areaPath);

        const markers = coords.filter((_, index) => index % 6 === 0 || index === coords.length - 1);
        document.getElementById("chart-points").innerHTML = markers.map((point) =>
          '<circle cx="' + point.x.toFixed(1) + '" cy="' + point.y.toFixed(1) + '" r="3.6" fill="#f6c66d" stroke="#172639" stroke-width="2"/>'
        ).join("");
      };

      const renderHourly = (times, temperatures) => {
        const values = temperatures.map((value) => Number(value));
        renderChart(values);
        const slots = times.map((time, index) => {
          const hour = time.slice(11, 13);
          const rawTemperature = temperatures[index];
          const temperature = rawTemperature == null || !Number.isFinite(Number(rawTemperature))
            ? "—"
            : String(Math.round(Number(rawTemperature))) + "°";
          return '<div class="hour-slot" aria-label="' + hour + ':00 UTC, ' + temperature + '">' +
            '<span class="hour-time">' + hour + '</span>' +
            '<span class="hour-temp">' + temperature + '</span>' +
            '</div>';
        }).join("");
        document.getElementById("hour-values").innerHTML = slots;
      };

      const loadWeather = async () => {
        document.getElementById("location-title").textContent = locationName;
        document.getElementById("data-source").textContent = requestedDate < today ? "Historical archive" : "Forecast";
        if (!validDate(requestedDate)) {
          throw new Error("The requested date is invalid. Use YYYY-MM-DD.");
        }
        if (!Number.isFinite(latitude) || latitude < -90 || latitude > 90 ||
            !Number.isFinite(longitude) || longitude < -180 || longitude > 180) {
          throw new Error("The location coordinates are invalid.");
        }

        const dateObject = new Date(requestedDate + "T12:00:00Z");
        document.getElementById("date-label").textContent = new Intl.DateTimeFormat("en-US", {
          weekday: "long",
          month: "long",
          day: "numeric",
          year: "numeric",
          timeZone: "UTC"
        }).format(dateObject);

        const endpoint = requestedDate < today ? "/api/om/archive" : "/api/om/forecast";
        const params = 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 response = await fetch(endpoint + "?" + params.toString(), { headers: { "Accept": "application/json" } });
        if (!response.ok) {
          throw new Error("Weather data could not be loaded for this date. Please try again.");
        }

        const data = await response.json();
        const dayIndex = data.daily && Array.isArray(data.daily.time)
          ? data.daily.time.indexOf(requestedDate)
          : -1;
        const high = dayIndex >= 0 ? Number(data.daily.temperature_2m_max?.[dayIndex]) : NaN;
        const low = dayIndex >= 0 ? Number(data.daily.temperature_2m_min?.[dayIndex]) : NaN;
        const codeValue = dayIndex >= 0 ? data.daily.weather_code?.[dayIndex] : null;
        const code = Number(codeValue);

        if (!Number.isFinite(high) || !Number.isFinite(low) || codeValue == null || !Number.isFinite(code)) {
          throw new Error("Weather data for the selected date is incomplete.");
        }

        const hourlyTimes = data.hourly && Array.isArray(data.hourly.time) ? data.hourly.time : [];
        const hourlyTemperatures = data.hourly && Array.isArray(data.hourly.temperature_2m)
          ? data.hourly.temperature_2m
          : [];
        const hourlyIndices = hourlyTimes.reduce((indices, time, index) => {
          if (typeof time === "string" && time.startsWith(requestedDate)) indices.push(index);
          return indices;
        }, []);

        if (hourlyIndices.length === 0) {
          throw new Error("Hourly temperatures for the selected date are unavailable.");
        }

        const selectedTimes = hourlyIndices.map((index) => hourlyTimes[index]);
        const selectedTemperatures = hourlyIndices.map((index) => hourlyTemperatures[index]);
        const chartValues = selectedTemperatures.map((value) => Number(value));
        if (chartValues.some((value) => !Number.isFinite(value))) {
          throw new Error("Hourly temperature data for the selected date is incomplete.");
        }

        const condition = conditions(code);
        setTemperature("high-temp", high);
        setTemperature("low-temp", low);
        setTemperature("panel-high", high);
        setTemperature("panel-low", low);
        document.getElementById("weather-icon").innerHTML = iconMarkup(condition.icon);
        document.getElementById("condition-detail-icon").innerHTML = iconMarkup(condition.icon);
        document.getElementById("condition").textContent = condition.name;
        document.getElementById("condition-detail").textContent = condition.name;
        renderHourly(selectedTimes, selectedTemperatures);

        statusPill.dataset.state = "loaded";
        statusText.textContent = "Weather loaded";
      };

      loadWeather().catch((error) => {
        fail(error instanceof Error ? error.message : "Weather data could not be loaded.");
      });
    })();
  </script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total28,776html / css / js4,749 / 13,177 / 10,850
dom nodes78dom depth9
css rules98js presentyes
brightness35.3contrast23.3
colorfulness14.2whitespace91.6%

This slot's telemetry

prompt tokens0completion tokens20,415
total tokens0wall246.5 s
cost—request id—
config.json547 B
{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_GPT_KEY",
    "method": "api-key"
  },
  "billing": "plan",
  "config_id": "gpt-6-luna-eff-max--cli--codex--dev",
  "effort": "max",
  "family": "gpt",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "gpt-6-luna",
  "protocol": "cli",
  "served_model": "gpt-6-luna",
  "telemetry": {
    "completion_tokens": 77483,
    "cost_usd": null,
    "prompt_tokens": null,
    "total_tokens": null,
    "wall_ms": 603701
  },
  "transport": "codex-cli-isolated-home",
  "vendor_sanction_ref": null
}
send-log2.5 KB
{
  "N": 2,
  "batch_id": "2026-09-23--codex-luna6",
  "config_id": "gpt-6-luna-eff-max--cli--codex--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-09-23T08:42:14.890067+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-09-23T08:40:47.224456+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-09-23T08:46:25.041432+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-09-23T08:42:18.534650+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-09-23T08:49:15.651400+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-09-23T08:46:28.993864+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-09-23T08:51:01.891305+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-09-23T08:49:19.012525+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
    }
  }
}