@iseoane/agent-depot 0.6.13 → 0.6.15

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

@@ -1,21 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { readFile } from "node:fs/promises";
-import { Box, Text, useWindowSize } from "ink";
+import path from "node:path";
+import { Box, useWindowSize } from "ink";
+import { PreEscapedText, Text } from "./safe-text.js";
 import stringWidth from "string-width";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { createAppOperations } from "../app-flow.js";
-import { buildProfileExport, describeProfileExportExclusion, describeProfilePackage, describeProfileReplica, describeProfileSkill, profileExportPreview, SKILL_EXPORT_EXPLANATION, writeProfileExport, } from "../profile-export.js";
+import { buildProfileExport, describeProfileExportExclusion, describeProfilePackage, describeProfileReplica, describeProfileSkill, profileExportPreview, requireOverwritableProfileExport, SKILL_EXPORT_EXPLANATION, writeProfileExport, } from "../profile-export.js";
 import { applyProfileImport, buildProfileImport, } from "../profile-import.js";
 import { PROFILE_FORMAT, PROFILE_FORMAT_V2, parseProfile } from "../profile.js";
 import { selectionKey } from "../package-model.js";
 import { packageOperationsOf } from "./environment.js";
 import { DEFAULT_PROFILE_FILE_NAME, exportDestination, fileNameNotice, pathExists, pickerStartDirectory, resolveExportFileName, } from "./file-picker-model.js";
 import { FilePicker } from "./file-picker.js";
-import { useKeys } from "./keys.js";
-import { previewViewport } from "./preview-window.js";
+import { isYes, useKeys } from "./keys.js";
+import { escapeControlText, usePreviewGeometry } from "./preview-window.js";
 import { answerYesNo, moveCursor, movePreviewCursor, toggleChoice } from "./mode-keys.js";
-import { BorderPanel, PreviewConfirm, PreviewLines, Working } from "./panel-parts.js";
-import { clipText, elideMiddle, fitLines, wrapText } from "./text-wrap.js";
+import { BorderPanel, PagedPreview, PreviewLines, Working } from "./panel-parts.js";
+import { clipText, elideMiddle, fitLines, textUnits, wrapText } from "./text-wrap.js";
 import { theme } from "./theme.js";
 import { useMirrored, useMounted } from "./view-state.js";
 import { computeWindow, useListHeight } from "./window.js";
