@iseoane/agent-depot 0.5.2 → 0.6.0

package/dist/src/tui/catalog-view.js

@@ -1,17 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text, useWindowSize } from "ink";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { createAppOperations } from "../app-flow.js";
 import { BROWSE } from "./catalog-actions.js";
 import { handleCatalogBrowseKey } from "./catalog-browse.js";
 import { filterSkills } from "./catalog-filter.js";
 import { handleCatalogActionKey } from "./catalog-flow.js";
 import { isInstalled } from "./catalog-installs.js";
+import { AppPanel, handleAppKey, startAppAction } from "./app-actions.js";
 import { ActionPanel, CatalogHeader, CatalogRowLine, CatalogSelectionHelp } from "./catalog-panel.js";
 import { packageOwnedSkillNotice } from "./catalog-ownership.js";
 import { packageOperationsOf } from "./environment.js";
 import { handlePackageKey, isPackageMode, startPackageAction } from "./package-actions.js";
 import { ListFooter } from "./panel-parts.js";
-import { useCatalogFilter, useCatalogSkills, useInstalledSkills } from "./catalog-state.js";
+import { useCatalogApps, useCatalogFilter, useCatalogSkills, useInstalledSkills } from "./catalog-state.js";
 import { buildTree, leavesOf, openByDefault, skillKey } from "./catalog-tree.js";
 import { theme } from "./theme.js";
 import { useTreeNavigation } from "./tree-navigation.js";
