claude-opus-4-8 @ xhigh · cursor-xl

cursor-xlxhigh
config
claude-opus-4-8-eff-xhigh--cli--cursor-xl--dev
batch
2026-07-19--unified
transport
cursor-agent-cli-isolated-home
protocol
cli · plan
served model
claude-opus-4-8-xhigh
captured
Jul 18, 2026, 11:54 AM · N=2
variant
live
slot 0 · P-q · sandboxed iframe
claude-opus-4-8 @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 tempmatchshown: 25
  • min tempmatchshown: 16
  • 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>
  * { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --card-w: 920px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
  }

  html, body {
    width: 1280px;
    height: 800px;
    overflow: hidden;
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b1020;
    color: #f5f7fb;
    transition: background 1.2s var(--ease);
    -webkit-font-smoothing: antialiased;
  }

  /* Dynamic sky backgrounds by condition group */
  body[data-sky="clear-day"]  { background: radial-gradient(1200px 700px at 78% -12%, #7cc7ff 0%, #4a90e2 32%, #2c5aa8 66%, #1b3a70 100%); }
  body[data-sky="clear-night"]{ background: radial-gradient(1200px 700px at 78% -12%, #2a3a6b 0%, #1b2450 36%, #10163a 70%, #080b22 100%); }
  body[data-sky="cloudy"]     { background: radial-gradient(1200px 700px at 78% -12%, #8fa6c4 0%, #6a7f9e 34%, #47566f 70%, #2c3648 100%); }
  body[data-sky="rain"]       { background: radial-gradient(1200px 700px at 78% -12%, #5b6b86 0%, #3f4d66 36%, #2a3448 72%, #171d2c 100%); }
  body[data-sky="snow"]       { background: radial-gradient(1200px 700px at 78% -12%, #aebfd6 0%, #8496b4 36%, #5d6c88 72%, #3a4560 100%); }
  body[data-sky="storm"]      { background: radial-gradient(1200px 700px at 78% -12%, #414a63 0%, #2a3145 38%, #1a1f30 74%, #0d1019 100%); }
  body[data-sky="fog"]        { background: radial-gradient(1200px 700px at 78% -12%, #9aa6b6 0%, #7c8898 36%, #5a6472 72%, #3d434e 100%); }

  .stage {
    position: relative;
    width: var(--card-w);
    animation: rise 0.9s var(--ease) both;
  }

  @keyframes rise {
    from { opacity: 0; transform: translateY(18px) scale(0.985); }
    to   { opacity: 1; transform: none; }
  }

  .card {
    position: relative;
    border-radius: 28px;
    padding: 40px 44px 34px;
    background: linear-gradient(160deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06));
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow:
      0 30px 80px -20px rgba(0,0,0,0.55),
      inset 0 1px 0 rgba(255,255,255,0.30);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    overflow: hidden;
  }

  .card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.10), transparent 40%);
    pointer-events: none;
  }

  /* Header */
  .head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
  }
  .loc { display: flex; flex-direction: column; gap: 6px; }
  .loc .name {
    font-size: 34px;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.05;
  }
  .loc .date {
    font-size: 15px;
    font-weight: 500;
    color: rgba(245,247,251,0.72);
    letter-spacing: 0.01em;
  }
  .loc .coords {
    font-size: 12.5px;
    color: rgba(245,247,251,0.5);
    font-variant-numeric: tabular-nums;
  }
  .cond {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }
  .cond .label {
    font-size: 17px;
    font-weight: 600;
    color: rgba(245,247,251,0.92);
  }
  .cond .sub {
    font-size: 12.5px;
    color: rgba(245,247,251,0.55);
  }

  /* Hero */
  .hero {
    display: flex;
    align-items: center;
    gap: 32px;
    margin: 26px 0 8px;
  }
  .icon-wrap {
    flex: 0 0 auto;
    width: 132px;
    height: 132px;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.35));
  }
  .icon-wrap svg { width: 116px; height: 116px; }

  .temps { display: flex; align-items: baseline; gap: 26px; }
  .big {
    font-size: 92px;
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 0.9;
    font-variant-numeric: tabular-nums;
  }
  .big .deg { font-size: 46px; font-weight: 500; vertical-align: super; opacity: 0.75; }
  .maxmin { display: flex; flex-direction: column; gap: 12px; }
  .pill {
    display: flex; align-items: center; gap: 10px;
    font-size: 18px; font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .pill .cap {
    font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(245,247,251,0.6);
    width: 34px;
  }
  .pill .bar {
    width: 90px; height: 6px; border-radius: 3px;
    background: rgba(255,255,255,0.18);
    overflow: hidden;
  }
  .pill .bar span { display: block; height: 100%; border-radius: 3px; }
  .pill.max .bar span { background: linear-gradient(90deg, #ffd27a, #ff8f6b); }
  .pill.min .bar span { background: linear-gradient(90deg, #7ad7ff, #8fa8ff); }

  /* Hourly */
  .hourly-wrap { margin-top: 26px; }
  .hourly-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
  }
  .hourly-head .ttl {
    font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: rgba(245,247,251,0.62);
  }
  .hourly-head .range {
    font-size: 12.5px; color: rgba(245,247,251,0.55);
    font-variant-numeric: tabular-nums;
  }

  .chart {
    position: relative;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    padding: 16px 10px 10px;
  }
  .chart svg { display: block; width: 100%; height: 150px; }

  .hours {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    margin-top: 6px;
    padding: 0 2px;
  }
  .hours .h {
    text-align: center;
    font-size: 9.5px;
    color: rgba(245,247,251,0.5);
    font-variant-numeric: tabular-nums;
  }
  .hours .h.tick { color: rgba(245,247,251,0.82); font-weight: 600; }

  /* States */
  .state {
    width: var(--card-w);
    text-align: center;
    padding: 48px;
  }
  .state .card { padding: 56px 44px; }
  .spinner {
    width: 46px; height: 46px; margin: 0 auto 20px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.2);
    border-top-color: rgba(255,255,255,0.9);
    animation: spin 0.9s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .state .msg { font-size: 18px; font-weight: 600; }
  .state .detail { margin-top: 8px; font-size: 13.5px; color: rgba(245,247,251,0.6); }
  .err-icon {
    width: 54px; height: 54px; margin: 0 auto 18px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255,120,120,0.18);
    border: 1px solid rgba(255,140,140,0.4);
  }

  .hidden { display: none !important; }
</style>
</head>
<body data-sky="clear-day">

  <!-- Loading state -->
  <div id="loading" class="state">
    <div class="card">
      <div class="spinner"></div>
      <div class="msg">Loading weather…</div>
      <div class="detail" id="loadingDetail"></div>
    </div>
  </div>

  <!-- Error state -->
  <div id="error" class="state hidden">
    <div class="card">
      <div class="err-icon">
        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#ff9b9b" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 9v4"/><path d="M12 17h.01"/>
          <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"/>
        </svg>
      </div>
      <div class="msg">Weather data couldn't be loaded</div>
      <div class="detail" id="errorDetail">Please try again later.</div>
    </div>
  </div>

  <!-- Main card -->
  <div id="app" class="stage hidden">
    <div class="card">
      <div class="head">
        <div class="loc">
          <div class="name" id="locName">—</div>
          <div class="date" id="locDate">—</div>
          <div class="coords" id="locCoords">—</div>
        </div>
        <div class="cond">
          <div class="label" id="condLabel">—</div>
          <div class="sub" id="condSub">—</div>
        </div>
      </div>

      <div class="hero">
        <div class="icon-wrap" id="iconWrap"></div>
        <div class="temps">
          <div class="big" id="bigTemp">—<span class="deg">°</span></div>
          <div class="maxmin">
            <div class="pill max">
              <span class="cap">High</span>
              <span id="maxVal">—°</span>
              <span class="bar"><span id="maxBar" style="width:0"></span></span>
            </div>
            <div class="pill min">
              <span class="cap">Low</span>
              <span id="minVal">—°</span>
              <span class="bar"><span id="minBar" style="width:0"></span></span>
            </div>
          </div>
        </div>
      </div>

      <div class="hourly-wrap">
        <div class="hourly-head">
          <div class="ttl">Hourly · °C</div>
          <div class="range" id="hourlyRange">—</div>
        </div>
        <div class="chart">
          <svg id="chart" viewBox="0 0 960 150" preserveAspectRatio="none"></svg>
          <div class="hours" id="hours"></div>
        </div>
      </div>
    </div>
  </div>

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

  // ---- Params ----------------------------------------------------------
  var qs = new URLSearchParams(location.search);
  var lat = parseFloat(qs.get("lat"));
  var lon = parseFloat(qs.get("lon"));
  if (!isFinite(lat)) lat = 52.52;
  if (!isFinite(lon)) lon = 13.405;
  var name = qs.get("name") || "Berlin";

  function todayUTC() {
    var d = new Date();
    return d.getUTCFullYear() + "-" +
      String(d.getUTCMonth() + 1).padStart(2, "0") + "-" +
      String(d.getUTCDate()).padStart(2, "0");
  }
  var dateParam = qs.get("date");
  var date = /^\d{4}-\d{2}-\d{2}$/.test(dateParam || "") ? dateParam : todayUTC();

  // ---- Elements --------------------------------------------------------
  var el = function (id) { return document.getElementById(id); };

  // ---- Weather code metadata ------------------------------------------
  function describe(code) {
    var m = {
      0:  ["Clear sky", "clear"],
      1:  ["Mainly clear", "clear"],
      2:  ["Partly cloudy", "partly"],
      3:  ["Overcast", "cloudy"],
      45: ["Fog", "fog"],
      48: ["Rime fog", "fog"],
      51: ["Light drizzle", "rain"],
      53: ["Drizzle", "rain"],
      55: ["Dense drizzle", "rain"],
      56: ["Freezing drizzle", "rain"],
      57: ["Freezing drizzle", "rain"],
      61: ["Light rain", "rain"],
      63: ["Rain", "rain"],
      65: ["Heavy rain", "rain"],
      66: ["Freezing rain", "rain"],
      67: ["Freezing rain", "rain"],
      71: ["Light snow", "snow"],
      73: ["Snow", "snow"],
      75: ["Heavy snow", "snow"],
      77: ["Snow grains", "snow"],
      80: ["Light showers", "rain"],
      81: ["Showers", "rain"],
      82: ["Violent showers", "rain"],
      85: ["Snow showers", "snow"],
      86: ["Snow showers", "snow"],
      95: ["Thunderstorm", "storm"],
      96: ["Thunderstorm, hail", "storm"],
      99: ["Thunderstorm, hail", "storm"]
    };
    return m[code] || ["Unknown", "cloudy"];
  }

  // group -> sky theme (day/night handled for clear/partly)
  function skyFor(group, isDay) {
    if (group === "clear") return isDay ? "clear-day" : "clear-night";
    if (group === "partly") return "cloudy";
    if (group === "cloudy") return "cloudy";
    if (group === "rain") return "rain";
    if (group === "snow") return "snow";
    if (group === "storm") return "storm";
    if (group === "fog") return "fog";
    return "clear-day";
  }

  // ---- SVG weather icons ----------------------------------------------
  function icon(group, isDay) {
    var sun = '<circle cx="32" cy="32" r="13" fill="url(#g_sun)"/>' +
      '<g stroke="#ffd77a" stroke-width="3.4" stroke-linecap="round">' +
      rays() + '</g>';
    function rays() {
      var s = "", i, a, x1, y1, x2, y2;
      for (i = 0; i < 8; i++) {
        a = i * Math.PI / 4;
        x1 = 32 + Math.cos(a) * 19; y1 = 32 + Math.sin(a) * 19;
        x2 = 32 + Math.cos(a) * 26; y2 = 32 + Math.sin(a) * 26;
        s += '<line x1="' + x1.toFixed(1) + '" y1="' + y1.toFixed(1) +
             '" x2="' + x2.toFixed(1) + '" y2="' + y2.toFixed(1) + '"/>';
      }
      return s;
    }
    var moon = '<path d="M40 20a16 16 0 1 0 6 22 13 13 0 0 1-6-22z" fill="url(#g_moon)"/>';
    var cloud = '<path d="M22 46a11 11 0 0 1 1-21.9 15 15 0 0 1 28.4 4.1A9.5 9.5 0 0 1 50 46z" fill="url(#g_cloud)"/>';
    var defs = '<defs>' +
      '<linearGradient id="g_sun" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ffe9a8"/><stop offset="1" stop-color="#ffb64d"/></linearGradient>' +
      '<linearGradient id="g_moon" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fdf6e3"/><stop offset="1" stop-color="#cdd6ea"/></linearGradient>' +
      '<linearGradient id="g_cloud" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ffffff"/><stop offset="1" stop-color="#cdd7e6"/></linearGradient>' +
      '</defs>';

    var body;
    switch (group) {
      case "clear":
        body = isDay ? sun : moon;
        break;
      case "partly":
        body = (isDay
          ? '<g transform="translate(-6,-6) scale(0.8)">' + sun + '</g>'
          : '<g transform="translate(-4,-6) scale(0.85)">' + moon + '</g>') + cloud;
        break;
      case "cloudy":
        body = '<g transform="translate(4,2)">' + cloud + '</g>' +
               '<path d="M14 40a8 8 0 0 1 .7-15.9A11 11 0 0 1 36 27" fill="rgba(255,255,255,0.55)"/>';
        break;
      case "rain":
        body = cloud +
          '<g stroke="#8fd0ff" stroke-width="3.2" stroke-linecap="round">' +
          '<line x1="24" y1="50" x2="21" y2="58"/>' +
          '<line x1="33" y1="50" x2="30" y2="58"/>' +
          '<line x1="42" y1="50" x2="39" y2="58"/></g>';
        break;
      case "snow":
        body = cloud +
          '<g fill="#eaf4ff">' +
          '<circle cx="24" cy="53" r="2.4"/>' +
          '<circle cx="34" cy="56" r="2.4"/>' +
          '<circle cx="43" cy="53" r="2.4"/></g>';
        break;
      case "storm":
        body = cloud +
          '<path d="M32 48l-7 10h6l-4 8 12-13h-6l4-5z" fill="#ffd23f"/>';
        break;
      case "fog":
        body = cloud +
          '<g stroke="rgba(255,255,255,0.75)" stroke-width="3.2" stroke-linecap="round">' +
          '<line x1="16" y1="52" x2="46" y2="52"/>' +
          '<line x1="20" y1="58" x2="42" y2="58"/></g>';
        break;
      default:
        body = cloud;
    }
    return '<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">' + defs + body + '</svg>';
  }

  // ---- Formatting ------------------------------------------------------
  function fmtDate(iso) {
    var p = iso.split("-");
    var d = new Date(Date.UTC(+p[0], +p[1] - 1, +p[2]));
    return d.toLocaleDateString("en-US", {
      weekday: "long", year: "numeric", month: "long", day: "numeric", timeZone: "UTC"
    });
  }
  function round(n) { return Math.round(n); }

  // ---- API -------------------------------------------------------------
  function isPast(d) { return d < todayUTC(); }

  function buildURL() {
    var base = isPast(date) ? "/api/om/archive" : "/api/om/forecast";
    var p = new URLSearchParams({
      latitude: lat,
      longitude: lon,
      daily: "temperature_2m_max,temperature_2m_min,weather_code",
      hourly: "temperature_2m",
      timezone: "UTC",
      temperature_unit: "celsius",
      start_date: date,
      end_date: date
    });
    return base + "?" + p.toString();
  }

  function showError(detail) {
    el("loading").classList.add("hidden");
    el("app").classList.add("hidden");
    el("error").classList.remove("hidden");
    if (detail) el("errorDetail").textContent = detail;
  }

  // ---- Render ----------------------------------------------------------
  function render(data) {
    var daily = data && data.daily;
    var hourly = data && data.hourly;
    if (!daily || !hourly || !daily.time || !daily.time.length) {
      throw new Error("Response missing daily/hourly data.");
    }

    var tmax = daily.temperature_2m_max[0];
    var tmin = daily.temperature_2m_min[0];
    var code = daily.weather_code[0];
    if (tmax == null || tmin == null) throw new Error("No temperature data for this date.");

    var d = describe(code);
    var label = d[0], group = d[1];

    // Determine day/night roughly from midday hour for icon/theme
    var isDay = true;
    var sky = skyFor(group, isDay);
    document.body.setAttribute("data-sky", sky);

    // Header
    el("locName").textContent = name;
    el("locDate").textContent = fmtDate(date);
    el("locCoords").textContent = lat.toFixed(3) + "°, " + lon.toFixed(3) + "°";
    el("condLabel").textContent = label;
    el("condSub").textContent = "WMO code " + code;

    // Icon
    el("iconWrap").innerHTML = icon(group, isDay);

    // Temps
    var mid = round((tmax + tmin) / 2);
    el("bigTemp").innerHTML = mid + '<span class="deg">°</span>';
    el("maxVal").textContent = round(tmax) + "°";
    el("minVal").textContent = round(tmin) + "°";

    // bars scaled across a plausible range
    var lo = -20, hi = 45;
    function pct(t) { return Math.max(4, Math.min(100, (t - lo) / (hi - lo) * 100)); }
    el("maxBar").style.width = pct(tmax) + "%";
    el("minBar").style.width = pct(tmin) + "%";

    // Hourly
    var times = hourly.time || [];
    var temps = hourly.temperature_2m || [];
    // Keep only entries for the requested date (should already be, but be safe)
    var series = [];
    for (var i = 0; i < times.length; i++) {
      if (times[i].indexOf(date) === 0 && temps[i] != null) {
        var hh = parseInt(times[i].slice(11, 13), 10);
        series.push({ h: hh, t: temps[i] });
      }
    }
    if (!series.length) throw new Error("No hourly data for this date.");

    drawChart(series);
    buildHourLabels(series);

    var vals = series.map(function (s) { return s.t; });
    el("hourlyRange").textContent =
      round(Math.min.apply(null, vals)) + "° – " + round(Math.max.apply(null, vals)) + "°";

    // Reveal
    el("loading").classList.add("hidden");
    el("error").classList.add("hidden");
    el("app").classList.remove("hidden");
  }

  function drawChart(series) {
    var W = 960, H = 150;
    var padL = 8, padR = 8, padT = 22, padB = 14;
    var innerW = W - padL - padR;
    var innerH = H - padT - padB;

    var temps = series.map(function (s) { return s.t; });
    var min = Math.min.apply(null, temps);
    var max = Math.max.apply(null, temps);
    if (min === max) { min -= 1; max += 1; }
    var span = max - min;

    var n = series.length;
    function xAt(i) { return padL + (n <= 1 ? innerW / 2 : innerW * i / (n - 1)); }
    function yAt(t) { return padT + innerH * (1 - (t - min) / span); }

    var pts = series.map(function (s, i) { return [xAt(i), yAt(s.t)]; });

    // Smooth path (Catmull-Rom -> Bezier)
    function smooth(p) {
      if (p.length < 2) return "";
      var dd = "M" + p[0][0].toFixed(1) + "," + p[0][1].toFixed(1);
      for (var i = 0; i < p.length - 1; i++) {
        var p0 = p[i - 1] || p[i];
        var p1 = p[i];
        var p2 = p[i + 1];
        var p3 = p[i + 2] || p2;
        var c1x = p1[0] + (p2[0] - p0[0]) / 6;
        var c1y = p1[1] + (p2[1] - p0[1]) / 6;
        var c2x = p2[0] - (p3[0] - p1[0]) / 6;
        var c2y = p2[1] - (p3[1] - p1[1]) / 6;
        dd += "C" + c1x.toFixed(1) + "," + c1y.toFixed(1) + " " +
              c2x.toFixed(1) + "," + c2y.toFixed(1) + " " +
              p2[0].toFixed(1) + "," + p2[1].toFixed(1);
      }
      return dd;
    }

    var linePath = smooth(pts);
    var areaPath = linePath + " L" + pts[pts.length - 1][0].toFixed(1) + "," + (H - padB) +
                   " L" + pts[0][0].toFixed(1) + "," + (H - padB) + " Z";

    var maxI = temps.indexOf(max), minI = temps.indexOf(min);

    var dots = "";
    [maxI, minI].forEach(function (idx, k) {
      var x = xAt(idx), y = yAt(temps[idx]);
      dots += '<circle cx="' + x.toFixed(1) + '" cy="' + y.toFixed(1) + '" r="3.4" fill="#fff"/>';
      dots += '<text x="' + x.toFixed(1) + '" y="' + (y - 9).toFixed(1) +
              '" text-anchor="middle" font-size="12" font-weight="700" fill="#fff">' +
              round(temps[idx]) + '°</text>';
    });

    var svg =
      '<defs>' +
      '<linearGradient id="area" x1="0" y1="0" x2="0" y2="1">' +
        '<stop offset="0" stop-color="rgba(255,255,255,0.42)"/>' +
        '<stop offset="1" stop-color="rgba(255,255,255,0)"/>' +
      '</linearGradient>' +
      '<linearGradient id="stroke" x1="0" y1="0" x2="1" y2="0">' +
        '<stop offset="0" stop-color="#ffe6a8"/>' +
        '<stop offset="0.5" stop-color="#ffffff"/>' +
        '<stop offset="1" stop-color="#a8d8ff"/>' +
      '</linearGradient>' +
      '</defs>' +
      '<path d="' + areaPath + '" fill="url(#area)"/>' +
      '<path d="' + linePath + '" fill="none" stroke="url(#stroke)" stroke-width="2.6" ' +
        'stroke-linecap="round" stroke-linejoin="round"/>' +
      dots;

    el("chart").innerHTML = svg;
  }

  function buildHourLabels(series) {
    var host = el("hours");
    host.innerHTML = "";
    // 24 columns; show label every 3 hours
    for (var i = 0; i < series.length; i++) {
      var s = series[i];
      var div = document.createElement("div");
      div.className = "h" + (s.h % 3 === 0 ? " tick" : "");
      div.textContent = (s.h % 3 === 0) ? (String(s.h).padStart(2, "0")) : "·";
      host.appendChild(div);
    }
  }

  // ---- Boot ------------------------------------------------------------
  el("loadingDetail").textContent = name + " · " + date;

  var url = buildURL();
  var controller = null;

  fetch(url, { headers: { "Accept": "application/json" } })
    .then(function (res) {
      if (!res.ok) throw new Error("Server responded " + res.status);
      return res.json();
    })
    .then(function (data) {
      if (data && data.error) throw new Error(data.reason || "API error");
      render(data);
    })
    .catch(function (e) {
      showError(e && e.message ? e.message : "Network or data error.");
    });

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

L1 — cheap deterministic descriptors

bytes total22,128html / css / js2,634 / 6,510 / 12,984
dom nodes55dom depth10
css rules56js presentyes
brightness64.2contrast30.2
colorfulness13.4whitespace32.6%

This slot's telemetry

prompt tokens6completion tokens11,050
total tokens11,056wall126 s
cost—request id—
config.json586 B
{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_NONE",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "claude-opus-4-8-eff-xhigh--cli--cursor-xl--dev",
  "effort": "xhigh",
  "family": "claude",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "claude-opus-4-8",
  "protocol": "cli",
  "served_model": "claude-opus-4-8-xhigh",
  "telemetry": {
    "completion_tokens": 52209,
    "cost_usd": null,
    "prompt_tokens": 18,
    "total_tokens": 52227,
    "wall_ms": 528956
  },
  "transport": "cursor-agent-cli-isolated-home",
  "vendor_sanction_ref": null
}
send-log2.5 KB
{
  "N": 2,
  "batch_id": "2026-08-13--cursor-xl-s0",
  "config_id": "claude-opus-4-8-eff-xhigh--cli--cursor-xl--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-08-13T10:50:12.925476+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T10:48:25.553128+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:52:22.406178+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T10:50:16.445198+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:56:10.865621+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T10:52:26.266580+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-13T10:57:25.906505+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-13T10:56:14.871515+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
    }
  }
}