agent-office 0.0.0 → 0.0.2

package/dist/manage/components/ReadMail.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { Select, Spinner } from "@inkjs/ui";
+import { useApi, useAsyncState } from "../hooks/useApi.js";
+export function ReadMail({ serverUrl, password, onBack, contentHeight }) {
+    const { listSessions, getMailMessages, markMessageRead } = useApi(serverUrl, password);
+    const { run: runList } = useAsyncState();
+    const [sessions, setSessions] = useState([]);
+    const [sessionsLoading, setSessionsLoading] = useState(true);
+    const [stage, setStage] = useState("select-session");
+    const [selectedName, setSelectedName] = useState(null);
+    const [viewTab, setViewTab] = useState("received");
+    const [messages, setMessages] = useState([]);
+    const [error, setError] = useState(null);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    useEffect(() => {
+        runList(listSessions).then((rows) => {
+            setSessions(rows ?? []);
+            setSessionsLoading(false);
+        });
+    }, []);
+    const loadMessages = async (name) => {
+        setSelectedName(name);
+        setStage("loading");
+        try {
+            const msgs = await getMailMessages(name, { sent: false });
+            setMessages(msgs);
+            setScrollOffset(0);
+            setStage("view-received");
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+            setStage("error");
+        }
+    };
+    const handleTabSwitch = async (newTab) => {
+        if (!selectedName)
+            return;
+        setStage("loading");
+        setViewTab(newTab);
+        setScrollOffset(0);
+        try {
+            const msgs = await getMailMessages(selectedName, { sent: newTab === "sent" });
+            setMessages(msgs);
+            setStage(newTab === "sent" ? "view-sent" : "view-received");
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+            setStage("error");
+        }
+    };
+    useInput((input, key) => {
+        if ((stage === "view-received" || stage === "view-sent")) {
+            if (key.upArrow)
+                setScrollOffset((o) => Math.max(0, o - 1));
+            if (key.downArrow)
+                setScrollOffset((o) => o + 1);
+            if (input === "r" && stage === "view-received") {
+                handleTabSwitch("received");
+            }
+            if (input === "s" && stage === "view-received") {
+                handleTabSwitch("sent");
+            }
+            if (input === "r" && stage === "view-sent") {
+                handleTabSwitch("received");
+            }
+        }
+    });
+    if (sessionsLoading) {
+        return (_jsx(Box, { height: contentHeight, alignItems: "center", justifyContent: "center", children: _jsx(Spinner, { label: "Loading sessions..." }) }));
+    }
+    if (stage === "select-session") {
+        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: "Coworker Mail" }), _jsx(Text, { dimColor: true, children: "Select a session:" }), _jsx(Select, { options: sessions.map((s) => ({ label: s.name, value: s.name })), onChange: loadMessages })] }));
+    }
+    if (stage === "loading") {
+        return (_jsx(Box, { height: contentHeight, alignItems: "center", justifyContent: "center", children: _jsx(Spinner, { label: `Loading ${viewTab} messages...` }) }));
+    }
+    if (stage === "error") {
+        return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Text, { bold: true, children: "Coworker Mail" }), _jsxs(Text, { color: "red", children: ["Error: ", error] })] }));
+    }
+    const renderMessages = () => {
+        if (messages.length === 0) {
+            return (_jsx(Box, { height: contentHeight - 6, alignItems: "center", justifyContent: "center", children: _jsxs(Text, { dimColor: true, children: ["No ", viewTab, " 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" });
+            lines.push({ text: msg.read ? "" : "  [unread]" });
+            lines.push({ text: "" });
+            for (const line of msg.body.split("\n")) {
+                lines.push({ text: `  ${line}` });
+            }
+            lines.push({ text: "" });
+        }
+        const viewHeight = contentHeight - 6;
+        const maxOffset = Math.max(0, lines.length - viewHeight);
+        const clampedOffset = Math.min(scrollOffset, maxOffset);
+        const visible = lines.slice(clampedOffset, clampedOffset + 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: selectedName }), _jsxs(Text, { dimColor: true, children: ["(", messages.length, " ", viewTab, " messages)"] })] }), _jsxs(Box, { gap: 2, marginBottom: 1, children: [viewTab === "received" ? (_jsx(Text, { bold: true, color: "green", children: "[Received]" })) : (_jsx(Text, { dimColor: true, children: "Received (press r)" })), viewTab === "sent" ? (_jsx(Text, { bold: true, color: "yellow", children: "[Sent]" })) : (_jsx(Text, { dimColor: true, children: "Sent (press s)" }))] }), renderMessages()] }));
+}

