agent-office 0.0.1 → 0.0.3

package/dist/manage/components/SendMessage.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { Box, Text } from "ink";
-import { Select, Spinner, TextInput } from "@inkjs/ui";
+import { Spinner, TextInput } from "@inkjs/ui";
+import { ItemSelector } from "./ItemSelector.js";
 import { useApi, useAsyncState } from "../hooks/useApi.js";
-export function SendMessage({ serverUrl, password, onBack, contentHeight }) {
+export function SendMessage({ serverUrl, password, onBack, contentHeight, initialRecipient }) {
     const { listSessions, sendMailMessage, getConfig } = useApi(serverUrl, password);
     const { run: runList } = useAsyncState();
     const [sessions, setSessions] = useState([]);
-    const [sessionsLoading, setSessionsLoading] = useState(true);
-    const [stage, setStage] = useState("select-recipients");
-    const [recipients, setRecipients] = useState([]);
+    const [sessionsLoading, setSessionsLoading] = useState(!initialRecipient);
+    const [stage, setStage] = useState(initialRecipient ? "enter-body" : "select-recipients");
+    const [recipients, setRecipients] = useState(initialRecipient ? [initialRecipient] : []);
     const [messageBody, setMessageBody] = useState("");
     const [error, setError] = useState(null);
     const [submitted, setSubmitted] = useState(false);
@@ -20,6 +21,8 @@ export function SendMessage({ serverUrl, password, onBack, contentHeight }) {
         });
     }, [getConfig]);
     useEffect(() => {
+        if (initialRecipient)
+            return; // no need to load sessions list when replying
         runList(listSessions).then((rows) => {
             setSessions(rows ?? []);
             setSessionsLoading(false);
@@ -58,7 +61,7 @@ export function SendMessage({ serverUrl, password, onBack, contentHeight }) {
         if (sessions.length === 0) {
             return (_jsx(Box, { height: contentHeight, alignItems: "center", justifyContent: "center", children: _jsx(Text, { dimColor: true, children: "No sessions yet. Create one first." }) }));
         }
-        return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Text, { bold: true, children: "Send Message" }), _jsx(Text, { dimColor: true, children: "Select a recipient agent:" }), _jsx(Select, { options: sessions.map((s) => ({ label: s.name, value: s.name })), onChange: handleRecipientSelect })] }));
+        return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Text, { bold: true, children: "Send Message" }), _jsx(Text, { dimColor: true, children: "Select a recipient agent:" }), _jsx(ItemSelector, { items: sessions.map((s) => s.name), onSelect: handleRecipientSelect, onCancel: onBack })] }));
     }
     if (stage === "enter-body" && !submitted) {
         return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Text, { bold: true, children: "Send Message" }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { children: "From: " }), _jsx(Text, { color: "cyan", children: senderName })] }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { children: "To: " }), _jsx(Text, { color: "cyan", children: recipients[0] })] }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { children: "Body: " }), _jsx(TextInput, { placeholder: "Type your message...", onSubmit: handleBodySubmit })] })] }));

package/dist/manage/components/SessionList.js

@@ -1,52 +1,493 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, useCallback } from "react";
 import { Box, Text, useInput } from "ink";
-import { Spinner } from "@inkjs/ui";
+import { TextInput, Spinner, ConfirmInput } from "@inkjs/ui";
 import { useApi, useAsyncState } from "../hooks/useApi.js";
 const MASKED_CODE = "••••••••-••••-••••-••••-••••••••••••";
