@vitest-agent/ui 2.5.2 → 3.0.0

package/render-ink/StreamApp.js

@@ -1,4 +1,5 @@
 import { classifyRunShape } from "../dispatcher/classify.js";
+import { VitestAgentTokens, inkStyle, statusGlyph, statusInkStyle } from "../theme.js";
 import { formatDisplayDuration } from "../format-duration.js";
 import { CountColumns, DURATION_CELL_WIDTH } from "./CountColumns.js";
 import { StatusIcon } from "./StatusIcon.js";
@@ -8,6 +9,8 @@ import { spinnerFrame } from "./spinner.js";
 import { TestRow } from "./TestRow.js";
 import { TrendLine } from "./TrendLine.js";
 import { Box, Text } from "ink";
+import { Fmt } from "@effected/cli";
+import { useGlyphs } from "@effected/cli/ui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/render-ink/StreamApp.tsx
@@ -118,7 +121,7 @@ const ModuleStreamRow = ({ module, nowMs, frame, nameWidth, timedOut, tagUnion:
 			});
 		} else glyph = /* @__PURE__ */ jsx(StatusIcon, { status: "timed-out" });
 	} else if (running) glyph = /* @__PURE__ */ jsx(Text, {
-		color: "yellow",
+		...statusInkStyle("running"),
 		children: frame
 	});
 	else glyph = /* @__PURE__ */ jsx(StatusIcon, { status: moduleIcon(module) });
@@ -182,47 +185,54 @@ const InlineError = ({ failure }) => {
 };
 const failureKey = (f) => `failure:${f.modulePath}::${f.suitePath.join("/")}::${f.testName}`;
 /** A process-level unhandled error, rendered in the aggregate Unhandled errors block. */
-const UnhandledErrorItem = ({ error }) => /* @__PURE__ */ jsxs(Box, {
-	flexDirection: "column",
-	children: [/* @__PURE__ */ jsxs(Text, { children: [
-		"  ",
-		/* @__PURE__ */ jsx(Text, {
-			color: "red",
-			children: "✗"
-		}),
-		" unhandled error"
-	] }), /* @__PURE__ */ jsxs(Text, {
-		dimColor: true,
-		children: ["      ", error.message.split("\n", 1)[0] ?? ""]
-	})]
-});
+const UnhandledErrorItem = ({ error }) => {
+	const glyphs = useGlyphs();
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [/* @__PURE__ */ jsxs(Text, { children: [
+			"  ",
+			/* @__PURE__ */ jsx(Text, {
+				...statusInkStyle("failure"),
+				children: statusGlyph("failure", glyphs)
+			}),
+			" unhandled error"
+		] }), /* @__PURE__ */ jsxs(Text, {
+			dimColor: true,
+			children: ["      ", error.message.split("\n", 1)[0] ?? ""]
+		})]
+	});
+};
 const testKey = (modulePath, t) => `test:${modulePath}::${t.suitePath.join("/")}::${t.testName}`;
 const failurePath = (f) => [
 	f.modulePath,
 	...f.suitePath,
 	f.testName
 ].join(" › ");
+const failureStatus = (f) => f.timedOut === true ? "timeout" : "failure";
 /** A failure entry rendered in the Live region. */
-const FailureItem = ({ failure }) => /* @__PURE__ */ jsxs(Box, {
-	flexDirection: "column",
-	children: [/* @__PURE__ */ jsxs(Text, { children: [
-		"  ",
-		/* @__PURE__ */ jsx(Text, {
-			color: failure.timedOut === true ? "#e09a4e" : "red",
-			children: failure.timedOut === true ? "⧖" : "✗"
-		}),
-		" ",
-		failurePath(failure),
-		failure.classification !== null ? /* @__PURE__ */ jsxs(Text, {
-			color: "#c98ae0",
-			children: [
-				" [",
-				failure.classification,
-				"]"
-			]
-		}) : null
-	] }), /* @__PURE__ */ jsx(InlineError, { failure })]
-});
+const FailureItem = ({ failure }) => {
+	const glyphs = useGlyphs();
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [/* @__PURE__ */ jsxs(Text, { children: [
+			"  ",
+			/* @__PURE__ */ jsx(Text, {
+				...statusInkStyle(failureStatus(failure)),
+				children: statusGlyph(failureStatus(failure), glyphs)
+			}),
+			" ",
+			failurePath(failure),
+			failure.classification !== null ? /* @__PURE__ */ jsxs(Text, {
+				...inkStyle(VitestAgentTokens.classification),
+				children: [
+					" [",
+					failure.classification,
+					"]"
+				]
+			}) : null
+		] }), /* @__PURE__ */ jsx(InlineError, { failure })]
+	});
+};
 /**
 * The bottom `Total:` rollup line. In the workspace view `labelWidth`
 * pads the label to the project-row prefix width so the count columns
@@ -245,9 +255,15 @@ const TotalsLine = ({ totals, labelWidth }) => /* @__PURE__ */ jsxs(Text, { chil
 		children: [" ", formatDisplayDuration(totals.durationMs).padStart(7)]
 	})
 ] });
