@iseoane/agent-depot 0.5.1 → 0.6.0

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/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.";
+}

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

@@ -1,7 +1,8 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Box, Text } from "ink";
+import { Box, Text, useWindowSize } from "ink";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { theme } from "./theme.js";
+import { previewViewport } from "./preview-window.js";
 import { computeWindow, useListHeight } from "./window.js";
 import { BROWSE } from "./updates-mode.js";
 import { useMirrored } from "./view-state.js";
@@ -9,12 +10,16 @@ import { useUpdatesFlow } from "./updates-flow.js";
 import { handleUpdatesKey } from "./updates-keys.js";
 import { viewOf } from "./updates-model.js";
 import { CheckStatus, EntryLine, ModePanel, UpdatesFooter } from "./updates-panel.js";
+import { previewLineText } from "./updates.js";
+import { updateModePreviewChrome, updateModePreviewLines } from "./updates-preview.js";
 import { useKeys } from "./keys.js";
+import { BorderPanel, FieldLine } from "./panel-parts.js";
 const NO_ENVIRONMENT = {};
 /** How often the age of the check is redrawn. */
 const CLOCK_TICK_MS = 10_000;
 export function UpdatesView({ operations, environment, onCapturingChange, listHeight, now }) {
     const height = useListHeight(listHeight, 9);
+    const { rows: terminalRows, columns: terminalColumns } = useWindowSize();
     const env = environment ?? NO_ENVIRONMENT;
     const clock = now ?? Date.now;
     // Scope, cursor, fold and selection are mirrored in refs updated first, so keys delivered in one burst act on the latest state.
@@ -74,8 +79,17 @@ export function UpdatesView({ operations, environment, onCapturingChange, listHe
     dataRef.current = data;
     const { shown, updatable, unknown, upToDate, entries } = viewOf(data, scope, showUnknown);
     const index = Math.min(cursor, Math.max(entries.length - 1, 0));
+    const previewGeometry = (current) => {
+        const cursor = "cursor" in current ? current.cursor : 0;
+        return previewViewport(updateModePreviewLines(current).map(previewLineText), cursor, terminalRows || 24, terminalColumns || 80, updateModePreviewChrome(current));
+    };
     const keyContext = {
         height,
+        previewMetrics: current => {
+            const geometry = previewGeometry(current);
+            return { length: geometry.total, pageSize: geometry.height };
+        },
+        previewAtEnd: current => previewGeometry(current).reachedEnd,
         latest,
         checked: () => checkedRef.current,
         setChecked,
@@ -97,5 +111,6 @@ export function UpdatesView({ operations, environment, onCapturingChange, listHe
     const window = computeWindow(entries.length, index, height);
     const view = { shown, updatable, unknown, upToDate, entries };
     const hasErrors = data?.appError !== undefined || (data?.results ?? []).some((result) => result.error !== undefined);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: theme.accent, bold: true, children: ["Updates (scope: ", scope, ")  t all \u00B7 p project \u00B7 g user-global"] }), state.status === "loading" ? _jsx(Text, { children: state.label }) : null, data ? _jsx(CheckStatus, { data: data, now: clock() }) : null, data && !hasErrors && shown.length === 0 ? _jsx(Text, { children: "No installations" }) : null, entries.slice(window.start, window.end).map((entry, offset) => (_jsx(EntryLine, { entry: entry, selected: window.start + offset === index, checked: entry.kind === "update" && checked.includes(entry.row.key), view: view, showUnknown: showUnknown }, entry.kind === "summary" ? "summary" : entry.row.key))), _jsx(UpdatesFooter, { indicator: window.indicator, upToDate: upToDate, updatableCount: updatable.length, checkedCount: checked.length, message: message }), _jsx(ModePanel, { mode: mode })] }));
+    const showingBrowse = mode.kind === "browse";
+    return (_jsxs(Box, { flexDirection: "column", children: [showingBrowse ? _jsxs(Text, { color: theme.title, bold: true, children: ["Updates (scope: ", scope, ")  t all \u00B7 p project \u00B7 g user-global \u00B7 u update"] }) : null, state.status === "loading" ? _jsx(BorderPanel, { title: "Update check", children: _jsx(FieldLine, { label: "Status", value: state.label }) }) : null, showingBrowse && data ? _jsx(CheckStatus, { data: data, now: clock() }) : null, showingBrowse && data && !hasErrors && shown.length === 0 ? _jsx(Text, { children: "No installations" }) : null, showingBrowse ? entries.slice(window.start, window.end).map((entry, offset) => (_jsx(EntryLine, { entry: entry, selected: window.start + offset === index, checked: entry.kind === "update" && checked.includes(entry.row.key), view: view, showUnknown: showUnknown }, entry.kind === "summary" ? "summary" : entry.row.key))) : null, showingBrowse ? _jsx(UpdatesFooter, { indicator: window.indicator, upToDate: upToDate, updatableCount: updatable.length, checkedCount: checked.length, message: message }) : null, _jsx(ModePanel, { mode: mode })] }));
 }

package/dist/src/tui/updates.js

