@danypops/pi-packed 0.16.0 → 0.17.0

package/extension/src/resource-config.ts

@@ -1,20 +1,27 @@
 /**
- * resource-config.ts — /packed config overlay: enable/disable individual
+ * resource-config.ts — /packed's Config tab: enable/disable individual
  * extensions, skills, prompt templates, and themes declared by installed
  * Pi packages, matching pi's own `pi config` interaction model (group by
  * package, toggle with space/enter, Tab to switch global/project scope).
  * Pi's own settings mutation lives in its internal SettingsManager, which
  * extensions cannot reach -- this reads and writes the same documented
  * settings.json filter arrays (docs/packages.md, "Enable and Disable
- * Resources") entirely through Packed's authenticated daemon.
+ * Resources") entirely through Packed's authenticated daemon. A real
+ * Component (not its own ctx.ui.custom overlay) so it plugs straight into
+ * TabbedContainer alongside Packages/Find/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.
  */
 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 { rawKeyHint } from "@earendil-works/pi-coding-agent";
+import { Input, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import type { Component } from "malevich-tui-components";
 import type { PackageResources, ResourceField } from "./packed.js";
 import type { Natives } from "./packed.js";
 import { packagePermissionDecision } from "./permission.js";
 import { confirmReload } from "./reload.js";
+import type { TabHost } from "./tab-host.js";
 
 type Scope = "global" | "project";
 const RESOURCE_FIELDS = ["extensions", "skills", "prompts", "themes"] as const satisfies readonly ResourceField[];
@@ -46,11 +53,6 @@ export function filterItems(items: FlatItem[], query: string): FlatItem[] {
 
 export type { FlatItem };
 
-interface PanelAction {
-	type: "toggle" | "switch" | "refresh" | "close";
-	item?: FlatItem;
-}
-
 async function approveToggle(
 	natives: Pick<Natives, "security">,
 	ctx: Pick<ExtensionCommandContext, "hasUI" | "ui">,
@@ -89,146 +91,176 @@ export async function applyResourceToggle(item: FlatItem, natives: Pick<Natives,
 }
 
 /** `/packed config` dispatch, matching handleSetupCommand's own
- * returns-true-if-handled shape so index.ts can chain both checks. */
-export async function handleResourceConfigCommand(args: string, ctx: ExtensionCommandContext, natives: Natives): Promise<boolean> {
+ * returns-true-if-handled shape so index.ts can chain both checks.
+ * openPanel is injected (rather than importing showPackedPanel from
+ * tui.ts directly) to avoid a cycle: tui.ts already imports ConfigTab
+ * from this file. */
+export async function handleResourceConfigCommand(
+	args: string,
+	ctx: ExtensionCommandContext,
+	natives: Natives,
+	openPanel: (ctx: ExtensionCommandContext, natives: Natives, opts?: { initialTab?: "config" }) => Promise<void>,
+): Promise<boolean> {
 	if (args.trim() !== "config") return false;
-	await showResourceConfig(ctx, natives);
+	await openPanel(ctx, natives, { initialTab: "config" });
 	return true;
 }
 
-export async function showResourceConfig(ctx: ExtensionCommandContext, natives: Natives, initialFilter?: string): Promise<void> {
-	if (!ctx.hasUI) {
-		ctx.ui.notify("/packed config requires interactive mode", "warning");
-		return;
+interface Theme { fg(color: string, s: string): string; bold(s: string): string; }
+
+/** /packed's Config tab -- a real Component, not its own ctx.ui.custom
+ * overlay. Each toggle's reload decision (confirmReload) fires
+ * immediately after that toggle, the same as Packages' own u/x/d --
+ * replacing the old standalone panel's "accumulate pendingReload, ask
+ * once when this whole screen finally closes" (there is no "closes"
+ * anymore; this tab can stay mounted indefinitely while other tabs are
+ * active). */
+export class ConfigTab implements Component {
+	private data: { global: PackageResources[]; project: PackageResources[] } = { global: [], project: [] };
+	private scope: Scope = "global";
+	private readonly searchInput = new Input();
+	private searchActive = false;
+	private items: FlatItem[] = [];
+	private filtered: FlatItem[] = [];
+	private selectedIndex = 0;
+	private busy = false;
+	private readonly maxVisible = 20;
+
+	constructor(
+		private readonly natives: Pick<Natives, "listResources" | "security" | "toggleResource">,
+		private readonly host: TabHost,
+		private readonly theme: Theme,
+		initialFilter?: string,
+	) {
+		if (initialFilter) this.searchInput.setValue(initialFilter);
 	}
-	let data: { global: PackageResources[]; project: PackageResources[] };
-	try { data = await natives.listResources(ctx.cwd); }
-	catch (error) {
-		ctx.ui.notify(`packed unavailable: ${error instanceof Error ? error.message : error}`, "error");
-		return;
+
+	async load(): Promise<void> {
+		try {
+			this.data = await this.natives.listResources(this.host.ctx.cwd);
+		} catch (error) {
+			this.host.ctx.ui.notify(`packed unavailable: ${error instanceof Error ? error.message : error}`, "error");
+		}
+		this.rebuildItems();
+		this.applyFilter(this.searchInput.getValue());
 	}
 
-	let scope: Scope = "global";
-	let pendingReload = false;
-	let filter = initialFilter ?? "";
-
-	for (;;) {
-		const action = await renderConfig(ctx, data, scope, filter);
-		filter = ""; // only seeds the very first open -- a later refresh/switch starts unfiltered
-		if (action.type === "close") break;
-		if (action.type === "switch") { scope = scope === "global" ? "project" : "global"; continue; }
-		if (action.type === "refresh") {
-			try { data = await natives.listResources(ctx.cwd); }
-			catch (error) { ctx.ui.notify(`refresh failed: ${error instanceof Error ? error.message : error}`, "error"); }
-			continue;
+	/** True while an active filter or an in-flight toggle+reload flow means
+	 * Escape should clear/wait rather than the host's own "back to Packages"
+	 * handling. Config never needs Left/Right for itself (no free-text
+	 * cursor movement outside the filter box, which doesn't use them either). */
+	capturesEscape(): boolean {
+		return this.searchActive || this.busy;
+	}
+
+	invalidate(): void {}
+
+	render(width: number): string[] {
+		const { theme } = this;
+		const scopeLabel = theme.bold(this.scope === "project" ? "Project Resources" : "Global Resources");
+		const hint = this.searchActive
+			? rawKeyHint("esc", "clear")
+			: rawKeyHint("space", "toggle") + theme.fg("muted", " \u00b7 ") + rawKeyHint("/", "filter") + theme.fg("muted", " \u00b7 ") + rawKeyHint("tab", "scope") + theme.fg("muted", " \u00b7 ") + rawKeyHint("r", "refresh");
+		const spacing = Math.max(1, width - visibleWidth(scopeLabel) - visibleWidth(hint));
+		const line1 = truncateToWidth(`${scopeLabel}${" ".repeat(spacing)}${hint}`, width, "");
+		const line2 = truncateToWidth(theme.fg("muted", `${this.items.length} resource(s) \u00b7 extensions need a reload after a change`), width, "");
+		const lines = [line1, line2];
+		if (this.searchActive) lines.push(...this.searchInput.render(width));
+		lines.push("");
+		if (this.filtered.length === 0) {
+			lines.push(theme.fg("muted", "  No resources found"));
+			return lines;
 		}
-		const item = action.item;
-		if (!item) continue;
-		const outcome = await applyResourceToggle(item, natives, ctx);
-		if (outcome !== "toggled") continue;
-		const group = (item.scope === "global" ? data.global : data.project).find((candidate) => candidate.source === item.source);
-		const entry = group?.[item.field].find((candidate) => candidate.path === item.path);
-		if (entry) entry.enabled = !item.enabled;
-		if (item.field === "extensions") pendingReload = true;
+		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);
+		for (let index = start; index < end; index++) {
+			const item = this.filtered[index]!;
+			const isSelected = index === this.selectedIndex;
+			const cursor = isSelected ? theme.fg("accent", "\u276f") : " ";
+			const box = item.enabled ? theme.fg("success", "[x]") : theme.fg("dim", "[ ]");
+			const reloadMark = item.field === "extensions" ? theme.fg("warning", " \u27f3") : "";
+			const label = `${item.packageName} \u00b7 ${item.field} \u00b7 ${item.path}${reloadMark}`;
+			lines.push(truncateToWidth(`${cursor} ${box} ${isSelected ? theme.bold(label) : label}`, width, "..."));
+		}
+		const hasScroll = start > 0 || end < this.filtered.length;
+		if (hasScroll) lines.push(theme.fg("dim", `  ${this.selectedIndex + 1}/${this.filtered.length}`));
+		return lines;
 	}
 
-	if (!pendingReload) return;
-	if (await confirmReload(ctx)) await ctx.reload();
-	else ctx.ui.notify("Extension changes pending -- run /reload when ready.", "warning");
-}
+	handleInput(raw: string): void {
+		if (this.busy) return;
+		if (this.searchActive) {
+			if (raw === "\x1b") { this.searchActive = false; this.searchInput.setValue?.(""); this.applyFilter(); }
+			else if (raw === "\r") this.searchActive = false;
+			else { this.searchInput.handleInput(raw); this.applyFilter(); }
+			this.host.requestRender();
+			return;
+		}
+		switch (raw) {
+			case "\x1b[A": this.selectedIndex = (this.selectedIndex - 1 + this.filtered.length) % Math.max(this.filtered.length, 1); break;
+			case "\x1b[B": this.selectedIndex = (this.selectedIndex + 1) % Math.max(this.filtered.length, 1); break;
+			case "\t":
+				this.scope = this.scope === "global" ? "project" : "global";
+				this.rebuildItems();
+				this.applyFilter();
+				break;
+			case "/": this.searchActive = true; break;
+			case "r": void this.refresh(); return;
+			case " ":
+			case "\r": void this.toggleSelected(); return;
+			default: return;
+		}
+		this.host.requestRender();
+	}
+
+	setFilter(filter: string): void {
+		this.searchInput.setValue(filter);
+		this.applyFilter(filter);
+	}
+
+	private rebuildItems(): void {
+		this.items = flatten(this.scope === "global" ? this.data.global : this.data.project, this.scope);
+	}
 
-function renderConfig(ctx: ExtensionCommandContext, data: { global: PackageResources[]; project: PackageResources[] }, scope: Scope, initialFilter = ""): Promise<PanelAction> {
-	return ctx.ui.custom<PanelAction>((tui, theme, _kb, done) => {
-		const searchInput = new Input();
-		if (initialFilter) searchInput.setValue(initialFilter);
-		let searchActive = false;
-		const items = flatten(scope === "global" ? data.global : data.project, scope);
-		let filtered = initialFilter ? filterItems(items, initialFilter) : items;
-		let selectedIndex = 0;
-		const maxVisible = 20;
-
-		function applyFilter(): void {
-			filtered = filterItems(items, searchInput.getValue());
-			selectedIndex = 0;
+	private applyFilter(seed?: string): void {
+		this.filtered = filterItems(this.items, seed ?? this.searchInput.getValue());
+		this.selectedIndex = 0;
+	}
+
+	private async refresh(): Promise<void> {
+		await this.load();
+		this.host.requestRender();
+	}
+
+	private async toggleSelected(): Promise<void> {
+		const item = this.filtered[this.selectedIndex];
+		if (!item) return;
+		this.busy = true;
+		this.host.requestRender();
+		try {
+			const outcome = await applyResourceToggle(item, this.natives, this.host.inlineCtx);
+			if (outcome !== "toggled") return;
+			const group = (item.scope === "global" ? this.data.global : this.data.project).find((candidate) => candidate.source === item.source);
+			const entry = group?.[item.field].find((candidate) => candidate.path === item.path);
+			if (entry) entry.enabled = !item.enabled;
+			if (item.field !== "extensions") return;
+			if (await confirmReload(this.host.inlineCtx)) {
+				this.host.ctx.ui.notify("Toggled; reloading Pi resources.", "info");
+				await this.host.ctx.reload();
+				this.host.onSessionReplaced();
+			} else {
+				this.host.ctx.ui.notify("Extension changes pending -- run /reload when ready.", "warning");
+			}
+		} finally {
+			this.busy = false;
+			this.applyFilter();
+			this.host.requestRender();
 		}
+	}
+}
 
-		const header = {
-			invalidate() {},
-			render(width: number): string[] {
-				const title = theme.bold(scope === "project" ? "Project Resources" : "Global Resources");
-				const hint = searchActive
-					? rawKeyHint("esc", "clear")
-					: rawKeyHint("space", "toggle") + theme.fg("muted", " \u00b7 ") + rawKeyHint("/", "filter") + theme.fg("muted", " \u00b7 ") + rawKeyHint("tab", "scope") + theme.fg("muted", " \u00b7 ") + rawKeyHint("esc", "close");
-				const spacing = Math.max(1, width - visibleWidth(title) - visibleWidth(hint));
-				const line1 = truncateToWidth(`${title}${" ".repeat(spacing)}${hint}`, width, "");
-				const line2 = truncateToWidth(theme.fg("muted", `${items.length} resource(s) \u00b7 extensions need /reload after a change`), width, "");
-				return [line1, line2];
-			},
-		};
-
-		const list = {
-			invalidate() {},
-			render(width: number): string[] {
-				const lines: string[] = [];
-				if (searchActive) lines.push(...searchInput.render(width));
-				lines.push("");
-				if (filtered.length === 0) { lines.push(theme.fg("muted", "  No resources found")); return lines; }
-				const start = Math.max(0, Math.min(selectedIndex - Math.floor(maxVisible / 2), filtered.length - maxVisible));
-				const end = Math.min(start + maxVisible, filtered.length);
-				for (let index = start; index < end; index++) {
-					const item = filtered[index]!;
-					const isSelected = index === selectedIndex;
-					const cursor = isSelected ? theme.fg("accent", "\u276f") : " ";
-					const box = item.enabled ? theme.fg("success", "[x]") : theme.fg("dim", "[ ]");
-					const reloadMark = item.field === "extensions" ? theme.fg("warning", " \u27f3") : "";
-					const label = `${item.packageName} \u00b7 ${item.field} \u00b7 ${item.path}${reloadMark}`;
-					lines.push(truncateToWidth(`${cursor} ${box} ${isSelected ? theme.bold(label) : label}`, width, "..."));
-				}
-				const hasScroll = start > 0 || end < filtered.length;
-				if (hasScroll) lines.push(theme.fg("dim", `  ${selectedIndex + 1}/${filtered.length}`));
-				return lines;
-			},
-		};
-
-		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());
-
-		return {
-			render: (width: number) => container.render(width),
-			invalidate: () => container.invalidate(),
-			handleInput(raw: string) {
-				if (searchActive) {
-					if (raw === "\x1b") { searchActive = false; searchInput.setValue?.(""); applyFilter(); }
-					else if (raw === "\r") searchActive = false;
-					else { searchInput.handleInput(raw); applyFilter(); }
-					tui.requestRender();
-					return;
-				}
-				switch (raw) {
-					case "\x1b[A": selectedIndex = (selectedIndex - 1 + filtered.length) % Math.max(filtered.length, 1); break;
-					case "\x1b[B": selectedIndex = (selectedIndex + 1) % Math.max(filtered.length, 1); break;
-					case "\t": done({ type: "switch" }); return;
-					case "/": searchActive = true; break;
-					case "r": done({ type: "refresh" }); return;
-					case " ":
-					case "\r": {
-						const item = filtered[selectedIndex];
-						if (item) done({ type: "toggle", item });
-						return;
-					}
-					case "\x1b": done({ type: "close" }); return;
-					default: return;
-				}
-				tui.requestRender();
-			},
-		};
-	});
+export async function createConfigTab(natives: Natives, host: TabHost, theme: Theme, initialFilter?: string): Promise<ConfigTab> {
+	const tab = new ConfigTab(natives, host, theme, initialFilter);
+	await tab.load();
+	return tab;
 }

package/extension/src/security-tui.ts

@@ -1,41 +1,121 @@
-import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
+/**
+ * security-tui.ts — /packed's Settings tab: a small radio-style list
+ * (Malevich's Component contract, not a bespoke Menu) so it can plug
+ * straight into TabbedContainer alongside Packages/Find/Config on the
+ * same overlay. Previously ran through Pi's own native
+ * ctx.ui.select/ctx.ui.confirm -- a genuinely separate, arrow-select-only
+ * dialog from any custom overlay, confirmed live as the same "opens a
+ * different TUI" complaint the other three tabs had.
+ */
+import { rawKeyHint } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth } from "@earendil-works/pi-tui";
+import type { Component } from "malevich-tui-components";
 import type { SecuritySettings } from "@danypops/packed/protocol";
 type MutationApproval = SecuritySettings["mutationApproval"];
 import type { Natives } from "./packed.ts";
+import type { TabHost } from "./tab-host.ts";
 
 const OPTIONS: Array<{ value: MutationApproval; label: string }> = [
 	{ value: "always", label: "Always require mutation approval (recommended)" },
 	{ value: "never", label: "Never require mutation approval (unsafe opt-out)" },
 ];
 
-export async function showPackedSettings(ctx: ExtensionCommandContext, natives: Natives): Promise<void> {
-	if (!ctx.hasUI) {
-		ctx.ui.notify("/packed requires interactive mode", "warning");
-		return;
+interface Theme { fg(color: string, s: string): string; bold(s: string): string; }
+
+export class SettingsTab implements Component {
+	private current: MutationApproval = "always";
+	private selectedIndex = 0;
+	private loaded = false;
+
+	constructor(
+		private readonly natives: Pick<Natives, "security" | "setMutationApproval">,
+		private readonly host: TabHost,
+		private readonly theme: Theme,
+	) {}
+
+	async load(): Promise<void> {
+		try {
+			const settings = await this.natives.security();
+			this.current = settings.mutationApproval;
+		} catch (error) {
+			this.host.ctx.ui.notify(`packed unavailable: ${error instanceof Error ? error.message : error}`, "error");
+		}
+		this.selectedIndex = OPTIONS.findIndex((o) => o.value === this.current);
+		if (this.selectedIndex < 0) this.selectedIndex = 0;
+		this.loaded = true;
 	}
-	try {
-		const current = await natives.security();
-		const choice = await ctx.ui.select(
-			`Package mutation approval · current: ${current.mutationApproval}`,
-			[...OPTIONS.map(({ label }) => label), "Cancel"],
-		);
-		const selected = OPTIONS.find(({ label }) => label === choice);
-		if (!selected || selected.value === current.mutationApproval) return;
-		const approved = await ctx.ui.confirm(
+
+	// No capturesEscape/capturesHorizontalArrows override -- no free-text entry
+	// or in-flight blocking state here, so the host's own global Escape/Left/
+	// Right handling is always safe (both default to false when absent).
+
+	invalidate(): void {}
+
+	render(width: number): string[] {
+		const { theme } = this;
+		const hint = rawKeyHint("up/down", "move") + theme.fg("muted", " · ") + rawKeyHint("enter", "change");
+		const line1 = truncateToWidth(hint, width, "");
+		const line2 = truncateToWidth(theme.fg("muted", `current: ${this.current}`), width, "");
+		const lines = [line1, line2, ""];
+		if (!this.loaded) {
+			lines.push(theme.fg("muted", "  Loading…"));
+			return lines;
+		}
+		for (let i = 0; i < OPTIONS.length; i++) {
+			const option = OPTIONS[i]!;
+			const selected = i === this.selectedIndex;
+			const cursor = selected ? theme.fg("accent", "❯ ") : "  ";
+			const mark = option.value === this.current ? theme.fg("success", "●") : theme.fg("dim", "○");
+			const label = selected ? theme.bold(option.label) : option.label;
+			lines.push(truncateToWidth(`${cursor}${mark} ${label}`, width, "…"));
+		}
+		return lines;
+	}
+
+	handleInput(data: string): void {
+		if (!this.loaded) return;
+		switch (data) {
+			case "\x1b[A":
+				this.selectedIndex = (this.selectedIndex - 1 + OPTIONS.length) % OPTIONS.length;
+				this.host.requestRender();
+				return;
+			case "\x1b[B":
+				this.selectedIndex = (this.selectedIndex + 1) % OPTIONS.length;
+				this.host.requestRender();
+				return;
+			case "\r":
+				void this.apply(OPTIONS[this.selectedIndex]!);
+				return;
+			default:
+				return;
+		}
+	}
+
+	private async apply(selected: { value: MutationApproval; label: string }): Promise<void> {
+		if (selected.value === this.current) return;
+		const approved = await this.host.inlineCtx.ui.confirm(
 			"Change package mutation approval",
 			selected.value === "never"
 				? "Disable confirmation for install, update, remove, and package security changes? Packages can execute arbitrary code."
 				: "Restore confirmation for install, update, remove, and package security changes?",
 		);
+		this.host.requestRender();
 		if (!approved) return;
-		const updated = await natives.setMutationApproval(selected.value, true);
-		ctx.ui.notify(
+		const updated = await this.natives.setMutationApproval(selected.value, true);
+		this.current = updated.mutationApproval;
+		this.selectedIndex = OPTIONS.findIndex((o) => o.value === this.current);
+		this.host.ctx.ui.notify(
 			updated.mutationApproval === "always"
 				? "Package mutations now require confirmation."
 				: "Package mutation confirmation disabled. Packages can execute arbitrary code.",
 			updated.mutationApproval === "always" ? "info" : "warning",
 		);
-	} catch (error) {
-		ctx.ui.notify(`packed security settings failed: ${error instanceof Error ? error.message : error}`, "error");
+		this.host.requestRender();
 	}
 }
+
+export async function createSettingsTab(natives: Natives, host: TabHost, theme: Theme): Promise<SettingsTab> {
+	const tab = new SettingsTab(natives, host, theme);
+	await tab.load();
+	return tab;
+}

package/extension/src/tab-host.ts

@@ -0,0 +1,30 @@
+/**
+ * Shared dependencies every /packed panel tab needs for its own approval,
+ * confirm, and reload flow -- injected once by the single overlay that
+ * owns all four tabs (Packages/Find/Config/Settings), so a tab's own
+ * mutation code never needs to know about Envelope, Dialog, or
+ * TabbedContainer at all. Root cause this replaces: each tab used to open
+ * its own separate ctx.ui.custom overlay (or, for Settings, Pi's own
+ * native ctx.ui.select/confirm) to run its approve+mutate+reload flow --
+ * confirmed live as a real user complaint ("Find, Settings, Config all
+ * open a different TUI"). Every tab now runs entirely inside the one
+ * overlay tui.ts already owns; this is the seam that makes that possible
+ * without each tab file importing tui.ts back (which would cycle).
+ */
+import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
+
+export interface TabHost {
+	/** The real ctx -- notify/reload/cwd/etc, exactly as Pi provides it. */
+	ctx: ExtensionCommandContext;
+	/** The same ctx, except ui.confirm renders as this overlay's own inline
+	 * Malevich Dialog instead of Pi's separate native confirm dialog. Every
+	 * approve/reload call inside a tab's own mutation flow must go through
+	 * this, not ctx directly. */
+	inlineCtx: ExtensionCommandContext;
+	/** 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;
+	/** Call once a mutation's own ctx.reload() has already replaced the
+	 * session -- the host must stop rendering the now-stale overlay. */
+	onSessionReplaced(): void;
+}