feat(chat): pick each bot's permission mode in its chat

Like Claude Code's mode picker, below the chat: Auto, Manual, Accept
edits and Plan, each described by what the bot does ("Scout decides
what needs your OK"), and Bypass permissions behind a confirmation that
says the bot is then not held to its folder. A bot that asks nothing is
marked in red in the picker and its header.

The daemon stores the mode (migration 0004) and starts the bot with it.
Claude Code reads --permission-mode only at start, so a new mode
restarts the process with --resume once nothing is in progress, and
never cuts a turn short. When an approved plan moves the bot out of plan
mode, the system/init of the next turn says so and the stored mode
follows.

A bot in plan mode asks to go ahead with ExitPlanMode: the chat shows
the whole plan (kept up to 32 KB) with Approve plan and Keep planning,
which sends back what should change.

Spec: 7.4, 10.1, 11.2, 12, 13 (what bypassing means on Windows), 15.1,
15.3 and two rows in section 19 to check with the real Claude Code.

Author: httpsphl

app/src/dev/preview.ts

@@ -86,15 +86,19 @@ function seed(fake: FakeBotloft): void {
     "Checks facts and tone before anything ships",
   );
   const analyst = fake.addBot(research.id, "Analyst", "Crunches the numbers behind each claim");
+  const planner = fake.addBot(research.id, "Planner", "Plans changes before touching the code");
+  void fake.call("bots.setPermissionMode", { botId: planner.id, mode: "plan" });
   fake.setBotState(scout.id, "idle", 3);
   fake.setBotState(writer.id, "busy", 2);
   fake.setBotState(reviewer.id, "needs_approval", 5);
   fake.setBotState(analyst.id, "rate_limited", 1);
+  fake.setBotState(planner.id, "needs_approval", 2);
   seedChats(fake, {
     scout: scout.id,
     writer: writer.id,
     reviewer: reviewer.id,
     analyst: analyst.id,
+    planner: planner.id,
   });
   const ops = fake.addCrew("Ops");
   const deploy = fake.addBot(ops.id, "Deploy", "Ships the site on Fridays");

app/src/dev/seedChats.ts

@@ -1,4 +1,4 @@
-// Dev only: a morning's work between four research bots, for the preview.
+// Dev only: a morning's work between five research bots, for the preview.
 
 import type { FakeBotloft } from "../lib/fake";
 import type { BotId } from "../lib/protocol.gen";
@@ -23,11 +23,22 @@ const SUMMARY = `Done. The summary is in \`shared/summaries/week-39.md\`.
 
 Your chart matches the numbers in the first paper. I asked @writer to turn this into the weekly report.`;
 
+const PLAN = `## Cache the weekly report
+
+The report is rebuilt on every visit, and Monday is when everyone opens it.
+
+1. Build the report once when the week closes and save it in \`shared/cache/\`.
+2. Serve the saved copy; rebuild it only when a source file changes.
+3. Add a test that the saved copy matches a fresh build.
+
+**Not changing:** the report's layout or its sources.`;
+
 interface Crew {
   scout: BotId;
   writer: BotId;
   reviewer: BotId;
   analyst: BotId;
+  planner: BotId;
 }
 
 const MINUTE = 60 * 1000;
@@ -124,5 +135,16 @@ export function seedChats(fake: FakeBotloft, crew: Crew): void {
     text: "The account reached its usage limit. Messages wait until it resets.",
   });
   chat.turn(crew.analyst, "rate_limit");
+
+  at(8);
+  void fake.call("messages.send", {
+    botId: crew.planner,
+    body: "The report pages are slow on Mondays. Plan a fix, but don't change anything yet.",
+  });
+  at(7);
+  chat.finish(chat.tool(crew.planner, "Grep", { summary: "buildReport" }), "3 matches");
+  const plan = JSON.stringify({ plan: PLAN });
+  chat.tool(crew.planner, "ExitPlanMode", { summary: "Cache the weekly report", input: plan });
+  chat.ask(crew.planner, "ExitPlanMode", "Cache the weekly report", plan);
   fake.now = end;
 }

