@higherdev/cli 0.15.4 → 0.17.0

package/dist/tui/App.js

@@ -5,6 +5,7 @@ import { loadConfig } from "../config.js";
 import { epicProgressRows } from "../epics.js";
 import { promptOnStdin } from "../prompt.js";
 import { ticketNew } from "../ticket-commands.js";
+import { agentAdd } from "../agent-commands.js";
 import { workspaceGrantRunnerAccess, workspaceNew, workspaceRotateKey, workspaceSet } from "../workspace-commands.js";
 import { Banner } from "./Banner.js";
 import { Bubble } from "./Bubble.js";
@@ -12,6 +13,7 @@ import { Cockpit, StreamPanel, boardTicketIds, nextCursor } from "./Dashboard.js
 import { DecisionPanel, decisionRows } from "./Decision.js";
 import { COMMANDS, Help } from "./Help.js";
 import { AgentsPanel, BoardPanel, FeedPanel, InboxPanel, TicketPanel, inboxEntries } from "./Panels.js";
+import { sectionAt, ticketScrollOffset, ticketViewLines, toggleSection } from "./ticket-view.js";
 import { SettingsPanel } from "./Settings.js";
 import { Splash } from "./Splash.js";
 import TextInput from "./TextInput.js";
@@ -19,8 +21,10 @@ import { alertOnce } from "./alert.js";
 import { bubbleRows } from "./height.js";
 import { planLayout, splitPanels } from "./layout.js";
 import { parseLine } from "./parse.js";
-import { configuredSlugs, acknowledgeInbox, approveEpic, cancelTicket, createAgent, createEpicFromFile, decisionOptions, deleteAgent, deleteEpic, loadLiveEvents, listWorkspaceEnv, loadTicketDetail, pollSnapshot, postAgentMessage, postTicketMessage, queueTicket, resolveDecision, selectDecision, setWorkspacePaused, switchWorkspace, updateAgent, updateProviderCap, updateWorkspace, waitForReply, } from "./data.js";
+import { configuredSlugs, acknowledgeInbox, approveEpic, cancelTicket, createEpicFromFile, decisionOptions, deleteAgent, deleteEpic, loadLiveEvents, listWorkspaceEnv, loadTicketDetail, pollSnapshot, postAgentMessage, postTicketMessage, queueTicket, resolveDecision, selectDecision, setWorkspacePaused, switchWorkspace, updateAgent, updateProviderCap, updateWorkspace, waitForReply, } from "./data.js";
 import { inputActive, promptPlaceholder, QUEUED_STEP, REPLY_WAIT_MS, settleChatReply } from "./chat-wait.js";
+import { answeredLine, decisionHeaderIndex, decisionIdAt, moveDecisionFocus, nextUnanswered, resolveDecisionAnswer, } from "./decide-nav.js";
+import { EARLIER_PAGE } from "./inbox.js";
 import { editFor, editableKeys, nextValue, seedFor, settingsRows } from "./settings-model.js";
 import { appendLines, runLabels, toStreamLines } from "./stream.js";
 import { UI } from "./theme.js";
@@ -46,14 +50,23 @@ export function App({ initial }) {
     const [busy, setBusy] = useState(false);
     const [notice, setNotice] = useState(null);
     const [ticketKey, setTicketKey] = useState(null);
+    const [ticketOffset, setTicketOffset] = useState(0);
+    const [ticketCollapsed, setTicketCollapsed] = useState([]);
     const [ready, setReady] = useState(false);
     const [stream, setStream] = useState([]);
     const [logsFilter, setLogsFilter] = useState(null);
+    const [rawLogs, setRawLogs] = useState(false);
     const [cursor, setCursor] = useState(null);
     const [started, setStarted] = useState(false);
     const [field, setField] = useState(null);
     const [editing, setEditing] = useState(null);
     const [inboxFocus, setInboxFocus] = useState(0);
+    const [selectedDecisionId, setSelectedDecisionId] = useState(initial.board.decisions[0]?.id ?? null);
+    const [answering, setAnswering] = useState(null);
+    const focusAfterAnswer = useRef(null);
+    const [earlierLimit, setEarlierLimit] = useState(EARLIER_PAGE);
+    const earlierLimitRef = useRef(EARLIER_PAGE);
+    earlierLimitRef.current = earlierLimit;
     const selectedRef = useRef(null);
     const fieldRef = useRef(null);
     const editingRef = useRef(null);
@@ -89,12 +102,14 @@ export function App({ initial }) {
         if (!loads.current.isCurrent(token))
             return;
         setWorkspace(snapshot.workspace);
-        setBoard(snapshot.board);
+        setBoard((current) => ({ ...snapshot.board, tickets: snapshot.board.tickets.map((ticket) => ({
+                ...ticket, timeline: current.tickets.find((row) => row.id === ticket.id)?.timeline,
+            })) }));
         setFeed(snapshot.feed);
     }, []);
     useEffect(() => {
         setLive("connecting");
-        const polling = pollSnapshot(config, applySnapshot, setLive, (error) => setNotice(error instanceof Error ? error.message : String(error)));
+        const polling = pollSnapshot(config, applySnapshot, setLive, (error) => setNotice(error instanceof Error ? error.message : String(error)), () => earlierLimitRef.current);
         refreshRef.current = polling.refresh;
         return polling.close;
     }, [config, applySnapshot]);
