@anthodev/pi-tools-style 0.1.0 → 0.1.3

package/README.md

@@ -2,6 +2,12 @@
 
 <p align="center"><strong>Give Pi tool activity clear, theme-aware structure without changing how tools run.</strong></p>
 
+<p align="center">
+  <a href="https://github.com/Anthodev/pi-tools-style/actions/workflows/ci.yml?query=branch%3Adevelop"><img alt="Tests" src="https://img.shields.io/github/actions/workflow/status/Anthodev/pi-tools-style/ci.yml?branch=develop&amp;style=for-the-badge&amp;label=tests&amp;labelColor=101418"></a>
+  <a href="https://github.com/Anthodev/pi-tools-style/releases/latest"><img alt="Latest stable release" src="https://img.shields.io/github/v/release/Anthodev/pi-tools-style?style=for-the-badge&amp;label=release&amp;labelColor=101418&amp;color=9ccbfb"></a>
+  <a href="https://github.com/Anthodev/pi-tools-style/blob/develop/LICENSE"><img alt="MIT License" src="https://img.shields.io/github/license/Anthodev/pi-tools-style?style=for-the-badge&amp;labelColor=101418&amp;color=b9c8da"></a>
+</p>
+
 `pi-tools-style` adds rounded frames, tool-specific icons, and live running indicators to Pi tool calls and direct shell commands. It decorates the output Pi already produces instead of replacing tool definitions or renderers.
 
 Built-in tools, MCP integrations, AFT, and third-party extensions keep control of their schemas, permissions, prompts, execution backends, and rendered content. When an output cannot be framed safely, the extension leaves it untouched.
@@ -17,6 +23,26 @@ Built-in tools, MCP integrations, AFT, and third-party extensions keep control o
 - **Image-safe fallback** — skips Kitty, iTerm2, and Sixel rows instead of corrupting terminal image sequences.
 - **Reload-safe state** — keeps wrappers and runtime configuration idempotent across `/reload`.
 
+## Installation
+
+The current release targets Pi `0.84.x` and requires Node.js 22 or newer.2
+
+To install it, use the following command:
+
+```bash
+pi install npm:@anthodev/pi-tools-style
+```
+
+To install this checkout as a local Pi package:
+
+```bash
+cd /absolute/path/to/pi-tools-style
+npm install --legacy-peer-deps
+pi install "$(pwd)"
+```
+
+Pi stores the package in user settings and references the directory directly, so local changes become available after `/reload` or a restart.
+
 ## What it looks like
 
 ASCII mode stays readable in any terminal:
@@ -45,38 +71,6 @@ Once execution finishes, the spinner disappears and the title remains stable:
 
 Direct `!` and `!!` commands use the same frame with a `shell` title. Slash-command output remains unchanged because Pi does not expose one uniform transcript component for slash commands.
 
-## Installation
-
-The current release targets Pi `0.84.x` and requires Node.js 22 or newer.
-
-To install this checkout as a local Pi package:
-
-```bash
-cd /absolute/path/to/pi-tools-style
-npm install --legacy-peer-deps
-pi install "$(pwd)"
-```
-
-Pi stores the package in user settings and references the directory directly, so local changes become available after `/reload` or a restart.
-
-To install it only for the current project, run this from that project:
-
-```bash
-pi install -l /absolute/path/to/pi-tools-style
-```
-
-To try the extension without installing it:
-
-```bash
-pi -e /absolute/path/to/pi-tools-style/index.ts
-```
-
-Once the package is published to npm, it can also be installed with:
-
-```bash
-pi install npm:@anthodev/pi-tools-style
-```
-
 ## Usage
 
 Boxes start enabled. Manage them from Pi with:

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@anthodev/pi-tools-style",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "description": "Presentation-only boxes for Pi tool calls and shell commands",
-  "keywords": ["pi-package", "pi-extension", "tui", "tools"],
+  "keywords": [
+    "pi-package",
+    "pi-extension",
+    "tui",
+    "tools"
+  ],
   "type": "module",
   "license": "MIT",
   "repository": {

package/src/render-decorator.ts

@@ -34,6 +34,23 @@ interface StoredConfig extends Omit<RenderDecoratorConfig, "enabled"> {
 	enabled: boolean;
 }
 
+interface ResolvedFrameOptions {
+	options: FrameOptions;
+	styleSignature: string | undefined;
+	title: string | undefined;
+}
+
+interface RenderCacheEntry {
+	config: StoredConfig;
+	output: string[];
+	rendered: readonly string[];
+	styleSignature: string | undefined;
+	title: string | undefined;
+	width: number;
+}
+
+const BORDER_STYLE_PROBE = "╭─╮│╰─╯";
+
 export function installRenderDecorator<T extends Renderable>(
 	component: RenderableConstructor<T>,
 	config: RenderDecoratorConfig<T>,
@@ -96,6 +113,8 @@ function createDecoratedRenderer(
 	key: symbol,
 	renderOriginal: RenderFunction,
 ): RenderFunction {
+	const cache = new WeakMap<Renderable, RenderCacheEntry>();
+
 	return function decoratedRender(width: number): string[] {
 		const current = readConfig(key);
 		if (!current?.enabled) return renderOriginal.call(this, width);
@@ -109,22 +128,38 @@ function createDecoratedRenderer(
 		}
 
 		try {
-			return decorateLines(this, rendered, width, current);
+			const resolved = resolveFrameOptions(this, current);
+			const cached = cache.get(this);
+			if (
+				cached?.config === current &&
+				cached.width === width &&
+				cached.title === resolved.title &&
+				cached.styleSignature === resolved.styleSignature &&
+				linesEqual(cached.rendered, rendered)
+			) {
+				return cached.output;
+			}
+
+			const output = decorateLines(rendered, width, current, resolved.options);
+			cache.set(this, {
+				config: current,
+				output,
+				rendered: [...rendered],
+				styleSignature: resolved.styleSignature,
+				title: resolved.title,
+				width,
+			});
+			return output;
 		} catch {
 			return renderOriginal.call(this, width);
 		}
 	};
 }
 
-function decorateLines(
+function resolveFrameOptions(
 	instance: Renderable,
-	rendered: readonly string[],
-	width: number,
 	config: StoredConfig,
-): string[] {
-	const lines = config.trimOuterRules
-		? trimOuterRules(rendered)
-		: [...rendered];
+): ResolvedFrameOptions {
 	const title = config.title?.(instance);
 	const options: FrameOptions = {};
 
@@ -137,9 +172,34 @@ function decorateLines(
 	}
 	if (title) options.title = title;
 
+	return {
+		options,
+		// Theme providers can change border output without changing component content.
+		styleSignature: styleBorder?.(BORDER_STYLE_PROBE),
+		title,
+	};
+}
+
+function decorateLines(
+	rendered: readonly string[],
+	width: number,
+	config: StoredConfig,
+	options: FrameOptions,
+): string[] {
+	const lines = config.trimOuterRules
+		? trimOuterRules(rendered)
+		: [...rendered];
+
 	return frameLines(lines, width, options);
 }
 
+function linesEqual(left: readonly string[], right: readonly string[]): boolean {
+	return (
+		left.length === right.length &&
+		left.every((line, index) => line === right[index])
+	);
+}
+
 function storeConfig<T extends Renderable>(
 	config: RenderDecoratorConfig<T>,
 ): void {