@iseoane/agent-depot 0.5.2 → 0.6.0

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

@@ -1,52 +1,176 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { readFile } from "node:fs/promises";
-import { Box, Text } from "ink";
+import { Box, Text, useWindowSize } from "ink";
+import stringWidth from "string-width";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { createAppOperations } from "../app-flow.js";
-import { buildProfileExport, describeProfilePackage, profileExportPreview, writeProfileExport, } from "../profile-export.js";
+import { buildProfileExport, describeProfileExportExclusion, describeProfilePackage, describeProfileReplica, describeProfileSkill, profileExportPreview, SKILL_EXPORT_EXPLANATION, writeProfileExport, } from "../profile-export.js";
 import { applyProfileImport, buildProfileImport, } from "../profile-import.js";
-import { PROFILE_FORMAT } from "../profile.js";
+import { PROFILE_FORMAT, PROFILE_FORMAT_V2, parseProfile } from "../profile.js";
+import { selectionKey } from "../package-model.js";
 import { packageOperationsOf } from "./environment.js";
 import { useKeys } from "./keys.js";
-import { answerYesNo, moveCursor, toggleChoice } from "./mode-keys.js";
-import { ChecklistLines, PreviewConfirm, PreviewLines } from "./panel-parts.js";
+import { answerYesNo, moveCursor, movePreviewCursor, toggleChoice } from "./mode-keys.js";
+import { BorderPanel, PreviewConfirm, PreviewLines } from "./panel-parts.js";
+import { theme } from "./theme.js";
 import { computeWindow, useListHeight } from "./window.js";
 function rowsFromExport(plan) {
     return [
         ...plan.profile.sources.map((value, index) => ({
-            block: "sources", index, label: `Sources: ${value.url}`, selectable: true,
+            id: `sources:${value.url}`, block: "sources", index, ordinal: index + 1,
+            label: value.url, selectable: true,
         })),
         ...plan.profile.skills.map((value, index) => ({
-            block: "skills", index, label: `Skills: ${value.path}`, selectable: true,
+            id: `skills:${JSON.stringify([value.source, value.path])}`, block: "skills", index, ordinal: index + 1,
+            label: describeProfileSkill(value), selectable: true,
         })),
         ...plan.profile.apps.map((value, index) => ({
-            block: "apps", index, label: `Apps: ${value.name} (${value.platform ?? "all platforms"})`, selectable: true,
+            id: `apps:${JSON.stringify([value.name, value.platform ?? null])}`, block: "apps", index, ordinal: index + 1,
+            label: `App recipe ${value.name} (${value.platform ?? "all platforms"})`, selectable: true,
         })),
         ...plan.profile.packages.map((value, index) => ({
-            block: "packages", index, label: `Packages: ${describeProfilePackage(value)}`, selectable: true,
+            id: `packages:${JSON.stringify(value)}`, block: "packages", index, ordinal: index + 1,
+            label: describeProfilePackage(value), selectable: true,
+        })),
+        ...plan.profile.replicas.map((value, index) => ({
+            id: `replicas:${JSON.stringify(value)}`, block: "replicas", index, ordinal: index + 1,
+            label: describeProfileReplica(value), selectable: true,
         })),
         ...plan.exclusions.map((item, index) => ({
-            block: "excluded", index, label: `Excluded ${item.label}: ${item.reason}`, selectable: false,
+            id: `excluded:${index}`, block: "excluded", index, label: describeProfileExportExclusion(item), selectable: false,
         })),
+        { id: "skill-export-explanation", block: "excluded", index: -1,
+            label: SKILL_EXPORT_EXPLANATION, selectable: false },
         ...plan.warnings.filter(warning => warning.kind === "load").map((warning, index) => ({
-            block: "excluded", index: plan.exclusions.length + index, label: warning.message, selectable: false,
+            id: `warning:${index}`, block: "excluded", index: plan.exclusions.length + index,
+            label: warning.message, selectable: false,
         })),
     ];
 }
