@aui.io/apollo 0.1.6 → 0.1.9

package/node_modules/@aui.io/apollo-tui/dist/src/opentui-app.js

@@ -1,22 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
 /**
- * Apollo TUI — OpenTUI engine (the real one, per the plan).
+ * Apollo TUI — OpenTUI engine.
  *
- * Renders the five-tab operator app with the animated brand glyph, slash
- * command palette, and command sheets on top of @opentui/react. Business
- * logic stays in @aui.io/apollo-core; presentation-only state lives here.
+ * Global slash command desk; tabs are views. Business logic in apollo-core
+ * via lib/actions.ts.
  */
 import { useEffect, useRef, useState } from "react";
 import { createCliRenderer } from "@opentui/core";
 import { createRoot, useKeyboard } from "@opentui/react";
 import { resolveContext } from "@aui.io/apollo-core/config/index.js";
-import { localDiff, pullBundle, pushBundle, remoteDiff, validateLocalBundle, } from "@aui.io/apollo-core/services/bundles.js";
 import { createClients } from "@aui.io/apollo-core/services/clients.js";
-import { provisionMockDb, wireMockDbConnection, } from "@aui.io/apollo-core/services/mockdb.js";
-import { getStatus } from "@aui.io/apollo-core/services/status.service.js";
 import { sendMessage } from "@aui.io/apollo-core/services/messaging.js";
 import { GlyphController } from "./components/glyph.js";
-import { filterCommands, resolveCommand, } from "./lib/commands.js";
+import { applyPick, chatOverlay, destructiveSpec, loadPickerCatalog, refreshContext, runDestructive, runSheetAction, runSimpleCommand, } from "./lib/actions.js";
+import { filterCommands, helpLines, PLACE_ONBOARD_COMMAND, resolveCommand, } from "./lib/commands.js";
+import { checkConfirm, createConfirm } from "./lib/confirm.js";
+import { clampPickerCursor, effectivePickerFilter, filterPickerItems, pickerColumnWidths, pickerPageSize, resolvePickerAnswer, truncatePickerText, } from "./lib/picker.js";
+import { hasPlace } from "./lib/place.js";
 import { createSheet, moveFocus, setFocusedValue, validateSheet, visibleFields, } from "./lib/sheet.js";
 import { scopeFromContext } from "./lib/scope.js";
 import { TABS, nextTab, prevTab, tabByIndex } from "./lib/tabs.js";
@@ -27,30 +27,38 @@ const RED = "#D46A6A";
 const DIM = "#8A8A8A";
 const FAINT = "#5C5C5C";
 const FG = "#D8D8D8";
