kimi-k2.7-code · opencode

opencode
config
kimi-k2.7-code--cli--opencode--dev
batch
2026-07-19--unified
transport
opencode-cli-isolated-xdg-go-subscription
protocol
cli · plan
served model
kimi-k2.7-code
captured
Jul 18, 2026, 11:54 AM · N=2
variant
live
slot 0 · P-q · sandboxed iframe
kimi-k2.7-code · 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 8/24 · 8 match · 0 mismatch · 16 not shown
  • request sidematch0 violation(s)

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

Source — raw model output, one byte unchanged

download card.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=1280, initial-scale=1">
  <title>Weather Card</title>
  <style>
    * { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; }
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
      color: #fff;
      text-shadow: 0 1px 2px rgba(0,0,0,0.15);
      transition: background 0.6s ease;
      --bg: linear-gradient(135deg, #2980b9 0%, #6dd5fa 100%);
      background: var(--bg);
    }
    body.sunny { --bg: linear-gradient(135deg, #00c6fb 0%, #005bea 100%); }
    body.cloudy { --bg: linear-gradient(135deg, #757f9a 0%, #d7dde8 100%); }
    body.rain { --bg: linear-gradient(135deg, #4b6cb7 0%, #182848 100%); }
    body.snow { --bg: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%); }
    body.thunder { --bg: linear-gradient(135deg, #141e30 0%, #243b55 100%); }
    body.fog { --bg: linear-gradient(135deg, #3e5151 0%, #decba4 100%); }

    .card {
      width: min(760px, 90vw);
      padding: 48px;
      border-radius: 32px;
      background: rgba(255,255,255,0.14);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(255,255,255,0.28);
      box-shadow: 0 32px 80px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
      animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    @keyframes rise {
      from { opacity: 0; transform: translateY(24px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .status {
      text-align: center;
      font-size: 1.25rem;
      padding: 48px 0;
    }
    .spinner {
      width: 40px;
      height: 40px;
      margin: 0 auto 16px;
      border: 3px solid rgba(255,255,255,0.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.9s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .error { color: #ffe0e0; }

    header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 16px;
      border-bottom: 1px solid rgba(255,255,255,0.18);
      padding-bottom: 18px;
      margin-bottom: 28px;
    }
    .location {
      font-size: 2rem;
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    .date {
      font-size: 1rem;
      opacity: 0.9;
      font-weight: 500;
      white-space: nowrap;
    }

    .main {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 48px;
      flex-wrap: wrap;
      margin-bottom: 36px;
    }
    .icon-wrap {
      width: 180px;
      height: 180px;
      filter: drop-shadow(0 8px 20px rgba(0,0,0,0.15));
      flex: 0 0 auto;
    }
    .icon-wrap svg { width: 100%; height: 100%; }
    .summary {
      text-align: center;
      flex: 1 1 auto;
    }
    .temp {
      font-size: 7rem;
      font-weight: 200;
      line-height: 1;
      letter-spacing: -0.04em;
    }
    .temp sup { font-size: 2rem; font-weight: 400; vertical-align: super; }
    .condition {
      font-size: 1.55rem;
      font-weight: 500;
      margin-top: 8px;
    }
    .high-low {
      font-size: 1.05rem;
      opacity: 0.85;
      margin-top: 10px;
      font-weight: 500;
    }

    .hourly {
      margin-top: 8px;
    }
    .hourly-title {
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      opacity: 0.75;
      margin-bottom: 12px;
    }
    .chart-wrap {
      position: relative;
      width: 100%;
      height: 220px;
      background: rgba(0,0,0,0.08);
      border-radius: 18px;
      padding: 12px;
      border: 1px solid rgba(255,255,255,0.12);
    }
    .chart-wrap svg { overflow: visible; }
    .tooltip {
      position: absolute;
      pointer-events: none;
      background: rgba(0,0,0,0.75);
      color: #fff;
      padding: 6px 10px;
      border-radius: 8px;
      font-size: 0.8rem;
      font-weight: 500;
      opacity: 0;
      transform: translate(-50%, -110%);
      transition: opacity 0.15s;
      white-space: nowrap;
      z-index: 10;
    }
  </style>
</head>
<body>
  <div class="card" id="card">
    <div class="status" id="loading">
      <div class="spinner"></div>
      <div>Loading weather…</div>
    </div>
    <div class="status error" id="error" hidden></div>
    <div id="content" hidden>
      <header>
        <div class="location" id="location">--</div>
        <div class="date" id="date">--</div>
      </header>
      <section class="main">
        <div class="icon-wrap" id="icon">--</div>
        <div class="summary">
          <div class="temp" id="temp">--<sup>°</sup></div>
          <div class="condition" id="condition">--</div>
          <div class="high-low" id="highLow">--</div>
        </div>
      </section>
      <section class="hourly">
        <div class="hourly-title">Hourly temperature</div>
        <div class="chart-wrap" id="chartWrap">
          <div class="tooltip" id="tooltip"></div>
        </div>
      </section>
    </div>
  </div>

  <script>
    const ICONS = {
      sun: `<svg viewBox="0 0 64 64" role="img" aria-label="Clear"><circle cx="32" cy="32" r="13" fill="#FFD54F"/><g stroke="#FFD54F" stroke-width="3" stroke-linecap="round"><line x1="32" y1="5" x2="32" y2="12"/><line x1="32" y1="52" x2="32" y2="59"/><line x1="5" y1="32" x2="12" y2="32"/><line x1="52" y1="32" x2="59" y2="32"/><line x1="12.9" y1="12.9" x2="17.9" y2="17.9"/><line x1="46.1" y1="46.1" x2="51.1" y2="51.1"/><line x1="12.9" y1="51.1" x2="17.9" y2="46.1"/><line x1="46.1" y1="17.9" x2="51.1" y2="12.9"/></g></svg>`,
      sunCloud: `<svg viewBox="0 0 64 64" role="img" aria-label="Partly cloudy"><circle cx="24" cy="24" r="10" fill="#FFD54F"/><g stroke="#FFD54F" stroke-width="2.5" stroke-linecap="round"><line x1="24" y1="5" x2="24" y2="9"/><line x1="24" y1="39" x2="24" y2="43"/><line x1="5" y1="24" x2="9" y2="24"/><line x1="39" y1="24" x2="43" y2="24"/></g><path d="M46 52H28c-6.6 0-12-5.4-12-12 0-5.8 4.2-10.7 9.8-11.7.8-4.6 4.9-8.1 9.7-8.1 4.5 0 8.3 3 9.5 7.2 4 .8 7 4.4 7 8.6 0 4.6-3.5 8.5-8 8.5z" fill="#fff" fill-opacity="0.95"/></svg>`,
      cloud: `<svg viewBox="0 0 64 64" role="img" aria-label="Cloudy"><path d="M46 50H22c-7.7 0-14-6.3-14-14 0-6.8 4.9-12.5 11.4-13.7.9-5.4 5.7-9.5 11.3-9.5 5.3 0 9.7 3.5 11.1 8.4 4.7.9 8.2 5.1 8.2 10.1 0 5.4-4.1 9.9-9 9.9z" fill="#fff" fill-opacity="0.95"/></svg>`,
      fog: `<svg viewBox="0 0 64 64" role="img" aria-label="Fog"><path d="M46 46H22c-7.7 0-14-6.3-14-14 0-6.8 4.9-12.5 11.4-13.7.9-5.4 5.7-9.5 11.3-9.5 5.3 0 9.7 3.5 11.1 8.4 4.7.9 8.2 5.1 8.2 10.1 0 5.4-4.1 9.9-9 9.9z" fill="#fff" fill-opacity="0.85"/><g stroke="#fff" stroke-width="3" stroke-linecap="round" opacity="0.9"><line x1="10" y1="50" x2="54" y2="50"/><line x1="14" y1="56" x2="50" y2="56"/></g></svg>`,
      rain: `<svg viewBox="0 0 64 64" role="img" aria-label="Rain"><path d="M46 44H22c-7.7 0-14-6.3-14-14 0-6.8 4.9-12.5 11.4-13.7.9-5.4 5.7-9.5 11.3-9.5 5.3 0 9.7 3.5 11.1 8.4 4.7.9 8.2 5.1 8.2 10.1 0 5.4-4.1 9.9-9 9.9z" fill="#fff" fill-opacity="0.95"/><g stroke="#aee3ff" stroke-width="2.5" stroke-linecap="round"><line x1="24" y1="48" x2="21" y2="56"/><line x1="34" y1="48" x2="31" y2="56"/><line x1="44" y1="48" x2="41" y2="56"/></g></svg>`,
      snow: `<svg viewBox="0 0 64 64" role="img" aria-label="Snow"><path d="M46 44H22c-7.7 0-14-6.3-14-14 0-6.8 4.9-12.5 11.4-13.7.9-5.4 5.7-9.5 11.3-9.5 5.3 0 9.7 3.5 11.1 8.4 4.7.9 8.2 5.1 8.2 10.1 0 5.4-4.1 9.9-9 9.9z" fill="#fff" fill-opacity="0.95"/><g fill="#fff"><circle cx="24" cy="52" r="2"/><circle cx="34" cy="56" r="2"/><circle cx="44" cy="52" r="2"/></g></svg>`,
      thunder: `<svg viewBox="0 0 64 64" role="img" aria-label="Thunderstorm"><path d="M46 42H22c-7.7 0-14-6.3-14-14 0-6.8 4.9-12.5 11.4-13.7.9-5.4 5.7-9.5 11.3-9.5 5.3 0 9.7 3.5 11.1 8.4 4.7.9 8.2 5.1 8.2 10.1 0 5.4-4.1 9.9-9 9.9z" fill="#cfd8dc" fill-opacity="0.95"/><path d="M34 40 L26 52 H32 L28 62 L40 48 H32 Z" fill="#FFD54F"/></svg>`
    };

    function weatherInfo(code) {
      const labels = {
        0: "Clear sky",
        1: "Mainly clear",
        2: "Partly cloudy",
        3: "Overcast",
        45: "Fog",
        48: "Depositing rime fog",
        51: "Light drizzle",
        53: "Moderate drizzle",
        55: "Dense drizzle",
        56: "Light freezing drizzle",
        57: "Dense freezing drizzle",
        61: "Slight rain",
        63: "Moderate rain",
        65: "Heavy rain",
        66: "Light freezing rain",
        67: "Heavy freezing rain",
        71: "Slight snow fall",
        73: "Moderate snow fall",
        75: "Heavy snow fall",
        77: "Snow grains",
        80: "Slight rain showers",
        81: "Moderate rain showers",
        82: "Violent rain showers",
        85: "Slight snow showers",
        86: "Heavy snow showers",
        95: "Thunderstorm",
        96: "Thunderstorm with hail",
        99: "Heavy thunderstorm with hail"
      };
      let icon = ICONS.sun, gradient = "sunny";
      if (code === 0) { icon = ICONS.sun; gradient = "sunny"; }
      else if (code <= 2) { icon = ICONS.sunCloud; gradient = "cloudy"; }
      else if (code === 3) { icon = ICONS.cloud; gradient = "cloudy"; }
      else if (code <= 48) { icon = ICONS.fog; gradient = "fog"; }
      else if (code <= 57) { icon = ICONS.rain; gradient = "rain"; }
      else if (code <= 67) { icon = ICONS.rain; gradient = "rain"; }
      else if (code <= 77 || (code >= 85 && code <= 86)) { icon = ICONS.snow; gradient = "snow"; }
      else if (code <= 82) { icon = ICONS.rain; gradient = "rain"; }
      else if (code >= 95) { icon = ICONS.thunder; gradient = "thunder"; }
      return { label: labels[code] || "Unknown", icon, gradient };
    }

    function getParams() {
      const p = new URLSearchParams(location.search);
      let lat = parseFloat(p.get("lat"));
      let lon = parseFloat(p.get("lon"));
      const rawName = p.get("name");
      const name = rawName ? decodeURIComponent(rawName) : "Berlin";
      let date = p.get("date");
      const today = new Date().toISOString().slice(0, 10);
      if (!/^\d{4}-\d{2}-\d{2}$/.test(date)) date = today;
      if (Number.isNaN(lat)) lat = 52.52;
      if (Number.isNaN(lon)) lon = 13.405;
      return { lat, lon, name, date, today };
    }

    function showError(msg) {
      document.getElementById("loading").hidden = true;
      document.getElementById("content").hidden = true;
      const err = document.getElementById("error");
      err.textContent = msg;
      err.hidden = false;
    }

    function formatDateUTC(iso) {
      return new Date(iso + "T00:00:00Z").toLocaleDateString(undefined, {
        weekday: "long", year: "numeric", month: "long", day: "numeric", timeZone: "UTC"
      });
    }

    function renderChart(hourly) {
      const wrap = document.getElementById("chartWrap");
      const oldSvg = wrap.querySelector("svg");
      if (oldSvg) oldSvg.remove();
      const times = hourly.time.map(t => new Date(t).getUTCHours());
      const temps = hourly.temperature_2m;
      const n = times.length;
      if (!n) return;

      const width = 700, height = 180, padX = 28, padY = 30;
      const minT = Math.min(...temps) - 2;
      const maxT = Math.max(...temps) + 2;
      const yRange = Math.max(maxT - minT, 1);
      const x = i => padX + (i / (n - 1)) * (width - padX * 2);
      const y = t => height - padY - ((t - minT) / yRange) * (height - padY * 2);

      const points = temps.map((t, i) => [x(i), y(t)]);
      const lineD = points.map((p, i) => (i ? "L" : "M") + p[0].toFixed(1) + "," + p[1].toFixed(1)).join(" ");
      const areaD = `${lineD} L${points[points.length - 1][0].toFixed(1)},${height} L${points[0][0].toFixed(1)},${height} Z`;

      const ns = "http://www.w3.org/2000/svg";
      const svg = document.createElementNS(ns, "svg");
      svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
      svg.setAttribute("width", "100%");
      svg.setAttribute("height", "100%");
      svg.setAttribute("preserveAspectRatio", "none");

      const defs = document.createElementNS(ns, "defs");
      const grad = document.createElementNS(ns, "linearGradient");
      grad.setAttribute("id", "areaGrad");
      grad.setAttribute("x1", "0"); grad.setAttribute("y1", "0");
      grad.setAttribute("x2", "0"); grad.setAttribute("y2", "1");
      grad.innerHTML = `<stop offset="0%" stop-color="#fff" stop-opacity="0.35"/><stop offset="100%" stop-color="#fff" stop-opacity="0"/>`;
      defs.appendChild(grad);
      svg.appendChild(defs);

      const area = document.createElementNS(ns, "path");
      area.setAttribute("d", areaD);
      area.setAttribute("fill", "url(#areaGrad)");
      svg.appendChild(area);

      const line = document.createElementNS(ns, "path");
      line.setAttribute("d", lineD);
      line.setAttribute("fill", "none");
      line.setAttribute("stroke", "#fff");
      line.setAttribute("stroke-width", "3");
      line.setAttribute("stroke-linecap", "round");
      line.setAttribute("stroke-linejoin", "round");
      svg.appendChild(line);

      const labelEvery = n > 12 ? 3 : 2;
      points.forEach((p, i) => {
        const circle = document.createElementNS(ns, "circle");
        circle.setAttribute("cx", p[0].toFixed(1));
        circle.setAttribute("cy", p[1].toFixed(1));
        circle.setAttribute("r", "4");
        circle.setAttribute("fill", "#fff");
        circle.setAttribute("stroke", "rgba(0,0,0,0.15)");
        circle.setAttribute("stroke-width", "1");
        svg.appendChild(circle);

        if (i % labelEvery === 0) {
          const lbl = document.createElementNS(ns, "text");
          lbl.setAttribute("x", p[0].toFixed(1));
          lbl.setAttribute("y", height - 6);
          lbl.setAttribute("text-anchor", "middle");
          lbl.setAttribute("fill", "#fff");
          lbl.setAttribute("font-size", "11");
          lbl.setAttribute("font-weight", "600");
          lbl.textContent = String(times[i]).padStart(2, "0") + ":00";
          svg.appendChild(lbl);

          const val = document.createElementNS(ns, "text");
          val.setAttribute("x", p[0].toFixed(1));
          val.setAttribute("y", (p[1] - 12).toFixed(1));
          val.setAttribute("text-anchor", "middle");
          val.setAttribute("fill", "#fff");
          val.setAttribute("font-size", "11");
          val.setAttribute("font-weight", "700");
          val.textContent = Math.round(temps[i]) + "°";
          svg.appendChild(val);
        }
      });

      const tooltip = document.getElementById("tooltip");
      wrap.addEventListener("mousemove", e => {
        const rect = svg.getBoundingClientRect();
        const sx = e.clientX - rect.left;
        const i = Math.max(0, Math.min(n - 1, Math.round(((sx / rect.width) * (width - padX * 2) - padX) / (width - padX * 2) * (n - 1))));
        tooltip.textContent = `${String(times[i]).padStart(2, "0")}:00 · ${Math.round(temps[i])}°C`;
        tooltip.style.left = `${(i / (n - 1)) * 100}%`;
        tooltip.style.top = `${(points[i][1] / height) * 100}%`;
        tooltip.style.opacity = "1";
      });
      wrap.addEventListener("mouseleave", () => { tooltip.style.opacity = "0"; });

      wrap.insertBefore(svg, tooltip);
    }

    async function init() {
      const { lat, lon, name, date, today } = getParams();
      const endpoint = date < today ? "/api/om/archive" : "/api/om/forecast";
      const url = `${endpoint}?latitude=${encodeURIComponent(lat)}&longitude=${encodeURIComponent(lon)}&daily=temperature_2m_max,temperature_2m_min,weather_code&hourly=temperature_2m&timezone=UTC&temperature_unit=celsius&start_date=${date}&end_date=${date}`;

      try {
        const res = await fetch(url);
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const data = await res.json();
        const daily = data.daily;
        const hourly = data.hourly;
        if (!daily || !daily.temperature_2m_max || !daily.temperature_2m_max.length ||
            !hourly || !hourly.time || !hourly.time.length) {
          throw new Error("incomplete data");
        }

        const max = Math.round(daily.temperature_2m_max[0]);
        const min = Math.round(daily.temperature_2m_min[0]);
        const code = daily.weather_code[0];
        const info = weatherInfo(code);

        document.body.className = info.gradient;
        document.getElementById("location").textContent = name;
        document.getElementById("date").textContent = formatDateUTC(date);
        document.getElementById("icon").innerHTML = info.icon;
        document.getElementById("temp").innerHTML = `${max}<sup>°</sup>`;
        document.getElementById("condition").textContent = info.label;
        document.getElementById("highLow").textContent = `High ${max}° · Low ${min}°`;

        renderChart(hourly);

        document.getElementById("loading").hidden = true;
        document.getElementById("error").hidden = true;
        document.getElementById("content").hidden = false;
      } catch (e) {
        showError("Weather data cannot be loaded. Please check the location and date.");
      }
    }

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

L1 — cheap deterministic descriptors

bytes total17,268html / css / js1,144 / 4,068 / 12,056
dom nodes28dom depth8
css rules34js presentyes
brightness87.7contrast27.9
colorfulness33.8whitespace46.6%

This slot's telemetry

prompt tokens0completion tokens0
total tokens0wall287.6 s
costrequest id
config.json580 B
{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_OPENCODE_KEY",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "kimi-k2.7-code--cli--opencode--dev",
  "effort": null,
  "family": "kimi",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "kimi-k2.7-code",
  "protocol": "cli",
  "served_model": "kimi-k2.7-code",
  "telemetry": {
    "completion_tokens": null,
    "cost_usd": null,
    "prompt_tokens": null,
    "total_tokens": null,
    "wall_ms": 899767
  },
  "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.7-code--cli--opencode--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-17T15:08:28.911982+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:05:46.834243+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:13:20.049370+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:08:32.501805+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:19:36.711126+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:13:23.912254+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:20:57.725843+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-17T15:19:40.391344+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
    }
  }
}