@@ -38,7 +40,7 @@ function wrappedLineCount(text, columns) {
     return lines;
 }
 export function CatalogView({ operations, sourceId, onCapturingChange, environment, listHeight }) {
-    const { columns } = useWindowSize();
+    const { columns, rows: terminalRows } = useWindowSize();
     const env = environment ?? NO_ENVIRONMENT;
     const [all, setAll] = useState(sourceId === undefined);
     const mounted = useMounted();
@@ -52,7 +54,17 @@ export function CatalogView({ operations, sourceId, onCapturingChange, environme
     const filter = useCatalogFilter(actionRef, onCapturingChange);
     const state = useCatalogSkills(operations, sourceId, all, env, reloadKey);
     const packages = useMemo(() => packageOperationsOf(env), [env]);
+    const apps = useMemo(() => createAppOperations({ homeDirectory: env.homeDirectory, ...env.appEnvironment }), [env]);
+    const appCatalogState = useCatalogApps(apps);
+    const appCatalog = appCatalogState.state;
     const { installed, installedReady, reloadInstalled } = useInstalledSkills(operations, env, mounted);
+    const [appMode, setAppMode] = useState();
+    const appModeRef = useRef(undefined);
+    const setAppAction = (mode) => {
+        appModeRef.current = mode;
+        onCapturingChange?.(mode !== undefined || filter.filterRef.current.editing || actionRef.current.kind !== "browse");
+        setAppMode(mode);
+    };
     const setAction = (next) => {
         actionRef.current = next;
         onCapturingChange?.(filter.filterRef.current.editing || next.kind !== "browse");
@@ -61,7 +73,13 @@ export function CatalogView({ operations, sourceId, onCapturingChange, environme
     const skills = state.status === "ready" ? state.skills : [];
     const installable = useMemo(() => skills.filter((skill) => !isInstalled(skill, installed)), [state, installed]);
     const visible = useMemo(() => filterSkills(installable, filter.filter.query), [installable, filter.filter.query]);
-    const roots = useMemo(() => buildTree(visible, state.status === "ready" ? state.sources : [], state.status === "ready" ? state.bundles : [], state.status === "ready" ? state.activeBundles : []), [visible, state]);
+    const visibleApps = useMemo(() => {
+        if (appCatalog.status !== "ready")
+            return [];
+        const query = filter.filter.query.trim().toLowerCase();
+        return query === "" ? appCatalog.rows : appCatalog.rows.filter(row => (row.entry.recipe?.name ?? row.entry.file).toLowerCase().includes(query));
+    }, [appCatalog, filter.filter.query]);
+    const roots = useMemo(() => buildTree(visible, state.status === "ready" ? state.sources : [], state.status === "ready" ? state.bundles : [], state.status === "ready" ? state.activeBundles : [], visibleApps), [visible, state, visibleApps]);
     const navigation = useTreeNavigation(roots, (nodes) => openByDefault(nodes, filter.queryRef.current));
     // Discovering again starts the list over.
     const { restart } = navigation;
@@ -86,6 +104,23 @@ export function CatalogView({ operations, sourceId, onCapturingChange, environme
             setAction(BROWSE);
         },
     };
+    const appManage = {
+        setMode: setAppAction,
+        browse: () => setAppAction(undefined),
+        setMessage,
+        isMounted: () => mounted.current,
+        unmark: ids => marks.setMarked(new Set([...marks.markedRef.current].filter(id => !ids.includes(id)))),
+        finish: async (result) => {
+            await reloadInstalled();
+            if (!mounted.current)
+                return;
+            await appCatalogState.reload();
+            if (!mounted.current)
+                return;
+            setMessage(result);
+            setAppAction(undefined);
+        },
+    };
     const packageHost = {
         setMode: setAction,
         browse: () => setAction(BROWSE),
@@ -107,29 +142,37 @@ export function CatalogView({ operations, sourceId, onCapturingChange, environme
         marks,
         filter,
         canWiden: sourceId !== undefined,
-        ready: state.status === "ready",
+        ready: state.status === "ready" && appCatalog.status === "ready",
         toggleAll: () => setAll((value) => !value),
         startPackage: (target) => void startPackageAction(packageContext, target, "i"),
+        startApp: (entry) => void startAppAction({ apps, manage: appManage, terminalRows: terminalRows || 24, terminalColumns: columns || 80 }, [entry], "i"),
         setMessage,
         setAction,
     };
     useKeys((input, key) => {
-        const mode = actionRef.current;
-        if (isPackageMode(mode))
-            handlePackageKey(packageContext, mode, input, key);
-        else if (mode.kind !== "browse")
-            handleCatalogActionKey(flow, mode, input, key);
-        else if (filter.filterRef.current.editing)
-            filter.handleEditKey(input, key, navigation.restart);
-        else
-            handleCatalogBrowseKey(browse, input, key);
+        const runningAppMode = appModeRef.current;
+        if (runningAppMode !== undefined)
+            handleAppKey({ apps, manage: appManage, terminalRows: terminalRows || 24, terminalColumns: columns || 80 }, runningAppMode, input, key);
+        else {
+            const mode = actionRef.current;
+            if (isPackageMode(mode))
+                handlePackageKey(packageContext, mode, input, key);
+            else if (mode.kind !== "browse")
+                handleCatalogActionKey(flow, mode, input, key);
+            else if (filter.filterRef.current.editing)
+                filter.handleEditKey(input, key, navigation.restart);
+            else
+                handleCatalogBrowseKey(browse, input, key);
+        }
     });
     const scope = all || sourceId === undefined ? "all sources" : sourceId;
-    if (state.status === "loading" || (state.status === "ready" && !installedReady))
-        return _jsx(Text, { children: "Loading skills..." });
+    if (state.status === "loading" || appCatalog.status === "loading" || (state.status === "ready" && !installedReady))
+        return _jsx(Text, { children: "Loading catalog..." });
     if (state.status === "error")
         return _jsxs(Text, { color: theme.error, children: ["Error: ", state.message] });
     const window = computeWindow(rows.length, index, height);
     const selectedCount = leavesOf(roots).filter((skill) => marks.marked.has(skillKey(skill))).length;
-    return (_jsxs(Box, { flexDirection: "column", children: [state.warnings.map((warning) => _jsx(Text, { color: theme.warning, children: warning }, warning)), _jsx(CatalogHeader, { scope: scope, listed: visible.length, installable: installable.length, total: skills.length, filter: filter.filter }), rows.slice(window.start, window.end).map((row, offset) => (_jsx(CatalogRowLine, { row: row, selected: window.start + offset === index, marked: marks.marked.has(row.node.id), installed: installed }, row.node.id))), _jsx(CatalogSelectionHelp, { row: rows[index], height: helpLines }), _jsx(ListFooter, { indicator: window.indicator, selectedCount: selectedCount, message: message }), _jsx(ActionPanel, { mode: action })] }));
+    if (appMode !== undefined)
+        return _jsx(AppPanel, { mode: appMode });
+    return (_jsxs(Box, { flexDirection: "column", children: [state.warnings.map((warning) => _jsx(Text, { color: theme.warning, children: warning }, warning)), appCatalog.status === "ready" && appCatalog.error ? _jsxs(Text, { color: theme.error, children: ["Apps unavailable: ", appCatalog.error] }) : null, _jsx(CatalogHeader, { scope: scope, listed: visible.length, installable: installable.length, total: skills.length, appCount: visibleApps.length, filter: filter.filter }), rows.slice(window.start, window.end).map((row, offset) => (_jsx(CatalogRowLine, { row: row, selected: window.start + offset === index, marked: marks.marked.has(row.node.id), installed: installed }, row.node.id))), _jsx(CatalogSelectionHelp, { row: rows[index], height: helpLines }), _jsx(ListFooter, { indicator: window.indicator, selectedCount: selectedCount, message: message }), appMode ? _jsx(AppPanel, { mode: appMode }) : _jsx(ActionPanel, { mode: action })] }));
 }

package/dist/src/tui/header-layout.js

@@ -0,0 +1,33 @@
+export const TABS = [
+    ["sources", "[1] Sources"],
+    ["catalog", "[2] Catalog"],
+    ["installations", "[3] Installations"],
+    ["updates", "[4] Updates"],
+    ["profile", "[5] Profile"],
+];
+export function headerTabRows(width) {
+    const rows = [];
+    let row = [];
+    let rowWidth = 0;
+    for (const tab of TABS) {
+        const separatorWidth = row.length === 0 ? 0 : 2;
+        // Each rendered row has at most one active marker, regardless of tab count.
+        const nextWidth = rowWidth + separatorWidth + tab[1].length;
+        if (row.length > 0 && nextWidth + 2 > width) {
+            rows.push(row);
+            row = [];
+            rowWidth = 0;
+        }
+        rowWidth += (row.length === 0 ? 0 : 2) + tab[1].length;
+        row.push(tab);
+    }
+    if (row.length > 0)
+        rows.push(row);
+    return rows;
+}
+export function headerTabRowCount(width) {
+    return headerTabRows(width).length;
+}
+export function formatHeaderTabs(view, width) {
+    return headerTabRows(width).map(row => row.map(([name, label]) => `${view === name ? "▶ " : ""}${label}`).join("  ")).join("\n");
+}

package/dist/src/tui/installations-panel.js

@@ -2,7 +2,7 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from "ink";
 import { HOST_CHOICES } from "./catalog-actions.js";
 import { ManagePanel } from "./manage-panel.js";
-import { HostChecklist, PreviewLines } from "./panel-parts.js";
+import { DecisionPrompt, HostChecklist, PreviewLines } from "./panel-parts.js";
 import { theme } from "./theme.js";
 /** The prompt of the adoption and manage modes; browsing shows nothing. */
 export function ModePanel({ mode }) {
@@ -18,9 +18,9 @@ export function ModePanel({ mode }) {
         case "fixed":
             return _jsxs(Text, { children: ["Fixed version: ", mode.value, "_  (Enter confirm, Esc cancel)"] });
         case "confirm":
-            return mode.adoption.verdict.adoptable ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(PreviewLines, { lines: mode.adoption.prepared.preview }), mode.adoption.prepared.runsExternalCommand ? _jsx(Text, { color: theme.warning, children: "This install runs an external command (see above)." }) : null, _jsxs(Text, { children: ["Adopt ", mode.entry.name, "? y/n"] })] })) : (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: theme.error, children: mode.adoption.verdict.reason }), _jsx(Text, { children: "Enter/Esc to go back" })] }));
+            return mode.adoption.verdict.adoptable ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(PreviewLines, { lines: mode.adoption.prepared.preview }), mode.adoption.prepared.runsExternalCommand ? _jsx(Text, { color: theme.warning, children: "This install runs an external command (see above)." }) : null, _jsxs(DecisionPrompt, { children: ["Adopt ", mode.entry.name, "?"] })] })) : (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: theme.error, children: mode.adoption.verdict.reason }), _jsx(Text, { children: "Enter/Esc to go back" })] }));
         case "confirm-exposure":
