@danypops/pi-packed 0.16.0 → 0.17.0

package/README.md

@@ -10,13 +10,16 @@ The extension connects to Packed's authenticated user daemon and starts the pack
 
 ## Commands
 
-- `/packed` -- a floating overlay panel: 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):
-  - `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`. Every confirm in this flow -- approval and reload alike -- renders inline on this same panel (`y`/`n` keys), never a separate popup.
-  - `x` -- remove the selected package.
-  - `d` -- disable (or re-enable) the selected package's own extensions.
-  - `c` -- jump to resource config for the selected package (skills, prompts, themes).
-  - `f` -- find: search the npm registry for new Pi packages and install one.
-  - `s` -- settings. `Enter` opens a smaller floating action menu with all of the above. `r` refreshes, `/` filters, `Tab` cycles view modes.
-- `/packed config` -- enable or disable individual extensions, skills, prompt templates, and themes declared by installed packages, per package, at global or project scope.
+- `/packed` -- one floating overlay, four tabs (Packages/Find/Config/Settings), always shown in a persistent tab bar at the top -- `←`/`→` cycle between them, `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.
+  - **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):
+    - `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.
+    - `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, `Tab` cycles view modes.
+  - **Find** -- search the npm registry for new Pi packages and install one.
+  - **Config** -- enable or disable individual extensions, skills, prompt templates, and themes declared by installed packages, per package, at global or project scope (`Tab` 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.
 - `/profile [name]` -- switch to a named Pi profile (provider, model, tools, instructions, theme), reading `~/.pi/agent/profiles.json` and a trusted project's own `.pi/profiles.json`. `pi --profile <name>` activates one at startup; `Ctrl+Shift+U` cycles through them.

package/extension/src/discover.ts

@@ -1,27 +1,26 @@
 /**
- * discover.ts — /packed find: query the npm registry for installable Pi
- * packages and install one. A sub-flow like settings/config, reachable
- * from the packages panel via f and returning to it on close. Search
- * itself never mutates; only Install/Cancel (behind the standard
- * approval) does.
+ * discover.ts — /packed's Find tab: query the npm registry for installable
+ * Pi packages and install one. A real Component (not its own ctx.ui.custom
+ * overlay) so it plugs straight into TabbedContainer alongside
+ * Packages/Config/Settings on the same overlay -- it used to open a
+ * second, visually distinct screen (no Malevich Envelope, its own
+ * hand-rolled Container+DynamicBorder chrome), confirmed live as a real
+ * "opens a different TUI" complaint. Search itself never mutates; only
+ * 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 { DynamicBorder, rawKeyHint } from "@earendil-works/pi-coding-agent";
-import { Container, Input, Spacer, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
-import { Menu, type MenuItem } from "malevich-tui-components";
+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 { shouldSearch } from "./discover-model.js";
 import type { Natives, PackageSummary } from "./packed.js";
 import { InstallServiceError } from "./packed.js";
 import { approvePackageOperation } from "./tools.js";
-import { menuTheme } from "./menu-theme.js";
+import type { TabHost } from "./tab-host.js";
 
 const SEARCH_LIMIT = 20;
 
-interface FindPanelAction {
-	type: "install" | "close";
-	result?: PackageSummary;
-}
-
 export type InstallOutcome = "installed" | "cancelled" | "failed";
 
 /** Approve-then-install-then-reload, mirroring applyPackageChoice's own
@@ -53,141 +52,126 @@ export async function applyInstall(result: PackageSummary, natives: Natives, ctx
 	}
 }
 
-async function showInstallMenu(ctx: ExtensionCommandContext, result: PackageSummary): Promise<boolean> {
-	return ctx.ui.custom<boolean>(
-		(_tui, theme, _kb, done) => {
-			const items: MenuItem[] = [
-				{ label: `Install ${result.name}@${result.version}`, action: () => done(true) },
-				{ label: "Cancel", action: () => done(false) },
-			];
-			return new Menu({ items, theme: menuTheme(theme), onClose: () => done(false) });
-		},
-		{ overlay: true, overlayOptions: { width: 40, anchor: "center" } },
-	);
-}
+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
+ * fall back to, searching is the whole point of this tab. */
+export class FindTab implements Component {
+	private readonly queryInput = new Input();
+	private results: PackageSummary[] = [];
+	private lastSearchedQuery: string | undefined;
+	private selectedIndex = 0;
+	private searching = false;
+	private error: string | undefined;
+	private busy = false;
+	private readonly maxVisible = 15;
+
+	constructor(
+		private readonly natives: Natives,
+		private readonly host: TabHost,
+		private readonly theme: Theme,
+	) {}
 
-export async function showDiscoverPanel(ctx: ExtensionCommandContext, natives: Natives): Promise<void> {
-	if (!ctx.hasUI) {
-		ctx.ui.notify("/packed find requires interactive mode", "warning");
-		return;
+	/** Find's query box is always in text-edit mode (no separate toggle like
+	 * Packages/Config's `/`) -- Left/Right must stay cursor movement, never
+	 * the host's own tab-cycling. Escape, though, is only captured while an
+	 * install is actually in flight (a genuine "don't let go" moment); no one
+	 * types a literal Escape byte into a search query on purpose, so it's
+	 * otherwise the host's own "back to Packages" to handle. */
+	capturesHorizontalArrows(): boolean {
+		return true;
 	}
 
-	for (;;) {
-		const action = await renderDiscoverPanel(ctx, natives);
-		if (action.type === "close") return;
-		if (!action.result) continue;
-		const install = await showInstallMenu(ctx, action.result);
-		if (!install) continue;
-		const outcome = await applyInstall(action.result, natives, ctx);
-		if (outcome === "installed") return; // ctx.reload() already replaced the session
+	capturesEscape(): boolean {
+		return this.busy;
 	}
-}
 
-function renderDiscoverPanel(ctx: ExtensionCommandContext, natives: Natives): Promise<FindPanelAction> {
-	return ctx.ui.custom<FindPanelAction>((tui, theme, _kb, done) => {
-		const queryInput = new Input();
-		let results: PackageSummary[] = [];
-		let lastSearchedQuery: string | undefined;
-		let selectedIndex = 0;
-		let searching = false;
-		let error: string | undefined;
-		const maxVisible = 15;
+	invalidate(): void {}
 
-		async function runSearch(): Promise<void> {
-			const query = queryInput.getValue().trim();
-			if (!query) return;
-			searching = true;
-			error = undefined;
-			tui.requestRender();
-			try {
-				const response = await natives.search(query, SEARCH_LIMIT);
-				results = response.results;
-				lastSearchedQuery = queryInput.getValue();
-				selectedIndex = 0;
-			} catch (e) {
-				error = e instanceof Error ? e.message : String(e);
-				results = [];
-			} finally {
-				searching = false;
-				tui.requestRender();
-			}
+	render(width: number): string[] {
+		const { theme } = this;
+		const hint = rawKeyHint("enter", "search/install");
+		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;
+		const lines = [line1, ...this.queryInput.render(width), ""];
+		if (this.results.length === 0) {
+			lines.push(theme.fg("muted", this.searching ? "  …" : "  Type a query and press enter to search npm"));
+			return lines;
+		}
+		const start = Math.max(0, Math.min(this.selectedIndex - Math.floor(this.maxVisible / 2), this.results.length - this.maxVisible));
+		const end = Math.min(start + this.maxVisible, this.results.length);
+		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, ""));
 		}
+		return lines;
+	}
 
-		const header = {
-			invalidate() {},
-			render(width: number): string[] {
-				const title = theme.bold("Find packages");
-				const hint = rawKeyHint("enter", "search/install") + theme.fg("muted", " · ") + rawKeyHint("esc", "back");
-				const spacing = Math.max(1, width - visibleWidth(title) - visibleWidth(hint));
-				const line1 = truncateToWidth(`${title}${" ".repeat(spacing)}`, width, "") + hint;
-				const status = searching ? "searching…" : error ? theme.fg("error", error) : `${results.length} result(s)`;
-				const line2 = truncateToWidth(theme.fg("muted", status), width, "");
-				return [line1, line2];
-			},
-		};
+	handleInput(data: string): void {
+		if (this.busy) return;
+		switch (data) {
+			case "\x1b[A":
+				if (this.results.length > 0) this.selectedIndex = (this.selectedIndex - 1 + this.results.length) % this.results.length;
+				break;
+			case "\x1b[B":
+				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();
+				else void this.installSelected();
+				return;
+			default:
+				this.queryInput.handleInput(data);
+				break;
+		}
+		this.host.requestRender();
+	}
 
-		const list = {
-			invalidate() {},
-			render(width: number): string[] {
-				const lines = [...queryInput.render(width), ""];
-				if (results.length === 0) {
-					lines.push(theme.fg("muted", searching ? "  …" : "  Type a query and press enter to search npm"));
-					return lines;
-				}
-				const start = Math.max(0, Math.min(selectedIndex - Math.floor(maxVisible / 2), results.length - maxVisible));
-				const end = Math.min(start + maxVisible, results.length);
-				for (let i = start; i < end; i++) {
-					const result = results[i]!;
-					const selected = i === 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, ""));
-				}
-				return lines;
-			},
-		};
+	private async runSearch(): Promise<void> {
+		const query = this.queryInput.getValue().trim();
+		if (!query) return;
+		this.searching = true;
+		this.error = undefined;
+		this.host.requestRender();
+		try {
+			const response = await this.natives.search(query, SEARCH_LIMIT);
+			this.results = response.results;
+			this.lastSearchedQuery = this.queryInput.getValue();
+			this.selectedIndex = 0;
+		} catch (e) {
+			this.error = e instanceof Error ? e.message : String(e);
+			this.results = [];
+		} finally {
+			this.searching = false;
+			this.host.requestRender();
+		}
+	}
 
-		const border = () => new DynamicBorder((s) => theme.fg("border", s));
-		const container = new Container();
-		container.addChild(new Spacer(1));
-		container.addChild(border());
-		container.addChild(new Spacer(1));
-		container.addChild(header);
-		container.addChild(new Spacer(1));
-		container.addChild(list);
-		container.addChild(new Spacer(1));
-		container.addChild(border());
+	private async installSelected(): Promise<void> {
+		const result = this.results[this.selectedIndex];
+		if (!result) return;
+		this.busy = true;
+		this.host.requestRender();
+		try {
+			const confirmed = await this.host.inlineCtx.ui.confirm(`Install ${result.name}@${result.version}`, "Search itself never mutates -- this is the first of two confirmations before anything installs.");
+			if (!confirmed) return;
+			const outcome = await applyInstall(result, this.natives, this.host.inlineCtx);
+			if (outcome === "installed") this.host.onSessionReplaced();
+		} finally {
+			this.busy = false;
+			this.host.requestRender();
+		}
+	}
+}
 
-		return {
-			render: (width: number) => container.render(width),
-			invalidate: () => container.invalidate(),
-			handleInput(data: string) {
-				switch (data) {
-					case "\x1b[A": // up
-						if (results.length > 0) selectedIndex = (selectedIndex - 1 + results.length) % results.length;
-						break;
-					case "\x1b[B": // down
-						if (results.length > 0) selectedIndex = (selectedIndex + 1) % results.length;
-						break;
-					case "\r":
-						if (shouldSearch(queryInput.getValue(), lastSearchedQuery, results.length > 0)) {
-							void runSearch();
-						} else {
-							const result = results[selectedIndex];
-							if (result) done({ type: "install", result });
-						}
-						return;
-					case "\x1b":
-						done({ type: "close" });
-						return;
-					default:
-						queryInput.handleInput(data);
-						break;
-				}
-				tui.requestRender();
-			},
-		};
-	});
+export function createFindTab(natives: Natives, host: TabHost, theme: Theme): FindTab {
+	return new FindTab(natives, host, theme);
 }

package/extension/src/index.ts

@@ -28,7 +28,7 @@ export default async function (pi: ExtensionAPI) {
 		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",
 		handler: async (args, ctx) => {
 			if (await handleSetupCommand(args, ctx, natives)) return;
-			if (await handleResourceConfigCommand(args, ctx, natives)) return;
+			if (await handleResourceConfigCommand(args, ctx, natives, showPackedPanel)) return;
 			await showPackedPanel(ctx, natives);
 		},
 	});

package/extension/src/menu-theme.ts

@@ -1,5 +1,5 @@
 import type { Theme } from "@earendil-works/pi-coding-agent";
-import type { DialogTheme, MenuTheme } from "malevich-tui-components";
+import type { 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. */
@@ -25,3 +25,13 @@ export function dialogTheme(theme: Theme): DialogTheme {
 		dim: (s) => theme.fg("muted", s),
 	};
 }
+
+/** Maps Pi's own Theme onto Malevich's TabbedContainer -- the persistent
+ * Packages/Find/Config/Settings tab bar at the top of /packed's one
+ * overlay, replacing what used to be four separately-opened screens. */
+export function tabBarTheme(theme: Theme): TabBarTheme {
+	return {
+		tab: (s) => theme.fg("muted", s),
+		activeTab: (s) => theme.bold(theme.fg("accent", s)),
+	};
+}