@inflexa-ai/harness 0.19.1 → 0.19.2

package/dist/report-render/render.js

@@ -16,10 +16,10 @@
 import { err, ok } from "neverthrow";
 import { renderChart } from "./views/chart-view.js";
 import { deriveChartOption } from "./chart.js";
-import { assemblePage, renderReferenceSection } from "./views/page-view.js";
+import { assemblePage, renderBand, renderReferenceSection } from "./views/page-view.js";
 import { renderClaim, renderNav, renderSection, renderText } from "./views/prose.js";
 import { ReferenceLedger } from "./references.js";
-import { renderCitation, renderFigure, renderMetric, renderTable } from "./views/values.js";
+import { renderCitation, renderFigure, renderMetric, renderMetricGrid, renderTable } from "./views/values.js";
 /**
  * Render a report document and its value map to one HTML string.
  *
@@ -30,14 +30,14 @@ export function renderReportPage(document, values) {
     const problems = [];
     const ledger = new ReferenceLedger();
     const content = [];
-    for (const section of document.sections) {
-        content.push(renderBlock(section, values, ledger, 0, problems));
+    for (const [index, section] of document.sections.entries()) {
+        content.push(renderBand(index, renderBlock(section, values, ledger, 0, problems)));
     }
     if (problems.length > 0) {
         return err(problems);
     }
     const nav = renderNav(document.sections);
-    const references = renderReferenceSection(ledger);
+    const references = renderReferenceSection(ledger, document.sections.length);
     return ok(assemblePage(document.title, nav, content.join(""), references));
 }
 /**
@@ -106,14 +106,37 @@ function renderBlock(block, values, ledger, depth, problems) {
             }
             return renderChart(block, option.value);
         }
-        case "section": {
-            const parts = [];
-            for (const child of block.blocks) {
-                parts.push(renderBlock(child, values, ledger, depth + 1, problems));
-            }
-            return renderSection(block, depth, parts.join(""));
+        case "section":
+            return renderSection(block, depth, renderChildren(block.blocks, values, ledger, depth + 1, problems));
+    }
+}
+/**
+ * Render the children of one section, and group a consecutive run of metric siblings into one grid.
+ *
+ * A run of two or more metric blocks reads as one row of statistics, thus the grid holds the whole run. A
+ * lone metric stays one card, and no grid wraps it. A block of a different kind ends the run.
+ */
+function renderChildren(blocks, values, ledger, depth, problems) {
+    const parts = [];
+    let index = 0;
+    while (index < blocks.length) {
+        const run = metricRunLength(blocks, index);
+        const rendered = [];
+        for (let offset = 0; offset < Math.max(run, 1); offset += 1) {
+            rendered.push(renderBlock(blocks[index + offset], values, ledger, depth, problems));
         }
+        parts.push(run > 1 ? renderMetricGrid(rendered.join("")) : rendered.join(""));
+        index += Math.max(run, 1);
+    }
+    return parts.join("");
+}
+/** The count of the metric blocks that start at `start`. A block of a different kind gives zero. */
+function metricRunLength(blocks, start) {
+    let length = 0;
+    while (start + length < blocks.length && blocks[start + length].kind === "metric") {
+        length += 1;
     }
+    return length;
 }
 /** A `missing-value` problem that names the block and the shape that it needs. */
 function missingValue(blockId, expected) {

package/dist/report-render/views/chart-view.d.ts

@@ -1,11 +1,14 @@
 /**
- * The chart container markup.
+ * The chart panel markup.
  *
  * The bootstrap in `page.ts` reads the option from the next element sibling of the container. Thus the
  * `<script type="application/json">` element MUST follow the container div with no element between them.
- * The title renders above the container, and the caption renders below.
+ *
+ * The panel is the window-chrome form: the three dots on the left, the title in the center, and the
+ * `CORTEX` badge on the right. It is the one component with rounded corners. The chart body carries a fixed
+ * height, because the chart runtime measures the container and a container with no height shows no chart.
  */
 import type { ChartBlock } from "../../contracts/report-blocks.js";
 import type { EchartOption } from "../chart.js";
-/** Render the container markup for a chart. */
+/** Render the panel markup for a chart. */
 export declare function renderChart(block: ChartBlock, option: EchartOption): string;

package/dist/report-render/views/chart-view.js

@@ -1,21 +1,26 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
 /**
- * The chart container markup.
+ * The chart panel markup.
  *
  * The bootstrap in `page.ts` reads the option from the next element sibling of the container. Thus the
  * `<script type="application/json">` element MUST follow the container div with no element between them.
- * The title renders above the container, and the caption renders below.
+ *
+ * The panel is the window-chrome form: the three dots on the left, the title in the center, and the
+ * `CORTEX` badge on the right. It is the one component with rounded corners. The chart body carries a fixed
+ * height, because the chart runtime measures the container and a container with no height shows no chart.
  */
 import { raw } from "hono/html";
 import { scriptJson } from "../script-json.js";
-/** Render the container markup for a chart. */
+/** The product badge of a chart panel. */
+const PANEL_BADGE = "CORTEX";
+/** Render the panel markup for a chart. */
 export function renderChart(block, option) {
     const containerId = chartContainerId(block.id);
     // The JSON goes to the page through `raw()`, thus `scriptJson` is the sole guard of this sink. It
     // replaces every `<` with `\u003c`, thus a `</script` sequence in a string cell cannot close the
     // element early. The JSON parser reads `\u003c` as `<`, thus the option value stays exact.
     const json = scriptJson(option);
-    return String(_jsxs(_Fragment, { children: [block.title !== undefined ? _jsx("p", { class: "chart-title", children: block.title }) : null, _jsx("div", { id: containerId, "data-echarts-id": block.id, class: "chart-container" }), _jsx("script", { type: "application/json", children: raw(json) }), block.caption !== undefined ? _jsx("p", { class: "chart-caption", children: block.caption }) : null] }));
+    return String(_jsxs("div", { class: "report-chart", children: [_jsxs("div", { class: "window-chrome", children: [_jsxs("div", { class: "window-chrome-bar", children: [_jsxs("div", { class: "chrome-dots", children: [_jsx("span", { class: "chrome-dot dot-1" }), _jsx("span", { class: "chrome-dot dot-2" }), _jsx("span", { class: "chrome-dot dot-3" })] }), block.title !== undefined ? _jsx("span", { class: "window-chrome-title", children: block.title }) : null, _jsx("span", { class: "window-chrome-badge", children: PANEL_BADGE })] }), _jsxs("div", { class: "window-chrome-body", children: [_jsx("div", { id: containerId, "data-echarts-id": block.id, class: "chart-container" }), _jsx("script", { type: "application/json", children: raw(json) })] })] }), block.caption !== undefined ? _jsx("p", { class: "report-caption", children: block.caption }) : null] }));
 }
 /** The container id derives from the block id, thus the id stays stable across renders. */
 function chartContainerId(blockId) {

package/dist/report-render/views/page-view.d.ts

@@ -1,17 +1,28 @@
 /**
- * The page assembly.
+ * The page assembly: the hero, the bands, the reference band, and the footer.
  *
- * The skeleton inlines the style rules in the head, and it puts the two scripts at the end of the body.
- * The theme registration runs before the chart bootstrap, thus each chart finds its theme. The
- * navigation, the main content, and the reference frame arrive as already-escaped markup strings, thus
- * `raw()` inserts them byte for byte.
+ * The skeleton inlines the style rules in the head, and it puts the three scripts at the end of the body.
+ * The order of the three scripts is a contract. The theme registration runs before the chart bootstrap,
+ * thus each chart finds its theme. The fade-in observer also runs before the chart bootstrap, thus the
+ * bootstrap finds the reveal gate and it signals readiness after the first reveal pass. The navigation, the
+ * main content, and the reference frame arrive as already-escaped markup strings, thus `raw()` inserts them
+ * byte for byte.
+ *
+ * One band holds one top-level section. The band index drives the alternation of the background and of the
+ * texture, thus a caller that adds a band passes the next index.
  */
 import type { ReferenceLedger } from "../references.js";
 /**
- * Wrap the reference list in one fixed frame. An empty ledger gives an empty string, thus the page shows
- * no empty reference frame.
+ * Wrap already-escaped markup in one full-bleed band. An even index gives the white background and the dot
+ * texture, and an odd index gives the slate background and the grid texture. The noise texture lies over
+ * both.
+ */
+export declare function renderBand(index: number, inner: string): string;
+/**
+ * Wrap the reference list in the final band. An empty ledger gives an empty string, thus the page shows no
+ * empty reference band. The index continues the band alternation of the sections.
  */
-export declare function renderReferenceSection(ledger: ReferenceLedger): string;
+export declare function renderReferenceSection(ledger: ReferenceLedger, index: number): string;
 /**
  * Assemble the page from the title, the navigation, the main content, and the reference frame. The title
  * passes through the runtime as text, and the runtime escapes it. The reference frame is optional, thus

package/dist/report-render/views/page-view.js

@@ -1,16 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
 /**
- * The page assembly.
+ * The page assembly: the hero, the bands, the reference band, and the footer.
  *
- * The skeleton inlines the style rules in the head, and it puts the two scripts at the end of the body.
- * The theme registration runs before the chart bootstrap, thus each chart finds its theme. The
- * navigation, the main content, and the reference frame arrive as already-escaped markup strings, thus
- * `raw()` inserts them byte for byte.
+ * The skeleton inlines the style rules in the head, and it puts the three scripts at the end of the body.
+ * The order of the three scripts is a contract. The theme registration runs before the chart bootstrap,
+ * thus each chart finds its theme. The fade-in observer also runs before the chart bootstrap, thus the
+ * bootstrap finds the reveal gate and it signals readiness after the first reveal pass. The navigation, the
+ * main content, and the reference frame arrive as already-escaped markup strings, thus `raw()` inserts them
+ * byte for byte.
+ *
+ * One band holds one top-level section. The band index drives the alternation of the background and of the
+ * texture, thus a caller that adds a band passes the next index.
  */
 import { raw } from "hono/html";
-import { CDN_HEAD, CHART_BOOTSTRAP, ECHARTS_THEME, ECHARTS_THEME_NAME, PAGE_CSS } from "../page.js";
+import { ASSET_HEAD, CHART_BOOTSTRAP, FADE_IN_OBSERVER } from "../page.js";
+import { DESIGN_CSS, ECHARTS_THEME, ECHARTS_THEME_NAME } from "../design.js";
 import { renderReferenceList } from "./references-view.js";
 import { scriptJson } from "../script-json.js";
+/** The constant eyebrow of the hero. The render reads no clock, thus the hero carries no date. */
+const HERO_EYEBROW = "INFLEXA · ANALYSIS REPORT";
+/** The constant note of the footer. */
+const FOOTER_NOTE = "Powered by Inflexa Cortex";
 /**
  * The theme object as script-safe JSON. `scriptJson` replaces every `<` with `\u003c`, thus a later edit
  * that adds a `<` to the theme stays safe inside the script sink. The JSON parser reads `\u003c` as `<`, thus
@@ -28,15 +38,25 @@ const THEME_REGISTRATION = `(function () {
   echarts.registerTheme(${JSON.stringify(ECHARTS_THEME_NAME)}, ${THEME_JSON});
 })();`;
 /**
- * Wrap the reference list in one fixed frame. An empty ledger gives an empty string, thus the page shows
- * no empty reference frame.
+ * Wrap already-escaped markup in one full-bleed band. An even index gives the white background and the dot
+ * texture, and an odd index gives the slate background and the grid texture. The noise texture lies over
+ * both.
+ */
+export function renderBand(index, inner) {
+    const surface = index % 2 === 0 ? "report-band-white texture-dots" : "report-band-slate texture-grid";
+    return String(_jsx("section", { class: `report-band ${surface} texture-noise`, children: _jsx("div", { class: "report-container fade-in", children: raw(inner) }) }));
+}
+/**
+ * Wrap the reference list in the final band. An empty ledger gives an empty string, thus the page shows no
+ * empty reference band. The index continues the band alternation of the sections.
  */
-export function renderReferenceSection(ledger) {
+export function renderReferenceSection(ledger, index) {
     const list = renderReferenceList(ledger);
     if (list === "") {
         return "";
     }
-    return String(_jsxs("section", { class: "report-references-section mt-16 pt-8 border-t border-slate-200", children: [_jsx("h2", { class: "text-xl font-semibold tracking-tight text-slate-900 mb-4", children: "References" }), raw(list)] }));
+    const heading = String(_jsx("h2", { class: "report-heading report-heading-2", children: "References" }));
+    return renderBand(index, heading + list);
 }
 /**
  * Assemble the page from the title, the navigation, the main content, and the reference frame. The title
@@ -45,5 +65,5 @@ export function renderReferenceSection(ledger) {
  */
 export function assemblePage(title, nav, content, references) {
     return ("<!doctype html>" +
-        String(_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx("meta", { charset: "utf-8" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }), _jsx("title", { children: title }), raw(CDN_HEAD), _jsx("style", { children: raw(PAGE_CSS) })] }), _jsxs("body", { children: [raw(nav), _jsxs("main", { class: "report-main mx-auto max-w-4xl px-6 py-10", children: [_jsx("h1", { class: "report-title text-4xl font-bold tracking-tight text-slate-900 mb-8", children: title }), raw(content), references.length > 0 ? raw(references) : null] }), _jsx("script", { children: raw(THEME_REGISTRATION) }), _jsx("script", { children: raw(CHART_BOOTSTRAP) })] })] })));
+        String(_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx("meta", { charset: "utf-8" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }), _jsx("title", { children: title }), raw(ASSET_HEAD), _jsx("style", { children: raw(DESIGN_CSS) })] }), _jsxs("body", { children: [raw(nav), _jsx("header", { class: "report-hero texture-noise", children: _jsxs("div", { class: "report-container", children: [_jsx("p", { class: "report-eyebrow", children: HERO_EYEBROW }), _jsx("h1", { class: "report-display", children: title })] }) }), _jsxs("main", { children: [raw(content), references.length > 0 ? raw(references) : null] }), _jsx("footer", { class: "report-footer", children: _jsxs("div", { class: "report-container report-footer-row", children: [_jsx("span", { class: "report-footer-title", children: title }), _jsx("span", { class: "report-footer-note", children: FOOTER_NOTE })] }) }), _jsx("script", { children: raw(THEME_REGISTRATION) }), _jsx("script", { children: raw(FADE_IN_OBSERVER) }), _jsx("script", { children: raw(CHART_BOOTSTRAP) })] })] })));
 }

