grok-4.5 @ high · grok-cli
grok-clihigh
- config
- grok-4.5-eff-high--cli--grok--dev
- batch
- 2026-07-19--unified
- transport
- grok-cli-oauth-isolated-home
- 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
claude-opus-4-7 @low · kiro0.78claude-sonnet-5 @low · CC0.77gpt-5.6-sol @low · kiro0.72gpt-5.6-terra @low · kiro0.72grok-4.5 @low · grok-cli0.72farthest
gpt-5.6-luna @medium · codex-oauth0.41gpt-5.6-luna @high · kiro0.41claude-haiku-4-5 @xhigh · CC0.41gpt-5.6-luna @low · codex-oauth0.42gpt-5.5 @medium · codex-oauth0.42within 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: 16
- min tempmismatchshown: 25.3
- 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, height=800">
<title>Weather Card</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg0: #0b1220;
--bg1: #152238;
--card: rgba(255, 255, 255, 0.07);
--card-border: rgba(255, 255, 255, 0.12);
--text: #f4f7fb;
--muted: rgba(244, 247, 251, 0.62);
--accent: #7dd3fc;
--warm: #fbbf24;
--cool: #93c5fd;
--danger: #fca5a5;
--shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
--radius: 28px;
}
html, body {
width: 1280px;
height: 800px;
overflow: hidden;
font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
color: var(--text);
background: var(--bg0);
}
body {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.backdrop {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 900px 500px at 18% 20%, var(--glow-a, rgba(56, 189, 248, 0.28)), transparent 60%),
radial-gradient(ellipse 800px 480px at 82% 75%, var(--glow-b, rgba(251, 191, 36, 0.18)), transparent 55%),
linear-gradient(145deg, var(--bg0) 0%, var(--bg1) 48%, #1a2740 100%);
transition: background 0.6s ease;
}
.backdrop::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
pointer-events: none;
}
.card {
position: relative;
z-index: 1;
width: 1120px;
height: 680px;
padding: 48px 56px;
border-radius: var(--radius);
background: linear-gradient(160deg, rgba(255,255,255,0.11), rgba(255,255,255,0.04));
border: 1px solid var(--card-border);
box-shadow: var(--shadow);
backdrop-filter: blur(24px);
display: flex;
flex-direction: column;
gap: 28px;
}
.card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(255,255,255,0.35), transparent 40%, transparent 60%, rgba(125,211,252,0.25));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
header.top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
}
.location-block {
min-width: 0;
}
.eyebrow {
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
font-weight: 600;
margin-bottom: 10px;
}
.location-name {
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-line {
margin-top: 10px;
font-size: 18px;
color: var(--muted);
font-weight: 500;
}
.condition-block {
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.weather-icon {
width: 88px;
height: 88px;
border-radius: 24px;
display: grid;
place-items: center;
font-size: 48px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.condition-label {
font-size: 20px;
font-weight: 600;
letter-spacing: -0.01em;
}
.temps {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.temp-tile {
position: relative;
padding: 28px 32px;
border-radius: 20px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
overflow: hidden;
}
.temp-tile::after {
content: "";
position: absolute;
right: -20px;
top: -20px;
width: 120px;
height: 120px;
border-radius: 50%;
opacity: 0.35;
pointer-events: none;
}
.temp-tile.max::after {
background: radial-gradient(circle, var(--warm), transparent 70%);
}
.temp-tile.min::after {
background: radial-gradient(circle, var(--cool), transparent 70%);
}
.temp-label {
font-size: 14px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
font-weight: 600;
margin-bottom: 12px;
}
.temp-value {
font-size: 64px;
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.temp-tile.max .temp-value { color: #fde68a; }
.temp-tile.min .temp-value { color: #bfdbfe; }
.temp-unit {
font-size: 28px;
font-weight: 600;
margin-left: 4px;
opacity: 0.75;
}
.hourly-section {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.hourly-header {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.hourly-title {
font-size: 15px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
font-weight: 600;
}
.hourly-range {
font-size: 14px;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.hourly-chart {
flex: 1;
min-height: 0;
border-radius: 20px;
background: rgba(0,0,0,0.18);
border: 1px solid rgba(255,255,255,0.08);
padding: 20px 16px 12px;
display: flex;
align-items: flex-end;
gap: 6px;
overflow: hidden;
}
.hour-col {
flex: 1;
min-width: 0;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.hour-temp {
font-size: 12px;
font-weight: 600;
color: rgba(255,255,255,0.88);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.hour-bar-wrap {
width: 100%;
flex: 1;
display: flex;
align-items: flex-end;
justify-content: center;
min-height: 0;
}
.hour-bar {
width: 70%;
max-width: 28px;
border-radius: 999px 999px 6px 6px;
background: linear-gradient(180deg, #e0f2fe 0%, #38bdf8 45%, #0284c7 100%);
box-shadow: 0 0 18px rgba(56, 189, 248, 0.28);
min-height: 8px;
transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hour-label {
font-size: 11px;
color: var(--muted);
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.hour-col.is-peak .hour-bar {
background: linear-gradient(180deg, #fef3c7 0%, #fbbf24 50%, #d97706 100%);
box-shadow: 0 0 18px rgba(251, 191, 36, 0.35);
}
.hour-col.is-peak .hour-temp {
color: #fde68a;
}
.state {
position: relative;
z-index: 1;
width: 1120px;
height: 680px;
border-radius: var(--radius);
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
background: linear-gradient(160deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04));
border: 1px solid var(--card-border);
box-shadow: var(--shadow);
text-align: center;
padding: 48px;
}
.state.visible { display: flex; }
.card.hidden { display: none; }
.state-icon {
width: 72px;
height: 72px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 32px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
}
.state.loading .state-icon {
animation: pulse 1.4s ease-in-out infinite;
}
.state-title {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.02em;
}
.state-msg {
font-size: 16px;
color: var(--muted);
max-width: 420px;
line-height: 1.5;
}
.state.error .state-icon {
background: rgba(252, 165, 165, 0.12);
border-color: rgba(252, 165, 165, 0.28);
}
.state.error .state-title { color: var(--danger); }
@keyframes pulse {
0%, 100% { opacity: 0.5; transform: scale(0.96); }
50% { opacity: 1; transform: scale(1); }
}
body.theme-clear {
--glow-a: rgba(56, 189, 248, 0.32);
--glow-b: rgba(251, 191, 36, 0.28);
}
body.theme-cloud {
--glow-a: rgba(148, 163, 184, 0.28);
--glow-b: rgba(100, 116, 139, 0.22);
}
body.theme-rain {
--glow-a: rgba(59, 130, 246, 0.35);
--glow-b: rgba(30, 64, 175, 0.28);
}
body.theme-snow {
--glow-a: rgba(186, 230, 253, 0.35);
--glow-b: rgba(224, 242, 254, 0.22);
}
body.theme-storm {
--glow-a: rgba(139, 92, 246, 0.35);
--glow-b: rgba(251, 191, 36, 0.22);
}
body.theme-fog {
--glow-a: rgba(203, 213, 225, 0.25);
--glow-b: rgba(148, 163, 184, 0.2);
}
</style>
</head>
<body class="theme-clear">
<div class="backdrop" aria-hidden="true"></div>
<div id="loading" class="state loading visible" role="status">
<div class="state-icon">◎</div>
<div class="state-title">Loading weather</div>
<div class="state-msg">Fetching conditions for your location…</div>
</div>
<div id="error" class="state error" role="alert">
<div class="state-icon">!</div>
<div class="state-title">Weather data could not be loaded</div>
<div class="state-msg" id="error-msg">Please check the location and date, then try again.</div>
</div>
<main id="card" class="card hidden" aria-live="polite">
<header class="top">
<div class="location-block">
<div class="eyebrow">Weather</div>
<h1 class="location-name" id="location-name">—</h1>
<div class="date-line" id="date-line">—</div>
</div>
<div class="condition-block">
<div class="weather-icon" id="weather-icon" aria-hidden="true">☀</div>
<div class="condition-label" id="condition-label">—</div>
</div>
</header>
<section class="temps" aria-label="Daily temperatures">
<div class="temp-tile max">
<div class="temp-label">Maximum</div>
<div class="temp-value" id="temp-max">—<span class="temp-unit">°C</span></div>
</div>
<div class="temp-tile min">
<div class="temp-label">Minimum</div>
<div class="temp-value" id="temp-min">—<span class="temp-unit">°C</span></div>
</div>
</section>
<section class="hourly-section" aria-label="Hourly temperatures">
<div class="hourly-header">
<div class="hourly-title">Hourly temperature</div>
<div class="hourly-range" id="hourly-range"></div>
</div>
<div class="hourly-chart" id="hourly-chart"></div>
</section>
</main>
<script>
(function () {
"use strict";
const WMO = {
0: { label: "Clear sky", icon: "☀", theme: "clear" },
1: { label: "Mainly clear", icon: "🌤", theme: "clear" },
2: { label: "Partly cloudy", icon: "⛅", theme: "cloud" },
3: { label: "Overcast", icon: "☁", theme: "cloud" },
45: { label: "Fog", icon: "🌫", theme: "fog" },
48: { label: "Depositing rime fog", icon: "🌫", theme: "fog" },
51: { label: "Light drizzle", icon: "🌦", theme: "rain" },
53: { label: "Moderate drizzle", icon: "🌦", theme: "rain" },
55: { label: "Dense drizzle", icon: "🌧", theme: "rain" },
56: { label: "Light freezing drizzle", icon: "🌧", theme: "rain" },
57: { label: "Dense freezing drizzle", icon: "🌧", theme: "rain" },
61: { label: "Slight rain", icon: "🌧", theme: "rain" },
63: { label: "Moderate rain", icon: "🌧", theme: "rain" },
65: { label: "Heavy rain", icon: "🌧", theme: "rain" },
66: { label: "Light freezing rain", icon: "🌧", theme: "rain" },
67: { label: "Heavy freezing rain", icon: "🌧", theme: "rain" },
71: { label: "Slight snow", icon: "❄", theme: "snow" },
73: { label: "Moderate snow", icon: "❄", theme: "snow" },
75: { label: "Heavy snow", icon: "❄", theme: "snow" },
77: { label: "Snow grains", icon: "❄", theme: "snow" },
80: { label: "Slight rain showers", icon: "🌦", theme: "rain" },
81: { label: "Moderate rain showers", icon: "🌧", theme: "rain" },
82: { label: "Violent rain showers", icon: "🌧", theme: "rain" },
85: { label: "Slight snow showers", icon: "🌨", theme: "snow" },
86: { label: "Heavy snow showers", icon: "🌨", theme: "snow" },
95: { label: "Thunderstorm", icon: "⛈", theme: "storm" },
96: { label: "Thunderstorm with slight hail", icon: "⛈", theme: "storm" },
99: { label: "Thunderstorm with heavy hail", icon: "⛈", theme: "storm" }
};
function todayUTC() {
const now = new Date();
const y = now.getUTCFullYear();
const m = String(now.getUTCMonth() + 1).padStart(2, "0");
const d = String(now.getUTCDate()).padStart(2, "0");
return y + "-" + m + "-" + d;
}
function parseParams() {
const q = new URLSearchParams(window.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").trim() || "Berlin",
date: (q.get("date") || todayUTC()).trim() || todayUTC()
};
}
function isPastDate(dateStr) {
return dateStr < todayUTC();
}
function formatDisplayDate(dateStr) {
const parts = dateStr.split("-").map(Number);
if (parts.length !== 3 || parts.some(function (n) { return !Number.isFinite(n); })) {
return dateStr;
}
const dt = new Date(Date.UTC(parts[0], parts[1] - 1, parts[2]));
try {
return new Intl.DateTimeFormat("en-US", {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
timeZone: "UTC"
}).format(dt);
} catch (e) {
return dateStr;
}
}
function weatherInfo(code) {
const c = Number(code);
if (WMO[c]) return WMO[c];
return { label: "Unknown conditions", icon: "❔", theme: "cloud" };
}
function formatTemp(v) {
if (v == null || !Number.isFinite(Number(v))) return "—";
return (Math.round(Number(v) * 10) / 10).toString();
}
function showError(message) {
document.getElementById("loading").classList.remove("visible");
document.getElementById("card").classList.add("hidden");
const err = document.getElementById("error");
err.classList.add("visible");
if (message) {
document.getElementById("error-msg").textContent = message;
}
}
function showCard() {
document.getElementById("loading").classList.remove("visible");
document.getElementById("error").classList.remove("visible");
document.getElementById("card").classList.remove("hidden");
}
function buildHourlyChart(times, temps) {
const chart = document.getElementById("hourly-chart");
chart.innerHTML = "";
if (!times || !temps || times.length === 0) {
chart.innerHTML = '<div style="width:100%;text-align:center;color:var(--muted);align-self:center;">No hourly data available</div>';
document.getElementById("hourly-range").textContent = "";
return;
}
const values = temps.map(function (t) { return Number(t); });
const finite = values.filter(function (v) { return Number.isFinite(v); });
if (finite.length === 0) {
chart.innerHTML = '<div style="width:100%;text-align:center;color:var(--muted);align-self:center;">No hourly data available</div>';
document.getElementById("hourly-range").textContent = "";
return;
}
const minT = Math.min.apply(null, finite);
const maxT = Math.max.apply(null, finite);
const span = Math.max(maxT - minT, 1);
let peakIdx = 0;
for (let i = 0; i < values.length; i++) {
if (Number.isFinite(values[i]) && values[i] >= values[peakIdx]) peakIdx = i;
}
document.getElementById("hourly-range").textContent =
formatTemp(minT) + "° – " + formatTemp(maxT) + "°C";
const count = times.length;
const step = count > 24 ? Math.ceil(count / 24) : 1;
const indices = [];
for (let i = 0; i < count; i += step) indices.push(i);
if (indices[indices.length - 1] !== count - 1) indices.push(count - 1);
indices.forEach(function (i) {
const t = values[i];
const col = document.createElement("div");
col.className = "hour-col" + (i === peakIdx ? " is-peak" : "");
const tempEl = document.createElement("div");
tempEl.className = "hour-temp";
tempEl.textContent = Number.isFinite(t) ? formatTemp(t) + "°" : "—";
const wrap = document.createElement("div");
wrap.className = "hour-bar-wrap";
const bar = document.createElement("div");
bar.className = "hour-bar";
const pct = Number.isFinite(t) ? ((t - minT) / span) * 100 : 0;
const heightPct = Number.isFinite(t) ? 18 + pct * 0.82 : 8;
bar.style.height = heightPct + "%";
wrap.appendChild(bar);
const label = document.createElement("div");
label.className = "hour-label";
const timeStr = times[i] || "";
const hourMatch = timeStr.match(/T(\d{2})/);
label.textContent = hourMatch ? hourMatch[1] : String(i);
col.appendChild(tempEl);
col.appendChild(wrap);
col.appendChild(label);
chart.appendChild(col);
});
}
function render(params, data) {
const daily = data.daily || {};
const hourly = data.hourly || {};
const maxArr = daily.temperature_2m_max || [];
const minArr = daily.temperature_2m_min || [];
const codeArr = daily.weather_code || [];
if (!maxArr.length && !minArr.length && !(hourly.temperature_2m || []).length) {
showError("The API returned no weather data for this date and location.");
return;
}
const maxT = maxArr[0];
const minT = minArr[0];
const code = codeArr[0];
const info = weatherInfo(code);
document.body.className = "theme-" + info.theme;
document.getElementById("location-name").textContent = params.name;
document.getElementById("date-line").textContent = formatDisplayDate(params.date);
document.getElementById("weather-icon").textContent = info.icon;
document.getElementById("condition-label").textContent = info.label;
document.getElementById("temp-max").innerHTML =
formatTemp(maxT) + '<span class="temp-unit">°C</span>';
document.getElementById("temp-min").innerHTML =
formatTemp(minT) + '<span class="temp-unit">°C</span>';
buildHourlyChart(hourly.time || [], hourly.temperature_2m || []);
showCard();
}
async function load() {
const params = parseParams();
if (!/^\d{4}-\d{2}-\d{2}$/.test(params.date)) {
showError("Invalid date format. Use YYYY-MM-DD.");
return;
}
const endpoint = isPastDate(params.date) ? "/api/om/archive" : "/api/om/forecast";
const qs = new URLSearchParams({
latitude: String(params.lat),
longitude: String(params.lon),
daily: "temperature_2m_max,temperature_2m_min,weather_code",
hourly: "temperature_2m",
timezone: "UTC",
temperature_unit: "celsius",
start_date: params.date,
end_date: params.date
});
try {
const res = await fetch(endpoint + "?" + qs.toString());
if (!res.ok) {
showError("Weather data could not be loaded (HTTP " + res.status + ").");
return;
}
const data = await res.json();
if (data.error) {
showError(data.reason || "Weather data could not be loaded.");
return;
}
render(params, data);
} catch (err) {
showError("Weather data could not be loaded. The network request failed.");
}
}
load();
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 19,970 | html / css / js | 2,051 / 8,763 / 9,156 |
|---|---|---|---|
| dom nodes | 40 | dom depth | 7 |
| css rules | 56 | js present | yes |
| brightness | 57.0 | contrast | 31.2 |
| colorfulness | 42.6 | whitespace | 46.6% |
This slot's telemetry
| prompt tokens | 0 | completion tokens | 0 |
|---|---|---|---|
| total tokens | 0 | wall | 95.8 s |
| cost | — | request id | — |
config.json548 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "grok-4.5-eff-high--cli--grok--dev",
"effort": "high",
"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": 276010
},
"transport": "grok-cli-oauth-isolated-home",
"vendor_sanction_ref": null
}send-log2.5 KB
{
"N": 2,
"batch_id": "2026-07-17--dev-grok-cli",
"config_id": "grok-4.5-eff-high--cli--grok--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-17T13:46:36.587390+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T13:45:00.829839+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-17T13:47:28.937239+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T13:46:41.495488+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-17T13:48:23.066499+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T13:47:32.185628+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-17T13:49:48.440725+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-17T13:48:26.506639+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
}
}
}