@danypops/pi-packed 0.14.0 → 0.16.0

package/README.md

@@ -11,7 +11,7 @@ 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`'s progress bar appears inline next to the package currently updating -- 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`.
+  - `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).

package/extension/src/menu-theme.ts

@@ -1,5 +1,5 @@
 import type { Theme } from "@earendil-works/pi-coding-agent";
-import type { MenuTheme } from "malevich-tui-components";
+import type { DialogTheme, 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. */
@@ -12,3 +12,16 @@ export function menuTheme(theme: Theme): MenuTheme {
 		title: (s) => theme.fg("accent", s),
 	};
 }
+
+/** Maps Pi's own Theme onto Malevich's Dialog -- used for an inline y/n
+ * decision (e.g. confirmReload) rendered as part of an already-open
+ * ctx.ui.custom overlay's own content, instead of ctx.ui.confirm's separate,
+ * arrow-select-only native dialog. */
+export function dialogTheme(theme: Theme): DialogTheme {
+	return {
+		border: (s) => theme.fg("border", s),
+		title: (s) => theme.bold(theme.fg("accent", s)),
+		body: (s) => s,
+		dim: (s) => theme.fg("muted", s),
+	};
+}

package/extension/src/tui.ts

@@ -12,24 +12,33 @@
  * own row percentage, not a fixed row count -- scales with the real
  * terminal, unlike the anchor:"top-center"+offsetY this replaced, which
  * was pinned 1 row below the absolute top on any terminal size). 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. Rows render through
- * Malevich's Table (real column-aligned Package/Version/status cells,
- * per-row selection styling baked into each cell since Table's own
- * cellStyle is column-wide, not row-wide) inside this panel's own
- * scroll-window slice -- Table deliberately owns no pagination of its
- * own, so the visible-window-around-selectedIndex math stays here. Every
- * mutation that actually changes something asks confirmReload separately
- * from the earlier mutation-approval confirm -- declining defers the
- * reload (the mutation itself already happened) and keeps the panel open
- * with refreshed rows instead of ending the session. All
- * data flows through the packed CLI (thin seam).
+ * opens a second, smaller overlay action menu on top of it. U's batch
+ * update stays on this same package list -- an indeterminate spinner
+ * (Malevich's Spinner, extracted upstream from this panel's original need
+ * once no embeddable one existed anywhere) renders inline next to the row
+ * currently updating, settling into a real ✓/✗ plus a bounded tail of
+ * that row's own actual captured stdout/stderr once it finishes, never a
+ * determinate bar (a single subprocess call has no knowable percentage).
+ * Rows render through Malevich's Table (real column-aligned
+ * Package/Version/status cells, per-row selection styling baked into each
+ * cell since Table's own cellStyle is column-wide, not row-wide) inside
+ * this panel's own scroll-window slice -- Table deliberately owns no
+ * pagination of its own, so the visible-window-around-selectedIndex math
+ * stays here. u/x/d and the Enter action menu all run their whole
+ * approve+mutate+confirmReload flow inline, without ever closing this
+ * overlay first -- every confirm() along the way (mutation approval,
+ * confirmReload's separate reload gate) renders as a real Malevich Dialog
+ * on this SAME overlay, dispatched by literal y/n keys, instead of
+ * ctx.ui.confirm's own separate native dialog (arrow-select only, and a
+ * genuinely different overlay stacked on top -- confirmed live as a real
+ * user complaint). Declining a reload defers it: the mutation itself
+ * already happened, and the panel stays open with refreshed rows instead
+ * of ending the session. 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 { Envelope, Menu, ProgressBar, Table, type MenuItem, type TableColumn, type TextMeasure } from "malevich-tui-components";
+import { Dialog, Envelope, Menu, Spinner, Table, type MenuItem, type TableColumn, type TextMeasure } 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";
@@ -37,11 +46,11 @@ 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";
+import { dialogTheme, menuTheme } from "./menu-theme.js";
 import { confirmReload } from "./reload.js";
 
 interface PanelAction {
-	type: "update" | "remove" | "disable" | "config" | "find" | "refresh" | "settings";
+	type: "config" | "find" | "refresh" | "settings";
 	row?: Row;
 }
 
@@ -115,7 +124,13 @@ export async function applyPackageChoice(
 
 interface UpdateAllResult { changed: number; failedNames: string[]; }
 
-interface UpdateProgressEvent { row: Row; index: number; total: number; phase: "start" | "done"; }
+/** Present only on phase "done" -- the real captured stdout+stderr from
+ * ExecInstaller (ok: true) or the thrown error's message (ok: false). This
+ * is the actual execution output, not a synthetic status string, so a host
+ * can show a genuine success/failure sign instead of guessing from
+ * reloadRequired alone. */
+interface UpdateProgressResult { ok: boolean; output: string; }
+interface UpdateProgressEvent { row: Row; index: number; total: number; phase: "start" | "done"; result?: UpdateProgressResult; }
 
 /** 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
@@ -134,14 +149,28 @@ async function performUpdateAll(
 		try {
 			const outcome = await natives.update(`npm:${row.name}`, approved);
 			if (outcome.reloadRequired) changed += 1;
+			onProgress?.({ row, index: i, total: outdated.length, phase: "done", result: { ok: true, output: outcome.output } });
 		} catch (e) {
-			failedNames.push(`${row.name}: ${e instanceof Error ? e.message : e}`);
+			const message = e instanceof Error ? e.message : String(e);
+			failedNames.push(`${row.name}: ${message}`);
+			onProgress?.({ row, index: i, total: outdated.length, phase: "done", result: { ok: false, output: message } });
 		}
-		onProgress?.({ row, index: i, total: outdated.length, phase: "done" });
 	}
 	return { changed, failedNames };
 }
 
+const MAX_LOG_TAIL_CHARS = 60;
+
+/** The last non-empty line of real captured output, bounded -- never the
+ * full stdout/stderr dump inline (a noisy npm install can produce hundreds
+ * of lines). undefined when there's nothing worth showing (the common
+ * case: `pi update` often produces no output on success at all). */
+function logTail(output: string): string | undefined {
+	const line = output.trim().split("\n").filter(Boolean).at(-1);
+	if (!line) return undefined;
+	return line.length > MAX_LOG_TAIL_CHARS ? `${line.slice(0, MAX_LOG_TAIL_CHARS - 1)}…` : line;
+}
+
 /** 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
@@ -182,11 +211,17 @@ async function approveAndRunUpdateAll(
 	return "changed";
 }
 
-/** Floats its own progress-bar overlay over the still-open panel -- kept
+const MAX_SETTLED_LOG_LINES = 5;
+
+/** Floats its own spinner+log 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. */
+ * it renders the same spinner+log inline on its own already-open overlay
+ * instead of stacking a second one. An indeterminate spinner (not a
+ * determinate bar) because a single subprocess call has no knowable
+ * percentage -- only "still running" or "settled". Each settled row
+ * appends one bounded log line (real captured output, not a synthetic
+ * status) with a genuine success/failure glyph, up to a small scrollback. */
 async function runUpdatesWithProgress(
 	outdated: Row[],
 	natives: Natives,
@@ -195,22 +230,35 @@ async function runUpdatesWithProgress(
 ): 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 spinner = new Spinner();
+			const settledLines: string[] = [];
+			let currentLabel = `${outdated[0]?.name ?? ""} (1/${outdated.length})`;
 			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({ invalidate() {}, render: (width: number) => [truncateToWidth(`${theme.fg("accent", spinner.glyph())} ${currentLabel}`, width, "")] });
+			container.addChild(new Spacer(1));
+			container.addChild({
+				invalidate() {},
+				render: (width: number) => settledLines.slice(-MAX_SETTLED_LOG_LINES).map((line) => truncateToWidth(line, width, "")),
+			});
 			container.addChild(new Spacer(1));
 			container.addChild(border());
 
+			spinner.start(() => tui.requestRender());
 			performUpdateAll(outdated, natives, approved, (event) => {
-				bar.setLabel(`${event.row.name} (${event.index + 1}/${event.total})`);
-				if (event.phase === "done") bar.setValue(event.index + 1);
+				if (event.phase === "start") {
+					currentLabel = `${event.row.name} (${event.index + 1}/${event.total})`;
+				} else {
+					const glyph = event.result?.ok ? theme.fg("success", "✓") : theme.fg("error", "✗");
+					const tail = event.result ? logTail(event.result.output) : undefined;
+					settledLines.push(`${glyph} ${event.row.name}${tail ? theme.fg("dim", ` -- ${tail}`) : ""}`);
+				}
 				tui.requestRender();
-			}).then(done);
+			}).finally(() => spinner.stop()).then(done);
 
 			return { render: (width: number) => container.render(width), invalidate: () => container.invalidate(), handleInput() {} };
 		},
@@ -322,8 +370,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.
+	// Every mutation (u/x/d, U, and whatever the Enter action menu picks) is
+	// handled entirely inside renderPanel itself -- approval and reload
+	// confirms render inline on the same already-open overlay -- and never
+	// reaches here; only non-mutation navigation resolves this loop.
 	for (;;) {
 		const action = await renderPanel(ctx, natives, rows);
 		if (!action) return; // closed
@@ -343,24 +393,8 @@ export async function showPackedPanel(ctx: ExtensionCommandContext, natives: Nat
 			continue; // a successful install already reloaded; a no-op returns here
 		}
 
-		if (action.type === "config") {
-			await showResourceConfig(ctx, natives, action.row?.name);
-			continue; // showResourceConfig already handles its own reload prompt
-		}
-
-		const row = action.row;
-		if (!row) continue;
-
-		if (action.type === "disable") {
-			const outcome = await applyDisableExtensions(row, natives, ctx);
-			if (outcome === "changed") return;
-			if (outcome === "deferred") await refreshRows();
-			continue;
-		}
-
-		const outcome = await applyPackageChoice(action.type === "update" ? `Update to ${row.latest}` : "Remove", row, natives, ctx);
-		if (outcome === "changed") return; // ctx.reload() already replaced the session
-		if (outcome === "deferred") await refreshRows();
+		await showResourceConfig(ctx, natives, action.row?.name);
+		// showResourceConfig already handles its own reload prompt
 	}
 }
 
@@ -372,11 +406,16 @@ function renderPanel(ctx: ExtensionCommandContext, natives: Natives, initialRows
 		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.
+		// Set only while U's batch update is running -- blocks input for the
+		// whole batch (the installer owns input until it finishes), same as
+		// before. The list stays fully visible throughout. Which specific row
+		// currently shows a spinner vs. a settled ✓/✗ is settled's own job
+		// (below), not this -- a just-finished row must show its glyph
+		// immediately, even for the instant before the next row's "start"
+		// event reassigns this to the next name.
 		let updatingRowName: string | undefined;
-		const updatingBar = new ProgressBar({ value: 0, max: 1, width: 10, style: (s) => theme.fg("accent", s) });
+		const spinner = new Spinner();
+		const settled = new Map<string, { ok: boolean; tail: string | undefined }>();
 
 		const maxVisible = 20;
 
@@ -385,22 +424,78 @@ function renderPanel(ctx: ExtensionCommandContext, natives: Natives, initialRows
 			selectedIndex = 0;
 		}
 
+		// A y/n decision rendered as this SAME overlay's own content (via a real
+		// Malevich Dialog, dispatched by literal key press) instead of
+		// ctx.ui.confirm's separate native dialog -- confirmed live as a real
+		// user complaint: ctx.ui.confirm opens as its own distinct overlay on
+		// top of this one ("a new window"), arrow-select only, no y/n keys.
+		let pendingDialog: Dialog | undefined;
+
+		function confirmInline(title: string, message: string): Promise<boolean> {
+			return new Promise((resolve) => {
+				const settle = (value: boolean) => {
+					pendingDialog = undefined;
+					tui.requestRender();
+					resolve(value);
+				};
+				pendingDialog = new Dialog({
+					title,
+					body: message,
+					actions: [
+						{ label: "Yes", key: "y", action: () => settle(true) },
+						{ label: "No", key: "n", action: () => settle(false) },
+					],
+					theme: dialogTheme(theme),
+				});
+				tui.requestRender();
+			});
+		}
+
+		// Every confirm() call inside a mutation flow driven from this open
+		// overlay (approvePackageOperation's own approval, confirmReload's
+		// separate reload gate) routes through confirmInline instead of the
+		// real ctx.ui.confirm -- notify/reload/etc. stay the genuine ctx.
+		const inlineCtx: ExtensionCommandContext = { ...ctx, hasUI: true, ui: { ...ctx.ui, confirm: confirmInline } };
+
+		/** u/x/d and the Enter action menu all funnel through here: approval and
+		 * reload confirms render inline (via inlineCtx/confirmInline) on this
+		 * same overlay, never closing it first the way done()-dispatch used to. */
+		async function runRowActionInline(action: { type: "update" | "remove" | "disable"; row: Row }): Promise<void> {
+			updatingRowName = action.row.name;
+			tui.requestRender();
+			const outcome = action.type === "disable"
+				? await applyDisableExtensions(action.row, natives, inlineCtx)
+				: await applyPackageChoice(action.type === "update" ? `Update to ${action.row.latest}` : "Remove", action.row, natives, inlineCtx);
+			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();
+		}
+
 		/** 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. */
+		 * closing this panel or replacing the list: each row's own settled
+		 * outcome (spinner while in flight, then a real ✓/✗ plus a bounded tail
+		 * of its actual captured output) appears inline next to that row, via
+		 * updatingRowName/spinner/settled, 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);
+			settled.clear();
+			const outcome = await approveAndRunUpdateAll(outdated, natives, inlineCtx, (batch, approved) => {
+				spinner.start(() => tui.requestRender());
 				return performUpdateAll(batch, natives, approved, (event) => {
 					updatingRowName = event.row.name;
-					if (event.phase === "done") updatingBar.setValue(event.index + 1);
+					if (event.phase === "done" && event.result) {
+						settled.set(event.row.name, { ok: event.result.ok, tail: logTail(event.result.output) });
+					}
 					tui.requestRender();
-				});
+				}).finally(() => spinner.stop());
 			});
 			updatingRowName = undefined;
 			if (outcome === "changed") {
@@ -410,6 +505,7 @@ function renderPanel(ctx: ExtensionCommandContext, natives: Natives, initialRows
 			const reloaded = await loadRows(natives);
 			if (reloaded.error) ctx.ui.notify(`refresh failed: ${reloaded.error}`, "error");
 			else rows = reloaded.rows;
+			settled.clear(); // fresh state for a subsequent batch
 			applyFilter();
 			tui.requestRender();
 		}
@@ -485,10 +581,16 @@ function renderPanel(ctx: ExtensionCommandContext, natives: Natives, initialRows
 						const selected = i === selectedIndex;
 						const cursor = selected ? theme.fg("accent", "❯ ") : "  ";
 						const name = selected ? theme.bold(row.name) : row.name;
-						const isUpdating = updatingRowName === 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 = settled.get(row.name);
+						const isUpdating = !rowSettled && updatingRowName === row.name;
 						const status = isUpdating
-							? theme.fg("accent", `${updatingBar.format(10)} updating…`)
-							: row.hasUpdate ? theme.fg("warning", `↑${row.latest}`) : "";
+							? theme.fg("accent", `${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 };
 					}),
 				);