+/**
+* The coverage judgment. A threshold violation is a `failure` (the kit's
+* decision: threshold failure is ✗, only a target shortfall is ⚠).
+*/
 const CoverageItem = ({ state }) => {
 	if (state.coverage === null) return null;
-	const clean = state.coverage.violations.length === 0;
+	const violations = state.coverage.violations.length;
+	const status = violations === 0 ? "success" : "failure";
+	const glyphs = useGlyphs();
 	return /* @__PURE__ */ jsxs(Text, { children: [
 		/* @__PURE__ */ jsx(Text, {
 			bold: true,
@@ -255,11 +271,11 @@ const CoverageItem = ({ state }) => {
 		}),
 		" ",
 		/* @__PURE__ */ jsx(Text, {
-			color: clean ? "green" : "yellow",
-			children: clean ? "✓" : "⚠"
+			...statusInkStyle(status),
+			children: statusGlyph(status, glyphs)
 		}),
 		" ",
-		clean ? "all metrics meet thresholds" : `${state.coverage.violations.length} threshold violation(s)`
+		violations === 0 ? "all metrics meet thresholds" : Fmt.plural(violations, "threshold violation")
 	] });
 };
 const samePath = (a, b) => {
@@ -273,7 +289,7 @@ const samePath = (a, b) => {
 * run picture — all rows in discovery order, with running rows capped
 * at MAX_LIVE_RUNNING_ROWS and finished rows always shown.
 */
-const liveRegion = (state, shape, nowMs, frame) => {
+const liveRegion = (state, shape, nowMs, frame, glyphs) => {
 	const groups = groupByProject(state);
 	const timedOut = state.phase === "timed-out";
 	const finished = state.phase === "finished" || state.phase === "timed-out";
@@ -287,14 +303,14 @@ const liveRegion = (state, shape, nowMs, frame) => {
 	}) : null;
 	if (shape === "single-test") {
 		const sole = ordered[0];
-		if (sole === void 0 || sole.tests.length === 0) return /* @__PURE__ */ jsx(Text, {
+		if (sole === void 0 || sole.tests.length === 0) return /* @__PURE__ */ jsxs(Text, {
 			dimColor: true,
-			children: "discovering tests…"
+			children: ["discovering tests", glyphs.ellipsis]
 		});
 		const only = sole.tests[0];
-		if (only === void 0) return /* @__PURE__ */ jsx(Text, {
+		if (only === void 0) return /* @__PURE__ */ jsxs(Text, {
 			dimColor: true,
-			children: "discovering tests…"
+			children: ["discovering tests", glyphs.ellipsis]
 		});
 		const failure = only.status === "failed" || only.status === "timed-out" ? state.failures.find((f) => f.testName === only.testName && f.modulePath === sole.modulePath && samePath(f.suitePath, only.suitePath)) : void 0;
 		return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -306,9 +322,9 @@ const liveRegion = (state, shape, nowMs, frame) => {
 			unhandledErrorsSection
 		] });
 	}
-	if (groups.length === 0) return /* @__PURE__ */ jsx(Text, {
+	if (groups.length === 0) return /* @__PURE__ */ jsxs(Text, {
 		dimColor: true,
-		children: "discovering tests…"
+		children: ["discovering tests", glyphs.ellipsis]
 	});
 	const failuresSection = state.failures.length > 0 ? /* @__PURE__ */ jsx(Box, {
 		flexDirection: "column",
@@ -318,10 +334,10 @@ const liveRegion = (state, shape, nowMs, frame) => {
 	const trendItem = state.trend !== null ? /* @__PURE__ */ jsx(TrendLine, { trend: state.trend }) : null;
 	const totalsItem = (labelWidth) => /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
-		children: [finished && timedOut ? /* @__PURE__ */ jsx(Text, {
-			color: "#e09a4e",
+		children: [finished && timedOut ? /* @__PURE__ */ jsxs(Text, {
+			...statusInkStyle("timeout"),
 			bold: true,
-			children: "⧖ Run timed out"
+			children: [statusGlyph("timeout", glyphs), " Run timed out"]
 		}) : null, /* @__PURE__ */ jsx(TotalsLine, {
 			totals: state.totals,
 			labelWidth
@@ -379,7 +395,9 @@ const liveRegion = (state, shape, nowMs, frame) => {
 			runningOverflow > 0 ? /* @__PURE__ */ jsxs(Text, {
 				dimColor: true,
 				children: [
-					" … and ",
+					" ",
+					glyphs.ellipsis,
+					" and ",
 					runningOverflow,
 					" more running"
 				]
@@ -430,7 +448,9 @@ const liveRegion = (state, shape, nowMs, frame) => {
 			runningOverflow > 0 ? /* @__PURE__ */ jsxs(Text, {
 				dimColor: true,
 				children: [
-					" … and ",
+					" ",
+					glyphs.ellipsis,
+					" and ",
 					runningOverflow,
 					" more running"
 				]
@@ -443,9 +463,9 @@ const liveRegion = (state, shape, nowMs, frame) => {
 		] });
 	}
 	const sole = ordered[0];
-	if (sole === void 0) return /* @__PURE__ */ jsx(Text, {
+	if (sole === void 0) return /* @__PURE__ */ jsxs(Text, {
 		dimColor: true,
-		children: "discovering tests…"
+		children: ["discovering tests", glyphs.ellipsis]
 	});
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Text, {
@@ -483,10 +503,11 @@ const liveRegion = (state, shape, nowMs, frame) => {
 */
 const StreamApp = ({ state, frameIndex, nowMs }) => {
 	const now = nowMs ?? Date.now();
-	const frame = spinnerFrame(frameIndex);
+	const glyphs = useGlyphs();
+	const frame = spinnerFrame(frameIndex, glyphs);
 	const projects = groupByProject(state).map((g) => buildProjectSummary(g.name, sumCounts(g.modules)));
 	const shape = classifyRunShape(state, projects);
-	const liveContent = liveRegion(state, shape, now, frame);
+	const liveContent = liveRegion(state, shape, now, frame, glyphs);
 	return /* @__PURE__ */ jsx(Box, {
 		flexDirection: "column",
 		children: liveContent

package/render-ink/SuggestedActions.js

@@ -1,11 +1,13 @@
+import { inkStyle } from "../theme.js";
 import { Box, Text } from "ink";
+import { Token } from "@effected/cli";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/render-ink/SuggestedActions.tsx
-const SEVERITY_COLOR = {
-	info: "blue",
-	warn: "yellow",
-	blocker: "red"
+const SEVERITY_TOKEN = {
+	info: Token.named("blue"),
+	warn: "warning",
+	blocker: "failure"
 };
 /**
 * Renders the suggested-actions queue as severity-prefixed rows with
@@ -24,7 +26,7 @@ const SuggestedActions = ({ actions }) => {
 			flexDirection: "column",
 			children: [/* @__PURE__ */ jsxs(Box, { children: [
 				/* @__PURE__ */ jsx(Text, {
-					color: SEVERITY_COLOR[action.severity],
+					...inkStyle(SEVERITY_TOKEN[action.severity]),
 					bold: true,
 					children: `  ${action.severity}: `
 				}),

package/render-ink/TagColumns.js

@@ -1,3 +1,4 @@
+import { VitestAgentTokens, inkStyle } from "../theme.js";
 import { Text } from "ink";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -34,7 +35,7 @@ const TagColumns = ({ tags, counts }) => {
 	return /* @__PURE__ */ jsx(Text, { children: tags.map((tag, i) => {
 		const count = counts?.[tag] ?? 0;
 		return /* @__PURE__ */ jsxs(Text, {
-			color: count > 0 ? "cyan" : "gray",
+			...inkStyle(count > 0 ? VitestAgentTokens.tag : VitestAgentTokens.zero),
 			children: [
 				i > 0 ? "  " : "",
 				tag,

package/render-ink/TrendLine.js

@@ -1,14 +1,14 @@
+import { VitestAgentTokens, inkStyle } from "../theme.js";
 import { Text } from "ink";
+import { Fmt } from "@effected/cli";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/render-ink/TrendLine.tsx
-/**
-* The one-line trend signal — `Trend: <direction> (<N> runs)`.
-*/
-const COLOR = {
-	improving: "green",
-	regressing: "red",
-	stable: "gray"
+/** A regressing trend is a `warning`, not a failure (the kit's drift decision). */
+const TOKEN = {
+	improving: "success",
+	regressing: "warning",
+	stable: VitestAgentTokens.stable
 };
 /**
 * Renders the one-line trend signal: direction (colored) and run count.
@@ -16,7 +16,7 @@ const COLOR = {
 * @public
 */
 const TrendLine = ({ trend }) => {
-	const runs = trend.runCount === 1 ? "1 run" : `${trend.runCount} runs`;
+	const runs = Fmt.plural(trend.runCount, "run");
 	return /* @__PURE__ */ jsxs(Text, { children: [
 		/* @__PURE__ */ jsx(Text, {
 			bold: true,
@@ -24,7 +24,7 @@ const TrendLine = ({ trend }) => {
 		}),
 		" ",
 		/* @__PURE__ */ jsx(Text, {
-			color: COLOR[trend.direction],
+			...inkStyle(TOKEN[trend.direction]),
 			children: trend.direction
 		}),
 		/* @__PURE__ */ jsxs(Text, {

package/render-ink/index.js

@@ -6,10 +6,10 @@ import { StatusIcon } from "./StatusIcon.js";
 import { ModuleHeader } from "./ModuleHeader.js";
 import { TagColumns, tagUnion } from "./TagColumns.js";
 import { ProjectRow } from "./ProjectRow.js";
-import { SPINNER_FRAMES, SPINNER_FRAME_MS, spinnerFrame, spinnerFrameForTime } from "./spinner.js";
+import { SPINNER_FRAMES, SPINNER_FRAME_MS, spinnerFrame } from "./spinner.js";
 import { TestRow } from "./TestRow.js";
 import { TrendLine } from "./TrendLine.js";
 import { StreamApp } from "./StreamApp.js";
 import { SuggestedActions } from "./SuggestedActions.js";
 
-export { CountColumns, CoverageBlock, DURATION_CELL_WIDTH, FailureSection, FailuresSection, ModuleHeader, ProjectRow, SPINNER_FRAMES, SPINNER_FRAME_MS, StatusIcon, StreamApp, SuggestedActions, TagColumns, TestRow, TrendLine, spinnerFrame, spinnerFrameForTime, tagUnion };
+export { CountColumns, CoverageBlock, DURATION_CELL_WIDTH, FailureSection, FailuresSection, ModuleHeader, ProjectRow, SPINNER_FRAMES, SPINNER_FRAME_MS, StatusIcon, StreamApp, SuggestedActions, TagColumns, TestRow, TrendLine, spinnerFrame, tagUnion };

package/render-ink/spinner.js

@@ -1,63 +1,34 @@
+import { Glyphs } from "@effected/cli";
+
 //#region src/render-ink/spinner.ts
 /**
-* Hand-rolled Braille spinner for the `stream` live renderer.
-*
-* No `ink-spinner` dependency — that package is a thin wrapper over the
-* same ten Braille characters plus a timer. The `stream` renderer
-* already needs a frame clock for the ticking elapsed column, so the
-* timer is shared and only the frame array lives here.
-*
-* The frame index is presentation state: it is derived from wall-clock
-* time by `createLiveInk` and passed to `StreamApp` as a prop. It never
-* enters the event-sourced `RenderState`.
-*/
-/**
-* The ten Braille spinner frames, in animation order.
+* The Unicode spinner frames, in animation order (`Glyphs.unicode.spinner`).
 *
 * @public
 */
-const SPINNER_FRAMES = [
-	"⠋",
-	"⠙",
-	"⠹",
-	"⠸",
-	"⠼",
-	"⠴",
-	"⠦",
-	"⠧",
-	"⠇",
-	"⠏"
-];
+const SPINNER_FRAMES = Glyphs.unicode.spinner;
 /**
-* How long each spinner frame is held, in milliseconds.
+* How long each spinner frame is held, in milliseconds
+* (`Glyphs.unicode.spinnerIntervalMs`).
 *
 * @public
 */
-const SPINNER_FRAME_MS = 80;
+const SPINNER_FRAME_MS = Glyphs.unicode.spinnerIntervalMs;
 /**
 * Resolve the spinner glyph for a frame index. The index wraps modulo
 * the frame count and tolerates negative values, so a wall-clock-derived
 * index is always valid.
 *
 * @param index - the frame index (wraps modulo frame count)
-* @returns the Braille glyph for the given frame
+* @param glyphs - the glyph set whose frames to draw; Unicode by default
+* @returns the spinner glyph for the given frame
 * @public
 */
-const spinnerFrame = (index) => {
-	const count = SPINNER_FRAMES.length;
-	const wrapped = (Math.trunc(index) % count + count) % count;
-	return SPINNER_FRAMES[wrapped];
+const spinnerFrame = (index, glyphs = Glyphs.unicode) => {
+	const frames = glyphs.spinner;
+	const count = frames.length;
+	return frames[(Math.trunc(index) % count + count) % count] ?? "";
 };
-/**
-* Derive the spinner frame index from a wall-clock timestamp. Using the
-* clock — rather than a monotonic counter — keeps the animation correct
-* across watch-mode remounts with no extra closure state to reset.
-*
-* @param nowMs - current wall-clock time in milliseconds
-* @returns the frame index for the given timestamp
-* @public
-*/
-const spinnerFrameForTime = (nowMs) => Math.floor(nowMs / 80);
 
 //#endregion
-export { SPINNER_FRAMES, SPINNER_FRAME_MS, spinnerFrame, spinnerFrameForTime };
+export { SPINNER_FRAMES, SPINNER_FRAME_MS, spinnerFrame };

package/theme.js

@@ -0,0 +1,82 @@
+import { Glyphs, Status, Token } from "@effected/cli";
+import { inkProps } from "@effected/cli/ui";
+
+//#region src/theme.ts
+/**
+* The status vocabulary every vitest-agent render path draws from.
+*
+* @remarks
+* Ranks slot the run statuses into the core ladder: `queued` (25) and
+* `running` (35) sit among the not-yet-decided statuses, and `timeout` (85)
+* is just under `failure` (90), so `Status.worst` over a project's
+* outcomes reads failure, then timeout, then warning.
+*
+* @public
+*/
+const VitestAgentStatus = Status.extend({
+	timeout: {
+		glyph: "⧖",
+		ascii: "[time]",
+		token: Token.hex("#e09a4e"),
+		rank: 85
+	},
+	running: {
+		glyph: "…",
+		ascii: "[..]",
+		token: Token.named("yellow"),
+		rank: 35
+	},
+	queued: {
+		glyph: "·",
+		ascii: "[.]",
+		token: Token.named("blackBright"),
+		rank: 25
+	}
+});
+/**
+* Named accents that are not statuses.
+*
+* @public
+*/
+const VitestAgentTokens = {
+	/** The `[flaky]` / `[new-failure]` classification tag on a failure line. */
+	classification: Token.hex("#c98ae0"),
+	/** A zero in a count column: present for alignment, not signal. */
+	zero: Token.named("blackBright"),
+	/** The `stable` trend direction. */
+	stable: Token.named("blackBright"),
+	/** A non-zero tag count. */
+	tag: Token.named("cyan")
+};
+/**
+* Ink `<Text>` props for a semantic token or an explicit style.
+*
+* @remarks
+* Resolves the token through the kit's pure `Token.resolve` and maps the
+* `Style` with the kit's `inkProps`. No colour level reaches this call
+* site, so `inkProps` with no level emits every prop and Ink's own chalk
+* level, set by `CliUi.live` or `CliUi.context`, gates what is drawn.
+*
+* @param token - a token name or a `Style`
+* @public
+*/
+const inkStyle = (token) => inkProps(Token.resolve(token));
+/**
+* The glyph of a status in a glyph set: its Unicode glyph, or its ASCII
+* fallback when `glyphs` is the kit's ASCII set (the kit's `Status.glyph`).
+*
+* @param name - a status in {@link VitestAgentStatus}
+* @param glyphs - the glyph set, from `Glyphs.select`; Unicode by default
+* @public
+*/
+const statusGlyph = (name, glyphs = Glyphs.unicode) => VitestAgentStatus.glyph(name, glyphs);
+/**
+* Ink `<Text>` props for a status's glyph.
+*
+* @param name - a status in {@link VitestAgentStatus}
+* @public
+*/
+const statusInkStyle = (name) => inkStyle(VitestAgentStatus.def(name).token);
+
+//#endregion
+export { VitestAgentStatus, VitestAgentTokens, inkStyle, statusGlyph, statusInkStyle };