@danypops/pi-packed 0.20.2 → 0.21.1

package/README.md

@@ -11,14 +11,15 @@ The extension connects to Packed's authenticated user daemon and starts the pack
 ## Commands
 
 - `/packed` -- one floating overlay, four tabs (Packages/Find/Config/Settings), always shown in a persistent tab bar at the top: the focused tab reverses the theme's text color for high contrast in both dark and light modes, unfocused tabs show only a foreground color with their own first letter highlighted as a jump mnemonic (the focused tab needs no mnemonic -- there's nothing to jump to when you're already there). `Tab`/`Shift-Tab` (or `←`/`→`) sweep between them -- recognized under legacy CSI, xterm's modifyOtherKeys, and the Kitty keyboard protocol alike, not just one hardcoded encoding; from any tab other than Packages, `p`/`f`/`c`/`s` also jump straight to the matching one (never stolen while that tab's own filter/query box is capturing text). `Esc` returns to Packages from anywhere else, or closes the panel from Packages itself. Every approval and reload confirmation, on any tab, renders inline on this same panel (`y`/`n` keys), never a separate popup or native dialog. A standing test (`keymap.test.ts`, using Malevich's tree-style `findMnemonicConflicts`) verifies no two actions genuinely reachable at once share a key.
-  - **Packages** (the default tab) -- every installed Pi package, with update availability. Mnemonics follow lazy.nvim's own convention (uppercase acts on every row, lowercase on the one under the cursor):
+  - **Packages** (the default tab) -- every installed Pi package is a bordered Card with full-card selection highlighting and update availability. Mnemonics follow lazy.nvim's own convention (uppercase acts on every row, lowercase on the one under the cursor):
     - `u` / `U` -- update the selected package / update every outdated package, one combined confirmation and one reload. `U` shows a spinner inline next to the package currently updating, settling into a real ✓ or ✗ plus a short tail of that update's own captured output once it finishes -- the list stays visible throughout, nothing swaps to a separate screen. A reload is confirmed separately from the update itself -- decline it to defer: the update already happened, only picking it up in this Pi session is deferred until `/reload`.
     - `x` -- remove the selected package.
     - `d` -- disable (or re-enable) the selected package's own extensions.
+    - `i` -- inspect the selected package's registry metadata and README inside the same overlay; `Esc`/`q` returns.
     - `c` -- jump to the Config tab, scoped to the selected package.
     - `f` -- jump to the Find tab. `s` -- jump to the Settings tab.
     - `Enter` opens a smaller floating action menu with all of the above. `r` refreshes, `/` filters, `v` cycles view modes.
-  - **Find** -- search the npm registry for new Pi packages and install one.
+  - **Find** -- search the npm registry for new Pi packages. Results render as Cards; after a search, `i` inspects the selected result, `Enter` installs it, and `/` returns to query editing.
   - **Config** -- enable or disable individual extensions, skills, prompt templates, and themes declared by installed packages, per package, at global or project scope (`v` switches global/project). `/packed config` opens the panel landing directly on this tab.
   - **Settings** -- change whether package mutations (install/update/remove/toggle) require confirmation.
 - `/packed setup plan [path] [--prune]` / `/packed setup apply [path] [--prune]` -- preview or apply a reproducible-environment manifest (`pi-setup.json`) against installed packages and profiles.

package/extension/src/index.ts

