@danypops/pi-packed 0.8.0 → 0.10.0

package/extension/src/discover.ts

@@ -5,13 +5,15 @@
  * itself never mutates; only Install/Cancel (behind the standard
  * approval) does.
  */
-import type { ExtensionCommandContext, Theme } from "@earendil-works/pi-coding-agent";
+import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
 import { DynamicBorder, rawKeyHint } from "@earendil-works/pi-coding-agent";
-import { Container, Input, SelectList, type SelectItem, type SelectListTheme, Spacer, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { Container, Input, Spacer, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { Menu, type MenuItem } 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";
 
 const SEARCH_LIMIT = 20;
 
@@ -51,28 +53,17 @@ export async function applyInstall(result: PackageSummary, natives: Natives, ctx
 	}
 }
 
-function selectListTheme(theme: Theme): SelectListTheme {
-	return {
-		selectedPrefix: (text) => theme.fg("accent", text),
-		selectedText: (text) => theme.fg("accent", text),
-		description: (text) => theme.fg("muted", text),
-		scrollInfo: (text) => theme.fg("muted", text),
-		noMatch: (text) => theme.fg("muted", text),
-	};
-}
-
 async function showInstallMenu(ctx: ExtensionCommandContext, result: PackageSummary): Promise<boolean> {
-	const items: SelectItem[] = [{ value: "install", label: `Install ${result.name}@${result.version}` }, { value: "cancel", label: "Cancel" }];
-	const choice = await ctx.ui.custom<"install" | "cancel" | undefined>(
+	return ctx.ui.custom<boolean>(
 		(_tui, theme, _kb, done) => {
-			const list = new SelectList(items, items.length, selectListTheme(theme));
-			list.onSelect = (item) => done(item.value as "install" | "cancel");
-			list.onCancel = () => done(undefined);
-			return list;
+			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" } },
 	);
-	return choice === "install";
 }
 
 export async function showDiscoverPanel(ctx: ExtensionCommandContext, natives: Natives): Promise<void> {
@@ -158,15 +149,16 @@ function renderDiscoverPanel(ctx: ExtensionCommandContext, natives: Natives): Pr
 			},
 		};
 
+		const border = () => new DynamicBorder((s) => theme.fg("border", s));
 		const container = new Container();
 		container.addChild(new Spacer(1));
-		container.addChild(new DynamicBorder());
+		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(new DynamicBorder());
+		container.addChild(border());
 
 		return {
 			render: (width: number) => container.render(width),

package/extension/src/menu-theme.ts

@@ -0,0 +1,14 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import type { MenuTheme } 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 menuTheme(theme: Theme): MenuTheme {
+	return {
+		border: (s) => theme.fg("border", s),
+		selected: (s) => theme.fg("accent", s),
+		normal: (s) => s,
+		dim: (s) => theme.fg("muted", s),
+		title: (s) => theme.fg("accent", s),
+	};
+}

package/extension/src/resource-config.ts

@@ -190,15 +190,16 @@ function renderConfig(ctx: ExtensionCommandContext, data: { global: PackageResou
 			},
 		};
 
+		const border = () => new DynamicBorder((s) => theme.fg("border", s));
 		const container = new Container();
 		container.addChild(new Spacer(1));
-		container.addChild(new DynamicBorder());
+		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(new DynamicBorder());
+		container.addChild(border());
 
 		return {
 			render: (width: number) => container.render(width),

package/extension/src/tui.ts

@@ -11,9 +11,10 @@
  * underneath never disappears. All data flows through the packed CLI
  * (thin seam).
  */
-import type { ExtensionCommandContext, Theme } from "@earendil-works/pi-coding-agent";
+import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
 import { DynamicBorder, rawKeyHint } from "@earendil-works/pi-coding-agent";
-import { Container, Input, SelectList, type SelectItem, type SelectListTheme, Spacer, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { Container, Input, Spacer, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { Menu, ProgressBar, type MenuItem } from "malevich-tui-components";
 import { filterRows, mergeRows, nextMode, visibleRows } from "./model.js";
 import type { Row, ViewMode } from "./model.js";
 import type { Natives, PackageResources } from "./packed.js";
@@ -21,6 +22,7 @@ import { approvePackageOperation } from "./tools.js";
 import { showPackedSettings } from "./security-tui.js";
 import { showResourceConfig, applyResourceToggle } from "./resource-config.js";
 import { showDiscoverPanel } from "./discover.js";
+import { menuTheme } from "./menu-theme.js";
 
 interface PanelAction {
 	type: "update" | "updateAll" | "remove" | "disable" | "config" | "find" | "refresh" | "settings";
@@ -84,6 +86,57 @@ export async function applyPackageChoice(
 	return "cancelled";
 }
 
+interface UpdateAllResult { changed: number; failedNames: string[]; }
+
+/** Floats a live progress bar over the still-open panel while the batch
+ * runs sequentially -- the lazy.nvim-style "Updating N package(s)" window,
+ * instead of one static toast with no visible progress until it's all
+ * done. Resolves on its own once the last package finishes; nothing the
+ * user presses closes it early. */
+async function runUpdatesWithProgress(
+	outdated: Row[],
+	natives: Natives,
+	approved: boolean | undefined,
+	ctx: ExtensionCommandContext,
+): Promise<UpdateAllResult> {
+	return ctx.ui.custom<UpdateAllResult>(
+		(tui, theme, _kb, done) => {
+			const bar = new ProgressBar({ value: 0, max: outdated.length, label: `${outdated[0]?.name ?? ""} (1/${outdated.length})`, style: (s) => theme.fg("accent", s) });
+			const border = () => new DynamicBorder((s) => theme.fg("border", s));
+			const container = new Container();
+			container.addChild(new Spacer(1));
+			container.addChild(border());
+			container.addChild({ invalidate() {}, render: (_width: number) => [theme.bold("Updating packages")] });
+			container.addChild(new Spacer(1));
+			container.addChild(bar);
+			container.addChild(new Spacer(1));
+			container.addChild(border());
+
+			void (async () => {
+				let changed = 0;
+				const failedNames: string[] = [];
+				for (let i = 0; i < outdated.length; i++) {
+					const row = outdated[i]!;
+					bar.setLabel(`${row.name} (${i + 1}/${outdated.length})`);
+					tui.requestRender();
+					try {
+						const outcome = await natives.update(`npm:${row.name}`, approved);
+						if (outcome.reloadRequired) changed += 1;
+					} catch (e) {
+						failedNames.push(`${row.name}: ${e instanceof Error ? e.message : e}`);
+					}
+					bar.setValue(i + 1);
+					tui.requestRender();
+				}
+				done({ changed, failedNames });
+			})();
+
+			return { render: (width: number) => container.render(width), invalidate: () => container.invalidate(), handleInput() {} };
+		},
+		{ overlay: true, overlayOptions: { width: 50, anchor: "center" } },
+	);
+}
+
 /** U -- update every outdated row with one combined approval and one
  * reload, instead of applyPackageChoice's own per-call reload (which
  * would end the session after the first successful update). */
@@ -103,23 +156,13 @@ export async function applyUpdateAll(rows: Row[], natives: Natives, ctx: Extensi
 		ctx.ui.notify(approval.message ?? "update denied", "warning");
 		return "cancelled";
 	}
-	ctx.ui.notify(`Updating ${outdated.length} package(s)…`, "info");
-	let changed = 0;
-	let failed = 0;
-	for (const row of outdated) {
-		try {
-			const outcome = await natives.update(`npm:${row.name}`, approval.approved);
-			if (outcome.reloadRequired) changed += 1;
-		} catch (e) {
-			failed += 1;
-			ctx.ui.notify(`${row.name} update failed: ${e instanceof Error ? e.message : e}`, "error");
-		}
-	}
+	const { changed, failedNames } = await runUpdatesWithProgress(outdated, natives, approval.approved, ctx);
+	for (const failure of failedNames) ctx.ui.notify(`update failed: ${failure}`, "error");
 	if (changed === 0) {
-		ctx.ui.notify(failed > 0 ? `No packages updated; ${failed} failed.` : "All packages already up to date.", failed > 0 ? "warning" : "info");
-		return failed > 0 ? "cancelled" : "unchanged";
+		ctx.ui.notify(failedNames.length > 0 ? `No packages updated; ${failedNames.length} failed.` : "All packages already up to date.", failedNames.length > 0 ? "warning" : "info");
+		return failedNames.length > 0 ? "cancelled" : "unchanged";
 	}
-	ctx.ui.notify(`Updated ${changed} package(s)${failed > 0 ? `, ${failed} failed` : ""}; reloading Pi resources.`, "info");
+	ctx.ui.notify(`Updated ${changed} package(s)${failedNames.length > 0 ? `, ${failedNames.length} failed` : ""}; reloading Pi resources.`, "info");
 	await ctx.reload();
 	return "changed";
 }
@@ -173,32 +216,20 @@ async function loadRows(natives: Natives): Promise<{ rows: Row[]; error?: string
 	}
 }
 
-function selectListTheme(theme: Theme): SelectListTheme {
-	return {
-		selectedPrefix: (text) => theme.fg("accent", text),
-		selectedText: (text) => theme.fg("accent", text),
-		description: (text) => theme.fg("muted", text),
-		scrollInfo: (text) => theme.fg("muted", text),
-		noMatch: (text) => theme.fg("muted", text),
-	};
-}
-
 /** Enter's action menu, floated on top of the still-open packages panel
  * via ctx.ui.custom's own overlay:true -- no full-screen teardown, unlike
  * the ctx.ui.select this replaced. */
 async function showActionMenu(ctx: ExtensionCommandContext, row: Row): Promise<"update" | "remove" | "disable" | "config" | undefined> {
-	const items: SelectItem[] = [
-		...(row.hasUpdate ? [{ value: "update", label: `Update to ${row.latest}` }] : []),
-		{ value: "disable", label: "Disable/enable extensions" },
-		{ value: "config", label: "Configure resources" },
-		{ value: "remove", label: "Remove" },
-	];
-	return ctx.ui.custom<"update" | "remove" | "disable" | "config" | undefined>(
+	type Choice = "update" | "remove" | "disable" | "config";
+	return ctx.ui.custom<Choice | undefined>(
 		(_tui, theme, _kb, done) => {
-			const list = new SelectList(items, items.length, selectListTheme(theme));
-			list.onSelect = (item) => done(item.value as "update" | "remove" | "disable" | "config");
-			list.onCancel = () => done(undefined);
-			return list;
+			const items: MenuItem[] = [
+				...(row.hasUpdate ? [{ label: `Update to ${row.latest}`, action: () => done("update" as Choice) }] : []),
+				{ label: "Disable/enable extensions", action: () => done("disable") },
+				{ label: "Configure resources", action: () => done("config") },
+				{ label: "Remove", action: () => done("remove") },
+			];
+			return new Menu({ items, theme: menuTheme(theme), onClose: () => done(undefined) });
 		},
 		{ overlay: true, overlayOptions: { width: 40, anchor: "center" } },
 	);
@@ -339,15 +370,16 @@ function renderPanel(ctx: ExtensionCommandContext, rows: Row[]): Promise<PanelAc
 			},
 		};
 
+		const border = () => new DynamicBorder((s) => theme.fg("border", s));
 		const container = new Container();
 		container.addChild(new Spacer(1));
-		container.addChild(new DynamicBorder());
+		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(new DynamicBorder());
+		container.addChild(border());
 
 		return {
 			render: (width: number) => container.render(width),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danypops/pi-packed",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "Pi package tools, commands, profiles, and TUI for the Packed daemon",
   "type": "module",
   "keywords": ["pi-package"],
@@ -14,7 +14,8 @@
   "dependencies": {
     "@danypops/packed": "^0.2.0",
     "@danypops/vehicle-client": "^0.1.1",
-    "@danypops/vehicle-client-pi": "^0.1.5"
+    "@danypops/vehicle-client-pi": "^0.1.5",
+    "malevich-tui-components": "^0.7.0"
   },
   "peerDependencies": {
     "@earendil-works/pi-coding-agent": "*",