grok-4.6 @ medium · grok-cli

grok-climedium
config
grok-4.6-eff-medium--cli--grok--dev
batch
2026-07-19--unified
transport
grok-cli-oauth-isolated-home
protocol
cli · plan
served model
grok-4.6
captured
Jul 18, 2026, 11:54 AM · N=2
variant
live
slot 0 · P-q · sandboxed iframe
grok-4.6 @medium · grok-cli 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.3
  • 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">
<title>Weather</title>
<link rel="icon" href="data:,">
<style>
  :root {
    --sky0: #1c2740;
    --sky1: #4a5a78;
    --sky2: #c4b7a4;
    --ink: #f4efe6;
    --ink-dim: rgba(244, 239, 230, 0.62);
    --ink-faint: rgba(244, 239, 230, 0.38);
    --gold: #e0c48a;
    --gold-2: #b8955a;
    --glass: rgba(10, 14, 24, 0.42);
    --line: rgba(224, 196, 138, 0.28);
    --bar: #e0c48a;
    --hi-glow: rgba(224, 196, 138, 0.22);
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --sans: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    width: 1280px;
    height: 800px;
    overflow: hidden;
    background: #0b1018;
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  body[data-wx="clear"] {
    --sky0: #24386a; --sky1: #d06a3a; --sky2: #f6d3a0;
    --gold: #ffd27a; --gold-2: #e8a24a; --bar: #ffd27a;
    --glass: rgba(18, 16, 28, 0.36); --hi-glow: rgba(255, 210, 122, 0.28);
  }
  body[data-wx="mostly"] {
    --sky0: #2a4270; --sky1: #c77a4a; --sky2: #edd0a8;
    --gold: #f0c878; --bar: #f0c878;
  }
  body[data-wx="partly"] {
    --sky0: #2c3f68; --sky1: #7d8eae; --sky2: #d9cbb4;
    --gold: #d8c08a; --bar: #d8c08a;
  }
  body[data-wx="overcast"] {
    --sky0: #2a3142; --sky1: #5c6678; --sky2: #b7bec9;
    --gold: #c9d0dc; --gold-2: #8e99ad; --bar: #c5cedb;
    --ink: #eef2f6; --hi-glow: rgba(197, 206, 219, 0.22);
  }
  body[data-wx="fog"] {
    --sky0: #3a4248; --sky1: #7a8480; --sky2: #c5cfc4;
    --gold: #d5ddd0; --bar: #cfd8cc; --ink: #eef3ec;
  }
  body[data-wx="drizzle"] {
    --sky0: #1b2e44; --sky1: #3d6a82; --sky2: #8eb4b8;
    --gold: #9ed4d0; --bar: #8ec8c4;
  }
  body[data-wx="rain"] {
    --sky0: #101828; --sky1: #1e3f62; --sky2: #4f7f96;
    --gold: #7ec4e0; --gold-2: #3d8cb0; --bar: #7ec4e0;
    --hi-glow: rgba(126, 196, 224, 0.24);
  }
  body[data-wx="snow"] {
    --sky0: #2c3648; --sky1: #7d8aa0; --sky2: #e4eaf2;
    --gold: #eef4ff; --bar: #dce6f5; --ink: #f7f9fc;
  }
  body[data-wx="thunder"] {
    --sky0: #160e28; --sky1: #4a2a6a; --sky2: #c48a4a;
    --gold: #f0c46a; --gold-2: #b070ff; --bar: #f0c46a;
    --hi-glow: rgba(240, 196, 106, 0.28);
  }

  .sky {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(1200px 520px at 78% 18%, var(--sky2) 0%, transparent 58%),
      radial-gradient(900px 480px at 18% 88%, var(--sky1) 0%, transparent 62%),
      linear-gradient(168deg, var(--sky0) 0%, var(--sky1) 52%, var(--sky2) 100%);
    overflow: hidden;
  }
  .sky .grain {
    position: absolute;
    inset: -20%;
    opacity: 0.11;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    pointer-events: none;
  }
  .sun {
    position: absolute;
    width: 220px;
    height: 220px;
    right: 168px;
    top: 78px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 42% 40%, #fff6d8 0%, #ffd27a 28%, #e07a3a 62%, transparent 64%);
    box-shadow:
      0 0 80px 30px rgba(255, 190, 100, 0.35),
      0 0 180px 70px rgba(255, 140, 60, 0.18);
    opacity: 0;
  }
  body[data-wx="clear"] .sun,
  body[data-wx="mostly"] .sun,
  body[data-wx="partly"] .sun { opacity: 1; }
  body[data-wx="partly"] .sun { filter: saturate(0.85); transform: scale(0.78); top: 64px; }
  body[data-wx="snow"] .sun,
  body[data-wx="overcast"] .sun {
    opacity: 0.28;
    filter: grayscale(0.6) brightness(1.3);
    background: radial-gradient(circle at 42% 40%, #f4f7fb 0%, #c5cedb 40%, transparent 64%);
    box-shadow: 0 0 90px 40px rgba(220, 230, 245, 0.18);
  }
  .halo {
    position: absolute;
    right: 118px;
    top: 28px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 1px solid rgba(255, 230, 180, 0.16);
    opacity: 0;
    pointer-events: none;
  }
  .halo::after {
    content: "";
    position: absolute;
    inset: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 230, 180, 0.1);
  }
  body[data-wx="clear"] .halo,
  body[data-wx="mostly"] .halo { opacity: 1; }

  .cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 80px;
    filter: blur(0.4px);
    box-shadow:
      28px 8px 0 -6px rgba(255, 255, 255, 0.14),
      56px 4px 0 -2px rgba(255, 255, 255, 0.18),
      84px 12px 0 -10px rgba(255, 255, 255, 0.12);
  }
  .c1 { width: 150px; height: 42px; left: 70px; top: 118px; opacity: 0; }
  .c2 { width: 220px; height: 54px; left: 380px; top: 168px; opacity: 0; }
  .c3 { width: 180px; height: 46px; right: 90px; top: 248px; opacity: 0; }
  body[data-wx="mostly"] .c1,
  body[data-wx="partly"] .c1,
  body[data-wx="partly"] .c2,
  body[data-wx="overcast"] .c1,
  body[data-wx="overcast"] .c2,
  body[data-wx="overcast"] .c3,
  body[data-wx="fog"] .c1,
  body[data-wx="fog"] .c2,
  body[data-wx="drizzle"] .c1,
  body[data-wx="drizzle"] .c2,
  body[data-wx="rain"] .c1,
  body[data-wx="rain"] .c2,
  body[data-wx="rain"] .c3,
  body[data-wx="snow"] .c1,
  body[data-wx="snow"] .c2,
  body[data-wx="thunder"] .c2,
  body[data-wx="thunder"] .c3 { opacity: 1; }
  body[data-wx="overcast"] .cloud,
  body[data-wx="rain"] .cloud,
  body[data-wx="thunder"] .cloud {
    background: rgba(20, 24, 36, 0.28);
    box-shadow:
      28px 8px 0 -6px rgba(20, 24, 36, 0.22),
      56px 4px 0 -2px rgba(30, 36, 50, 0.3),
      84px 12px 0 -10px rgba(20, 24, 36, 0.2);
  }

  .veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.28) 48%, rgba(255,255,255,0.05));
    opacity: 0;
    pointer-events: none;
  }
  body[data-wx="fog"] .veil { opacity: 1; }

  .precip {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
      -18deg,
      transparent 0 16px,
      rgba(210, 230, 245, 0.18) 16px 17px
    );
    background-size: 42px 54px;
  }
  body[data-wx="drizzle"] .precip { opacity: 0.55; }
  body[data-wx="rain"] .precip { opacity: 0.85; background-image: repeating-linear-gradient(-18deg, transparent 0 14px, rgba(170, 214, 240, 0.28) 14px 16px); }
  body[data-wx="snow"] .precip {
    opacity: 0.8;
    background-image:
      radial-gradient(circle, rgba(255,255,255,0.7) 1.1px, transparent 1.3px),
      radial-gradient(circle, rgba(255,255,255,0.45) 0.9px, transparent 1.2px);
    background-size: 46px 46px, 72px 72px;
    background-position: 0 0, 22px 18px;
  }

  .bolt {
    position: absolute;
    right: 290px;
    top: 132px;
    width: 34px;
    height: 92px;
    opacity: 0;
    background: #f4d56a;
    clip-path: polygon(62% 0, 18% 52%, 46% 52%, 28% 100%, 88% 40%, 56% 40%);
    filter: drop-shadow(0 0 12px rgba(255, 220, 120, 0.85));
  }
  body[data-wx="thunder"] .bolt { opacity: 1; }

  .plate {
    position: absolute;
    inset: 22px;
    border: 1px solid var(--line);
    pointer-events: none;
    z-index: 2;
  }
  .plate::before, .plate::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1px solid var(--gold);
    opacity: 0.7;
  }
  .plate::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
  .plate::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

  main {
    position: relative;
    z-index: 3;
    width: 1280px;
    height: 800px;
    padding: 48px 56px 36px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    animation: rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  @keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
  }

  header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
  }
  .kicker {
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 10px;
  }
  h1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 72px;
    line-height: 0.92;
    letter-spacing: -0.028em;
    max-width: 760px;
    text-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
  }
  .when {
    margin-top: 14px;
    font-size: 18px;
    color: var(--ink-dim);
    letter-spacing: 0.01em;
  }
  .badge {
    text-align: right;
    flex: none;
  }
  .icon-wrap {
    width: 88px;
    height: 88px;
    margin-left: auto;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28));
  }
  .icon-wrap svg { width: 88px; height: 88px; display: block; }
  .cond {
    margin-top: 10px;
    font-family: var(--serif);
    font-size: 22px;
    font-style: italic;
    letter-spacing: -0.01em;
  }

  .mid {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 8px 0 12px;
  }
  .range {
    display: flex;
    align-items: flex-end;
    gap: 56px;
  }
  .stat .lbl {
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 650;
    margin-bottom: 4px;
  }
  .stat .val {
    font-family: var(--serif);
    font-size: 92px;
    line-height: 0.86;
    font-weight: 400;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  }
  .rule {
    width: 72px;
    height: 1px;
    background: var(--gold);
    opacity: 0.55;
    margin-bottom: 28px;
  }
  .meta {
    text-align: right;
    color: var(--ink-faint);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.7;
  }

  .hours-wrap {
    background: var(--glass);
    border: 1px solid var(--line);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    padding: 18px 20px 14px;
  }
  .hours-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
  }
  .hours-head h2 {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 650;
  }
  .hours-head span {
    font-size: 11px;
    color: var(--ink-faint);
    letter-spacing: 0.08em;
  }
  .hours {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 6px;
    align-items: end;
    height: 168px;
  }
  .hr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    min-width: 0;
  }
  .stem {
    width: 100%;
    max-width: 18px;
    background: linear-gradient(180deg, var(--bar), rgba(255,255,255,0.12));
    border-radius: 3px 3px 0 0;
    box-shadow: 0 0 18px var(--hi-glow);
    min-height: 6px;
  }
  .hr.peak .stem { outline: 1px solid rgba(255,255,255,0.55); }
  .t {
    margin-top: 7px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    white-space: nowrap;
  }
  .h {
    margin-top: 2px;
    font-size: 9px;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
  }

  .err {
    position: relative;
    z-index: 3;
    width: 1280px;
    height: 800px;
    padding: 80px 88px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: rise 0.6s ease both;
  }
  .err h1 {
    font-size: 56px;
    max-width: 16ch;
  }
  .err p {
    margin-top: 22px;
    font-size: 20px;
    color: var(--ink-dim);
    max-width: 42ch;
    line-height: 1.45;
  }
  .err .hint {
    margin-top: 28px;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
  }

  .boot {
    position: relative;
    z-index: 3;
    width: 1280px;
    height: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-size: 12px;
    color: var(--ink-dim);
  }
