@iseoane/agent-depot 0.5.2 → 0.6.1

package/dist/src/tui/app.js

@@ -1,21 +1,15 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text, useApp, useWindowSize } from "ink";
 import { useCallback, useRef, useState } from "react";
 import { AGENT_DEPOT_PACKAGE_VERSION } from "../project-manifest.js";
 import { CatalogView } from "./catalog-view.js";
 import { InstallationsView } from "./installations-view.js";
+import { headerTabRows, TABS } from "./header-layout.js";
 import { useKeys } from "./keys.js";
 import { ProfileView } from "./profile-view.js";
 import { SourcesView, sourceRowHints } from "./sources-view.js";
-import { separatorLine, theme } from "./theme.js";
+import { theme } from "./theme.js";
 import { UpdatesView } from "./updates-view.js";
-const TABS = [
-    ["sources", "1 Sources"],
-    ["catalog", "2 Catalog"],
-    ["installations", "3 Installations"],
-    ["updates", "4 Updates"],
-    ["profile", "5 Import/Export"],
-];
 /** Sources derives its own hints from the selected row, so it is excluded here. */
 function hintsOf(view, catalogFocusedOnSource) {
     switch (view) {
@@ -26,9 +20,13 @@ function hintsOf(view, catalogFocusedOnSource) {
         case "profile":
             return "e export · i import · q quit";
         case "updates":
-            return "j/k move · space mark · a all · Enter preview · r check again · q quit";
+            return "j/k move · space mark · a all · Enter preview · u update · r check again · q quit";
     }
 }
+export function Header({ view, columns }) {
+    const innerWidth = Math.max(columns - 4, 1);
+    return (_jsxs(Box, { borderStyle: "round", borderColor: theme.accent, paddingX: 1, flexDirection: "column", width: columns, children: [_jsxs(Box, { width: innerWidth, justifyContent: "space-between", children: [_jsx(Text, { color: theme.accent, bold: true, children: "AGENT DEPOT" }), AGENT_DEPOT_PACKAGE_VERSION === undefined ? null : _jsxs(Text, { color: theme.value, children: ["v", AGENT_DEPOT_PACKAGE_VERSION] })] }), _jsx(Box, { flexDirection: "column", children: headerTabRows(innerWidth).map((row, rowIndex) => (_jsx(Text, { wrap: "truncate-end", children: row.map(([name, label], tabIndex) => (_jsxs(Text, { color: view === name ? theme.accent : theme.inactive, children: [tabIndex === 0 ? "" : "  ", view === name ? "▶ " : "", label] }, name))) }, rowIndex))) })] }));
+}
 export function App({ operations, environment, onExit }) {
     const { exit } = useApp();
     const { columns, rows } = useWindowSize();
@@ -43,10 +41,15 @@ export function App({ operations, environment, onExit }) {
     const [catalogSourceId, setCatalogSourceId] = useState();
     const [sourcesHints, setSourcesHints] = useState(sourceRowHints(undefined));
     const showView = (next) => setView(next);
-    useKeys((input) => {
+    useKeys((input, key) => {
         if (capturingRef.current)
             return;
-        if (input === "q") {
+        if (key.tab) {
+            const current = TABS.findIndex(([name]) => name === view);
+            const direction = key.shift ? -1 : 1;
+            showView(TABS[(current + direction + TABS.length) % TABS.length][0]);
+        }
+        else if (input === "q") {
             onExit?.();
             exit();
         }
@@ -61,8 +64,10 @@ export function App({ operations, environment, onExit }) {
         else if (input === "5")
             showView("profile");
     });
-    return (_jsxs(Box, { flexDirection: "column", height: rows, children: [_jsxs(Text, { bold: true, color: theme.accent, children: ["Agent Depot", AGENT_DEPOT_PACKAGE_VERSION === undefined ? "" : ` v${AGENT_DEPOT_PACKAGE_VERSION}`] }), _jsx(Text, { children: TABS.map(([name, label], position) => (_jsxs(Text, { color: view === name ? theme.accent : theme.inactive, bold: view === name, children: [position > 0 ? " " : "", view === name ? `[${label}]` : ` ${label} `] }, name))) }), _jsx(Text, { color: theme.muted, children: separatorLine(columns) }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: view === "sources" ? (_jsx(SourcesView, { operations: operations, environment: environment, onCapturingChange: onCapturingChange, onHintsChange: setSourcesHints, onOpenCatalog: (source) => {
+    return (_jsxs(Box, { flexDirection: "column", height: rows, children: [_jsx(Header, { view: view, columns: columns }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: view === "sources" ? (_jsx(SourcesView, { operations: operations, environment: environment, onCapturingChange: onCapturingChange, onHintsChange: setSourcesHints, onOpenCatalog: (source) => {
                         setCatalogSourceId(source.id);
                         setView("catalog");
-                    } })) : view === "installations" ? (_jsx(InstallationsView, { operations: operations, environment: environment, onCapturingChange: onCapturingChange })) : view === "profile" ? (_jsx(ProfileView, { operations: operations, environment: environment, onCapturingChange: onCapturingChange })) : view === "updates" ? (_jsx(UpdatesView, { operations: operations, environment: environment, onCapturingChange: onCapturingChange })) : (_jsx(CatalogView, { operations: operations, sourceId: catalogSourceId, environment: environment, onCapturingChange: onCapturingChange })) }), _jsx(Text, { color: theme.muted, children: capturing ? "Enter submit · Esc cancel · y/n confirm · space toggle" : view === "sources" ? sourcesHints : hintsOf(view, catalogSourceId !== undefined) })] }));
+                    } })) : view === "installations" ? (_jsx(InstallationsView, { operations: operations, environment: environment, onCapturingChange: onCapturingChange })) : view === "profile" ? (_jsx(ProfileView, { operations: operations, environment: environment, onCapturingChange: onCapturingChange })) : view === "updates" ? (_jsx(UpdatesView, { operations: operations, environment: environment, onCapturingChange: onCapturingChange })) : (_jsx(CatalogView, { operations: operations, sourceId: catalogSourceId, environment: environment, onCapturingChange: onCapturingChange })) }), _jsx(Text, { color: theme.muted, children: capturing
+                    ? columns < 64 ? "Enter submit · Esc cancel" : "Enter submit · Esc cancel · y/n confirm · space toggle"
+                    : view === "sources" ? sourcesHints : hintsOf(view, catalogSourceId !== undefined) })] }));
 }

package/dist/src/tui/catalog-browse.js

@@ -47,6 +47,11 @@ function markRepository(context, row, visible) {
 /** `i`: installs the highlighted bundle, or the marked Skills that are listed, or the highlighted one. */
 function chooseHosts(context, row) {
     const data = row.node.data;
+    if (data.kind === "app") {
+        context.setMessage(undefined);
+        context.startApp(data.row.entry);
+        return;
+    }
     // A bundle row is not markable, so it acts on itself and never picks up a Skill mark.
     if (data.kind === "bundle") {
         context.setMessage(undefined);
@@ -87,6 +92,6 @@ export function handleCatalogBrowseKey(context, input, key) {
         markRow(context, row);
     else if (input === "a")
         markRepository(context, row, snapshot.visible);
-    else if (input === "i" && context.ready && row)
+    else if (input === "i" && row && (context.ready || row.node.data.kind === "app"))
         chooseHosts(context, row);
 }

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

@@ -6,12 +6,12 @@ import { skillKey } from "./catalog-tree.js";
 import { hasUnmanagedCopy } from "./catalog-installs.js";
 import { describeRow, truncateDescription, UNMANAGED_MARKER } from "./catalog-tree.js";
 import { isPackageMode, PackagePanel } from "./package-actions.js";
-import { HostChecklist, PreviewLines } from "./panel-parts.js";
+import { BorderPanel, DecisionPrompt, HostChecklist, PreviewLines } from "./panel-parts.js";
 import { rowStyle } from "./theme.js";
 import { theme } from "./theme.js";
 /** Scope and counts, the filter line, and why the list may be empty. */
-export function CatalogHeader({ scope, listed, installable, total, filter }) {
-    return (_jsxs(_Fragment, { children: [_jsxs(Text, { color: theme.muted, children: ["Scope: ", scope, "  ", listed, " of ", installable] }), filter.editing || filter.query !== "" ? (_jsxs(Text, { children: ["Filter: ", filter.query, filter.editing ? "_" : ""] })) : null, total === 0 ? _jsx(Text, { children: "No skills" }) : null, total > 0 && installable === 0 ? _jsx(Text, { children: "All skills are installed" }) : null, installable > 0 && listed === 0 ? _jsx(Text, { children: "No matching skills" }) : null] }));
+export function CatalogHeader({ scope, listed, installable, total, appCount, filter }) {
+    return (_jsxs(_Fragment, { children: [_jsxs(Text, { color: theme.muted, children: ["Scope: ", scope, "  ", listed, " of ", installable, " Skills  \u00B7  ", appCount, " Apps"] }), filter.editing || filter.query !== "" ? (_jsxs(Text, { children: ["Filter: ", filter.query, filter.editing ? "_" : ""] })) : null, total === 0 ? _jsx(Text, { children: "No skills" }) : null, total > 0 && installable === 0 ? _jsx(Text, { children: "All skills are installed" }) : null, installable > 0 && listed === 0 ? _jsx(Text, { children: "No matching skills" }) : null] }));
 }
 /** One line of the Catalog tree: cursor, indent, mark box, label and the ownership markers. */
 export function CatalogRowLine({ row, selected, marked, installed }) {
@@ -20,7 +20,7 @@ export function CatalogRowLine({ row, selected, marked, installed }) {
     const ownedBy = data.kind === "skill" ? data.ownedBy : undefined;
     return (_jsxs(Text, { ...rowStyle(selected), color: isGroup ? theme.group : undefined, wrap: "truncate-end", children: [selected ? "> " : "  ", "  ".repeat(row.depth), data.kind === "skill" ? marked ? "[x] " : "[ ] " : "", data.kind === "skill" && ownedBy !== undefined
                 ? _jsxs(_Fragment, { children: [data.skill.name, _jsxs(Text, { color: theme.marker, children: ["  ", "[", packageOwnerBadge(ownedBy), "]"] }), "  ", truncateDescription(data.skill.description)] })
-                : describeRow(row), data.kind === "skill" && hasUnmanagedCopy(data.skill, installed)
+                : data.kind === "app" ? `App ${data.row.entry.recipe?.name ?? data.row.entry.file}` : describeRow(row), data.kind === "app" ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.legend, children: "  " }), _jsx(Text, { color: data.row.inspection.status === "not installed" ? theme.warning : theme.value, children: data.row.inspection.status })] })) : null, data.kind === "skill" && hasUnmanagedCopy(data.skill, installed)
                 ? _jsxs(Text, { color: theme.marker, children: ["  ", UNMANAGED_MARKER] })
                 : null] }));
 }
@@ -37,23 +37,23 @@ export function ActionPanel({ mode }) {
         case "browse":
             return null;
         case "host":
-            return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: ["Install ", describeSkills(mode.skills), ". Host (space/1-4 toggle, j/k move, Enter continue, Esc cancel):"] }), _jsx(HostChecklist, { choices: HOST_CHOICES, cursor: mode.cursor, selected: mode.selected })] }));
+            return (_jsxs(BorderPanel, { title: `Skill selection · ${mode.skills.length} selected`, children: [_jsxs(Text, { children: ["Install ", describeSkills(mode.skills), ". Host (space/1-4 toggle \u00B7 j/k move \u00B7 Enter continue \u00B7 Esc cancel)"] }), _jsx(HostChecklist, { choices: HOST_CHOICES, cursor: mode.cursor, selected: mode.selected })] }));
         case "scope":
