@vitest-agent/ui 2.5.3 → 3.0.0

package/index.js

@@ -1,5 +1,6 @@
 import { classifyOutcome, classifyRunShape } from "./dispatcher/classify.js";
 import { buildFooter, dominantClassification } from "./dispatcher/footer.js";
+import { VitestAgentStatus, VitestAgentTokens, inkStyle, statusGlyph, statusInkStyle } from "./theme.js";
 import { formatDisplayDuration } from "./format-duration.js";
 import { dispatch, dispatchInk, dispatcherTable } from "./dispatcher/dispatch.js";
 import { RunEventChannel, RunEventChannelLive } from "./pubsub/Channel.js";
@@ -16,7 +17,7 @@ import { StatusIcon } from "./render-ink/StatusIcon.js";
 import { ModuleHeader } from "./render-ink/ModuleHeader.js";
 import { TagColumns, tagUnion } from "./render-ink/TagColumns.js";
 import { ProjectRow } from "./render-ink/ProjectRow.js";
-import { SPINNER_FRAMES, SPINNER_FRAME_MS, spinnerFrame, spinnerFrameForTime } from "./render-ink/spinner.js";
+import { SPINNER_FRAMES, SPINNER_FRAME_MS, spinnerFrame } from "./render-ink/spinner.js";
 import { TestRow } from "./render-ink/TestRow.js";
 import { TrendLine } from "./render-ink/TrendLine.js";
 import { StreamApp } from "./render-ink/StreamApp.js";
