@iseoane/agent-depot 0.5.2 → 0.6.1

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

@@ -9,8 +9,10 @@ export function modeReducer(mode, event) {
             return mode.kind === "input" ? { kind: "input", value: event.value } : mode;
         case "confirm":
             return event.action === "refresh"
-                ? { kind: "confirm", action: "refresh", sources: event.sources }
+                ? { kind: "confirm", action: "refresh", sources: event.sources, cursor: 0 }
                 : { kind: "confirm", action: "remove", source: event.source };
+        case "preview-cursor":
+            return mode.kind === "confirm" && mode.action === "refresh" ? { ...mode, cursor: event.cursor } : mode;
         case "busy":
             return { kind: "busy" };
         case "done":

package/dist/src/tui/sources-recipes.js

@@ -7,16 +7,31 @@ import { BUILT_IN_SOURCE } from "../sources.js";
 import { handleCatalogActionKey } from "./catalog-flow.js";
 import { ActionPanel } from "./catalog-panel.js";
 import { hasUnmanagedCopy, isInstalled, loadInstalledSkills } from "./catalog-installs.js";
-import { appName, appStepLines } from "./app-actions.js";
+import { appName, appRecipePreviewLines, appStepLines } from "./app-actions.js";
 import { errorText } from "./batch.js";
 import { useMounted } from "./view-state.js";
-import { PreviewConfirm } from "./panel-parts.js";
-import { answerYesNo } from "./mode-keys.js";
+import { BorderPanel, DecisionPrompt, PreviewConfirm } from "./panel-parts.js";
+import { answerYesNo, movePreviewCursor } from "./mode-keys.js";
+import { previewViewport } from "./preview-window.js";
 import { theme } from "./theme.js";
+function recipeApprovalChrome(entry) {
+    return {
+        title: "Recipe approval · does not install",
+        questions: [`Approve ${appName(entry)}? y/n · recipe approval does not install the App.`, "Scroll to end before y; n cancels."],
+        footerRows: 2,
+    };
+}
+function uninstallChrome(mode) {
+    return {
+        title: mode.kind === "uninstall-manual" ? "App manual uninstall" : "App uninstall confirmation",
+        questions: [mode.kind === "uninstall-manual" ? "Complete the manual uninstall, then check now? y/n" : `Uninstall ${appName(mode.removal.entry)}? y/n`, "Scroll to end before y; n cancels."],
+        footerRows: 2,
+    };
+}
 /**
  * Recipe loading and captured actions; Sources owns the single list and cursor.
  */
-export function useSourcesRecipes({ operations, environment, onCapturingChange, highlightedFile, }) {
+export function useSourcesRecipes({ operations, environment, onCapturingChange, highlightedFile, terminalRows, terminalColumns, }) {
     const homeDirectory = environment?.homeDirectory;
     const appEnvironment = environment?.appEnvironment;
     const apps = useMemo(() => createAppOperations({
@@ -48,13 +63,8 @@ export function useSourcesRecipes({ operations, environment, onCapturingChange,
             if (mounted.current) {
                 setMode({
                     kind: "approve",
-                    entry, removeAfterApproval,
-                    lines: [
-                        `File: ${entry.file}`,
-                        `Platform: ${entry.recipe?.platform ?? "all"}`,
-                        `Status: ${status}`,
-                        ...steps.flatMap(step => [step.step, ...appStepLines(step)]),
-                    ],
+                    entry, removeAfterApproval, cursor: 0,
+                    lines: appRecipePreviewLines(entry, status, steps),
                 });
             }
         }
@@ -183,7 +193,13 @@ export function useSourcesRecipes({ operations, environment, onCapturingChange,
         }
         const cancel = () => setMode({ kind: "browse" });
         if (current.kind === "approve") {
-            answerYesNo(input, key, () => {
+            const viewport = previewViewport(current.lines, current.cursor, terminalRows, terminalColumns, recipeApprovalChrome(current.entry));
+            const cursor = movePreviewCursor(current.cursor, viewport.total, input, key, viewport.height);
+            if (cursor !== undefined)
+                setMode({ ...current, cursor });
+            else if (input === "n" || key.escape)
+                cancel();
+            else if (input === "y" && viewport.reachedEnd) {
                 setMode({ kind: "busy" });
                 void apps.approve(current.entry).then(async () => {
                     await reload();
@@ -199,7 +215,7 @@ export function useSourcesRecipes({ operations, environment, onCapturingChange,
                         cancel();
                     }
                 });
-            }, cancel);
+            }
             return true;
         }
         if (current.kind === "uninstall-question") {
@@ -207,7 +223,7 @@ export function useSourcesRecipes({ operations, environment, onCapturingChange,
                 setMode({ kind: "busy" });
                 void apps.planLifecycle(current.removal.entry, "uninstall").then(plan => {
                     if (mounted.current)
-                        setMode({ kind: !plan.argv && plan.manual ? "uninstall-manual" : "uninstall-confirm", removal: current.removal, plan });
+                        setMode({ kind: !plan.argv && plan.manual ? "uninstall-manual" : "uninstall-confirm", removal: current.removal, plan, cursor: 0 });
                 }, error => { if (mounted.current) {
                     setError(errorText(error));
                     cancel();
@@ -216,7 +232,15 @@ export function useSourcesRecipes({ operations, environment, onCapturingChange,
             return true;
         }
         if (current.kind === "uninstall-confirm" || current.kind === "uninstall-manual") {
-            answerYesNo(input, key, () => { void uninstall(current); }, cancel);
+            const lines = appStepLines(current.plan);
+            const viewport = previewViewport(lines, current.cursor, terminalRows, terminalColumns, uninstallChrome(current));
+            const cursor = movePreviewCursor(current.cursor, viewport.total, input, key, viewport.height);
+            if (cursor !== undefined)
+                setMode({ ...current, cursor });
+            else if (input === "n" || key.escape)
+                cancel();
+            else if (input === "y" && viewport.reachedEnd)
+                void uninstall(current);
             return true;
         }
         if (current.kind === "remove") {
@@ -272,8 +296,15 @@ export function useSourcesRecipes({ operations, environment, onCapturingChange,
         }
     }, [apps, mounted]);
     useEffect(() => { void reload(); }, [reload]);
-    const panel = (_jsxs(Box, { flexDirection: "column", children: [loadError ? _jsxs(Text, { color: theme.error, children: ["Error loading App recipes: ", loadError] }) : null, error ? _jsx(Text, { color: theme.error, children: error }) : null, notice ? _jsx(Text, { color: theme.success, children: notice }) : null, mode.kind === "guide" ? (_jsxs(Text, { children: ["1 With the AI skill · install if missing, then copy the prompt\n", "2 Manual · write a recipe using the schema\nn or Esc closes"] })) : null, mode.kind === "manual" ? (_jsxs(Text, { children: ["Write a JSON recipe in ", apps.directory, "\n", "Schema: agent-depot app schema \u00B7 n or Esc closes"] })) : null, mode.kind === "prompt" ? (_jsxs(Text, { children: ["Use the agent-depot-apprecipe skill to create the recipe for <app>", "\n", "Recipes: ", apps.directory, " \u00B7 n or Esc closes"] })) : null, mode.kind === "install" ? _jsx(ActionPanel, { mode: mode.action }) : null, mode.kind === "busy" ? _jsx(Text, { children: "Working..." }) : null, mode.kind === "approve" ? (_jsx(PreviewConfirm, { lines: mode.lines, question: `Approve ${appName(mode.entry)}? y/n` })) : null, mode.kind === "uninstall-question" ? (_jsxs(Text, { children: ["App ", appName(mode.removal.entry), " is installed or tracked", mode.removal.installedVersion ? ` (${mode.removal.installedVersion})` : "", ". Uninstall it before removing the recipe? y/n (n cancels removal)"] })) : null, mode.kind === "uninstall-confirm" || mode.kind === "uninstall-manual" ? (_jsx(PreviewConfirm, { lines: appStepLines(mode.plan), question: mode.kind === "uninstall-manual"
-                    ? "Complete the manual uninstall, then check now? y/n"
-                    : `Uninstall ${appName(mode.removal.entry)}? y/n` })) : null, mode.kind === "remove" ? (_jsx(PreviewConfirm, { lines: [`Delete recipe: ${mode.removal.file}`, "Only this recipe file or symlink will be removed; App data and Host configuration are not deleted."], question: `Remove recipe for ${appName(mode.removal.entry)}? y/n` })) : null] }));
-    return { rows, handleKey, startAdd, reload, clearMessage: () => { setError(undefined); setNotice(undefined); }, panel, directory: apps.directory };
+    const panel = (_jsxs(Box, { flexDirection: "column", children: [loadError ? _jsxs(Text, { color: theme.error, children: ["Error loading App recipes: ", loadError] }) : null, error ? _jsx(Text, { color: theme.error, children: error }) : null, notice ? _jsx(Text, { color: theme.success, children: notice }) : null, mode.kind === "guide" ? (_jsxs(BorderPanel, { title: "Add an App recipe", children: [_jsx(Text, { children: "1 With the AI skill \u00B7 install if missing, then copy the prompt" }), _jsx(Text, { children: "2 Manual \u00B7 write a recipe using the schema" }), _jsx(Text, { children: "n or Esc closes" })] })) : null, mode.kind === "manual" ? (_jsxs(BorderPanel, { title: "Write an App recipe", children: [_jsxs(Text, { children: ["Write a JSON recipe in ", apps.directory] }), _jsx(Text, { children: "Schema: agent-depot app schema \u00B7 n or Esc closes" })] })) : null, mode.kind === "prompt" ? (_jsxs(BorderPanel, { title: "App recipe authoring prompt", children: [_jsx(Text, { children: "Use the agent-depot-apprecipe skill to create the recipe for <app>" }), _jsxs(Text, { children: ["Recipes: ", apps.directory, " \u00B7 n or Esc closes"] })] })) : null, mode.kind === "install" ? _jsx(ActionPanel, { mode: mode.action }) : null, mode.kind === "busy" ? _jsx(BorderPanel, { title: "App recipe workflow", children: _jsx(Text, { children: "Working..." }) }) : null, mode.kind === "approve" ? (() => {
+                const chrome = recipeApprovalChrome(mode.entry);
+                const viewport = previewViewport(mode.lines, mode.cursor, terminalRows, terminalColumns, chrome);
+                return _jsx(PreviewConfirm, { title: chrome.title, lines: mode.lines, cursor: mode.cursor, question: viewport.reachedEnd ? chrome.questions[0] : chrome.questions[1], chrome: chrome });
+            })() : null, mode.kind === "uninstall-question" ? (_jsxs(BorderPanel, { title: "Uninstall before recipe removal", children: [_jsxs(Text, { children: ["App ", appName(mode.removal.entry), " is installed or tracked", mode.removal.installedVersion ? ` (${mode.removal.installedVersion})` : "", "."] }), _jsxs(Text, { children: [_jsx(DecisionPrompt, { children: "Uninstall it before removing the recipe?" }), _jsx(Text, { color: theme.legend, children: "(n cancels removal)" })] })] })) : null, mode.kind === "uninstall-confirm" || mode.kind === "uninstall-manual" ? (() => {
+                const chrome = uninstallChrome(mode);
+                const lines = appStepLines(mode.plan);
+                const viewport = previewViewport(lines, mode.cursor, terminalRows, terminalColumns, chrome);
+                return _jsx(PreviewConfirm, { title: chrome.title, lines: lines, cursor: mode.cursor, question: viewport.reachedEnd ? chrome.questions[0] : chrome.questions[1], chrome: chrome });
+            })() : null, mode.kind === "remove" ? (_jsx(PreviewConfirm, { title: "Recipe removal", lines: [`Delete recipe: ${mode.removal.file}`, "Only this recipe file or symlink will be removed; App data and Host configuration are not deleted."], question: `Remove recipe for ${appName(mode.removal.entry)}? y/n` })) : null] }));
+    return { rows, handleKey, startAdd, reload, clearMessage: () => { setError(undefined); setNotice(undefined); }, panel, directory: apps.directory, capturing: mode.kind !== "browse" };
 }

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

@@ -1,11 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } 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 { useCallback, useEffect, useReducer, useRef, useState } from "react";
 import { initialMode, modeReducer } from "./sources-mode.js";
 import { rowStyle, theme } from "./theme.js";
 import { computeWindow, pageStep, useListHeight } from "./window.js";
 import { useKeys } from "./keys.js";
 import { useSourcesRecipes } from "./sources-recipes.js";
+import { BorderPanel, DecisionPrompt, FieldLine, PreviewLines } from "./panel-parts.js";
+import { previewViewport } from "./preview-window.js";
+import { movePreviewCursor } from "./mode-keys.js";
 /** Footer keys for the selected row; App seeds the footer before the view reports a selection. */
 export function sourceRowHints(row) {
     if (row === undefined)
@@ -37,7 +40,18 @@ async function refreshEach(operations, targets) {
 function errorText(error) {
     return error instanceof Error ? error.message : String(error);
 }
+function refreshPreviewLines(sources) {
+    return sources.map(source => `Source: refresh Git Source ${source.id} from ${source.url}`);
+}
+function refreshViewport(mode, rows, columns) {
+    return previewViewport(refreshPreviewLines(mode.sources), mode.cursor, rows, columns, {
+        title: "Refresh Git Sources",
+        questions: ["Scroll to end; n cancels.", "Refresh these Sources? y/n"],
+        footerRows: 2,
+    });
+}
 export function SourcesView({ operations, onCapturingChange, onOpenCatalog, listHeight, environment, onHintsChange }) {
+    const { columns, rows: terminalRows } = useWindowSize();
     const height = useListHeight(listHeight, 9);
     const [state, setState] = useState({ status: "loading" });
     // The highlight follows the source id; the index is only the fallback once that source is gone.
@@ -111,6 +125,8 @@ export function SourcesView({ operations, onCapturingChange, onOpenCatalog, list
             const row = rows[resolveIndex(rows, selectionRef.current)];
             return row?.kind === "app" ? row.recipe.entry.file : undefined;
         },
+        terminalRows: terminalRows || 24,
+        terminalColumns: columns || 80,
     });
     const rows = [
         ...sources.map((source) => ({ id: source.id, kind: "skills", source })),
@@ -119,7 +135,9 @@ export function SourcesView({ operations, onCapturingChange, onOpenCatalog, list
     rowsRef.current = rows;
     const selected = resolveIndex(rows, selection);
     const selectedRow = rows[selected];
-    const hints = sourceRowHints(selectedRow);
+    const hints = mode.kind === "confirm" && mode.action === "refresh"
+        ? "↑↓/Pg page · y refresh · n cancel"
+        : sourceRowHints(selectedRow);
     useEffect(() => { onHintsChange?.(hints); }, [hints, onHintsChange]);
     const select = (index) => {
         setMessage(undefined);
@@ -221,6 +239,16 @@ export function SourcesView({ operations, onCapturingChange, onOpenCatalog, list
             return;
         }
         if (mode.kind === "confirm") {
+            if (mode.action === "refresh") {
+                const viewport = refreshViewport(mode, terminalRows || 24, columns || 80);
+                const cursor = movePreviewCursor(mode.cursor, viewport.total, input, key, viewport.height);
+                if (cursor !== undefined) {
+                    dispatch({ type: "preview-cursor", cursor });
+                    return;
+                }
+                if (input === "y" && !viewport.reachedEnd)
+                    return;
+            }
             if (input === "y") {
                 if (mode.action === "refresh") {
                     const { sources: targets } = mode;
@@ -296,28 +324,36 @@ export function SourcesView({ operations, onCapturingChange, onOpenCatalog, list
     // Sources removed since they were marked no longer count.
     const selectedCount = sources.filter((source) => marked.has(source.id)).length;
     if (state.status === "loading")
-        return _jsx(Text, { children: "Loading sources..." });
+        return _jsx(BorderPanel, { title: "Sources", children: _jsx(FieldLine, { label: "Status", value: "Loading sources..." }) });
     if (state.status === "error")
-        return _jsxs(Text, { color: theme.error, children: ["Error: ", state.message] });
+        return _jsx(BorderPanel, { title: "Source error", children: _jsx(Text, { color: theme.error, children: state.message }) });
     const window = computeWindow(rows.length, selected, height);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: theme.muted, children: ["      ", "ID  KIND  LOCATION / STATUS"] }), builtin ? _jsxs(Text, { color: theme.muted, children: ["    ", builtin.id, "  skills  included"] }) : null, rows.length === 0 ? _jsx(Text, { children: "No sources or App recipes \u00B7 n to add" }) : null, rows.slice(window.start, window.end).map((row, offset) => {
+    if (mode.kind === "confirm")
+        return _jsx(Prompt, { mode: mode, terminalRows: terminalRows || 24, terminalColumns: columns || 80 });
+    if (recipes.capturing)
+        return _jsx(Box, { flexDirection: "column", children: recipes.panel });
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: theme.muted, children: ["      ", "ID  KIND  LOCATION / STATUS"] }), builtin ? _jsxs(Text, { children: ["    ", _jsx(Text, { color: theme.value, children: builtin.id }), _jsx(Text, { color: theme.legend, children: "  " }), _jsx(Text, { color: theme.field, children: "skills" }), _jsx(Text, { color: theme.legend, children: "  " }), _jsx(Text, { color: theme.warning, children: "included" })] }) : null, rows.length === 0 ? _jsx(Text, { children: "No sources or App recipes \u00B7 n to add" }) : null, rows.slice(window.start, window.end).map((row, offset) => {
                 const index = window.start + offset;
                 const id = row.kind === "skills" ? row.source.id : row.recipe.entry.recipe?.name ?? row.recipe.entry.file.split(/[\\/]/u).pop();
-                return (_jsxs(Text, { ...rowStyle(index === selected), children: [index === selected ? "> " : "  ", row.kind === "skills" ? (marked.has(row.id) ? "[x] " : "[ ] ") : "    ", id, "  ", row.kind, "  ", row.kind === "skills" ? row.source.url : `${row.recipe.entry.file} · ${row.recipe.status}`] }, row.id));
-            }), window.indicator ? _jsx(Text, { color: theme.muted, children: window.indicator }) : null, selectedCount > 0 ? _jsxs(Text, { children: [selectedCount, " selected"] }) : null, recipes.panel, _jsx(Prompt, { mode: mode }), message ? _jsx(Text, { color: message.kind === "error" ? theme.error : theme.success, children: message.text }) : null] }));
+                return (_jsxs(Text, { ...rowStyle(index === selected), children: [index === selected ? "> " : "  ", row.kind === "skills" ? (marked.has(row.id) ? "[x] " : "[ ] ") : "    ", _jsx(Text, { color: theme.value, children: id }), _jsx(Text, { color: theme.legend, children: "  " }), _jsx(Text, { color: theme.field, children: row.kind }), _jsx(Text, { color: theme.legend, children: "  " }), row.kind === "skills"
+                            ? _jsx(Text, { color: theme.value, children: row.source.url })
+                            : _jsxs(_Fragment, { children: [_jsx(Text, { color: theme.value, children: row.recipe.entry.file }), _jsx(Text, { color: theme.legend, children: " \u00B7 " }), _jsx(Text, { color: row.recipe.status === "approved" ? theme.success : theme.warning, children: row.recipe.status })] })] }, row.id));
+            }), window.indicator ? _jsx(Text, { color: theme.muted, children: window.indicator }) : null, selectedCount > 0 ? _jsxs(Text, { children: [selectedCount, " selected"] }) : null, recipes.panel, _jsx(Prompt, { mode: mode }), message ? (_jsx(BorderPanel, { title: message.kind === "error" ? "Source action · failed" : "Source action · complete", children: _jsx(Text, { color: message.kind === "error" ? theme.error : theme.success, children: message.text }) })) : null] }));
 }
-function Prompt({ mode }) {
+function Prompt({ mode, terminalRows = 24, terminalColumns = 80 }) {
     if (mode.kind === "add-kind")
         return _jsx(Text, { children: "Add: 1 Git Source (skills + Packages) \u00B7 2 App recipe (Esc cancel)" });
     if (mode.kind === "input")
         return _jsxs(Text, { children: ["URL: ", mode.value] });
     if (mode.kind === "busy")
-        return _jsx(Text, { children: "Working..." });
+        return _jsx(BorderPanel, { title: "Sources", children: _jsx(FieldLine, { label: "Status", value: "Working..." }) });
     if (mode.kind === "confirm") {
-        const lines = mode.action === "refresh"
-            ? mode.sources.map((source) => `refresh Git Source ${source.id} from ${source.url}`)
-            : [`remove Git Source ${mode.source.id} from ${mode.source.url}`];
-        return _jsxs(Text, { children: [lines.join("\n"), "\n", "[y/n]"] });
+        return mode.action === "refresh" ? (() => {
+            const viewport = refreshViewport(mode, terminalRows, terminalColumns);
+            return (_jsxs(BorderPanel, { title: "Refresh Git Sources", children: [_jsx(PreviewLines, { lines: viewport.rows }), viewport.total > viewport.height ? _jsxs(Text, { color: theme.legend, children: [viewport.start + 1, "\u2013", viewport.end, " of ", viewport.total] }) : null, _jsxs(Text, { color: theme.legend, children: ["Review ", viewport.cursor + 1, " of ", viewport.total, " \u00B7 arrows/Pg page"] }), viewport.reachedEnd
+                        ? _jsx(DecisionPrompt, { children: "Refresh these Sources?" })
+                        : _jsx(Text, { color: theme.legend, children: "Scroll to end; n cancels." })] }));
+        })() : (_jsxs(BorderPanel, { title: "Remove Git Source", children: [_jsx(FieldLine, { label: "Source", value: `remove Git Source ${mode.source.id} from ${mode.source.url}` }), _jsx(DecisionPrompt, { children: "Remove this Source?" })] }));
     }
     return null;
 }

package/dist/src/tui/text-wrap.js

@@ -0,0 +1,53 @@
+import stringWidth from "string-width";
+const graphemes = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+/** Split text on grapheme boundaries so wide and combining characters wrap at `width` columns. */
+export function wrapText(value, width) {
+    const lines = [];
+    let line = "";
+    let lineWidth = 0;
+    for (const { segment } of graphemes.segment(value)) {
+        const segmentWidth = stringWidth(segment);
+        if (line && lineWidth + segmentWidth > width) {
+            lines.push(line);
+            line = "";
+            lineWidth = 0;
+        }
+        line += segment;
+        lineWidth += segmentWidth;
+    }
+    return [...lines, line];
+}
+/** `lines` capped to `maxRows`, with the last visible row shortened to `width` plus an ellipsis. */
+export function fitLines(lines, maxRows, width) {
+    if (maxRows <= 0)
+        return [];
+    if (lines.length <= maxRows)
+        return lines;
+    const visible = lines.slice(0, maxRows);
+    let last = "";
+    let used = 0;
+    for (const { segment } of graphemes.segment(visible[maxRows - 1])) {
+        const segmentWidth = stringWidth(segment);
+        if (used + segmentWidth > width - 1)
+            break;
+        last += segment;
+        used += segmentWidth;
+    }
+    visible[maxRows - 1] = `${last}…`;
+    return visible;
+}
+/** One line shortened to `width` columns plus an ellipsis, for single-row labels. */
+export function clipText(value, width) {
+    if (stringWidth(value) <= width)
+        return value;
+    let last = "";
+    let used = 0;
+    for (const { segment } of graphemes.segment(value)) {
+        const segmentWidth = stringWidth(segment);
+        if (used + segmentWidth > Math.max(width - 1, 0))
+            break;
+        last += segment;
+        used += segmentWidth;
+    }
+    return `${last}…`;
+}

package/dist/src/tui/theme.js

@@ -1,19 +1,26 @@
 /** Central xeo palette for the TUI; views take every colour from here. */
 export const theme = {
-    /** Title and active tab. */
+    /** Panel titles and active labels use Xeo accent pink. */
+    title: "#ff2e9a",
     accent: "#ff2e9a",
-    /** Group nodes and selection text. */
+    /** Borders and group nodes. */
+    border: "#7aa2f7",
     group: "#7aa2f7",
-    /** Markers such as hosts and versions. */
-    marker: "#449dab",
+    /** Field names and markers such as hosts. */
+    field: "#7aa2f7",
+    marker: "#7aa2f7",
+    /** Primary and emphasized values. */
+    text: "#a9b1d6",
+    value: "#c0caf5",
+    version: "#ff9e64",
     success: "#9ece6a",
     warning: "#e0af68",
     error: "#f7768e",
-    /** Hints and footer. */
+    /** Legends, hints and footer. */
+    legend: "#565f89",
     muted: "#414868",
-    /** Inactive tabs. */
+    /** Inactive tabs and selected-row background. */
     inactive: "#565f89",
-    /** Background of the selected row. */
     selection: "#292e42",
 };
 /** Columns assumed when the terminal width is unknown. */

package/dist/src/tui/updates-flow.js

@@ -49,7 +49,7 @@ export function useUpdatesFlow(inputs) {
         try {
             const prepared = await prepareUpdates(current, selected);
             if (mounted.current)
-                setMode({ kind: "preview", prepared });
+                setMode({ kind: "preview", prepared, cursor: 0 });
         }
         catch (error) {
             if (!mounted.current)
@@ -72,7 +72,7 @@ export function useUpdatesFlow(inputs) {
                     resolve(done);
                 };
                 pendingAnswer.current = answer;
-                setMode({ kind: "manual", plan, reason, answer });
+                setMode({ kind: "manual", plan, reason, answer, cursor: 0 });
             }));
             result = { kind: outcome.failed === 0 ? "ok" : "error", lines: outcome.lines };
         }

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

@@ -1,4 +1,4 @@
-import { answerYesNo } from "./mode-keys.js";
+import { answerYesNo, movePreviewCursor } from "./mode-keys.js";
 import { pageStep } from "./window.js";
 const SCOPE_KEYS = new Map([["t", "all"], ["p", "project"], ["g", "user-global"]]);
 /** Moves the cursor with the arrows, j/k and paging; returns whether the key was one of them. */
@@ -61,18 +61,28 @@ function handleBrowseKey(context, input, key) {
         context.changeScope(scope);
     else if (input === "r")
         context.recheck();
+    else if (input === "u")
+        context.startPreview();
     else
         foldKey(context, snapshot, key);
 }
 function handlePreviewKey(context, mode, input, key) {
+    const metrics = context.previewMetrics(mode);
+    const cursor = movePreviewCursor(mode.cursor, metrics.length, input, key, metrics.pageSize);
+    if (cursor !== undefined) {
+        context.setMode({ ...mode, cursor });
+        return;
+    }
     if (mode.prepared.applicable.length === 0) {
         if (key.escape || key.return || input === "n")
             context.cancel();
         return;
     }
     answerYesNo(input, key, () => {
+        if (!context.previewAtEnd(mode))
+            return;
         if (mode.prepared.nonCanonicalPaths.length > 0)
-            context.setMode({ ...mode, kind: "confirm-paths" });
+            context.setMode({ ...mode, kind: "confirm-paths", cursor: 0 });
         else
             context.apply(mode.prepared, []);
     }, context.cancel);
@@ -80,8 +90,16 @@ function handlePreviewKey(context, mode, input, key) {
 /** Handles a key in the current Updates mode; `busy` ignores keys. */
 export function handleUpdatesKey(context, mode, input, key) {
     switch (mode.kind) {
-        case "manual":
+        case "manual": {
+            const metrics = context.previewMetrics(mode);
+            const cursor = movePreviewCursor(mode.cursor, metrics.length, input, key, metrics.pageSize);
+            if (cursor !== undefined) {
+                context.setMode({ ...mode, cursor });
+                return;
+            }
             answerYesNo(input, key, () => {
+                if (!context.previewAtEnd(mode))
+                    return;
                 context.setMode({ kind: "busy", label: "Checking App version..." });
                 mode.answer(true);
             }, () => {
@@ -89,15 +107,26 @@ export function handleUpdatesKey(context, mode, input, key) {
                 mode.answer(false);
             });
             return;
+        }
         case "browse":
             handleBrowseKey(context, input, key);
             return;
         case "preview":
             handlePreviewKey(context, mode, input, key);
             return;
-        case "confirm-paths":
-            answerYesNo(input, key, () => context.apply(mode.prepared, mode.prepared.nonCanonicalPaths), context.cancel);
+        case "confirm-paths": {
+            const metrics = context.previewMetrics(mode);
+            const cursor = movePreviewCursor(mode.cursor, metrics.length, input, key, metrics.pageSize);
+            if (cursor !== undefined) {
+                context.setMode({ ...mode, cursor });
+                return;
+            }
+            answerYesNo(input, key, () => {
+                if (context.previewAtEnd(mode))
+                    context.apply(mode.prepared, mode.prepared.nonCanonicalPaths);
+            }, context.cancel);
             return;
+        }
         default:
             return;
     }

package/dist/src/tui/updates-model.js

@@ -5,9 +5,11 @@ export const PHASE_LABEL = { refreshing: REFRESHING, checking: CHECKING };
 export function describeUnknownReasons(rows) {
     const newer = rows.filter((row) => /^installed by a newer agent depot/i.test(row.reason)).length;
     const pinned = rows.filter((row) => /^pinned to agent depot/i.test(row.reason)).length;
+    const localChanges = rows.filter((row) => row.kind === "package" && /local modifications|local changes/i.test(row.reason)).length;
     const parts = [
         ...(newer > 0 ? [`${newer} installed by a newer Agent Depot`] : []),
         ...(pinned > 0 ? [`${pinned} pinned to another Agent Depot`] : []),
+        ...(localChanges > 0 ? [`${localChanges} Package update comparison unavailable because the checkout has local changes`] : []),
     ];
     return parts.length === 0 ? "" : ` (${parts.join(", ")})`;
 }

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

@@ -1,13 +1,30 @@
-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 { rowStyle, theme } from "./theme.js";
+import { BorderPanel, FieldLine, PreviewConfirm } from "./panel-parts.js";
+import { previewViewport } from "./preview-window.js";
 import { CHECKING, describeRefresh, describeUnknownReasons, REFRESHING } from "./updates-model.js";
-import { formatAgo } from "./updates.js";
-import { PreviewLines } from "./panel-parts.js";
+import { formatAgo, previewLineText } from "./updates.js";
+import { updateModePreviewChrome, updateModePreviewLines, updateModeQuestion } from "./updates-preview.js";
+function updateResultField(line, defaultOk) {
+    if (line.startsWith("Update summary: ")) {
+        const successful = /^Update summary: \d+ updated, 0 failed$/.test(line);
+        return { ok: successful, label: "Update summary:", value: line.slice("Update summary: ".length) };
+    }
+    if (line.startsWith("Updated "))
+        return { ok: true, label: "Updated", value: line.slice("Updated ".length) };
+    if (line.startsWith("Failed "))
+        return { ok: false, label: "Failed", value: line.slice("Failed ".length) };
+    if (line.startsWith("Cancelled "))
+        return { ok: false, label: "Cancelled", value: line.slice("Cancelled ".length) };
+    if (line === "Update cancelled")
+        return { ok: true, label: undefined, value: line };
+    return { ok: defaultOk, label: undefined, value: line };
+}
 /** What the last check found out: its age, how the sources were refreshed, and what failed. */
 export function CheckStatus({ data, now }) {
     const errors = data.results.filter((result) => result.error !== undefined);
-    return (_jsxs(_Fragment, { children: [_jsxs(Text, { color: theme.muted, children: ["checked ", formatAgo(now - data.checkedAt), " \u00B7 ", describeRefresh(data)] }), data.refresh.failed.map((failure) => (_jsxs(Text, { color: theme.warning, children: ["refresh failed for ", failure.source, ": ", failure.reason] }, failure.source))), data.appError ? _jsxs(Text, { color: theme.error, children: ["Error (Apps): ", data.appError] }) : null, data.packageError ? _jsxs(Text, { color: theme.error, children: ["Error (Packages): ", data.packageError] }) : null, errors.map((result) => _jsxs(Text, { color: theme.error, children: ["Error (", result.scope, "): ", result.error] }, result.scope))] }));
+    return (_jsxs(BorderPanel, { title: "Update check", children: [_jsxs(Text, { color: theme.field, children: ["checked ", _jsx(Text, { color: theme.value, children: formatAgo(now - data.checkedAt) }), _jsx(Text, { color: theme.legend, children: " \u00B7 " }), _jsx(Text, { color: theme.value, children: describeRefresh(data) })] }), data.refresh.failed.map((failure) => (_jsxs(Text, { children: [_jsx(Text, { color: theme.warning, children: "[WARN] " }), _jsx(FieldLine, { label: "Refresh failed for", value: `${failure.source}: ${failure.reason}` })] }, failure.source))), data.appError ? _jsxs(Text, { children: [_jsx(Text, { color: theme.error, children: "[FAIL] " }), _jsx(FieldLine, { label: "Error (Apps):", value: data.appError })] }) : null, data.packageError ? _jsxs(Text, { children: [_jsx(Text, { color: theme.error, children: "[FAIL] " }), _jsx(FieldLine, { label: "Error (Packages):", value: data.packageError })] }) : null, errors.map((result) => _jsxs(Text, { children: [_jsx(Text, { color: theme.error, children: "[FAIL] " }), _jsx(FieldLine, { label: `Error (${result.scope}):`, value: result.error ?? "" })] }, result.scope))] }));
 }
 /** One line of the list: an update, the fold of unassessable items, or one of those when unfolded. */
 export function EntryLine({ entry, selected, checked, view, showUnknown }) {
@@ -17,28 +34,36 @@ export function EntryLine({ entry, selected, checked, view, showUnknown }) {
     }
     const { row } = entry;
     if (entry.kind === "unknown") {
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { ...rowStyle(selected), children: [cursor, "    ", row.path, "  ", row.scope] }), _jsxs(Text, { color: theme.muted, children: ["        ", row.reason] })] }));
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { ...rowStyle(selected), children: [cursor, "    ", _jsx(Text, { color: theme.field, children: row.path }), _jsx(Text, { color: theme.legend, children: "  " }), _jsx(Text, { color: theme.field, children: row.scope })] }), _jsxs(Text, { color: theme.muted, children: ["        ", row.kind === "package" && /local modifications|local changes/i.test(row.reason)
+                            ? `Update comparison unavailable: ${row.reason}`
+                            : row.reason] })] }));
     }
-    return (_jsxs(Text, { ...rowStyle(selected), children: [cursor, checked ? "[x]" : "[ ]", " ", row.path, "  ", row.scope, "  ", row.policy, "  ", row.installed, " ", "->", " ", row.available] }));
+    return (_jsxs(Text, { ...rowStyle(selected), children: [cursor, checked ? "[x]" : "[ ]", " ", _jsx(Text, { color: theme.field, children: row.path }), _jsx(Text, { color: theme.legend, children: "  " }), _jsx(Text, { color: theme.field, children: row.scope }), _jsx(Text, { color: theme.legend, children: "  " }), _jsx(Text, { color: theme.field, children: row.policy }), _jsx(Text, { color: theme.legend, children: "  " }), _jsx(Text, { color: theme.value, children: row.installed }), _jsx(Text, { color: theme.legend, children: " -> " }), _jsx(Text, { color: theme.value, children: row.available })] }));
 }
 /** Under the list: the window indicator, what is up to date or selected, and the last result. */
 export function UpdatesFooter({ indicator, upToDate, updatableCount, checkedCount, message }) {
-    return (_jsxs(_Fragment, { children: [indicator ? _jsx(Text, { color: theme.muted, children: indicator }) : null, upToDate > 0 ? _jsxs(Text, { color: theme.muted, children: [upToDate, " up to date"] }) : null, updatableCount > 0 ? _jsxs(Text, { color: theme.muted, children: [checkedCount, " selected"] }) : null, message ? (_jsx(Box, { flexDirection: "column", children: message.lines.map((line, position) => _jsx(Text, { color: message.kind === "error" ? theme.error : theme.success, children: line }, position)) })) : null] }));
+    return (_jsxs(_Fragment, { children: [indicator ? _jsx(Text, { color: theme.muted, children: indicator }) : null, upToDate > 0 ? _jsxs(Text, { color: theme.muted, children: [upToDate, " up to date"] }) : null, updatableCount > 0 ? _jsxs(Text, { color: theme.muted, children: [checkedCount, " selected"] }) : null, message ? (_jsx(BorderPanel, { title: "Update result", children: message.lines.map((line, position) => {
+                    const result = updateResultField(line, message.kind === "ok");
+                    return _jsxs(Text, { children: [_jsxs(Text, { color: result.ok ? theme.success : theme.error, children: ["[", result.ok ? "OK" : "FAIL", "] "] }), result.label === undefined ? _jsx(Text, { color: theme.value, children: result.value }) : _jsx(FieldLine, { label: result.label, value: result.value })] }, position);
+                }) })) : null] }));
+}
+function CapturedUpdatePreview({ mode }) {
+    const { rows, columns } = useWindowSize();
+    const lines = updateModePreviewLines(mode).map(previewLineText);
+    const chrome = updateModePreviewChrome(mode);
+    const viewport = previewViewport(lines, mode.cursor, rows || 24, columns || 80, chrome);
+    return (_jsx(PreviewConfirm, { title: chrome.title, lines: lines, cursor: mode.cursor, question: updateModeQuestion(mode, viewport.reachedEnd), chrome: chrome }));
 }
-/** The prompt of the preview and confirmation modes; browsing and the check itself show nothing. */
 export function ModePanel({ mode }) {
     switch (mode.kind) {
         case "manual":
-            return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: ["App: ", mode.plan.entry.recipe.name] }), _jsxs(Text, { children: ["Environment: ", mode.plan.environment] }), _jsxs(Text, { children: ["Working directory: ", mode.plan.cwd] }), _jsxs(Text, { children: ["Manual: ", mode.plan.manual] }), mode.reason ? _jsx(Text, { color: theme.warning, children: mode.reason }) : null, _jsx(Text, { children: "Manual step done, check now? y/n" })] }));
+            return _jsx(CapturedUpdatePreview, { mode: mode });
         case "browse":
             return null;
         case "busy":
-            return mode.label === REFRESHING || mode.label === CHECKING ? null : _jsx(Text, { children: mode.label });
+            return mode.label === REFRESHING || mode.label === CHECKING ? null : (_jsx(BorderPanel, { title: "Updates", children: _jsx(FieldLine, { label: "Status", value: mode.label }) }));
         case "preview":
-            return (_jsxs(Box, { flexDirection: "column", children: [_jsx(PreviewLines, { lines: mode.prepared.lines }), _jsx(PreviewLines, { lines: mode.prepared.appFailures }), _jsx(PreviewLines, { lines: mode.prepared.packageFailures }), mode.prepared.failures.map(({ item, message }) => (_jsxs(Text, { color: theme.error, children: ["Preview failed for ", JSON.stringify(item.id), ": ", message] }, item.id))), mode.prepared.applicable.length === 0
-                        ? _jsx(Text, { children: "Nothing can be applied. Enter/Esc to go back" })
-                        : _jsxs(Text, { children: ["Apply ", mode.prepared.applicable.length, " ", mode.prepared.applicable.length === 1 ? "update" : "updates", "? y/n"] })] }));
         case "confirm-paths":
-            return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: theme.warning, children: "Confirm replacing non-canonical locations (outside .agents/skills and .claude/skills):" }), mode.prepared.nonCanonicalPaths.map((location, position) => _jsxs(Text, { color: theme.warning, children: ["  [", location.scope, "] ", JSON.stringify(location.path)] }, position)), _jsx(Text, { children: "Replace exactly these paths? y/n" })] }));
+            return _jsx(CapturedUpdatePreview, { mode: mode });
     }
 }

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

