@iseoane/agent-depot 0.5.2 → 0.6.1

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

@@ -1,101 +1,189 @@
-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 { useEffect, useMemo, useRef, useState } from "react";
+import { Box, Text, useWindowSize } from "ink";
+import stringWidth from "string-width";
+import { useCallback, 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 { 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 { 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 { fitLines, wrapText } from "./text-wrap.js";
+import { theme } from "./theme.js";
+import { useMirrored, useMounted } from "./view-state.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")),
+    ];
+}
+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));
 }
-/** 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);
-    return {
-        ...plan,
-        items: entries.filter((item) => item.block !== "packages"),
-        packages: entries.filter((item) => item.block === "packages"),
-    };
+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 });
 }
 /** Collect choices, display shared-core previews and confirm portable Profile transfers. */
-export function ProfileView({ operations, environment = {}, onCapturingChange, listHeight }) {
+export function ProfileView({ operations, environment = {}, onCapturingChange, listHeight, existsCheck = pathExists }) {
     const apps = useMemo(() => createAppOperations({
         homeDirectory: environment.homeDirectory, ...environment.appEnvironment,
     }), [environment]);
     const packages = useMemo(() => packageOperationsOf(environment), [environment]);
-    const [mode, setModeState] = useState("browse");
-    const modeRef = useRef("browse");
-    const mounted = useRef(true);
-    useEffect(() => {
-        mounted.current = true;
-        return () => { mounted.current = false; };
-    }, []);
-    const setMode = (next) => {
-        modeRef.current = next;
+    const startDirectory = useMemo(() => pickerStartDirectory(environment), [environment]);
+    const mounted = useMounted();
+    const [mode, modeRef, setModeState] = useMirrored("browse");
+    const setMode = useCallback((next) => {
         onCapturingChange?.(next !== "browse" && next !== "results");
         setModeState(next);
-    };
+    }, [onCapturingChange, setModeState]);
     const [rows, setRows] = useState([]);
-    const [selected, setSelectedState] = useState([]);
-    const selectedRef = useRef([]);
-    const select = (next) => {
-        selectedRef.current = next;
-        setSelectedState(next);
-    };
-    const [cursor, setCursorState] = useState(0);
-    const cursorRef = useRef(0);
-    const cursorTo = (next) => {
-        cursorRef.current = next;
-        setCursorState(next);
-    };
-    const [text, setText] = useState("");
-    const typed = useRef("");
+    const [expandedGroups, expandedGroupsRef, setExpandedGroups] = useMirrored(new Set());
+    const [selected, selectedRef, select] = useMirrored([]);
+    const [cursor, cursorRef, cursorTo] = useMirrored(0);
+    const [text, typed, setText] = useMirrored("");
+    const [nameError, setNameError] = useState(undefined);
+    const [importNotice, setImportNotice] = useState(undefined);
+    const [exportDirectory, setExportDirectory] = useState(undefined);
+    const [importDirectory, setImportDirectory] = useState(undefined);
     const [lines, setLines] = useState([]);
+    const detailReturnId = useRef(undefined);
+    const confirmRequest = useRef(undefined);
+    const nameRequest = useRef(0);
+    const importRequest = useRef(0);
     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 hintCursorRow = (mode === "export-list" ? exportDisplayRows(rows, expandedGroupsRef.current) : rows)[cursorRef.current];
+    const enterHint = hintCursorRow === undefined ? undefined
+        : "kind" in hintCursorRow ? "Enter open"
+            : hintCursorRow.block === "excluded" ? "Enter note" : undefined;
+    const groupHint = hintCursorRow !== undefined && "kind" in hintCursorRow ? " · ←/→ group" : "";
+    const listingHint = mode === "export-list"
+        ? `j/k move${groupHint}${enterHint === undefined ? "" : ` · ${enterHint}`} · space toggle · a all · e export · Esc back to menu`
+        : "j/k move · space toggle · a all · Enter preview · Esc back to menu";
+    const hintText = `${selected.length} selected · ${listingHint}`;
+    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 showLines = (next, nextMode) => {
         setLines(next);
         cursorTo(0);
@@ -112,15 +200,15 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
             }
         }
     };
-    const prompt = (next) => {
-        typed.current = "";
-        setText("");
-        setMode(next);
-    };
     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,15 +220,133 @@ 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));
+            }),
         };
     };