app/src/features/bots/BotHeader.tsx

@@ -8,6 +8,7 @@ import {
   Play,
   RefreshCcw,
   RotateCw,
+  ShieldOff,
 } from "lucide-react";
 import { useState } from "react";
 import { useT } from "../../i18n";
@@ -65,6 +66,15 @@ export function BotHeader({
         </div>
         <div className="mt-0.5 flex items-center gap-3 text-sm">
           <BotStateBadge bot={bot} crewPaused={crew.paused} />
+          {bot.permissionMode === "bypass_permissions" && (
+            <span
+              title={t.chat.mode.badgeHint}
+              className="inline-flex shrink-0 items-center gap-1 rounded-full bg-danger/10 px-2 py-0.5 font-medium text-danger text-xs"
+            >
+              <ShieldOff aria-hidden size={12} />
+              {t.chat.mode.badge}
+            </span>
+          )}
           <span className="truncate text-muted">{bot.role || words.noRole}</span>
         </div>
       </div>

app/src/features/chat/ApprovalCard.tsx

@@ -2,18 +2,18 @@
 // and Deny. Once answered it shrinks to one line.
 
 import { Ban, Check, Hand, TimerOff } from "lucide-react";
-import { useId, useState } from "react";
+import { useId } from "react";
 import { useT } from "../../i18n";
 import type { ApprovalItem, Bot } from "../../lib/protocol.gen";
-import { useApi } from "../../store/context";
 import { Button } from "../../ui/Button";
-import { attempt } from "../../ui/toast";
+import { PLAN_TOOL, PlanCard } from "./PlanCard";
 import { pretty, toolLabel } from "./ToolLines";
+import { useAnswer } from "./useAnswer";
 
 function Answered({ approval }: { approval: ApprovalItem }) {
   const t = useT();
   const label = toolLabel(approval.toolName);
-  const line = "flex min-w-0 items-center gap-2 px-1.5 py-1 text-sm";
+  const line = "flex min-w-0 items-center gap-2 rounded-lg px-1.5 py-1 text-sm";
   switch (approval.status) {
     case "allowed":
       return (
@@ -44,48 +44,47 @@ function Answered({ approval }: { approval: ApprovalItem }) {
 }
 
 export function ApprovalCard({ approval, bot }: { approval: ApprovalItem; bot: Bot }) {
-  const api = useApi();
+  return approval.toolName === PLAN_TOOL ? (
+    <PlanCard approval={approval} bot={bot} />
+  ) : (
+    <ToolApproval approval={approval} bot={bot} />
+  );
+}
+
+function ToolApproval({ approval, bot }: { approval: ApprovalItem; bot: Bot }) {
   const t = useT();
-  const [note, setNote] = useState("");
-  const [busy, setBusy] = useState(false);
+  const { note, setNote, busy, answer } = useAnswer(approval, {
+    allow: t.chat.approval.allowFailed,
+    deny: t.chat.approval.denyFailed,
+  });
   const noteId = useId();
   if (approval.status !== "pending") {
     return <Answered approval={approval} />;
   }
   const label = toolLabel(approval.toolName);
-  const answer = async (allow: boolean) => {
-    setBusy(true);
-    const trimmed = note.trim();
-    await attempt(allow ? t.chat.approval.allowFailed : t.chat.approval.denyFailed, () =>
-      api.call("approvals.answer", {
-        approvalId: approval.approvalId,
-        allow,
-        ...(allow || !trimmed ? {} : { note: trimmed }),
-      }),
-    );
-    setBusy(false);
-  };
 
   return (
     <section
       aria-label={t.chat.approval.asks(bot.name, label)}
-      className="my-1 max-w-2xl rounded-md border border-warn/60 border-l-4 bg-panel px-3.5 py-3"
+      className="my-1 max-w-2xl rounded-2xl border border-warn/40 bg-panel px-4 py-3.5 shadow-sm"
     >
-      <p className="flex items-center gap-2 font-semibold text-sm">
-        <Hand aria-hidden size={15} className="text-warn" />
+      <p className="flex items-center gap-2.5 font-semibold text-sm">
+        <span className="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-warn/12 text-warn">
+          <Hand aria-hidden size={15} />
+        </span>
         {t.chat.approval.wants(bot.name, label)}
       </p>
       {approval.summary && (
-        <p className="mt-1.5 break-words font-mono text-ink-soft text-xs" data-selectable>
+        <p className="mt-2 break-words font-mono text-ink-soft text-xs" data-selectable>
           {approval.summary}
         </p>
       )}
-      <details className="mt-1.5 text-xs">
+      <details className="mt-2 text-xs">
         <summary className="cursor-default text-muted hover:text-ink">
           {t.chat.approval.fullInput}
         </summary>
         <pre
-          className="mt-1 max-h-56 overflow-auto whitespace-pre-wrap break-all rounded-[3px] border border-line bg-sunken px-2.5 py-1.5 font-mono"
+          className="mt-1.5 max-h-56 overflow-auto whitespace-pre-wrap break-all rounded-lg border border-line bg-sunken px-2.5 py-1.5 font-mono"
           data-selectable
         >
           {pretty(approval.input)}
@@ -99,7 +98,7 @@ export function ApprovalCard({ approval, bot }: { approval: ApprovalItem; bot: B
         value={note}
         onChange={(event) => setNote(event.target.value)}
         placeholder={t.chat.approval.notePlaceholder}
-        className="mt-3 h-8 w-full rounded-[3px] border border-line-strong bg-canvas px-2.5 text-sm outline-none placeholder:text-muted focus:border-accent"
+        className="mt-3 h-9 w-full rounded-xl border border-line-strong bg-canvas px-3 text-sm outline-none placeholder:text-muted focus:border-muted"
       />
       <div className="mt-2.5 flex gap-2">
         <Button variant="primary" icon={Check} disabled={busy} onClick={() => answer(true)}>

app/src/features/chat/ChatComposer.tsx

@@ -6,6 +6,7 @@ import {
   type ClipboardEvent,
   type FormEvent,
   type KeyboardEvent,
+  useEffect,
   useId,
   useLayoutEffect,
   useRef,
@@ -17,16 +18,17 @@ import { fileSize } from "../../lib/format";
 import { type Bot, FIELD_LIMITS } from "../../lib/protocol.gen";
 import { useApi } from "../../store/context";
 import { rememberImage } from "./images";
+import { ModePicker } from "./ModePicker";
 import type { Files, PendingFile } from "./useFiles";
 
 const MAX_HEIGHT_PX = 240;
 
 function Chip({ file, onRemove }: { file: PendingFile; onRemove(): void }) {
   const t = useT();
   return (
-    <li className="relative flex h-14 items-center gap-2 rounded-md border border-line bg-canvas pr-7 pl-1.5">
+    <li className="relative flex h-14 items-center gap-2 rounded-xl border border-line bg-canvas pr-7 pl-1.5">
       {file.preview ? (
-        <img src={file.preview} alt="" className="h-11 w-11 rounded-[3px] object-cover" />
+        <img src={file.preview} alt="" className="h-11 w-11 rounded-lg object-cover" />
       ) : (
         <FileIcon aria-hidden size={20} className="mx-1 text-muted" />
       )}
@@ -64,12 +66,21 @@ export function ChatComposer({
   const t = useT();
   const [text, setText] = useState("");
   const [busy, setBusy] = useState(false);
+  /** A new mode that waits for the bot to finish what it is doing. */
+  const [later, setLater] = useState<string | null>(null);
   const field = useRef<HTMLTextAreaElement>(null);
   const picker = useRef<HTMLInputElement>(null);
   const fieldId = useId();
   const tooLong = text.length > FIELD_LIMITS.message;
   const empty = !text.trim() && files.files.length === 0;
 
+  const working = bot.state === "busy" || bot.state === "needs_approval";
+  useEffect(() => {
+    if (!working) {
+      setLater(null);
+    }
+  }, [working]);
+
   // Grows with the text up to a limit, then scrolls.
   useLayoutEffect(() => {
     const element = field.current;
@@ -130,14 +141,18 @@ export function ChatComposer({
   };
 
   return (
-    <form onSubmit={send} className="shrink-0 px-5 pt-2 pb-4">
-      {stopped && <p className="mb-1.5 text-muted text-xs">{t.chat.composer.paused(bot.name)}</p>}
-      <div className="rounded-lg border border-line-strong bg-panel focus-within:border-accent">
+    <form onSubmit={send} className="shrink-0 px-5 pt-2 pb-5">
+      {stopped && (
+        <p className="mb-1.5 px-2 text-muted text-xs">{t.chat.composer.paused(bot.name)}</p>
+      )}
+      {later && (
+        <p role="status" className="mb-1.5 px-2 text-muted text-xs">
+          {later}
+        </p>
+      )}
+      <div className="rounded-2xl border border-line-strong bg-panel shadow-sm transition-colors focus-within:border-muted">
         {files.files.length > 0 && (
-          <ul
-            aria-label={t.chat.composer.filesToSend}
-            className="flex flex-wrap gap-2 px-2.5 pt-2.5"
-          >
+          <ul aria-label={t.chat.composer.filesToSend} className="flex flex-wrap gap-2 px-3 pt-3">
             {files.files.map((file) => (
               <Chip key={file.key} file={file} onRemove={() => files.remove(file.key)} />
             ))}
@@ -155,15 +170,15 @@ export function ChatComposer({
           onKeyDown={onKeyDown}
           onPaste={onPaste}
           placeholder={t.chat.composer.placeholder(bot.name)}
-          className="block max-h-60 w-full resize-none bg-transparent px-3.5 pt-3 pb-1 leading-relaxed outline-none placeholder:text-muted"
+          className="block max-h-60 w-full resize-none bg-transparent px-4 pt-3.5 pb-1.5 leading-relaxed outline-none placeholder:text-muted"
         />
-        <div className="flex items-center gap-2 px-2 pb-2">
+        <div className="flex items-center gap-1 px-2.5 pb-2.5">
           <button
             type="button"
             aria-label={t.chat.composer.attach}
             title={t.chat.composer.attachHint}
             onClick={() => picker.current?.click()}
-            className="grid h-8 w-8 place-items-center rounded-[3px] text-muted hover:bg-sunken hover:text-ink"
+            className="grid h-8 w-8 shrink-0 place-items-center rounded-full text-muted hover:bg-sunken hover:text-ink"
           >
             <Paperclip aria-hidden size={16} />
           </button>
@@ -178,16 +193,19 @@ export function ChatComposer({
               event.target.value = "";
             }}
           />
-          <span className={`flex-1 text-xs ${tooLong ? "text-danger" : "text-muted"}`}>
+          <ModePicker bot={bot} onLater={setLater} />
+          <span
+            className={`min-w-0 flex-1 truncate px-1 text-right text-xs ${tooLong ? "text-danger" : "text-muted"}`}
+          >
             {tooLong
               ? t.chat.composer.tooLong(text.length, FIELD_LIMITS.message)
-              : t.chat.composer.keys}
+              : text && t.chat.composer.keys}
           </span>
           <button
             type="submit"
             aria-label={t.chat.composer.send}
             disabled={empty || tooLong || busy}
-            className="grid h-8 w-8 place-items-center rounded-full bg-ink text-canvas hover:bg-ink-soft disabled:opacity-35"
+            className="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-accent text-canvas transition-opacity hover:opacity-90 disabled:bg-line-strong disabled:opacity-60"
           >
             <ArrowUp aria-hidden size={16} strokeWidth={2.25} />
           </button>