qwen3.7-plus · go

config: qwen3.7-plus--opencode-go--dev
batch: 2026-07-19--unified
transport: opencode-go-gateway
protocol: api · plan
served model: qwen3.7-plus
captured: Jul 18, 2026, 11:54 AM · N=2

variant

live

slot 0 · P-q · sandboxed iframe

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

nearest

gpt-5.6-sol @xhigh · codex-oauth0.69 claude-opus-4-8 @high · kiro0.66 gpt-5.4-mini @medium · codex-oauth0.66 gpt-5.6-sol @high · kiro0.66 qwen3.8-max-preview · qoder0.66

farthest

minimax-m2.1 · kiro0.36 minimax-m2.5 · go0.41 gpt-5.6-luna @high · kiro0.41 gpt-5.5 @low · codex-oauth0.44 claude-haiku-4-5 @xhigh · CC0.44

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 tempmismatchshown: 16
min tempmismatchshown: 25
hourlymismatchcoverage 3/24 · 3 match · 6 mismatch · 15 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">
<title>Weather</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    width: 1280px; height: 800px; overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
    color: #fff;
    background: #0b1220;
  }
  body {
    display: flex; align-items: center; justify-content: center;
    background:
      radial-gradient(1200px 600px at 15% 10%, rgba(255,255,255,0.08), transparent 60%),
      radial-gradient(900px 500px at 90% 90%, rgba(255,255,255,0.06), transparent 60%),
      linear-gradient(135deg, var(--bg-a, #1a2a6c), var(--bg-b, #2a4d8f) 50%, var(--bg-c, #6d3f8f));
    transition: background 0.8s ease;
  }
  .card {
    width: 1040px;
    height: 560px;
    border-radius: 28px;
    background: linear-gradient(160deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow:
      0 30px 80px -20px rgba(0,0,0,0.55),
      0 10px 30px -10px rgba(0,0,0,0.4),
      inset 0 1px 0 rgba(255,255,255,0.25);
    display: grid;
    grid-template-columns: 1.05fr 1.3fr;
    overflow: hidden;
    position: relative;
  }
  .card::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(600px 300px at 0% 0%, rgba(255,255,255,0.15), transparent 60%);
    pointer-events: none;
  }
  .left, .right { padding: 44px 48px; position: relative; }
  .left {
    display: flex; flex-direction: column; justify-content: space-between;
    border-right: 1px solid rgba(255,255,255,0.12);
  }
  .location {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
    opacity: 0.85; font-weight: 500;
  }
  .location svg { width: 14px; height: 14px; opacity: 0.9; }
  .date {
    margin-top: 10px;
    font-size: 15px; font-weight: 500; opacity: 0.9;
  }
  .hero {
    margin-top: 24px;
    display: flex; align-items: flex-start; gap: 22px;
  }
  .icon {
    width: 120px; height: 120px;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.3));
    flex-shrink: 0;
  }
  .temp-main {
    font-size: 108px;
    font-weight: 200;
    letter-spacing: -4px;
    line-height: 0.95;
    background: linear-gradient(180deg, #fff, rgba(255,255,255,0.7));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .temp-main .unit { font-size: 36px; font-weight: 300; letter-spacing: 0; opacity: 0.8; vertical-align: top; margin-left: 4px; }
  .condition {
    margin-top: 14px;
    font-size: 22px; font-weight: 500;
    letter-spacing: 0.01em;
  }
  .range {
    margin-top: 10px;
    display: flex; align-items: center; gap: 14px;
    font-size: 16px; font-weight: 400; opacity: 0.92;
  }
  .range .hi { font-weight: 600; }
  .range .lo { opacity: 0.75; }
  .range .sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.5); }
  .footer {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    opacity: 0.6;
  }
  .right { display: flex; flex-direction: column; }
  .right h2 {
    font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
    font-weight: 500; opacity: 0.8; margin-bottom: 18px;
  }
  .chart-wrap {
    flex: 1;
    position: relative;
    margin: 0 -12px;
  }
  .chart {
    width: 100%; height: 100%;
    display: block;
  }
  .loading, .error {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 14px;
    font-size: 15px; opacity: 0.85;
    text-align: center; padding: 40px;
  }
  .spinner {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.25);
    border-top-color: #fff;
    animation: spin 0.9s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .error svg { width: 28px; height: 28px; opacity: 0.8; }
  .hidden { display: none !important; }