@@ -136,32 +138,36 @@ function physicalListWindow(rows, rowHeights, selected, height) {
 /** An error naming a long path keeps its first and last rows, where the path starts and the reason ends. */
 const NAME_ERROR_ROWS = 3;
 const NAME_HINT = "Type to edit · Ctrl+U clear · Enter continue · Esc back to folder";
+const NOTE_CHROME = { title: "Export note", cancel: "[Esc] close" };
 /**
  * A `Label: value` line of the export name stage, wrapped to the panel and kept within `rows` rows. The
  * end of a path (its last folder, the file name) and the end of the typed name (where the cursor is) are
  * what matter, so with fewer than three rows the field keeps its label and its tail behind a `…`; with
  * three or more a path keeps its first row too, around a count of the rows left out.
  */
-function NameField({ label, value, rows, width, tail = false }) {
-    const wrapped = wrapText(`${label}${value}`, width);
+export function NameField({ label, value, rows, width, tail = false }) {
+    // Measured and drawn as escaped, so a hostile path or name takes the rows it is shown on.
+    const escapedValue = escapeControlText(value);
+    const wrapped = wrapText(`${label}${escapedValue}`, width);
     const cut = wrapped.length > rows;
     const keepsMiddleCount = cut && !tail && rows > 2;
     let shown = wrapped;
     if (keepsMiddleCount)
         shown = elideMiddle(wrapped, rows, width);
     else if (cut) {
-        const characters = Array.from(value);
-        for (let dropped = 1; dropped <= characters.length; dropped += 1) {
-            shown = wrapText(`${label}…${characters.slice(dropped).join("")}`, width);
+        // Dropped by units, so the cut cannot leave half of a doubled backslash that would read as a real escape.
+        const units = textUnits(escapedValue).map(({ segment }) => segment);
+        for (let dropped = 1; dropped <= units.length; dropped += 1) {
+            shown = wrapText(`${label}…${units.slice(dropped).join("")}`, width);
             if (shown.length <= rows)
                 break;
         }
     }
     return _jsx(_Fragment, { children: shown.map((line, index) => {
             if (index === 0 && line.startsWith(label)) {
-                return _jsxs(Text, { children: [_jsx(Text, { color: theme.field, children: label }), _jsx(Text, { color: theme.value, children: line.slice(label.length) })] }, index);
+                return _jsxs(PreEscapedText, { children: [_jsx(PreEscapedText, { color: theme.field, children: label }), _jsx(PreEscapedText, { color: theme.value, children: line.slice(label.length) })] }, index);
             }
-            return _jsx(Text, { color: keepsMiddleCount && index === 1 ? theme.muted : theme.value, children: line }, index);
+            return _jsx(PreEscapedText, { color: keepsMiddleCount && index === 1 ? theme.muted : theme.value, children: line }, index);
         }) });
 }
 function planEntries(plan) {
@@ -238,7 +244,7 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
     const [profile, setProfile] = useState();
     const [plan, setPlan] = useState();
     const diagnostics = useRef([]);
-    const { rows: terminalRows, columns: terminalColumns } = useWindowSize();
+    const { columns: terminalColumns } = useWindowSize();
     const panelWidth = Math.max((terminalColumns || 80) - 4, 1);
     const hintCursorRow = listRows(mode, rows, expandedGroupsRef.current)[cursorRef.current];
     const enterHint = hintCursorRow === undefined ? undefined
@@ -255,13 +261,17 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
     const titleRows = Math.max(Math.ceil(stringWidth("Export Profile") / panelWidth), 1);
     const hintRows = Math.max(Math.ceil(stringWidth(hintText) / panelWidth), 1);
     const height = useListHeight(listHeight, 4 + titleRows + hintRows);
-    const confirmChrome = () => ({
-        title: "Confirmation",
-        questions: [confirmRequest.current?.kind === "export"
-                ? "Save/Export Profile? (y/n) · arrows/PgUp/PgDn page · j/k line"
-                : "Apply Profile? (y/n) · arrows/PgUp/PgDn page · j/k line"],
-        footerRows: 2,
-    });
+    const previewGeometry = usePreviewGeometry();
+    const confirmChrome = () => {
+        const request = confirmRequest.current;
+        if (request?.kind !== "export")
+            return { title: "Confirmation", action: "Apply Profile", consequence: "Apply Profile? (y/n)" };
+        if (!request.overwrite)
+            return { title: "Confirmation", action: "Save/Export Profile", consequence: "Save/Export Profile? (y/n)" };
+        // The full path is on the Destination line; the base name keeps the footer short on narrow terminals.
+        const name = path.basename(request.file);
+        return { title: "Confirmation", action: `Overwrite ${name}`, consequence: `Overwrite ${name}? (y/n)` };
+    };
     const showLines = (next, nextMode) => {
         setLines(next);
         cursorTo(0);
@@ -348,6 +358,8 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
             let exists;
             try {
                 exists = await existsCheck(finalPath);
+                if (exists)
+                    await requireOverwritableProfileExport(finalPath);
             }
             catch (error) {
                 if (!mounted.current || nameRequest.current !== id || modeRef.current !== "export-name")
@@ -363,13 +375,10 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
                 return;
             if (current.kind !== "ok" || current.fileName !== fileName)
                 return;
-            if (exists) {
-                setNameError(`${finalPath} already exists; choose another name`);
-                return;
-            }
-            confirmRequest.current = { kind: "export", file: finalPath };
+            confirmRequest.current = { kind: "export", file: finalPath, overwrite: exists };
             setNameError(undefined);
-            showLines([`Destination: ${finalPath}`, ...profileExportPreview(chosenProfile(), diagnostics.current)], "confirm");
+            const destination = exists ? `Destination: ${finalPath} (exists; it will be replaced)` : `Destination: ${finalPath}`;
+            showLines([destination, ...profileExportPreview(chosenProfile(), diagnostics.current)], "confirm");
         })();
     };
     const confirmApply = () => {
@@ -379,7 +388,7 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
         void run(request.kind === "export" ? "Exporting…" : "Applying import…", async () => {
             let result;
             if (request.kind === "export") {
-                await writeProfileExport(request.file, chosenProfile());
+                await writeProfileExport(request.file, chosenProfile(), { overwrite: request.overwrite });
                 result = [`Exported profile to ${request.file}`];
             }
             else {
@@ -495,20 +504,21 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
                 setMode("export-list");
                 return;
             }
-            const next = movePreviewCursor(cursorRef.current, lines.length, input, key, height);
+            const viewport = previewGeometry(lines, cursorRef.current, NOTE_CHROME);
+            const next = movePreviewCursor(cursorRef.current, viewport.total, input, key, viewport.height);
             if (next !== undefined)
                 cursorTo(Math.max(0, next));
             return;
         }
         if (current === "confirm") {
-            answerYesNo(input, key, confirmApply, () => setMode(confirmRequest.current?.kind === "import" ? "import-list" : "export-name"));
-            if (input === "y" || input === "n" || key.escape)
-                return;
             // The preview cursor counts wrapped rows, not source lines, or a long destination would cap the paging.
-            const viewport = previewViewport(lines, cursorRef.current, terminalRows || 24, terminalColumns || 80, confirmChrome());
+            const viewport = previewGeometry(lines, cursorRef.current, confirmChrome());
             const next = movePreviewCursor(cursorRef.current, viewport.total, input, key, viewport.height);
             if (next !== undefined)
                 cursorTo(Math.max(0, next));
+            else if (!isYes(input, key) || viewport.reachedEnd) {
+                answerYesNo(input, key, confirmApply, () => setMode(confirmRequest.current?.kind === "import" ? "import-list" : "export-name"));
+            }
             return;
         }
         if (key.escape) {
@@ -574,7 +584,7 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
         if ("kind" in row)
             return 1;
         const prefixWidth = row.block === "excluded" ? 2 : stringWidth(`> [ ] ${row.ordinal ?? row.index + 1} `);
-        return wrapText(row.label, Math.max(panelWidth - prefixWidth, 1)).length;
+        return wrapText(escapeControlText(row.label), Math.max(panelWidth - prefixWidth, 1)).length;
     });
     const listWindow = physicalListWindow(displayRows, rowHeights, cursor, height);
     const window = listing ? listWindow : computeWindow(lines.length, cursor, height);
@@ -592,24 +602,24 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
             const prefix = `${marker}${" ".repeat(row.depth * 2)}${open ? "▾" : "▸"} `;
             const width = Math.max(panelWidth - stringWidth(prefix), 1);
             remainingRows -= 1;
-            return _jsxs(Text, { color: theme.group, bold: true, children: [prefix, clipText(row.label, width)] }, row.id);
+            return _jsxs(PreEscapedText, { color: theme.group, bold: true, children: [prefix, clipText(escapeControlText(row.label), width)] }, row.id);
         }
         if (row.block === "excluded") {
             const width = Math.max(panelWidth - stringWidth(marker), 1);
-            const label = fitLines(wrapText(row.label, width), remainingRows, width)
+            const label = fitLines(wrapText(escapeControlText(row.label), width), remainingRows, width)
                 .join(`\n${" ".repeat(stringWidth(marker))}`);
             remainingRows -= label.split("\n").length;
-            return _jsxs(Text, { color: theme.value, children: [marker, label] }, row.id);
+            return _jsxs(PreEscapedText, { color: theme.value, children: [marker, label] }, row.id);
         }
         // A row the import never changes has no checkbox: unchanged items rest, conflicts warn.
         const box = row.selectable ? `[${selected.some(choice => choice.id === row.id) ? "x" : " "}]` : "   ";
         const prefix = `${marker}${box} ${row.ordinal ?? row.index + 1} `;
         const width = Math.max(panelWidth - stringWidth(prefix), 1);
-        const label = fitLines(wrapText(row.label, width), remainingRows, width)
+        const label = fitLines(wrapText(escapeControlText(row.label), width), remainingRows, width)
             .join(`\n${" ".repeat(stringWidth(prefix))}`);
         remainingRows -= label.split("\n").length;
         const color = row.status === "conflict" ? theme.warning : row.status === "same" ? theme.muted : theme.value;
-        return _jsxs(Text, { children: [_jsx(Text, { color: theme.field, children: prefix }), _jsx(Text, { color: color, children: label })] }, row.id);
+        return _jsxs(PreEscapedText, { children: [_jsx(PreEscapedText, { color: theme.field, children: prefix }), _jsx(PreEscapedText, { color: color, children: label })] }, row.id);
     });
     const nameOutcome = resolveExportFileName(text);
     const liveDestination = nameOutcome.kind === "ok"
@@ -617,8 +627,8 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
     const nameNote = nameOutcome.kind === "ok" ? fileNameNotice(nameOutcome.fileName) : undefined;
     const extensionNote = nameOutcome.kind === "ok" && nameOutcome.appendedExtension
         ? `A name without an extension is saved as ${nameOutcome.fileName}.` : undefined;
-    const textRows = (value) => value === undefined ? 0 : wrapText(value, panelWidth).length;
-    const nameErrorLines = nameError === undefined ? [] : wrapText(nameError, panelWidth);
+    const textRows = (value) => value === undefined ? 0 : wrapText(escapeControlText(value), panelWidth).length;
+    const nameErrorLines = nameError === undefined ? [] : wrapText(escapeControlText(nameError), panelWidth);
     // Keys type into the name, so the stage cannot scroll; instead each long field keeps its end (and, given
     // three rows or more, its first row) within a share of the terminal. The confirmation pages the full destination.
     const nameFixedRows = 3 + textRows(nameNote) + textRows(extensionNote) + Math.min(nameErrorLines.length, NAME_ERROR_ROWS)
@@ -629,7 +639,7 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
     const destinationRows = Math.floor(fieldRows / 3) + (fieldRows % 3 >= 1 ? 1 : 0);
     const nameRows = fieldRows - folderRows - destinationRows;
     return _jsxs(Box, { flexDirection: "column", children: [mode === "export-folder" ? _jsx(FilePicker, { purpose: "directory", listHeight: listHeight, startDirectory: exportDirectory ?? startDirectory, onCancel: () => setMode("export-list"), onChoose: selection => { if (selection.kind === "directory")
-                    chooseExportDirectory(selection.directory); } }) : null, mode === "import-browse" ? _jsx(FilePicker, { purpose: "file", listHeight: listHeight, startDirectory: importDirectory ?? startDirectory, notice: importNotice, onCancel: () => setMode("browse"), onChoose: chooseImportFile }) : null, listing ? _jsxs(BorderPanel, { title: mode === "export-list" ? "Export Profile" : "Import Profile", children: [listContent, _jsx(Text, { color: theme.legend, children: hintText }), window.indicator ? _jsx(Text, { color: theme.muted, children: window.indicator }) : null] }) : null, mode === "browse" ? _jsx(BorderPanel, { title: "Portable Profile", children: _jsx(Text, { color: theme.legend, children: "e export \u00B7 i import" }) }) : null, mode === "busy" && working ? _jsx(Working, { label: working.label, since: working.startedAt }) : null, mode === "export-name" ? _jsxs(BorderPanel, { title: "Export file name", children: [_jsx(NameField, { label: "Folder: ", value: exportDirectory ?? startDirectory, rows: folderRows, width: panelWidth }), _jsx(NameField, { label: "Name: ", value: `${text}_`, rows: nameRows, width: panelWidth, tail: true }), liveDestination === undefined ? null : _jsx(NameField, { label: "Destination: ", value: liveDestination, rows: destinationRows, width: panelWidth }), nameNote === undefined ? null : _jsx(Text, { color: theme.warning, children: nameNote }), extensionNote === undefined ? null : _jsx(Text, { color: theme.muted, children: extensionNote }), nameError === undefined ? null : nameErrorLines.length <= NAME_ERROR_ROWS
-                        ? _jsx(Text, { color: theme.error, children: nameError })
-                        : elideMiddle(nameErrorLines, NAME_ERROR_ROWS, panelWidth).map((line, index) => _jsx(Text, { color: theme.error, children: line }, index)), nameChecking === undefined ? null : _jsx(Working, { label: "Checking name\u2026", since: nameChecking }), _jsx(Text, { color: theme.legend, children: NAME_HINT })] }) : null, mode === "confirm" ? _jsx(PreviewConfirm, { lines: lines, cursor: cursor, chrome: confirmChrome(), question: confirmChrome().questions[0] }) : null, mode === "detail" ? _jsx(PreviewConfirm, { title: "Export note", lines: lines, cursor: cursor, question: "Esc close \u00B7 arrows/PgUp/PgDn page \u00B7 j/k line" }) : null, mode === "results" ? _jsxs(_Fragment, { children: [_jsx(PreviewLines, { lines: lines.slice(window.start, window.end) }), _jsx(Text, { children: "j/k scroll" })] }) : null, window.indicator && mode === "results" ? _jsx(Text, { children: window.indicator }) : null] });
+                    chooseExportDirectory(selection.directory); } }) : null, mode === "import-browse" ? _jsx(FilePicker, { purpose: "file", listHeight: listHeight, startDirectory: importDirectory ?? startDirectory, notice: importNotice, onCancel: () => setMode("browse"), onChoose: chooseImportFile }) : null, listing ? _jsxs(BorderPanel, { title: mode === "export-list" ? "Export Profile" : "Import Profile", children: [listContent, _jsx(Text, { color: theme.legend, children: hintText }), window.indicator ? _jsx(Text, { color: theme.muted, children: window.indicator }) : null] }) : null, mode === "browse" ? _jsx(BorderPanel, { title: "Portable Profile", children: _jsx(Text, { color: theme.legend, children: "e export \u00B7 i import" }) }) : null, mode === "busy" && working ? _jsx(Working, { label: working.label, since: working.startedAt }) : null, mode === "export-name" ? _jsxs(BorderPanel, { title: "Export file name", children: [_jsx(NameField, { label: "Folder: ", value: exportDirectory ?? startDirectory, rows: folderRows, width: panelWidth }), _jsx(NameField, { label: "Name: ", value: `${text}_`, rows: nameRows, width: panelWidth, tail: true }), liveDestination === undefined ? null : _jsx(NameField, { label: "Destination: ", value: liveDestination, rows: destinationRows, width: panelWidth }), nameNote === undefined ? null : _jsx(PreEscapedText, { color: theme.warning, children: escapeControlText(nameNote) }), extensionNote === undefined ? null : _jsx(PreEscapedText, { color: theme.muted, children: escapeControlText(extensionNote) }), nameError === undefined ? null : nameErrorLines.length <= NAME_ERROR_ROWS
+                        ? _jsx(PreEscapedText, { color: theme.error, children: escapeControlText(nameError) })
+                        : elideMiddle(nameErrorLines, NAME_ERROR_ROWS, panelWidth).map((line, index) => _jsx(PreEscapedText, { color: theme.error, children: line }, index)), nameChecking === undefined ? null : _jsx(Working, { label: "Checking name\u2026", since: nameChecking }), _jsx(Text, { color: theme.legend, children: NAME_HINT })] }) : null, mode === "confirm" ? _jsx(PagedPreview, { lines: lines, viewport: previewGeometry(lines, cursor, confirmChrome()) }) : null, mode === "detail" ? _jsx(PagedPreview, { lines: lines, viewport: previewGeometry(lines, cursor, NOTE_CHROME) }) : null, mode === "results" ? _jsxs(_Fragment, { children: [_jsx(PreviewLines, { lines: lines.slice(window.start, window.end) }), _jsx(Text, { children: "j/k scroll" })] }) : null, window.indicator && mode === "results" ? _jsx(Text, { children: window.indicator }) : null] });
 }

