@inflexa-ai/harness 0.19.0 → 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

@@ -25,9 +25,12 @@ import { type ExecuteAnalysisDeps, type ExecuteAnalysisInput, type ExecuteAnalys
 import { type SandboxStepDeps, type SandboxStepInput, type SandboxStepResult } from "../workflows/sandbox-step.js";
 import { type ExecuteTargetAssessmentDeps, type ExecuteTargetAssessmentInput, type ExecuteTargetAssessmentResult } from "../workflows/execute-target-assessment.js";
 import { type DataProfileDeps, type DataProfileWorkflowInput } from "../tasks/data-profile.js";
+import { type ExtractValuesResult, type ExtractValuesWorkflowInput } from "../tasks/extract-values.js";
 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>;
 /**
@@ -55,6 +58,7 @@ export interface RegisteredWorkflows {
     readonly sandboxStep: SandboxStepCallable;
     readonly executeTargetAssessment: (input: ExecuteTargetAssessmentInput) => Promise<ExecuteTargetAssessmentResult>;
     readonly dataProfile: (input: DataProfileWorkflowInput) => Promise<void>;
+    readonly extractValues: (input: ExtractValuesWorkflowInput) => Promise<ExtractValuesResult>;
 }
 /**
  * Conversation-agent deps minus the workflow callable, the resource policy, and
@@ -63,6 +67,19 @@ export interface RegisteredWorkflows {
  * workflows see, or a recorder that only half the agent tree reports to.
  */
 export type ConversationAssemblyDeps = Omit<ConversationAgentDeps, "executeAnalysisWorkflow" | "resourcePolicy" | "usageRecorder" | "citationResolver">;
+/**
+ * What binds one reference resolver: the analysis whose pinned artifacts it reads, and the auth of the tool
+ * call that reads them. A resolver serves one analysis, thus the report tools build one for each call.
+ */
+export interface ReportResolverScope {
+    readonly analysisId: string;
+    readonly auth: AuthContext;
+}
+/**
+ * The factory that gives the reference resolver of one report tool call. The harness wires the production
+ * realization, and an embedder can bind its own at its composition root.
+ */
+export type MakeReportReferenceResolver = (scope: ReportResolverScope) => ReferenceResolver;
 export interface CoreRuntimeDeps {
     readonly conversation: ConversationAssemblyDeps;
     readonly workflows: CoreWorkflowDeps;
@@ -81,11 +98,28 @@ export interface CoreRuntimeDeps {
     /** Harness-owned citation capability configuration; no ambient lookup occurs. */
     readonly citationResolverConfig?: CitationResolverConfig;
     /**
-     * Reference-resolution seam for the report preview. Absent by default, thus the
-     * preview tool degrades as data until an embedder wires a realization. The
-     * realization itself stays out of the harness.
+     * The byte cap on the in-process host read of a report reference. A file over the
+     * cap falls through to the extraction arm. Absent, the resolver uses its 16 MiB
+     * default. The embedder tunes it here, thus a host changes it with no harness change.
+     */
+    readonly reportHostReadCapBytes?: number;
+    /**
+     * The report reference resolver of an embedder. A managed host reads its pinned
+     * artifacts from its own store, thus it binds a realization of the seam here and the
+     * report tools resolve through it. Absent, the harness wires the production resolver
+     * over the workspace tree and the extraction arm, which is the whole OSS path. A bound
+     * 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 reportReferenceResolver?: ReferenceResolver;
+    readonly resolveReportPageAsset?: ResolvePageAsset;
 }
 /**
  * The refusal a thread type carries no agent yet. `report` is a valid

package/dist/runtime/assemble.js

@@ -23,7 +23,11 @@ import { registerExecuteAnalysis } from "../workflows/execute-analysis.js";
 import { registerSandboxStep } from "../workflows/sandbox-step.js";
 import { registerExecuteTargetAssessment, } from "../workflows/execute-target-assessment.js";
 import { registerDataProfileWorkflow } from "../tasks/data-profile.js";
+import { bindExtractionTrigger, createExtractionArm, registerExtractValuesWorkflow, } from "../tasks/extract-values.js";
 import { createCitationResolver } from "../citations/resolve.js";
+import { createThreadStore } from "../memory/thread-store.js";
+import { createArtifactReadStore, createProductionResolver } from "../report-model/production-resolver.js";
+import { createReportVersionStore } from "../state/report-versions.js";
 const _assertDomainError = true;
 /**
  * Wrap a type→agent registry as the resolution surface. Held apart from
@@ -62,6 +66,14 @@ export function assembleCoreRuntime(deps) {
     const executeAnalysis = registerExecuteAnalysis({ ...wf.buildExecuteAnalysis(sandboxStep), citationResolver, usageRecorder });
     const executeTargetAssessment = registerExecuteTargetAssessment({ ...wf.executeTargetAssessment, usageRecorder });
     const dataProfile = registerDataProfileWorkflow({ ...wf.dataProfile, usageRecorder });
+    // The extraction workflow shares the profile's sandbox and authorization rails, thus it draws the same
+    // three seams from the profile deps. The report resolver factory binds the extraction arm over this
+    // callable, thus a fall-through report reference reads its file out of process on the profile rails.
+    const extractValues = registerExtractValuesWorkflow({
+        sandboxClient: wf.dataProfile.sandboxClient,
+        runAuthorizer: wf.dataProfile.runAuthorizer,
+        ...(wf.dataProfile.logger ? { logger: wf.dataProfile.logger } : {}),
+    });
     const conversationAgent = createConversationAgent({
         ...conversation,
         executeAnalysisWorkflow: executeAnalysis,
@@ -73,9 +85,32 @@ export function assembleCoreRuntime(deps) {
     // runtime binds the per-session state to the thread behind the tool boundary,
     // thus one definition serves every report thread. Its preview tool writes the
     // page into the analysis tree and returns the path, thus the page write reaches
-    // no host seam. The optional reference resolver is the one seam it can use, and
-    // it is absent by default.
+    // no host seam.
     const reportSession = createReportSessionRuntime({ pool: conversation.pool, ...(conversation.logger ? { logger: conversation.logger } : {}) });
+    const reportVersionStore = createReportVersionStore({ pool: conversation.pool, ...(conversation.logger ? { logger: conversation.logger } : {}) });
+    const reportThreads = createThreadStore(conversation.pool);
+    // The read cache of the production report path, one for each recent analysis. A preview
+    // and the record that follows it are two tool calls over one draft, thus they meet the
+    // same artifacts. The store carries the streamed hash and the extracted rows between
+    // them, and each resolver still binds its own extraction arm below. Thus the auth of a
+    // call never outlives the call, and one unchanged file costs one hash and one container.
+    const reportArtifactReads = createArtifactReadStore();
+    // The reference resolver of the report path, and its production wiring. A resolver reads
+    // the pinned artifacts of one analysis, thus the factory binds one analysis and one auth
+    // for each tool call. The extraction arm falls through to the registered extract-values
+    // callable for an over-cap file or a host parse fault. The cap gates the host read, and
+    // the resolver defaults it to 16 MiB.
+    const makeProductionReportResolver = (scope) => {
+        const arm = createExtractionArm(bindExtractionTrigger({ runAuthorizer: conversation.runAuthorizer, workflow: extractValues }, { auth: scope.auth, analysisId: scope.analysisId }));
+        return createProductionResolver({
+            workspaceRoot: conversation.resolveWorkspaceRoot(scope.analysisId),
+            analysisId: scope.analysisId,
+            extractionArm: arm,
+            readCache: reportArtifactReads.forAnalysis(scope.analysisId),
+            ...(deps.reportHostReadCapBytes !== undefined ? { cap: deps.reportHostReadCapBytes } : {}),
+        });
+    };
+    const makeReportResolver = deps.makeReportReferenceResolver ?? makeProductionReportResolver;
     const reportAgent = createReportSessionAgent({
         model: conversation.model,
         pool: conversation.pool,
@@ -83,7 +118,11 @@ export function assembleCoreRuntime(deps) {
         workspaceFs: conversation.workspaceFs,
         gateway: reportSession.gateway,
         resolveWorkspaceRoot: conversation.resolveWorkspaceRoot,
-        ...(deps.reportReferenceResolver ? { resolver: deps.reportReferenceResolver } : {}),
+        store: reportVersionStore,
+        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
@@ -105,6 +144,7 @@ export function assembleCoreRuntime(deps) {
             sandboxStep,
             executeTargetAssessment,
             dataProfile,
+            extractValues,
         },
         citationResolver,
     };