package/dist/report-render/views/prose.d.ts

@@ -24,5 +24,6 @@ export declare function renderSection(section: SectionBlock, depth: number, chil
 /**
  * Render the fixed left navigation. Each anchor targets one top-level section by its block id, with a
  * numeric badge for its position. The brand row stays, and the mobile toggle and the icon slot drop out.
+ * The `report-sidebar` id is the hook of the layout shift on a large viewport.
  */
 export declare function renderNav(topSections: SectionBlock[]): string;

package/dist/report-render/views/prose.js

@@ -8,8 +8,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "hono/jsx/jsx-
  */
 import { raw } from "hono/html";
 import { Marker } from "./references-view.js";
-/** The paragraph class of a text block and a claim block. */
-const PARAGRAPH_CLASS = "report-paragraph mb-4 leading-relaxed text-slate-600";
+/** The paragraph class of a text block and a claim block. The measure caps the line inside the wide band. */
+const PARAGRAPH_CLASS = "report-prose";
 /**
  * Split prose into paragraphs on a blank line. A run of blank lines makes one split. An empty part drops
  * out, thus a leading or a trailing blank line adds no empty paragraph.
@@ -45,16 +45,9 @@ export function renderClaim(block, ledger) {
     const last = paragraphs.length - 1;
     return String(_jsx(_Fragment, { children: paragraphs.map((paragraph, index) => (_jsxs("p", { class: PARAGRAPH_CLASS, children: [paragraph, index === last ? markers : null] }))) }));
 }
-/** The heading class of a section, by heading level. */
+/** The heading class of a section, by heading level. A heading uses the sans family, never the mono family. */
 function headingClass(level) {
-    switch (level) {
-        case 2:
-            return "text-3xl font-semibold tracking-tight text-slate-900 mb-4";
-        case 3:
-            return "text-2xl font-semibold tracking-tight text-slate-900 mb-3";
-        default:
-            return "text-xl font-semibold tracking-tight text-slate-900 mb-2";
-    }
+    return `report-heading report-heading-${level}`;
 }
 /**
  * Render a section wrapper around its rendered children. The heading level is `h2` at depth 0, `h3` at
@@ -64,12 +57,13 @@ function headingClass(level) {
 export function renderSection(section, depth, childrenHtml) {
     const level = Math.min(depth + 2, 4);
     const Heading = `h${level}`;
-    return String(_jsxs("section", { id: section.id, class: "report-section mb-10", children: [_jsx(Heading, { class: headingClass(level), children: section.title }), raw(childrenHtml)] }));
+    return String(_jsxs("section", { id: section.id, class: "report-section", children: [_jsx(Heading, { class: headingClass(level), children: section.title }), raw(childrenHtml)] }));
 }
 /**
  * Render the fixed left navigation. Each anchor targets one top-level section by its block id, with a
  * numeric badge for its position. The brand row stays, and the mobile toggle and the icon slot drop out.
+ * The `report-sidebar` id is the hook of the layout shift on a large viewport.
  */
 export function renderNav(topSections) {
-    return String(_jsxs("aside", { id: "report-sidebar", class: "fixed top-0 left-0 z-40 h-screen w-60 flex flex-col border-r border-slate-200 bg-white/95 backdrop-blur", "aria-label": "Report navigation", children: [_jsx("div", { class: "flex items-center gap-2 px-5 py-5 border-b border-slate-200", children: _jsx("span", { class: "font-mono text-sm font-semibold tracking-wider text-primary-500", children: "inflexa" }) }), _jsx("nav", { class: "flex-1 overflow-y-auto py-3", "aria-label": "Report sections", children: topSections.map((section, index) => (_jsxs("a", { href: `#${section.id}`, "data-sidebar-link": "", class: "sidebar-link flex items-center gap-3 px-5 py-2 text-sm text-slate-500 hover:text-slate-900 hover:bg-slate-50 transition-colors", children: [_jsx("span", { class: "font-mono text-[10px] font-semibold tracking-wider text-slate-300 shrink-0 w-4 text-right", children: index + 1 }), _jsx("span", { class: "truncate", children: section.title })] }))) })] }));
+    return String(_jsxs("aside", { id: "report-sidebar", class: "report-nav", "aria-label": "Report navigation", children: [_jsx("div", { class: "report-nav-brand", children: _jsx("span", { class: "report-nav-brand-name", children: "inflexa" }) }), _jsx("nav", { class: "report-nav-list", "aria-label": "Report sections", children: topSections.map((section, index) => (_jsxs("a", { href: `#${section.id}`, class: "report-nav-link", children: [_jsx("span", { class: "report-nav-index", children: index + 1 }), _jsx("span", { class: "report-nav-label", children: section.title })] }))) })] }));
 }

package/dist/report-render/views/references-view.js

@@ -4,19 +4,19 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "hono/jsx/jsx-
  * an integer.
  */
 export function Marker({ n }) {
-    return (_jsx("sup", { class: "report-marker font-mono text-[10px] text-primary-500", children: _jsx("a", { href: `#ref-${n}`, children: n }) }));
+    return (_jsx("sup", { class: "report-marker", children: _jsx("a", { href: `#ref-${n}`, children: n }) }));
 }
 /** The kind label of one reference entry. */
 function RefKind({ children }) {
-    return _jsx("span", { class: "report-ref-kind font-mono text-[11px] uppercase tracking-wider text-slate-400", children: children });
+    return _jsx("span", { class: "report-ref-kind", children: children });
 }
 /** A path in a monospace code span. */
 function PathCode({ children }) {
-    return _jsx("code", { class: "font-mono text-primary-700", children: children });
+    return _jsx("code", { class: "report-ref-path", children: children });
 }
 /** A plain detail such as a locator or an external id. */
 function Detail({ children }) {
-    return _jsx("span", { class: "text-slate-500", children: children });
+    return _jsx("span", { class: "report-ref-detail", children: children });
 }
 /**
  * Describe a locator as plain text: the column and the one row selector. The refine of the schema admits
@@ -60,5 +60,5 @@ export function renderReferenceList(ledger) {
     if (entries.length === 0) {
         return "";
     }
-    return String(_jsx("ol", { class: "report-references list-decimal pl-6", children: entries.map((reference, index) => (_jsx("li", { id: `ref-${index + 1}`, class: "report-ref-item mb-2 text-sm text-slate-600", children: _jsx(ReferenceEntry, { reference: reference }) }))) }));
+    return String(_jsx("ol", { class: "report-references", children: entries.map((reference, index) => (_jsx("li", { id: `ref-${index + 1}`, class: "report-ref-item", children: _jsx(ReferenceEntry, { reference: reference }) }))) }));
 }

package/dist/report-render/views/values.d.ts

@@ -4,6 +4,9 @@
  * The caller resolves each value, and it narrows the value to the shape that the block needs. The runtime
  * escapes every interpolated string, thus a hostile label, a hostile cell, a hostile caption, or a
  * hostile source reaches the page as text.
+ *
+ * Each data card carries the `corner-accents` class. Thus the card keeps square corners with the L-shaped
+ * accents, which is the geometric identity of the report.
  */
 import type { CitationBlock, FigureBlock, MetricBlock, TableBlock } from "../../contracts/report-blocks.js";
 import type { ReferenceLedger } from "../references.js";
@@ -20,8 +23,14 @@ type TableValue = Extract<RenderValue, {
 type FigureValue = Extract<RenderValue, {
     type: "figure";
 }>;
-/** Render a metric block as a stat card with the label and the scalar value. */
+/** Render a metric block as a stat card with the mono value and the mono label. */
 export declare function renderMetric(block: MetricBlock, value: ScalarValue): string;
+/**
+ * Wrap a run of stat cards in one responsive grid. The caller renders each card first, and it passes the
+ * markup as one already-escaped string, thus `raw()` inserts it byte for byte. The grid carries its own
+ * stagger, thus the run reveals after the band around it.
+ */
+export declare function renderMetricGrid(cardsHtml: string): string;
 /**
  * Render a table block. The header holds one cell for each column, and the body holds one row for each
  * resolved row. A zero-row table renders the header alone. The title and the caption render only when the
@@ -29,14 +38,14 @@ export declare function renderMetric(block: MetricBlock, value: ScalarValue): st
  */
 export declare function renderTable(block: TableBlock, value: TableValue): string;
 /**
- * Render a figure block. The source rides the `src` attribute, and the caption renders below the image.
- * The caption also fills the `alt` attribute, thus the escape keeps a hostile source and a hostile caption
- * inside their slots.
+ * Render a figure block as a corner-accent card. The source rides the `src` attribute, and the caption
+ * renders below the image. The caption also fills the `alt` attribute, thus the escape keeps a hostile
+ * source and a hostile caption inside their slots.
  */
 export declare function renderFigure(block: FigureBlock, value: FigureValue): string;
 /**
- * Render a citation block as a short line. The binding joins the ledger like a claim binding, thus one
- * shared source keeps one number. The optional note renders after the marker.
+ * Render a citation block as a card in the reference form. The binding joins the ledger like a claim
+ * binding, thus one shared source keeps one number. The optional note renders after the marker.
  */
 export declare function renderCitation(block: CitationBlock, ledger: ReferenceLedger): string;
 export {};

package/dist/report-render/views/values.js

@@ -1,8 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "hono/jsx/jsx-runtime";
+/**
+ * The value markup: the metric card, the data table, the figure, and the inline citation.
+ *
+ * The caller resolves each value, and it narrows the value to the shape that the block needs. The runtime
+ * escapes every interpolated string, thus a hostile label, a hostile cell, a hostile caption, or a
+ * hostile source reaches the page as text.
+ *
+ * Each data card carries the `corner-accents` class. Thus the card keeps square corners with the L-shaped
+ * accents, which is the geometric identity of the report.
+ */
+import { raw } from "hono/html";
 import { Marker } from "./references-view.js";
-/** Render a metric block as a stat card with the label and the scalar value. */
+/** Render a metric block as a stat card with the mono value and the mono label. */
 export function renderMetric(block, value) {
-    return String(_jsxs("div", { class: "corner-accents border border-slate-200 bg-white p-6", children: [_jsx("div", { class: "font-mono text-3xl font-bold", style: "color: #576dea;", children: value.value }), _jsx("div", { class: "font-mono text-xs font-medium text-slate-500 mt-2 uppercase tracking-wider", children: block.label })] }));
+    return String(_jsxs("div", { class: "stat-card corner-accents", children: [_jsx("div", { class: "stat-card-value", children: value.value }), _jsx("div", { class: "stat-card-label", children: block.label })] }));
+}
+/**
+ * Wrap a run of stat cards in one responsive grid. The caller renders each card first, and it passes the
+ * markup as one already-escaped string, thus `raw()` inserts it byte for byte. The grid carries its own
+ * stagger, thus the run reveals after the band around it.
+ */
+export function renderMetricGrid(cardsHtml) {
+    return String(_jsx("div", { class: "report-metric-grid fade-in", "data-delay": "100", children: raw(cardsHtml) }));
 }
 /**
  * The column order of a table. The value columns win when they are present. The keys of the first row
@@ -22,22 +41,22 @@ function tableColumns(value) {
  */
 export function renderTable(block, value) {
     const columns = tableColumns(value);
-    return String(_jsxs("div", { class: "report-table mb-8", children: [block.title !== undefined ? (_jsx("div", { class: "font-mono text-xs font-semibold uppercase tracking-widest text-primary-500 mb-3", children: block.title })) : null, _jsx("div", { class: "corner-accents border border-slate-200 bg-white overflow-hidden", children: _jsx("div", { class: "overflow-x-auto", children: _jsxs("table", { class: "w-full text-sm", children: [_jsx("thead", { children: _jsx("tr", { class: "border-b border-slate-200 bg-slate-50", children: columns.map((column) => (_jsx("th", { class: "px-4 py-3 text-left font-mono text-[11px] font-semibold text-slate-500 uppercase tracking-wider", children: column }))) }) }), _jsx("tbody", { children: value.rows.map((row) => (_jsx("tr", { class: "report-row border-b border-slate-100 last:border-b-0", children: columns.map((column) => (_jsx("td", { class: "px-4 py-2.5 text-slate-700", children: row[column] }))) }))) })] }) }) }), block.caption !== undefined ? _jsx("p", { class: "text-sm text-slate-400 mt-2", children: block.caption }) : null] }));
+    return String(_jsxs("div", { class: "report-table", children: [block.title !== undefined ? _jsx("div", { class: "report-table-title", children: block.title }) : null, _jsx("div", { class: "corner-accents", children: _jsx("div", { class: "data-table-scroll", children: _jsxs("table", { class: "data-table", children: [_jsx("thead", { children: _jsx("tr", { children: columns.map((column) => (_jsx("th", { children: column }))) }) }), _jsx("tbody", { children: value.rows.map((row) => (_jsx("tr", { class: "report-row", children: columns.map((column) => (_jsx("td", { children: row[column] }))) }))) })] }) }) }), block.caption !== undefined ? _jsx("p", { class: "report-caption", children: block.caption }) : null] }));
 }
 /**
- * Render a figure block. The source rides the `src` attribute, and the caption renders below the image.
- * The caption also fills the `alt` attribute, thus the escape keeps a hostile source and a hostile caption
- * inside their slots.
+ * Render a figure block as a corner-accent card. The source rides the `src` attribute, and the caption
+ * renders below the image. The caption also fills the `alt` attribute, thus the escape keeps a hostile
+ * source and a hostile caption inside their slots.
  */
 export function renderFigure(block, value) {
     const caption = block.caption;
-    return String(_jsxs("figure", { class: "report-figure mb-8", children: [_jsx("img", { src: value.src, alt: caption !== undefined ? caption : "", class: "max-w-full h-auto border border-slate-200" }), caption !== undefined ? _jsx("figcaption", { class: "text-sm text-slate-400 mt-2", children: caption }) : null] }));
+    return String(_jsxs("figure", { class: "report-figure corner-accents", children: [_jsx("img", { src: value.src, alt: caption !== undefined ? caption : "", class: "report-figure-image" }), caption !== undefined ? _jsx("figcaption", { class: "report-caption", children: caption }) : null] }));
 }
 /**
- * Render a citation block as a short line. The binding joins the ledger like a claim binding, thus one
- * shared source keeps one number. The optional note renders after the marker.
+ * Render a citation block as a card in the reference form. The binding joins the ledger like a claim
+ * binding, thus one shared source keeps one number. The optional note renders after the marker.
  */
 export function renderCitation(block, ledger) {
     const n = ledger.mark(block.binding);
-    return String(_jsxs("p", { class: "report-citation text-sm text-slate-500", children: [_jsx(Marker, { n: n }), block.note !== undefined ? (_jsxs(_Fragment, { children: [" ", _jsx("span", { class: "text-slate-600", children: block.note })] })) : null] }));
+    return String(_jsxs("div", { class: "report-citation corner-accents", children: [_jsx(Marker, { n: n }), block.note !== undefined ? (_jsxs(_Fragment, { children: [" ", _jsx("span", { class: "report-citation-note", children: block.note })] })) : null] }));
 }

package/dist/runtime/assemble.d.ts

@@ -30,6 +30,7 @@ import { type CitationResolverConfig } from "../citations/resolve.js";
 import type { CitationResolver } from "../citations/types.js";
 import type { AuthContext } from "../auth/types.js";
 import type { ReferenceResolver } from "../report-model/reference-resolver.js";
+import type { ResolvePageAsset } from "../tools/report-session/index.js";
 /** Registered child sandbox-step callable the parent's child dispatch closes over. */
 export type SandboxStepCallable = (input: SandboxStepInput) => Promise<SandboxStepResult>;
 /**
@@ -110,6 +111,15 @@ export interface CoreRuntimeDeps {
      * factory replaces that wiring, thus `reportHostReadCapBytes` then governs nothing.
      */
     readonly makeReportReferenceResolver?: MakeReportReferenceResolver;
+    /**
+     * The page-asset lookup of the report preview. The preview tool stages the chart
+     * runtime and the fonts beside the page, and it names each source by its module
+     * specifier. Absent, the tool resolves each specifier against the installation of the
+     * harness, which is the npm path and the whole OSS path. An embedder that ships the
+     * bytes packed, for example a compiled single-file binary with no `node_modules` tree,
+     * materializes them to disk and binds its own lookup here.
+     */
+    readonly resolveReportPageAsset?: ResolvePageAsset;
 }
 /**
  * The refusal a thread type carries no agent yet. `report` is a valid

package/dist/runtime/assemble.js

@@ -122,6 +122,7 @@ export function assembleCoreRuntime(deps) {
         threads: reportThreads,
         chrome: conversation.chrome,
         makeResolver: makeReportResolver,
+        ...(deps.resolveReportPageAsset ? { resolvePageAsset: deps.resolveReportPageAsset } : {}),
         ...(conversation.logger ? { logger: conversation.logger } : {}),
     });
     // The single registration point for every typed agent. A future thread type's

package/dist/sandbox/k8s-client.js

@@ -32,6 +32,11 @@ const MANAGED_BY_VALUE = "cortex";
 const OWNER_WORKFLOW_LABEL = "cortex/owner-workflow-id";
 const RUN_ID_LABEL = "cortex/run-id";
 const STEP_ID_LABEL = "cortex/step-id";
+// OpenCost sanitizes `/` and `-` to `_`, so these arrive at the metering
+// reconciler as cortex_billing_context / cortex_user_id / cortex_analysis_id.
+const BILLING_CONTEXT_LABEL = "cortex/billing-context";
+const USER_ID_LABEL = "cortex/user-id";
+const ANALYSIS_ID_LABEL = "cortex/analysis-id";
 /**
  * Coerce an arbitrary identifier into a valid K8s label value:
  * ≤63 chars, `[A-Za-z0-9._-]` only, starting and ending alphanumeric.
@@ -214,6 +219,17 @@ function buildJobSpec(meta, config, identity) {
         podSpec.tolerations = config.tolerations;
     if (config.runtimeClassName)
         podSpec.runtimeClassName = config.runtimeClassName;
+    // Pod-template placement is load-bearing: the OpenCost reconciler allocates
+    // by pod labels and filters on a non-empty cortex_billing_context — a
+    // Job-only label is invisible to compute metering.
+    const billingLabels = meta.billing
+        ? {
+            [BILLING_CONTEXT_LABEL]: sanitizeLabelValue(meta.billing.billingContextId),
+            [USER_ID_LABEL]: sanitizeLabelValue(meta.billing.userId),
+            [ANALYSIS_ID_LABEL]: sanitizeLabelValue(meta.analysisId),
+            [RUN_ID_LABEL]: sanitizeLabelValue(meta.runId),
+        }
+        : {};
     return {
         apiVersion: "batch/v1",
         kind: "Job",
@@ -227,6 +243,7 @@ function buildJobSpec(meta, config, identity) {
                 [OWNER_WORKFLOW_LABEL]: sanitizeLabelValue(meta.childWorkflowId),
                 [RUN_ID_LABEL]: sanitizeLabelValue(meta.runId),
                 [STEP_ID_LABEL]: sanitizeLabelValue(meta.stepId),
+                ...billingLabels,
             },
         },
         spec: {
@@ -237,6 +254,7 @@ function buildJobSpec(meta, config, identity) {
                     labels: {
                         role: "sandbox",
                         "cortex/sandbox-id": sandboxId,
+                        ...billingLabels,
                     },
                 },
                 spec: podSpec,

package/dist/sandbox/types.d.ts

@@ -243,6 +243,12 @@ export interface CreateSandboxMeta {
     /** Enforced read-only: provision with no read-write step mount, only the
      *  read-only analysis tree for generic read-only agents. */
     readOnly?: boolean;
+    /** Billing attribution stamped as pod labels for OpenCost compute metering.
+     *  Absent ⇒ the pod is invisible to the metering reconciler (filter-level). */
+    billing?: {
+        billingContextId: string;
+        userId: string;
+    };
 }
 /**
  * The identity minted for a sandbox machine *before* it is spawned — the

package/dist/state/analyses.d.ts

@@ -1,5 +1,5 @@
 /**
- * `cortex_analysis_state` operations — analysis lifecycle and billing context.
+ * `cortex_analysis_state` operations — analysis lifecycle.
  */
 import type { ResultAsync } from "neverthrow";
 import { type DbError } from "../lib/db-result.js";