@@ -525,11 +627,17 @@ function renderPanel(ctx: ExtensionCommandContext, natives: Natives, initialRows
 		return {
 			render(width: number): string[] {
 				envelope.setTitle(panelTitle());
+				envelope.setContent(pendingDialog ?? body);
 				return envelope.render(width);
 			},
 			invalidate: () => envelope.invalidate(),
 			handleInput(data: string) {
-				if (updatingRowName) return; // the installer owns input until it finishes
+				if (pendingDialog) {
+					pendingDialog.handleInput(data);
+					tui.requestRender();
+					return;
+				}
+				if (updatingRowName) return; // the mutation/installer owns input until it finishes
 
 				if (searchActive) {
 					if (data === "\x1b") {
@@ -574,17 +682,17 @@ function renderPanel(ctx: ExtensionCommandContext, natives: Natives, initialRows
 						return;
 					case "u": {
 						const row = filtered[selectedIndex];
-						if (row?.hasUpdate) done({ type: "update", row });
+						if (row?.hasUpdate) void runRowActionInline({ type: "update", row });
 						return;
 					}
 					case "x": {
 						const row = filtered[selectedIndex];
-						if (row) done({ type: "remove", row });
+						if (row) void runRowActionInline({ type: "remove", row });
 						return;
 					}
 					case "d": {
 						const row = filtered[selectedIndex];
-						if (row) done({ type: "disable", row });
+						if (row) void runRowActionInline({ type: "disable", row });
 						return;
 					}
 					case "c": {
@@ -597,9 +705,7 @@ function renderPanel(ctx: ExtensionCommandContext, natives: Natives, initialRows
 						if (!row) return;
 						void (async () => {
 							const choice = await showActionMenu(ctx, row);
-							if (choice === "update") done({ type: "update", row });
-							else if (choice === "remove") done({ type: "remove", row });
-							else if (choice === "disable") done({ type: "disable", row });
+							if (choice === "update" || choice === "remove" || choice === "disable") void runRowActionInline({ type: choice, row });
 							else if (choice === "config") done({ type: "config", row });
 						})();
 						return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danypops/pi-packed",
-  "version": "0.14.0",
+  "version": "0.16.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.8.0"
+    "malevich-tui-components": "^0.11.0"
   },
   "peerDependencies": {
     "@earendil-works/pi-coding-agent": "*",