claude-opus-5 @ medium · cursor

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

The screenshot is the exact frozen pixels the similarity channels measured. Run live re-executes the raw output in a sandboxed iframe; its rendering depends on your browser and fonts and is not guaranteed to match the measured pixels.

similarity 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.3
  • min tempmatchshown: 16
  • hourlymatchcoverage 12/24 · 12 match · 0 mismatch · 12 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>
  :root{
    --bg-a:#1b2440;
    --bg-b:#2f3f6e;
    --accent:#7cc4ff;
    --ink:#f4f7ff;
    --ink-dim:rgba(244,247,255,.62);
    --ink-faint:rgba(244,247,255,.34);
    --stroke:rgba(255,255,255,.14);
    --panel:rgba(255,255,255,.07);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink);
    background:#12172a;
    display:flex;align-items:center;justify-content:center;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    overflow:hidden;
  }
  #scene{
    position:fixed;inset:0;
    background:
      radial-gradient(1100px 700px at 78% -12%, rgba(255,255,255,.20), transparent 60%),
      radial-gradient(900px 620px at 8% 108%, rgba(0,0,0,.34), transparent 62%),
      linear-gradient(150deg, var(--bg-a) 0%, var(--bg-b) 100%);
    transition:background 900ms ease;
  }
  #scene::after{
    content:"";position:absolute;inset:0;
    background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:3px 3px;
    opacity:.5;
  }
  .card{
    position:relative;
    width:1120px;height:640px;
    border-radius:32px;
    background:linear-gradient(155deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 46%, rgba(255,255,255,.03));
    border:1px solid var(--stroke);
    box-shadow:0 40px 90px -30px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.22);
    backdrop-filter:blur(26px) saturate(140%);
    -webkit-backdrop-filter:blur(26px) saturate(140%);
    display:grid;grid-template-columns:404px 1fr;
    overflow:hidden;
    opacity:0;transform:translateY(14px);
    animation:rise .7s cubic-bezier(.2,.8,.25,1) forwards;
  }
  @keyframes rise{to{opacity:1;transform:none}}
  .left{
    padding:44px 40px;
    display:flex;flex-direction:column;
    border-right:1px solid rgba(255,255,255,.10);
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  }
  .eyebrow{
    font-size:11px;letter-spacing:.20em;text-transform:uppercase;
    color:var(--ink-faint);font-weight:600;
  }
  .place{
    margin-top:12px;font-size:34px;line-height:1.12;font-weight:650;letter-spacing:-.02em;
    word-break:break-word;
  }
  .date{margin-top:10px;font-size:15px;color:var(--ink-dim);font-weight:500}
  .icon-wrap{margin-top:34px;height:118px;display:flex;align-items:center}
  .icon-wrap svg{filter:drop-shadow(0 10px 22px rgba(0,0,0,.32))}
  .temp-row{margin-top:22px;display:flex;align-items:flex-start;gap:6px}
  .temp{
    font-size:104px;line-height:.86;font-weight:250;letter-spacing:-.05em;
    font-variant-numeric:tabular-nums;
  }
  .deg{font-size:34px;font-weight:300;color:var(--ink-dim);margin-top:8px}
  .cond{margin-top:20px;font-size:21px;font-weight:550;letter-spacing:-.01em}
  .minmax{margin-top:auto;display:flex;gap:10px}
  .chip{
    flex:1;padding:14px 16px;border-radius:16px;
    background:var(--panel);border:1px solid rgba(255,255,255,.10);
  }
  .chip .k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
  .chip .v{margin-top:7px;font-size:26px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
  .chip.hi .v{color:#ffd7a6}
  .chip.lo .v{color:#b9dcff}

  .right{padding:44px 44px 34px;display:flex;flex-direction:column;min-width:0}
  .right-head{display:flex;align-items:baseline;justify-content:space-between}
  .right-head h2{font-size:15px;font-weight:600;letter-spacing:-.01em}
  .right-head .note{font-size:12px;color:var(--ink-faint);letter-spacing:.04em}
  .chart{margin-top:18px;flex:1;position:relative;min-height:0}
  .chart svg{width:100%;height:100%;display:block;overflow:visible}
  .grid-line{stroke:rgba(255,255,255,.09);stroke-width:1}
  .grid-label{fill:var(--ink-faint);font-size:10px;font-weight:600;letter-spacing:.06em}
  .x-label{fill:var(--ink-dim);font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}
  .area{opacity:0}
  .line{
    fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
    filter:drop-shadow(0 4px 12px rgba(124,196,255,.35));
  }
  .dot{fill:#fff;stroke:var(--accent);stroke-width:2}
  .peak-label{fill:var(--ink);font-size:11px;font-weight:650;font-variant-numeric:tabular-nums}
  .hit{fill:transparent;cursor:crosshair}
  .cursor-line{stroke:rgba(255,255,255,.45);stroke-width:1;stroke-dasharray:3 3;opacity:0}
  .tip{
    position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-140%);
    background:rgba(12,17,32,.92);border:1px solid rgba(255,255,255,.16);
    padding:7px 11px;border-radius:10px;white-space:nowrap;
    font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;
    box-shadow:0 12px 26px -10px rgba(0,0,0,.8);transition:opacity .12s ease;
  }
  .tip b{color:var(--accent);font-weight:700}
  .strip{margin-top:16px;display:grid;grid-template-columns:repeat(12,1fr);gap:6px}
  .cell{
    padding:9px 4px;border-radius:11px;text-align:center;
    background:var(--panel);border:1px solid rgba(255,255,255,.07);
  }
  .cell .h{font-size:9.5px;color:var(--ink-faint);font-weight:600;letter-spacing:.04em}
  .cell .t{margin-top:4px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}

  .state{
    grid-column:1 / -1;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:14px;text-align:center;padding:60px;
  }
  .spinner{
    width:34px;height:34px;border-radius:50%;
    border:2.5px solid rgba(255,255,255,.16);border-top-color:var(--accent);
    animation:spin .85s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg)}}
  .state h3{font-size:19px;font-weight:600}
  .state p{font-size:14px;color:var(--ink-dim);max-width:460px;line-height:1.55}
  .state code{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
    background:rgba(0,0,0,.28);padding:2px 6px;border-radius:6px;color:var(--ink-dim);
  }
  .err-badge{
    width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
    background:rgba(255,120,120,.14);border:1px solid rgba(255,140,140,.32);
  }
  .hidden{display:none !important}
</style>
</head>
<body>
<div id="scene"></div>

<main class="card" id="card">
  <!-- loading / error state -->
  <section class="state" id="state">
    <div class="spinner" id="spinner"></div>
    <div class="err-badge hidden" id="errBadge">
      <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#ff9d9d" stroke-width="2" stroke-linecap="round">
        <path d="M12 8v5"/><circle cx="12" cy="16.6" r="1.1" fill="#ff9d9d" stroke="none"/>
        <path d="M10.3 3.7 2.5 17.4A2 2 0 0 0 4.2 20.4h15.6a2 2 0 0 0 1.7-3L13.7 3.7a2 2 0 0 0-3.4 0Z" stroke-linejoin="round"/>
      </svg>
    </div>
    <h3 id="stateTitle">Loading weather…</h3>
    <p id="stateMsg">Fetching the forecast.</p>
  </section>

  <!-- content -->
  <section class="left hidden" id="left">
    <div class="eyebrow">Weather</div>
    <h1 class="place" id="place">—</h1>
    <div class="date" id="dateLabel">—</div>
    <div class="icon-wrap" id="iconWrap"></div>
    <div class="temp-row">
      <div class="temp" id="bigTemp">—</div>
      <div class="deg">°C</div>
    </div>
    <div class="cond" id="cond">—</div>
    <div class="minmax">
      <div class="chip hi"><div class="k">High</div><div class="v" id="hiVal">—</div></div>
      <div class="chip lo"><div class="k">Low</div><div class="v" id="loVal">—</div></div>
    </div>
  </section>

  <section class="right hidden" id="right">
    <div class="right-head">
      <h2>Hourly temperature</h2>
      <div class="note" id="srcNote">UTC · °C</div>
    </div>
    <div class="chart" id="chart">
      <svg id="svg" viewBox="0 0 660 300" preserveAspectRatio="none"></svg>
      <div class="tip" id="tip"></div>
    </div>
    <div class="strip" id="strip"></div>
  </section>
</main>

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

  var q = new URLSearchParams(location.search);
  function num(v, d){ var n = parseFloat(v); return isFinite(n) ? n : d; }

  var lat  = num(q.get("lat"), 52.52);
  var lon  = num(q.get("lon"), 13.405);
  var name = (q.get("name") || "").trim() || "Berlin";
  var todayUTC = new Date().toISOString().slice(0,10);
  var dateStr = (q.get("date") || "").trim();
  if(!/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) dateStr = todayUTC;

  var isPast = dateStr < todayUTC;
  var base = isPast ? "/api/om/archive" : "/api/om/forecast";

  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: dateStr,
    end_date: dateStr
  });
  var url = base + "?" + params.toString();

  var WMO = {
    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","rain"],53:["Moderate drizzle","rain"],55:["Dense drizzle","rain"],
    56:["Light freezing drizzle","rain"],57:["Dense freezing drizzle","rain"],
    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","storm"],96:["Thunderstorm with slight hail","storm"],99:["Thunderstorm with heavy hail","storm"]
  };

  var THEME = {
    clear:  {a:"#1d4e8f", b:"#3f8ecb", accent:"#ffd98a"},
    partly: {a:"#27436f", b:"#5b7fae", accent:"#bfe0ff"},
    cloudy: {a:"#2b3448", b:"#586477", accent:"#cfd9e6"},
    fog:    {a:"#333b47", b:"#66707d", accent:"#d7dee6"},
    rain:   {a:"#1b2c46", b:"#3d5b7d", accent:"#7cc4ff"},
    snow:   {a:"#2a3d55", b:"#6b86a3", accent:"#e6f3ff"},
    storm:  {a:"#221d3a", b:"#443a68", accent:"#c3a8ff"},
    unknown:{a:"#1b2440", b:"#2f3f6e", accent:"#7cc4ff"}
  };

  var NS = "http://www.w3.org/2000/svg";
  function icon(group){
    var s = '<svg width="118" height="118" viewBox="0 0 64 64" fill="none" stroke-linecap="round" stroke-linejoin="round">';
    var sun = '<circle cx="26" cy="24" r="9" fill="#ffd166"/>' +
      '<g stroke="#ffd166" stroke-width="3">' +
      '<path d="M26 6v5"/><path d="M26 37v5"/><path d="M8 24h5"/><path d="M39 24h5"/>' +
      '<path d="M13.4 11.4l3.5 3.5"/><path d="M35.1 33.1l3.5 3.5"/>' +
      '<path d="M38.6 11.4l-3.5 3.5"/><path d="M16.9 33.1l-3.5 3.5"/></g>';
    var cloud = '<path d="M20 50h24a10 10 0 0 0 1-19.9A14 14 0 0 0 18 28a11 11 0 0 0 2 22Z" fill="#e8eef7"/>';
    var cloudDark = '<path d="M20 48h24a10 10 0 0 0 1-19.9A14 14 0 0 0 18 26a11 11 0 0 0 2 22Z" fill="#c9d3e0"/>';
    if(group==="clear") s += sun.replace(/cx="26"/,'cx="32"').replace(/cy="24"/,'cy="30"')
        .replace(/d="M26 6v5"/,'d="M32 12v5"').replace(/d="M26 37v5"/,'d="M32 43v5"')
        .replace(/d="M8 24h5"/,'d="M14 30h5"').replace(/d="M39 24h5"/,'d="M45 30h5"')
        .replace(/d="M13.4 11.4l3.5 3.5"/,'d="M19.4 17.4l3.5 3.5"').replace(/d="M35.1 33.1l3.5 3.5"/,'d="M41.1 39.1l3.5 3.5"')
        .replace(/d="M38.6 11.4l-3.5 3.5"/,'d="M44.6 17.4l-3.5 3.5"').replace(/d="M16.9 33.1l-3.5 3.5"/,'d="M22.9 39.1l-3.5 3.5"');
    else if(group==="partly") s += sun + cloud;
    else if(group==="cloudy") s += cloudDark + '<path d="M26 54h26a9 9 0 0 0 0-18 12 12 0 0 0-23-2 9 9 0 0 0-3 20Z" fill="#f1f5fb"/>';
    else if(group==="fog") s += cloudDark.replace(/48/g,"42").replace(/26/,"22") +
      '<g stroke="#dfe7f1" stroke-width="3"><path d="M14 50h30"/><path d="M20 57h26"/></g>';
    else if(group==="rain") s += cloud.replace(/50h24/,"42h24").replace(/A14 14 0 0 0 18 28/,"A14 14 0 0 0 18 20") +
      '<g stroke="#7cc4ff" stroke-width="3.4"><path d="M22 48l-3 8"/><path d="M32 48l-3 8"/><path d="M42 48l-3 8"/></g>';
    else if(group==="snow") s += cloud.replace(/50h24/,"42h24").replace(/A14 14 0 0 0 18 28/,"A14 14 0 0 0 18 20") +
      '<g stroke="#dff0ff" stroke-width="2.8"><path d="M21 50v7"/><path d="M18 52l6 3"/><path d="M24 52l-6 3"/>' +
      '<path d="M39 50v7"/><path d="M36 52l6 3"/><path d="M42 52l-6 3"/></g>';
    else if(group==="storm") s += cloudDark.replace(/48h24/,"40h24").replace(/A14 14 0 0 0 18 26/,"A14 14 0 0 0 18 18") +
      '<path d="M32 43l-8 12h7l-3 9 10-13h-7l4-8z" fill="#ffd166"/>';
    else s += cloud;
    return s + "</svg>";
  }

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

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

  function showError(msg){
    el("spinner").classList.add("hidden");
    el("errBadge").classList.remove("hidden");
    el("stateTitle").textContent = "Weather data unavailable";
    el("stateMsg").innerHTML = msg + '<br><code>' + base + '</code>';
    el("left").classList.add("hidden");
    el("right").classList.add("hidden");
    el("state").classList.remove("hidden");
  }

  function applyTheme(group){
    var t = THEME[group] || THEME.unknown;
    var root = document.documentElement.style;
    root.setProperty("--bg-a", t.a);
    root.setProperty("--bg-b", t.b);
    root.setProperty("--accent", t.accent);
  }

  function render(data){
    var daily = data.daily || {};
    var hourly = data.hourly || {};
    var tmax = (daily.temperature_2m_max || [])[0];
    var tmin = (daily.temperature_2m_min || [])[0];
    var code = (daily.weather_code || [])[0];

    var times = hourly.time || [];
    var temps = hourly.temperature_2m || [];
    var pts = [];
    for(var i=0;i<times.length;i++){
      var v = temps[i];
      if(typeof v === "number" && isFinite(v)){
        pts.push({ h: parseInt(String(times[i]).slice(11,13),10) || 0, t: v });
      }
    }

    var haveDaily = (typeof tmax === "number" && isFinite(tmax)) && (typeof tmin === "number" && isFinite(tmin));
    if(!haveDaily && !pts.length){
      showError("The API responded, but contained no temperature values for this date and location.");
      return;
    }
    if(!haveDaily && pts.length){
      var vals = pts.map(function(p){ return p.t; });
      tmax = Math.max.apply(null, vals);
      tmin = Math.min.apply(null, vals);
    }

    var info = WMO[code] || ["Condition unavailable","unknown"];
    applyTheme(info[1]);

    el("place").textContent = name;
    el("dateLabel").textContent = fmtDate(dateStr) + " · UTC";
    el("iconWrap").innerHTML = icon(info[1]);
    el("cond").textContent = info[0];
    el("hiVal").textContent = r1(tmax) + "°";
    el("loVal").textContent = r1(tmin) + "°";
    el("srcNote").textContent = (isPast ? "Observed" : "Forecast") + " · UTC · °C";

    var feature = pts.length ? pts.reduce(function(a,b){ return Math.abs(b.h-13) < Math.abs(a.h-13) ? b : a; }).t : tmax;
    el("bigTemp").textContent = r0(feature);

    el("state").classList.add("hidden");
    el("left").classList.remove("hidden");
    el("right").classList.remove("hidden");

    drawChart(pts);
    drawStrip(pts);
  }

  function drawStrip(pts){
    var strip = el("strip");
    strip.innerHTML = "";
    if(!pts.length){ strip.classList.add("hidden"); return; }
    var step = pts.length > 12 ? Math.ceil(pts.length/12) : 1;
    for(var i=0;i<pts.length;i+=step){
      var p = pts[i];
      var d = document.createElement("div");
      d.className = "cell";
      d.innerHTML = '<div class="h">' + (p.h<10?"0":"") + p.h + ':00</div><div class="t">' + r0(p.t) + '°</div>';
      strip.appendChild(d);
    }
  }

  function drawChart(pts){
    var svg = el("svg");
    while(svg.firstChild) svg.removeChild(svg.firstChild);
    var tip = el("tip");

    if(!pts.length){
      var msg = document.createElementNS(NS,"text");
      msg.setAttribute("x","330"); msg.setAttribute("y","150");
      msg.setAttribute("text-anchor","middle");
      msg.setAttribute("class","x-label");
      msg.textContent = "No hourly temperatures available for this date.";
      svg.appendChild(msg);
      return;
    }

    var W=660,H=300, L=38,R=14,T=26,B=30;
    var iw=W-L-R, ih=H-T-B;
    var vals = pts.map(function(p){ return p.t; });
    var lo = Math.min.apply(null,vals), hi = Math.max.apply(null,vals);
    var pad = Math.max((hi-lo)*0.22, 1.2);
    var y0 = lo-pad, y1 = hi+pad;
    var X = function(i){ return L + (pts.length===1 ? iw/2 : iw*i/(pts.length-1)); };
    var Y = function(v){ return T + ih - ih*(v-y0)/(y1-y0); };

    function add(tag, attrs, cls){
      var n = document.createElementNS(NS,tag);
      for(var k in attrs) n.setAttribute(k, attrs[k]);
      if(cls) n.setAttribute("class", cls);
      svg.appendChild(n);
      return n;
    }

    var defs = document.createElementNS(NS,"defs");
    defs.innerHTML =
      '<linearGradient id="fill" x1="0" y1="0" x2="0" y2="1">' +
      '<stop offset="0%" stop-color="var(--accent)" stop-opacity=".42"/>' +
      '<stop offset="100%" stop-color="var(--accent)" stop-opacity="0"/></linearGradient>';
    svg.appendChild(defs);

    // horizontal gridlines
    var ticks = 4;
    for(var g=0; g<=ticks; g++){
      var v = y0 + (y1-y0)*g/ticks;
      var y = Y(v);
      add("line",{x1:L,y1:y,x2:W-R,y2:y},"grid-line");
      var lab = add("text",{x:L-9,y:y+3.5,"text-anchor":"end"},"grid-label");
      lab.textContent = r0(v) + "°";
    }

    // smooth path (Catmull-Rom → cubic Bézier)
    function pathD(closed){
      var d = "M" + X(0) + "," + Y(pts[0].t);
      for(var i=0;i<pts.length-1;i++){
        var p0=pts[i>0?i-1:0], p1=pts[i], p2=pts[i+1], p3=pts[i+2<pts.length?i+2:i+1];
        var x0=X(i>0?i-1:0), x1=X(i), x2=X(i+1), x3=X(i+2<pts.length?i+2:i+1);
        var c1x = x1 + (x2-x0)/6, c1y = Y(p1.t) + (Y(p2.t)-Y(p0.t))/6;
        var c2x = x2 - (x3-x1)/6, c2y = Y(p2.t) - (Y(p3.t)-Y(p1.t))/6;
        d += "C" + c1x + "," + c1y + " " + c2x + "," + c2y + " " + x2 + "," + Y(p2.t);
      }
      if(closed) d += "L" + X(pts.length-1) + "," + (T+ih) + "L" + X(0) + "," + (T+ih) + "Z";
      return d;
    }

    var area = add("path",{d:pathD(true), fill:"url(#fill)"},"area");
    var line = add("path",{d:pathD(false)},"line");

    var len = line.getTotalLength ? line.getTotalLength() : 0;
    if(len){
      line.style.strokeDasharray = len;
      line.style.strokeDashoffset = len;
      line.style.transition = "stroke-dashoffset 1.15s cubic-bezier(.25,.8,.3,1)";
      requestAnimationFrame(function(){ line.style.strokeDashoffset = "0"; });
    }
    area.style.transition = "opacity .8s ease .35s";
    requestAnimationFrame(function(){ area.style.opacity = "1"; });

    // x labels every 3rd hour
    var lstep = pts.length > 8 ? Math.ceil(pts.length/8) : 1;
    for(var i=0;i<pts.length;i+=lstep){
      var tx = add("text",{x:X(i), y:H-8, "text-anchor":"middle"},"x-label");
      tx.textContent = (pts[i].h<10?"0":"") + pts[i].h;
    }

    // extreme markers
    var iHi = vals.indexOf(hi), iLo = vals.indexOf(lo);
    [[iHi,-13],[iLo,20]].forEach(function(m){
      var i = m[0];
      add("circle",{cx:X(i), cy:Y(pts[i].t), r:4},"dot");
      var lb = add("text",{x:X(i), y:Y(pts[i].t)+m[1], "text-anchor":"middle"},"peak-label");
      lb.textContent = r1(pts[i].t) + "°";
    });

    // hover interaction
    var cur = add("line",{x1:0,y1:T,x2:0,y2:T+ih},"cursor-line");
    var hov = add("circle",{cx:0,cy:0,r:5,opacity:0},"dot");
    var hit = add("rect",{x:0,y:0,width:W,height:H},"hit");
    var chart = el("chart");

    hit.addEventListener("mousemove", function(e){
      var box = chart.getBoundingClientRect();
      var sx = (e.clientX - box.left) / box.width * W;
      var idx = 0, best = Infinity;
      for(var i=0;i<pts.length;i++){
        var d = Math.abs(X(i)-sx);
        if(d<best){ best=d; idx=i; }
      }
      var px = X(idx), py = Y(pts[idx].t);
      cur.setAttribute("x1",px); cur.setAttribute("x2",px);
      cur.style.opacity = 1;
      hov.setAttribute("cx",px); hov.setAttribute("cy",py); hov.setAttribute("opacity",1);
      tip.innerHTML = ((pts[idx].h<10?"0":"") + pts[idx].h) + ":00 &nbsp;<b>" + r1(pts[idx].t) + "°C</b>";
      tip.style.left = (px/W*box.width) + "px";
      tip.style.top  = (py/H*box.height) + "px";
      tip.style.opacity = 1;
    });
    hit.addEventListener("mouseleave", function(){
      cur.style.opacity = 0; hov.setAttribute("opacity",0); tip.style.opacity = 0;
    });
  }

  var timeout = setTimeout(function(){ /* no-op guard */ }, 0);
  clearTimeout(timeout);

  var controller = ("AbortController" in window) ? new AbortController() : null;
  var timer = setTimeout(function(){ if(controller) controller.abort(); }, 15000);

  fetch(url, controller ? {signal:controller.signal} : undefined)
    .then(function(res){
      clearTimeout(timer);
      if(!res.ok) throw new Error("The weather service returned HTTP " + res.status + ".");
      return res.json();
    })
    .then(function(data){
      if(!data || typeof data !== "object") throw new Error("The weather service returned an unreadable response.");
      if(data.error) throw new Error(String(data.reason || "The weather service reported an error."));
      render(data);
    })
    .catch(function(err){
      clearTimeout(timer);
      var m = (err && err.name === "AbortError")
        ? "The request timed out after 15 seconds."
        : (err && err.message ? err.message : "An unknown error occurred.");
      showError("Could not load weather for " + name + " on " + dateStr + ". " + m);
    });
})();
</script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total22,108html / css / js1,947 / 6,176 / 13,985
dom nodes43dom depth7
css rules55js presentyes
brightness78.3contrast19.2
colorfulness29.8whitespace50.0%

This slot's telemetry

prompt tokens2completion tokens11,621
total tokens11,623wall124.3 s
cost—request id—
config.json579 B
{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_NONE",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "claude-opus-5-eff-medium--cli--cursor--dev",
  "effort": "medium",
  "family": "claude",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "claude-opus-5",
  "protocol": "cli",
  "served_model": "claude-opus-5-medium",
  "telemetry": {
    "completion_tokens": 33692,
    "cost_usd": null,
    "prompt_tokens": 8,
    "total_tokens": 33700,
    "wall_ms": 365179
  },
  "transport": "cursor-agent-cli-isolated-home",
  "vendor_sanction_ref": null
}
send-log2.5 KB
{
  "N": 2,
  "batch_id": "2026-08-13--cursor-s2",
  "config_id": "claude-opus-5-eff-medium--cli--cursor--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-08-12T17:50:52.862020+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:48:48.520382+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-12T17:51:42.947681+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:50:56.787292+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-12T17:52:48.640334+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:51:46.234261+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-12T17:55:04.271196+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:52:51.957952+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
    }
  }
}