+function TailView({ serverUrl, password, sessionName, contentHeight, onClose }) {
+    const { getMessages } = useApi(serverUrl, password);
+    const [messages, setMessages] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    useEffect(() => {
+        getMessages(sessionName, 50)
+            .then((msgs) => { setMessages(msgs); setLoading(false); })
+            .catch((err) => { setError(err instanceof Error ? err.message : String(err)); setLoading(false); });
+    }, [sessionName]);
+    useInput((_input, key) => {
+        if (key.escape) {
+            onClose();
+            return;
+        }
+        if (key.upArrow)
+            setScrollOffset((o) => Math.max(0, o - 1));
+        if (key.downArrow)
+            setScrollOffset((o) => o + 1);
+    });
+    if (loading) {
+        return (_jsx(Box, { height: contentHeight, alignItems: "center", justifyContent: "center", children: _jsx(Spinner, { label: `Fetching messages for "${sessionName}"...` }) }));
+    }
+    if (error) {
+        return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsxs(Text, { bold: true, children: ["Messages \u2014 ", _jsx(Text, { color: "cyan", children: sessionName })] }), _jsxs(Text, { color: "red", children: ["Error: ", error] }), _jsx(Text, { dimColor: true, children: "Esc to go back" })] }));
+    }
+    const messageLines = [];
+    for (const msg of messages) {
+        for (const part of msg.parts) {
+            if (part.type === "text" && part.text) {
+                const lines = part.text.split("\n");
+                for (let i = 0; i < lines.length; i++) {
+                    messageLines.push({ role: msg.role, text: i === 0 ? lines[i] : `  ${lines[i]}` });
+                }
+                messageLines.push({ role: msg.role, text: "" });
+            }
+            else if (part.type === "tool") {
+                // Tool part has: tool (string), input, output
+                const toolName = typeof part.tool === "string" ? part.tool : String(part.tool ?? "unknown");
+                messageLines.push({ role: msg.role, text: "" }); // Blank line before tool
+                messageLines.push({ role: msg.role, text: `▶ Tool: ${toolName}` });
+                if (part.input !== undefined) {
+                    // Try to pretty-print input if it's an object
+                    let inputStr;
+                    if (typeof part.input === "object" && part.input !== null) {
+                        inputStr = JSON.stringify(part.input, null, 2);
+                    }
+                    else {
+                        inputStr = String(part.input);
+                    }
+                    const lines = inputStr.split("\n");
+                    for (let i = 0; i < Math.min(lines.length, 15); i++) {
+                        messageLines.push({ role: msg.role, text: `  ${lines[i]}` });
+                    }
+                    if (lines.length > 15) {
+                        messageLines.push({ role: msg.role, text: `  [...] (${lines.length - 15} more lines)` });
+                    }
+                }
+                if (part.output !== undefined) {
+                    // Show output type and preview
+                    let outputPreview;
+                    if (typeof part.output === "object" && part.output !== null) {
+                        outputPreview = JSON.stringify(part.output, null, 2).slice(0, 200);
+                    }
+                    else if (typeof part.output === "string") {
+                        outputPreview = part.output.slice(0, 200);
+                    }
+                    else {
+                        outputPreview = String(part.output).slice(0, 200);
+                    }
+                    const outputType = typeof part.output === "object" ? "object" : typeof part.output;
+                    messageLines.push({ role: msg.role, text: `  ${"—".repeat(40)}` });
+                    messageLines.push({ role: msg.role, text: `  Result (${outputType}):` });
+                    const lines = outputPreview.split("\n");
+                    for (let i = 0; i < Math.min(lines.length, 5); i++) {
+                        messageLines.push({ role: msg.role, text: `  ${lines[i]}` });
+                    }
+                    if (lines.length > 5 || outputPreview.length >= 200) {
+                        messageLines.push({ role: msg.role, text: "  [...]" });
+                    }
+                }
+                messageLines.push({ role: msg.role, text: "" }); // Blank line after tool
+            }
+        }
+    }
+    const viewHeight = contentHeight - 3;
+    const maxOffset = Math.max(0, messageLines.length - viewHeight);
+    const clampedOffset = Math.min(scrollOffset, maxOffset);
+    const visible = messageLines.slice(clampedOffset, clampedOffset + viewHeight);
+    return (_jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsxs(Box, { gap: 2, marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Messages" }), _jsx(Text, { color: "cyan", children: sessionName }), _jsxs(Text, { dimColor: true, children: ["(", messages.length, " messages)"] })] }), _jsx(Box, { flexDirection: "column", height: viewHeight, overflow: "hidden", children: visible.length === 0 ? (_jsx(Text, { dimColor: true, children: "No messages in this session yet." })) : (visible.map((line, i) => (_jsx(Box, { children: line.role === "user" ? (_jsx(Text, { color: "green", children: line.text })) : (_jsx(Text, { children: line.text })) }, i)))) }), messageLines.length > viewHeight && (_jsxs(Text, { dimColor: true, children: ["[", clampedOffset + 1, "\u2013", Math.min(clampedOffset + viewHeight, messageLines.length), "/", messageLines.length, " lines] \u2191\u2193 scroll \u00B7 Esc back"] }))] }));
+}
+function InjectView({ serverUrl, password, sessionName, contentHeight, onClose }) {
+    const { injectText } = useApi(serverUrl, password);
+    const [stage, setStage] = useState("input");
+    const [error, setError] = useState(null);
+    const [submitted, setSubmitted] = useState(false);
+    useInput((_input, key) => {
+        if (key.escape && stage !== "submitting") {
+            onClose();
+            return;
+        }
+        if ((stage === "done" || stage === "error") && key.escape) {
+            onClose();
+            return;
+        }
+    });
+    // Auto-close after success
+    useEffect(() => {
+        if (stage === "done") {
+            const t = setTimeout(onClose, 1500);
+            return () => clearTimeout(t);
+        }
+    }, [stage, onClose]);
+    const handleSubmit = async (text) => {
+        const trimmed = text.trim();
+        if (!trimmed)
+            return;
+        setSubmitted(true);
+        setStage("submitting");
+        try {
+            await injectText(sessionName, trimmed);
+            setStage("done");
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+            setStage("error");
+        }
+    };
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsxs(Box, { gap: 2, children: [_jsx(Text, { bold: true, children: "Inject Text" }), _jsx(Text, { color: "cyan", children: sessionName })] }), stage === "input" && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { children: "Text: " }), !submitted && (_jsx(TextInput, { placeholder: "Type your message...", onSubmit: (v) => void handleSubmit(v) }))] })), stage === "submitting" && _jsx(Spinner, { label: `Injecting into "${sessionName}"...` }), stage === "done" && (_jsx(Text, { color: "green", children: "Injected. Returning..." })), stage === "error" && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: "red", children: ["Error: ", error] }), _jsx(Text, { dimColor: true, children: "Esc to go back" })] }))] }));
+}
+function CoworkerMailView({ serverUrl, password, sessionName, contentHeight, onClose }) {
+    const { getMailMessages } = useApi(serverUrl, password);
+    const [tab, setTab] = useState("received");
+    const [messages, setMessages] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const loadTab = useCallback(async (t) => {
+        setLoading(true);
+        setScrollOffset(0);
+        try {
+            const msgs = await getMailMessages(sessionName, { sent: t === "sent" });
+            setMessages(msgs);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [sessionName]);
+    useEffect(() => { void loadTab("received"); }, [loadTab]);
+    useInput((input, key) => {
+        if (key.escape) {
+            onClose();
+            return;
+        }
+        if (!loading) {
+            if (key.upArrow)
+                setScrollOffset((o) => Math.max(0, o - 1));
+            if (key.downArrow)
+                setScrollOffset((o) => o + 1);
+            if (input === "r" && tab !== "received") {
+                setTab("received");
+                void loadTab("received");
+            }
+            if (input === "s" && tab !== "sent") {
+                setTab("sent");
+                void loadTab("sent");
+            }
+        }
+    });
+    const renderMessages = () => {
+        if (loading)
+            return _jsx(Spinner, { label: "Loading..." });
+        if (error)
+            return _jsxs(Text, { color: "red", children: ["Error: ", error] });
+        if (messages.length === 0)
+            return _jsxs(Text, { dimColor: true, children: ["No ", tab, " messages."] });
+        const lines = [];
+        const maxNameLen = Math.max(...messages.map((m) => m.from_name.length));
+        for (const msg of messages) {
+            const timestamp = new Date(msg.created_at).toLocaleString();
+            lines.push({ text: "─", color: "gray" });
+            lines.push({ text: `${msg.from_name.padEnd(maxNameLen)} → ${msg.to_name}`, color: "cyan" });
+            lines.push({ text: timestamp, color: "gray" });
+            if (!msg.read)
+                lines.push({ text: "  [unread]", color: "yellow" });
+            lines.push({ text: "" });
+            for (const line of msg.body.split("\n")) {
+                lines.push({ text: `  ${line}` });
+            }
+            lines.push({ text: "" });
+        }
+        const viewHeight = contentHeight - 7;
+        const maxOffset = Math.max(0, lines.length - viewHeight);
+        const clamped = Math.min(scrollOffset, maxOffset);
+        const visible = lines.slice(clamped, clamped + viewHeight);
+        return (_jsx(Box, { flexDirection: "column", height: viewHeight, overflow: "hidden", children: visible.map((line, i) => (_jsx(Text, { color: line.color, children: line.text }, i))) }));
+    };
+    return (_jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsxs(Box, { gap: 2, marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Coworker Mail" }), _jsx(Text, { color: "cyan", children: sessionName }), _jsxs(Text, { dimColor: true, children: ["(", messages.length, " ", tab, ")"] })] }), _jsxs(Box, { gap: 2, marginBottom: 1, children: [tab === "received"
+                        ? _jsx(Text, { bold: true, color: "green", children: "[Received]" })
+                        : _jsx(Text, { dimColor: true, children: "Received (r)" }), tab === "sent"
+                        ? _jsx(Text, { bold: true, color: "yellow", children: "[Sent]" })
+                        : _jsx(Text, { dimColor: true, children: "Sent (s)" })] }), renderMessages()] }));
+}
+// ─── Main component ──────────────────────────────────────────────────────────
 export function SessionList({ serverUrl, password, contentHeight }) {
-    const { listSessions } = useApi(serverUrl, password);
-    const { data: sessions, loading, error, run } = useAsyncState();
+    const { listSessions, createSession, deleteSession, regenerateCode, getModes, revertToStart } = useApi(serverUrl, password);
+    const { data: sessions, loading, error: loadError, run } = useAsyncState();
     const [cursor, setCursor] = useState(0);
     const [revealedRows, setRevealedRows] = useState(new Set());
-    useEffect(() => {
-        void run(listSessions);
-    }, []);
+    const [mode, setMode] = useState("browse");
+    const [subView, setSubView] = useState(null);
+    const [actionError, setActionError] = useState(null);
+    const [actionMsg, setActionMsg] = useState(null);
+    const [availableModes, setAvailableModes] = useState([]);
+    const [pendingMode, setPendingMode] = useState(null);
+    const [modeCursor, setModeCursor] = useState(0);
+    const reload = () => void run(listSessions);
+    useEffect(() => { reload(); }, []);
     const rows = sessions ?? [];
+    // Clamp cursor when list shrinks
+    useEffect(() => {
+        if (rows.length > 0)
+            setCursor((c) => Math.min(c, rows.length - 1));
+    }, [rows.length]);
     useInput((input, key) => {
-        if (loading || rows.length === 0)
+        // Sub-views own Esc themselves; pass nothing else through
+        if (subView !== null)
+            return;
+        if (loading)
+            return;
+        if (mode === "browse") {
+            if (key.upArrow)
+                setCursor((c) => Math.max(0, c - 1));
+            if (key.downArrow)
+                setCursor((c) => Math.min(rows.length - 1, c + 1));
+            if (input === "r" && rows.length > 0) {
+                const id = rows[cursor]?.id;
+                if (id == null)
+                    return;
+                setRevealedRows((prev) => {
+                    const next = new Set(prev);
+                    next.has(id) ? next.delete(id) : next.add(id);
+                    return next;
+                });
+            }
+            if (input === "c") {
+                setActionError(null);
+                setActionMsg(null);
+                setPendingMode(null);
+                setModeCursor(0);
+                setMode("creating-loading");
+                getModes().then((modes) => {
+                    const safeMode = Array.isArray(modes) ? modes : [];
+                    setAvailableModes(safeMode);
+                    setMode(safeMode.length > 0 ? "creating-pick-mode" : "creating-name");
+                }).catch(() => {
+                    setAvailableModes([]);
+                    setMode("creating-name");
+                });
+            }
+            if (input === "d" && rows.length > 0) {
+                setActionError(null);
+                setActionMsg(null);
+                setMode("confirm-delete");
+            }
+            if (input === "g" && rows.length > 0) {
+                setActionError(null);
+                setActionMsg(null);
+                setMode("confirm-regen");
+            }
+            if (input === "x" && rows.length > 0) {
+                setActionError(null);
+                setActionMsg(null);
+                setMode("confirm-revert");
+            }
+            if (rows.length > 0) {
+                if (input === "t")
+                    setSubView("tail");
+                if (input === "i")
+                    setSubView("inject");
+                if (input === "m")
+                    setSubView("coworker-mail");
+            }
+        }
+        if (mode === "creating-pick-mode") {
+            // +1 for the "no mode" option at index 0
+            const total = availableModes.length + 1;
+            if (key.upArrow)
+                setModeCursor((c) => (c - 1 + total) % total);
+            if (key.downArrow)
+                setModeCursor((c) => (c + 1) % total);
+            if (key.return) {
+                const selected = modeCursor === 0 ? null : (availableModes[modeCursor - 1]?.name ?? null);
+                setPendingMode(selected);
+                setMode("creating-name");
+            }
+            if (key.escape) {
+                setMode("browse");
+            }
+            return;
+        }
+        if (mode === "creating-name" && key.escape) {
+            setMode("browse");
+            return;
+        }
+        // Dismiss feedback states with any key
+        if (mode === "create-done" || mode === "create-error" || mode === "delete-done" || mode === "delete-error") {
+            setMode("browse");
+            setActionError(null);
+            setActionMsg(null);
+        }
+    });
+    const handleCreate = async (name) => {
+        const trimmed = name.trim();
+        if (!trimmed)
+            return;
+        setMode("creating-busy");
+        try {
+            await createSession(trimmed, pendingMode ?? undefined);
+            const modeNote = pendingMode ? ` [${pendingMode}]` : "";
+            setActionMsg(`Coworker "${trimmed}"${modeNote} created.`);
+            setMode("create-done");
+            reload();
+        }
+        catch (err) {
+            setActionError(err instanceof Error ? err.message : String(err));
+            setMode("create-error");
+        }
+    };
+    const handleConfirmDelete = async (confirmed) => {
+        if (!confirmed) {
+            setMode("browse");
             return;
-        if (key.upArrow) {
-            setCursor((c) => Math.max(0, c - 1));
         }
-        if (key.downArrow) {
-            setCursor((c) => Math.min(rows.length - 1, c + 1));
+        const target = rows[cursor];
+        if (!target) {
+            setMode("browse");
+            return;
+        }
+        setMode("deleting");
+        try {
+            await deleteSession(target.name);
+            setActionMsg(`Coworker "${target.name}" deleted.`);
+            setMode("delete-done");
+            reload();
+        }
+        catch (err) {
+            setActionError(err instanceof Error ? err.message : String(err));
+            setMode("delete-error");
+        }
+    };
+    const handleConfirmRegen = async (confirmed) => {
+        if (!confirmed) {
+            setMode("browse");
+            return;
         }
-        if (input === "r") {
-            const id = rows[cursor]?.id;
-            if (id == null)
-                return;
+        const target = rows[cursor];
+        if (!target) {
+            setMode("browse");
+            return;
+        }
+        setMode("regenerating");
+        try {
+            await regenerateCode(target.name);
+            setActionMsg(`Agent code regenerated for "${target.name}".`);
             setRevealedRows((prev) => {
                 const next = new Set(prev);
-                if (next.has(id)) {
-                    next.delete(id);
-                }
-                else {
-                    next.add(id);
-                }
+                if (target.id != null)
+                    next.add(target.id);
                 return next;
             });
+            setMode("create-done");
+            reload();
         }
-    });
-    if (loading) {
-        return (_jsx(Box, { height: contentHeight, alignItems: "center", justifyContent: "center", children: _jsx(Spinner, { label: "Loading sessions..." }) }));
+        catch (err) {
+            setActionError(err instanceof Error ? err.message : String(err));
+            setMode("create-error");
+        }
+    };
+    const handleConfirmRevert = async (confirmed) => {
+        if (!confirmed) {
+            setMode("browse");
+            return;
+        }
+        const target = rows[cursor];
+        if (!target) {
+            setMode("browse");
+            return;
+        }
+        setMode("reverting");
+        try {
+            await revertToStart(target.name);
+            setActionMsg(`Session "${target.name}" reverted to first message and restarted.`);
+            setMode("create-done");
+            reload();
+        }
+        catch (err) {
+            setActionError(err instanceof Error ? err.message : String(err));
+            setMode("create-error");
+        }
+    };
+    // ── Full-screen create flow ───────────────────────────────────────────────
+    if (mode === "creating-loading") {
+        return (_jsx(Box, { height: contentHeight, alignItems: "center", justifyContent: "center", children: _jsx(Spinner, { label: "Loading agent configs..." }) }));
     }
-    if (error) {
-        return (_jsxs(Box, { height: contentHeight, flexDirection: "column", gap: 1, children: [_jsx(Text, { color: "red", bold: true, children: "Error" }), _jsx(Text, { children: error })] }));
+    if (mode === "creating-pick-mode") {
+        const modeOptions = [
+            { label: "No mode (default)", description: "" },
+            ...availableModes.map((m) => ({ label: m.name, description: m.description })),
+        ];
+        return (_jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsxs(Box, { gap: 2, marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Create Coworker" }), _jsx(Text, { dimColor: true, children: "Select a mode" })] }), _jsx(Box, { flexDirection: "column", children: modeOptions.map((opt, i) => {
+                        const sel = i === modeCursor;
+                        return (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: sel ? "cyan" : undefined, bold: sel, children: sel ? "▶" : " " }), _jsx(Text, { color: sel ? "cyan" : undefined, bold: sel, children: opt.label }), opt.description ? _jsxs(Text, { dimColor: true, children: ["\u2014 ", opt.description] }) : null] }, i));
+                    }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "\u2191\u2193 navigate \u00B7 Enter select \u00B7 Esc cancel" }) })] }));
+    }
+    if (mode === "creating-name") {
+        return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsxs(Box, { gap: 2, children: [_jsx(Text, { bold: true, children: "Create Coworker" }), pendingMode
+                            ? _jsxs(Text, { color: "yellow", children: ["[", pendingMode, "]"] })
+                            : _jsx(Text, { dimColor: true, children: "[no mode]" })] }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { children: "Name: " }), _jsx(TextInput, { placeholder: "e.g. alice", onSubmit: (v) => void handleCreate(v) })] }), _jsx(Text, { dimColor: true, children: "Enter to create \u00B7 Esc cancel" })] }));
+    }
+    if (mode === "creating-busy") {
+        return (_jsx(Box, { height: contentHeight, alignItems: "center", justifyContent: "center", children: _jsx(Spinner, { label: "Creating coworker..." }) }));
+    }
+    if (mode === "create-done") {
+        return (_jsxs(Box, { flexDirection: "column", gap: 1, paddingX: 2, children: [_jsx(Text, { color: "green", children: actionMsg }), _jsx(Text, { dimColor: true, children: "Press any key to continue" })] }));
+    }
+    if (mode === "create-error") {
+        return (_jsxs(Box, { flexDirection: "column", gap: 1, paddingX: 2, children: [_jsxs(Text, { color: "red", children: ["Error: ", actionError] }), _jsx(Text, { dimColor: true, children: "Press any key to continue" })] }));
+    }
+    // ── Sub-view rendering ────────────────────────────────────────────────────
+    const activeSession = rows[cursor];
+    if (subView !== null && activeSession) {
+        const closeSubView = () => setSubView(null);
+        if (subView === "tail") {
+            return (_jsx(TailView, { serverUrl: serverUrl, password: password, sessionName: activeSession.name, contentHeight: contentHeight, onClose: closeSubView }));
+        }
+        if (subView === "inject") {
+            return (_jsx(InjectView, { serverUrl: serverUrl, password: password, sessionName: activeSession.name, contentHeight: contentHeight, onClose: closeSubView }));
+        }
+        if (subView === "coworker-mail") {
+            return (_jsx(CoworkerMailView, { serverUrl: serverUrl, password: password, sessionName: activeSession.name, contentHeight: contentHeight, onClose: closeSubView }));
+        }
+    }
+    // ── Initial load ──────────────────────────────────────────────────────────
+    if (loading && rows.length === 0) {
+        return (_jsx(Box, { height: contentHeight, alignItems: "center", justifyContent: "center", children: _jsx(Spinner, { label: "Loading coworkers..." }) }));
+    }
+    if (loadError) {
+        return (_jsxs(Box, { height: contentHeight, flexDirection: "column", gap: 1, children: [_jsx(Text, { color: "red", bold: true, children: "Error" }), _jsx(Text, { children: loadError })] }));
     }