package/dist/src/tui/render.js

@@ -1,8 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from "ink";
+import { createSourceRefreshSession } from "../source-refresh-session.js";
 import { App } from "./app.js";
 /** Renders the TUI and resolves once the user exits it. */
 export async function renderTui(operations, environment) {
-    const instance = render(_jsx(App, { operations: operations, environment: environment }), { alternateScreen: true });
+    const refreshSession = createSourceRefreshSession(operations);
+    const instance = render(_jsx(App, { operations: operations, environment: environment, refreshSession: refreshSession, refreshOnStart: environment?.refreshOnStart ?? true }), { alternateScreen: true });
     await instance.waitUntilExit();
+    await finishRunningRefreshes(refreshSession, (message) => process.stderr.write(message));
+}
+/** Drops the queued refreshes and waits for the running ones, telling the user only when it has to wait. */
+export async function finishRunningRefreshes(refreshSession, write) {
+    refreshSession.stop();
+    // Killing a refresh would leave its Source cache lock behind, so wait for the running ones instead.
+    if ([...refreshSession.snapshot().values()].some((state) => state.status === "refreshing")) {
+        write("Waiting for the Source refreshes still running to finish…\n");
+        await refreshSession.settled();
+    }
 }

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text as InkText } from "ink";
+import { cloneElement, Fragment, isValidElement } from "react";
+import { escapeControlText } from "./preview-window.js";
+/** Ink's `Text` for text that was already passed through `escapeControlText`; escaping it again would double its backslashes. */
+export const PreEscapedText = InkText;
+// Messages and errors span lines on purpose and Ink lays them out, so a line break is the one control character left alone.
+const LINE_BREAK = /\r?\n/u;
+function escapeNode(node) {
+    if (typeof node === "string")
+        return node.split(LINE_BREAK).map(escapeControlText).join("\n");
+    if (Array.isArray(node))
+        return node.map(escapeNode);
+    if (isValidElement(node) && node.type === Fragment) {
+        return cloneElement(node, undefined, escapeNode(node.props.children));
+    }
+    return node;
+}
+/**
+ * The `Text` every view uses. Skill, recipe and App text can come from a remote Source or a user-written recipe; raw, an ESC
+ * sequence in it can retitle the window, write the clipboard or redraw the screen. Nested `Text` escapes its own children.
+ */
+export function Text({ children, ...props }) {
+    return _jsx(InkText, { ...props, children: escapeNode(children) });
+}

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

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

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

