kimi-k2.7-code · go
go
- config
- kimi-k2.7-code--opencode-go--dev
- batch
- 2026-07-19--unified
- transport
- opencode-go-gateway
- protocol
- api · plan
- served model
- kimi-k2.7-code
- 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-8 @medium · kiro0.72claude-sonnet-4-6 @high · kiro0.72claude-sonnet-4-6 @medium · kiro0.70kimi-k3 @disabled · api0.70claude-opus-4-7 @low · kiro0.67farthest
gpt-5.6-luna @low · codex-oauth0.41gpt-5.6-luna @medium · codex-oauth0.42gpt-5.6-luna @high · kiro0.44nemotron-3-ultra-free · api0.45claude-haiku-4-5 @xhigh · CC0.45within 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 tempambiguousshown: 17max-equals-min
- min tempambiguousshown: 17max-equals-min
- hourlyambiguouscoverage · 0 match · 0 mismatch · 24 not shown
- request sidematch0 violation(s)
extractor fidelity-extractor-v1+Berlin-2026-07-15
Source — raw model output, one byte unchanged
download card.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Weather Card</title>
<style>
:root {
--bg-1: #0f172a;
--bg-2: #1e3a8a;
--bg-3: #0ea5e9;
--card-bg: rgba(255, 255, 255, 0.08);
--card-border: rgba(255, 255, 255, 0.18);
--text: #f8fafc;
--muted: #cbd5e1;
--accent: #38bdf8;
--shadow: rgba(0, 0, 0, 0.35);
--max-color: #f59e0b;
--min-color: #38bdf8;
--radius: 28px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
color: var(--text);
background: radial-gradient(circle at 20% 20%, var(--bg-3) 0%, transparent 45%),
radial-gradient(circle at 85% 75%, var(--bg-2) 0%, transparent 45%),
linear-gradient(135deg, var(--bg-1), #020617);
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
padding: 40px;
}
.card {
width: 900px;
max-width: 95vw;
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--radius);
box-shadow: 0 30px 80px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.15);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
padding: 48px;
display: flex;
flex-direction: column;
gap: 36px;
}
header {
display: flex;
justify-content: space-between;
align-items: flex-start;
border-bottom: 1px solid rgba(255,255,255,0.12);
padding-bottom: 28px;
}
.location {
font-size: 2.4rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
}
.location svg {
width: 28px;
height: 28px;
vertical-align: -4px;
margin-right: 8px;
fill: var(--accent);
}
.date {
font-size: 1.1rem;
color: var(--muted);
font-weight: 500;
text-align: right;
line-height: 1.4;
}
.overview {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 48px;
align-items: center;
}
.condition {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 18px;
}
.condition-icon {
width: 160px;
height: 160px;
filter: drop-shadow(0 12px 24px rgba(0,0,0,0.25));
}
.condition-text {
font-size: 1.5rem;
font-weight: 600;
color: var(--text);
text-transform: capitalize;
letter-spacing: 0.02em;
}
.temps {
display: flex;
gap: 24px;
justify-content: center;
}
.temp-badge {
flex: 1;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 20px;
padding: 24px 28px;
text-align: center;
min-width: 140px;
transition: transform 0.2s ease;
}
.temp-badge:hover {
transform: translateY(-4px);
background: rgba(255,255,255,0.11);
}
.temp-badge .value {
font-size: 3.2rem;
font-weight: 700;
line-height: 1;
}
.temp-badge .unit {
font-size: 1.2rem;
font-weight: 500;
color: var(--muted);
margin-left: 2px;
}
.temp-badge .sub {
font-size: 0.85rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 10px;
}
.temp-badge.max .value { color: var(--max-color); }
.temp-badge.min .value { color: var(--min-color); }
.hourly {
background: rgba(0, 0, 0, 0.15);
border-radius: 20px;
padding: 28px;
}
.hourly h3 {
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
margin-bottom: 20px;
}
.chart {
display: flex;
justify-content: space-between;
gap: 8px;
height: 240px;
padding: 0 4px;
}
.bar-col {
flex: 1 1 0;
min-width: 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.bar-label {
font-size: 0.85rem;
font-weight: 600;
color: var(--text);
white-space: nowrap;
}
.bar-wrapper {
width: 100%;
flex: 1;
display: flex;
align-items: flex-end;
justify-content: center;
position: relative;
}
.bar {
width: 70%;
border-radius: 8px 8px 4px 4px;
background: linear-gradient(to top, rgba(255,255,255,0.15), rgba(255,255,255,0.4));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 6px 14px rgba(0,0,0,0.15);
transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.bar-time {
font-size: 0.7rem;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.error {
text-align: center;
padding: 48px 32px;
}
.error h2 {
font-size: 1.6rem;
margin-bottom: 12px;
color: #f87171;
}
.error p {
color: var(--muted);
font-size: 1rem;
line-height: 1.5;
}
.hidden {
display: none !important;
}
.loading {
text-align: center;
color: var(--muted);
font-size: 1.1rem;
padding: 48px;
}
.spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(255,255,255,0.15);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 18px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@media (max-width: 980px) {
.card {
width: 100%;
padding: 32px;
}
.overview {
grid-template-columns: 1fr;
}
.chart {
overflow-x: auto;
gap: 10px;
}
.bar-col {
min-width: 36px;
}
}
</style>
</head>
<body>
<div class="card">
<div class="loading" id="loading">
<div class="spinner"></div>
Loading weather data…
</div>
<div id="content" class="hidden">
<header>
<div class="location">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
<span id="locationName"></span>
</div>
<div class="date" id="dateDisplay"></div>
</header>
<section class="overview">
<div class="condition">
<div id="conditionIcon" class="condition-icon"></div>
<div id="conditionText" class="condition-text"></div>
</div>
<div class="temps">
<div class="temp-badge max">
<div><span class="value" id="maxTemp"></span><span class="unit">°C</span></div>
<div class="sub">High</div>
</div>
<div class="temp-badge min">
<div><span class="value" id="minTemp"></span><span class="unit">°C</span></div>
<div class="sub">Low</div>
</div>
</div>
</section>
<section class="hourly">
<h3>Hourly Temperatures</h3>
<div class="chart" id="hourlyChart"></div>
</section>
</div>
<div class="error hidden" id="error">
<h2>Unable to load weather data</h2>
<p>Please check the location, date, and network connection, then try again.</p>
</div>
</div>
<script>
(function () {
const today = new Date();
const defaultDate = [
today.getUTCFullYear(),
String(today.getUTCMonth() + 1).padStart(2, '0'),
String(today.getUTCDate()).padStart(2, '0')
].join('-');
function getParam(name, fallback) {
const value = new URLSearchParams(window.location.search).get(name);
return value ? value.trim() : fallback;
}
const lat = parseFloat(getParam('lat', '52.52')) || 52.52;
const lon = parseFloat(getParam('lon', '13.405')) || 13.405;
const name = getParam('name', 'Berlin');
const date = getParam('date', defaultDate);
const locationEl = document.getElementById('locationName');
const dateEl = document.getElementById('dateDisplay');
const maxTempEl = document.getElementById('maxTemp');
const minTempEl = document.getElementById('minTemp');
const conditionTextEl = document.getElementById('conditionText');
const conditionIconEl = document.getElementById('conditionIcon');
const hourlyChartEl = document.getElementById('hourlyChart');
const loadingEl = document.getElementById('loading');
const contentEl = document.getElementById('content');
const errorEl = document.getElementById('error');
function formatDateDisplay(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 getWeatherInfo(code) {
const map = {
0: { text: 'Clear sky', type: 'sun' },
1: { text: 'Mainly clear', type: 'sun' },
2: { text: 'Partly cloudy', type: 'cloud-sun' },
3: { text: 'Overcast', type: 'cloud' },
45: { text: 'Fog', type: 'fog' },
48: { text: 'Depositing rime fog', type: 'fog' },
51: { text: 'Light drizzle', type: 'rain' },
53: { text: 'Moderate drizzle', type: 'rain' },
55: { text: 'Dense drizzle', type: 'rain' },
56: { text: 'Light freezing drizzle', type: 'rain' },
57: { text: 'Dense freezing drizzle', type: 'rain' },
61: { text: 'Slight rain', type: 'rain' },
63: { text: 'Moderate rain', type: 'rain' },
65: { text: 'Heavy rain', type: 'rain' },
66: { text: 'Light freezing rain', type: 'rain' },
67: { text: 'Heavy freezing rain', type: 'rain' },
71: { text: 'Slight snow', type: 'snow' },
73: { text: 'Moderate snow', type: 'snow' },
75: { text: 'Heavy snow', type: 'snow' },
77: { text: 'Snow grains', type: 'snow' },
80: { text: 'Slight rain showers', type: 'rain' },
81: { text: 'Moderate rain showers', type: 'rain' },
82: { text: 'Violent rain showers', type: 'rain' },
85: { text: 'Slight snow showers', type: 'snow' },
86: { text: 'Heavy snow showers', type: 'snow' },
95: { text: 'Thunderstorm', type: 'storm' },
96: { text: 'Thunderstorm with hail', type: 'storm' },
99: { text: 'Thunderstorm with hail', type: 'storm' }
};
return map[code] || { text: 'Unknown', type: 'sun' };
}
function getIconSvg(type) {
const sun = `
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<circle cx="32" cy="32" r="14" fill="#fbbf24"/>
<g stroke="#fbbf24" stroke-width="4" stroke-linecap="round">
<line x1="32" y1="4" x2="32" y2="12"/>
<line x1="32" y1="52" x2="32" y2="60"/>
<line x1="4" y1="32" x2="12" y2="32"/>
<line x1="52" y1="32" x2="60" y2="32"/>
<line x1="12.2" y1="12.2" x2="17.9" y2="17.9"/>
<line x1="46.1" y1="46.1" x2="51.8" y2="51.8"/>
<line x1="12.2" y1="51.8" x2="17.9" y2="46.1"/>
<line x1="46.1" y1="17.9" x2="51.8" y2="12.2"/>
</g>
</svg>`;
const cloud = `
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<path d="M46,24c0-7.7-6.3-14-14-14c-6.2,0-11.5,4.1-13.3,9.7C17.8,19.5,17,19.5,16,19.5
C8.5,19.5,2.5,25.5,2.5,33S8.5,46.5,16,46.5h30c8,0,14.5-6.5,14.5-14.5S54,17.5,46,24z" fill="#e2e8f0"/>
</svg>`;
const cloudSun = `
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="10" fill="#fbbf24"/>
<g stroke="#fbbf24" stroke-width="3" stroke-linecap="round">
<line x1="24" y1="4" x2="24" y2="10"/>
<line x1="24" y1="38" x2="24" y2="44"/>
<line x1="4" y1="24" x2="10" y2="24"/>
<line x1="38" y1="24" x2="44" y2="24"/>
</g>
<path d="M46,26c0-7.7-6.3-14-14-14c-1.1,0-2.2,0.1-3.2,0.4
C30.2,17.5,31,21,31,25c0,0.6,0,1.2-0.1,1.8
C31.5,26.7,32.2,26.5,33,26.5c8,0,14.5,6.5,14.5,14.5S41,55.5,33,55.5
H16c-8,0-14.5-6.5-14.5-14.5S8.5,26.5,16,26.5c1.5,0,2.9,0.2,4.2,0.6
C21.5,21.5,25.5,18,30,18c5.2,0,9.6,3.8,11.2,8.8C43.6,27.6,44.8,26.9,46,26z" fill="#cbd5e1"/>
</svg>`;
const rain = `
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<path d="M46,22c0-7.7-6.3-14-14-14c-6.2,0-11.5,4.1-13.3,9.7
C17.8,17.5,17,17.5,16,17.5C8.5,17.5,2.5,23.5,2.5,31
S8.5,44.5,16,44.5h30c8,0,14.5-6.5,14.5-14.5S54,15.5,46,22z" fill="#94a3b8"/>
<g stroke="#38bdf8" stroke-width="3" stroke-linecap="round">
<line x1="20" y1="48" x2="16" y2="58"/>
<line x1="32" y1="48" x2="28" y2="58"/>
<line x1="44" y1="48" x2="40" y2="58"/>
</g>
</svg>`;
const snow = `
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<path d="M46,22c0-7.7-6.3-14-14-14c-6.2,0-11.5,4.1-13.3,9.7
C17.8,17.5,17,17.5,16,17.5C8.5,17.5,2.5,23.5,2.5,31
S8.5,44.5,16,44.5h30c8,0,14.5-6.5,14.5-14.5S54,15.5,46,22z" fill="#e2e8f0"/>
<g fill="#fff">
<circle cx="18" cy="52" r="2.5"/>
<circle cx="32" cy="56" r="2.5"/>
<circle cx="46" cy="52" r="2.5"/>
<circle cx="24" cy="48" r="2"/>
<circle cx="40" cy="48" r="2"/>
</g>
</svg>`;
const storm = `
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<path d="M46,22c0-7.7-6.3-14-14-14c-6.2,0-11.5,4.1-13.3,9.7
C17.8,17.5,17,17.5,16,17.5C8.5,17.5,2.5,23.5,2.5,31
S8.5,44.5,16,44.5h30c8,0,14.5-6.5,14.5-14.5S54,15.5,46,22z" fill="#64748b"/>
<polygon points="28,44 36,44 30,56 42,48 34,48 40,36" fill="#fbbf24" stroke="#fbbf24" stroke-width="1" stroke-linejoin="round"/>
</svg>`;
const fog = `
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<path d="M46,24c0-7.7-6.3-14-14-14c-6.2,0-11.5,4.1-13.3,9.7
C17.8,19.5,17,19.5,16,19.5C8.5,19.5,2.5,25.5,2.5,33
S8.5,46.5,16,46.5h30c8,0,14.5-6.5,14.5-14.5S54,17.5,46,24z" fill="#cbd5e1"/>
<g stroke="#94a3b8" stroke-width="3" stroke-linecap="round">
<line x1="10" y1="50" x2="54" y2="50"/>
<line x1="14" y1="56" x2="50" y2="56"/>
</g>
</svg>`;
const icons = {
sun: sun,
'cloud-sun': cloudSun,
cloud: cloud,
rain: rain,
snow: snow,
storm: storm,
fog: fog
};
return icons[type] || sun;
}
function tempColor(temp) {
const minT = -10;
const maxT = 35;
let t = Math.max(minT, Math.min(maxT, temp));
const ratio = (t - minT) / (maxT - minT);
const hue = 240 - ratio * 210; // blue to red
return `hsl(${hue}, 80%, 60%)`;
}
function render(data) {
const daily = data.daily;
if (!daily || !daily.time || daily.time.length === 0) {
throw new Error('No daily data');
}
const dayIndex = daily.time.indexOf(date);
const useIndex = dayIndex >= 0 ? dayIndex : 0;
const maxTemp = Math.round(daily.temperature_2m_max[useIndex]);
const minTemp = Math.round(daily.temperature_2m_min[useIndex]);
const code = daily.weather_code[useIndex];
const info = getWeatherInfo(code);
locationEl.textContent = name;
dateEl.textContent = formatDateDisplay(date);
maxTempEl.textContent = maxTemp;
minTempEl.textContent = minTemp;
conditionTextEl.textContent = info.text;
conditionIconEl.innerHTML = getIconSvg(info.type);
const hourly = data.hourly;
hourlyChartEl.innerHTML = '';
if (!hourly || !hourly.time || hourly.time.length === 0) {
hourlyChartEl.innerHTML = '<div class="bar-label">No hourly data available</div>';
return;
}
const temps = hourly.temperature_2m.map(t => t);
const hMin = Math.min(...temps);
const hMax = Math.max(...temps);
const range = Math.max(hMax - hMin, 1);
const fragment = document.createDocumentFragment();
hourly.time.forEach((time, i) => {
const temp = temps[i];
const hour = new Date(time).getUTCHours();
const timeLabel = String(hour).padStart(2, '0') + ':00';
const heightPct = 20 + ((temp - hMin) / range) * 80;
const col = document.createElement('div');
col.className = 'bar-col';
const label = document.createElement('div');
label.className = 'bar-label';
label.textContent = Math.round(temp) + '°';
const wrapper = document.createElement('div');
wrapper.className = 'bar-wrapper';
const bar = document.createElement('div');
bar.className = 'bar';
bar.style.height = heightPct + '%';
bar.style.background = `linear-gradient(to top, ${tempColor(temp)} 0%, rgba(255,255,255,0.45) 100%)`;
const timeEl = document.createElement('div');
timeEl.className = 'bar-time';
timeEl.textContent = timeLabel;
wrapper.appendChild(bar);
col.appendChild(label);
col.appendChild(wrapper);
col.appendChild(timeEl);
fragment.appendChild(col);
});
hourlyChartEl.appendChild(fragment);
}
async function load() {
const isPast = date < defaultDate;
const endpoint = isPast ? '/api/om/archive' : '/api/om/forecast';
const params = 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: date,
end_date: date
});
const response = await fetch(`${endpoint}?${params.toString()}`);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const data = await response.json();
render(data);
loadingEl.classList.add('hidden');
contentEl.classList.remove('hidden');
}
load().catch(err => {
console.error(err);
loadingEl.classList.add('hidden');
contentEl.classList.add('hidden');
errorEl.classList.remove('hidden');
});
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 19,417 | html / css / js | 1,797 / 6,023 / 11,597 |
|---|---|---|---|
| dom nodes | 39 | dom depth | 9 |
| css rules | 42 | js present | yes |
| brightness | 62.3 | contrast | 37.0 |
| colorfulness | 67.8 | whitespace | 35.8% |
This slot's telemetry
| prompt tokens | 313 | completion tokens | 8,729 |
|---|---|---|---|
| total tokens | 9,042 | wall | 38.7 s |
| cost | — | request id | — |
config.json552 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_OPENCODE_KEY",
"method": "oauth"
},
"billing": "plan",
"config_id": "kimi-k2.7-code--opencode-go--dev",
"effort": null,
"family": "kimi",
"m": {
"min": 2,
"q": 2
},
"model_id": "kimi-k2.7-code",
"protocol": "api",
"served_model": "kimi-k2.7-code",
"telemetry": {
"completion_tokens": 42171,
"cost_usd": null,
"prompt_tokens": 1236,
"total_tokens": 43407,
"wall_ms": 189826
},
"transport": "opencode-go-gateway",
"vendor_sanction_ref": null
}send-log2.5 KB
{
"N": 2,
"batch_id": "2026-07-19--go-requeue2",
"config_id": "kimi-k2.7-code--opencode-go--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-18T20:05:47.404720+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-18T20:05:05.220821+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-18T20:06:29.468886+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-18T20:05:50.815695+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-18T20:07:51.624709+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-18T20:06:33.455265+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-18T20:08:26.676629+00:00",
"http_status": 200,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-18T20:07:55.854745+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
}
}
}