-    return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsxs(Text, { bold: true, children: ["Sessions ", _jsxs(Text, { dimColor: true, children: ["(", rows.length, ")"] })] }), rows.length === 0 ? (_jsx(Box, { height: contentHeight - 2, alignItems: "center", justifyContent: "center", children: _jsx(Text, { dimColor: true, children: "No sessions yet. Create one first." }) })) : (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { gap: 2, marginBottom: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "  NAME".padEnd(18) }), _jsx(Text, { bold: true, color: "cyan", children: "OPENCODE SESSION ID".padEnd(36) }), _jsx(Text, { bold: true, color: "cyan", children: "AGENT CODE" })] }), rows.map((s, i) => {
+    // ── Inline action panel ───────────────────────────────────────────────────
+    const renderActionPanel = () => {
+        const target = rows[cursor];
+        if (mode === "confirm-delete" && target)
+            return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "red", paddingX: 1, marginBottom: 1, children: [_jsx(Text, { bold: true, color: "red", children: "Delete Coworker" }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: ["Delete ", _jsx(Text, { color: "yellow", bold: true, children: target.name }), "?", " ", _jsx(Text, { dimColor: true, children: "This also removes the OpenCode session." })] }) }), _jsx(Box, { marginTop: 1, children: _jsx(ConfirmInput, { defaultChoice: "cancel", onConfirm: () => void handleConfirmDelete(true), onCancel: () => void handleConfirmDelete(false) }) })] }));
+        if (mode === "deleting")
+            return (_jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: "red", paddingX: 1, marginBottom: 1, children: _jsx(Spinner, { label: `Deleting "${rows[cursor]?.name}"...` }) }));
+        if (mode === "delete-done")
+            return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "green", paddingX: 1, marginBottom: 1, children: [_jsx(Text, { color: "green", children: actionMsg }), _jsx(Text, { dimColor: true, children: "Press any key to continue" })] }));
+        if (mode === "delete-error")
+            return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "red", paddingX: 1, marginBottom: 1, children: [_jsxs(Text, { color: "red", children: ["Error: ", actionError] }), _jsx(Text, { dimColor: true, children: "Press any key to continue" })] }));
+        if (mode === "confirm-regen" && target)
+            return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, marginBottom: 1, children: [_jsx(Text, { bold: true, color: "yellow", children: "Regenerate Agent Code" }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: ["Regenerate code for ", _jsx(Text, { color: "cyan", bold: true, children: target.name }), "?", " ", _jsx(Text, { dimColor: true, children: "The old code will stop working immediately." })] }) }), _jsx(Box, { marginTop: 1, children: _jsx(ConfirmInput, { defaultChoice: "cancel", onConfirm: () => void handleConfirmRegen(true), onCancel: () => void handleConfirmRegen(false) }) })] }));
+        if (mode === "regenerating")
+            return (_jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, marginBottom: 1, children: _jsx(Spinner, { label: "Generating new agent code..." }) }));
+        if (mode === "confirm-revert" && target)
+            return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, marginBottom: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "Revert to First Message" }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: ["Revert ", _jsx(Text, { color: "cyan", bold: true, children: target.name }), " to its first message and restart?", " ", _jsx(Text, { dimColor: true, children: "This clears all messages after the first one." })] }) }), _jsx(Box, { marginTop: 1, children: _jsx(ConfirmInput, { defaultChoice: "cancel", onConfirm: () => void handleConfirmRevert(true), onCancel: () => void handleConfirmRevert(false) }) })] }));
+        if (mode === "reverting")
+            return (_jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, marginBottom: 1, children: _jsx(Spinner, { label: `Reverting "${rows[cursor]?.name}" and restarting...` }) }));
+        return null;
+    };
+    // ── Coworker table ────────────────────────────────────────────────────────
+    const actionPanel = renderActionPanel();
+    const panelHeight = actionPanel ? 5 : 0;
+    const tableHeight = contentHeight - panelHeight - 3;
+    return (_jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsxs(Box, { gap: 2, marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Coworkers" }), _jsxs(Text, { dimColor: true, children: ["(", rows.length, ")"] }), loading && _jsx(Spinner, {})] }), actionPanel, rows.length === 0 ? (_jsx(Box, { height: tableHeight, alignItems: "center", justifyContent: "center", children: _jsx(Text, { dimColor: true, children: "No coworkers yet. Press c to create one." }) })) : (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { gap: 2, marginBottom: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "  NAME".padEnd(18) }), _jsx(Text, { bold: true, color: "cyan", children: "STATUS".padEnd(20) }), _jsx(Text, { bold: true, color: "cyan", children: "MODE".padEnd(12) }), _jsx(Text, { bold: true, color: "cyan", children: "OPENCODE SESSION ID".padEnd(36) }), _jsx(Text, { bold: true, color: "cyan", children: "AGENT CODE" })] }), rows.map((s, i) => {
                         const selected = i === cursor;
                         const revealed = revealedRows.has(s.id);
-                        return (_jsxs(Box, { gap: 2, children: [_jsxs(Box, { width: 18, children: [_jsx(Text, { color: selected ? "cyan" : undefined, children: selected ? "▶ " : "  " }), _jsx(Text, { color: selected ? "cyan" : "green", bold: selected, children: s.name })] }), _jsx(Text, { dimColor: !selected, children: s.session_id.padEnd(36) }), revealed ? (_jsx(Text, { color: "yellow", children: s.agent_code })) : (_jsx(Text, { dimColor: true, children: MASKED_CODE }))] }, s.id));
-                    })] })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "\u2191\u2193 navigate \u00B7 r reveal/hide code \u00B7 Esc back" }) })] }));
+                        return (_jsxs(Box, { gap: 2, children: [_jsxs(Box, { width: 18, children: [_jsx(Text, { color: selected ? "cyan" : undefined, children: selected ? "▶ " : "  " }), _jsx(Text, { color: selected ? "cyan" : "green", bold: selected, children: s.name })] }), _jsx(Text, { color: selected ? "cyan" : undefined, dimColor: !selected && !s.status, children: (s.status ?? "—").padEnd(20) }), _jsx(Text, { color: selected ? "magenta" : undefined, dimColor: !selected && !s.mode, children: (s.mode ?? "—").padEnd(12) }), _jsx(Text, { dimColor: !selected, children: s.session_id.padEnd(36) }), revealed
+                                    ? _jsx(Text, { color: "yellow", children: s.agent_code })
+                                    : _jsx(Text, { dimColor: true, children: MASKED_CODE })] }, s.id));
+                    })] }))] }));
 }

