claude-opus-5 @ high · cursor

cursorhigh
config
claude-opus-5-eff-high--cli--cursor--dev
batch
2026-07-19--unified
transport
cursor-agent-cli-isolated-home
protocol
cli · plan
served model
claude-opus-5-high
captured
Jul 18, 2026, 11:54 AM · N=2
variant
live
slot 0 · P-q · sandboxed iframe
claude-opus-5 @high · cursor P-q slot 0 screenshot

non-deterministic render — re-rendering the same input yields different pixels (random or time-dependent content), so the visual channels read this card less stably than the others.

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 Card</title>
<style>
  *, *::before, *::after { box-sizing: border-box; }

  :root {
    --g1: #0d2b57;
    --g2: #2a6bb0;
    --g3: #6fa8d6;
    --accent: #ffd275;
    --ink: #f4f8ff;
    --ink-dim: rgba(244, 248, 255, 0.66);
    --ink-faint: rgba(244, 248, 255, 0.4);
    --stroke: rgba(255, 255, 255, 0.16);
    --glass: rgba(255, 255, 255, 0.085);
  }

  html, body { height: 100%; margin: 0; }

  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: var(--g1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
  }

  /* ---------- ambient background ---------- */
  .bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(165deg, var(--g1) 0%, var(--g2) 62%, var(--g3) 100%); transition: background 700ms ease; }
  .bg::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
    background-size: 3px 3px; opacity: .22; mix-blend-mode: overlay;
  }
  .blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; will-change: transform; }
  .blob.a { width: 620px; height: 620px; top: -240px; left: -140px; background: var(--accent); opacity: .3; animation: drift1 26s ease-in-out infinite alternate; }
  .blob.b { width: 520px; height: 520px; bottom: -220px; right: -120px; background: #ffffff; opacity: .16; animation: drift2 32s ease-in-out infinite alternate; }
  .blob.c { width: 420px; height: 420px; top: 40%; right: 22%; background: var(--g3); opacity: .28; animation: drift3 38s ease-in-out infinite alternate; }
  @keyframes drift1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(90px,60px,0) scale(1.12); } }
  @keyframes drift2 { from { transform: translate3d(0,0,0) scale(1.05); } to { transform: translate3d(-80px,-50px,0) scale(1); } }
  @keyframes drift3 { from { transform: translate3d(0,0,0); } to { transform: translate3d(-60px,70px,0); } }

  /* ---------- card ---------- */
  .card {
    position: relative; z-index: 1;
    width: 1120px; min-height: 692px;
    padding: 38px 40px 34px;
    border-radius: 30px;
    background: var(--glass);
    border: 1px solid var(--stroke);
    box-shadow: 0 42px 90px -30px rgba(3, 12, 30, .72), inset 0 1px 0 rgba(255,255,255,.22);
    backdrop-filter: blur(34px) saturate(150%);
    -webkit-backdrop-filter: blur(34px) saturate(150%);
    display: flex; flex-direction: column;
    animation: rise 720ms cubic-bezier(.2,.8,.25,1) both;
  }
  @keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.99); } to { opacity: 1; transform: none; } }

  /* ---------- header ---------- */
  .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
  .loc { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .loc svg { flex: none; width: 22px; height: 22px; opacity: .8; }
  .loc h1 { margin: 0; font-size: 34px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 560px; }
  .coords { margin-top: 5px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
  .when { text-align: right; }
  .when .d { font-size: 17px; font-weight: 500; color: var(--ink-dim); letter-spacing: .01em; }
  .when .iso { margin-top: 4px; font-size: 12.5px; letter-spacing: .1em; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
  .chip {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
    padding: 5px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
    letter-spacing: .11em; text-transform: uppercase;
    background: rgba(255,255,255,.12); border: 1px solid var(--stroke); color: var(--ink-dim);
  }
  .chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }

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

  /* ---------- hero ---------- */
  .hero { display: flex; align-items: center; gap: 44px; padding: 30px 4px 34px; }
  .icon { flex: none; width: 168px; height: 168px; filter: drop-shadow(0 14px 26px rgba(0,0,0,.32)); }
  .icon svg { width: 100%; height: 100%; }

  .readout { min-width: 0; flex: 1; }
  .big { display: flex; align-items: flex-start; font-size: 118px; line-height: .86; font-weight: 200; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
  .big .unit { font-size: 34px; font-weight: 400; letter-spacing: 0; margin: 12px 0 0 8px; color: var(--ink-dim); }
  .cond { margin-top: 16px; font-size: 25px; font-weight: 500; letter-spacing: -.01em; }
  .sub { margin-top: 6px; font-size: 13.5px; color: var(--ink-faint); letter-spacing: .02em; }

  .stats { flex: none; display: flex; gap: 14px; }
  .stat {
    width: 138px; padding: 18px 18px 16px; border-radius: 18px;
    background: rgba(255,255,255,.07); border: 1px solid var(--stroke);
  }
  .stat .k { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
  .stat .v { margin-top: 10px; font-size: 33px; font-weight: 300; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  .stat.max .k svg { color: #ffb08a; }
  .stat.min .k svg { color: #9ed2ff; }
  .stat .k svg { width: 13px; height: 13px; }

  /* ---------- hourly ---------- */
  .hourly { margin-top: auto; }
  .hhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2px; }
  .hhead h2 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-dim); }
  .hhead span { font-size: 12px; color: var(--ink-faint); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
  .chart { display: block; width: 100%; height: auto; }
  .chart text { font-family: inherit; font-variant-numeric: tabular-nums; }
  .chart .val { font-size: 12.5px; font-weight: 600; fill: var(--ink); }
  .chart .hr { font-size: 11px; fill: var(--ink-faint); letter-spacing: .05em; }
  .chart .grid { stroke: rgba(255,255,255,.11); stroke-width: 1; stroke-dasharray: 2 6; }
  .chart .line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 4px 12px rgba(0,0,0,.35)); }
  .chart .dot { fill: var(--g1); stroke: var(--accent); stroke-width: 2; }
  .chart .dot.peak { fill: var(--accent); r: 5; }
  .draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 1500ms cubic-bezier(.25,.8,.3,1) 120ms forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  .fade { opacity: 0; animation: fade 700ms ease 900ms forwards; }
  @keyframes fade { to { opacity: 1; } }

  /* ---------- states ---------- */
  .state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; flex: 1; gap: 16px; padding: 60px 0; }
  .spinner { width: 42px; height: 42px; border-radius: 50%; border: 3px solid rgba(255,255,255,.18); border-top-color: var(--accent); animation: spin 900ms linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .state h2 { margin: 4px 0 0; font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
  .state p { margin: 0; max-width: 520px; font-size: 15px; line-height: 1.6; color: var(--ink-dim); }
  .state code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,.25); color: var(--ink-dim); }
  .badge-err { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,120,120,.16); border: 1px solid rgba(255,150,150,.34); }
  .badge-err svg { width: 30px; height: 30px; color: #ffb3b3; }
  button.retry {
    margin-top: 8px; padding: 11px 22px; border-radius: 999px; cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
    background: rgba(255,255,255,.12); border: 1px solid var(--stroke);
    transition: background 160ms ease, transform 160ms ease;
  }
  button.retry:hover { background: rgba(255,255,255,.2); }
  button.retry:active { transform: scale(.97); }

  /* ---------- icon motion ---------- */
  .sun-rays { transform-origin: 32px 32px; animation: spin 44s linear infinite; }
  .sun-core { transform-origin: 32px 32px; animation: pulse 4.5s ease-in-out infinite; }
  @keyframes pulse { 50% { transform: scale(1.06); } }
  .cloud-g { animation: bob 6.5s ease-in-out infinite; }
  @keyframes bob { 50% { transform: translateX(2.5px) translateY(-2px); } }
  .drop { animation: fall 1.5s linear infinite; }
  .drop:nth-of-type(2) { animation-delay: .35s; }
  .drop:nth-of-type(3) { animation-delay: .7s; }
  @keyframes fall { 0% { transform: translateY(-3px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(11px); opacity: 0; } }
  .flake { transform-box: fill-box; transform-origin: center; animation: twinkle 2.6s ease-in-out infinite; }
  .flake:nth-of-type(2) { animation-delay: .8s; }
  .flake:nth-of-type(3) { animation-delay: 1.5s; }
  @keyframes twinkle { 0%,100% { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }
  .bolt { animation: flicker 3.2s ease-in-out infinite; }
  @keyframes flicker { 0%,42%,52%,100% { opacity: 1; } 46% { opacity: .25; } 49% { opacity: .9; } }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .draw { stroke-dashoffset: 0; }
    .fade { opacity: 1; }
  }
</style>
</head>
<body>
<div class="bg" id="bg">
  <div class="blob a"></div>
  <div class="blob b"></div>
  <div class="blob c"></div>
</div>

<main class="card" id="card">
  <div class="state" id="loading">
    <div class="spinner"></div>
    <h2>Loading weather</h2>
    <p id="loadingMsg">Fetching conditions…</p>
  </div>
</main>

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

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

  function coord(raw, fallback, limit) {
    var n = parseFloat(raw);
    return (isFinite(n) && Math.abs(n) <= limit) ? n : fallback;
  }

  var lat = coord(qs.get("lat"), 52.52, 90);
  var lon = coord(qs.get("lon"), 13.405, 180);
  var name = (qs.get("name") || "").trim() || "Berlin";

  var todayUTC = new Date().toISOString().slice(0, 10);
  var date = (qs.get("date") || "").trim();
  if (!/^\d{4}-\d{2}-\d{2}$/.test(date) || isNaN(Date.parse(date + "T00:00:00Z"))) date = todayUTC;

  var isPast = date < todayUTC;
  var path = isPast ? "/api/om/archive" : "/api/om/forecast";

  /* ---------------- WMO weather codes ---------------- */
  var CODES = {
    0:  ["Clear sky", "clear"],
    1:  ["Mainly clear", "clear"],
    2:  ["Partly cloudy", "partly"],
    3:  ["Overcast", "cloudy"],
    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:   { g1: "#0a3573", g2: "#2f7ec4", g3: "#8cc4e8", accent: "#ffd275" },
    partly:  { g1: "#123a68", g2: "#4179ab", g3: "#9dc3de", accent: "#ffe0a8" },
    cloudy:  { g1: "#26333f", g2: "#4f6577", g3: "#8fa4b4", accent: "#d8e7f3" },
    fog:     { g1: "#333c46", g2: "#63727f", g3: "#a3b0ba", accent: "#e3ecf2" },
    drizzle: { g1: "#0f2739", g2: "#2f5f7c", g3: "#7ba6bd", accent: "#8fd6f0" },
    rain:    { g1: "#0b2130", g2: "#26536e", g3: "#6b9cb6", accent: "#7fd0ef" },
    snow:    { g1: "#22364f", g2: "#537ba4", g3: "#a9c8de", accent: "#eaf6ff" },
    thunder: { g1: "#191333", g2: "#443a6d", g3: "#8d81be", accent: "#c9b8ff" }
  };

  /* ---------------- inline icons ---------------- */
  var CLOUD = '<g class="cloud-g"><ellipse cx="26" cy="37" rx="12.5" ry="10.5"/><ellipse cx="40" cy="34" rx="13.5" ry="11.5"/><rect x="13.5" y="38" width="39" height="11" rx="5.5"/></g>';

  function rays() {
    var out = '<g class="sun-rays" stroke="currentColor" stroke-width="3.4" stroke-linecap="round">';
    for (var i = 0; i < 8; i++) {
      var a = i * Math.PI / 4;
      var x1 = 32 + Math.cos(a) * 20.5, y1 = 32 + Math.sin(a) * 20.5;
      var x2 = 32 + Math.cos(a) * 27.5, y2 = 32 + Math.sin(a) * 27.5;
      out += '<line x1="' + x1.toFixed(1) + '" y1="' + y1.toFixed(1) + '" x2="' + x2.toFixed(1) + '" y2="' + y2.toFixed(1) + '"/>';
    }
    return out + "</g>";
  }

  function svgIcon(group) {
    var head = '<svg viewBox="0 0 64 64" role="img" aria-hidden="true">';
    var sunColor = 'style="color:var(--accent)"';
    var cloudFill = 'fill="#f3f8ff" fill-opacity=".93"';

    switch (group) {
      case "clear":
        return head + '<g ' + sunColor + ' fill="currentColor">' + rays() +
          '<circle class="sun-core" cx="32" cy="32" r="13.5"/></g></svg>';
      case "partly":
        return head + '<g ' + sunColor + ' fill="currentColor"><g class="sun-rays" stroke="currentColor" stroke-width="3" stroke-linecap="round">' +
          '<line x1="24" y1="6" x2="24" y2="12"/><line x1="10.5" y1="19.5" x2="4.5" y2="19.5"/>' +
          '<line x1="14.4" y1="9.9" x2="10.2" y2="5.7"/><line x1="33.6" y1="9.9" x2="37.8" y2="5.7"/>' +
          '</g><circle cx="24" cy="20" r="9"/></g><g ' + cloudFill + '>' + CLOUD + '</g></svg>';
      case "cloudy":
        return head + '<g ' + cloudFill + '>' + CLOUD + '</g><ellipse cx="18" cy="24" rx="9" ry="7.5" fill="#dbe7f2" fill-opacity=".55"/></svg>';
      case "fog":
        return head + '<g fill="#eef4fa" fill-opacity=".8" transform="translate(0,-5)">' + CLOUD + '</g>' +
          '<g stroke="#eef4fa" stroke-opacity=".7" stroke-width="3.2" stroke-linecap="round">' +
          '<line x1="15" y1="46" x2="49" y2="46"/><line x1="21" y1="53" x2="45" y2="53"/></g></svg>';
      case "drizzle":
        return head + '<g ' + cloudFill + ' transform="translate(0,-5)">' + CLOUD + '</g>' +
          '<g fill="var(--accent)"><circle class="drop" cx="24" cy="50" r="2.4"/><circle class="drop" cx="32" cy="53" r="2.4"/><circle class="drop" cx="40" cy="50" r="2.4"/></g></svg>';
      case "rain":
        return head + '<g ' + cloudFill + ' transform="translate(0,-6)">' + CLOUD + '</g>' +
          '<g stroke="var(--accent)" stroke-width="3.2" stroke-linecap="round">' +
          '<line class="drop" x1="23" y1="47" x2="21" y2="54"/><line class="drop" x1="32" y1="48" x2="30" y2="55"/><line class="drop" x1="41" y1="47" x2="39" y2="54"/></g></svg>';
      case "snow":
        return head + '<g ' + cloudFill + ' transform="translate(0,-6)">' + CLOUD + '</g>' +
          '<g stroke="var(--accent)" stroke-width="2.6" stroke-linecap="round">' +
          '<g class="flake"><line x1="22" y1="47" x2="22" y2="55"/><line x1="18" y1="51" x2="26" y2="51"/></g>' +
          '<g class="flake"><line x1="32" y1="49" x2="32" y2="57"/><line x1="28" y1="53" x2="36" y2="53"/></g>' +
          '<g class="flake"><line x1="42" y1="47" x2="42" y2="55"/><line x1="38" y1="51" x2="46" y2="51"/></g></g></svg>';
      case "thunder":
        return head + '<g ' + cloudFill + ' transform="translate(0,-7)">' + CLOUD + '</g>' +
          '<path class="bolt" d="M34 40l-11 12h7l-2 10 12-14h-7l3-8z" fill="var(--accent)"/></svg>';
      default:
        return head + '<g ' + cloudFill + '>' + CLOUD + '</g></svg>';
    }
  }

  /* ---------------- helpers ---------------- */
  var card = document.getElementById("card");
  var bg = document.getElementById("bg");

  function esc(s) {
    return String(s).replace(/[&<>"']/g, function (c) {
      return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c];
    });
  }
  function r1(v) { return (Math.round(v * 10) / 10).toFixed(1).replace(/\.0$/, ""); }
  function r0(v) { return String(Math.round(v)); }

  function applyTheme(group) {
    var t = THEMES[group] || THEMES.cloudy;
    var s = document.documentElement.style;
    s.setProperty("--g1", t.g1);
    s.setProperty("--g2", t.g2);
    s.setProperty("--g3", t.g3);
    s.setProperty("--accent", t.accent);
    bg.style.background = "linear-gradient(165deg," + t.g1 + " 0%," + t.g2 + " 62%," + t.g3 + " 100%)";
  }

  function prettyDate(iso) {
    var d = new Date(iso + "T00:00:00Z");
    try {
      return d.toLocaleDateString("en-GB", {
        weekday: "long", day: "numeric", month: "long", year: "numeric", timeZone: "UTC"
      });
    } catch (e) { return iso; }
  }

  function relLabel(iso) {
    var a = Date.parse(iso + "T00:00:00Z"), b = Date.parse(todayUTC + "T00:00:00Z");
    var days = Math.round((a - b) / 86400000);
    if (days === 0) return "Today";
    if (days === 1) return "Tomorrow";
    if (days === -1) return "Yesterday";
    return days < 0 ? Math.abs(days) + " days ago" : "In " + days + " days";
  }

  /* ---------------- chart ---------------- */
  function buildChart(hours) {
    var W = 1040, H = 236;
    var padL = 26, padR = 26, padT = 40, padB = 30;
    var n = hours.length;
    var innerW = W - padL - padR;
    var innerH = H - padT - padB;

    var temps = hours.map(function (h) { return h.v; });
    var lo = Math.min.apply(null, temps), hi = Math.max.apply(null, temps);
    var span = Math.max(hi - lo, 1.5);
    var yMin = lo - span * 0.28, yMax = hi + span * 0.28;

    function px(i) { return n === 1 ? padL + innerW / 2 : padL + (innerW * i) / (n - 1); }
    function py(v) { return padT + innerH * (1 - (v - yMin) / (yMax - yMin)); }

    var pts = hours.map(function (h, i) { return { x: px(i), y: py(h.v), v: h.v, t: h.t }; });

    var line = "";
    if (pts.length === 1) {
      line = "";
    } else {
      line = "M" + pts[0].x.toFixed(1) + " " + pts[0].y.toFixed(1);
      for (var i = 0; i < pts.length - 1; i++) {
        var p0 = pts[i - 1] || pts[i], p1 = pts[i], p2 = pts[i + 1], p3 = pts[i + 2] || p2;
        var k = 0.16;
        line += " C" + (p1.x + (p2.x - p0.x) * k).toFixed(1) + " " + (p1.y + (p2.y - p0.y) * k).toFixed(1) +
                " " + (p2.x - (p3.x - p1.x) * k).toFixed(1) + " " + (p2.y - (p3.y - p1.y) * k).toFixed(1) +
                " " + p2.x.toFixed(1) + " " + p2.y.toFixed(1);
      }
    }
    var area = line ? line + " L" + pts[pts.length - 1].x.toFixed(1) + " " + (H - padB) + " L" + pts[0].x.toFixed(1) + " " + (H - padB) + " Z" : "";

    var grid = "";
    for (var g = 0; g <= 3; g++) {
      var gy = padT + (innerH * g) / 3;
      grid += '<line class="grid" x1="' + padL + '" y1="' + gy.toFixed(1) + '" x2="' + (W - padR) + '" y2="' + gy.toFixed(1) + '"/>';
    }

    var iMax = temps.indexOf(hi), iMin = temps.indexOf(lo);
    var step = Math.max(1, Math.ceil(n / 13));

    var dots = "", vals = "", hrs = "";
    pts.forEach(function (p, i) {
      var peak = (i === iMax || i === iMin);
      dots += '<circle class="dot' + (peak ? " peak" : "") + '" cx="' + p.x.toFixed(1) + '" cy="' + p.y.toFixed(1) + '" r="' + (peak ? 4.6 : 3.1) + '"/>';
      var ty = Math.max(p.y - 15, 14);
      vals += '<text class="val" x="' + p.x.toFixed(1) + '" y="' + ty.toFixed(1) + '" text-anchor="middle"' +
              (peak ? ' style="fill:var(--accent)"' : "") + '>' + r0(p.v) + "\u00B0</text>";
      if (i % step === 0 || i === n - 1) {
        hrs += '<text class="hr" x="' + p.x.toFixed(1) + '" y="' + (H - 8) + '" text-anchor="middle">' + esc(p.t.slice(11, 16)) + "</text>";
      }
    });

    return '<svg class="chart" viewBox="0 0 ' + W + " " + H + '" role="img" aria-label="Hourly temperature chart">' +
      '<defs><linearGradient id="fillGrad" x1="0" y1="0" x2="0" y2="1">' +
      '<stop offset="0%" stop-color="var(--accent)" stop-opacity=".38"/>' +
      '<stop offset="100%" stop-color="var(--accent)" stop-opacity="0"/></linearGradient></defs>' +
      grid +
      (area ? '<path class="fade" d="' + area + '" fill="url(#fillGrad)"/>' : "") +
      (line ? '<path class="line draw" d="' + line + '" pathLength="1000" style="--len:1000"/>' : "") +
      '<g class="fade">' + dots + vals + "</g>" + hrs +
      "</svg>";
  }

  function hourList(hours) {
    return '<div class="hours-fallback" hidden>' + hours.map(function (h) {
      return esc(h.t.slice(11, 16)) + " " + r1(h.v) + "\u00B0C";
    }).join(", ") + "</div>";
  }

  /* ---------------- render ---------------- */
  function renderCard(d) {
    applyTheme(d.group);

    var pinSvg = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
      '<path d="M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 1 1 16 0Z"/><circle cx="12" cy="10" r="2.8"/></svg>';
    var upSvg = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>';
    var downSvg = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>';

    var avg = d.hours.length
      ? d.hours.reduce(function (s, h) { return s + h.v; }, 0) / d.hours.length
      : null;

    card.innerHTML =
      '<div class="top">' +
        '<div>' +
          '<div class="loc">' + pinSvg + "<h1>" + esc(d.name) + "</h1></div>" +
          '<div class="coords">' + d.lat.toFixed(3) + "\u00B0" + (d.lat >= 0 ? "N" : "S") + " \u00B7 " +
            Math.abs(d.lon).toFixed(3) + "\u00B0" + (d.lon >= 0 ? "E" : "W") + "</div>" +
        "</div>" +
        '<div class="when">' +
          '<div class="d">' + esc(prettyDate(d.date)) + "</div>" +
          '<div class="iso">' + esc(d.date) + " \u00B7 UTC</div>" +
          '<div class="chip"><i></i>' + esc(relLabel(d.date)) + " \u00B7 " + (d.archive ? "Archive" : "Forecast") + "</div>" +
        "</div>" +
      "</div>" +
      '<div class="rule"></div>' +
      '<div class="hero">' +
        '<div class="icon">' + svgIcon(d.group) + "</div>" +
        '<div class="readout">' +
          '<div class="big">' + (d.max === null ? "\u2013" : r0(d.max)) + "\u00B0" + '<span class="unit">C</span></div>' +
          '<div class="cond">' + esc(d.condition) + "</div>" +
          '<div class="sub">Daily high' + (d.max === null ? "" : " " + r1(d.max) + "\u00B0C") +
            (avg === null ? "" : " \u00B7 hourly average " + r1(avg) + "\u00B0C") +
            " \u00B7 WMO code " + esc(String(d.code)) + "</div>" +
        "</div>" +
        '<div class="stats">' +
          '<div class="stat max"><div class="k">' + upSvg + "Max</div><div class=\"v\">" +
            (d.max === null ? "\u2013" : r1(d.max) + "\u00B0C") + "</div></div>" +
          '<div class="stat min"><div class="k">' + downSvg + "Min</div><div class=\"v\">" +
            (d.min === null ? "\u2013" : r1(d.min) + "\u00B0C") + "</div></div>" +
        "</div>" +
      "</div>" +
      '<div class="hourly">' +
        '<div class="hhead"><h2>Hourly temperature \u2014 \u00B0C</h2><span>' +
          (d.hours.length ? d.hours.length + " readings \u00B7 " + esc(d.hours[0].t.slice(11, 16)) + "\u2013" + esc(d.hours[d.hours.length - 1].t.slice(11, 16)) + " UTC" : "no hourly data") +
        "</span></div>" +
        (d.hours.length ? buildChart(d.hours) + hourList(d.hours) : '<p class="sub">Hourly temperatures are unavailable for this date.</p>') +
      "</div>";
  }

  function renderError(title, detail) {
    var warn = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
      '<path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>';
    card.innerHTML =
      '<div class="top"><div><div class="loc">' +
        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 1 1 16 0Z"/><circle cx="12" cy="10" r="2.8"/></svg>' +
        "<h1>" + esc(name) + "</h1></div>" +
        '<div class="coords">' + lat.toFixed(3) + "\u00B0 \u00B7 " + lon.toFixed(3) + "\u00B0</div></div>" +
        '<div class="when"><div class="d">' + esc(prettyDate(date)) + '</div><div class="iso">' + esc(date) + " \u00B7 UTC</div></div>" +
      "</div>" +
      '<div class="rule"></div>' +
      '<div class="state">' +
        '<div class="badge-err">' + warn + "</div>" +
        "<h2>" + esc(title) + "</h2>" +
        "<p>" + detail + "</p>" +
        '<button class="retry" type="button" id="retry">Try again</button>' +
      "</div>";
    var btn = document.getElementById("retry");
    if (btn) btn.addEventListener("click", load);
  }

  /* ---------------- data ---------------- */
  function load() {
    card.innerHTML =
      '<div class="state"><div class="spinner"></div><h2>Loading weather</h2>' +
      '<p>Fetching ' + esc(name) + " for " + esc(date) + "\u2026</p></div>";

    var 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
    });
    var url = path + "?" + params.toString();

    fetch(url, { headers: { Accept: "application/json" } })
      .then(function (res) {
        if (!res.ok) throw new Error("The weather service responded with HTTP " + res.status + ".");
        return res.json();
      })
      .then(function (json) {
        if (!json || typeof json !== "object") throw new Error("The weather service returned an unreadable response.");
        if (json.error) throw new Error(String(json.reason || "The weather service reported an error."));

        var daily = json.daily || {};
        var max = Array.isArray(daily.temperature_2m_max) ? daily.temperature_2m_max[0] : null;
        var min = Array.isArray(daily.temperature_2m_min) ? daily.temperature_2m_min[0] : null;
        var code = Array.isArray(daily.weather_code) ? daily.weather_code[0] : null;

        var hours = [];
        var h = json.hourly || {};
        if (Array.isArray(h.time) && Array.isArray(h.temperature_2m)) {
          for (var i = 0; i < h.time.length; i++) {
            var t = String(h.time[i]), v = h.temperature_2m[i];
            if (t.slice(0, 10) !== date) continue;
            if (typeof v !== "number" || !isFinite(v)) continue;
            hours.push({ t: t, v: v });
          }
        }

        var hasMax = typeof max === "number" && isFinite(max);
        var hasMin = typeof min === "number" && isFinite(min);
        if (!hasMax && !hasMin && !hours.length) {
          throw new Error("No weather data is available for " + esc(date) + " at this location.");
        }

        if (!hasMax && hours.length) max = Math.max.apply(null, hours.map(function (x) { return x.v; }));
        if (!hasMin && hours.length) min = Math.min.apply(null, hours.map(function (x) { return x.v; }));

        var info = CODES[code] || null;

        renderCard({
          name: name,
          lat: lat,
          lon: lon,
          date: date,
          archive: isPast,
          max: (typeof max === "number" && isFinite(max)) ? max : null,
          min: (typeof min === "number" && isFinite(min)) ? min : null,
          code: (code === null || code === undefined) ? "n/a" : code,
          condition: info ? info[0] : "Condition unavailable",
          group: info ? info[1] : "cloudy",
          hours: hours
        });
      })
      .catch(function (err) {
        var msg = (err && err.message) ? err.message : "Unknown error.";
        renderError(
          "Weather data could not be loaded",
          esc(msg) + "<br><code>" + esc(url) + "</code>"
        );
      });
  }

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

