agent-office 0.0.1 → 0.0.3

package/dist/manage/components/CronList.js

@@ -0,0 +1,310 @@
+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 { TextInput, Spinner, ConfirmInput } from "@inkjs/ui";
+import { useApi, useAsyncState } from "../hooks/useApi.js";
+const NEXT_RUN_PADDING = 22;
+export function CronList({ serverUrl, password, onBack, contentHeight, sessionName: initialSessionName }) {
+    const { listCrons, createCron, deleteCron, enableCron, disableCron, getCronHistory, listSessions } = useApi(serverUrl, password);
+    const { data: crons, loading, error: loadError, run } = useAsyncState();
+    const { data: sessions, run: runSessions } = useAsyncState();
+    const [cursor, setCursor] = useState(0);
+    const [mode, setMode] = useState("list");
+    const [actionMsg, setActionMsg] = useState(null);
+    const [actionError, setActionError] = useState(null);
+    const [selectedSession, setSelectedSession] = useState(initialSessionName ?? null);
+    const [createData, setCreateData] = useState({
+        name: "",
+        schedule: "",
+        message: "",
+    });
+    const [selectedSessionCursor, setSelectedSessionCursor] = useState(0);
+    const [history, setHistory] = useState([]);
+    const [historyLoading, setHistoryLoading] = useState(false);
+    const filteredCrons = crons?.filter((c) => (selectedSession ? c.session_name === selectedSession : true)) ?? [];
+    const reload = () => {
+        void run(listCrons);
+        void runSessions(() => listSessions());
+    };
+    useEffect(() => {
+        reload();
+    }, []);
+    useEffect(() => {
+        if (filteredCrons.length > 0) {
+            setCursor((c) => Math.min(c, filteredCrons.length - 1));
+        }
+    }, [filteredCrons.length]);
+    useInput((input, key) => {
+        if (key.escape && mode === "list") {
+            onBack();
+            return;
+        }
+        if (key.escape && (mode === "confirm-delete" || mode === "confirm-enable" || mode === "confirm-disable" || mode === "history")) {
+            setMode("list");
+            return;
+        }
+        if (key.escape && (mode === "create-name" || mode === "create-schedule" || mode === "create-message" || mode === "create-timezone")) {
+            setMode("list");
+            setCreateData({ name: "", schedule: "", message: "" });
+            return;
+        }
+        if (loading)
+            return;
+        if (mode === "list") {
+            if (key.upArrow)
+                setCursor((c) => Math.max(0, c - 1));
+            if (key.downArrow)
+                setCursor((c) => Math.min(filteredCrons.length - 1, c + 1));
+            if (input === "c") {
+                setActionError(null);
+                setActionMsg(null);
+                setCreateData({ name: "", schedule: "", message: "", timezone: "" });
+                setSelectedSessionCursor(0);
+                setMode("create-select-session");
+            }
+            if (input === "f" && filteredCrons.length > 0) {
+                setSelectedSession((prev) => (prev ? null : filteredCrons[0]?.session_name ?? null));
+            }
+            if (filteredCrons.length > 0) {
+                const selected = filteredCrons[cursor];
+                if (input === "d") {
+                    setActionError(null);
+                    setActionMsg(null);
+                    setMode("confirm-delete");
+                }
+                if (input === "e") {
+                    setActionError(null);
+                    setActionMsg(null);
+                    setMode(selected?.enabled ? "confirm-disable" : "confirm-enable");
+                }
+                if (input === "h") {
+                    setActionError(null);
+                    loadHistory(selected.id);
+                }
+            }
+        }
+        if (mode === "confirm-delete" || mode === "confirm-enable" || mode === "confirm-disable") {
+            if (key.return || input === "y") {
+                if (mode === "confirm-delete") {
+                    handleDelete();
+                }
+                else if (mode === "confirm-enable") {
+                    handleEnable();
+                }
+                else if (mode === "confirm-disable") {
+                    handleDisable();
+                }
+            }
+            if (input === "n" || key.escape) {
+                setMode("list");
+            }
+            return;
+        }
+        if (mode === "create-select-session") {
+            if (key.upArrow)
+                setSelectedSessionCursor((c) => Math.max(0, c - 1));
+            if (key.downArrow)
+                setSelectedSessionCursor((c) => Math.min((sessions ?? []).length - 1, c + 1));
+            if (key.return) {
+                const selected = sessions?.[selectedSessionCursor];
+                if (selected) {
+                    setSelectedSession(selected.name);
+                    setMode("create-name");
+                }
+            }
+            if (key.escape) {
+                setCreateData({ name: "", schedule: "", message: "" });
+                setSelectedSession(null);
+                setMode("list");
+            }
+        }
+    });
+    const loadHistory = useCallback(async (cronId) => {
+        setHistoryLoading(true);
+        try {
+            const entries = await getCronHistory(cronId, 10);
+            setHistory(entries);
+            setMode("history");
+        }
+        catch (err) {
+            setActionError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setHistoryLoading(false);
+        }
+    }, [getCronHistory]);
+    const handleDelete = async () => {
+        const selected = filteredCrons[cursor];
+        if (!selected)
+            return;
+        setMode("deleting");
+        try {
+            await deleteCron(selected.id);
+            setActionMsg(`Cron job "${selected.name}" deleted.`);
+            setMode("list");
+            reload();
+        }
+        catch (err) {
+            setActionError(err instanceof Error ? err.message : String(err));
+            setMode("list");
+        }
+    };
+    const handleEnable = async () => {
+        const selected = filteredCrons[cursor];
+        if (!selected)
+            return;
+        setMode("toggling");
+        try {
+            await enableCron(selected.id);
+            setActionMsg(`Cron job "${selected.name}" enabled.`);
+            setMode("list");
+            reload();
+        }
+        catch (err) {
+            setActionError(err instanceof Error ? err.message : String(err));
+            setMode("list");
+        }
+    };
+    const handleDisable = async () => {
+        const selected = filteredCrons[cursor];
+        if (!selected)
+            return;
+        setMode("toggling");
+        try {
+            await disableCron(selected.id);
+            setActionMsg(`Cron job "${selected.name}" disabled.`);
+            setMode("list");
+            reload();
+        }
+        catch (err) {
+            setActionError(err instanceof Error ? err.message : String(err));
+            setMode("list");
+        }
+    };
+    const handleCreate = async () => {
+        if (!createData.name.trim() || !createData.schedule.trim() || !createData.message.trim())
+            return;
+        if (!selectedSession)
+            return;
+        setMode("creating");
+        try {
+            await createCron({
+                name: createData.name.trim(),
+                session_name: selectedSession,
+                schedule: createData.schedule.trim(),
+                message: createData.message.trim(),
+                timezone: createData.timezone,
+            });
+            setActionMsg(`Cron job "${createData.name.trim()}" created.`);
+            setMode("list");
+            setCreateData({ name: "", schedule: "", message: "", timezone: "" });
+            reload();
+        }
+        catch (err) {
+            setActionError(err instanceof Error ? err.message : String(err));
+            setMode("list");
+            setCreateData({ name: "", schedule: "", message: "", timezone: "" });
+        }
+    };
+    const formatNextRun = (nextRun) => {
+        if (!nextRun)
+            return "—";
+        try {
+            const date = new Date(nextRun);
+            return date.toLocaleString();
+        }
+        catch {
+            return nextRun;
+        }
+    };
+    const formatLastRun = (lastRun) => {
+        if (!lastRun)
+            return "never";
+        try {
+            const date = new Date(lastRun);
+            return date.toLocaleString();
+        }
+        catch {
+            return lastRun;
+        }
+    };
+    if (loading && filteredCrons.length === 0) {
+        return (_jsx(Box, { height: contentHeight, alignItems: "center", justifyContent: "center", children: _jsx(Spinner, { label: "Loading cron jobs..." }) }));
+    }
+    if (loadError) {
+        return (_jsxs(Box, { height: contentHeight, flexDirection: "column", gap: 1, children: [_jsx(Text, { color: "red", bold: true, children: "Error" }), _jsx(Text, { children: loadError })] }));
+    }
+    const renderActionPanel = () => {
+        if (mode === "deleting") {
+            return (_jsx(Box, { borderStyle: "round", borderColor: "red", paddingX: 1, marginBottom: 1, children: _jsx(Spinner, { label: `Deleting "${filteredCrons[cursor]?.name}"...` }) }));
+        }
+        if (mode === "toggling") {
+            return (_jsx(Box, { borderStyle: "round", borderColor: "yellow", paddingX: 1, marginBottom: 1, children: _jsx(Spinner, { label: "Updating cron job..." }) }));
+        }
+        if (mode === "confirm-delete" && filteredCrons[cursor]) {
+            return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "red", paddingX: 1, marginBottom: 1, children: [_jsx(Text, { bold: true, color: "red", children: "Delete Cron Job" }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: ["Delete ", _jsx(Text, { color: "yellow", bold: true, children: filteredCrons[cursor].name }), "? This cannot be undone."] }) }), _jsx(Box, { marginTop: 1, children: _jsx(ConfirmInput, { defaultChoice: "cancel", onConfirm: () => void handleDelete(), onCancel: () => setMode("list") }) })] }));
+        }
+        if (mode === "confirm-enable" && filteredCrons[cursor]) {
+            return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "green", paddingX: 1, marginBottom: 1, children: [_jsx(Text, { bold: true, color: "green", children: "Enable Cron Job" }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: ["Enable ", _jsx(Text, { color: "cyan", bold: true, children: filteredCrons[cursor].name }), "?"] }) }), _jsx(Box, { marginTop: 1, children: _jsx(ConfirmInput, { defaultChoice: "cancel", onConfirm: () => void handleEnable(), onCancel: () => setMode("list") }) })] }));
+        }
+        if (mode === "confirm-disable" && filteredCrons[cursor]) {
+            return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, marginBottom: 1, children: [_jsx(Text, { bold: true, color: "yellow", children: "Disable Cron Job" }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: ["Disable ", _jsx(Text, { color: "cyan", bold: true, children: filteredCrons[cursor].name }), "?"] }) }), _jsx(Box, { marginTop: 1, children: _jsx(ConfirmInput, { defaultChoice: "cancel", onConfirm: () => void handleDisable(), onCancel: () => setMode("list") }) })] }));
+        }
+        return null;
+    };
+    const renderCreateSelectSession = () => {
+        if (mode !== "create-select-session")
+            return null;
+        return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Box, { gap: 2, children: _jsx(Text, { bold: true, children: "Select Coworker" }) }), (sessions ?? []).map((s, i) => {
+                    const sel = i === selectedSessionCursor;
+                    return (_jsxs(Box, { gap: 2, children: [_jsx(Text, { color: sel ? "cyan" : undefined, bold: sel, children: sel ? "▶ " : "  " }), _jsx(Text, { color: sel ? "cyan" : undefined, bold: sel, children: s.name })] }, s.id));
+                }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "\u2191\u2193 navigate \u00B7 Enter select \u00B7 Esc cancel" }) })] }));
+    };
+    const renderCreateFields = () => {
+        if (mode === "create-name") {
+            return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsxs(Box, { gap: 2, children: [_jsx(Text, { bold: true, children: "Create Cron Job" }), _jsx(Text, { dimColor: true, children: selectedSession })] }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { children: "Name: " }), _jsx(TextInput, { placeholder: "e.g. daily-standup", onSubmit: (v) => {
+                                    setCreateData({ ...createData, name: v });
+                                    setMode("create-schedule");
+                                } }, "create-name")] })] }));
+        }
+        if (mode === "create-schedule") {
+            return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsxs(Box, { gap: 2, children: [_jsx(Text, { bold: true, children: "Create Cron Job" }), _jsx(Text, { dimColor: true, children: createData.name ?? "" })] }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { children: "Schedule (cron expr): " }), _jsx(TextInput, { placeholder: "e.g. 0 9 * * *", onSubmit: (v) => {
+                                    setCreateData({ ...createData, schedule: v });
+                                    setMode("create-message");
+                                } }, "create-schedule")] }), _jsx(Text, { dimColor: true, children: "Example: \"0 9 * * *\" = daily at 9am, \"*/30 * * * *\" = every 30 minutes" })] }));
+        }
+        if (mode === "create-message") {
+            return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsxs(Box, { gap: 2, children: [_jsx(Text, { bold: true, children: "Create Cron Job" }), _jsx(Text, { dimColor: true, children: createData.schedule ?? "" })] }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { children: "Message: " }), _jsx(TextInput, { placeholder: "Message to inject", onSubmit: (v) => {
+                                    setCreateData({ ...createData, message: v });
+                                    setMode("create-timezone");
+                                } }, "create-message")] })] }));
+        }
+        if (mode === "create-timezone") {
+            return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsxs(Box, { gap: 2, children: [_jsx(Text, { bold: true, children: "Create Cron Job" }), _jsxs(Text, { dimColor: true, children: [createData.message.slice(0, 40), "..."] })] }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { children: "Timezone (optional, ENTER to skip): " }), _jsx(TextInput, { placeholder: "e.g. America/New_York", onSubmit: (v) => {
+                                    setCreateData({ ...createData, timezone: v || "" });
+                                    handleCreate();
+                                } }, "create-timezone")] }), _jsx(Text, { dimColor: true, children: "Leave empty for system timezone" })] }));
+        }
+        if (mode === "creating") {
+            return (_jsx(Box, { height: contentHeight, alignItems: "center", justifyContent: "center", children: _jsx(Spinner, { label: "Creating cron job..." }) }));
+        }
+        return null;
+    };
+    const renderHistory = () => {
+        if (mode !== "history")
+            return null;
+        if (historyLoading) {
+            return (_jsx(Box, { height: contentHeight, alignItems: "center", justifyContent: "center", children: _jsx(Spinner, { label: "Loading history..." }) }));
+        }
+        return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsxs(Box, { gap: 2, children: [_jsx(Text, { bold: true, children: "History" }), _jsx(Text, { dimColor: true, children: "Press any key to go back" })] }), history.length === 0 ? (_jsx(Text, { dimColor: true, children: "No execution history yet." })) : (_jsx(Box, { flexDirection: "column", children: history.map((entry) => (_jsxs(Box, { gap: 2, children: [_jsx(Text, { color: entry.success ? "green" : "red", children: entry.success ? "✓" : "✗" }), _jsx(Text, { children: new Date(entry.executed_at).toLocaleString() }), !entry.success && entry.error_message && (_jsx(Text, { color: "red", children: entry.error_message }))] }, entry.id))) }))] }));
+    };
+    const actionPanel = renderActionPanel();
+    const panelHeight = actionPanel ? 5 : 0;
+    const tableHeight = contentHeight - panelHeight - 5;
+    return (_jsxs(Box, { flexDirection: "column", gap: 0, children: [renderCreateSelectSession(), renderCreateFields(), renderHistory(), (mode === "list" || mode === "confirm-delete" || mode === "confirm-enable" || mode === "confirm-disable" || mode === "deleting" || mode === "toggling") && (_jsxs(_Fragment, { children: [_jsxs(Box, { gap: 2, marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Cron Jobs" }), selectedSession ? (_jsxs(Text, { color: "cyan", dimColor: true, children: ["[", filteredCrons.length, " jobs for ", selectedSession, "]"] })) : (_jsxs(Text, { dimColor: true, children: ["[", filteredCrons.length, " total]"] })), loading && _jsx(Spinner, {})] }), actionPanel, filteredCrons.length === 0 ? (_jsx(Box, { height: tableHeight, alignItems: "center", justifyContent: "center", children: _jsx(Text, { dimColor: true, children: selectedSession
+                                ? `No cron jobs for ${selectedSession}. Press c to create one.`
+                                : "No cron jobs 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(20) }), _jsx(Text, { bold: true, color: "cyan", children: "COWORKER".padEnd(15) }), _jsx(Text, { bold: true, color: "cyan", children: "SCHEDULE".padEnd(20) }), _jsx(Text, { bold: true, color: "cyan", children: "NEXT RUN".padEnd(NEXT_RUN_PADDING) }), _jsx(Text, { bold: true, color: "cyan", children: "STATUS" })] }), filteredCrons.map((job, idx) => {
+                                const selected = idx === cursor;
+                                return (_jsxs(Box, { gap: 2, children: [_jsxs(Box, { width: 20, children: [_jsx(Text, { color: selected ? "cyan" : undefined, children: selected ? "▶ " : "  " }), _jsx(Text, { color: selected ? "cyan" : "green", bold: selected, children: job.name })] }), _jsx(Box, { width: 15, children: _jsx(Text, { color: selected ? "magenta" : undefined, dimColor: !selected, children: job.session_name.padEnd(15) }) }), _jsx(Box, { width: 20, children: _jsx(Text, { dimColor: !selected, children: job.schedule.padEnd(20) }) }), _jsx(Box, { width: NEXT_RUN_PADDING, children: _jsx(Text, { color: job.enabled ? (selected ? "cyan" : "green") : "gray", dimColor: !selected, children: job.enabled ? formatNextRun(job.next_run).padEnd(NEXT_RUN_PADDING) : "DISABLED".padEnd(NEXT_RUN_PADDING) }) }), _jsx(Text, { color: job.enabled ? "green" : "gray", dimColor: !selected, children: job.enabled ? "enabled" : "disabled" })] }, job.id));
+                            })] })), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["c create \u00B7 d delete \u00B7 e enable/disable \u00B7 h history \u00B7 f", " ", selectedSession ? "show all" : "filter by coworker", " \u00B7 Esc back"] }) })] }))] }));
+}

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

