gpt-5.2 · cursor-xl

cursor-xl

config: gpt-5.2--cli--cursor-xl--dev
batch: 2026-07-19--unified
transport: cursor-agent-cli-isolated-home
protocol: cli · plan
served model: gpt-5.2
captured: Jul 18, 2026, 11:54 AM · N=2

variant

live

slot 0 · P-q · sandboxed iframe

gpt-5.2 · cursor-xl 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
hourlymismatchcoverage 0/24 · 0 match · 2 mismatch · 22 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" />
  <title>Weather Card</title>
  <style>
    :root{
      --bg0:#070A12;
      --bg1:#0A1022;
      --card:#0B1224cc;
      --card2:#0B1224f2;
      --stroke:rgba(255,255,255,.10);
      --stroke2:rgba(255,255,255,.14);
      --text:rgba(255,255,255,.92);
      --muted:rgba(255,255,255,.66);
      --muted2:rgba(255,255,255,.48);
      --good:#7CFFB2;
      --warn:#FFD36A;
      --bad:#FF6B7A;

      --accent:#7aa7ff;
      --accent2:#a68bff;

      --shadow: 0 30px 80px rgba(0,0,0,.55);
      --shadow2: 0 18px 50px rgba(0,0,0,.45);
      --r:22px;
      --r2:16px;

      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      color:var(--text);
      font-family:var(--sans);
      background:
        radial-gradient(1100px 700px at 20% 18%, rgba(122,167,255,.22), transparent 55%),
        radial-gradient(1000px 800px at 82% 15%, rgba(166,139,255,.18), transparent 52%),
        radial-gradient(900px 700px at 60% 95%, rgba(124,255,178,.10), transparent 60%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      overflow:hidden;
    }

    /* Desktop-focused canvas */
    .stage{
      width:1280px;
      height:800px;
      margin:0 auto;
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:32px;
    }

    /* Subtle grid + noise */
    .stage::before{
      content:"";
      position:absolute; inset:0;
      background:
        linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size: 72px 72px;
      mask-image: radial-gradient(closest-side at 50% 50%, rgba(0,0,0,.7), rgba(0,0,0,0));
      opacity:.8;
      pointer-events:none;
    }
    .stage::after{
      content:"";
      position:absolute; inset:-40px;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.07), transparent 45%),
        radial-gradient(circle at 80% 40%, rgba(255,255,255,.05), transparent 42%),
        radial-gradient(circle at 55% 85%, rgba(255,255,255,.04), transparent 40%);
      filter: blur(18px);
      opacity:.65;
      pointer-events:none;
    }

    .wrap{
      width:min(1060px, 100%);
      position:relative;
      z-index:1;
      display:flex;
      gap:18px;
      align-items:stretch;
    }

    .card{
      flex: 1 1 auto;
      background: linear-gradient(180deg, rgba(11,18,36,.86), rgba(11,18,36,.62));
      border: 1px solid var(--stroke);
      border-radius: var(--r);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .card::before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(850px 420px at 20% 0%, rgba(122,167,255,.28), transparent 55%),
        radial-gradient(820px 420px at 85% 15%, rgba(166,139,255,.22), transparent 58%),
        radial-gradient(720px 480px at 30% 120%, rgba(124,255,178,.10), transparent 58%);
      opacity:.85;
      pointer-events:none;
      filter: saturate(1.08);
    }

    .inner{
      position:relative;
      padding:24px 24px 18px;
      display:grid;
      grid-template-columns: 1.25fr 1fr;
      gap:16px;
    }

    .topbar{
      grid-column:1 / -1;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
    }

    .title{
      display:flex;
      flex-direction:column;
      gap:6px;
      min-width:0;
    }

    .loc{
      font-size:18px;
      font-weight:650;
      letter-spacing:.2px;
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }
    .loc .pin{
      width:18px; height:18px; flex:0 0 auto;
      opacity:.9;
      filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
    }
    .loc .name{
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .sub{
      display:flex;
      align-items:center;
      gap:10px;
      color:var(--muted);
      font-size:13px;
      line-height:1.2;
      flex-wrap:wrap;
    }

    .pill{
      font-size:12px;
      line-height:1;
      padding:7px 10px;
      border-radius:999px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.055);
      color: rgba(255,255,255,.78);
      display:inline-flex;
      align-items:center;
      gap:8px;
      backdrop-filter: blur(10px);
    }
    .pill b{
      color: rgba(255,255,255,.92);
      font-weight:650;
    }
    .pill .k{
      font-family:var(--mono);
      font-size:11px;
      color: rgba(255,255,255,.72);
    }

    .status{
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:flex-end;
      min-width:260px;
    }

    .icon{
      width:56px; height:56px;
      border-radius: 16px;
      border:1px solid var(--stroke);
      background:
        radial-gradient(120px 90px at 20% 20%, rgba(255,255,255,.12), rgba(255,255,255,.04)),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      display:grid;
      place-items:center;
      box-shadow: 0 16px 40px rgba(0,0,0,.35);
      flex:0 0 auto;
    }
    .icon svg{ width:36px; height:36px; }

    .cond{
      display:flex;
      flex-direction:column;
      gap:4px;
      align-items:flex-end;
      text-align:right;
    }
    .cond .label{
      font-size:14px;
      color: rgba(255,255,255,.86);
      font-weight:650;
      letter-spacing:.15px;
    }
    .cond .hint{
      font-size:12px;
      color: var(--muted);
    }

    .hero{
      padding:14px 0 2px;
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:14px;
      border-top:1px solid rgba(255,255,255,.06);
      margin-top:10px;
    }

    .tempBig{
      display:flex;
      align-items:baseline;
      gap:10px;
      min-width:0;
    }
    .tempBig .deg{
      font-size:54px;
      font-weight:760;
      letter-spacing:-1px;
      text-shadow: 0 16px 50px rgba(0,0,0,.6);
      line-height:1;
    }
    .tempBig .unit{
      font-size:14px;
      color: var(--muted);
      font-weight:650;
      letter-spacing:.12em;
      transform: translateY(-6px);
    }

    .minmax{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    .mm{
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.045);
      border-radius: 14px;
      padding:10px 12px;
      display:flex;
      align-items:center;
      gap:10px;
      min-width:150px;
      backdrop-filter: blur(10px);
    }
    .mm .t{
      font-size:12px;
      color: var(--muted);
    }
    .mm .v{
      font-size:18px;
      font-weight:740;
      letter-spacing:-.3px;
    }
    .mm .v small{
      font-size:12px;
      font-weight:700;
      color: rgba(255,255,255,.75);
      margin-left:2px;
    }

    .chart{
      grid-column:1 / -1;
      border:1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.18);
      border-radius: var(--r2);
      overflow:hidden;
      position:relative;
      box-shadow: var(--shadow2);
    }
    .chartHeader{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:12px 14px;
      border-bottom:1px solid rgba(255,255,255,.07);
      background:
        radial-gradient(650px 120px at 20% 0%, rgba(122,167,255,.18), transparent 55%),
        radial-gradient(650px 120px at 80% 0%, rgba(166,139,255,.16), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    }
    .chartHeader .h{
      font-size:13px;
      font-weight:700;
      letter-spacing:.2px;
    }
    .chartHeader .meta{
      font-size:12px;
      color: var(--muted);
      font-family: var(--mono);
    }

    .chartBody{
      padding:14px 14px 10px;
    }
    .svgWrap{
      width:100%;
      height:220px;
      border-radius: 14px;
      overflow:hidden;
      position:relative;
      background:
        radial-gradient(900px 260px at 10% 0%, rgba(255,255,255,.06), transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
      border:1px solid rgba(255,255,255,.06);
    }

    .legendRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-top:10px;
      flex-wrap:wrap;
    }
    .legend{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
    }
    .dot{
      width:9px; height:9px; border-radius:999px;
      background: var(--accent);
      box-shadow: 0 0 0 3px rgba(122,167,255,.16);
    }
    .legend .txt{
      font-size:12px;
      color: var(--muted);
    }
    .range{
      font-size:12px;
      color: rgba(255,255,255,.82);
      font-family: var(--mono);
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
    }

    .hours{
      grid-column:1 / -1;
      margin-top:12px;
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap:8px;
    }
    .hchip{
      border:1px solid rgba(255,255,255,.09);
      background: rgba(255,255,255,.035);
      border-radius: 14px;
      padding:10px 10px 9px;
      display:flex;
      flex-direction:column;
      gap:6px;
      min-width:0;
      position:relative;
      overflow:hidden;
    }
    .hchip::before{
      content:"";
      position:absolute; inset:-60px -40px auto -40px;
      height:120px;
      background: radial-gradient(circle at 30% 60%, rgba(122,167,255,.12), transparent 55%);
      opacity:.9;
      pointer-events:none;
    }
    .hchip .hr{
      font-size:11px;
      color: var(--muted);
      font-family: var(--mono);
      position:relative;
    }
    .hchip .tv{
      font-size:14px;
      font-weight:740;
      letter-spacing:-.2px;
      position:relative;
    }
    .hchip .tv small{
      font-size:11px;
      color: rgba(255,255,255,.70);
      margin-left:2px;
      font-weight:700;
    }

    .side{
      width: 320px;
      flex: 0 0 320px;
      display:flex;
      flex-direction:column;
      gap:18px;
    }

    .panel{
      background: linear-gradient(180deg, rgba(11,18,36,.78), rgba(11,18,36,.56));
      border:1px solid var(--stroke);
      border-radius: var(--r);
      box-shadow: var(--shadow2);
      overflow:hidden;
      position:relative;
      min-height: 168px;
    }
    .panel::before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(520px 220px at 15% 0%, rgba(122,167,255,.22), transparent 60%),
        radial-gradient(520px 220px at 100% 10%, rgba(166,139,255,.18), transparent 62%);
      opacity:.8;
      pointer-events:none;
    }
    .panelInner{
      position:relative;
      padding:16px 16px 14px;
    }
    .panelTitle{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:12px;
    }
    .panelTitle .t{
      font-size:13px;
      font-weight:750;
      letter-spacing:.18px;
    }
    .panelTitle .s{
      font-size:12px;
      color: var(--muted);
      font-family: var(--mono);
    }

    .kv{
      display:grid;
      grid-template-columns: 1fr auto;
      gap:10px 12px;
      align-items:center;
      padding:10px 12px;
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.09);
      background: rgba(255,255,255,.04);
    }
    .kv + .kv{ margin-top:10px; }
    .kv .k{
      font-size:12px;
      color: var(--muted);
    }
    .kv .v{
      font-size:12px;
      color: rgba(255,255,255,.86);
      font-family: var(--mono);
      white-space:nowrap;
    }

    .footer{
      margin-top:14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      color: var(--muted2);
      font-size:12px;
      padding: 10px 14px 14px;
      border-top: 1px solid rgba(255,255,255,.06);
      position:relative;
    }
    .footer .brand{
      display:flex;
      gap:8px;
      align-items:center;
      font-family: var(--mono);
    }
    .footer .badge{
      padding:5px 9px;
      border:1px solid rgba(255,255,255,.10);
      border-radius:999px;
      background: rgba(255,255,255,.03);
      color: rgba(255,255,255,.72);
      font-size:11px;
    }

    /* Loading skeleton */
    .skeleton{
      border-radius: 12px;
      background: linear-gradient(90deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.12) 35%, rgba(255,255,255,.06) 70%);
      background-size: 240% 100%;
      animation: shimmer 1.4s ease-in-out infinite;
      border:1px solid rgba(255,255,255,.06);
    }
    @keyframes shimmer{
      0%{ background-position: 0% 0; }
      100%{ background-position: 220% 0; }
    }

    .err{
      padding:18px 18px 16px;
      border: 1px solid rgba(255,107,122,.22);
      background: linear-gradient(180deg, rgba(255,107,122,.12), rgba(11,18,36,.55));
      border-radius: 18px;
      color: rgba(255,255,255,.88);
      box-shadow: 0 22px 55px rgba(0,0,0,.5);
    }
    .err .h{
      font-weight:800;
      letter-spacing:.2px;
      margin-bottom:8px;
    }
    .err .p{
      color: rgba(255,255,255,.72);
      font-size:13px;
      line-height:1.45;
      margin:0;
    }

    /* Mobile fallback */
    @media (max-width: 1280px){
      body{ overflow:auto; }
      .stage{ width:auto; height:auto; min-height:100vh; overflow:visible; }
      .wrap{ flex-direction:column; }
      .side{ width:auto; flex:1 1 auto; }
      .inner{ grid-template-columns:1fr; }
      .status{ justify-content:flex-start; min-width:0; }
      .hours{ grid-template-columns: repeat(6, 1fr); }
    }

    @media (prefers-reduced-motion: reduce){
      .skeleton{ animation:none; }
    }
  </style>