package/dist/manage/components/SendMessage.d.ts

@@ -0,0 +1,9 @@
+interface SendMessageProps {
+    serverUrl: string;
+    password: string;
+    onBack: () => void;
+    contentHeight: number;
+    initialRecipient?: string;
+}
+export declare function SendMessage({ serverUrl, password, onBack, contentHeight, initialRecipient }: SendMessageProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/manage/components/SendMessage.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Box, Text } from "ink";
+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, initialRecipient }) {
+    const { listSessions, sendMailMessage, getConfig } = useApi(serverUrl, password);
+    const { run: runList } = useAsyncState();
+    const [sessions, setSessions] = 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);
+    const [senderName, setSenderName] = useState("Human");
+    useEffect(() => {
+        getConfig().then((config) => {
+            setSenderName(config.human_name ?? "Human");
+        });
+    }, [getConfig]);
+    useEffect(() => {
+        if (initialRecipient)
+            return; // no need to load sessions list when replying
+        runList(listSessions).then((rows) => {
+            setSessions(rows ?? []);
+            setSessionsLoading(false);
+        });
+    }, []);
+    useEffect(() => {
+        if (stage === "done" || stage === "error") {
+            const timer = setTimeout(onBack, 1500);
+            return () => clearTimeout(timer);
+        }
+    }, [stage, onBack]);
+    const handleRecipientSelect = (value) => {
+        setRecipients([value]);
+        setStage("enter-body");
+    };
+    const handleBodySubmit = async (body) => {
+        const trimmed = body.trim();
+        if (!trimmed || recipients.length === 0)
+            return;
+        setSubmitted(true);
+        setMessageBody(trimmed);
+        setStage("sending");
+        try {
+            await sendMailMessage(senderName, recipients, trimmed);
+            setStage("done");
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+            setStage("error");
+        }
+    };
+    if (sessionsLoading) {
+        return (_jsx(Box, { height: contentHeight, alignItems: "center", justifyContent: "center", children: _jsx(Spinner, { label: "Loading sessions..." }) }));
+    }
+    if (stage === "select-recipients") {
+        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(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 })] })] }));
+    }
+    if (stage === "sending") {
+        return (_jsx(Spinner, { label: "Sending message..." }));
+    }
+    if (stage === "done") {
+        return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Text, { bold: true, children: "Send Message" }), _jsx(Text, { color: "green", children: "Message sent!" }), _jsx(Text, { dimColor: true, children: "Returning to menu..." })] }));
+    }
+    if (stage === "error") {
+        return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Text, { bold: true, children: "Send Message" }), _jsxs(Text, { color: "red", children: ["Error: ", error] }), _jsx(Text, { dimColor: true, children: "Returning to menu..." })] }));
+    }
+    return null;
+}

package/dist/manage/components/SessionList.js

@@ -1,52 +1,413 @@
-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) {
+            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: "" });
+        }
+    }
+    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 } = 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 (key.upArrow) {
-            setCursor((c) => Math.max(0, c - 1));
+        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 (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();
         }
-        if (key.downArrow) {
-            setCursor((c) => Math.min(rows.length - 1, c + 1));
+        catch (err) {
+            setActionError(err instanceof Error ? err.message : String(err));
+            setMode("create-error");
+        }
+    };
+    const handleConfirmDelete = async (confirmed) => {
+        if (!confirmed) {
+            setMode("browse");
+            return;
+        }
+        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");
+        }
+    };
+    // ── 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..." }) }));
+        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: "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 ? "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));
+                    })] }))] }));
 }