@iseoane/agent-depot 0.5.2 → 0.6.1

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,116 @@ 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) };
+}
+function previewSpan(text, color, bold = false) {
+    return { text, color, bold };
+}
+function profilePreviewSpans(line) {
+    if (line.startsWith("Destination: ")) {
+        return [previewSpan("Destination:", theme.field), previewSpan(line.slice("Destination:".length), theme.value)];
+    }
+    if (line === "Preview: export portable user-global profile" || line === "Preview: import portable user-global profile") {
+        return [previewSpan("Preview:", theme.field), previewSpan(line.slice("Preview:".length), theme.value)];
+    }
+    if (line.startsWith("WARNING:"))
+        return [previewSpan(line, theme.warning)];
+    const source = /^Source (git:[^ ]+) (.+) \(included: (true|false)\)$/u.exec(line);
+    if (source)
+        return [previewSpan("Source", theme.field), previewSpan(" ", theme.value),
+            previewSpan(source[1], theme.muted), previewSpan(" ", theme.value), previewSpan(source[2], theme.value),
+            previewSpan(" (", theme.value), previewSpan("included:", theme.field), previewSpan(` ${source[3]})`, theme.value)];
+    const skill = /^Skill (.+) \[([^\]]*)\] \((latest|fixed(?: [^)]+)?)\)$/u.exec(line);
+    if (skill)
+        return [previewSpan("Skill", theme.field), previewSpan(" ", theme.value), previewSpan(skill[1], theme.value, true),
+            previewSpan(" [", theme.value), previewSpan(skill[2], theme.marker), previewSpan("] (", theme.value),
+            previewSpan(skill[3], theme.version), previewSpan(")", theme.value)];
+    const app = /^App recipe (.+) \(([^;]+); approval not transferred\)$/u.exec(line);
+    if (app)
+        return [previewSpan("App recipe", theme.field), previewSpan(" ", theme.value), previewSpan(app[1], theme.value, true),
+            previewSpan(" (", theme.value), previewSpan(app[2], theme.marker), previewSpan("; approval not transferred)", theme.value)];
+    const packageLine = /^Package (.+) from (.+) \((latest|fixed [^;]+); saved selection\)(.*)$/u.exec(line);
+    if (packageLine)
+        return [previewSpan("Package", theme.field), previewSpan(" ", theme.value),
+            previewSpan(packageLine[1], theme.value, true), previewSpan(" from ", theme.value), previewSpan(packageLine[2], theme.value),
+            previewSpan(" (", theme.value), previewSpan(packageLine[3], theme.version),
+            previewSpan(`; saved selection)${packageLine[4]}`, theme.value)];
+    const replica = /^Replica intent (Installed Skill|Installed App|Installed Package) (.+?)(; .*)?$/u.exec(line);
+    if (replica)
+        return [previewSpan("Replica intent", theme.field), previewSpan(" ", theme.value),
+            previewSpan(replica[1], theme.field), previewSpan(" ", theme.value), previewSpan(replica[2], theme.value, true),
+            previewSpan(replica[3] ?? "", theme.value)];
+    if (line.startsWith("  Source "))
+        return [previewSpan("  Source", theme.field), previewSpan(line.slice("  Source".length), theme.value)];
+    if (line.startsWith("Origin replica intent:"))
+        return [previewSpan("Origin replica intent:", theme.field),
+            previewSpan(line.slice("Origin replica intent:".length), theme.value)];
+    const imported = /^(add|same|conflict|skip)( \(discovery inclusion is not imported\))?: (Source|Skill|App recipe|Package) (.+)$/u.exec(line);
+    if (imported)
+        return [previewSpan(`${imported[1]}${imported[2] ?? ""}:`, theme.field), previewSpan(` ${imported[3]}`, theme.field),
+            previewSpan(" ", theme.value), previewSpan(imported[4], theme.value, true)];
+    const hosts = /^ {2}hosts: ([^;]*); version policy: (latest|fixed(?: .+)?)$/u.exec(line);
+    if (hosts)
+        return [previewSpan("  hosts:", theme.field), previewSpan(" ", theme.value),
+            previewSpan(hosts[1], theme.marker), previewSpan("; ", theme.value), previewSpan("version policy:", theme.field),
+            previewSpan(` ${hosts[2]}`, theme.version)];
+    return undefined;
+}
+function visiblePreviewSpans(spans, offset, length) {
+    const end = offset + length;
+    let spanStart = 0;
+    const visible = [];
+    for (const span of spans) {
+        const spanEnd = spanStart + span.text.length;
+        const start = Math.max(offset, spanStart);
+        const stop = Math.min(end, spanEnd);
+        if (start < stop)
+            visible.push({ ...span, text: span.text.slice(start - spanStart, stop - spanStart) });
+        spanStart = spanEnd;
+    }
+    return visible;
+}
+function PreviewLine({ line, position, warnFirst, logicalLine, offset = 0 }) {
+    const profileSpans = logicalLine === undefined ? profilePreviewSpans(line) : profilePreviewSpans(logicalLine);
+    if (profileSpans) {
+        const spans = logicalLine === undefined ? profileSpans : visiblePreviewSpans(profileSpans, offset, line.length);
+        return _jsx(Text, { children: spans.map((span, index) => _jsx(Text, { color: span.color, bold: span.bold, children: span.text }, index)) }, position);
+    }
+    const field = previewField(logicalLine ?? line);
+    if (field) {
+        const fieldSpans = [previewSpan(field.label, theme.field), previewSpan(field.value, theme.value)];
+        const spans = logicalLine === undefined ? fieldSpans : visiblePreviewSpans(fieldSpans, offset, line.length);
+        return _jsx(Text, { children: spans.map((span, index) => _jsx(Text, { color: span.color, children: span.text }, index)) }, position);
+    }
+    return _jsx(Text, { color: warnFirst && position === 0 ? theme.warning : theme.value, children: line }, position);
+}
 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) => _jsx(PreviewLine, { line: line, position: position, warnFirst: warnFirst }, 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: [viewport ? shown.map((line, position) => {
+                const sourceLine = viewport.sourceLines[position];
+                return _jsx(PreviewLine, { line: line, position: position, warnFirst: Boolean(warnFirst && viewport.start === 0), logicalLine: lines[sourceLine], offset: viewport.sourceOffsets[position] }, position);
+            }) : _jsx(PreviewLines, { lines: shown, warnFirst: warnFirst }), 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,51 @@
+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 [{ row: "", offset: 0 }];
+    const wrapped = [];
+    let row = "";
+    let rowWidth = 0;
+    let rowOffset = 0;
+    for (const { segment, index } of segments) {
+        const segmentWidth = stringWidth(segment);
+        if (row !== "" && rowWidth + segmentWidth > width) {
+            wrapped.push({ row, offset: rowOffset });
+            row = "";
+            rowWidth = 0;
+            rowOffset = index;
+        }
+        row += segment;
+        rowWidth += segmentWidth;
+    }
+    wrapped.push({ row, offset: rowOffset });
+    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, offset }) => ({ row, sourceLine, offset })));
+    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),
+        sourceOffsets: wrapped.slice(start, end).map(({ offset }) => offset),
+        start,
+        end,
+        total: previewRows.length,
+        cursor: selected,
+        height,
+        reachedEnd: end === previewRows.length,
+    };
+}