@@ -114,13 +129,17 @@ export function App({ initial }) {
             if (logsFilter)
                 for (const event of events)
                     if (!eventLabels.has(event.run_id)) {
-                        eventLabels.set(event.run_id, { runId: event.run_id, agent: logsFilter, ticket: logsFilter });
+                        const run = event.run;
+                        eventLabels.set(event.run_id, { runId: event.run_id, agent: run?.agent_name ?? logsFilter,
+                            ticket: logsFilter, kind: run?.kind ?? "run", status: run?.status ?? "running",
+                            attempt: run?.attempt ?? 1, startedAt: run?.started_at ?? event.at,
+                            endedAt: run?.ended_at ?? null, summary: run?.summary ?? null });
                     }
-            setStream((prior) => appendLines(prior, toStreamLines(events, eventLabels)));
+            setStream((prior) => appendLines(prior, toStreamLines(events, eventLabels, rawLogs)));
         })
             .catch(() => { });
-    }, [liveRunIds, board, config, labels, workspace.id, logsFilter]);
-    useEffect(() => setStream([]), [logsFilter]);
+    }, [liveRunIds, board, config, labels, workspace.id, logsFilter, rawLogs]);
+    useEffect(() => setStream([]), [logsFilter, rawLogs]);
     const say = useCallback((speaker, body, steps) => {
         setMessages((prior) => [...prior, { id: nextId(), speaker, body, steps, done: true }]);
     }, []);
@@ -129,7 +148,7 @@ export function App({ initial }) {
     const settingsOrder = useMemo(() => editableKeys(settings), [settings]);
     const browsing = mode === "browse" && draft.length === 0 && cursor !== null;
     const configuring = view === "settings" && !editing;
-    const inbox = useMemo(() => inboxEntries(board, width), [board, width]);
+    const inbox = useMemo(() => inboxEntries(board, width, answering), [board, width, answering]);
     const moveCursor = useCallback((delta) => {
         if (!order.length)
             return false;
@@ -149,11 +168,32 @@ export function App({ initial }) {
         return true;
     }, [settingsOrder]);
     const moveInbox = useCallback((delta) => {
-        setInboxFocus((current) => Math.max(0, Math.min(inbox.length - 1, current + delta)));
-    }, [inbox.length]);
+        setInboxFocus((current) => {
+            const next = moveDecisionFocus(inbox, current, delta);
+            const id = decisionIdAt(inbox, next);
+            if (id)
+                setSelectedDecisionId(id);
+            return next;
+        });
+    }, [inbox]);
     useEffect(() => {
         setInboxFocus((current) => Math.max(0, Math.min(inbox.length - 1, current)));
     }, [inbox.length]);