-            return (_jsxs(Text, { color: theme.warning, children: ["Adopting ", mode.entry.name, " adds the missing Host location and exposes it to more hosts; this needs separate confirmation (CLI: --confirm-additional-host). Confirm? y/n"] }));
+            return (_jsxs(Text, { color: theme.warning, children: ["Adopting ", mode.entry.name, " adds the missing Host location and exposes it to more hosts; this needs separate confirmation (CLI: --confirm-additional-host). ", _jsx(DecisionPrompt, { children: "Confirm?" })] }));
         default:
             return _jsx(ManagePanel, { mode: mode });
     }

package/dist/src/tui/installations-rows.js

@@ -1,12 +1,27 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Text } from "ink";
-import { describeDetails, describeLinks, describeNode, markersOf } from "./installations-tree.js";
-import { describePackageRow } from "./package-rows.js";
+import { describeLinks, describeNode, markersOf } from "./installations-tree.js";
 import { rowStyle, theme } from "./theme.js";
+function AppDetails({ row }) {
+    const version = row.inspection.installedVersion;
+    const statusColor = row.inspection.status === "invalid" ? theme.error : theme.warning;
+    const invalid = row.inspection.status === "invalid" ? ` · invalid recipe: ${row.inspection.reason ?? "unknown error"}` : "";
+    return (_jsxs(Text, { children: [_jsx(Text, { color: theme.legend, children: "  " }), _jsx(Text, { color: version === undefined ? statusColor : theme.version, children: version ?? row.inspection.status }), row.inspection.evidence === "recorded" ? _jsx(Text, { color: theme.value, children: " (recorded)" }) : null, invalid === "" ? null : _jsx(Text, { color: theme.error, children: invalid })] }));
+}
+function PackageDetails({ row }) {
+    const version = row.installedVersion;
+    const installedPrefix = version === undefined ? "" : row.installed.startsWith("installed at ") ? "installed at " : "installed ";
+    const installedSuffix = version === undefined ? "" : row.installed.slice(installedPrefix.length + version.length);
+    const status = row.status.kind === "unknown" && row.status.reason === "local changes"
+        ? "update not checked · local changes"
+        : row.status.kind === "unknown" ? "cannot assess" : row.status.kind === "current" ? "up to date" : "update available";
+    return (_jsxs(Text, { children: [_jsx(Text, { color: theme.legend, children: "  " }), _jsxs(Text, { color: theme.value, children: [row.selection.host, "  "] }), version === undefined ? _jsx(Text, { color: theme.warning, children: row.installed }) : _jsxs(_Fragment, { children: [_jsx(Text, { color: theme.value, children: installedPrefix }), _jsx(Text, { color: theme.version, children: version }), _jsx(Text, { color: theme.value, children: installedSuffix })] }), _jsx(Text, { color: theme.value, children: "  available " }), _jsx(Text, { color: row.available === "unknown" ? theme.warning : theme.version, children: row.available }), _jsxs(Text, { color: theme.warning, children: ["  ", status] }), row.drift === undefined ? null : _jsxs(Text, { color: theme.warning, children: ["  drift: ", row.drift] })] }));
+}
 /** One line of the Installations tree: cursor, indent, mark box, label and the leaf's details. */
 export function TreeRowLine({ row, selected, marked }) {
     const item = row.node.data;
-    const leaf = !row.expandable && item.kind !== "group";
+    const markable = item.kind !== "group" && item.kind !== "package";
+    const leaf = !row.expandable && markable;
     const prefix = `${selected ? "> " : "  "}${"  ".repeat(row.depth)}${leaf ? (marked ? "[x] " : "[ ] ") : ""}`;
-    return (_jsxs(Text, { ...rowStyle(selected), color: item.kind === "group" ? theme.group : undefined, children: [prefix, describeNode(row), item.kind === "installation" ? (_jsxs(Text, { color: theme.marker, children: ["  ", describeDetails(item.row), markersOf(item.row) === "" ? "" : `  ${markersOf(item.row)}`] })) : null, item.kind === "package" ? (_jsxs(Text, { color: theme.marker, children: ["  ", describePackageRow(item.row)] })) : null, item.kind === "unmanaged" && describeLinks(item.group) !== "" ? (_jsxs(Text, { color: theme.marker, children: ["  ", describeLinks(item.group)] })) : null] }));
+    return (_jsxs(Text, { ...rowStyle(selected), color: item.kind === "group" ? theme.group : undefined, children: [prefix, item.kind === "app" ? item.row.entry.recipe?.name ?? item.row.name ?? item.row.entry.file : describeNode(row), item.kind === "installation" ? (_jsxs(Text, { children: [_jsx(Text, { color: theme.legend, children: "  " }), _jsx(Text, { color: item.row.installed === "unknown" ? theme.warning : theme.version, children: item.row.installed }), _jsxs(Text, { color: theme.field, children: [" (", item.row.policy, ")  [", item.row.selection.hosts.join(", "), "]"] }), markersOf(item.row) === "" ? null : _jsxs(Text, { color: theme.marker, children: ["  ", markersOf(item.row)] })] })) : null, item.kind === "app" ? _jsx(AppDetails, { row: item.row }) : null, item.kind === "package" ? _jsx(PackageDetails, { row: item.row }) : null, item.kind === "unmanaged" && describeLinks(item.group) !== "" ? (_jsxs(Text, { color: theme.success, children: ["  ", describeLinks(item.group)] })) : null] }));
 }