@@ -0,0 +1,65 @@
+import { previewText } from "./updates.js";
+export function updateModePreviewLines(mode) {
+    switch (mode.kind) {
+        case "preview":
+            return [
+                ...mode.prepared.lines,
+                ...mode.prepared.appFailures.map(previewText),
+                ...mode.prepared.packageFailures.map(previewText),
+                ...mode.prepared.failures.map(({ item, message }) => previewText(`Preview failed for ${JSON.stringify(item.id)}: ${message}`)),
+            ];
+        case "manual":
+            return [
+                { kind: "field", label: "App:", value: mode.plan.entry.recipe?.name ?? mode.plan.entry.file },
+                { kind: "field", label: "Environment:", value: mode.plan.environment },
+                { kind: "field", label: "Working directory:", value: mode.plan.cwd },
+                { kind: "field", label: "Manual:", value: mode.plan.manual ?? "" },
+                ...(mode.reason === undefined ? [] : [previewText(mode.reason)]),
+            ];
+        case "confirm-paths":
+            return [
+                previewText("Outside .agents/skills and .claude/skills:"),
+                ...mode.prepared.nonCanonicalPaths.map(({ scope, path }) => ({
+                    kind: "field",
+                    label: "Path:",
+                    value: `[${scope}] ${JSON.stringify(path)}`,
+                })),
+            ];
+        default:
+            return [];
+    }
+}
+export function updateModePreviewChrome(mode) {
+    switch (mode.kind) {
+        case "preview": {
+            const count = mode.prepared.applicable.length;
+            const question = `Apply ${count} ${count === 1 ? "update" : "updates"}? y/n`;
+            return {
+                title: "Update batch preview",
+                questions: ["Scroll to end before confirming; n cancels.", question],
+                footerRows: 2,
+            };
+        }
+        case "manual":
+            return {
+                title: "Manual App update",
+                questions: ["Scroll to end before confirming; n cancels.", "Manual step done, check now? y/n"],
+                footerRows: 2,
+            };
+        case "confirm-paths":
+            return {
+                title: "Confirm replacing non-canonical locations",
+                questions: ["Scroll to end before confirming; n cancels.", "Replace exactly these paths? y/n"],
+                footerRows: 2,
+            };
+        default:
+            return { title: "Updates", questions: ["Continue? y/n"] };
+    }
+}
+export function updateModeQuestion(mode, reachedEnd) {
+    if (mode.kind === "preview" && mode.prepared.applicable.length === 0) {
+        return "Nothing can be applied. Enter or Esc to go back.";
+    }
+    const chrome = updateModePreviewChrome(mode);
+    return reachedEnd ? chrome.questions.at(-1) ?? "Continue? y/n" : chrome.questions[0] ?? "Scroll to end before confirming; n cancels.";
+}