-            return _jsxs(Text, { children: ["Scope: ", SCOPE_CHOICES.map((scope, i) => `${i + 1} ${scope}`).join("  "), "  (Esc cancel)"] });
+            return _jsx(BorderPanel, { title: "Skill installation scope", children: _jsxs(Text, { children: [SCOPE_CHOICES.map((scope, i) => `${i + 1} ${scope}`).join("  "), "  (Esc cancel)"] }) });
         case "version":
-            return _jsx(Text, { children: "Version: 1 latest  2 fixed  (Esc cancel)" });
+            return _jsx(BorderPanel, { title: "Skill version policy", children: _jsx(Text, { children: "1 latest  2 fixed  (Esc cancel)" }) });
         case "fixed":
-            return _jsxs(Text, { children: ["Fixed version: ", mode.value, "_  (Enter confirm, Esc cancel)"] });
+            return _jsx(BorderPanel, { title: "Fixed Skill version", children: _jsxs(Text, { children: [mode.value, "_  (Enter confirm, Esc cancel)"] }) });
         case "confirm-install": {
             const ready = mode.items.filter((item) => item.prepared !== undefined);
             const single = mode.items.length === 1;
-            return (_jsxs(Box, { flexDirection: "column", children: [mode.items.map(({ skill, prepared, error }) => prepared === undefined ? (_jsxs(Text, { color: theme.error, children: ["Cannot install ", skill.name, ": ", error] }, skillKey(skill))) : (_jsxs(Box, { flexDirection: "column", children: [single ? null : _jsx(Text, { color: theme.group, children: skill.name }), _jsx(PreviewLines, { lines: prepared.preview })] }, skillKey(skill)))), ready.some((item) => item.prepared?.runsExternalCommand) ? _jsx(Text, { color: theme.warning, children: "This install runs an external command (see above)." }) : null, _jsxs(Text, { children: ["Install ", describeSkills(ready.map((item) => item.skill)), "? y/n"] })] }));
+            return (_jsxs(BorderPanel, { title: `Skill install preview · ${ready.length} ready`, children: [mode.items.map(({ skill, prepared, error }) => prepared === undefined ? (_jsxs(Text, { color: theme.error, children: ["Cannot install ", skill.name, ": ", error] }, skillKey(skill))) : (_jsxs(Box, { flexDirection: "column", children: [single ? null : _jsx(Text, { color: theme.group, children: skill.name }), _jsx(PreviewLines, { lines: prepared.preview })] }, skillKey(skill)))), ready.some((item) => item.prepared?.runsExternalCommand) ? _jsx(Text, { color: theme.warning, children: "This install runs an external command (see above)." }) : null, _jsxs(DecisionPrompt, { children: ["Install ", describeSkills(ready.map((item) => item.skill)), "?"] })] }));
         }
         case "confirm-exposure": {
             const names = mode.items.filter((item) => item.prepared?.additionalHostExposure).map((item) => item.skill.name);
-            return (_jsxs(Text, { color: theme.warning, children: [names.length === 1 ? `An identical ${names[0]} already exists` : `Identical copies of ${names.join(", ")} already exist`, "; adding the missing Host location needs separate confirmation (CLI: --confirm-additional-host). Confirm? y/n"] }));
+            return (_jsx(BorderPanel, { title: `Skill Host exposure · ${names.length} confirmation`, children: _jsxs(Text, { color: theme.warning, children: [names.length === 1 ? `An identical ${names[0]} already exists` : `Identical copies of ${names.join(", ")} already exist`, "; adding the missing Host location needs separate confirmation. ", _jsx(DecisionPrompt, { children: "Confirm?" })] }) }));
         }
         case "busy":