+function exportDisplayRows(rows, expanded) {
+    const choices = (block) => rows.filter(row => row.block === block);
+    const group = (id, label, depth, children) => {
+        if (!children.length)
+            return [];
+        const header = { kind: "group", id, label, depth };
+        return expanded.has(id) ? [header, ...children] : [header];
+    };
+    const sourceChildren = [
+        ...group("group:sources", `Source choices (${choices("sources").length})`, 1, choices("sources")),
+        ...group("group:skills", `Skills (${choices("skills").length})`, 1, choices("skills")),
+        ...group("group:apps", `Apps (${choices("apps").length})`, 1, choices("apps")),
+        ...group("group:packages", `Packages (${choices("packages").length})`, 1, choices("packages")),
+    ];
+    return [
+        ...group("group:sources-root", "Sources", 0, sourceChildren),
+        ...group("group:replicas", `Installed replicas (${choices("replicas").length})`, 0, choices("replicas")),
+        ...group("group:excluded", `Export notes (${choices("excluded").length})`, 0, choices("excluded")),
+    ];
+}
+const graphemes = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+function wrapListText(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];
+}
+function fitListLines(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;
+}
+function physicalListWindow(rows, rowHeights, selected, height) {
+    if (!rows.length)
+        return { start: 0, end: 0, indicator: undefined, stickyGroup: false };
+    const cursor = Math.min(Math.max(selected, 0), rows.length - 1);
+    const build = (budget) => {
+        let start = cursor;
+        let end = cursor + 1;
+        let used = rowHeights[cursor] ?? 1;
+        while (start > 0 || end < rows.length) {
+            const previous = start > 0 ? rowHeights[start - 1] : Infinity;
+            const next = end < rows.length ? rowHeights[end] : Infinity;
+            if (used + Math.min(previous, next) > budget)
+                break;
+            if (previous <= next) {
+                start--;
+                used += previous;
+            }
+            else {
+                used += next;
+                end++;
+            }
+        }
+        return { start, end };
+    };
+    let range = build(height);
+    const needsStickyGroup = (start) => start > 0 && !("kind" in rows[start]) &&
+        (rowHeights[start] ?? 1) < height && rows.slice(0, start).some(row => "kind" in row);
+    if (needsStickyGroup(range.start))
+        range = build(Math.max(height - 1, 1));
+    const stickyGroup = needsStickyGroup(range.start);
+    const hidden = range.start > 0 || range.end < rows.length;
+    return { ...range, indicator: hidden ? `${range.start + 1}–${range.end} of ${rows.length}` : undefined, stickyGroup };
+}
 /** The four import blocks in one indexed list, so the checklist and the confirmation share positions. */
 function planEntries(plan) {
     return [...plan.items, ...plan.packages];
 }
 function rowsFromPlan(plan) {
     return planEntries(plan).map((item, index) => ({
-        block: item.block, index,
+        id: `${item.block}:${index}`, block: item.block, index, ordinal: index + 1,
         label: `${item.status}: ${item.label}${item.difference ? `; ${item.difference}` : ""}`,
         selectable: item.status === "add",
     }));
 }
+function hasChosenResource(profile) {
+    return profile.sources.length + profile.skills.length + profile.apps.length + profile.packages.length > 0;
+}
 function selectedPlanEntries(plan, selected) {
     return planEntries(plan).filter((item, index) => item.status !== "add" || selected.some(row => row.index === index));
 }
+function selectedImportProfile(profile, entries) {
+    const sources = profile.sources.filter(value => entries.some(item => item.block === "sources" && item.value.url === value.url));
+    const skills = profile.skills.filter(value => entries.some(item => item.block === "skills" &&
+        item.value.path === value.path && JSON.stringify(item.value.source) === JSON.stringify(value.source)));
+    const apps = profile.apps.filter(value => entries.some(item => item.block === "apps" &&
+        item.value.name === value.name && item.value.platform === value.platform));
+    const packages = profile.packages.filter(value => entries.some(item => item.block === "packages" &&
+        selectionKey(item.value) === selectionKey(value)));
+    const replicas = profile.replicas.filter(replica => {
+        if (replica.kind === "skill")
+            return skills.some(skill => skill.path === replica.path &&
+                JSON.stringify(skill.source) === JSON.stringify(replica.source));
+        if (replica.kind === "app")
+            return apps.some(app => app.name === replica.name && app.platform === replica.platform);
+        return packages.some(selection => selectionKey(selection) === selectionKey(replica.selection));
+    });
+    return parseProfile({ ...profile, format: replicas.length ? PROFILE_FORMAT_V2 : PROFILE_FORMAT,
+        sources, skills, apps, packages, replicas });
+}
 /** A plan whose items are the chosen subset, split back into the block the writer consumes. */
 function chosenPlan(plan, selected) {
     const entries = selectedPlanEntries(plan, selected);
@@ -75,6 +199,12 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
         setModeState(next);
     };
     const [rows, setRows] = useState([]);