+    useEffect(() => {
+        if (selectedDecisionId && board.decisions.some((decision) => decision.id === selectedDecisionId))
+            return;
+        setSelectedDecisionId(board.decisions[0]?.id ?? null);
+        setAnswering((current) => (current && board.decisions.some((decision) => decision.id === current) ? current : null));
+    }, [board.decisions, selectedDecisionId]);
+    useEffect(() => {
+        const id = focusAfterAnswer.current;
+        if (!id)
+            return;
+        const header = decisionHeaderIndex(inbox, id);
+        if (header >= 0)
+            setInboxFocus(header);
+        focusAfterAnswer.current = null;
+    }, [inbox]);
     useEffect(() => {
         if (view !== "inbox")
             return;
@@ -170,6 +210,38 @@ export function App({ initial }) {
     const refresh = useCallback(async () => {
         await refreshRef.current?.();
     }, []);
+    const submitDecision = useCallback(async (id, text) => {
+        const decision = board.decisions.find((row) => row.id === id);
+        if (!decision) {
+            setNotice("Nothing is waiting on a decision.");
+            setAnswering(null);
+            return;
+        }
+        const answer = resolveDecisionAnswer(decision, text);
+        if (!answer) {
+            setNotice("Type a number or your answer.");
+            return;
+        }
+        const next = nextUnanswered(board.decisions, decision.id);
+        const line = answeredLine(board.decisions, board.tickets, decision, answer);
+        setBusy(true);
+        try {
+            await resolveDecision(config, decision.id, answer);
+            say("system", line);
+            setAnswering(null);
+            setSelectedDecisionId(next?.id ?? null);
+            focusAfterAnswer.current = next?.id ?? null;
+            if (next)
+                setView("inbox");
+            await refresh();
+        }
+        catch (error) {
+            setNotice(error instanceof Error ? error.message : String(error));
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [board, config, refresh, say]);
     const applyEdit = useCallback(async (key, raw) => {
         const row = settings.find((entry) => entry.key === key);
         if (!row)
@@ -212,6 +284,10 @@ export function App({ initial }) {
             setStream([]);
             setLogsFilter(null);
             acknowledgedMessages.current.clear();
+            setAnswering(null);
+            setSelectedDecisionId(snapshot.board.decisions[0]?.id ?? null);
+            setEarlierLimit(EARLIER_PAGE);
+            earlierLimitRef.current = EARLIER_PAGE;
             setCursor(null);
             selectedRef.current = null;
             setView("home");
@@ -247,6 +323,33 @@ export function App({ initial }) {
             }
         })();
     }, [config]);
+    const openTicket = useCallback(async (key) => {
+        setTicketKey(key);
+        setView("ticket");
+        setTicketOffset(0);
+        setTicketCollapsed([]);
+        setBusy(true);
+        try {
+            const { ticket: detail } = await loadTicketDetail(config, key);
+            setBoard((prior) => ({ ...prior,
+                tickets: prior.tickets.map((ticket) => ticket.id === detail.id ? { ...ticket, ...detail } : ticket) }));
+        }
+        catch (error) {
+            setNotice(error instanceof Error ? error.message : String(error));
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [config]);
+    const visibleStory = ticketKey ? board.tickets.find((ticket) => ticket.key === ticketKey) : null;
+    useEffect(() => {
+        if (view !== "ticket" || !ticketKey || !visibleStory?.latest_headline
+            || visibleStory.timeline?.[0]?.headline === visibleStory.latest_headline)
+            return;
+        void loadTicketDetail(config, ticketKey).then(({ ticket: detail }) => setBoard((prior) => ({ ...prior,
+            tickets: prior.tickets.map((ticket) => ticket.id === detail.id ? { ...ticket, ...detail } : ticket) })))
+            .catch((error) => setNotice(error instanceof Error ? error.message : String(error)));
+    }, [view, ticketKey, visibleStory?.latest_headline, visibleStory?.timeline, config]);
     const run = useCallback(async (raw) => {
         const text = raw.trim();
         if (view === "settings") {
@@ -273,13 +376,39 @@ export function App({ initial }) {
             }
         }
         if (!text) {
+            if (answering) {
+                setNotice("Type a number or your answer.");
+                return;
+            }
+            if (view === "ticket" && ticketKey) {
+                const current = board.tickets.find((row) => row.key === ticketKey);
+                if (current) {
+                    const lines = ticketViewLines(current, Math.max(20, width), ticketCollapsed);
+                    setTicketCollapsed(toggleSection(ticketCollapsed, sectionAt(lines, ticketOffset)));
+                }
+                return;
+            }
+            const focusedId = selectedDecisionId ?? decisionIdAt(inbox, inboxFocus);
+            if (view === "inbox" && focusedId && board.decisions.some((decision) => decision.id === focusedId)) {
+                setSelectedDecisionId(focusedId);
+                setAnswering(focusedId);
+                setView("inbox");
+                return;
+            }
             const selected = board.tickets.find((ticket) => ticket.id === selectedRef.current);
             if (browsing && selected) {
-                setTicketKey(selected.key);
-                setView("ticket");
+                await openTicket(selected.key);
             }
             return;
         }
+        if (answering) {
+            history.current.push(text);
+            historyAt.current = -1;
+            setDraft("");
+            setNotice(null);
+            await submitDecision(answering, text);
+            return;
+        }
         history.current.push(text);
         historyAt.current = -1;
         setDraft("");
@@ -304,8 +433,11 @@ export function App({ initial }) {
                 return;
             case "view":
                 setView(action.view);
-                if (action.view === "inbox")
-                    setInboxFocus(0);
+                if (action.view === "inbox") {
+                    const header = selectedDecisionId ? decisionHeaderIndex(inbox, selectedDecisionId) : 0;
+                    setInboxFocus(header >= 0 ? header : 0);
+                    setAnswering(null);
+                }
                 if (action.view === "board" && order.length) {
                     const next = selectedRef.current && order.includes(selectedRef.current) ? selectedRef.current : order[0];
                     selectedRef.current = next;
@@ -391,22 +523,7 @@ export function App({ initial }) {
                 }
                 return;
             case "ticket":
-                setTicketKey(action.key);
-                setView("ticket");
-                setBusy(true);
-                try {
-                    const { ticket: detail } = await loadTicketDetail(config, action.key);
-                    setBoard((prior) => ({
-                        ...prior,
-                        tickets: prior.tickets.map((ticket) => ticket.id === detail.id ? { ...ticket, ...detail } : ticket),
-                    }));
-                }
-                catch (error) {
-                    setNotice(error instanceof Error ? error.message : String(error));
-                }
-                finally {
-                    setBusy(false);
-                }
+                await openTicket(action.key);
                 return;
             case "epic-new":
                 setBusy(true);
@@ -502,8 +619,13 @@ export function App({ initial }) {
             case "agent-add":
                 setBusy(true);
                 try {
-                    const { agent } = await createAgent(config, { role: action.role, provider: action.provider,
-                        model: action.model, effort: action.effort, display_name: action.name ?? action.provider });
+                    let created;
+                    await suspendTerminal(async () => {
+                        created = await agentAdd(action.args, { config, isTTY: true, prompt: tuiPrompt });
+                    });
+                    if (!created)
+                        throw new Error("Agent wizard did not finish.");
+                    const { agent } = created;
                     say("system", `Added ${agent.display_name} (${agent.id}).`);
                     await refresh();
                 }
@@ -562,10 +684,11 @@ export function App({ initial }) {
                 return;
             case "logs":
                 setLogsFilter(action.key);
-                say("system", action.key ? `Activity filtered to ${action.key}.` : "Activity filter cleared.");
+                setRawLogs(action.raw);
+                say("system", `${action.raw ? "Raw" : "Narrated"} activity${action.key ? ` filtered to ${action.key}` : " filter cleared"}.`);
                 return;
             case "decide": {
-                const focused = inbox[inboxFocus]?.key.split(":")[0] ?? null;
+                const focused = selectedDecisionId ?? decisionIdAt(inbox, inboxFocus);
                 const decision = selectDecision(board.decisions, action.target, focused);
                 if (!decision) {
                     setNotice(action.target ? `No decision matches ${action.target}.` : "Nothing is waiting on a decision.");
@@ -575,30 +698,32 @@ export function App({ initial }) {
                     setNotice("Skipping decisions is not available through the HDX API. Answer it instead.");
                     return;
                 }
-                const options = decisionOptions(decision);
-                const option = /^\d+$/.test(action.answer) ? options[Number(action.answer) - 1] : undefined;
-                const answer = option ?? action.answer;
-                if (!answer) {
-                    setNotice("Answer it with /decide 1 or /decide <your answer>.");
+                if (!action.answer) {
+                    setSelectedDecisionId(decision.id);
+                    setAnswering(decision.id);
+                    setView("inbox");
+                    const header = decisionHeaderIndex(inbox, decision.id);
+                    if (header >= 0)
+                        setInboxFocus(header);
                     return;
                 }
-                setBusy(true);
-                try {
-                    await resolveDecision(config, decision.id, answer);
-                    say("system", `Answered: ${answer}`);
-                    await refresh();
-                }
-                catch (error) {
-                    setNotice(error instanceof Error ? error.message : String(error));
-                }
-                finally {
-                    setBusy(false);
-                }
+                await submitDecision(decision.id, action.answer);
                 return;
             }
             case "help":
                 setMessages((prior) => [...prior, { id: nextId(), speaker: "system", body: "", panel: "help", done: true }]);
                 return;
+            case "inbox-more":
+                if (view !== "inbox")
+                    setView("inbox");
+                if (!board.earlierHasMore) {
+                    say("system", "No more earlier messages.");
+                    return;
+                }
+                setEarlierLimit((current) => current + EARLIER_PAGE);
+                earlierLimitRef.current += EARLIER_PAGE;
+                await refresh();
+                return;
             case "refresh":
                 await refresh();
                 return;
@@ -612,12 +737,16 @@ export function App({ initial }) {
                 return;
         }
     }, [view, settings, applyEdit, board, browsing, mode, say, askAgent, order, settingsOrder, changeWorkspace,
-        config, refresh, suspendTerminal, exit, inbox, inboxFocus]);
+        config, refresh, suspendTerminal, exit, inbox, inboxFocus, openTicket, answering, selectedDecisionId,
+        submitDecision, ticketKey, ticketCollapsed, ticketOffset, width]);
     useInput((input, key) => {
         if (key.ctrl && input === "c")
             exit();
     });
     const decisions = board.decisions;
+    const answeringDecision = answering ? decisions.find((decision) => decision.id === answering) : null;
+    const answeringOptions = answeringDecision ? decisionOptions(answeringDecision) : [];
+    const answeringNumber = answeringDecision ? decisions.findIndex((decision) => decision.id === answering) + 1 : 0;
     const waiting = decisions.length;
     const announced = useRef(0);
     useEffect(() => {
@@ -648,13 +777,21 @@ export function App({ initial }) {
                     if (item.message.panel === "help")
                         return _jsx(Help, { width: width }, item.key);
                     return _jsx(Bubble, { message: item.message, width: width }, item.key);
-                } }), splash ? (_jsx(Splash, { columns: columns, rows: rows, width: width, ready: ready, helpFull: plan.helpFull, animate: plan.fits, onDone: () => setReady(true) })) : null, _jsxs(Box, { flexDirection: "column", width: width, children: [view === "board" && plan.panels > 0 ? _jsx(BoardPanel, { board: board, width: width, rows: plan.panels, cursor: cursor }) : null, view === "agents" && plan.panels > 0 ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(AgentsPanel, { board: board, width: width, rows: agentsView.top }), agentsView.bottom > 0 ? _jsxs(_Fragment, { children: [_jsx(Box, { height: 1 }), _jsx(StreamPanel, { lines: stream, width: width, rows: agentsView.bottom, live: running > 0 })] }) : null] })) : null, view === "feed" && plan.panels > 0 ? _jsx(FeedPanel, { entries: feed, width: width, rows: plan.panels }) : null, view === "settings" && plan.panels > 0 ? _jsx(SettingsPanel, { entries: settings, width: width, rows: plan.panels, title: "Settings", cursor: field, editing: editing }) : null, view === "inbox" && plan.panels > 0 ? _jsx(InboxPanel, { board: board, width: width, rows: plan.panels, focus: inboxFocus }) : null, view === "ticket" && plan.panels > 0 ? ticket
-                        ? _jsx(TicketPanel, { ticket: ticket, width: width, rows: plan.panels })
-                        : _jsxs(Text, { color: UI.warn, children: ["No ticket ", ticketKey, " here."] }) : null, view === "home" && plan.cockpit > 0 ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Cockpit, { board: board, width: width, rows: plan.cockpit, cursor: cursor }), _jsx(Box, { height: 1 }), _jsx(StreamPanel, { lines: stream, width: width, rows: plan.stream, live: running > 0 })] })) : null, inFlight.map((message) => _jsx(Bubble, { message: message, width: width }, message.id)), _jsx(DecisionPanel, { decisions: decisions, board: board, width: width, rows: plan.decision }), notice ? _jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: UI.warn, children: notice }) }) : null, _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: UI.text, bold: true, children: workspace.slug }), _jsxs(Text, { color: UI.dim, children: [" ", workspace.repo, " "] }), _jsx(Text, { color: live === "live" ? UI.accent : UI.dim, children: "\u25CF " }), _jsxs(Text, { color: UI.dim, children: [live === "live" ? "5s poll" : live, " "] }), _jsx(Text, { color: UI.dim, children: running ? `${running} running ` : "" }), board.decisions.length ? _jsxs(Text, { color: UI.warn, children: [board.decisions.length, " decisions "] }) : null, workspace.paused ? _jsx(Text, { color: UI.warn, children: "paused " }) : null, logsFilter ? _jsxs(Text, { color: UI.warn, children: ["logs ", logsFilter, " "] }) : null, _jsxs(Text, { color: UI.dim, wrap: "truncate", children: ["\u00B7 ", mode, view === "inbox" ? " ↑↓ scroll" : cursor && selected ? ` ${selected.key} ↑↓ move · enter opens · esc leaves` : ""] })] }), _jsx(Box, { children: _jsx(TextInput, { value: draft, onChange: (next) => {
+                } }), splash ? (_jsx(Splash, { columns: columns, rows: rows, width: width, ready: ready, helpFull: plan.helpFull, animate: plan.fits, onDone: () => setReady(true) })) : null, _jsxs(Box, { flexDirection: "column", width: width, children: [view === "board" && plan.panels > 0 ? _jsx(BoardPanel, { board: board, width: width, rows: plan.panels, cursor: cursor }) : null, view === "agents" && plan.panels > 0 ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(AgentsPanel, { board: board, width: width, rows: agentsView.top }), agentsView.bottom > 0 ? _jsxs(_Fragment, { children: [_jsx(Box, { height: 1 }), _jsx(StreamPanel, { lines: stream, width: width, rows: agentsView.bottom, live: running > 0 })] }) : null] })) : null, view === "feed" && plan.panels > 0 ? _jsx(FeedPanel, { entries: feed, width: width, rows: plan.panels }) : null, view === "settings" && plan.panels > 0 ? _jsx(SettingsPanel, { entries: settings, width: width, rows: plan.panels, title: "Settings", cursor: field, editing: editing }) : null, view === "inbox" && plan.panels > 0 ? _jsx(InboxPanel, { board: board, width: width, rows: plan.panels, focus: inboxFocus, selectedId: selectedDecisionId, answeringId: answering }) : null, view === "ticket" && plan.panels > 0 ? ticket
+                        ? _jsx(TicketPanel, { ticket: ticket, width: width, rows: plan.panels, offset: ticketOffset, collapsed: ticketCollapsed })
+                        : _jsxs(Text, { color: UI.warn, children: ["No ticket ", ticketKey, " here."] }) : null, view === "home" && plan.cockpit > 0 ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Cockpit, { board: board, width: width, rows: plan.cockpit, cursor: cursor }), _jsx(Box, { height: 1 }), _jsx(StreamPanel, { lines: stream, width: width, rows: plan.stream, live: running > 0 })] })) : null, inFlight.map((message) => _jsx(Bubble, { message: message, width: width }, message.id)), _jsx(DecisionPanel, { decisions: decisions, board: board, width: width, rows: plan.decision, selectedId: selectedDecisionId }), notice ? _jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: UI.warn, children: notice }) }) : null, _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: UI.text, bold: true, children: workspace.slug }), _jsxs(Text, { color: UI.dim, children: [" ", workspace.repo, " "] }), _jsx(Text, { color: live === "live" ? UI.accent : UI.dim, children: "\u25CF " }), _jsxs(Text, { color: UI.dim, children: [live === "live" ? "5s poll" : live, " "] }), _jsx(Text, { color: UI.dim, children: running ? `${running} running ` : "" }), board.decisions.length ? _jsxs(Text, { color: UI.warn, children: [board.decisions.length, " decisions "] }) : null, workspace.paused ? _jsx(Text, { color: UI.warn, children: "paused " }) : null, logsFilter || rawLogs ? _jsxs(Text, { color: UI.warn, children: ["logs ", rawLogs ? "raw " : "", logsFilter ?? "all", " "] }) : null, _jsxs(Text, { color: UI.dim, wrap: "truncate", children: ["\u00B7 ", mode, answering ? " esc cancels" : view === "ticket" ? " ↑↓ scroll · pgup/pgdn · enter folds" : view === "inbox" ? " ↑↓ decisions · enter answers" : cursor && selected ? ` ${selected.key} ↑↓ move · enter opens · esc leaves` : ""] })] }), _jsx(Box, { children: _jsx(TextInput, { value: draft, onChange: (next) => {
                                 setDraft(next);
                                 if (editingRef.current)
                                     setEditing({ key: editingRef.current.key, draft: next });
-                            }, onSubmit: (value) => void run(value), isActive: inputActive({ busy, pendingChats: inFlight.length }), placeholder: promptPlaceholder({ busy, pendingChats: inFlight.length }), prompt: _jsx(Text, { color: mode === "browse" ? UI.dim : UI.cream, children: mode === "browse" ? "> " : `${mode}> ` }), color: UI.text, onCancel: () => {
+                            }, onSubmit: (value) => void run(value), isActive: inputActive({ busy, pendingChats: inFlight.length }), placeholder: answering
+                                ? (answeringOptions.length ? `1-${answeringOptions.length} or your answer` : "your answer")
+                                : promptPlaceholder({ busy, pendingChats: inFlight.length }), prompt: _jsx(Text, { color: answering || mode !== "browse" ? UI.cream : UI.dim, children: answering ? `answer ${answeringNumber}> ` : mode === "browse" ? "> " : `${mode}> ` }), color: UI.text, onCancel: () => {
+                                if (answering) {
+                                    setAnswering(null);
+                                    setDraft("");
+                                    setNotice(null);
+                                    return;
+                                }
                                 if (editing) {
                                     setEditing(null);
                                     setDraft("");
@@ -669,6 +806,11 @@ export function App({ initial }) {
                                 setCursor(null);
                                 selectedRef.current = null;
                             }, onUp: () => {
+                                if (view === "ticket" && !draft) {
+                                    const count = ticket ? ticketViewLines(ticket, Math.max(20, width), ticketCollapsed).length : 0;
+                                    setTicketOffset((current) => ticketScrollOffset(count, Math.max(1, plan.panels), current - 1));
+                                    return;
+                                }
                                 if (view === "inbox" && !draft) {
                                     moveInbox(-1);
                                     return;
@@ -682,6 +824,11 @@ export function App({ initial }) {
                                 historyAt.current = historyAt.current < 0 ? history.current.length - 1 : Math.max(0, historyAt.current - 1);
                                 setDraft(history.current[historyAt.current] ?? "");
                             }, onDown: () => {
+                                if (view === "ticket" && !draft) {
+                                    const count = ticket ? ticketViewLines(ticket, Math.max(20, width), ticketCollapsed).length : 0;
+                                    setTicketOffset((current) => ticketScrollOffset(count, Math.max(1, plan.panels), current + 1));
+                                    return;
+                                }
                                 if (view === "inbox" && !draft) {
                                     moveInbox(1);
                                     return;
@@ -699,6 +846,16 @@ export function App({ initial }) {
                                     return;
                                 }
                                 setDraft(history.current[historyAt.current] ?? "");
+                            }, onPageUp: () => {
+                                if (view === "ticket" && !draft) {
+                                    const count = ticket ? ticketViewLines(ticket, Math.max(20, width), ticketCollapsed).length : 0;
+                                    setTicketOffset((current) => ticketScrollOffset(count, Math.max(1, plan.panels), current - Math.max(1, plan.panels)));
+                                }
+                            }, onPageDown: () => {
+                                if (view === "ticket" && !draft) {
+                                    const count = ticket ? ticketViewLines(ticket, Math.max(20, width), ticketCollapsed).length : 0;
+                                    setTicketOffset((current) => ticketScrollOffset(count, Math.max(1, plan.panels), current + Math.max(1, plan.panels)));
+                                }
                             } }) })] })] }));
 }
 export { COMMANDS };

