@danypops/pi-packed 0.10.0 → 0.12.0

package/README.md

@@ -10,13 +10,13 @@ The extension connects to Packed's authenticated user daemon and starts the pack
 
 ## Commands
 
-- `/packed` -- opens on the packages 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.
+- `/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`'s progress bar appears inline next to the package currently updating -- the list stays visible throughout, nothing swaps to a separate screen.
   - `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 floating action menu with all of the above. `r` refreshes, `/` filters, `Tab` cycles view modes.
+  - `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 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/tui.ts

@@ -6,15 +6,19 @@
  * only (x remove -- there is no safe "remove every installed package"
  * bulk analog, so no X is bound). Adds d disable/enable this package's
  * extensions, c jump to full resource config, f find/install new
- * packages, s settings. Enter opens a floating (`ctx.ui.custom` with
- * overlay:true) action menu instead of a full-screen prompt, so the list
- * underneath never disappears. All data flows through the packed CLI
- * (thin seam).
+ * packages, s settings. The panel itself is a real bordered (rounded)
+ * floating overlay (`ctx.ui.custom` with overlay:true, Malevich's
+ * Envelope for the box), anchored to the top so its header stays put and
+ * only the footer moves as content height changes. Enter opens a second,
+ * smaller overlay action menu on top of it. U's batch update stays on
+ * this same package list -- progress renders inline next to the row
+ * currently being updated, not as a separate screen. 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 { Container, Input, Spacer, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
-import { Menu, ProgressBar, type MenuItem } from "malevich-tui-components";
+import { Container, Input, Spacer, truncateToWidth } from "@earendil-works/pi-tui";
+import { Envelope, 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";
@@ -25,7 +29,7 @@ import { showDiscoverPanel } from "./discover.js";
 import { menuTheme } from "./menu-theme.js";
 
 interface PanelAction {
-	type: "update" | "updateAll" | "remove" | "disable" | "config" | "find" | "refresh" | "settings";
+	type: "update" | "remove" | "disable" | "config" | "find" | "refresh" | "settings";
 	row?: Row;
 }
 
@@ -88,11 +92,73 @@ export async function applyPackageChoice(
 
 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. */
+interface UpdateProgressEvent { row: Row; index: number; total: number; phase: "start" | "done"; }
+
+/** The core sequential-update loop, with no UI of its own -- reports each
+ * step via onProgress so any host surface (a floating overlay, or the
+ * packages panel's own body) can render it however fits. */
+async function performUpdateAll(
+	outdated: Row[],
+	natives: Natives,
+	approved: boolean | undefined,
+	onProgress?: (event: UpdateProgressEvent) => void,
+): Promise<UpdateAllResult> {
+	let changed = 0;
+	const failedNames: string[] = [];
+	for (let i = 0; i < outdated.length; i++) {
+		const row = outdated[i]!;
+		onProgress?.({ row, index: i, total: outdated.length, phase: "start" });
+		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}`);
+		}
+		onProgress?.({ row, index: i, total: outdated.length, phase: "done" });
+	}
+	return { changed, failedNames };
+}
+
+/** Approves once for the whole batch, runs it via whatever runBatch does
+ * (a floating overlay for applyUpdateAll's own public API, or renderPanel's
+ * embedded progress bar), then reports the combined result -- shared so
+ * both surfaces stay behaviorally identical. */
+async function approveAndRunUpdateAll(
+	outdated: Row[],
+	natives: Natives,
+	ctx: ExtensionCommandContext,
+	runBatch: (outdated: Row[], approved: boolean | undefined) => Promise<UpdateAllResult>,
+): Promise<PackageChoiceOutcome> {
+	if (outdated.length === 0) {
+		ctx.ui.notify("Nothing to update.", "info");
+		return "unchanged";
+	}
+	const approval = await approvePackageOperation(
+		"update",
+		`pi update --extension ${outdated.map((row) => `npm:${row.name}`).join(" ")}`,
+		natives,
+		ctx,
+	);
+	if (!approval.allowed) {
+		ctx.ui.notify(approval.message ?? "update denied", "warning");
+		return "cancelled";
+	}
+	const { changed, failedNames } = await runBatch(outdated, approval.approved);
+	for (const failure of failedNames) ctx.ui.notify(`update failed: ${failure}`, "error");
+	if (changed === 0) {
+		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)${failedNames.length > 0 ? `, ${failedNames.length} failed` : ""}; reloading Pi resources.`, "info");
+	await ctx.reload();
+	return "changed";
+}
+
+/** Floats its own progress-bar overlay over the still-open panel -- kept
+ * for applyUpdateAll's own public API (and anything calling it directly,
+ * outside the packages panel). renderPanel's own U key does not use this;
+ * it renders the same progress bar inline on its own already-open overlay
+ * instead of stacking a second one. */
 async function runUpdatesWithProgress(
 	outdated: Row[],
 	natives: Natives,
@@ -112,24 +178,11 @@ async function runUpdatesWithProgress(
 			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 });
-			})();
+			performUpdateAll(outdated, natives, approved, (event) => {
+				bar.setLabel(`${event.row.name} (${event.index + 1}/${event.total})`);
+				if (event.phase === "done") bar.setValue(event.index + 1);
+				tui.requestRender();
+			}).then(done);
 
 			return { render: (width: number) => container.render(width), invalidate: () => container.invalidate(), handleInput() {} };
 		},
