@vitest-agent/ui 2.5.3 → 4.0.0

package/README.md

@@ -6,14 +6,13 @@
 
 > **Part of the [vitest-agent](https://vitest-agent.dev) ecosystem.** Most users want **[@vitest-agent/plugin](https://www.npmjs.com/package/@vitest-agent/plugin)**, which pulls this package in automatically. Install `@vitest-agent/ui` directly only if you build custom rendering on the primitives.
 
-Pure rendering primitives for vitest-agent. Owns the `RunEvent` reducer, the shape-tailored 12-cell dispatcher matrix, two render paths (agent string and React Ink tree), a PubSub channel for live event transport, and the synthesizers that bridge live Vitest data and stored reports into the event taxonomy. React and Ink are required peer dependencies.
+Pure rendering primitives for vitest-agent. Owns the `RunEvent` reducer, the shape-tailored 12-cell dispatcher matrix, two render paths (agent string and React Ink tree), and the synthesizers that bridge live Vitest data and stored reports into the event taxonomy. React and Ink are required peer dependencies.
 
 ## Features
 
 - **Reducer** — pure `(state, event) => state` fold over the `RunEvent` discriminated union; `reduceRenderStateAll` for one-shot replay
 - **Dispatcher matrix** — `dispatch` and `dispatchInk` route a `DispatchInputs` to the matching `(RunShape, RunOutcome)` cell; `classifyRunShape` and `classifyOutcome` derive the coordinates
 - **Ink components** — `StreamApp` and the supporting primitives (`ModuleHeader`, `TestRow`, `CoverageBlock`, `TrendLine`, `FailureSection`, etc.) for live `stream`-mode frames
-- **PubSub channel** — `RunEventChannel` Effect tag and helpers (`accumulateUntilFinished`, `forEachRenderState`, `renderStateStream`) for live event transport
 - **Synthesizers** — `synthesizeRunEvents` from live Vitest modules; `synthesizeFromAgentReport` from a stored `AgentReport`
 - **Footer builder** — `buildFooter` assembles the L1 MCP-tool-pointer footer; `dominantClassification` picks the most actionable failure class
 

package/counts.js

@@ -0,0 +1,61 @@
+import { VitestAgentStatus } from "./theme.js";
+import { Doc, Render } from "@effected/cli";
+
+//#region src/counts.ts
+/** The test counters a totals line folds into its `n/total`. */
+const TEST_KEYS = /* @__PURE__ */ new Set([
+	"pass",
+	"fail",
+	"timeout",
+	"skip"
+]);
+/** An agent is always escape-free; colour none, no links, no width. */
+const AGENT_CONTEXT = Render.contextOf({ audience: "agent" });
+const sumTests = (counters) => counters.reduce((sum, c) => TEST_KEYS.has(c.key) ? sum + c.n : sum, 0);
+/**
+* Render one totals line as plain agent text.
+*
+* @internal
+*/
+const formatTotalsLine = (input) => {
+	const unhandled = input.unhandledErrors ?? 0;
+	const counters = [
+		Doc.counter(VitestAgentStatus, "success", {
+			key: "pass",
+			label: "passed",
+			n: input.passCount,
+			showZero: true
+		}),
+		Doc.counter(VitestAgentStatus, "failure", {
+			key: "fail",
+			label: "failed",
+			n: input.failCount
+		}),
+		Doc.counter(VitestAgentStatus, "timeout", {
+			key: "timeout",
+			label: "timed out",
+			n: input.timeoutCount
+		}),
+		Doc.counter(VitestAgentStatus, "skip", {
+			key: "skip",
+			label: "skipped",
+			n: input.skipCount
+		}),
+		Doc.counter(VitestAgentStatus, "failure", {
+			key: "unhandled",
+			label: unhandled === 1 ? "unhandled error" : "unhandled errors",
+			n: unhandled
+		})
+	];
+	return Render.plain([Doc.counts({
+		label: input.label,
+		counters,
+		total: sumTests,
+		durationMs: input.durationMs,
+		layout: "inline",
+		...input.suffix !== void 0 ? { suffix: input.suffix } : {}
+	})], AGENT_CONTEXT);
+};
+
+//#endregion
+export { formatTotalsLine };

package/dispatcher/cells/single-file-pass.js

@@ -2,13 +2,14 @@ import { buildFooter } from "../footer.js";
 import { formatDisplayDuration } from "../../format-duration.js";
 import { soleModulePath } from "../helpers.js";
 import { renderAgentStringAsInk } from "../ink-helpers.js";
+import { Fmt } from "@effected/cli";
 
 //#region src/dispatcher/cells/single-file-pass.ts
 const renderAgent = (inputs) => {
 	const modulePath = soleModulePath(inputs.state);
 	if (modulePath === void 0) return "";
 	const { passCount, durationMs } = inputs.state.totals;
-	return `${modulePath}: ${passCount} ${passCount === 1 ? "test" : "tests"} passed (${formatDisplayDuration(durationMs)})\n${buildFooter(inputs)}`;
+	return `${modulePath}: ${Fmt.plural(passCount, "test")} passed (${formatDisplayDuration(durationMs)})\n${buildFooter(inputs)}`;
 };
 const renderSingleFilePass = {
 	agent: renderAgent,

package/dispatcher/cells/single-file-threshold.js

@@ -2,13 +2,14 @@ import { buildFooter } from "../footer.js";
 import { formatDisplayDuration } from "../../format-duration.js";
 import { formatCoverageJudgmentLine, soleModulePath } from "../helpers.js";
 import { renderAgentStringAsInk } from "../ink-helpers.js";
+import { Fmt } from "@effected/cli";
 
 //#region src/dispatcher/cells/single-file-threshold.ts
 const renderAgent = (inputs) => {
 	const modulePath = soleModulePath(inputs.state);
 	if (modulePath === void 0) return "";
 	const { passCount, durationMs } = inputs.state.totals;
-	const lines = [`${modulePath}: ${passCount} ${passCount === 1 ? "test" : "tests"} passed (${formatDisplayDuration(durationMs)})`];
+	const lines = [`${modulePath}: ${Fmt.plural(passCount, "test")} passed (${formatDisplayDuration(durationMs)})`];
 	const coverage = formatCoverageJudgmentLine(inputs.state);
 	if (coverage !== null) lines.push(coverage);
 	return `${lines.join("\n")}\n${buildFooter(inputs)}`;

package/dispatcher/cells/single-project-pass.js

@@ -1,13 +1,14 @@
 import { buildFooter } from "../footer.js";
 import { formatTotals } from "../helpers.js";
 import { renderAgentStringAsInk } from "../ink-helpers.js";
+import { Fmt } from "@effected/cli";
 
 //#region src/dispatcher/cells/single-project-pass.ts
 const renderAgent = (inputs) => {
 	const { passCount, failCount, skipCount, timeoutCount } = inputs.state.totals;
 	if (passCount + failCount + skipCount + timeoutCount === 0) return `${[formatTotals(inputs.state), "0 tests collected. A zero-test run usually means a wrong working directory, a filter that matched nothing, or a load-time error — verify before trusting it."].join("\n\n")}\n${buildFooter(inputs)}`;
 	const collected = inputs.state.collectedModules ?? inputs.state.moduleOrder.length;
-	return `${(collected === 0 ? [formatTotals(inputs.state)] : [formatTotals(inputs.state), `${collected} ${collected === 1 ? "module" : "modules"} all-passed.`]).join("\n\n")}\n${buildFooter(inputs)}`;
+	return `${(collected === 0 ? [formatTotals(inputs.state)] : [formatTotals(inputs.state), `${Fmt.plural(collected, "module")} all-passed.`]).join("\n\n")}\n${buildFooter(inputs)}`;
 };
 const renderSingleProjectPass = {
 	agent: renderAgent,

package/dispatcher/cells/single-test-fail.js

@@ -1,4 +1,5 @@
 import { buildFooter } from "../footer.js";
+import { statusGlyph } from "../../theme.js";
 import { formatDisplayDuration } from "../../format-duration.js";
 import { formatFailure, formatTestName, soleTest } from "../helpers.js";
 import { renderAgentStringAsInk } from "../ink-helpers.js";
@@ -9,7 +10,7 @@ const renderAgent = (inputs) => {
 	const test = soleTest(inputs.state);
 	if (test === void 0) return "";
 	const duration = test.durationMs ?? 0;
-	const header = `✗ ${formatTestName(test)} (${formatDisplayDuration(duration)})`;
+	const header = `${statusGlyph("failure")} ${formatTestName(test)} (${formatDisplayDuration(duration)})`;
 	const failure = inputs.state.failures[0];
 	return `${failure === void 0 ? `${header}\n` : `${header}\n${formatFailure(failure, DEFAULT_WIDTH).join("\n")}\n`}${buildFooter(inputs)}`;
 };

package/dispatcher/cells/single-test-pass.js

@@ -1,4 +1,5 @@
 import { buildFooter } from "../footer.js";
+import { statusGlyph } from "../../theme.js";
 import { formatDisplayDuration } from "../../format-duration.js";
 import { formatTestName, soleTest } from "../helpers.js";
 import { renderAgentStringAsInk } from "../ink-helpers.js";
@@ -8,7 +9,7 @@ const renderAgent = (inputs) => {
 	const test = soleTest(inputs.state);
 	if (test === void 0) return "";
 	const duration = test.durationMs ?? 0;
-	return `✓ ${formatTestName(test)} (${formatDisplayDuration(duration)})\n${buildFooter(inputs)}`;
+	return `${statusGlyph("success")} ${formatTestName(test)} (${formatDisplayDuration(duration)})\n${buildFooter(inputs)}`;
 };
 const renderSingleTestPass = {
 	agent: renderAgent,

package/dispatcher/helpers.js

@@ -1,29 +1,22 @@
+import { statusGlyph } from "../theme.js";
+import { formatTotalsLine } from "../counts.js";
 import { formatDisplayDuration } from "../format-duration.js";
+import { Doc, Fmt, Render } from "@effected/cli";
 
 //#region src/dispatcher/helpers.ts
 /**
-* Truncate a line to a maximum width with an ellipsis suffix.
-*/
-const truncate = (line, max) => {
-	if (line.length <= max) return line;
-	const slice = max - 1;
-	if (slice <= 0) return "…";
-	return `${line.slice(0, slice)}…`;
-};
-/**
 * Format the `Tests:` header line —
 * `<pass>/<total> passed[, <fail> failed][, <timeout> timed out][, <skip> skipped] (Xms)`.
 * `total` folds in `timeoutCount` — a timed-out test is a real collected
 * test, not a pass (issue #224).
 */
 const formatTotals = (state) => {
-	const { passCount, failCount, skipCount, timeoutCount, durationMs } = state.totals;
-	const parts = [`${passCount}/${passCount + failCount + skipCount + timeoutCount} passed`];
-	if (failCount > 0) parts.push(`${failCount} failed`);
-	if (timeoutCount > 0) parts.push(`${timeoutCount} timed out`);
-	if (skipCount > 0) parts.push(`${skipCount} skipped`);
-	const suffix = state.collectedModules !== void 0 && state.collectedModules > 0 ? ` across ${state.collectedModules} files` : "";
-	return `Tests: ${parts.join(", ")} (${formatDisplayDuration(durationMs)})${suffix}`;
+	const modules = state.collectedModules;
+	return formatTotalsLine({
+		label: "Tests",
+		...state.totals,
+		...modules !== void 0 && modules > 0 ? { suffix: `across ${modules} files` } : {}
+	});
 };
 /**
 * Locate the sole {@link TestRecord} in a `single-test` shape state.
@@ -56,17 +49,25 @@ const formatTestName = (test) => {
 * Render one failure block — `- <path > suite > name> [classification]`
 * followed by the indented message and diff. Stack traces are omitted
 * by default to keep the agent string compact.
+*
+* @remarks
+* A kit document rendered plain for the agent audience: one compact list
+* item whose title is verbatim (never wrapped), whose first message line is
+* a truncated `Doc.line`, and whose diff is `Doc.diffText` with `truncate`.
+* Each content line is cut to `width - 2` (floor 20) after the item indent.
+* The kit sanitizes the text, so a tab becomes a space and an escape
+* sequence is removed.
 */
 const formatFailure = (f, width) => {
 	const suite = f.suitePath.length > 0 ? `${f.suitePath.join(" > ")} > ` : "";
 	const classification = f.classification !== null ? ` [${f.classification}]` : "";
-	const lines = [`- ${f.modulePath} > ${suite}${f.testName}${classification}`];
-	if (f.error?.message !== void 0) {
-		const firstLine = f.error.message.split("\n", 1)[0] ?? "";
-		lines.push(`  ${truncate(firstLine, Math.max(20, width - 2))}`);
-	}
-	if (f.error?.diff !== void 0) for (const diffLine of f.error.diff.split("\n")) lines.push(`  ${truncate(diffLine, Math.max(20, width - 2))}`);
-	return lines;
+	const parts = [Doc.verbatim(`${f.modulePath} > ${suite}${f.testName}${classification}`)];
+	if (f.error?.message !== void 0) parts.push(Doc.line(f.error.message.split("\n", 1)[0] ?? "", { truncate: true }));
+	if (f.error?.diff !== void 0) parts.push(Doc.diffText(f.error.diff, { truncate: true }));
+	return Render.plain([Doc.list([Doc.section(void 0, parts)], { compact: true })], Render.contextOf({
+		audience: "agent",
+		width: Math.max(22, width)
+	})).split("\n");
 };
 /**
 * One coverage judgment line — `Coverage: ✓ all metrics meet thresholds`
@@ -76,10 +77,10 @@ const formatFailure = (f, width) => {
 const formatCoverageJudgmentLine = (state) => {
 	const cov = state.coverage;
 	if (cov === null) return null;
-	if (cov.violations.length === 0) return "Coverage: ✓ all metrics meet thresholds";
+	if (cov.violations.length === 0) return `Coverage: ${statusGlyph("success")} all metrics meet thresholds`;
 	const metrics = cov.violations.map((v) => v.metric).join(", ");
 	const fileCount = countLowCoverageFiles(cov.gaps);
-	return `Coverage: ✗ ${fileCount} ${fileCount === 1 ? "file" : "files"} below minimum thresholds (${metrics})`;
+	return `Coverage: ${statusGlyph("failure")} ${Fmt.plural(fileCount, "file")} below minimum thresholds (${metrics})`;
 };
 const countLowCoverageFiles = (gaps) => {
 	const seen = /* @__PURE__ */ new Set();
@@ -92,8 +93,7 @@ const countLowCoverageFiles = (gaps) => {
 */
 const formatTrendLine = (trend) => {
 	if (trend === null) return null;
-	const runs = trend.runCount === 1 ? "1 run" : `${trend.runCount} runs`;
-	return `Trend: ${trend.direction} (${runs})`;
+	return `Trend: ${trend.direction} (${Fmt.plural(trend.runCount, "run")})`;
 };
 /**
 * Format a compact projects-table line for one project. Pads the name
@@ -104,7 +104,7 @@ const formatTrendLine = (trend) => {
 const formatProjectRow = (project, nameWidth) => {
 	const timeoutCount = project.timeoutCount ?? 0;
 	const total = project.passCount + project.failCount + project.skipCount + timeoutCount;
-	const glyph = project.failCount > 0 || timeoutCount > 0 ? "✗" : "✓";
+	const glyph = statusGlyph(project.failCount > 0 || timeoutCount > 0 ? "failure" : "success");
 	const countParts = [`${project.passCount}/${total} passed`];
 	if (project.failCount > 0) countParts.push(`${project.failCount} failed`);
 	if (timeoutCount > 0) countParts.push(`${timeoutCount} timed out`);
@@ -132,26 +132,15 @@ const formatProjectsTable = (projects) => {
 /**
 * Format the `Total:` footer for a workspace run.
 */
-const formatWorkspaceTotal = (projects) => {
-	let pass = 0;
-	let fail = 0;
-	let skip = 0;
-	let timeout = 0;
-	let durationMs = 0;
-	for (const p of projects) {
-		pass += p.passCount;
-		fail += p.failCount;
-		skip += p.skipCount;
-		timeout += p.timeoutCount ?? 0;
-		durationMs += p.durationMs;
-	}
-	const total = pass + fail + skip + timeout;
-	const parts = [`${pass}/${total} passed`];
-	if (fail > 0) parts.push(`${fail} failed`);
-	if (timeout > 0) parts.push(`${timeout} timed out`);
-	if (skip > 0) parts.push(`${skip} skipped`);
-	return `Total: ${parts.join(", ")} (${formatDisplayDuration(durationMs)})`;
-};
+const formatWorkspaceTotal = (projects) => formatTotalsLine({
+	label: "Total",
+	passCount: sumOf(projects, (p) => p.passCount),
+	failCount: sumOf(projects, (p) => p.failCount),
+	timeoutCount: sumOf(projects, (p) => p.timeoutCount ?? 0),
+	skipCount: sumOf(projects, (p) => p.skipCount),
+	durationMs: sumOf(projects, (p) => p.durationMs)
+});
+const sumOf = (projects, pick) => projects.reduce((sum, p) => sum + pick(p), 0);
 const TABLE_COL_FILE_MIN = 60;
 /**
 * Format the `Files below aspirational target:` block — a pipe-delimited
@@ -202,4 +191,4 @@ const pctCell = (n) => {
 };
 
 //#endregion
-export { formatBelowTargetTable, formatCoverageJudgmentLine, formatDisplayDuration, formatFailure, formatProjectRow, formatProjectsTable, formatTestName, formatTotals, formatTrendLine, formatWorkspaceTotal, soleModulePath, soleTest, truncate };
+export { formatBelowTargetTable, formatCoverageJudgmentLine, formatDisplayDuration, formatFailure, formatProjectRow, formatProjectsTable, formatTestName, formatTotals, formatTrendLine, formatWorkspaceTotal, soleModulePath, soleTest };

package/dispatcher/ink-helpers.js

@@ -1,18 +1,9 @@
+import { inkStyle, statusGlyph, statusInkStyle } from "../theme.js";
 import { Box, Text } from "ink";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/dispatcher/ink-helpers.tsx
 /**
-* Ink rendering helpers shared by the dispatcher cells.
-*
-* Most cells re-express their agent-half string in a simple
-* `<Box flexDirection="column">` with one `<Text>` per line plus
-* targeted color coding on glyph characters (✓ green, ✗ red,
-* Trend regressing/improving in matching colors).
-*
-* @packageDocumentation
-*/
-/**
 * Render an agent-string output as a column of Ink Text rows, applying
 * color to the leading status glyph on each line.
 */
@@ -23,54 +14,39 @@ const renderAgentStringAsInk = (agentString) => {
 		children: lines.map((line, idx) => /* @__PURE__ */ jsx(Text, { children: colorize(line) }, `${idx}-${line}`))
 	});
 };
-const PASS_GLYPH = "✓";
-const FAIL_GLYPH = "✗";
+const SUCCESS_GLYPH = statusGlyph("success");
+const FAILURE_GLYPH = statusGlyph("failure");
+/** Paint the leading status glyph of a line in its vocabulary style. */
+const glyphLine = (line, glyph, status) => {
+	const idx = line.indexOf(glyph);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		line.slice(0, idx),
+		/* @__PURE__ */ jsx(Text, {
+			...statusInkStyle(status),
+			children: glyph
+		}),
+		line.slice(idx + glyph.length)
+	] });
+};
+/**
+* Whole-line styles keyed on the agent string's line prefixes. A
+* regressing trend is a `warning`; a coverage threshold failure is a
+* `failure` (the kit's drift decisions).
+*/
+const LINE_STYLES = [
+	["Trend: regressing", "warning"],
+	["Trend: improving", "success"],
+	[`Coverage: ${SUCCESS_GLYPH}`, "success"],
+	[`Coverage: ${FAILURE_GLYPH}`, "failure"],
+	["Failures:", "emphasis"],
+	["Use `", "muted"]
+];
 const colorize = (line) => {
 	const trimmed = line.trimStart();
-	if (trimmed.startsWith(PASS_GLYPH)) {
-		const idx = line.indexOf(PASS_GLYPH);
-		return /* @__PURE__ */ jsxs(Fragment, { children: [
-			line.slice(0, idx),
-			/* @__PURE__ */ jsx(Text, {
-				color: "green",
-				children: PASS_GLYPH
-			}),
-			line.slice(idx + 1)
-		] });
-	}
-	if (trimmed.startsWith(FAIL_GLYPH)) {
-		const idx = line.indexOf(FAIL_GLYPH);
-		return /* @__PURE__ */ jsxs(Fragment, { children: [
-			line.slice(0, idx),
-			/* @__PURE__ */ jsx(Text, {
-				color: "red",
-				children: FAIL_GLYPH
-			}),
-			line.slice(idx + 1)
-		] });
-	}
-	if (line.startsWith("Trend: regressing")) return /* @__PURE__ */ jsx(Text, {
-		color: "yellow",
-		children: line
-	});
-	if (line.startsWith("Trend: improving")) return /* @__PURE__ */ jsx(Text, {
-		color: "green",
-		children: line
-	});
-	if (line.startsWith("Coverage: ✓")) return /* @__PURE__ */ jsx(Text, {
-		color: "green",
-		children: line
-	});
-	if (line.startsWith("Coverage: ✗")) return /* @__PURE__ */ jsx(Text, {
-		color: "red",
-		children: line
-	});
-	if (line.startsWith("Failures:")) return /* @__PURE__ */ jsx(Text, {
-		bold: true,
-		children: line
-	});
-	if (line.startsWith("Use `")) return /* @__PURE__ */ jsx(Text, {
-		dimColor: true,
+	if (trimmed.startsWith(SUCCESS_GLYPH)) return glyphLine(line, SUCCESS_GLYPH, "success");
+	if (trimmed.startsWith(FAILURE_GLYPH)) return glyphLine(line, FAILURE_GLYPH, "failure");
+	for (const [prefix, token] of LINE_STYLES) if (line.startsWith(prefix)) return /* @__PURE__ */ jsx(Text, {
+		...inkStyle(token),
 		children: line
 	});
 	return line;

package/format-duration.js

@@ -1,3 +1,5 @@
+import { Fmt } from "@effected/cli";
+
 //#region src/format-duration.ts
 /**
 * Shared display formatter for run / module / test durations.
@@ -6,29 +8,27 @@
 * (`14.87745800000016`). Rendering those verbatim is noise. This is
 * the single formatter every render path calls — `render-agent.ts`,
 * the `render-ink/` components, the dispatcher cells, and `StreamApp`
-* — so a duration looks the same wherever it appears.
+* — so a duration looks the same wherever it appears. It delegates to
+* `@effected/cli`'s `Fmt.duration`, so it also matches every other kit
+* CLI's output.
 *
 * Display only. Full-precision durations continue to persist to the
 * database unchanged; nothing in the trend / baseline / classification
 * pipeline reads a duration through a formatter.
 */
-const SECOND_MS = 1e3;
 /**
 * Format a duration in milliseconds for display.
 *
-* Sub-second values round to one decimal place and render as `<N.N>ms`;
-* values at or above one second render as `<N.N>s`. A value that rounds
-* to a whole number drops the trailing `.0` naturally (`Number`
-* stringification), so `1000` → `1s` and `250` → `250ms`.
+* Whole milliseconds under a second (`250ms`), seconds to one decimal
+* under a minute with a trailing `.0` dropped (`1.2s`, `2s`), then
+* `1m 3s` and `1h 2m`. A value that rounds up to the next unit is
+* written in that unit (`999.6` → `1s`).
 *
 * @param ms - duration in milliseconds
 * @returns formatted duration string
 * @public
 */
-const formatDisplayDuration = (ms) => {
-	if (ms < SECOND_MS) return `${Math.round(ms * 10) / 10}ms`;
-	return `${Math.round(ms / SECOND_MS * 10) / 10}s`;
-};
+const formatDisplayDuration = (ms) => Fmt.duration(ms);
 
 //#endregion
 export { formatDisplayDuration };