gpt-5.6-terra @ max · kiro
kiromax
- config
- gpt-5.6-terra-eff-max--cli--kiro--dev
- batch
- 2026-07-19--unified
- transport
- kiro-cli-isolated-home-github-social
- protocol
- cli · plan
- served model
- gpt-5.6-terra
- 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-fable-5 @xhigh · CC0.66gpt-5.4 @xhigh · api0.66gpt-5.6-luna @medium · kiro0.66gpt-5.6-terra @low · kiro0.66qwen3.7-max · go0.66farthest
claude-opus-4-6 @high · kiro0.44minimax-m2.5 · kiro0.45kimi-k2.6 @disabled · api0.45grok-4.3 · api0.45deepseek-v4-flash · opencode0.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 tempmismatchshown: 9.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=device-width, initial-scale=1">
<meta name="color-scheme" content="dark">
<title>Weather Card</title>
<style>
:root {
color-scheme: dark;
font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #071426;
color: #f5f8ff;
}
* {
box-sizing: border-box;
}
html,
body {
min-height: 100%;
margin: 0;
}
body {
min-width: 980px;
overflow-x: hidden;
background:
radial-gradient(circle at 12% 8%, rgba(62, 125, 205, 0.26), transparent 28rem),
radial-gradient(circle at 88% 88%, rgba(102, 69, 168, 0.20), transparent 30rem),
linear-gradient(135deg, #071426 0%, #0a1d35 52%, #071321 100%);
}
body::before,
body::after {
position: fixed;
z-index: -1;
width: 42rem;
height: 42rem;
content: "";
border-radius: 50%;
filter: blur(2px);
pointer-events: none;
}
body::before {
top: -28rem;
right: -15rem;
border: 1px solid rgba(153, 200, 255, 0.10);
box-shadow:
0 0 0 5rem rgba(153, 200, 255, 0.025),
0 0 0 10rem rgba(153, 200, 255, 0.015);
}
body::after {
bottom: -34rem;
left: -18rem;
border: 1px solid rgba(111, 166, 245, 0.08);
box-shadow:
0 0 0 7rem rgba(111, 166, 245, 0.018),
0 0 0 14rem rgba(111, 166, 245, 0.012);
}
.page-shell {
width: min(1152px, calc(100% - 80px));
min-height: 100vh;
margin: 0 auto;
padding: 28px 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
}
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 28px;
padding: 0 4px;
color: rgba(223, 234, 251, 0.72);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: #f4f8ff;
letter-spacing: 0.19em;
}
.brand-mark {
position: relative;
width: 18px;
height: 18px;
border: 1px solid rgba(189, 222, 255, 0.78);
border-radius: 50%;
box-shadow: inset 0 0 0 4px rgba(125, 190, 255, 0.10);
}
.brand-mark::before,
.brand-mark::after {
position: absolute;
content: "";
border-radius: 50%;
}
.brand-mark::before {
top: 4px;
left: 4px;
width: 8px;
height: 8px;
background: #89d7ff;
box-shadow: 0 0 15px rgba(137, 215, 255, 0.72);
}
.brand-mark::after {
top: -5px;
right: -6px;
width: 5px;
height: 5px;
background: #fff2af;
box-shadow: 0 0 11px rgba(255, 242, 175, 0.7);
}
.site-meta {
display: inline-flex;
align-items: center;
gap: 8px;
}
.site-meta::before {
width: 6px;
height: 6px;
content: "";
border-radius: 50%;
background: #8edfb3;
box-shadow: 0 0 10px rgba(142, 223, 179, 0.8);
}
.weather-card {
--accent-rgb: 111 205 255;
position: relative;
overflow: hidden;
border: 1px solid rgba(186, 216, 255, 0.16);
border-radius: 30px;
background:
linear-gradient(145deg, rgba(21, 45, 76, 0.95), rgba(10, 27, 49, 0.96) 58%, rgba(9, 25, 44, 0.98)),
#0b1c32;
box-shadow:
0 32px 80px rgba(0, 0, 0, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
isolation: isolate;
}
.weather-card::before {
position: absolute;
z-index: -1;
top: -15rem;
right: -11rem;
width: 39rem;
height: 39rem;
content: "";
border-radius: 50%;
background: radial-gradient(circle, rgb(var(--accent-rgb) / 0.22) 0%, rgb(var(--accent-rgb) / 0.08) 35%, transparent 68%);
filter: blur(4px);
transition: background 500ms ease;
}
.weather-card::after {
position: absolute;
z-index: -1;
right: 0;
bottom: 0;
left: 0;
height: 56%;
content: "";
opacity: 0.42;
background-image:
linear-gradient(rgba(177, 211, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(177, 211, 255, 0.035) 1px, transparent 1px);
background-size: 36px 36px;
mask-image: linear-gradient(to bottom, transparent, #000 70%);
pointer-events: none;
}
.weather-card[data-condition="clear"] {
--accent-rgb: 255 193 91;
}
.weather-card[data-condition="cloud"] {
--accent-rgb: 154 190 230;
}
.weather-card[data-condition="mist"] {
--accent-rgb: 166 195 203;
}
.weather-card[data-condition="rain"] {
--accent-rgb: 91 184 255;
}
.weather-card[data-condition="snow"] {
--accent-rgb: 211 242 255;
}
.weather-card[data-condition="storm"] {
--accent-rgb: 179 139 255;
}
.card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 28px;
padding: 27px 36px 22px;
}
.location-kicker {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 8px;
color: rgba(190, 215, 243, 0.66);
font-size: 10px;
font-weight: 750;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.location-kicker::before {
width: 7px;
height: 7px;
content: "";
border: 1px solid rgb(var(--accent-rgb) / 0.75);
border-radius: 50%;
box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.10);
}
.mode-pill {
display: inline-flex;
align-items: center;
min-height: 20px;
padding: 0 8px;
border: 1px solid rgb(var(--accent-rgb) / 0.28);
border-radius: 999px;
color: rgb(var(--accent-rgb) / 0.98);
background: rgb(var(--accent-rgb) / 0.08);
font-size: 9px;
letter-spacing: 0.11em;
}
.location-name {
max-width: 670px;
margin: 0;
overflow: hidden;
color: #f6f9ff;
font-size: clamp(26px, 3vw, 38px);
font-weight: 650;
letter-spacing: -0.045em;
line-height: 1;
text-overflow: ellipsis;
white-space: nowrap;
}
.coordinates {
margin: 10px 0 0;
color: rgba(196, 216, 239, 0.62);
font-size: 12px;
font-weight: 560;
letter-spacing: 0.025em;
}
.date-block {
min-width: 220px;
padding: 2px 0 0;
text-align: right;
}
.date-label {
display: block;
margin-bottom: 7px;
color: rgba(190, 215, 243, 0.58);
font-size: 10px;
font-weight: 750;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.selected-date {
display: block;
color: #e9f1ff;
font-size: 14px;
font-weight: 620;
letter-spacing: -0.012em;
}
.utc-label {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 8px;
color: rgba(185, 208, 236, 0.56);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.utc-label::before {
width: 4px;
height: 4px;
content: "";
border-radius: 50%;
background: rgba(185, 208, 236, 0.62);
}
.weather-content {
padding: 0 36px 25px;
}
.overview {
display: grid;
grid-template-columns: minmax(0, 1.33fr) minmax(300px, 0.67fr);
gap: 28px;
align-items: stretch;
padding: 4px 0 26px;
}
.temperature-summary {
min-width: 0;
padding: 12px 0 0;
}
.eyebrow {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 2px;
color: rgba(192, 216, 243, 0.61);
font-size: 10px;
font-weight: 750;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.eyebrow::before {
width: 20px;
height: 1px;
content: "";
background: rgb(var(--accent-rgb) / 0.78);
}
.temperature-reading {
display: flex;
align-items: flex-start;
margin: 3px 0 4px -6px;
color: #fbfdff;
line-height: 0.87;
}
.temperature-number {
font-size: clamp(104px, 11.2vw, 154px);
font-weight: 260;
letter-spacing: -0.105em;
font-variant-numeric: tabular-nums;
}
.temperature-unit {
margin: 22px 0 0 13px;
color: rgb(var(--accent-rgb) / 0.94);
font-size: 26px;
font-weight: 570;
letter-spacing: -0.05em;
}
.low-and-range {
display: flex;
gap: 26px;
margin: 5px 0 19px;
}
.mini-metric {
position: relative;
min-width: 112px;
padding-left: 12px;
}
.mini-metric::before {
position: absolute;
top: 4px;
bottom: 4px;
left: 0;
width: 2px;
content: "";
border-radius: 2px;
background: rgb(var(--accent-rgb) / 0.76);
}
.mini-metric-label {
display: block;
margin-bottom: 4px;
color: rgba(190, 214, 240, 0.54);
font-size: 9px;
font-weight: 760;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.mini-metric-value {
color: #eaf3ff;
font-size: 16px;
font-weight: 650;
letter-spacing: -0.035em;
font-variant-numeric: tabular-nums;
}
.chart-panel {
max-width: 625px;
padding: 11px 14px 8px;
border: 1px solid rgba(179, 211, 249, 0.11);
border-radius: 16px;
background: linear-gradient(105deg, rgba(150, 191, 238, 0.075), rgba(150, 191, 238, 0.025));
}
.chart-caption {
display: flex;
justify-content: space-between;
margin: 0 2px 4px;
color: rgba(198, 220, 246, 0.55);
font-size: 9px;
font-weight: 720;
letter-spacing: 0.115em;
text-transform: uppercase;
}
.chart-caption span:last-child {
color: rgb(var(--accent-rgb) / 0.82);
}
.temp-chart {
display: block;
width: 100%;
height: 84px;
overflow: visible;
}
.chart-grid {
fill: none;
stroke: rgba(189, 220, 255, 0.09);
stroke-dasharray: 2 5;
stroke-width: 1;
}
.chart-area {
fill: url(#temperatureFill);
opacity: 0.72;
}
.chart-line {
fill: none;
stroke: rgb(var(--accent-rgb) / 0.96);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.5;
filter: drop-shadow(0 2px 3px rgb(var(--accent-rgb) / 0.22));
}
.chart-dot {
fill: #eaf8ff;
stroke: rgb(var(--accent-rgb) / 0.9);
stroke-width: 2;
}
.condition-panel {
position: relative;
display: flex;
min-height: 272px;
flex-direction: column;
overflow: hidden;
padding: 20px 21px 17px;
border: 1px solid rgb(var(--accent-rgb) / 0.18);
border-radius: 22px;
background:
linear-gradient(145deg, rgb(var(--accent-rgb) / 0.14), rgba(20, 46, 78, 0.34) 58%, rgba(8, 23, 42, 0.54));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}
.condition-panel::after {
position: absolute;
right: -42px;
bottom: -43px;
width: 146px;
height: 146px;
content: "";
border: 1px solid rgb(var(--accent-rgb) / 0.16);
border-radius: 50%;
box-shadow:
0 0 0 21px rgb(var(--accent-rgb) / 0.035),
0 0 0 43px rgb(var(--accent-rgb) / 0.02);
pointer-events: none;
}
.condition-heading {
display: flex;
align-items: center;
justify-content: space-between;
color: rgba(218, 234, 255, 0.76);
font-size: 10px;
font-weight: 750;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.condition-status {
display: inline-flex;
align-items: center;
gap: 6px;
color: rgb(var(--accent-rgb) / 0.96);
font-size: 9px;
letter-spacing: 0.10em;
}
.condition-status::before {
width: 6px;
height: 6px;
content: "";
border-radius: 50%;
background: rgb(var(--accent-rgb) / 0.95);
box-shadow: 0 0 12px rgb(var(--accent-rgb) / 0.75);
}
.weather-visual {
display: flex;
align-items: center;
gap: 17px;
margin: 17px 0 10px;
}
.weather-icon {
display: grid;
width: 91px;
height: 91px;
flex: 0 0 91px;
place-items: center;
border: 1px solid rgb(var(--accent-rgb) / 0.24);
border-radius: 50%;
color: rgb(var(--accent-rgb) / 0.98);
background:
radial-gradient(circle at 38% 32%, rgb(255 255 255 / 0.23), transparent 24%),
radial-gradient(circle, rgb(var(--accent-rgb) / 0.22), rgb(var(--accent-rgb) / 0.06) 67%, transparent 68%);
box-shadow:
inset 0 0 18px rgb(var(--accent-rgb) / 0.10),
0 10px 25px rgb(var(--accent-rgb) / 0.10);
}
.weather-icon svg {
width: 65px;
height: 65px;
overflow: visible;
}
.icon-line {
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 4.5;
}
.condition-copy {
min-width: 0;
}
.condition-title {
margin: 0;
color: #f3f8ff;
font-size: 24px;
font-weight: 620;
letter-spacing: -0.045em;
line-height: 1.02;
}
.condition-details {
margin: 8px 0 0;
color: rgba(205, 224, 246, 0.65);
font-size: 11px;
font-weight: 520;
line-height: 1.45;
}
.condition-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
margin: auto 0 0;
padding: 14px 0 0;
border-top: 1px solid rgb(var(--accent-rgb) / 0.16);
}
.condition-meta div {
min-width: 0;
}
.condition-meta dt {
margin: 0 0 4px;
color: rgba(192, 216, 243, 0.48);
font-size: 8px;
font-weight: 760;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.condition-meta dd {
margin: 0;
overflow: hidden;
color: rgba(239, 247, 255, 0.91);
font-size: 12px;
font-weight: 640;
text-overflow: ellipsis;
white-space: nowrap;
}
.hourly-section {
position: relative;
padding-top: 19px;
border-top: 1px solid rgba(185, 215, 250, 0.13);
}
.hourly-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 12px;
}
.hourly-heading h2 {
display: flex;
align-items: center;
gap: 9px;
margin: 0;
color: #eaf3ff;
font-size: 13px;
font-weight: 680;
letter-spacing: -0.025em;
}
.hourly-heading h2::before {
width: 7px;
height: 7px;
content: "";
border-radius: 50%;
background: rgb(var(--accent-rgb) / 0.88);
box-shadow: 0 0 11px rgb(var(--accent-rgb) / 0.55);
}
.hourly-heading p {
margin: 0;
color: rgba(190, 215, 243, 0.52);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
}
.hourly-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 8px;
}
.hour-cell {
min-width: 0;
min-height: 72px;
overflow: hidden;
padding: 10px 9px 8px;
border: 1px solid rgba(180, 213, 250, 0.09);
border-radius: 12px;
background: linear-gradient(145deg, rgba(160, 199, 242, 0.075), rgba(11, 30, 53, 0.25));
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.hour-cell:hover {
z-index: 1;
border-color: rgb(var(--accent-rgb) / 0.30);
background: linear-gradient(145deg, rgb(var(--accent-rgb) / 0.16), rgba(11, 30, 53, 0.3));
transform: translateY(-2px);
}
.hour-time {
display: block;
margin-bottom: 7px;
color: rgba(199, 221, 245, 0.53);
font-size: 9px;
font-weight: 720;
letter-spacing: 0.075em;
}
.hour-temperature {
display: block;
overflow: hidden;
color: #f1f7ff;
font-size: 14px;
font-weight: 670;
letter-spacing: -0.045em;
text-overflow: ellipsis;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.hour-bar {
display: block;
width: 100%;
height: 3px;
margin-top: 10px;
overflow: hidden;
border-radius: 999px;
background: rgba(188, 215, 247, 0.12);
}
.hour-bar > span {
display: block;
width: var(--bar-fill, 20%);
height: 100%;
border-radius: inherit;
background: rgb(var(--accent-rgb) / 0.90);
box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.42);
}
.hourly-empty {
grid-column: 1 / -1;
padding: 22px;
border: 1px dashed rgba(185, 215, 250, 0.18);
border-radius: 14px;
color: rgba(208, 225, 246, 0.64);
font-size: 13px;
text-align: center;
}
.skeleton-cell {
min-height: 72px;
border: 1px solid rgba(180, 213, 250, 0.07);
border-radius: 12px;
background:
linear-gradient(100deg, rgba(173, 207, 247, 0.03) 18%, rgba(181, 218, 255, 0.11) 40%, rgba(173, 207, 247, 0.03) 62%),
rgba(160, 199, 242, 0.035);
background-size: 200% 100%;
animation: shimmer 1.6s infinite linear;
}
.card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 14px;
color: rgba(184, 210, 240, 0.44);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.095em;
text-transform: uppercase;
}
.data-status {
display: inline-flex;
align-items: center;
gap: 7px;
}
.data-status::before {
width: 5px;
height: 5px;
content: "";
border-radius: 50%;
background: rgb(var(--accent-rgb) / 0.88);
box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.54);
}
.error-panel {
min-height: 345px;
padding: 76px 36px;
text-align: center;
}
.error-icon {
display: grid;
width: 64px;
height: 64px;
margin: 0 auto 19px;
place-items: center;
border: 1px solid rgba(255, 183, 137, 0.30);
border-radius: 50%;
color: #ffbd92;
background: rgba(255, 165, 111, 0.08);
box-shadow: inset 0 0 18px rgba(255, 172, 119, 0.08);
font-size: 28px;
font-weight: 300;
}
.error-panel h2 {
margin: 0;
color: #f6f9ff;
font-size: 24px;
font-weight: 620;
letter-spacing: -0.04em;
}
.error-panel p {
max-width: 420px;
margin: 10px auto 0;
color: rgba(207, 223, 244, 0.63);
font-size: 13px;
line-height: 1.55;
}
.weather-card.has-error .weather-content {
display: none;
}
.weather-card.is-loading .temperature-number,
.weather-card.is-loading .mini-metric-value,
.weather-card.is-loading .condition-title {
opacity: 0.55;
}
[hidden] {
display: none !important;
}
.noscript-notice {
width: min(1152px, calc(100% - 80px));
margin: -4px auto 22px;
padding: 12px 16px;
border: 1px solid rgba(255, 185, 142, 0.24);
border-radius: 12px;
color: #ffd7bd;
background: rgba(111, 40, 25, 0.26);
font-size: 13px;
text-align: center;
}
@keyframes shimmer {
to {
background-position: -200% 0;
}
}
@media (max-width: 980px) {
body {
min-width: 0;
}
.page-shell {
width: min(760px, calc(100% - 40px));
padding: 24px 0;
}
.overview {
grid-template-columns: 1fr;
}
.condition-panel {
min-height: 220px;
}
.hourly-grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
@media (max-width: 620px) {
.page-shell {
width: calc(100% - 24px);
}
.site-meta {
display: none;
}
.card-header,
.weather-content {
padding-right: 20px;
padding-left: 20px;
}
.card-header {
align-items: flex-start;
flex-direction: column;
gap: 16px;
}
.date-block {
min-width: 0;
text-align: left;
}
.temperature-number {
font-size: 96px;
}
.condition-panel {
padding: 18px;
}
.hourly-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
</style>
</head>
<body>
<div class="page-shell">
<header class="site-header" aria-label="Weather application header">
<div class="brand"><span class="brand-mark" aria-hidden="true"></span>METEO</div>
<div class="site-meta">UTC weather desk</div>
</header>
<main>
<article id="weatherCard" class="weather-card is-loading" data-condition="clear" aria-busy="true">
<header class="card-header">
<div>
<div class="location-kicker">
Selected location
<span id="requestMode" class="mode-pill">Forecast</span>
</div>
<h1 id="locationName" class="location-name">Berlin</h1>
<p id="coordinateLabel" class="coordinates">52.520°N · 13.405°E</p>
</div>
<div class="date-block">
<span class="date-label">Selected day</span>
<time id="dateLabel" class="selected-date" datetime="">Loading date</time>
<span class="utc-label">UTC</span>
</div>
</header>
<div id="weatherContent" class="weather-content">
<section class="overview" aria-label="Daily weather summary">
<div class="temperature-summary">
<p class="eyebrow">Daily maximum</p>
<div class="temperature-reading" aria-label="Daily maximum temperature">
<span id="maxTemperature" class="temperature-number">—</span>
<span class="temperature-unit">°C</span>
</div>
<div class="low-and-range">
<div class="mini-metric">
<span class="mini-metric-label">Minimum</span>
<strong id="minTemperature" class="mini-metric-value">—</strong>
</div>
<div class="mini-metric">
<span class="mini-metric-label">Daily range</span>
<strong id="rangeTemperature" class="mini-metric-value">—</strong>
</div>
</div>
<div class="chart-panel">
<div class="chart-caption">
<span>Temperature curve</span>
<span id="chartRange">Hourly · UTC</span>
</div>
<svg class="temp-chart" viewBox="0 0 600 136" preserveAspectRatio="none" role="img" aria-label="Hourly temperature curve in Celsius">
<defs>
<linearGradient id="temperatureFill" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="currentColor" stop-opacity="0.34"></stop>
<stop offset="100%" stop-color="currentColor" stop-opacity="0"></stop>
</linearGradient>
</defs>
<path class="chart-grid" d="M0 28H600 M0 68H600 M0 108H600"></path>
<path id="chartArea" class="chart-area" d=""></path>
<polyline id="chartLine" class="chart-line" points=""></polyline>
<g id="chartDots"></g>
</svg>
</div>
</div>
<section class="condition-panel" aria-labelledby="conditionTitle">
<div class="condition-heading">
<span>Conditions</span>
<span class="condition-status">UTC</span>
</div>
<div class="weather-visual">
<div id="weatherIcon" class="weather-icon" aria-hidden="true">
<svg viewBox="0 0 120 120">
<circle class="icon-line" cx="60" cy="60" r="21"></circle>
<path class="icon-line" d="M60 17v10M60 93v10M17 60h10M93 60h10M29.6 29.6l7.1 7.1M83.3 83.3l7.1 7.1M90.4 29.6l-7.1 7.1M36.7 83.3l-7.1 7.1"></path>
</svg>
</div>
<div class="condition-copy">
<h2 id="conditionTitle" class="condition-title">Loading weather</h2>
<p id="conditionDetails" class="condition-details">Retrieving the selected UTC day</p>
</div>
</div>
<dl class="condition-meta">
<div>
<dt>Source</dt>
<dd id="sourceMeta">Loading</dd>
</div>
<div>
<dt>Weather code</dt>
<dd id="weatherCodeValue">—</dd>
</div>
</dl>
</section>
</section>
<section class="hourly-section" aria-labelledby="hourlyTitle">
<div class="hourly-heading">
<h2 id="hourlyTitle">Hourly temperatures</h2>
<p id="hourlyInfo">Celsius · UTC</p>
</div>
<div id="hourlyGrid" class="hourly-grid" aria-live="polite" aria-label="Hourly temperatures">
<span class="skeleton-cell" aria-hidden="true"></span>
<span class="skeleton-cell" aria-hidden="true"></span>
<span class="skeleton-cell" aria-hidden="true"></span>
<span class="skeleton-cell" aria-hidden="true"></span>
<span class="skeleton-cell" aria-hidden="true"></span>
<span class="skeleton-cell" aria-hidden="true"></span>
<span class="skeleton-cell" aria-hidden="true"></span>
<span class="skeleton-cell" aria-hidden="true"></span>
<span class="skeleton-cell" aria-hidden="true"></span>
<span class="skeleton-cell" aria-hidden="true"></span>
<span class="skeleton-cell" aria-hidden="true"></span>
<span class="skeleton-cell" aria-hidden="true"></span>
</div>
</section>
<footer class="card-footer">
<span id="sourceLabel" class="data-status">Fetching weather data</span>
<span>All times shown in UTC</span>
</footer>
</div>
<section id="errorPanel" class="error-panel" role="alert" hidden>
<div class="error-icon" aria-hidden="true">!</div>
<h2>Weather data could not be loaded.</h2>
<p>The selected location or date may not be available right now. Please check the request and try again.</p>
</section>
</article>
</main>
</div>
<noscript>
<div class="noscript-notice">Weather data could not be loaded because JavaScript is disabled.</div>
</noscript>
<script>
(() => {
const query = new URLSearchParams(window.location.search);
const todayUtc = new Date().toISOString().slice(0, 10);
function isValidDate(value) {
if (!value || !/^\d{4}-\d{2}-\d{2}$/.test(value)) {
return false;
}
const timestamp = Date.parse(value + "T00:00:00Z");
return Number.isFinite(timestamp) && new Date(timestamp).toISOString().slice(0, 10) === value;
}
function readCoordinate(value, fallback, lowerBound, upperBound) {
const text = typeof value === "string" ? value.trim() : "";
if (!text) {
return fallback;
}
const number = Number(text);
return Number.isFinite(number) && number >= lowerBound && number <= upperBound ? number : fallback;
}
function readName(value) {
const name = typeof value === "string" ? value.trim() : "";
return name ? name.slice(0, 80) : "Berlin";
}
function numberOrNull(value) {
if (value === null || value === undefined || value === "") {
return null;
}
const number = Number(value);
return Number.isFinite(number) ? number : null;
}
function formatNumber(value) {
if (value === null || !Number.isFinite(value)) {
return "—";
}
const rounded = Math.round(value * 10) / 10;
return Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1);
}
function formatTemperature(value) {
return value === null || !Number.isFinite(value) ? "—" : formatNumber(value) + "°C";
}
function formatDate(value) {
return new Intl.DateTimeFormat("en-US", {
weekday: "long",
day: "numeric",
month: "long",
year: "numeric",
timeZone: "UTC"
}).format(new Date(value + "T12:00:00Z"));
}
function coordinateText(latitude, longitude) {
const latitudeDirection = latitude >= 0 ? "N" : "S";
const longitudeDirection = longitude >= 0 ? "E" : "W";
return Math.abs(latitude).toFixed(3) + "°" + latitudeDirection + " · " +
Math.abs(longitude).toFixed(3) + "°" + longitudeDirection;
}
const requestedDate = isValidDate(query.get("date")) ? query.get("date") : todayUtc;
const config = {
latitude: readCoordinate(query.get("lat"), 52.52, -90, 90),
longitude: readCoordinate(query.get("lon"), 13.405, -180, 180),
name: readName(query.get("name")),
date: requestedDate,
today: todayUtc
};
const elements = {
weatherCard: document.getElementById("weatherCard"),
locationName: document.getElementById("locationName"),
coordinateLabel: document.getElementById("coordinateLabel"),
dateLabel: document.getElementById("dateLabel"),
requestMode: document.getElementById("requestMode"),
maxTemperature: document.getElementById("maxTemperature"),
minTemperature: document.getElementById("minTemperature"),
rangeTemperature: document.getElementById("rangeTemperature"),
conditionTitle: document.getElementById("conditionTitle"),
conditionDetails: document.getElementById("conditionDetails"),
weatherIcon: document.getElementById("weatherIcon"),
sourceMeta: document.getElementById("sourceMeta"),
weatherCodeValue: document.getElementById("weatherCodeValue"),
sourceLabel: document.getElementById("sourceLabel"),
hourlyGrid: document.getElementById("hourlyGrid"),
hourlyInfo: document.getElementById("hourlyInfo"),
chartRange: document.getElementById("chartRange"),
chartLine: document.getElementById("chartLine"),
chartArea: document.getElementById("chartArea"),
chartDots: document.getElementById("chartDots"),
errorPanel: document.getElementById("errorPanel")
};
const isArchiveRequest = config.date < config.today;
elements.locationName.textContent = config.name;
elements.coordinateLabel.textContent = coordinateText(config.latitude, config.longitude);
elements.dateLabel.textContent = formatDate(config.date);
elements.dateLabel.dateTime = config.date;
elements.requestMode.textContent = isArchiveRequest ? "Archive" : "Forecast";
function conditionFor(weatherCode) {
const code = weatherCode === null ? null : Math.round(weatherCode);
if (code === 0) return { label: "Clear sky", kind: "clear" };
if (code === 1) return { label: "Mainly clear", kind: "clear" };
if (code === 2) return { label: "Partly cloudy", kind: "cloud" };
if (code === 3) return { label: "Overcast", kind: "cloud" };
if (code === 45 || code === 48) return { label: "Fog", kind: "mist" };
if ([51, 53, 55].includes(code)) return { label: "Drizzle", kind: "rain" };
if ([56, 57].includes(code)) return { label: "Freezing drizzle", kind: "rain" };
if ([61, 63, 65].includes(code)) return { label: "Rain", kind: "rain" };
if ([66, 67].includes(code)) return { label: "Freezing rain", kind: "rain" };
if ([71, 73, 75, 77].includes(code)) return { label: "Snowfall", kind: "snow" };
if ([80, 81, 82].includes(code)) return { label: "Rain showers", kind: "rain" };
if ([85, 86].includes(code)) return { label: "Snow showers", kind: "snow" };
if (code === 95) return { label: "Thunderstorm", kind: "storm" };
if ([96, 99].includes(code)) return { label: "Thunderstorm with hail", kind: "storm" };
return { label: "Weather unavailable", kind: "cloud" };
}
function iconFor(kind) {
const icons = {
clear: `
<svg viewBox="0 0 120 120" aria-hidden="true">
<circle class="icon-line" cx="60" cy="60" r="21"></circle>
<path class="icon-line" d="M60 17v10M60 93v10M17 60h10M93 60h10M29.6 29.6l7.1 7.1M83.3 83.3l7.1 7.1M90.4 29.6l-7.1 7.1M36.7 83.3l-7.1 7.1"></path>
</svg>`,
cloud: `
<svg viewBox="0 0 120 120" aria-hidden="true">
<path class="icon-line" d="M28 80h62c10.5 0 18-7.3 18-17.1 0-10.3-8.1-18.4-18.3-18.4-1.9 0-3.8.3-5.6.9C80.7 34.8 70.5 28 59 28c-15 0-27.2 11.4-28.4 26-1-.2-2.1-.3-3.2-.3-9.7 0-17.5 7.8-17.5 17.5S17.7 80 28 80Z"></path>
</svg>`,
mist: `
<svg viewBox="0 0 120 120" aria-hidden="true">
<path class="icon-line" d="M25 43h70M17 60h56M31 77h65"></path>
<path class="icon-line" d="M87 54c8 0 14 5 14 12s-6 12-14 12"></path>
</svg>`,
rain: `
<svg viewBox="0 0 120 120" aria-hidden="true">
<path class="icon-line" d="M27 69h61c9.6 0 17-6.7 17-15.7 0-9.5-7.5-17-17-17-1.7 0-3.4.2-5 .7C79.7 27.7 70.4 22 60 22c-14.2 0-25.9 10.7-27.4 24.5-1.7-.5-3.5-.8-5.3-.8-9.1 0-16.4 7.3-16.4 16.4S18.2 69 27 69Z"></path>
<path class="icon-line" d="M39 80l-5 14M61 80l-5 14M83 80l-5 14"></path>
</svg>`,
snow: `
<svg viewBox="0 0 120 120" aria-hidden="true">
<path class="icon-line" d="M27 66h61c9.6 0 17-6.7 17-15.7 0-9.5-7.5-17-17-17-1.7 0-3.4.2-5 .7C79.7 24.7 70.4 19 60 19c-14.2 0-25.9 10.7-27.4 24.5-1.7-.5-3.5-.8-5.3-.8-9.1 0-16.4 7.3-16.4 16.4S18.2 66 27 66Z"></path>
<path class="icon-line" d="M39 82v16M31.5 86.5l15 7M46.5 86.5l-15 7M72 82v16M64.5 86.5l15 7M79.5 86.5l-15 7"></path>
</svg>`,
storm: `
<svg viewBox="0 0 120 120" aria-hidden="true">
<path class="icon-line" d="M27 67h61c9.6 0 17-6.7 17-15.7 0-9.5-7.5-17-17-17-1.7 0-3.4.2-5 .7C79.7 25.7 70.4 20 60 20c-14.2 0-25.9 10.7-27.4 24.5-1.7-.5-3.5-.8-5.3-.8-9.1 0-16.4 7.3-16.4 16.4S18.2 67 27 67Z"></path>
<path class="icon-line" d="M64 75 50 96h13l-6 13 20-27H64Z"></path>
</svg>`
};
return icons[kind] || icons.cloud;
}
function requestedDayIndex(data) {
if (!data || !data.daily || !Array.isArray(data.daily.time)) {
throw new Error("Missing daily weather data");
}
const index = data.daily.time.indexOf(config.date);
if (index < 0) {
throw new Error("Requested day was not returned");
}
return index;
}
function hourlyEntries(data) {
const hourly = data && data.hourly;
if (!hourly || !Array.isArray(hourly.time) || !Array.isArray(hourly.temperature_2m)) {
return [];
}
const entries = [];
const count = Math.min(hourly.time.length, hourly.temperature_2m.length);
for (let index = 0; index < count; index += 1) {
const time = hourly.time[index];
if (typeof time === "string" && time.slice(0, 10) === config.date) {
entries.push({
time,
temperature: numberOrNull(hourly.temperature_2m[index])
});
}
}
return entries.slice(0, 24);
}
function renderChart(entries) {
const usable = entries.filter((entry) => entry.temperature !== null);
elements.chartLine.setAttribute("points", "");
elements.chartArea.setAttribute("d", "");
elements.chartDots.replaceChildren();
if (!usable.length) {
return;
}
const values = usable.map((entry) => entry.temperature);
const minimum = Math.min(...values);
const maximum = Math.max(...values);
const range = Math.max(4, maximum - minimum);
const lower = minimum - range * 0.18;
const upper = maximum + range * 0.18;
const fallback = values.reduce((total, value) => total + value, 0) / values.length;
const firstX = 16;
const lastX = 584;
const points = entries.map((entry, index) => {
const value = entry.temperature === null ? fallback : entry.temperature;
const x = entries.length === 1
? 300
: firstX + (index / (entries.length - 1)) * (lastX - firstX);
const y = 113 - ((value - lower) / (upper - lower)) * 87;
return { x, y };
});
elements.chartLine.setAttribute(
"points",
points.map((point) => point.x.toFixed(2) + "," + point.y.toFixed(2)).join(" ")
);
const linePath = points.map((point) => "L " + point.x.toFixed(2) + " " + point.y.toFixed(2)).join(" ");
elements.chartArea.setAttribute(
"d",
"M " + points[0].x.toFixed(2) + " 124 " + linePath +
" L " + points[points.length - 1].x.toFixed(2) + " 124 Z"
);
points.forEach((point, index) => {
if (index % 6 !== 0 && index !== points.length - 1) {
return;
}
const dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
dot.setAttribute("class", "chart-dot");
dot.setAttribute("cx", point.x.toFixed(2));
dot.setAttribute("cy", point.y.toFixed(2));
dot.setAttribute("r", "3.2");
elements.chartDots.appendChild(dot);
});
}
function renderHourly(entries) {
elements.hourlyGrid.replaceChildren();
if (!entries.length) {
const message = document.createElement("div");
message.className = "hourly-empty";
message.textContent = "Hourly temperatures are unavailable for this date.";
elements.hourlyGrid.appendChild(message);
elements.hourlyInfo.textContent = "No hourly readings";
elements.chartRange.textContent = "No hourly data";
renderChart(entries);
return;
}
const values = entries
.map((entry) => entry.temperature)
.filter((value) => value !== null);
const minimum = values.length ? Math.min(...values) : 0;
const maximum = values.length ? Math.max(...values) : 1;
const range = Math.max(1, maximum - minimum);
entries.forEach((entry) => {
const cell = document.createElement("article");
cell.className = "hour-cell";
const timeText = /^\d{2}:\d{2}$/.test(entry.time.slice(11, 16))
? entry.time.slice(11, 16)
: "—";
const accessibleTemperature = entry.temperature === null
? "temperature unavailable"
: formatNumber(entry.temperature) + " degrees Celsius";
cell.setAttribute("aria-label", timeText + ": " + accessibleTemperature);
const time = document.createElement("time");
time.className = "hour-time";
time.dateTime = entry.time;
time.textContent = timeText;
const temperature = document.createElement("strong");
temperature.className = "hour-temperature";
temperature.textContent = formatTemperature(entry.temperature);
const bar = document.createElement("span");
bar.className = "hour-bar";
bar.setAttribute("aria-hidden", "true");
const fill = document.createElement("span");
const percentage = entry.temperature === null
? 12
: 24 + ((entry.temperature - minimum) / range) * 76;
bar.style.setProperty("--bar-fill", Math.max(12, Math.min(100, percentage)).toFixed(0) + "%");
bar.appendChild(fill);
cell.append(time, temperature, bar);
elements.hourlyGrid.appendChild(cell);
});
const readingLabel = entries.length + (entries.length === 1 ? " hourly reading" : " hourly readings");
elements.hourlyInfo.textContent = readingLabel + " · Celsius · UTC";
elements.chartRange.textContent = readingLabel;
renderChart(entries);
}
function showError() {
elements.weatherCard.classList.remove("is-loading");
elements.weatherCard.classList.add("has-error");
elements.weatherCard.setAttribute("aria-busy", "false");
elements.sourceLabel.textContent = "Weather request failed";
elements.errorPanel.hidden = false;
}
function applyWeather(data, endpoint) {
const index = requestedDayIndex(data);
const daily = data.daily;
const maximum = numberOrNull(Array.isArray(daily.temperature_2m_max) ? daily.temperature_2m_max[index] : null);
const minimum = numberOrNull(Array.isArray(daily.temperature_2m_min) ? daily.temperature_2m_min[index] : null);
const weatherCode = numberOrNull(Array.isArray(daily.weather_code) ? daily.weather_code[index] : null);
if (maximum === null || minimum === null || weatherCode === null) {
throw new Error("Incomplete daily weather data");
}
const condition = conditionFor(weatherCode);
const source = endpoint === "/api/om/archive" ? "Archive" : "Forecast";
const entries = hourlyEntries(data);
const spread = Math.abs(maximum - minimum);
elements.maxTemperature.textContent = formatNumber(maximum);
elements.minTemperature.textContent = formatTemperature(minimum);
elements.rangeTemperature.textContent = formatNumber(spread) + "°C";
elements.conditionTitle.textContent = condition.label;
elements.conditionDetails.textContent = source + " data for the selected UTC day";
elements.weatherIcon.innerHTML = iconFor(condition.kind);
elements.sourceMeta.textContent = source;
elements.weatherCodeValue.textContent = String(Math.round(weatherCode));
elements.sourceLabel.textContent = source + " data loaded";
elements.weatherCard.dataset.condition = condition.kind;
elements.weatherCard.classList.remove("is-loading", "has-error");
elements.weatherCard.setAttribute("aria-busy", "false");
elements.errorPanel.hidden = true;
renderHourly(entries);
}
async function loadWeather() {
const endpoint = isArchiveRequest ? "/api/om/archive" : "/api/om/forecast";
const parameters = new URLSearchParams({
latitude: String(config.latitude),
longitude: String(config.longitude),
daily: "temperature_2m_max,temperature_2m_min,weather_code",
hourly: "temperature_2m",
timezone: "UTC",
temperature_unit: "celsius",
start_date: config.date,
end_date: config.date
});
const controller = new AbortController();
const timeout = window.setTimeout(() => controller.abort(), 12000);
try {
const response = await fetch(endpoint + "?" + parameters.toString(), {
headers: { "Accept": "application/json" },
signal: controller.signal
});
if (!response.ok) {
throw new Error("Weather request failed");
}
const data = await response.json();
if (data && data.error) {
throw new Error("Weather API returned an error");
}
applyWeather(data, endpoint);
} catch (error) {
showError();
} finally {
window.clearTimeout(timeout);
}
}
loadWeather();
})();
</script>
</body>
</html>L1 — cheap deterministic descriptors
| bytes total | 44,807 | html / css / js | 6,635 / 20,926 / 17,246 |
|---|---|---|---|
| dom nodes | 98 | dom depth | 13 |
| css rules | 117 | js present | yes |
| brightness | 37.0 | contrast | 22.1 |
| colorfulness | 19.7 | whitespace | 61.9% |
This slot's telemetry
| prompt tokens | 0 | completion tokens | 0 |
|---|---|---|---|
| total tokens | 0 | wall | 183.4 s |
| cost | — | request id | — |
config.json568 B
{
"N": 2,
"auth": {
"credential_ref": "WCB_NONE",
"method": "oauth-login"
},
"billing": "plan",
"config_id": "gpt-5.6-terra-eff-max--cli--kiro--dev",
"effort": "max",
"family": "gpt",
"m": {
"min": 2,
"q": 2
},
"model_id": "gpt-5.6-terra",
"protocol": "cli",
"served_model": "gpt-5.6-terra",
"telemetry": {
"completion_tokens": null,
"cost_usd": null,
"prompt_tokens": null,
"total_tokens": null,
"wall_ms": 575910
},
"transport": "kiro-cli-isolated-home-github-social",
"vendor_sanction_ref": null
}send-log2.5 KB
{
"N": 2,
"batch_id": "2026-07-18--kiro-cli",
"config_id": "gpt-5.6-terra-eff-max--cli--kiro--dev",
"positions": [
{
"attempts": [
{
"attempt_index": 0,
"backoff_ms": null,
"charged": true,
"ended_at": "2026-07-18T18:54:09.620548+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-18T18:51:06.133040+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-18T18:56:33.410822+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-18T18:54:14.077526+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-18T19:00:14.432032+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-18T18:56:37.996092+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-18T19:00:55.195747+00:00",
"http_status": null,
"outcome": "valid",
"reached_model": true,
"reason": "ok",
"request_id": null,
"started_at": "2026-07-18T19:00:18.214265+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
}
}
}