</style>
</head>
<body>
<div class="sky" aria-hidden="true">
  <div class="halo"></div>
  <div class="sun"></div>
  <div class="cloud c1"></div>
  <div class="cloud c2"></div>
  <div class="cloud c3"></div>
  <div class="bolt"></div>
  <div class="precip"></div>
  <div class="veil"></div>
  <div class="grain"></div>
</div>
<div class="plate" aria-hidden="true"></div>
<div id="app"><div class="boot">Reading the sky</div></div>
<script>
(function () {
  var MONTHS = ["January","February","March","April","May","June","July","August","September","October","November","December"];
  var WEEK = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
  var WMO = {
    0: ["Clear sky", "clear"],
    1: ["Mainly clear", "mostly"],
    2: ["Partly cloudy", "partly"],
    3: ["Overcast", "overcast"],
    45: ["Fog", "fog"],
    48: ["Depositing rime fog", "fog"],
    51: ["Light drizzle", "drizzle"],
    53: ["Moderate drizzle", "drizzle"],
    55: ["Dense drizzle", "drizzle"],
    56: ["Light freezing drizzle", "drizzle"],
    57: ["Dense freezing drizzle", "drizzle"],
    61: ["Slight rain", "rain"],
    63: ["Moderate rain", "rain"],
    65: ["Heavy rain", "rain"],
    66: ["Light freezing rain", "rain"],
    67: ["Heavy freezing rain", "rain"],
    71: ["Slight snow", "snow"],
    73: ["Moderate snow", "snow"],
    75: ["Heavy snow", "snow"],
    77: ["Snow grains", "snow"],
    80: ["Slight rain showers", "rain"],
    81: ["Moderate rain showers", "rain"],
    82: ["Violent rain showers", "rain"],
    85: ["Slight snow showers", "snow"],
    86: ["Heavy snow showers", "snow"],
    95: ["Thunderstorm", "thunder"],
    96: ["Thunderstorm with slight hail", "thunder"],
    99: ["Thunderstorm with heavy hail", "thunder"]
  };

  function utcToday() {
    return new Date().toISOString().slice(0, 10);
  }
  function qs() {
    var p = new URLSearchParams(location.search);
    var date = p.get("date") || utcToday();
    return {
      lat: p.get("lat") || "52.52",
      lon: p.get("lon") || "13.405",
      name: p.get("name") || "Berlin",
      date: date
    };
  }
  function esc(s) {
    return String(s)
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;");
  }
  function validDate(s) {
    return /^\d{4}-\d{2}-\d{2}$/.test(s) && !isNaN(Date.parse(s + "T00:00:00Z"));
  }
  function prettyDate(iso) {
    var p = iso.split("-");
    var d = new Date(Date.UTC(+p[0], +p[1] - 1, +p[2]));
    return WEEK[d.getUTCDay()] + ", " + d.getUTCDate() + " " + MONTHS[d.getUTCMonth()] + " " + d.getUTCFullYear();
  }
  function fmt(n) {
    if (typeof n !== "number" || !isFinite(n)) return null;
    var t = Math.round(n * 10) / 10;
    var s = t.toFixed(1);
    return s === "-0.0" ? "0.0" : s;
  }
  function icon(kind) {
    var sun = '<circle cx="44" cy="34" r="12" fill="#F6D27A"/><g stroke="#F6D27A" stroke-width="2.4" stroke-linecap="round"><line x1="44" y1="12" x2="44" y2="18"/><line x1="44" y1="50" x2="44" y2="56"/><line x1="22" y1="34" x2="28" y2="34"/><line x1="60" y1="34" x2="66" y2="34"/><line x1="28.4" y1="18.4" x2="32.6" y2="22.6"/><line x1="55.4" y1="45.4" x2="59.6" y2="49.6"/><line x1="55.4" y1="22.6" x2="59.6" y2="18.4"/><line x1="28.4" y1="49.6" x2="32.6" y2="45.4"/></g>';
    var cloud = '<path d="M26 58h38a14 14 0 0 0 1.2-28 18 18 0 0 0-34.2-6A13 13 0 0 0 26 58z" fill="#E8EEF6" fill-opacity=".92"/>';
    var inner = cloud;
    if (kind === "clear") inner = sun;
    else if (kind === "mostly" || kind === "partly") inner = '<g transform="translate(-6,-10) scale(0.72)">'+sun+'</g>' + cloud;
    else if (kind === "fog") inner = cloud + '<path d="M22 66h44M26 72h36" stroke="#E8EEF6" stroke-width="2.4" stroke-linecap="round" opacity=".7"/>';
    else if (kind === "drizzle") inner = cloud + '<path d="M34 64l-3 8M44 64l-3 8M54 64l-3 8" stroke="#9ED4D0" stroke-width="2.4" stroke-linecap="round"/>';
    else if (kind === "rain") inner = cloud + '<path d="M34 64l-4 10M44 64l-4 10M54 64l-4 10" stroke="#7EC4E0" stroke-width="2.8" stroke-linecap="round"/>';
    else if (kind === "snow") inner = cloud + '<g fill="#F4F8FF"><circle cx="34" cy="68" r="2"/><circle cx="44" cy="72" r="2"/><circle cx="54" cy="68" r="2"/></g>';
    else if (kind === "thunder") inner = cloud + '<path d="M48 56l-10 16h8l-4 12 16-20h-8z" fill="#F0C46A"/>';
    return '<svg viewBox="0 0 88 88" aria-hidden="true">'+inner+'</svg>';
  }

  function fail(q, detail) {
    document.body.setAttribute("data-wx", "overcast");
    document.getElementById("app").innerHTML =
      '<section class="err">' +
        '<div class="kicker">Forecast</div>' +
        '<h1>' + esc(q.name) + '</h1>' +
        '<p>Weather data cannot be loaded.</p>' +
        '<div class="hint">' + esc(prettyDate(q.date)) + (detail ? " · " + esc(detail) : "") + '</div>' +
      '</section>';
    document.body.setAttribute("data-ready", "error");
  }

  function render(q, daily, hours) {
    var code = daily.code;
    var meta = WMO[code] || ["Unknown conditions", "overcast"];
    var phrase = meta[0];
    var theme = meta[1];
    document.body.setAttribute("data-wx", theme);

    var hi = fmt(daily.max);
    var lo = fmt(daily.min);
    var nums = hours.map(function (h) { return h.t; }).filter(function (n) { return typeof n === "number"; });
    var loN = nums.length ? Math.min.apply(null, nums) : 0;
    var hiN = nums.length ? Math.max.apply(null, nums) : 1;
    var span = Math.max(hiN - loN, 0.8);

    var cols = "";
    for (var i = 0; i < hours.length; i++) {
      var h = hours[i];
      var t = fmt(h.t);
      if (t == null) continue;
      var pct = 14 + ((h.t - loN) / span) * 86;
      var peak = (h.t === hiN || h.t === loN) ? " peak" : "";
      var hh = (h.hour < 10 ? "0" : "") + h.hour;
      cols += '<div class="hr' + peak + '">' +
        '<div class="stem" style="height:' + pct.toFixed(1) + '%"></div>' +
        '<div class="t">' + t + '°</div>' +
        '<div class="h">' + hh + 'h</div>' +
      '</div>';
    }

    document.getElementById("app").innerHTML =
      '<main>' +
        '<header>' +
          '<div>' +
            '<div class="kicker">Forecast</div>' +
            '<h1>' + esc(q.name) + '</h1>' +
            '<div class="when">' + esc(prettyDate(q.date)) + '</div>' +
          '</div>' +
          '<div class="badge">' +
            '<div class="icon-wrap">' + icon(theme) + '</div>' +
            '<div class="cond">' + esc(phrase) + '</div>' +
          '</div>' +
        '</header>' +
        '<div class="mid">' +
          '<div class="range">' +
            '<div class="stat"><div class="lbl">High</div><div class="val">' + hi + '°</div></div>' +
            '<div class="rule" aria-hidden="true"></div>' +
            '<div class="stat"><div class="lbl">Low</div><div class="val">' + lo + '°</div></div>' +
          '</div>' +
          '<div class="meta">Celsius<br>' + esc(q.lat) + " N · " + esc(q.lon) + " E</div>" +
        '</div>' +
        '<section class="hours-wrap">' +
          '<div class="hours-head"><h2>Hourly temperatures</h2><span>UTC</span></div>' +
          '<div class="hours">' + cols + '</div>' +
        '</section>' +
      '</main>';
    document.body.setAttribute("data-ready", "ok");
  }

  function parsePayload(data, date) {
    if (!data || data.error) throw new Error((data && data.reason) || "api error");
    var d = data.daily || {};
    var idx = 0;
    if (d.time && d.time.length) {
      var found = d.time.indexOf(date);
      if (found >= 0) idx = found;
    }
    var max = d.temperature_2m_max && d.temperature_2m_max[idx];
    var min = d.temperature_2m_min && d.temperature_2m_min[idx];
    var code = d.weather_code && d.weather_code[idx];
    if (typeof max !== "number" || typeof min !== "number" || code == null) {
      throw new Error("incomplete daily");
    }
    var ht = (data.hourly && data.hourly.time) || [];
    var hv = (data.hourly && data.hourly.temperature_2m) || [];
    var hours = [];
    var seen = {};
    for (var i = 0; i < ht.length; i++) {
      if (!ht[i] || ht[i].slice(0, 10) !== date) continue;
      if (typeof hv[i] !== "number") continue;
      var hour = parseInt(ht[i].slice(11, 13), 10);
      if (isNaN(hour) || seen[hour]) continue;
      seen[hour] = 1;
      hours.push({ hour: hour, t: hv[i] });
    }
    hours.sort(function (a, b) { return a.hour - b.hour; });
    return { max: max, min: min, code: +code, hours: hours };
  }

  var q = qs();
  if (!validDate(q.date)) {
    fail(q, "invalid date");
    return;
  }
  var today = utcToday();
  var path = q.date < today ? "/api/om/archive" : "/api/om/forecast";
  var url = path
    + "?latitude=" + encodeURIComponent(q.lat)
    + "&longitude=" + encodeURIComponent(q.lon)
    + "&daily=" + encodeURIComponent("temperature_2m_max,temperature_2m_min,weather_code")
    + "&hourly=" + encodeURIComponent("temperature_2m")
    + "&timezone=UTC"
    + "&temperature_unit=celsius"
    + "&start_date=" + encodeURIComponent(q.date)
    + "&end_date=" + encodeURIComponent(q.date);

  fetch(url).then(function (res) {
    if (!res.ok) throw new Error("http " + res.status);
    return res.json();
  }).then(function (data) {
    var parsed = parsePayload(data, q.date);
    render(q, parsed, parsed.hours);
  }).catch(function () {
    fail(q);
  });
})();
</script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total21,715html / css / js632 / 12,178 / 8,905
dom nodes22dom depth4
css rules72js presentyes
brightness106.7contrast30.3
colorfulness25.9whitespace30.1%

This slot's telemetry

prompt tokens0completion tokens0
total tokens0wall469.1 s
cost—request id—
config.json553 B
{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_NONE",
    "method": "oauth-login"
  },
  "billing": "plan",
  "config_id": "grok-4.6-eff-medium--cli--grok--dev",
  "effort": "medium",
  "family": "grok",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "grok-4.6",
  "protocol": "cli",
  "served_model": "grok-4.6",
  "telemetry": {
    "completion_tokens": null,
    "cost_usd": null,
    "prompt_tokens": null,
    "total_tokens": null,
    "wall_ms": 1213531
  },
  "transport": "grok-cli-oauth-isolated-home",
  "vendor_sanction_ref": null
}
send-log2.5 KB
{
  "N": 2,
  "batch_id": "2026-08-13--grok46-cli",
  "config_id": "grok-4.6-eff-medium--cli--grok--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-08-12T17:38:44.919622+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:34:37.733462+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-08-12T17:46:36.640347+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:38:47.492892+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-08-12T17:49:28.039754+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:46:41.372653+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-08-12T17:55:03.309139+00:00",
          "http_status": null,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-08-12T17:49:32.739028+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
    }
  }
}