@higherdev/cli 0.12.1 → 0.13.0

package/dist/tui/App.js

@@ -10,7 +10,7 @@ import { Bubble } from "./Bubble.js";
 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 } from "./Panels.js";
+import { AgentsPanel, BoardPanel, FeedPanel, InboxPanel, TicketPanel, inboxEntries } from "./Panels.js";
 import { SettingsPanel } from "./Settings.js";
 import { Splash } from "./Splash.js";
 import TextInput from "./TextInput.js";
@@ -50,6 +50,7 @@ export function App({ initial }) {
     const [started, setStarted] = useState(false);
     const [field, setField] = useState(null);
     const [editing, setEditing] = useState(null);
+    const [inboxFocus, setInboxFocus] = useState(0);
     const selectedRef = useRef(null);
     const fieldRef = useRef(null);
     const editingRef = useRef(null);
@@ -117,6 +118,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 moveCursor = useCallback((delta) => {
         if (!order.length)
             return false;
@@ -135,6 +137,12 @@ export function App({ initial }) {
         setField(next);
         return true;
     }, [settingsOrder]);
+    const moveInbox = useCallback((delta) => {
+        setInboxFocus((current) => Math.max(0, Math.min(inbox.length - 1, current + delta)));
+    }, [inbox.length]);
+    useEffect(() => {
+        setInboxFocus((current) => Math.max(0, Math.min(inbox.length - 1, current)));
+    }, [inbox.length]);
     const refresh = useCallback(async () => {
         await refreshRef.current?.();
     }, []);
@@ -274,6 +282,8 @@ export function App({ initial }) {
                 return;
             case "view":
                 setView(action.view);
+                if (action.view === "inbox")
+                    setInboxFocus(0);
                 if (action.view === "board" && order.length) {
                     const next = selectedRef.current && order.includes(selectedRef.current) ? selectedRef.current : order[0];
                     selectedRef.current = next;
@@ -545,9 +555,9 @@ 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 }) : null, view === "ticket" && plan.panels > 0 ? ticket
+                } }), 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, _jsxs(Text, { color: UI.dim, wrap: "truncate", children: ["\u00B7 ", mode, cursor && selected ? ` ${selected.key} ↑↓ move · enter opens · esc leaves` : ""] })] }), _jsx(Box, { children: _jsx(TextInput, { value: draft, onChange: (next) => {
+                        : _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, _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) => {
                                 setDraft(next);
                                 if (editingRef.current)
                                     setEditing({ key: editingRef.current.key, draft: next });
@@ -566,6 +576,10 @@ export function App({ initial }) {
                                 setCursor(null);
                                 selectedRef.current = null;
                             }, onUp: () => {
+                                if (view === "inbox" && !draft) {
+                                    moveInbox(-1);
+                                    return;
+                                }
                                 if (configuring && moveField(-1))
                                     return;
                                 if (browsing && moveCursor(-1))
@@ -575,6 +589,10 @@ 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 === "inbox" && !draft) {
+                                    moveInbox(1);
+                                    return;
+                                }
                                 if (configuring && moveField(1))
                                     return;
                                 if (browsing && moveCursor(1))

package/dist/tui/Dashboard.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
-import { BOARD_COLUMNS, availabilityLabel, epicProgressCaption, epicProgress, statusLabel, statusTone, } from "./data.js";
+import { BOARD_COLUMNS, epicProgressCaption, epicProgress, statusLabel, statusTone, } from "./data.js";
 import { elapsed, truncate } from "../out/format.js";
 import { inkColor } from "../out/theme.js";
 import { UI } from "./theme.js";
 import { BoundedPanel as Panel, Heading, More, contentRows } from "./bounded.js";
+import { agentDisplayRows } from "./agent-rows.js";
 const DOT = "●";
 /**
  * The width at which the board and the agents stop competing for the same
@@ -106,33 +107,22 @@ export function BoardColumn({ board, width, rows, cursor, }) {
         ] }));
 }
 export function AgentsColumn({ board, width, rows, }) {
-    // Whoever is working comes first. An idle registry is what you scroll past.
-    const ordered = [...board.agents].sort((left, right) => {
-        const busy = (id) => board.runs.some((run) => run.agent_id === id && run.status === "running") ? 0 : 1;
-        return busy(left.id) - busy(right.id) || left.display_name.localeCompare(right.display_name);
-    });
-    const shown = ordered.slice(0, contentRows(rows, ordered.length));
+    const displayRows = agentDisplayRows(board);
+    const shown = displayRows.slice(0, contentRows(rows, displayRows.length));
     return (_jsx(Panel, { width: width, rows: rows, children: [
-            _jsx(Heading, { text: "Agents", note: `${board.agents.filter((a) => a.enabled).length} on` }, "h"),
-            ...(board.agents.length === 0
+            _jsx(Heading, { text: "Agents", note: `${displayRows.length}` }, "h"),
+            ...(displayRows.length === 0
                 ? [
                     _jsx(Text, { color: UI.dim, children: "No agents yet." }, "empty"),
                 ]
                 : []),
-            ...shown.map((agent) => {
-                const run = board.runs.find((row) => row.agent_id === agent.id && row.status === "running");
-                const ticket = run?.ticket_id
-                    ? board.tickets.find((item) => item.id === run.ticket_id)
-                    : undefined;
-                const availability = board.availability.find((row) => row.provider === agent.provider);
-                const blocked = availability && !availability.available ? availabilityLabel(availability) : "";
-                const tone = !agent.enabled ? "muted" : run ? "blue" : blocked ? "warning" : "muted";
-                const name = Math.max(8, Math.min(22, width - 14));
-                return (_jsxs(Box, { flexWrap: "nowrap", children: [_jsxs(Text, { color: inkColor(tone), children: [DOT, " "] }), _jsx(Box, { width: name, flexShrink: 0, children: _jsx(Text, { color: UI.text, wrap: "truncate", children: truncate(agent.display_name, name - 1) }) }), _jsx(Text, { color: UI.dim, wrap: "truncate", children: run
-                                ? `${ticket ? `${ticket.key} ` : ""}${elapsed(run.started_at ?? run.created_at)}`
-                                : blocked || (agent.enabled ? "idle" : "offline") })] }, agent.id));
+            ...shown.map((row) => {
+                const tone = row.run ? "blue" : row.state === "offline" ? "warning" : "muted";
+                return (_jsxs(Box, { flexWrap: "nowrap", children: [_jsxs(Text, { color: inkColor(tone), children: [DOT, " "] }), _jsxs(Text, { color: UI.text, wrap: "truncate", children: [row.name, _jsx(Text, { color: UI.dim, children: row.run
+                                        ? ` · ${row.ticket?.key ?? row.run.kind} ${elapsed(row.run.started_at ?? row.run.created_at)}`
+                                        : ` · ${row.state}` })] })] }, row.key));
             }),
-            _jsx(More, { count: ordered.length - shown.length }, "more"),
+            _jsx(More, { count: displayRows.length - shown.length }, "more"),
         ] }));
 }
 const KIND_COLOR = {

package/dist/tui/Panels.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
-import { BOARD_COLUMNS, availabilityLabel, statusLabel, statusTone, } from "./data.js";
+import { BOARD_COLUMNS, statusLabel, statusTone, } from "./data.js";
 import { elapsed, pad, relativeTime, truncate } from "../out/format.js";
 import { inkColor } from "../out/theme.js";
 import { UI } from "./theme.js";
 import { BoundedPanel as Panel, Heading, More, contentRows } from "./bounded.js";
+import { scrollWindow } from "./Dashboard.js";
+import { agentDisplayRows } from "./agent-rows.js";
 const DOT = "●";
 /**
  * The single-purpose views behind /board, /agents, /feed and /inbox. Each is
@@ -13,25 +15,20 @@ const DOT = "●";
  * `bounded.tsx` for why the bound is structural rather than arithmetic.
  */
 export function AgentsPanel({ board, width = 80, rows = 12, }) {
-    const shown = board.agents.slice(0, contentRows(rows, board.agents.length));
+    const displayRows = agentDisplayRows(board);
+    const shown = displayRows.slice(0, contentRows(rows, displayRows.length));
     return (_jsx(Panel, { width: width, rows: rows, children: [
-            _jsx(Heading, { text: "Agents", note: `${board.agents.length}` }, "h"),
-            ...(board.agents.length === 0
+            _jsx(Heading, { text: "Agents", note: `${displayRows.length}` }, "h"),
+            ...(displayRows.length === 0
                 ? [
                     _jsx(Text, { color: UI.dim, children: "No agents yet." }, "empty"),
                 ]
                 : []),
-            ...shown.map((agent) => {
-                const run = board.runs.find((row) => row.agent_id === agent.id && row.status === "running");
-                const ticket = run?.ticket_id
-                    ? board.tickets.find((item) => item.id === run.ticket_id)
-                    : undefined;
-                const availability = board.availability.find((row) => row.provider === agent.provider);
-                const blocked = availability && !availability.available ? availabilityLabel(availability) : "";
-                const tone = !agent.enabled ? "muted" : run ? "blue" : blocked ? "warning" : "muted";
-                return (_jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { color: inkColor(tone), children: [DOT, " "] }), _jsx(Text, { color: UI.text, children: pad(truncate(agent.display_name, 13), 14) }), _jsx(Text, { color: UI.dim, children: pad(agent.role, 13) }), _jsx(Text, { color: UI.dim, children: pad(truncate(agent.model, 23), 24) }), _jsx(Text, { color: UI.text, children: pad(run ? "running" : blocked ? "blocked" : "idle", 9) }), _jsxs(Text, { color: UI.dim, children: [ticket ? `${ticket.key} ` : "", run ? elapsed(run.started_at ?? run.created_at) : blocked] })] }, agent.id));
+            ...shown.map((row) => {
+                const tone = row.run ? "blue" : row.state === "offline" ? "warning" : "muted";
+                return (_jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { color: inkColor(tone), children: [DOT, " "] }), _jsx(Text, { color: UI.text, children: pad(truncate(row.name, 13), 14) }), _jsx(Text, { color: UI.dim, children: pad(row.agent?.role ?? row.run?.kind ?? "", 13) }), _jsx(Text, { color: UI.dim, children: pad(truncate(row.agent?.model ?? "", 23), 24) }), _jsx(Text, { color: UI.text, children: pad(row.state, 9) }), _jsxs(Text, { color: UI.dim, children: [row.ticket ? `${row.ticket.key} ` : "", row.run ? elapsed(row.run.started_at ?? row.run.created_at) : ""] })] }, row.key));
             }),
-            _jsx(More, { count: board.agents.length - shown.length }, "more"),
+            _jsx(More, { count: displayRows.length - shown.length }, "more"),
         ] }));
 }
 export function BoardPanel({ board, width = 80, rows = 12, cursor, }) {
@@ -86,22 +83,70 @@ export function FeedPanel({ entries, width = 80, rows = 12, }) {
  * The whole queue, one row each, numbered the way `/decide` reaches them: the
  * one on screen is 1.
  */
-export function InboxPanel({ board, width = 80, rows = 12, }) {
-    const shown = board.decisions.slice(0, contentRows(rows, board.decisions.length));
+export function InboxPanel({ board, width = 80, rows = 12, focus = 0, }) {
+    const entries = inboxEntries(board, width);
+    const inner = Math.max(0, rows - 1);
+    const window = scrollWindow(entries.length, inner, focus);
+    const hiddenAbove = window.start;
+    const hiddenBelow = entries.length - window.end;
+    const note = `${board.decisions.length}${hiddenAbove ? `  ${hiddenAbove}↑` : ""}${hiddenBelow ? `  ${hiddenBelow}↓` : ""}`;
     return (_jsx(Panel, { width: width, rows: rows, children: [
-            _jsx(Heading, { text: "Decisions", note: `${board.decisions.length}` }, "h"),
+            _jsx(Heading, { text: "Decisions", note: note }, "h"),
             ...(board.decisions.length === 0
                 ? [
                     _jsx(Text, { color: UI.dim, children: "Nothing waiting on you." }, "empty"),
                 ]
                 : []),
-            ...shown.map((decision, index) => {
-                const ticket = board.tickets.find((row) => row.id === decision.ticket_id);
-                return (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: index === 0 ? UI.warn : UI.dim, children: pad(`${index + 1})`, 3) }), _jsx(Text, { color: UI.dim, children: pad(ticket?.key ?? decision.id.slice(0, 8), 9) }), _jsx(Text, { color: UI.text, children: truncate(decision.question_md, Math.max(12, width - 14)) })] }, decision.id));
-            }),
-            _jsx(More, { count: board.decisions.length - shown.length }, "more"),
+            ...entries.slice(window.start, window.end).map((entry, index) => (_jsx(Text, { color: entry.kind === "header" ? UI.warn : UI.text, wrap: "truncate", inverse: window.start + index === focus, children: entry.kind === "body" ? `  ${entry.text}` : entry.text }, entry.key))),
         ] }));
 }
