pi-extmgr 0.1.28 → 0.2.0

package/src/ui/unified.ts

@@ -2,21 +2,26 @@
  * Unified extension manager UI
  * Displays local extensions and installed packages in one view
  */
+import { homedir } from "node:os";
+import { relative } from "node:path";
 import {
   DynamicBorder,
   type ExtensionAPI,
   type ExtensionCommandContext,
-  getSettingsListTheme,
   type Theme,
 } from "@mariozechner/pi-coding-agent";
 import {
   Container,
+  type Focusable,
+  fuzzyMatch,
+  getKeybindings,
+  Input,
   Key,
   matchesKey,
-  type SettingItem,
-  SettingsList,
   Spacer,
   Text,
+  truncateToWidth,
+  wrapTextWithAnsi,
 } from "@mariozechner/pi-tui";
 import { UI } from "../constants.js";
 import {
@@ -40,26 +45,20 @@ import {
 } from "../types/index.js";
 import { getKnownUpdates, promptAutoUpdateWizard } from "../utils/auto-update.js";
 import { parseChoiceByLabel } from "../utils/command.js";
-import { dynamicTruncate, formatBytes, formatEntry as formatExtEntry } from "../utils/format.js";
+import { formatBytes, formatEntry as formatExtEntry } from "../utils/format.js";
 import { logExtensionDelete, logExtensionToggle } from "../utils/history.js";
 import { hasCustomUI, runCustomUI } from "../utils/mode.js";
 import { notify } from "../utils/notify.js";
+import { normalizePathIdentity } from "../utils/path-identity.js";
 import { getPackageSourceKind, normalizePackageIdentity } from "../utils/package-source.js";
-import { getSettingsListSelectedIndex } from "../utils/settings-list.js";
 import { updateExtmgrStatus } from "../utils/status.js";
-import { confirmReload } from "../utils/ui-helpers.js";
+import { confirmReload, formatListOutput } from "../utils/ui-helpers.js";
 import { runTaskWithLoader } from "./async-task.js";
 import { buildFooterShortcuts, buildFooterState, getPendingToggleChangeCount } from "./footer.js";
 import { showHelp } from "./help.js";
 import { configurePackageExtensions } from "./package-config.js";
 import { showRemote } from "./remote.js";
-import {
-  formatSize,
-  getChangeMarker,
-  getPackageIcon,
-  getScopeIcon,
-  getStatusIcon,
-} from "./theme.js";
+import { getChangeMarker, getPackageIcon, getScopeIcon, getStatusIcon } from "./theme.js";
 
 async function showInteractiveFallback(
   ctx: ExtensionCommandContext,
@@ -156,206 +155,108 @@ async function showInteractiveOnce(
   // Staged changes tracking for local extensions.
   const staged = new Map<string, State>();
   const byId = new Map(items.map((item) => [item.id, item]));
+  let managerState: UnifiedManagerViewState | undefined;
 
-  const result = await runCustomUI(
-    ctx,
-    "The unified extensions manager",
-    () =>
-      ctx.ui.custom<UnifiedAction>((tui, theme, _keybindings, done) => {
-        const container = new Container();
-
-        const titleText = new Text("", 2, 0);
-        const subtitleText = new Text("", 2, 0);
-        const quickText = new Text("", 2, 0);
-        const footerState = buildFooterState(items);
-        const footerText = new Text("", 2, 0);
-
-        // Header
-        container.addChild(new DynamicBorder((s: string) => theme.fg("accent", s)));
-        container.addChild(titleText);
-        container.addChild(subtitleText);
-        container.addChild(quickText);
-        container.addChild(new Spacer(1));
-
-        // Build settings items
-        const settingsItems = buildSettingsItems(items, staged, theme);
-        const syncThemedContent = (): void => {
-          titleText.setText(theme.fg("accent", theme.bold("Extensions Manager")));
-          subtitleText.setText(
-            theme.fg(
-              "muted",
-              `${items.length} item${items.length === 1 ? "" : "s"} • Space/Enter toggle local • Enter/A actions • c configure pkg extensions • u update pkg • x remove selected`
-            )
-          );
-          quickText.setText(
-            theme.fg(
-              "dim",
-              "Quick: i Install | f Search | U Update all | t Auto-update | p Palette"
-            )
-          );
-          footerText.setText(theme.fg("dim", buildFooterShortcuts(footerState)));
-
-          for (const settingsItem of settingsItems) {
-            const item = byId.get(settingsItem.id);
-            if (!item) continue;
-
-            if (item.type === "local") {
-              const currentState = staged.get(item.id) ?? item.state;
-              const changed = currentState !== item.originalState;
-              settingsItem.label = formatUnifiedItemLabel(item, currentState, theme, changed);
-            } else {
-              settingsItem.label = formatUnifiedItemLabel(item, "enabled", theme, false);
-            }
-          }
-        };
-        syncThemedContent();
-
-        const settingsList = new SettingsList(
-          settingsItems,
-          Math.min(items.length + 2, UI.maxListHeight),
-          getSettingsListTheme(),
-          (id: string, newValue: string) => {
-            const item = byId.get(id);
-            if (!item || item.type !== "local") return;
-
-            const state = newValue as State;
-            if (state === item.originalState) {
-              staged.delete(id);
-            } else {
-              staged.set(id, state);
-            }
-
-            const settingsItem = settingsItems.find((x) => x.id === id);
-            if (settingsItem) {
-              const changed = state !== item.originalState;
-              settingsItem.label = formatUnifiedItemLabel(item, state, theme, changed);
-            }
-            tui.requestRender();
-          },
-          () => done({ type: "cancel" })
-        );
-
-        container.addChild(settingsList);
-        container.addChild(new Spacer(1));
-
-        // Footer with keyboard shortcuts
-        container.addChild(footerText);
-        container.addChild(new DynamicBorder((s: string) => theme.fg("accent", s)));
-
-        return {
-          render(width: number) {
-            return container.render(width);
-          },
-          invalidate() {
-            container.invalidate();
-            syncThemedContent();
-          },
-          handleInput(data: string) {
-            const selIdx = getSettingsListSelectedIndex(settingsList) ?? 0;
-            const selectedId = settingsItems[selIdx]?.id ?? settingsItems[0]?.id;
-            const selectedItem = selectedId ? byId.get(selectedId) : undefined;
-
-            if (matchesKey(data, Key.ctrl("s")) || data === "s" || data === "S") {
-              done({ type: "apply" });
-              return;
-            }
-
-            // Enter on a package opens its action menu (fewer clicks)
-            if (
-              (data === "\r" || data === "\n") &&
-              selectedId &&
-              selectedItem?.type === "package"
-            ) {
-              done({ type: "action", itemId: selectedId, action: "menu" });
-              return;
-            }
-
-            if (data === "a" || data === "A") {
-              if (selectedId) {
-                done({ type: "action", itemId: selectedId, action: "menu" });
-              }
-              return;
-            }
-
-            // Quick actions (global)
-            if (data === "i") {
-              done({ type: "quick", action: "install" });
-              return;
-            }
-            if (data === "f") {
-              done({ type: "quick", action: "search" });
-              return;
-            }
-            if (data === "U") {
-              done({ type: "quick", action: "update-all" });
-              return;
-            }
-            if (data === "t" || data === "T") {
-              done({ type: "quick", action: "auto-update" });
-              return;
-            }
-
-            // Fast actions on selected row
-            if (selectedId && selectedItem?.type === "package") {
-              if (data === "u") {
-                done({ type: "action", itemId: selectedId, action: "update" });
-                return;
-              }
-              if (data === "x" || data === "X") {
-                done({ type: "action", itemId: selectedId, action: "remove" });
-                return;
-              }
-              if (data === "v" || data === "V") {
-                done({ type: "action", itemId: selectedId, action: "details" });
-                return;
-              }
-              if (data === "c" || data === "C") {
-                done({ type: "action", itemId: selectedId, action: "configure" });
-                return;
-              }
-            }
+  while (true) {
+    let nextManagerState = managerState;
 
-            if (selectedId && selectedItem?.type === "local") {
-              if (data === "x" || data === "X") {
-                done({ type: "action", itemId: selectedId, action: "remove" });
-                return;
+    const result = await runCustomUI(
+      ctx,
+      "The unified extensions manager",
+      () =>
+        ctx.ui.custom<UnifiedAction>((tui, theme, _keybindings, done) => {
+          const container = new Container();
+
+          const titleText = new Text("", 2, 0);
+          const statsText = new Text("", 2, 0);
+          const footerText = new Text("", 2, 0);
+          let browser!: UnifiedManagerBrowser;
+          const complete = (action: UnifiedAction): void => {
+            nextManagerState = browser.getViewState();
+            done(action);
+          };
+          browser = new UnifiedManagerBrowser(
+            items,
+            staged,
+            theme,
+            ctx.cwd,
+            Math.max(4, Math.min(UI.maxListHeight, tui.terminal.rows - 12)),
+            complete,
+            managerState
+          );
+          let lastWidth = tui.terminal.columns;
+
+          container.addChild(new DynamicBorder((s: string) => theme.fg("accent", s)));
+          container.addChild(titleText);
+          container.addChild(statsText);
+          container.addChild(new Spacer(1));
+          container.addChild(browser);
+          container.addChild(new Spacer(1));
+          container.addChild(footerText);
+          container.addChild(new DynamicBorder((s: string) => theme.fg("accent", s)));
+
+          const syncThemedContent = (width = lastWidth): void => {
+            lastWidth = width;
+            titleText.setText(theme.fg("accent", theme.bold("Extensions Manager")));
+            statsText.setText(
+              buildManagerSummary(items, staged, byId, theme, {
+                visibleItems: browser.getVisibleItems(),
+                filter: browser.getFilter(),
+                searchQuery: browser.getSearchQuery(),
+              })
+            );
+            footerText.setText(
+              theme.fg(
+                "dim",
+                buildFooterShortcuts(buildFooterState(staged, byId, browser.getSelectedItem()))
+              )
+            );
+          };
+
+          syncThemedContent();
+
+          let focused = false;
+
+          return {
+            get focused() {
+              return focused;
+            },
+            set focused(value: boolean) {
+              focused = value;
+              browser.focused = value;
+            },
+            render(width: number) {
+              syncThemedContent(width);
+              return container.render(width);
+            },
+            invalidate() {
+              container.invalidate();
+              browser.invalidate();
+              syncThemedContent(lastWidth);
+            },
+            handleInput(data: string) {
+              if (browser.handleManagerInput(data)) {
+                tui.requestRender();
               }
-            }
-
-            if (data === "r" || data === "R") {
-              done({ type: "remote" });
-              return;
-            }
-            if (data === "?" || data === "h" || data === "H") {
-              done({ type: "help" });
-              return;
-            }
-            if (data === "m" || data === "M" || data === "p" || data === "P") {
-              done({ type: "menu" });
-              return;
-            }
-            settingsList.handleInput?.(data);
-            tui.requestRender();
-          },
-        };
-      }),
-    "Showing read-only local and installed package lists instead."
-  );
-
-  if (!result) {
-    await showInteractiveFallback(ctx, pi);
-    return true;
-  }
+            },
+          };
+        }),
+      "Showing read-only local and installed package lists instead."
+    );
 
-  return await handleUnifiedAction(result, items, staged, byId, ctx, pi);
-}
+    if (!result) {
+      await showInteractiveFallback(ctx, pi);
+      return true;
+    }
 
-function normalizePathForDuplicateCheck(value: string): string {
-  const normalized = value.replace(/\\/g, "/");
-  const looksWindowsPath =
-    /^[a-zA-Z]:\//.test(normalized) || normalized.startsWith("//") || value.includes("\\");
+    const outcome = await handleUnifiedAction(result, items, staged, byId, ctx, pi);
+    if (outcome === "resume") {
+      managerState = nextManagerState;
+      continue;
+    }
 
-  return looksWindowsPath ? normalized.toLowerCase() : normalized;
+    return outcome;
+  }
 }
 
 export function buildUnifiedItems(
@@ -368,7 +269,8 @@ export function buildUnifiedItems(
 
   // Add local extensions
   for (const entry of localEntries) {
-    localPaths.add(normalizePathForDuplicateCheck(entry.activePath));
+    const currentPath = entry.state === "disabled" ? entry.disabledPath : entry.activePath;
+    localPaths.add(normalizePathIdentity(currentPath));
     items.push({
       type: "local",
       id: entry.id,
@@ -383,10 +285,8 @@ export function buildUnifiedItems(
   }
 
   for (const pkg of installedPackages) {
-    const pkgSourceNormalized = normalizePathForDuplicateCheck(pkg.source);
-    const pkgResolvedNormalized = pkg.resolvedPath
-      ? normalizePathForDuplicateCheck(pkg.resolvedPath)
-      : "";
+    const pkgSourceNormalized = normalizePathIdentity(pkg.source);
+    const pkgResolvedNormalized = pkg.resolvedPath ? normalizePathIdentity(pkg.resolvedPath) : "";
 
     let isDuplicate = false;
     for (const localPath of localPaths) {
@@ -407,6 +307,7 @@ export function buildUnifiedItems(
       displayName: pkg.name,
       scope: pkg.scope,
       source: pkg.source,
+      resolvedPath: pkg.resolvedPath,
       version: pkg.version,
       description: pkg.description,
       size: pkg.size,
@@ -429,45 +330,87 @@ export function buildUnifiedItems(
   return items;
 }
 
-function buildSettingsItems(
+function buildManagerSummary(
   items: UnifiedItem[],
   staged: Map<string, State>,
-  theme: Theme
-): SettingItem[] {
-  return items.map((item) => {
-    if (item.type === "local") {
-      const currentState = staged.get(item.id) ?? item.state;
-      const changed = currentState !== item.originalState;
-      return {
-        id: item.id,
-        label: formatUnifiedItemLabel(item, currentState, theme, changed),
-        currentValue: currentState,
-        values: ["enabled", "disabled"],
-      };
-    }
+  byId: Map<string, UnifiedItem>,
+  theme: Theme,
+  options?: {
+    visibleItems?: readonly UnifiedItem[];
+    filter?: UnifiedFilter;
+    searchQuery?: string;
+  }
+): string {
+  const summaryItems = options?.visibleItems ?? items;
+  const filtered =
+    Boolean(options?.searchQuery) ||
+    options?.filter === "local" ||
+    options?.filter === "packages" ||
+    options?.filter === "updates" ||
+    options?.filter === "disabled";
+  const localCount = summaryItems.filter((item) => item.type === "local").length;
+  const packageCount = summaryItems.length - localCount;
+  const updateCount = summaryItems.filter(
+    (item) => item.type === "package" && item.updateAvailable
+  ).length;
+  const pendingCount = getPendingToggleChangeCount(staged, byId);
+  const parts = [
+    filtered
+      ? theme.fg("accent", `showing ${summaryItems.length} of ${items.length}`)
+      : theme.fg("muted", `${items.length} item${items.length === 1 ? "" : "s"}`),
+    theme.fg("muted", `${localCount} local`),
+  ];
+
+  if (packageCount > 0) {
+    parts.push(theme.fg("muted", `${packageCount} package${packageCount === 1 ? "" : "s"}`));
+  }
 
-    return {
-      id: item.id,
-      label: formatUnifiedItemLabel(item, "enabled", theme, false),
-      currentValue: "enabled",
-      values: ["enabled"],
-    };
-  });
+  if (updateCount > 0) {
+    parts.push(theme.fg("warning", `${updateCount} update${updateCount === 1 ? "" : "s"}`));
+  }
+
+  if (pendingCount > 0) {
+    parts.push(theme.fg("warning", `${pendingCount} unsaved`));
+  }
+
+  return parts.join(" • ");
+}
+
+type UnifiedFilter = "all" | "local" | "packages" | "updates" | "disabled";
+
+interface UnifiedManagerViewState {
+  filter: UnifiedFilter;
+  searchQuery: string;
+  selectedItemId?: string;
+}
+
+const UNIFIED_FILTER_OPTIONS: Array<{ id: UnifiedFilter; key: string; label: string }> = [
+  { id: "all", key: "1", label: "All" },
+  { id: "local", key: "2", label: "Local" },
+  { id: "packages", key: "3", label: "Packages" },
+  { id: "updates", key: "4", label: "Updates" },
+  { id: "disabled", key: "5", label: "Disabled" },
+];
+
+function getCurrentUnifiedItemState(
+  item: UnifiedItem,
+  staged: Map<string, State>
+): State | undefined {
+  return item.type === "local" ? (staged.get(item.id) ?? item.state) : undefined;
 }
 
 function formatUnifiedItemLabel(
   item: UnifiedItem,
-  state: State,
+  state: State | undefined,
   theme: Theme,
   changed = false
 ): string {
   if (item.type === "local") {
-    const statusIcon = getStatusIcon(theme, state);
+    const statusIcon = getStatusIcon(theme, state ?? item.state);
     const scopeIcon = getScopeIcon(theme, item.scope);
     const changeMarker = getChangeMarker(theme, changed);
     const name = theme.bold(item.displayName);
-    const summary = theme.fg("dim", item.summary);
-    return `${statusIcon} [${scopeIcon}] ${name} - ${summary}${changeMarker}`;
+    return `${statusIcon} [${scopeIcon}] ${name}${changeMarker}`;
   }
 
   const sourceKind = getPackageSourceKind(item.source);
@@ -478,30 +421,631 @@ function formatUnifiedItemLabel(
   const scopeIcon = getScopeIcon(theme, item.scope);
   const name = theme.bold(item.displayName);
   const version = item.version ? theme.fg("dim", `@${item.version}`) : "";
+  const size = item.size !== undefined ? theme.fg("dim", ` • ${formatBytes(item.size)}`) : "";
   const updateBadge = item.updateAvailable ? ` ${theme.fg("warning", "[update]")}` : "";
 
-  // Build info parts
-  const infoParts: string[] = [];
-
-  // Show description if available
-  // Reserved space: icon (2) + scope (3) + name (~25) + version (~10) + separator (3) = ~43 chars
-  if (item.description) {
-    infoParts.push(dynamicTruncate(item.description, 43));
-  } else if (sourceKind === "npm") {
-    infoParts.push("npm");
-  } else if (sourceKind === "git") {
-    infoParts.push("git");
-  } else {
-    infoParts.push("local");
+  return `${pkgIcon} [${scopeIcon}] ${name}${version}${size}${updateBadge}`;
+}
+
+function getLocalItemCurrentPath(item: LocalUnifiedItem, state?: State): string {
+  return (state ?? item.state) === "enabled" ? item.activePath : item.disabledPath;
+}
+
+function formatUnifiedItemDescription(
+  item: UnifiedItem,
+  state: State | undefined,
+  changed: boolean,
+  cwd: string
+): string {
+  if (item.type === "local") {
+    const details = [
+      item.summary,
+      "local extension",
+      item.scope,
+      changed ? `staged → ${state ?? item.state}` : (state ?? item.state),
+      compactDisplayPath(getLocalItemCurrentPath(item, state), cwd),
+    ];
+
+    return details.filter(Boolean).join(" • ");
+  }
+
+  const sourceKind = getPackageSourceKind(item.source);
+  const source = sourceKind === "local" ? compactDisplayPath(item.source, cwd) : item.source;
+  const details = [
+    item.description || "No description",
+    `${sourceKind === "unknown" ? "package" : `${sourceKind} package`}`,
+    item.scope,
+    source,
+    item.updateAvailable ? "update available" : undefined,
+    item.size !== undefined ? formatBytes(item.size) : undefined,
+  ];
+
+  return details.filter(Boolean).join(" • ");
+}
+
+function compactDisplayPath(filePath: string, cwd: string): string {
+  const normalizedPath = filePath.replace(/\\/g, "/");
+  const normalizedHome = homedir().replace(/\\/g, "/");
+
+  if (normalizedPath === normalizedHome) {
+    return "~";
+  }
+
+  if (normalizedPath.startsWith(`${normalizedHome}/`)) {
+    return `~/${normalizedPath.slice(normalizedHome.length + 1)}`;
+  }
+
+  const relativePath = relative(cwd, filePath).replace(/\\/g, "/");
+  if (
+    relativePath &&
+    relativePath !== ".." &&
+    !relativePath.startsWith("../") &&
+    !isAbsoluteDisplayPath(relativePath)
+  ) {
+    return `./${relativePath}`;
+  }
+
+  return normalizedPath;
+}
+
+function isAbsoluteDisplayPath(value: string): boolean {
+  return /^([a-zA-Z]:\/|\/|\\\\)/.test(value);
+}
+
+function matchesUnifiedFilter(
+  item: UnifiedItem,
+  filter: UnifiedFilter,
+  staged: Map<string, State>
+): boolean {
+  switch (filter) {
+    case "all":
+      return true;
+    case "local":
+      return item.type === "local";
+    case "packages":
+      return item.type === "package";
+    case "updates":
+      return item.type === "package" && Boolean(item.updateAvailable);
+    case "disabled":
+      return item.type === "local" && getCurrentUnifiedItemState(item, staged) === "disabled";
+  }
+}
+
+function getUnifiedItemSearchFields(
+  item: UnifiedItem,
+  staged: Map<string, State>,
+  cwd: string
+): { primary: string[]; secondary: string[] } {
+  if (item.type === "local") {
+    const state = getCurrentUnifiedItemState(item, staged) ?? item.state;
+    return {
+      primary: [item.displayName, compactDisplayPath(getLocalItemCurrentPath(item, state), cwd)],
+      secondary: [item.summary],
+    };
+  }
+
+  const source =
+    getPackageSourceKind(item.source) === "local"
+      ? compactDisplayPath(item.source, cwd)
+      : item.source;
+  return {
+    primary: [item.displayName, source],
+    secondary: [item.version ?? "", item.description ?? ""],
+  };
+}
+
+function scoreUnifiedItemSearchMatch(
+  item: UnifiedItem,
+  query: string,
+  staged: Map<string, State>,
+  cwd: string
+): number | undefined {
+  const tokens = query
+    .trim()
+    .toLowerCase()
+    .split(/\s+/)
+    .filter((token) => token.length > 0);
+  if (tokens.length === 0) {
+    return 0;
+  }
+
+  const fields = getUnifiedItemSearchFields(item, staged, cwd);
+  const primary = fields.primary
+    .map((value) => value.trim().toLowerCase())
+    .filter((value) => value.length > 0);
+  const secondary = fields.secondary
+    .map((value) => value.trim().toLowerCase())
+    .filter((value) => value.length > 0);
+
+  let totalScore = 0;
+
+  for (const token of tokens) {
+    const primarySubstringScore = primary.reduce<number | undefined>((best, field) => {
+      const index = field.indexOf(token);
+      if (index < 0) {
+        return best;
+      }
+      return best === undefined ? index : Math.min(best, index);
+    }, undefined);
+    if (primarySubstringScore !== undefined) {
+      totalScore += primarySubstringScore;
+      continue;
+    }
+
+    const secondarySubstringScore = secondary.reduce<number | undefined>((best, field) => {
+      const index = field.indexOf(token);
+      if (index < 0) {
+        return best;
+      }
+      const score = 100 + index;
+      return best === undefined ? score : Math.min(best, score);
+    }, undefined);
+    if (secondarySubstringScore !== undefined) {
+      totalScore += secondarySubstringScore;
+      continue;
+    }
+
+    const primaryFuzzyScore = primary.reduce<number | undefined>((best, field) => {
+      const match = fuzzyMatch(token, field);
+      if (!match.matches) {
+        return best;
+      }
+      const score = 200 + match.score;
+      return best === undefined ? score : Math.min(best, score);
+    }, undefined);
+    if (primaryFuzzyScore !== undefined) {
+      totalScore += primaryFuzzyScore;
+      continue;
+    }
+
+    return undefined;
+  }
+
+  return totalScore;
+}
+
+function searchUnifiedItems(
+  items: UnifiedItem[],
+  query: string,
+  staged: Map<string, State>,
+  cwd: string
+): UnifiedItem[] {
+  const matches = items
+    .map((item, index) => ({
+      item,
+      index,
+      score: scoreUnifiedItemSearchMatch(item, query, staged, cwd),
+    }))
+    .filter(
+      (match): match is { item: UnifiedItem; index: number; score: number } =>
+        match.score !== undefined
+    );
+
+  matches.sort((a, b) => a.score - b.score || a.index - b.index);
+  return matches.map((match) => match.item);
+}
+
+class UnifiedManagerBrowser implements Focusable {
+  private readonly searchInput = new Input();
+  private readonly filteredItems: UnifiedItem[] = [];
+  private selectedIndex = 0;
+  private filter: UnifiedFilter = "all";
+  private searchActive = false;
+  private _focused = false;
+
+  constructor(
+    private readonly items: UnifiedItem[],
+    private readonly staged: Map<string, State>,
+    private readonly theme: Theme,
+    private readonly cwd: string,
+    private readonly maxVisibleItems: number,
+    private readonly onAction: (action: UnifiedAction) => void,
+    initialState?: UnifiedManagerViewState
+  ) {
+    if (initialState) {
+      this.filter = initialState.filter;
+      this.searchInput.setValue(initialState.searchQuery);
+      this.refreshVisibleItems(initialState.selectedItemId);
+      return;
+    }
+
+    this.refreshVisibleItems();
+  }
+
+  get focused(): boolean {
+    return this._focused;
+  }
+
+  set focused(value: boolean) {
+    this._focused = value;
+    this.searchInput.focused = value && this.searchActive;
+  }
+
+  getSelectedItem(): UnifiedItem | undefined {
+    return this.filteredItems[this.selectedIndex];
+  }
+
+  getVisibleItems(): readonly UnifiedItem[] {
+    return this.filteredItems;
+  }
+
+  getFilter(): UnifiedFilter {
+    return this.filter;
+  }
+
+  getSearchQuery(): string {
+    return this.searchInput.getValue().trim();
+  }
+
+  getViewState(): UnifiedManagerViewState {
+    const selectedItemId = this.getSelectedItem()?.id;
+    return {
+      filter: this.filter,
+      searchQuery: this.getSearchQuery(),
+      ...(selectedItemId ? { selectedItemId } : {}),
+    };
+  }
+
+  invalidate(): void {
+    this.searchInput.invalidate();
+  }
+
+  handleInput(data: string): void {
+    this.handleManagerInput(data);
+  }
+
+  handleManagerInput(data: string): boolean {
+    const kb = getKeybindings();
+
+    if (this.searchActive) {
+      if (matchesKey(data, Key.enter)) {
+        this.searchActive = false;
+        this.searchInput.focused = false;
+        return true;
+      }
+
+      if (matchesKey(data, Key.escape)) {
+        this.searchInput.setValue("");
+        this.searchActive = false;
+        this.searchInput.focused = false;
+        this.refreshVisibleItems();
+        return true;
+      }
+
+      this.searchInput.handleInput(data);
+      this.refreshVisibleItems();
+      return true;
+    }
+
+    if (data === "/" || matchesKey(data, Key.ctrl("f"))) {
+      this.searchActive = true;
+      this.searchInput.focused = this._focused;
+      return true;
+    }
+
+    if (matchesKey(data, Key.escape) && this.getSearchQuery()) {
+      this.searchInput.setValue("");
+      this.refreshVisibleItems();
+      return true;
+    }
+
+    if (matchesKey(data, Key.shift("tab"))) {
+      this.cycleFilter(-1);
+      return true;
+    }
+
+    if (matchesKey(data, Key.tab)) {
+      this.cycleFilter(1);
+      return true;
+    }
+
+    const directFilter = UNIFIED_FILTER_OPTIONS.find((option) => option.key === data)?.id;
+    if (directFilter) {
+      this.setFilter(directFilter);
+      return true;
+    }
+
+    if (kb.matches(data, "tui.select.up")) {
+      this.moveSelection(-1);
+      return true;
+    }
+
+    if (kb.matches(data, "tui.select.down")) {
+      this.moveSelection(1);
+      return true;
+    }
+
+    if (kb.matches(data, "tui.select.pageUp")) {
+      this.moveSelection(-Math.max(1, this.maxVisibleItems - 1));
+      return true;
+    }
+
+    if (kb.matches(data, "tui.select.pageDown")) {
+      this.moveSelection(Math.max(1, this.maxVisibleItems - 1));
+      return true;
+    }
+
+    if (matchesKey(data, Key.home)) {
+      this.selectedIndex = 0;
+      return true;
+    }
+
+    if (matchesKey(data, Key.end)) {
+      this.selectedIndex = Math.max(0, this.filteredItems.length - 1);
+      return true;
+    }
+
+    const selectedItem = this.getSelectedItem();
+    const selectedId = selectedItem?.id;
+
+    if (matchesKey(data, Key.ctrl("s")) || data === "s" || data === "S") {
+      this.onAction({ type: "apply" });
+      return true;
+    }
+
+    if ((matchesKey(data, Key.space) || data === " ") && selectedItem?.type === "local") {
+      const currentState =
+        getCurrentUnifiedItemState(selectedItem, this.staged) ?? selectedItem.state;
+      const nextState: State = currentState === "enabled" ? "disabled" : "enabled";
+      if (nextState === selectedItem.originalState) {
+        this.staged.delete(selectedItem.id);
+      } else {
+        this.staged.set(selectedItem.id, nextState);
+      }
+      this.refreshVisibleItems(selectedItem.id);
+      return true;
+    }
+
+    if (matchesKey(data, Key.enter) && selectedId) {
+      this.onAction({ type: "action", itemId: selectedId, action: "menu" });
+      return true;
+    }
+
+    if (data === "a" || data === "A") {
+      if (selectedId) {
+        this.onAction({ type: "action", itemId: selectedId, action: "menu" });
+      }
+      return true;
+    }
+
+    if (data === "i") {
+      this.onAction({ type: "quick", action: "install" });
+      return true;
+    }
+
+    if (data === "f") {
+      this.onAction({ type: "quick", action: "search" });
+      return true;
+    }
+
+    if (data === "U") {
+      this.onAction({ type: "quick", action: "update-all" });
+      return true;
+    }
+
+    if (data === "t" || data === "T") {
+      this.onAction({ type: "quick", action: "auto-update" });
+      return true;
+    }
+
+    if (selectedId && (data === "v" || data === "V")) {
+      this.onAction({ type: "action", itemId: selectedId, action: "details" });
+      return true;
+    }
+
+    if (selectedId && selectedItem?.type === "package") {
+      if (data === "u") {
+        this.onAction({ type: "action", itemId: selectedId, action: "update" });
+        return true;
+      }
+      if (data === "x" || data === "X") {
+        this.onAction({ type: "action", itemId: selectedId, action: "remove" });
+        return true;
+      }
+      if (data === "c" || data === "C") {
+        this.onAction({ type: "action", itemId: selectedId, action: "configure" });
+        return true;
+      }
+    }
+
+    if (selectedId && selectedItem?.type === "local" && (data === "x" || data === "X")) {
+      this.onAction({ type: "action", itemId: selectedId, action: "remove" });
+      return true;
+    }
+
+    if (data === "r" || data === "R") {
+      this.onAction({ type: "remote" });
+      return true;
+    }
+
+    if (data === "?" || data === "h" || data === "H") {
+      this.onAction({ type: "help" });
+      return true;
+    }
+
+    if (data === "m" || data === "M" || data === "p" || data === "P") {
+      this.onAction({ type: "menu" });
+      return true;
+    }
+
+    if (matchesKey(data, Key.escape)) {
+      this.onAction({ type: "cancel" });
+      return true;
+    }
+
+    return false;
+  }
+
+  render(width: number): string[] {
+    const lines: string[] = [];
+
+    const searchQuery = this.searchInput.getValue().trim();
+    if (this.searchActive) {
+      lines.push(...this.searchInput.render(width));
+      lines.push("");
+    } else if (searchQuery) {
+      lines.push(truncateToWidth(this.theme.fg("accent", `  Search: ${searchQuery}`), width, ""));
+      lines.push("");
+    }
+
+    lines.push(truncateToWidth(this.buildFilterLine(), width, ""));
+    lines.push("");
+
+    if (this.filteredItems.length === 0) {
+      lines.push(this.theme.fg("warning", "  No matching extensions or packages"));
+      return lines;
+    }
+
+    const { startIndex, endIndex } = this.getVisibleRange();
+    const visibleItems = this.filteredItems.slice(startIndex, endIndex);
+    const localCount = this.filteredItems.filter((item) => item.type === "local").length;
+    const packageCount = this.filteredItems.length - localCount;
+    const visibleLocalItems = visibleItems.filter((item) => item.type === "local");
+    const visiblePackageItems = visibleItems.filter((item) => item.type === "package");
+
+    if (visibleLocalItems.length > 0) {
+      lines.push(this.theme.fg("accent", `  Local extensions (${localCount})`));
+      for (const item of visibleLocalItems) {
+        lines.push(this.renderItemLine(item, width));
+      }
+      if (visiblePackageItems.length > 0) {
+        lines.push("");
+      }
+    }
+
+    if (visiblePackageItems.length > 0) {
+      lines.push(this.theme.fg("accent", `  Installed packages (${packageCount})`));
+      for (const item of visiblePackageItems) {
+        lines.push(this.renderItemLine(item, width));
+      }
+    }
+
+    if (startIndex > 0 || endIndex < this.filteredItems.length) {
+      lines.push("");
+      lines.push(
+        this.theme.fg(
+          "dim",
+          `  Showing ${startIndex + 1}-${endIndex} of ${this.filteredItems.length}`
+        )
+      );
+    }
+
+    const selectedItem = this.getSelectedItem();
+    if (selectedItem) {
+      lines.push("");
+      const selectedState = getCurrentUnifiedItemState(selectedItem, this.staged);
+      const detailText = formatUnifiedItemDescription(
+        selectedItem,
+        selectedState,
+        selectedItem.type === "local" && selectedState !== selectedItem.originalState,
+        this.cwd
+      );
+      for (const line of wrapTextWithAnsi(detailText, width - 4)) {
+        lines.push(this.theme.fg("dim", `  ${line}`));
+      }
+    }
+
+    return lines;
+  }
+
+  private buildFilterLine(): string {
+    const filters = UNIFIED_FILTER_OPTIONS.map(({ id, key, label }) => {
+      const text = `${key}:${label}`;
+      return id === this.filter
+        ? this.theme.fg("accent", `[${text}]`)
+        : this.theme.fg("muted", text);
+    }).join(" ");
+    const searchHint = this.theme.fg(
+      this.searchActive || this.searchInput.getValue() ? "accent" : "dim",
+      "/ search"
+    );
+    return `  ${filters} · ${searchHint}`;
+  }
+
+  private renderItemLine(item: UnifiedItem, width: number): string {
+    const state = getCurrentUnifiedItemState(item, this.staged);
+    const changed = item.type === "local" && state !== item.originalState;
+    const prefix = this.getSelectedItem()?.id === item.id ? this.theme.fg("accent", "→ ") : "  ";
+    return truncateToWidth(
+      prefix + formatUnifiedItemLabel(item, state, this.theme, changed),
+      width
+    );
+  }
+
+  private refreshVisibleItems(preferredItemId?: string): void {
+    const previousSelectedId = preferredItemId ?? this.getSelectedItem()?.id;
+    const filteredByMode = this.items.filter((item) =>
+      matchesUnifiedFilter(item, this.filter, this.staged)
+    );
+    const query = this.searchInput.getValue().trim();
+    this.filteredItems.length = 0;
+    this.filteredItems.push(
+      ...(query ? searchUnifiedItems(filteredByMode, query, this.staged, this.cwd) : filteredByMode)
+    );
+
+    if (this.filteredItems.length === 0) {
+      this.selectedIndex = 0;
+      return;
+    }
+
+    const nextSelectedIndex = previousSelectedId
+      ? this.filteredItems.findIndex((item) => item.id === previousSelectedId)
+      : -1;
+    if (nextSelectedIndex >= 0) {
+      this.selectedIndex = nextSelectedIndex;
+      return;
+    }
+
+    this.selectedIndex = Math.min(this.selectedIndex, this.filteredItems.length - 1);
   }
 
-  // Show size if available
-  if (item.size !== undefined) {
-    infoParts.push(formatSize(theme, item.size));
+  private setFilter(filter: UnifiedFilter): void {
+    this.filter = filter;
+    this.refreshVisibleItems();
   }
 
-  const summary = theme.fg("dim", infoParts.join(" • "));
-  return `${pkgIcon} [${scopeIcon}] ${name}${version}${updateBadge} - ${summary}`;
+  private cycleFilter(direction: -1 | 1): void {
+    const currentIndex = UNIFIED_FILTER_OPTIONS.findIndex((option) => option.id === this.filter);
+    const nextIndex =
+      (currentIndex + direction + UNIFIED_FILTER_OPTIONS.length) % UNIFIED_FILTER_OPTIONS.length;
+    const nextFilter = UNIFIED_FILTER_OPTIONS[nextIndex]?.id;
+    if (nextFilter) {
+      this.setFilter(nextFilter);
+    }
+  }
+
+  private moveSelection(delta: number): void {
+    if (this.filteredItems.length === 0) {
+      this.selectedIndex = 0;
+      return;
+    }
+
+    const nextIndex = this.selectedIndex + delta;
+    if (nextIndex < 0) {
+      this.selectedIndex = 0;
+      return;
+    }
+
+    if (nextIndex >= this.filteredItems.length) {
+      this.selectedIndex = this.filteredItems.length - 1;
+      return;
+    }
+
+    this.selectedIndex = nextIndex;
+  }
+
+  private getVisibleRange(): { startIndex: number; endIndex: number } {
+    const maxVisible = Math.max(1, this.maxVisibleItems);
+    const startIndex = Math.max(
+      0,
+      Math.min(
+        this.selectedIndex - Math.floor(maxVisible / 2),
+        Math.max(0, this.filteredItems.length - maxVisible)
+      )
+    );
+    const endIndex = Math.min(startIndex + maxVisible, this.filteredItems.length);
+    return { startIndex, endIndex };
+  }
 }
 
 function getToggleItemsForApply(items: UnifiedItem[]): LocalUnifiedItem[] {
@@ -565,6 +1109,7 @@ async function resolvePendingChangesBeforeLeave(
   }
 
   if (choice === "Discard changes") {
+    staged.clear();
     return "continue";
   }
 
@@ -597,6 +1142,12 @@ const QUICK_DESTINATION_LABELS: Record<QuickDestination, string> = {
   help: "Help",
 };
 
+const LOCAL_ACTION_OPTIONS = {
+  details: "View details",
+  remove: "Remove local extension",
+  back: "Back to manager",
+} as const;
+
 const PACKAGE_ACTION_OPTIONS = {
   configure: "Configure extensions",
   update: "Update package",
@@ -605,10 +1156,28 @@ const PACKAGE_ACTION_OPTIONS = {
   back: "Back to manager",
 } as const;
 
+type LocalActionKey = keyof typeof LOCAL_ACTION_OPTIONS;
 type PackageActionKey = keyof typeof PACKAGE_ACTION_OPTIONS;
 
+type LocalActionSelection = Exclude<LocalActionKey, "back"> | "cancel";
 type PackageActionSelection = Exclude<PackageActionKey, "back"> | "cancel";
 
+async function promptLocalActionSelection(
+  item: LocalUnifiedItem,
+  ctx: ExtensionCommandContext
+): Promise<LocalActionSelection> {
+  const selection = parseChoiceByLabel(
+    LOCAL_ACTION_OPTIONS,
+    await ctx.ui.select(item.displayName, Object.values(LOCAL_ACTION_OPTIONS))
+  );
+
+  if (!selection || selection === "back") {
+    return "cancel";
+  }
+
+  return selection;
+}
+
 async function promptPackageActionSelection(
   pkg: InstalledPackage,
   ctx: ExtensionCommandContext
@@ -625,6 +1194,27 @@ async function promptPackageActionSelection(
   return selection;
 }
 
+function showUnifiedItemDetails(
+  item: UnifiedItem,
+  ctx: ExtensionCommandContext,
+  state?: State
+): void {
+  if (item.type === "local") {
+    const currentState = state ?? item.state;
+    ctx.ui.notify(
+      `Name: ${item.displayName}\nScope: ${item.scope}\nState: ${currentState}\nPath: ${getLocalItemCurrentPath(item, currentState)}\nSummary: ${item.summary}`,
+      "info"
+    );
+    return;
+  }
+
+  const sizeStr = item.size !== undefined ? `\nSize: ${formatBytes(item.size)}` : "";
+  ctx.ui.notify(
+    `Name: ${item.displayName}\nVersion: ${item.version || "unknown"}\nSource: ${item.source}\nScope: ${item.scope}${sizeStr}${item.description ? `\nDescription: ${item.description}` : ""}`,
+    "info"
+  );
+}
+
 async function navigateWithPendingGuard(
   destination: QuickDestination,
   items: UnifiedItem[],
@@ -632,7 +1222,7 @@ async function navigateWithPendingGuard(
   byId: Map<string, UnifiedItem>,
   ctx: ExtensionCommandContext,
   pi: ExtensionAPI
-): Promise<"done" | "stay" | "exit"> {
+): Promise<"reload" | "resume" | "stay" | "exit"> {
   const pending = await resolvePendingChangesBeforeLeave(
     items,
     staged,
@@ -646,16 +1236,16 @@ async function navigateWithPendingGuard(
   switch (destination) {
     case "install":
       await showRemote("install", ctx, pi);
-      return "done";
+      return "reload";
     case "search":
       await showRemote("search", ctx, pi);
-      return "done";
+      return "reload";
     case "browse":
       await showRemote("", ctx, pi);
-      return "done";
+      return "reload";
     case "update-all": {
       const outcome = await updatePackagesWithOutcome(ctx, pi);
-      return outcome.reloaded ? "exit" : "done";
+      return outcome.reloaded ? "exit" : "reload";
     }
     case "auto-update":
       await promptAutoUpdateWizard(pi, ctx, (packages) => {
@@ -665,10 +1255,10 @@ async function navigateWithPendingGuard(
         );
       });
       void updateExtmgrStatus(ctx, pi);
-      return "done";
+      return "resume";
     case "help":
       showHelp(ctx);
-      return "done";
+      return "resume";
   }
 }
 
@@ -679,7 +1269,7 @@ async function handleUnifiedAction(
   byId: Map<string, UnifiedItem>,
   ctx: ExtensionCommandContext,
   pi: ExtensionAPI
-): Promise<boolean> {
+): Promise<boolean | "resume"> {
   if (result.type === "cancel") {
     const pendingCount = getPendingToggleChangeCount(staged, byId);
     if (pendingCount > 0) {
@@ -690,13 +1280,13 @@ async function handleUnifiedAction(
       ]);
 
       if (!choice || choice === "Stay in manager") {
-        return false;
+        return "resume";
       }
 
       if (choice === "Save and exit") {
         const apply = await applyToggleChangesFromManager(items, staged, ctx, pi);
         if (apply.reloaded) return true;
-        if (apply.changed === 0 && apply.hasErrors) return false;
+        if (apply.changed === 0 && apply.hasErrors) return "resume";
       }
     }
 
@@ -705,7 +1295,7 @@ async function handleUnifiedAction(
 
   if (result.type === "remote") {
     const pending = await resolvePendingChangesBeforeLeave(items, staged, byId, ctx, pi, "Remote");
-    if (pending === "stay") return false;
+    if (pending === "stay") return "resume";
 
     await showRemote("", ctx, pi);
     return false;
@@ -713,10 +1303,10 @@ async function handleUnifiedAction(
 
   if (result.type === "help") {
     const pending = await resolvePendingChangesBeforeLeave(items, staged, byId, ctx, pi, "Help");
-    if (pending === "stay") return false;
+    if (pending === "stay") return "resume";
 
     showHelp(ctx);
-    return false;
+    return "resume";
   }
 
   if (result.type === "menu") {
@@ -736,10 +1326,11 @@ async function handleUnifiedAction(
 
     const destination = choice ? destinationByAction[choice] : undefined;
     if (!destination) {
-      return false;
+      return "resume";
     }
 
     const outcome = await navigateWithPendingGuard(destination, items, staged, byId, ctx, pi);
+    if (outcome === "stay" || outcome === "resume") return "resume";
     return outcome === "exit";
   }
 
@@ -753,6 +1344,7 @@ async function handleUnifiedAction(
 
     const destination = quickDestinationMap[result.action];
     const outcome = await navigateWithPendingGuard(destination, items, staged, byId, ctx, pi);
+    if (outcome === "stay" || outcome === "resume") return "resume";
     return outcome === "exit";
   }
 
@@ -760,25 +1352,40 @@ async function handleUnifiedAction(
     const item = byId.get(result.itemId);
     if (!item) return false;
 
-    const pendingDestination = item.type === "local" ? "remove extension" : "package actions";
-    const pending = await resolvePendingChangesBeforeLeave(
-      items,
-      staged,
-      byId,
-      ctx,
-      pi,
-      pendingDestination
-    );
-    if (pending === "stay") return false;
-
     if (item.type === "local") {
-      if (result.action !== "remove") return false;
+      const selection =
+        !result.action || result.action === "menu"
+          ? await promptLocalActionSelection(item, ctx)
+          : result.action;
+
+      if (selection === "cancel") {
+        return "resume";
+      }
+
+      if (selection === "details") {
+        showUnifiedItemDetails(item, ctx, staged.get(item.id) ?? item.state);
+        return "resume";
+      }
+
+      if (selection !== "remove") {
+        return "resume";
+      }
+
+      const pending = await resolvePendingChangesBeforeLeave(
+        items,
+        staged,
+        byId,
+        ctx,
+        pi,
+        "remove extension"
+      );
+      if (pending === "stay") return "resume";
 
       const confirmed = await ctx.ui.confirm(
         "Delete Local Extension",
         `Delete ${item.displayName} from disk?\n\nThis cannot be undone.`
       );
-      if (!confirmed) return false;
+      if (!confirmed) return "resume";
 
       const removal = await removeLocalExtension(
         { activePath: item.activePath, disabledPath: item.disabledPath },
@@ -787,7 +1394,7 @@ async function handleUnifiedAction(
       if (!removal.ok) {
         logExtensionDelete(pi, item.id, false, removal.error);
         ctx.ui.notify(`Failed to remove extension: ${removal.error}`, "error");
-        return false;
+        return "resume";
       }
 
       logExtensionDelete(pi, item.id, true);
@@ -804,6 +1411,7 @@ async function handleUnifiedAction(
       name: item.displayName,
       ...(item.version ? { version: item.version } : {}),
       scope: item.scope,
+      ...(item.resolvedPath ? { resolvedPath: item.resolvedPath } : {}),
       ...(item.description ? { description: item.description } : {}),
       ...(item.size !== undefined ? { size: item.size } : {}),
     };
@@ -814,9 +1422,30 @@ async function handleUnifiedAction(
         : result.action;
 
     if (selection === "cancel") {
-      return false;
+      return "resume";
     }
 
+    if (selection === "details") {
+      showUnifiedItemDetails(item, ctx);
+      return "resume";
+    }
+
+    const pendingDestinationBySelection = {
+      configure: "configure package extensions",
+      update: "update package",
+      remove: "remove package",
+    } satisfies Record<Exclude<PackageActionSelection, "cancel" | "details">, string>;
+
+    const pending = await resolvePendingChangesBeforeLeave(
+      items,
+      staged,
+      byId,
+      ctx,
+      pi,
+      pendingDestinationBySelection[selection]
+    );
+    if (pending === "stay") return "resume";
+
     switch (selection) {
       case "configure": {
         const outcome = await configurePackageExtensions(pkg, ctx, pi);
@@ -830,19 +1459,11 @@ async function handleUnifiedAction(
         const outcome = await removePackageWithOutcome(pkg.source, ctx, pi);
         return outcome.reloaded;
       }
-      case "details": {
-        const sizeStr = pkg.size !== undefined ? `\nSize: ${formatBytes(pkg.size)}` : "";
-        ctx.ui.notify(
-          `Name: ${pkg.name}\nVersion: ${pkg.version || "unknown"}\nSource: ${pkg.source}\nScope: ${pkg.scope}${sizeStr}${pkg.description ? `\nDescription: ${pkg.description}` : ""}`,
-          "info"
-        );
-        return false;
-      }
     }
   }
 
   const apply = await applyToggleChangesFromManager(items, staged, ctx, pi);
-  return apply.reloaded;
+  return apply.reloaded ? true : "resume";
 }
 
 async function applyStagedChanges(
@@ -857,6 +1478,7 @@ async function applyStagedChanges(
     const target = staged.get(item.id) ?? item.originalState;
     if (target === item.originalState) continue;
 
+    const fromState = item.originalState;
     const result = await setExtensionState(
       { activePath: item.activePath, disabledPath: item.disabledPath },
       target
@@ -864,10 +1486,13 @@ async function applyStagedChanges(
 
     if (result.ok) {
       changed++;
-      logExtensionToggle(pi, item.id, item.originalState, target, true);
+      item.state = target;
+      item.originalState = target;
+      staged.delete(item.id);
+      logExtensionToggle(pi, item.id, fromState, target, true);
     } else {
       errors.push(`${item.id}: ${result.error}`);
-      logExtensionToggle(pi, item.id, item.originalState, target, false, result.error);
+      logExtensionToggle(pi, item.id, fromState, target, false, result.error);
     }
   }
 
@@ -895,23 +1520,9 @@ export async function showInstalledPackagesLegacy(
 export async function showListOnly(ctx: ExtensionCommandContext): Promise<void> {
   const entries = await discoverExtensions(ctx.cwd);
   if (entries.length === 0) {
-    const msg = "No extensions found in ~/.pi/agent/extensions or .pi/extensions";
-    if (ctx.hasUI) {
-      ctx.ui.notify(msg, "info");
-    } else {
-      console.log(msg);
-    }
+    notify(ctx, "No extensions found in ~/.pi/agent/extensions or .pi/extensions", "info");
     return;
   }
 
-  const lines = entries.map(formatExtEntry);
-  const output = lines.join("\n");
-  const titledOutput = `Local extensions:\n${output}`;
-
-  if (ctx.hasUI) {
-    ctx.ui.notify(titledOutput, "info");
-  } else {
-    console.log("Local extensions:");
-    console.log(output);
-  }
+  formatListOutput(ctx, "Local extensions", entries.map(formatExtEntry));
 }