@@ -111,7 +111,7 @@ export async function loadUpdateRows(operations, environment, options) {
     catch (error) {
         appError = errorText(error);
     }
-    for (const check of appChecks) {
+    for (const check of appChecks.filter(candidate => candidate.inspection.status === "installed")) {
         rows.push({
             kind: "app",
             key: `app:${check.entry.file}`,
@@ -161,6 +161,12 @@ export function formatAgo(elapsedMs) {
         return `${minutes} min ago`;
     return `${Math.floor(minutes / 60)} h ago`;
 }
+export function previewText(text) {
+    return { kind: "text", text };
+}
+export function previewLineText(line) {
+    return line.kind === "field" ? `${line.label} ${line.value}` : line.text;
+}
 /** Plan step: previews the selection from the assessed snapshots, scope by scope. Changes nothing. */
 export async function prepareUpdates(data, selected) {
     const groups = [];
@@ -176,7 +182,7 @@ export async function prepareUpdates(data, selected) {
             continue;
         const { context } = loaded;
         const outcome = await previewUpdateCandidates(items, context);
-        lines.push(...outcome.plans.flatMap((plan) => describeUpdatePreview(plan, scope, context.projectRoot, "prompt")));
+        lines.push(...outcome.plans.flatMap((plan) => describeUpdatePreview(plan, scope, context.projectRoot, "prompt").map(previewText)));
         failures.push(...outcome.failures);
         groups.push({
             scope,
@@ -192,7 +198,10 @@ export async function prepareUpdates(data, selected) {
         try {
             const plan = await data.apps.planLifecycle(row.check.entry, "update", undefined, row.check);
             appPlans.push(plan);
-            lines.push(`Environment: ${plan.environment}`, row.path, `Version: ${plan.previousVersion} -> ${plan.latestVersion ?? "unknown"}`, ...(plan.argv ? [`argv: ${JSON.stringify(plan.argv)}`, `Executable: ${plan.executable ?? `${JSON.stringify(plan.argv[0])} not found in PATH`}`] : []), ...(plan.manual ? [`Manual: ${plan.manual}`] : []), `Working directory: ${plan.cwd}`, ...(plan.warning ? [plan.warning] : []));
+            lines.push({ kind: "field", label: "Environment:", value: plan.environment }, previewText(row.path), { kind: "field", label: "Version:", value: `${plan.previousVersion} -> ${plan.latestVersion ?? "unknown"}` }, ...(plan.argv ? [
+                { kind: "field", label: "argv:", value: JSON.stringify(plan.argv) },
+                { kind: "field", label: "Executable:", value: plan.executable ?? `${JSON.stringify(plan.argv[0])} not found in PATH` },
+            ] : []), ...(plan.manual ? [{ kind: "field", label: "Manual:", value: plan.manual }] : []), { kind: "field", label: "Working directory:", value: plan.cwd }, ...(plan.warning ? [previewText(plan.warning)] : []));
         }
         catch (error) {
             appFailures.push(`Failed ${row.path}: preview failed: ${errorText(error)}`);
@@ -205,9 +214,9 @@ export async function prepareUpdates(data, selected) {
             const plan = await data.packages.planLifecycle(row.check.installed.selection, "update");
             const approval = await data.packages.approvalStatus(row.check.installed.selection, "update");
             packagePlans.push({ plan, approval });
-            lines.push(...packagePlanLines(plan, approval));
+            lines.push(...packagePlanLines(plan, approval).map(previewText));
             if (approval === "needs approval")
-                lines.push("This apply approves the declaration above.");
+                lines.push(previewText("This apply approves the declaration above."));
         }
         catch (error) {
             packageFailures.push(`Failed ${row.path}: preview failed: ${errorText(error)}`);

package/dist/src/tui/window.js

@@ -1,8 +1,9 @@
 import { useWindowSize } from "ink";
+import { headerTabRowCount } from "./header-layout.js";
 /** Rows assumed when the terminal size is unknown (for example under test renderers). */
 export const FALLBACK_TERMINAL_ROWS = 24;
-/** Lines the shell itself uses: title, tab bar, separator and footer hint. */
-export const APP_CHROME_ROWS = 4;
+/** Header borders, title, one tab row and footer; extra tab rows are added per terminal width. */
+export const APP_CHROME_ROWS = 5;
 const MINIMUM_ROWS = 3;
 /** The slice of a list that fits in `height` rows while keeping `selected` visible (roughly centred). */
 export function computeWindow(total, selected, height) {
@@ -23,8 +24,9 @@ export function pageStep(height) {
  * view's own `reserved` lines. `override` fixes the height for tests.
  */
 export function useListHeight(override, reserved) {
-    const { rows } = useWindowSize();
+    const { rows, columns } = useWindowSize();
     if (override !== undefined)
         return Math.max(override, 1);
-    return Math.max((rows || FALLBACK_TERMINAL_ROWS) - APP_CHROME_ROWS - reserved, MINIMUM_ROWS);
+    const chromeRows = APP_CHROME_ROWS + headerTabRowCount(Math.max(columns - 4, 1)) - 1;
+    return Math.max((rows || FALLBACK_TERMINAL_ROWS) - chromeRows - reserved, MINIMUM_ROWS);
 }