@gavin-hu/my-pi-agent 0.8.1 → 0.10.0

package/extensions/bytefly/panel/commands.ts

@@ -1,12 +1,12 @@
 /**
- * The `/bytefly` surface: one runner that opens the unified panel, with
- * `/extensions` and `/doctor` registered against the same handler.
+ * The `/bytefly` surface: one command, `/bytefly [doctor] [extension] [refresh]`.
  *
- * In `tui` mode it mounts the dock screen; every other mode prints the same
- * information as text. Discovery, the doctor probe, and the dirty-to-reload
- * confirm all live here, so the three command names cannot drift. The doctor
- * runtime is injected by the composition root, so `run_doctor` and the screen
- * keep reading one session cache.
+ * Without `doctor` it opens the extension screen: the dock in `tui`, the
+ * grouped listing elsewhere. With `doctor` it produces the doctor report — the
+ * same text `run_doctor` returns — for the whole set or one named extension; in
+ * `tui` the report is the dock screen. Discovery, the doctor probe, and the
+ * dirty-to-reload confirm all live here. The doctor runtime is injected by the
+ * composition root, so `run_doctor` and the screen keep reading one cache.
  */
 
 import type { ExtensionAPI, ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
@@ -14,10 +14,10 @@ import { getAgentDir } from "@earendil-works/pi-coding-agent";
 import { sanitizeLine } from "../../../lib/format.ts";
 import { withRailsSuppressed } from "../../../lib/rails.ts";
 import { REQUIREMENTS, type ExtensionReport } from "../../../lib/requirements.ts";
-import { formatExtension, hasProblems } from "../doctor/format.ts";
+import { formatExtension, formatReport, hasProblems } from "../doctor/format.ts";
 import type { DoctorRuntime } from "../doctor/runtime.ts";
 import { discoverExtensions, type DiscoveryDeps } from "../picker/discovery.ts";
-import { createExtensionsPickerRuntime } from "../picker/runtime.ts";
+import { createExtensionsPickerRuntime, type ExtensionsPickerRuntime } from "../picker/runtime.ts";
 import type { Discovery } from "../picker/types.ts";
 import { formatListing } from "./format.ts";
 import { buildPanelModel, extensionName } from "./join.ts";
@@ -42,20 +42,63 @@ function selectableNames(discovery: Discovery): Set<string> {
 	return names;
 }
 
-/** The shared completion list: every declared extension, then `refresh`. */
+/** Argument completions: the `doctor` subcommand, every declared extension, then `refresh`. */
 function completions(prefix: string): Array<{ value: string; label: string }> | null {
-	const options = [...Object.keys(REQUIREMENTS), "refresh"].filter((option) => option.startsWith(prefix));
+	const options = ["doctor", ...Object.keys(REQUIREMENTS), "refresh"].filter((option) => option.startsWith(prefix));
 	return options.length > 0 ? options.map((value) => ({ value, label: value })) : null;
 }
 
-/** Register `/bytefly`, `/extensions`, and `/doctor` against one runner. */
+/** Which bytefly surface the arguments select. */
+type PanelMode = "screen" | "doctor";
+
+/** `/bytefly [doctor] [extension] [refresh]`, parsed. */
+interface PanelArgs {
+	mode: PanelMode;
+	/** The extension to narrow to, when one is named. */
+	name?: string;
+	/** Re-probe the doctor instead of reusing the session cache. */
+	refresh: boolean;
+}
+
+/** Parse `/bytefly [doctor] [extension] [refresh]`; extra tokens are ignored. */
+function parseArgs(args: string): PanelArgs {
+	const parts = args.trim().split(/\s+/).filter(Boolean);
+	const refresh = parts.includes("refresh");
+	const rest = parts.filter((part) => part !== "refresh");
+	const mode: PanelMode = rest[0] === "doctor" ? "doctor" : "screen";
+	return { mode, name: rest[mode === "doctor" ? 1 : 0], refresh };
+}
+
+/**
+ * Print one extension's full findings, or say why it has none. The screen's
+ * named form and the `doctor` subcommand share this text path.
+ */
+function notifyExtension(
+	ctx: ExtensionCommandContext,
+	name: string,
+	reports: readonly ExtensionReport[],
+	runtime: ExtensionsPickerRuntime,
+): void {
+	const report = reports.find((entry) => entry.extension === name);
+	if (report) {
+		ctx.ui.notify(formatExtension(report), hasProblems([report]) ? "warning" : "info");
+		return;
+	}
+	const item = runtime.items().find((entry) => extensionName(entry.path) === name);
+	ctx.ui.notify(
+		item
+			? `bytefly: ${sanitizeLine(item.path)} — no doctor report`
+			: `bytefly: no extension named "${sanitizeLine(name)}"`,
+		"info",
+	);
+}
+
+/** Register the single `/bytefly` command. */
 export function registerPanel(pi: ExtensionAPI, deps: PanelCommandDeps): void {
 	const discover = deps.discover ?? discoverExtensions;
 
 	const handler = async (args: string, ctx: ExtensionCommandContext): Promise<void> => {
-		const parts = args.trim().split(/\s+/).filter(Boolean);
-		const refresh = parts.includes("refresh");
-		const name = parts.find((part) => part !== "refresh");
+		const { mode, name, refresh } = parseArgs(args);
 
 		const cwd = ctx.cwd ?? process.cwd();
 		const agentDir = getAgentDir();
@@ -88,18 +131,11 @@ export function registerPanel(pi: ExtensionAPI, deps: PanelCommandDeps): void {
 
 		if (ctx.mode !== "tui") {
 			if (name !== undefined) {
-				const report = reports.find((entry) => entry.extension === name);
-				if (report) {
-					ctx.ui.notify(formatExtension(report), hasProblems([report]) ? "warning" : "info");
-					return;
-				}
-				const item = runtime.items().find((entry) => extensionName(entry.path) === name);
-				ctx.ui.notify(
-					item
-						? `bytefly: ${sanitizeLine(item.path)} — no doctor report`
-						: `bytefly: no extension named "${sanitizeLine(name)}"`,
-					"info",
-				);
+				notifyExtension(ctx, name, reports, runtime);
+				return;
+			}
+			if (mode === "doctor") {
+				ctx.ui.notify(formatReport(reports), hasProblems(reports) ? "warning" : "info");
 				return;
 			}
 			const model = buildPanelModel({ items: runtime.items(), reports, agentDir });
@@ -136,12 +172,10 @@ export function registerPanel(pi: ExtensionAPI, deps: PanelCommandDeps): void {
 		if (reload) await ctx.reload();
 	};
 
-	const descriptions: Array<[string, string]> = [
-		["bytefly", "Open the bytefly extension screen: /bytefly [extension] [refresh]"],
-		["extensions", "List and enable/disable extensions"],
-		["doctor", "Check extensions and enable or disable one: /doctor [extension] [refresh]"],
-	];
-	for (const [command, description] of descriptions) {
-		pi.registerCommand(command, { description, getArgumentCompletions: completions, handler });
-	}
+	pi.registerCommand("bytefly", {
+		description:
+			"Open the bytefly extension screen: /bytefly [extension] [refresh]; /bytefly doctor [extension] [refresh] prints the doctor report",
+		getArgumentCompletions: completions,
+		handler,
+	});
 }

package/extensions/bytefly/panel/format.ts

@@ -8,18 +8,18 @@
  * came from a probe is sanitized by `doctor/format.ts`.
  */
 
-import type { ThemeColor } from "@earendil-works/pi-coding-agent";
-import { GLYPHS } from "../../../lib/ui.ts";
+import type { TuiRole } from "../../../lib/tui/tokens.ts";
+import { GLYPHS } from "../../../lib/tui/glyphs.ts";
 import { reportSeverity, reportSummary } from "../doctor/format.ts";
 import type { PanelModel, PanelRow } from "./types.ts";
 
 /** The settings scope the screen shows. */
 export type PanelScope = "global" | "project";
 
-/** One segment of the headline, with its semantic color for the TUI. */
+/** One segment of the headline, with its design role for the TUI. */
 export interface SummarySegment {
 	text: string;
-	color: ThemeColor;
+	color: TuiRole;
 }
 
 /** Row and problem counts over a model. */
@@ -67,19 +67,19 @@ export function summarySegments(model: PanelModel, scope: PanelScope, options: S
 	const counts = panelCounts(model);
 	const segments: SummarySegment[] = [{ text: scope === "global" ? "Global" : "Project", color: "accent" }];
 	if (options.filter !== undefined) {
-		segments.push({ text: `${options.filter} only`, color: "muted" });
+		segments.push({ text: `${options.filter} only`, color: "meta" });
 	} else {
 		const noun = options.compact ? "ext" : counts.extensions === 1 ? "extension" : "extensions";
-		segments.push({ text: `${counts.extensions} ${noun}`, color: "muted" });
+		segments.push({ text: `${counts.extensions} ${noun}`, color: "meta" });
 		if (counts.disabled > 0) {
-			segments.push({ text: `${counts.disabled} ${options.compact ? "off" : "disabled"}`, color: "muted" });
+			segments.push({ text: `${counts.disabled} ${options.compact ? "off" : "disabled"}`, color: "meta" });
 		}
 	}
 	const problems: string[] = [];
 	if (counts.missing > 0) problems.push(`${counts.missing} missing`);
 	if (counts.degraded > 0) problems.push(`${counts.degraded} degraded`);
 	if (problems.length > 0) {
-		segments.push({ text: problems.join(", "), color: counts.missing > 0 ? "error" : "warning" });
+		segments.push({ text: problems.join(", "), color: counts.missing > 0 ? "bad" : "warn" });
 	}
 	return segments;
 }

package/extensions/bytefly/panel/tui.ts

@@ -5,33 +5,29 @@
  * The component is derived: it rebuilds the merged model from the picker
  * runtime and the current reports on every render, keeps the focused row's key
  * across rebuilds, and requests a repaint only after an input changes state.
- * Screen chrome and scroll math come from `lib/tui.ts` and `lib/list-cursor.ts`.
- * A row without a report renders no glyph and no summary, never a false `ok`.
+ * The screen is drawn from the design system — a label-first `titleRule`, one
+ * `listRow` grammar, one `checkbox` — and its scroll math from
+ * `lib/tui/cursor.ts`. A row without a report renders no glyph and no summary,
+ * never a false `ok`.
  */
 
 import type { Theme } from "@earendil-works/pi-coding-agent";
-import {
-	Key,
-	matchesKey,
-	truncateToWidth,
-	visibleWidth,
-	type Component,
-	type TuiMouseEvent,
-	type TuiMouseEventResult,
-} from "@earendil-works/pi-tui";
+import { Key, matchesKey, type Component, type TuiMouseEvent, type TuiMouseEventResult } from "@earendil-works/pi-tui";
 import { sanitizeLine } from "../../../lib/format.ts";
-import {
-	fitRows,
-	formatRange,
-	isCloseKey,
-	ListCursor,
-	navIntent,
-	selectionMarker,
-	wheelDelta,
-} from "../../../lib/list-cursor.ts";
+import { dockListFrame, screenHint, type ViewportRowsSource } from "../../../lib/tui/chrome.ts";
+import { clip, fitCells } from "../../../lib/tui/columns.ts";
+import { fitRows, formatRange, isCloseKey, ListCursor, navIntent, wheelDelta } from "../../../lib/tui/cursor.ts";
+import { checkbox, emptyState, listRow } from "../../../lib/tui/rows.ts";
+import { titleRule } from "../../../lib/tui/rules.ts";
+import { paint } from "../../../lib/tui/tokens.ts";
 import type { ExtensionReport } from "../../../lib/requirements.ts";
-import { dockListFrame, screenHint, type ViewportRowsSource } from "../../../lib/tui.ts";
-import { detailLines as reportDetailLines, reportSeverity, reportSummary, severityGlyph } from "../doctor/format.ts";
+import {
+	detailLines as reportDetailLines,
+	reportSeverity,
+	reportSummary,
+	severityGlyphChar,
+	severityRole,
+} from "../doctor/format.ts";
 import type { ExtensionsPickerRuntime } from "../picker/runtime.ts";
 import { summarySegments } from "./format.ts";
 import { buildPanelModel } from "./join.ts";
@@ -283,50 +279,37 @@ export class PanelComponent implements Component {
 		return { handled: true };
 	}
 
+	/** The headline: whole segments only, so a narrow screen drops a count. */
 	private summary(width: number, model: PanelModel): string {
 		const segments = summarySegments(model, this.options.runtime.scope(), {
 			filter: this.options.filter,
 			compact: width < 72,
 		});
-		const separator = this.theme.fg("dim", " · ");
-		const kept: string[] = [];
-		for (const segment of segments) {
-			const styled = this.theme.fg(segment.color, segment.text);
-			if (kept.length > 0 && visibleWidth(`  ${[...kept, styled].join(separator)}`) > width) break;
-			kept.push(styled);
-		}
-		return truncateToWidth(`  ${kept.join(separator)}`, width, "…");
+		const separator = paint(this.theme, "faint", " · ");
+		const styled = segments.map((segment) => paint(this.theme, segment.color, segment.text));
+		return clip(`  ${fitCells(styled, Math.max(1, width - 2), separator)}`, width);
 	}
 
 	private groupLine(entry: Extract<PanelEntry, { kind: "group" }>, width: number): string {
-		const label = this.theme.fg("muted", sanitizeLine(entry.label));
-		const count = this.theme.fg("dim", `(${entry.count})`);
-		return truncateToWidth(`  ${label} ${count}`, width, "…");
+		const label = paint(this.theme, "meta", sanitizeLine(entry.label));
+		const count = paint(this.theme, "faint", `(${entry.count})`);
+		return clip(`  ${label} ${count}`, width);
 	}
 
 	private rowLine(row: PanelRow, selected: boolean, width: number): string {
-		const checkbox = row.item
-			? row.item.enabled
-				? this.theme.fg("success", "[x]")
-				: this.theme.fg("dim", "[ ]")
-			: this.theme.fg("dim", "   ");
 		const severity = row.report ? reportSeverity(row.report) : undefined;
-		const glyph = severity ? severityGlyph(severity, this.theme) : " ";
-		const label = sanitizeLine(row.label);
-		const styled = selected
-			? this.theme.fg("accent", label)
-			: row.item && !row.item.enabled
-				? this.theme.fg("dim", label)
-				: label;
-		const summary = row.report ? reportSummary(row.report) : "";
-		const head = `${selectionMarker(this.theme, selected)}${checkbox} ${glyph} `;
-		if (!summary) return truncateToWidth(`${head}${styled}`, width, "…");
-
-		const available = Math.max(1, width - visibleWidth(head) - visibleWidth(summary) - 1);
-		const name = truncateToWidth(styled, available, "…");
-		const pad = " ".repeat(Math.max(0, available - visibleWidth(name)));
-		const tone = severity === "missing" ? "error" : severity === "degraded" ? "warning" : "dim";
-		return truncateToWidth(`${head}${name}${pad} ${this.theme.fg(tone, summary)}`, width, "…");
+		return listRow(this.theme, width, {
+			selected,
+			// A reported-only row has no enable pattern, but still reserves the box
+			// column so the list stays aligned.
+			leading: row.item ? checkbox(this.theme, row.item.enabled) : " ",
+			glyph: severity ? severityGlyphChar(severity) : " ",
+			glyphRole: severity ? severityRole(severity) : "faint",
+			label: sanitizeLine(row.label),
+			labelRole: selected ? "accent" : row.item && !row.item.enabled ? "faint" : "label",
+			trailing: row.report ? reportSummary(row.report) : undefined,
+			trailingRole: severity === "missing" ? "bad" : severity === "degraded" ? "warn" : "faint",
+		});
 	}
 
 	/** The focused row's label, findings, and the pending-changes note. */
@@ -334,19 +317,14 @@ export class PanelComponent implements Component {
 		const lines: string[] = [];
 		if (row?.report) {
 			const tail = reportSummary(row.report);
-			lines.push(
-				truncateToWidth(
-					`  ${this.theme.fg("muted", sanitizeLine(row.label))} ${this.theme.fg("dim", "—")} ${this.theme.fg(row.report.enabled ? "muted" : "warning", tail)}`,
-					width,
-					"…",
-				),
-			);
+			const head = `${paint(this.theme, "meta", sanitizeLine(row.label))} ${paint(this.theme, "faint", "—")} ${paint(this.theme, row.report.enabled ? "meta" : "warn", tail)}`;
+			lines.push(clip(`  ${head}`, width));
 			if (budget > 0) lines.push(...reportDetailLines(row.report, this.theme, width, budget, this.showDetail));
 		} else if (row?.item) {
-			lines.push(truncateToWidth(`  ${this.theme.fg("muted", sanitizeLine(row.item.path))}`, width, "…"));
+			lines.push(clip(`  ${paint(this.theme, "meta", sanitizeLine(row.item.path))}`, width));
 		}
 		if (this.options.runtime.isDirty()) {
-			lines.push(truncateToWidth(`  ${this.theme.fg("warning", "Saved · reload to apply")}`, width, "…"));
+			lines.push(clip(`  ${paint(this.theme, "warn", "Saved · reload to apply")}`, width));
 		}
 		return lines;
 	}
@@ -356,14 +334,13 @@ export class PanelComponent implements Component {
 		const model = this.model();
 		const entries = entriesOf(model);
 		const summary = this.summary(w, model);
+		const header = titleRule(this.theme, w, "bytefly");
 
 		if (entries.length === 0) {
 			return dockListFrame({
-				theme: this.theme,
-				width: w,
-				title: "bytefly",
+				header,
 				summary,
-				body: [truncateToWidth(`  ${this.theme.fg("dim", "No extensions found.")}`, w)],
+				body: emptyState(this.theme, w, { label: "No extensions found." }),
 				hint: screenHint(this.theme, w, ["Esc close"]),
 			});
 		}
@@ -394,9 +371,7 @@ export class PanelComponent implements Component {
 		}
 
 		return dockListFrame({
-			theme: this.theme,
-			width: w,
-			title: "bytefly",
+			header,
 			summary,
 			body,
 			range: this.cursor.clipped(entries.length)

package/extensions/bytefly/separator/component.ts

@@ -14,6 +14,7 @@ export class SeparatorComponent implements Component {
 	constructor(
 		private readonly turn: number,
 		private readonly theme: Theme,
+		private readonly pad = 0,
 	) {}
 
 	invalidate(): void {
@@ -21,6 +22,6 @@ export class SeparatorComponent implements Component {
 	}
 
 	render(width: number): string[] {
-		return separatorLine(this.turn, width, this.theme);
+		return separatorLine(this.turn, width, this.theme, this.pad);
 	}
 }

package/extensions/bytefly/separator/config.ts

@@ -2,11 +2,12 @@
  * Tuning for bytefly's turn separator.
  *
  * Edit this file to change how the line between completed turns looks. The
- * glyphs and colors are plain theme tokens, so the line follows the active
- * theme automatically.
+ * glyph and the colors are plain design-system roles, so the line follows the
+ * active theme automatically.
  */
 
-import { GLYPHS } from "../../../lib/ui.ts";
+import { GLYPHS } from "../../../lib/tui/glyphs.ts";
+import type { TuiRole } from "../../../lib/tui/tokens.ts";
 
 export const CONFIG = {
 	/** Custom entry type. Changing it orphans separators recorded by an older build. */
@@ -17,8 +18,15 @@ export const CONFIG = {
 	labelPrefix: "turn",
 	/** Spaces on each side of the label. */
 	pad: 1,
-	/** Theme token for the dashes. */
-	dashColor: "border",
-	/** Theme token for the label. */
-	labelColor: "muted",
-} as const;
+	/** Role for the dashes. */
+	dashRole: "ruleStrong",
+	/** Role for the label. */
+	labelRole: "meta",
+} as const satisfies {
+	customType: string;
+	glyph: string;
+	labelPrefix: string;
+	pad: number;
+	dashRole: TuiRole;
+	labelRole: TuiRole;
+};

package/extensions/bytefly/separator/format.ts

@@ -1,50 +1,30 @@
 /**
  * Pure formatting for bytefly's turn separator line.
  *
- * `separatorParts` decides the layout from a plain turn number and a column
- * count; `separatorLine` applies theme colors. Neither touches Pi state, so
- * both are cheap to unit test.
+ * The centered `╌╌╌ turn N ╌╌╌` layout comes from the design system's
+ * `centeredRule`, so this module only names the turn; the shared rule owns the
+ * centering, the degradation, and the colors.
  */
 
 import type { Theme } from "@earendil-works/pi-coding-agent";
-import { visibleWidth } from "@earendil-works/pi-tui";
+import { centeredRule } from "../../../lib/tui/rules.ts";
 import { CONFIG } from "./config.ts";
-import type { SeparatorParts } from "./types.ts";
-
-/** ` turn N ` — the label printed in the middle of the line. */
-export function separatorLabel(turn: number): string {
-	const pad = " ".repeat(CONFIG.pad);
-	return `${pad}${CONFIG.labelPrefix} ${turn}${pad}`;
-}
 
 /**
- * Split `width` columns into centered dashes and a label.
+ * One rendered line: the centered turn rule, colored by role.
  *
- * When the label does not fit, the line degrades to a plain dashed rule so it
- * never overflows the transcript.
+ * `pad` is Pi's output pad. Pi gives an entry renderer no pad and adds its
+ * component raw, so the rule insets itself symmetrically by that many columns,
+ * keeping its left edge on the transcript's margin.
  */
-export function separatorParts(turn: number, width: number): SeparatorParts {
-	const target = Math.max(1, Math.floor(width));
-	const label = separatorLabel(turn);
-	const labelWidth = visibleWidth(label);
-
-	if (labelWidth >= target) {
-		return { left: CONFIG.glyph.repeat(target), label: "", right: "" };
-	}
-
-	const remaining = target - labelWidth;
-	const left = Math.floor(remaining / 2);
-	const right = remaining - left;
-	return {
-		left: CONFIG.glyph.repeat(left),
-		label,
-		right: CONFIG.glyph.repeat(right),
-	};
-}
-
-/** One rendered line: colored dashes around a colored label. */
-export function separatorLine(turn: number, width: number, theme: Theme): string[] {
-	const { left, label, right } = separatorParts(turn, width);
-	const dashes = (text: string) => (text ? theme.fg(CONFIG.dashColor, text) : "");
-	return [dashes(left) + (label ? theme.fg(CONFIG.labelColor, label) : "") + dashes(right)];
+export function separatorLine(turn: number, width: number, theme: Theme, pad = 0): string[] {
+	const w = Math.max(1, Math.floor(width));
+	const inset = Math.max(0, Math.min(Math.floor(pad), Math.floor((w - 1) / 2)));
+	const line = centeredRule(theme, Math.max(1, w - inset * 2), `${CONFIG.labelPrefix} ${turn}`, {
+		glyph: CONFIG.glyph,
+		pad: CONFIG.pad,
+		fillRole: CONFIG.dashRole,
+		labelRole: CONFIG.labelRole,
+	});
+	return [`${" ".repeat(inset)}${line}`];
 }

package/extensions/bytefly/separator/register.ts

@@ -12,6 +12,7 @@
  */
 
 import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import { createPadStore, type PadSource } from "../pad.ts";
 import { SeparatorComponent } from "./component.ts";
 import { CONFIG } from "./config.ts";
 import type { TurnSeparatorData } from "./types.ts";
@@ -26,11 +27,11 @@ function countSeparators(entries: readonly { type: string; customType?: string }
 }
 
 /** Register the separator renderer and append one on every settled turn. */
-export function registerTurnSeparator(pi: ExtensionAPI): void {
+export function registerTurnSeparator(pi: ExtensionAPI, pad: PadSource = createPadStore()): void {
 	pi.registerEntryRenderer<TurnSeparatorData>(CONFIG.customType, (entry, _options, theme) => {
 		const turn = entry.data?.turn;
 		if (typeof turn !== "number" || !Number.isFinite(turn)) return undefined;
-		return new SeparatorComponent(turn, theme);
+		return new SeparatorComponent(turn, theme, pad.resolve());
 	});
 
 	pi.on("agent_settled", (_event, ctx) => {

package/extensions/bytefly/separator/types.ts

@@ -10,13 +10,3 @@ export interface TurnSeparatorData {
 	/** 1-based index of the completed user turn this separator follows. */
 	turn: number;
 }
-
-/** A separator line split into its dashes and label. */
-export interface SeparatorParts {
-	/** Dashes before the label. */
-	left: string;
-	/** The centred `turn N` label. */
-	label: string;
-	/** Dashes after the label. */
-	right: string;
-}

package/extensions/bytefly/working/config.ts

@@ -0,0 +1,20 @@
+/**
+ * Tuning for bytefly's live working timer.
+ *
+ * While Pi's working row is up, the counter is written into the working message
+ * Pi renders beside its spinner. Edit this file to change the word or how often
+ * the count advances.
+ */
+
+export const WORKING_CONFIG = {
+	/** Word before the count. */
+	working: "Working",
+	/** Between the word and the count. */
+	ellipsis: "…",
+	/** How often the count advances, in milliseconds. */
+	intervalMs: 1000,
+} as const satisfies {
+	working: string;
+	ellipsis: string;
+	intervalMs: number;
+};

package/extensions/bytefly/working/format.ts

@@ -0,0 +1,25 @@
+/**
+ * Pure text for the live working timer.
+ *
+ * Whole seconds, because the counter advances on a one-second tick: `0s` at the
+ * start, `42s`, `1m05s`, `1h02m`. Negative and non-finite input reads as `0s`,
+ * so a clock that steps backwards cannot print a negative count.
+ */
+
+import { WORKING_CONFIG } from "./config.ts";
+
+/** Compact elapsed time in whole seconds: `0s`, `42s`, `1m05s`, `1h02m`. */
+export function formatElapsed(ms: number): string {
+	const total = Number.isFinite(ms) && ms > 0 ? Math.floor(ms / 1000) : 0;
+	const seconds = total % 60;
+	const minutes = Math.floor(total / 60) % 60;
+	const hours = Math.floor(total / 3600);
+	if (hours > 0) return `${hours}h${String(minutes).padStart(2, "0")}m`;
+	if (minutes > 0) return `${minutes}m${String(seconds).padStart(2, "0")}s`;
+	return `${seconds}s`;
+}
+
+/** The working-row message for an elapsed time, e.g. `Working… 4s`. */
+export function workingCounter(ms: number): string {
+	return `${WORKING_CONFIG.working}${WORKING_CONFIG.ellipsis} ${formatElapsed(ms)}`;
+}