claude-opus-5-thinking @ xhigh · cursor-xl

cursor-xlxhigh
config
claude-opus-5-thinking-eff-xhigh--cli--cursor-xl--dev
batch
2026-07-19--unified
transport
cursor-agent-cli-isolated-home
protocol
cli · plan
served model
claude-opus-5-thinking-xhigh
captured
Jul 18, 2026, 11:54 AM · N=2
variant
live
slot 0 · P-q · sandboxed iframe
claude-opus-5-thinking @xhigh · 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 neighbors

within session 2026-07-19--unified

similarity measures convergence within this session — not quality.

Fidelity — does the card show the right data?

  • namematch
  • conditionmatch
  • datematch
  • max tempambiguousinsufficient-distinct-temperature-nodes
  • min tempambiguousinsufficient-distinct-temperature-nodes
  • 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=1280, initial-scale=1">
<title>Weather</title>
<style>
  *, *::before, *::after { box-sizing: border-box; }

  :root {
    --c1:#0a1c33; --c2:#123a63; --c3:#2b5f86;
    --g1:rgba(90,170,255,.30); --g2:rgba(30,80,140,.40);
    --accent:#79b8ff;
    --ink:#eef4fb;
    --muted:rgba(238,244,251,.60);
    --faint:rgba(238,244,251,.38);
    --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }

  html, body { height:100%; }

  body {
    margin:0;
    min-height:100vh;
    display:grid;
    place-items:center;
    font-family:var(--font);
    color:var(--ink);
    background:
      radial-gradient(1100px 760px at 10% 4%, var(--g1), transparent 62%),
      radial-gradient(980px 700px at 92% 96%, var(--g2), transparent 60%),
      linear-gradient(158deg, var(--c1) 0%, var(--c2) 54%, var(--c3) 100%);
    background-attachment:fixed;
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    transition: background 900ms ease;
  }

  .blobs { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
  .blob { position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; }
  .blob.a { width:640px; height:640px; left:-140px; top:-200px; background:var(--g1); animation:drift1 34s ease-in-out infinite; }
  .blob.b { width:720px; height:720px; right:-200px; bottom:-260px; background:var(--g2); animation:drift2 42s ease-in-out infinite; }
  @keyframes drift1 { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(90px,70px,0) scale(1.12)} }
  @keyframes drift2 { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-110px,-60px,0) scale(1.08)} }

  .stage { position:relative; z-index:1; width:1280px; padding:0 70px; }

  .card {
    position:relative;
    border-radius:30px;
    padding:30px 38px 26px;
    background:
      linear-gradient(158deg, rgba(255,255,255,.155), rgba(255,255,255,.045) 62%, rgba(255,255,255,.075)),
      rgba(9,15,28,.36);
    border:1px solid rgba(255,255,255,.17);
    box-shadow:
      0 44px 96px -34px rgba(3,8,20,.82),
      0 2px 5px rgba(3,8,20,.28),
      inset 0 1px 0 rgba(255,255,255,.26);
    -webkit-backdrop-filter:blur(28px) saturate(150%);
    backdrop-filter:blur(28px) saturate(150%);
    overflow:hidden;
  }
  .card::before {
    content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
    background:radial-gradient(900px 220px at 22% -12%, rgba(255,255,255,.16), transparent 70%);
  }

  /* ---------- header ---------- */
  .head { position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
  .loc { min-width:0; }
  .loc h1 {
    margin:0; font-size:35px; font-weight:640; letter-spacing:-.025em; line-height:1.08;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:640px;
  }
  .coords { margin-top:7px; font-size:12px; letter-spacing:.075em; color:var(--faint); font-variant-numeric:tabular-nums; text-transform:uppercase; }
  .dateside { text-align:right; flex:none; }
  .chips { display:flex; gap:7px; justify-content:flex-end; margin-bottom:9px; }
  .tag {
    font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:600;
    padding:5px 10px; border-radius:999px; color:var(--ink);
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
  }
  .tag.hi { background:color-mix(in srgb, var(--accent) 26%, transparent); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
  .dow { font-size:21px; font-weight:600; letter-spacing:-.012em; }
  .dfull { font-size:12.5px; color:var(--muted); margin-top:3px; font-variant-numeric:tabular-nums; }

  .rule { height:1px; margin:22px 0 0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.22) 12%, rgba(255,255,255,.22) 88%, transparent); }

  /* ---------- body states ---------- */
  .body { position:relative; min-height:452px; }

  /* ---------- hero ---------- */
  .hero { display:grid; grid-template-columns:158px 1fr 336px; gap:30px; align-items:center; padding:26px 0 4px; }
  .iconbox { width:140px; height:140px; justify-self:center; filter:drop-shadow(0 14px 26px rgba(0,0,0,.42)); }
  .wi { width:100%; height:100%; overflow:visible; display:block; }

  .tline { display:flex; align-items:flex-end; gap:20px; }
  .tcol { display:flex; flex-direction:column; align-items:flex-start; }
  .tlbl { font-size:10.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--faint); font-weight:600; margin-bottom:6px; }
  .t-hi { font-size:98px; line-height:.82; font-weight:600; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
  .t-lo { font-size:52px; line-height:.86; font-weight:500; letter-spacing:-.035em; color:var(--muted); font-variant-numeric:tabular-nums; }
  .tsep { width:1px; align-self:stretch; margin:22px 0 4px; background:linear-gradient(180deg, transparent, rgba(255,255,255,.24), transparent); }
  .unit { font-size:15px; letter-spacing:.14em; color:var(--faint); font-weight:600; padding-bottom:9px; }
  .cond { display:flex; align-items:center; gap:11px; margin-top:20px; font-size:23px; font-weight:560; letter-spacing:-.012em; }
  .dot { width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); flex:none; }

  .stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .stat { background:rgba(255,255,255,.065); border:1px solid rgba(255,255,255,.10); border-radius:15px; padding:11px 13px 12px; }
  .stat .k { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:600; }
  .stat .v { font-size:19px; font-weight:620; margin-top:5px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
  .stat .s { font-size:11.5px; color:var(--muted); margin-top:1px; font-variant-numeric:tabular-nums; }
  .stat.wide { grid-column:1 / -1; }

  /* ---------- hourly ---------- */
  .sec { margin-top:22px; }
  .sechead { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:2px; }
  .sectitle { font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:650; color:rgba(238,244,251,.72); }
  .secnote { font-size:11px; letter-spacing:.09em; color:var(--faint); text-transform:uppercase; font-variant-numeric:tabular-nums; }

  .chartwrap { position:relative; }
  .chartwrap svg { display:block; width:100%; }
  .gridline { stroke:rgba(255,255,255,.10); stroke-width:1; }
  .axis { fill:var(--faint); font-size:10.5px; font-family:var(--font); font-variant-numeric:tabular-nums; letter-spacing:.05em; }
  .tline-path { fill:none; stroke:var(--accent); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 6px 10px color-mix(in srgb, var(--accent) 32%, transparent)); }
  .pt { fill:var(--accent); }
  .anno { font-size:11.5px; font-weight:650; font-family:var(--font); font-variant-numeric:tabular-nums; }
  .nowline { stroke:rgba(255,255,255,.42); stroke-width:1.2; stroke-dasharray:3 4; }

  .tip {
    position:absolute; pointer-events:none; opacity:0; transform:translate(-50%,-118%);
    background:rgba(10,16,28,.92); border:1px solid rgba(255,255,255,.18); border-radius:10px;
    padding:6px 10px; font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums;
    box-shadow:0 10px 24px rgba(0,0,0,.45); transition:opacity .12s ease; z-index:3;
  }
  .tip b { font-size:13px; }
  .tip span { color:var(--faint); }

  .strip { display:grid; gap:5px; margin-top:12px; }
  .chip {
    position:relative; overflow:hidden; text-align:center; border-radius:11px;
    padding:7px 1px 8px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.085);
  }
  .chip::after { content:""; position:absolute; left:5px; right:5px; bottom:0; height:3px; border-radius:3px 3px 0 0; background:var(--hc); }
  .chip .ch { display:block; font-size:10px; letter-spacing:.05em; color:var(--faint); font-variant-numeric:tabular-nums; }
  .chip .ct { display:block; font-size:14px; font-weight:640; margin-top:3px; letter-spacing:-.02em; color:var(--tc); font-variant-numeric:tabular-nums; }
  .chip.peak { background:rgba(255,255,255,.115); border-color:rgba(255,255,255,.24); }
  .chip.now { border-color:rgba(255,255,255,.55); box-shadow:0 0 0 1px rgba(255,255,255,.22); }
  .chip.na .ct { color:var(--faint); }

  .nohourly { margin-top:10px; padding:26px; text-align:center; border-radius:14px; border:1px dashed rgba(255,255,255,.18); color:var(--muted); font-size:13.5px; }

  .foot { display:flex; justify-content:space-between; align-items:center; margin-top:20px; padding-top:14px; border-top:1px solid rgba(255,255,255,.10); font-size:11px; color:var(--faint); letter-spacing:.05em; }
  .foot code { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:10.5px; letter-spacing:0; }

  /* ---------- loading ---------- */
  .skel { padding:26px 0 4px; }
  .skrow { display:grid; grid-template-columns:158px 1fr 336px; gap:30px; align-items:center; }
  .sk { background:linear-gradient(90deg, rgba(255,255,255,.07), rgba(255,255,255,.15), rgba(255,255,255,.07)); background-size:220% 100%; animation:shimmer 1.5s linear infinite; border-radius:12px; }
  .sk.circle { border-radius:50%; width:132px; height:132px; justify-self:center; }
  @keyframes shimmer { to { background-position:-220% 0; } }
  .loadnote { margin-top:34px; text-align:center; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }

  /* ---------- error ---------- */
  .err { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:452px; padding:20px; }
  .errIcon { width:96px; height:96px; margin-bottom:20px; opacity:.9; }
  .err h2 { margin:0; font-size:27px; font-weight:640; letter-spacing:-.02em; }
  .err p { margin:11px 0 0; font-size:14.5px; color:var(--muted); max-width:620px; line-height:1.55; }
  .err .why { margin-top:14px; font-size:11.5px; color:var(--faint); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; max-width:680px; word-break:break-word; line-height:1.7; white-space:pre-line; }
  .retry {
    margin-top:24px; font:inherit; font-size:13.5px; font-weight:600; letter-spacing:.02em; cursor:pointer;
    padding:11px 24px; border-radius:999px; color:var(--ink);
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24);
    transition:background .15s ease, transform .15s ease, border-color .15s ease;
  }
  .retry:hover { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.36); }
  .retry:active { transform:translateY(1px); }
  .retry:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

  [hidden] { display:none !important; }

  /* ---------- icon animation ---------- */
  .rays { transform-box:view-box; animation:spin 30s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }
  .drop { animation:fall 1.5s linear infinite; }
  @keyframes fall { 0%{transform:translateY(-5px);opacity:0} 22%{opacity:1} 78%{opacity:1} 100%{transform:translateY(15px);opacity:0} }
  .flake { animation:flutter 3.2s ease-in-out infinite; transform-box:view-box; }
  @keyframes flutter { 0%{transform:translate(0,-4px);opacity:0} 20%{opacity:1} 80%{opacity:1} 100%{transform:translate(3px,14px);opacity:0} }
  .bolt { animation:flash 3.4s ease-in-out infinite; transform-box:view-box; }
  @keyframes flash { 0%,58%,100%{opacity:.95} 62%{opacity:.25} 66%{opacity:1} 72%{opacity:.4} 76%{opacity:1} }
  .fogline { animation:sway 5s ease-in-out infinite; transform-box:view-box; }
  @keyframes sway { 0%,100%{transform:translateX(-3px)} 50%{transform:translateX(3px)} }
  .puff { animation:bob 9s ease-in-out infinite; transform-box:view-box; }
  @keyframes bob { 0%,100%{transform:translateX(-2px)} 50%{transform:translateX(4px)} }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  }
