kimi-k2.6 · opencode

opencode
config
kimi-k2.6--cli--opencode--dev
batch
2026-07-19--unified
transport
opencode-cli-isolated-xdg-go-subscription
protocol
cli · plan
served model
kimi-k2.6
captured
Jul 18, 2026, 11:54 AM · N=2
variant
live
slot 0 · P-q · sandboxed iframe
kimi-k2.6 · opencode P-q slot 0 screenshot

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

similarity neighbors

within session 2026-07-19--unified

similarity measures convergence within this session — not quality.

Fidelity — does the card show the right data?

  • namematch
  • conditionmatch
  • datematch
  • max tempmatchshown: 25
  • min tempmatchshown: 16
  • hourlymatchcoverage 24/24 · 24 match · 0 mismatch · 0 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, user-scalable=no">
<title>Weather Card</title>
<style>
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  html, body {
    width: 100%; height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden;
    background: #0f172a;
  }

  /* Animated ambient background */
  .bg {
    position: fixed; inset: 0;
    background: radial-gradient(ellipse at 20% 20%, rgba(56,189,248,0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 80%, rgba(168,85,247,0.12) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 50%, rgba(14,165,233,0.08) 0%, transparent 60%),
                #0f172a;
    z-index: 0;
  }
  .bg::after {
    content: ''; position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
  }

  /* Card container */
  .container {
    position: relative; z-index: 1;
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: 40px;
  }

  .card {
    width: 720px; max-width: 100%;
    background: rgba(30, 41, 59, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 32px;
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    box-shadow: 0 40px 80px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04) inset;
    padding: 48px 52px;
    color: #e2e8f0;
    display: flex; flex-direction: column; gap: 36px;
    transition: opacity 0.5s ease;
  }

  .card.loading { opacity: 0.6; pointer-events: none; }

  /* Header row */
  .header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 24px;
  }
  .header-left {
    display: flex; flex-direction: column; gap: 6px;
  }
  .location {
    font-size: 28px; font-weight: 700; letter-spacing: -0.5px;
    color: #f8fafc; line-height: 1.2;
  }
  .date {
    font-size: 15px; font-weight: 500;
    color: #94a3b8; letter-spacing: 0.3px;
    text-transform: uppercase;
  }

  .weather-icon-wrap {
    width: 80px; height: 80px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .weather-icon-wrap svg {
    width: 64px; height: 64px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
  }

  /* Temperature block */
  .temp-block {
    display: flex; align-items: baseline; gap: 24px;
  }
  .temp-main {
    font-size: 96px; font-weight: 200; letter-spacing: -4px;
    line-height: 1; color: #f8fafc;
    text-shadow: 0 2px 20px rgba(0,0,0,0.2);
  }
  .temp-main sup { font-size: 32px; font-weight: 400; letter-spacing: 0; margin-left: 2px; }
  .temp-side {
    display: flex; flex-direction: column; gap: 8px;
    padding-top: 12px;
  }
  .temp-side-row {
    display: flex; align-items: center; gap: 10px;
    font-size: 15px; font-weight: 500; color: #94a3b8;
  }
  .temp-side-row .label { color: #64748b; font-weight: 600; width: 36px; }
  .temp-side-row .val { color: #e2e8f0; font-weight: 600; }
  .condition-text {
    font-size: 18px; font-weight: 600; color: #cbd5e1;
    margin-top: 4px;
  }

  /* Divider */
  .divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10) 20%, rgba(255,255,255,0.10) 80%, transparent);
    border: none;
  }

  /* Hourly section */
  .hourly-title {
    font-size: 13px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: #64748b;
    margin-bottom: 20px;
  }
  .hourly-chart {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 4px;
    height: 140px; position: relative;
  }
  .hourly-bar-wrap {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    gap: 8px; min-width: 0;
  }
  .hourly-bar {
    width: 100%; max-width: 28px;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, rgba(56,189,248,0.7), rgba(14,165,233,0.25));
    box-shadow: 0 -2px 12px rgba(56,189,248,0.15);
    transition: height 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
  }
  .hourly-bar::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    border-radius: 6px 6px 0 0;
    background: rgba(255,255,255,0.25);
  }
  .hourly-temp {
    font-size: 12px; font-weight: 700; color: #e2e8f0;
    white-space: nowrap;
  }
  .hourly-time {
    font-size: 11px; font-weight: 600; color: #64748b;
    white-space: nowrap;
  }

  /* Error state */
  .error-card {
    width: 480px; max-width: 100%;
    background: rgba(30, 41, 59, 0.55);
    border: 1px solid rgba(244,63,94,0.2);
    border-radius: 24px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    padding: 40px;
    color: #e2e8f0;
    text-align: center;
    display: none;
  }
  .error-card.active { display: block; }
  .error-icon {
    width: 56px; height: 56px; margin: 0 auto 20px;
    color: #f43f5e;
  }
  .error-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
  .error-body { font-size: 15px; color: #94a3b8; line-height: 1.5; }

  /* Entrance animation */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .card > * { animation: fadeUp 0.6s ease both; }
  .card > *:nth-child(1) { animation-delay: 0.05s; }
  .card > *:nth-child(2) { animation-delay: 0.15s; }
  .card > *:nth-child(3) { animation-delay: 0.25s; }
  .card > *:nth-child(4) { animation-delay: 0.35s; }
  .card > *:nth-child(5) { animation-delay: 0.45s; }
</style>
</head>
<body>
<div class="bg"></div>
<div class="container">
  <div class="card" id="card">
    <div class="header">
      <div class="header-left">
        <div class="location" id="locName">Loading...</div>
        <div class="date" id="locDate">—</div>
      </div>
      <div class="weather-icon-wrap" id="weatherIcon"></div>
    </div>

    <div class="temp-block">
      <div class="temp-main" id="tempMain">—<sup>°C</sup></div>
      <div class="temp-side">
        <div class="condition-text" id="conditionText">—</div>
        <div class="temp-side-row"><span class="label">High</span><span class="val" id="tempMax">—°C</span></div>
        <div class="temp-side-row"><span class="label">Low</span><span class="val" id="tempMin">—°C</span></div>
      </div>
    </div>

    <hr class="divider">

    <div>
      <div class="hourly-title">Hourly Temperatures</div>
      <div class="hourly-chart" id="hourlyChart"></div>
    </div>
  </div>

  <div class="error-card" id="errorCard">
    <div class="error-icon">
      <svg 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>
    <div class="error-title">Unable to Load Weather Data</div>
    <div class="error-body" id="errorBody">Please check your connection and try again.</div>
  </div>
</div>

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

  const qs = new URLSearchParams(location.search);
  const lat  = parseFloat(qs.get('lat'))  || 52.52;
  const lon  = parseFloat(qs.get('lon'))  || 13.405;
  const name = qs.get('name') || 'Berlin';
  let date   = qs.get('date');

  const today = new Date();
  const todayStr = today.toISOString().split('T')[0];
  if (!date) date = todayStr;

  const isPast = date < todayStr;
  const endpoint = isPast ? '/api/om/archive' : '/api/om/forecast';

  const wmoMap = {
    0:  { label: 'Clear sky',                       icon: 'clear' },
    1:  { label: 'Mainly clear',                    icon: 'clear' },
    2:  { label: 'Partly cloudy',                   icon: 'cloudy' },
    3:  { label: 'Overcast',                        icon: 'cloudy' },
    45: { label: 'Fog',                             icon: 'fog' },
    48: { label: 'Depositing rime fog',             icon: 'fog' },
    51: { label: 'Light drizzle',                   icon: 'rain' },
    53: { label: 'Moderate drizzle',                icon: 'rain' },
    55: { label: 'Dense drizzle',                   icon: 'rain' },
    56: { label: 'Light freezing drizzle',          icon: 'rain' },
    57: { label: 'Dense freezing drizzle',          icon: 'rain' },
    61: { label: 'Slight rain',                     icon: 'rain' },
    63: { label: 'Moderate rain',                   icon: 'rain' },
    65: { label: 'Heavy rain',                      icon: 'rain' },
    66: { label: 'Light freezing rain',             icon: 'rain' },
    67: { label: 'Heavy freezing rain',             icon: 'rain' },
    71: { label: 'Slight snow fall',                icon: 'snow' },
    73: { label: 'Moderate snow fall',              icon: 'snow' },
    75: { label: 'Heavy snow fall',                 icon: 'snow' },
    77: { label: 'Snow grains',                     icon: 'snow' },
    80: { label: 'Slight rain showers',             icon: 'rain' },
    81: { label: 'Moderate rain showers',           icon: 'rain' },
    82: { label: 'Violent rain showers',            icon: 'rain' },
    85: { label: 'Slight snow showers',             icon: 'snow' },
    86: { label: 'Heavy snow showers',              icon: 'snow' },
    95: { label: 'Thunderstorm',                    icon: 'storm' },
    96: { label: 'Thunderstorm with slight hail',   icon: 'storm' },
    99: { label: 'Thunderstorm with heavy hail',    icon: 'storm' },
  };

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

  function buildIcon(type) {
    const sun = '<circle cx="18" cy="18" r="8" fill="url(#sunGrad)"/><circle cx="18" cy="18" r="5" fill="#fbbf24"/><g stroke="#fbbf24" stroke-width="2" stroke-linecap="round"><line x1="18" y1="4" x2="18" y2="7"/><line x1="18" y1="29" x2="18" y2="32"/><line x1="4" y1="18" x2="7" y2="18"/><line x1="29" y1="18" x2="32" y2="18"/><line x1="8.1" y1="8.1" x2="10.2" y2="10.2"/><line x1="25.8" y1="25.8" x2="27.9" y2="27.9"/><line x1="8.1" y1="27.9" x2="10.2" y2="25.8"/><line x1="25.8" y1="10.2" x2="27.9" y2="8.1"/></g>';
    const cloud = '<path d="M16 24h14a6 6 0 0 0 0-12 6 6 0 0 0-11-3 8 8 0 0 0-15 4 5 5 0 0 0 0 10" fill="url(#cloudGrad)" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>';
    const rain = '<line x1="18" y1="26" x2="14" y2="34" stroke="#38bdf8" stroke-width="2.5" stroke-linecap="round"/><line x1="28" y1="26" x2="24" y2="34" stroke="#38bdf8" stroke-width="2.5" stroke-linecap="round"/>';
    const snow = '<circle cx="18" cy="30" r="1.8" fill="#e2e8f0"/><circle cx="28" cy="30" r="1.8" fill="#e2e8f0"/>';
    const bolt = '<polygon points="22,22 16,32 22,32 18,40 28,28 22,28" fill="#fbbf24" stroke="none"/>';
    const fog = '<line x1="8" y1="28" x2="34" y2="28" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" opacity="0.6"/><line x1="10" y1="32" x2="30" y2="32" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" opacity="0.4"/>';

    let body = '';
    if (type === 'clear') body = sun;
    else if (type === 'cloudy') body = cloud + sun.replace(/cx="18" cy="18"/g, 'cx="14" cy="14"').replace(/cx="18" cy="18" r="5"/g, 'cx="14" cy="14" r="4"');
    else if (type === 'rain') body = cloud + rain;
    else if (type === 'snow') body = cloud + snow;
    else if (type === 'storm') body = cloud + bolt;
    else if (type === 'fog') body = cloud + fog;
    else body = cloud;

    return `<svg viewBox="0 0 42 42" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="sunGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#fde047"/><stop offset="100%" stop-color="#fbbf24"/></linearGradient>
        <linearGradient id="cloudGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#f1f5f9"/><stop offset="100%" stop-color="#cbd5e1"/></linearGradient>
      </defs>
      ${body}
    </svg>`;
  }

  function showError(msg) {
    document.getElementById('card').style.display = 'none';
    const ec = document.getElementById('errorCard');
    ec.classList.add('active');
    if (msg) document.getElementById('errorBody').textContent = msg;
  }

  async function init() {
    const card = document.getElementById('card');
    card.classList.add('loading');

    try {
      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=${date}&end_date=${date}`;
      const res = await fetch(url);
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const data = await res.json();

      const daily = data.daily;
      if (!daily || !daily.time || daily.time.length === 0) {
        throw new Error('No daily data returned for this date.');
      }

      const idx = 0;
      const tMax = daily.temperature_2m_max[idx];
      const tMin = daily.temperature_2m_min[idx];
      const wCode = daily.weather_code[idx];
      const wInfo = wmoMap[wCode] || wmoMap[0];

      const hourly = data.hourly;
      const times = hourly.time;
      const temps = hourly.temperature_2m;
      const startIdx = times.findIndex(t => t.startsWith(date));
      const endIdx = times.findIndex(t => t.startsWith(date) && t.endsWith('T23:00'));
      const sliceStart = startIdx >= 0 ? startIdx : 0;
      const sliceEnd = endIdx >= 0 ? endIdx + 1 : sliceStart + 24;
      const dayTimes = times.slice(sliceStart, sliceEnd);
      const dayTemps = temps.slice(sliceStart, sliceEnd);

      // Compute bar heights
      let minT = Infinity, maxT = -Infinity;
      dayTemps.forEach(t => { if (t < minT) minT = t; if (t > maxT) maxT = t; });
      const range = maxT - minT || 1;
      const floor = minT - 2;
      const heights = dayTemps.map(t => Math.max(4, Math.round(((t - floor) / (maxT - floor + 4)) * 100)));

      // Populate DOM
      document.getElementById('locName').textContent = name;
      document.getElementById('locDate').textContent = fmtDate(date);
      document.getElementById('tempMain').innerHTML = `${Math.round((tMax + tMin) / 2)}<sup>°C</sup>`;
      document.getElementById('tempMax').textContent = `${Math.round(tMax)}°C`;
      document.getElementById('tempMin').textContent = `${Math.round(tMin)}°C`;
      document.getElementById('conditionText').textContent = wInfo.label;
      document.getElementById('weatherIcon').innerHTML = buildIcon(wInfo.icon);

      const chart = document.getElementById('hourlyChart');
      chart.innerHTML = '';
      dayTimes.forEach((t, i) => {
        const hour = parseInt(t.split('T')[1].split(':')[0], 10);
        const wrap = document.createElement('div');
        wrap.className = 'hourly-bar-wrap';
        wrap.innerHTML = `
          <div class="hourly-temp">${Math.round(dayTemps[i])}°</div>
          <div class="hourly-bar" style="height:0%"></div>
          <div class="hourly-time">${hour}:00</div>
        `;
        chart.appendChild(wrap);
        // animate height after append
        requestAnimationFrame(() => {
          wrap.querySelector('.hourly-bar').style.height = heights[i] + '%';
        });
      });

      card.classList.remove('loading');
    } catch (e) {
      showError(e.message || 'Failed to fetch weather data.');
    }
  }

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

L1 — cheap deterministic descriptors

bytes total15,879html / css / js1,723 / 5,872 / 8,284
dom nodes39dom depth8
css rules43js presentyes
brightness35.8contrast13.4
colorfulness18.1whitespace57.7%

This slot's telemetry

prompt tokens0completion tokens0
total tokens0wall71.5 s
costrequest id
config.json565 B
{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_OPENCODE_KEY",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "kimi-k2.6--cli--opencode--dev",
  "effort": null,
  "family": "kimi",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "kimi-k2.6",
  "protocol": "cli",
  "served_model": "kimi-k2.6",
  "telemetry": {
    "completion_tokens": null,
    "cost_usd": null,
    "prompt_tokens": null,
    "total_tokens": null,
    "wall_ms": 250003
  },
  "transport": "opencode-cli-isolated-xdg-go-subscription",
  "vendor_sanction_ref": null
}
send-log2.5 KB
{
  "N": 2,
  "batch_id": "2026-07-18--dev-opencode-cli",
  "config_id": "kimi-k2.6--cli--opencode--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-17T15:02:02.137832+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:01:20.952520+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-17T15:03:17.390191+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:02:05.846901+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-17T15:05:02.912276+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:03:21.732029+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-17T15:05:42.822829+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:05:06.728436+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
    }
  }
}