@iseoane/agent-depot 0.6.4 → 0.6.5

package/dist/src/tui/package-actions.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { describeCoordinates } from "../package-model.js";
 import { errorText } from "./batch.js";
-import { answerYesNo } from "./mode-keys.js";
+import { movePreviewCursor } from "./mode-keys.js";
 import { installedEvidenceLabel, packagePlanLines } from "./package-rows.js";
 import { PreviewConfirm } from "./panel-parts.js";
+import { previewViewport } from "./preview-window.js";
+import { busy } from "./working-model.js";
 /** The per-row keys of a Package; Enter is approval, handled beside these. */
 export const PACKAGE_ACTION_KEYS = new Map([
     ["i", "install"],
@@ -22,16 +24,16 @@ export async function startPackageAction(context, target, input) {
     manage.setMessage(undefined);
     try {
         if (input === "approve") {
-            manage.setMode({ kind: "busy", label: `Preparing the declaration of ${target.name}...` });
+            manage.setMode(busy(`Preparing the declaration of ${target.name}…`));
             const plan = await packages.planLifecycle(target.selection, "install");
             if (manage.isMounted()) {
-                manage.setMode({ kind: "package-approve", target, lines: packagePlanLines(plan, "needs approval") });
+                manage.setMode({ kind: "package-approve", target, lines: packagePlanLines(plan, "needs approval"), cursor: 0 });
             }
             return;
         }
         const action = PACKAGE_ACTION_KEYS.get(input);
         if (action === "forget") {
-            manage.setMode({ kind: "busy", label: `Preparing to forget ${target.name}...` });
+            manage.setMode(busy(`Preparing to forget ${target.name}…`));
             const inspection = await packages.inspect(target.selection);
             if (manage.isMounted()) {
                 manage.setMode({
@@ -43,16 +45,17 @@ export async function startPackageAction(context, target, input) {
                         `Installed: ${installedEvidenceLabel(inspection.installed)}`,
                         "Forgetting drops the Agent Depot selection record only; the host install is left as it is and no host command runs.",
                     ],
+                    cursor: 0,
                 });
             }
             return;
         }
         if (action !== undefined) {
-            manage.setMode({ kind: "busy", label: `Preparing the ${action} of ${target.name}...` });
+            manage.setMode(busy(`Preparing the ${action} of ${target.name}…`));
             const plan = await packages.planLifecycle(target.selection, action);
             const approval = await packages.approvalStatus(target.selection, action);
             if (manage.isMounted())
-                manage.setMode({ kind: "package-confirm", plan, approval });
+                manage.setMode({ kind: "package-confirm", plan, approval, cursor: 0 });
             return;
         }
         await manage.finish({ kind: "error", text: `The action ${JSON.stringify(input)} is not available for Packages` });
@@ -64,7 +67,7 @@ export async function startPackageAction(context, target, input) {
 /** The `y` of a lifecycle confirmation whose receipt is missing approves it first, then asks again. */
 async function approveThenConfirm(context, mode) {
     const { manage, packages } = context;
-    manage.setMode({ kind: "busy", label: `Approving the ${mode.plan.action} declaration of ${mode.plan.descriptor.name}...` });
+    manage.setMode(busy(`Approving the ${mode.plan.action} declaration of ${mode.plan.descriptor.name}…`));
     try {
         await packages.approve(mode.plan.selection, mode.plan.action);
         if (manage.isMounted())
@@ -100,7 +103,7 @@ function resultLine(plan, result) {
 }
 async function executePackagePlan(context, plan) {
     const { manage, packages } = context;
-    manage.setMode({ kind: "busy", label: `Running the ${plan.action} of ${plan.descriptor.name}...` });
+    manage.setMode(busy(`Running the ${plan.action} of ${plan.descriptor.name}…`));
     let result;
     try {
         result = await packages.executeLifecycle(plan, true);
@@ -114,7 +117,7 @@ async function executePackagePlan(context, plan) {
 }
 async function forgetSelection(context, mode) {
     const { manage, packages } = context;
-    manage.setMode({ kind: "busy", label: `Forgetting ${mode.target.name}...` });
+    manage.setMode(busy(`Forgetting ${mode.target.name}…`));
     try {
         await packages.forget(mode.target.selection, true);
         await manage.finish({ kind: "ok", text: `Forgot ${mode.target.name}; no host command ran` });
@@ -123,43 +126,72 @@ async function forgetSelection(context, mode) {
         await manage.finish({ kind: "error", text: errorText(error) });
     }
 }
-/** Applies the y/n keys of every Package confirmation; `n` and Esc run nothing. */
+/** What the preview shows for a mode, so the key handler and the panel page the same rows. */
+function packagePreview(mode) {
+    switch (mode.kind) {
+        case "package-approve":
+            return {
+                lines: mode.lines,
+                chrome: reviewChrome("Package approval", `Approve this install declaration for ${mode.target.name}? y/n`),
+            };
+        case "package-forget":
+            return {
+                lines: mode.lines,
+                chrome: reviewChrome("Forget Package selection", `Forget the selection record of ${mode.target.name}? y/n`),
+            };
+        case "package-confirm":
+            return {
+                lines: packagePlanLines(mode.plan, mode.approval),
+                chrome: reviewChrome(`Package ${mode.plan.action} confirmation`, mode.approval === "needs approval"
+                    ? "Approve this declaration and continue? y/n"
+                    : `${mode.plan.action} ${mode.plan.descriptor.name}? y/n`),
+            };
+    }
+}
+function reviewChrome(title, question) {
+    return { title, questions: [question], footerRows: 2 };
+}
+/**
+ * Pages the declaration with the arrows, PgUp/PgDn and j/k. `y` answers from any page: the panel shows
+ * the `Review N of M` position and the row window while more remains. `n` and Esc run nothing.
+ */
 export function handlePackageKey(context, mode, input, key) {
     const { manage, packages } = context;
     const cancel = (text) => {
         manage.setMessage({ kind: "ok", text });
         manage.browse();
     };
+    const { lines, chrome } = packagePreview(mode);
+    const viewport = previewViewport(lines, mode.cursor, context.terminalRows, context.terminalColumns, chrome);
+    const cursor = movePreviewCursor(mode.cursor, viewport.total, input, key, viewport.height);
+    if (cursor !== undefined) {
+        manage.setMode({ ...mode, cursor });
+        return;
+    }
+    if (input === "n" || key.escape) {
+        cancel("Package action cancelled");
+        return;
+    }
+    if (input !== "y")
+        return;
     switch (mode.kind) {
         case "package-approve":
-            answerYesNo(input, key, () => {
-                manage.setMode({ kind: "busy", label: `Approving the install declaration of ${mode.target.name}...` });
-                void packages.approve(mode.target.selection, "install").then(() => manage.finish({ kind: "ok", text: `Approved the install declaration of ${mode.target.name}` }), error => manage.finish({ kind: "error", text: errorText(error) }));
-            }, () => cancel("Package action cancelled"));
+            manage.setMode(busy(`Approving the install declaration of ${mode.target.name}…`));
+            void packages.approve(mode.target.selection, "install").then(() => manage.finish({ kind: "ok", text: `Approved the install declaration of ${mode.target.name}` }), error => manage.finish({ kind: "error", text: errorText(error) }));
             return;
         case "package-forget":
-            answerYesNo(input, key, () => void forgetSelection(context, mode), () => cancel("Package action cancelled"));
+            void forgetSelection(context, mode);
             return;
         case "package-confirm":
-            answerYesNo(input, key, () => {
-                if (mode.approval === "needs approval")
-                    void approveThenConfirm(context, mode);
-                else
-                    void executePackagePlan(context, mode.plan);
-            }, () => cancel("Package action cancelled"));
+            if (mode.approval === "needs approval")
+                void approveThenConfirm(context, mode);
+            else
+                void executePackagePlan(context, mode.plan);
             return;
     }
 }
 /** Renders a Package prompt with the existing preview panel and y/n confirmation. */
 export function PackagePanel({ mode }) {
-    switch (mode.kind) {
-        case "package-approve":
-            return _jsx(PreviewConfirm, { lines: mode.lines, question: `Approve this install declaration for ${mode.target.name}? y/n` });
-        case "package-forget":
-            return _jsx(PreviewConfirm, { lines: mode.lines, question: `Forget the selection record of ${mode.target.name}? y/n` });
-        case "package-confirm":
-            return (_jsx(PreviewConfirm, { lines: packagePlanLines(mode.plan, mode.approval), question: mode.approval === "needs approval"
-                    ? "Approve this declaration and continue? y/n"
-                    : `${mode.plan.action} ${mode.plan.descriptor.name}? y/n` }));
-    }
+    const { lines, chrome } = packagePreview(mode);
+    return _jsx(PreviewConfirm, { title: chrome.title, lines: lines, cursor: mode.cursor, question: chrome.questions[0], chrome: chrome });
 }

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

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Text, useWindowSize } from "ink";
+import { useEffect, useState } from "react";
 import { theme } from "./theme.js";
 import { previewViewport } from "./preview-window.js";
+import { animationEnabled, formatElapsed, SPINNER_FRAMES, SPINNER_TICK_MS, STATIC_GLYPH } from "./working-model.js";
 /** A titled, color-independent boundary for a focused interaction or result. */
 export function BorderPanel({ title, children }) {
     return (_jsxs(Box, { borderStyle: "round", borderColor: theme.border, paddingX: 1, flexDirection: "column", children: [_jsx(Text, { color: theme.title, bold: true, children: title }), children] }));
@@ -9,6 +11,24 @@ export function BorderPanel({ title, children }) {
 export function FieldLine({ label, value }) {
     return _jsxs(Text, { children: [_jsx(Text, { color: theme.field, children: label }), _jsxs(Text, { color: theme.value, children: [" ", value] })] });
 }
+/**
+ * A spinner, the label and, from one second on, the time since `since` (when the operation began, not
+ * when this line mounted, so the clock survives label changes). Without animation it is a static line.
+ */
+export function Working({ label, since, now, animate }) {
+    const animated = animate ?? animationEnabled();
+    const [tick, setTick] = useState(0);
+    useEffect(() => {
+        if (!animated)
+            return undefined;
+        const timer = setInterval(() => setTick((value) => value + 1), SPINNER_TICK_MS);
+        // A redraw timer alone must never keep the process alive.
+        timer.unref();
+        return () => clearInterval(timer);
+    }, [animated]);
+    const elapsed = animated ? formatElapsed((now ?? Date.now)() - since) : "";
+    return (_jsxs(Text, { children: [_jsx(Text, { color: theme.accent, children: animated ? SPINNER_FRAMES[tick % SPINNER_FRAMES.length] : STATIC_GLYPH }), _jsxs(Text, { color: theme.value, children: [" ", label] }), elapsed ? _jsxs(Text, { color: theme.legend, children: [" ", elapsed] }) : null] }));
+}
 export function DecisionPrompt({ children }) {
     return (_jsxs(Text, { children: [_jsx(Text, { color: theme.warning, children: children }), " ", _jsx(Text, { color: theme.success, bold: true, children: "y" }), _jsx(Text, { color: theme.legend, children: "/" }), _jsx(Text, { color: theme.error, children: "n" })] }));
 }

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

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+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 stringWidth from "string-width";
@@ -12,12 +12,14 @@ 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 { answerYesNo, moveCursor, movePreviewCursor, toggleChoice } from "./mode-keys.js";
-import { BorderPanel, PreviewConfirm, PreviewLines } from "./panel-parts.js";
-import { fitLines, wrapText } from "./text-wrap.js";
+import { BorderPanel, PreviewConfirm, PreviewLines, Working } from "./panel-parts.js";
+import { elideMiddle, fitLines, wrapText } from "./text-wrap.js";
 import { theme } from "./theme.js";
 import { useMirrored, useMounted } from "./view-state.js";
 import { computeWindow, useListHeight } from "./window.js";
+import { busy } from "./working-model.js";
 function rowsFromExport(plan) {
     return [
         ...plan.profile.sources.map((value, index) => ({
@@ -105,6 +107,37 @@ function physicalListWindow(rows, rowHeights, selected, height) {
     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. */
+/** 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";
+/**
+ * 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);
+    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);
+            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 _jsx(Text, { color: keepsMiddleCount && index === 1 ? theme.muted : theme.value, children: line }, index);
+        }) });
+}
 function planEntries(plan) {
     return [...plan.items, ...plan.packages];
 }
@@ -159,6 +192,9 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
     const [cursor, cursorRef, cursorTo] = useMirrored(0);
     const [text, typed, setText] = useMirrored("");
     const [nameError, setNameError] = useState(undefined);
+    // What the busy mode is doing, and when the name check of the export file began, if one is running.
+    const [working, setWorking] = useState(undefined);
+    const [nameChecking, setNameChecking] = useState(undefined);
     const [importNotice, setImportNotice] = useState(undefined);
     const [exportDirectory, setExportDirectory] = useState(undefined);
     const [importDirectory, setImportDirectory] = useState(undefined);
@@ -170,7 +206,7 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
     const [profile, setProfile] = useState();
     const [plan, setPlan] = useState();
     const diagnostics = useRef([]);
-    const { columns: terminalColumns } = useWindowSize();
+    const { rows: terminalRows, 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
@@ -184,13 +220,24 @@ 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 showLines = (next, nextMode) => {
         setLines(next);
         cursorTo(0);
         setMode(nextMode);
     };
-    const run = async (work) => {
+    const startBusy = (label) => {
+        setWorking(busy(label));
         setMode("busy");
+    };
+    const run = async (label, work) => {
+        startBusy(label);
         try {
             await work();
         }
@@ -240,7 +287,10 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
         setNameError(undefined);
         setMode("export-folder");
     };
-    const abandonNameCheck = () => { nameRequest.current += 1; };
+    const abandonNameCheck = () => {
+        nameRequest.current += 1;
+        setNameChecking(undefined);
+    };
     const chooseExportDirectory = (directory) => {
         abandonNameCheck();
         setExportDirectory(directory);
@@ -259,6 +309,8 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
         const fileName = outcome.fileName;
         const finalPath = exportDestination(directory, fileName);
         const id = ++nameRequest.current;
+        // The check never blocks keys, so a line beside the name field shows it is running.
+        setNameChecking(Date.now());
         void (async () => {
             let exists;
             try {
@@ -267,9 +319,12 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
             catch (error) {
                 if (!mounted.current || nameRequest.current !== id || modeRef.current !== "export-name")
                     return;
+                setNameChecking(undefined);
                 setNameError(`Error: ${error instanceof Error ? error.message : String(error)}`);
                 return;
             }
+            if (mounted.current && nameRequest.current === id)
+                setNameChecking(undefined);
             const current = resolveExportFileName(typed.current);
             if (!mounted.current || nameRequest.current !== id || modeRef.current !== "export-name")
                 return;
@@ -288,7 +343,7 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
         const request = confirmRequest.current;
         if (request === undefined)
             return;
-        void run(async () => {
+        void run(request.kind === "export" ? "Exporting…" : "Applying import…", async () => {
             let result;
             if (request.kind === "export") {
                 await writeProfileExport(request.file, chosenProfile());
@@ -304,7 +359,7 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
         });
     };
     const previewImport = () => {
-        void run(async () => {
+        void run("Preparing import preview…", 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);
@@ -320,7 +375,7 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
             return;
         setImportDirectory(selection.directory);
         const id = ++importRequest.current;
-        setMode("busy");
+        startBusy("Loading Profile…");
         void (async () => {
             try {
                 const importedProfile = parseProfile(JSON.parse(await readFile(selection.file, "utf8")));
@@ -347,7 +402,7 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
             return;
         if (current === "browse" || current === "results") {
             if (input === "e") {
-                void run(async () => {
+                void run("Loading Profile…", async () => {
                     const exported = await buildProfileExport(operations, apps, {
                         homeDirectory: environment.homeDirectory, packageOperations: packages,
                     });
@@ -416,7 +471,9 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
             answerYesNo(input, key, confirmApply, () => setMode(confirmRequest.current?.kind === "import" ? "import-list" : "export-name"));
             if (input === "y" || input === "n" || key.escape)
                 return;
-            const next = movePreviewCursor(cursorRef.current, lines.length, input, key, height);
+            // 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 next = movePreviewCursor(cursorRef.current, viewport.total, input, key, viewport.height);
             if (next !== undefined)
                 cursorTo(Math.max(0, next));
             return;
@@ -521,9 +578,21 @@ export function ProfileView({ operations, environment = {}, onCapturingChange, l
     const liveDestination = nameOutcome.kind === "ok"
         ? exportDestination(exportDirectory ?? startDirectory, nameOutcome.fileName) : undefined;
     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);
+    // 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)
+        + (nameChecking === undefined ? 0 : 1) + textRows(NAME_HINT);
+    const fieldRows = useListHeight(listHeight, nameFixedRows, 3);
+    // Leftover rows go to the paths, which are the long fields, before the typed name.
+    const folderRows = Math.floor(fieldRows / 3) + (fieldRows % 3 >= 2 ? 1 : 0);
+    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" ? _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] });
+                    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] });
 }

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

@@ -1,3 +1,4 @@
+import { busy } from "./working-model.js";
 export const initialMode = { kind: "browse" };
 export function modeReducer(mode, event) {
     switch (event.type) {
@@ -14,7 +15,7 @@ export function modeReducer(mode, event) {
         case "preview-cursor":
             return mode.kind === "confirm" && mode.action === "refresh" ? { ...mode, cursor: event.cursor } : mode;
         case "busy":
-            return { kind: "busy" };
+            return busy(event.label, mode, () => event.startedAt);
         case "done":
             return initialMode;
     }

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

@@ -10,10 +10,11 @@ import { hasUnmanagedCopy, isInstalled, loadInstalledSkills } from "./catalog-in
 import { appName, appRecipePreviewLines, appStepLines } from "./app-actions.js";
 import { errorText } from "./batch.js";
 import { useMounted } from "./view-state.js";
-import { BorderPanel, DecisionPrompt, PreviewConfirm } from "./panel-parts.js";
+import { BorderPanel, DecisionPrompt, PreviewConfirm, Working } from "./panel-parts.js";
 import { answerYesNo, movePreviewCursor } from "./mode-keys.js";
 import { previewViewport } from "./preview-window.js";
 import { theme } from "./theme.js";
+import { busy } from "./working-model.js";
 function recipeApprovalChrome(entry) {
     return {
         title: "Recipe approval · does not install",
@@ -43,6 +44,9 @@ export function useSourcesRecipes({ operations, environment, onCapturingChange,
     const [error, setError] = useState();
     const [notice, setNotice] = useState();
     const [loadError, setLoadError] = useState();
+    // When the oldest running reload began; reloads can overlap, so a count decides when loading ends.
+    const [loadingSince, setLoadingSince] = useState(() => Date.now());
+    const reloading = useRef(0);
     const [mode, setModeState] = useState({ kind: "browse" });
     const modeRef = useRef(mode);
     const setMode = (next) => {
@@ -50,6 +54,8 @@ export function useSourcesRecipes({ operations, environment, onCapturingChange,
         onCapturingChange?.(next.kind !== "browse");
         setModeState(next);
     };
+    /** Shows the busy panel; an operation already busy keeps its start time. */
+    const setBusy = (label) => setMode(busy(label, modeRef.current));
     const finish = async () => {
         await reload();
         if (mounted.current)
@@ -57,7 +63,7 @@ export function useSourcesRecipes({ operations, environment, onCapturingChange,
     };
     const preview = async (entry, status, removeAfterApproval = false) => {
         setError(undefined);
-        setMode({ kind: "busy" });
+        setBusy("Preparing App recipe preview…");
         try {
             const steps = await apps.preview(entry);
             if (mounted.current) {
@@ -95,7 +101,7 @@ export function useSourcesRecipes({ operations, environment, onCapturingChange,
         },
     };
     const startAI = async () => {
-        setMode({ kind: "busy" });
+        setBusy("Checking the authoring Skill…");
         try {
             if (!operations.discoverSkills)
                 throw new Error("Discovery is not supported by the configured operations");
@@ -124,7 +130,7 @@ export function useSourcesRecipes({ operations, environment, onCapturingChange,
     };
     const startRemoval = async (entry) => {
         setError(undefined);
-        setMode({ kind: "busy" });
+        setBusy("Checking App recipe…");
         try {
             const approval = await apps.approvalStatus(entry);
             if (approval.status === "needs approval") {
@@ -143,7 +149,7 @@ export function useSourcesRecipes({ operations, environment, onCapturingChange,
         }
     };
     const uninstall = async (current) => {
-        setMode({ kind: "busy" });
+        setBusy(current.kind === "uninstall-manual" ? "Checking App uninstall…" : "Uninstalling App…");
         try {
             const result = current.kind === "uninstall-manual"
                 ? await apps.completeManual(current.plan, true)
@@ -200,7 +206,7 @@ export function useSourcesRecipes({ operations, environment, onCapturingChange,
             else if (input === "n" || key.escape)
                 cancel();
             else if (input === "y" && viewport.reachedEnd) {
-                setMode({ kind: "busy" });
+                setBusy("Approving App recipe…");
                 void apps.approve(current.entry).then(async () => {
                     await reload();
                     if (!mounted.current)
@@ -220,7 +226,7 @@ export function useSourcesRecipes({ operations, environment, onCapturingChange,
         }
         if (current.kind === "uninstall-question") {
             answerYesNo(input, key, () => {
-                setMode({ kind: "busy" });
+                setBusy("Preparing App uninstall…");
                 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, cursor: 0 });
@@ -245,7 +251,7 @@ export function useSourcesRecipes({ operations, environment, onCapturingChange,
         }
         if (current.kind === "remove") {
             answerYesNo(input, key, () => {
-                setMode({ kind: "busy" });
+                setBusy("Removing App recipe…");
                 void removeAppRecipe(apps, current.removal, true).then(async () => {
                     if (mounted.current)
                         setNotice(`Removed App recipe: ${current.removal.file}`);
@@ -276,6 +282,8 @@ export function useSourcesRecipes({ operations, environment, onCapturingChange,
     };
     /** Reloads parsing and approval receipts, never version/latest commands. */
     const reload = useCallback(async () => {
+        if (reloading.current++ === 0 && mounted.current)
+            setLoadingSince(Date.now());
         try {
             const entries = await apps.load();
             const rows = await Promise.all(entries.map(async (entry) => {
@@ -294,9 +302,13 @@ export function useSourcesRecipes({ operations, environment, onCapturingChange,
             if (mounted.current)
                 setLoadError(errorText(error));
         }
+        finally {
+            if (--reloading.current === 0 && mounted.current)
+                setLoadingSince(undefined);
+        }
     }, [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(Text, { children: "Working..." }) }) : null, mode.kind === "approve" ? (() => {
+    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" ? (() => {
                 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 });
@@ -306,5 +318,5 @@ export function useSourcesRecipes({ operations, environment, onCapturingChange,
                 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" };
+    return { rows, loadingSince, handleKey, startAdd, reload, clearMessage: () => { setError(undefined); setNotice(undefined); }, panel, directory: apps.directory, capturing: mode.kind !== "browse" };
 }