</style>
</head>
<body>

<div class="blobs" aria-hidden="true"><span class="blob a"></span><span class="blob b"></span></div>

<main class="stage">
  <section class="card">

    <header class="head">
      <div class="loc">
        <h1 id="placeName">—</h1>
        <div class="coords" id="coords">—</div>
      </div>
      <div class="dateside">
        <div class="chips">
          <span class="tag hi" id="tagRel">—</span>
          <span class="tag" id="tagSrc">—</span>
        </div>
        <div class="dow" id="dowText">—</div>
        <div class="dfull" id="dateText">—</div>
      </div>
    </header>

    <div class="rule"></div>

    <div class="body" id="body" aria-live="polite">

      <!-- loading -->
      <div id="loadingView">
        <div class="skel">
          <div class="skrow">
            <div class="sk circle"></div>
            <div>
              <div class="sk" style="width:74%;height:74px"></div>
              <div class="sk" style="width:44%;height:22px;margin-top:20px"></div>
            </div>
            <div>
              <div class="sk" style="height:62px"></div>
              <div class="sk" style="height:62px;margin-top:10px"></div>
            </div>
          </div>
          <div class="sk" style="height:180px;margin-top:34px"></div>
          <div class="sk" style="height:52px;margin-top:14px"></div>
        </div>
        <div class="loadnote">Loading weather…</div>
      </div>

      <!-- error -->
      <div id="errorView" hidden>
        <div class="err">
          <svg class="errIcon" viewBox="0 0 64 64" aria-hidden="true">
            <g fill="rgba(255,255,255,.30)">
              <circle cx="22" cy="32" r="11"/><circle cx="42" cy="31" r="12"/><circle cx="31" cy="24" r="12"/>
              <rect x="11" y="31" width="42" height="12" rx="6"/>
            </g>
            <g stroke="#ffd0d0" stroke-width="3.4" stroke-linecap="round">
              <line x1="24" y1="50" x2="40" y2="62"/><line x1="40" y1="50" x2="24" y2="62"/>
            </g>
          </svg>
          <h2>Weather data couldn’t be loaded</h2>
          <p id="errMsg">The weather service did not return usable data for this location and date.</p>
          <div class="why" id="errWhy"></div>
          <button class="retry" id="retryBtn" type="button">Try again</button>
        </div>
      </div>

      <!-- content -->
      <div id="contentView" hidden>
        <div class="hero">
          <div class="iconbox" id="iconBox" role="img" aria-label="Weather icon"></div>
          <div>
            <div class="tline">
              <div class="tcol">
                <div class="tlbl">High</div>
                <div class="t-hi" id="tHigh">—</div>
              </div>
              <div class="tsep" aria-hidden="true"></div>
              <div class="tcol">
                <div class="tlbl">Low</div>
                <div class="t-lo" id="tLow">—</div>
              </div>
              <div class="unit">°C</div>
            </div>
            <div class="cond"><span class="dot" aria-hidden="true"></span><span id="condText">—</span></div>
          </div>
          <div class="stats" id="stats"></div>
        </div>

        <div class="sec">
          <div class="sechead">
            <div class="sectitle">Hourly temperature</div>
            <div class="secnote" id="hourNote">°C · UTC</div>
          </div>
          <div class="chartwrap" id="chartWrap">
            <div class="tip" id="tip"></div>
          </div>
          <div class="strip" id="strip"></div>
          <div class="nohourly" id="noHourly" hidden>Hourly temperatures are not available for this date.</div>
        </div>
      </div>

    </div>

    <footer class="foot">
      <span id="footLeft">—</span>
      <span id="footRight">Temperatures in degrees Celsius · Times in UTC</span>
    </footer>

  </section>