</head>
<body>
  <div class="stage">
    <div class="wrap" id="app">
      <div class="card" aria-live="polite">
        <div class="inner">
          <div class="topbar">
            <div class="title">
              <div class="loc">
                <svg class="pin" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                  <path d="M12 22s7-6.1 7-13a7 7 0 1 0-14 0c0 6.9 7 13 7 13Z" stroke="rgba(255,255,255,.85)" stroke-width="1.7"/>
                  <path d="M12 12.2a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" stroke="rgba(255,255,255,.75)" stroke-width="1.7"/>
                </svg>
                <span class="name" id="locName">Loading…</span>
              </div>
              <div class="sub" id="subline">
                <span class="pill"><span class="k">DATE</span> <b id="dateLabel">—</b></span>
                <span class="pill"><span class="k">LAT</span> <b id="latLabel">—</b></span>
                <span class="pill"><span class="k">LON</span> <b id="lonLabel">—</b></span>
              </div>
              <div class="hero">
                <div class="tempBig">
                  <div class="deg" id="maxTemp">—</div>
                  <div class="unit">°C</div>
                </div>
                <div class="minmax">
                  <div class="mm">
                    <div>
                      <div class="t">Max</div>
                      <div class="v" id="maxTempSmall">—<small>°C</small></div>
                    </div>
                  </div>
                  <div class="mm">
                    <div>
                      <div class="t">Min</div>
                      <div class="v" id="minTempSmall">—<small>°C</small></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="status">
              <div class="icon" id="condIcon" aria-hidden="true">
                <div class="skeleton" style="width:34px;height:34px;border-radius:12px"></div>
              </div>
              <div class="cond">
                <div class="label" id="condLabel">Loading…</div>
                <div class="hint" id="condHint">Fetching hourly temperatures</div>
              </div>
            </div>
          </div>

          <div class="chart" role="img" aria-label="Hourly temperature chart">
            <div class="chartHeader">
              <div class="h">Hourly temperatures (UTC)</div>
              <div class="meta" id="chartMeta">—</div>
            </div>
            <div class="chartBody">
              <div class="svgWrap" id="svgWrap">
                <div class="skeleton" style="position:absolute;inset:12px;border-radius:14px"></div>
              </div>
              <div class="legendRow">
                <div class="legend">
                  <span class="dot"></span>
                  <span class="txt" id="legendTxt">Temperature · °C</span>
                </div>
                <span class="range" id="rangeTxt">—</span>
              </div>
            </div>
          </div>

          <div class="hours" id="hoursGrid" aria-label="Hourly temperatures list">
            <!-- filled by JS -->
          </div>
        </div>
        <div class="footer">
          <div class="brand">
            <span class="badge">Open-Meteo compatible</span>
            <span class="badge">No external resources</span>
          </div>
          <div class="badge" id="sourceBadge">—</div>
        </div>
      </div>

      <div class="side">
        <div class="panel">
          <div class="panelInner">
            <div class="panelTitle">
              <div class="t">Request</div>
              <div class="s">query params</div>
            </div>
            <div class="kv">
              <div class="k">Location label</div>
              <div class="v" id="qName">—</div>
            </div>
            <div class="kv">
              <div class="k">Latitude, Longitude</div>
              <div class="v" id="qLatLon">—</div>
            </div>
            <div class="kv">
              <div class="k">Date (UTC)</div>
              <div class="v" id="qDate">—</div>
            </div>
          </div>
        </div>

        <div class="panel">
          <div class="panelInner">
            <div class="panelTitle">
              <div class="t">Daily summary</div>
              <div class="s">for selected date</div>
            </div>
            <div class="kv">
              <div class="k">Condition</div>
              <div class="v" id="sumCond">—</div>
            </div>
            <div class="kv">
              <div class="k">Max / Min</div>
              <div class="v" id="sumMM">—</div>
            </div>
            <div class="kv">
              <div class="k">Data status</div>
              <div class="v" id="sumStatus">Loading…</div>
            </div>
          </div>
        </div>

        <div id="errorBox" style="display:none" class="err" role="alert">
          <div class="h">Weather data cannot be loaded</div>
          <p class="p" id="errorMsg">—</p>
        </div>
      </div>
    </div>
  </div>

  <script>
    (function(){
      const $ = (id) => document.getElementById(id);

      function pad2(n){ return String(n).padStart(2,'0'); }
      function todayUTC(){
        const d = new Date();
        return d.toISOString().slice(0,10);
      }
      function isValidDateStr(s){
        return typeof s === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(s);
      }
      function toUTCDate(dateStr){
        return new Date(dateStr + "T00:00:00Z");
      }
      function cmpDateStr(a,b){
        // YYYY-MM-DD lexical compare works
        if(a<b) return -1;
        if(a>b) return 1;
        return 0;
      }
      function fmtDateLong(dateStr){
        const d = toUTCDate(dateStr);
        const fmt = new Intl.DateTimeFormat(undefined, {
          weekday:'short', year:'numeric', month:'short', day:'2-digit', timeZone:'UTC'
        });
        return fmt.format(d);
      }
      function fmtNum(n){
        if(n === null || n === undefined || Number.isNaN(n)) return "—";
        const r = Math.round(n*10)/10;
        return (Math.abs(r) >= 10 ? Math.round(r) : r).toString();
      }
      function clamp(v,a,b){ return Math.max(a, Math.min(b, v)); }

      function conditionFor(code){
        // Open-Meteo weathercode mapping (category-based)
        const c = Number(code);
        const base = { label: "Unknown", hint: "Weather code " + (Number.isFinite(c)? c : "—"), accent: "#7aa7ff", icon: iconCloud() };

        if(!Number.isFinite(c)) return base;
        if(c === 0) return { label:"Clear sky", hint:"Bright and calm", accent:"#7CFFB2", icon: iconSun() };
        if([1,2,3].includes(c)) return { label:"Partly cloudy", hint:"Mixed sun & cloud", accent:"#7aa7ff", icon: iconPartly() };
        if([45,48].includes(c)) return { label:"Fog", hint:"Low visibility", accent:"#a68bff", icon: iconFog() };
        if((c>=51 && c<=57)) return { label:"Drizzle", hint:"Light precipitation", accent:"#7aa7ff", icon: iconDrizzle() };
        if((c>=61 && c<=67)) return { label:"Rain", hint:"Steady precipitation", accent:"#7aa7ff", icon: iconRain() };
        if((c>=71 && c<=77)) return { label:"Snow", hint:"Wintry precipitation", accent:"#a68bff", icon: iconSnow() };
        if((c>=80 && c<=82)) return { label:"Rain showers", hint:"Intermittent bursts", accent:"#7aa7ff", icon: iconShowers() };
        if((c>=85 && c<=86)) return { label:"Snow showers", hint:"Intermittent bursts", accent:"#a68bff", icon: iconSnowShowers() };
        if(c === 95) return { label:"Thunderstorm", hint:"Thunder possible", accent:"#FFD36A", icon: iconThunder() };
        if(c === 96 || c === 99) return { label:"Thunderstorm (hail)", hint:"Severe conditions", accent:"#FFD36A", icon: iconThunderHail() };
        return base;
      }

      function iconSun(){
        return `<svg viewBox="0 0 24 24" fill="none">
          <defs>
            <radialGradient id="gSun" cx="35%" cy="35%" r="70%">
              <stop offset="0%" stop-color="rgba(255,255,255,.95)"/>
              <stop offset="55%" stop-color="rgba(255,211,106,.92)"/>
              <stop offset="100%" stop-color="rgba(255,211,106,.55)"/>
            </radialGradient>
          </defs>
          <circle cx="12" cy="12" r="4.4" fill="url(#gSun)"/>
          <g stroke="rgba(255,211,106,.9)" stroke-width="1.6" stroke-linecap="round">
            <path d="M12 2.7v2.3"/><path d="M12 19v2.3"/>
            <path d="M2.7 12h2.3"/><path d="M19 12h2.3"/>
            <path d="M4.8 4.8l1.7 1.7"/><path d="M17.5 17.5l1.7 1.7"/>
            <path d="M19.2 4.8l-1.7 1.7"/><path d="M6.5 17.5l-1.7 1.7"/>
          </g>
        </svg>`;
      }
      function iconCloud(){
        return `<svg viewBox="0 0 24 24" fill="none">
          <path d="M7.8 18.3h9.2a3.4 3.4 0 0 0 .2-6.8 4.9 4.9 0 0 0-9.5 1 3.1 3.1 0 0 0-.1 6.2Z"
            fill="rgba(255,255,255,.16)" stroke="rgba(255,255,255,.75)" stroke-width="1.3" />
        </svg>`;
      }
      function iconPartly(){
        return `<svg viewBox="0 0 24 24" fill="none">
          <defs>
            <radialGradient id="gP" cx="35%" cy="35%" r="70%">
              <stop offset="0%" stop-color="rgba(255,255,255,.95)"/>
              <stop offset="60%" stop-color="rgba(122,167,255,.75)"/>
              <stop offset="100%" stop-color="rgba(122,167,255,.25)"/>
            </radialGradient>
          </defs>
          <circle cx="8.5" cy="9" r="3.2" fill="url(#gP)"/>
          <g stroke="rgba(122,167,255,.9)" stroke-width="1.4" stroke-linecap="round">
            <path d="M8.5 3.6v1.6"/><path d="M8.5 12.8v1.6"/>
            <path d="M3.1 9h1.6"/><path d="M11.8 9h1.6"/>
            <path d="M4.7 5.2l1.1 1.1"/><path d="M11.2 11.7l1.1 1.1"/>
          </g>
          <path d="M7.2 18.5h9.1a3.3 3.3 0 0 0 .1-6.6 4.6 4.6 0 0 0-8.7 1 3 3 0 0 0-.5 6.1Z"
            fill="rgba(255,255,255,.14)" stroke="rgba(255,255,255,.72)" stroke-width="1.25"/>
        </svg>`;
      }
      function iconFog(){
        return `<svg viewBox="0 0 24 24" fill="none">
          <path d="M7.2 11.2h9.6a3.1 3.1 0 0 0-.4-6.2 4.7 4.7 0 0 0-9 1A2.9 2.9 0 0 0 7.2 11.2Z"
            fill="rgba(255,255,255,.12)" stroke="rgba(255,255,255,.68)" stroke-width="1.2"/>
          <g stroke="rgba(255,255,255,.55)" stroke-width="1.3" stroke-linecap="round">
            <path d="M5 14h14"/><path d="M6.5 16.7h11"/>
            <path d="M7.5 19.4h9"/>
          </g>
        </svg>`;
      }
      function iconDrizzle(){
        return `<svg viewBox="0 0 24 24" fill="none">
          <path d="M7.3 12.1h9.1a3.2 3.2 0 0 0 .2-6.4 4.7 4.7 0 0 0-9 1A3 3 0 0 0 7.3 12.1Z"
            fill="rgba(255,255,255,.13)" stroke="rgba(255,255,255,.72)" stroke-width="1.25"/>
          <g stroke="rgba(122,167,255,.95)" stroke-width="1.5" stroke-linecap="round">
            <path d="M8 15.2l-.5 1.2"/><path d="M12 15.2l-.5 1.2"/><path d="M16 15.2l-.5 1.2"/>
            <path d="M10 17.6l-.5 1.2"/><path d="M14 17.6l-.5 1.2"/>
          </g>
        </svg>`;
      }
      function iconRain(){
        return `<svg viewBox="0 0 24 24" fill="none">
          <path d="M7.2 12.2h9.3a3.3 3.3 0 0 0 .1-6.6 4.8 4.8 0 0 0-9.2 1A3 3 0 0 0 7.2 12.2Z"
            fill="rgba(255,255,255,.13)" stroke="rgba(255,255,255,.74)" stroke-width="1.25"/>
          <g stroke="rgba(122,167,255,.98)" stroke-width="1.6" stroke-linecap="round">
            <path d="M9 14.8l-1 2.4"/><path d="M13 14.6l-1 2.6"/><path d="M17 14.8l-1 2.4"/>
            <path d="M11 17.2l-.9 2.2"/><path d="M15 17.2l-.9 2.2"/>
          </g>
        </svg>`;
      }
      function iconSnow(){
        return `<svg viewBox="0 0 24 24" fill="none">
          <path d="M7.2 12.2h9.3a3.3 3.3 0 0 0 .1-6.6 4.8 4.8 0 0 0-9.2 1A3 3 0 0 0 7.2 12.2Z"
            fill="rgba(255,255,255,.12)" stroke="rgba(255,255,255,.72)" stroke-width="1.25"/>
          <g stroke="rgba(166,139,255,.95)" stroke-width="1.4" stroke-linecap="round">
            <path d="M9 15.3v3.6"/><path d="M9 17.1h0"/>
            <path d="M13 15.3v3.6"/><path d="M17 15.3v3.6"/>
            <path d="M8 16.2l2 1.2"/><path d="M8 18l2-1.2"/>
            <path d="M12 16.2l2 1.2"/><path d="M12 18l2-1.2"/>
            <path d="M16 16.2l2 1.2"/><path d="M16 18l2-1.2"/>
          </g>
        </svg>`;
      }
      function iconShowers(){
        return `<svg viewBox="0 0 24 24" fill="none">
          <path d="M7.2 12.2h9.3a3.3 3.3 0 0 0 .1-6.6 4.8 4.8 0 0 0-9.2 1A3 3 0 0 0 7.2 12.2Z"
            fill="rgba(255,255,255,.13)" stroke="rgba(255,255,255,.74)" stroke-width="1.25"/>
          <g stroke="rgba(122,167,255,.98)" stroke-width="1.6" stroke-linecap="round">
            <path d="M10 14.9l-1.2 2.7"/><path d="M16 14.9l-1.2 2.7"/>
            <path d="M13.3 16.2l-1.2 2.7"/>
          </g>
        </svg>`;
      }
      function iconSnowShowers(){
        return `<svg viewBox="0 0 24 24" fill="none">
          <path d="M7.2 12.2h9.3a3.3 3.3 0 0 0 .1-6.6 4.8 4.8 0 0 0-9.2 1A3 3 0 0 0 7.2 12.2Z"
            fill="rgba(255,255,255,.12)" stroke="rgba(255,255,255,.72)" stroke-width="1.25"/>
          <g stroke="rgba(166,139,255,.96)" stroke-width="1.4" stroke-linecap="round">
            <path d="M10 15.4v3.2"/><path d="M14 15.4v3.2"/><path d="M18 15.4v3.2"/>
            <path d="M9.2 16.4l1.6 1"/><path d="M9.2 18l1.6-1"/>
            <path d="M13.2 16.4l1.6 1"/><path d="M13.2 18l1.6-1"/>
          </g>
        </svg>`;
      }
      function iconThunder(){
        return `<svg viewBox="0 0 24 24" fill="none">
          <path d="M7.1 12.1h9.4a3.3 3.3 0 0 0 .2-6.6 4.8 4.8 0 0 0-9.2 1 3 3 0 0 0-.4 6.2Z"
            fill="rgba(255,255,255,.13)" stroke="rgba(255,255,255,.74)" stroke-width="1.25"/>
          <path d="M12.7 13.3l-2.3 3.8h2l-1.1 3.6 3.9-5.1h-2.2l1.2-2.3Z"
            fill="rgba(255,211,106,.95)" stroke="rgba(255,211,106,.75)" stroke-width=".6" />
        </svg>`;
      }
      function iconThunderHail(){
        return `<svg viewBox="0 0 24 24" fill="none">
          <path d="M7.1 12.1h9.4a3.3 3.3 0 0 0 .2-6.6 4.8 4.8 0 0 0-9.2 1 3 3 0 0 0-.4 6.2Z"
            fill="rgba(255,255,255,.13)" stroke="rgba(255,255,255,.74)" stroke-width="1.25"/>
          <path d="M12.7 13.3l-2.3 3.8h2l-1.1 3.6 3.9-5.1h-2.2l1.2-2.3Z"
            fill="rgba(255,211,106,.95)" stroke="rgba(255,211,106,.75)" stroke-width=".6" />
          <g fill="rgba(255,255,255,.75)">
            <circle cx="9.1" cy="18.2" r="1.1"/><circle cx="16.6" cy="18.6" r="1.1"/>
          </g>
        </svg>`;
      }

      function setAccent(hex){
        document.documentElement.style.setProperty('--accent', hex);
      }

      function buildHourChips(hours){
        const grid = $('hoursGrid');
        grid.innerHTML = '';
        // Show 24 hours in two rows (12 columns)
        const take = hours.slice(0, 24);
        for(const h of take){
          const d = document.createElement('div');
          d.className = 'hchip';
          d.innerHTML = `<div class="hr">${h.hr}</div><div class="tv">${h.t}<small>°C</small></div>`;
          grid.appendChild(d);
        }
      }

      function renderChart(times, temps){
        const wrap = $('svgWrap');
        wrap.innerHTML = '';

        const filtered = [];
        for(let i=0;i<times.length;i++){
          filtered.push({ t: times[i], v: temps[i] });
        }

        const w = 980, h = 220; // internal canvas
        const pad = { l: 40, r: 16, t: 18, b: 28 };
        const iw = w - pad.l - pad.r;
        const ih = h - pad.t - pad.b;

        const vals = filtered.map(d => d.v).filter(v => Number.isFinite(v));
        const vmin = Math.min.apply(null, vals);
        const vmax = Math.max.apply(null, vals);
        const span = (Number.isFinite(vmin) && Number.isFinite(vmax)) ? (vmax - vmin) : 1;
        const ymin = Number.isFinite(vmin) ? (vmin - Math.max(1.5, span*0.12)) : 0;
        const ymax = Number.isFinite(vmax) ? (vmax + Math.max(1.5, span*0.12)) : 10;

        function x(i){ return pad.l + (filtered.length<=1 ? 0 : (i/(filtered.length-1))*iw); }
        function y(v){
          const t = (v - ymin) / (ymax - ymin || 1);
          return pad.t + (1 - t) * ih;
        }

        // build path
        let dLine = '';
        let dArea = '';
        for(let i=0;i<filtered.length;i++){
          const v = filtered[i].v;
          const xi = x(i);
          const yi = y(v);
          dLine += (i===0 ? `M ${xi.toFixed(2)} ${yi.toFixed(2)}` : ` L ${xi.toFixed(2)} ${yi.toFixed(2)}`);
        }
        dArea = dLine + ` L ${x(filtered.length-1).toFixed(2)} ${(pad.t+ih).toFixed(2)} L ${x(0).toFixed(2)} ${(pad.t+ih).toFixed(2)} Z`;

        // grid lines (4)
        const gridLines = [];
        const labels = [];
        for(let k=0;k<=4;k++){
          const yy = pad.t + (k/4)*ih;
          const v = ymax - (k/4)*(ymax-ymin);
          gridLines.push(`<path d="M ${pad.l} ${yy.toFixed(2)} H ${(pad.l+iw).toFixed(2)}" stroke="rgba(255,255,255,.07)" stroke-width="1" />`);
          labels.push(`<text x="${(pad.l-10).toFixed(2)}" y="${(yy+4).toFixed(2)}" text-anchor="end" font-size="11" fill="rgba(255,255,255,.50)" font-family="ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace">${fmtNum(v)}</text>`);
        }

        // x labels every 3 hours
        const xLabels = [];
        for(let i=0;i<filtered.length;i++){
          const hr = parseHour(filtered[i].t);
          if(hr % 3 === 0){
            const xi = x(i);
            xLabels.push(`<text x="${xi.toFixed(2)}" y="${(pad.t+ih+18).toFixed(2)}" text-anchor="middle" font-size="11" fill="rgba(255,255,255,.48)" font-family="ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace">${pad2(hr)}</text>`);
          }
        }

        const accent = getComputedStyle(document.documentElement).getPropertyValue('--accent').trim() || '#7aa7ff';

        const svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
        svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
        svg.setAttribute('preserveAspectRatio','none');
        svg.setAttribute('width','100%');
        svg.setAttribute('height','100%');

        svg.innerHTML = `
          <defs>
            <linearGradient id="gArea" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stop-color="${accent}" stop-opacity="0.26"/>
              <stop offset="70%" stop-color="${accent}" stop-opacity="0.08"/>
              <stop offset="100%" stop-color="${accent}" stop-opacity="0.00"/>
            </linearGradient>
            <filter id="glow" x="-40%" y="-40%" width="180%" height="180%">
              <feGaussianBlur stdDeviation="2.8" result="b"/>
              <feMerge>
                <feMergeNode in="b"/>
                <feMergeNode in="SourceGraphic"/>
              </feMerge>
            </filter>
          </defs>

          <rect x="0" y="0" width="${w}" height="${h}" rx="14" ry="14" fill="rgba(0,0,0,0)"/>
          ${gridLines.join('')}
          ${labels.join('')}

          <path d="${dArea}" fill="url(#gArea)" />
          <path d="${dLine}" fill="none" stroke="${accent}" stroke-opacity="0.95" stroke-width="2.2" filter="url(#glow)" />

          ${filtered.map((p,i)=>{
            const xi = x(i), yi = y(p.v);
            const major = (parseHour(p.t) % 6 === 0);
            const r = major ? 3.0 : 2.1;
            const o = major ? 0.95 : 0.62;
            return `<circle cx="${xi.toFixed(2)}" cy="${yi.toFixed(2)}" r="${r}" fill="rgba(255,255,255,${o})" stroke="${accent}" stroke-opacity="0.6" stroke-width="1"/>`;
          }).join('')}

          ${xLabels.join('')}
        `;

        wrap.appendChild(svg);
      }

      function parseHour(timeStr){
        // "YYYY-MM-DDTHH:MM" or "YYYY-MM-DD HH:MM"
        const m = /T(\d{2}):/.exec(timeStr) || / (\d{2}):/.exec(timeStr);
        return m ? Number(m[1]) : 0;
      }

      function showError(msg){
        $('errorBox').style.display = '';
        $('errorMsg').textContent = msg || 'Unknown error.';
        $('sumStatus').textContent = 'Error';
        $('condLabel').textContent = 'Unavailable';
        $('condHint').textContent = 'Could not load weather data';
        $('locName').textContent = '—';
        $('dateLabel').textContent = '—';
        $('maxTemp').textContent = '—';
        $('maxTempSmall').textContent = '—';
        $('minTempSmall').textContent = '—';
        $('sumCond').textContent = '—';
        $('sumMM').textContent = '—';
        $('rangeTxt').textContent = '—';
        $('chartMeta').textContent = '—';
        $('hoursGrid').innerHTML = '';
        $('condIcon').innerHTML = iconCloud();
      }

      function qs(){
        const u = new URL(window.location.href);
        return u.searchParams;
      }

      function safeName(s){
        if(!s) return '';
        return String(s).replace(/\s+/g,' ').trim().slice(0, 80);
      }

      function init(){
        const sp = qs();

        const lat = Number(sp.get('lat') ?? '52.52');
        const lon = Number(sp.get('lon') ?? '13.405');
        const name = safeName(sp.get('name') ?? 'Berlin');

        const d0 = sp.get('date');
        const date = isValidDateStr(d0) ? d0 : todayUTC();

        $('qName').textContent = name || '—';
        $('qLatLon').textContent = `${Number.isFinite(lat)? lat.toFixed(4) : '—'}, ${Number.isFinite(lon)? lon.toFixed(4) : '—'}`;
        $('qDate').textContent = date;

        $('locName').textContent = name || '—';
        $('dateLabel').textContent = fmtDateLong(date);
        $('latLabel').textContent = Number.isFinite(lat) ? lat.toFixed(4) : '—';
        $('lonLabel').textContent = Number.isFinite(lon) ? lon.toFixed(4) : '—';

        if(!Number.isFinite(lat) || !Number.isFinite(lon)){
          showError('Invalid latitude/longitude. Provide numeric query parameters `lat` and `lon`.');
          return;
        }

        const t = todayUTC();
        const which = (cmpDateStr(date, t) < 0) ? 'archive' : 'forecast';
        const endpoint = which === 'archive' ? '/api/om/archive' : '/api/om/forecast';

        const p = 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
        });

        $('sourceBadge').textContent = which === 'archive' ? 'Source: /api/om/archive' : 'Source: /api/om/forecast';

        fetch(endpoint + '?' + p.toString(), {
          method: 'GET',
          headers: { 'Accept': 'application/json' },
          cache: 'no-store'
        }).then(async (res) => {
          if(!res.ok){
            const text = await res.text().catch(()=> '');
            throw new Error(`HTTP ${res.status} ${res.statusText}${text ? ` — ${text.slice(0,180)}` : ''}`);
          }
          return res.json();
        }).then((data) => {
          // Basic validation
          const daily = data && data.daily;
          const hourly = data && data.hourly;

          if(!daily || !hourly){
            throw new Error('Malformed API response: missing `daily` or `hourly`.');
          }

          const dDate = (daily.time && daily.time[0]) || date;
          const tmax = daily.temperature_2m_max && daily.temperature_2m_max[0];
          const tmin = daily.temperature_2m_min && daily.temperature_2m_min[0];
          const wcode = daily.weather_code && daily.weather_code[0];

          const cond = conditionFor(wcode);
          setAccent(cond.accent);
          $('condIcon').innerHTML = cond.icon;
          $('condLabel').textContent = cond.label;
          $('condHint').textContent = cond.hint;

          $('sumCond').textContent = `${cond.label} (code ${Number.isFinite(Number(wcode)) ? wcode : '—'})`;
          $('sumMM').textContent = `${fmtNum(tmax)}°C / ${fmtNum(tmin)}°C`;

          $('maxTemp').textContent = fmtNum(tmax);
          $('maxTempSmall').textContent = fmtNum(tmax);
          $('minTempSmall').textContent = fmtNum(tmin);

          const times = (hourly.time || []);
          const temps = (hourly.temperature_2m || []);

          // Filter exactly selected date in case API returns broader data
          const ft = [];
          const fv = [];
          for(let i=0;i<times.length;i++){
            const ts = String(times[i] || '');
            if(ts.startsWith(date)){
              ft.push(ts);
              fv.push(Number(temps[i]));
            }
          }

          if(ft.length < 6 || fv.length !== ft.length){
            throw new Error('Hourly data missing or incomplete for the selected date.');
          }

          const vals = fv.filter(Number.isFinite);
          const vmin = Math.min.apply(null, vals);
          const vmax = Math.max.apply(null, vals);

          $('chartMeta').textContent = `${date} · ${ft.length} points`;
          $('rangeTxt').textContent = `min ${fmtNum(vmin)}°C · max ${fmtNum(vmax)}°C`;

          // Build hour chips: prefer exactly 24 on-the-hour samples; if more, take first 24 for the day.
          const hours = [];
          for(let i=0;i<ft.length && hours.length<24;i++){
            const hr = parseHour(ft[i]);
            const v = fv[i];
            if(Number.isFinite(hr) && Number.isFinite(v)){
              hours.push({ hr: `${pad2(hr)}:00`, t: fmtNum(v) });
            }
          }
          buildHourChips(hours);

          renderChart(ft.slice(0, hours.length || ft.length), fv.slice(0, hours.length || fv.length));

          $('dateLabel').textContent = fmtDateLong(dDate);
          $('sumStatus').textContent = 'Loaded';
        }).catch((err) => {
          showError(err && err.message ? err.message : String(err));
        });
      }

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

