grok-4.5 · opencode
opencode
- config
- grok-4.5--cli--opencode--dev
- batch
- 2026-07-19--unified
- transport
- opencode-cli-isolated-xdg-go-subscription
- protocol
- cli · plan
- served model
- grok-4.5
- 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
grok-4.5 @high · api0.78grok-4.5 @medium · api0.78grok-4.5 @low · api0.77grok-4.5 @low · grok-cli0.76grok-4.5 · api0.76farthest
north-mini-code-free · api0.51claude-haiku-4-5 @high · CC0.53claude-sonnet-4 · kiro0.53claude-sonnet-4 · cursor0.53gpt-6-astra · codex0.54within 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: 13.4
- min tempmismatchshown: 52.52
- 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 {
--bg0: #0b1220;
--bg1: #121a2b;
--card: rgba(18, 28, 48, 0.72);
--stroke: rgba(255, 255, 255, 0.10);
--text: #f4f7fb;
--muted: rgba(244, 247, 251, 0.62);
--soft: rgba(244, 247, 251, 0.38);
--accent: #7dd3fc;
--accent2: #a78bfa;
--warm: #fbbf24;
--cold: #67e8f9;
--danger: #fda4af;
--shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
--radius: 28px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
width: 1280px;
height: 800px;
overflow: hidden;
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
color: var(--text);
background: var(--bg0);
}
body {
display: grid;
place-items: center;
background:
radial-gradient(1200px 600px at 12% 10%, rgba(56, 189, 248, 0.18), transparent 55%),
radial-gradient(900px 500px at 88% 18%, rgba(167, 139, 250, 0.16), transparent 50%),
radial-gradient(800px 500px at 50% 100%, rgba(251, 191, 36, 0.08), transparent 55%),
linear-gradient(160deg, #0b1220 0%, #10182a 45%, #0a101c 100%);
}
.shell {
width: 1080px;
height: 640px;
position: relative;
}
.glow {
position: absolute;
inset: -2px;
border-radius: calc(var(--radius) + 2px);
background: linear-gradient(135deg, rgba(125, 211, 252, 0.45), rgba(167, 139, 250, 0.35), rgba(251, 191, 36, 0.25));
filter: blur(18px);
opacity: 0.55;
z-index: 0;
}
.card {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
border-radius: var(--radius);
background:
linear-gradient(180deg, rgba(255,255,255,0.06), transparent 28%),
var(--card);
border: 1px solid var(--stroke);
box-shadow: var(--shadow);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
overflow: hidden;
display: grid;
grid-template-rows: auto 1fr auto;
padding: 40px 48px 36px;
}
.card::before {
content: "";
position: absolute;
width: 420px;
height: 420px;
right: -80px;
top: -120px;
background: radial-gradient(circle, rgba(125, 211, 252, 0.14), transparent 68%);
pointer-events: none;
}
.top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
}
.loc-block { min-width: 0; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
font-weight: 600;
margin-bottom: 14px;
}
.eyebrow .dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 12px rgba(125, 211, 252, 0.9);
}
.location {
font-size: 42px;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 560px;
}
.date {
margin-top: 10px;
font-size: 18px;
color: var(--muted);
font-weight: 500;
}
.badge {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
padding: 14px 18px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.badge .label {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--soft);
font-weight: 600;
}
.badge .value {
font-size: 15px;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.main {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 36px;
align-items: center;
min-height: 0;
padding: 8px 0 12px;
}
.hero {
display: flex;
align-items: center;
gap: 28px;
}
.icon-wrap {
width: 148px;
height: 148px;
border-radius: 36px;
display: grid;
place-items: center;
background:
linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)),
rgba(8, 14, 28, 0.35);
border: 1px solid rgba(255, 255, 255, 0.10);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
position: relative;
overflow: hidden;
}
.icon-wrap::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.18), transparent 45%);
pointer-events: none;
}
.wx-icon {
width: 88px;
height: 88px;
position: relative;
z-index: 1;
}
.hero-copy { min-width: 0; }
.condition {
font-size: 28px;
font-weight: 650;
letter-spacing: -0.02em;
margin-bottom: 18px;
}
.temps {
display: flex;
gap: 18px;
}
.temp-pill {
min-width: 132px;
padding: 16px 18px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.07);
}
.temp-pill .k {
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--soft);
font-weight: 600;
margin-bottom: 8px;
}
.temp-pill .v {
font-size: 36px;
font-weight: 700;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.temp-pill.max .v { color: var(--warm); }
.temp-pill.min .v { color: var(--cold); }
.temp-pill .unit {
font-size: 18px;
font-weight: 600;
margin-left: 2px;
opacity: 0.75;
}
.side-panel {
height: 100%;
min-height: 220px;
border-radius: 22px;
padding: 22px 22px 18px;
background:
linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
border: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
flex-direction: column;
gap: 14px;
}
.side-title {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.side-title h2 {
font-size: 14px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
font-weight: 650;
}
.side-title span {
font-size: 13px;
color: var(--soft);
font-variant-numeric: tabular-nums;
}
.spark {
flex: 1;
min-height: 0;
position: relative;
}
.spark svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.range-row {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--soft);
font-variant-numeric: tabular-nums;
}
.hourly {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 22px;
}
.hourly-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 14px;
}
.hourly-head h3 {
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
font-weight: 650;
}
.hourly-head span {
font-size: 12px;
color: var(--soft);
}
.hours {
display: grid;
grid-template-columns: repeat(24, 1fr);
gap: 6px;
align-items: end;
}
.hour {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
min-width: 0;
}
.hour .bar-wrap {
width: 100%;
height: 72px;
display: flex;
align-items: flex-end;
justify-content: center;
}
.hour .bar {
width: 100%;
max-width: 18px;
border-radius: 999px 999px 6px 6px;
background: linear-gradient(180deg, var(--accent), rgba(167, 139, 250, 0.75));
box-shadow: 0 0 16px rgba(125, 211, 252, 0.18);
min-height: 4px;
transition: height 0.45s cubic-bezier(.2,.8,.2,1);
}
.hour .t {
font-size: 11px;
font-weight: 650;
color: var(--text);
font-variant-numeric: tabular-nums;
opacity: 0.92;
}
.hour .h {
font-size: 10px;
color: var(--soft);
font-variant-numeric: tabular-nums;
}
.hour.dim .t,
.hour.dim .h { opacity: 0.45; }
.hour.dim .bar { opacity: 0.45; filter: saturate(0.7); }
.state {
position: absolute;
inset: 0;
display: grid;
place-items: center;
z-index: 5;
background: rgba(8, 12, 22, 0.55);
backdrop-filter: blur(8px);
}
.state.hidden { display: none; }
.state-box {
text-align: center;
padding: 28px 36px;
border-radius: 20px;
background: rgba(15, 22, 38, 0.9);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: var(--shadow);
max-width: 420px;
}
.spinner {
width: 36px;
height: 36px;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.12);
border-top-color: var(--accent);
margin: 0 auto 16px;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.state-box h2 {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}
.state-box p {
font-size: 14px;
color: var(--muted);
line-height: 1.5;
}
.state-box.error h2 { color: var(--danger); }
.content.hidden { visibility: hidden; }
</style>
</head>
<body>
<div class="shell">
<div class="glow"></div>
<div class="card">
<div id="state" class="state">
<div class="state-box" id="stateBox">
<div class="spinner" id="spinner"></div>
<h2 id="stateTitle">Loading weather</h2>
<p id="stateMsg">Fetching conditions for your location…</p>
</div>
</div>
<div class="content" id="content">
<header class="top">
<div class="loc-block">
<div class="eyebrow"><span class="dot"></span> Weather Card</div>
<h1 class="location" id="locationName">—</h1>
<p class="date" id="dateLabel">—</p>
</div>
<div class="badge">
<span class="label">Coordinates</span>
<span class="value" id="coords">—</span>
</div>
</header>
<section class="main">
<div class="hero">
<div class="icon-wrap" id="iconWrap" aria-hidden="true"></div>
<div class="hero-copy">
<div class="condition" id="condition">—</div>
<div class="temps">
<div class="temp-pill max">
<div class="k">High</div>
<div class="v"><span id="tempMax">—</span><span class="unit">°C</span></div>
</div>
<div class="temp-pill min">
<div class="k">Low</div>
<div class="v"><span id="tempMin">—</span><span class="unit">°C</span></div>
</div>
</div>
</div>
</div>
<aside class="side-panel">
<div class="side-title">
<h2>Temperature curve</h2>
<span id="rangeLabel">24h · °C</span>
</div>
<div class="spark" id="spark"></div>
<div class="range-row">
<span id="sparkMin">—</span>
<span id="sparkMax">—</span>
</div>
</aside>
</section>
<section class="hourly">
<div class="hourly-head">
<h3>Hourly temperatures</h3>
<span>UTC · °C</span>
</div>
<div class="hours" id="hours"></div>
</section>
</div>
</div>
</div>
<script>
(function () {
const WMO = {
0: { label: "Clear sky", icon: "clear" },
1: { label: "Mainly clear", icon: "clear" },
2: { label: "Partly cloudy", icon: "partly" },
3: { label: "Overcast", icon: "cloud" },
45: { label: "Fog", icon: "fog" },
48: { label: "Depositing rime fog", icon: "fog" },
51: { label: "Light drizzle", icon: "drizzle" },
53: { label: "Moderate drizzle", icon: "drizzle" },
55: { label: "Dense drizzle", icon: "drizzle" },
56: { label: "Light freezing drizzle", icon: "drizzle" },
57: { label: "Dense freezing drizzle", icon: "drizzle" },
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", icon: "snow" },
73: { label: "Moderate snow", icon: "snow" },
75: { label: "Heavy snow", icon: "snow" },
77: { label: "Snow grains", icon: "snow" },
80: { label: "Slight rain showers", icon: "shower" },
81: { label: "Moderate rain showers", icon: "shower" },
82: { label: "Violent rain showers", icon: "shower" },
85: { label: "Slight snow showers", icon: "snow" },
86: { label: "Heavy snow showers", icon: "snow" },
95: { label: "Thunderstorm", icon: "thunder" },
96: { label: "Thunderstorm with slight hail", icon: "thunder" },
99: { label: "Thunderstorm with heavy hail", icon: "thunder" }
};
function icons(kind) {
const common = 'xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88" fill="none" class="wx-icon"';
const sun = '<circle cx="44" cy="44" r="14" fill="#FBBF24"/><g stroke="#FBBF24" stroke-width="3.5" stroke-linecap="round"><path d="M44 14v8M44 66v8M14 44h8M66 44h8M22.5 22.5l5.5 5.5M60 60l5.5 5.5M22.5 65.5l5.5-5.5M60 28l5.5-5.5"/></g>';
const cloud = '<path d="M28 62h34a14 14 0 0 0 1.2-28 18 18 0 0 0-34.5-5.2A13 13 0 0 0 28 62Z" fill="#E2E8F0" fill-opacity=".92"/>';
const map = {
clear: `<svg ${common}>${sun}</svg>`,
partly: `<svg ${common}>${sun}<g transform="translate(8,10)">${cloud}</g></svg>`,
cloud: `<svg ${common}>${cloud}<path d="M22 70h30a11 11 0 0 0 .8-22 14 14 0 0 0-27-3.5A10 10 0 0 0 22 70Z" fill="#94A3B8" fill-opacity=".55"/></svg>`,
fog: `<svg ${common}><path d="M24 36h40M20 46h48M26 56h36" stroke="#CBD5E1" stroke-width="4" stroke-linecap="round" opacity=".85"/><path d="M30 26h28" stroke="#94A3B8" stroke-width="4" stroke-linecap="round" opacity=".5"/></svg>`,
drizzle: `<svg ${common}>${cloud}<g stroke="#7DD3FC" stroke-width="3" stroke-linecap="round"><path d="M34 68v6M44 66v6M54 68v6"/></g></svg>`,
rain: `<svg ${common}>${cloud}<g stroke="#38BDF8" stroke-width="3.5" stroke-linecap="round"><path d="M32 66l-3 10M44 64l-3 12M56 66l-3 10"/></g></svg>`,
shower: `<svg ${common}>${cloud}<g stroke="#38BDF8" stroke-width="3.2" stroke-linecap="round"><path d="M30 65l-2 8M40 63l-2 10M50 65l-2 8M60 63l-2 9"/></g></svg>`,
snow: `<svg ${common}>${cloud}<g fill="#E0F2FE"><circle cx="34" cy="70" r="2.4"/><circle cx="44" cy="68" r="2.4"/><circle cx="54" cy="71" r="2.4"/><circle cx="39" cy="76" r="1.8"/><circle cx="50" cy="76" r="1.8"/></g></svg>`,
thunder: `<svg ${common}>${cloud}<path d="M46 58l-8 14h8l-4 12 14-18h-8l6-8H46z" fill="#FBBF24"/></svg>`
};
return map[kind] || map.cloud;
}
function todayUTC() {
const d = new Date();
const y = d.getUTCFullYear();
const m = String(d.getUTCMonth() + 1).padStart(2, "0");
const day = String(d.getUTCDate()).padStart(2, "0");
return `${y}-${m}-${day}`;
}
function parseParams() {
const q = new URLSearchParams(location.search);
const lat = parseFloat(q.get("lat"));
const lon = parseFloat(q.get("lon"));
return {
lat: Number.isFinite(lat) ? lat : 52.52,
lon: Number.isFinite(lon) ? lon : 13.405,
name: q.get("name") || "Berlin",
date: /^\d{4}-\d{2}-\d{2}$/.test(q.get("date") || "") ? q.get("date") : todayUTC()
};
}
function isPastDate(dateStr) {
return dateStr < todayUTC();
}
function formatDate(dateStr) {
const [y, m, d] = dateStr.split("-").map(Number);
const dt = new Date(Date.UTC(y, m - 1, d));
return new Intl.DateTimeFormat("en-GB", {
weekday: "long",
day: "numeric",
month: "long",
year: "numeric",
timeZone: "UTC"
}).format(dt);
}
function showError(msg) {
const state = document.getElementById("state");
const box = document.getElementById("stateBox");
document.getElementById("spinner").style.display = "none";
box.classList.add("error");
document.getElementById("stateTitle").textContent = "Unable to load weather";
document.getElementById("stateMsg").textContent = msg || "The weather data could not be loaded.";
state.classList.remove("hidden");
document.getElementById("content").classList.add("hidden");
}
function hideState() {
document.getElementById("state").classList.add("hidden");
document.getElementById("content").classList.remove("hidden");
}
function buildUrl(base, p) {
const u = new URL(base, location.origin);
u.searchParams.set("latitude", String(p.lat));
u.searchParams.set("longitude", String(p.lon));
u.searchParams.set("daily", "temperature_2m_max,temperature_2m_min,weather_code");
u.searchParams.set("hourly", "temperature_2m");
u.searchParams.set("timezone", "UTC");
u.searchParams.set("temperature_unit", "celsius");
u.searchParams.set("start_date", p.date);
u.searchParams.set("end_date", p.date);
return u.toString();
}
function fmtTemp(n) {
if (!Number.isFinite(n)) return "—";
return (Math.round(n * 10) / 10).toFixed(1).replace(/\.0$/, "");
}
function renderSpark(temps) {
const el = document.getElementById("spark");
const valid = temps.filter((t) => Number.isFinite(t));
if (!valid.length) {
el.innerHTML = "";
return;
}
const min = Math.min(...valid);
const max = Math.max(...valid);
const padX = 8, padY = 14;
const w = 360, h = 140;
const span = Math.max(max - min, 0.5);
const pts = temps.map((t, i) => {
const x = padX + (i / Math.max(temps.length - 1, 1)) * (w - padX * 2);
const y = padY + (1 - ((t - min) / span)) * (h - padY * 2);
return [x, y, t];
});
const line = pts.map((p, i) => (i ? "L" : "M") + p[0].toFixed(1) + "," + p[1].toFixed(1)).join(" ");
const area = line + ` L${pts[pts.length - 1][0].toFixed(1)},${h - 4} L${pts[0][0].toFixed(1)},${h - 4} Z`;
const midIdx = Math.round((temps.length - 1) / 2);
const labels = [0, midIdx, temps.length - 1].map((i) => {
const [x, y, t] = pts[i];
return `<circle cx="${x}" cy="${y}" r="3.5" fill="#7DD3FC"/><text x="${x}" y="${y - 10}" text-anchor="middle" fill="rgba(244,247,251,0.72)" font-size="11" font-family="system-ui,sans-serif">${fmtTemp(t)}°</text>`;
}).join("");
el.innerHTML = `<svg viewBox="0 0 ${w} ${h}" preserveAspectRatio="none">
<defs>
<linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#7DD3FC" stop-opacity="0.35"/>
<stop offset="100%" stop-color="#7DD3FC" stop-opacity="0"/>
</linearGradient>
<linearGradient id="lineGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#67E8F9"/>
<stop offset="50%" stop-color="#A78BFA"/>
<stop offset="100%" stop-color="#FBBF24"/>
</linearGradient>
</defs>
<path d="${area}" fill="url(#areaGrad)"/>
<path d="${line}" fill="none" stroke="url(#lineGrad)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
${labels}
</svg>`;
document.getElementById("sparkMin").textContent = `Low ${fmtTemp(min)}°`;
document.getElementById("sparkMax").textContent = `High ${fmtTemp(max)}°`;
}
function renderHours(temps) {
const root = document.getElementById("hours");
const valid = temps.filter((t) => Number.isFinite(t));
const min = valid.length ? Math.min(...valid) : 0;
const max = valid.length ? Math.max(...valid) : 1;
const span = Math.max(max - min, 0.5);
const nowHour = (new Date()).getUTCHours();
const isToday = parseParams().date === todayUTC();
root.innerHTML = temps.map((t, i) => {
const h = 8 + ((t - min) / span) * 64;
const label = String(i).padStart(2, "0");
const dim = isToday && i < nowHour ? " dim" : "";
return `<div class="hour${dim}" title="${label}:00 · ${fmtTemp(t)}°C">
<div class="t">${fmtTemp(t)}</div>
<div class="bar-wrap"><div class="bar" style="height:${h.toFixed(1)}px"></div></div>
<div class="h">${label}</div>
</div>`;
}).join("");
}
async function main() {
const p = parseParams();
document.getElementById("locationName").textContent = p.name;
document.getElementById("dateLabel").textContent = formatDate(p.date);
document.getElementById("coords").textContent =
`${p.lat.toFixed(2)}°, ${p.lon.toFixed(2)}°`;
const endpoint = isPastDate(p.date) ? "/api/om/archive" : "/api/om/forecast";
const url = buildUrl(endpoint, p);
let data;
try {
const res = await fetch(url);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
data = await res.json();
if (data.error) throw new Error(data.reason || data.error);
} catch (err) {
showError("The weather data could not be loaded. " + (err && err.message ? err.message : ""));
return;
}
try {
const daily = data.daily || {};
const hourly = data.hourly || {};
const tmax = daily.temperature_2m_max && daily.temperature_2m_max[0];
const tmin = daily.temperature_2m_min && daily.temperature_2m_min[0];
const code = daily.weather_code && daily.weather_code[0];
const temps = (hourly.temperature_2m || []).slice(0, 24);
if (!Number.isFinite(tmax) && !Number.isFinite(tmin) && !temps.length) {
showError("No weather data is available for this date and location.");
return;
}
const meta = WMO[code] || { label: "Unknown conditions", icon: "cloud" };
document.getElementById("condition").textContent = meta.label;
document.getElementById("tempMax").textContent = fmtTemp(tmax);
document.getElementById("tempMin").textContent = fmtTemp(tmin);
document.getElementById("iconWrap").innerHTML = icons(meta.icon);
const filled = temps.length >= 24
? temps
: Array.from({ length: 24 }, (_, i) => Number.isFinite(temps[i]) ? temps[i] : NaN);
renderSpark(filled.map((t) => (Number.isFinite(t) ? t : (Number.isFinite(tmin) ? tmin : 0))));
renderHours(filled.map((t) => (Number.isFinite(t) ? t : (Number.isFinite(tmin) ? tmin : 0))));
hideState();
} catch (err) {
showError("The weather data could not be loaded.");
}
}
main();
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 22,450 | html / css / js | 2,498 / 8,895 / 11,057 |
|---|---|---|---|
| dom nodes | 55 | dom depth | 12 |
| css rules | 60 | js present | yes |
| brightness | 40.7 | contrast | 23.5 |
| colorfulness | 21.0 | whitespace | 65.3% |
This slot's telemetry
| prompt tokens | 0 | completion tokens | 0 |
|---|---|---|---|
| total tokens | 0 | wall | 152.1 s |
| cost | — | request id | — |
config.json562 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_OPENCODE_KEY",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "grok-4.5--cli--opencode--dev",
"effort": null,
"family": "grok",
"m": {
"min": 2,
"q": 2
},
"model_id": "grok-4.5",
"protocol": "cli",
"served_model": "grok-4.5",
"telemetry": {
"completion_tokens": null,
"cost_usd": null,
"prompt_tokens": null,
"total_tokens": null,
"wall_ms": 379246
},
"transport": "opencode-cli-isolated-xdg-go-subscription",
"vendor_sanction_ref": null
}send-log2.5 KB
{
"N": 2,
"batch_id": "2026-07-20--refill4-oc-grok-4.5",
"config_id": "grok-4.5--cli--opencode--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-20T11:40:07.494790+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-20T11:37:35.420458+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-20T11:41:14.740908+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-20T11:40:12.787487+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-20T11:41:52.632319+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-20T11:41:18.044629+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-20T11:44:06.543205+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-20T11:41:55.896541+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
}
}
}