+    const beginExport = () => {
+        if (!hasChosenResource(chosenProfile())) {
+            showLines(["Nothing selected; nothing written."], "results");
+            return;
+        }
+        setExportDirectory(undefined);
+        setNameError(undefined);
+        setMode("export-folder");
+    };
+    const abandonNameCheck = () => { nameRequest.current += 1; };
+    const chooseExportDirectory = (directory) => {
+        abandonNameCheck();
+        setExportDirectory(directory);
+        setNameError(undefined);
+        if (typed.current === "")
+            setText(DEFAULT_PROFILE_FILE_NAME);
+        setMode("export-name");
+    };
+    const submitExportName = () => {
+        const outcome = resolveExportFileName(typed.current);
+        if (outcome.kind === "invalid") {
+            setNameError(outcome.message);
+            return;
+        }
+        const directory = exportDirectory ?? startDirectory;
+        const fileName = outcome.fileName;
+        const finalPath = exportDestination(directory, fileName);
+        const id = ++nameRequest.current;
+        void (async () => {
+            let exists;
+            try {
+                exists = await existsCheck(finalPath);
+            }
+            catch (error) {
+                if (!mounted.current || nameRequest.current !== id || modeRef.current !== "export-name")
+                    return;
+                setNameError(`Error: ${error instanceof Error ? error.message : String(error)}`);
+                return;
+            }
+            const current = resolveExportFileName(typed.current);
+            if (!mounted.current || nameRequest.current !== id || modeRef.current !== "export-name")
+                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 };
+            setNameError(undefined);
+            showLines([`Destination: ${finalPath}`, ...profileExportPreview(chosenProfile(), diagnostics.current)], "confirm");
+        })();
+    };
+    const confirmApply = () => {
+        const request = confirmRequest.current;
+        if (request === undefined)
+            return;
+        void run(async () => {
+            let result;
+            if (request.kind === "export") {
+                await writeProfileExport(request.file, chosenProfile());
+                result = [`Exported profile to ${request.file}`];
+            }
+            else {
+                const outcomes = await applyProfileImport(request.plan, operations, apps, true, () => undefined, { homeDirectory: environment.homeDirectory, packageOperations: packages, ...environment.installationOptions });
+                result = outcomes.map(outcome => `${outcome.status}: ${outcome.item.label}${outcome.detail ? `; ${outcome.detail}` : ""}`);
+            }
+            if (mounted.current) {
+                showLines(result.length ? result : ["Nothing selected; nothing written."], "results");
+            }
+        });
+    };
+    const previewImport = () => {
+        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 subset = selectedImportProfile(profile, entries);
+            const imported = await buildProfileImport(subset, operations, apps, {}, packages);
+            if (!mounted.current)
+                return;
+            confirmRequest.current = { kind: "import", plan: imported };
+            showLines(imported.preview, "confirm");
+        });
+    };
+    const chooseImportFile = (selection) => {
+        if (selection.kind !== "file")
+            return;
+        setImportDirectory(selection.directory);
+        const id = ++importRequest.current;
+        setMode("busy");
+        void (async () => {
+            try {
+                const importedProfile = parseProfile(JSON.parse(await readFile(selection.file, "utf8")));
+                const imported = await buildProfileImport(importedProfile, operations, apps, {}, packages);
+                if (!mounted.current || importRequest.current !== id)
+                    return;
+                setProfile(importedProfile);
+                setPlan(imported);
+                setImportNotice(undefined);
+                loadRows(rowsFromPlan(imported), "import-list");
+            }
+            catch (error) {
+                if (!mounted.current || importRequest.current !== id)
+                    return;
+                setImportNotice(`Error: ${error instanceof Error ? error.message : String(error)}`);
+                setMode("import-browse");
+            }
+        })();
+    };
     useKeys((input, key) => {
         const current = modeRef.current;
-        if (current === "busy")
+        // The FilePicker owns its keys while it is mounted, and async work ignores every key.
+        if (current === "export-folder" || current === "import-browse" || current === "busy")
             return;
         if (current === "browse" || current === "results") {
             if (input === "e") {
-                action.current = "export";
                 void run(async () => {
                     const exported = await buildProfileExport(operations, apps, {
                         homeDirectory: environment.homeDirectory, packageOperations: packages,
@@ -153,8 +359,8 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
                 });
             }
             else if (input === "i") {
-                action.current = "import";
-                prompt("import-path");
+                setImportNotice(undefined);
+                setMode("import-browse");
             }
             else if (current === "results") {
                 const next = moveCursor(cursorRef.current, lines.length, input, key);
@@ -163,59 +369,54 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
             }
             return;
         }
-        if (current === "export-path" || current === "import-path") {
+        if (current === "export-name") {
             if (key.escape) {
-                setMode("browse");
+                abandonNameCheck();
+                setMode("export-folder");
+                return;
+            }
+            if (key.ctrl && input === "u") {
+                abandonNameCheck();
+                setText("");
+                setNameError(undefined);
                 return;
             }
             if (key.return) {
-                if (!typed.current.trim())
-                    return;
-                if (current === "export-path") {
-                    showLines(profileExportPreview(chosenProfile(), diagnostics.current), "confirm");
-                }
-                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;
-                        if (!mounted.current)
-                            return;
-                        setPlan(imported);
-                        loadRows(rowsFromPlan(imported), "import-list");
-                    });
+                submitExportName();
+                return;
+            }
+            if (key.backspace || key.delete) {
+                abandonNameCheck();
+                setText(typed.current.slice(0, -1));
+                setNameError(undefined);
+                return;
             }
-            else if (key.backspace || key.delete) {
-                typed.current = typed.current.slice(0, -1);
-                setText(typed.current);
+            if (input && !key.ctrl && !key.meta) {
+                abandonNameCheck();
+                setText(typed.current + input);
+                setNameError(undefined);
             }
-            else if (input && !key.ctrl && !key.meta) {
-                typed.current += input;
-                setText(typed.current);
+            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 () => {
-                    let result;
-                    if (action.current === "export") {
-                        await writeProfileExport(typed.current, chosenProfile());
-                        result = [`Exported profile to ${typed.current}`];
-                    }
-                    else {
-                        const confirmed = chosenPlan(plan, selectedRef.current);
-                        const outcomes = await applyProfileImport(confirmed, operations, apps, true, () => undefined, { homeDirectory: environment.homeDirectory, packageOperations: packages, ...environment.installationOptions });
-                        result = outcomes.map(outcome => `${outcome.status}: ${outcome.item.label}${outcome.detail ? `; ${outcome.detail}` : ""}`);
-                    }
-                    if (mounted.current) {
-                        showLines(result.length ? result : ["Nothing selected; nothing written."], "results");
-                    }
-                });
-            }, () => setMode("browse"));
+            answerYesNo(input, key, confirmApply, () => setMode(confirmRequest.current?.kind === "import" ? "import-list" : "export-name"));
             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,48 +425,105 @@ 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);
-        if (next !== undefined)
+        // export-list and import-list
+        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]));
+            return;
+        }
+        if (input === " ") {
+            if (currentRow && !("kind" in currentRow) && currentRow.selectable)
+                select(toggleChoice(rows, selectedRef.current, currentRow));
+            return;
         }