+/** Every physical line in /inbox, with decision bodies wrapped but never clipped. */
+export function inboxEntries(board, width) {
+    const entries = [];
+    const bodyWidth = Math.max(12, width - 2);
+    board.decisions.forEach((decision, index) => {
+        const ticket = board.tickets.find((row) => row.id === decision.ticket_id);
+        entries.push({
+            key: `${decision.id}:header`,
+            kind: "header",
+            text: `${index + 1}) ${ticket?.key ?? decision.id.slice(0, 8)}`,
+        });
+        wrapLines(decision.question_md.trim(), bodyWidth).forEach((text, line) => {
+            entries.push({ key: `${decision.id}:body:${line}`, kind: "body", text });
+        });
+    });
+    return entries;
+}
+function wrapLines(text, width) {
+    if (!text)
+        return [""];
+    const lines = [];
+    for (const paragraph of text.split("\n")) {
+        if (!paragraph) {
+            lines.push("");
+            continue;
+        }
+        let line = "";
+        for (const word of paragraph.split(/\s+/).filter(Boolean)) {
+            const candidate = line ? `${line} ${word}` : word;
+            if (candidate.length <= width) {
+                line = candidate;
+                continue;
+            }
+            if (line)
+                lines.push(line);
+            let rest = word;
+            while (rest.length > width) {
+                lines.push(rest.slice(0, width));
+                rest = rest.slice(width);
+            }
+            line = rest;
+        }
+        if (line)
+            lines.push(line);
+    }
+    return lines;
+}
 /**
  * One ticket in full, inside the rows it was given.
  *

package/dist/tui/agent-rows.js

@@ -0,0 +1,57 @@
+const roleForKind = {
+    architect: "architect",
+    build: "builder",
+    followup: "builder",
+    orchestrate: "orchestrator",
+    review: "reviewer",
+};
+function agentForRun(board, run) {
+    if (run.agent_id)
+        return board.agents.find((agent) => agent.id === run.agent_id) ?? null;
+    const role = roleForKind[run.kind];
+    return board.agents.find((agent) => agent.enabled && agent.role === role && agent.provider === run.provider) ?? null;
+}
+/** Expand live invocations into rows, then append enabled agents with no live run. */
+export function agentDisplayRows(board) {
+    const activeAgents = new Set();
+    const live = board.runs
+        .filter((run) => run.status === "running" || run.status === "queued")
+        .slice()
+        .sort((left, right) => {
+        if (left.status !== right.status)
+            return left.status === "running" ? -1 : 1;
+        const leftAt = left.started_at ?? left.created_at;
+        const rightAt = right.started_at ?? right.created_at;
+        return leftAt.localeCompare(rightAt) || left.id.localeCompare(right.id);
+    })
+        .map((run) => {
+        const agent = agentForRun(board, run);
+        if (agent)
+            activeAgents.add(agent.id);
+        const ticket = run.ticket_id
+            ? board.tickets.find((row) => row.id === run.ticket_id) ?? null
+            : null;
+        return {
+            key: run.id,
+            name: agent?.display_name ?? run.kind,
+            agent,
+            run,
+            ticket,
+            state: run.status,
+        };
+    });
+    const idle = board.agents
+        .filter((agent) => agent.enabled && !activeAgents.has(agent.id))
+        .sort((left, right) => left.display_name.localeCompare(right.display_name))
+        .map((agent) => ({
+        key: `idle:${agent.id}`,
+        name: agent.display_name,
+        agent,
+        run: null,
+        ticket: null,
+        state: board.availability.some((row) => row.provider === agent.provider && !row.available)
+            ? "offline"
+            : "idle",
+    }));
+    return [...live, ...idle];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@higherdev/cli",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "type": "module",
   "bin": {
     "hd": "dist/index.js"