Danger zone
diff --git a/apps/desktop/src/components/Sidebar.test.tsx b/apps/desktop/src/components/Sidebar.test.tsx
index e849432..4cd11f8 100644
--- a/apps/desktop/src/components/Sidebar.test.tsx
+++ b/apps/desktop/src/components/Sidebar.test.tsx
@@ -282,6 +282,8 @@ describe("Sidebar", () => {
it("shows no control center count when nothing waits", () => {
renderSidebar();
expect(document.querySelector(".control-row-count")).toBeNull();
- expect(screen.getByTitle("Decisions waiting on you")).toBeInTheDocument();
+ expect(
+ screen.getByTitle("Decisions and permission prompts waiting on you"),
+ ).toBeInTheDocument();
});
});
diff --git a/apps/desktop/src/components/Sidebar.tsx b/apps/desktop/src/components/Sidebar.tsx
index 220e30a..9b914cd 100644
--- a/apps/desktop/src/components/Sidebar.tsx
+++ b/apps/desktop/src/components/Sidebar.tsx
@@ -111,6 +111,7 @@ export default function Sidebar(props: SidebarProps): ReactElement {
onDeleteBot={props.onDeleteBot}
onDeleteProject={props.onDeleteProject}
onTogglePin={onTogglePin}
+ showConversations={props.showConversations}
/>
))}
{projects.length === 0 ? (
diff --git a/apps/desktop/src/components/WorkersPanel.test.tsx b/apps/desktop/src/components/WorkersPanel.test.tsx
new file mode 100644
index 0000000..08a9071
--- /dev/null
+++ b/apps/desktop/src/components/WorkersPanel.test.tsx
@@ -0,0 +1,100 @@
+import { act, render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import type { WorkerView } from "../protocol/workers";
+import { FakeDaemon } from "../test/fakeDaemon";
+import WorkersPanel, { workerSections } from "./WorkersPanel";
+
+function worker(over: Partial
= {}): WorkerView {
+ return {
+ id: "w1",
+ project_id: "p1",
+ name: "ch-1",
+ state: "running",
+ machine: "here",
+ parent_bot_id: "b1",
+ parent_name: "book",
+ brief: "Write chapter one.",
+ created_at: "2025-01-15T09:00:00Z",
+ started_at: "2025-01-15T09:00:05Z",
+ ...over,
+ };
+}
+
+const sample: readonly WorkerView[] = [
+ worker(),
+ worker({ id: "w2", name: "ch-2", machine: "win-pc" }),
+ worker({ id: "w3", name: "ch-3", state: "queued", queue_position: 1, started_at: null }),
+ worker({ id: "w4", name: "ch-0", state: "done", finished_at: "2025-01-15T08:00:00Z" }),
+];
+
+function daemon(workers: readonly WorkerView[] = sample): FakeDaemon {
+ return new FakeDaemon().onRequest("list_workers", () => ({
+ type: "workers",
+ req_id: "1",
+ project_id: "p1",
+ workers,
+ running_here: 1,
+ max_workers_here: 4,
+ }));
+}
+
+describe("WorkersPanel", () => {
+ it("shows what runs, what is queued and what finished", async () => {
+ render((null);
+ const [error, setError] = useState(null);
+
+ const load = useCallback(async (): Promise => {
+ try {
+ const reply = await client.request(
+ { type: "list_workers", project_id: projectId },
+ "workers",
+ );
+ setListing({
+ workers: reply.workers,
+ runningHere: reply.running_here,
+ maxHere: reply.max_workers_here,
+ });
+ setError(null);
+ } catch (failure) {
+ setError(errText(failure));
+ }
+ }, [client, projectId]);
+
+ useLoadOnConnect(connected, load);
+
+ useEffect(
+ () =>
+ client.on("workers_updated", (push) => {
+ if (push.project_id === projectId) {
+ void load();
+ }
+ }),
+ [client, load, projectId],
+ );
+
+ const cancel = async (worker: WorkerView): Promise => {
+ try {
+ await client.request({ type: "cancel_worker", worker_id: worker.id }, "worker");
+ await load();
+ } catch (failure) {
+ setError(errText(failure));
+ }
+ };
+
+ const { running, queued, finished } = workerSections(listing?.workers ?? []);
+ const row = (worker: WorkerView): ReactElement => (
+ void cancel(worker)}
+ />
+ );
+ return (
+
+
+ Workers
+ {listing === null ? null : (
+
+ {" "}
+ {listing.runningHere} of {listing.maxHere} slots in use here
+
+ )}
+
+ {error === null ? null :
{error}
}
+ {listing !== null && listing.workers.length === 0 ? (
+
+ No workers yet. Bots spawn temporary workers for pieces of a larger job; they queue here
+ when every slot is busy.
+
+ ) : null}
+
+
+
+
+
+ {title} {workers.length}
+
+
+
+ );
+}
+
+/** Where a worker stands, in a few words. */
+function standing(worker: WorkerView): string {
+ if (worker.state === "queued") {
+ return worker.queue_position === undefined ? "queued" : `#${worker.queue_position} in queue`;
+ }
+ if (worker.state === "running") {
+ return worker.machine === "here" || worker.machine == null
+ ? "running"
+ : `running on ${worker.machine}`;
+ }
+ return worker.state;
+}
+
+function WorkerRow({
+ worker,
+ canCancel,
+ onCancel,
+}: {
+ readonly worker: WorkerView;
+ readonly canCancel: boolean;
+ readonly onCancel: () => void;
+}): ReactElement {
+ const active = worker.state === "queued" || worker.state === "running";
+ const when = worker.finished_at ?? worker.started_at ?? worker.created_at;
+ return (
+
+
+ {worker.name}
+ {standing(worker)}
+ {worker.parent_name == null ? null : (
+ for {worker.parent_name}
+ )}
+ {fmtShortTime(when)}
+ {active ? (
+
+ Cancel
+
+ ) : null}
+
+
+ {worker.brief}
+
+ {worker.note === undefined || worker.note.length === 0 ? null : (
+ {worker.note}
+ )}
+
+ );
+}
diff --git a/apps/desktop/src/components/bot/BotChromeSwitch.test.tsx b/apps/desktop/src/components/bot/BotChromeSwitch.test.tsx
new file mode 100644
index 0000000..622ee73
--- /dev/null
+++ b/apps/desktop/src/components/bot/BotChromeSwitch.test.tsx
@@ -0,0 +1,88 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import type { Bot, NotifyLevel } from "../../protocol/entities";
+import { agentsDaemon } from "../../test/agentFixtures";
+import * as fx from "../../test/fixtures";
+import BotChromeSwitch from "./BotChromeSwitch";
+
+describe("BotChromeSwitch", () => {
+ it("lets the owner allow a bot their Chrome, which restarts it", async () => {
+ const client = agentsDaemon().onRequest("set_bot_user_chrome", () => ({
+ type: "bot",
+ req_id: "1",
+ bot: fx.bot({ user_chrome: true }),
+ }));
+ const onBotUpdated = vi.fn<(bot: Bot) => void>();
+ const onToast = vi.fn<(level: NotifyLevel, title: string, body: string) => void>();
+ render(
+ void>()}
+ onToast={onToast}
+ />,
+ );
+ await userEvent.click(screen.getByRole("checkbox", { name: /your Chrome/ }));
+ expect(onToast).toHaveBeenCalledWith(
+ "error",
+ "Could not change Chrome access",
+ "bot not found",
+ );
+ });
+
+ it("is absent for a linked bot and on daemons without bot browsers", () => {
+ const old = agentsDaemon();
+ old.capabilities = ["chat"];
+ const { container } = render(
+ <>
+ void>()}
+ onToast={vi.fn<(level: NotifyLevel, title: string, body: string) => void>()}
+ />
+ void>()}
+ onToast={vi.fn<(level: NotifyLevel, title: string, body: string) => void>()}
+ />
+ ,
+ );
+ expect(container).toBeEmptyDOMElement();
+ });
+});
diff --git a/apps/desktop/src/components/bot/BotChromeSwitch.tsx b/apps/desktop/src/components/bot/BotChromeSwitch.tsx
new file mode 100644
index 0000000..3b4f984
--- /dev/null
+++ b/apps/desktop/src/components/bot/BotChromeSwitch.tsx
@@ -0,0 +1,75 @@
+import { useState } from "react";
+import type { ReactElement } from "react";
+import type { DaemonApi } from "../../protocol/api";
+import type { Bot, NotifyLevel } from "../../protocol/entities";
+import { errText } from "../../util";
+
+interface BotChromeSwitchProps {
+ readonly client: DaemonApi;
+ readonly bot: Bot;
+ readonly connected: boolean;
+ readonly canControl: boolean;
+ readonly onBotUpdated: (bot: Bot) => void;
+ readonly onToast: (level: NotifyLevel, title: string, body: string) => void;
+}
+
+/**
+ * Whether the bot may also drive the owner's own Chrome. Off by default:
+ * every bot has a browser of its own, and this is for the task that needs
+ * the owner's logged-in sessions. Changing it restarts the bot's session.
+ */
+export default function BotChromeSwitch({
+ client,
+ bot,
+ connected,
+ canControl,
+ onBotUpdated,
+ onToast,
+}: BotChromeSwitchProps): ReactElement | null {
+ const [saving, setSaving] = useState(false);
+ if (!client.capabilities.includes("bot_browser") || bot.peer != null) {
+ return null;
+ }
+ const enabled = bot.user_chrome === true;
+ const save = async (next: boolean): Promise => {
+ setSaving(true);
+ try {
+ const reply = await client.request(
+ { type: "set_bot_user_chrome", bot_id: bot.id, enabled: next },
+ "bot",
+ );
+ onBotUpdated(reply.bot);
+ onToast(
+ "info",
+ next ? "Chrome allowed" : "Chrome off",
+ `${reply.bot.name} is restarting ${next ? "with" : "without"} access to your Chrome.`,
+ );
+ } catch (error) {
+ onToast("error", "Could not change Chrome access", errText(error));
+ } finally {
+ setSaving(false);
+ }
+ };
+ return (
+
+
+
+ Can use your Chrome
+
+
+ {`${bot.name} always has a browser of its own. Allow this only for tasks that need your logged-in sessions; its tabs then open in your Chrome. Restarts the bot.`}
+
+
+
+
+
- {/* Bots are always-on, so there is no lifecycle control here. The
+ {/* Bots are always-on, so there is no start or stop here; Restart
+ and Clear chat (in `actions`) bring a running bot back. The
terminal is the user's whenever they hold `control`; only
read-only connections need a badge. */}
{canControl ? null :
Read-only }
+ {props.actions}
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}
+ {tabs.includes("browser") ? (
+ // Mounted while hidden, so the live screen and the activity log
+ // are there the moment the tab is opened.
+
+
+ ) : null}
+ {active === "routines" ? (
+
+
+ ) : null}
+
void>()}
+ />
+ void>()}
+ />
+ ,
+ );
+ expect(container).toBeEmptyDOMElement();
+ });
+});
diff --git a/apps/desktop/src/components/bot/BotSessionActions.tsx b/apps/desktop/src/components/bot/BotSessionActions.tsx
new file mode 100644
index 0000000..048a908
--- /dev/null
+++ b/apps/desktop/src/components/bot/BotSessionActions.tsx
@@ -0,0 +1,120 @@
+import { useState } from "react";
+import type { ReactElement } from "react";
+import type { DaemonApi } from "../../protocol/api";
+import type { Bot, NotifyLevel } from "../../protocol/entities";
+import { errText } from "../../util";
+import ConfirmDialog from "../overlay/ConfirmDialog";
+
+interface BotSessionActionsProps {
+ readonly client: DaemonApi;
+ readonly bot: Bot;
+ readonly connected: boolean;
+ readonly canControl: boolean;
+ readonly onToast: (level: NotifyLevel, title: string, body: string) => void;
+}
+
+type Action = "restart" | "clear";
+
+interface Copy {
+ readonly request: "restart_bot" | "clear_bot_session";
+ readonly title: (name: string) => string;
+ readonly body: (name: string) => string;
+ readonly confirm: string;
+ readonly done: (name: string) => string;
+}
+
+const COPY: Readonly> = {
+ restart: {
+ request: "restart_bot",
+ title: (name) => `Restart ${name}?`,
+ body: (name) =>
+ `${name}'s session restarts and picks its conversation back up. If it was in the middle of something, it is told what it was doing and which tasks are open, so it carries on. Its files, memory and tasks are kept.`,
+ confirm: "Restart",
+ done: (name) => `${name} is restarting and will pick up where it left off.`,
+ },
+ clear: {
+ request: "clear_bot_session",
+ title: (name) => `Clear ${name}'s conversation?`,
+ body: (name) =>
+ `${name} restarts with a fresh conversation, without this one's history, which leaves the chat. Its files, its memory (FACTS.md) and its tasks are kept, and it is told what it was working on so it can carry on.`,
+ confirm: "Clear conversation",
+ done: (name) => `${name} is starting a fresh conversation and will carry on its work.`,
+ },
+};
+
+/**
+ * Restart the bot's session, or clear its conversation. Either way it is told
+ * what it left unfinished, so no work is lost. Also available to the phone,
+ * through the same requests.
+ */
+export default function BotSessionActions({
+ client,
+ bot,
+ connected,
+ canControl,
+ onToast,
+}: BotSessionActionsProps): ReactElement | null {
+ const [confirming, setConfirming] = useState(null);
+ const [busy, setBusy] = useState(false);
+ if (!canControl || !client.capabilities.includes("restart_bot")) {
+ return null;
+ }
+ const run = async (action: Action): Promise => {
+ const copy = COPY[action];
+ setBusy(true);
+ try {
+ await client.request({ type: copy.request, bot_id: bot.id }, "ok");
+ onToast(
+ "info",
+ action === "restart" ? "Restarting" : "Conversation cleared",
+ copy.done(bot.name),
+ );
+ } catch (error) {
+ onToast("error", action === "restart" ? "Restart failed" : "Clear failed", errText(error));
+ } finally {
+ setBusy(false);
+ }
+ };
+ const open = confirming === null ? null : COPY[confirming];
+ return (
+ <>
+ {
+ setConfirming("restart");
+ }}
+ >
+ Restart
+
+ {
+ setConfirming("clear");
+ }}
+ >
+ Clear chat
+
+ {open === null || confirming === null ? null : (
+ {
+ const action = confirming;
+ setConfirming(null);
+ void run(action);
+ }}
+ onCancel={() => {
+ setConfirming(null);
+ }}
+ />
+ )}
+
+ );
+}
diff --git a/apps/desktop/src/components/bot/BotSidePanel.tsx b/apps/desktop/src/components/bot/BotSidePanel.tsx
new file mode 100644
index 0000000..931cb65
--- /dev/null
+++ b/apps/desktop/src/components/bot/BotSidePanel.tsx
@@ -0,0 +1,88 @@
+import type { ReactElement } from "react";
+import type { AddToast } from "../../app/useToasts";
+import type { DaemonApi } from "../../protocol/api";
+import type { Bot } from "../../protocol/entities";
+import CommandsPanel from "../commands/CommandsPanel";
+import FilesPanel from "../files/FilesPanel";
+import InfoPanel from "../InfoPanel";
+import MemoryPanel from "../memory/MemoryPanel";
+import TasksPanel from "../tasks/TasksPanel";
+
+export type SideTab = "info" | "tasks" | "files" | "commands" | "memory";
+
+const SIDE_TABS: readonly SideTab[] = ["info", "tasks", "files", "commands", "memory"];
+
+const SIDE_LABEL: Readonly> = {
+ info: "Info",
+ tasks: "Tasks",
+ files: "Files",
+ commands: "Commands",
+ memory: "Memory",
+};
+
+/** The side tabs this daemon serves. */
+function sideTabs(capabilities: readonly string[]): readonly SideTab[] {
+ return SIDE_TABS.filter((tab) => tab !== "commands" || capabilities.includes("bot_commands"));
+}
+
+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 (
+ <>
+
+ {sideTabs(client.capabilities).map((name) => (
+ {
+ onSide(name);
+ }}
+ >
+ {SIDE_LABEL[name]}
+
+ ))}
+
+ {side === "info" ? (
+ ("terminal");
- return > = {
+ chat: "Chat",
terminal: "Terminal",
+ browser: "Browser",
routines: "Routines",
};
+/** What the daemon serves, which decides the tabs a bot offers. */
+export interface TabSupport {
+ readonly chat: boolean;
+ /** Each bot's own browser, watched live. */
+ readonly browser?: boolean;
+ /** A linked bot's terminal, relayed from its machine. */
+ readonly peerTerminal?: boolean;
+ /** A linked bot's browser, relayed from its machine. */
+ readonly peerBrowser?: boolean;
+}
+
+/**
+ * The tabs a bot offers. A linked bot has its chat, and its terminal and
+ * browser when the daemon relays them from its machine.
+ */
+export function botTabs(support: TabSupport, linked: boolean): readonly BotTab[] {
+ const { chat, browser = false, peerTerminal = false, peerBrowser = false } = support;
+ if (linked) {
+ const tabs: BotTab[] = ["chat"];
+ if (peerTerminal) {
+ tabs.push("terminal");
+ }
+ if (peerBrowser) {
+ tabs.push("browser");
+ }
+ return tabs;
+ }
+ const tabs: BotTab[] = chat ? ["chat", "terminal"] : ["terminal"];
+ if (browser) {
+ tabs.push("browser");
+ }
+ tabs.push("routines");
+ return tabs;
+}
+
interface BotTabsProps {
+ readonly tabs: readonly BotTab[];
readonly active: BotTab;
readonly onSelect: (tab: BotTab) => void;
+ /** The bot's browser is open: its tab shows a live dot. */
+ readonly browserLive?: boolean;
}
-export default function BotTabs({ active, onSelect }: BotTabsProps): ReactElement {
+export default function BotTabs({
+ tabs,
+ active,
+ onSelect,
+ browserLive = false,
+}: BotTabsProps): ReactElement {
return (
- {BOT_TABS.map((tab) => (
+ {tabs.map((tab, index) => (
{
onSelect(tab);
}}
>
{TAB_LABEL[tab]}
+ {tab === "browser" && browserLive ? (
+
))}
diff --git a/apps/desktop/src/components/bot/useBotKeys.ts b/apps/desktop/src/components/bot/useBotKeys.ts
new file mode 100644
index 0000000..41760ec
--- /dev/null
+++ b/apps/desktop/src/components/bot/useBotKeys.ts
@@ -0,0 +1,34 @@
+import { useEffect } from "react";
+import type { BotTab } from "./BotTabs";
+
+/**
+ * ⌘1…⌘4 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/browser/BrowserActivityList.tsx b/apps/desktop/src/components/browser/BrowserActivityList.tsx
new file mode 100644
index 0000000..7a96c52
--- /dev/null
+++ b/apps/desktop/src/components/browser/BrowserActivityList.tsx
@@ -0,0 +1,89 @@
+import type { ReactElement } from "react";
+import type { BrowserAction } from "../../protocol/agents";
+import { fmtTimestamp } from "../../util";
+import { triggerView } from "../chat/chatModel";
+
+/** Consecutive actions of one turn, under what started it. */
+interface TurnGroup {
+ readonly turnId: string;
+ readonly at: string;
+ readonly why: string;
+ readonly ask: string;
+ readonly actions: readonly BrowserAction[];
+}
+
+/** Groups newest-first actions by turn, keeping that order. */
+export function groupByTurn(actions: readonly BrowserAction[]): readonly TurnGroup[] {
+ const groups: TurnGroup[] = [];
+ for (const action of actions) {
+ const last = groups.at(-1);
+ if (last !== undefined && last.turnId === action.turn_id) {
+ groups[groups.length - 1] = { ...last, actions: [...last.actions, action] };
+ continue;
+ }
+ const view = triggerView(action.trigger);
+ groups.push({
+ turnId: action.turn_id,
+ at: action.at,
+ why: view.label,
+ ask: view.text,
+ actions: [action],
+ });
+ }
+ return groups;
+}
+
+/**
+ * Every browser action the bot took, under the request that led to it: the
+ * answer to "why is it browsing, and for whom".
+ */
+export default function BrowserActivityList({
+ activity,
+ error,
+}: {
+ readonly activity: readonly BrowserAction[];
+ readonly error: string | null;
+}): ReactElement {
+ const groups = groupByTurn(activity);
+ return (
+
+ Activity
+ {error === null ? null : {error}
}
+ {groups.length === 0 ? (
+ No browsing yet.
+ ) : null}
+
+ {groups.map((group) => (
+
+
+ {group.why}
+ {fmtTimestamp(group.at)}
+
+ {group.ask === "" ? null : (
+
+ {group.ask}
+
+ )}
+
+ {group.actions.map((action) => (
+
+ {action.title}
+ {action.browser === "owners_chrome" ? (
+
+ your Chrome
+
+ ) : null}
+ {action.subtitle == null ? null : (
+
+ {action.subtitle}
+
+ )}
+
+ ))}
+
+
+ ))}
+
+
+ );
+}
diff --git a/apps/desktop/src/components/browser/BrowserPane.stories.tsx b/apps/desktop/src/components/browser/BrowserPane.stories.tsx
new file mode 100644
index 0000000..2511b30
--- /dev/null
+++ b/apps/desktop/src/components/browser/BrowserPane.stories.tsx
@@ -0,0 +1,40 @@
+import type { Story } from "@ladle/react";
+import frame from "../../test/browserFrame.jpg?inline";
+import { browserActivity, browserTabs } from "../../test/agentFixtures";
+import BrowserActivityList from "./BrowserActivityList";
+import { BrowserScreen, TabStrip } from "./BrowserPane";
+
+const FRAME = {
+ type: "browser_frame",
+ bot_id: "b1",
+ tab_id: "tab-1",
+ data: frame.slice(frame.indexOf(",") + 1),
+ width: 640,
+ height: 400,
+} as const;
+
+export const Live: Story = () => (
+
+
+
+ lead uses a browser of its own; your Chrome is off limits.
+
+
undefined} />
+
+
+
+ {tabs.tabs.map((tab) => (
+ {
+ onPick(tab.id);
+ }}
+ >
+ {tab.title === "" ? tab.url : tab.title}
+
+ ))}
+ {
+ onPick(null);
+ }}
+ >
+ Follow bot
+
+
+ );
+}
+
+/** The tab on show, as its latest screen. */
+export function BrowserScreen({
+ tabs,
+ frame,
+ name,
+}: {
+ readonly tabs: BrowserTabsPush | null;
+ readonly frame: BrowserFramePush | null;
+ readonly name: string;
+}): ReactElement {
+ if (tabs === null) {
+ return Looking for the browser…
;
+ }
+ if (!tabs.open) {
+ return (
+
+ {tabs.reason ?? `${name}'s browser is closed. It opens when ${name} first browses.`}
+
+ );
+ }
+ const url = tabs.tabs.find((tab) => tab.id === tabs.active)?.url ?? "";
+ return (
+
+
+ {url}
+
+ {frame !== null && frame.tab_id === tabs.active ? (
+
+ ) : (
+
Waiting for the page…
+ )}
+
+
+
{chromeNote(bot)}
+ {watch.tabs !== null && watch.tabs.open ? (
+
+ ) : null}
+ {watch.error === null ? null :
{watch.error}
}
+
+
+
+
([]);
+ const [error, setError] = useState(null);
+
+ const load = useCallback(async (): Promise => {
+ try {
+ const reply = await client.request(
+ { type: "list_browser_activity", bot_id: botId },
+ "browser_activity",
+ );
+ setItems(reply.activity);
+ setError(null);
+ } catch (failure) {
+ setError(errText(failure));
+ }
+ }, [client, botId]);
+
+ useLoadOnConnect(connected, load);
+
+ useOnBotTurns(client, botId, load, REFRESH_DELAY_MS);
+
+ return { items, error };
+}
diff --git a/apps/desktop/src/components/browser/useBrowserWatch.ts b/apps/desktop/src/components/browser/useBrowserWatch.ts
new file mode 100644
index 0000000..c3bc0fa
--- /dev/null
+++ b/apps/desktop/src/components/browser/useBrowserWatch.ts
@@ -0,0 +1,73 @@
+import { useCallback, useEffect, useState } from "react";
+import type { BrowserFramePush, BrowserTabsPush } from "../../protocol/agents";
+import type { DaemonApi } from "../../protocol/api";
+import { errText } from "../../util";
+
+export interface BrowserWatch {
+ /** The bot's tabs, or null until the daemon has said. */
+ readonly tabs: BrowserTabsPush | null;
+ /** The newest screen of the tab on show. */
+ readonly frame: BrowserFramePush | null;
+ readonly error: string | null;
+ /** Shows another tab, or follows the bot again with null. */
+ readonly pick: (tabId: string | null) => void;
+}
+
+/**
+ * Streams a bot's browser while `active`: the daemon pushes its tabs as they
+ * change and each new screen of the tab on show. The bot view holds it for as
+ * long as the bot is selected, so the browser is live whichever tab is open.
+ * Mount it keyed by bot: a different bot's browser starts from nothing.
+ */
+export function useBrowserWatch(
+ client: DaemonApi,
+ botId: string,
+ active: boolean,
+ connected: boolean,
+): BrowserWatch {
+ const [tabs, setTabs] = useState(null);
+ const [frame, setFrame] = useState(null);
+ const [error, setError] = useState(null);
+ const [picked, setPicked] = useState(null);
+
+ useEffect(() => {
+ if (!active || !connected) {
+ return undefined;
+ }
+ const offTabs = client.on("browser_tabs", (push) => {
+ if (push.bot_id === botId) {
+ setTabs(push);
+ }
+ });
+ const offFrame = client.on("browser_frame", (push) => {
+ if (push.bot_id === botId) {
+ setFrame(push);
+ }
+ });
+ const watch = async (): Promise => {
+ try {
+ await client.request(
+ picked === null
+ ? { type: "watch_browser", bot_id: botId }
+ : { type: "watch_browser", bot_id: botId, tab_id: picked },
+ "ok",
+ );
+ setError(null);
+ } catch (failure) {
+ setError(errText(failure));
+ }
+ };
+ void watch();
+ return () => {
+ offTabs();
+ offFrame();
+ client.request({ type: "unwatch_browser" }, "ok").catch(() => undefined);
+ };
+ }, [client, botId, active, connected, picked]);
+
+ const pick = useCallback((tabId: string | null): void => {
+ setPicked(tabId);
+ }, []);
+
+ return { tabs, frame, error, pick };
+}
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}
+