pi-zentui 0.18.1 → 0.20.0

package/README.md

@@ -8,13 +8,14 @@ A Starship-inspired statusline and Opencode-style TUI for [Pi](https://pi.dev).
 
 ## What is this?
 
-Zentui styles three major Pi surfaces independently:
+Zentui styles four major Pi surfaces independently:
 
 - **Editor** — selectable opencode, low-rail opencode, and minimalist input frames inspired by [Opencode](https://github.com/opencode-ai/opencode)
 - **User messages** — selectable framed, framed copy-friendly, compact, and labeled transcript messages
+- **Working line** — optional ownership and styling of Pi's complete in-progress row
 - **[Starship](https://starship.rs/) footer** — current directory, Git, runtime, context, tokens, cost, and other configurable segments
 
-Editor, User messages, and selector borders use an `enabled` field. Footer uses one `style`: `native`, `starship`, or `hidden`. **Appearance** contains selector-border and icon settings.
+Editor, User messages, Working line, and selector borders use independent `enabled` fields. Footer uses one `style`: `native`, `starship`, or `hidden`. **Appearance** contains selector-border and icon settings.
 
 ## Features
 
@@ -40,7 +41,7 @@ Editor, User messages, and selector borders use an `enabled` field. Footer uses
 - Opencode autocomplete rows retain Pi's original unframed trailing layout; Minimalist keeps autocomplete inside its rounded frame
 - Configurable model, provider, thinking-level, accent, and border colors
 
-Editor previews:
+Editor styles:
 
 <h4 align="center"><code>opencode</code></h4>
 
@@ -81,6 +82,21 @@ User-message previews:
 
 ![Zentui Labeled user-message style in a rounded frame with the label User.](./assets/screenshots/user-message-labeled.png)
 
+### Working line
+
+When enabled, the optional Working line always owns and stylizes Pi's complete working-row message and indicator. It provides five fixed-width spinner presets: Braille Orbit, Star Bloom, ASCII Pinwheel, Claude-inspired, and three-cell Pulse. **Custom messages** defaults on and selects once per model turn from an editable, materialized 16-message list. Turning it off keeps the row owned and displays styled, animated `Working…` without random selection. An empty or invalid custom list safely uses the same fallback. The row can show the latest active **Tool**, interaction-wide **Elapsed** time, cumulative wall-clock **Thinking** time, and whole-interaction **Tokens**. Committed totals stay exact and provider-reported across tool loops, automatic retries, compaction retries, and queued continuations. During the current response, live output uses the native `↓N` convention whether it comes from provider usage or an estimate used while provider usage is unavailable or stale. Authoritative final usage always reconciles the response atomically; input is never estimated. Messages and tool labels are sanitized and width-bounded.
+
+When Pi has fully settled and will not continue automatically, the default-on **Turn summary** appends a persistent, context-free transcript row such as ` Turn took 56s · thought for 10s · ↑7.1k ↓779`. Thought is cumulative wall-clock time from Pi's public thinking stream; overlapping blocks count once and zero is omitted. Output usage already includes reasoning tokens, so reasoning is not added separately. The summary always includes both token totals—even when live Tokens or Thinking is hidden or both totals are zero—and can be opted out of without affecting historical summaries. Turn summaries use the fixed Working-line high style and are inactive while the overall Working line is disabled.
+
+Spinner glyph motion is always active. Classic and KITT move color across the message and segments by default; **Animate spinner color** optionally includes spinner cells and their separator in that sweep. Static colors the complete row uniformly and ignores text speed and spinner-color participation without changing their saved values. Content fits the 77-cell indicator payload while reserving the complete Tokens label first, then Message, Thought, Elapsed, and Tool allocation, and preserves the visual **Message · Tool · Elapsed · Thought · Tokens** order and complete 80-column Loader-row contract. Active thought appears immediately as `thinking 0s` and updates once per second; completed positive thought appears as `thought for Ns`. Rebuilds preserve the displayed spinner and visible color-sweep position. Pi's working-row APIs are global and unkeyed, so another extension may win by writing last.
+
+| Setting | Default | Presets | Applies to |
+| --- | ---: | --- | --- |
+| `spinnerIntervalMs` | 100 ms | Fast 60 / Normal 100 / Slow 160 / Custom | Spinner glyph motion |
+| `textIntervalMs` | 60 ms | Fast 40 / Normal 60 / Slow 100 / Custom | Classic/KITT color motion |
+
+Both speeds accept safe integers from `30` through `1000` ms. Static ignores text speed without changing it. Classic/KITT combine both cadences through one Pi Loader interval; exact cycles are used within the 1024-frame/512-KiB limits. Pathological custom pairs use a bounded evenly distributed schedule: cycle totals round by at most half a spinner glyph cycle and half a text step, spinner wrap remains continuous, and text phase may reset once per bounded fallback array cycle. Legacy `intervalMs` is accepted only as migration input for `spinnerIntervalMs` when the canonical field is absent.
+
 ### Git Status Icons
 
 | Icon | Meaning    |
@@ -174,19 +190,20 @@ pi install git:github.com/lmilojevicc/pi-zentui
 
 User config lives at `~/.pi/agent/zentui.json`. The file is optional: missing or invalid known values fall back to Zentui defaults, unknown keys are ignored at runtime, and `/zentui` can patch color-source settings, UI feature toggles, built-in footer segment visibility, and active third-party status placements.
 
-The interactive `/zentui` menu is split into exactly seven component-oriented sections, in this order. Use `Tab` and `Shift+Tab` to switch sections:
+The interactive `/zentui` menu is split into exactly eight component-oriented sections, in this order. Use `Tab` and `Shift+Tab` to switch sections:
 
 1. **Appearance** — selector-border enablement, style, and colors; icon mode.
-2. **Editor** — editor enablement, style, colors, model label, border behavior, viewport indicators, and settings for the selected editor style.
-3. **User messages** — message enablement, `framed | framed-copy-friendly | compact | labeled` style selection (including **Framed (copy-friendly)**), and colors.
-4. **Footer** — `Native | Starship | Hidden` style selection. Starship additionally shows colors, model label, responsive layout, separator, context style, and path display.
-5. **Segments** — visibility toggles for non-Git Starship segments.
-6. **Git** — Starship Git segment and probe controls.
-7. **Extensions** — Starship extension-status placement and color controls for active keys.
+2. **Editor** — editor enablement, style, colors, model label, border behavior, viewport indicators, settings for the selected editor style, and a static synthetic preview.
+3. **User messages** — message enablement, `framed | framed-copy-friendly | compact | labeled` style selection (including **Framed (copy-friendly)**), colors, and a static synthetic Markdown preview.
+4. **Working line** — ownership, settled Turn summary, spinner and text speeds, optional spinner-color motion, text animation, color source, custom-message toggle and editable list, Tool/Elapsed/Thinking/Tokens toggles, and animated preview.
+5. **Footer** — `Native | Starship | Hidden` style selection. Starship additionally shows colors, model label, responsive layout, separator, context style, and path display.
+6. **Segments** — visibility toggles for non-Git Starship segments.
+7. **Git** — Starship Git segment and probe controls.
+8. **Extensions** — Starship extension-status placement and color controls for active keys.
 
-Editor and User messages retain independent enablement and style configuration. Footer's single style selects Pi's built-in Footer (`Native`), Zentui's Starship Footer, or an owned zero-row Footer (`Hidden`). Color and model-label rows update only their owning component.
+Editor, User messages, and Working line retain independent configuration. Editor and User-message previews use fixed synthetic content and remain visible while their component is disabled; the Working-line preview reflects its current configured sample, state, and animation. Each preview appears above its settings. Only the Working-line preview owns an animation timer. Footer's single style selects Pi's built-in Footer (`Native`), Zentui's Starship Footer, or an owned zero-row Footer (`Hidden`). Color and model-label rows update only their owning component.
 
-Starship-specific Footer rows are shown only while Starship is selected. The **Segments**, **Git**, and **Extensions** sections remain available for preconfiguration under every Footer style. Free-form values such as custom formats, Opencode metadata format, raw colors/styles, numeric values outside the shown presets, and inactive extension keys remain JSON-only.
+Starship-specific Footer rows are shown only while Starship is selected. The **Segments**, **Git**, and **Extensions** sections remain available for preconfiguration under every Footer style. Free-form values such as custom formats, Opencode metadata format, raw colors/styles, and inactive extension keys remain JSON-only; Working-line speed accepts validated custom milliseconds in `/zentui`.
 
 Useful slash-command shortcuts:
 
@@ -202,6 +219,7 @@ Useful slash-command shortcuts:
 /zentui statusline toggle
 /zentui messages
 /zentui user-messages
+/zentui working-line
 /zentui viewport-indicators enable
 /zentui viewport-indicators disable
 /zentui viewport-indicators toggle
@@ -257,6 +275,31 @@ Default config values — copy this and change any value you want:
 				"labeled": {}
 			}
 		},
+		"workingLine": {
+			"enabled": false,
+			"turnSummary": true,
+			"spinner": "star-bloom",
+			"spinnerIntervalMs": 100,
+			"animateSpinnerColor": false,
+			"textIntervalMs": 60,
+			"textAnimation": "classic",
+			"colorSource": "theme",
+			"messages": {
+				"custom": true,
+				"values": [
+					"Sautéing…", "Cooking…", "Ionizing…", "Zigzagging…",
+					"Razzle-dazzling…", "Photosynthesizing…", "Nucleating…", "Brewing…",
+					"Combobulating…", "Boogieing…", "Befuddling…", "Alchemizing…",
+					"Conjuring…", "Baking…", "Simmering…", "Blanching…"
+				]
+			},
+			"segments": {
+				"tool": true,
+				"elapsed": true,
+				"thought": true,
+				"tokens": true
+			}
+		},
 		"selectorBorders": {
 			"enabled": true,
 			"style": "zentui",
@@ -384,6 +427,8 @@ Default config values — copy this and change any value you want:
 - `projectRefreshIntervalMs`: project status polling interval; `0` disables polling. Values `1..4999` clamp up to `5000` (minimum 5s); invalid/non-finite values fall back to `30000`.
 - `components.editor`: owns editor enablement, `opencode | opencode-copy-friendly | minimalist` style selection, color source, border mode, model label, viewport indicators, and all three editor-style configurations.
 - `components.userMessages`: owns message enablement, `framed | framed-copy-friendly | compact | labeled` style selection, and color source. `framed-copy-friendly` remains Zentui-rendered; disabling the component delegates to Pi's native renderer.
+- `components.workingLine`: `enabled` is the sole ownership switch. While enabled, Zentui owns both the Working-row message and indicator and renders the full row. It configures `braille | star-bloom | pinwheel | claude-inspired | pulse`, independent spinner/text speeds, optional Classic/KITT spinner-color participation, `classic | kitt | disabled` text animation, color source, the default-on `messages.custom` toggle and editable 16-value list, plus Tool/Elapsed/Thinking/Tokens segments. Thinking only controls the live row; measurement and final summaries continue while it is hidden. Custom-off and empty-list fallback both render owned `Working…`; Static keeps glyph motion but ignores text speed and spinner-color participation.
+- Optional `colors.workingLineLow`, `colors.workingLineMid`, and `colors.workingLineHigh` override its palette. Without overrides, theme mode uses `dim`, `muted`, and `bold accent`; terminal mode uses `bright-black`, `cyan`, and `bold cyan`.
 - `components.selectorBorders`: owns selector-border enablement, the fixed `zentui` style, and its color source.
 - `components.footer`: owns `native | starship | hidden` style selection, Footer color source, Footer model label, and every Starship option under `styles.starship` (formats, segments, context thresholds, path, Git, and extension statuses). Native restores Pi's built-in Footer; Hidden installs an empty component with zero rows.
 - Editor and Footer `modelLabel` values are independent and have separate controls in the **Editor** and **Footer** sections.
@@ -546,7 +591,7 @@ Pi 0.84 introduces a native fullscreen TUI with a sticky editor and Footer plus
 }
 ```
 
-You can also select fullscreen from Pi's `/settings` UI or start Pi with `--tui-mode fullscreen`. Zentui does not enable fullscreen automatically: Pi owns terminal layout, scrolling, and sticky placement, while Zentui supplies the configured editor and Footer components. Pi 0.80.3–0.83 remain supported for Zentui styling, without native sticky placement.
+You can also select fullscreen from Pi's `/settings` UI or start Pi with `--tui-mode fullscreen`. Zentui does not enable fullscreen automatically: Pi owns terminal layout, scrolling, and sticky placement, while Zentui supplies the configured editor and Footer components. Pi 0.80.5–0.83 remain supported for Zentui styling, without native sticky placement.
 
 ## Acknowledgments
 
@@ -554,7 +599,7 @@ The minimalist frame's information hierarchy was inspired by [VinhLe1410/pi-cust
 
 ## Requirements
 
-- [Pi](https://pi.dev) coding agent 0.80.3 or newer
+- [Pi](https://pi.dev) coding agent 0.80.5 or newer
 - A [Nerd Font](https://www.nerdfonts.com/) for icons (or set `icons.mode` to `"ascii"`)
 
 ## Development

package/extensions/zentui/config.ts

@@ -25,6 +25,8 @@ import {
 	resolveConfiguredIcons,
 } from "./icons";
 import { isSupportedColorSpec } from "./style";
+import { normalizeWorkingLineMessages } from "./working-line";
+import { PI_WORKING_LINE_MESSAGES } from "./working-line-messages";
 
 export type ColorSpec = string;
 export type ColorSource = "theme" | "terminal";
@@ -37,6 +39,13 @@ export type EditorStyle = "opencode" | "opencode-copy-friendly" | "minimalist";
 export type UserMessageStyle = "framed" | "framed-copy-friendly" | "compact" | "labeled";
 export type SelectorBorderStyle = "zentui";
 export type FooterStyle = "native" | "starship" | "hidden";
+export type WorkingLineSpinner =
+	| "braille"
+	| "star-bloom"
+	| "pinwheel"
+	| "claude-inspired"
+	| "pulse";
+export type WorkingLineTextAnimation = "classic" | "kitt" | "disabled";
 export type ComponentStyleOwner = "editor" | "userMessages" | "selectorBorders" | "footer";
 export type MinimalistPathDisplayMode = "compact" | "project" | "full";
 export type MinimalistContextFormat = "percent" | "percent-total";
@@ -185,9 +194,56 @@ export type FooterComponentConfig = {
 	};
 };
 
+export type WorkingLineMessagesConfig = {
+	custom: boolean;
+	values: string[];
+};
+
+export type WorkingLineSegmentsConfig = {
+	tool: boolean;
+	elapsed: boolean;
+	thought: boolean;
+	tokens: boolean;
+};
+
+export const DEFAULT_WORKING_LINE_SPINNER_INTERVAL_MS = 100;
+export const DEFAULT_WORKING_LINE_TEXT_INTERVAL_MS = 60;
+export const MIN_WORKING_LINE_INTERVAL_MS = 30;
+export const MAX_WORKING_LINE_INTERVAL_MS = 1000;
+
+export function isValidWorkingLineIntervalMs(value: unknown): value is number {
+	return (
+		typeof value === "number" &&
+		Number.isSafeInteger(value) &&
+		value >= MIN_WORKING_LINE_INTERVAL_MS &&
+		value <= MAX_WORKING_LINE_INTERVAL_MS
+	);
+}
+
+export type WorkingLineComponentConfig = {
+	enabled: boolean;
+	turnSummary: boolean;
+	spinner: WorkingLineSpinner;
+	spinnerIntervalMs: number;
+	animateSpinnerColor: boolean;
+	textIntervalMs: number;
+	textAnimation: WorkingLineTextAnimation;
+	colorSource: ColorSource;
+	messages: WorkingLineMessagesConfig;
+	segments: WorkingLineSegmentsConfig;
+};
+
+export type WorkingLineComponentPatch = Partial<
+	Omit<WorkingLineComponentConfig, "messages" | "segments">
+> & {
+	messages?: Partial<WorkingLineMessagesConfig>;
+	segments?: Partial<WorkingLineSegmentsConfig>;
+};
+
 export type ComponentsConfig = {
 	editor: EditorComponentConfig;
 	userMessages: UserMessagesComponentConfig;
+	workingLine: WorkingLineComponentConfig;
 	selectorBorders: SelectorBordersComponentConfig;
 	footer: FooterComponentConfig;
 };
@@ -266,6 +322,9 @@ export type PolishedTuiColors = {
 	editorThinkingMedium?: ColorSpec;
 	editorThinkingHigh?: ColorSpec;
 	editorThinkingXhigh?: ColorSpec;
+	workingLineLow?: ColorSpec;
+	workingLineMid?: ColorSpec;
+	workingLineHigh?: ColorSpec;
 };
 
 /**
@@ -413,6 +472,18 @@ const defaultComponents: ComponentsConfig = {
 		colorSource: "theme",
 		styles: { framed: {}, "framed-copy-friendly": {}, compact: {}, labeled: {} },
 	},
+	workingLine: {
+		enabled: false,
+		turnSummary: true,
+		spinner: "star-bloom",
+		spinnerIntervalMs: DEFAULT_WORKING_LINE_SPINNER_INTERVAL_MS,
+		animateSpinnerColor: false,
+		textIntervalMs: DEFAULT_WORKING_LINE_TEXT_INTERVAL_MS,
+		textAnimation: "classic",
+		colorSource: "theme",
+		messages: { custom: true, values: [...PI_WORKING_LINE_MESSAGES] },
+		segments: { tool: true, elapsed: true, thought: true, tokens: true },
+	},
 	selectorBorders: { enabled: true, style: "zentui", colorSource: "theme" },
 	footer: {
 		style: "starship",
@@ -646,6 +717,9 @@ function normalizeColors(record: Record<string, unknown>): Partial<PolishedTuiCo
 		editorThinkingMedium: colorValue(record, "editorThinkingMedium"),
 		editorThinkingHigh: colorValue(record, "editorThinkingHigh"),
 		editorThinkingXhigh: colorValue(record, "editorThinkingXhigh"),
+		workingLineLow: colorValue(record, "workingLineLow"),
+		workingLineMid: colorValue(record, "workingLineMid"),
+		workingLineHigh: colorValue(record, "workingLineHigh"),
 	});
 }
 
@@ -1038,6 +1112,28 @@ function resolveUserMessagesSelection(
 	};
 }
 
+function resolveWorkingLineMessages(messages: ConfigRecord): WorkingLineMessagesConfig {
+	const preset = () => [...PI_WORKING_LINE_MESSAGES];
+	const hasCanonicalCustom = hasOwn(messages, "custom");
+	const custom = hasCanonicalCustom
+		? parseBoolean(messages.custom, true)
+		: messages.mode !== "native";
+	if (hasCanonicalCustom) {
+		return {
+			custom,
+			values: hasOwn(messages, "values") ? normalizeWorkingLineMessages(messages.values) : preset(),
+		};
+	}
+	const legacyValues = normalizeWorkingLineMessages(messages.values);
+	if (messages.mode === "append") {
+		return { custom, values: normalizeWorkingLineMessages([...preset(), ...legacyValues]) };
+	}
+	if (messages.mode === "replace" || messages.mode === "native") {
+		return { custom, values: legacyValues.length > 0 ? legacyValues : preset() };
+	}
+	return { custom, values: hasOwn(messages, "values") ? legacyValues : preset() };
+}
+
 function resolveComponents(config: ConfigRecord): ComponentsConfig {
 	const components = recordValue(config.components);
 	const editor = recordValue(components.editor);
@@ -1050,6 +1146,9 @@ function resolveComponents(config: ConfigRecord): ComponentsConfig {
 	const userMessages = recordValue(components.userMessages);
 	const userMessageStyles = recordValue(userMessages.styles);
 	const framed = recordValue(userMessageStyles.framed);
+	const workingLine = recordValue(components.workingLine);
+	const workingLineMessages = recordValue(workingLine.messages);
+	const workingLineSegments = recordValue(workingLine.segments);
 	const selectorBorders = recordValue(components.selectorBorders);
 	const footer = recordValue(components.footer);
 	const footerStyles = recordValue(footer.styles);
@@ -1147,6 +1246,56 @@ function resolveComponents(config: ConfigRecord): ComponentsConfig {
 				labeled: {},
 			},
 		},
+		workingLine: {
+			enabled: parseBoolean(workingLine.enabled, defaultComponents.workingLine.enabled),
+			turnSummary: parseBoolean(workingLine.turnSummary, defaultComponents.workingLine.turnSummary),
+			spinner:
+				workingLine.spinner === "braille" ||
+				workingLine.spinner === "star-bloom" ||
+				workingLine.spinner === "pinwheel" ||
+				workingLine.spinner === "claude-inspired" ||
+				workingLine.spinner === "pulse"
+					? workingLine.spinner
+					: defaultComponents.workingLine.spinner,
+			spinnerIntervalMs: isValidWorkingLineIntervalMs(
+				resolvedValue(workingLine, "spinnerIntervalMs", workingLine, "intervalMs"),
+			)
+				? (resolvedValue(workingLine, "spinnerIntervalMs", workingLine, "intervalMs") as number)
+				: defaultComponents.workingLine.spinnerIntervalMs,
+			animateSpinnerColor: parseBoolean(
+				workingLine.animateSpinnerColor,
+				defaultComponents.workingLine.animateSpinnerColor,
+			),
+			textIntervalMs: isValidWorkingLineIntervalMs(workingLine.textIntervalMs)
+				? workingLine.textIntervalMs
+				: defaultComponents.workingLine.textIntervalMs,
+			textAnimation:
+				workingLine.textAnimation === "classic" ||
+				workingLine.textAnimation === "kitt" ||
+				workingLine.textAnimation === "disabled"
+					? workingLine.textAnimation
+					: defaultComponents.workingLine.textAnimation,
+			colorSource: parseColorSource(
+				workingLine.colorSource,
+				defaultComponents.workingLine.colorSource,
+			),
+			messages: resolveWorkingLineMessages(workingLineMessages),
+			segments: {
+				tool: parseBoolean(workingLineSegments.tool, defaultComponents.workingLine.segments.tool),
+				elapsed: parseBoolean(
+					workingLineSegments.elapsed,
+					defaultComponents.workingLine.segments.elapsed,
+				),
+				thought: parseBoolean(
+					workingLineSegments.thought,
+					defaultComponents.workingLine.segments.thought,
+				),
+				tokens: parseBoolean(
+					workingLineSegments.tokens,
+					defaultComponents.workingLine.segments.tokens,
+				),
+			},
+		},
 		selectorBorders: {
 			enabled: parseBoolean(
 				resolvedValue(selectorBorders, "enabled", features, "editor"),
@@ -1514,6 +1663,44 @@ export function saveUserMessagesComponentPatch(
 	);
 }
 
+export function saveWorkingLineComponentPatch(
+	patch: WorkingLineComponentPatch,
+	path = configPath,
+): PolishedTuiConfig {
+	return saveComponentsMutation(
+		(components) => {
+			const component = components.workingLine;
+			if (patch.enabled !== undefined) component.enabled = patch.enabled;
+			if (patch.turnSummary !== undefined) component.turnSummary = patch.turnSummary;
+			if (patch.spinner !== undefined) component.spinner = patch.spinner;
+			if (patch.spinnerIntervalMs !== undefined)
+				component.spinnerIntervalMs = patch.spinnerIntervalMs;
+			if (patch.animateSpinnerColor !== undefined)
+				component.animateSpinnerColor = patch.animateSpinnerColor;
+			if (patch.textIntervalMs !== undefined) component.textIntervalMs = patch.textIntervalMs;
+			if (patch.textAnimation !== undefined) component.textAnimation = patch.textAnimation;
+			if (patch.colorSource !== undefined) component.colorSource = patch.colorSource;
+			if (patch.messages?.custom !== undefined) component.messages.custom = patch.messages.custom;
+			if (patch.messages?.values !== undefined) {
+				component.messages.values = normalizeWorkingLineMessages([...patch.messages.values]);
+			}
+			if (patch.segments?.tool !== undefined) component.segments.tool = patch.segments.tool;
+			if (patch.segments?.elapsed !== undefined)
+				component.segments.elapsed = patch.segments.elapsed;
+			if (patch.segments?.thought !== undefined)
+				component.segments.thought = patch.segments.thought;
+			if (patch.segments?.tokens !== undefined) component.segments.tokens = patch.segments.tokens;
+		},
+		path,
+		(record) => {
+			const workingLine = recordValue(recordValue(record.components).workingLine);
+			delete workingLine.intervalMs;
+			const messages = recordValue(workingLine.messages);
+			delete messages.mode;
+		},
+	);
+}
+
 export function saveSelectorBordersComponentPatch(
 	patch: Partial<SelectorBordersComponentConfig>,
 	path = configPath,

package/extensions/zentui/format.ts

@@ -123,6 +123,17 @@ export function formatCount(value: number): string {
 	return `${Math.round(value / 1_000_000)}M`;
 }
 
+/** Human-readable whole-second duration used by settled and minimalist turn UI. */
+export function formatElapsedDuration(durationMs: number): string {
+	const totalSeconds = Math.max(0, Math.floor(durationMs / 1000));
+	const hours = Math.floor(totalSeconds / 3600);
+	const minutes = Math.floor((totalSeconds % 3600) / 60);
+	const seconds = totalSeconds % 60;
+	if (hours > 0) return `${hours}h ${minutes}m`;
+	if (minutes > 0) return `${minutes}m ${seconds}s`;
+	return `${seconds}s`;
+}
+
 export function formatProviderLabel(provider: string | undefined): string {
 	if (!provider) return "Unknown";