gpt-5.6-terra @ ultra · codex-oauth

codex-oauthultra

config: gpt-5.6-terra-eff-ultra--cli--codex-oauth--dev
batch: 2026-07-19--unified
transport: codex-cli-oauth-chatgpt
protocol: cli · plan
served model: gpt-5.6-terra
captured: Jul 18, 2026, 11:54 AM · N=2

variant

live

slot 0 · P-q · sandboxed iframe

gpt-5.6-terra @ultra · codex-oauth P-q slot 0 screenshot

The screenshot is the exact frozen pixels the similarity channels measured. Run live re-executes the raw output in a sandboxed iframe; its rendering depends on your browser and fonts and is not guaranteed to match the measured pixels.

similarity neighbors

nearest

gpt-5.4-mini @medium · codex-oauth0.64 grok-4.5 · go0.63 claude-sonnet-4-5 · kiro0.61 gpt-5.4 @none · api0.61 gpt-5.6-sol @xhigh · codex-oauth0.61

farthest

claude-haiku-4-5 @high · CC0.44 gpt-5.6-luna @medium · codex-oauth0.45 gpt-5.2-codex @xhigh · api0.45 deepseek-v4-pro · opencode0.45 claude-fable-5 · CC0.45

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="color-scheme" content="light">
  <title>Weather</title>
  <style>
    :root {
      --ink: #172146;
      --muted: #77819c;
      --line: #e8ebf3;
      --blue: #536ff1;
      --navy: #17264f;
      --card: #fbfcff;
      --warm: #ffbe55;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      min-width: 960px;
      min-height: 680px;
      margin: 0;
    }

    body {
      overflow: hidden;
      color: var(--ink);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at 10% 10%, rgba(127, 151, 255, .32), transparent 29rem),
        radial-gradient(circle at 92% 88%, rgba(255, 202, 116, .28), transparent 25rem),
        linear-gradient(135deg, #eef1fb 0%, #f7f8fd 52%, #edf0f9 100%);
    }

    body::before,
    body::after {
      position: fixed;
      z-index: -1;
      width: 360px;
      height: 360px;
      border-radius: 50%;
      content: "";
      filter: blur(20px);
      opacity: .38;
    }

    body::before {
      top: -180px;
      right: 90px;
      background: #aebafd;
    }

    body::after {
      bottom: -220px;
      left: 18%;
      background: #f8cf9b;
    }

    .page {
      display: grid;
      min-height: 100vh;
      padding: 40px;
      place-items: center;
    }

    .weather-card {
      display: grid;
      width: min(1150px, 100%);
      height: min(688px, calc(100vh - 72px));
      min-height: 620px;
      overflow: hidden;
      grid-template-rows: 88px 1fr;
      border: 1px solid rgba(255, 255, 255, .88);
      border-radius: 30px;
      background: rgba(255, 255, 255, .88);
      box-shadow:
        0 32px 80px rgba(49, 63, 113, .18),
        0 3px 10px rgba(44, 54, 93, .06);
      backdrop-filter: blur(16px);
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 34px;
      border-bottom: 1px solid var(--line);
      background: rgba(255, 255, 255, .76);
    }

    .place {
      display: flex;
      min-width: 0;
      align-items: center;
      gap: 14px;
    }

    .pin {
      display: grid;
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      border-radius: 13px;
      color: #536ff1;
      background: #edf0ff;
      place-items: center;
    }

    .pin svg {
      width: 19px;
      height: 19px;
    }

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

    .place h1 {
      max-width: 510px;
      margin: 0;
      overflow: hidden;
      color: #1b254a;
      font-size: 19px;
      font-weight: 730;
      letter-spacing: -.03em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .place p {
      display: flex;
      align-items: center;
      gap: 7px;
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
    }

    .date-dot {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: #b0b8cc;
    }

    .source-meta {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .source-badge {
      padding: 8px 11px;
      border: 1px solid #e5e9fb;
      border-radius: 999px;
      color: #5368d7;
      background: #f5f6ff;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .1em;
    }

    .utc {
      color: #8b94aa;
      font-size: 11px;
      font-weight: 750;
      letter-spacing: .07em;
    }

    .card-body {
      display: grid;
      min-height: 0;
      grid-template-columns: 39.2% 60.8%;
    }

    .hero {
      position: relative;
      display: flex;
      min-width: 0;
      overflow: hidden;
      flex-direction: column;
      justify-content: space-between;
      padding: 38px 40px 34px;
      color: white;
      isolation: isolate;
      background:
        radial-gradient(circle at 83% 19%, rgba(102, 139, 255, .62), transparent 10rem),
        linear-gradient(148deg, #273e83 0%, #20326b 47%, #182650 100%);
    }

    .hero::before {
      position: absolute;
      z-index: -1;
      top: -162px;
      right: -135px;
      width: 340px;
      height: 340px;
      border: 1px solid rgba(255, 255, 255, .11);
      border-radius: 50%;
      box-shadow:
        0 0 0 34px rgba(255, 255, 255, .035),
        0 0 0 72px rgba(255, 255, 255, .025);
      content: "";
    }

    .hero::after {
      position: absolute;
      z-index: -1;
      right: -45px;
      bottom: -165px;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: rgba(95, 126, 241, .32);
      content: "";
      filter: blur(4px);
    }

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

    .eyebrow {
      margin: 0;
      color: rgba(232, 238, 255, .68);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .14em;
    }

    .weather-art {
      position: absolute;
      top: 47px;
      right: 29px;
      width: 134px;
      height: 134px;
      filter: drop-shadow(0 16px 23px rgba(9, 20, 58, .2));
    }

    .weather-art::before {
      position: absolute;
      top: 19px;
      left: 22px;
      width: 91px;
      height: 91px;
      border-radius: 50%;
      background: rgba(255, 213, 116, .09);
      content: "";
      filter: blur(11px);
    }

    .weather-icon {
      position: relative;
      width: 100%;
      height: 100%;
    }

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

    .main-temperature {
      display: flex;
      align-items: flex-start;
      margin-top: 40px;
      color: white;
      font-feature-settings: "tnum";
      line-height: .82;
    }

    .main-temperature strong {
      font-size: 104px;
      font-weight: 300;
      letter-spacing: -.095em;
    }

    .main-temperature span {
      margin: 13px 0 0 12px;
      color: rgba(255, 255, 255, .78);
      font-size: 17px;
      font-weight: 700;
      letter-spacing: .02em;
    }

    .temperature-label {
      margin: 13px 0 0;
      color: rgba(237, 241, 255, .76);
      font-size: 12px;
      font-weight: 650;
    }

    .condition {
      display: flex;
      align-items: center;
      gap: 9px;
      margin: 23px 0 0;
      color: white;
      font-size: 20px;
      font-weight: 680;
      letter-spacing: -.025em;
    }

    .condition-mark {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ffcc6d;
      box-shadow: 0 0 0 5px rgba(255, 204, 109, .14);
    }

    .range-card {
      position: relative;
      z-index: 1;
      padding: 18px 18px 15px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 18px;
      background: rgba(9, 21, 58, .18);
      backdrop-filter: blur(5px);
    }

    .range-card-head,
    .range-numbers {
      display: flex;
      justify-content: space-between;
    }

    .range-card-head {
      color: rgba(255, 255, 255, .65);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .range-card-head b {
      color: rgba(255, 255, 255, .88);
      font-weight: 750;
      letter-spacing: .03em;
      text-transform: none;
    }

    .range-track {
      position: relative;
      height: 5px;
      margin: 14px 0 10px;
      overflow: hidden;
      border-radius: 10px;
      background: rgba(255, 255, 255, .17);
    }

    .range-fill {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 50%;
      border-radius: inherit;
      background: linear-gradient(90deg, #8eb6ff, #ffd36e);
      box-shadow: 0 0 16px rgba(255, 205, 102, .4);
      transition: width .7s cubic-bezier(.22, .8, .29, 1);
    }

    .range-numbers {
      color: rgba(255, 255, 255, .88);
      font-size: 12px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }

    .range-numbers span:first-child {
      color: rgba(220, 230, 255, .8);
    }

    .details {
      position: relative;
      min-width: 0;
      overflow: hidden;
      padding: 34px 38px 30px;
      background:
        linear-gradient(180deg, rgba(252, 253, 255, 1), rgba(247, 249, 254, 1));
    }

    .details::after {
      position: absolute;
      right: -90px;
      bottom: -120px;
      width: 280px;
      height: 280px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(110, 139, 255, .10), transparent 68%);
      content: "";
      pointer-events: none;
    }

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

    .details-heading {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      min-height: 34px;
      margin-bottom: 15px;
    }

    .details-heading h2 {
      margin: 0;
      color: #202a4e;
      font-size: 20px;
      font-weight: 750;
      letter-spacing: -.035em;
    }

    .details-heading p {
      margin: 5px 0 0;
      color: #8992a8;
      font-size: 11px;
      font-weight: 650;
    }

    .daily-summary {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border: 1px solid #e6eaf7;
      border-radius: 12px;
      color: #5368d7;
      background: #f5f7ff;
      font-size: 11px;
      font-weight: 750;
      font-variant-numeric: tabular-nums;
    }

    .daily-summary i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #6b82f5;
      box-shadow: 0 0 0 4px rgba(107, 130, 245, .11);
    }

    .chart-shell {
      position: relative;
      height: 175px;
      padding: 13px 14px 4px;
      border: 1px solid #ebedf5;
      border-radius: 19px;
      background: rgba(255, 255, 255, .77);
      box-shadow: 0 7px 16px rgba(44, 56, 102, .035);
    }

    .chart-topline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 2px;
      color: #8c95aa;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .04em;
    }

    .chart-topline strong {
      color: #4d5d9d;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .01em;
    }

    #temperatureChart {
      display: block;
      width: 100%;
      height: 137px;
      margin-top: 2px;
      overflow: visible;
    }

    .hours-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 20px 2px 11px;
    }

    .hours-title h3 {
      margin: 0;
      color: #30395b;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .02em;
    }

    .hours-title span {
      color: #9aa2b6;
      font-size: 10px;
      font-weight: 700;
    }

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

    .hour-card {
      position: relative;
      min-width: 0;
      min-height: 53px;
      overflow: hidden;
      padding: 9px 10px;
      border: 1px solid #e9ecf4;
      border-radius: 13px;
      background: rgba(255, 255, 255, .74);
      box-shadow: 0 2px 5px rgba(42, 53, 93, .018);
    }

    .hour-card::after {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--tone, #9aa4c6);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone, #9aa4c6) 14%, transparent);
      content: "";
    }

    .hour-card time {
      display: block;
      color: #9aa3b6;
      font-size: 9px;
      font-weight: 750;
      letter-spacing: .04em;
    }

    .hour-card strong {
      display: block;
      margin-top: 3px;
      color: #283252;
      font-size: 15px;
      font-weight: 750;
      letter-spacing: -.035em;
      font-variant-numeric: tabular-nums;
    }

    .loading,
    .error-panel {
      position: relative;
      z-index: 2;
      display: flex;
      height: 100%;
      min-height: 360px;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
    }

    .loading-orb {
      width: 42px;
      height: 42px;
      margin-bottom: 15px;
      border: 3px solid #e5e9fb;
      border-top-color: #6078ee;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    .loading p,
    .error-panel p {
      margin: 0;
      color: #7e889f;
      font-size: 13px;
      font-weight: 650;
    }

    .error-symbol {
      display: grid;
      width: 52px;
      height: 52px;
      margin-bottom: 15px;
      border-radius: 17px;
      color: #d56a70;
      background: #fff0f1;
      font-size: 27px;
      font-weight: 500;
      place-items: center;
    }

    .error-panel h2 {
      margin: 0 0 7px;
      color: #35405e;
      font-size: 19px;
      letter-spacing: -.03em;
    }

    [hidden] {
      display: none !important;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    @media (max-height: 710px) {
      .page {
        padding: 24px;
      }

      .weather-card {
        height: calc(100vh - 48px);
        min-height: 580px;
      }

      .hero {
        padding-top: 29px;
        padding-bottom: 25px;
      }

      .main-temperature {
        margin-top: 28px;
      }

      .main-temperature strong {
        font-size: 88px;
      }

      .details {
        padding-top: 27px;
        padding-bottom: 23px;
      }

      .chart-shell {
        height: 160px;
      }

      #temperatureChart {
        height: 122px;
      }

      .hours-title {
        margin-top: 13px;
        margin-bottom: 8px;
      }

      .hour-card {
        min-height: 46px;
        padding-top: 7px;
        padding-bottom: 7px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .loading-orb {
        animation: none;
      }

      .range-fill {
        transition: none;
      }
    }
  </style>
</head>
<body>
  <div class="page">
    <main class="weather-card" aria-labelledby="locationName">
      <header class="topbar">
        <div class="place">
          <span class="pin" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round">
              <path d="M20 10c0 5.25-8 11-8 11S4 15.25 4 10a8 8 0 1 1 16 0Z"></path>
              <circle cx="12" cy="10" r="2.6"></circle>
            </svg>
          </span>
          <div class="place-copy">
            <h1 id="locationName">Berlin</h1>
            <p><span id="dateDisplay">Loading date</span><span class="date-dot"></span><span>UTC</span></p>
          </div>
        </div>
        <div class="source-meta">
          <span class="source-badge" id="sourceBadge">LOADING</span>
          <span class="utc">CELSIUS</span>
        </div>
      </header>

      <div class="card-body">
        <section class="hero" aria-label="Daily weather summary">
          <div class="hero-top">
            <p class="eyebrow">DAY AT A GLANCE</p>
            <div class="weather-art">
              <div class="weather-icon" id="weatherIcon" aria-label="Weather condition">
                <svg viewBox="0 0 120 120" fill="none" aria-hidden="true">
                  <circle cx="60" cy="60" r="26" fill="#FFCB68"></circle>
                  <g stroke="#FFE4A6" stroke-width="5" stroke-linecap="round">
                    <path d="M60 15v10"></path><path d="M60 95v10"></path>
                    <path d="m28 28 7 7"></path><path d="m85 85 7 7"></path>
                    <path d="M15 60h10"></path><path d="M95 60h10"></path>
                    <path d="m28 92 7-7"></path><path d="m85 35 7-7"></path>
                  </g>
                </svg>
              </div>
            </div>

            <div class="main-temperature">
              <strong id="maxTemperature">—</strong><span>°C</span>
            </div>
            <p class="temperature-label">Maximum temperature</p>

            <p class="condition">
              <span class="condition-mark" aria-hidden="true"></span>
              <span id="conditionName">Loading weather</span>
            </p>
          </div>

          <div class="range-card">
            <div class="range-card-head">
              <span>Daily range</span>
              <b id="rangeSummary">—</b>
            </div>
            <div class="range-track" aria-hidden="true">
              <span class="range-fill" id="rangeFill"></span>
            </div>
            <div class="range-numbers">
              <span>Low <b id="minTemperature">—</b>°C</span>
              <span>High <b id="maxTemperatureSmall">—</b>°C</span>
            </div>
          </div>
        </section>

        <section class="details" aria-label="Hourly temperatures">
          <div class="loading" id="loadingPanel" aria-live="polite">
            <span class="loading-orb" aria-hidden="true"></span>
            <p>Gathering the day’s weather…</p>
          </div>

          <div class="forecast-content" id="forecastContent" hidden>
            <div class="details-heading">
              <div>
                <h2>Temperature through the day</h2>
                <p>Hourly forecast in UTC</p>
              </div>
              <div class="daily-summary">
                <i aria-hidden="true"></i>
                <span id="summaryRange">—</span>
              </div>
            </div>

            <div class="chart-shell">
              <div class="chart-topline">
                <span>TEMPERATURE · °C</span>
                <strong id="chartRange">—</strong>
              </div>
              <svg id="temperatureChart" viewBox="0 0 640 140" preserveAspectRatio="none" aria-label="Hourly temperature chart"></svg>
            </div>

            <div class="hours-title">
              <h3>EVERY HOUR</h3>
              <span id="hourCount">— observations</span>
            </div>
            <div class="hour-grid" id="hourGrid"></div>
          </div>

          <div class="error-panel" id="errorPanel" hidden role="alert">
            <div class="error-symbol" aria-hidden="true">!</div>
            <h2>Weather data couldn’t load</h2>
            <p>Please check the location or try again shortly.</p>
          </div>
        </section>
      </div>
    </main>
  </div>

  <script>
    (() => {
      const defaults = {
        lat: 52.52,
        lon: 13.405,
        name: "Berlin",
        date: new Date().toISOString().slice(0, 10)
      };

      const params = new URLSearchParams(window.location.search);

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

      function coordinate(value, fallback, lower, upper) {
        if (value === null || value.trim() === "") return fallback;
        const number = Number(value);
        return Number.isFinite(number) && number >= lower && number <= upper ? number : fallback;
      }

      const requestedDate = validDate(params.get("date")) ? params.get("date") : defaults.date;
      const config = {
        lat: coordinate(params.get("lat"), defaults.lat, -90, 90),
        lon: coordinate(params.get("lon"), defaults.lon, -180, 180),
        name: (params.get("name") || "").trim() || defaults.name,
        date: requestedDate
      };

      const utcToday = new Date().toISOString().slice(0, 10);
      const useArchive = config.date < utcToday;

      const $ = (id) => document.getElementById(id);

      $("locationName").textContent = config.name;
      $("dateDisplay").textContent = new Intl.DateTimeFormat("en-GB", {
        weekday: "long",
        day: "numeric",
        month: "long",
        year: "numeric",
        timeZone: "UTC"
      }).format(new Date(config.date + "T00:00:00Z"));
      $("sourceBadge").textContent = useArchive ? "ARCHIVE" : "FORECAST";

      const icons = {
        sun: `
          <svg viewBox="0 0 120 120" fill="none" aria-hidden="true">
            <circle cx="60" cy="60" r="26" fill="#FFCA68"></circle>
            <circle cx="60" cy="60" r="26" fill="#FFD374" opacity=".3"></circle>
            <g stroke="#FFE4A5" stroke-width="5" stroke-linecap="round">
              <path d="M60 14v11"></path><path d="M60 95v11"></path>
              <path d="m27 27 8 8"></path><path d="m85 85 8 8"></path>
              <path d="M14 60h11"></path><path d="M95 60h11"></path>
              <path d="m27 93 8-8"></path><path d="m85 35 8-8"></path>
            </g>
          </svg>`,
        cloud: `
          <svg viewBox="0 0 120 120" fill="none" aria-hidden="true">
            <circle cx="43" cy="42" r="20" fill="#FFD278"></circle>
            <g stroke="#FFE7AE" stroke-width="4" stroke-linecap="round" opacity=".9">
              <path d="M43 12v8"></path><path d="m22 21 6 6"></path><path d="M13 42h8"></path>
            </g>
            <path d="M34 86h53c12 0 20-7 20-17 0-11-9-19-20-19-3 0-5 0-7 1C76 40 67 35 56 35c-14 0-25 10-27 23-12 0-22 8-22 19 0 6 3 9 7 9h20Z" fill="#EEF3FF" stroke="#D3DDF8" stroke-width="2"></path>
          </svg>`,
        overcast: `
          <svg viewBox="0 0 120 120" fill="none" aria-hidden="true">
            <path d="M25 87h63c13 0 22-8 22-19 0-12-10-21-22-21-3 0-6 1-8 2-4-12-15-20-29-20-16 0-29 12-30 27C10 57 2 65 2 75c0 8 7 12 15 12h8Z" fill="#E3EAF8" stroke="#CBD7EE" stroke-width="2"></path>
            <path d="M23 87h57c10 0 17-6 17-14 0-9-8-15-17-15-3 0-6 .6-8 2-4-9-13-15-24-15-13 0-23 9-25 20-10 0-18 6-18 14 0 5 4 8 10 8h8Z" fill="#F5F7FD" opacity=".65"></path>
          </svg>`,
        rain: `
          <svg viewBox="0 0 120 120" fill="none" aria-hidden="true">
            <path d="M27 75h59c13 0 22-8 22-19 0-12-10-21-22-21-3 0-6 .6-8 2-4-12-15-20-29-20-16 0-29 12-30 27C9 45 2 53 2 63c0 8 7 12 15 12h10Z" fill="#E7EEFC" stroke="#CBD8F2" stroke-width="2"></path>
            <g stroke="#7EAEFF" stroke-width="5" stroke-linecap="round">
              <path d="m35 87-4 12"></path><path d="m57 87-4 12"></path><path d="m79 87-4 12"></path>
            </g>
          </svg>`,
        snow: `
          <svg viewBox="0 0 120 120" fill="none" aria-hidden="true">
            <path d="M27 75h59c13 0 22-8 22-19 0-12-10-21-22-21-3 0-6 .6-8 2-4-12-15-20-29-20-16 0-29 12-30 27C9 45 2 53 2 63c0 8 7 12 15 12h10Z" fill="#EAF1FD" stroke="#CBD8F2" stroke-width="2"></path>
            <g stroke="#A9CEFF" stroke-width="3.5" stroke-linecap="round">
              <path d="M33 89v13"></path><path d="m28 92 10 7"></path><path d="m38 92-10 7"></path>
              <path d="M60 89v13"></path><path d="m55 92 10 7"></path><path d="m65 92-10 7"></path>
              <path d="M87 89v13"></path><path d="m82 92 10 7"></path><path d="m92 92-10 7"></path>
            </g>
          </svg>`,
        storm: `
          <svg viewBox="0 0 120 120" fill="none" aria-hidden="true">
            <path d="M27 75h59c13 0 22-8 22-19 0-12-10-21-22-21-3 0-6 .6-8 2-4-12-15-20-29-20-16 0-29 12-30 27C9 45 2 53 2 63c0 8 7 12 15 12h10Z" fill="#DDE5F6" stroke="#C1CDE8" stroke-width="2"></path>
            <path d="m61 72-14 25h15l-5 16 21-29H63l7-12Z" fill="#FFD15D" stroke="#FFE6A3" stroke-width="1.5" stroke-linejoin="round"></path>
          </svg>`,
        fog: `
          <svg viewBox="0 0 120 120" fill="none" aria-hidden="true">
            <circle cx="46" cy="41" r="18" fill="#FFD278" opacity=".72"></circle>
            <g stroke="#E5ECFC" stroke-width="6" stroke-linecap="round" opacity=".94">
              <path d="M22 61h77"></path><path d="M12 76h86"></path><path d="M26 91h66"></path>
            </g>
          </svg>`
      };

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

      function rounded(value) {
        const number = Math.round(value);
        return Object.is(number, -0) ? 0 : number;
      }

      function displayTemperature(value) {
        return String(rounded(value));
      }

      function displayTime(value) {
        const timePart = String(value).split("T")[1] || "";
        return timePart.slice(0, 5) || "—";
      }

      function renderChart(hourly) {
        const chart = $("temperatureChart");
        const points = hourly.filter((entry) => Number.isFinite(entry.temperature));
        if (points.length < 2) {
          chart.innerHTML = "";
          return;
        }

        const width = 640;
        const height = 140;
        const left = 31;
        const right = 15;
        const top = 13;
        const bottom = 27;
        const values = points.map((entry) => entry.temperature);
        const rawMin = Math.min(...values);
        const rawMax = Math.max(...values);
        const padding = Math.max(1.7, (rawMax - rawMin) * 0.24);
        const low = rawMin - padding;
        const high = rawMax + padding;
        const plotHeight = height - top - bottom;
        const plotWidth = width - left - right;

        const x = (index) => left + (index / (points.length - 1)) * plotWidth;
        const y = (value) => top + ((high - value) / (high - low)) * plotHeight;
        const coords = points.map((entry, index) => ({ x: x(index), y: y(entry.temperature), value: entry.temperature }));
        const linePath = coords.map((point, index) => `${index ? "L" : "M"}${point.x.toFixed(1)},${point.y.toFixed(1)}`).join(" ");
        const areaPath = `${linePath} L${coords[coords.length - 1].x.toFixed(1)},${(height - bottom).toFixed(1)} L${coords[0].x.toFixed(1)},${(height - bottom).toFixed(1)} Z`;
        const horizontalLines = [0, .5, 1].map((position) => {
          const yPosition = top + plotHeight * position;
          const value = high - (high - low) * position;
          return `
            <line x1="${left}" x2="${width - right}" y1="${yPosition}" y2="${yPosition}" stroke="#e8ebf4" stroke-width="1"/>
            <text x="0" y="${yPosition + 3}" fill="#a3abc0" font-size="9" font-weight="700">${rounded(value)}°</text>`;
        }).join("");

        const labelIndexes = [...new Set([
          0,
          Math.round((points.length - 1) * .25),
          Math.round((points.length - 1) * .5),
          Math.round((points.length - 1) * .75),
          points.length - 1
        ])];

        const timeLabels = labelIndexes.map((index) => {
          const anchor = index === 0 ? "start" : index === points.length - 1 ? "end" : "middle";
          return `<text x="${x(index)}" y="${height - 5}" text-anchor="${anchor}" fill="#9da6ba" font-size="9" font-weight="700">${displayTime(points[index].time).replace(":00", "")}</text>`;
        }).join("");

        const dots = coords.map((point, index) => {
          const highlight = labelIndexes.includes(index);
          return `<circle cx="${point.x.toFixed(1)}" cy="${point.y.toFixed(1)}" r="${highlight ? 3.4 : 1.7}" fill="${highlight ? "#6279ee" : "#9babf5"}" stroke="#fff" stroke-width="${highlight ? 1.7 : .8}"/>`;
        }).join("");

        chart.innerHTML = `
          <defs>
            <linearGradient id="temperatureFill" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stop-color="#8496f5" stop-opacity=".31"/>
              <stop offset="100%" stop-color="#8496f5" stop-opacity=".015"/>
            </linearGradient>
          </defs>
          ${horizontalLines}
          <path d="${areaPath}" fill="url(#temperatureFill)"></path>
          <path d="${linePath}" fill="none" stroke="#647aee" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"></path>
          ${dots}
          ${timeLabels}`;
      }

      function renderHours(hourly) {
        const grid = $("hourGrid");
        grid.innerHTML = "";

        const validTemps = hourly.map((entry) => entry.temperature).filter(Number.isFinite);
        const low = Math.min(...validTemps);
        const high = Math.max(...validTemps);
        const span = Math.max(high - low, 1);

        hourly.forEach((entry) => {
          const card = document.createElement("article");
          card.className = "hour-card";
          const ratio = Number.isFinite(entry.temperature) ? (entry.temperature - low) / span : .5;
          const hue = Math.round(214 - ratio * 164);
          card.style.setProperty("--tone", `hsl(${hue} 76% 59%)`);

          const time = document.createElement("time");
          time.textContent = displayTime(entry.time);

          const value = document.createElement("strong");
          value.textContent = Number.isFinite(entry.temperature) ? `${displayTemperature(entry.temperature)}°` : "—";

          card.append(time, value);
          grid.appendChild(card);
        });

        $("hourCount").textContent = `${hourly.length} observations`;
      }

      function showError() {
        $("loadingPanel").hidden = true;
        $("forecastContent").hidden = true;
        $("errorPanel").hidden = false;
        $("conditionName").textContent = "Weather unavailable";
        $("weatherIcon").setAttribute("aria-label", "Weather unavailable");
        $("sourceBadge").textContent = "UNAVAILABLE";
      }

      async function loadWeather() {
        const endpoint = useArchive ? "/api/om/archive" : "/api/om/forecast";
        const query = new URLSearchParams({
          latitude: String(config.lat),
          longitude: String(config.lon),
          daily: "temperature_2m_max,temperature_2m_min,weather_code",
          hourly: "temperature_2m",
          timezone: "UTC",
          temperature_unit: "celsius",
          start_date: config.date,
          end_date: config.date
        });

        try {
          const response = await fetch(`${endpoint}?${query.toString()}`);
          if (!response.ok) throw new Error("Weather response failed");

          const data = await response.json();
          const maximum = Number(data?.daily?.temperature_2m_max?.[0]);
          const minimum = Number(data?.daily?.temperature_2m_min?.[0]);
          const weatherCode = Number(data?.daily?.weather_code?.[0]);

          const hourly = (data?.hourly?.time || [])
            .map((time, index) => ({
              time,
              temperature: Number(data?.hourly?.temperature_2m?.[index])
            }))
            .filter((entry) => String(entry.time).slice(0, 10) === config.date);

          if (!Number.isFinite(maximum) || !Number.isFinite(minimum) || hourly.length === 0 || hourly.filter((entry) => Number.isFinite(entry.temperature)).length < 2) {
            throw new Error("Incomplete weather data");
          }

          const condition = weatherCondition(weatherCode);
          $("maxTemperature").textContent = displayTemperature(maximum);
          $("maxTemperatureSmall").textContent = displayTemperature(maximum);
          $("minTemperature").textContent = displayTemperature(minimum);
          $("rangeSummary").textContent = `${displayTemperature(minimum)}° — ${displayTemperature(maximum)}°`;
          $("summaryRange").textContent = `${displayTemperature(minimum)}° to ${displayTemperature(maximum)}°`;
          $("chartRange").textContent = `${displayTemperature(minimum)}° — ${displayTemperature(maximum)}°`;
          $("conditionName").textContent = condition.name;
          $("weatherIcon").innerHTML = icons[condition.icon];
          $("weatherIcon").setAttribute("aria-label", condition.name);

          const range = Math.max(0, maximum - minimum);
          const rangeWidth = Math.max(34, Math.min(96, 34 + range * 7.4));
          $("rangeFill").style.width = `${rangeWidth}%`;

          renderChart(hourly);
          renderHours(hourly);

          $("loadingPanel").hidden = true;
          $("forecastContent").hidden = false;
        } catch (error) {
          showError();
        }
      }

      loadWeather();
    })();
  </script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total	32,577	html / css / js	4,658 / 13,666 / 14,253
dom nodes	86	dom depth	12
css rules	86	js present	yes
brightness	195.5	contrast	79.9
colorfulness	36.9	whitespace	72.3%

This slot's telemetry

prompt tokens	0	completion tokens	18,118
total tokens	0	wall	299.3 s
cost	—	request id	—

config.json568 B

{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_NONE",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "gpt-5.6-terra-eff-ultra--cli--codex-oauth--dev",
  "effort": "ultra",
  "family": "gpt",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "gpt-5.6-terra",
  "protocol": "cli",
  "served_model": "gpt-5.6-terra",
  "telemetry": {
    "completion_tokens": 69869,
    "cost_usd": null,
    "prompt_tokens": null,
    "total_tokens": null,
    "wall_ms": 1077147
  },
  "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-terra-eff-ultra--cli--codex-oauth--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-18T22:59:28.932972+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-18T22:54:29.607382+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-18T23:01:27.403081+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-18T22:59:32.499541+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-18T23:07:07.387636+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-18T23:01:31.389393+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-18T23:12:38.432682+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-18T23:07:11.507078+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
    }
  }
}