@quandev104/pi-style 0.1.3 → 0.1.4

package/extension-src/pi-style/features/tools/boxed/session-config.ts

@@ -33,19 +33,79 @@ export function getToolsRenderConfig(): ToolsRenderConfig {
 
 // Wall-clock elapsed tracking through the renderer context state (no tool
 // re-registration, so result.details has no execution timing).
+//
+// Elapsed is computed live from the recorded start on every read, so a running
+// tool keeps growing its displayed time. The value only freezes once the
+// execution end is recorded (terminal result), which keeps the completed footer
+// stable across later re-renders (expand toggles, terminal resizes).
 
 const STARTED_AT_KEY = "__piStyleStartedAt";
-const ELAPSED_MS_KEY = "__piStyleElapsedMs";
+const ENDED_AT_KEY = "__piStyleEndedAt";
+const RESULT_SEEN_KEY = "__piStyleResultSeen";
+const TICKER_KEY = "__piStyleElapsedTicker";
 
 export function recordExecutionStarted(state: Record<string, unknown> | undefined, executionStarted: boolean): void {
 	if (!executionStarted || !state || typeof state !== "object") return;
 	if (typeof state[STARTED_AT_KEY] !== "number") state[STARTED_AT_KEY] = performance.now();
 }
 
+/** Freeze the elapsed at the first terminal render (idempotent). */
+export function recordExecutionEnded(state: Record<string, unknown> | undefined): void {
+	if (!state || typeof state !== "object") return;
+	if (typeof state[ENDED_AT_KEY] !== "number") state[ENDED_AT_KEY] = performance.now();
+}
+
 export function getStateElapsedMs(state: Record<string, unknown> | undefined): number | undefined {
 	if (!state || typeof state !== "object") return undefined;
-	if (typeof state[ELAPSED_MS_KEY] !== "number" && typeof state[STARTED_AT_KEY] === "number") {
-		state[ELAPSED_MS_KEY] = performance.now() - state[STARTED_AT_KEY];
+	const started = state[STARTED_AT_KEY];
+	if (typeof started !== "number") return undefined;
+	const ended = state[ENDED_AT_KEY];
+	if (typeof ended === "number") return Math.max(0, ended - started);
+	return Math.max(0, performance.now() - started);
+}
+
+/** Whether a result renderer already produced a continuation for this call. */
+export function isResultSeen(state: Record<string, unknown> | undefined): boolean {
+	return Boolean(state && typeof state === "object" && state[RESULT_SEEN_KEY] === true);
+}
+
+/** Record that a result renderer ran for this call (streaming or final). */
+export function markResultSeen(state: Record<string, unknown> | undefined): void {
+	if (!state || typeof state !== "object") return;
+	state[RESULT_SEEN_KEY] = true;
+}
+
+type TickerHandle = ReturnType<typeof setInterval>;
+
+/** States that currently own a 1s elapsed-render interval, for session cleanup. */
+const tickerStates = new Set<Record<string, unknown>>();
+
+/**
+ * While a tool is running, re-render once per second so live elapsed labels
+ * tick without any output events. Idempotent per state.
+ */
+export function startElapsedTicker(state: Record<string, unknown> | undefined, invalidate: () => void): void {
+	if (!state || typeof state !== "object") return;
+	if (state[TICKER_KEY] !== undefined) return;
+	state[TICKER_KEY] = setInterval(() => invalidate(), 1000) as unknown as TickerHandle;
+	tickerStates.add(state);
+}
+
+/** Stop a running tool's elapsed ticker (terminal result, error, session end). */
+export function stopElapsedTicker(state: Record<string, unknown> | undefined): void {
+	if (!state || typeof state !== "object") return;
+	const handle = state[TICKER_KEY] as TickerHandle | undefined;
+	if (handle !== undefined) clearInterval(handle);
+	delete state[TICKER_KEY];
+	tickerStates.delete(state);
+}
+
+/** Stop every elapsed ticker (session start/shutdown). */
+export function stopAllElapsedTickers(): void {
+	for (const state of tickerStates) {
+		const handle = state[TICKER_KEY] as TickerHandle | undefined;
+		if (handle !== undefined) clearInterval(handle);
+		delete state[TICKER_KEY];
 	}
-	return typeof state[ELAPSED_MS_KEY] === "number" ? state[ELAPSED_MS_KEY] : undefined;
+	tickerStates.clear();
 }

package/extension-src/pi-style/features/tools/boxed/shared.ts

@@ -13,12 +13,21 @@ import {
 	resolveRelativePath,
 	shortenPath,
 } from "../../../shared/box.js";
-import { getStateElapsedMs, recordExecutionStarted } from "./session-config.js";
+import {
+	getStateElapsedMs,
+	isResultSeen,
+	markResultSeen,
+	recordExecutionEnded,
+	recordExecutionStarted,
+	startElapsedTicker,
+	stopElapsedTicker,
+} from "./session-config.js";
 
 /** Renderer context delivered by Pi's ToolExecutionComponent (getRenderContext). */
 export interface BoxedToolContext {
 	readonly args: Record<string, unknown>;
 	readonly toolCallId: string;
+	readonly invalidate: () => void;
 	readonly state: Record<string, unknown>;
 	readonly cwd: string;
 	readonly executionStarted: boolean;
@@ -88,6 +97,7 @@ export function compactCall(
 		isError: Boolean(options.context.isError),
 		isPartial: Boolean(options.context.isPartial),
 		isPending: pendingFlag(options.context),
+		running: Boolean(options.context.executionStarted),
 	});
 }
 
@@ -96,6 +106,36 @@ export function noteExecutionStart(context: BoxedToolContext): void {
 	recordExecutionStarted(context.state, context.executionStarted);
 }
 
+/**
+ * Keep running/ended execution state in sync from a call renderer pass. While
+ * the tool runs, a 1s re-render ticker keeps live elapsed labels current; once
+ * the call renders in its terminal form the elapsed freezes.
+ */
+export function noteBoxedCallState(context: BoxedToolContext): void {
+	if (!context.executionStarted) return;
+	if (context.isPartial) startElapsedTicker(context.state, context.invalidate);
+	else {
+		recordExecutionEnded(context.state);
+		stopElapsedTicker(context.state);
+	}
+}
+
+/**
+ * Record a result renderer pass and keep the ticker/ended state in sync.
+ * Returns whether this is the first result pass for the call, so renderers can
+ * render nothing while the pending/running call card stands alone.
+ */
+export function noteBoxedResultPhase(context: BoxedToolContext, isPartial: boolean): boolean {
+	const firstResultPass = !isResultSeen(context.state);
+	markResultSeen(context.state);
+	if (isPartial) startElapsedTicker(context.state, context.invalidate);
+	else {
+		recordExecutionEnded(context.state);
+		stopElapsedTicker(context.state);
+	}
+	return firstResultPass;
+}
+
 export function stateElapsedMs(context: BoxedToolContext): number | undefined {
 	return getStateElapsedMs(context.state);
 }

package/extension-src/pi-style/features/tools/boxed/write.ts

@@ -34,6 +34,14 @@ import {
 /** Right-side bottom-border hint shown when the compact preview is truncated. */
 const WRITE_EXPAND_HINT = "Ctrl+O for more";
 
+/** Partial-pass result: the compact call keeps its `◌ Running` card. */
+const EMPTY_WRITE_RESULT: Component = Object.freeze({
+	invalidate() {},
+	render() {
+		return [];
+	},
+});
+
 type NumberedLine = { number: string; content: string };
 
 /**
@@ -66,6 +74,7 @@ function renderWritePreviewBox(
 		state?: Record<string, unknown>;
 		isError: boolean;
 		isPending: boolean;
+		running?: boolean;
 		expanded: boolean;
 	},
 ): Component {
@@ -78,6 +87,7 @@ function renderWritePreviewBox(
 		...(options.state ? { state: options.state } : {}),
 		isError: options.isError,
 		isPending: options.isPending,
+		running: Boolean(options.running),
 		bodyLines: () => {
 			if (preview.length === 0) return [];
 			const shown = preview.slice(0, budget).map((line) => formatNumberedLine(theme, line));
@@ -107,10 +117,11 @@ export const writeTool: BoxedToolDefinition = {
 			state: context.state,
 			isError: Boolean(context.isError),
 			isPending: Boolean(context.isPartial),
+			running: Boolean(context.executionStarted),
 			expanded: Boolean(context.expanded),
 		});
 	},
-	result(result, _options, theme, context) {
+	result(result, options, theme, context) {
 		clearFooterState(context);
 		const output = getTextOutput(result);
 		const detail = displayPath(String(context?.args?.path ?? context?.args?.file_path ?? ""), context);
@@ -124,6 +135,11 @@ export const writeTool: BoxedToolDefinition = {
 			});
 		}
 
+		// While the result is still streaming, don't stamp a metrics footer into
+		// the shared state: the compact call keeps its `◌ Running` card and only
+		// closes with `elapsed · words` once the tool settles.
+		if (options.isPartial) return EMPTY_WRITE_RESULT;
+
 		// Success (compact and expanded): the preview box closes with the metrics
 		// footer stored into the shared renderer state; the result adds nothing.
 		return compactFooterWithState(theme, result, context);

package/extension-src/pi-style/pi/session-coordinator.ts

@@ -7,7 +7,11 @@ import { setSpecialBlockTheme } from "../features/messages/special-blocks.js";
 import { resetBashTreeRegistry } from "../features/tools/boxed/bash.js";
 import { resetBatchRegistry } from "../features/tools/boxed/batch.js";
 import { resetGrepRegistry } from "../features/tools/boxed/grep.js";
-import { setToolsRenderConfig, type ToolsRenderConfig } from "../features/tools/boxed/session-config.js";
+import {
+	setToolsRenderConfig,
+	stopAllElapsedTickers,
+	type ToolsRenderConfig,
+} from "../features/tools/boxed/session-config.js";
 import { createCompatibilityCoordinator } from "./compatibility-coordinator.js";
 import {
 	type CompatibilityCleanupResult,
@@ -150,6 +154,9 @@ export function createPiStyleSessionCoordinator(pi: ExtensionAPI, hooks: Compati
 			resetBatchRegistry();
 			resetGrepRegistry();
 			resetBashTreeRegistry();
+			// Stop any 1s elapsed re-render ticker left by a tool that was still
+			// running when the session ended.
+			stopAllElapsedTickers();
 			active = false;
 			await app.reload();
 			productGate = app.productPolicy.corePatchGate;
@@ -216,6 +223,7 @@ export function createPiStyleSessionCoordinator(pi: ExtensionAPI, hooks: Compati
 			resetBatchRegistry();
 			resetGrepRegistry();
 			resetBashTreeRegistry();
+			stopAllElapsedTickers();
 			app.sessionShutdown();
 			// Tier C prototype patches stay installed across session switches. Pi renders
 			// the restored chat (renderBeforeBind) AFTER session_shutdown but BEFORE the

package/extension-src/pi-style/shared/box.ts

@@ -43,7 +43,15 @@ export interface BoxedRenderOptions {
 	isError?: boolean;
 	isPartial?: boolean;
 	isPending?: boolean;
+	/** Execution has started but the tool is still running (title `◌` instead of `✓`). */
+	running?: boolean;
+	/** A result renderer already produced a continuation for this call, so the call
+	 *  leaves the box open instead of closing it with a pending label. */
+	resultSeen?: boolean;
 	pendingText?: string;
+	/** Verbatim bottom-border label for the pending/running card (overrides the
+	 *  `… ${pendingText}` default, e.g. a live `◌ Running · 12.4s` status). */
+	pendingLabel?: string;
 	state?: Record<string, unknown>;
 	/** Wall-clock elapsed override (used when metrics are not in result.details). */
 	elapsedMs?: number;
@@ -333,22 +341,45 @@ function formatBoxedStatusIcon(theme: BoxTheme, isError?: boolean): string {
 
 /**
  * Colored `➔ Name` prefix for tool titles (identity color). The status glyph
- * (✓/✗) is appended separately by formatBoxedToolTitle.
+ * (✓/◌/✗) is appended separately by formatBoxedToolTitle.
  */
 export function formatToolTitlePrefix(theme: BoxTheme, name: string): string {
 	return colorFromExtra(theme, "bashPromptColor", "bashMode", `➔ ${name}`);
 }
 
-export function formatBoxedToolTitle(theme: BoxTheme, name: string, isError?: boolean): string {
+export type BoxedTitleStatus = "running" | "pending";
+
+/**
+ * Boxed tool title: `➔ Name ✓` when settled, `➔ Name ◌` while running, plain
+ * `➔ Name` while pending, and a fully error-colored `➔ Name ✗` on failure.
+ * The ✓/◌ glyphs are never shown before the tool settles, so a card that is
+ * still executing never reads as finished.
+ */
+export function formatBoxedToolTitle(
+	theme: BoxTheme,
+	name: string,
+	isError?: boolean,
+	status?: BoxedTitleStatus,
+): string {
 	// On failure the whole title turns error-colored (not just the ✗) so a failed
 	// tool reads instantly; on success the tool keeps its identity color and only
 	// the ✓ carries the success color.
 	const coloredTitle = isError
 		? theme.fg("error", `➔ ${name} ✗`)
-		: `${formatToolTitlePrefix(theme, name)} ${formatBoxedStatusIcon(theme, false)}`;
+		: status === "running"
+			? `${formatToolTitlePrefix(theme, name)} ${theme.fg("text", "◌")}`
+			: status === "pending"
+				? formatToolTitlePrefix(theme, name)
+				: `${formatToolTitlePrefix(theme, name)} ${formatBoxedStatusIcon(theme, false)}`;
 	return typeof theme?.bold === "function" ? theme.bold(coloredTitle) : coloredTitle;
 }
 
+/** Live running status label for pending/running cards and streaming footers. */
+export function formatBoxedRunningStatus(theme: BoxTheme, elapsedMs: number | undefined): string {
+	const elapsed = elapsedMs === undefined ? "" : `${theme.fg("text", ` · ${(elapsedMs / 1000).toFixed(1)}s`)}`;
+	return `${theme.fg("dim", "◌ Running")}${elapsed}`;
+}
+
 function boxText(theme: BoxTheme, text: string): string {
 	return `${RESET_INTENSITY}${theme.fg("borderMuted", text)}`;
 }
@@ -571,7 +602,12 @@ export function renderBoxedToolCall(
 		},
 		render(width: number): string[] {
 			if (cache?.width === width) return cache.lines;
-			const title = formatBoxedToolTitle(theme, toolName, options.isError);
+			const title = formatBoxedToolTitle(
+				theme,
+				toolName,
+				options.isError,
+				options.isPending ? (options.running ? "running" : "pending") : undefined,
+			);
 			const headerLabel = options.headerDetail ? `${title} · ${options.headerDetail}` : title;
 			const renderedWidth = boxWidth(width);
 			const lines = [
@@ -579,22 +615,26 @@ export function renderBoxedToolCall(
 				boxBlankLine(theme, renderedWidth),
 				...detailLines.flatMap((line) => boxedWrappedLines(theme, line, renderedWidth)),
 			];
-			if (options.isPending) {
-				const pendingText = options.pendingText ?? "Waiting for output…";
+			if (options.isPending && !options.resultSeen) {
+				// Pending/running card: close the box with the status label. Once a
+				// result renderer has produced a continuation, the box stays open and
+				// that continuation closes it.
+				const pendingLabel =
+					options.pendingLabel ?? theme.fg("dim", `… ${options.pendingText ?? "Waiting for output…"}`);
 				lines.push(
 					boxBlankLine(theme, renderedWidth),
 					boxLabeledBorder(
 						theme,
 						BOX_ROUND_BOTTOM_LEFT,
 						BOX_ROUND_BOTTOM_RIGHT,
-						theme.fg("dim", `… ${pendingText}`),
+						pendingLabel,
 						undefined,
 						renderedWidth,
 					),
 				);
 			} else {
 				// Leave the box open with trailing breathing room; the result renderer
-				// continues it with the Response divider.
+				// continues it with the result divider.
 				lines.push(boxBlankLine(theme, renderedWidth));
 			}
 			cache = { width, lines };
@@ -624,7 +664,12 @@ export function renderCompactBoxedToolCall(
 		invalidate() {},
 		render(width: number): string[] {
 			const renderedWidth = boxWidth(width);
-			const title = formatBoxedToolTitle(theme, toolName, options.isError);
+			const title = formatBoxedToolTitle(
+				theme,
+				toolName,
+				options.isError,
+				options.isPending ? (options.running ? "running" : "pending") : undefined,
+			);
 			const headerLabel = detailLine ? `${title} · ${detailLine}` : title;
 			const compactFooter =
 				typeof options.state?.[COMPACT_FOOTER_KEY] === "string" ? options.state[COMPACT_FOOTER_KEY] : "";
@@ -649,19 +694,23 @@ export function renderCompactBoxedToolCall(
 					),
 				);
 			} else if (options.isPending) {
-				const pendingText = options.pendingText ?? "Waiting for output…";
+				const pendingLabel =
+					options.pendingLabel ??
+					(options.running
+						? formatBoxedRunningStatus(theme, undefined)
+						: theme.fg("dim", `… ${options.pendingText ?? "Waiting for output…"}`));
 				lines.push(
 					boxLabeledBorder(
 						theme,
 						BOX_ROUND_BOTTOM_LEFT,
 						BOX_ROUND_BOTTOM_RIGHT,
-						theme.fg("dim", `… ${pendingText}`),
+						pendingLabel,
 						options.bottomRightLabel,
 						renderedWidth,
 					),
 				);
 			} else {
-				// No footer yet (transient, or the result opens the Response divider):
+				// No footer yet (transient, or the result opens the result divider):
 				// leave the box open so the result renderer continues the same box.
 			}
 			return lines;
@@ -689,6 +738,10 @@ export function renderBoxedToolResult(
 		expandHint?: string;
 		isError?: boolean;
 		isPartial?: boolean;
+		/** Skip the result divider entirely (streaming continuation into an open call box). */
+		showDivider?: boolean;
+		/** Error state marker prepended to the body (default `✗ Error`). */
+		errorLabel?: string;
 	} = {},
 ): Component {
 	let cache: RenderLinesCache | null = null;
@@ -702,7 +755,7 @@ export function renderBoxedToolResult(
 			const renderedWidth = boxWidth(width);
 			const maxContentWidth = boxInnerWidth(renderedWidth);
 			const bodyLines = typeof body === "function" ? body(maxContentWidth) : body.render(maxContentWidth);
-			const errorPrefix = options.isError ? [theme.fg("error", "✗ Error")] : [];
+			const errorPrefix = options.isError ? [theme.fg("error", options.errorLabel ?? "✗ Error")] : [];
 			const outputLines =
 				bodyLines.length > 0
 					? [...errorPrefix, ...bodyLines]
@@ -713,14 +766,18 @@ export function renderBoxedToolResult(
 					? options.dividerLabel(renderedWidth)
 					: (options.dividerLabel ?? "Response");
 			const rendered = [
-				boxLabeledBorder(
-					theme,
-					BOX_DIVIDER_LEFT,
-					BOX_DIVIDER_RIGHT,
-					theme.fg("dim", dividerText),
-					options.dividerRightLabel ? theme.fg("dim", options.dividerRightLabel) : undefined,
-					renderedWidth,
-				),
+				...(options.showDivider === false
+					? []
+					: [
+							boxLabeledBorder(
+								theme,
+								BOX_DIVIDER_LEFT,
+								BOX_DIVIDER_RIGHT,
+								theme.fg("dim", dividerText),
+								options.dividerRightLabel ? theme.fg("dim", options.dividerRightLabel) : undefined,
+								renderedWidth,
+							),
+						]),
 				boxBlankLine(theme, renderedWidth),
 				...renderBoxedOutputLines(theme, outputLines, renderedWidth, options.renderLineBudget ?? outputLines.length),
 				boxBlankLine(theme, renderedWidth),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quandev104/pi-style",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A native-layout, cohesive visual style package for Pi.",
   "license": "MIT",
   "type": "module",