Split view, personal modes, budget warnings, server move script

- Up to three chats side by side (#/s/a+b+c), "Open beside" in the sidebar menu
- File manager tabs of a chat stored per user on the server (/sessions/{id}/tabs)
- Personal modes for every user (Settings → My modes, /account/modes)
- Budget meters (total, provider, images, opencode Go windows) with push warnings
  for admins at the warning share and 100 %, shown in the status overlay
- scripts/move-server.sh: move to another Docker host with bind mounts (Unraid);
  scripts/smoke-test.sh

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

web/src/components/Budget.tsx

@@ -44,7 +44,7 @@ interface BudgetData {
   providers: BudgetRow[];
 }
 
-function Bar({ share, warning, exceeded }: { share: number; warning: boolean; exceeded: boolean }) {
+export function Bar({ share, warning, exceeded }: { share: number; warning: boolean; exceeded: boolean }) {
   const color = exceeded ? "var(--red)" : warning ? "var(--accent2)" : "var(--green)";
   return (
     <div className="budget-bar" role="meter" aria-valuenow={Math.round(share * 100)} aria-valuemin={0} aria-valuemax={100}>

web/src/components/ChatTabs.tsx

@@ -1,5 +1,5 @@
-import { lazy, Suspense, useCallback, useEffect, useState } from "react";
-import { del, get, post } from "../api";
+import { lazy, Suspense, useCallback, useEffect, useRef, useState } from "react";
+import { del, get, post, put } from "../api";
 import { confirmDialog, toast } from "../dialogs";
 import { useT } from "../i18n";
 import { Icon } from "./Icon";
@@ -11,31 +11,24 @@ const Files = lazy(() => import("./Files").then((m) => ({ default: m.Files })));
 
 const POLL_MS = 15_000;
 const tabKey = (sessionId: string) => `codecraft.chatTab.${sessionId}`;
-const filesKey = (sessionId: string) => `codecraft.chatFiles.${sessionId}`;
 
-/** A file manager tab: lives in this browser (it has no server state). */
+/** A file manager tab (stored per user and chat on the server). */
 interface FileTab {
   id: string;
   dir: string;
 }
 
-const loadFileTabs = (sessionId: string): FileTab[] => {
-  try {
-    return JSON.parse(localStorage.getItem(filesKey(sessionId)) ?? "[]");
-  } catch {
-    return [];
-  }
-};
-
 /**
- * Tabs of a chat: the chat itself, its terminals and file managers. Terminals live on
- * the server until closed, so they show up again after a reload or on another device
- * (the list is refreshed periodically); file manager tabs are kept per browser.
+ * Tabs of a chat: the chat itself, its terminals and file managers. Both are kept on the
+ * server, so they show up again after a reload or on another device (the list is
+ * refreshed periodically); which tab is active is per browser tab.
  */
 export function useChatTabs(sessionId: string, cwd: string) {
   const t = useT();
   const [terms, setTerms] = useState<TermInfo[]>([]);
-  const [files, setFilesState] = useState<FileTab[]>(() => loadFileTabs(sessionId));
+  const [files, setFilesState] = useState<FileTab[]>([]);
+  // Local file tab changes not yet saved: polling must not undo them.
+  const pending = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   const [tab, setTabState] = useState<string>(() => sessionStorage.getItem(tabKey(sessionId)) ?? "chat");
 
   const setTab = useCallback(
@@ -46,10 +39,14 @@ export function useChatTabs(sessionId: string, cwd: string) {
     [sessionId],
   );
   const setFiles = useCallback(
-    (update: (f: FileTab[]) => FileTab[]) =>
+    (update: (f: FileTab[]) => FileTab[], delay = 0) =>
       setFilesState((cur) => {
         const next = update(cur);
-        localStorage.setItem(filesKey(sessionId), JSON.stringify(next));
+        clearTimeout(pending.current);
+        pending.current = setTimeout(() => {
+          pending.current = undefined;
+          void put(`/sessions/${sessionId}/tabs`, next).catch((e) => toast(e));
+        }, delay);
         return next;
       }),
     [sessionId],
@@ -57,15 +54,18 @@ export function useChatTabs(sessionId: string, cwd: string) {
 
   const reload = useCallback(
     () =>
-      get<TermInfo[]>(`/terminals?session=${encodeURIComponent(sessionId)}`)
-        .then(setTerms)
+      get<{ terminals: TermInfo[]; files: FileTab[] }>(`/sessions/${sessionId}/tabs`)
+        .then((r) => {
+          setTerms(r.terminals);
+          if (!pending.current) setFilesState(r.files);
+        })
         .catch(() => undefined),
     [sessionId],
   );
 
   useEffect(() => {
     setTabState(sessionStorage.getItem(tabKey(sessionId)) ?? "chat");
-    setFilesState(loadFileTabs(sessionId));
+    setFilesState([]);
     setTerms([]);
     void reload();
     const id = setInterval(reload, POLL_MS);
@@ -110,7 +110,8 @@ export function useChatTabs(sessionId: string, cwd: string) {
     if (tab === id) setTab("chat");
   };
 
-  const fileDirChanged = useCallback((id: string, dir: string) => setFiles((f) => f.map((x) => (x.id === id ? { ...x, dir } : x))), [setFiles]);
+  // Browsing saves the folder after a short pause, not on every click.
+  const fileDirChanged = useCallback((id: string, dir: string) => setFiles((f) => f.map((x) => (x.id === id ? { ...x, dir } : x)), 1000), [setFiles]);
 
   return { terms, files, tab: current, activeTerm, setTab, openTerminal, closeTerminal, openFiles, closeFiles, fileDirChanged };
 }

web/src/components/ChatView.tsx

@@ -136,7 +136,7 @@ function RefineFeedback({ text }: { text: string }) {
   );
 }
 
-export function ChatView({ sessionId, onMenu }: { sessionId: string; onMenu: () => void }) {
+export function ChatView({ sessionId, onMenu, onClosePane }: { sessionId: string; onMenu: () => void; onClosePane?: () => void }) {
   const t = useT();
   const session = useStore((s) => s.sessionById[sessionId]);
   const messages = useStore((s) => s.messages[sessionId] ?? EMPTY);
@@ -368,6 +368,11 @@ export function ChatView({ sessionId, onMenu }: { sessionId: string; onMenu: ()
             </button>
           </>
         )}
+        {onClosePane && (
+          <button className="small ghost" onClick={onClosePane} title={t("chat.closePane")} aria-label={t("chat.closePane")}>
+            <Icon name="close" />
+          </button>
+        )}
       </div>
       <ChatTabBar state={tabs} />
       <ChatTabPanes state={tabs} />

web/src/components/Palette.tsx

@@ -28,7 +28,7 @@ function recent() {
 /** Move to the next/previous session relative to the open one. */
 function step(dir: 1 | -1) {
   const list = recent();
-  const cur = location.hash.match(/^#\/s\/([^/]+)/)?.[1];
+  const cur = location.hash.match(/^#\/s\/([^/+]+)/)?.[1];
   const i = list.findIndex((s) => s.id === cur);
   const next = list[i < 0 ? 0 : Math.min(Math.max(i + dir, 0), list.length - 1)];
   if (next) navigate(`/s/${next.id}`);

web/src/components/Settings.tsx

@@ -12,6 +12,7 @@ import { setReasoningMode, useReasoningMode, type ReasoningMode } from "../prefs
 import { ModelSelect } from "./ModelSelect";
 import { Account } from "./settings/Account";
 import { Templates } from "./settings/Templates";
+import { PersonalModes } from "./settings/PersonalModes";
 import { AgentsEditor } from "./settings/AgentsEditor";
 import { Folders } from "./settings/Folders";
 import { Users } from "./settings/Users";
@@ -1039,8 +1040,8 @@ function Raw({ reload }: { reload: () => void }) {
 
 // --- page -------------------------------------------------------------------
 
-const ADMIN_TABS = ["general", "providers", "agents", "mcp", "permissions", "users", "folders", "tools", "audit", "templates", "account", "raw"] as const;
-const USER_TABS = ["general", "templates", "account"] as const;
+const ADMIN_TABS = ["general", "providers", "agents", "mcp", "permissions", "users", "folders", "tools", "audit", "templates", "modes", "account", "raw"] as const;
+const USER_TABS = ["general", "templates", "modes", "account"] as const;
 const TAB_ICONS: Record<string, string> = {
   general: "gear",
   providers: "brain",
@@ -1052,6 +1053,7 @@ const TAB_ICONS: Record<string, string> = {
   tools: "toolbox",
   audit: "scroll",
   templates: "template",
+  modes: "sparkle",
   account: "user",
   raw: "file-text",
 };
@@ -1088,6 +1090,7 @@ export function Settings({ tab, onMenu }: { tab?: string; onMenu: () => void })
           {!isAdmin && active === "general" && <InterfaceSettings />}
           {active === "account" && <Account />}
           {active === "templates" && <Templates />}
+          {active === "modes" && <PersonalModes />}
           {cfg && active === "users" && <Users />}
           {cfg && active === "folders" && <Folders />}
           {cfg && active === "audit" && <Audit />}

web/src/components/Sidebar.tsx

@@ -5,7 +5,7 @@ import { useEffect, useMemo, useState, useSyncExternalStore } from "react";
 import { get, patch, post } from "../api";
 import { promptDialog, toast } from "../dialogs";
 import { fmtRelative, useT, type Key } from "../i18n";
-import { navigate } from "../router";
+import { navigate, openBeside } from "../router";
 import { useStore } from "../store";
 import type { Session } from "../types";
 
@@ -82,6 +82,9 @@ function SessionRow({ s, active, attention, busy, folders }: { s: Session; activ
               <Icon name="pin" /> {t(s.pinned ? "sidebar.unpin" : "sidebar.pin")}
             </button>
           )}
+          <button role="menuitem" className="hide-mobile" onClick={() => (setMenu(false), openBeside(s.id))}>
+            <Icon name="external" /> {t("sidebar.openBeside")}
+          </button>
           <button role="menuitem" onClick={() => (setMenu(false), void moveTo())}>
             <Icon name="folder" /> {t("sidebar.moveTo")}
           </button>
@@ -99,7 +102,7 @@ function SessionRow({ s, active, attention, busy, folders }: { s: Session; activ
   );
 }
 
-export function Sidebar({ open, activeId, section }: { open: boolean; activeId?: string; section: string }) {
+export function Sidebar({ open, activeIds, section }: { open: boolean; activeIds: string[]; section: string }) {
   const t = useT();
   const sessions = useStore((s) => s.sessions);
   const busy = useStore((s) => s.busy);
@@ -210,7 +213,7 @@ export function Sidebar({ open, activeId, section }: { open: boolean; activeId?:
             <div className="session-group">{t("sidebar.searchResults", { n: hits.length })}</div>
             {hits.length === 0 && <div className="empty">{t("sidebar.noResults")}</div>}
             {hits.map((h) => (
-              <button key={h.id} className={`session-item ${h.id === activeId ? "active" : ""}`} onClick={() => navigate(`/s/${h.id}`)}>
+              <button key={h.id} className={`session-item ${activeIds.includes(h.id) ? "active" : ""}`} onClick={() => navigate(`/s/${h.id}`)}>
                 <div className="title">
                   <span>{h.title || t("session.untitled")}</span>
                 </div>
@@ -242,7 +245,7 @@ export function Sidebar({ open, activeId, section }: { open: boolean; activeId?:
               </button>
               {!collapsed.has(g.id) &&
                 g.items.map((s) => (
-                  <SessionRow key={s.id} s={s} active={s.id === activeId} attention={attention.has(s.id)} busy={!!busy[s.id]} folders={folderNames} />
+                  <SessionRow key={s.id} s={s} active={activeIds.includes(s.id)} attention={attention.has(s.id)} busy={!!busy[s.id]} folders={folderNames} />
                 ))}
             </div>
           ))}

web/src/components/StatusLeds.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { get, post } from "../api";
-import { fmtPercent, useT, type Key } from "../i18n";
+import { fmtCost, fmtPercent, useT, type Key } from "../i18n";
 import { navigate } from "../router";
 import { useStore } from "../store";
 import { Icon } from "./Icon";
-import type { Plan } from "./Budget";
+import { Bar, type Plan } from "./Budget";
 
 type Level = "ok" | "warn" | "err" | "off";
 
@@ -21,12 +21,25 @@ interface McpEntry {
   tools?: number;
   error?: string | null;
 }
+interface Meter {
+  key: string;
+  provider: string;
+  kind: "total" | "provider" | "images" | "5h" | "week" | "month";
+  used: number;
+  limit: number;
+  ratio: number;
+}
 interface Overview {
   version: string;
   providers: Record<string, ProviderState>;
   mcp: Record<string, McpEntry>;
+  /** Budgets and plan windows (admins only). */
+  budgets?: Meter[];
+  currency?: string;
 }
 
+const meterLevel = (m: Meter): Level => (m.ratio >= 1 ? "err" : m.ratio >= 0.8 ? "warn" : "ok");
+
 const POLL_MS = 30_000;
 /** A dropped connection shows yellow (reconnecting) for this long, then red. */
 const RECONNECT_GRACE_MS = 10_000;
@@ -197,6 +210,22 @@ export function StatusLeds() {
             ))}
           </div>
 
+          {!!data?.budgets?.length && (
+            <div className="status-section">
+              <div className="status-head">
+                <Led level={combine(data.budgets.map(meterLevel))} /> {t("status.budgets")}
+              </div>
+              {data.budgets.map((m) => (
+                <div key={m.key} className="status-row status-meter" title={`${fmtCost(m.used, data.currency ?? "USD")} / ${fmtCost(m.limit, data.currency ?? "USD")}`}>
+                  <Led level={meterLevel(m)} />
+                  <span className="grow">{m.kind === "total" ? t("stats.total") : m.kind === "images" ? t("nav.images") : m.kind === "provider" ? m.provider : `${m.provider} · ${t(`budget.window.${m.kind}` as Key)}`}</span>
+                  <Bar share={m.ratio} warning={m.ratio >= 0.8} exceeded={m.ratio >= 1} />
+                  <span className="hint pct">{fmtPercent(m.ratio)}</span>
+                </div>
+              ))}
+            </div>
+          )}
+
           {admin && (
             <div className="status-foot">
               <button className="small ghost" onClick={() => go("providers")}>

web/src/components/settings/AgentsEditor.tsx

@@ -9,14 +9,14 @@ import { confirmDialog, promptDialog, toast } from "../../dialogs";
 
 type Patch = { path: string[]; value: unknown };
 
-interface ToolInfo {
+export 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 }) {
+export 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.
@@ -211,7 +211,9 @@ function AgentRow({ a, raw, tools, onSaved }: { a: AgentInfo; raw: any; tools: T
 
 export function AgentsEditor({ rawAgents, reloadConfig }: { rawAgents: Record<string, any>; reloadConfig: () => void }) {
   const t = useT();
-  const { data: agents, reload } = useFetch<AgentInfo[]>("/agents");
+  const { data: all, reload } = useFetch<AgentInfo[]>("/agents");
+  // Personal modes are managed under "My modes".
+  const agents = all?.filter((a) => a.source !== "personal");
   const tools = useFetch<ToolInfo[]>("/agents/tools").data ?? [];
   const cmds = useFetch<{ commands: any[]; skills: any[] }>("/commands").data;
   const [notice, setNotice] = useState<{ ok: boolean; text: string }>();

web/src/components/settings/PersonalModes.tsx

@@ -0,0 +1,148 @@
+import { useEffect, useState } from "react";
+import { get, put } from "../../api";
+import { confirmDialog, toast } from "../../dialogs";
+import { useFetch } from "../../hooks";
+import { useT } from "../../i18n";
+import { Icon } from "../Icon";
+import { ModelSelect } from "../ModelSelect";
+import { ToolPicker, type ToolInfo } from "./AgentsEditor";
+
+interface Mode {
+  description?: string | null;
+  prompt?: string | null;
+  model?: string | null;
+  tools?: string[] | null;
+  read_only?: boolean | null;
+  style?: "coding" | "chat" | null;
+}
+
+/** Modes a user creates for themselves; they appear in New session and the mode selector. */
+export function PersonalModes() {
+  const t = useT();
+  const tools = useFetch<ToolInfo[]>("/agents/tools").data ?? [];
+  const [modes, setModes] = useState<Record<string, Mode>>();
+  const [open, setOpen] = useState<string>();
+  const [name, setName] = useState("");
+
+  useEffect(() => {
+    get<Record<string, Mode>>("/account/modes")
+      .then(setModes)
+      .catch((e) => toast(e));
+  }, []);
+
+  const save = async (next: Record<string, Mode>) => {
+    try {
+      setModes(await put<Record<string, Mode>>("/account/modes", next));
+      toast(t("settings.saved"), "success");
+      return true;
+    } catch (e) {
+      toast(e);
+      return false;
+    }
+  };
+
+  const add = async () => {
+    const n = name.trim();
+    if (!/^[a-zA-Z0-9_-]+$/.test(n)) return toast(t("settings.invalidName"));
+    if (modes?.[n]) return toast(t("modes.exists", { name: n }));
+    if (await save({ ...modes, [n]: { style: "chat", description: "", prompt: "" } })) {
+      setName("");
+      setOpen(n);
+    }
+  };
+
+  const remove = async (n: string) => {
+    if (!(await confirmDialog({ message: t("agents.deleteConfirm", { name: n }), danger: true, confirmLabel: t("common.delete") }))) return;
+    const next = { ...modes };
+    delete next[n];
+    void save(next);
+  };
+
+  if (!modes) return <div className="empty">{t("common.loading")}</div>;
+  const names = Object.keys(modes).sort();
+  return (
+    <>
+      <div className="notice">{t("modes.intro")}</div>
+      {names.map((n) => (
+        <ModeRow key={n + JSON.stringify(modes[n])} name={n} mode={modes[n]} tools={tools} open={open === n} onToggle={() => setOpen(open === n ? undefined : n)} onSave={(m) => save({ ...modes, [n]: m })} onRemove={() => remove(n)} />
+      ))}
+      {names.length === 0 && <div className="empty">{t("modes.none")}</div>}
+      <div className="panel">
+        <h3>{t("agents.addMode")}</h3>
+        <div className="row">
+          <input placeholder={t("settings.name")} value={name} onChange={(e) => setName(e.target.value)} onKeyDown={(e) => e.key === "Enter" && void add()} />
+          <button className="primary" onClick={() => void add()} disabled={!name.trim()}>
+            + {t("agents.addMode")}
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}
+
+function ModeRow({ name, mode, tools, open, onToggle, onSave, onRemove }: { name: string; mode: Mode; tools: ToolInfo[]; open: boolean; onToggle: () => void; onSave: (m: Mode) => Promise<boolean>; onRemove: () => void }) {
+  const t = useT();
+  const [form, setForm] = useState({
+    description: mode.description ?? "",
+    prompt: mode.prompt ?? "",
+    model: mode.model ?? "",
+    tools: mode.tools ?? [],
+    read_only: !!mode.read_only,
+    style: (mode.style ?? "coding") as "coding" | "chat",
+  });
+  const submit = () =>
+    void onSave({
+      description: form.description || null,
+      prompt: form.prompt || null,
+      model: form.model || null,
+      tools: form.tools.length ? form.tools : null,
+      read_only: form.read_only || null,
+      style: form.style === "chat" ? "chat" : null,
+    });
+  return (
+    <div className="panel">
+      <h3>
+        {name}
+        <span className="chip">{form.style === "chat" ? t("agents.styleChatShort") : t("agents.styleCodingShort")}</span>
+        {form.read_only && <span className="chip">{t("agents.readOnly")}</span>}
+        <span className="spacer" />
+        <button className="small ghost danger" onClick={onRemove} title={t("common.delete")} aria-label={t("common.delete")}>
+          <Icon name="trash" />
+        </button>
+        <button className="small" onClick={onToggle}>
+          {open ? t("common.collapse") : t("common.edit")}
+        </button>
+      </h3>
+      {!open && mode.description && <div className="hint">{mode.description}</div>}
+      {open && (
+        <>
+          <div className="form">
+            <label>{t("agents.description")}</label>
+            <input value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} />
+            <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>
+            <label>{t("agents.model")}</label>
+            <ModelSelect value={form.model} onChange={(v) => setForm({ ...form, model: v })} emptyLabel={t("agents.sessionModel")} />
+            <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>
+            <ToolPicker tools={tools} value={form.tools} onChange={(v) => setForm({ ...form, tools: v })} readOnly={form.read_only} />
+            <label>{t("agents.prompt")}</label>
+            <textarea rows={8} value={form.prompt} placeholder={t("modes.promptPlaceholder")} onChange={(e) => setForm({ ...form, prompt: e.target.value })} />
+          </div>
+          <div className="row" style={{ marginTop: 12 }}>
+            <button className="primary" onClick={submit}>
+              {t("common.save")}
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}