+    const [expandedGroups, setExpandedGroupsState] = useState(new Set());
+    const expandedGroupsRef = useRef(new Set());
+    const setExpandedGroups = (next) => {
+        expandedGroupsRef.current = next;
+        setExpandedGroupsState(next);
+    };
     const [selected, setSelectedState] = useState([]);
     const selectedRef = useRef([]);
     const select = (next) => {
@@ -90,12 +220,20 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
     const [text, setText] = useState("");
     const typed = useRef("");
     const [lines, setLines] = useState([]);
+    const detailReturnId = useRef(undefined);
     const [profile, setProfile] = useState();
     const [plan, setPlan] = useState();
     const diagnostics = useRef([]);
     const action = useRef("export");
-    const profileVersion = useRef("");
-    const height = useListHeight(listHeight, 9);
+    const { columns: terminalColumns } = useWindowSize();
+    const panelWidth = Math.max((terminalColumns || 80) - 4, 1);
+    const listingHint = mode === "export-list"
+        ? "j/k · Enter group/preview · ←/→ group · space · a all · Esc"
+        : "j/k move · space toggle · a all · Enter preview · Esc";
+    const renderedListingHint = mode === "export-list" ? `${listingHint} · preview shows full text` : listingHint;
+    const titleRows = Math.max(Math.ceil(stringWidth("Export Profile") / panelWidth), 1);
+    const hintRows = Math.max(Math.ceil(stringWidth(renderedListingHint) / panelWidth), 1);
+    const height = useListHeight(listHeight, 4 + titleRows + hintRows);
     const showLines = (next, nextMode) => {
         setLines(next);
         cursorTo(0);
@@ -120,7 +258,12 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
     const loadRows = (next, nextMode) => {
         setRows(next);
         select(next.filter(row => row.selectable));
-        cursorTo(0);
+        const open = new Set();
+        setExpandedGroups(open);
+        const firstChoice = nextMode === "export-list"
+            ? exportDisplayRows(next, open).findIndex(row => !("kind" in row) && row.selectable)
+            : 0;
+        cursorTo(Math.max(firstChoice, 0));
         setMode(nextMode);
     };
     const chosenProfile = () => {
@@ -132,6 +275,15 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
             skills: profile.skills.filter((_, index) => isChosen("skills", index)),
             apps: profile.apps.filter((_, index) => isChosen("apps", index)),
             packages: profile.packages.filter((_, index) => isChosen("packages", index)),
+            replicas: profile.replicas.filter((replica, index) => {
+                if (!isChosen("replicas", index))
+                    return false;
+                if (replica.kind === "skill")
+                    return profile.skills.some((skill, skillIndex) => isChosen("skills", skillIndex) && skill.path === replica.path && JSON.stringify(skill.source) === JSON.stringify(replica.source));
+                if (replica.kind === "app")
+                    return profile.apps.some((app, appIndex) => isChosen("apps", appIndex) && app.name === replica.name && app.platform === replica.platform);
+                return profile.packages.some((selection, packageIndex) => isChosen("packages", packageIndex) && JSON.stringify(selection) === JSON.stringify(replica.selection));
+            }),
         };
     };
     useKeys((input, key) => {
@@ -176,11 +328,11 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
                 }
                 else
                     void run(async () => {
-                        const raw = JSON.parse(await readFile(typed.current, "utf8"));
-                        const imported = await buildProfileImport(raw, operations, apps, {}, packages);
-                        profileVersion.current = raw.agentDepotVersion;
+                        const importedProfile = parseProfile(JSON.parse(await readFile(typed.current, "utf8")));
+                        const imported = await buildProfileImport(importedProfile, operations, apps, {}, packages);
                         if (!mounted.current)
                             return;
+                        setProfile(importedProfile);
                         setPlan(imported);
                         loadRows(rowsFromPlan(imported), "import-list");
                     });
@@ -195,6 +347,20 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
             }
             return;
         }
