gpt-5.3-codex @ low · cursor

cursorlow
config
gpt-5.3-codex-eff-low--cli--cursor--dev
batch
2026-07-19--unified
transport
cursor-agent-cli-isolated-home
protocol
cli · plan
served model
gpt-5.3-codex-low
captured
Jul 18, 2026, 11:54 AM · N=2
variant
live
slot 0 · P-q · sandboxed iframe
gpt-5.3-codex @low · cursor 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 neighborsNo similarity data for this session — this batch has no computed pairs.

Fidelity — does the card show the right data?

  • namematch
  • conditionmatch
  • datematch
  • max tempmatchshown: 25
  • min tempmatchshown: 16
  • hourlymatchcoverage 24/24 · 24 match · 0 mismatch · 0 not shown
  • request sidematch0 violation(s)

extractor fidelity-extractor-v1+Berlin-2026-07-15

Source — raw model output, one byte unchanged

download card.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=1280, initial-scale=1.0" />
  <title>Weather Card</title>
  <style>
    :root {
      --bg-a: #0f172a;
      --bg-b: #1e293b;
      --card: rgba(15, 23, 42, 0.72);
      --card-border: rgba(148, 163, 184, 0.2);
      --text: #e2e8f0;
      --muted: #94a3b8;
      --accent: #38bdf8;
      --accent-2: #22d3ee;
      --success: #22c55e;
      --danger: #f87171;
      --shadow: 0 24px 60px rgba(2, 6, 23, 0.55);
      --radius-xl: 24px;
      --radius-lg: 16px;
      --radius-md: 12px;
    }

    * {
      box-sizing: border-box;
    }

    html, body {
      width: 1280px;
      height: 800px;
      margin: 0;
      overflow: hidden;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(1200px 500px at 15% -10%, rgba(56, 189, 248, 0.22), transparent 60%),
        radial-gradient(900px 500px at 85% 110%, rgba(34, 211, 238, 0.18), transparent 60%),
        linear-gradient(140deg, var(--bg-a), var(--bg-b));
    }

    .frame {
      width: 100%;
      height: 100%;
      padding: 42px;
      display: grid;
      place-items: center;
    }

    .card {
      width: 100%;
      max-width: 1160px;
      height: 100%;
      max-height: 716px;
      background: linear-gradient(165deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.64));
      border: 1px solid var(--card-border);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
      padding: 28px;
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      gap: 20px;
      position: relative;
      overflow: hidden;
    }

    .card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(500px 260px at 110% -30%, rgba(56, 189, 248, 0.14), transparent 62%),
        radial-gradient(380px 220px at -10% 110%, rgba(34, 211, 238, 0.09), transparent 62%);
      pointer-events: none;
    }

    .top {
      z-index: 1;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
    }

    .location h1 {
      margin: 0;
      font-size: 42px;
      line-height: 1.05;
      letter-spacing: 0.2px;
      font-weight: 760;
      color: #f8fafc;
      text-wrap: balance;
      max-width: 620px;
    }

    .location .date {
      margin-top: 10px;
      color: var(--muted);
      font-size: 17px;
      letter-spacing: 0.3px;
    }

    .badge {
      margin-top: 4px;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(56, 189, 248, 0.12);
      border: 1px solid rgba(56, 189, 248, 0.35);
      color: #bae6fd;
      font-weight: 600;
      font-size: 14px;
      white-space: nowrap;
    }

    .grid {
      z-index: 1;
      display: grid;
      grid-template-columns: 1.25fr 1fr 1fr;
      gap: 14px;
    }

    .tile {
      background: rgba(15, 23, 42, 0.5);
      border: 1px solid rgba(148, 163, 184, 0.18);
      border-radius: var(--radius-lg);
      padding: 16px 18px;
      min-height: 116px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .tile-label {
      color: var(--muted);
      font-size: 12px;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      margin-bottom: 8px;
      font-weight: 620;
    }

    .tile-value {
      font-size: 38px;
      line-height: 1;
      font-weight: 740;
      color: #f8fafc;
      letter-spacing: -0.4px;
    }

    .tile-sub {
      margin-top: 8px;
      color: #cbd5e1;
      font-size: 15px;
      line-height: 1.2;
    }

    .temp-pair {
      display: flex;
      gap: 16px;
      align-items: baseline;
      flex-wrap: wrap;
    }

    .max { color: #fca5a5; }
    .min { color: #93c5fd; }

    .hourly-wrap {
      z-index: 1;
      background: rgba(15, 23, 42, 0.44);
      border: 1px solid rgba(148, 163, 184, 0.18);
      border-radius: var(--radius-lg);
      padding: 16px 14px 8px;
      display: grid;
      grid-template-rows: auto 1fr;
      min-height: 0;
    }

    .hourly-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 8px;
      padding: 0 6px;
    }

    .hourly-head .label {
      color: var(--muted);
      letter-spacing: 1.1px;
      text-transform: uppercase;
      font-size: 12px;
      font-weight: 620;
    }

    .hourly-head .unit {
      color: #bae6fd;
      font-size: 13px;
      font-weight: 600;
    }

    .hourly-grid {
      overflow: auto;
      min-height: 0;
      display: grid;
      grid-template-columns: repeat(24, minmax(88px, 1fr));
      gap: 10px;
      padding: 8px 6px 12px;
      scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
    }

    .hour {
      background: linear-gradient(180deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.7));
      border: 1px solid rgba(148, 163, 184, 0.2);
      border-radius: var(--radius-md);
      padding: 10px 8px;
      text-align: center;
      display: grid;
      gap: 7px;
    }

    .hour-time {
      color: #94a3b8;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.4px;
    }

    .hour-temp {
      color: #e0f2fe;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.3px;
    }

    .hour-bar-wrap {
      height: 5px;
      border-radius: 999px;
      background: rgba(100, 116, 139, 0.28);
      overflow: hidden;
    }

    .hour-bar {
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      width: 0%;
      transition: width 0.5s ease;
    }

    .status {
      z-index: 1;
      min-height: 34px;
      display: flex;
      align-items: center;
      color: var(--muted);
      font-size: 14px;
    }

    .status.error {
      color: var(--danger);
      font-weight: 600;
    }

    .loading {
      width: 18px;
      height: 18px;
      border: 2px solid rgba(148, 163, 184, 0.35);
      border-top-color: #e2e8f0;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      margin-right: 10px;
      flex: 0 0 auto;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <div class="frame">
    <section class="card">
      <header class="top">
        <div class="location">
          <h1 id="locationName">Berlin</h1>
          <div class="date" id="dateText">—</div>
        </div>
        <div class="badge" id="endpointBadge">Loading weather</div>
      </header>

      <section class="grid">
        <article class="tile">
          <div class="tile-label">Condition</div>
          <div class="tile-value" id="conditionText" style="font-size:30px;">—</div>
          <div class="tile-sub" id="conditionCode">WMO Code: —</div>
        </article>

        <article class="tile">
          <div class="tile-label">Maximum</div>
          <div class="tile-value max" id="maxTemp">—°C</div>
          <div class="tile-sub">Daily high</div>
        </article>

        <article class="tile">
          <div class="tile-label">Minimum</div>
          <div class="tile-value min" id="minTemp">—°C</div>
          <div class="tile-sub">Daily low</div>
        </article>
      </section>

      <section class="hourly-wrap">
        <div class="hourly-head">
          <div class="label">Hourly Temperature</div>
          <div class="unit">Celsius</div>
        </div>
        <div class="hourly-grid" id="hourlyGrid"></div>
      </section>

      <footer class="status" id="statusLine">
        <div class="loading" aria-hidden="true"></div>
        Loading weather data...
      </footer>
    </section>
  </div>

  <script>
    (function () {
      const qs = new URLSearchParams(window.location.search);

      const parseNumber = (v, fallback) => {
        const n = Number(v);
        return Number.isFinite(n) ? n : fallback;
      };

      const todayUtc = new Date().toISOString().slice(0, 10);
      const lat = parseNumber(qs.get("lat"), 52.52);
      const lon = parseNumber(qs.get("lon"), 13.405);
      const name = (qs.get("name") || "Berlin").trim() || "Berlin";
      const date = /^\d{4}-\d{2}-\d{2}$/.test(qs.get("date") || "") ? (qs.get("date") || todayUtc) : todayUtc;

      const isPast = date < todayUtc;
      const endpoint = isPast ? "/api/om/archive" : "/api/om/forecast";

      const el = {
        locationName: document.getElementById("locationName"),
        dateText: document.getElementById("dateText"),
        endpointBadge: document.getElementById("endpointBadge"),
        conditionText: document.getElementById("conditionText"),
        conditionCode: document.getElementById("conditionCode"),
        maxTemp: document.getElementById("maxTemp"),
        minTemp: document.getElementById("minTemp"),
        hourlyGrid: document.getElementById("hourlyGrid"),
        statusLine: document.getElementById("statusLine")
      };

      const conditionMap = {
        0: "Clear sky",
        1: "Mainly clear",
        2: "Partly cloudy",
        3: "Overcast",
        45: "Fog",
        48: "Depositing rime fog",
        51: "Light drizzle",
        53: "Moderate drizzle",
        55: "Dense drizzle",
        56: "Light freezing drizzle",
        57: "Dense freezing drizzle",
        61: "Slight rain",
        63: "Moderate rain",
        65: "Heavy rain",
        66: "Light freezing rain",
        67: "Heavy freezing rain",
        71: "Slight snow fall",
        73: "Moderate snow fall",
        75: "Heavy snow fall",
        77: "Snow grains",
        80: "Slight rain showers",
        81: "Moderate rain showers",
        82: "Violent rain showers",
        85: "Slight snow showers",
        86: "Heavy snow showers",
        95: "Thunderstorm",
        96: "Thunderstorm with slight hail",
        99: "Thunderstorm with heavy hail"
      };

      const formatDay = (ymd) => {
        const d = new Date(ymd + "T00:00:00Z");
        return new Intl.DateTimeFormat("en-US", {
          weekday: "long",
          year: "numeric",
          month: "long",
          day: "numeric",
          timeZone: "UTC"
        }).format(d) + " (UTC)";
      };

      const t = (value) => {
        if (typeof value !== "number" || Number.isNaN(value)) return "—°C";
        return `${Math.round(value)}°C`;
      };

      const setStatus = (text, isError) => {
        el.statusLine.classList.toggle("error", !!isError);
        el.statusLine.innerHTML = isError ? text : `<div class="loading" aria-hidden="true"></div>${text}`;
      };

      const clearLoadingStatus = (text) => {
        el.statusLine.classList.remove("error");
        el.statusLine.textContent = text;
      };

      function renderHourly(times, temps) {
        el.hourlyGrid.innerHTML = "";
        const values = temps.filter((v) => typeof v === "number" && Number.isFinite(v));
        const min = values.length ? Math.min(...values) : 0;
        const max = values.length ? Math.max(...values) : 1;
        const span = Math.max(1, max - min);

        for (let i = 0; i < times.length; i++) {
          const time = times[i];
          const temp = temps[i];
          const hour = (time && time.length >= 16) ? time.slice(11, 16) : `H${i}`;
          const width = typeof temp === "number" ? ((temp - min) / span) * 100 : 0;

          const item = document.createElement("article");
          item.className = "hour";
          item.innerHTML = `
            <div class="hour-time">${hour}</div>
            <div class="hour-temp">${t(temp)}</div>
            <div class="hour-bar-wrap"><div class="hour-bar" style="width:${Math.max(8, width)}%"></div></div>
          `;
          el.hourlyGrid.appendChild(item);
        }
      }

      async function load() {
        el.locationName.textContent = name;
        el.dateText.textContent = formatDay(date);
        el.endpointBadge.textContent = isPast ? "Archive API" : "Forecast API";

        const params = new URLSearchParams({
          latitude: String(lat),
          longitude: String(lon),
          daily: "temperature_2m_max,temperature_2m_min,weather_code",
          hourly: "temperature_2m",
          timezone: "UTC",
          temperature_unit: "celsius",
          start_date: date,
          end_date: date
        });

        const url = `${endpoint}?${params.toString()}`;

        try {
          setStatus("Loading weather data...", false);
          const res = await fetch(url, { method: "GET" });
          if (!res.ok) throw new Error(`HTTP ${res.status}`);
          const data = await res.json();

          const maxArr = data?.daily?.temperature_2m_max || [];
          const minArr = data?.daily?.temperature_2m_min || [];
          const codeArr = data?.daily?.weather_code || [];
          const hourlyTimes = data?.hourly?.time || [];
          const hourlyTemps = data?.hourly?.temperature_2m || [];

          const maxVal = typeof maxArr[0] === "number" ? maxArr[0] : null;
          const minVal = typeof minArr[0] === "number" ? minArr[0] : null;
          const codeVal = typeof codeArr[0] === "number" ? codeArr[0] : null;

          if (!hourlyTimes.length || !hourlyTemps.length || maxVal === null || minVal === null || codeVal === null) {
            throw new Error("Incomplete weather payload");
          }

          el.maxTemp.textContent = t(maxVal);
          el.minTemp.textContent = t(minVal);
          el.conditionText.textContent = conditionMap[codeVal] || "Unknown condition";
          el.conditionCode.textContent = `WMO Code: ${codeVal}`;

          renderHourly(hourlyTimes, hourlyTemps);

          clearLoadingStatus(`Weather loaded for ${name} on ${date}.`);
        } catch (err) {
          el.conditionText.textContent = "Unavailable";
          el.conditionCode.textContent = "WMO Code: —";
          el.maxTemp.textContent = "—°C";
          el.minTemp.textContent = "—°C";
          el.hourlyGrid.innerHTML = "";
          el.statusLine.textContent = "Weather data could not be loaded.";
          el.statusLine.classList.add("error");
          el.endpointBadge.textContent = "Load failed";
        }
      }

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

L1 — cheap deterministic descriptors

bytes total14,395html / css / js1,692 / 6,229 / 6,474
dom nodes35dom depth7
css rules33js presentyes
brightness31.5contrast16.1
colorfulness14.4whitespace90.9%

This slot's telemetry

prompt tokens15,756completion tokens4,252
total tokens20,008wall40 s
costrequest id
config.json571 B
{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_NONE",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "gpt-5.3-codex-eff-low--cli--cursor--dev",
  "effort": "low",
  "family": "gpt",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "gpt-5.3-codex",
  "protocol": "cli",
  "served_model": "gpt-5.3-codex-low",
  "telemetry": {
    "completion_tokens": 15208,
    "cost_usd": null,
    "prompt_tokens": 35357,
    "total_tokens": 50565,
    "wall_ms": 147317
  },
  "transport": "cursor-agent-cli-isolated-home",
  "vendor_sanction_ref": null
}
send-log2.5 KB
{
  "N": 2,
  "batch_id": "2026-08-13--cursor-s0",
  "config_id": "gpt-5.3-codex-eff-low--cli--cursor--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-08-12T16:54:18.800475+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T16:53:38.829118+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-08-12T16:54:57.333056+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T16:54:24.628812+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-08-12T16:55:35.569324+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T16:55:00.200692+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-08-12T16:56:18.152409+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T16:55:38.870877+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
    }
  }
}