</main>

<script>
(function () {
  "use strict";

  /* ------------------------------------------------------------------ *
   * Parameters
   * ------------------------------------------------------------------ */
  var qs = new URLSearchParams(location.search);

  function numParam(raw, fallback, lo, hi) {
    var n = parseFloat(raw);
    if (!isFinite(n) || n < lo || n > hi) return fallback;
    return n;
  }
  function isRealDate(s) {
    if (!/^\d{4}-\d{2}-\d{2}$/.test(s)) return false;
    var d = new Date(s + "T00:00:00Z");
    return !isNaN(d.getTime()) && d.toISOString().slice(0, 10) === s;
  }

  var LAT = numParam(qs.get("lat"), 52.52, -90, 90);
  var LON = numParam(qs.get("lon"), 13.405, -180, 180);
  var NAME = (qs.get("name") || "").trim() || "Berlin";
  var TODAY = new Date().toISOString().slice(0, 10);
  var rawDate = (qs.get("date") || "").trim();
  var DATE = isRealDate(rawDate) ? rawDate : TODAY;

  var IS_PAST = DATE < TODAY;
  var IS_TODAY = DATE === TODAY;
  var ENDPOINT = IS_PAST ? "/api/om/archive" : "/api/om/forecast";

  /* ------------------------------------------------------------------ *
   * Weather codes + themes
   * ------------------------------------------------------------------ */
  var WMO = {
    0:["Clear sky","clear"], 1:["Mainly clear","partly"], 2:["Partly cloudy","partly"], 3:["Overcast","overcast"],
    45:["Fog","fog"], 48:["Depositing rime fog","fog"],
    51:["Light drizzle","drizzle"], 53:["Moderate drizzle","drizzle"], 55:["Dense drizzle","drizzle"],
    56:["Light freezing drizzle","drizzle"], 57:["Dense freezing drizzle","drizzle"],
    61:["Slight rain","rain"], 63:["Moderate rain","rain"], 65:["Heavy rain","rain"],
    66:["Light freezing rain","rain"], 67:["Heavy freezing rain","rain"],
    71:["Slight snowfall","snow"], 73:["Moderate snowfall","snow"], 75:["Heavy snowfall","snow"], 77:["Snow grains","snow"],
    80:["Slight rain showers","rain"], 81:["Moderate rain showers","rain"], 82:["Violent rain showers","rain"],
    85:["Slight snow showers","snow"], 86:["Heavy snow showers","snow"],
    95:["Thunderstorm","thunder"], 96:["Thunderstorm with slight hail","thunder"], 99:["Thunderstorm with heavy hail","thunder"]
  };

  var THEMES = {
    clear:    { c1:"#06213f", c2:"#14548f", c3:"#b8763c", g1:"rgba(72,158,255,.30)", g2:"rgba(255,182,92,.34)", accent:"#ffcb73" },
    partly:   { c1:"#0a2544", c2:"#1b5b93", c3:"#7aa6cb", g1:"rgba(255,255,255,.24)", g2:"rgba(70,160,255,.34)", accent:"#a6dbff" },
    overcast: { c1:"#18222e", c2:"#374858", c3:"#69798c", g1:"rgba(255,255,255,.17)", g2:"rgba(120,150,180,.30)", accent:"#cfdcea" },
    fog:      { c1:"#212831", c2:"#48535e", c3:"#89929d", g1:"rgba(255,255,255,.20)", g2:"rgba(160,172,188,.28)", accent:"#dee4ec" },
    drizzle:  { c1:"#092233", c2:"#114e69", c3:"#387d95", g1:"rgba(118,230,224,.28)", g2:"rgba(38,118,168,.36)", accent:"#86e7e2" },
    rain:     { c1:"#0a1c33", c2:"#123a63", c3:"#2b5f86", g1:"rgba(90,170,255,.30)", g2:"rgba(30,80,140,.40)", accent:"#79b8ff" },
    snow:     { c1:"#142a3d", c2:"#2e5c7f", c3:"#8db5ce", g1:"rgba(255,255,255,.30)", g2:"rgba(140,190,225,.30)", accent:"#e2f2ff" },
    thunder:  { c1:"#110b24", c2:"#2b1b50", c3:"#4a3978", g1:"rgba(192,152,255,.30)", g2:"rgba(255,214,102,.18)", accent:"#cbaaff" },
    unknown:  { c1:"#12202e", c2:"#2a3f55", c3:"#54697f", g1:"rgba(255,255,255,.16)", g2:"rgba(110,140,175,.30)", accent:"#bcd0e4" }
  };

  function applyTheme(group) {
    var t = THEMES[group] || THEMES.unknown;
    var r = document.documentElement.style;
    r.setProperty("--c1", t.c1); r.setProperty("--c2", t.c2); r.setProperty("--c3", t.c3);
    r.setProperty("--g1", t.g1); r.setProperty("--g2", t.g2);
    r.setProperty("--accent", t.accent);
  }

  /* ------------------------------------------------------------------ *
   * Icons
   * ------------------------------------------------------------------ */
  function cloud(tx, ty, s, fill, op, cls) {
    return '<g class="' + (cls || "") + '" transform="translate(' + tx + ' ' + ty + ') scale(' + s + ')" fill="' + fill + '" opacity="' + op + '">' +
      '<circle cx="22" cy="34" r="11"/><circle cx="42" cy="33" r="12"/><circle cx="31" cy="26" r="12"/>' +
      '<rect x="11" y="33" width="42" height="12" rx="6"/></g>';
  }
  function sun(cx, cy, r, rayIn, rayOut, sw) {
    var rays = "";
    for (var i = 0; i < 8; i++) {
      var a = i * Math.PI / 4;
      rays += '<line x1="' + (cx + Math.cos(a) * rayIn).toFixed(2) + '" y1="' + (cy + Math.sin(a) * rayIn).toFixed(2) +
              '" x2="' + (cx + Math.cos(a) * rayOut).toFixed(2) + '" y2="' + (cy + Math.sin(a) * rayOut).toFixed(2) + '"/>';
    }
    return '<g class="rays" style="transform-origin:' + cx + 'px ' + cy + 'px" stroke="#ffd489" stroke-width="' + sw + '" stroke-linecap="round" opacity=".92">' + rays + '</g>' +
           '<circle cx="' + cx + '" cy="' + cy + '" r="' + r + '" fill="url(#sunG)"/>';
  }
  var SUN_DEFS = '<defs><radialGradient id="sunG" cx="34%" cy="30%" r="78%">' +
    '<stop offset="0" stop-color="#fff6d2"/><stop offset="1" stop-color="#ffb242"/></radialGradient>' +
    '<linearGradient id="cldG" x1="0" y1="0" x2="0" y2="1">' +
    '<stop offset="0" stop-color="#ffffff"/><stop offset="1" stop-color="#d3e2f2"/></linearGradient></defs>';

  function drops(color, n, y0, len, slant) {
    var out = "";
    for (var i = 0; i < n; i++) {
      var x = 19 + i * (26 / Math.max(1, n - 1));
      out += '<line class="drop" style="animation-delay:' + (i * 0.22).toFixed(2) + 's" x1="' + x.toFixed(1) + '" y1="' + y0 +
             '" x2="' + (x - slant).toFixed(1) + '" y2="' + (y0 + len) + '" stroke="' + color +
             '" stroke-width="3" stroke-linecap="round"/>';
    }
    return out;
  }

  function iconFor(group) {
    var inner;
    switch (group) {
      case "clear":
        inner = sun(32, 32, 13.5, 19, 26, 3.6);
        break;
      case "partly":
        inner = sun(23, 20, 10, 14, 20, 3) + cloud(9, 14, 0.8, "url(#cldG)", 1, "puff");
        break;
      case "overcast":
        inner = cloud(-2, -4, 0.72, "#ffffff", 0.42, "puff") + cloud(4, 8, 0.92, "url(#cldG)", 1, "");
        break;
      case "fog":
        inner = cloud(5, -6, 0.82, "url(#cldG)", 0.95, "") +
          '<g stroke="#e6eef7" stroke-width="3.2" stroke-linecap="round" opacity=".8">' +
          '<line class="fogline" x1="14" y1="43" x2="48" y2="43"/>' +
          '<line class="fogline" style="animation-delay:-1.6s" x1="19" y1="51" x2="52" y2="51"/>' +
          '<line class="fogline" style="animation-delay:-3.1s" x1="13" y1="59" x2="43" y2="59"/></g>';
        break;
      case "drizzle":
        inner = cloud(5, -8, 0.86, "url(#cldG)", 1, "") + drops("#8ee6e1", 4, 40, 8, 2);
        break;
      case "rain":
        inner = cloud(5, -8, 0.86, "url(#cldG)", 1, "") + drops("#8cc4ff", 4, 39, 13, 3);
        break;
      case "snow": {
        var flakes = "";
        for (var i = 0; i < 3; i++) {
          var cx = 22 + i * 10, cy = 47 + (i % 2) * 6;
          flakes += '<g class="flake" style="animation-delay:' + (i * 0.9).toFixed(1) + 's" stroke="#ffffff" stroke-width="2.1" stroke-linecap="round" opacity=".95">' +
            '<line x1="' + (cx - 4) + '" y1="' + cy + '" x2="' + (cx + 4) + '" y2="' + cy + '"/>' +
            '<line x1="' + cx + '" y1="' + (cy - 4) + '" x2="' + cx + '" y2="' + (cy + 4) + '"/>' +
            '<line x1="' + (cx - 3) + '" y1="' + (cy - 3) + '" x2="' + (cx + 3) + '" y2="' + (cy + 3) + '"/>' +
            '<line x1="' + (cx + 3) + '" y1="' + (cy - 3) + '" x2="' + (cx - 3) + '" y2="' + (cy + 3) + '"/></g>';
        }
        inner = cloud(5, -9, 0.86, "url(#cldG)", 1, "") + flakes;
        break;
      }
      case "thunder":
        inner = cloud(5, -10, 0.86, "#cdd6e6", 1, "") +
          '<path class="bolt" d="M34 33 L24 50 H31 L27 63 L42 44 H34 L39 33 Z" fill="#ffd766" ' +
          'stroke="#fff0bd" stroke-width="1" stroke-linejoin="round"/>';
        break;
      default:
        inner = cloud(4, 2, 0.95, "url(#cldG)", 0.85, "puff") +
          '<text x="32" y="60" text-anchor="middle" font-size="13" fill="rgba(255,255,255,.6)" font-family="' +
          'ui-sans-serif, system-ui, sans-serif">?</text>';
    }
    return '<svg class="wi" viewBox="0 0 64 64" aria-hidden="true">' + SUN_DEFS + inner + "</svg>";
  }

  /* ------------------------------------------------------------------ *
   * Helpers
   * ------------------------------------------------------------------ */
  var $ = function (id) { return document.getElementById(id); };

  function r0(n) { return Math.round(n); }
  function r1(n) { return (Math.round(n * 10) / 10).toFixed(1); }
  function deg(n) { return r0(n) + "\u00B0"; }
  function pad2(n) { return (n < 10 ? "0" : "") + n; }

  function coordLabel(lat, lon) {
    return Math.abs(lat).toFixed(3) + "\u00B0" + (lat >= 0 ? "N" : "S") + "  \u00B7  " +
           Math.abs(lon).toFixed(3) + "\u00B0" + (lon >= 0 ? "E" : "W");
  }

  function relativeLabel() {
    var a = Date.UTC(+DATE.slice(0, 4), +DATE.slice(5, 7) - 1, +DATE.slice(8, 10));
    var b = Date.UTC(+TODAY.slice(0, 4), +TODAY.slice(5, 7) - 1, +TODAY.slice(8, 10));
    var d = Math.round((a - b) / 86400000);
    if (d === 0) return "Today";
    if (d === 1) return "Tomorrow";
    if (d === -1) return "Yesterday";
    return d > 0 ? "In " + d + " days" : Math.abs(d) + " days ago";
  }

  var HEAT = [
    [-30, [72, 86, 214]], [-15, [58, 122, 226]], [-5, [64, 168, 226]], [3, [72, 200, 206]],
    [10, [84, 202, 160]], [17, [186, 208, 96]], [23, [248, 192, 78]], [30, [246, 138, 62]], [38, [236, 74, 74]]
  ];
  function heat(t) {
    if (t <= HEAT[0][0]) return HEAT[0][1].slice();
    if (t >= HEAT[HEAT.length - 1][0]) return HEAT[HEAT.length - 1][1].slice();
    for (var i = 0; i < HEAT.length - 1; i++) {
      var a = HEAT[i], b = HEAT[i + 1];
      if (t >= a[0] && t <= b[0]) {
        var f = (t - a[0]) / (b[0] - a[0]);
        return [0, 1, 2].map(function (k) { return Math.round(a[1][k] + (b[1][k] - a[1][k]) * f); });
      }
    }
    return [200, 200, 200];
  }
  function rgb(c) { return "rgb(" + c[0] + "," + c[1] + "," + c[2] + ")"; }
  function lighten(c, f) {
    return rgb([0, 1, 2].map(function (k) { return Math.round(c[k] + (255 - c[k]) * f); }));
  }

  /* ------------------------------------------------------------------ *
   * Static header
   * ------------------------------------------------------------------ */
  var dObj = new Date(DATE + "T00:00:00Z");
  var dow = dObj.toLocaleDateString("en-GB", { weekday: "long", timeZone: "UTC" });
  var dFull = dObj.toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric", timeZone: "UTC" });

  $("placeName").textContent = NAME;
  $("coords").textContent = coordLabel(LAT, LON);
  $("dowText").textContent = dow;
  $("dateText").textContent = dFull + "  \u00B7  " + DATE;
  $("tagRel").textContent = relativeLabel();
  $("tagSrc").textContent = IS_PAST ? "Archive" : "Forecast";
  $("footLeft").innerHTML = "Source: <code>" + ENDPOINT + "</code>";
  document.title = NAME + " \u00B7 " + DATE + " \u00B7 Weather";

  /* ------------------------------------------------------------------ *
   * Chart
   * ------------------------------------------------------------------ */
  function niceStep(range) {
    var raw = range / 5;
    var cands = [1, 2, 2.5, 5, 10, 20, 25, 50, 100];
    var p = Math.pow(10, Math.floor(Math.log10(Math.max(raw, 1e-6))) - 1);
    for (var k = p; k <= p * 1000; k *= 10) {
      for (var i = 0; i < cands.length; i++) {
        if (cands[i] * k >= raw) return cands[i] * k;
      }
    }
    return raw;
  }

  function monotonePath(P) {
    var n = P.length, i;
    if (n < 2) return "";
    var dx = [], sl = [], m = [];
    for (i = 0; i < n - 1; i++) { dx[i] = P[i + 1].x - P[i].x; sl[i] = (P[i + 1].y - P[i].y) / dx[i]; }
    m[0] = sl[0];
    for (i = 1; i < n - 1; i++) {
      if (sl[i - 1] * sl[i] <= 0) { m[i] = 0; }
      else {
        var avg = (sl[i - 1] + sl[i]) / 2;
        var lim = 3 * Math.min(Math.abs(sl[i - 1]), Math.abs(sl[i]));
        m[i] = (avg < 0 ? -1 : 1) * Math.min(Math.abs(avg), lim);
      }
    }
    m[n - 1] = sl[n - 2];
    var d = "M" + P[0].x.toFixed(2) + " " + P[0].y.toFixed(2);
    for (i = 0; i < n - 1; i++) {
      var h = dx[i] / 3;
      d += " C" + (P[i].x + h).toFixed(2) + " " + (P[i].y + m[i] * h).toFixed(2) + " " +
           (P[i + 1].x - h).toFixed(2) + " " + (P[i + 1].y - m[i + 1] * h).toFixed(2) + " " +
           P[i + 1].x.toFixed(2) + " " + P[i + 1].y.toFixed(2);
    }
    return d;
  }

  function renderChart(points, maxIdx, minIdx) {
    var wrap = $("chartWrap");
    var W = Math.max(560, Math.round(wrap.clientWidth || 1064));
    var H = 196, padL = 40, padR = 16, padT = 30, padB = 26;
    var iw = W - padL - padR, ih = H - padT - padB;

    var temps = points.map(function (p) { return p.t; });
    var lo = Math.min.apply(null, temps), hi = Math.max.apply(null, temps);
    if (hi - lo < 4) { var mid = (hi + lo) / 2; lo = mid - 2; hi = mid + 2; }
    var pad = (hi - lo) * 0.20;
    lo -= pad; hi += pad;

    var X = function (h) { return padL + (h / 23) * iw; };
    var Y = function (t) { return padT + ih - ((t - lo) / (hi - lo)) * ih; };

    var svg = '<svg viewBox="0 0 ' + W + " " + H + '" width="' + W + '" height="' + H + '" role="img" ' +
      'aria-label="Hourly temperature chart for ' + DATE + '">' +
      '<defs><linearGradient id="areaG" x1="0" y1="0" x2="0" y2="1">' +
      '<stop offset="0" stop-color="var(--accent)" stop-opacity=".46"/>' +
      '<stop offset=".55" stop-color="var(--accent)" stop-opacity=".16"/>' +
      '<stop offset="1" stop-color="var(--accent)" stop-opacity="0"/></linearGradient></defs>';

    // gridlines
    var step = niceStep(hi - lo);
    for (var v = Math.ceil(lo / step) * step; v <= hi + 1e-9; v += step) {
      var y = Y(v);
      svg += '<line class="gridline" x1="' + padL + '" y1="' + y.toFixed(1) + '" x2="' + (W - padR) + '" y2="' + y.toFixed(1) + '"/>';
      svg += '<text class="axis" x="' + (padL - 9) + '" y="' + (y + 3.5).toFixed(1) + '" text-anchor="end">' + r0(v) + "\u00B0</text>";
    }

    // x labels
    for (var h = 0; h <= 23; h += 3) {
      svg += '<text class="axis" x="' + X(h).toFixed(1) + '" y="' + (H - 6) + '" text-anchor="middle">' + pad2(h) + "</text>";
    }

    var P = points.map(function (p) { return { x: X(p.h), y: Y(p.t) }; });

    if (P.length > 1) {
      var line = monotonePath(P);
      svg += '<path d="' + line + " L" + P[P.length - 1].x.toFixed(2) + " " + (padT + ih) +
        " L" + P[0].x.toFixed(2) + " " + (padT + ih) + ' Z" fill="url(#areaG)"/>';
      svg += '<path class="tline-path" d="' + line + '"/>';
    }

    // now marker
    if (IS_TODAY) {
      var nowH = new Date().getUTCHours() + new Date().getUTCMinutes() / 60;
      if (nowH >= 0 && nowH <= 23) {
        var nx = X(nowH);
        svg += '<line class="nowline" x1="' + nx.toFixed(1) + '" y1="' + (padT - 8) + '" x2="' + nx.toFixed(1) + '" y2="' + (padT + ih) + '"/>';
        svg += '<text class="axis" x="' + nx.toFixed(1) + '" y="' + (padT - 13) + '" text-anchor="middle" fill="rgba(238,244,251,.62)">NOW</text>';
      }
    }

    // extreme markers
    [[maxIdx, -14, "middle"], [minIdx, 20, "middle"]].forEach(function (m) {
      var i = m[0];
      if (i < 0 || !P[i]) return;
      var px = P[i].x, py = P[i].y;
      var tx = Math.min(Math.max(px, padL + 14), W - padR - 14);
      svg += '<circle cx="' + px.toFixed(1) + '" cy="' + py.toFixed(1) + '" r="6.5" fill="var(--accent)" opacity=".22"/>';
      svg += '<circle class="pt" cx="' + px.toFixed(1) + '" cy="' + py.toFixed(1) + '" r="3.6" stroke="rgba(10,16,28,.55)" stroke-width="1.4"/>';
      svg += '<text class="anno" x="' + tx.toFixed(1) + '" y="' + (py + m[1]).toFixed(1) + '" text-anchor="' + m[2] +
        '" fill="var(--ink)">' + deg(points[i].t) + "</text>";
    });

    // hover layer
    svg += '<g id="hoverG" opacity="0">' +
      '<line id="hoverLine" class="nowline" stroke="rgba(255,255,255,.55)" stroke-dasharray="2 3" x1="0" y1="' + padT + '" x2="0" y2="' + (padT + ih) + '"/>' +
      '<circle id="hoverDot" r="5" fill="var(--accent)" stroke="rgba(10,16,28,.7)" stroke-width="2" cx="0" cy="0"/></g>';
    svg += '<rect id="hitArea" x="' + padL + '" y="' + padT + '" width="' + iw + '" height="' + ih + '" fill="transparent" style="cursor:crosshair"/>';
    svg += "</svg>";

    var tip = $("tip");
    wrap.innerHTML = svg;
    wrap.appendChild(tip);

    var hit = wrap.querySelector("#hitArea");
    var hg = wrap.querySelector("#hoverG");
    var hl = wrap.querySelector("#hoverLine");
    var hd = wrap.querySelector("#hoverDot");
    if (!hit) return;

    hit.addEventListener("mousemove", function (e) {
      var rect = wrap.getBoundingClientRect();
      var scale = W / rect.width;
      var mx = (e.clientX - rect.left) * scale;
      var best = 0, bd = Infinity;
      for (var i = 0; i < P.length; i++) {
        var d = Math.abs(P[i].x - mx);
        if (d < bd) { bd = d; best = i; }
      }
      var p = P[best], pt = points[best];
      hg.setAttribute("opacity", "1");
      hl.setAttribute("x1", p.x); hl.setAttribute("x2", p.x);
      hd.setAttribute("cx", p.x); hd.setAttribute("cy", p.y);
      tip.innerHTML = "<b>" + deg(pt.t) + "C</b> <span>at " + pad2(pt.h) + ":00 UTC</span>";
      tip.style.left = (p.x / scale) + "px";
      tip.style.top = (p.y / scale) + "px";
      tip.style.opacity = "1";
    });
    hit.addEventListener("mouseleave", function () {
      hg.setAttribute("opacity", "0");
      tip.style.opacity = "0";
    });
  }

  /* ------------------------------------------------------------------ *
   * Views
   * ------------------------------------------------------------------ */
  function show(view) {
    $("loadingView").hidden = view !== "loading";
    $("errorView").hidden = view !== "error";
    $("contentView").hidden = view !== "content";
  }

  function showError(message, detail) {
    $("errMsg").textContent = message;
    $("errWhy").textContent = detail || "";
    show("error");
  }

  /* ------------------------------------------------------------------ *
   * Render
   * ------------------------------------------------------------------ */
  function render(data) {
    var daily = data.daily || {};
    var pick = function (arr) { return Array.isArray(arr) && arr.length ? arr[0] : null; };

    var tmax = pick(daily.temperature_2m_max);
    var tmin = pick(daily.temperature_2m_min);
    var code = pick(daily.weather_code);

    var hourly = data.hourly || {};
    var times = Array.isArray(hourly.time) ? hourly.time : [];
    var vals = Array.isArray(hourly.temperature_2m) ? hourly.temperature_2m : [];

    function collect(onlyDate) {
      var out = [];
      for (var i = 0; i < times.length; i++) {
        var ts = String(times[i]);
        if (onlyDate && ts.slice(0, 10) !== DATE) continue;
        var hh = parseInt(ts.slice(11, 13), 10);
        if (!isFinite(hh)) hh = out.length;
        var t = typeof vals[i] === "number" && isFinite(vals[i]) ? vals[i] : null;
        out.push({ h: hh, t: t });
      }
      return out;
    }
    var series = collect(true);
    if (!series.length) series = collect(false).slice(0, 24);
    series.sort(function (a, b) { return a.h - b.h; });

    var valid = series.filter(function (p) { return p.t !== null; });

    var hasDaily = typeof tmax === "number" && isFinite(tmax) && typeof tmin === "number" && isFinite(tmin);
    if (!hasDaily && valid.length === 0) {
      showError(
        "The weather service responded, but returned no temperature values for " + NAME + " on " + DATE + ".",
        "Empty daily and hourly series\n" + ENDPOINT + " \u00B7 " + LAT + ", " + LON + " \u00B7 " + DATE
      );
      return;
    }
    if (!hasDaily) {
      var tv = valid.map(function (p) { return p.t; });
      tmax = Math.max.apply(null, tv);
      tmin = Math.min.apply(null, tv);
    }

    var info = WMO[code] || null;
    var label = info ? info[0] : "Condition not reported";
    var group = info ? info[1] : "unknown";
    applyTheme(group);

    $("iconBox").innerHTML = iconFor(group);
    $("iconBox").setAttribute("aria-label", label);
    $("tHigh").textContent = deg(tmax);
    $("tLow").textContent = deg(tmin);
    $("condText").textContent = label;

    // stats
    var stats = "";
    if (valid.length) {
      var maxP = valid[0], minP = valid[0], sum = 0;
      valid.forEach(function (p) {
        if (p.t > maxP.t) maxP = p;
        if (p.t < minP.t) minP = p;
        sum += p.t;
      });
      var avg = sum / valid.length;
      stats =
        card("Warmest hour", pad2(maxP.h) + ":00", deg(maxP.t) + "C") +
        card("Coolest hour", pad2(minP.h) + ":00", deg(minP.t) + "C") +
        card("Day average", r1(avg) + "\u00B0C", valid.length + " hourly readings") +
        card("Day swing", r1(tmax - tmin) + "\u00B0C", "high minus low");
    } else {
      stats = card("Day swing", r1(tmax - tmin) + "\u00B0C", "high minus low", true);
    }
    $("stats").innerHTML = stats;

    function card(k, v, s, wide) {
      return '<div class="stat' + (wide ? " wide" : "") + '"><div class="k">' + k + '</div><div class="v">' + v +
        '</div><div class="s">' + s + "</div></div>";
    }

    // hourly strip + chart
    var strip = $("strip");
    if (series.length === 0) {
      $("chartWrap").style.display = "none";
      strip.style.display = "none";
      $("noHourly").hidden = false;
      $("hourNote").textContent = "unavailable";
    } else {
      $("chartWrap").style.display = "";
      strip.style.display = "";
      $("noHourly").hidden = true;
      $("hourNote").textContent = series.length + " readings \u00B7 \u00B0C \u00B7 UTC";

      var hotIdx = -1, coldIdx = -1;
      series.forEach(function (p, i) {
        if (p.t === null) return;
        if (hotIdx < 0 || p.t > series[hotIdx].t) hotIdx = i;
        if (coldIdx < 0 || p.t < series[coldIdx].t) coldIdx = i;
      });

      var nowHour = IS_TODAY ? new Date().getUTCHours() : -1;
      strip.style.gridTemplateColumns = "repeat(" + series.length + ", minmax(0, 1fr))";
      strip.innerHTML = series.map(function (p, i) {
        if (p.t === null) {
          return '<div class="chip na" style="--hc:rgba(255,255,255,.18);--tc:var(--faint)">' +
            '<span class="ch">' + pad2(p.h) + '</span><span class="ct">\u2013</span></div>';
        }
        var c = heat(p.t);
        var cls = "chip" + (i === hotIdx || i === coldIdx ? " peak" : "") + (p.h === nowHour ? " now" : "");
        return '<div class="' + cls + '" style="--hc:' + rgb(c) + ";--tc:" + lighten(c, 0.42) + '" title="' +
          pad2(p.h) + ":00 UTC \u2014 " + r1(p.t) + '\u00B0C"><span class="ch">' + pad2(p.h) +
          '</span><span class="ct">' + deg(p.t) + "</span></div>";
      }).join("");
    }

    show("content");

    if (valid.length) {
      var chartPts = valid.slice();
      var mi = 0, ni = 0;
      chartPts.forEach(function (p, i) {
        if (p.t > chartPts[mi].t) mi = i;
        if (p.t < chartPts[ni].t) ni = i;
      });
      renderChart(chartPts, mi, ni);
      window.__redraw = function () { renderChart(chartPts, mi, ni); };
    } else {
      $("chartWrap").innerHTML = "";
      $("chartWrap").style.display = "none";
      $("noHourly").hidden = false;
      window.__redraw = null;
    }
  }

  /* ------------------------------------------------------------------ *
   * Load
   * ------------------------------------------------------------------ */
  function buildUrl() {
    var p = new URLSearchParams();
    p.set("latitude", String(LAT));
    p.set("longitude", String(LON));
    p.set("daily", "temperature_2m_max,temperature_2m_min,weather_code");
    p.set("hourly", "temperature_2m");
    p.set("timezone", "UTC");
    p.set("temperature_unit", "celsius");
    p.set("start_date", DATE);
    p.set("end_date", DATE);
    return ENDPOINT + "?" + p.toString();
  }

  function tagged(userMessage, detail) {
    var e = new Error(userMessage);
    e.userMessage = userMessage;
    e.detail = detail;
    return e;
  }

  function load() {
    show("loading");
    var url = buildUrl();

    var timer = setTimeout(function () { if (ctrl) ctrl.abort(); }, 20000);
    var ctrl = null;
    try { ctrl = new AbortController(); } catch (e) { ctrl = null; }

    fetch(url, { signal: ctrl ? ctrl.signal : undefined, headers: { accept: "application/json" } })
      .then(function (res) {
        return res.text().then(function (text) {
          var json = null;
          try { json = JSON.parse(text); } catch (e) { json = null; }
          if (!res.ok) {
            var reason = json && json.reason ? json.reason : text.slice(0, 180).replace(/\s+/g, " ").trim();
            throw tagged("The weather service responded with an error (HTTP " + res.status + ").",
              reason || "No further detail was provided.");
          }
          if (!json) throw tagged("The weather service returned a response that could not be read.",
            "Expected JSON, received " + (text.length ? text.slice(0, 120).replace(/\s+/g, " ").trim() : "an empty body"));
          if (json.error) throw tagged("The weather service reported a problem with the request.",
            String(json.reason || "No reason given."));
          return json;
        });
      })
      .then(function (json) {
        clearTimeout(timer);
        try {
          render(json);
        } catch (e) {
          showError("The weather data could not be interpreted.",
            String(e && e.message ? e.message : e) + "\n" + ENDPOINT + " \u00B7 " + DATE);
        }
      })
      .catch(function (err) {
        clearTimeout(timer);
        var msg = err && err.userMessage
          ? err.userMessage
          : (err && err.name === "AbortError")
            ? "The request to the weather service timed out."
            : "The weather service could not be reached.";
        showError(
          msg + " No temperatures can be shown for " + NAME + " on " + DATE + ".",
          (err && (err.detail || err.message) ? err.detail || err.message : "") +
          "\n" + ENDPOINT + " \u00B7 " + LAT + ", " + LON + " \u00B7 " + DATE
        );
      });
  }

  $("retryBtn").addEventListener("click", load);

  var rt = null;
  window.addEventListener("resize", function () {
    clearTimeout(rt);
    rt = setTimeout(function () { if (window.__redraw) window.__redraw(); }, 140);
  });

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

L1 — cheap deterministic descriptors

bytes total42,680html / css / js4,075 / 12,083 / 26,522
dom nodes81dom depth11
css rules122js presentyes
brightness72.1contrast20.6
colorfulness35.0whitespace82.8%

This slot's telemetry

prompt tokens112completion tokens79,727
total tokens79,839wall1,309.6 s
cost—request id—
config.json611 B
{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_NONE",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "claude-opus-5-thinking-eff-xhigh--cli--cursor-xl--dev",
  "effort": "xhigh",
  "family": "claude",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "claude-opus-5-thinking",
  "protocol": "cli",
  "served_model": "claude-opus-5-thinking-xhigh",
  "telemetry": {
    "completion_tokens": 210801,
    "cost_usd": null,
    "prompt_tokens": 258,
    "total_tokens": 211059,
    "wall_ms": 3059163
  },
  "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": "claude-opus-5-thinking-eff-xhigh--cli--cursor-xl--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-08-13T10:24:10.344963+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T10:02:20.694329+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-13T10:32:56.251654+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T10:24:15.099896+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-13T10:37:26.758589+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T10:32:59.989402+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-13T10:53:31.904386+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T10:37:30.240427+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
    }
  }
}