Chat tabs, chat mode, own modes, compaction notice, CLI binaries again

- Terminals and file managers as tabs of a chat; chat terminals keep running on
  the server (no idle timeout) and re-attach from any device
- "Just chat" in New session and a built-in chat mode with a lean prompt and only
  web tools; custom modes with kind (coding/conversation), read-only and tool picker
- Mode selector as a dropdown
- The chat shows running compactions (automatic: tokens and share of the limit)
  and labels summaries
- Docker image builds and serves the terminal client binaries again
- Fix: atomic session updates; background title/usage writes no longer undo each
  other (auto compaction triggered one turn late)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/components/settings/AgentsEditor.tsx

@@ -9,25 +9,60 @@ import { confirmDialog, promptDialog, toast } from "../../dialogs";
 
 type Patch = { path: string[]; value: unknown };
 
+interface ToolInfo {
+  name: string;
+  read_only: boolean;
+  description: string;
+}
+
+/** Tool checkboxes: nothing checked = all tools. */
+function ToolPicker({ tools, value, onChange, readOnly }: { tools: ToolInfo[]; value: string[]; onChange: (v: string[]) => void; readOnly: boolean }) {
+  const t = useT();
+  const toggle = (n: string) => onChange(value.includes(n) ? value.filter((x) => x !== n) : [...value, n]);
+  // Names configured by hand (e.g. MCP patterns) stay selected even if not listed.
+  const extra = value.filter((v) => !tools.some((x) => x.name === v));
+  return (
+    <div className="tool-picker">
+      <div className="hint">{value.length ? t("agents.toolsSome", { n: value.length }) : t("agents.toolsAll")}</div>
+      <div className="tool-grid">
+        {tools.map((x) => (
+          <label key={x.name} className={`tool-item ${readOnly && !x.read_only ? "disabled" : ""}`} title={x.description}>
+            <input type="checkbox" checked={value.includes(x.name)} disabled={readOnly && !x.read_only} onChange={() => toggle(x.name)} />
+            <span className="mono">{x.name}</span>
+          </label>
+        ))}
+        {extra.map((n) => (
+          <label key={n} className="tool-item">
+            <input type="checkbox" checked onChange={() => toggle(n)} />
+            <span className="mono">{n}</span>
+          </label>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 const WRITER_PROMPT = `You are a technical writer. Produce clear, well-structured text (Markdown) for
 documentation, summaries, step-by-step guides and translations.
 Return only the finished text.`;
 
-function AgentRow({ a, raw, onSaved }: { a: AgentInfo; raw: any; onSaved: (ok: boolean, text: string) => void }) {
+function AgentRow({ a, raw, tools, onSaved }: { a: AgentInfo; raw: any; tools: ToolInfo[]; onSaved: (ok: boolean, text: string) => void }) {
   const t = useT();
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(!!raw && !raw.prompt && !raw.description && raw.mode === "primary");
   const [form, setForm] = useState({
     model: a.model ?? "",
     max_parallel: a.max_parallel ? String(a.max_parallel) : "",
     description: raw?.description ?? "",
-    tools: (raw?.tools ?? []).join(", "),
+    tools: (raw?.tools ?? []) as string[],
+    read_only: !!(raw?.read_only ?? a.read_only),
+    style: (raw?.style ?? a.style ?? "coding") as "coding" | "chat",
     prompt: raw?.prompt ?? "",
     mode: raw?.mode ?? a.mode,
     refine_rounds: String(raw?.refine?.rounds ?? a.refine?.rounds ?? 0),
     refine_model: raw?.refine?.model ?? "",
     refine_criteria: raw?.refine?.criteria ?? "",
   });
-  const builtin = a.source === "builtin" || (a.source === "config" && !raw?.prompt && ["build", "plan", "craft", "general", "explore"].includes(a.name));
+  const builtin = a.source === "builtin" || (a.source === "config" && !raw?.prompt && ["build", "plan", "craft", "chat", "general", "explore"].includes(a.name));
 
   const save = async () => {
     const base = ["agents", a.name];
@@ -45,7 +80,9 @@ function AgentRow({ a, raw, onSaved }: { a: AgentInfo; raw: any; onSaved: (ok: b
     if (!builtin || form.description) patches.push({ path: [...base, "description"], value: form.description || null });
     if (!builtin) {
       patches.push({ path: [...base, "mode"], value: form.mode });
-      patches.push({ path: [...base, "tools"], value: form.tools.trim() ? form.tools.split(/[\s,]+/).filter(Boolean) : null });
+      patches.push({ path: [...base, "tools"], value: form.tools.length ? form.tools : null });
+      patches.push({ path: [...base, "read_only"], value: form.read_only || null });
+      patches.push({ path: [...base, "style"], value: form.style === "chat" ? "chat" : null });
       patches.push({ path: [...base, "prompt"], value: form.prompt || null });
     }
     try {
@@ -133,8 +170,23 @@ function AgentRow({ a, raw, onSaved }: { a: AgentInfo; raw: any; onSaved: (ok: b
                   <option value="subagent">{t("agents.modeSubagent")}</option>
                   <option value="primary">{t("agents.modePrimary")}</option>
                 </select>
+                {form.mode === "primary" && (
+                  <>
+                    <label>{t("agents.style")}</label>
+                    <select value={form.style} onChange={(e) => setForm({ ...form, style: e.target.value as "coding" | "chat" })}>
+                      <option value="coding">{t("agents.styleCoding")}</option>
+                      <option value="chat">{t("agents.styleChat")}</option>
+                    </select>
+                    <div className="hint">{t("agents.styleHint")}</div>
+                  </>
+                )}
+                <label>{t("agents.readOnlyLabel")}</label>
+                <label className="row" style={{ gap: 6, alignItems: "center" }}>
+                  <input type="checkbox" checked={form.read_only} onChange={(e) => setForm({ ...form, read_only: e.target.checked })} />
+                  <span className="hint">{t("agents.readOnlyHint")}</span>
+                </label>
                 <label>{t("agents.tools")}</label>
-                <input value={form.tools} placeholder={t("agents.toolsAll")} onChange={(e) => setForm({ ...form, tools: e.target.value })} className="mono" />
+                <ToolPicker tools={tools} value={form.tools} onChange={(v) => setForm({ ...form, tools: v })} readOnly={form.read_only} />
                 <label>{t("agents.prompt")}</label>
                 <textarea rows={6} value={form.prompt} onChange={(e) => setForm({ ...form, prompt: e.target.value })} />
               </>
@@ -160,6 +212,7 @@ function AgentRow({ a, raw, onSaved }: { a: AgentInfo; raw: any; onSaved: (ok: b
 export function AgentsEditor({ rawAgents, reloadConfig }: { rawAgents: Record<string, any>; reloadConfig: () => void }) {
   const t = useT();
   const { data: agents, reload } = useFetch<AgentInfo[]>("/agents");
+  const tools = useFetch<ToolInfo[]>("/agents/tools").data ?? [];
   const cmds = useFetch<{ commands: any[]; skills: any[] }>("/commands").data;
   const [notice, setNotice] = useState<{ ok: boolean; text: string }>();
   const [name, setName] = useState("");
@@ -172,13 +225,15 @@ export function AgentsEditor({ rawAgents, reloadConfig }: { rawAgents: Record<st
     }
   };
 
-  const add = async (template: "writer" | "blank") => {
+  const add = async (template: "writer" | "blank" | "mode") => {
     const n = name.trim() || (template === "writer" ? "writer" : "");
     if (!/^[a-zA-Z0-9_-]+$/.test(n)) return toast(t("settings.invalidName"));
     const value =
       template === "writer"
         ? { mode: "subagent", description: "Writes documentation, summaries, guides and translations.", tools: ["read", "glob", "grep"], max_parallel: 1, prompt: WRITER_PROMPT }
-        : { mode: "subagent", description: "", prompt: "" };
+        : template === "mode"
+          ? { mode: "primary" }
+          : { mode: "subagent", description: "", prompt: "" };
     try {
       await patch("/config", { patches: [{ path: ["agents", n], value }] });
       setName("");
@@ -194,13 +249,16 @@ export function AgentsEditor({ rawAgents, reloadConfig }: { rawAgents: Record<st
       <div className="notice">{t("agents.intro")}</div>
       {notice && <div className={`notice ${notice.ok ? "ok" : "err"}`}>{notice.text}</div>}
       <h3 style={{ fontSize: 14 }}>{t("agents.primaryTitle")}</h3>
-      {agents?.filter((a) => a.mode === "primary").map((a) => <AgentRow key={key(a)} a={a} raw={rawAgents[a.name]} onSaved={saved} />)}
+      {agents?.filter((a) => a.mode === "primary").map((a) => <AgentRow key={key(a)} a={a} raw={rawAgents[a.name]} tools={tools} onSaved={saved} />)}
       <h3 style={{ fontSize: 14 }}>{t("agents.subagentTitle")}</h3>
-      {agents?.filter((a) => a.mode !== "primary").map((a) => <AgentRow key={key(a)} a={a} raw={rawAgents[a.name]} onSaved={saved} />)}
+      {agents?.filter((a) => a.mode !== "primary").map((a) => <AgentRow key={key(a)} a={a} raw={rawAgents[a.name]} tools={tools} onSaved={saved} />)}
       <div className="panel">
         <h3>{t("agents.add")}</h3>
         <div className="row">
           <input placeholder={t("settings.name")} value={name} onChange={(e) => setName(e.target.value)} />
+          <button className="primary" onClick={() => add("mode")} disabled={!name.trim()}>
+            + {t("agents.addMode")}
+          </button>
           <button onClick={() => add("writer")}>+ {t("agents.addWriter")}</button>
           <button onClick={() => add("blank")} disabled={!name.trim()}>
             + {t("agents.addBlank")}