@@ -9,20 +9,12 @@ import type { Querier } from "./db.js";
  *
  * The seed endpoint is called repeatedly; this function handles both the
  * initial INSERT and subsequent UPDATEs by writing ALL mutable fields on
- * every call. Re-upserts replace `context` and `billing_context` wholesale.
+ * every call. Re-upserts replace `context` wholesale.
  *
  * User identity is derived from the ambient credential's JWT `sub` claim
  * at request time — not persisted in this table.
- *
- * INTENTIONAL: split-attribution across a single run.
- * If the seed re-upserts mid-workflow (e.g., the billing context's VK rotates),
- * in-flight steps that have already issued LLM calls keep the old attribution
- * on those calls, while subsequent steps in the same run pick up the new
- * identity on their next `billedAgent` resolution. This is by design —
- * usage rows contain full per-call attribution, so spend is
- * always assignable even when it crosses a rotation boundary.
  */
-export declare function upsertAnalysis(pool: Querier, resourceId: string, context: string | null, billingContext: Record<string, string> | null, inputFileIds?: string[]): ResultAsync<void, DbError>;
+export declare function upsertAnalysis(pool: Querier, resourceId: string, context: string | null, inputFileIds?: string[]): ResultAsync<void, DbError>;
 export declare function loadAnalysisStatus(pool: Querier, resourceId: string): ResultAsync<{
     status: string;
     context: string | null;
@@ -41,18 +33,3 @@ export declare function suspendAnalysis(pool: Querier, analysisId: string): Resu
  * Only transitions from `suspended_insufficient_funds` → `active`.
  */
 export declare function resumeAnalysis(pool: Querier, analysisId: string): ResultAsync<void, DbError>;
-/**
- * Resolve the persisted billing context for an analysis.
- *
- * Single DB-read chokepoint used by `requireAnalysisBilling` middleware and
- * by any downstream code that needs to re-read billing identity. The driver
- * read is wrapped as a `DbError`; the missing-row / null-billing /
- * unparseable-JSON cases are control-flow throws (a misconfiguration, not a
- * driver failure) that short-circuit the chain and surface verbatim.
- *
- * User identity (`HEADERS.User`) is derived from the ambient credential's
- * JWT `sub` claim by `credential-middleware`, not from the DB.
- */
-export declare function resolveAnalysisBilling(pool: Querier, analysisId: string): ResultAsync<{
-    billingContext: Record<string, string>;
-}, DbError>;