+        if (current === "detail") {
+            if (key.escape) {
+                const returnIndex = exportDisplayRows(rows, expandedGroupsRef.current)
+                    .findIndex(row => !("kind" in row) && row.id === detailReturnId.current);
+                cursorTo(Math.max(returnIndex, 0));
+                detailReturnId.current = undefined;
+                setMode("export-list");
+                return;
+            }
+            const next = movePreviewCursor(cursorRef.current, lines.length, input, key, height);
+            if (next !== undefined)
+                cursorTo(Math.max(0, next));
+            return;
+        }
         if (current === "confirm") {
             answerYesNo(input, key, () => {
                 void run(async () => {
@@ -215,7 +381,7 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
             }, () => setMode("browse"));
             if (input === "y" || input === "n" || key.escape)
                 return;
-            const next = moveCursor(cursorRef.current, lines.length, input, key);
+            const next = movePreviewCursor(cursorRef.current, lines.length, input, key, height);
             if (next !== undefined)
                 cursorTo(Math.max(0, next));
             return;
@@ -224,20 +390,42 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
             setMode("browse");
             return;
         }
-        // Export diagnostics follow the checklist, but never own its cursor.
-        // Import same/conflict rows still draw a cursor so their differences can be reviewed.
-        const checklistLength = rows.filter(row => row.block !== "excluded").length;
-        const next = moveCursor(cursorRef.current, checklistLength, input, key);
+        const visibleRows = current === "export-list" ? exportDisplayRows(rows, expandedGroupsRef.current) : rows;
+        const currentRow = visibleRows[cursorRef.current];
+        const next = moveCursor(cursorRef.current, visibleRows.length, input, key);
         if (next !== undefined)
             cursorTo(Math.max(0, next));
-        else if (input === " " && rows[cursorRef.current]?.selectable) {
-            select(toggleChoice(rows, selectedRef.current, rows[cursorRef.current]));
+        else if (current === "export-list" && currentRow && "kind" in currentRow && currentRow.kind === "group" &&
+            (key.return || key.rightArrow || key.leftArrow)) {
+            if (key.return && !hasChosenResource(chosenProfile())) {
+                showLines(["Nothing selected; nothing written."], "results");
+                return;
+            }
+            const open = new Set(expandedGroupsRef.current);
+            if (key.return) {
+                if (open.has(currentRow.id))
+                    open.delete(currentRow.id);
+                else
+                    open.add(currentRow.id);
+            }
+            else if (key.rightArrow)
+                open.add(currentRow.id);
+            else
+                open.delete(currentRow.id);
+            setExpandedGroups(open);
+        }
+        else if (input === " " && currentRow && !("kind" in currentRow) && currentRow.selectable) {
+            select(toggleChoice(rows, selectedRef.current, currentRow));
         }
         else if (input === "a")
             select(selectedRef.current.length ? [] : rows.filter(row => row.selectable));
+        else if (current === "export-list" && key.return && currentRow && !("kind" in currentRow) && currentRow.block === "excluded") {
+            detailReturnId.current = currentRow.id;
+            showLines(wrapListText(currentRow.label, Math.max((terminalColumns || 80) - 8, 1)), "detail");
+        }
         else if (key.return) {
             if (current === "export-list") {
-                if (!selectedRef.current.length) {
+                if (!hasChosenResource(chosenProfile())) {
                     showLines(["Nothing selected; nothing written."], "results");
                 }
                 else
@@ -247,25 +435,56 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
                 void run(async () => {
                     // Reuse the CLI's core preview for the exact selected subset, including argv and Source notes.
                     const entries = selectedPlanEntries(plan, selectedRef.current);
-                    const preview = await buildProfileImport({
-                        format: PROFILE_FORMAT, agentDepotVersion: profileVersion.current,
-                        sources: entries.filter(item => item.block === "sources").map(item => item.value),
-                        skills: entries.filter(item => item.block === "skills").map(item => item.value),
-                        apps: entries.filter(item => item.block === "apps").map(item => item.value),
-                        packages: entries.filter(item => item.block === "packages").map(item => item.value),
-                    }, operations, apps, {}, packages);
+                    const subset = selectedImportProfile(profile, entries);
+                    const preview = await buildProfileImport(subset, operations, apps, {}, packages);
                     if (mounted.current)
                         showLines(preview.preview, "confirm");
                 });
         }
     });
     const listing = mode === "export-list" || mode === "import-list";
-    const window = computeWindow(listing ? rows.length : lines.length, cursor, height);
-    return _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Portable user-global Profile \u00B7 e export \u00B7 i import" }), mode === "busy" ? _jsx(Text, { children: "Loading Profile\u2026" }) : null, mode.endsWith("-path") ? _jsxs(Text, { children: ["Profile path: ", text, "_"] }) : null, listing ? ["sources", "skills", "apps", "packages", "excluded"].map(block => {
-                const choices = rows.slice(window.start, window.end).filter(row => row.block === block);
-                if (!choices.length)
-                    return null;
-                return _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: block === "excluded" ? "Excluded" : block[0].toUpperCase() + block.slice(1) }), block === "excluded" ? _jsx(PreviewLines, { lines: choices.map(row => `${row.label} (not selectable)`) }) :
-                            _jsx(ChecklistLines, { choices: choices, cursor: choices.indexOf(rows[cursor]), isSelected: row => selected.includes(row), keyOf: row => `${row.block}:${row.index}`, label: row => `${row.label}${row.selectable ? "" : " (not selectable)"}` })] }, block);
-            }) : null, mode === "confirm" ? _jsx(PreviewConfirm, { lines: lines.slice(window.start, window.end), question: "Apply Profile? (y/n) \u00B7 j/k scroll" }) : null, mode === "results" ? _jsxs(_Fragment, { children: [_jsx(PreviewLines, { lines: lines.slice(window.start, window.end) }), _jsx(Text, { children: "j/k scroll" })] }) : null, window.indicator && (listing || mode === "confirm" || mode === "results") ? _jsx(Text, { children: window.indicator }) : null, listing ? _jsx(Text, { children: "j/k move \u00B7 space toggle \u00B7 a all \u00B7 Enter preview \u00B7 Esc cancel" }) : null] });
+    const displayRows = mode === "export-list" ? exportDisplayRows(rows, expandedGroups) : rows;
+    const rowHeights = displayRows.map(row => {
+        const prefixWidth = "kind" in row ? stringWidth(`> ${" ".repeat(row.depth * 2)}▸ `) : row.block === "excluded" ? 2
+            : stringWidth(`> [ ] ${row.ordinal ?? row.index + 1} `);
+        const label = !("kind" in row) && row.block !== "excluded" && !row.selectable
+            ? `${row.label} (not selectable)` : row.label;
+        return wrapListText(label, Math.max(panelWidth - prefixWidth, 1)).length;
+    });
+    const listWindow = physicalListWindow(displayRows, rowHeights, cursor, height);
+    const window = listing ? listWindow : computeWindow(lines.length, cursor, height);
+    const visibleRows = displayRows.slice(window.start, window.end);
+    const precedingGroup = displayRows.slice(0, window.start).filter((row) => "kind" in row).at(-1);
+    const indexedRows = visibleRows.map((row, index) => ({ row, index: window.start + index }));
+    const renderedRows = listWindow.stickyGroup && precedingGroup
+        ? [{ row: precedingGroup, index: undefined }, ...indexedRows]
+        : indexedRows;
+    let remainingRows = height;
+    const listContent = renderedRows.map(({ row, index }) => {
+        const marker = index === cursor ? "> " : "  ";
+        if ("kind" in row) {
+            const open = expandedGroups.has(row.id);
+            const prefix = `${marker}${" ".repeat(row.depth * 2)}${open ? "▾" : "▸"} `;
+            const width = Math.max(panelWidth - stringWidth(prefix), 1);
+            const label = fitListLines(wrapListText(row.label, width), remainingRows, width)
+                .join(`\n${" ".repeat(stringWidth(prefix))}`);
+            remainingRows -= label.split("\n").length;
+            return _jsxs(Text, { color: theme.group, bold: true, children: [prefix, label] }, row.id);
+        }
+        if (row.block === "excluded") {
+            const width = Math.max(panelWidth - stringWidth(marker), 1);
+            const label = fitListLines(wrapListText(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);
+        }
+        const prefix = `${marker}[${selected.some(choice => choice.id === row.id) ? "x" : " "}] ${row.ordinal ?? row.index + 1} `;
+        const value = `${row.label}${row.selectable ? "" : " (not selectable)"}`;
+        const width = Math.max(panelWidth - stringWidth(prefix), 1);
+        const label = fitListLines(wrapListText(value, width), remainingRows, width)
+            .join(`\n${" ".repeat(stringWidth(prefix))}`);
+        remainingRows -= label.split("\n").length;
+        return _jsxs(Text, { children: [_jsx(Text, { color: theme.field, children: prefix }), _jsx(Text, { color: theme.value, children: label })] }, row.id);
+    });
+    return _jsxs(Box, { flexDirection: "column", children: [listing ? _jsxs(BorderPanel, { title: mode === "export-list" ? "Export Profile" : "Import Profile", children: [listContent, _jsx(Text, { color: theme.legend, children: renderedListingHint }), window.indicator ? _jsx(Text, { color: theme.muted, children: window.indicator }) : null] }) : null, mode !== "confirm" && mode !== "detail" && !listing ? _jsx(BorderPanel, { title: "Portable Profile", children: _jsx(Text, { color: theme.legend, children: "e export \u00B7 i import" }) }) : null, mode === "busy" ? _jsx(Text, { children: "Loading Profile\u2026" }) : null, mode.endsWith("-path") ? _jsxs(Text, { children: ["Profile path: ", text, "_"] }) : null, mode === "confirm" ? _jsx(PreviewConfirm, { lines: lines, cursor: cursor, question: "Apply Profile? (y/n) \u00B7 arrows/PgUp/PgDn page \u00B7 j/k line" }) : 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] });
 }

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" };
 }