-const VERSION = process.env.npm_package_version ?? "0.1.2";
-function diffSummary(diff) {
-    const total = diff.added.length + diff.changed.length + diff.removed.length;
-    if (total === 0)
-        return "no changes";
-    return `+${diff.added.length} ~${diff.changed.length} -${diff.removed.length}`;
-}
-function App({ context, initialScope, glyph, onQuit }) {
+const VERSION = process.env.npm_package_version ?? "0.1.7";
+function App({ context: initialContext, initialScope, glyph, onQuit }) {
+    const [context, setContext] = useState(initialContext);
+    const [scope, setScope] = useState(initialScope);
     const [tab, setTab] = useState("overview");
     const [input, setInput] = useState("");
     const [chat, setChat] = useState([]);
-    const [toast, setToast] = useState(undefined);
-    const [sheet, setSheet] = useState(undefined);
-    const [sheetCommand, setSheetCommand] = useState(undefined);
+    const [threadId, setThreadId] = useState();
+    const [toast, setToast] = useState();
+    const [sheet, setSheet] = useState();
+    const [sheetCommand, setSheetCommand] = useState();
+    const [picker, setPicker] = useState();
+    const [confirm, setConfirm] = useState();
+    const [paneTitle, setPaneTitle] = useState();
+    const [paneLines, setPaneLines] = useState([]);
     const [working, setWorking] = useState(false);
     const [trace, setTrace] = useState(false);
     const [localMode, setLocalMode] = useState(false);
     const [vars, setVars] = useState([]);
     const [frame, setFrame] = useState(glyph.frame());
-    const scope = initialScope;
-    // Keep chat state accessible from async handlers without stale closures.
-    const stateRef = useRef({ tab, sheet, sheetCommand });
-    stateRef.current = { tab, sheet, sheetCommand };
-    // Animated glyph on the Overview tab (energized while working).
+    /** Soft place gate offered once per session (pick / skip / already had place). */
+    const placeGateOffered = useRef(false);
+    const stateRef = useRef({
+        tab,
+        sheet,
+        sheetCommand,
+        picker,
+        confirm,
+        context,
+        input,
+    });
+    stateRef.current = { tab, sheet, sheetCommand, picker, confirm, context, input };
     useEffect(() => {
         if (tab !== "overview")
             return;
@@ -60,24 +68,62 @@ function App({ context, initialScope, glyph, onQuit }) {
     useEffect(() => {
         glyph.setWorking(working);
     }, [working, glyph]);
-    const paletteOpen = !sheet && input.startsWith("/");
-    const paletteMatches = paletteOpen ? filterCommands(input).slice(0, 8) : [];
+    const paletteOpen = !sheet && !picker && !confirm && input.startsWith("/");
+    const paletteMatches = paletteOpen
+        ? filterCommands(input, tab === "overview" ? undefined : tab).slice(0, 10)
+        : [];
     useKeyboard((key) => {
         if (key.eventType === "release")
             return;
         const current = stateRef.current;
+        if (current.picker && (key.name === "up" || key.name === "down")) {
+            const visible = filterPickerItems(current.picker.items, effectivePickerFilter(current.input));
+            if (visible.length === 0)
+                return;
+            const delta = key.name === "down" ? 1 : -1;
+            setPicker({
+                ...current.picker,
+                cursor: clampPickerCursor(current.picker.cursor + delta, visible.length),
+            });
+            return;
+        }
         if (key.name === "tab") {
+            if (current.picker) {
+                const visible = filterPickerItems(current.picker.items, effectivePickerFilter(current.input));
+                if (visible.length === 0)
+                    return;
+                setPicker({
+                    ...current.picker,
+                    cursor: clampPickerCursor(current.picker.cursor + (key.shift ? -1 : 1), visible.length),
+                });
+                return;
+            }
             if (current.sheet) {
                 setSheet(moveFocus(current.sheet, key.shift ? -1 : 1));
             }
-            else {
+            else if (!current.confirm) {
                 setTab((t) => (key.shift ? prevTab(t) : nextTab(t)));
                 setInput("");
             }
             return;
         }
         if (key.name === "escape") {
-            if (current.sheet) {
+            if (current.confirm) {
+                setConfirm(undefined);
+                setToast("Cancelled");
+            }
+            else if (current.picker) {
+                const wasPlaceOnboard = current.picker.command.name === "place-onboard";
+                setPicker(undefined);
+                if (current.picker.sheet && current.picker.command) {
+                    setSheet(current.picker.sheet);
+                    setSheetCommand(current.picker.command);
+                }
+                setToast(wasPlaceOnboard
+                    ? "Continuing without a workspace — /workspace when ready"
+                    : "Cancelled");
+            }
+            else if (current.sheet) {
                 setSheet(undefined);
                 setSheetCommand(undefined);
                 setToast("Cancelled");
@@ -95,6 +141,72 @@ function App({ context, initialScope, glyph, onQuit }) {
             }
         }
     });
+    async function applyResult(result) {
+        if (result.error) {
+            setToast(result.error);
+            return;
+        }
+        if (result.openWorkspaceCreate) {
+            const createCmd = resolveCommand("/workspace-create").command;
+            if (createCmd?.fields) {
+                const model = createSheet(createCmd.name, createCmd.fields);
+                setSheet(model);
+                setSheetCommand(createCmd);
+                setToast("Create a workspace — enter a path");
+            }
+            return;
+        }
+        if (result.toast)
+            setToast(result.toast);
+        if (result.jumpTab)
+            setTab(result.jumpTab);
+        if (result.chat)
+            setChat(result.chat);
+        if (result.threadId)
+            setThreadId(result.threadId);
+        if (result.paneLines) {
+            setPaneLines(result.paneLines);
+            setPaneTitle(result.paneTitle ?? "result");
+        }
+        if (result.needConfirm) {
+            setConfirm(createConfirm(result.needConfirm.title, result.needConfirm.phrase, result.needConfirm.action, result.needConfirm.args));
+        }
+        if (result.refreshScope) {
+            const next = await refreshContext();
+            setContext(next);
+            setScope(scopeFromContext(next));
+            await maybeOfferPlace(next);
+        }
+    }
+    async function openPlaceOnboarding() {
+        await openPick(PLACE_ONBOARD_COMMAND, "place-onboard");
+    }
+    async function maybeOfferPlace(ctx) {
+        if (placeGateOffered.current)
+            return;
+        if (hasPlace(ctx)) {
+            placeGateOffered.current = true;
+            return;
+        }
+        // Logged-out: wait for /login (mount toast covers the hint).
+        if (!ctx.token)
+            return;
+        placeGateOffered.current = true;
+        await openPlaceOnboarding();
+    }
+    useEffect(() => {
+        if (hasPlace(initialContext)) {
+            placeGateOffered.current = true;
+            return;
+        }
+        if (!initialContext.token) {
+            setToast("Not in a workspace · /login, then pick a place — Esc skips");
+            return;
+        }
+        placeGateOffered.current = true;
+        void openPlaceOnboarding();
+        // Once on mount — placeGateOffered guards re-entry.
+    }, []);
     function ensureAuth(command) {
         if (!command.requiresAuth || scope.loggedIn)
             return true;
@@ -102,83 +214,132 @@ function App({ context, initialScope, glyph, onQuit }) {
         setInput("/login");
         return false;
     }
+    async function openPick(command, kind, sheetModel, sheetField) {
+        setWorking(true);
+        try {
+            const items = await loadPickerCatalog(kind, stateRef.current.context);
+            if (items.length === 0) {
+                setToast(`No ${kind} options`);
+                return;
+            }
+            if (items.length === 1 && !sheetField && command.name !== "place-onboard") {
+                await finishPick(command, items[0].id, sheetModel, sheetField);
+                return;
+            }
+            setSheet(undefined);
+            setPicker({
+                command,
+                items,
+                cursor: 0,
+                ...(sheetField ? { sheetField } : {}),
+                ...(sheetModel ? { sheet: sheetModel } : {}),
+            });
+            setInput("");
+        }
+        catch (error) {
+            setToast(error instanceof Error ? error.message : String(error));
+        }
+        finally {
+            setWorking(false);
+        }
+    }
+    async function finishPick(command, id, sheetModel, sheetField) {
+        setPicker(undefined);
+        if (sheetModel && sheetField) {
+            const next = {
+                ...sheetModel,
+                values: { ...sheetModel.values, [sheetField]: id },
+            };
+            setSheet(next);
+            setSheetCommand(command);
+            setToast(`Selected ${id}`);
+            return;
+        }
+        if (command.destructive && (command.name === "version-publish" || command.name === "version-archive")) {
+            setConfirm(createConfirm(command.name, "yes", command.name, { id }));
+            return;
+        }
+        setWorking(true);
+        try {
+            await applyResult(await applyPick(command.name, id, stateRef.current.context));
+        }
+        catch (error) {
+            setToast(error instanceof Error ? error.message : String(error));
+        }
+        finally {
+            setWorking(false);
+        }
+    }
     async function runCommand(command, args) {
         if (command.jumpTab) {
             setTab(command.jumpTab);
             setToast(`Opened ${command.jumpTab}`);
             return;
         }
-        if (!ensureAuth(command))
-            return;
         if (command.name === "help") {
-            setInput("/");
+            setPaneTitle("help");
+            setPaneLines(helpLines());
+            setTab("overview");
+            setToast("Help — see pane");
             return;
         }
         if (command.name === "quit") {
             onQuit(0);
             return;
         }
+        if (!ensureAuth(command))
+            return;
+        if (command.name === "trace") {
+            setTrace((v) => {
+                setToast(`trace ${v ? "off" : "on"}`);
+                return !v;
+            });
+            return;
+        }
+        if (command.name === "local") {
+            setLocalMode((v) => {
+                setToast(`local mode ${v ? "off" : "on"}`);
+                return !v;
+            });
+            return;
+        }
+        const confirmSpec = destructiveSpec(command.name, stateRef.current.context);
+        if (confirmSpec && !command.pick) {
+            setConfirm(createConfirm(confirmSpec.title, confirmSpec.phrase, confirmSpec.action, confirmSpec.args));
+            return;
+        }
+        if (command.pick) {
+            if (args.trim()) {
+                setWorking(true);
+                try {
+                    await applyResult(await applyPick(command.name, args.trim(), stateRef.current.context));
+                }
+                catch (error) {
+                    setToast(error instanceof Error ? error.message : String(error));
+                }
+                finally {
+                    setWorking(false);
+                }
+                return;
+            }
+            await openPick(command, command.pick);
+            return;
+        }
         if (command.fields?.length) {
             let model = createSheet(command.name, command.fields);
             if (args)
                 model = setFocusedValue(model, args);
             setSheet(model);
             setSheetCommand(command);
+            const focused = visibleFields(model)[model.focused];
+            if (focused?.control === "picker" && focused.picker) {
+                await openPick(command, focused.picker, model, focused.name);
+            }
             return;
         }
         setWorking(true);
         try {
-            if (command.name === "status") {
-                const status = await getStatus(context, { check: true });
-                setToast(`status · env=${status.environment} · agent=${status.agentId ?? "—"}`);
-            }
-            else if (command.name === "validate") {
-                setTab("bundle");
-                const result = await validateLocalBundle(context, createClients(context).runtime);
-                if (result.valid) {
-                    setToast(result.program?.id
-                        ? `Valid — ${result.program.id}@${result.program.version ?? "?"}`
-                        : "Program is valid");
-                }
-                else {
-                    const errors = result.findings.filter((f) => f.level !== "warning");
-                    const first = errors[0]?.message ?? "validation failed";
-                    setToast(`Invalid: ${first}${errors.length > 1 ? ` (+${errors.length - 1} more)` : ""}`);
-                }
-            }
-            else if (command.name === "diff") {
-                setTab("bundle");
-                const remote = args.trim().toLowerCase() === "remote";
-                const diff = remote
-                    ? await remoteDiff(context, createClients(context).management)
-                    : await localDiff(context);
-                setToast(`diff vs ${remote ? "remote" : "baseline"} · ${diffSummary(diff)}`);
-            }
-            else if (command.name === "trace") {
-                setTrace((v) => {
-                    setToast(`trace ${v ? "off" : "on"}`);
-                    return !v;
-                });
-            }
-            else if (command.name === "local") {
-                setLocalMode((v) => {
-                    setToast(`local mode ${v ? "off" : "on"}`);
-                    return !v;
-                });
-            }
-            else if (command.name === "new") {
-                setChat([]);
-                setToast("New thread");
-            }
-            else if (command.name === "logout") {
-                setToast("Use apollo logout in the CLI (confirm modal coming soon)");
-            }
-            else if (command.name === "upgrade") {
-                setToast("Run apollo upgrade from the CLI");
-            }
-            else {
-                setToast(`/${command.name} queued`);
-            }
+            await applyResult(await runSimpleCommand(command.name, stateRef.current.context, args));
         }
         catch (error) {
             setToast(error instanceof Error ? error.message : String(error));
@@ -203,86 +364,59 @@ function App({ context, initialScope, glyph, onQuit }) {
             }
             return;
         }
-        if (command.name === "login") {
-            setTab("scope");
-            setToast("Browser login isn't in the TUI yet — run apollo login from the CLI");
-            return;
-        }
-        void executeSheet(command, model.values);
-    }
-    /** Run the service call behind a submitted command sheet. */
-    async function executeSheet(command, values) {
-        const text = (name) => {
-            const value = values[name];
-            return typeof value === "string" ? value.trim() : "";
-        };
-        setWorking(true);
-        try {
-            const clients = createClients(context);
-            if (command.name === "pull") {
-                setTab("bundle");
-                const tag = text("tag");
-                const dir = text("dir");
-                const result = await pullBundle(context, clients.management, {
-                    // "latest" is the sheet default; omitting the tag pulls the
-                    // selected/live version, matching the CLI's bare `apollo pull`.
-                    ...(tag && tag !== "latest" ? { tag } : {}),
-                    ...(dir ? { destination: dir } : {}),
-                    force: false,
-                });
-                const removed = result.removed.length ? ` · removed ${result.removed.length}` : "";
-                setToast(`Pulled ${Object.keys(result.files).length} file(s)${removed}`);
-            }
-            else if (command.name === "push") {
-                setTab("bundle");
-                const message = text("message");
-                const dryRun = values.dryRun === true;
-                const result = await pushBundle(context, clients.management, clients.runtime, {
-                    ...(message ? { commitMessage: message } : {}),
-                    dryRun,
-                });
-                setToast(result.push
-                    ? `Pushed ${result.push.new_version_tag} · ${diffSummary(result.diff)}`
-                    : `Dry run · ${diffSummary(result.diff)}`);
-            }
-            else if (command.name === "provision") {
-                setTab("mockdb");
-                const provisioned = await provisionMockDb(context);
-                let note = `Provisioned mock DB for ${provisioned.agentId ?? "agent"}`;
-                if (values.wire === true) {
-                    const wired = await wireMockDbConnection(context);
-                    note += ` · wired ${wired.connectionId}`;
-                }
-                setToast(note);
+        void (async () => {
+            setWorking(true);
+            try {
+                await applyResult(await runSheetAction(command.name, model.values, stateRef.current.context));
             }
-            else if (command.name === "thread") {
-                setChat([]);
-                setToast(`Thread ${text("thread") || "new"} (per-thread history coming soon)`);
+            catch (err) {
+                setToast(err instanceof Error ? err.message : String(err));
             }
-            else {
-                setToast(`/${command.name} isn't wired in the TUI yet — use apollo ${command.name}`);
+            finally {
+                setWorking(false);
             }
-        }
-        catch (error) {
-            setToast(error instanceof Error ? error.message : String(error));
-        }
-        finally {
-            setWorking(false);
-        }
+        })();
     }
-    function handleSheetLine(model, command, line) {
+    async function handleSheetLine(model, command, line) {
+        if (line === "+" || line.toLowerCase() === "advanced") {
+            setSheet({ ...model, advancedOpen: !model.advancedOpen });
+            return;
+        }
         const fields = visibleFields(model);
         const focused = fields[model.focused];
         if (line === "") {
-            // Empty entry advances; on the last field it submits.
             if (model.focused >= fields.length - 1) {
                 submitSheet(model, command);
             }
             else {
-                setSheet(moveFocus(model, 1));
+                const next = moveFocus(model, 1);
+                setSheet(next);
+                const nextField = visibleFields(next)[next.focused];
+                if (nextField?.control === "picker" && nextField.picker) {
+                    await openPick(command, nextField.picker, next, nextField.name);
+                }
             }
             return;
         }
+        if (focused?.control === "picker" && focused.picker) {
+            await openPick(command, focused.picker, model, focused.name);
+            // Also try resolving against a fresh catalog if user typed a filter as the line
+            setWorking(true);
+            try {
+                const items = await loadPickerCatalog(focused.picker, stateRef.current.context);
+                const hit = resolvePickerAnswer(filterPickerItems(items, line), line);
+                if (hit) {
+                    await finishPick(command, hit.id, model, focused.name);
+                    return;
+                }
+            }
+            catch {
+                /* fall through */
+            }
+            finally {
+                setWorking(false);
+            }
+        }
         let next = model;
         if (focused?.control === "toggle") {
             const truthy = ["y", "yes", "true", "on", "x"].includes(line.toLowerCase());
@@ -295,7 +429,12 @@ function App({ context, initialScope, glyph, onQuit }) {
             submitSheet(next, command);
         }
         else {
-            setSheet(moveFocus(next, 1));
+            const moved = moveFocus(next, 1);
+            setSheet(moved);
+            const nextField = visibleFields(moved)[moved.focused];
+            if (nextField?.control === "picker" && nextField.picker) {
+                await openPick(command, nextField.picker, moved, nextField.name);
+            }
         }
     }
     async function sendChat(text) {
@@ -306,20 +445,39 @@ function App({ context, initialScope, glyph, onQuit }) {
         }
         setWorking(true);
         try {
-            const clients = createClients(context);
-            const result = await sendMessage(context, clients.runtime, {
+            const clients = createClients(stateRef.current.context);
+            const result = await sendMessage(stateRef.current.context, clients.runtime, {
                 text,
-                ...(trace ? { includeTrace: true } : {}),
-                ...(localMode && context.agentRoot ? { localDir: context.agentRoot } : {}),
+                ...(threadId ? { threadId } : {}),
+                includeTrace: true,
+                ...(localMode && stateRef.current.context.agentRoot
+                    ? { localDir: stateRef.current.context.agentRoot }
+                    : {}),
                 variables: vars,
             });
+            if (result.thread_id)
+                setThreadId(result.thread_id);
             const reply = result.message.text ?? JSON.stringify(result);
-            setChat((c) => [...c, { role: "agent", text: reply }]);
+            setChat((c) => [
+                ...c,
+                {
+                    role: "agent",
+                    text: reply,
+                    messageId: result.message.id,
+                    interactionId: result.message.id,
+                    ...(result.message.trace_info
+                        ? { trace: result.message.trace_info }
+                        : {}),
+                },
+            ]);
         }
         catch (error) {
             setChat((c) => [
                 ...c,
-                { role: "system", text: error instanceof Error ? error.message : String(error) },
+                {
+                    role: "system",
+                    text: error instanceof Error ? error.message : String(error),
+                },
             ]);
         }
         finally {
@@ -331,8 +489,63 @@ function App({ context, initialScope, glyph, onQuit }) {
         setInput("");
         setToast(undefined);
         const current = stateRef.current;
+        if (current.confirm) {
+            const checked = checkConfirm(current.confirm, line);
+            if (checked === "ok") {
+                const spec = current.confirm;
+                setConfirm(undefined);
+                void (async () => {
+                    setWorking(true);
+                    try {
+                        await applyResult(await runDestructive(spec.action, current.context, spec.args ?? {}));
+                    }
+                    catch (error) {
+                        setToast(error instanceof Error ? error.message : String(error));
+                    }
+                    finally {
+                        setWorking(false);
+                    }
+                })();
+            }
+            else {
+                setConfirm(checked);
+            }
+            return;
+        }
+        if (current.picker) {
+            const visible = filterPickerItems(current.picker.items, effectivePickerFilter(line));
+            if (visible.length === 0) {
+                setToast(line ? `No match for "${line}"` : "No options");
+                setInput(line);
+                return;
+            }
+            // Empty Enter → highlighted row. Digits → index. Text → unique match only.
+            const trimmed = line.trim();
+            let hit;
+            if (!trimmed) {
+                hit = visible[clampPickerCursor(current.picker.cursor, visible.length)];
+            }
+            else if (/^\d+$/.test(trimmed)) {
+                hit = resolvePickerAnswer(visible, trimmed);
+            }
+            else {
+                hit = resolvePickerAnswer(visible, trimmed);
+                if (!hit && visible.length > 1) {
+                    setToast("↑↓ to choose, Enter to select (or narrow the filter)");
+                    setInput(line);
+                    return;
+                }
+            }
+            if (!hit) {
+                setToast(line ? `No match for "${line}"` : "↑↓ to choose, Enter to select");
+                setInput(line);
+                return;
+            }
+            void finishPick(current.picker.command, hit.id, current.picker.sheet, current.picker.sheetField);
+            return;
+        }
         if (current.sheet && current.sheetCommand) {
-            handleSheetLine(current.sheet, current.sheetCommand, line);
+            void handleSheetLine(current.sheet, current.sheetCommand, line);
             return;
         }
         if (line.startsWith("/")) {
@@ -348,17 +561,54 @@ function App({ context, initialScope, glyph, onQuit }) {
         if (line === "")
             return;
         if (current.tab === "chat") {
+            const overlay = /^[td](?:\s+(\d+))?$/i.exec(line);
+            if (overlay) {
+                const kind = line[0].toLowerCase() === "d" ? "debug" : "trace";
+                void (async () => {
+                    setWorking(true);
+                    try {
+                        await applyResult(await chatOverlay(kind, chat, threadId, current.context, overlay[1]));
+                    }
+                    catch (error) {
+                        setToast(error instanceof Error ? error.message : String(error));
+                    }
+                    finally {
+                        setWorking(false);
+                    }
+                })();
+                return;
+            }
             void sendChat(line);
             return;
         }
         setToast("Type / for commands, or use the Chat tab to message the agent");
     }
-    const placeholder = tab === "chat"
-        ? "message the agent, or / for commands"
-        : sheet
-            ? "type a value · Enter next · Esc cancel"
-            : "/ for commands · Tab switches tabs";
-    return (_jsxs("box", { style: { flexDirection: "column", flexGrow: 1, paddingLeft: 1, paddingRight: 1 }, children: [_jsx(TabBar, { active: tab }), _jsxs("box", { style: { flexDirection: "column", flexGrow: 1, paddingTop: 1 }, children: [tab === "overview" && (_jsx(Overview, { frame: frame, working: working, agentPath: scope.agentPath })), tab === "chat" && (_jsx(ChatPane, { chat: chat, trace: trace, localMode: localMode, vars: vars })), tab === "bundle" && _jsx(BundlePane, {}), tab === "mockdb" && _jsx(MockDbPane, {}), tab === "scope" && _jsx(ScopePane, { scope: scope })] }), sheet && sheetCommand && _jsx(SheetPane, { sheet: sheet }), paletteOpen && paletteMatches.length > 0 && _jsx(Palette, { matches: paletteMatches }), toast && (_jsxs("text", { fg: DIM, style: { paddingLeft: 1 }, children: ["\u21B3 ", toast] })), !scope.loggedIn && (_jsx("box", { style: { flexDirection: "row", justifyContent: "flex-end" }, children: _jsx("text", { fg: AMBER, children: "Not logged in \u00B7 Run /login " }) })), _jsx("box", { style: {
+    const placeholder = confirm
+        ? `type "${confirm.phrase}" to confirm · Esc cancel`
+        : picker
+            ? "filter · ↑↓ move · Enter select · Esc cancel"
+            : tab === "chat"
+                ? "message · t/d trace/debug last reply · / commands"
+                : sheet
+                    ? "value · Enter next · + advanced · Esc cancel"
+                    : "/ for commands · Tab switches tabs";
+    const pickerFilter = picker ? effectivePickerFilter(input) : undefined;
+    const pickerVisible = picker
+        ? filterPickerItems(picker.items, pickerFilter)
+        : [];
+    const pickerCursor = picker
+        ? clampPickerCursor(picker.cursor, pickerVisible.length)
+        : 0;
+    // Keep the highlighted row on screen when the list is long.
+    const PICKER_PAGE = pickerPageSize();
+    const pickerWindowStart = pickerVisible.length <= PICKER_PAGE
+        ? 0
+        : Math.max(0, Math.min(pickerCursor - Math.floor(PICKER_PAGE / 3), pickerVisible.length - PICKER_PAGE));
+    const pickerWindow = pickerVisible.slice(pickerWindowStart, pickerWindowStart + PICKER_PAGE);
+    const modalOpen = Boolean(picker || confirm || sheet);
+    return (_jsxs("box", { style: { flexDirection: "column", flexGrow: 1, paddingLeft: 1, paddingRight: 1 }, children: [_jsx(TabBar, { active: tab }), _jsx("box", { style: { flexDirection: "column", flexGrow: 1, paddingTop: 1 }, children: picker ? (_jsx(PickerPane, { items: pickerWindow, cursor: pickerCursor, windowStart: pickerWindowStart, total: pickerVisible.length, title: picker.command.name, filter: pickerFilter, dismissHint: picker.command.name === "place-onboard"
+                        ? "Esc continue without place"
+                        : undefined })) : confirm ? (_jsx(ConfirmPane, { confirm: confirm })) : sheet && sheetCommand ? (_jsx(SheetPane, { sheet: sheet })) : (_jsxs(_Fragment, { children: [tab === "overview" && (_jsx(Overview, { frame: frame, working: working, agentPath: scope.agentPath, paneTitle: paneTitle, paneLines: paneLines })), tab === "chat" && (_jsx(ChatPane, { chat: chat, trace: trace, localMode: localMode, vars: vars, threadId: threadId, paneTitle: paneTitle, paneLines: paneLines })), tab === "bundle" && (_jsx(BundlePane, { paneTitle: paneTitle, paneLines: paneLines })), tab === "mockdb" && (_jsx(MockDbPane, { paneTitle: paneTitle, paneLines: paneLines })), tab === "scope" && _jsx(ScopePane, { scope: scope })] })) }), paletteOpen && !modalOpen && paletteMatches.length > 0 && (_jsx(Palette, { matches: paletteMatches })), toast && (_jsxs("text", { fg: DIM, style: { paddingLeft: 1 }, children: ["\u21B3 ", toast] })), !scope.loggedIn && (_jsx("box", { style: { flexDirection: "row", justifyContent: "flex-end" }, children: _jsx("text", { fg: AMBER, children: "Not logged in \u00B7 Run /login " }) })), _jsx("box", { style: {
                     border: true,
                     borderStyle: "rounded",
                     borderColor: working ? AMBER : TEAL_DIM,
@@ -366,16 +616,22 @@ function App({ context, initialScope, glyph, onQuit }) {
                     height: 3,
                     paddingLeft: 1,
                     paddingRight: 1,
-                }, children: _jsx("input", { focused: true, value: input, placeholder: placeholder, placeholderColor: FAINT, textColor: FG, focusedTextColor: FG, cursorColor: TEAL, backgroundColor: "transparent", focusedBackgroundColor: "transparent", onInput: (value) => setInput(value), 
-                    // ENTER emits the current widget value; using React state here would
-                    // be stale when typing and Enter arrive in the same input batch.
-                    onSubmit: (value) => handleSubmit(typeof value === "string" ? value : input) }) }), _jsxs("box", { style: { flexDirection: "row", justifyContent: "space-between" }, children: [_jsx("text", { fg: FAINT, children: " Tab tabs \u00B7 / commands \u00B7 Enter send \u00B7 Ctrl+C quit" }), _jsxs("text", { fg: FAINT, children: [scope.env, " \u00B7 ", scope.agent, " \u00B7 ", scope.version, " "] })] })] }));
+                }, children: _jsx("input", { focused: true, value: input, placeholder: placeholder, placeholderColor: FAINT, textColor: FG, focusedTextColor: FG, cursorColor: TEAL, backgroundColor: "transparent", focusedBackgroundColor: "transparent", onInput: (value) => {
+                        setInput(value);
+                        if (picker) {
+                            const nextFilter = effectivePickerFilter(value);
+                            const prevFilter = effectivePickerFilter(input);
+                            if (nextFilter !== prevFilter) {
+                                setPicker({ ...picker, cursor: 0 });
+                            }
+                        }
+                    }, onSubmit: (value) => handleSubmit(typeof value === "string" ? value : input) }) }), _jsxs("box", { style: { flexDirection: "row", justifyContent: "space-between" }, children: [_jsx("text", { fg: FAINT, children: " Tab tabs \u00B7 / commands \u00B7 Enter send \u00B7 Ctrl+C quit" }), _jsxs("text", { fg: FAINT, children: [scope.profile, "/", scope.env, " \u00B7 ", scope.workspace, " \u00B7 ", scope.agent, " "] })] })] }));
 }
 function TabBar({ active }) {
     return (_jsx("box", { style: { flexDirection: "row", paddingTop: 1 }, children: TABS.map((t) => t.id === active ? (_jsx("text", { fg: TEAL, children: _jsx("b", { children: ` ${t.label} ` }) }, t.id)) : (_jsx("text", { fg: DIM, children: ` ${t.label} ` }, t.id))) }));
 }
-function Overview({ frame, working, agentPath, }) {
-    return (_jsxs("box", { style: { flexDirection: "column", alignItems: "center" }, children: [_jsxs("box", { style: {
+function Overview({ frame, working, agentPath, paneTitle, paneLines, }) {
+    return (_jsxs("box", { style: { flexDirection: "column", alignItems: "center", flexGrow: 1 }, children: [_jsxs("box", { style: {
                     border: true,
                     borderStyle: "rounded",
                     borderColor: TEAL_DIM,
@@ -384,19 +640,25 @@ function Overview({ frame, working, agentPath, }) {
                     width: 44,
                     paddingTop: 1,
                     paddingBottom: 1,
-                }, children: [frame.map((line, i) => (_jsx("text", { fg: working ? AMBER : TEAL, children: line }, i))), _jsxs("text", { fg: FG, children: [_jsx("b", { children: "apollo" }), " ", _jsxs("span", { fg: DIM, children: ["v", VERSION] })] }), _jsx("text", { fg: DIM, children: "Manage and operate Apollo agents" }), agentPath && _jsx("text", { fg: FAINT, children: agentPath })] }), _jsx("text", { children: " " }), _jsx("text", { fg: DIM, children: "/status /push /chat /mockdb /help" })] }));
+                }, children: [frame.map((line, i) => (_jsx("text", { fg: working ? AMBER : TEAL, children: line }, i))), _jsxs("text", { fg: FG, children: [_jsx("b", { children: "apollo" }), " ", _jsxs("span", { fg: DIM, children: ["v", VERSION] })] }), _jsx("text", { fg: DIM, children: "Manage and operate Apollo agents" }), agentPath && _jsx("text", { fg: FAINT, children: agentPath })] }), _jsx("text", { children: " " }), _jsx("text", { fg: DIM, children: "/status /login /env /agent /push /help" }), paneTitle === "help" && paneLines.length > 0 && (_jsx("scrollbox", { style: { flexGrow: 1, width: "100%", marginTop: 1 }, children: paneLines.map((line, i) => (_jsx("text", { fg: FAINT, children: line }, i))) }))] }));
 }
-function ChatPane({ chat, trace, localMode, vars, }) {
-    return (_jsxs("box", { style: { flexDirection: "column", flexGrow: 1 }, children: [_jsxs("text", { fg: FAINT, children: ["thread \u00B7 user=cli \u00B7 local=", localMode ? "on" : "off", " \u00B7 trace=", trace ? "on" : "off", vars.length > 0 ? ` · vars: ${vars.join(", ")}` : ""] }), _jsx("text", { children: " " }), _jsx("scrollbox", { style: { flexGrow: 1, flexDirection: "column" }, stickyScroll: true, children: chat.length === 0 ? (_jsx("text", { fg: FAINT, children: " (empty thread \u2014 type a message or /new)" })) : (chat.map((turn, i) => (_jsx("text", { fg: turn.role === "you" ? FG : turn.role === "agent" ? TEAL : AMBER, children: ` ${turn.role.padEnd(6)} ${turn.text}` }, i)))) })] }));
+function ChatPane({ chat, trace, localMode, vars, threadId, paneTitle, paneLines, }) {
+    const agentCount = chat.filter((t) => t.role === "agent").length;
+    return (_jsxs("box", { style: { flexDirection: "column", flexGrow: 1 }, children: [_jsxs("text", { fg: FAINT, children: ["thread=", threadId?.slice(0, 12) ?? "new", " \u00B7 local=", localMode ? "on" : "off", " \u00B7 trace=", trace ? "on" : "off", " \u00B7 replies=", agentCount, vars.length > 0 ? ` · vars: ${vars.join(", ")}` : ""] }), _jsx("text", { fg: FAINT, children: " t / d = trace / debug last agent reply \u00B7 t 2 = 2nd reply" }), _jsx("text", { children: " " }), _jsxs("scrollbox", { style: { flexGrow: 1, flexDirection: "column" }, stickyScroll: true, children: [chat.length === 0 ? (_jsx("text", { fg: FAINT, children: " (empty \u2014 type a message, /thread, or /new)" })) : (chat.map((turn, i) => (_jsx("text", { fg: turn.role === "you" ? FG : turn.role === "agent" ? TEAL : AMBER, children: ` ${turn.role.padEnd(6)} ${turn.text}` }, i)))), paneLines.length > 0 &&
+                        paneTitle &&
+                        /^(trace|debug)/i.test(paneTitle) ? (_jsxs(_Fragment, { children: [_jsx("text", { children: " " }), _jsxs("text", { fg: AMBER, children: ["\u2014 ", paneTitle, " \u2014"] }), paneLines.map((line, i) => (_jsx("text", { fg: FAINT, children: line }, `p-${i}`)))] })) : null] })] }));
 }
-function BundlePane() {
-    return (_jsxs("box", { style: { flexDirection: "column" }, children: [_jsx("text", { fg: FG, children: _jsx("b", { children: " Bundle" }) }), _jsx("text", { fg: DIM, children: " Validate \u00B7 Diff vs baseline \u00B7 Diff vs remote" }), _jsx("text", { fg: DIM, children: " Pull\u2026 \u00B7 Push\u2026 \u00B7 Versions" }), _jsx("text", { children: " " }), _jsx("text", { fg: FAINT, children: " Open a command sheet with /push, /pull, /validate, /diff" })] }));
+function ResultPane({ title, hints, paneTitle, paneLines, }) {
+    return (_jsxs("box", { style: { flexDirection: "column", flexGrow: 1 }, children: [_jsx("text", { fg: FG, children: _jsxs("b", { children: [" ", title] }) }), hints.map((h, i) => (_jsxs("text", { fg: DIM, children: [" ", h] }, i))), _jsx("text", { children: " " }), paneLines.length > 0 ? (_jsxs("scrollbox", { style: { flexGrow: 1 }, children: [paneTitle && (_jsxs("text", { fg: TEAL, children: ["\u2014 ", paneTitle, " \u2014"] })), paneLines.map((line, i) => (_jsx("text", { fg: FAINT, children: line }, i)))] })) : (_jsx("text", { fg: FAINT, children: " Use / commands from any tab" }))] }));
 }
-function MockDbPane() {
-    return (_jsxs("box", { style: { flexDirection: "column" }, children: [_jsx("text", { fg: FG, children: _jsx("b", { children: " Mock DB" }) }), _jsx("text", { fg: DIM, children: " Status \u00B7 Collections \u00B7 Endpoints \u00B7 Sessions" }), _jsx("text", { children: " " }), _jsx("text", { fg: FAINT, children: " /provision /wire /seed \u2014 or use the Scope agent context" })] }));
+function BundlePane({ paneTitle, paneLines, }) {
+    return (_jsx(ResultPane, { title: "Bundle", hints: ["/validate /diff /pull /push /versions /version-publish"], paneTitle: paneTitle, paneLines: paneLines }));
+}
+function MockDbPane({ paneTitle, paneLines, }) {
+    return (_jsx(ResultPane, { title: "Mock DB", hints: ["/provision /wire /seed /mdb-collection-* /mdb-endpoint-* /mdb-status"], paneTitle: paneTitle, paneLines: paneLines }));
 }
 function ScopePane({ scope }) {
-    return (_jsxs("box", { style: { flexDirection: "column" }, children: [_jsx("text", { fg: FG, children: _jsx("b", { children: " Scope" }) }), _jsxs("text", { fg: DIM, children: [" env: ", scope.env] }), _jsxs("text", { fg: DIM, children: [" agent: ", scope.agent] }), _jsxs("text", { fg: DIM, children: [" version: ", scope.version] }), _jsxs("text", { fg: scope.loggedIn ? DIM : AMBER, children: [" ", "auth: ", scope.loggedIn ? "logged in" : "not logged in"] }), _jsx("text", { children: " " }), _jsx("text", { fg: FAINT, children: " /login /logout \u2014 pickers for env/org/project/agent live here" })] }));
+    return (_jsxs("box", { style: { flexDirection: "column" }, children: [_jsx("text", { fg: FG, children: _jsx("b", { children: " Scope" }) }), _jsxs("text", { fg: DIM, children: [" profile: ", scope.profile] }), _jsxs("text", { fg: DIM, children: [" env: ", scope.env, " (account \u2014 no cd)"] }), _jsxs("text", { fg: DIM, children: [" workspace: ", scope.workspace] }), _jsxs("text", { fg: DIM, children: [" org: ", scope.org] }), _jsxs("text", { fg: DIM, children: [" project: ", scope.project] }), _jsxs("text", { fg: DIM, children: [" agent: ", scope.agent] }), _jsxs("text", { fg: DIM, children: [" version: ", scope.version] }), _jsxs("text", { fg: scope.loggedIn ? DIM : AMBER, children: [" ", "auth: ", scope.loggedIn ? "logged in" : "not logged in"] }), _jsx("text", { children: " " }), _jsxs("text", { fg: FAINT, children: [" ", "/env /profile /workspace /org /project /agent /agent-import /login"] })] }));
 }
 function SheetPane({ sheet }) {
     const fields = visibleFields(sheet);
@@ -405,14 +667,50 @@ function SheetPane({ sheet }) {
             borderStyle: "rounded",
             borderColor: TEAL_DIM,
             flexDirection: "column",
+            flexGrow: 1,
             paddingLeft: 1,
             paddingRight: 1,
         }, children: [fields.map((field, i) => {
                 const raw = sheet.values[field.name];
                 const display = field.control === "toggle" ? (raw ? "[x]" : "[ ]") : String(raw ?? "");
                 const active = i === sheet.focused;
-                return (_jsxs("text", { fg: active ? FG : DIM, children: [active ? "› " : "  ", field.label.padEnd(18), " ", display, field.required && !display ? _jsx("span", { fg: FAINT, children: " (required)" }) : null] }, field.name));
-            }), sheet.error && _jsxs("text", { fg: RED, children: ["! ", sheet.error] }), _jsx("text", { fg: FAINT, children: "type value + Enter \u00B7 Enter skip \u00B7 Tab move \u00B7 Esc cancel" })] }));
+                return (_jsxs("text", { fg: active ? FG : DIM, children: [active ? "› " : "  ", field.label.padEnd(18), " ", display, field.control === "picker" ? _jsx("span", { fg: FAINT, children: " (picker)" }) : null, field.required && !display ? _jsx("span", { fg: FAINT, children: " (required)" }) : null] }, field.name));
+            }), sheet.fields.some((f) => f.advanced) && (_jsxs("text", { fg: FAINT, children: [" ", sheet.advancedOpen ? "▾" : "▸", " advanced (+ to toggle)"] })), sheet.error && _jsxs("text", { fg: RED, children: ["! ", sheet.error] }), _jsx("text", { fg: FAINT, children: "type value + Enter \u00B7 Enter skip \u00B7 Tab move \u00B7 Esc cancel" })] }));
+}
+function PickerPane({ items, cursor, windowStart, total, title, filter, dismissHint, }) {
+    const { nameWidth, idWidth } = pickerColumnWidths();
+    return (_jsxs("box", { title: ` pick ${title}${filter ? ` · “${filter}”` : ""} `, style: {
+            border: true,
+            borderStyle: "rounded",
+            borderColor: TEAL_DIM,
+            flexDirection: "column",
+            flexGrow: 1,
+            paddingLeft: 1,
+            paddingRight: 1,
+        }, children: [items.length === 0 ? (_jsx("text", { fg: AMBER, children: " No matches" })) : (items.map((item, offset) => {
+                const index = windowStart + offset;
+                const active = index === cursor;
+                const marker = active ? "›" : " ";
+                const number = String(index + 1).padStart(2);
+                const name = truncatePickerText(item.label, nameWidth).padEnd(nameWidth);
+                const secondary = item.detail && item.detail !== item.label
+                    ? truncatePickerText(item.detail, idWidth)
+                    : "";
+                return (_jsxs("text", { fg: active ? TEAL : FG, children: [`${marker} ${number}  ${name}`, secondary ? (_jsx("span", { fg: FAINT, children: `  ${secondary}` })) : null] }, `${item.id}-${index}`));
+            })), _jsxs("text", { fg: FAINT, children: [total > items.length
+                        ? ` ${cursor + 1}/${total} · ↑↓ move · type to filter · Enter`
+                        : ` ↑↓ move · type to filter · Enter select`, dismissHint ? ` · ${dismissHint}` : ""] })] }));
+}
+function ConfirmPane({ confirm }) {
+    return (_jsxs("box", { title: ` confirm ${confirm.title} `, style: {
+            border: true,
+            borderStyle: "rounded",
+            borderColor: AMBER,
+            flexDirection: "column",
+            flexGrow: 1,
+            paddingLeft: 1,
+            paddingRight: 1,
+        }, children: [_jsxs("text", { fg: AMBER, children: ["Type ", _jsx("b", { children: confirm.phrase }), " to confirm"] }), confirm.error && _jsxs("text", { fg: RED, children: ["! ", confirm.error] })] }));
 }
 function Palette({ matches }) {
     return (_jsx("box", { title: " commands ", style: {
@@ -422,7 +720,7 @@ function Palette({ matches }) {
             flexDirection: "column",
             paddingLeft: 1,
             paddingRight: 1,
-        }, children: matches.map((cmd) => (_jsxs("text", { children: [_jsxs("span", { fg: TEAL, children: ["/", cmd.name.padEnd(12)] }), _jsx("span", { fg: DIM, children: cmd.summary })] }, cmd.name))) }));
+        }, children: matches.map((cmd) => (_jsxs("text", { children: [_jsxs("span", { fg: TEAL, children: ["/", cmd.name.padEnd(16)] }), _jsx("span", { fg: DIM, children: cmd.summary })] }, cmd.name))) }));
 }
 export async function runOpenTui() {
     const context = await resolveContext({});
@@ -442,8 +740,6 @@ export async function runOpenTui() {
     });
     root.unmount();
     renderer.destroy();
-    // The raw-mode stdin handle keeps the event loop alive after destroy;
-    // exit explicitly so /quit actually returns to the shell.
     process.exit(code);
 }
 //# sourceMappingURL=opentui-app.js.map