@@ -139,32 +192,12 @@ async function runUpdatesWithProgress(
 
 /** 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). */
+ * would end the session after the first successful update). Public API:
+ * opens its own progress overlay. renderPanel's own U key instead renders
+ * progress inline via approveAndRunUpdateAll + performUpdateAll directly. */
 export async function applyUpdateAll(rows: Row[], natives: Natives, ctx: ExtensionCommandContext): Promise<PackageChoiceOutcome> {
 	const outdated = rows.filter((row) => row.hasUpdate);
-	if (outdated.length === 0) {
-		ctx.ui.notify("Nothing to update.", "info");
-		return "unchanged";
-	}
-	const approval = await approvePackageOperation(
-		"update",
-		`pi update --extension ${outdated.map((row) => `npm:${row.name}`).join(" ")}`,
-		natives,
-		ctx,
-	);
-	if (!approval.allowed) {
-		ctx.ui.notify(approval.message ?? "update denied", "warning");
-		return "cancelled";
-	}
-	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(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)${failedNames.length > 0 ? `, ${failedNames.length} failed` : ""}; reloading Pi resources.`, "info");
-	await ctx.reload();
-	return "changed";
+	return approveAndRunUpdateAll(outdated, natives, ctx, (batch, approved) => runUpdatesWithProgress(batch, natives, approved, ctx));
 }
 
 /** d -- toggles every declared extension of this package on or off in one
@@ -248,8 +281,10 @@ export async function showPackedPanel(ctx: ExtensionCommandContext, natives: Nat
 	}
 
 	// Panel loop: actions resolve the component, run outside it, then reopen.
+	// U/updateAll is handled entirely inside renderPanel itself (progress
+	// rendered on the same already-open overlay) and never reaches here.
 	for (;;) {
-		const action = await renderPanel(ctx, rows);
+		const action = await renderPanel(ctx, natives, rows);
 		if (!action) return; // closed
 
 		if (action.type === "refresh") {
@@ -268,12 +303,6 @@ export async function showPackedPanel(ctx: ExtensionCommandContext, natives: Nat
 			continue; // a successful install already reloaded; a no-op returns here
 		}
 
-		if (action.type === "updateAll") {
-			const outcome = await applyUpdateAll(rows, natives, ctx);
-			if (outcome === "changed") return; // ctx.reload() already replaced the session
-			continue;
-		}
-
 		if (action.type === "config") {
 			await showResourceConfig(ctx, natives, action.row?.name);
 			continue; // showResourceConfig already handles its own reload prompt
@@ -293,13 +322,19 @@ export async function showPackedPanel(ctx: ExtensionCommandContext, natives: Nat
 	}
 }
 
-function renderPanel(ctx: ExtensionCommandContext, rows: Row[]): Promise<PanelAction | undefined> {
+function renderPanel(ctx: ExtensionCommandContext, natives: Natives, initialRows: Row[]): Promise<PanelAction | undefined> {
 	return ctx.ui.custom<PanelAction | undefined>((tui, theme, _kb, done) => {
+		let rows = initialRows;
 		let mode: ViewMode = "all";
 		const searchInput = new Input();
 		let searchActive = false;
 		let filtered = visibleRows(rows, mode);
 		let selectedIndex = 0;
+		// Set only while U's batch update is running. The list stays fully
+		// visible throughout -- this just names which row the shared bar
+		// (below) is currently sitting next to.
+		let updatingRowName: string | undefined;
+		const updatingBar = new ProgressBar({ value: 0, max: 1, width: 10, style: (s) => theme.fg("accent", s) });
 
 		const maxVisible = 20;
 
@@ -308,12 +343,44 @@ function renderPanel(ctx: ExtensionCommandContext, rows: Row[]): Promise<PanelAc
 			selectedIndex = 0;
 		}
 
+		/** U -- runs the whole approve+update+notify+reload flow without ever
+		 * closing this panel or replacing the list: each step's progress
+		 * appears inline next to the row currently being updated, via
+		 * updatingRowName/updatingBar, which list's own render checks. Rows
+		 * refresh in place afterward unless a reload already ended the
+		 * session. */
+		async function runUpdateAllInline(): Promise<void> {
+			const outdated = rows.filter((row) => row.hasUpdate);
+			const outcome = await approveAndRunUpdateAll(outdated, natives, ctx, (batch, approved) => {
+				updatingBar.setValue(0);
+				updatingBar.setMax(batch.length);
+				return performUpdateAll(batch, natives, approved, (event) => {
+					updatingRowName = event.row.name;
+					if (event.phase === "done") updatingBar.setValue(event.index + 1);
+					tui.requestRender();
+				});
+			});
+			updatingRowName = undefined;
+			if (outcome === "changed") {
+				done(undefined); // ctx.reload() already replaced the session
+				return;
+			}
+			const reloaded = await loadRows(natives);
+			if (reloaded.error) ctx.ui.notify(`refresh failed: ${reloaded.error}`, "error");
+			else rows = reloaded.rows;
+			applyFilter();
+			tui.requestRender();
+		}
+
+		function panelTitle(): string {
+			if (updatingRowName) return "Packages · updating…";
+			const outdated = rows.filter((r) => r.hasUpdate).length;
+			return outdated > 0 ? `Packages · ${outdated} update(s)` : "Packages";
+		}
+
 		const header = {
 			invalidate() {},
 			render(width: number): string[] {
-				const title = theme.bold("Packages");
-				const outdated = rows.filter((r) => r.hasUpdate).length;
-				const badge = outdated > 0 ? theme.fg("warning", ` ${outdated} update(s)`) : "";
 				const hint = searchActive
 					? rawKeyHint("esc", "clear")
 					: rawKeyHint("enter", "menu") +
@@ -331,8 +398,7 @@ function renderPanel(ctx: ExtensionCommandContext, rows: Row[]): Promise<PanelAc
 						rawKeyHint("s", "settings") +
 						theme.fg("muted", " · ") +
 						rawKeyHint("esc", "close");
-				const spacing = Math.max(1, width - visibleWidth(title) - visibleWidth(badge) - visibleWidth(hint));
-				const line1 = truncateToWidth(`${title}${badge}${" ".repeat(spacing)}${hint}`, width, "");
+				const line1 = truncateToWidth(hint, width, "");
 				const dot = "·";
 				const line2 = truncateToWidth(
 					theme.fg("muted", `view: ${mode} ${dot} / filter ${dot} tab view ${dot} r refresh ${dot} ${rows.length} installed`),
@@ -361,7 +427,10 @@ function renderPanel(ctx: ExtensionCommandContext, rows: Row[]): Promise<PanelAc
 					const cursor = selected ? theme.fg("accent", "❯") : " ";
 					const name = selected ? theme.bold(row.name) : row.name;
 					const ver = theme.fg("dim", `@${row.version}`);
-					const upd = row.hasUpdate ? theme.fg("warning", ` ↑${row.latest}`) : "";
+					const isUpdating = updatingRowName === row.name;
+					const upd = isUpdating
+						? theme.fg("accent", `  ${updatingBar.format(10)} updating…`)
+						: row.hasUpdate ? theme.fg("warning", ` ↑${row.latest}`) : "";
 					lines.push(truncateToWidth(`${cursor} ${name}${ver}${upd}`, width, ""));
 				}
 				const hasScroll = start > 0 || end < filtered.length;
@@ -370,21 +439,31 @@ 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(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());
+		// Real bordered box (rounded corners), not just a horizontal rule --
+		// title carries the live update badge/status instead of a header line.
+		const envelope = new Envelope({
+			title: panelTitle(),
+			borderStyle: "rounded",
+			style: (s) => theme.fg("border", s),
+			titleStyle: (s) => theme.bold(theme.fg("accent", s)),
+		});
+		const body = {
+			invalidate() { header.invalidate(); list.invalidate(); },
+			render(width: number): string[] {
+				return [...header.render(width), "", ...list.render(width)];
+			},
+		};
+		envelope.setContent(body);
 
 		return {
-			render: (width: number) => container.render(width),
-			invalidate: () => container.invalidate(),
+			render(width: number): string[] {
+				envelope.setTitle(panelTitle());
+				return envelope.render(width);
+			},
+			invalidate: () => envelope.invalidate(),
 			handleInput(data: string) {
+				if (updatingRowName) return; // the installer owns input until it finishes
+
 				if (searchActive) {
 					if (data === "\x1b") {
 						searchActive = false;
@@ -424,7 +503,7 @@ function renderPanel(ctx: ExtensionCommandContext, rows: Row[]): Promise<PanelAc
 						done({ type: "find" });
 						return;
 					case "U":
-						done({ type: "updateAll" });
+						void runUpdateAllInline();
 						return;
 					case "u": {
 						const row = filtered[selectedIndex];
@@ -467,5 +546,5 @@ function renderPanel(ctx: ExtensionCommandContext, rows: Row[]): Promise<PanelAc
 				tui.requestRender();
 			},
 		};
-	});
+	}, { overlay: true, overlayOptions: { width: "70%", maxHeight: "70%", anchor: "top-center", offsetY: 1 } });
 }

package/package.json

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