-
- {/* Keep the terminal mounted across tab switches to preserve the buffer. */}
-
-
- {tab === "routines" ? (
-
-
- ) : null}
-
{infoPanel.collapsed ? null : (
- {
void revealBotWorkspace(bot.workspace_path);
}}
@@ -243,6 +244,16 @@ export default function InfoPanel({
+
+
{
+ daemon.select({ kind: "control", decisionId });
+ }}
/>
);
}
diff --git a/apps/desktop/src/components/Sidebar.test.tsx b/apps/desktop/src/components/Sidebar.test.tsx
index 8a5e6cb..e849432 100644
--- a/apps/desktop/src/components/Sidebar.test.tsx
+++ b/apps/desktop/src/components/Sidebar.test.tsx
@@ -91,7 +91,7 @@ describe("Sidebar", () => {
it("offers the same menu from the label's right-click and the ⋯ button", async () => {
const user = userEvent.setup();
renderSidebar();
- const entries = ["New Bot", "Project settings", "Reveal in Finder", "Delete project"];
+ const entries = ["New Bot", "Project settings", "Open folder", "Delete project"];
await user.pointer({ keys: "[MouseRight]", target: screen.getByText("Acme") });
expect(screen.getAllByRole("menuitem").map((item) => item.textContent)).toEqual(entries);
diff --git a/apps/desktop/src/components/bot/BotPanes.tsx b/apps/desktop/src/components/bot/BotPanes.tsx
new file mode 100644
index 0000000..3e56b4c
--- /dev/null
+++ b/apps/desktop/src/components/bot/BotPanes.tsx
@@ -0,0 +1,115 @@
+import type { ReactElement } from "react";
+import { isStopped } from "../../app/bots";
+import type { AddToast } from "../../app/useToasts";
+import type { DaemonApi } from "../../protocol/api";
+import type { Bot, Routine } from "../../protocol/entities";
+import ChatPane from "../chat/ChatPane";
+import LinkedChat from "../chat/LinkedChat";
+import PermissionCards from "../permissions/PermissionCards";
+import { usePermissions } from "../permissions/usePermissions";
+import RoutinesPanel from "../RoutinesPanel";
+import TerminalPane from "../TerminalPane";
+import type { BotTab } from "./BotTabs";
+
+interface BotPanesProps {
+ readonly client: DaemonApi;
+ readonly bot: Bot;
+ readonly bots: readonly Bot[];
+ readonly tabs: readonly BotTab[];
+ readonly active: BotTab;
+ readonly connected: boolean;
+ readonly canControl: boolean;
+ readonly onOpenFile: (path: string) => void;
+ readonly onOpenDecision?: (decisionId: string) => void;
+ readonly onRoutinesChanged: (botId: string, routines: readonly Routine[]) => void;
+ readonly onToast: AddToast;
+}
+
+/** Why the owner cannot write to a bot right now, or null when they can. */
+function writeBlockedReason(connected: boolean, canControl: boolean, bot: Bot): string | null {
+ if (!connected) {
+ return "Not connected to the daemon";
+ }
+ if (!canControl) {
+ return "Read-only connection";
+ }
+ return isStopped(bot) ? `${bot.name} is stopped` : null;
+}
+
+/** Where a linked bot runs, said above its chat. */
+function machineNote(bot: Bot): string {
+ const machine = bot.peer?.name ?? "another machine";
+ const offline =
+ bot.peer?.online === false ? " It is offline, so its chat loads once it is back." : "";
+ return `${bot.name} runs on ${machine}; its chat is read from there.${offline}`;
+}
+
+function paneClass(shown: boolean): string {
+ return shown ? "tab-pane" : "tab-pane tab-pane-hidden";
+}
+
+/**
+ * The bot's tab bodies. Chat and terminal stay mounted when hidden, so
+ * switching back keeps the loaded conversation and the terminal buffer.
+ */
+export default function BotPanes(props: BotPanesProps): ReactElement {
+ const { client, bot, tabs, active, connected, canControl, onToast } = props;
+ const writeBlocked = writeBlockedReason(connected, canControl, bot);
+ const linked = bot.peer != null;
+ const permissions = usePermissions(client, bot.id, connected && !linked);
+ return (
+ <>
+ {/* Above every tab: a prompt waits whether the owner reads the chat or the terminal. */}
+
+ {tabs.includes("chat") ? (
+
+ {linked && !client.capabilities.includes("peer_chat") ? (
+
+ ) : null}
+ {tabs.includes("terminal") ? (
+
+ {/* The terminal belongs to the user: any `control` connection may type while the bot runs. */}
+
+ ) : null}
+ {active === "routines" ? (
+
+
+ ) : null}
+
{
+ const updated = botSpy();
+ render(
+ (current);
+ const [saving, setSaving] = useState(false);
+ if (!client.capabilities.includes("bot_runtime")) {
+ return null;
+ }
+ const save = async (): Promise => {
+ setSaving(true);
+ try {
+ const reply = await client.request(
+ { type: "set_bot_runtime", bot_id: bot.id, runtime },
+ "bot",
+ );
+ onBotUpdated(reply.bot);
+ onToast(
+ "info",
+ "Runtime saved",
+ `${reply.bot.name} is restarting with ${runtime === "codex_cli" ? "Codex CLI" : "Claude Code"}. Startup progress appears in the terminal.`,
+ );
+ } catch (error) {
+ onToast("error", "Runtime update failed", errText(error));
+ } finally {
+ setSaving(false);
+ }
+ };
+ return (
+
+
+ Bot runtime
+
+
{
+ const value = event.target.value;
+ if (value === "claude_code" || value === "codex_cli") {
+ setRuntime(value);
+ }
+ }}
+ >
+ Claude Code
+ Codex CLI
+
+
+ Changing runtime interrupts the current turn. Both use the same workspace and saved facts;
+ each keeps its own conversation history. Install and sign in to the selected CLI first.
+
+
+ {
+ void save();
+ }}
+ >
+ {saving ? "Switching…" : "Change runtime"}
+
+
+
> = {
+ info: "Info",
+ tasks: "Tasks",
+ files: "Files",
+};
+
+interface BotSidePanelProps {
+ readonly client: DaemonApi;
+ readonly bot: Bot;
+ readonly connected: boolean;
+ readonly canControl: boolean;
+ readonly side: SideTab;
+ readonly onSide: (side: SideTab) => void;
+ readonly openFile: string | null;
+ readonly onOpenFile: (path: string | null) => void;
+ readonly onBotUpdated: (bot: Bot) => void;
+ readonly onToast: AddToast;
+}
+
+/** The right-hand panel: the bot's info, or the project's files. */
+export default function BotSidePanel(props: BotSidePanelProps): ReactElement {
+ const { client, bot, connected, side, onSide } = props;
+ return (
+ <>
+
+ {SIDE_TABS.map((name) => (
+ {
+ onSide(name);
+ }}
+ >
+ {SIDE_LABEL[name]}
+
+ ))}
+
+ {side === "info" ? (
+ ("terminal");
- return > = {
+ chat: "Chat",
terminal: "Terminal",
routines: "Routines",
};
+/** The tabs a bot offers: chat needs a daemon that serves it, and a linked bot has only chat. */
+export function botTabs(chat: boolean, linked: boolean): readonly BotTab[] {
+ if (linked) {
+ return ["chat"];
+ }
+ return chat ? ["chat", "terminal", "routines"] : ["terminal", "routines"];
+}
+
interface BotTabsProps {
+ readonly tabs: readonly BotTab[];
readonly active: BotTab;
readonly onSelect: (tab: BotTab) => void;
}
-export default function BotTabs({ active, onSelect }: BotTabsProps): ReactElement {
+export default function BotTabs({ tabs, active, onSelect }: BotTabsProps): ReactElement {
return (
- {BOT_TABS.map((tab) => (
+ {tabs.map((tab, index) => (
{
onSelect(tab);
}}
diff --git a/apps/desktop/src/components/bot/useBotKeys.ts b/apps/desktop/src/components/bot/useBotKeys.ts
new file mode 100644
index 0000000..09b34f0
--- /dev/null
+++ b/apps/desktop/src/components/bot/useBotKeys.ts
@@ -0,0 +1,34 @@
+import { useEffect } from "react";
+import type { BotTab } from "./BotTabs";
+
+/**
+ * ⌘1…⌘3 switch the bot's tabs and ⌘L jumps to the chat composer. Registered
+ * in the capture phase so a focused terminal cannot swallow them.
+ */
+export function useBotKeys(tabs: readonly BotTab[], onSelect: (tab: BotTab) => void): void {
+ useEffect(() => {
+ const onKey = (event: KeyboardEvent): void => {
+ if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) {
+ return;
+ }
+ const index = Number.parseInt(event.key, 10);
+ const tab = Number.isNaN(index) ? undefined : tabs[index - 1];
+ if (tab !== undefined) {
+ event.preventDefault();
+ onSelect(tab);
+ return;
+ }
+ if (event.key.toLowerCase() === "l" && tabs.includes("chat")) {
+ event.preventDefault();
+ onSelect("chat");
+ window.requestAnimationFrame(() => {
+ document.querySelector("[data-chat-composer]")?.focus();
+ });
+ }
+ };
+ window.addEventListener("keydown", onKey, true);
+ return () => {
+ window.removeEventListener("keydown", onKey, true);
+ };
+ }, [tabs, onSelect]);
+}
diff --git a/apps/desktop/src/components/chat/ChatComposer.stories.tsx b/apps/desktop/src/components/chat/ChatComposer.stories.tsx
new file mode 100644
index 0000000..e744c3e
--- /dev/null
+++ b/apps/desktop/src/components/chat/ChatComposer.stories.tsx
@@ -0,0 +1,20 @@
+import type { Story } from "@ladle/react";
+import ChatComposer from "./ChatComposer";
+
+const send = async (): Promise => {};
+
+export const Ready: Story = () => (
+
+
+);
+
+export const ReadOnly: Story = () => (
+
+
+);
diff --git a/apps/desktop/src/components/chat/ChatComposer.test.tsx b/apps/desktop/src/components/chat/ChatComposer.test.tsx
new file mode 100644
index 0000000..ef9d7bf
--- /dev/null
+++ b/apps/desktop/src/components/chat/ChatComposer.test.tsx
@@ -0,0 +1,74 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import ChatComposer from "./ChatComposer";
+import { withAttachments } from "./useAttachments";
+
+describe("ChatComposer", () => {
+ it("attaches files and sends their paths with the message", async () => {
+ const onSend = vi.fn<(text: string) => Promise>().mockResolvedValue(undefined);
+ const onAttach = vi
+ .fn<(file: File) => Promise>()
+ .mockResolvedValue("/p/artifacts/uploads/spec.pdf");
+ render(
+ >()
+ .mockRejectedValue(new Error("too big"));
+ render(
+ Promise>()}
+ onAttach={onAttach}
+ />,
+ );
+ await userEvent.upload(screen.getByLabelText("Files to attach"), new File(["x"], "huge.bin"));
+ expect(await screen.findByText(/failed/)).toBeInTheDocument();
+ await userEvent.click(screen.getByRole("button", { name: "Remove huge.bin" }));
+ expect(screen.queryByText(/huge.bin/)).not.toBeInTheDocument();
+ });
+
+ it("says where a slash command runs", async () => {
+ render(
+ Promise>()}
+ slashHint="Runs in the terminal"
+ />,
+ );
+ await userEvent.type(screen.getByRole("textbox", { name: "Message" }), "/compact");
+ expect(screen.getByText("Runs in the terminal")).toBeInTheDocument();
+ expect(screen.queryByRole("button", { name: "Attach files" })).not.toBeInTheDocument();
+ });
+
+ it("lists attachments after the text, or alone", () => {
+ const done = [{ key: 1, name: "a", path: "/a" }];
+ expect(withAttachments("", done)).toBe("Attached files:\n- /a");
+ expect(withAttachments("hi", [])).toBe("hi");
+ });
+});
diff --git a/apps/desktop/src/components/chat/ChatComposer.tsx b/apps/desktop/src/components/chat/ChatComposer.tsx
new file mode 100644
index 0000000..ad7a10f
--- /dev/null
+++ b/apps/desktop/src/components/chat/ChatComposer.tsx
@@ -0,0 +1,103 @@
+import { useRef, useState } from "react";
+import type { ClipboardEvent, KeyboardEvent, ReactElement } from "react";
+import type { Dictation } from "../../dictation";
+import { AttachButton, AttachmentChips, MicButton } from "./ComposerParts";
+import { useAttachments, withAttachments } from "./useAttachments";
+import { useDictation } from "./useDictation";
+
+interface ChatComposerProps {
+ /** Why the owner cannot write, or null when they can. */
+ readonly disabledReason: string | null;
+ readonly placeholder: string;
+ readonly onSend: (text: string) => Promise;
+ /** Uploads an attached file and returns where bots can read it; absent to turn attaching off. */
+ readonly onAttach?: (file: File) => Promise;
+ /** Shown under a draft that starts with `/`, or null when slash commands are not special. */
+ readonly slashHint?: string | null;
+ /** On-device dictation; the mic button shows only where it is available. */
+ readonly dictation?: Dictation;
+}
+
+const LISTENING = "Listening… press the stop button when you are done.";
+
+/** Enter sends, Shift+Enter adds a line. A failed send keeps the draft. */
+export default function ChatComposer(props: ChatComposerProps): ReactElement {
+ const { disabledReason, onSend, onAttach } = props;
+ const [draft, setDraft] = useState("");
+ const [sending, setSending] = useState(false);
+ const field = useRef(null);
+ const disabled = disabledReason !== null;
+ const attachments = useAttachments(onAttach);
+ const voice = useDictation(props.dictation, draft, setDraft);
+ const empty = draft.trim() === "" && attachments.ready.length === 0;
+ const blocked = disabled || sending || attachments.uploading || empty;
+
+ const send = async (): Promise => {
+ if (blocked) {
+ return;
+ }
+ setSending(true);
+ try {
+ await onSend(withAttachments(draft.trim(), attachments.ready));
+ setDraft("");
+ attachments.clear();
+ } finally {
+ setSending(false);
+ field.current?.focus();
+ }
+ };
+
+ const onKeyDown = (event: KeyboardEvent): void => {
+ if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+ event.preventDefault();
+ void send();
+ }
+ };
+
+ const onPaste = (event: ClipboardEvent): void => {
+ const files = [...event.clipboardData.files];
+ if (files.length > 0 && onAttach !== undefined) {
+ event.preventDefault();
+ attachments.attach(files);
+ }
+ };
+
+ const slash =
+ props.slashHint != null && draft.trimStart().startsWith("/") ? props.slashHint : null;
+ const hint = voice.error ?? (voice.listening ? LISTENING : slash);
+ return (
+
+
+ {hint === null ? null :
{hint}
}
+
+ {onAttach === undefined ? null : (
+
+ )}
+ {voice.available ?
: null}
+