@higherdev/cli 0.4.0 → 0.5.0

package/dist/tui/App.js

@@ -0,0 +1,418 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Box, Static, Text, useApp, useInput, useStdout } from "ink";
+import { Banner } from "./Banner.js";
+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 { SettingsPanel } from "./Settings.js";
+import { Splash } from "./Splash.js";
+import TextInput from "./TextInput.js";
+import { alertOnce } from "./alert.js";
+import { bubbleRows } from "./height.js";
+import { planLayout, splitPanels } from "./layout.js";
+import { parseLine } from "./parse.js";
+import { configuredSlugs, decisionOptions, loadLiveEvents, loadTicketDetail, pollSnapshot, postOrchestrator, resolveDecision, switchWorkspace, updateAgent, updateProviderCap, } from "./data.js";
+import { editFor, editableKeys, nextValue, seedFor, settingsRows } from "./settings-model.js";
+import { appendLines, runLabels, toStreamLines } from "./stream.js";
+import { UI } from "./theme.js";
+import { WorkspaceLoads } from "./workspace-load.js";
+let messageSeq = 0;
+const nextId = () => `m${messageSeq++}`;
+export function App({ initial }) {
+    const { exit } = useApp();
+    const { stdout } = useStdout();
+    const columns = stdout?.columns && stdout.columns > 0 ? stdout.columns : 80;
+    const rows = stdout?.rows && stdout.rows > 0 ? stdout.rows : 24;
+    const width = Math.max(48, Math.min(columns - 1, 120));
+    const [config, setConfig] = useState(initial.config);
+    const [workspace, setWorkspace] = useState(initial.workspace);
+    const [board, setBoard] = useState(initial.board);
+    const [feed, setFeed] = useState(initial.feed);
+    const [mode, setMode] = useState("browse");
+    const [view, setView] = useState("home");
+    const [live, setLive] = useState("connecting");
+    const [messages, setMessages] = useState([]);
+    const [draft, setDraft] = useState("");
+    const [busy, setBusy] = useState(false);
+    const [notice, setNotice] = useState(null);
+    const [ticketKey, setTicketKey] = useState(null);
+    const [ready, setReady] = useState(false);
+    const [stream, setStream] = useState([]);
+    const [cursor, setCursor] = useState(null);
+    const [started, setStarted] = useState(false);
+    const [field, setField] = useState(null);
+    const [editing, setEditing] = useState(null);
+    const selectedRef = useRef(null);
+    const fieldRef = useRef(null);
+    const editingRef = useRef(null);
+    const history = useRef([]);
+    const historyAt = useRef(-1);
+    const refreshRef = useRef(null);
+    const loads = useRef(new WorkspaceLoads(initial.workspace.id));
+    editingRef.current = editing;
+    useEffect(() => {
+        if (messages.length > 0 || view !== "home")
+            setStarted(true);
+    }, [messages.length, view]);
+    const applySnapshot = useCallback((snapshot) => {
+        const token = loads.current.start(snapshot.workspace.id);
+        if (!loads.current.isCurrent(token))
+            return;
+        setWorkspace(snapshot.workspace);
+        setBoard(snapshot.board);
+        setFeed(snapshot.feed);
+    }, []);
+    useEffect(() => {
+        setLive("connecting");
+        const polling = pollSnapshot(config, applySnapshot, setLive, (error) => setNotice(error instanceof Error ? error.message : String(error)));
+        refreshRef.current = polling.refresh;
+        return polling.close;
+    }, [config, applySnapshot]);
+    const labels = useMemo(() => runLabels(board), [board]);
+    const liveRunIds = [...labels.keys()].sort().join(",");
+    useEffect(() => {
+        if (!liveRunIds) {
+            setStream([]);
+            return;
+        }
+        const token = loads.current.start(workspace.id);
+        void loadLiveEvents(config, board)
+            .then((events) => {
+            if (!loads.current.isCurrent(token))
+                return;
+            setStream((prior) => appendLines(prior, toStreamLines(events, labels)));
+        })
+            .catch(() => { });
+    }, [liveRunIds, board, config, labels, workspace.id]);
+    const say = useCallback((speaker, body, steps) => {
+        setMessages((prior) => [...prior, { id: nextId(), speaker, body, steps, done: true }]);
+    }, []);
+    const order = useMemo(() => boardTicketIds(board), [board]);
+    const settings = useMemo(() => settingsRows(workspace, board.agents), [workspace, board.agents]);
+    const settingsOrder = useMemo(() => editableKeys(settings), [settings]);
+    const browsing = mode === "browse" && draft.length === 0 && cursor !== null;
+    const configuring = view === "settings" && !editing;
+    const moveCursor = useCallback((delta) => {
+        if (!order.length)
+            return false;
+        const next = nextCursor(order, selectedRef.current, delta);
+        if (!next)
+            return false;
+        selectedRef.current = next;
+        setCursor(next);
+        return true;
+    }, [order]);
+    const moveField = useCallback((delta) => {
+        const next = nextCursor(settingsOrder, fieldRef.current, delta);
+        if (!next)
+            return false;
+        fieldRef.current = next;
+        setField(next);
+        return true;
+    }, [settingsOrder]);
+    const refresh = useCallback(async () => {
+        await refreshRef.current?.();
+    }, []);
+    const applyEdit = useCallback(async (key, raw) => {
+        const row = settings.find((entry) => entry.key === key);
+        if (!row)
+            return;
+        const edit = editFor(row, raw);
+        if (!edit.ok) {
+            setNotice(edit.error);
+            return;
+        }
+        setBusy(true);
+        try {
+            if (edit.value.target === "cap") {
+                await updateProviderCap(config, edit.value.provider, edit.value.cap);
+            }
+            else {
+                await updateAgent(config, edit.value.id, edit.value.fields);
+            }
+            setNotice(null);
+            await refresh();
+        }
+        catch (error) {
+            setNotice(error instanceof Error ? error.message : String(error));
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [settings, config, refresh]);
+    const changeWorkspace = useCallback(async (slug) => {
+        if (!configuredSlugs().includes(slug)) {
+            setNotice(`No configured workspace ${slug}. You can reach: ${configuredSlugs().join(", ")}.`);
+            return;
+        }
+        setBusy(true);
+        try {
+            const snapshot = await switchWorkspace(slug);
+            loads.current.switchTo(snapshot.workspace.id);
+            setConfig(snapshot.config);
+            setWorkspace(snapshot.workspace);
+            setBoard(snapshot.board);
+            setFeed(snapshot.feed);
+            setStream([]);
+            setCursor(null);
+            selectedRef.current = null;
+            setView("home");
+            setTicketKey(null);
+            setNotice(null);
+            say("system", `Now on ${snapshot.workspace.slug} (${snapshot.workspace.repo}).`);
+        }
+        catch (error) {
+            setNotice(error instanceof Error ? error.message : String(error));
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [say]);
+    const askOrchestrator = useCallback(async (text) => {
+        setBusy(true);
+        const id = nextId();
+        setMessages((prior) => [...prior, { id, speaker: "orchestrator", body: "", pending: true }]);
+        const since = new Date().toISOString();
+        try {
+            await postOrchestrator(text, config);
+            setMessages((prior) => prior.map((message) => message.id === id
+                ? { ...message, steps: ["· queued, it answers on the next tick"] }
+                : message));
+            const { waitForReply } = await import("./data.js");
+            const reply = await waitForReply(config, since, 180_000);
+            setMessages((prior) => prior.map((message) => message.id === id
+                ? { ...message, body: reply ?? "No reply yet. It will land in /inbox.", pending: false, steps: [] }
+                : message));
+        }
+        catch (error) {
+            const body = error instanceof Error ? error.message : String(error);
+            setMessages((prior) => prior.map((message) => message.id === id ? { ...message, body, pending: false } : message));
+        }
+        finally {
+            setMessages((prior) => prior.map((message) => message.id === id ? { ...message, done: true } : message));
+            setBusy(false);
+        }
+    }, [config]);
+    const run = useCallback(async (raw) => {
+        const text = raw.trim();
+        if (view === "settings") {
+            const open = editingRef.current;
+            if (open) {
+                setEditing(null);
+                setDraft("");
+                await applyEdit(open.key, raw);
+                return;
+            }
+            if (!text) {
+                const key = fieldRef.current;
+                const row = settings.find((entry) => entry.key === key);
+                if (!row || !key)
+                    return;
+                const flipped = nextValue(row);
+                if (flipped !== null)
+                    return applyEdit(key, flipped);
+                const seed = seedFor(row);
+                setEditing({ key, draft: seed });
+                setDraft(seed);
+                setNotice(row.hint ?? null);
+                return;
+            }
+        }
+        if (!text) {
+            const selected = board.tickets.find((ticket) => ticket.id === selectedRef.current);
+            if (browsing && selected) {
+                setTicketKey(selected.key);
+                setView("ticket");
+            }
+            return;
+        }
+        history.current.push(text);
+        historyAt.current = -1;
+        setDraft("");
+        setNotice(null);
+        const action = parseLine(text);
+        if (action.kind === "say") {
+            say("you", text);
+            if (mode === "orchestrator")
+                await askOrchestrator(text);
+            else
+                setNotice("Use /orchestrator before sending a message.");
+            return;
+        }
+        switch (action.kind) {
+            case "mode":
+                setMode("orchestrator");
+                setCursor(null);
+                selectedRef.current = null;
+                say("system", "Talking to the orchestrator. It moves work already in flight.");
+                return;
+            case "view":
+                setView(action.view);
+                if (action.view === "board" && order.length) {
+                    const next = selectedRef.current && order.includes(selectedRef.current) ? selectedRef.current : order[0];
+                    selectedRef.current = next;
+                    setCursor(next);
+                    setMode("browse");
+                }
+                if (action.view === "settings") {
+                    const first = settingsOrder[0] ?? null;
+                    fieldRef.current = first;
+                    setField(first);
+                    setEditing(null);
+                }
+                return;
+            case "workspace":
+                if (!action.slug)
+                    say("system", `Workspaces: ${configuredSlugs().join(", ")}.`);
+                else
+                    await changeWorkspace(action.slug);
+                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);
+                }
+                return;
+            case "decide": {
+                const decision = board.decisions[0];
+                if (!decision) {
+                    setNotice("Nothing is waiting on a decision.");
+                    return;
+                }
+                if (action.dismiss) {
+                    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>.");
+                    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);
+                }
+                return;
+            }
+            case "help":
+                setMessages((prior) => [...prior, { id: nextId(), speaker: "system", body: "", panel: "help", done: true }]);
+                return;
+            case "refresh":
+                await refresh();
+                return;
+            case "exit":
+                exit();
+                return;
+            case "unknown":
+                setNotice(`No command /${action.command}. Try /help.`);
+                return;
+            default:
+                return;
+        }
+    }, [view, settings, applyEdit, board, browsing, mode, say, askOrchestrator, order, settingsOrder, changeWorkspace, config, refresh, exit]);
+    useInput((input, key) => {
+        if (key.ctrl && input === "c")
+            exit();
+    });
+    const decisions = board.decisions;
+    const waiting = decisions.length;
+    const announced = useRef(0);
+    useEffect(() => {
+        if (waiting > announced.current)
+            alertOnce();
+        announced.current = waiting;
+    }, [waiting]);
+    const ticket = ticketKey ? board.tickets.find((row) => row.key === ticketKey) : null;
+    const settled = messages.filter((message) => message.done);
+    const inFlight = messages.filter((message) => !message.done);
+    const splash = !started;
+    const scrollback = splash ? [] : [
+        { key: "banner" },
+        { key: "help", message: { id: "help", speaker: "system", body: "", panel: "help" } },
+        ...settled.map((message) => ({ key: message.id, message })),
+    ];
+    const plan = planLayout({
+        rows, columns, width, splash, ready, decision: decisionRows(decisions),
+        inFlight: inFlight.reduce((total, message) => total + bubbleRows(message, width), 0),
+        notice: Boolean(notice), home: view === "home",
+    });
+    const agentsView = splitPanels(plan.panels);
+    const running = board.runs.filter((run) => run.status === "running").length;
+    const selected = cursor ? board.tickets.find((row) => row.id === cursor) : null;
+    return (_jsxs(_Fragment, { children: [_jsx(Static, { items: scrollback, children: (item) => {
+                    if (!item.message)
+                        return _jsx(Banner, { animate: false }, item.key);
+                    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
+                        ? _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) => {
+                                setDraft(next);
+                                if (editingRef.current)
+                                    setEditing({ key: editingRef.current.key, draft: next });
+                            }, onSubmit: (value) => void run(value), isActive: !busy, placeholder: busy ? "working…" : "message, or /help", prompt: _jsx(Text, { color: mode === "browse" ? UI.dim : UI.cream, children: mode === "orchestrator" ? "orchestrator> " : "> " }), color: UI.text, onCancel: () => {
+                                if (editing) {
+                                    setEditing(null);
+                                    setDraft("");
+                                    setNotice(null);
+                                    return;
+                                }
+                                if (view !== "home") {
+                                    setView("home");
+                                    setTicketKey(null);
+                                    return;
+                                }
+                                setCursor(null);
+                                selectedRef.current = null;
+                            }, onUp: () => {
+                                if (configuring && moveField(-1))
+                                    return;
+                                if (browsing && moveCursor(-1))
+                                    return;
+                                if (!history.current.length)
+                                    return;
+                                historyAt.current = historyAt.current < 0 ? history.current.length - 1 : Math.max(0, historyAt.current - 1);
+                                setDraft(history.current[historyAt.current] ?? "");
+                            }, onDown: () => {
+                                if (configuring && moveField(1))
+                                    return;
+                                if (browsing && moveCursor(1))
+                                    return;
+                                if (historyAt.current < 0)
+                                    return;
+                                historyAt.current += 1;
+                                if (historyAt.current >= history.current.length) {
+                                    historyAt.current = -1;
+                                    setDraft("");
+                                    return;
+                                }
+                                setDraft(history.current[historyAt.current] ?? "");
+                            } }) })] })] }));
+}
+export { COMMANDS };