</style>
</head>
<body>
  <div class="card" id="card">
    <div class="loading" id="loading">
      <div class="spinner"></div>
      <div>Loading weather…</div>
    </div>
    <div class="error hidden" id="error">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
      </svg>
      <div id="errorMsg">Unable to load weather data.</div>
    </div>

    <div class="left" id="left" style="display:none">
      <div>
        <div class="location">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
          </svg>
          <span id="locName">—</span>
        </div>
        <div class="date" id="dateStr">—</div>
        <div class="hero">
          <div class="icon" id="icon"></div>
          <div class="temp-main"><span id="tempMax">—</span><span class="unit">°C</span></div>
        </div>
        <div class="condition" id="condition">—</div>
        <div class="range">
          <span class="hi" id="hi">—</span>
          <span class="sep"></span>
          <span class="lo" id="lo">—</span>
          <span style="opacity:0.6; margin-left:4px">High / Low</span>
        </div>
      </div>
      <div class="footer">
        <span>Hourly · 24h</span>
        <span id="coords">—</span>
      </div>
    </div>

    <div class="right" id="right" style="display:none">
      <h2>Hourly temperature</h2>
      <div class="chart-wrap">
        <svg class="chart" id="chart" viewBox="0 0 600 340" preserveAspectRatio="none"></svg>
      </div>
    </div>
  </div>