L1 — cheap deterministic descriptors

bytes total29,033html / css / js530 / 9,889 / 18,614
dom nodes17dom depth5
css rules108js presentyes
brightness101.0contrast27.3
colorfulness39.2whitespace41.9%

This slot's telemetry

prompt tokens2completion tokens19,227
total tokens19,229wall208.8 s
cost—request id—
config.json575 B
{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_NONE",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "claude-opus-5-eff-high--cli--cursor--dev",
  "effort": "high",
  "family": "claude",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "claude-opus-5",
  "protocol": "cli",
  "served_model": "claude-opus-5-high",
  "telemetry": {
    "completion_tokens": 83846,
    "cost_usd": null,
    "prompt_tokens": 70,
    "total_tokens": 83916,
    "wall_ms": 1251462
  },
  "transport": "cursor-agent-cli-isolated-home",
  "vendor_sanction_ref": null
}
send-log2.5 KB
{
  "N": 2,
  "batch_id": "2026-08-13--cursor-s3",
  "config_id": "claude-opus-5-eff-high--cli--cursor--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-08-12T18:35:11.726618+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T18:31:42.974793+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-12T18:41:49.028629+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T18:35:16.040678+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-12T18:45:43.253617+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T18:41:52.625299+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-12T18:52:45.816944+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T18:45:46.663032+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
    }
  }
}