package/dist/tui/Dashboard.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
 import { BOARD_COLUMNS, epicProgressCaption, epicProgress, statusLabel, statusTone, } from "./data.js";
 import { elapsed, truncate } from "../out/format.js";
@@ -103,7 +103,7 @@ export function BoardColumn({ board, width, rows, cursor, }) {
                 ? [
                     _jsx(Text, { color: UI.dim, children: "No tickets yet." }, "empty"),
                 ]
-                : entries.slice(start, end).map((entry) => entry.kind === "heading" ? (_jsxs(Text, { color: inkColor(statusTone(entry.status)), wrap: "truncate", children: [statusLabel(entry.status), " ", _jsxs(Text, { color: UI.dim, children: ["(", entry.count, ")"] })] }, entry.key)) : (_jsxs(Box, { flexWrap: "nowrap", children: [_jsx(Box, { width: 2, flexShrink: 0, children: _jsx(Text, { color: UI.accent, children: entry.key === cursor ? "›" : " " }) }), _jsx(Box, { width: 8, flexShrink: 0, children: _jsx(Text, { color: UI.text, bold: true, wrap: "truncate", children: entry.ticket.key }) }), _jsx(Text, { color: entry.ticket.stuck ? UI.warn : UI.text, inverse: entry.key === cursor, wrap: "truncate", children: truncate(entry.ticket.title, title - 2) })] }, entry.key)))),
+                : entries.slice(start, end).map((entry) => entry.kind === "heading" ? (_jsxs(Text, { color: inkColor(statusTone(entry.status)), wrap: "truncate", children: [statusLabel(entry.status), " ", _jsxs(Text, { color: UI.dim, children: ["(", entry.count, ")"] })] }, entry.key)) : (_jsxs(Box, { flexWrap: "nowrap", children: [_jsx(Box, { width: 2, flexShrink: 0, children: _jsx(Text, { color: UI.accent, children: entry.key === cursor ? "›" : " " }) }), _jsx(Box, { width: 8, flexShrink: 0, children: _jsx(Text, { color: UI.text, bold: true, wrap: "truncate", children: entry.ticket.key }) }), _jsx(Text, { color: entry.ticket.stuck ? UI.warn : UI.text, inverse: entry.key === cursor, wrap: "truncate", children: truncate(entry.ticket.latest_headline ?? entry.ticket.title, title - 2) })] }, entry.key)))),
         ] }));
 }
 export function AgentsColumn({ board, width, rows, }) {
@@ -127,9 +127,10 @@ export function AgentsColumn({ board, width, rows, }) {
 }
 const KIND_COLOR = {
     error: UI.danger,
+    agent: UI.accent,
     tool: UI.dim,
     status: UI.dim,
-    text: UI.text,
+    raw: UI.dim,
 };
 /**
  * What the agents are doing, as it arrives. The panel is a fixed height on
@@ -146,7 +147,7 @@ export function StreamPanel({ lines, width, rows, live, }) {
                     _jsx(Text, { color: UI.dim, children: live ? "Waiting for the first step." : "Nothing running." }, "empty"),
                 ]
                 : []),
-            ...lines.slice(-budget).map((line) => (_jsxs(Box, { flexWrap: "nowrap", children: [_jsx(Box, { width: name, flexShrink: 0, children: _jsx(Text, { color: UI.dim, wrap: "truncate", children: truncate(line.agent, name - 1) }) }), _jsxs(Text, { color: KIND_COLOR[line.kind], wrap: "truncate", children: [line.kind === "tool" ? "· " : "", truncate(line.title, Math.max(12, width - name - 3))] })] }, line.id))),
+            ...lines.slice(-budget).map((line) => (_jsxs(Box, { flexWrap: "nowrap", children: [_jsx(Box, { width: name, flexShrink: 0, children: _jsx(Text, { color: UI.dim, wrap: "truncate", children: truncate(line.agent, name - 1) }) }), _jsxs(Text, { color: KIND_COLOR[line.kind], wrap: "truncate", children: [line.kind === "tool" ? "· " : "", truncate(line.title, Math.max(12, width - name - 3)), line.count && line.count > 1 ? ` (x${line.count})` : ""] })] }, line.id))),
         ] }));
 }
 /** How many rows the epics strip wants, heading included, or none. */
@@ -154,6 +155,21 @@ export function epicsRows(board, cap = 3) {
     const open = epicProgress(board).filter((row) => row.epic.status !== "done");
     return open.length === 0 ? 0 : Math.min(open.length, cap) + 1;
 }
+export function nowEntries(board) {
+    return board.tickets.filter((ticket) => !["backlog", "merged", "cancelled"].includes(ticket.status))
+        .map((ticket) => ({ key: ticket.key, headline: ticket.latest_headline ?? `${ticket.key}: ${ticket.title}` }));
+}
+function NowStrip({ board, width, rows }) {
+    const entries = nowEntries(board);
+    if (!entries.length || rows < 2)
+        return null;
+    const shown = entries.slice(0, contentRows(rows, entries.length));
+    return _jsx(Panel, { width: width, rows: rows, children: [
+            _jsx(Heading, { text: "Now", note: `${entries.length}` }, "h"),
+            ...shown.map((entry) => _jsx(Text, { color: UI.text, wrap: "truncate", children: entry.headline }, entry.key)),
+            _jsx(More, { count: entries.length - shown.length }, "more"),
+        ] });
+}
 /**
  * Epic progress, above the board it explains. Capped hard: this is the summary
  * line, and the tickets underneath are what you are here to read.
@@ -174,12 +190,13 @@ export function EpicsStrip({ board, width, rows }) {
 export function Cockpit({ board, width, rows, cursor, }) {
     // The epics strip is spent out of the same budget, so adding it shortens the
     // board rather than making the frame taller.
-    const epics = Math.min(epicsRows(board), Math.max(0, rows - 4));
-    const rest = rows - (epics > 0 ? epics + 1 : 0);
+    const now = Math.min(nowEntries(board).length + 1, 4, Math.max(0, rows - 4));
+    const epics = Math.min(epicsRows(board), Math.max(0, rows - now - (now > 0 ? 1 : 0) - 4));
+    const rest = rows - (now > 0 ? now + 1 : 0) - (epics > 0 ? epics + 1 : 0);
     const columns = renderColumns(board, width, rest, cursor);
-    if (epics === 0)
+    if (epics === 0 && now === 0)
         return columns;
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(EpicsStrip, { board: board, width: width, rows: epics }), _jsx(Box, { height: 1 }), columns] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [now > 0 ? _jsxs(_Fragment, { children: [_jsx(NowStrip, { board: board, width: width, rows: now }), _jsx(Box, { height: 1 })] }) : null, epics > 0 ? _jsxs(_Fragment, { children: [_jsx(EpicsStrip, { board: board, width: width, rows: epics }), _jsx(Box, { height: 1 })] }) : null, columns] }));
 }
 function renderColumns(board, width, rows, cursor) {
     const split = splitWidths(width);

package/dist/tui/Decision.js

@@ -1,48 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
 import { relativeTime, truncate } from "../out/format.js";
-import { clipToRows } from "./Panels.js";
-import { decisionOptions } from "./data.js";
+import { DECISION_CURSOR } from "./decide-nav.js";
 import { UI } from "./theme.js";
 /**
- * Everything the panel spends that is not question or options: two rows of
- * frame, the heading, the line saying how to answer, and the blank row after.
- */
-const DECISION_CHROME = 5;
-/**
- * Rows the flag wants, so the caller can take them out of the panel budget
- * before anything is drawn. Zero when nothing is waiting.
+ * Heading, one row per pending decision, and the hint. Cap keeps the flag
+ * from eating the cockpit on a busy inbox.
  */
 export function decisionRows(decisions, cap = 9) {
     if (decisions.length === 0)
         return 0;
-    // Two rows of question is the least worth reading, and the options after it.
-    return Math.min(cap, DECISION_CHROME + 2 + decisionOptions(decisions[0]).length);
+    return Math.min(cap, 4 + decisions.length);
 }
 /**
- * A decision waiting on you, in the way of the prompt rather than counted in
- * the status line. This is the one thing in the frame that is not a report:
- * nothing moves on the ticket it blocks until it is answered, so it stays in
- * front of you until it is.
+ * Pending decisions on the home view, numbered the same way `/inbox` and
+ * `/decide N` use, so the owner can answer any of them.
  */
-export function DecisionPanel({ decisions, board, width, rows, }) {
+export function DecisionPanel({ decisions, board, width, rows, selectedId = null, }) {
     if (decisions.length === 0)
         return null;
-    const decision = decisions[0];
-    const ticket = board?.tickets.find((row) => row.id === decision.ticket_id);
-    const options = decisionOptions(decision);
     const inner = Math.max(8, width - 4);
-    const forBody = rows - DECISION_CHROME;
-    // Too little room for a frame at all. The flag still has to appear, so it
-    // shrinks to the one line that says something is waiting and how to answer.
-    if (forBody < 1) {
-        return (_jsxs(Box, { width: width, flexWrap: "nowrap", children: [_jsx(Text, { color: UI.warn, bold: true, wrap: "truncate", children: decisions.length > 1 ? `${decisions.length} decisions waiting` : "Decision waiting" }), _jsx(Text, { color: UI.dim, wrap: "truncate", children: `  ${truncate(decision.question_md, Math.max(8, width - 26))}  /decide` })] }));
+    const selected = selectedId ?? decisions[0]?.id ?? null;
+    if (rows < 4) {
+        return (_jsxs(Box, { width: width, flexWrap: "nowrap", children: [_jsxs(Text, { color: UI.warn, bold: true, wrap: "truncate", children: [decisions.length, " decision", decisions.length === 1 ? "" : "s"] }), _jsx(Text, { color: UI.dim, wrap: "truncate", children: `  /decide N answer  or /inbox then Enter` })] }));
     }
-    // The question gets a row before any option does, and the options take what
-    // is left after it.
-    const optionRows = Math.min(options.length, Math.max(0, forBody - 1));
-    const question = clipToRows(decision.question_md.trim(), inner, forBody - optionRows);
-    return (_jsxs(Box, { borderStyle: "single", borderColor: UI.warn, flexDirection: "column", paddingX: 1, width: width, marginBottom: 1, children: [_jsxs(Box, { flexWrap: "nowrap", children: [_jsx(Text, { color: UI.warn, bold: true, wrap: "truncate", children: decisions.length > 1 ? `Decision 1 of ${decisions.length}` : "Decision" }), _jsxs(Text, { color: UI.dim, wrap: "truncate", children: [ticket ? `  ${ticket.key}` : "", `  asked by ${decision.asked_by_role}`, `  ${relativeTime(decision.created_at)}`] })] }), _jsx(Text, { color: UI.text, wrap: "wrap", children: question }), options.slice(0, optionRows).map((option, index) => (_jsxs(Box, { flexWrap: "nowrap", children: [_jsx(Box, { width: 3, flexShrink: 0, children: _jsxs(Text, { color: UI.accent, children: [index + 1, ")"] }) }), _jsx(Text, { color: UI.text, wrap: "truncate", children: truncate(option, Math.max(8, inner - 4)) })] }, index))), _jsx(Text, { color: UI.dim, wrap: "truncate", children: options.length
-                    ? `/decide 1 to ${options.length}, or /decide <your answer>`
-                    : "/decide <your answer>" })] }));
+    const shown = decisions.slice(0, Math.max(1, rows - 4));
+    return (_jsxs(Box, { borderStyle: "single", borderColor: UI.warn, flexDirection: "column", paddingX: 1, width: width, marginBottom: 1, children: [_jsxs(Text, { color: UI.warn, bold: true, wrap: "truncate", children: ["Decisions (", decisions.length, ")"] }), shown.map((decision, index) => {
+                const ticket = board?.tickets.find((row) => row.id === decision.ticket_id);
+                const cursor = decision.id === selected;
+                const label = ticket?.key ?? decision.id.slice(0, 8);
+                const question = decision.question_md.trim().split("\n")[0] ?? "";
+                return (_jsxs(Text, { color: UI.text, wrap: "truncate", inverse: cursor, children: [cursor ? `${DECISION_CURSOR} ` : "  ", index + 1, ") ", label, question ? `  ${truncate(question, Math.max(8, inner - label.length - 8))}` : "", `  ${relativeTime(decision.created_at)}`] }, decision.id));
+            }), decisions.length > shown.length ? (_jsxs(Text, { color: UI.dim, wrap: "truncate", children: ["+", decisions.length - shown.length, " more in /inbox"] })) : null, _jsx(Text, { color: UI.dim, wrap: "truncate", children: "/decide 3 answer \u00B7 /inbox then Enter" })] }));
 }