<script>
(function(){
  const params = new URLSearchParams(location.search);
  const lat = parseFloat(params.get('lat') ?? '52.52');
  const lon = parseFloat(params.get('lon') ?? '13.405');
  const name = params.get('name') || 'Berlin';
  const todayUTC = new Date();
  const todayStr = todayUTC.getUTCFullYear() + '-' + String(todayUTC.getUTCMonth()+1).padStart(2,'0') + '-' + String(todayUTC.getUTCDate()).padStart(2,'0');
  const dateStr = params.get('date') || todayStr;

  const isPast = dateStr < todayStr;
  const endpoint = isPast ? '/api/om/archive' : '/api/om/forecast';
  const url = endpoint + '?' + 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: dateStr, end_date: dateStr
  }).toString();

  const WMO = {
    0:  {label:'Clear sky',             theme:['#f5a442','#e8743b','#7a3a8a']},
    1:  {label:'Mainly clear',          theme:['#f5a442','#d87a4a','#6e4490']},
    2:  {label:'Partly cloudy',         theme:['#8fb3d9','#5a7fa8','#3a4a7a']},
    3:  {label:'Overcast',              theme:['#7a8aa0','#4a5a72','#2a3550']},
    45: {label:'Fog',                   theme:['#9aa5b5','#5a6578','#2e3748']},
    48: {label:'Rime fog',              theme:['#a8b3c2','#5d6980','#2e3748']},
    51: {label:'Light drizzle',         theme:['#6d8bb0','#3e5a82','#1f2f4e']},
    53: {label:'Drizzle',               theme:['#5f7fa8','#36537a','#1a2a48']},
    55: {label:'Dense drizzle',         theme:['#4e6d94','#2c4668','#14223c']},
    56: {label:'Freezing drizzle',      theme:['#7a9bc0','#426690','#1c2f52']},
    57: {label:'Dense freezing drizzle',theme:['#6a8bb0','#365880','#16264a']},
    61: {label:'Slight rain',           theme:['#5a7aa8','#325078','#162444']},
    63: {label:'Rain',                  theme:['#4a6a98','#284468','#101c3a']},
    65: {label:'Heavy rain',            theme:['#3a5888','#1e3858','#0a1430']},
    66: {label:'Freezing rain',         theme:['#6a8ab0','#34567a','#142648']},
    67: {label:'Heavy freezing rain',   theme:['#5a7aa0','#2a4a6a','#0e1e3c']},
    71: {label:'Slight snow',           theme:['#b8c8dc','#7a90b0','#3a4a6a']},
    73: {label:'Snow',                  theme:['#a8bad0','#6a80a0','#2e3e5e']},
    75: {label:'Heavy snow',            theme:['#98aac2','#5a7090','#222e4e']},
    77: {label:'Snow grains',           theme:['#b0c0d6','#6e84a4','#2c3c5c']},
    80: {label:'Rain showers',          theme:['#4a6a98','#284468','#101c3a']},
    81: {label:'Heavy rain showers',    theme:['#3a5888','#1e3858','#0a1430']},
    82: {label:'Violent rain showers',  theme:['#2e4a78','#162c4c','#060e24']},
    85: {label:'Snow showers',          theme:['#a0b4cc','#5e7698','#242e4e']},
    86: {label:'Heavy snow showers',    theme:['#90a6c0','#506a8c','#1c2644']},
    95: {label:'Thunderstorm',          theme:['#4a3a7a','#2a1e5a','#0e0830']},
    96: {label:'Thunderstorm with hail',theme:['#3e2e6e','#221650','#0a0628']},
    99: {label:'Severe thunderstorm',   theme:['#32245e','#180e44','#060420']}
  };

  function iconFor(code){
    const c = code ?? 0;
    const isNight = false; // we don't know time-of-day for daily code; keep day style
    if (c === 0 || c === 1) return sunSVG();
    if (c === 2) return partlyCloudySVG();
    if (c === 3) return cloudSVG();
    if (c === 45 || c === 48) return fogSVG();
    if ((c>=51 && c<=57) || (c>=61 && c<=67) || (c>=80 && c<=82)) return rainSVG(c>=80);
    if ((c>=71 && c<=77) || (c>=85 && c<=86)) return snowSVG();
    if (c>=95) return thunderSVG();
    return cloudSVG();
  }
  function sunSVG(){
    return `<svg viewBox="0 0 120 120" width="120" height="120">
      <defs><radialGradient id="sg" cx="50%" cy="50%" r="50%">
        <stop offset="0%" stop-color="#fff4c2"/><stop offset="60%" stop-color="#ffcf5c"/><stop offset="100%" stop-color="#ff9a3c"/>
      </radialGradient></defs>
      <g stroke="#ffd27a" stroke-width="3" stroke-linecap="round" opacity="0.85">
        <line x1="60" y1="8" x2="60" y2="22"/><line x1="60" y1="98" x2="60" y2="112"/>
        <line x1="8" y1="60" x2="22" y2="60"/><line x1="98" y1="60" x2="112" y2="60"/>
        <line x1="22" y1="22" x2="32" y2="32"/><line x1="88" y1="88" x2="98" y2="98"/>
        <line x1="22" y1="98" x2="32" y2="88"/><line x1="88" y1="32" x2="98" y2="22"/>
      </g>
      <circle cx="60" cy="60" r="28" fill="url(#sg)"/>
    </svg>`;
  }
  function cloudSVG(){
    return `<svg viewBox="0 0 120 120" width="120" height="120">
      <defs><linearGradient id="cg" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#ffffff"/><stop offset="100%" stop-color="#c8d2e0"/>
      </linearGradient></defs>
      <path d="M30 78 Q14 78 14 62 Q14 48 28 46 Q30 30 50 30 Q66 30 70 44 Q92 42 94 62 Q106 62 106 76 Q106 88 92 88 L36 88 Q30 88 30 78 Z"
        fill="url(#cg)" stroke="rgba(255,255,255,0.6)" stroke-width="1"/>
    </svg>`;
  }
  function partlyCloudySVG(){
    return `<svg viewBox="0 0 120 120" width="120" height="120">
      <defs><radialGradient id="sg2" cx="50%" cy="50%" r="50%">
        <stop offset="0%" stop-color="#fff4c2"/><stop offset="100%" stop-color="#ff9a3c"/>
      </radialGradient>
      <linearGradient id="cg2" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#ffffff"/><stop offset="100%" stop-color="#c8d2e0"/>
      </linearGradient></defs>
      <circle cx="42" cy="44" r="22" fill="url(#sg2)"/>
      <g stroke="#ffd27a" stroke-width="2.5" stroke-linecap="round" opacity="0.8">
        <line x1="42" y1="14" x2="42" y2="22"/><line x1="14" y1="44" x2="22" y2="44"/>
        <line x1="22" y1="24" x2="28" y2="30"/><line x1="62" y1="24" x2="56" y2="30"/>
      </g>
      <path d="M36 90 Q22 90 22 76 Q22 64 34 62 Q36 48 54 48 Q68 48 72 60 Q92 58 94 76 Q104 76 104 88 Q104 98 92 98 L42 98 Q36 98 36 90 Z"
        fill="url(#cg2)"/>
    </svg>`;
  }
  function fogSVG(){
    return `<svg viewBox="0 0 120 120" width="120" height="120">
      <g stroke="#e6ecf5" stroke-width="5" stroke-linecap="round" opacity="0.9">
        <line x1="16" y1="48" x2="104" y2="48"/>
        <line x1="24" y1="64" x2="96" y2="64"/>
        <line x1="16" y1="80" x2="104" y2="80"/>
        <line x1="30" y1="96" x2="90" y2="96"/>
      </g>
    </svg>`;
  }
  function rainSVG(shower){
    return `<svg viewBox="0 0 120 120" width="120" height="120">
      <defs><linearGradient id="cg3" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#ffffff"/><stop offset="100%" stop-color="#b0bcd0"/>
      </linearGradient></defs>
      <path d="M30 62 Q14 62 14 48 Q14 34 28 32 Q30 18 50 18 Q66 18 70 30 Q92 28 94 48 Q106 48 106 62 Q106 72 92 72 L36 72 Q30 72 30 62 Z"
        fill="url(#cg3)"/>
      <g fill="#7ec0ff">
        <path d="M36 82 Q32 92 36 98 Q40 92 36 82 Z"/>
        <path d="M56 86 Q52 96 56 102 Q60 96 56 86 Z"/>
        <path d="M76 82 Q72 92 76 98 Q80 92 76 82 Z"/>
        ${shower ? '<path d="M46 92 Q42 102 46 108 Q50 102 46 92 Z"/><path d="M66 92 Q62 102 66 108 Q70 102 66 92 Z"/>' : ''}
      </g>
    </svg>`;
  }
  function snowSVG(){
    return `<svg viewBox="0 0 120 120" width="120" height="120">
      <defs><linearGradient id="cg4" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#ffffff"/><stop offset="100%" stop-color="#c4d0e4"/>
      </linearGradient></defs>
      <path d="M30 62 Q14 62 14 48 Q14 34 28 32 Q30 18 50 18 Q66 18 70 30 Q92 28 94 48 Q106 48 106 62 Q106 72 92 72 L36 72 Q30 72 30 62 Z"
        fill="url(#cg4)"/>
      <g fill="#ffffff">
        <circle cx="32" cy="90" r="3.5"/><circle cx="52" cy="96" r="3.5"/>
        <circle cx="72" cy="88" r="3.5"/><circle cx="90" cy="96" r="3.5"/>
        <circle cx="42" cy="104" r="3"/><circle cx="62" cy="108" r="3"/>
        <circle cx="82" cy="104" r="3"/>
      </g>
    </svg>`;
  }
  function thunderSVG(){
    return `<svg viewBox="0 0 120 120" width="120" height="120">
      <defs><linearGradient id="cg5" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#d8dce6"/><stop offset="100%" stop-color="#8a92a6"/>
      </linearGradient></defs>
      <path d="M30 60 Q14 60 14 46 Q14 32 28 30 Q30 16 50 16 Q66 16 70 28 Q92 26 94 46 Q106 46 106 60 Q106 70 92 70 L36 70 Q30 70 30 60 Z"
        fill="url(#cg5)"/>
      <path d="M58 72 L46 96 L58 96 L50 116 L78 86 L64 86 L74 72 Z"
        fill="#ffd84a" stroke="#ffb020" stroke-width="1.2" stroke-linejoin="round"/>
    </svg>`;
  }

  function fmtDate(iso){
    const d = new Date(iso + 'T00:00:00Z');
    const days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
    const months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
    return days[d.getUTCDay()] + ', ' + months[d.getUTCMonth()] + ' ' + d.getUTCDate() + ', ' + d.getUTCFullYear();
  }

  function showError(msg){
    document.getElementById('loading').classList.add('hidden');
    document.getElementById('left').style.display = 'none';
    document.getElementById('right').style.display = 'none';
    const err = document.getElementById('error');
    err.classList.remove('hidden');
    document.getElementById('errorMsg').textContent = msg || 'Unable to load weather data.';
  }

  function render(data){
    const daily = data.daily || {};
    const hourly = data.hourly || {};
    const maxT = (daily.temperature_2m_max||[])[0];
    const minT = (daily.temperature_2m_min||[])[0];
    const code = (daily.weather_code||[])[0];
    const hours = hourly.time || [];
    const temps = hourly.temperature_2m || [];

    if (maxT == null || minT == null){
      showError('No data available for this date.');
      return;
    }

    const info = WMO[code] || {label:'Unknown', theme:['#5a7aa8','#325078','#162444']};
    document.documentElement.style.setProperty('--bg-a', info.theme[0]);
    document.documentElement.style.setProperty('--bg-b', info.theme[1]);
    document.documentElement.style.setProperty('--bg-c', info.theme[2]);

    document.getElementById('locName').textContent = name;
    document.getElementById('dateStr').textContent = fmtDate(dateStr);
    document.getElementById('tempMax').textContent = Math.round(maxT);
    document.getElementById('hi').textContent = Math.round(maxT) + '°';
    document.getElementById('lo').textContent = Math.round(minT) + '°';
    document.getElementById('condition').textContent = info.label;
    document.getElementById('coords').textContent = lat.toFixed(2) + '°, ' + lon.toFixed(2) + '°';
    document.getElementById('icon').innerHTML = iconFor(code);

    document.getElementById('loading').classList.add('hidden');
    document.getElementById('left').style.display = '';
    document.getElementById('right').style.display = '';

    drawChart(hours, temps, minT, maxT);
  }

  function drawChart(times, temps, globalMin, globalMax){
    const svg = document.getElementById('chart');
    svg.innerHTML = '';
    if (!temps.length) return;

    const W = 600, H = 340;
    const padL = 36, padR = 20, padT = 40, padB = 48;
    const plotW = W - padL - padR;
    const plotH = H - padT - padB;

    const min = Math.min(...temps, globalMin);
    const max = Math.max(...temps, globalMax);
    const span = Math.max(1, max - min);
    const yMin = min - span*0.15;
    const yMax = max + span*0.15;
    const yRange = yMax - yMin;

    const xs = temps.map((_,i) => padL + (i/(temps.length-1 || 1)) * plotW);
    const ys = temps.map(t => padT + (1 - (t - yMin)/yRange) * plotH);

    // gridlines
    const gridCount = 4;
    let grid = '';
    for (let i=0;i<=gridCount;i++){
      const y = padT + (i/gridCount)*plotH;
      const val = yMax - (i/gridCount)*yRange;
      grid += `<line x1="${padL}" y1="${y}" x2="${W-padR}" y2="${y}" stroke="rgba(255,255,255,0.12)" stroke-width="1"/>`;
      grid += `<text x="${padL-8}" y="${y+4}" text-anchor="end" font-size="10" fill="rgba(255,255,255,0.55)" font-family="inherit">${Math.round(val)}°</text>`;
    }

    // smooth path (catmull-rom -> cubic bezier)
    function smoothPath(pts){
      if (pts.length < 2) return '';
      let d = `M ${pts[0][0]} ${pts[0][1]}`;
      for (let i=0;i<pts.length-1;i++){
        const p0 = pts[i-1] || pts[i];
        const p1 = pts[i];
        const p2 = pts[i+1];
        const p3 = pts[i+2] || p2;
        const cp1x = p1[0] + (p2[0]-p0[0])/6;
        const cp1y = p1[1] + (p2[1]-p0[1])/6;
        const cp2x = p2[0] - (p3[0]-p1[0])/6;
        const cp2y = p2[1] - (p3[1]-p1[1])/6;
        d += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2[0]} ${p2[1]}`;
      }
      return d;
    }
    const pts = xs.map((x,i)=>[x,ys[i]]);
    const linePath = smoothPath(pts);
    const areaPath = linePath + ` L ${xs[xs.length-1]} ${padT+plotH} L ${xs[0]} ${padT+plotH} Z`;

    // x-axis labels (every 3h)
    let xLabels = '';
    for (let i=0;i<times.length;i+=3){
      const t = times[i];
      const hh = t ? t.substring(11,16) : '';
      xLabels += `<text x="${xs[i]}" y="${H-padB+22}" text-anchor="middle" font-size="10" fill="rgba(255,255,255,0.6)" font-family="inherit">${hh}</text>`;
    }
    // last label
    if (times.length > 1 && (times.length-1) % 3 !== 0){
      const last = times[times.length-1];
      const hh = last ? last.substring(11,16) : '';
      xLabels += `<text x="${xs[xs.length-1]}" y="${H-padB+22}" text-anchor="middle" font-size="10" fill="rgba(255,255,255,0.6)" font-family="inherit">${hh}</text>`;
    }

    // dots + temp labels (every 3h)
    let dots = '';
    for (let i=0;i<temps.length;i+=3){
      dots += `<circle cx="${xs[i]}" cy="${ys[i]}" r="3.5" fill="#fff" stroke="rgba(0,0,0,0.25)" stroke-width="1"/>`;
      dots += `<text x="${xs[i]}" y="${ys[i]-10}" text-anchor="middle" font-size="11" font-weight="500" fill="#fff" font-family="inherit">${Math.round(temps[i])}°</text>`;
    }
    if ((temps.length-1) % 3 !== 0){
      const i = temps.length-1;
      dots += `<circle cx="${xs[i]}" cy="${ys[i]}" r="3.5" fill="#fff" stroke="rgba(0,0,0,0.25)" stroke-width="1"/>`;
      dots += `<text x="${xs[i]}" y="${ys[i]-10}" text-anchor="middle" font-size="11" font-weight="500" fill="#fff" font-family="inherit">${Math.round(temps[i])}°</text>`;
    }

    svg.innerHTML = `
      <defs>
        <linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="rgba(255,255,255,0.45)"/>
          <stop offset="100%" stop-color="rgba(255,255,255,0)"/>
        </linearGradient>
        <linearGradient id="lineGrad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#ffffff"/>
          <stop offset="100%" stop-color="#ffe0a8"/>
        </linearGradient>
      </defs>
      ${grid}
      <path d="${areaPath}" fill="url(#areaGrad)"/>
      <path d="${linePath}" fill="none" stroke="url(#lineGrad)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
      ${dots}
      ${xLabels}
    `;
  }

  fetch(url, { headers: { 'Accept': 'application/json' } })
    .then(r => {
      if (!r.ok) throw new Error('HTTP ' + r.status);
      return r.json();
    })
    .then(render)
    .catch(err => {
      console.error(err);
      showError('Unable to load weather data. Please check your connection and try again.');
    });
})();
</script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total	21,418	html / css / js	2,004 / 4,097 / 15,317
dom nodes	43	dom depth	8
css rules	30	js present	yes
brightness	103.2	contrast	26.9
colorfulness	29.4	whitespace	49.2%

This slot's telemetry

prompt tokens	337	completion tokens	9,389
total tokens	9,726	wall	170.9 s
cost	—	request id	—

config.json546 B

{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_OPENCODE_KEY",
    "method": "oauth"
  },
  "billing": "plan",
  "config_id": "qwen3.7-plus--opencode-go--dev",
  "effort": null,
  "family": "qwen",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "qwen3.7-plus",
  "protocol": "api",
  "served_model": "qwen3.7-plus",
  "telemetry": {
    "completion_tokens": 25819,
    "cost_usd": null,
    "prompt_tokens": 1330,
    "total_tokens": 27149,
    "wall_ms": 472044
  },
  "transport": "opencode-go-gateway",
  "vendor_sanction_ref": null
}

send-log2.5 KB

{
  "N": 2,
  "batch_id": "2026-07-17--dev-opencode-go-requeue",
  "config_id": "qwen3.7-plus--opencode-go--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-18T01:48:28.341392+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-18T01:47:24.829482+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-07-18T01:51:23.055516+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-18T01:48:32.164372+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-07-18T01:54:21.987653+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-18T01:51:27.000312+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-07-18T01:55:28.267606+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-18T01:54:25.607771+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
    }
  }
}