qwen3.6-plus · go

config: qwen3.6-plus--opencode-go--dev
batch: 2026-07-19--unified
transport: opencode-go-gateway
protocol: api · plan
served model: qwen3.6-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

claude-opus-4-6 @max · kiro0.70 claude-opus-4-6 @medium · kiro0.69 kimi-k2.6 · opencode0.69 qwen3.7-max · qoder0.69 kimi-k3 @disabled · api0.67

farthest

minimax-m2.5 · go0.42 gpt-5.5 @high · codex-oauth0.42 gpt-5.6-sol @max · kiro0.44 glm-5.2-eff-enabled--api--official--dev0.44 kimi-k2.6 · go0.45

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 9/24 · 9 match · 0 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">
<meta name="viewport" content="width=1280, initial-scale=1.0">
<title>Weather Card</title>
<style>
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --bg-primary: #0f172a;
    --bg-card: rgba(30, 41, 59, 0.85);
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --accent: #38bdf8;
    --accent-warm: #fb923c;
    --accent-cool: #818cf8;
    --border: rgba(148, 163, 184, 0.12);
    --glow: rgba(56, 189, 248, 0.15);
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-primary);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
  }

  body::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at 30% 20%, rgba(56, 189, 248, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 80%, rgba(129, 140, 248, 0.06) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 50%, rgba(251, 146, 60, 0.04) 0%, transparent 60%);
    animation: bgShift 20s ease-in-out infinite alternate;
  }

  @keyframes bgShift {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(-5%, -3%) rotate(3deg); }
  }

  .card {
    position: relative;
    width: 720px;
    background: var(--bg-card);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 48px;
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.03) inset,
                0 1px 0 rgba(255, 255, 255, 0.06) inset;
    animation: cardIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  @keyframes cardIn {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 36px;
  }

  .location {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .location-name {
    font-size: 28px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.5px;
  }

  .location-date {
    font-size: 15px;
    color: var(--text-secondary);
    font-weight: 400;
  }

  .weather-icon-wrap {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .weather-icon-wrap svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 12px rgba(56, 189, 248, 0.3));
  }

  .temp-section {
    display: flex;
    align-items: flex-end;
    gap: 32px;
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border);
  }

  .temp-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .temp-value {
    font-size: 72px;
    font-weight: 200;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -3px;
  }

  .temp-value .unit {
    font-size: 32px;
    font-weight: 300;
    color: var(--text-secondary);
    letter-spacing: 0;
    vertical-align: super;
    margin-left: 2px;
  }

  .temp-range {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 16px;
    font-weight: 400;
  }

  .temp-max {
    color: var(--accent-warm);
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .temp-min {
    color: var(--accent-cool);
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .temp-divider {
    width: 1px;
    height: 18px;
    background: var(--text-muted);
    opacity: 0.3;
  }

  .weather-label {
    font-size: 17px;
    color: var(--text-secondary);
    font-weight: 500;
    padding: 6px 14px;
    background: rgba(148, 163, 184, 0.08);
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.1);
  }

  .hourly-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.2px;
  }

  .chart-container {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
  }

  .chart-svg {
    width: 100%;
    height: 100%;
  }

  .hourly-labels {
    display: flex;
    justify-content: space-between;
    padding: 0 2px;
    margin-top: 4px;
  }

  .hour-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    width: 0;
    text-align: center;
  }

  .hour-label:nth-child(odd) { visibility: visible; }
  .hour-label:nth-child(even) { visibility: hidden; }

  .hourly-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 80px;
    padding: 0 2px;
  }

  .bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .bar {
    width: 100%;
    max-width: 28px;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(to top, var(--accent), rgba(56, 189, 248, 0.3));
    transition: all 0.3s ease;
    position: relative;
    min-height: 2px;
  }

  .bar:hover {
    filter: brightness(1.3);
  }

  .bar-label {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
  }

  .error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    text-align: center;
    gap: 16px;
  }

  .error-icon {
    width: 48px;
    height: 48px;
    color: #ef4444;
    opacity: 0.8;
  }

  .error-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
  }

  .error-message {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 400px;
    line-height: 1.6;
  }

  .loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    gap: 20px;
  }

  .spinner {
    width: 32px;
    height: 32px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  .loading-text {
    font-size: 14px;
    color: var(--text-secondary);
  }

  @media (max-width: 768px) {
    .card { width: 95vw; padding: 28px; border-radius: 20px; }
    .temp-value { font-size: 56px; }
    .header { flex-direction: row-reverse; }
  }
</style>
</head>
<body>
<div id="app"></div>

<script>
(function() {
  const params = new URLSearchParams(window.location.search);
  const lat = parseFloat(params.get('lat')) || 52.52;
  const lon = parseFloat(params.get('lon')) || 13.405;
  const name = params.get('name') || 'Berlin';
  let dateStr = params.get('date');

  const today = new Date();
  const todayUTC = new Date(Date.UTC(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate()));
  const todayStr = todayUTC.toISOString().split('T')[0];

  if (!dateStr) {
    dateStr = todayStr;
  }

  const requestedDate = new Date(dateStr + 'T00:00:00Z');
  const isFuture = requestedDate >= todayUTC;

  const endpoint = isFuture ? '/api/om/forecast' : '/api/om/archive';

  const app = document.getElementById('app');

  function showLoading() {
    app.innerHTML = `
      <div class="card">
        <div class="loading">
          <div class="spinner"></div>
          <div class="loading-text">Fetching weather data…</div>
        </div>
      </div>
    `;
  }

  function showError(msg) {
    app.innerHTML = `
      <div class="card">
        <div class="error-state">
          <svg class="error-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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 class="error-title">Unable to load weather data</div>
          <div class="error-message">${msg}</div>
        </div>
      </div>
    `;
  }

  const WMO_CODES = {
    0: { label: 'Clear sky', icon: 'clear' },
    1: { label: 'Mainly clear', icon: 'clear' },
    2: { label: 'Partly cloudy', icon: 'partly-cloudy' },
    3: { label: 'Overcast', icon: 'cloudy' },
    45: { label: 'Foggy', icon: 'fog' },
    48: { label: 'Rime fog', icon: 'fog' },
    51: { label: 'Light drizzle', icon: 'drizzle' },
    53: { label: 'Drizzle', icon: 'drizzle' },
    55: { label: 'Heavy drizzle', icon: 'drizzle' },
    56: { label: 'Freezing drizzle', icon: 'drizzle' },
    57: { label: 'Heavy freezing drizzle', icon: 'drizzle' },
    61: { label: 'Light rain', icon: 'rain' },
    63: { label: 'Rain', icon: 'rain' },
    65: { label: 'Heavy rain', icon: 'rain' },
    66: { label: 'Freezing rain', icon: 'rain' },
    67: { label: 'Heavy freezing rain', icon: 'rain' },
    71: { label: 'Light snow', icon: 'snow' },
    73: { label: 'Snow', icon: 'snow' },
    75: { label: 'Heavy snow', icon: 'snow' },
    77: { label: 'Snow grains', icon: 'snow' },
    80: { label: 'Light showers', icon: 'rain' },
    81: { label: 'Showers', icon: 'rain' },
    82: { label: 'Heavy showers', icon: 'rain' },
    85: { label: 'Light snow showers', icon: 'snow' },
    86: { label: 'Heavy snow showers', icon: 'snow' },
    95: { label: 'Thunderstorm', icon: 'thunder' },
    96: { label: 'Thunderstorm with hail', icon: 'thunder' },
    99: { label: 'Thunderstorm with heavy hail', icon: 'thunder' },
  };

  function getWeatherInfo(code) {
    return WMO_CODES[code] || { label: 'Unknown', icon: 'clear' };
  }

  function getWeatherSVG(icon) {
    const svgs = {
      'clear': `<svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="40" cy="40" r="16" fill="#fbbf24" opacity="0.9"/>
        <g stroke="#fbbf24" stroke-width="3" stroke-linecap="round">
          <line x1="40" y1="10" x2="40" y2="18"/><line x1="40" y1="62" x2="40" y2="70"/>
          <line x1="10" y1="40" x2="18" y2="40"/><line x1="62" y1="40" x2="70" y2="40"/>
          <line x1="18.8" y1="18.8" x2="24.5" y2="24.5"/><line x1="55.5" y1="55.5" x2="61.2" y2="61.2"/>
          <line x1="18.8" y1="61.2" x2="24.5" y2="55.5"/><line x1="55.5" y1="24.5" x2="61.2" y2="18.8"/>
        </g>
      </svg>`,
      'partly-cloudy': `<svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="30" cy="32" r="12" fill="#fbbf24" opacity="0.85"/>
        <g stroke="#fbbf24" stroke-width="2" stroke-linecap="round" opacity="0.7">
          <line x1="30" y1="12" x2="30" y2="17"/><line x1="30" y1="47" x2="30" y2="52"/>
          <line x1="10" y1="32" x2="15" y2="32"/><line x1="45" y1="32" x2="50" y2="32"/>
        </g>
        <path d="M24 58c-6.6 0-12-5.4-12-12 0-5.5 3.7-10.2 8.8-11.6C22.2 27.5 28.4 22 36 22c8.3 0 15 6.7 15 15 0 .7-.1 1.4-.2 2C54.5 38.2 58 42.2 58 47c0 6.1-4.9 11-11 11H24z" fill="#cbd5e1" opacity="0.9"/>
        <path d="M24 58c-6.6 0-12-5.4-12-12 0-5.5 3.7-10.2 8.8-11.6C22.2 27.5 28.4 22 36 22c8.3 0 15 6.7 15 15 0 .7-.1 1.4-.2 2C54.5 38.2 58 42.2 58 47c0 6.1-4.9 11-11 11H24z" fill="url(#cloudGrad)" opacity="0.5"/>
        <defs><linearGradient id="cloudGrad" x1="12" y1="22" x2="58" y2="58"><stop stop-color="#e2e8f0"/><stop offset="1" stop-color="#94a3b8"/></linearGradient></defs>
      </svg>`,
      'cloudy': `<svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M22 54c-6.1 0-11-4.9-11-11 0-5.1 3.4-9.4 8.1-10.8C20.3 26 25.5 21 32 21c7.2 0 13 5.8 13 13 0 .6 0 1.2-.1 1.8C48.3 35.1 52 38.7 52 43c0 5.5-4.5 10-10 10H22z" fill="#94a3b8" opacity="0.7"/>
        <path d="M30 62c-7.7 0-14-6.3-14-14 0-6.5 4.4-12 10.5-13.8C28.2 27 34.4 21 42 21c9.4 0 17 7.6 17 17 0 .8-.1 1.6-.2 2.3C63.2 39.3 68 44.2 68 50c0 6.6-5.4 12-12 12H30z" fill="#cbd5e1" opacity="0.9"/>
      </svg>`,
      'rain': `<svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M20 46c-6.1 0-11-4.9-11-11 0-5.1 3.4-9.4 8.1-10.8C18.4 18 23.6 13 30 13c7.2 0 13 5.8 13 13 0 .6 0 1.2-.1 1.8C46.3 27.1 50 30.7 50 35c0 5.5-4.5 10-10 10H20z" fill="#94a3b8" opacity="0.8"/>
        <g stroke="#38bdf8" stroke-width="2.5" stroke-linecap="round">
          <line x1="24" y1="54" x2="22" y2="62"/><line x1="32" y1="54" x2="30" y2="64"/>
          <line x1="40" y1="54" x2="38" y2="60"/><line x1="48" y1="54" x2="46" y2="62"/>
          <line x1="28" y1="64" x2="26" y2="70"/><line x1="36" y1="64" x2="34" y2="72"/>
        </g>
      </svg>`,
      'snow': `<svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M20 46c-6.1 0-11-4.9-11-11 0-5.1 3.4-9.4 8.1-10.8C18.4 18 23.6 13 30 13c7.2 0 13 5.8 13 13 0 .6 0 1.2-.1 1.8C46.3 27.1 50 30.7 50 35c0 5.5-4.5 10-10 10H20z" fill="#94a3b8" opacity="0.8"/>
        <g fill="#e2e8f0">
          <circle cx="24" cy="58" r="2.5"/><circle cx="34" cy="56" r="2.5"/><circle cx="44" cy="58" r="2.5"/>
          <circle cx="29" cy="66" r="2.5"/><circle cx="39" cy="66" r="2.5"/><circle cx="22" cy="70" r="2"/>
        </g>
      </svg>`,
      'fog': `<svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g stroke="#94a3b8" stroke-width="3" stroke-linecap="round" opacity="0.6">
          <line x1="14" y1="28" x2="66" y2="28"/>
          <line x1="18" y1="36" x2="62" y2="36" opacity="0.8"/>
          <line x1="12" y1="44" x2="68" y2="44"/>
          <line x1="20" y1="52" x2="60" y2="52" opacity="0.7"/>
          <line x1="16" y1="60" x2="64" y2="60" opacity="0.5"/>
        </g>
      </svg>`,
      'drizzle': `<svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M20 46c-6.1 0-11-4.9-11-11 0-5.1 3.4-9.4 8.1-10.8C18.4 18 23.6 13 30 13c7.2 0 13 5.8 13 13 0 .6 0 1.2-.1 1.8C46.3 27.1 50 30.7 50 35c0 5.5-4.5 10-10 10H20z" fill="#94a3b8" opacity="0.8"/>
        <g stroke="#38bdf8" stroke-width="2" stroke-linecap="round" opacity="0.7">
          <line x1="26" y1="52" x2="25" y2="58"/><line x1="34" y1="52" x2="33" y2="60"/>
          <line x1="42" y1="52" x2="41" y2="56"/><line x1="50" y1="52" x2="49" y2="58"/>
        </g>
      </svg>`,
      'thunder': `<svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M20 44c-6.1 0-11-4.9-11-11 0-5.1 3.4-9.4 8.1-10.8C18.4 16 23.6 11 30 11c7.2 0 13 5.8 13 13 0 .6 0 1.2-.1 1.8C46.3 25.1 50 28.7 50 33c0 5.5-4.5 10-10 10H20z" fill="#64748b" opacity="0.8"/>
        <polygon points="42,44 34,58 40,58 36,72 50,54 44,54 48,44" fill="#fbbf24" opacity="0.9"/>
      </svg>`
    };
    return svgs[icon] || svgs['clear'];
  }

  function formatDate(dateString) {
    const d = new Date(dateString + 'T00:00:00Z');
    const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
    return d.toLocaleDateString('en-US', options);
  }

  function buildChart(hourlyTemps) {
    const temps = hourlyTemps.map(Number);
    const minT = Math.min(...temps);
    const maxT = Math.max(...temps);
    const range = maxT - minT || 1;

    const width = 624;
    const height = 160;
    const padTop = 20;
    const padBottom = 30;
    const padLeft = 4;
    const padRight = 4;
    const chartW = width - padLeft - padRight;
    const chartH = height - padTop - padBottom;

    const points = temps.map((t, i) => {
      const x = padLeft + (i / (temps.length - 1)) * chartW;
      const y = padTop + chartH - ((t - minT) / range) * chartH;
      return { x, y, t };
    });

    let linePath = '';
    let areaPath = '';
    points.forEach((p, i) => {
      if (i === 0) {
        linePath += `M${p.x},${p.y}`;
        areaPath += `M${p.x},${padTop + chartH} L${p.x},${p.y}`;
      } else {
        const prev = points[i - 1];
        const cpx1 = prev.x + (p.x - prev.x) / 3;
        const cpx2 = p.x - (p.x - prev.x) / 3;
        linePath += ` C${cpx1},${prev.y} ${cpx2},${p.y} ${p.x},${p.y}`;
        areaPath += ` C${cpx1},${prev.y} ${cpx2},${p.y} ${p.x},${p.y}`;
      }
    });
    areaPath += ` L${points[points.length - 1].x},${padTop + chartH} Z`;

    let dotsHTML = '';
    points.forEach((p, i) => {
      if (i % 3 === 0 || i === 0 || i === points.length - 1) {
        dotsHTML += `<circle cx="${p.x}" cy="${p.y}" r="3" fill="#38bdf8" opacity="0.9"/>`;
        dotsHTML += `<text x="${p.x}" y="${p.y - 10}" text-anchor="middle" fill="#94a3b8" font-size="10" font-weight="500">${Math.round(p.t)}°</text>`;
        dotsHTML += `<text x="${p.x}" y="${height - 6}" text-anchor="middle" fill="#64748b" font-size="10">${String(i).padStart(2, '0')}:00</text>`;
      }
    });

    const gridLines = 4;
    let gridHTML = '';
    for (let i = 0; i <= gridLines; i++) {
      const y = padTop + (chartH / gridLines) * i;
      const val = maxT - (range / gridLines) * i;
      gridHTML += `<line x1="${padLeft}" y1="${y}" x2="${width - padRight}" y2="${y}" stroke="rgba(148,163,184,0.1)" stroke-width="1"/>`;
      gridHTML += `<text x="${padLeft - 2}" y="${y + 4}" text-anchor="end" fill="#64748b" font-size="9">${Math.round(val)}°</text>`;
    }

    return `<svg class="chart-svg" viewBox="0 0 ${width} ${height}" preserveAspectRatio="xMidYMid meet">
      <defs>
        <linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="rgba(56,189,248,0.25)"/>
          <stop offset="100%" stop-color="rgba(56,189,248,0.01)"/>
        </linearGradient>
        <linearGradient id="lineGrad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#818cf8"/>
          <stop offset="50%" stop-color="#38bdf8"/>
          <stop offset="100%" stop-color="#fb923c"/>
        </linearGradient>
      </defs>
      ${gridHTML}
      <path d="${areaPath}" fill="url(#areaGrad)"/>
      <path d="${linePath}" fill="none" stroke="url(#lineGrad)" stroke-width="2.5" stroke-linecap="round"/>
      ${dotsHTML}
    </svg>`;
  }

  function renderWeather(data) {
    const daily = data.daily;
    const hourly = data.hourly;

    const maxTemp = daily.temperature_2m_max[0];
    const minTemp = daily.temperature_2m_min[0];
    const weatherCode = daily.weather_code[0];
    const info = getWeatherInfo(weatherCode);

    const hourlyTemps = hourly.temperature_2m;
    const hourlyTimes = hourly.time;

    const dateObj = new Date(dateStr + 'T00:00:00Z');
    const formattedDate = formatDate(dateStr);

    const avgTemp = hourlyTemps.length > 0
      ? Math.round(hourlyTemps.reduce((a, b) => a + Number(b), 0) / hourlyTemps.length)
      : Math.round((maxTemp + minTemp) / 2);

    app.innerHTML = `
      <div class="card">
        <div class="header">
          <div class="location">
            <div class="location-name">${escapeHtml(name)}</div>
            <div class="location-date">${formattedDate}</div>
          </div>
          <div class="weather-icon-wrap">
            ${getWeatherSVG(info.icon)}
          </div>
        </div>

        <div class="temp-section">
          <div class="temp-main">
            <div class="temp-value">${avgTemp}<span class="unit">°C</span></div>
          </div>
          <div class="temp-range">
            <span class="temp-max">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 10V4M7 4L4 7M7 4l3 3" stroke="#fb923c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
              ${maxTemp}°
            </span>
            <span class="temp-divider"></span>
            <span class="temp-min">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 4v6M7 10l3-3M7 10l-3-3" stroke="#818cf8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
              ${minTemp}°
            </span>
          </div>
          <span class="weather-label">${info.label}</span>
        </div>

        <div class="hourly-section">
          <div class="section-title">Hourly Temperature</div>
          <div class="chart-container">
            ${buildChart(hourlyTemps)}
          </div>
        </div>
      </div>
    `;
  }

  function escapeHtml(str) {
    const div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
  }

  showLoading();

  const url = `${endpoint}?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}`;

  fetch(url)
    .then(function(response) {
      if (!response.ok) {
        throw new Error('HTTP ' + response.status + ' — ' + response.statusText);
      }
      return response.json();
    })
    .then(function(data) {
      if (!data || !data.daily || !data.hourly) {
        throw new Error('Invalid response format from weather API.');
      }
      if (data.daily.temperature_2m_max.length === 0) {
        throw new Error('No weather data available for the requested date.');
      }
      renderWeather(data);
    })
    .catch(function(err) {
      console.error(err);
      showError('Could not fetch weather data for <strong>' + escapeHtml(name) + '</strong> on ' + escapeHtml(dateStr) + '.<br><br><span style="opacity:0.7;font-size:13px">' + escapeHtml(err.message) + '</span>');
    });
})();
</script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total	21,497	html / css / js	240 / 6,514 / 14,743
dom nodes	9	dom depth	3
css rules	52	js present	yes
brightness	34.8	contrast	10.2
colorfulness	13.3	whitespace	93.5%

This slot's telemetry

prompt tokens	337	completion tokens	9,256
total tokens	9,593	wall	168.1 s
cost	—	request id	—

config.json546 B

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

send-log2.5 KB

{
  "N": 2,
  "batch_id": "2026-07-17--dev-opencode-go",
  "config_id": "qwen3.6-plus--opencode-go--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-18T02:38:43.177913+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-18T02:35:55.044406+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-18T02:39:56.106005+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-18T02:38:46.779549+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-18T02:41:18.803671+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-18T02:40:00.272013+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-07-18T02:43:34.871897+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-18T02:41:22.751272+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
    }
  }
}