Hugging Face's logo

Buckets:
evalstate
/
birch-html

Files
xet
evalstate/birch-html / results /publish /models /opus47 /artifacts /code-review.html
evalstate's picture
evalstate
download
raw
50.2 kB
<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>Code review — Candle chart-brief eval + checker upgrades</title>
 <style data-birch-system>/*
 Birch HTML Design System
 Opinionated single-option stylesheet for reliable LLM-generated artifacts.
 Model:
 1. Design tokens as CSS variables.
 2. Layout primitives as classes.
 3. Semantic components as classes with data-* variants.
*/
/* ==================== 1. TOKENS ==================== */
:root {
 color-scheme: light;
 /* Palette */
 --color-ivory: #FAF9F5;
 --color-slate: #141413;
 --color-clay: #D97757;
 --color-clay-dark: #B85C3E;
 --color-oat: #E3DACC;
 --color-olive: #788C5D;
 --color-rust: #B04A3F;
 --color-sky: #6A8CAF;
 --color-white: #FFFFFF;
 --color-gray-50: #F7F5EE;
 --color-gray-100: #F0EEE6;
 --color-gray-150: #E8E4DA;
 --color-gray-200: #DED9CD;
 --color-gray-300: #D1CFC5;
 --color-gray-500: #87867F;
 --color-gray-700: #3D3D3A;
 --color-gray-800: #242421;
 /* Semantic colors */
 --bg: var(--color-ivory);
 --surface: var(--color-white);
 --surface-tint: var(--color-gray-100);
 --surface-warm: var(--color-oat);
 --text: var(--color-slate);
 --text-muted: var(--color-gray-500);
 --text-soft: var(--color-gray-700);
 --muted: var(--text-muted);
 --border-color: var(--color-gray-300);
 --accent: var(--color-clay);
 --accent-strong: var(--color-clay-dark);
 --success: var(--color-olive);
 --warning: #C78E3F;
 --danger: var(--color-rust);
 --info: var(--color-sky);
 /* Typography */
 --font-serif: ui-serif, Georgia, "Times New Roman", serif;
 --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
 --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 --text-xs: 11px;
 --text-sm: 12px;
 --text-md: 14px;
 --text-base: 15px;
 --text-lg: 17px;
 --text-xl: 21px;
 --text-2xl: 26px;
 --text-3xl: 36px;
 --text-4xl: 44px;
 --leading-tight: 1.15;
 --leading-title: 1.25;
 --leading-body: 1.55;
 --leading-loose: 1.7;
 /* Spacing */
 --space-1: 4px;
 --space-2: 8px;
 --space-3: 12px;
 --space-4: 16px;
 --space-5: 24px;
 --space-6: 32px;
 --space-7: 48px;
 --space-8: 64px;
 --space-9: 96px;
 /* Shape */
 --radius-xs: 4px;
 --radius-sm: 8px;
 --radius-md: 12px;
 --radius-lg: 16px;
 --radius-xl: 20px;
 --radius-pill: 999px;
 --border: 1.5px solid var(--border-color);
 --border-thin: 1px solid var(--border-color);
 --shadow-sm: 0 1px 2px rgba(20, 20, 19, 0.06);
 --shadow-md: 0 4px 14px rgba(20, 20, 19, 0.08);
 --shadow-lg: 0 12px 28px rgba(20, 20, 19, 0.12);
 /* Motion */
 --ease: cubic-bezier(0.2, 0, 0, 1);
 --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
 --dur-fast: 120ms;
 --dur: 180ms;
 --hover-y: -2px;
 /* Page sizing */
 --page-max: 1100px;
 --page-pad: 28px;
 --page-pad-block: 48px;
 /* Legacy aliases used by source examples */
 --ivory: var(--color-ivory);
 --slate: var(--color-slate);
 --clay: var(--color-clay);
 --clay-d: var(--color-clay-dark);
 --oat: var(--color-oat);
 --olive: var(--color-olive);
 --rust: var(--color-rust);
 --sky: var(--color-sky);
 --white: var(--color-white);
 --gray-50: var(--color-gray-50);
 --gray-100: var(--color-gray-100);
 --gray-150: var(--color-gray-150);
 --gray-200: var(--color-gray-200);
 --gray-300: var(--color-gray-300);
 --gray-500: var(--color-gray-500);
 --gray-700: var(--color-gray-700);
 --gray-800: var(--color-gray-800);
 --serif: var(--font-serif);
 --sans: var(--font-sans);
 --mono: var(--font-mono);
}
/* ==================== BASE ==================== */
*,
*::before,
*::after {
 box-sizing: border-box;
}
html {
 background: var(--bg);
 color: var(--text);
 font-family: var(--font-sans);
 -webkit-text-size-adjust: 100%;
}
body {
 margin: 0;
 background: var(--bg);
 color: var(--text);
 font-family: var(--font-sans);
 font-size: var(--text-base);
 line-height: var(--leading-body);
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
}
img,
svg {
 max-width: 100%;
}
a {
 color: inherit;
 text-decoration-color: rgba(217, 119, 87, 0.45);
 text-underline-offset: 3px;
}
a:hover {
 color: var(--accent);
}
h1,
h2,
h3,
p {
 margin-block: 0;
}
h1,
h2,
h3 {
 font-family: var(--font-serif);
 font-weight: 500;
 letter-spacing: -0.01em;
 line-height: var(--leading-title);
}
h1 {
 font-size: clamp(32px, 5vw, var(--text-4xl));
}
h2 {
 font-size: var(--text-2xl);
}
h3 {
 font-size: var(--text-xl);
}
code,
kbd,
pre {
 font-family: var(--font-mono);
}
code {
 font-size: 0.92em;
 white-space: normal;
 word-break: normal;
}
h1 code,
h2 code,
h3 code {
 overflow-wrap: anywhere;
 word-break: break-word;
}
button,
input,
textarea,
select {
 font: inherit;
}
button {
 cursor: pointer;
}
::selection {
 background: rgba(217, 119, 87, 0.24);
}
/* ==================== 2. LAYOUT PRIMITIVES ==================== */
.page {
 width: min(100% - (var(--page-pad) * 2), var(--page-max));
 margin-inline: auto;
 padding-block: var(--page-pad-block) var(--space-9);
}
.page[data-size="narrow"] {
 --page-max: 820px;
}
.page[data-size="wide"] {
 --page-max: 1280px;
}
.page[data-size="full"] {
 --page-max: 1440px;
}
.section {
 margin-block: var(--section-gap, var(--space-5));
}
.section[data-gap="lg"] {
 --section-gap: var(--space-6);
}
.section[data-gap="xl"] {
 --section-gap: var(--space-7);
}
.section:first-child {
 margin-block-start: 0;
}
.stack > .section {
 margin-block: 0;
}
.rule {
 border: 0;
 border-top: var(--border-thin);
 margin: var(--space-3) 0 var(--space-5);
}
.stack {
 display: flex;
 flex-direction: column;
 gap: var(--stack-gap, var(--space-4));
}
.stack[data-gap="xs"] { --stack-gap: var(--space-2); }
.stack[data-gap="sm"] { --stack-gap: var(--space-3); }
.stack[data-gap="md"] { --stack-gap: var(--space-4); }
.stack[data-gap="lg"] { --stack-gap: var(--space-6); }
.stack[data-gap="xl"] { --stack-gap: var(--space-8); }
.stack > :is(.button, .btn, .chip, .badge) {
 align-self: flex-start;
}
.cluster {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: var(--cluster-gap, var(--space-3));
}
.cluster[data-align="start"] { align-items: flex-start; }
.cluster[data-align="end"] { align-items: flex-end; }
.cluster[data-justify="between"] { justify-content: space-between; }
.cluster[data-justify="end"] { justify-content: flex-end; }
.grid {
 display: grid;
 gap: var(--grid-gap, var(--space-5));
}
.grid[data-cols="2"] {
 grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid[data-cols="3"] {
 grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid[data-cols="4"] {
 grid-template-columns: repeat(4, minmax(0, 1fr));
}
.auto-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 240px)), 1fr));
 gap: var(--grid-gap, var(--space-5));
}
.auto-grid > * {
 min-width: 0;
}
.split {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(280px, var(--split-side, 360px));
 gap: var(--split-gap, var(--space-6));
 align-items: start;
}
.split > * {
 min-width: 0;
}
.section-head {
 min-width: 0;
}
.section-rail {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(280px, var(--rail-width, 360px));
 column-gap: var(--rail-gap, var(--space-6));
 row-gap: var(--space-5);
 align-items: start;
}
.section-rail > .section-head {
 grid-column: 1 / -1;
}
.section-rail > .reference-panel,
.section-rail > aside {
 align-self: start;
}
.sidebar-layout {
 display: grid;
 grid-template-columns: var(--sidebar-width, 240px) minmax(0, 1fr);
 gap: var(--sidebar-gap, var(--space-7));
 align-items: start;
}
.sidebar-layout > :first-child,
.sticky {
 position: sticky;
 top: var(--sticky-top, var(--space-5));
}
.bleed {
 margin-inline: calc(var(--page-pad) * -1);
}
.scroll-x {
 overflow-x: auto;
 overscroll-behavior-inline: contain;
}
.center {
 display: grid;
 place-items: center;
}
.spacer {
 flex: 1;
}
@media (max-width: 860px) {
 :root {
 --page-pad: 20px;
 --page-pad-block: 40px;
 }
 .grid[data-cols],
 .split,
 .section-rail,
 .sidebar-layout {
 grid-template-columns: 1fr;
 }
 .sidebar-layout > :first-child,
 .sticky {
 position: static;
 }
}
/* ==================== TYPOGRAPHY UTILITIES ==================== */
.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: var(--space-2);
 color: var(--accent);
 font-family: var(--font-mono);
 font-size: var(--text-xs);
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}
.eyebrow::before {
 content: "";
 width: 24px;
 height: 1.5px;
 background: currentColor;
}
.lede {
 max-width: 720px;
 color: var(--text-soft);
 font-size: var(--text-lg);
 line-height: 1.6;
}
.muted {
 color: var(--text-muted);
}
.caption {
 color: var(--text-muted);
 font-family: var(--font-mono);
 font-size: var(--text-sm);
}
.stat-value {
 display: block;
 color: var(--text);
 font-family: var(--font-serif);
 font-size: clamp(30px, 3.2vw, 42px);
 font-variant-numeric: tabular-nums;
 font-weight: 550;
 letter-spacing: -0.025em;
 line-height: 1;
}
.stat-card {
 gap: var(--space-2);
}
.stat-card .caption {
 letter-spacing: 0.08em;
 text-transform: uppercase;
}
.stat-card .muted {
 max-width: 34ch;
 font-size: var(--text-sm);
}
.mono {
 font-family: var(--font-mono);
}
/* ==================== 3. SEMANTIC COMPONENTS ==================== */
.panel,
.card {
 background: var(--surface);
 border: var(--border);
 border-radius: var(--radius-md);
}
.panel {
 padding: var(--panel-pad, var(--space-5));
}
.card {
 padding: var(--card-pad, var(--space-5));
 transition:
 transform var(--dur-fast) var(--ease),
 border-color var(--dur-fast) var(--ease),
 box-shadow var(--dur-fast) var(--ease),
 background-color var(--dur-fast) var(--ease);
}
.card[data-hover="lift"]:hover,
.card[data-clickable]:hover {
 transform: translateY(var(--hover-y));
 border-color: rgba(217, 119, 87, 0.55);
 box-shadow: var(--shadow-md);
}
.card[data-clickable] {
 cursor: pointer;
}
.card[data-variant="flat"] {
 background: transparent;
 border-color: transparent;
 box-shadow: none;
}
.card[data-variant="outlined"] {
 background: var(--surface);
 border: var(--border);
}
.card[data-variant="elevated"] {
 border-color: transparent;
 box-shadow: var(--shadow-md);
}
.card[data-variant="filled"],
.card[data-tone="oat"] {
 background: var(--surface-warm);
}
.card[data-tone],
.panel[data-tone],
.callout[data-tone] {
 background: var(--surface);
}
.card[data-tone="danger"],
.panel[data-tone="danger"],
.callout[data-tone="danger"] {
 border-color: rgba(176, 74, 63, 0.36);
}
.card[data-tone="warning"],
.panel[data-tone="warning"],
.callout[data-tone="warning"] {
 border-color: rgba(199, 142, 63, 0.38);
}
.card[data-tone="success"],
.panel[data-tone="success"],
.callout[data-tone="success"] {
 border-color: rgba(120, 140, 93, 0.38);
}
.card[data-tone="info"],
.panel[data-tone="info"],
.callout[data-tone="info"] {
 border-color: rgba(106, 140, 175, 0.36);
}
.card[data-accent] {
 position: relative;
 overflow: hidden;
}
.card[data-accent]::before {
 content: "";
 position: absolute;
 inset: 0 auto 0 0;
 width: 5px;
 background: var(--accent);
}
.card-head {
 display: flex;
 align-items: center;
 gap: var(--space-3);
 min-width: 0;
 max-width: 100%;
}
.card-head > :first-child {
 flex: 0 0 auto;
}
.card-titles {
 flex: 1 1 0;
 min-width: 0;
 max-width: 100%;
}
.card-title {
 max-width: 100%;
 margin: 0;
 font-family: var(--font-serif);
 font-size: var(--text-xl);
 font-weight: 550;
 line-height: var(--leading-title);
 overflow-wrap: anywhere;
}
.card-sub {
 margin: 2px 0 0;
 color: var(--text-muted);
 font-size: var(--text-sm);
 overflow-wrap: anywhere;
}
.toolbar {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: var(--space-4);
 padding: var(--space-4) var(--space-5);
 background: var(--surface);
 border: var(--border);
 border-radius: var(--radius-md);
}
.toolbar[data-sticky] {
 position: sticky;
 top: 0;
 z-index: 10;
}
.chip,
.badge {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 border-radius: var(--radius-pill);
 white-space: nowrap;
 font-family: var(--font-mono);
 font-size: var(--text-xs);
 font-weight: 650;
 line-height: 1;
}
.chip {
 min-height: 24px;
 padding: 0 10px;
 color: var(--text-soft);
 background: var(--surface-tint);
 border: 1px solid transparent;
}
.badge {
 min-height: 22px;
 padding: 0 9px;
 color: var(--text-muted);
 background: var(--surface);
 border: var(--border-thin);
 text-transform: uppercase;
 letter-spacing: 0.06em;
}
.chip[data-tone="clay"],
.badge[data-tone="clay"] {
 color: var(--accent);
 background: rgba(217, 119, 87, 0.14);
}
.chip[data-tone="olive"],
.badge[data-tone="olive"],
.chip[data-tone="success"],
.badge[data-tone="success"] {
 color: var(--success);
 background: rgba(120, 140, 93, 0.15);
}
.chip[data-tone="warning"],
.badge[data-tone="warning"] {
 color: var(--warning);
 background: rgba(199, 142, 63, 0.16);
}
.chip[data-tone="rust"],
.badge[data-tone="rust"],
.chip[data-tone="danger"],
.badge[data-tone="danger"] {
 color: var(--danger);
 background: rgba(176, 74, 63, 0.13);
}
.chip[data-tone="sky"],
.badge[data-tone="sky"],
.chip[data-tone="info"],
.badge[data-tone="info"] {
 color: var(--info);
 background: rgba(106, 140, 175, 0.14);
}
.finding {
 border-left: 6px solid var(--border-color);
}
.finding[data-severity="blocker"],
.finding[data-severity="critical"],
.finding[data-severity="danger"],
.finding[data-tone="danger"] {
 border-left-color: var(--danger);
}
.finding[data-severity="high"],
.finding[data-severity="warning"],
.finding[data-tone="warning"] {
 border-left-color: var(--warning);
}
.finding[data-severity="medium"],
.finding[data-severity="info"],
.finding[data-tone="info"] {
 border-left-color: var(--info);
}
.finding[data-severity="low"],
.finding[data-severity="success"],
.finding[data-tone="success"] {
 border-left-color: var(--success);
}
.button,
.btn {
 appearance: none;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 36px;
 padding: 0 14px;
 border: 1.5px solid transparent;
 border-radius: var(--radius-sm);
 font-family: var(--font-sans);
 font-size: var(--text-md);
 font-weight: 650;
 line-height: 1;
 text-decoration: none;
 transition:
 transform var(--dur-fast) var(--ease),
 background-color var(--dur-fast) var(--ease),
 border-color var(--dur-fast) var(--ease),
 box-shadow var(--dur-fast) var(--ease);
}
.button:hover,
.btn:hover {
 transform: translateY(-1px);
}
.button[data-variant="primary"],
.btn-primary {
 color: var(--color-white);
 background: var(--color-slate);
}
.button[data-variant="primary"]:hover,
.btn-primary:hover {
 background: var(--color-gray-700);
}
.button[data-variant="secondary"],
.btn-secondary {
 color: var(--text);
 background: var(--surface-tint);
 border-color: var(--border-color);
}
.button[data-variant="ghost"],
.btn-ghost {
 color: var(--text-soft);
 background: transparent;
}
.button[data-variant="ghost"]:hover,
.btn-ghost:hover {
 color: var(--text);
 background: var(--surface-tint);
}
.button[data-variant="danger"],
.btn-danger {
 color: var(--color-white);
 background: var(--danger);
}
.input {
 width: 100%;
 min-height: 38px;
 padding: 0 12px;
 color: var(--text);
 background: var(--surface);
 border: var(--border);
 border-radius: var(--radius-sm);
 outline: none;
}
.input:focus {
 border-color: var(--accent);
 box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.16);
}
.avatar {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: var(--avatar-size, 38px);
 height: var(--avatar-size, 38px);
 border-radius: 50%;
 color: var(--text-soft);
 background: var(--surface-warm);
 font-family: var(--font-mono);
 font-size: var(--text-sm);
 font-weight: 700;
 letter-spacing: 0.02em;
 flex: 0 0 auto;
}
.code-block {
 margin: 0;
 padding: var(--space-4) var(--space-5);
 overflow-x: auto;
 color: #E8E6DC;
 background: var(--color-slate);
 border-radius: var(--radius-md);
 font-family: var(--font-mono);
 font-size: var(--text-sm);
 line-height: var(--leading-loose);
}
.code-block[data-kind="command"],
.code-block[data-wrap="true"],
.command-block {
 max-width: 100%;
 min-width: 0;
 box-sizing: border-box;
 white-space: pre-wrap;
 overflow-wrap: anywhere;
 word-break: break-word;
 overflow-x: hidden;
}
.code-block[data-wrap="true"] code,
.code-block[data-kind="command"] code {
 display: block;
 max-width: 100%;
 white-space: pre-wrap;
 overflow-wrap: anywhere;
 word-break: break-word;
}
.copyable {
 position: relative;
}
.copyable > .code-block {
 padding-inline-end: 88px;
}
.copy-button {
 appearance: none;
 position: absolute;
 inset-block-start: var(--space-2);
 inset-inline-end: var(--space-2);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 26px;
 padding: 0 9px;
 border: 1px solid rgba(250, 249, 245, 0.18);
 border-radius: var(--radius-sm);
 color: var(--color-gray-100);
 background: rgba(255, 255, 255, 0.08);
 font-family: var(--font-mono);
 font-size: var(--text-xs);
 font-weight: 700;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 transition:
 background-color var(--dur-fast) var(--ease),
 border-color var(--dur-fast) var(--ease),
 transform var(--dur-fast) var(--ease);
}
.copy-button:hover {
 transform: translateY(-1px);
 border-color: rgba(250, 249, 245, 0.35);
 background: rgba(255, 255, 255, 0.14);
}
.copy-button[data-copied="true"] {
 color: var(--color-white);
 background: rgba(120, 140, 93, 0.55);
 border-color: rgba(120, 140, 93, 0.75);
}
.reference-panel {
 --panel-pad: var(--space-5);
}
.callout {
 padding: var(--space-5);
 color: var(--text-soft);
 background: var(--surface-tint);
 border: var(--border);
 border-inline-start: 4px solid var(--accent);
 border-radius: var(--radius-md);
}
.callout[data-tone="success"] {
 border-inline-start-color: var(--success);
 background: rgba(120, 140, 93, 0.10);
}
.callout[data-tone="warning"] {
 border-inline-start-color: var(--warning);
 background: rgba(199, 142, 63, 0.11);
}
.callout[data-tone="danger"] {
 border-inline-start-color: var(--danger);
 background: rgba(176, 74, 63, 0.10);
}
.callout[data-tone="info"] {
 border-inline-start-color: var(--info);
 background: rgba(106, 140, 175, 0.11);
}
.callout-label {
 display: block;
 margin-bottom: var(--space-2);
 color: var(--text-muted);
 font-family: var(--font-mono);
 font-size: var(--text-xs);
 font-weight: 700;
 letter-spacing: 0.09em;
 text-transform: uppercase;
}
.callout > :last-child {
 margin-bottom: 0;
}
.checklist {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 gap: var(--space-3);
}
.checklist li {
 display: block !important;
 position: relative !important;
 min-width: 0;
 padding-inline-start: calc(18px + var(--space-3));
 overflow-wrap: anywhere;
}
.checklist li::before {
 content: "✓";
 position: absolute !important;
 inset-block-start: 2px;
 inset-inline-start: 0;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 18px;
 height: 18px;
 border-radius: 50%;
 color: var(--success);
 background: rgba(120, 140, 93, 0.12);
 font-family: var(--font-mono);
 font-size: 12px;
 font-weight: 700;
 line-height: 1;
}
.checklist code {
 white-space: normal;
 overflow-wrap: anywhere;
 word-break: break-word;
}
.plain-list {
 margin: 0;
 padding-inline-start: 1.15em;
 color: var(--text-soft);
}
.plain-list li {
 overflow-wrap: anywhere;
}
.plain-list li + li {
 margin-top: var(--space-2);
}
.plain-list li::marker {
 color: var(--text-muted);
}
.insight-list,
.takeaway-list {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 gap: var(--space-3);
}
.insight-list li,
.takeaway-list li {
 position: relative;
 display: block;
 padding-inline-start: calc(10px + var(--space-3));
 color: var(--text-soft);
}
.insight-list li::before,
.takeaway-list li::before {
 content: "";
 position: absolute;
 inset-block-start: 0.65em;
 inset-inline-start: 0;
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: var(--accent);
}
.insight-list li > *,
.takeaway-list li > * {
 min-width: 0;
}
.insight-list[data-tone="success"] li::before,
.takeaway-list[data-tone="success"] li::before {
 background: var(--success);
}
.insight-list[data-tone="info"] li::before,
.takeaway-list[data-tone="info"] li::before {
 background: var(--info);
}
.metric-list {
 --metric-label: 132px;
 --metric-value: 64px;
 display: grid;
 gap: var(--space-3);
}
.metric-row {
 display: grid;
 grid-template-columns: var(--metric-label) minmax(120px, 1fr) var(--metric-value);
 gap: var(--space-3);
 align-items: center;
}
.metric-row > :first-child {
 min-width: 0;
}
.metric-row > :last-child {
 justify-self: end;
 font-family: var(--font-mono);
 font-size: var(--text-sm);
}
.meter {
 height: 9px;
 overflow: hidden;
 border-radius: var(--radius-pill);
 background: var(--surface-tint);
}
.meter span {
 display: block;
 width: var(--value);
 height: 100%;
 background: var(--tone, var(--accent));
}
.flow-list {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 gap: var(--space-3);
}
.flow-step {
 position: relative;
 display: grid;
 grid-template-columns: 42px minmax(0, 1fr);
 gap: var(--space-3);
 align-items: start;
 padding: var(--space-4);
 background: var(--surface);
 border: var(--border);
 border-radius: var(--radius-md);
}
.flow-step > .flow-num {
 grid-column: 1;
}
.flow-step > :not(.flow-num) {
 grid-column: 2;
 min-width: 0;
}
.flow-step::after {
 content: "";
 position: absolute;
 inset-block-start: calc(100% + 1px);
 inset-inline-start: 36px;
 width: 1.5px;
 height: var(--space-3);
 background: var(--border-color);
}
.flow-step:last-child::after {
 display: none;
}
.flow-num {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 34px;
 height: 34px;
 border-radius: var(--radius-pill);
 color: var(--text);
 background: var(--surface-warm);
 box-shadow: inset 0 0 0 1px rgba(20, 20, 19, 0.10);
 font-family: var(--font-mono);
 font-size: var(--text-sm);
 font-weight: 700;
}
.flow-title {
 margin: 0 0 var(--space-1);
 font-family: var(--font-serif);
 font-size: var(--text-xl);
 font-weight: 550;
 line-height: var(--leading-title);
}
.flow-detail {
 margin: 0;
 color: var(--text-soft);
}
.flow-branch {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: var(--space-3);
}
.flow-branch .flow-step::after {
 display: none;
}
.flow-step[data-tone="success"] {
 border-color: rgba(120, 140, 93, 0.38);
 background: rgba(120, 140, 93, 0.08);
}
.flow-step[data-tone="warning"] {
 border-color: rgba(199, 142, 63, 0.42);
 background: rgba(199, 142, 63, 0.09);
}
@media (max-width: 620px) {
 .metric-row {
 grid-template-columns: 1fr max-content;
 }
 .metric-row .meter {
 grid-column: 1 / -1;
 order: 3;
 }
 .flow-branch {
 grid-template-columns: 1fr;
 }
}
/* ---------- Charts and numeric data ---------- */
.chart-panel {
 max-width: 100%;
 min-width: 0;
 overflow: hidden;
}
.chart-panel > * {
 min-width: 0;
}
.chart-panel svg,
svg.chart-svg {
 display: block;
 width: 100%;
 height: auto;
}
.chart-caption {
 color: var(--text-muted);
 font-size: var(--text-sm);
}
.numeric-table-wrap {
 overflow-x: auto;
 background: var(--surface);
 border: var(--border);
 border-radius: var(--radius-md);
}
.numeric-table {
 width: 100%;
 min-width: 720px;
 border-collapse: collapse;
}
.numeric-table th,
.numeric-table td {
 padding: var(--space-3) var(--space-4);
 border-bottom: 1px solid var(--color-gray-200);
 vertical-align: middle;
}
.numeric-table th {
 color: var(--text-muted);
 background: var(--surface-tint);
 font-family: var(--font-mono);
 font-size: var(--text-xs);
 font-weight: 700;
 letter-spacing: 0.08em;
 text-align: left;
 text-transform: uppercase;
}
.numeric-table tr:last-child td {
 border-bottom: 0;
}
.numeric-table .metric,
.numeric-table .num {
 text-align: right;
 font-variant-numeric: tabular-nums;
 white-space: nowrap;
}
.numeric-table .entity,
.numeric-table .label-cell {
 font-weight: 650;
}
.numeric-table .note {
 color: var(--text-soft);
}
.numeric-table code {
 white-space: normal;
 overflow-wrap: anywhere;
 word-break: break-word;
}
.numeric-table .subtle {
 display: block;
 margin-top: 2px;
 color: var(--text-muted);
 font-family: var(--font-mono);
 font-size: var(--text-xs);
 font-weight: 400;
}
@media (max-width: 620px) {
 .numeric-table {
 min-width: 0;
 }
 .numeric-table thead {
 display: none;
 }
 .numeric-table tbody,
 .numeric-table tr,
 .numeric-table td {
 display: block;
 }
 .numeric-table tr {
 padding: var(--space-3) var(--space-4);
 border-bottom: 1px solid var(--color-gray-200);
 }
 .numeric-table tr:last-child {
 border-bottom: 0;
 }
 .numeric-table td {
 padding: var(--space-1) 0;
 border-bottom: 0;
 }
 .numeric-table td[data-label] {
 display: flex;
 justify-content: space-between;
 gap: var(--space-4);
 }
 .numeric-table td[data-label]::before {
 content: attr(data-label);
 color: var(--text-muted);
 font-family: var(--font-mono);
 font-size: var(--text-xs);
 text-transform: uppercase;
 }
}
/* ---------- Diff ---------- */
.diff {
 overflow-x: auto;
 color: #E8E6DC;
 background: var(--color-slate);
 border-radius: var(--radius-md);
 font-family: var(--font-mono);
 font-size: 12.5px;
 line-height: var(--leading-loose);
}
.diff-row {
 display: grid;
 grid-template-columns: 48px 18px minmax(max-content, 1fr);
 align-items: baseline;
 min-width: max-content;
 padding-inline-end: var(--space-4);
 white-space: pre;
}
.diff-row .ln {
 padding-inline-end: 14px;
 color: var(--color-gray-500);
 text-align: right;
 user-select: none;
}
.diff-row .mark {
 color: var(--color-gray-500);
 text-align: center;
}
.diff-row .code {
 color: #E8E6DC;
}
.diff-row.ctx .code,
.diff-row[data-kind="ctx"] .code {
 color: #B8B6AC;
}
.diff-row.add,
.diff-row[data-kind="add"] {
 background: rgba(120, 140, 93, 0.24);
 box-shadow: inset 3px 0 0 rgba(120, 140, 93, 0.78);
}
.diff-row.add .mark,
.diff-row[data-kind="add"] .mark {
 color: #B9D394;
 font-weight: 800;
}
.diff-row.del,
.diff-row[data-kind="del"] {
 background: rgba(176, 74, 63, 0.24);
 box-shadow: inset 3px 0 0 rgba(176, 74, 63, 0.82);
}
.diff-row.del .mark,
.diff-row[data-kind="del"] .mark {
 color: #F19A8D;
 font-weight: 800;
}
.diff-row.hunk,
.diff-row[data-kind="hunk"] {
 background: rgba(255, 255, 255, 0.045);
}
.diff-row.hunk .code,
.diff-row[data-kind="hunk"] .code {
 color: var(--color-gray-500);
}
.diff[data-wrap="true"] {
 overflow-x: hidden;
}
.diff[data-wrap="true"] .diff-row {
 grid-template-columns: 42px 18px minmax(0, 1fr);
 min-width: 0;
 white-space: normal;
}
.diff[data-wrap="true"] .code {
 white-space: pre-wrap;
 overflow-wrap: anywhere;
}
/* ---------- Timeline ---------- */
.timeline {
 position: relative;
 display: grid;
 gap: 0;
 padding-inline-start: var(--space-6);
}
.timeline:is(ol, ul) {
 margin: 0;
 list-style: none;
}
.timeline::before {
 content: "";
 position: absolute;
 inset-block: 4px 4px;
 inset-inline-start: 9px;
 width: 1.5px;
 background: var(--border-color);
}
.timeline-item,
.tl-entry {
 position: relative;
 display: grid;
 grid-template-columns: minmax(84px, max-content) minmax(0, 1fr);
 gap: var(--space-4);
 padding-block: 0 var(--space-5);
}
.timeline-item:last-child,
.tl-entry:last-child {
 padding-block-end: 0;
}
.timeline-item::before,
.tl-entry::before {
 content: "";
 position: absolute;
 inset-block-start: 4px;
 inset-inline-start: calc(4.25px - var(--space-6));
 width: 11px;
 height: 11px;
 border: 2px solid var(--surface);
 border-radius: 50%;
 background: var(--accent);
 box-shadow: 0 0 0 1.5px var(--accent);
}
.timeline-item:not(:has(> .timeline-time, > .tl-time)),
.tl-entry:not(:has(> .timeline-time, > .tl-time)) {
 display: block;
}
.timeline-time,
.tl-time {
 color: var(--text-muted);
 font-family: var(--font-mono);
 font-size: var(--text-sm);
 white-space: nowrap;
}
.timeline-body,
.tl-body {
 min-width: 0;
 color: var(--text-soft);
}
.timeline-body strong,
.tl-body strong {
 color: var(--text);
}
@media (max-width: 620px) {
 .timeline-item,
 .tl-entry {
 grid-template-columns: 1fr;
 gap: var(--space-1);
 }
}
/* ---------- Flowchart ---------- */
.flowchart {
 display: block;
 width: 100%;
 height: auto;
}
svg.flow,
svg.flowchart {
 display: block;
 width: 100%;
 height: auto;
}
.flow text,
.flowchart text {
 fill: var(--text);
 font-family: var(--font-sans);
 font-size: 12px;
}
.flow .sub,
.flowchart .sub {
 fill: var(--text-muted);
 font-size: 10px;
}
.flow-edge,
.edge {
 fill: none;
 stroke: var(--text-muted);
 stroke-width: 1.5;
}
.flow-edge[data-kind="yes"],
.edge.yes {
 stroke: var(--success);
}
.flow-edge[data-kind="no"],
.edge.no {
 stroke: var(--danger);
 stroke-dasharray: 4 4;
}
/* SVG flow nodes */
.flow-node,
.flow .node {
 cursor: pointer;
 transition: transform var(--dur-fast) var(--ease);
}
.flow-node:hover,
.flow .node:hover {
 transform: translateY(-1px);
}
.flow-node rect,
.flow .node rect {
 fill: var(--surface);
 stroke: var(--border-color);
 stroke-width: 1.5;
 rx: 8;
}
.flow-node path,
.flow .node.gate path {
 fill: var(--surface);
 stroke: var(--border-color);
 stroke-width: 1.5;
}
.flow-node[data-shape="term"] rect,
.flow .node.term rect {
 fill: var(--surface-tint);
 rx: 22;
}
.flow-node[data-kind="ok"] rect,
.flow .node.ok rect {
 fill: rgba(120, 140, 93, 0.12);
 stroke: var(--success);
}
.flow-node[data-kind="bad"] rect,
.flow .node.bad rect {
 fill: rgba(176, 74, 63, 0.10);
 stroke: var(--danger);
}
.flow-node.active rect,
.flow-node.active path,
.flow .node.active rect,
.flow .node.active path {
 stroke: var(--accent);
 stroke-width: 2;
}
/* HTML flow nodes, for non-SVG diagrams */
div.flow-node {
 padding: var(--space-3) var(--space-4);
 background: var(--surface);
 border: var(--border);
 border-radius: var(--radius-sm);
 transition:
 transform var(--dur-fast) var(--ease),
 border-color var(--dur-fast) var(--ease),
 box-shadow var(--dur-fast) var(--ease);
}
div.flow-node:hover {
 transform: translateY(var(--hover-y));
 border-color: rgba(217, 119, 87, 0.55);
 box-shadow: var(--shadow-sm);
}
div.flow-node[data-shape="term"] {
 border-radius: var(--radius-pill);
 background: var(--surface-tint);
}
div.flow-node[data-kind="ok"] {
 border-color: var(--success);
 background: rgba(120, 140, 93, 0.12);
}
div.flow-node[data-kind="bad"] {
 border-color: var(--danger);
 background: rgba(176, 74, 63, 0.10);
}
@media (prefers-reduced-motion: reduce) {
 *,
 *::before,
 *::after {
 scroll-behavior: auto !important;
 transition-duration: 0.01ms !important;
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 }
}
/* Responsive safety net for generated artifacts. */
p,
li {
 overflow-wrap: anywhere;
}
@media (max-width: 860px) {
 .split,
 .section-rail,
 .sidebar-layout {
 grid-template-columns: minmax(0, 1fr) !important;
 }
 .split > *,
 .section-rail > *,
 .sidebar-layout > *,
 .chart-panel {
 width: 100%;
 max-width: 100%;
 min-width: 0;
 }
}</style>
 <style>
 .finding code, .plain-list code { overflow-wrap: anywhere; word-break: break-word; }
 .numeric-table code, .numeric-table .note { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
 </style>
</head>
<body>
 <main class="page stack" data-gap="lg">
<header class="stack" data-gap="sm">
 <div class="eyebrow">Code review · merge decision</div>
 <h1>Candle chart brief and checker upgrades — request changes</h1>
 <p class="lede">The patch lands a new chart-brief generator, a tiny eval runner, and substantial additions to the rendering checker. Three findings are blocking merge: the eval runner compares the artifact against itself, the new <code>MetricRowParser</code> only fires on <code>&lt;/div&gt;</code>, and a single-week dataset crashes the generator. Source: <code>evals/code-review/source.diff</code>.</p>
 <div class="cluster">
 <span class="chip" data-tone="danger">2 high</span>
 <span class="chip" data-tone="warning">2 medium</span>
 <span class="chip">3 low</span>
 <span class="chip">3 files touched</span>
 </div>
 </header>
<section class="section stack" data-gap="md">
 <div class="section-head">
 <div>
 <span class="eyebrow">Verdict</span>
 <h2>Request changes before merge</h2>
 </div>
 <span class="badge" data-tone="danger">blocking findings present</span>
 </div>
 <div class="callout" data-tone="danger">
 <p><strong>Do not merge as-is.</strong> The eval runner&rsquo;s self-pair makes the screenshot-diff path unable to detect regressions (its stated purpose), and the new metric-row contract check silently passes any non-<code>&lt;div&gt;</code> wrapper. Both should be fixed in this PR; the medium and low items can ship as follow-ups if not addressed.</p>
 </div>
 </section>
<section class="section stack" data-gap="lg">
 <div class="section-head">
 <div>
 <span class="eyebrow">Findings</span>
 <h2>High-risk findings first</h2>
 </div>
 </div>
<article class="card stack finding" data-severity="high">
 <div class="cluster">
 <span class="badge" data-tone="danger">H1 · high</span>
 <span class="chip">correctness</span>
 <span class="chip">test/eval</span>
 </div>
 <h3>Eval runner compares the artifact against itself</h3>
 <p class="caption"><code>evals/charts/run_eval.py</code> · <code>main()</code> · lines 30–47 of new file</p>
 <p><strong>Evidence.</strong> Every <code>--pair</code> argument is built as <code>"24-candle-chart-brief.html:24-candle-chart-brief.html"</code>. <code>check_candle_renderings.compare_pair</code> treats the left side as the source baseline and the right side as the candidate; passing the same path on both sides drives <code>mean_abs_rgb_delta</code> to <code>0</code>, makes the amplified-diff PNG empty, and short-circuits every comparison-based check.</p>
 <div class="diff" data-wrap="true">
 <div class="diff-row add"><span class="ln">36</span><span class="mark">+</span><span class="code">"--pair",</span></div>
 <div class="diff-row add"><span class="ln">37</span><span class="mark">+</span><span class="code">"24-candle-chart-brief.html:24-candle-chart-brief.html",</span></div>
 </div>
 <p><strong>Impact.</strong> The eval is described as &ldquo;exercises the Matplotlib SVG path and the Candle rendering checker at desktop and mobile viewports&rdquo;. With identity pairs it only exercises the static-contract half of the checker; the screenshot-diff, palette-drift, and blackish-fraction warnings can never fire, so visual regressions land silently. Two of the four configured viewports are 390&times; mobile, which is precisely where the diff was most likely to catch new overflow.</p>
 <p><strong>Recommended fix.</strong> Check a known-good baseline render of <code>24-candle-chart-brief.html</code> into <code>evals/charts/baselines/</code> (or a fixture dir) and pair against that; alternatively, accept <code>--baseline</code> in <code>run_eval.py</code> and default to the latest committed PNG/HTML snapshot.</p>
 </article>
<article class="card stack finding" data-severity="high">
 <div class="cluster">
 <span class="badge" data-tone="danger">H2 · high</span>
 <span class="chip">silent failure</span>
 <span class="chip">parser</span>
 </div>
 <h3><code>MetricRowParser</code> only validates <code>&lt;div class="metric-row"&gt;</code></h3>
 <p class="caption"><code>scripts/check_candle_renderings.py</code> · <code>MetricRowParser.handle_endtag</code></p>
 <p><strong>Evidence.</strong> The parser flips <code>in_metric_row=True</code> on any start tag with class <code>metric-row</code>, but the validation hook is gated on the closing tag being a <code>&lt;/div&gt;</code>:</p>
 <div class="diff" data-wrap="true">
 <div class="diff-row add"><span class="ln">+</span><span class="mark">+</span><span class="code">if tag.lower() == "div" and self.depth == 0:</span></div>
 <div class="diff-row add"><span class="ln">+</span><span class="mark">+</span><span class="code"> tags = [tag for tag, _classes in self.children]</span></div>
 <div class="diff-row add"><span class="ln">+</span><span class="mark">+</span><span class="code"> ...validate three-child contract...</span></div>
 </div>
 <p><strong>Impact.</strong> Any author writing <code>&lt;section class="metric-row"&gt;</code>, <code>&lt;li class="metric-row"&gt;</code>, or even a <code>&lt;span&gt;</code>-based row keeps <code>in_metric_row</code> latched after the first row ends, then validation never runs, and the parser&rsquo;s <code>children</code> list accumulates across rows &mdash; producing both false-negatives <em>and</em> spurious failures on later rows. The sibling parsers (<code>GridListParser</code>, <code>TimelineParser</code>) correctly track the tag they opened on.</p>
 <p><strong>Recommended fix.</strong> Record the opening tag name when entering a metric-row and trigger validation when the closing tag matches and depth is zero. Reset <code>children</code> / <code>preview</code> in the same branch.</p>
 </article>
<article class="card stack finding" data-severity="medium">
 <div class="cluster">
 <span class="badge" data-tone="warning">M1 · medium</span>
 <span class="chip">crash</span>
 <span class="chip">brief generator</span>
 </div>
 <h3><code>previous_latest</code> raises <code>IndexError</code> on a single-week dataset</h3>
 <p class="caption"><code>evals/charts/build_chart_brief.py</code> · <code>previous_latest()</code></p>
 <p><strong>Evidence.</strong> <code>weeks[-2], weeks[-1]</code> is read without a length guard; <code>previous_latest</code> is then called unconditionally from <code>main()</code> and the result is interpolated into the KPI card (<em>&ldquo;Down from {prev_overflow} in the previous weekly sample.&rdquo;</em>).</p>
 <div class="diff" data-wrap="true">
 <div class="diff-row add"><span class="ln">+</span><span class="mark">+</span><span class="code">weeks = sorted({str(row["week"]) for row in rows})</span></div>
 <div class="diff-row add"><span class="ln">+</span><span class="mark">+</span><span class="code">prev, latest = weeks[-2], weeks[-1]</span></div>
 </div>
 <p><strong>Impact.</strong> Today&rsquo;s <code>sample-data.csv</code> ships five weeks &times; three artifacts (16 rows incl. header), so the crash is latent. The first time the fixture is trimmed, reset for a fresh experiment, or filtered to a single week, the entire eval pipeline aborts before any HTML or rendering report is produced. The runner has <code>check=True</code>, so subsequent viewports also stop.</p>
 <p><strong>Recommended fix.</strong> Guard with <code>if len(weeks) &lt; 2: return ([], latest_rows)</code> and render the &ldquo;Down from N&rdquo; copy conditionally, or compute the delta against a configurable baseline week.</p>
 </article>
<article class="card stack finding" data-severity="medium">
 <div class="cluster">
 <span class="badge" data-tone="warning">M2 · medium</span>
 <span class="chip">repo hygiene</span>
 </div>
 <h3>Chart brief writes to repo root with a hard-coded eval prefix</h3>
 <p class="caption"><code>evals/charts/build_chart_brief.py</code> · module-level <code>OUT</code></p>
 <div class="diff" data-wrap="true">
 <div class="diff-row add"><span class="ln">+</span><span class="mark">+</span><span class="code">OUT = ROOT / "24-candle-chart-brief.html"</span></div>
 </div>
 <p><strong>Impact.</strong> Every eval run drops a top-level <code>24-candle-chart-brief.html</code> beside the project README, mixed in with source. The leading <code>24-</code> looks like an external numbering scheme (eval index) that isn&rsquo;t documented anywhere in the patch, and other generated outputs (<code>reports/...</code>) live under sensible subdirectories. The same hard-coded path is also embedded in <code>run_eval.py</code>&rsquo;s <code>--pair</code>, so the two files must change together.</p>
 <p><strong>Recommended fix.</strong> Move output under <code>reports/</code> or <code>evals/charts/out/</code>, drop the bare numeric prefix, and pass the path explicitly from <code>run_eval.py</code> so the two stay in sync.</p>
 </article>
<article class="card stack finding" data-severity="low">
 <div class="cluster">
 <span class="badge" data-tone="info">L1 · low</span>
 <span class="chip">dead code</span>
 </div>
 <h3>Pillow <code>get_flattened_data()</code> branch never runs</h3>
 <p class="caption"><code>scripts/check_candle_renderings.py</code> · <code>palette_metrics()</code> (context block in diff, lines ~767&ndash;790)</p>
 <p><strong>Evidence.</strong> <code>resized.get_flattened_data() if hasattr(resized, "get_flattened_data") else resized.getdata()</code>. <code>PIL.Image.Image</code> exposes <code>getdata()</code>, <code>tobytes()</code>, <code>load()</code>; there is no <code>get_flattened_data</code> on any Pillow image class.</p>
 <p><strong>Impact.</strong> Cosmetic &mdash; the <code>else</code> branch always wins. Worth pruning to avoid future readers chasing a phantom Pillow API.</p>
 <p><strong>Recommended fix.</strong> Replace with a direct call to <code>resized.getdata()</code> (or <code>np.asarray(resized).reshape(-1, 3)</code> if speed becomes a concern).</p>
 </article>
<article class="card stack finding" data-severity="low">
 <div class="cluster">
 <span class="badge" data-tone="info">L2 · low</span>
 <span class="chip">portability</span>
 </div>
 <h3>Generated HTML hard-links a relative stylesheet</h3>
 <p class="caption"><code>evals/charts/build_chart_brief.py</code> · template string in <code>main()</code></p>
 <div class="diff" data-wrap="true">
 <div class="diff-row add"><span class="ln">+</span><span class="mark">+</span><span class="code">&lt;link rel="stylesheet" href="styles/candle-system.css"&gt;</span></div>
 </div>
 <p><strong>Impact.</strong> The artifact only renders correctly when opened from the repo root (or through the checker&rsquo;s injected <code>&lt;base&gt;</code>). Anyone double-clicking the file from <code>reports/</code> or sharing it standalone gets unstyled output. The checker was patched in the same diff to insert the <code>&lt;base&gt;</code> <em>before</em> the link &mdash; useful, but it does not help downstream consumers.</p>
 <p><strong>Recommended fix.</strong> Either inline the canonical Candle CSS into the artifact (mirroring the Birch placeholder pattern) or emit the file next to the stylesheet.</p>
 </article>
<article class="card stack finding" data-severity="low">
 <div class="cluster">
 <span class="badge" data-tone="info">L3 · low</span>
 <span class="chip">licence</span>
 </div>
 <h3>SPDX header is in the generated HTML but missing from the new Python sources</h3>
 <p class="caption"><code>evals/charts/build_chart_brief.py</code>, <code>evals/charts/run_eval.py</code></p>
 <p><strong>Evidence.</strong> The HTML template starts with <code>&lt;!-- Copyright 2026 Anthropic PBC &middot; SPDX-License-Identifier: Apache-2.0 --&gt;</code>; neither <code>.py</code> file carries the same header that other repository scripts conventionally include.</p>
 <p><strong>Recommended fix.</strong> Add an SPDX/copyright line to both new files to match repo norms.</p>
 </article>
 </section>
<section class="section stack" data-gap="lg">
 <div class="section-head">
 <div>
 <span class="eyebrow">Notable positives</span>
 <h2>What the patch gets right</h2>
 </div>
 </div>
 <ul class="plain-list">
 <li>The <code>&lt;base&gt;</code> placement bug is fixed correctly: a <code>re.sub</code> now inserts the base immediately after <code>&lt;head&gt;</code>, ahead of the relative stylesheet links. The in-source comment explains the prior symptom.</li>
 <li><code>geometry_audit</code> upgrades meaningfully: page-level horizontal overflow (<code>pageOverflowX</code>), timeline marker geometry, split-rail heading alignment, and numeric-table header alignment are all new and grounded in real Candle failure modes.</li>
 <li><code>contract_findings</code> escalates the right things to <code>fail</code> (grid-list children, metric-row contract, timeline-item contract, numeric-rich-but-chartless reports) instead of warn-only.</li>
 <li>The chart brief uses exact CSV values for KPIs, table, and the ranking meter &mdash; satisfying the &ldquo;evidence first&rdquo; norm in the chart-brief recipe.</li>
 </ul>
 </section>
<section class="section stack" data-gap="lg">
 <div class="section-head">
 <div>
 <span class="eyebrow">Reference</span>
 <h2>Touched files at a glance</h2>
 </div>
 </div>
 <div class="numeric-table-wrap">
 <table class="numeric-table">
 <thead>
 <tr>
 <th>Path</th>
 <th class="metric">Change</th>
 <th class="metric">Lines</th>
 <th>Notes</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td><code>evals/charts/build_chart_brief.py</code></td>
 <td class="metric">new</td>
 <td class="metric">+267</td>
 <td class="note">M1, M2, L2, L3</td>
 </tr>
 <tr>
 <td><code>evals/charts/run_eval.py</code></td>
 <td class="metric">new</td>
 <td class="metric">+55</td>
 <td class="note">H1, L3</td>
 </tr>
 <tr>
 <td><code>scripts/check_candle_renderings.py</code></td>
 <td class="metric">edit</td>
 <td class="metric">~+220</td>
 <td class="note">H2, L1; otherwise solid upgrade</td>
 </tr>
 </tbody>
 </table>
 </div>
 </section>
<section class="section-rail">
 <div class="stack" data-gap="lg">
 <div class="section-head">
 <div>
 <span class="eyebrow">Reviewer checklist</span>
 <h2>Before approving</h2>
 </div>
 </div>
 <ul class="checklist">
 <li>H1 fixed: <code>run_eval.py</code> pairs against a real baseline, not the candidate.</li>
 <li>H2 fixed: <code>MetricRowParser</code> tracks the opening tag and validates on that tag.</li>
 <li>M1 fixed: single-week input no longer crashes the chart brief.</li>
 <li>M2 fixed: artifact path lives under a results directory, not repo root.</li>
 <li>Run <code>uv run evals/charts/run_eval.py</code> end-to-end and confirm all four viewport reports are produced and contain non-zero RGB deltas (after baseline is supplied).</li>
 <li>Confirm <code>check_candle_renderings.py</code> still passes its own static-contract checks on the regenerated brief.</li>
 <li>Spot-check the brief at 390&times;900 mobile-deep for the <code>layout_overflow</code>, <code>numeric_header_alignment</code>, and <code>metric_alignment</code> findings introduced by the new audit.</li>
 </ul>
 </div>
<aside class="reference-panel stack" data-gap="md">
 <h3>Residual risk &amp; assumptions</h3>
 <ul class="plain-list">
 <li><code>scripts/candle_mpl.py</code> and <code>styles/candle-system.css</code> are <em>not</em> in the patch; <code>candle_theme</code>, <code>polish_axes</code>, and <code>svg_string</code> signatures are assumed to exist and behave as in prior commits. Not verified.</li>
 <li>The pre-edit version of <code>check_candle_renderings.py</code> is visible only through diff context, so the surrounding helpers (<code>compare_pair</code>, <code>SYSTEM_CSS</code>, <code>DEFAULT_PAIRS</code>) could not be re-read in this review.</li>
 <li>The new geometry audit relies on Chromium&rsquo;s <code>--virtual-time-budget=800</code> being long enough for Matplotlib SVG layout; not exercised here.</li>
 <li>No automated tests accompany the contract parsers; reviewer should manually craft a non-<code>div</code> <code>metric-row</code> page to confirm H2 reproduces.</li>
 </ul>
 <h3>Sources</h3>
 <ul class="plain-list">
 <li><code>evals/code-review/source.diff</code> (single commit <code>5703e01</code>)</li>
 <li><code>evals/code-review/rubric.md</code></li>
 <li><code>evals/charts/sample-data.csv</code> (5 weeks &times; 3 artifacts)</li>
 </ul>
 </aside>
 </section>
</main>
</body>
</html>

Xet Storage Details

Size:
50.2 kB
·
Xet hash:
355b78a308d7aa3c23cea495f33e9ba2c06ff4c2cbb289b3d4cec083a2bc8d1f

Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.