@@ -33,7 +34,7 @@ import { ActionSeverity, CoverageFile, CoverageGap, CoverageMetric, CoverageRend
 *
 * @public
 */
-const CURRENT_UI_VERSION = "2.5.3";
+const CURRENT_UI_VERSION = "3.0.0";
 
 //#endregion
-export { ActionSeverity, CURRENT_UI_VERSION, CountColumns, CoverageBlock, CoverageFile, CoverageGap, CoverageMetric, CoverageRenderState, DURATION_CELL_WIDTH, FailureRecord, FailureSection, FailuresSection, ModuleHeader, ModuleRecord, ProjectRow, RenderState, RenderTotals, RunEvent, RunEventChannel, RunEventChannelLive, SPINNER_FRAMES, SPINNER_FRAME_MS, SUITE_LOAD_FAILURE_LABEL, StatusIcon, StreamApp, SuggestedActionRecord, SuggestedActions, TagColumns, TestRecord, TestRow, TrendLine, accumulateUntilFinished, buildFooter, classifyOutcome, classifyRunShape, dispatch, dispatchInk, dispatcherTable, dominantClassification, forEachRenderState, formatDisplayDuration, initialRenderState, publish, publishAll, reduceRenderState, reduceRenderStateAll, renderAgent, renderStateStream, spinnerFrame, spinnerFrameForTime, subscribeRaw, synthesizeFromAgentReport, synthesizeRunEvents, tagUnion };
+export { ActionSeverity, CURRENT_UI_VERSION, CountColumns, CoverageBlock, CoverageFile, CoverageGap, CoverageMetric, CoverageRenderState, DURATION_CELL_WIDTH, FailureRecord, FailureSection, FailuresSection, ModuleHeader, ModuleRecord, ProjectRow, RenderState, RenderTotals, RunEvent, RunEventChannel, RunEventChannelLive, SPINNER_FRAMES, SPINNER_FRAME_MS, SUITE_LOAD_FAILURE_LABEL, StatusIcon, StreamApp, SuggestedActionRecord, SuggestedActions, TagColumns, TestRecord, TestRow, TrendLine, VitestAgentStatus, VitestAgentTokens, accumulateUntilFinished, buildFooter, classifyOutcome, classifyRunShape, dispatch, dispatchInk, dispatcherTable, dominantClassification, forEachRenderState, formatDisplayDuration, initialRenderState, inkStyle, publish, publishAll, reduceRenderState, reduceRenderStateAll, renderAgent, renderStateStream, spinnerFrame, statusGlyph, statusInkStyle, subscribeRaw, synthesizeFromAgentReport, synthesizeRunEvents, tagUnion };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vitest-agent/ui",
-	"version": "2.5.3",
+	"version": "3.0.0",
 	"private": false,
 	"description": "Shared event-sourced renderer for vitest-agent. React Ink view for humans, plain-string view for agents, both fed by the same reducer over a RunEvent stream.",
 	"keywords": [
@@ -39,10 +39,14 @@
 		"./package.json": "./package.json"
 	},
 	"dependencies": {
-		"@vitest-agent/sdk": "5.1.3",
-		"effect": "4.0.0-rc.118"
+		"@vitest-agent/sdk": "5.2.0",
+		"effect": "^4.0.0"
 	},
 	"peerDependencies": {
+		"@effected/cli": "^0.11.0",
+		"@effected/env": "^0.1.0",
+		"@effected/glob": "^0.10.0",
+		"@effected/walker": "^0.15.0",
 		"ink": "^7.1.0",
 		"react": "^19.3.0"
 	},

package/render-agent.js

@@ -1,6 +1,17 @@
-import { formatDisplayDuration } from "./format-duration.js";
+import { formatTotalsLine } from "./counts.js";
+import { Fmt } from "@effected/cli";
 
 //#region src/render-agent.ts
+/**
+* Agent-mode renderer: produces a token-efficient final-frame string
+* from a fully-reduced `RenderState`.
+*
+* Output is intentionally separate from the Ink renderer — agents
+* benefit from a different layout than humans (no ANSI, no live
+* progress, no decoration overhead). The output is stable for stable
+* inputs: no timestamps, no derived "time ago" phrasing, no randomized
+* ordering.
+*/
 const DEFAULT_WIDTH = 80;
 const DEFAULT_MAX_GAPS = 3;
 const severityLabel = {
@@ -8,18 +19,11 @@ const severityLabel = {
 	warn: "warn",
 	blocker: "blocker"
 };
-const formatHeader = (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`);
-	if (state.unhandledErrors.length > 0) {
-		const noun = state.unhandledErrors.length === 1 ? "unhandled error" : "unhandled errors";
-		parts.push(`${state.unhandledErrors.length} ${noun}`);
-	}
-	return `Tests: ${parts.join(", ")} (${formatDisplayDuration(durationMs)})`;
-};
+const formatHeader = (state) => formatTotalsLine({
+	label: "Tests",
+	...state.totals,
+	unhandledErrors: state.unhandledErrors.length
+});
 const formatModulesSection = (state) => {
 	const modules = state.moduleOrder.map((path) => state.modules[path]).filter((m) => m !== void 0);
 	const { passCount, failCount, skipCount, timeoutCount } = state.totals;
@@ -27,9 +31,9 @@ const formatModulesSection = (state) => {
 	const collected = state.collectedModules ?? modules.length;
 	if (modules.length === 0) {
 		if (collected === 0) return null;
-		return `${collected} ${collected === 1 ? "module" : "modules"} all-passed.`;
+		return `${Fmt.plural(collected, "module")} all-passed.`;
 	}
-	if (modules.filter((m) => m.failCount > 0 || m.skipCount > 0).length === 0) return `${collected} ${collected === 1 ? "module" : "modules"} all-passed.`;
+	if (modules.filter((m) => m.failCount > 0 || m.skipCount > 0).length === 0) return `${Fmt.plural(collected, "module")} all-passed.`;
 	const lines = ["Modules:"];
 	for (const m of modules) {
 		const parts = [];
@@ -41,12 +45,7 @@ const formatModulesSection = (state) => {
 	}
 	return lines.join("\n");
 };
-const truncate = (line, max) => {
-	if (line.length <= max) return line;
-	const slice = max - 1;
-	if (slice <= 0) return "…";
-	return `${line.slice(0, slice)}…`;
-};
+const truncate = (line, max) => Fmt.truncate(line, max);
 const formatFailure = (f, width, includeStack) => {
 	const suite = f.suitePath.length > 0 ? `${f.suitePath.join(" > ")} > ` : "";
 	const classification = f.classification !== null ? ` [${f.classification}]` : "";
@@ -77,10 +76,8 @@ const formatUnhandledErrorsSection = (state, width, includeStack) => {
 	for (const err of state.unhandledErrors) lines.push(formatUnhandledError(err, width, includeStack));
 	return lines.join("\n");
 };
-const formatPercent = (n) => {
-	const rounded = Math.round(n * 10) / 10;
-	return Number.isInteger(rounded) ? `${rounded}%` : `${rounded}%`;
-};
+/** Coverage metrics arrive on istanbul's 0–100 scale. */
+const formatPercent = (n) => Fmt.percent(n, { scale: 100 });
 const formatCoverageSection = (state, maxGaps) => {
 	const cov = state.coverage;
 	if (cov === null) return null;
@@ -108,10 +105,7 @@ const formatCoverageSection = (state, maxGaps) => {
 			lines.push(`- ${g.file}${detail}`);
 		}
 		const omitted = cov.gaps.length - topN.length;
-		if (omitted > 0) {
-			const noun = omitted === 1 ? "gap" : "gaps";
-			lines.push(`- (+${omitted} more ${noun})`);
-		}
+		if (omitted > 0) lines.push(`- (+${Fmt.plural(omitted, "more gap", "more gaps")})`);
 	}
 	return lines.join("\n");
 };

package/render-ink/CountColumns.js

@@ -1,41 +1,42 @@
+import { VitestAgentTokens, inkStyle, statusGlyph, statusInkStyle } from "../theme.js";
 import { Text } from "ink";
+import { useGlyphs } from "@effected/cli/ui";
 import { jsxs } from "react/jsx-runtime";
 
 //#region src/render-ink/CountColumns.tsx
 /**
-* The four-outcome count columns for an aggregate row (a project or a
-* module): pass, fail, skip, timeout. All four always render — a zero
-* is dimmed, never omitted — so the columns line up across rows.
-*/
-/**
 * Fixed width of the duration cell that follows the count columns on an
 * aggregate row — sized for the formatter's widest common output
-* (`999.9ms`). Longer values overflow their row rather than truncate.
+* (`59m 59s`). Longer values overflow their row rather than truncate.
 *
 * @public
 */
 const DURATION_CELL_WIDTH = 7;
-const cell = (count, glyph, color) => /* @__PURE__ */ jsxs(Text, {
-	color: count > 0 ? color : "gray",
-	children: [String(count).padStart(4), glyph]
+const cell = (count, status, glyphs) => /* @__PURE__ */ jsxs(Text, {
+	...count > 0 ? statusInkStyle(status) : inkStyle(VitestAgentTokens.zero),
+	children: [String(count).padStart(4), statusGlyph(status, glyphs)]
 });
 /**
 * Renders four colored count columns (pass ✓, fail ✗, skip ↷, timeout ⧖)
 * for an aggregate row. Counts render right-aligned in fixed 4-digit cells so
 * columns align across rows; counts of 10,000+ overflow their row without
-* truncation. Zeros are dimmed; all four columns always appear.
+* truncation. Zeros are greyed; all four columns always appear. Glyphs and
+* colours come from `VitestAgentStatus` (skip is `muted`).
 *
 * @public
 */
-const CountColumns = ({ passCount, failCount, skipCount, timeoutCount }) => /* @__PURE__ */ jsxs(Text, { children: [
-	cell(passCount, "✓", "green"),
-	"  ",
-	cell(failCount, "✗", "red"),
-	"  ",
-	cell(skipCount, "↷", "yellow"),
-	"  ",
-	cell(timeoutCount, "⧖", "#e09a4e")
-] });
+const CountColumns = ({ passCount, failCount, skipCount, timeoutCount }) => {
+	const glyphs = useGlyphs();
+	return /* @__PURE__ */ jsxs(Text, { children: [
+		cell(passCount, "success", glyphs),
+		"  ",
+		cell(failCount, "failure", glyphs),
+		"  ",
+		cell(skipCount, "skip", glyphs),
+		"  ",
+		cell(timeoutCount, "timeout", glyphs)
+	] });
+};
 
 //#endregion
 export { CountColumns, DURATION_CELL_WIDTH };

package/render-ink/CoverageBlock.js

@@ -1,16 +1,22 @@
+import { inkStyle } from "../theme.js";
 import { Box, Text } from "ink";
+import { Fmt } from "@effected/cli";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/render-ink/CoverageBlock.tsx
+/**
+* Coverage section: per-metric percentage, threshold violations, top-N gaps.
+*/
 const METRIC_ORDER = [
 	"lines",
 	"branches",
 	"functions",
 	"statements"
 ];
-const formatPercent = (n) => {
-	return `${Math.round(n * 10) / 10}%`;
-};
+/** Coverage metrics arrive on istanbul's 0–100 scale. */
+const formatPercent = (n) => Fmt.percent(n, { scale: 100 });
+/** A metric below its threshold is a coverage threshold failure: the kit's `failure` token. */
+const FAILURE = inkStyle("failure");
 /**
 * Renders the coverage section: per-metric percentages, threshold
 * violations, and top-N gap entries sorted by missing line count.
@@ -35,7 +41,7 @@ const CoverageBlock = ({ coverage, maxGaps = 3 }) => {
 				return /* @__PURE__ */ jsxs(Box, { children: [
 					/* @__PURE__ */ jsx(Text, { children: `  ${metric}: ` }),
 					failing ? /* @__PURE__ */ jsx(Text, {
-						color: "red",
+						...FAILURE,
 						children: formatPercent(actual)
 					}) : /* @__PURE__ */ jsx(Text, { children: formatPercent(actual) }),
 					threshold !== void 0 ? /* @__PURE__ */ jsxs(Text, {
@@ -51,10 +57,10 @@ const CoverageBlock = ({ coverage, maxGaps = 3 }) => {
 			coverage.violations.length > 0 ? /* @__PURE__ */ jsxs(Box, {
 				flexDirection: "column",
 				children: [/* @__PURE__ */ jsx(Text, {
-					color: "red",
+					...FAILURE,
 					children: "Violations"
 				}), coverage.violations.map((v) => /* @__PURE__ */ jsx(Text, {
-					color: "red",
+					...FAILURE,
 					children: `  ${v.metric}: ${formatPercent(v.actual)} < ${formatPercent(v.expected)}`
 				}, v.metric))]
 			}) : null,
@@ -68,7 +74,7 @@ const CoverageBlock = ({ coverage, maxGaps = 3 }) => {
 					topGaps.map((g) => /* @__PURE__ */ jsxs(Text, { children: [`  ${g.file}`, g.uncoveredLines !== void 0 ? `: ${g.uncoveredLines}` : ""] }, g.file)),
 					elidedGaps > 0 ? /* @__PURE__ */ jsx(Text, {
 						dimColor: true,
-						children: `  (+${elidedGaps} more ${elidedGaps === 1 ? "gap" : "gaps"})`
+						children: `  (+${Fmt.plural(elidedGaps, "more gap", "more gaps")})`
 					}) : null
 				]
 			}) : null

package/render-ink/FailureSection.js

@@ -1,17 +1,24 @@
+import { inkStyle, statusGlyph, statusInkStyle } from "../theme.js";
 import { Box, Text } from "ink";
+import { useGlyphs } from "@effected/cli/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/render-ink/FailureSection.tsx
+/**
+* Failure list: one block per failed test with classification, message,
+* diff, and optionally stack trace.
+*/
 const FailureRow = ({ failure, includeStack }) => {
 	const suite = failure.suitePath.length > 0 ? `${failure.suitePath.join(" > ")} > ` : "";
 	const classification = failure.classification !== null ? ` [${failure.classification}]` : "";
+	const glyphs = useGlyphs();
 	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		children: [
 			/* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, { children: [
 				/* @__PURE__ */ jsx(Text, {
-					color: "red",
-					children: "✗"
+					...statusInkStyle("failure"),
+					children: statusGlyph("failure", glyphs)
 				}),
 				` ${failure.modulePath} > ${suite}${failure.testName}`,
 				failure.classification !== null ? /* @__PURE__ */ jsx(Text, {
@@ -20,17 +27,17 @@ const FailureRow = ({ failure, includeStack }) => {
 				}) : null
 			] }) }),
 			failure.error?.message !== void 0 ? /* @__PURE__ */ jsx(Text, {
-				color: "red",
+				...inkStyle("failure"),
 				children: `  ${failure.error.message.split("\n", 1)[0] ?? ""}`
 			}) : null,
 			failure.error?.diff !== void 0 ? failure.error.diff.split("\n").map((line, idx) => {
 				const key = `diff-${idx}`;
 				if (line.startsWith("-")) return /* @__PURE__ */ jsx(Text, {
-					color: "red",
+					...inkStyle("failure"),
 					children: `  ${line}`
 				}, key);
 				if (line.startsWith("+")) return /* @__PURE__ */ jsx(Text, {
-					color: "green",
+					...inkStyle("success"),
 					children: `  ${line}`
 				}, key);
 				return /* @__PURE__ */ jsx(Text, { children: `  ${line}` }, key);

package/render-ink/FailuresSection.js

@@ -1,7 +1,18 @@
+import { VitestAgentTokens, inkStyle, statusGlyph, statusInkStyle } from "../theme.js";
 import { Box, Text } from "ink";
+import { useGlyphs } from "@effected/cli/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/render-ink/FailuresSection.tsx
+/**
+* The capped failures block for aggregate-row shapes (workspace,
+* single-project) — the rows there are projects or modules and cannot
+* expand a per-test error inline, so the failures collect here.
+*
+* Each entry: a glyph (⧖ for a timed-out failure, ✗ otherwise), the
+* `module › suite › test` path, the classification tag when known, and
+* one indented line — the first line of the error message.
+*/
 const pathOf = (f) => {
 	return [
 		f.modulePath,
@@ -9,6 +20,7 @@ const pathOf = (f) => {
 		f.testName
 	].join(" › ");
 };
+const failureStatus = (f) => f.timedOut === true ? "timeout" : "failure";
 const firstLine = (message) => message.split("\n", 1)[0] ?? "";
 const FAILURE_VALUE_LIMIT = 200;
 /**
@@ -20,6 +32,7 @@ const FAILURE_VALUE_LIMIT = 200;
 const FailuresSection = ({ failures, limit }) => {
 	const shown = failures.slice(0, limit);
 	const overflow = failures.length - shown.length;
+	const glyphs = useGlyphs();
 	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		children: [
@@ -37,13 +50,13 @@ const FailuresSection = ({ failures, limit }) => {
 					/* @__PURE__ */ jsxs(Text, { children: [
 						"  ",
 						/* @__PURE__ */ jsx(Text, {
-							color: f.timedOut === true ? "#e09a4e" : "red",
-							children: f.timedOut === true ? "⧖" : "✗"
+							...statusInkStyle(failureStatus(f)),
+							children: statusGlyph(failureStatus(f), glyphs)
 						}),
 						" ",
 						pathOf(f),
 						f.classification !== null ? /* @__PURE__ */ jsxs(Text, {
-							color: "#c98ae0",
+							...inkStyle(VitestAgentTokens.classification),
 							children: [
 								" [",
 								f.classification,

package/render-ink/ProjectRow.js

@@ -1,3 +1,4 @@
+import { statusInkStyle } from "../theme.js";
 import { formatDisplayDuration } from "../format-duration.js";
 import { CountColumns, DURATION_CELL_WIDTH } from "./CountColumns.js";
 import { StatusIcon } from "./StatusIcon.js";
@@ -13,7 +14,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 */
 const projectGlyph = (counts, running, timedOut, frame) => {
 	if (running && !timedOut) return /* @__PURE__ */ jsx(Text, {
-		color: "yellow",
+		...statusInkStyle("running"),
 		children: frame
 	});
 	if (counts.failCount > 0) return /* @__PURE__ */ jsx(StatusIcon, { status: "failed" });

package/render-ink/StatusIcon.js

@@ -1,4 +1,6 @@
+import { statusGlyph, statusInkStyle } from "../theme.js";
 import { Text } from "ink";
+import { useGlyphs } from "@effected/cli/ui";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/render-ink/StatusIcon.tsx
@@ -8,37 +10,34 @@ import { jsx } from "react/jsx-runtime";
 * Ink-only primitive — no DOM-isms. Renders one colored character so
 * the surrounding row can keep its width budget predictable.
 */
-const GLYPH = {
-	passed: "✓",
-	failed: "✗",
-	skipped: "↷",
-	pending: "◯",
-	running: "…",
-	queued: "·",
-	finished: "✓",
-	threshold: "⚠",
-	"timed-out": "⧖"
-};
-const COLOR = {
-	passed: "green",
-	failed: "red",
-	skipped: "gray",
-	pending: "cyan",
-	running: "yellow",
-	queued: "gray",
-	finished: "green",
-	threshold: "yellow",
-	"timed-out": "#e09a4e"
+/**
+* Each icon kind's status in the shared vocabulary. `finished` is a pass;
+* `threshold` is a coverage threshold failure, which the kit ranks as a
+* `failure`, not a warning.
+*/
+const STATUS = {
+	passed: "success",
+	failed: "failure",
+	skipped: "skip",
+	pending: "pending",
+	running: "running",
+	queued: "queued",
+	finished: "success",
+	threshold: "failure",
+	"timed-out": "timeout"
 };
 /**
 * Renders a single colored status glyph for a test, module, or run.
 *
 * @public
 */
-const StatusIcon = ({ status }) => /* @__PURE__ */ jsx(Text, {
-	color: COLOR[status],
-	children: GLYPH[status]
-});
+const StatusIcon = ({ status }) => {
+	const glyphs = useGlyphs();
+	return /* @__PURE__ */ jsx(Text, {
+		...statusInkStyle(STATUS[status]),
+		children: statusGlyph(STATUS[status], glyphs)
+	});
+};
 
 //#endregion
 export { StatusIcon };