-            return _jsx(Text, { children: mode.label });
+            return _jsx(BorderPanel, { title: "Skill install", children: _jsx(Text, { children: mode.label }) });
     }
 }

package/dist/src/tui/catalog-state.js

@@ -87,6 +87,34 @@ export function useCatalogSkills(operations, sourceId, all, env, reloadKey = 0)
     }, [operations, sourceId, all, env, reloadKey]);
     return state;
 }
+export function useCatalogApps(apps) {
+    const [state, setState] = useState({ status: "loading" });
+    const generation = useRef(0);
+    const reload = useCallback(async () => {
+        const current = ++generation.current;
+        setState({ status: "loading" });
+        try {
+            const rows = await Promise.all((await apps.load()).filter(entry => entry.applicable).map(async (entry) => ({
+                entry,
+                inspection: await apps.inspect(entry),
+            })));
+            if (generation.current === current)
+                setState({
+                    status: "ready",
+                    rows: rows.filter(row => row.inspection.status === "not installed"),
+                });
+        }
+        catch (error) {
+            if (generation.current === current)
+                setState({ status: "ready", rows: [], error: error instanceof Error ? error.message : String(error) });
+        }
+    }, [apps]);
+    useEffect(() => {
+        void reload();
+        return () => { generation.current += 1; };
+    }, [reload]);
+    return { state, reload };
+}
 /** The Skills already installed, loaded on mount and on demand. */
 export function useInstalledSkills(operations, env, mounted) {
     const [installed, setInstalled] = useState(NO_INSTALLED);

package/dist/src/tui/catalog-tree.js

@@ -23,7 +23,7 @@ export function sourceLabel(source) {
     return url.hostname === "github.com" ? repository : `${url.host}/${repository}`;
 }
 /** Skills and their Source's Packages, in first-seen order; a Source with neither never appears. */
-export function buildTree(skills, sources = [], bundles = [], activeDescriptors = []) {
+export function buildTree(skills, sources = [], bundles = [], activeDescriptors = [], apps = []) {
     const labels = new Map(sources.map((source) => [source.id, sourceLabel(source)]));
     const active = new Set(activeDescriptors);
     const bySource = new Map();
@@ -32,7 +32,7 @@ export function buildTree(skills, sources = [], bundles = [], activeDescriptors
     const bundlesBySource = new Map();
     for (const bundle of bundles)
         bundlesBySource.set(bundle.sourceId, [...(bundlesBySource.get(bundle.sourceId) ?? []), bundle]);
-    return [...new Set([...bySource.keys(), ...bundlesBySource.keys()])].map((sourceId) => {
+    const sourcesTree = [...new Set([...bySource.keys(), ...bundlesBySource.keys()])].map((sourceId) => {
         const members = bySource.get(sourceId) ?? [];
         const sourceBundles = bundlesBySource.get(sourceId) ?? [];
         const owned = packageOwnedSkillMatcher(sourceBundles.map((entry) => entry.descriptor).filter((descriptor) => active.has(descriptor)));
@@ -52,13 +52,28 @@ export function buildTree(skills, sources = [], bundles = [], activeDescriptors
             ],
         };
     });
+    return apps.length === 0 ? sourcesTree : [...sourcesTree, {
+            id: "apps:user-global",
+            data: { kind: "group", label: `Apps (user-global) (${apps.length})` },
+            children: apps.map((row) => ({ id: `app:${row.entry.file}`, data: { kind: "app", row } })),
+        }];
 }
-function allSourceIds(roots) {
-    return new Set(roots.filter((root) => (root.children?.length ?? 0) > 0).map((root) => root.id));
+function allExpandableIds(roots) {
+    const ids = new Set();
+    const visit = (nodes) => {
+        for (const node of nodes) {
+            if ((node.children?.length ?? 0) === 0)
+                continue;
+            ids.add(node.id);
+            visit(node.children);
+        }
+    };
+    visit(roots);
+    return ids;
 }
 /** Filtering opens matching Sources; otherwise all groups start collapsed. */
 export function openByDefault(nodes, query) {
-    return query === "" ? defaultExpanded() : allSourceIds(nodes);
+    return query === "" ? defaultExpanded() : allExpandableIds(nodes);
 }
 export function describeRow(row) {
     const { data } = row.node;
@@ -69,6 +84,8 @@ export function describeRow(row) {
     if (data.kind === "bundle") {
         return `Package ${data.entry.descriptor.name} (${data.entry.descriptor.host})  ${packageVersionLabel(data.entry.descriptor.version)}`;
     }
+    if (data.kind === "app")
+        return `App ${data.row.entry.recipe?.name ?? data.row.entry.file}  ${data.row.inspection.status}`;
     return `${data.skill.name}  ${truncateDescription(data.skill.description)}`;
 }
 /** The Skills under the tree's Sources, in display order. */

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

@@ -1,17 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text, useWindowSize } from "ink";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { createAppOperations } from "../app-flow.js";
 import { BROWSE } from "./catalog-actions.js";
 import { handleCatalogBrowseKey } from "./catalog-browse.js";
 import { filterSkills } from "./catalog-filter.js";
 import { handleCatalogActionKey } from "./catalog-flow.js";
 import { isInstalled } from "./catalog-installs.js";
+import { AppPanel, handleAppKey, startAppAction } from "./app-actions.js";
 import { ActionPanel, CatalogHeader, CatalogRowLine, CatalogSelectionHelp } from "./catalog-panel.js";
 import { packageOwnedSkillNotice } from "./catalog-ownership.js";
 import { packageOperationsOf } from "./environment.js";
 import { handlePackageKey, isPackageMode, startPackageAction } from "./package-actions.js";
 import { ListFooter } from "./panel-parts.js";
-import { useCatalogFilter, useCatalogSkills, useInstalledSkills } from "./catalog-state.js";
+import { useCatalogApps, useCatalogFilter, useCatalogSkills, useInstalledSkills } from "./catalog-state.js";
 import { buildTree, leavesOf, openByDefault, skillKey } from "./catalog-tree.js";
 import { theme } from "./theme.js";
 import { useTreeNavigation } from "./tree-navigation.js";
@@ -38,7 +40,7 @@ function wrappedLineCount(text, columns) {
     return lines;
 }
 export function CatalogView({ operations, sourceId, onCapturingChange, environment, listHeight }) {
-    const { columns } = useWindowSize();
+    const { columns, rows: terminalRows } = useWindowSize();
     const env = environment ?? NO_ENVIRONMENT;
     const [all, setAll] = useState(sourceId === undefined);
     const mounted = useMounted();
@@ -52,7 +54,17 @@ export function CatalogView({ operations, sourceId, onCapturingChange, environme
     const filter = useCatalogFilter(actionRef, onCapturingChange);
     const state = useCatalogSkills(operations, sourceId, all, env, reloadKey);
     const packages = useMemo(() => packageOperationsOf(env), [env]);
+    const apps = useMemo(() => createAppOperations({ homeDirectory: env.homeDirectory, ...env.appEnvironment }), [env]);
+    const appCatalogState = useCatalogApps(apps);
+    const appCatalog = appCatalogState.state;
     const { installed, installedReady, reloadInstalled } = useInstalledSkills(operations, env, mounted);
+    const [appMode, setAppMode] = useState();
+    const appModeRef = useRef(undefined);
+    const setAppAction = (mode) => {
+        appModeRef.current = mode;
+        onCapturingChange?.(mode !== undefined || filter.filterRef.current.editing || actionRef.current.kind !== "browse");
+        setAppMode(mode);
+    };
     const setAction = (next) => {
         actionRef.current = next;
         onCapturingChange?.(filter.filterRef.current.editing || next.kind !== "browse");
@@ -61,7 +73,13 @@ export function CatalogView({ operations, sourceId, onCapturingChange, environme
     const skills = state.status === "ready" ? state.skills : [];
     const installable = useMemo(() => skills.filter((skill) => !isInstalled(skill, installed)), [state, installed]);
     const visible = useMemo(() => filterSkills(installable, filter.filter.query), [installable, filter.filter.query]);
-    const roots = useMemo(() => buildTree(visible, state.status === "ready" ? state.sources : [], state.status === "ready" ? state.bundles : [], state.status === "ready" ? state.activeBundles : []), [visible, state]);
+    const visibleApps = useMemo(() => {
+        if (appCatalog.status !== "ready")
+            return [];
+        const query = filter.filter.query.trim().toLowerCase();
+        return query === "" ? appCatalog.rows : appCatalog.rows.filter(row => (row.entry.recipe?.name ?? row.entry.file).toLowerCase().includes(query));
+    }, [appCatalog, filter.filter.query]);
+    const roots = useMemo(() => buildTree(visible, state.status === "ready" ? state.sources : [], state.status === "ready" ? state.bundles : [], state.status === "ready" ? state.activeBundles : [], visibleApps), [visible, state, visibleApps]);
     const navigation = useTreeNavigation(roots, (nodes) => openByDefault(nodes, filter.queryRef.current));
     // Discovering again starts the list over.
     const { restart } = navigation;
@@ -86,6 +104,23 @@ export function CatalogView({ operations, sourceId, onCapturingChange, environme
             setAction(BROWSE);
         },
     };
+    const appManage = {
+        setMode: setAppAction,
+        browse: () => setAppAction(undefined),
+        setMessage,
+        isMounted: () => mounted.current,
+        unmark: ids => marks.setMarked(new Set([...marks.markedRef.current].filter(id => !ids.includes(id)))),
+        finish: async (result) => {
+            await reloadInstalled();
+            if (!mounted.current)
+                return;
+            await appCatalogState.reload();
+            if (!mounted.current)
+                return;
+            setMessage(result);
+            setAppAction(undefined);
+        },
+    };
     const packageHost = {
         setMode: setAction,
         browse: () => setAction(BROWSE),
@@ -107,29 +142,37 @@ export function CatalogView({ operations, sourceId, onCapturingChange, environme
         marks,
         filter,
         canWiden: sourceId !== undefined,
-        ready: state.status === "ready",
+        ready: state.status === "ready" && appCatalog.status === "ready",
         toggleAll: () => setAll((value) => !value),
         startPackage: (target) => void startPackageAction(packageContext, target, "i"),
+        startApp: (entry) => void startAppAction({ apps, manage: appManage, terminalRows: terminalRows || 24, terminalColumns: columns || 80 }, [entry], "i"),
         setMessage,
         setAction,
     };
     useKeys((input, key) => {
-        const mode = actionRef.current;
-        if (isPackageMode(mode))
-            handlePackageKey(packageContext, mode, input, key);
-        else if (mode.kind !== "browse")
-            handleCatalogActionKey(flow, mode, input, key);
-        else if (filter.filterRef.current.editing)
-            filter.handleEditKey(input, key, navigation.restart);
-        else
-            handleCatalogBrowseKey(browse, input, key);
+        const runningAppMode = appModeRef.current;
+        if (runningAppMode !== undefined)
+            handleAppKey({ apps, manage: appManage, terminalRows: terminalRows || 24, terminalColumns: columns || 80 }, runningAppMode, input, key);
+        else {
+            const mode = actionRef.current;
+            if (isPackageMode(mode))
+                handlePackageKey(packageContext, mode, input, key);
+            else if (mode.kind !== "browse")
+                handleCatalogActionKey(flow, mode, input, key);
+            else if (filter.filterRef.current.editing)
+                filter.handleEditKey(input, key, navigation.restart);
+            else
+                handleCatalogBrowseKey(browse, input, key);
+        }
     });
     const scope = all || sourceId === undefined ? "all sources" : sourceId;
-    if (state.status === "loading" || (state.status === "ready" && !installedReady))
-        return _jsx(Text, { children: "Loading skills..." });
+    if (state.status === "loading" || appCatalog.status === "loading" || (state.status === "ready" && !installedReady))
+        return _jsx(Text, { children: "Loading catalog..." });
     if (state.status === "error")
         return _jsxs(Text, { color: theme.error, children: ["Error: ", state.message] });
     const window = computeWindow(rows.length, index, height);
     const selectedCount = leavesOf(roots).filter((skill) => marks.marked.has(skillKey(skill))).length;
-    return (_jsxs(Box, { flexDirection: "column", children: [state.warnings.map((warning) => _jsx(Text, { color: theme.warning, children: warning }, warning)), _jsx(CatalogHeader, { scope: scope, listed: visible.length, installable: installable.length, total: skills.length, filter: filter.filter }), rows.slice(window.start, window.end).map((row, offset) => (_jsx(CatalogRowLine, { row: row, selected: window.start + offset === index, marked: marks.marked.has(row.node.id), installed: installed }, row.node.id))), _jsx(CatalogSelectionHelp, { row: rows[index], height: helpLines }), _jsx(ListFooter, { indicator: window.indicator, selectedCount: selectedCount, message: message }), _jsx(ActionPanel, { mode: action })] }));
+    if (appMode !== undefined)
+        return _jsx(AppPanel, { mode: appMode });
+    return (_jsxs(Box, { flexDirection: "column", children: [state.warnings.map((warning) => _jsx(Text, { color: theme.warning, children: warning }, warning)), appCatalog.status === "ready" && appCatalog.error ? _jsxs(Text, { color: theme.error, children: ["Apps unavailable: ", appCatalog.error] }) : null, _jsx(CatalogHeader, { scope: scope, listed: visible.length, installable: installable.length, total: skills.length, appCount: visibleApps.length, filter: filter.filter }), rows.slice(window.start, window.end).map((row, offset) => (_jsx(CatalogRowLine, { row: row, selected: window.start + offset === index, marked: marks.marked.has(row.node.id), installed: installed }, row.node.id))), _jsx(CatalogSelectionHelp, { row: rows[index], height: helpLines }), _jsx(ListFooter, { indicator: window.indicator, selectedCount: selectedCount, message: message }), appMode ? _jsx(AppPanel, { mode: appMode }) : _jsx(ActionPanel, { mode: action })] }));
 }

package/dist/src/tui/file-picker-model.js

@@ -0,0 +1,87 @@
+import { lstat, readdir, stat } from "node:fs/promises";
+import path from "node:path";
+/** The portable Profile artifact extension; import shows only these files until `f`. */
+export const PROFILE_EXTENSION = ".json";
+/** The pre-filled export file name; `Ctrl+U` clears it and a missing extension gains `.json`. */
+export const DEFAULT_PROFILE_FILE_NAME = "agent-depot-profile.json";
+/** The directory an export or import browser opens in. Tests inject `startDirectory`. */
+export function pickerStartDirectory(environment) {
+    return path.resolve(environment.startDirectory ?? environment.projectRoot ?? process.cwd());
+}
+export function isProfileFileName(name) {
+    return path.extname(name).toLowerCase() === PROFILE_EXTENSION;
+}
+/** Directories first, then files, each in code-point order, so the list is stable across platforms. */
+export function sortDirectoryEntries(entries) {
+    return [...entries].sort((left, right) => {
+        if (left.kind !== right.kind)
+            return left.kind === "directory" ? -1 : 1;
+        return left.name < right.name ? -1 : left.name > right.name ? 1 : 0;
+    });
+}
+/** Read one directory into the picker's listing shape; symlinked directories are followed. */
+export async function readDirectoryListing(directory) {
+    const dirents = await readdir(directory, { withFileTypes: true });
+    const entries = [];
+    for (const dirent of dirents) {
+        let isDirectory = dirent.isDirectory();
+        if (!isDirectory && dirent.isSymbolicLink()) {
+            try {
+                isDirectory = (await stat(path.join(directory, dirent.name))).isDirectory();
+            }
+            catch {
+                isDirectory = false;
+            }
+        }
+        entries.push({ name: dirent.name, kind: isDirectory ? "directory" : "file" });
+    }
+    const parent = path.dirname(directory);
+    return { directory, parent: parent === directory ? undefined : parent, entries: sortDirectoryEntries(entries) };
+}
+/** The rows a listing shows: folders for both purposes, files only for `file`, filtered by `f`. */
+export function pickerEntries(listing, purpose, showAllFiles) {
+    return listing.entries.filter(entry => {
+        if (entry.kind === "directory")
+            return true;
+        if (purpose === "directory")
+            return false;
+        return showAllFiles || isProfileFileName(entry.name);
+    });
+}
+/**
+ * Validate a typed file name and give it a JSON extension when it has none.
+ * Separators and the dot directories are refused so the name stays inside the chosen folder.
+ */
+export function resolveExportFileName(input) {
+    if (input === "")
+        return { kind: "invalid", message: "Enter a file name." };
+    if (input === "." || input === "..")
+        return { kind: "invalid", message: "A file name cannot be . or .." };
+    if (input.includes("/") || input.includes("\\"))
+        return { kind: "invalid", message: "A file name cannot contain / or \\." };
+    if (path.extname(input) === "")
+        return { kind: "ok", fileName: `${input}${PROFILE_EXTENSION}`, appendedExtension: true };
+    return { kind: "ok", fileName: input, appendedExtension: false };
+}
+/** The full destination path, shown live in the name editor and in the confirmation. */
+export function exportDestination(directory, fileName) {
+    return path.join(directory, fileName);
+}
+/** A note when the name keeps an extension other than `.json`; `undefined` when nothing needs explaining. */
+export function fileNameNotice(fileName) {
+    const extension = path.extname(fileName);
+    if (extension === "" || extension.toLowerCase() === PROFILE_EXTENSION)
+        return undefined;
+    return `Keeping the ${extension} extension; import lists ${PROFILE_EXTENSION} files by default; press f to show all files.`;
+}
+export async function pathExists(target) {
+    try {
+        await lstat(target);
+        return true;
+    }
+    catch (error) {
+        if (error instanceof Error && "code" in error && error.code === "ENOENT")
+            return false;
+        throw error;
+    }
+}

package/dist/src/tui/file-picker.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import path from "node:path";
+import { Text, useWindowSize } from "ink";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { pickerEntries, readDirectoryListing, PROFILE_EXTENSION } from "./file-picker-model.js";
+import { useKeys } from "./keys.js";
+import { moveCursor } from "./mode-keys.js";
+import { BorderPanel } from "./panel-parts.js";
+import { clipText, wrapText } from "./text-wrap.js";
+import { theme } from "./theme.js";
+import { useMirrored, useMounted } from "./view-state.js";
+import { computeWindow, useListHeight } from "./window.js";
+/**
+ * A picker callback changes the enclosing view's stage. Defer it so the view's own key
+ * handler, which runs in the same event, still sees the picker stage and ignores the key.
+ */
+function settle(action) {
+    queueMicrotask(action);
+}
+/**
+ * A keyboard-only directory and file browser. It owns its keys while mounted, so the
+ * enclosing view must ignore its own bindings in the picker's stages. Each read carries a
+ * request generation, so a slow listing never overwrites a newer directory or an unmount.
+ */
+export function FilePicker({ purpose, startDirectory, notice, onCancel, onChoose, listHeight, readDirectory = readDirectoryListing }) {
+    const [state, setState] = useState({ status: "loading", directory: startDirectory });
+    const [cursor, cursorRef, cursorTo] = useMirrored(0);
+    const [showAllFiles, showAllFilesRef, setShowAllFiles] = useMirrored(false);
+    const [showFullPath, setShowFullPath] = useState(false);
+    const requestId = useRef(0);
+    const mounted = useMounted();
+    const { columns } = useWindowSize();
+    const panelWidth = Math.max((columns || 80) - 4, 1);
+    const navigate = useCallback((directory) => {
+        const id = ++requestId.current;
+        cursorTo(0);
+        setState({ status: "loading", directory });
+        void readDirectory(directory).then(listing => {
+            if (!mounted.current || requestId.current !== id)
+                return;
+            setState({ status: "ready", directory: listing.directory, parent: listing.parent, entries: listing.entries });
+        }, (error) => {
+            if (!mounted.current || requestId.current !== id)
+                return;
+            setState({ status: "error", directory, message: error instanceof Error ? error.message : String(error) });
+        });
+    }, [cursorTo, mounted, readDirectory]);
+    useEffect(() => { navigate(startDirectory); }, [navigate, startDirectory]);
+    const entries = state.status === "ready" ? pickerEntries(state, purpose, showAllFiles) : [];
+    const rows = useMemo(() => {
+        const parent = state.status === "ready" && state.parent !== undefined ? [{ kind: "parent" }] : [];
+        const listing = entries.map(entry => ({ kind: "entry", entry }));
+        const useFolder = state.status === "ready" && purpose === "directory" ? [{ kind: "use-folder" }] : [];
+        return [...useFolder, ...parent, ...listing];
+    }, [entries, purpose, state]);
+    const choose = (row) => {
+        if (!row || state.status !== "ready")
+            return;
+        if (row.kind === "use-folder") {
+            settle(() => onChoose({ kind: "directory", directory: state.directory }));
+            return;
+        }
+        if (row.kind === "parent") {
+            if (state.parent !== undefined)
+                navigate(state.parent);
+            return;
+        }
+        const target = path.join(state.directory, row.entry.name);
+        if (row.entry.kind === "directory")
+            navigate(target);
+        else
+            settle(() => onChoose({ kind: "file", file: target, directory: state.directory }));
+    };
+    useKeys((input, key) => {
+        if (key.escape) {
+            settle(onCancel);
+            return;
+        }
+        if (showFullPath) {
+            if (input === "p")
+                setShowFullPath(false);
+            return;
+        }
+        if (state.status !== "ready") {
+            const fallbackParent = path.dirname(state.directory);
+            if ((key.backspace || key.leftArrow) && fallbackParent !== state.directory)
+                navigate(fallbackParent);
+            return;
+        }
+        if (key.backspace || key.leftArrow) {
+            if (state.parent !== undefined)
+                navigate(state.parent);
+            return;
+        }
+        if (input === "f" && purpose === "file") {
+            setShowAllFiles(!showAllFilesRef.current);
+            cursorTo(0);
+            return;
+        }
+        if (input === "p") {
+            setShowFullPath(true);
+            return;
+        }
+        const next = moveCursor(cursorRef.current, rows.length, input, key);
+        if (next !== undefined) {
+            cursorTo(Math.max(next, 0));
+            return;
+        }
+        if (key.return)
+            choose(rows[Math.min(cursorRef.current, rows.length - 1)]);
+    });
+    const directory = state.directory;
+    const wrappedDirectory = wrapText(`Directory: ${directory}`, panelWidth);
+    const directoryLines = showFullPath || wrappedDirectory.length <= 3
+        ? wrappedDirectory
+        : [wrappedDirectory[0], ...wrapText(`… ${wrappedDirectory.length - 2} lines · press p for full path`, panelWidth), wrappedDirectory.at(-1)];
+    const ordinaryFooterLines = (purpose === "directory"
+        ? ["j/k move · Enter open/use · ←", "parent · p full path · Esc back"]
+        : ["j/k move · Enter open · ← parent", `f ${showAllFiles ? "json only" : "all files"} · p full path · Esc back`])
+        .flatMap(line => wrapText(line, panelWidth));
+    const noticeLines = notice === undefined ? [] : wrapText(notice, panelWidth);
+    const filterNoteLines = !showFullPath && purpose === "file" && state.status === "ready" && !showAllFiles
+        ? wrapText(`Showing ${PROFILE_EXTENSION} only · f shows all files`, panelWidth)
+        : [];
+    const statusLineCount = !showFullPath && (state.status === "loading" || state.status === "error" || (state.status === "ready" && rows.length === 0)) ? 1 : 0;
+    const visibleNoticeLines = showFullPath ? [] : noticeLines;
+    const footerLines = showFullPath ? wrapText("p hide path · Esc back", panelWidth) : ordinaryFooterLines;
+    const reservesWindowIndicator = !showFullPath && rows.length > 0 && listHeight === undefined ? 1 : 0;
+    const reserved = 3 + directoryLines.length + statusLineCount + filterNoteLines.length + visibleNoticeLines.length + footerLines.length + reservesWindowIndicator;
+    const available = useListHeight(listHeight, reserved, 1);
+    const height = rows.length > available && listHeight !== undefined ? Math.max(available - 1, 1) : available;
+    const window = computeWindow(rows.length, cursor, height);
+    const listedRows = showFullPath ? [] : rows.slice(window.start, window.end);
+    return (_jsxs(BorderPanel, { title: purpose === "directory" ? "Choose export folder" : "Choose import file", children: [directoryLines.map((line, index) => _jsx(Text, { color: theme.value, children: line }, index)), !showFullPath && state.status === "loading" ? _jsx(Text, { color: theme.muted, children: "Loading\u2026" }) : null, !showFullPath && state.status === "error" ? _jsxs(Text, { color: theme.error, children: ["Error: ", clipText(state.message, panelWidth)] }) : null, !showFullPath && state.status === "ready" && rows.length === 0 ? _jsx(Text, { color: theme.muted, children: "Empty folder" }) : null, filterNoteLines.map((line, index) => _jsx(Text, { color: theme.muted, children: line }, `filter-${index}`)), listedRows.map((row, position) => {
+                const index = window.start + position;
+                const marker = index === cursor ? "> " : "  ";
+                const label = row.kind === "use-folder" ? `Use this folder: ${directory}`
+                    : row.kind === "parent" ? ".. (parent folder)"
+                        : row.entry.kind === "directory" ? `${row.entry.name}/` : row.entry.name;
+                return _jsxs(Text, { children: [_jsx(Text, { color: theme.field, children: marker }), _jsx(Text, { color: theme.value, children: clipText(label, Math.max(panelWidth - 2, 1)) })] }, index);
+            }), visibleNoticeLines.map((line, index) => _jsx(Text, { color: theme.warning, children: line }, `notice-${index}`)), footerLines.map((line, index) => _jsx(Text, { color: theme.legend, children: line }, `footer-${index}`)), !showFullPath && window.indicator ? _jsx(Text, { color: theme.muted, children: window.indicator }) : null] }));
+}