@@ -1,5 +1,6 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Box, Text } from "ink";
+import { Box } from "ink";
+import { Text } from "./safe-text.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createAppOperations } from "../app-flow.js";
 import { planAppRecipeRemoval, removeAppRecipe } from "../app-recipe-removal.js";
@@ -7,12 +8,14 @@ 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, appRecipePreviewLines, appStepLines } from "./app-actions.js";
+import { appName, appPlanLines, appRecipePreviewLines, recipeApprovalChrome } from "./app-actions.js";
 import { errorText } from "./batch.js";
 import { useMounted } from "./view-state.js";
-import { BorderPanel, DecisionPrompt, PreviewConfirm, Working } from "./panel-parts.js";
+import { BorderPanel, DecisionPrompt, PagedPreview, Working } from "./panel-parts.js";
+import { isYes } from "./keys.js";
 import { answerYesNo, movePreviewCursor } from "./mode-keys.js";
-import { previewViewport } from "./preview-window.js";
+import { usePreviewGeometry } from "./preview-window.js";
+import { lineText, textLine } from "./preview-render.js";
 import { theme } from "./theme.js";
 import { busy } from "./working-model.js";
 /**
@@ -34,24 +37,24 @@ export function groupRecipeRows(rows) {
 function recipeMemberLine(row) {
     return `${row.entry.recipe?.platform ?? "all platforms"} · ${row.status} · ${row.entry.file}${row.entry.applicable ? " (used here)" : ""}`;
 }
-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,
-    };
+    const name = appName(mode.removal.entry);
+    return mode.kind === "uninstall-manual"
+        ? { title: "App manual uninstall", action: "Check the uninstall now", consequence: "Complete the manual uninstall, then check now? y/n" }
+        : { title: "App uninstall confirmation", action: `Uninstall ${name}`, consequence: `Uninstall ${name}? y/n` };
+}
+function removeChrome(removal) {
+    const name = appName(removal.entry);
+    return { title: "Recipe removal", action: `Remove the ${name} recipe`, consequence: `Remove recipe for ${name}? y/n` };
+}
+function removeLines(removal) {
+    return [`Delete recipe: ${removal.file}`, "Only this recipe file or symlink will be removed; App data and Host configuration are not deleted."];
 }
 /**
  * Recipe loading and captured actions; Sources owns the single list and cursor.
  */
