@nedleeds/pi-compact-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dong Hyeong Lee
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,144 @@
+# pi-compact-ui
+
+Compact, expandable rendering for pi's built-in `read`, `write`, `edit`, and `bash` tools, bundled with a polished GitHub Dark theme.
+
+Designed for a focused, low-noise terminal workflow.
+
+![Spinner and duration indicators](https://raw.githubusercontent.com/nedleeds/pi-compact-ui/main/assets/spinner-status.gif)
+
+## Demo
+
+**Keyboard expansion** – press `Ctrl+O` to cycle through detail levels.
+
+![Ctrl+O expansion](https://raw.githubusercontent.com/nedleeds/pi-compact-ui/main/assets/keyboard-expand.gif)
+
+**Edit diffs** – click a finished `edit` row to reveal the diff, click again to collapse.
+
+![Edit diff expansion](https://raw.githubusercontent.com/nedleeds/pi-compact-ui/main/assets/edit-diff.gif)
+
+## Features
+
+- Compact one-line tool calls
+- Click or `Ctrl+O` to cycle through available detail levels
+- Skips argument and output levels that contain no additional information
+- Animated, configurable tool spinner
+- Execution duration with configurable indicators
+- Short and full output previews
+- Clean edit diffs without duplicate JSON arguments or leading blank lines
+- GitHub Dark theme with distinct tool, output, success, and error colors
+- No Nerd Font requirement
+
+## Requirements
+
+- pi `0.85.1` or newer is recommended
+- Node.js 20 or newer
+- Fullscreen TUI mode is required for mouse-click expansion; `Ctrl+O` works without it
+
+## Install
+
+From npm:
+
+```bash
+pi install npm:@nedleeds/pi-compact-ui
+```
+
+Or directly from GitHub:
+
+```bash
+pi install git:github.com/nedleeds/pi-compact-ui
+```
+
+Restart pi or run `/reload` after installation.
+
+## Theme
+
+The package includes the `github-dark-pro` theme. Select it from pi's settings UI or set it in `~/.pi/agent/settings.json`:
+
+```json
+{
+  "theme": "github-dark-pro"
+}
+```
+
+## Configuration
+
+The extension works without a configuration file. Its defaults are defined in the source code.
+
+To customize it globally, create `~/.pi/agent/compact-tools.json` using the example below. The included JSON Schema provides completion and validation in compatible editors.
+
+For project-specific settings, create:
+
+```text
+<project>/.pi/compact-tools.json
+```
+
+Project configuration is loaded only for trusted projects. Values are merged in this order:
+
+```text
+built-in defaults
+→ ~/.pi/agent/compact-tools.json
+→ <project>/.pi/compact-tools.json
+```
+
+Default configuration:
+
+```json
+{
+  "$schema": "https://raw.githubusercontent.com/nedleeds/pi-compact-ui/main/schemas/compact-tools.schema.json",
+  "previewLines": 10,
+  "spinner": {
+    "frames": ["◐", "◓", "◑", "◒"],
+    "intervalMs": 120
+  },
+  "durationIndicators": [
+    { "underMs": 1000, "icon": "⚡️" },
+    { "underMs": 10000, "icon": "🚀" },
+    { "underMs": 30000, "icon": "🔥" },
+    { "icon": "⏳" }
+  ]
+}
+```
+
+`durationIndicators` must use ascending `underMs` values. The final entry must omit `underMs` and acts as the fallback.
+
+## Expansion levels
+
+Only levels with meaningful content are included. Depending on the tool call, the cycle may be:
+
+```text
+summary → arguments → output preview → full output → summary
+summary → output → summary
+summary only
+```
+
+`edit` uses:
+
+```text
+summary → diff → summary
+```
+
+## Compatibility and limitations
+
+- The package overrides pi's built-in `read`, `write`, `edit`, and `bash` definitions while preserving their execution behavior and metadata.
+- Another extension overriding the same tool names may conflict depending on extension load order.
+- Tools registered by other extensions are not modified.
+- Duration is measured from the first execution render and is intended as a UI estimate.
+- Emoji appearance depends on terminal and system font support. All default duration icons use Unicode 6.0 or earlier.
+
+## Development
+
+```bash
+npm install
+npm run check
+pi -e .
+```
+
+When testing with `pi -e .`, disable any local copy of `compact-tools.ts` to avoid duplicate tool overrides.
+
+## Security
+
+Pi extensions execute with full system access. Review extension source before installing third-party packages.
+
+## License
+
+MIT

package/examples/compact-tools.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://raw.githubusercontent.com/nedleeds/pi-compact-ui/main/schemas/compact-tools.schema.json",
+  "previewLines": 10,
+  "spinner": {
+    "frames": ["◐", "◓", "◑", "◒"],
+    "intervalMs": 120
+  },
+  "durationIndicators": [
+    { "underMs": 1000, "icon": "⚡️" },
+    { "underMs": 10000, "icon": "🚀" },
+    { "underMs": 30000, "icon": "🔥" },
+    { "icon": "⏳" }
+  ]
+}

package/extensions/compact-tools.ts

@@ -0,0 +1,528 @@
+/** Compact rendering and shared status indicators for built-in tools. */
+
+import { existsSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+import type {
+	AgentToolResult,
+	BashToolDetails,
+	BashToolInput,
+	ExtensionAPI,
+	Theme,
+	ToolDefinition,
+	ToolRenderResultOptions,
+} from "@earendil-works/pi-coding-agent";
+import {
+	CONFIG_DIR_NAME,
+	createBashToolDefinition,
+	createEditToolDefinition,
+	createReadToolDefinition,
+	createWriteToolDefinition,
+	getAgentDir,
+} from "@earendil-works/pi-coding-agent";
+import type { Component } from "@earendil-works/pi-tui";
+import { Container, Text, visibleWidth } from "@earendil-works/pi-tui";
+
+const MAX_LEVEL = 3;
+const CONFIG_FILE = "compact-tools.json";
+
+export interface DurationIndicatorConfig {
+	underMs?: number;
+	icon: string;
+}
+
+export interface CompactToolsConfig {
+	previewLines: number;
+	spinner: {
+		frames: string[];
+		intervalMs: number;
+	};
+	durationIndicators: DurationIndicatorConfig[];
+}
+
+export const DEFAULT_CONFIG: CompactToolsConfig = {
+	previewLines: 10,
+	spinner: {
+		frames: ["◐", "◓", "◑", "◒"],
+		intervalMs: 120,
+	},
+	durationIndicators: [
+		{ underMs: 1_000, icon: "⚡️" },
+		{ underMs: 10_000, icon: "🚀" },
+		{ underMs: 30_000, icon: "🔥" },
+		{ icon: "☕" },
+	],
+};
+
+let config = DEFAULT_CONFIG;
+
+interface RowState {
+	level?: number;
+	availableLevels?: number[];
+	lastExpanded?: boolean;
+	frame?: number;
+	startedAt?: number;
+	endedAt?: number;
+	timer?: ReturnType<typeof setInterval>;
+	originalResultComponent?: Component;
+}
+
+type ToolArgs = Record<string, unknown>;
+type BuiltInDefinition = ToolDefinition<any, any, any>;
+type BaseRenderContext = Parameters<NonNullable<BuiltInDefinition["renderCall"]>>[2];
+type RenderContext<TArgs = ToolArgs> = Omit<BaseRenderContext, "args" | "state"> & {
+	args: TArgs;
+	state: RowState;
+};
+
+type JsonObject = Record<string, unknown>;
+
+function isObject(value: unknown): value is JsonObject {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function warnConfig(path: string, message: string): void {
+	console.error(`[compact-tools] ${path}: ${message}`);
+}
+
+function isIntegerInRange(value: unknown, minimum: number, maximum: number): value is number {
+	return typeof value === "number" && Number.isInteger(value) && value >= minimum && value <= maximum;
+}
+
+function isNonEmptyStringArray(value: unknown): value is string[] {
+	return Array.isArray(value) && value.length > 0 && value.every((item) => typeof item === "string" && item.length > 0);
+}
+
+function parseDurationIndicators(value: unknown): DurationIndicatorConfig[] | undefined {
+	if (!Array.isArray(value) || value.length === 0) return undefined;
+	const rules: DurationIndicatorConfig[] = [];
+	let previousLimit = 0;
+	for (const [index, item] of value.entries()) {
+		if (!isObject(item) || typeof item.icon !== "string" || item.icon.length === 0) return undefined;
+		const isLast = index === value.length - 1;
+		if (isLast && item.underMs === undefined) rules.push({ icon: item.icon });
+		else if (isIntegerInRange(item.underMs, previousLimit + 1, Number.MAX_SAFE_INTEGER)) {
+			previousLimit = item.underMs;
+			rules.push({ underMs: item.underMs, icon: item.icon });
+		} else return undefined;
+	}
+	return rules.at(-1)?.underMs === undefined ? rules : undefined;
+}
+
+function mergeConfig(base: CompactToolsConfig, value: unknown, path: string): CompactToolsConfig {
+	if (value === undefined) return base;
+	if (!isObject(value)) {
+		warnConfig(path, "expected a JSON object; using previous values");
+		return base;
+	}
+	const previewValue = value.previewLines;
+	const validPreviewLines = isIntegerInRange(previewValue, 1, 1_000);
+	const previewLines = validPreviewLines ? previewValue : base.previewLines;
+	if (previewValue !== undefined && !validPreviewLines) {
+		warnConfig(path, "previewLines must be an integer from 1 to 1000; using previous value");
+	}
+	const spinner = parseSpinnerConfig(base.spinner, value.spinner, path);
+	const durationIndicators = parseDurationIndicators(value.durationIndicators) ?? base.durationIndicators;
+	if (value.durationIndicators !== undefined && durationIndicators === base.durationIndicators) {
+		warnConfig(path, "invalid durationIndicators; using previous values");
+	}
+	return { previewLines, spinner, durationIndicators };
+}
+
+function parseSpinnerConfig(
+	base: CompactToolsConfig["spinner"],
+	value: unknown,
+	path: string,
+): CompactToolsConfig["spinner"] {
+	if (value === undefined) return base;
+	if (!isObject(value)) {
+		warnConfig(path, "spinner must be an object; using previous values");
+		return base;
+	}
+	const framesValue = value.frames;
+	const intervalValue = value.intervalMs;
+	const validFrames = isNonEmptyStringArray(framesValue);
+	const validInterval = isIntegerInRange(intervalValue, 40, 5_000);
+	if (framesValue !== undefined && !validFrames) warnConfig(path, "spinner.frames must be a non-empty string array");
+	if (intervalValue !== undefined && !validInterval) warnConfig(path, "spinner.intervalMs must be 40–5000");
+	return {
+		frames: validFrames ? framesValue : base.frames,
+		intervalMs: validInterval ? intervalValue : base.intervalMs,
+	};
+}
+
+function readConfig(path: string): unknown {
+	if (!existsSync(path)) return undefined;
+	try {
+		return JSON.parse(readFileSync(path, "utf8"));
+	} catch (error) {
+		warnConfig(path, error instanceof Error ? error.message : String(error));
+		return undefined;
+	}
+}
+
+export function loadConfig(cwd?: string, projectTrusted = false): CompactToolsConfig {
+	const globalPath = join(getAgentDir(), CONFIG_FILE);
+	let loaded = mergeConfig(DEFAULT_CONFIG, readConfig(globalPath), globalPath);
+	if (!cwd || !projectTrusted) return loaded;
+	const projectPath = join(cwd, CONFIG_DIR_NAME, CONFIG_FILE);
+	loaded = mergeConfig(loaded, readConfig(projectPath), projectPath);
+	return loaded;
+}
+
+const SPINNING_ROWS_KEY = Symbol.for("pi.compact-tools.spinning-rows");
+const globalState = globalThis as typeof globalThis & { [SPINNING_ROWS_KEY]?: Set<RowState> };
+for (const staleState of globalState[SPINNING_ROWS_KEY] ?? []) {
+	if (staleState.timer) clearInterval(staleState.timer);
+}
+const spinningRows = new Set<RowState>();
+globalState[SPINNING_ROWS_KEY] = spinningRows;
+
+function advanceLevel(state: RowState, expanded: boolean): number {
+	state.level ??= 0;
+	if (state.lastExpanded === undefined) {
+		state.lastExpanded = expanded;
+		return state.level;
+	}
+	if (state.lastExpanded !== expanded) {
+		state.lastExpanded = expanded;
+		const levels = state.availableLevels ?? [0, 1];
+		const index = levels.indexOf(state.level);
+		state.level = levels[(index + 1) % levels.length] ?? 0;
+	}
+	return state.level;
+}
+
+function setAvailableLevels(state: RowState, levels: number[]): void {
+	state.availableLevels = levels;
+	if (!levels.includes(state.level ?? 0)) state.level = 0;
+}
+
+function getOutputLevels(output: string): number[] {
+	const normalized = output.trimEnd();
+	if (!normalized) return [];
+	return normalized.split("\n").length > config.previewLines ? [2, 3] : [2];
+}
+
+function stopSpinner(state: RowState): void {
+	if (state.timer) clearInterval(state.timer);
+	state.timer = undefined;
+	spinningRows.delete(state);
+}
+
+function syncSpinner(state: RowState, running: boolean, invalidate: () => void): void {
+	if (!running) {
+		stopSpinner(state);
+		return;
+	}
+	if (state.timer) return;
+
+	state.frame ??= 0;
+	state.timer = setInterval(() => {
+		state.frame = ((state.frame ?? 0) + 1) % config.spinner.frames.length;
+		try {
+			invalidate();
+		} catch {
+			stopSpinner(state);
+		}
+	}, config.spinner.intervalMs);
+	state.timer.unref?.();
+	spinningRows.add(state);
+}
+
+function syncTiming(state: RowState, executionStarted: boolean, running: boolean): void {
+	if ((executionStarted || running) && state.startedAt === undefined) state.startedAt = Date.now();
+	if (!running && state.startedAt !== undefined && state.endedAt === undefined) {
+		state.endedAt = Date.now();
+	}
+}
+
+function syncRow(ctx: RenderContext, running = ctx.executionStarted && ctx.isPartial): RowState {
+	const state = ctx.state;
+	syncTiming(state, ctx.executionStarted, running);
+	syncSpinner(state, running, ctx.invalidate);
+	return state;
+}
+
+function resetUiState(): void {
+	for (const state of [...spinningRows]) stopSpinner(state);
+}
+
+function renderIndicator(
+	theme: Theme,
+	state: RowState,
+	running: boolean,
+	isError: boolean,
+	pending: boolean,
+): string {
+	if (isError) return theme.fg("error", "⊗");
+	if (pending) return theme.fg("muted", "·");
+	if (!running) return theme.fg("success", "●");
+	const frame = config.spinner.frames[state.frame ?? 0] ?? config.spinner.frames[0] ?? "◐";
+	return theme.fg("muted", frame);
+}
+
+function formatDuration(state: RowState): string | undefined {
+	if (state.startedAt === undefined) return undefined;
+	const elapsedMs = (state.endedAt ?? Date.now()) - state.startedAt;
+	return `${(elapsedMs / 1000).toFixed(1)}s`;
+}
+
+function durationIndicator(state: RowState): string | undefined {
+	if (state.startedAt === undefined || state.endedAt === undefined) return undefined;
+	const elapsedMs = state.endedAt - state.startedAt;
+	return config.durationIndicators.find((rule) => rule.underMs === undefined || elapsedMs < rule.underMs)?.icon;
+}
+
+function renderControls(theme: Theme, state: RowState, running: boolean, isError: boolean): Text {
+	const duration = formatDuration(state);
+	const levels = state.availableLevels ?? [0, 1];
+	const expandable = levels.length > 1;
+	const atLastLevel = state.level === levels.at(-1);
+	const action = expandable
+		? `${theme.italic("ctrl+o")} ${atLastLevel ? "to collapse" : "for more"}`
+		: undefined;
+	const indicator = !running && !isError ? durationIndicator(state) : undefined;
+	const status = running
+		? duration
+		: `${indicator ? `${indicator} ` : ""}${isError ? "Failed" : "Done"}${duration ? ` in ${duration}` : ""}`;
+	const details = [status, action].filter(Boolean).join(", ");
+	return new Text(`  ${theme.fg("dim", details)}`, 0, 0);
+}
+
+function firstLine(value: string, maxLength = 100): string {
+	const line = value.split("\n")[0] ?? "";
+	return line.length > maxLength ? `${line.slice(0, maxLength - 1)}…` : line;
+}
+
+function getTextResult(result: AgentToolResult<unknown>): string {
+	return result.content
+		.filter((item) => item.type === "text")
+		.map((item) => item.text)
+		.join("\n")
+		.trimEnd();
+}
+
+function withoutLeadingBlankLines(component: Component): Component {
+	return {
+		render(width: number) {
+			const lines = component.render(width);
+			const firstContentLine = lines.findIndex((line) => visibleWidth(line.trim()) > 0);
+			return firstContentLine < 0 ? [] : lines.slice(firstContentLine);
+		},
+		invalidate() {
+			component.invalidate?.();
+		},
+	};
+}
+
+function styleToolOutput(text: string, theme: Theme, isError: boolean): string {
+	const color = isError ? "error" : "toolOutput";
+	return text
+		.split(/(⚡️?)/u)
+		.map((part) => theme.fg(!isError && part.startsWith("⚡") ? "warning" : color, part))
+		.join("");
+}
+
+function renderPreview(output: string, level: number, theme: Theme, isError: boolean): Text | undefined {
+	const normalized = output.trimEnd();
+	if (!normalized) return undefined;
+
+	const lines = normalized.split("\n");
+	const shown = level >= MAX_LEVEL ? lines : lines.slice(0, config.previewLines);
+	let text = shown.map((line) => `  ${line}`).join("\n");
+	if (shown.length < lines.length) text += `\n  … ${lines.length - shown.length} more lines`;
+	return new Text(styleToolOutput(text, theme, isError), 0, 0);
+}
+
+function getPathArg(args: ToolArgs): string {
+	const value = args.path ?? args.file_path;
+	return typeof value === "string" ? firstLine(value) : "";
+}
+
+function getFileArgumentDetails(name: string, args: ToolArgs): ToolArgs {
+	if (name === "edit") return {};
+	const omitted = new Set(["path", "file_path"]);
+	if (name === "write") omitted.add("content");
+	return Object.fromEntries(Object.entries(args).filter(([key, value]) => !omitted.has(key) && value !== undefined));
+}
+
+function renderArguments(args: ToolArgs, theme: Theme): Text {
+	const json = JSON.stringify(args, null, 2) ?? "{}";
+	const text = json
+		.split("\n")
+		.map((line) => `  ${line}`)
+		.join("\n");
+	return new Text(theme.fg("toolOutput", text), 0, 0);
+}
+
+function callOriginalEditResult(
+	definition: BuiltInDefinition,
+	result: AgentToolResult<unknown>,
+	options: ToolRenderResultOptions,
+	theme: Theme,
+	ctx: RenderContext,
+	state: RowState,
+	level: number,
+): void {
+	if (definition.name !== "edit" || !definition.renderResult) return;
+	state.originalResultComponent = definition.renderResult(
+		result,
+		{ ...options, expanded: level >= MAX_LEVEL },
+		theme,
+		{ ...ctx, state: {}, lastComponent: state.originalResultComponent },
+	);
+}
+
+function getFileOutput(name: string, args: ToolArgs, result: AgentToolResult<unknown>, isError: boolean): string {
+	if (isError || name === "read") return getTextResult(result);
+	if (name === "write") return String(args.content ?? "");
+	return "";
+}
+
+function renderFileCall(
+	definition: BuiltInDefinition,
+	args: ToolArgs,
+	theme: Theme,
+	ctx: RenderContext,
+): Container {
+	const running = ctx.executionStarted && ctx.isPartial;
+	const state = syncRow(ctx, running);
+	const level = advanceLevel(state, ctx.expanded);
+	const path = getPathArg(args);
+	const argumentDetails = getFileArgumentDetails(definition.name, args);
+	let text = `${renderIndicator(theme, state, running, ctx.isError, ctx.isPartial && !ctx.executionStarted)} `;
+	text += theme.fg("toolTitle", theme.bold(definition.name));
+	if (path) text += ` ${theme.fg("toolOutput", path)}`;
+
+	const container = new Container();
+	container.addChild(new Text(text, 1, 0));
+	if (level >= 1 && Object.keys(argumentDetails).length > 0) {
+		container.addChild(renderArguments(argumentDetails, theme));
+	}
+	return container;
+}
+
+function addFileResultPreview(
+	container: Container,
+	definition: BuiltInDefinition,
+	state: RowState,
+	output: string,
+	level: number,
+	theme: Theme,
+	isError: boolean,
+): void {
+	if (level < 2) return;
+	if (definition.name === "edit") {
+		if (state.originalResultComponent) {
+			container.addChild(withoutLeadingBlankLines(state.originalResultComponent));
+		}
+		return;
+	}
+	const preview = renderPreview(output, level, theme, isError);
+	if (preview) container.addChild(preview);
+}
+
+function renderFileResult(
+	definition: BuiltInDefinition,
+	result: AgentToolResult<unknown>,
+	options: ToolRenderResultOptions,
+	theme: Theme,
+	ctx: RenderContext,
+): Container {
+	const state = syncRow(ctx, options.isPartial);
+	const output = getFileOutput(definition.name, ctx.args, result, ctx.isError);
+	const hasArguments = Object.keys(getFileArgumentDetails(definition.name, ctx.args)).length > 0;
+	const levels = definition.name === "edit" ? [0, 2] : [0, ...(hasArguments ? [1] : []), ...getOutputLevels(output)];
+	setAvailableLevels(state, levels);
+
+	const level = state.level ?? 0;
+	callOriginalEditResult(definition, result, options, theme, ctx, state, level);
+	const container = new Container();
+	addFileResultPreview(container, definition, state, output, level, theme, ctx.isError);
+	container.addChild(renderControls(theme, state, options.isPartial, ctx.isError));
+	return container;
+}
+
+function createFileCallRenderer(definition: BuiltInDefinition) {
+	return (args: ToolArgs, theme: Theme, ctx: RenderContext) => renderFileCall(definition, args, theme, ctx);
+}
+
+function createFileResultRenderer(definition: BuiltInDefinition) {
+	return (result: AgentToolResult<unknown>, options: ToolRenderResultOptions, theme: Theme, ctx: RenderContext) =>
+		renderFileResult(definition, result, options, theme, ctx);
+}
+
+function registerFileTool(pi: ExtensionAPI, definition: BuiltInDefinition): void {
+	const tool = {
+		...definition,
+		renderShell: "self" as const,
+		renderCall: createFileCallRenderer(definition),
+		renderResult: createFileResultRenderer(definition),
+	};
+	// Built-in file schemas are intentionally erased at this shared renderer boundary.
+	pi.registerTool(tool as ToolDefinition<any, any, RowState>);
+}
+
+function renderBashCall(args: BashToolInput, theme: Theme, ctx: RenderContext<BashToolInput>): Text {
+	const running = ctx.executionStarted && ctx.isPartial;
+	const state = syncRow(ctx, running);
+	const level = advanceLevel(state, ctx.expanded);
+	const command = args.command ?? "";
+	const displayedCommand = (level >= 1 ? command : firstLine(command)) || "…";
+	let text = `${renderIndicator(theme, state, running, ctx.isError, ctx.isPartial && !ctx.executionStarted)} `;
+	text += `${theme.fg("toolTitle", theme.bold("bash"))} ${theme.fg("toolOutput", displayedCommand)}`;
+	if (level >= 1 && args.timeout) text += theme.fg("dim", ` (timeout: ${args.timeout}s)`);
+	return new Text(text, 1, 0);
+}
+
+function renderBashResult(
+	result: AgentToolResult<BashToolDetails | undefined>,
+	options: ToolRenderResultOptions,
+	theme: Theme,
+	ctx: RenderContext<BashToolInput>,
+): Component {
+	const state = syncRow(ctx, options.isPartial);
+	const output = getTextResult(result);
+	const hasDetailedCall = (ctx.args.command ?? "").includes("\n") || ctx.args.timeout !== undefined;
+	setAvailableLevels(state, [0, ...(hasDetailedCall ? [1] : []), ...getOutputLevels(output)]);
+	const level = state.level ?? 0;
+	if (level < 2) return renderControls(theme, state, options.isPartial, ctx.isError);
+
+	const container = new Container();
+	const preview = renderPreview(output, level, theme, ctx.isError);
+	if (preview) container.addChild(preview);
+	else container.addChild(new Text(theme.fg("dim", options.isPartial ? "  …" : "  (no output)"), 0, 0));
+	container.addChild(renderControls(theme, state, options.isPartial, ctx.isError));
+	return container;
+}
+
+function registerBashTool(pi: ExtensionAPI, cwd: string): void {
+	const original = createBashToolDefinition(cwd);
+	pi.registerTool<typeof original.parameters, BashToolDetails | undefined, RowState>({
+		...original,
+		renderShell: "self",
+		renderCall: renderBashCall,
+		renderResult: renderBashResult,
+	});
+}
+
+function registerBuiltInTools(pi: ExtensionAPI, cwd: string): void {
+	registerFileTool(pi, createReadToolDefinition(cwd));
+	registerFileTool(pi, createEditToolDefinition(cwd));
+	registerFileTool(pi, createWriteToolDefinition(cwd));
+	registerBashTool(pi, cwd);
+}
+
+function applyConfig(pi: ExtensionAPI, cwd: string, projectTrusted: boolean): void {
+	resetUiState();
+	config = loadConfig(cwd, projectTrusted);
+	registerBuiltInTools(pi, cwd);
+}
+
+export default function (pi: ExtensionAPI): void {
+	config = loadConfig();
+	registerBuiltInTools(pi, process.cwd());
+	pi.on("session_start", (_event, ctx) => applyConfig(pi, ctx.cwd, ctx.isProjectTrusted()));
+	pi.on("resources_discover", (_event, ctx) => applyConfig(pi, ctx.cwd, ctx.isProjectTrusted()));
+	pi.on("session_shutdown", resetUiState);
+}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@nedleeds/pi-compact-ui",
+  "version": "0.1.0",
+  "description": "Compact, expandable UI for pi's built-in tools, bundled with a polished GitHub Dark theme.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Dong Hyeong Lee",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nedleeds/pi-compact-ui.git"
+  },
+  "homepage": "https://github.com/nedleeds/pi-compact-ui#readme",
+  "bugs": {
+    "url": "https://github.com/nedleeds/pi-compact-ui/issues"
+  },
+  "keywords": [
+    "pi-package",
+    "pi-coding-agent",
+    "pi-extension",
+    "terminal-ui",
+    "theme"
+  ],
+  "files": [
+    "extensions",
+    "themes",
+    "examples",
+    "scripts",
+    "schemas",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "check": "tsc --noEmit && npm run check:resources",
+    "check:resources": "node scripts/check-resources.mjs",
+    "prepublishOnly": "npm run check"
+  },
+  "pi": {
+    "extensions": [
+      "./extensions/compact-tools.ts"
+    ],
+    "themes": [
+      "./themes/github-dark-pro.json"
+    ],
+    "image": "https://raw.githubusercontent.com/nedleeds/pi-compact-ui/main/assets/spinner-status.gif"
+  },
+  "peerDependencies": {
+    "@earendil-works/pi-coding-agent": "*",
+    "@earendil-works/pi-tui": "*"
+  },
+  "devDependencies": {
+    "@earendil-works/pi-coding-agent": "0.85.1",
+    "@earendil-works/pi-tui": "0.85.1",
+    "@types/node": "^24.0.0",
+    "typescript": "^5.9.0"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/schemas/compact-tools.schema.json

@@ -0,0 +1,62 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://raw.githubusercontent.com/nedleeds/pi-compact-ui/main/schemas/compact-tools.schema.json",
+  "title": "pi-compact-ui configuration",
+  "type": "object",
+  "additionalProperties": false,
+  "properties": {
+    "$schema": {
+      "type": "string"
+    },
+    "previewLines": {
+      "description": "Number of output lines shown before the full-output expansion level.",
+      "type": "integer",
+      "minimum": 1,
+      "maximum": 1000,
+      "default": 10
+    },
+    "spinner": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "frames": {
+          "description": "Animation frames. Use terminal-safe single-width characters for consistent alignment.",
+          "type": "array",
+          "minItems": 1,
+          "items": {
+            "type": "string",
+            "minLength": 1
+          },
+          "default": ["◐", "◓", "◑", "◒"]
+        },
+        "intervalMs": {
+          "description": "Milliseconds between spinner frames.",
+          "type": "integer",
+          "minimum": 40,
+          "maximum": 5000,
+          "default": 120
+        }
+      }
+    },
+    "durationIndicators": {
+      "description": "Ordered duration thresholds. The final item must omit underMs and acts as the fallback.",
+      "type": "array",
+      "minItems": 1,
+      "items": {
+        "type": "object",
+        "additionalProperties": false,
+        "required": ["icon"],
+        "properties": {
+          "underMs": {
+            "type": "integer",
+            "minimum": 1
+          },
+          "icon": {
+            "type": "string",
+            "minLength": 1
+          }
+        }
+      }
+    }
+  }
+}

package/scripts/check-resources.mjs

@@ -0,0 +1,23 @@
+import { readFile } from "node:fs/promises";
+
+const resources = [
+  "themes/github-dark-pro.json",
+  "examples/compact-tools.json",
+  "schemas/compact-tools.schema.json",
+];
+
+for (const path of resources) {
+  const value = JSON.parse(await readFile(new URL(`../${path}`, import.meta.url), "utf8"));
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    throw new Error(`${path} must contain a JSON object`);
+  }
+}
+
+const theme = JSON.parse(
+  await readFile(new URL("../themes/github-dark-pro.json", import.meta.url), "utf8"),
+);
+if (theme.name !== "github-dark-pro" || !theme.colors || typeof theme.colors !== "object") {
+  throw new Error("themes/github-dark-pro.json is not a valid pi theme document");
+}
+
+console.log("Resource checks passed");