package/dist/src/tui/installations-tree.js

@@ -49,10 +49,6 @@ export function buildTree(data) {
         });
     return roots;
 }
-/** Version, policy and hosts of a leaf; `adopted` / `modified` only when true (the legend explains them). */
-export function describeDetails({ selection, policy, installed }) {
-    return `${installed} (${policy})  [${selection.hosts.join(", ")}]`;
-}
 export function markersOf({ adopted, modified }) {
     return [adopted ? "adopted" : "", modified ? "modified" : ""].filter((flag) => flag !== "").join(" ");
 }
@@ -78,11 +74,12 @@ export function describeNode(row) {
         return data.row.name;
     if (data.kind === "app") {
         const { entry, inspection } = data.row;
-        const name = entry.recipe?.name ?? entry.file;
-        if (inspection.status === "invalid")
+        const name = entry.recipe?.name ?? data.row.name ?? entry.file;
+        if (inspection.status === "invalid" && inspection.evidence !== "recorded")
             return `${name}  invalid recipe: ${inspection.reason}`;
         const version = inspection.installedVersion ?? inspection.status;
-        return `${name}  ${version}${inspection.evidence === "recorded" ? " (recorded)" : ""}`;
+        const invalid = inspection.status === "invalid" ? ` · invalid recipe: ${inspection.reason}` : "";
+        return `${name}  ${version}${inspection.evidence === "recorded" ? " (recorded)" : ""}${invalid}`;
     }
     return `${data.group.name} [${data.group.hosts.join(", ")}]`;
 }

package/dist/src/tui/installations-view.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from "ink";
+import { Box, Text, useWindowSize } from "ink";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createAppOperations } from "../app-flow.js";
-import { handleAppKey, isAppMode, startAppAction } from "./app-actions.js";
+import { AppPanel, handleAppKey, isAppMode, startAppAction } from "./app-actions.js";
 import { handlePackageKey, isPackageMode } from "./package-actions.js";
 import { packageOperationsOf } from "./environment.js";
 import { loadInstallations } from "./installations.js";