-export function useSourcesRecipes({ operations, environment, onCapturingChange, highlightedFile, terminalRows, terminalColumns, }) {
+export function useSourcesRecipes({ operations, environment, onCapturingChange, highlightedFile, }) {
+    const previewGeometry = usePreviewGeometry();
     const homeDirectory = environment?.homeDirectory;
     const appEnvironment = environment?.appEnvironment;
     const apps = useMemo(() => createAppOperations({
@@ -90,7 +93,9 @@ export function useSourcesRecipes({ operations, environment, onCapturingChange,
                     kind: "approve",
                     entry, removeAfterApproval, cursor: 0,
                     lines: [
-                        ...(members.length > 1 ? [`Recipes named ${appName(entry)}:`, ...members.map(row => `  ${recipeMemberLine(row)}`), ""] : []),
+                        ...(members.length > 1
+                            ? [textLine(`Recipes named ${appName(entry)}:`), ...members.map(row => textLine(`  ${recipeMemberLine(row)}`)), textLine(" ")]
+                            : []),
                         ...appRecipePreviewLines(entry, status, steps),
                     ],
                 });
@@ -106,6 +111,7 @@ export function useSourcesRecipes({ operations, environment, onCapturingChange,
     const flow = {
         operations,
         env: environment ?? {},
+        previewGeometry,
         isMounted: () => mounted.current,
         setAction: action => setMode(action.kind === "browse"
             ? { kind: "browse" }
@@ -161,7 +167,7 @@ export function useSourcesRecipes({ operations, environment, onCapturingChange,
             }
             const removal = await planAppRecipeRemoval(apps, entry);
             if (mounted.current)
-                setMode({ kind: removal.installed ? "uninstall-question" : "remove", removal });
+                setMode(removal.installed ? { kind: "uninstall-question", removal } : { kind: "remove", removal, cursor: 0 });
         }
         catch (error) {
             if (mounted.current) {
@@ -181,7 +187,7 @@ export function useSourcesRecipes({ operations, environment, onCapturingChange,
             if (result.status === "manual required")
                 setMode({ ...current, kind: "uninstall-manual" });
             else if (result.status === "untracked")
-                setMode({ kind: "remove", removal: current.removal });
+                setMode({ kind: "remove", removal: current.removal, cursor: 0 });
             else {
                 setError(`Uninstall failed: ${result.reason ?? result.status}; recipe retained`);
                 setMode({ kind: "browse" });
@@ -229,13 +235,13 @@ export function useSourcesRecipes({ operations, environment, onCapturingChange,
             return true;
         }
         if (current.kind === "approve") {
-            const viewport = previewViewport(current.lines, current.cursor, terminalRows, terminalColumns, recipeApprovalChrome(current.entry));
+            const viewport = previewGeometry(current.lines.map(lineText), current.cursor, 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) {
+            else if (isYes(input, key) && viewport.reachedEnd) {
                 setBusy("Approving App recipe…");
                 void apps.approve(current.entry).then(async () => {
                     await reload();
@@ -268,18 +274,26 @@ export function useSourcesRecipes({ operations, environment, onCapturingChange,
             return true;
         }
         if (current.kind === "uninstall-confirm" || current.kind === "uninstall-manual") {
-            const lines = appStepLines(current.plan);
-            const viewport = previewViewport(lines, current.cursor, terminalRows, terminalColumns, uninstallChrome(current));
+            const lines = appPlanLines(current.plan).map(lineText);
+            const viewport = previewGeometry(lines, current.cursor, 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)
+            else if (isYes(input, key) && viewport.reachedEnd)
                 void uninstall(current);
             return true;
         }
         if (current.kind === "remove") {
+            const viewport = previewGeometry(removeLines(current.removal), current.cursor, removeChrome(current.removal));
+            const cursor = movePreviewCursor(current.cursor, viewport.total, input, key, viewport.height);
+            if (cursor !== undefined) {
+                setMode({ ...current, cursor });
+                return true;
+            }
+            if (isYes(input, key) && !viewport.reachedEnd)
+                return true;
             answerYesNo(input, key, () => {
                 setBusy("Removing App recipe…");
                 void removeAppRecipe(apps, current.removal, true).then(async () => {
@@ -344,15 +358,22 @@ 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(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(Working, { label: mode.label, since: mode.startedAt }) }) : null, mode.kind === "approve" ? (() => {
+    // A paged preview sizes itself to the whole terminal, so no message row may sit above it.
+    const pagedPreview = (mode.kind === "install" && mode.action.kind === "confirm-install")
+        || ["approve", "remove", "uninstall-confirm", "uninstall-manual"].includes(mode.kind);
+    const panel = (_jsxs(Box, { flexDirection: "column", children: [loadError && !pagedPreview ? _jsxs(Text, { color: theme.error, children: ["Error loading App recipes: ", loadError] }) : null, error && !pagedPreview ? _jsx(Text, { color: theme.error, children: error }) : null, notice && !pagedPreview ? _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(Working, { label: mode.label, since: mode.startedAt }) }) : 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 });
+                const lines = mode.lines.map(lineText);
+                return _jsx(PagedPreview, { lines: lines, styled: mode.lines, viewport: previewGeometry(lines, mode.cursor, chrome) });
             })() : null, mode.kind === "pick" ? (_jsxs(BorderPanel, { title: "Remove which recipe?", children: [mode.members.map((row, index) => _jsxs(Text, { children: [index + 1, " ", recipeMemberLine(row)] }, row.entry.file)), _jsx(Text, { color: theme.legend, children: "Press a number to review that one file for removal \u00B7 n or Esc cancels" })] })) : 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] }));
+                const styled = appPlanLines(mode.plan);
+                const lines = styled.map(lineText);
+                return _jsx(PagedPreview, { lines: lines, styled: styled, viewport: previewGeometry(lines, mode.cursor, chrome) });
+            })() : null, mode.kind === "remove" ? (() => {
+                const chrome = removeChrome(mode.removal);
+                const lines = removeLines(mode.removal);
+                return _jsx(PagedPreview, { lines: lines, viewport: previewGeometry(lines, mode.cursor, chrome) });
+            })() : null] }));
     return { rows, loadingSince, handleKey, startAdd, reload, clearMessage: () => { setError(undefined); setNotice(undefined); }, panel, directory: apps.directory, capturing: mode.kind !== "browse" };
 }