package/themes/github-dark-pro.json

@@ -0,0 +1,92 @@
+{
+  "$schema": "https://raw.githubusercontent.com/earendil-works/pi/main/packages/coding-agent/src/modes/interactive/theme/theme-schema.json",
+  "name": "github-dark-pro",
+  "vars": {
+    "surfaceMuted": "#21262D",
+    "border": "#30363D",
+    "borderSubtle": "#21262D",
+    "text": "#C9D1D9",
+    "textBright": "#E6EDF3",
+    "muted": "#8B949E",
+    "dim": "#6E7681",
+    "blue": "#58A6FF",
+    "blueSoft": "#79C0FF",
+    "green": "#3FB950",
+    "red": "#F85149",
+    "yellow": "#E0A052",
+    "orange": "#FFA657",
+    "purple": "#D2A8FF",
+    "toolAccent": "#95A7FF",
+    "toolName": "#8B85D6",
+    "toolText": "#A6AFBA",
+    "pink": "#FF7B72"
+  },
+  "colors": {
+    "accent": "toolAccent",
+    "border": "border",
+    "borderAccent": "dim",
+    "borderMuted": "borderSubtle",
+    "success": "green",
+    "error": "red",
+    "warning": "yellow",
+    "muted": "muted",
+    "dim": "dim",
+    "text": "text",
+    "thinkingText": "muted",
+
+    "selectedBg": "surfaceMuted",
+    "searchMatchBg": "#3B2E10",
+    "searchMatchText": "textBright",
+    "userMessageBg": "#0E1014",
+    "userMessageText": "textBright",
+    "customMessageBg": "",
+    "customMessageText": "text",
+    "customMessageLabel": "muted",
+    "toolPendingBg": "",
+    "toolSuccessBg": "",
+    "toolErrorBg": "#211414",
+    "toolTitle": "toolName",
+    "toolOutput": "toolText",
+    "scrollbarTrack": "borderSubtle",
+    "scrollbarThumb": "border",
+
+    "mdHeading": "textBright",
+    "mdLink": "blue",
+    "mdLinkUrl": "dim",
+    "mdCode": "blueSoft",
+    "mdCodeBlock": "text",
+    "mdCodeBlockBorder": "#484F58",
+    "mdQuote": "muted",
+    "mdQuoteBorder": "border",
+    "mdHr": "borderSubtle",
+    "mdListBullet": "muted",
+
+    "toolDiffAdded": "#45B85A",
+    "toolDiffRemoved": "#E45D57",
+    "toolDiffContext": "dim",
+
+    "syntaxComment": "dim",
+    "syntaxKeyword": "pink",
+    "syntaxFunction": "purple",
+    "syntaxVariable": "text",
+    "syntaxString": "blueSoft",
+    "syntaxNumber": "orange",
+    "syntaxType": "orange",
+    "syntaxOperator": "muted",
+    "syntaxPunctuation": "muted",
+
+    "thinkingOff": "borderSubtle",
+    "thinkingMinimal": "border",
+    "thinkingLow": "dim",
+    "thinkingMedium": "muted",
+    "thinkingHigh": "blue",
+    "thinkingXhigh": "blueSoft",
+    "thinkingMax": "blueSoft",
+    "bashMode": "green"
+  },
+  "export": {
+    "pageBg": "#0D1117",
+    "cardBg": "#161B22",
+    "infoBg": "#1C2128"
+  }
+}