@@ -24,6 +24,7 @@ import { useKeys } from "./keys.js";
 const NO_ENVIRONMENT = {};
 const LEGEND = "adopted: tracked in place · modified: changed on disk";
 export function InstallationsView({ operations, environment, onCapturingChange, listHeight }) {
+    const { rows: terminalRows, columns: terminalColumns } = useWindowSize();
     const height = useListHeight(listHeight, 7);
     const env = environment ?? NO_ENVIRONMENT;
     const apps = useMemo(() => createAppOperations({ homeDirectory: env.homeDirectory, ...env.appEnvironment }), [env]);
@@ -71,9 +72,15 @@ export function InstallationsView({ operations, environment, onCapturingChange,
             return;
         checked.current.add(identity);
         const generation = loadGeneration.current;
-        void apps.inspect(entry).then(inspection => {
-            if (!mounted.current || generation !== loadGeneration.current)
+        void apps.approvalStatus(entry).then(approval => {
+            if (approval.status !== "approved")
+                return undefined;
+            return apps.inspect(entry);
+        }).then(inspection => {
+            if (!inspection || !mounted.current || generation !== loadGeneration.current)
                 return;
+            if (inspection.status === "unknown")
+                checked.current.delete(identity);
             setState(previous => previous.status !== "ready" ? previous : {
                 ...previous,
                 data: {
@@ -131,7 +138,7 @@ export function InstallationsView({ operations, environment, onCapturingChange,
         packages,
         startAdoption: (group) => void startAdoption(adoption, group),
         setMessage,
-        startApps: (entries, input) => void startAppAction({ apps, manage }, entries, input),
+        startApps: (entries, input) => void startAppAction({ apps, manage, terminalRows: terminalRows || 24, terminalColumns: terminalColumns || 80 }, entries, input),
     };
     useKeys((input, key) => {
         const current = modeRef.current;
@@ -140,7 +147,7 @@ export function InstallationsView({ operations, environment, onCapturingChange,
         else if (isPackageMode(current))
             handlePackageKey({ packages, manage }, current, input, key);
         else if (isAppMode(current))
-            handleAppKey({ apps, manage }, current, input, key);
+            handleAppKey({ apps, manage, terminalRows: terminalRows || 24, terminalColumns: terminalColumns || 80 }, current, input, key);
         else if (!handleManageKey(manage, current, input, key))
             handleAdoptionKey(adoption, current, input, key);
     });
@@ -148,6 +155,8 @@ export function InstallationsView({ operations, environment, onCapturingChange,
         return _jsx(Text, { children: "Loading installations..." });
     if (state.status === "error")
         return _jsxs(Text, { color: theme.error, children: ["Error: ", state.message] });
+    if (isAppMode(mode))
+        return _jsx(AppPanel, { mode: mode });
     const ready = state.data;
     const window = computeWindow(rows.length, index, height);
     const listed = rows.slice(window.start, window.end);

package/dist/src/tui/installations.js

@@ -79,13 +79,15 @@ export async function loadInstallations(operations, environment, appOperations =
     let appsError;
     try {
         const tracked = await appOperations.trackedApps();
-        apps = await Promise.all((await appOperations.load()).filter(entry => entry.applicable).map(async (entry) => ({
-            entry,
-            inspection: await appOperations.inspect(entry, {
-                installedVersion: tracked.find(record => record.name === entry.recipe?.name
-                    && record.recipeFile === entry.canonicalFile)?.installedVersion,
-            }),
-        })));
+        apps = (await Promise.all((await appOperations.load()).filter(entry => entry.applicable).map(async (entry) => {
+            const record = tracked.find(item => item.recipeFile === entry.canonicalFile
+                && (item.name === entry.recipe?.name || entry.recipe === undefined));
+            const inspection = record && (entry.error || !entry.recipe)
+                ? { status: "invalid", installedVersion: record.installedVersion, evidence: "recorded", reason: entry.error }
+                : await appOperations.inspect(entry, record === undefined ? undefined : { installedVersion: record.installedVersion });
+            return { entry, inspection, ...(record === undefined ? {} : { name: record.name }) };
+        }))).filter(row => row.inspection.status === "installed"
+            || (row.inspection.status === "invalid" && row.inspection.evidence === "recorded"));
     }
     catch (error) {
         appsError = errorText(error);

package/dist/src/tui/manage-panel.js

@@ -2,7 +2,7 @@ import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-run
 import { Box, Text } from "ink";
 import { AppPanel } from "./app-actions.js";
 import { PackagePanel } from "./package-actions.js";
-import { ChecklistLines, HostChecklist, PreviewConfirm, PreviewLines } from "./panel-parts.js";
+import { ChecklistLines, DecisionPrompt, HostChecklist, PreviewConfirm, PreviewLines } from "./panel-parts.js";
 import { theme } from "./theme.js";
 const plural = (n) => `${n} ${n === 1 ? "item" : "items"}`;
 function SkippedLines({ skipped }) {
@@ -10,7 +10,7 @@ function SkippedLines({ skipped }) {
 }
 /** One block per planned item, the skipped ones, then the y/n question. */
 function PlanPreview({ entries, skipped, question }) {
-    return (_jsxs(Box, { flexDirection: "column", children: [entries.map((entry) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: theme.group, children: entry.label }), _jsx(PreviewLines, { lines: entry.lines, warnFirst: entry.warnFirst })] }, entry.id))), _jsx(SkippedLines, { skipped: skipped }), _jsx(Text, { children: question })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [entries.map((entry) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: theme.group, children: entry.label }), _jsx(PreviewLines, { lines: entry.lines, warnFirst: entry.warnFirst })] }, entry.id))), _jsx(SkippedLines, { skipped: skipped }), _jsx(DecisionPrompt, { children: question })] }));
 }
 function UninstallPreview({ plan }) {
     const entries = plan.items.map((item) => ({
@@ -19,15 +19,16 @@ function UninstallPreview({ plan }) {
         lines: item.kind === "managed" ? item.prepared.plan.preview : item.prepared.preview,
         warnFirst: item.kind === "unmanaged",
     }));
-    return _jsx(PlanPreview, { entries: entries, skipped: plan.skipped, question: `Uninstall ${plural(plan.items.length)}? y/n` });
+    return _jsx(PlanPreview, { entries: entries, skipped: plan.skipped, question: `Uninstall ${plural(plan.items.length)}?` });
 }
 function HostsPreview({ plan }) {
     const entries = plan.items.map((item) => ({ id: item.id, label: item.label, lines: item.prepared.preview, warnFirst: false }));
-    return _jsx(PlanPreview, { entries: entries, skipped: plan.skipped, question: `Add hosts to ${plural(plan.items.length)}? y/n` });
+    return _jsx(PlanPreview, { entries: entries, skipped: plan.skipped, question: `Add hosts to ${plural(plan.items.length)}?` });
 }
 /** Renders the prompt of a manage mode: host lists, previews and confirmations. */
 export function ManagePanel({ mode }) {
     switch (mode.kind) {
+        case "app-busy":
         case "app-approve":
         case "app-hosts":
         case "app-confirm":
@@ -45,7 +46,7 @@ export function ManagePanel({ mode }) {
         case "confirm-host-add":
             return _jsx(PreviewConfirm, { lines: mode.prepared.preview, question: `Add hosts to ${mode.skill.name}? y/n` });
         case "confirm-host-exposure":
-            return (_jsxs(Text, { color: theme.warning, children: ["Adding hosts exposes the installed ", mode.skill.name, " to more hosts and needs separate confirmation (CLI: --confirm-additional-host). Confirm? y/n"] }));
+            return (_jsxs(Text, { color: theme.warning, children: ["Adding hosts exposes the installed ", mode.skill.name, " to more hosts and needs separate confirmation (CLI: --confirm-additional-host). ", _jsx(DecisionPrompt, { children: "Confirm?" })] }));
         case "confirm-host-remove":
             return _jsx(PreviewConfirm, { lines: mode.prepared.preview, question: `Remove hosts from ${mode.skill.name}? y/n` });
         case "confirm-uninstall":
@@ -63,7 +64,7 @@ export function ManagePanel({ mode }) {
         case "confirm-bulk-hosts":
             return _jsx(HostsPreview, { plan: mode.plan });
         case "confirm-bulk-exposure":
-            return (_jsxs(Text, { color: theme.warning, children: ["Adding hosts exposes the installed ", mode.plan.items.map((item) => item.label).join(", "), " to more hosts and needs separate confirmation (CLI: --confirm-additional-host). Confirm? y/n"] }));
+            return (_jsxs(Text, { color: theme.warning, children: ["Adding hosts exposes the installed ", mode.plan.items.map((item) => item.label).join(", "), " to more hosts and needs separate confirmation (CLI: --confirm-additional-host). ", _jsx(DecisionPrompt, { children: "Confirm?" })] }));
         case "busy":
             return _jsx(Text, { children: mode.label });
     }

package/dist/src/tui/mode-keys.js

@@ -7,6 +7,15 @@ export function moveCursor(cursor, length, input, key) {
         return Math.max(cursor - 1, 0);
     return undefined;
 }
+/** Read-only preview navigation: arrows and page keys move a viewport; j/k move one line. */
+export function movePreviewCursor(cursor, length, input, key, pageSize) {
+    const step = key.pageDown || key.downArrow ? pageSize : key.pageUp || key.upArrow ? -pageSize : 0;
+    if (step !== 0)
+        return Math.min(Math.max(cursor + step, 0), Math.max(length - 1, 0));
+    if (input === "j" || input === "k")
+        return moveCursor(cursor, length, input, key);
+    return undefined;
+}
 /** `selected` with `choice` flipped, always in the order of `choices`. */
 export function toggleChoice(choices, selected, choice) {
     return choices.filter((candidate) => candidate === choice ? !selected.includes(candidate) : selected.includes(candidate));

package/dist/src/tui/package-rows.js

@@ -51,15 +51,27 @@ export function packageRow(record, inspection) {
         selection: record.selection,
         name: inspection.descriptor?.name ?? describeCoordinates(record.selection),
         installed: installedEvidenceLabel(inspection.installed),
+        ...(inspection.installed.kind === "installed" && inspection.installed.version !== undefined
+            ? { installedVersion: inspection.installed.version }
+            : inspection.installed.kind === "installed" && inspection.installed.commit !== undefined
+                ? { installedVersion: inspection.installed.commit.slice(0, 7) }
+                : {}),
         available: packageVersionLabel(inspection.available),
-        status: classifyUpdate(inspection.installed, inspection.available, inspection.availableCommit, inspection.installedCommitIsAncestor),
+        status: packageRowStatus(inspection),
         ...(inspection.drift === undefined ? {} : { drift: inspection.drift }),
     };
 }
-/** Host, evidence and status of one row, as the Installations line prints it. */
-export function describePackageRow(row) {
-    const drift = row.drift === undefined ? "" : `  drift: ${row.drift}`;
-    return `${row.selection.host}  ${row.installed}  available ${row.available}  ${packageStatusLabel(row.status)}${drift}`;
+function packageRowStatus(inspection) {
+    const status = classifyUpdate(inspection.installed, inspection.available, inspection.availableCommit, inspection.installedCommitIsAncestor);
+    if (status === "unknown") {
+        return {
+            kind: "unknown",
+            reason: inspection.installed.kind === "installed" && /local modifications|local changes/iu.test(inspection.installed.reason ?? "")
+                ? "local changes"
+                : "unknown",
+        };
+    }
+    return { kind: status };
 }
 /** One component of the inventory; the executable effect and a host-only owner are called out. */
 export function describePackageComponent(component) {

package/dist/src/tui/panel-parts.js

@@ -1,6 +1,17 @@
-import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { Box, Text } from "ink";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text, useWindowSize } from "ink";
 import { theme } from "./theme.js";
+import { previewViewport } from "./preview-window.js";
+/** A titled, color-independent boundary for a focused interaction or result. */
+export function BorderPanel({ title, children }) {
+    return (_jsxs(Box, { borderStyle: "round", borderColor: theme.border, paddingX: 1, flexDirection: "column", children: [_jsx(Text, { color: theme.title, bold: true, children: title }), children] }));
+}
+export function FieldLine({ label, value }) {
+    return _jsxs(Text, { children: [_jsx(Text, { color: theme.field, children: label }), _jsxs(Text, { color: theme.value, children: [" ", value] })] });
+}
+export function DecisionPrompt({ children }) {
+    return (_jsxs(Text, { children: [_jsx(Text, { color: theme.warning, children: children }), " ", _jsx(Text, { color: theme.success, bold: true, children: "y" }), _jsx(Text, { color: theme.legend, children: "/" }), _jsx(Text, { color: theme.error, children: "n" })] }));
+}
 /** The `> [x] 1 name` rows of a checklist; the caller renders the header. */
 export function ChecklistLines({ choices, cursor, isSelected, keyOf, label }) {
     return (_jsx(_Fragment, { children: choices.map((choice, position) => (_jsxs(Text, { children: [position === cursor ? "> " : "  ", "[", isSelected(choice) ? "x" : " ", "] ", position + 1, " ", label(choice)] }, keyOf(choice)))) }));
@@ -10,14 +21,35 @@ export function HostChecklist({ choices, cursor, selected }) {
     return _jsx(ChecklistLines, { choices: choices, cursor: cursor, isSelected: (host) => selected.includes(host), keyOf: (host) => host, label: (host) => host });
 }
 /** Preview lines; `warnFirst` colors the first one as a warning. */
+const PREVIEW_FIELD_LABELS = [
+    "File:", "Name:", "Platform:", "Status:", "Homepage:", "Owned Skills:",
+    "App:", "Environment:", "Version:", "argv:", "Executable:", "Manual:",
+    "Declaration:", "Version pattern:", "Working directory:", "Previous version:",
+    "Latest version:", "Package:", "Host:", "Source:", "Scope:", "Coordinates:", "Origin:",
+    "Available:", "Approval:", "Path:", "Blast radius:", "Warning:", "  target:", "  proposed changes:",
+    "  external command:", "  external cwd:", "  external target:",
+];
+function previewField(line) {
+    const label = PREVIEW_FIELD_LABELS.find(candidate => line.startsWith(candidate));
+    return label === undefined ? undefined : { label, value: line.slice(label.length) };
+}
 export function PreviewLines({ lines, warnFirst = false }) {
-    return (_jsx(_Fragment, { children: lines.map((line, position) => _jsx(Text, { color: warnFirst && position === 0 ? theme.warning : undefined, children: line }, position)) }));
+    return (_jsx(_Fragment, { children: lines.map((line, position) => {
+            const field = previewField(line);
+            return field ? (_jsxs(Text, { children: [_jsx(Text, { color: theme.field, children: field.label }), _jsx(Text, { color: theme.value, children: field.value })] }, position)) : _jsx(Text, { color: warnFirst && position === 0 ? theme.warning : theme.value, children: line }, position);
+        }) }));
 }
 /** Under a list: the window indicator, how many items are marked, and the last result. */
 export function ListFooter({ indicator, selectedCount, message }) {
-    return (_jsxs(_Fragment, { children: [indicator ? _jsx(Text, { color: theme.muted, children: indicator }) : null, selectedCount > 0 ? _jsxs(Text, { color: theme.muted, children: [selectedCount, " selected"] }) : null, message ? _jsx(Text, { color: message.kind === "error" ? theme.error : theme.success, children: message.text }) : null] }));
+    return (_jsxs(_Fragment, { children: [indicator ? _jsx(Text, { color: theme.muted, children: indicator }) : null, selectedCount > 0 ? _jsxs(Text, { color: theme.muted, children: [selectedCount, " selected"] }) : null, message ? (_jsx(BorderPanel, { title: message.kind === "error" ? "Result · failed" : "Result · complete", children: _jsx(Text, { color: message.kind === "error" ? theme.error : theme.success, children: message.text }) })) : null] }));
 }
 /** A preview followed by a y/n question. */
-export function PreviewConfirm({ lines, question, warnFirst }) {
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(PreviewLines, { lines: lines, warnFirst: warnFirst }), _jsx(Text, { children: question })] }));
+export function PreviewConfirm({ title = "Confirmation", lines, question, warnFirst, cursor, chrome }) {
+    const { rows, columns } = useWindowSize();
+    const viewport = cursor === undefined ? undefined : previewViewport(lines, cursor, rows || 24, columns || 80, chrome ?? { title, questions: [question], footerRows: 2 });
+    const shown = viewport?.rows ?? lines;
+    return (_jsxs(BorderPanel, { title: title, children: [_jsx(PreviewLines, { lines: shown, warnFirst: warnFirst && (viewport?.start ?? 0) === 0 }), viewport && viewport.total > viewport.height ? _jsxs(Text, { color: theme.muted, children: [viewport.start + 1, "\u2013", viewport.end, " of ", viewport.total] }) : null, viewport ? _jsxs(Text, { color: theme.legend, children: ["Review ", viewport.cursor + 1, " of ", viewport.total, " \u00B7 arrows/Pg page"] }) : null, question.includes("y/n") ? (() => {
+                const marker = question.indexOf("y/n");
+                return _jsxs(Text, { children: [_jsx(Text, { color: theme.warning, children: question.slice(0, marker) }), _jsx(Text, { color: theme.success, bold: true, children: "y" }), _jsx(Text, { color: theme.legend, children: "/" }), _jsx(Text, { color: theme.error, children: "n" }), _jsx(Text, { color: theme.legend, children: question.slice(marker + 3) })] });
+            })() : _jsx(Text, { color: theme.legend, children: question })] }));
 }

package/dist/src/tui/preview-window.js

@@ -0,0 +1,48 @@
+import stringWidth from "string-width";
+import { headerTabRowCount } from "./header-layout.js";
+const graphemes = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+function wrapLine(line, width) {
+    const segments = [...graphemes.segment(line)];
+    if (segments.length === 0)
+        return [""];
+    const wrapped = [];
+    let row = "";
+    let rowWidth = 0;
+    for (const { segment } of segments) {
+        const segmentWidth = stringWidth(segment);
+        if (row !== "" && rowWidth + segmentWidth > width) {
+            wrapped.push(row);
+            row = "";
+            rowWidth = 0;
+        }
+        row += segment;
+        rowWidth += segmentWidth;
+    }
+    wrapped.push(row);
+    return wrapped;
+}
+export function previewViewport(lines, cursor, terminalRows, terminalColumns, chrome = { title: "Confirmation", questions: ["Scroll to end before y; n cancels.", "Confirm? y/n"] }) {
+    const contentWidth = Math.max(terminalColumns - 8, 1);
+    const wrapped = lines.flatMap((line, sourceLine) => wrapLine(line, contentWidth).map((row) => ({ row, sourceLine })));
+    const previewRows = wrapped.map(({ row }) => row);
+    const headerRows = headerTabRowCount(contentWidth) + 3;
+    const titleRows = wrapLine(chrome.title, contentWidth).length;
+    const questionRows = Math.max(...chrome.questions.map(question => wrapLine(question, contentWidth).length));
+    const panelChromeRows = 2 + titleRows + questionRows + (chrome.footerRows ?? 1);
+    const reservedRows = chrome.reservedRows !== undefined && chrome.reservedRows > 0 ? Math.ceil(chrome.reservedRows) : 0;
+    const availableRows = Math.max(terminalRows - headerRows - 1 - panelChromeRows - reservedRows, 1);
+    const height = previewRows.length > availableRows ? Math.max(availableRows - 1, 1) : availableRows;
+    const selected = Math.min(Math.max(cursor, 0), Math.max(previewRows.length - 1, 0));
+    const start = Math.min(Math.max(selected - Math.floor(height / 2), 0), Math.max(previewRows.length - height, 0));
+    const end = Math.min(start + height, previewRows.length);
+    return {
+        rows: previewRows.slice(start, end),
+        sourceLines: wrapped.slice(start, end).map(({ sourceLine }) => sourceLine),
+        start,
+        end,
+        total: previewRows.length,
+        cursor: selected,
+        height,
+        reachedEnd: end === previewRows.length,
+    };
+}