L1 — cheap deterministic descriptors

bytes total	40,063	html / css / js	5,366 / 13,929 / 20,768
dom nodes	100	dom depth	14
css rules	83	js present	yes
brightness	32.6	contrast	16.3
colorfulness	14.7	whitespace	80.1%

This slot's telemetry

prompt tokens	12,137	completion tokens	13,150
total tokens	25,287	wall	153.9 s
cost	—	request id	—

config.json543 B

{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_NONE",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "gpt-5.2--cli--cursor-xl--dev",
  "effort": null,
  "family": "gpt",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "gpt-5.2",
  "protocol": "cli",
  "served_model": "gpt-5.2",
  "telemetry": {
    "completion_tokens": 40890,
    "cost_usd": null,
    "prompt_tokens": 33495,
    "total_tokens": 74385,
    "wall_ms": 545692
  },
  "transport": "cursor-agent-cli-isolated-home",
  "vendor_sanction_ref": null
}

send-log2.5 KB

{
  "N": 2,
  "batch_id": "2026-08-13--cursor-xl-s1",
  "config_id": "gpt-5.2--cli--cursor-xl--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-08-13T08:39:46.466565+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T08:36:52.367922+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-13T08:42:24.490280+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T08:39:50.608020+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-13T08:44:30.994288+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T08:42:28.790320+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-08-13T08:46:10.564611+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T08:44:35.044803+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
    }
  }
}