-        else if (input === "a")
+        if (input === "a") {
             select(selectedRef.current.length ? [] : rows.filter(row => row.selectable));
-        else if (key.return) {
-            if (current === "export-list") {
-                if (!selectedRef.current.length) {
-                    showLines(["Nothing selected; nothing written."], "results");
+            return;
+        }
+        if (current === "export-list" && input === "e") {
+            beginExport();
+            return;
+        }
+        if (currentRow && "kind" in currentRow && currentRow.kind === "group") {
+            if (key.return || key.rightArrow || key.leftArrow) {
+                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
-                    prompt("export-path");
+                    open.delete(currentRow.id);
+                setExpandedGroups(open);
             }
-            else
-                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);
-                    if (mounted.current)
-                        showLines(preview.preview, "confirm");
-                });
+            return;
+        }
+        if (key.return && currentRow && !("kind" in currentRow) && currentRow.block === "excluded") {
+            detailReturnId.current = currentRow.id;
+            showLines(wrapText(currentRow.label, Math.max((terminalColumns || 80) - 8, 1)), "detail");
+            return;
+        }
+        if (key.return && current === "import-list") {
+            previewImport();
+            return;
         }
     });
     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 wrapText(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 = fitLines(wrapText(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 = fitLines(wrapText(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 = fitLines(wrapText(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);
+    });
+    const nameOutcome = resolveExportFileName(text);
+    const liveDestination = nameOutcome.kind === "ok"
+        ? exportDestination(exportDirectory ?? startDirectory, nameOutcome.fileName) : undefined;
+    const nameNote = nameOutcome.kind === "ok" ? fileNameNotice(nameOutcome.fileName) : undefined;
+    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" ? _jsx(Text, { children: "Loading Profile\u2026" }) : null, mode === "export-name" ? _jsxs(BorderPanel, { title: "Export file name", children: [_jsxs(Text, { children: [_jsx(Text, { color: theme.field, children: "Folder: " }), _jsx(Text, { color: theme.value, children: exportDirectory ?? startDirectory })] }), _jsxs(Text, { children: [_jsx(Text, { color: theme.field, children: "Name: " }), _jsxs(Text, { color: theme.value, children: [text, "_"] })] }), liveDestination === undefined ? null : _jsxs(Text, { children: [_jsx(Text, { color: theme.field, children: "Destination: " }), _jsx(Text, { color: theme.value, children: liveDestination })] }), nameNote === undefined ? null : _jsx(Text, { color: theme.warning, children: nameNote }), nameOutcome.kind === "ok" && nameOutcome.appendedExtension
+                        ? _jsxs(Text, { color: theme.muted, children: ["A name without an extension is saved as ", nameOutcome.fileName, "."] }) : null, nameError === undefined ? null : _jsx(Text, { color: theme.error, children: nameError }), _jsx(Text, { color: theme.legend, children: "Type to edit \u00B7 Ctrl+U clear \u00B7 Enter continue \u00B7 Esc back to folder" })] }) : null, mode === "confirm" ? _jsx(PreviewConfirm, { lines: lines, cursor: cursor, question: 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" }) : 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] });
 }