@@ -26,7 +26,7 @@ export default async function (pi: ExtensionAPI) {
 
 	pi.registerCommand("packed", {
 		description:
-			"Browse and manage installed Pi packages -- u/U update, x remove, d disable, c config, f find, s settings -- or run setup plan/apply or config directly",
+			"Browse and manage installed Pi packages -- i inspect, u/U update, x remove, d disable, c config, f find, s settings -- or run setup plan/apply or config directly",
 		handler: async (args, ctx) => {
 			if (await handleSetupCommand(args, ctx, natives)) return;
 			if (await handleResourceConfigCommand(args, ctx, natives, showPackedPanel)) return;

package/extension/src/menu-theme.ts

@@ -1,8 +1,17 @@
 import type { Theme } from "@earendil-works/pi-coding-agent";
-import type { DialogTheme, MenuTheme, TabBarTheme } from "malevich-tui-components";
+import type { CardTheme, DialogTheme, MenuTheme, TabBarTheme } from "malevich-tui-components";
 
 /** Maps Pi's own Theme onto Malevich's Menu -- the one place this mapping
  * exists, shared by every ctx.ui.custom overlay menu in this extension. */
+export function cardTheme(theme: Theme): CardTheme {
+	return {
+		border: (s) => theme.fg("border", s),
+		selectedBorder: (s) => theme.fg("accent", s),
+		content: (s) => s,
+		selectedContent: (s) => (typeof theme.inverse === "function" ? theme.inverse(theme.fg("text", s)) : theme.fg("accent", s)),
+	};
+}
+
 export function menuTheme(theme: Theme): MenuTheme {
 	return {
 		border: (s) => theme.fg("border", s),

package/extension/src/package-inspector.ts

@@ -0,0 +1,93 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { matchesKey, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import { buildDetailLines, type Component, type TextMeasure } from "malevich-tui-components";
+import type { Natives, PackageInfo } from "./packed.js";
+import { sanitizeTerminalText } from "./terminal-text.js";
+
+const README_CHAR_LIMIT = 50_000;
+const DETAIL_LINE_LIMIT = 2_000;
+const VIEWPORT_LINES = 18;
+
+export class PackageInspector implements Component {
+	private info: PackageInfo | undefined;
+	private error: string | undefined;
+	private loading = true;
+	private scrollOffset = 0;
+
+	constructor(
+		private readonly packageName: string,
+		private readonly natives: Natives,
+		private readonly theme: Theme,
+		private readonly measure: TextMeasure,
+		private readonly onClose: () => void,
+		private readonly requestRender: () => void,
+	) {}
+
+	async load(): Promise<void> {
+		try {
+			this.info = await this.natives.info(this.packageName);
+		} catch (error) {
+			this.error = error instanceof Error ? error.message : String(error);
+		} finally {
+			this.loading = false;
+			this.requestRender();
+		}
+	}
+
+	invalidate(): void {}
+
+	handleInput(data: string): void {
+		if (matchesKey(data, "escape") || data === "q") {
+			this.onClose();
+			return;
+		}
+		if (matchesKey(data, "down") || data === "j") this.scrollOffset += 1;
+		else if (matchesKey(data, "up") || data === "k") this.scrollOffset = Math.max(0, this.scrollOffset - 1);
+		else if (data === "g") this.scrollOffset = 0;
+		else if (data === "G") this.scrollOffset = Number.MAX_SAFE_INTEGER;
+		this.requestRender();
+	}
+
+	render(width: number): string[] {
+		const heading = this.theme.bold(this.theme.fg("accent", `Inspect ${this.packageName}`));
+		const help = this.theme.fg("muted", "esc/q close · ↑↓/j/k scroll · g/G top/bottom");
+		if (this.loading) return [heading, help, "", this.theme.fg("muted", "Loading registry metadata…")];
+		if (this.error) return [heading, help, "", this.theme.fg("error", this.error)];
+		if (!this.info) return [heading, help, "", this.theme.fg("muted", "No package metadata")];
+
+		const info = this.info;
+		const rawReadme = sanitizeTerminalText(info.readme?.trim() || "No README published.");
+		const readmeTruncated = rawReadme.length > README_CHAR_LIMIT;
+		const readme = rawReadme.slice(0, README_CHAR_LIMIT);
+		const detailMeasure: TextMeasure = { ...this.measure, wrapTextWithAnsi };
+		const details = buildDetailLines(Math.max(1, width), {
+			fields: [
+				{ label: "Version", value: sanitizeTerminalText(info.version) },
+				...(info.license ? [{ label: "License", value: sanitizeTerminalText(info.license) }] : []),
+				...(info.repository ? [{ label: "Repository", value: sanitizeTerminalText(info.repository) }] : []),
+			],
+			sections: [
+				...(info.description ? [{ heading: "Description", body: sanitizeTerminalText(info.description) }] : []),
+				{ heading: "README (registry metadata)", body: readme },
+			],
+			theme: {
+				field: (s) => this.theme.fg("dim", s),
+				heading: (s) => this.theme.bold(this.theme.fg("accent", s)),
+				byline: (s) => this.theme.fg("muted", s),
+				body: (s) => s,
+			},
+			measure: detailMeasure,
+		}).slice(0, DETAIL_LINE_LIMIT);
+		if (readmeTruncated || details.length === DETAIL_LINE_LIMIT) details.push(this.theme.fg("warning", "Output truncated."));
+		const maxOffset = Math.max(0, details.length - VIEWPORT_LINES);
+		this.scrollOffset = Math.min(this.scrollOffset, maxOffset);
+		const visible = details.slice(this.scrollOffset, this.scrollOffset + VIEWPORT_LINES);
+		return [
+			heading,
+			help,
+			this.theme.fg("dim", `${this.scrollOffset + 1}-${this.scrollOffset + visible.length}/${details.length}`),
+			"",
+			...visible,
+		];
+	}
+}

package/extension/src/tab-host.ts

@@ -21,6 +21,8 @@ export interface TabHost {
 	 * approve/reload call inside a tab's own mutation flow must go through
 	 * this, not ctx directly. */
 	inlineCtx: ExtensionCommandContext;
+	/** Opens registry metadata and README for one package inside this overlay. */
+	inspectPackage(name: string): void;
 	/** Re-renders the whole overlay. Call after any state change a tab
 	 * makes outside of a handleInput call the host already re-renders for. */
 	requestRender(): void;

package/extension/src/tabs/discover.ts

@@ -9,13 +9,15 @@
  * Install (behind a quick inline confirm, then the standard approval
  * every mutation surface requires) does.
  */
-import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
+import type { ExtensionCommandContext, Theme } from "@earendil-works/pi-coding-agent";
 import { rawKeyHint } from "@earendil-works/pi-coding-agent";
 import { Input, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
-import type { Component } from "malevich-tui-components";
+import { Card, type Component } from "malevich-tui-components";
+import { cardTheme } from "../menu-theme.js";
 import type { Natives, PackageSummary } from "../packed.js";
 import { InstallServiceError } from "../packed.js";
 import type { TabHost } from "../tab-host.js";
+import { sanitizeTerminalText } from "../terminal-text.js";
 import { approvePackageOperation } from "../tools.js";
 import { shouldSearch } from "./discover-model.js";
 
@@ -52,11 +54,6 @@ export async function applyInstall(result: PackageSummary, natives: Natives, ctx
 	}
 }
 
-interface Theme {
-	fg(color: string, s: string): string;
-	bold(s: string): string;
-}
-
 /** /packed's Find tab -- a real Component. Its query box always captures
  * free text (isCapturingInput() is unconditionally true), unlike
  * Packages/Config's toggleable search: there's no "browse mode" here to
@@ -69,13 +66,13 @@ export class FindTab implements Component {
 	private searching = false;
 	private error: string | undefined;
 	private busy = false;
-	private readonly maxVisible = 15;
+	private queryActive = true;
+	private readonly maxVisible = 4;
 
 	constructor(
 		private readonly natives: Natives,
 		private readonly host: TabHost,
-		// biome-ignore lint/correctness/noUnusedPrivateClassMembers: read via `const { theme } = this` in render(), which Biome's usage check doesn't trace
-		private readonly theme: Theme,
+		private readonly _theme: Theme,
 	) {}
 
 	/** Find's query box is always in text-edit mode (no separate toggle like
@@ -103,8 +100,10 @@ export class FindTab implements Component {
 	invalidate(): void {}
 
 	render(width: number): string[] {
-		const { theme } = this;
-		const hint = rawKeyHint("enter", "search/install");
+		const theme = this._theme;
+		const hint = this.queryActive
+			? rawKeyHint("enter", "search")
+			: `${rawKeyHint("enter", "install")}${theme.fg("muted", " · ")}${rawKeyHint("i", "inspect")}${theme.fg("muted", " · ")}${rawKeyHint("/", "query")}`;
 		const status = this.searching ? "searching…" : this.error ? theme.fg("error", this.error) : `${this.results.length} result(s)`;
 		const spacing = Math.max(1, width - visibleWidth(hint) - visibleWidth(status));
 		const line1 = truncateToWidth(`${hint}${" ".repeat(spacing)}`, width, "") + status;
@@ -118,11 +117,15 @@ export class FindTab implements Component {
 		for (let i = start; i < end; i++) {
 			const result = this.results[i]!;
 			const selected = i === this.selectedIndex;
-			const cursor = selected ? theme.fg("accent", "❯") : " ";
-			const name = selected ? theme.bold(result.name) : result.name;
-			const ver = theme.fg("dim", `@${result.version}`);
-			const description = result.description ? theme.fg("muted", ` — ${result.description}`) : "";
-			lines.push(truncateToWidth(`${cursor} ${name}${ver}${description}`, width, ""));
+			const card = new Card({
+				title: theme.bold(`${result.name}@${result.version}`),
+				content: [sanitizeTerminalText(result.description ?? "No description")],
+				selected,
+				theme: cardTheme(theme),
+				measure: { visibleWidth, truncateToWidth },
+			});
+			lines.push(...card.render(width));
+			if (i < end - 1) lines.push("");
 		}
 		return lines;
 	}
@@ -137,11 +140,21 @@ export class FindTab implements Component {
 				if (this.results.length > 0) this.selectedIndex = (this.selectedIndex + 1) % this.results.length;
 				break;
 			case "\r":
-				if (shouldSearch(this.queryInput.getValue(), this.lastSearchedQuery, this.results.length > 0)) void this.runSearch();
+				if (this.queryActive || shouldSearch(this.queryInput.getValue(), this.lastSearchedQuery, this.results.length > 0))
+					void this.runSearch();
 				else void this.installSelected();
 				return;
+			case "/":
+				this.queryActive = true;
+				break;
+			case "i": {
+				const result = this.results[this.selectedIndex];
+				if (!this.queryActive && result) this.host.inspectPackage(result.name);
+				else this.queryInput.handleInput(data);
+				return;
+			}
 			default:
-				this.queryInput.handleInput(data);
+				if (this.queryActive) this.queryInput.handleInput(data);
 				break;
 		}
 		this.host.requestRender();
@@ -158,6 +171,7 @@ export class FindTab implements Component {
 			this.results = response.results;
 			this.lastSearchedQuery = this.queryInput.getValue();
 			this.selectedIndex = 0;
+			this.queryActive = false;
 		} catch (e) {
 			this.error = e instanceof Error ? e.message : String(e);
 			this.results = [];

package/extension/src/terminal-text.ts

@@ -0,0 +1,6 @@
+const UNSAFE_TERMINAL_CONTROL = /[\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f-\u009f]/gu;
+
+/** Removes terminal control bytes from external registry text while preserving tabs and line breaks. */
+export function sanitizeTerminalText(text: string): string {
+	return text.replace(UNSAFE_TERMINAL_CONTROL, "");
+}

package/extension/src/tui-error-boundary.ts

@@ -0,0 +1,51 @@
+import type { Component } from "malevich-tui-components";
+
+/** Keeps a component failure inside its overlay instead of Pi's event loop. */
+export class TuiErrorBoundary implements Component {
+	private failed = false;
+
+	constructor(
+		private readonly component: Component,
+		private readonly fallback: readonly string[],
+		private readonly onError?: () => void,
+	) {}
+
+	render(width: number): string[] {
+		if (this.failed) return this.renderFallback(width);
+		try {
+			return this.component.render(width);
+		} catch {
+			this.fail();
+			return this.renderFallback(width);
+		}
+	}
+
+	invalidate(): void {
+		if (this.failed) return;
+		try {
+			this.component.invalidate();
+		} catch {
+			this.fail();
+		}
+	}
+
+	handleInput(data: string): void {
+		if (this.failed) return;
+		try {
+			this.component.handleInput?.(data);
+		} catch {
+			this.fail();
+		}
+	}
+
+	private fail(): void {
+		if (this.failed) return;
+		this.failed = true;
+		this.onError?.();
+	}
+
+	private renderFallback(width: number): string[] {
+		const boundedWidth = Math.max(0, width);
+		return this.fallback.map((line) => line.slice(0, boundedWidth));
+	}
+}

package/extension/src/tui.ts

@@ -44,10 +44,10 @@
  * settled map U's batch path uses, not only as a scrollback toast. All
  * data flows through the packed CLI (thin seam).
  */
-import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
-import { DynamicBorder, rawKeyHint } from "@earendil-works/pi-coding-agent";
+import { DynamicBorder, type ExtensionCommandContext, rawKeyHint, type Theme } from "@earendil-works/pi-coding-agent";
 import { Container, Input, matchesKey, Spacer, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import {
+	Card,
 	type Component,
 	Dialog,
 	Envelope,
@@ -55,19 +55,19 @@ import {
 	type MenuItem,
 	Spinner,
 	TabbedContainer,
-	Table,
 	type TextMeasure,
 } from "malevich-tui-components";
 import { confirmReload } from "./approval/reload.js";
-import { dialogTheme, menuTheme, panelFrameStyle, tabBarTheme } from "./menu-theme.js";
-import type { Row, ViewMode } from "./model.js";
-import { filterRows, mergeRows, nextMode, visibleRows } from "./model.js";
+import { cardTheme, dialogTheme, menuTheme, panelFrameStyle, tabBarTheme } from "./menu-theme.js";
+import { filterRows, mergeRows, nextMode, type Row, type ViewMode, visibleRows } from "./model.js";
+import { PackageInspector } from "./package-inspector.js";
 import type { Natives, PackageResources } from "./packed.js";
 import type { TabHost } from "./tab-host.js";
 import { createFindTab } from "./tabs/discover.js";
 import { applyResourceToggle, ConfigTab } from "./tabs/resource-config.js";
 import { SettingsTab } from "./tabs/security-tui.js";
 import { approvePackageOperation } from "./tools.js";
+import { TuiErrorBoundary } from "./tui-error-boundary.js";
 
 export type PackedTabKey = "packages" | "find" | "config" | "settings";
 
@@ -407,11 +407,6 @@ async function showActionMenu(ctx: ExtensionCommandContext, row: Row): Promise<"
 	);
 }
 
-interface PackagesTabTheme {
-	fg(color: string, s: string): string;
-	bold(s: string): string;
-}
-
 /** Packages -- the panel's default/"home" tab. A real Component (not the
  * panel's own top-level ctx.ui.custom owner anymore); the shared TabHost
  * gives it inline approval/reload dialogs and a way to signal the overlay
@@ -432,14 +427,13 @@ export class PackagesTab implements Component {
 	private updatingRowName: string | undefined;
 	private readonly spinner = new Spinner();
 	private readonly settled = new Map<string, { ok: boolean; tail: string | undefined }>();
-	private readonly table: Table;
-	private readonly maxVisible = 20;
+	private readonly maxVisible = 5;
 
 	constructor(
 		private readonly natives: Natives,
 		private readonly host: TabHost,
-		readonly theme: PackagesTabTheme,
-		measure: TextMeasure,
+		readonly theme: Theme,
+		private readonly measure: TextMeasure,
 		initialRows: Row[],
 		/** c on a row, or the Enter action menu's "Configure resources" --
 		 * switches the shared TabbedContainer to Config, seeded with that
@@ -448,16 +442,6 @@ export class PackagesTab implements Component {
 	) {
 		this.rows = initialRows;
 		this.filtered = visibleRows(this.rows, this.mode);
-		this.table = new Table({
-			columns: [
-				{ header: "Package", key: "name" },
-				{ header: "Version", key: "version" },
-				{ header: "", key: "status" },
-			],
-			rows: [],
-			measure,
-			headerStyle: (s) => theme.fg("muted", s),
-		});
 	}
 
 	/** An active filter or an in-flight mutation means Escape/Left-Right
@@ -478,9 +462,7 @@ export class PackagesTab implements Component {
 		return this.searchActive || this.updatingRowName !== undefined;
 	}
 
-	invalidate(): void {
-		this.table.invalidate();
-	}
+	invalidate(): void {}
 
 	private applyFilter(): void {
 		this.filtered = filterRows(visibleRows(this.rows, this.mode), this.searchInput.getValue());
@@ -505,6 +487,8 @@ export class PackagesTab implements Component {
 				theme.fg("muted", " · ") +
 				rawKeyHint("d", "disable") +
 				theme.fg("muted", " · ") +
+				rawKeyHint("i", "inspect") +
+				theme.fg("muted", " · ") +
 				rawKeyHint("c", "config") +
 				theme.fg("muted", " · ") +
 				rawKeyHint("r", "refresh");
@@ -530,28 +514,29 @@ export class PackagesTab implements Component {
 		// selectedIndex stays this tab's own job.
 		const start = Math.max(0, Math.min(this.selectedIndex - Math.floor(this.maxVisible / 2), this.filtered.length - this.maxVisible));
 		const end = Math.min(start + this.maxVisible, this.filtered.length);
-		this.table.setRows(
-			this.filtered.slice(start, end).map((row, offset) => {
-				const i = start + offset;
-				const selected = i === this.selectedIndex;
-				const cursor = selected ? theme.fg("accent", "❯ ") : "  ";
-				const name = selected ? theme.bold(row.name) : row.name;
-				// A settled row shows its real outcome even for the instant before
-				// the next row's "start" event moves updatingRowName off it --
-				// settled always wins over "still spinning".
-				const rowSettled = this.settled.get(row.name);
-				const isUpdating = !rowSettled && this.updatingRowName === row.name;
-				const status = isUpdating
-					? theme.fg("accent", `${this.spinner.glyph()} updating…`)
-					: rowSettled
-						? theme.fg(rowSettled.ok ? "success" : "error", `${rowSettled.ok ? "✓" : "✗"}${rowSettled.tail ? ` ${rowSettled.tail}` : ""}`)
-						: row.hasUpdate
-							? theme.fg("warning", `↑${row.latest}`)
-							: "";
-				return { name: `${cursor}${name}`, version: theme.fg("dim", row.version), status };
-			}),
-		);
-		lines.push(...this.table.render(width));
+		for (const [offset, row] of this.filtered.slice(start, end).entries()) {
+			const selected = start + offset === this.selectedIndex;
+			// A settled row shows its real outcome even for the instant before
+			// the next row's "start" event moves updatingRowName off it.
+			const rowSettled = this.settled.get(row.name);
+			const isUpdating = !rowSettled && this.updatingRowName === row.name;
+			const status = isUpdating
+				? theme.fg("accent", `${this.spinner.glyph()} updating…`)
+				: rowSettled
+					? theme.fg(rowSettled.ok ? "success" : "error", `${rowSettled.ok ? "✓" : "✗"}${rowSettled.tail ? ` ${rowSettled.tail}` : ""}`)
+					: row.hasUpdate
+						? theme.fg("warning", `↑${row.latest}`)
+						: theme.fg("muted", "installed");
+			const card = new Card({
+				title: theme.bold(row.name),
+				content: [`${theme.fg("dim", row.version)} · ${status}`],
+				selected,
+				theme: cardTheme(theme),
+				measure: this.measure,
+			});
+			lines.push(...card.render(width));
+			if (start + offset < end - 1) lines.push("");
+		}
 		const hasScroll = start > 0 || end < this.filtered.length;
 		lines.push(theme.fg("dim", `  ${hasScroll ? `${this.selectedIndex + 1}/${this.filtered.length} ` : ""}${this.mode}`));
 		return lines;
@@ -616,6 +601,11 @@ export class PackagesTab implements Component {
 				if (row) void this.runRowActionInline({ type: "disable", row });
 				return;
 			}
+			case "i": {
+				const row = this.filtered[this.selectedIndex];
+				if (row) this.host.inspectPackage(row.name);
+				return;
+			}
 			case "c": {
 				const row = this.filtered[this.selectedIndex];
 				if (row) this.switchTab("config", row.name);
@@ -765,6 +755,7 @@ function renderUnifiedPanel(
 			// host.inlineCtx below, exactly like the panel's own approval/reload
 			// dialogs always have been.
 			let pendingDialog: Dialog | undefined;
+			let packageInspector: PackageInspector | undefined;
 
 			function confirmInline(title: string, message: string): Promise<boolean> {
 				return new Promise((resolve) => {
@@ -788,15 +779,29 @@ function renderUnifiedPanel(
 			}
 
 			const inlineCtx: ExtensionCommandContext = { ...ctx, hasUI: true, ui: { ...ctx.ui, confirm: confirmInline } };
+			const measure: TextMeasure = { visibleWidth, truncateToWidth };
 			const host: TabHost = {
 				ctx,
 				inlineCtx,
+				inspectPackage: (name) => {
+					packageInspector = new PackageInspector(
+						name,
+						natives,
+						theme,
+						measure,
+						() => {
+							packageInspector = undefined;
+							tui.requestRender();
+						},
+						() => tui.requestRender(),
+					);
+					void packageInspector.load();
+					tui.requestRender();
+				},
 				requestRender: () => tui.requestRender(),
 				onSessionReplaced: () => done(undefined),
 			};
 
-			const measure: TextMeasure = { visibleWidth, truncateToWidth };
-
 			const packagesTab = new PackagesTab(natives, host, theme, measure, initialRows, (target, configFilter) => {
 				if (target === "config" && configFilter !== undefined) configTab.setFilter(configFilter);
 				tabbedContainer.setActive(target);
@@ -831,6 +836,7 @@ function renderUnifiedPanel(
 				],
 				theme: tabBarTheme(theme),
 				initialKey: initialTab,
+				measure,
 				// Malevich's own default matcher only recognizes legacy CSI sequences;
 				// pi-tui's real matchesKey also covers the Kitty keyboard protocol and
 				// xterm's modifyOtherKeys encodings for the same keys. Malevich's
@@ -854,9 +860,9 @@ function renderUnifiedPanel(
 				measure,
 			});
 
-			return {
+			const panel: Component = {
 				render(width: number): string[] {
-					envelope.setContent(pendingDialog ?? tabbedContainer);
+					envelope.setContent(pendingDialog ?? packageInspector ?? tabbedContainer);
 					return envelope.render(width);
 				},
 				invalidate: () => envelope.invalidate(),
@@ -866,6 +872,10 @@ function renderUnifiedPanel(
 						tui.requestRender();
 						return;
 					}
+					if (packageInspector) {
+						packageInspector.handleInput(data);
+						return;
+					}
 					const activeKey = tabbedContainer.getActiveKey() as PackedTabKey;
 					const activeTab = tabByKey[activeKey];
 					// Each host-level key is checked against that tab's own capture flag
@@ -920,6 +930,7 @@ function renderUnifiedPanel(
 					tui.requestRender();
 				},
 			};
+			return new TuiErrorBoundary(panel, ["Packed could not render.", "Restart Pi and run /packed again."], () => tui.requestRender());
 			// Pinned to the very top (anchor:"top-center"+offsetY:1 -- a fixed row
 			// count regardless of terminal size), not row:"40%". The percentage
 			// positioning was tried instead but reverted: pi-tui's row-percentage

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danypops/pi-packed",
-  "version": "0.20.2",
+  "version": "0.21.1",
   "description": "Pi package lifecycle, validation, daemon, tools, profiles, and TUI",
   "type": "module",
   "bin": {
@@ -34,7 +34,7 @@
     "@danypops/vehicle-core": "^0.12.3",
     "@danypops/vehicle-server": "^0.17.1",
     "jiti": "2.6.1",
-    "malevich-tui-components": "^0.20.4",
+    "malevich-tui-components": "^0.21.1",
     "publint": "0.3.22",
     "semver": "^7.8.5"
   },