package/dist/manage/components/SessionSidebar.js

@@ -6,11 +6,17 @@ export function SessionSidebar({ serverUrl, password }) {
     const { listSessions } = useApi(serverUrl, password);
     const [sessions, setSessions] = useState([]);
     useEffect(() => {
+        // Initial fetch
         listSessions().then((s) => setSessions(s));
+        // Poll every 5 seconds to refresh statuses
+        const interval = setInterval(() => {
+            listSessions().then((s) => setSessions(s));
+        }, 5000);
+        return () => clearInterval(interval);
     }, [listSessions]);
     if (sessions.length === 0)
         return null;
-    return (_jsxs(Box, { borderStyle: "single", borderColor: "cyan", paddingX: 1, flexDirection: "column", gap: 0, children: [_jsx(Text, { bold: true, color: "cyan", children: "Sessions" }), sessions.map((session, i) => (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: getNodeColor(i), children: "\u25CF" }), _jsx(Text, { children: session.name })] }, session.id)))] }));
+    return (_jsxs(Box, { borderStyle: "single", borderColor: "cyan", paddingX: 1, flexDirection: "column", gap: 0, children: [_jsx(Text, { bold: true, color: "cyan", children: "Sessions" }), sessions.map((session, i) => (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { gap: 1, flexDirection: "row", children: [_jsx(Text, { color: getNodeColor(i), children: "\u25CF" }), _jsx(Text, { children: session.name })] }), session.status && (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: session.status }) }))] }, session.id)))] }));
 }
 function getNodeColor(index) {
     const colors = ["green", "blue", "yellow", "magenta", "cyan", "red", "white"];