@@ -0,0 +1,7 @@
+interface ItemSelectorProps {
+    items: string[];
+    onSelect: (value: string) => void;
+    onCancel?: () => void;
+}
+export declare function ItemSelector({ items, onSelect, onCancel }: ItemSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/manage/components/ItemSelector.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Text, useInput } from "ink";
+export function ItemSelector({ items, onSelect, onCancel }) {
+    const [cursor, setCursor] = useState(0);
+    useInput((_input, key) => {
+        if (key.upArrow)
+            setCursor((c) => Math.max(0, c - 1));
+        if (key.downArrow)
+            setCursor((c) => Math.min(items.length - 1, c + 1));
+        if (key.return && items[cursor] != null)
+            onSelect(items[cursor]);
+        if (key.escape)
+            onCancel?.();
+    });
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [items.map((item, i) => {
+                const sel = i === cursor;
+                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: item })] }, item));
+            }), _jsx(Text, { dimColor: true, children: "\u2191\u2193 navigate \u00B7 Enter select \u00B7 Esc cancel" })] }));
+}

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

@@ -0,0 +1,13 @@
+export interface MenuOption {
+    label: string;
+    value: string;
+    hint?: string;
+}
+interface MenuSelectProps {
+    options: MenuOption[];
+    onChange: (value: string) => void;
+    /** Optional badge text shown next to a specific option value */
+    badges?: Record<string, string>;
+}
+export declare function MenuSelect({ options, onChange, badges }: MenuSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/manage/components/MenuSelect.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Text, useInput } from "ink";
+export function MenuSelect({ options, onChange, badges = {} }) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    useInput((input, key) => {
+        if (key.upArrow) {
+            setSelectedIndex((i) => (i - 1 + options.length) % options.length);
+        }
+        if (key.downArrow) {
+            setSelectedIndex((i) => (i + 1) % options.length);
+        }
+        if (key.return) {
+            onChange(options[selectedIndex].value);
+        }
+    });
+    return (_jsx(Box, { flexDirection: "column", marginTop: 1, children: options.map((opt, i) => {
+            const isSelected = i === selectedIndex;
+            const badge = badges[opt.value];
+            return (_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { color: isSelected ? "cyan" : undefined, bold: isSelected, children: isSelected ? "▶" : " " }), _jsx(Text, { color: isSelected ? "cyan" : undefined, bold: isSelected, children: opt.label }), badge ? (_jsx(Text, { color: "yellow", bold: true, children: badge })) : null] }, opt.value));
+        }) }));
+}

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

