deepseek-v4-pro-0812 @ max · dsh

dshmax

config: deepseek-v4-pro-0812-eff-max--cli--dsh--dev
batch: 2026-07-19--unified
transport: dsh-0.1.0-rc.8-headless-isolated-home
protocol: cli · api
served model: deepseek-v4-pro
captured: Jul 18, 2026, 11:54 AM · N=2

variant

live

slot 0 · P-q · sandboxed iframe

deepseek-v4-pro-0812 @max · dsh P-q slot 0 screenshot

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

similarity neighborsNo similarity data for this session — this batch has no computed pairs.

Fidelity — does the card show the right data?

namematch
conditionmatch
datematch
max tempmismatchshown: 16
min tempmismatchshown: 25.3
hourlymatchcoverage 1/24 · 1 match · 0 mismatch · 23 not shown
request sidematch0 violation(s)

extractor fidelity-extractor-v1+Berlin-2026-07-15

Source — raw model output, one byte unchanged

download card.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light">
<title>Weather</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#152238;
  --muted:#62748e;
  --line:rgba(21,34,56,.09);
  --warm:#f97316;
  --warm-deep:#c2410c;
  --cool:#0ea5e9;
  --cool-deep:#0369a1;
  --card-a:rgba(255,255,255,.9);
  --card-b:rgba(255,255,255,.62);
}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex;
  padding:40px;
  overflow:auto;
  background:linear-gradient(165deg,var(--bg-a) 0%,var(--bg-b) 52%,var(--bg-c) 100%);
  background-attachment:fixed;
  --bg-a:#1d5d9e;
  --bg-b:#3d8ed6;
  --bg-c:#8ec4ec;
  --accent:#f59e0b;
  --accent-deep:#b45309;
  --accent-soft:rgba(245,158,11,.16);
}
body.theme-partly{--bg-a:#2d5c94;--bg-b:#6e9dc8;--bg-c:#b9d4e8;--accent:#f59e0b;--accent-deep:#b45309;--accent-soft:rgba(245,158,11,.16)}
body.theme-cloudy{--bg-a:#3f4e68;--bg-b:#72829a;--bg-c:#a6b2c2;--accent:#64748b;--accent-deep:#334155;--accent-soft:rgba(100,116,139,.18)}
body.theme-fog{--bg-a:#43525f;--bg-b:#75848f;--bg-c:#aebcc4;--accent:#0d9488;--accent-deep:#0f766e;--accent-soft:rgba(13,148,136,.16)}
body.theme-rain{--bg-a:#1e2f4e;--bg-b:#3c587d;--bg-c:#6d88a8;--accent:#38bdf8;--accent-deep:#0284c7;--accent-soft:rgba(56,189,248,.17)}
body.theme-snow{--bg-a:#3a5d80;--bg-b:#7498b6;--bg-c:#c2d7e5;--accent:#38bdf8;--accent-deep:#0369a1;--accent-soft:rgba(56,189,248,.17)}
body.theme-thunder{--bg-a:#26234e;--bg-b:#4b4788;--bg-c:#7f79b8;--accent:#818cf8;--accent-deep:#4338ca;--accent-soft:rgba(129,140,248,.17)}
body::before,body::after{content:"";position:fixed;z-index:0;border-radius:50%;pointer-events:none;filter:blur(90px)}
body::before{width:620px;height:620px;top:-210px;left:-170px;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.5),rgba(255,255,255,0) 65%)}
body::after{width:740px;height:740px;right:-250px;bottom:-280px;background:radial-gradient(circle at 55% 45%,rgba(255,255,255,.3),rgba(255,255,255,0) 65%)}

.card{
  position:relative;z-index:1;
  width:min(1020px,100%);
  margin:auto;
  border-radius:30px;
  padding:44px 48px 38px;
  background:linear-gradient(180deg,var(--card-a),var(--card-b));
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 30px 80px rgba(10,24,50,.35),0 6px 18px rgba(10,24,50,.12),inset 0 1px 0 rgba(255,255,255,.9);
  animation:rise .6s cubic-bezier(.21,.9,.32,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

.card-head,.main,.card-foot,.state{animation:fadeUp .5s cubic-bezier(.21,.9,.32,1) both}
.main{animation-delay:.06s}
.card-foot{animation-delay:.12s}

.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.loc{min-width:0}
.loc-name{display:flex;align-items:center;gap:13px;font-size:33px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.loc-name svg{width:26px;height:26px;flex:none;color:var(--accent-deep)}
.loc-name span{overflow-wrap:anywhere}
.loc-date{margin-top:9px;font-size:15.5px;font-weight:500;color:var(--muted)}
.cond-chip{
  flex:none;display:inline-flex;align-items:center;gap:10px;margin-top:4px;
  padding:11px 20px 11px 14px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-deep);
  font-size:15px;font-weight:700;letter-spacing:.01em;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 2px 10px rgba(10,24,50,.08);
}
.cond-chip svg{width:22px;height:22px;flex:none}

.main{display:flex;margin-top:34px;align-items:stretch}
.temps{
  width:252px;flex:none;display:flex;flex-direction:column;gap:30px;justify-content:center;
  padding-right:38px;border-right:1px solid var(--line);
}
.t-label{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.t-label svg{width:15px;height:15px}
.t-label.warm svg{color:var(--warm)}
.t-label.cool svg{color:var(--cool)}
.t-value{margin-top:8px;font-size:64px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.t-value.warm{color:var(--warm-deep)}
.t-value.cool{color:var(--cool-deep)}
.t-value .unit{font-size:26px;font-weight:700;letter-spacing:0;margin-left:4px;vertical-align:14px}
.t-sub{margin-top:10px;font-size:13.5px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}

.chart{flex:1;min-width:0;display:flex;flex-direction:column;padding-left:38px}
.chart-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.chart-title{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.chart-range{font-size:12.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.chart-wrap{position:relative;flex:1;min-height:230px;cursor:crosshair}
.chart-svg{position:absolute;inset:0;width:100%;height:100%}
.grid line{stroke:rgba(21,34,56,.07);stroke-width:1;vector-effect:non-scaling-stroke}
.grid line.dash{stroke-dasharray:3 5}
.area{fill:url(#areaFill)}
#areaFill stop:first-child{stop-color:var(--accent);stop-opacity:.34}
#areaFill stop:nth-child(2){stop-color:var(--accent);stop-opacity:.07}
#areaFill stop:last-child{stop-color:var(--accent);stop-opacity:.015}
.dots-under{fill:none;stroke:rgba(255,255,255,.95);stroke-width:8;stroke-linecap:round;vector-effect:non-scaling-stroke}
.dots-over{fill:none;stroke:var(--accent-deep);stroke-width:4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.line{fill:none;stroke:var(--accent-deep);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.cursor{position:absolute;top:0;bottom:0;width:1px;background:rgba(21,34,56,.25);pointer-events:none;opacity:0;transition:opacity .12s ease}
.dot{
  position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:var(--accent-deep);border:2.5px solid #fff;
  box-shadow:0 2px 6px rgba(15,30,60,.35);pointer-events:none;opacity:0;transition:opacity .12s ease;
}
.ext{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 6px rgba(15,30,60,.3);pointer-events:none}
.ext-max{background:var(--warm)}
.ext-min{background:var(--cool)}
.tip{
  position:absolute;z-index:2;transform:translate(-50%,calc(-100% - 13px));
  background:#152238;color:#fff;border-radius:10px;padding:7px 12px;
  font-size:12.5px;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s ease;
  box-shadow:0 10px 26px rgba(15,30,60,.35);font-variant-numeric:tabular-nums;
}
.tip::after{content:"";position:absolute;left:50%;bottom:-4.5px;width:9px;height:9px;background:#152238;transform:translateX(-50%) rotate(45deg);border-radius:2px}
.tip-sep{opacity:.5;margin:0 7px;font-weight:500}

.axis{position:relative;height:24px;margin-top:2px}
.axis span{position:absolute;top:4px;font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.axis span[data-align="mid"]{transform:translateX(-50%)}
.axis span[data-align="end"]{transform:translateX(-100%)}

.card-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:30px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;font-weight:500;color:var(--muted)}

.state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:56px 24px 48px;min-height:300px}
.spin{width:30px;height:30px;border-radius:50%;border:3px solid rgba(21,34,56,.14);border-top-color:var(--ink);animation:spin .9s linear infinite;margin-bottom:10px}
.state-load{font-size:15px;font-weight:600;color:var(--muted)}
.err-icon svg{width:54px;height:54px;color:#8ea0b8;margin-bottom:4px}
.state-title{font-size:21px;font-weight:800;letter-spacing:-.01em}
.state-sub{font-size:14.5px;line-height:1.55;color:var(--muted);max-width:460px}
.retry{
  margin-top:16px;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:14px;
  color:#fff;background:var(--ink);padding:11px 26px;border-radius:999px;
  box-shadow:0 8px 20px rgba(21,34,56,.25);
  transition:transform .15s ease,background .15s ease;
}
.retry:hover{background:#24385c;transform:translateY(-1px)}
.retry:active{transform:translateY(0)}
.retry:focus-visible{outline:3px solid rgba(56,189,248,.5);outline-offset:2px}

.noscript{position:fixed;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;color:#fff;font-size:16px;font-weight:600;text-shadow:0 1px 10px rgba(0,0,0,.25)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
</style>
</head>
<body>
<main class="card" id="card" aria-live="polite">
  <div class="state">
    <div class="spin"></div>
    <p class="state-load">Loading weather…</p>
  </div>
</main>
<noscript><div class="noscript">JavaScript is required to load the weather.</div></noscript>
<script>
(() => {
  'use strict';

  /* ---------- helpers ---------- */
  const $ = (sel) => document.querySelector(sel);
  const esc = (s) => String(s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
  const pad2 = (n) => String(n).padStart(2, '0');
  const fmtTemp = (v) => { const r = Math.round(v * 10) / 10; return Number.isInteger(r) ? String(r) : r.toFixed(1); };
  const round = (v) => Math.round(v);

  const svgIcon = (inner) =>
    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' + inner + '</svg>';

  const CLOUD = 'M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10Z';
  const cloud = (extra, transform) => '<g' + (transform ? ' transform="' + transform + '"' : '') + '><path d="' + CLOUD + '"/>' + (extra || '') + '</g>';

  const ICONS = {
    sun: svgIcon('<circle cx="12" cy="12" r="4.4"/><path d="M12 2.4v2.4M12 19.2v2.4M2.4 12h2.4M19.2 12h2.4M5.2 5.2l1.7 1.7M17.1 17.1l1.7 1.7M5.2 18.8l1.7-1.7M17.1 6.9l1.7-1.7"/>'),
    partly: svgIcon('<circle cx="8.2" cy="8.4" r="3.1"/><path d="M8.2 2.6v1.4M3.9 4.4l1 .9M12.5 4.4l-1 .9"/>' + cloud('', 'translate(6.8 5.2) scale(.74)')),
    cloud: svgIcon(cloud('', 'translate(1.5 .5)')),
    fog: svgIcon(cloud('<path d="M6 21.2h12M8 23.2h8"/>', 'translate(1.5 -1)')),
    drizzle: svgIcon(cloud('<path d="M7.8 20.6v1.6M12 20.6v1.6M16.2 20.6v1.6"/>', 'translate(1.5 -1)')),
    rain: svgIcon(cloud('<path d="m7.4 20.9-1.1 2.1M12 20.9l-1.1 2.1M16.6 20.9l-1.1 2.1"/>', 'translate(1.5 -1)')),
    snow: svgIcon(cloud('<path d="M7.6 20.6v1.8M6.9 21.1l1.4.8M6.9 21.9l1.4-.8M12 20.6v1.8M11.3 21.1l1.4.8M11.3 21.9l1.4-.8M16.4 20.6v1.8M15.7 21.1l1.4.8M15.7 21.9l1.4-.8"/>', 'translate(1.5 -1)')),
    thunder: svgIcon(cloud('', 'translate(2 -1) scale(.8)') + '<polygon points="19.3 16.6 14.9 21.3 17.4 21.3 15.9 23.6 20.6 18.8 17.8 18.8 19.3 16.6" fill="currentColor" stroke="none"/>'),
    cloudOff: svgIcon(cloud('', 'translate(1.5 .5)') + '<path d="M3.5 3.5l17 17"/>'),
    pin: svgIcon('<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/>'),
    up: svgIcon('<path d="M12 19V5M5 12l7-7 7 7"/>'),
    down: svgIcon('<path d="M12 5v14M19 12l-7 7-7-7"/>')
  };

  /* ---------- URL parameters ---------- */
  const params = new URLSearchParams(window.location.search);
  const numParam = (key, fallback) => {
    const raw = params.get(key);
    if (raw === null || raw.trim() === '') return fallback;
    const v = Number(raw);
    return Number.isFinite(v) ? v : fallback;
  };
  const lat = numParam('lat', 52.52);
  const lon = numParam('lon', 13.405);
  const name = (params.get('name') || '').trim() || 'Berlin';
  const today = new Date().toISOString().slice(0, 10);
  const date = (params.get('date') || '').trim() || today;

  const prettyDate = (iso) => {
    const d = new Date(iso + 'T12:00:00Z');
    if (isNaN(d.getTime())) return iso;
    return new Intl.DateTimeFormat('en-GB', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric', timeZone: 'UTC' }).format(d);
  };
  const dateLabel = (iso) => (iso === today ? 'Today · ' + prettyDate(iso) : prettyDate(iso));

  /* ---------- WMO weather-code mapping ---------- */
  const conditionOf = (code) => {
    if (code === 0) return { key: 'clear', label: 'Clear sky', icon: ICONS.sun };
    if (code === 1) return { key: 'clear', label: 'Mainly clear', icon: ICONS.sun };
    if (code === 2) return { key: 'partly', label: 'Partly cloudy', icon: ICONS.partly };
    if (code === 3) return { key: 'cloudy', label: 'Overcast', icon: ICONS.cloud };
    if (code === 45 || code === 48) return { key: 'fog', label: 'Fog', icon: ICONS.fog };
    if (code >= 51 && code <= 57) return { key: 'rain', label: 'Drizzle', icon: ICONS.drizzle };
    if (code === 66 || code === 67) return { key: 'rain', label: 'Freezing rain', icon: ICONS.rain };
    if (code >= 61 && code <= 65) return { key: 'rain', label: 'Rain', icon: ICONS.rain };
    if (code >= 80 && code <= 82) return { key: 'rain', label: 'Rain showers', icon: ICONS.rain };
    if (code >= 71 && code <= 77) return { key: 'snow', label: 'Snow', icon: ICONS.snow };
    if (code === 85 || code === 86) return { key: 'snow', label: 'Snow showers', icon: ICONS.snow };
    if (code >= 95) return { key: 'thunder', label: 'Thunderstorm', icon: ICONS.thunder };
    return { key: 'cloudy', label: 'Unknown', icon: ICONS.cloud };
  };

  const card = $('#card');

  /* ---------- states ---------- */
  const renderLoading = () => {
    card.innerHTML = '<div class="state"><div class="spin"></div><p class="state-load" id="loadText"></p></div>';
    $('#loadText').textContent = 'Loading weather for ' + name + '…';
  };

  const renderError = (title, sub) => {
    card.innerHTML =
      '<div class="state">' +
      '<div class="err-icon">' + ICONS.cloudOff + '</div>' +
      '<p class="state-title">' + esc(title) + '</p>' +
      '<p class="state-sub">' + esc(sub) + '</p>' +
      '<button type="button" class="retry" id="retryBtn">Try again</button>' +
      '</div>';
    $('#retryBtn').addEventListener('click', load);
  };

  const friendly = (err) => {
    const m = String((err && err.message) || err || '');
    if (/failed to fetch|networkerror|load failed|aborted|timed?\s?out/i.test(m)) return 'The server did not respond in time. Check your connection and try again.';
    return m || 'Something went wrong while loading the data.';
  };

  /* ---------- hourly chart ---------- */
  const smoothPath = (pts) => {
    const n = pts.length;
    if (n < 2) return '';
    if (n === 2) return 'M' + pts[0].x + ' ' + pts[0].y + 'L' + pts[1].x + ' ' + pts[1].y;
    let d = 'M' + pts[0].x + ' ' + pts[0].y;
    for (let k = 0; k < n - 1; k++) {
      const p0 = pts[Math.max(0, k - 1)];
      const p1 = pts[k];
      const p2 = pts[k + 1];
      const p3 = pts[Math.min(n - 1, k + 2)];
      d += 'C' + (p1.x + (p2.x - p0.x) / 6) + ' ' + (p1.y + (p2.y - p0.y) / 6) + ' ' +
           (p2.x - (p3.x - p1.x) / 6) + ' ' + (p2.y - (p3.y - p1.y) / 6) + ' ' +
           p2.x + ' ' + p2.y;
    }
    return d;
  };

  const buildChart = (hours) => {
    const wrap = $('#chartWrap');
    const W = 640, H = 240, padX = 26, padY = 32;
    const n = hours.length;
    const vs = hours.map((o) => o.v);
    const loRaw = Math.min.apply(null, vs);
    const hiRaw = Math.max.apply(null, vs);
    const lo = hiRaw - loRaw < 0.5 ? loRaw - 1 : loRaw;
    const hi = hiRaw - loRaw < 0.5 ? hiRaw + 1 : hiRaw;
    const xAt = (i) => padX + (i * (W - 2 * padX)) / (n - 1);
    const yAt = (v) => padY + ((hi - v) / (hi - lo)) * (H - 2 * padY);
    const pts = hours.map((o, i) => ({ x: xAt(i), y: yAt(o.v) }));

    const line = smoothPath(pts);
    const area = line + ' L' + pts[n - 1].x + ' ' + (H - padY) + ' L' + pts[0].x + ' ' + (H - padY) + 'Z';
    const dots = pts.map((p) => 'M' + p.x + ' ' + p.y + 'h.01').join('');
    const grid = [0.25, 0.5, 0.75].map((f) => {
      const gy = padY + f * (H - 2 * padY);
      return '<line class="dash" x1="' + padX + '" y1="' + gy + '" x2="' + (W - padX) + '" y2="' + gy + '"/>';
    }).join('');

    wrap.innerHTML =
      '<svg class="chart-svg" viewBox="0 0 ' + W + ' ' + H + '" preserveAspectRatio="none" aria-hidden="true">' +
      '<defs><linearGradient id="areaFill" x1="0" y1="0" x2="0" y2="1">' +
      '<stop offset="0"/><stop offset=".75"/><stop offset="1"/>' +
      '</linearGradient></defs>' +
      '<g class="grid">' +
      '<line x1="' + padX + '" y1="' + padY + '" x2="' + (W - padX) + '" y2="' + padY + '"/>' +
      '<line x1="' + padX + '" y1="' + (H - padY) + '" x2="' + (W - padX) + '" y2="' + (H - padY) + '"/>' +
      grid +
      '</g>' +
      '<path class="area" d="' + area + '"/>' +
      '<path class="dots-under" d="' + dots + '"/>' +
      '<path class="dots-over" d="' + dots + '"/>' +
      '<path class="line" d="' + line + '"/>' +
      '</svg>' +
      '<div class="cursor" id="cursor"></div>' +
      '<div class="dot" id="hovDot"></div>' +
      '<div class="ext ext-max" id="extMax"></div>' +
      '<div class="ext ext-min" id="extMin"></div>' +
      '<div class="tip" id="tip"><span id="tipTime"></span><span class="tip-sep">·</span><span id="tipVal"></span></div>';

    const maxIdx = vs.indexOf(hiRaw);
    const minIdx = vs.indexOf(loRaw);
    const place = (el, idx) => {
      el.style.left = (pts[idx].x / W) * 100 + '%';
      el.style.top = (pts[idx].y / H) * 100 + '%';
    };
    place($('#extMax'), maxIdx);
    place($('#extMin'), minIdx);

    const axis = $('#axis');
    axis.innerHTML = '';
    [0, 6, 12, 18, 23].forEach((h) => {
      const idx = hours.findIndex((o) => o.h === h);
      if (idx === -1) return;
      const el = document.createElement('span');
      el.textContent = pad2(h) + ':00';
      el.style.left = (pts[idx].x / W) * 100 + '%';
      el.dataset.align = idx === 0 ? 'start' : idx === n - 1 ? 'end' : 'mid';
      axis.appendChild(el);
    });

    const cursor = $('#cursor');
    const hovDot = $('#hovDot');
    const tip = $('#tip');
    const tipTime = $('#tipTime');
    const tipVal = $('#tipVal');

    const show = (idx) => {
      const p = pts[idx];
      const xPct = (p.x / W) * 100;
      cursor.style.left = xPct + '%';
      hovDot.style.left = xPct + '%';
      hovDot.style.top = (p.y / H) * 100 + '%';
      tipTime.textContent = pad2(hours[idx].h) + ':00';
      tipVal.textContent = fmtTemp(hours[idx].v) + '°C';
      const rect = wrap.getBoundingClientRect();
      const px = (p.x / W) * rect.width;
      const half = tip.offsetWidth / 2;
      let left = px;
      if (left - half < 10) left = half + 10;
      else if (left + half > rect.width - 10) left = rect.width - half - 10;
      tip.style.left = left + 'px';
      cursor.style.opacity = '1';
      hovDot.style.opacity = '1';
      tip.style.opacity = '1';
    };
    const hide = () => {
      cursor.style.opacity = '0';
      hovDot.style.opacity = '0';
      tip.style.opacity = '0';
    };

    wrap.addEventListener('pointermove', (e) => {
      const rect = wrap.getBoundingClientRect();
      const rel = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
      show(Math.min(n - 1, Math.max(0, Math.round(rel * (n - 1)))));
    });
    wrap.addEventListener('pointerleave', hide);

    show(maxIdx);
  };

  /* ---------- weather rendering ---------- */
  const renderWeather = (data) => {
    const daily = (data && data.daily) || {};
    const hourly = (data && data.hourly) || {};
    const times = Array.isArray(daily.time) ? daily.time : [];
    const i = times.indexOf(date);
    if (i === -1) throw new Error('No data is available for ' + date + ' at this location.');
    const tMax = daily.temperature_2m_max ? daily.temperature_2m_max[i] : null;
    const tMin = daily.temperature_2m_min ? daily.temperature_2m_min[i] : null;
    const code = daily.weather_code ? daily.weather_code[i] : null;
    if (!Number.isFinite(tMax) || !Number.isFinite(tMin)) throw new Error('Temperature data is missing for ' + date + '.');

    const hours = [];
    if (Array.isArray(hourly.time) && Array.isArray(hourly.temperature_2m)) {
      for (let k = 0; k < hourly.time.length; k++) {
        const t = hourly.time[k];
        const v = hourly.temperature_2m[k];
        if (typeof t === 'string' && t.indexOf(date + 'T') === 0 && Number.isFinite(v)) {
          hours.push({ h: Number(t.slice(11, 13)), v: v });
        }
      }
    }
    if (hours.length < 2) throw new Error('Hourly temperature data is missing for ' + date + '.');

    const cond = conditionOf(code);
    document.body.className = 'theme-' + cond.key;
    document.title = name + ' · ' + date;

    card.innerHTML =
      '<header class="card-head">' +
      '<div class="loc">' +
      '<h1 class="loc-name">' + ICONS.pin + '<span>' + esc(name) + '</span></h1>' +
      '<p class="loc-date">' + esc(dateLabel(date)) + '</p>' +
      '</div>' +
      '<div class="cond-chip">' + cond.icon + '<span>' + esc(cond.label) + '</span></div>' +
      '</header>' +
      '<div class="main">' +
      '<section class="temps" aria-label="Daily temperatures">' +
      '<div class="t-block">' +
      '<div class="t-label warm">' + ICONS.up + '<span>High</span></div>' +
      '<div class="t-value warm"><span id="tMax"></span><span class="unit">°C</span></div>' +
      '<p class="t-sub" id="maxAt"></p>' +
      '</div>' +
      '<div class="t-block">' +
      '<div class="t-label cool">' + ICONS.down + '<span>Low</span></div>' +
      '<div class="t-value cool"><span id="tMin"></span><span class="unit">°C</span></div>' +
      '<p class="t-sub" id="minAt"></p>' +
      '</div>' +
      '</section>' +
      '<section class="chart" aria-label="Hourly temperatures">' +
      '<div class="chart-head">' +
      '<span class="chart-title">Hourly temperature</span>' +
      '<span class="chart-range" id="chartRange"></span>' +
      '</div>' +
      '<div class="chart-wrap" id="chartWrap"></div>' +
      '<div class="axis" id="axis"></div>' +
      '</section>' +
      '</div>' +
      '<footer class="card-foot">' +
      '<span>Timezone UTC · Temperatures in Celsius</span>' +
      '<span>Data: Open-Meteo</span>' +
      '</footer>';

    $('#tMax').textContent = round(tMax);
    $('#tMin').textContent = round(tMin);

    const vs = hours.map((o) => o.v);
    const maxIdx = vs.indexOf(Math.max.apply(null, vs));
    const minIdx = vs.indexOf(Math.min.apply(null, vs));
    $('#maxAt').textContent = 'Warmest around ' + pad2(hours[maxIdx].h) + ':00';
    $('#minAt').textContent = 'Coolest around ' + pad2(hours[minIdx].h) + ':00';
    $('#chartRange').textContent = fmtTemp(Math.min.apply(null, vs)) + '° – ' + fmtTemp(Math.max.apply(null, vs)) + '°';

    buildChart(hours);
  };

  /* ---------- load ---------- */
  const load = async () => {
    if (!/^\d{4}-\d{2}-\d{2}$/.test(date)) {
      renderError("That date doesn't look right", 'Expected a YYYY-MM-DD date, got "' + date + '".');
      return;
    }
    if (isNaN(new Date(date + 'T00:00:00Z').getTime())) {
      renderError("That date doesn't look right", '"' + date + '" is not a real calendar date.');
      return;
    }
    renderLoading();

    const endpoint = date < today ? '/api/om/archive' : '/api/om/forecast';
    const q = 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
    });

    let json;
    const ctrl = new AbortController();
    const timer = setTimeout(() => ctrl.abort(), 15000);
    try {
      const res = await fetch(endpoint + '?' + q.toString(), { headers: { Accept: 'application/json' }, signal: ctrl.signal });
      if (!res.ok) throw new Error('The server responded with HTTP ' + res.status + '.');
      json = await res.json();
      if (json && json.error) throw new Error(json.reason || 'The server rejected the request.');
    } catch (err) {
      renderError("We couldn't load the weather", friendly(err));
      return;
    } finally {
      clearTimeout(timer);
    }

    try {
      renderWeather(json);
    } catch (err) {
      renderError("We couldn't load the weather", friendly(err));
    }
  };

  try {
    load();
  } catch (err) {
    renderError("We couldn't load the weather", friendly(err));
  }
})();
</script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total	25,005	html / css / js	521 / 8,938 / 15,546
dom nodes	15	dom depth	5
css rules	85	js present	yes
brightness	154.7	contrast	62.3
colorfulness	28.8	whitespace	36.4%

This slot's telemetry

prompt tokens	8,508	completion tokens	77,778
total tokens	86,286	wall	888.6 s
cost	—	request id	—

config.json598 B

{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_DEEPSEEK_KEY",
    "method": "api-key"
  },
  "billing": "api",
  "config_id": "deepseek-v4-pro-0812-eff-max--cli--dsh--dev",
  "effort": "max",
  "family": "deepseek",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "deepseek-v4-pro-0812",
  "protocol": "cli",
  "served_model": "deepseek-v4-pro",
  "telemetry": {
    "completion_tokens": 173677,
    "cost_usd": null,
    "prompt_tokens": 45386,
    "total_tokens": 219063,
    "wall_ms": 1950323
  },
  "transport": "dsh-0.1.0-rc.8-headless-isolated-home",
  "vendor_sanction_ref": null
}

send-log2.5 KB

{
  "N": 2,
  "batch_id": "2026-08-21--dsh-s1",
  "config_id": "deepseek-v4-pro-0812-eff-max--cli--dsh--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-08-21T13:15:53.051410+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-21T13:01:04.434576+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-21T13:19:01.640918+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-21T13:15:56.721794+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-21T13:20:15.085699+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-21T13:19:05.364887+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-21T13:33:45.689569+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-21T13:20:18.548258+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
    }
  }
}