@@ -3,6 +3,7 @@ interface MyMailProps {
     password: string;
     onBack: () => void;
     contentHeight: number;
+    onReply: (toName: string) => void;
 }
-export declare function MyMail({ serverUrl, password, onBack, contentHeight }: MyMailProps): import("react/jsx-runtime").JSX.Element;
+export declare function MyMail({ serverUrl, password, onBack, contentHeight, onReply }: MyMailProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/manage/components/MyMail.js

@@ -1,28 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { Box, Text, useInput } from "ink";
+import { Spinner } from "@inkjs/ui";
 import { useApi } from "../hooks/useApi.js";
-export function MyMail({ serverUrl, password, onBack, contentHeight }) {
-    const { getConfig, getMailMessages } = useApi(serverUrl, password);
+export function MyMail({ serverUrl, password, onBack, contentHeight, onReply }) {
+    const { getConfig, getMailMessages, markMessageRead } = useApi(serverUrl, password);
     const [humanName, setHumanName] = useState("Human");
     const [viewTab, setViewTab] = useState("received");
     const [messages, setMessages] = useState([]);
     const [error, setError] = useState(null);
-    const [scrollOffset, setScrollOffset] = useState(0);
+    const [selectedMsgIndex, setSelectedMsgIndex] = useState(0);
+    const [marking, setMarking] = useState(false);
+    const humanNameRef = useRef("Human");
     useEffect(() => {
         getConfig().then((config) => {
-            setHumanName(config.human_name ?? "Human");
-            loadMessages(config.human_name ?? "Human");
+            const name = config.human_name ?? "Human";
+            setHumanName(name);
+            humanNameRef.current = name;
+            loadMessages(name, "received");
         }).catch((err) => {
             setError(err instanceof Error ? err.message : String(err));
         });
     }, []);
-    const loadMessages = async (name) => {
-        const sent = viewTab === "sent";
+    const loadMessages = async (name, tab) => {
         try {
-            const msgs = await getMailMessages(name, { sent });
+            const msgs = await getMailMessages(name, { sent: tab === "sent" });
             setMessages(msgs);
-            setScrollOffset(0);
+            setSelectedMsgIndex(0);
         }
         catch (err) {
             setError(err instanceof Error ? err.message : String(err));
@@ -30,41 +34,110 @@ export function MyMail({ serverUrl, password, onBack, contentHeight }) {
     };
     const handleTabSwitch = (newTab) => {
         setViewTab(newTab);
-        setScrollOffset(0);
-        loadMessages(humanName);
+        loadMessages(humanNameRef.current, newTab);
+    };
+    const handleMarkRead = async () => {
+        const msg = messages[selectedMsgIndex];
+        if (!msg || msg.read || viewTab !== "received")
+            return;
+        setMarking(true);
+        try {
+            await markMessageRead(msg.id);
+            setMessages((prev) => prev.map((m) => (m.id === msg.id ? { ...m, read: true } : m)));
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setMarking(false);
+        }
+    };
+    const handleMarkAllRead = async () => {
+        if (viewTab !== "received")
+            return;
+        const unread = messages.filter((m) => !m.read);
+        if (unread.length === 0)
+            return;
+        setMarking(true);
+        try {
+            await Promise.all(unread.map((m) => markMessageRead(m.id)));
+            setMessages((prev) => prev.map((m) => ({ ...m, read: true })));
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setMarking(false);
+        }
     };
     useInput((input, key) => {
-        if (key.upArrow)
-            setScrollOffset((o) => Math.max(0, o - 1));
-        if (key.downArrow)
-            setScrollOffset((o) => o + 1);
-        if (input === "r" && viewTab !== "received") {
-            handleTabSwitch("received");
+        if (marking)
+            return;
+        if (key.upArrow) {
+            setSelectedMsgIndex((i) => Math.max(0, i - 1));
+        }
+        if (key.downArrow) {
+            setSelectedMsgIndex((i) => Math.min(messages.length - 1, i + 1));
+        }
+        if (input === "r") {
+            if (viewTab === "received") {
+                const msg = messages[selectedMsgIndex];
+                if (msg)
+                    onReply(msg.from_name);
+            }
+            else {
+                handleTabSwitch("received");
+            }
+        }
+        if (input === "m" && viewTab === "received") {
+            handleMarkRead();
         }
         if (input === "s" && viewTab !== "sent") {
             handleTabSwitch("sent");
         }
+        if (input === "a" && viewTab === "received") {
+            handleMarkAllRead();
+        }
     });
     const renderMessages = () => {
-        const lines = [];
-        const maxNameLen = Math.max(...messages.map((m) => m.from_name.length), humanName.length);
-        for (const msg of messages) {
+        const viewHeight = contentHeight - 8;
+        if (messages.length === 0) {
+            return (_jsx(Box, { flexDirection: "column", height: viewHeight, children: _jsx(Text, { dimColor: true, children: "No messages." }) }));
+        }
+        const allLines = [];
+        const msgStartLine = [];
+        for (let mi = 0; mi < messages.length; mi++) {
+            const msg = messages[mi];
+            const isSelected = mi === selectedMsgIndex;
             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: "" });
+            const accentColor = isSelected ? "cyan" : "gray";
+            msgStartLine.push(allLines.length);
+            allLines.push({ text: isSelected ? "▶ ──────────────────────────" : "  ──────────────────────────", color: accentColor, bold: isSelected, msgIndex: mi });
+            allLines.push({
+                text: `  ${msg.from_name} → ${msg.to_name}`,
+                color: isSelected ? "cyan" : undefined,
+                bold: isSelected,
+                msgIndex: mi,
+            });
+            allLines.push({ text: `  ${timestamp}`, color: "gray", msgIndex: mi });
+            if (!msg.read) {
+                allLines.push({ text: "  [unread]", color: "yellow", bold: true, msgIndex: mi });
+            }
+            allLines.push({ text: "", msgIndex: mi });
             for (const line of msg.body.split("\n")) {
-                lines.push({ text: `  ${line}` });
+                allLines.push({ text: `  ${line}`, msgIndex: mi });
             }
-            lines.push({ text: "" });
+            allLines.push({ text: "", msgIndex: mi });
         }
-        const viewHeight = contentHeight - 8;
-        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.length === 0 ? (_jsx(Text, { dimColor: true, children: "No messages." })) : (visible.map((line, i) => (_jsx(Text, { color: line.color, children: line.text }, i)))) }));
+        // Auto-scroll: keep selected message's first line in view
+        const selStart = msgStartLine[selectedMsgIndex] ?? 0;
+        const maxOffset = Math.max(0, allLines.length - viewHeight);
+        // Prefer showing the selected message near the top, but clamp to bounds
+        const rawOffset = Math.max(0, selStart - 1);
+        const scrollOffset = Math.min(rawOffset, maxOffset);
+        const visible = allLines.slice(scrollOffset, scrollOffset + viewHeight);
+        return (_jsx(Box, { flexDirection: "column", height: viewHeight, overflow: "hidden", children: visible.map((line, i) => (_jsx(Text, { color: line.color, bold: line.bold, children: line.text }, i))) }));
     };
-    return (_jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsxs(Box, { gap: 2, marginBottom: 1, children: [_jsx(Text, { bold: true, children: "My Mail" }), _jsx(Text, { color: "cyan", children: humanName }), _jsxs(Text, { dimColor: true, children: ["(", messages.length, " ", viewTab, ")"] })] }), _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()] }));
+    const unreadCount = messages.filter((m) => !m.read).length;
+    return (_jsxs(Box, { flexDirection: "column", gap: 0, children: [_jsxs(Box, { gap: 2, marginBottom: 1, children: [_jsx(Text, { bold: true, children: "My Mail" }), _jsx(Text, { color: "cyan", children: humanName }), _jsxs(Text, { dimColor: true, children: ["(", messages.length, " ", viewTab] }), viewTab === "received" && unreadCount > 0 && (_jsxs(Text, { color: "yellow", bold: true, children: ["\u00B7 ", unreadCount, " unread"] })), _jsx(Text, { dimColor: true, children: ")" }), marking && _jsx(Spinner, { label: "saving..." })] }), _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 (s)" }))] }), error ? (_jsx(Text, { color: "red", children: error })) : (renderMessages())] }));
 }

package/dist/manage/components/ReadMail.js

@@ -74,13 +74,13 @@ export function ReadMail({ 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: "Read Mail" }), _jsx(Text, { dimColor: true, children: "Select a session:" }), _jsx(Select, { options: sessions.map((s) => ({ label: s.name, value: s.name })), onChange: loadMessages })] }));
+        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: "Read Mail" }), _jsxs(Text, { color: "red", children: ["Error: ", 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) {
@@ -106,5 +106,5 @@ export function ReadMail({ serverUrl, password, onBack, contentHeight }) {
         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: "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()] }));
+    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

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