Users, file manager, image generation, budgets and agent workflow

- User management: local accounts (Argon2) and OpenID Connect, admin/user
  roles, per-user folders plus admin-shared folders, read-only session
  sharing, event filtering per user
- File manager with CodeMirror editor and git client (status, diff,
  stage, commit, branches, fetch/pull/push, log, clone/init)
- Image generation via fal.ai: generate_image tool and image page
- Budgets: monthly limits per provider, provider balances/costs
  (OpenRouter, Anthropic admin cost report, fal.ai), price discovery
- Subagents on other models, background tasks, concurrency limits per
  host/model/subagent
- MCP tools loaded on demand (mcp_search/mcp_call), read-only hints
- Permission mode "auto", safe read-only commands always allowed
- Persistent message queue with attachments, deletable
- Live reasoning incl. <think> tags, activity animations, CSS themes,
  mobile layout, statistics per user, upload size handling
- Docker: named volume for state, localhost-bound port

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

web/src/components/settings/Folders.tsx

@@ -0,0 +1,75 @@
+import { useState } from "react";
+import { del, post, put } from "../../api";
+import { useFetch } from "../../hooks";
+import { useT } from "../../i18n";
+import type { User } from "../../types";
+
+interface Folder {
+  id: string;
+  path: string;
+  users: string[];
+}
+
+/** Admin: folders inside the workspace shared with selected users. */
+export function Folders() {
+  const t = useT();
+  const { data, reload } = useFetch<{ workspace: string; folders: Folder[] }>("/folders");
+  const users = (useFetch<User[]>("/users").data ?? []).filter((u) => u.role !== "admin");
+  const [path, setPath] = useState("");
+  const [notice, setNotice] = useState<{ ok: boolean; text: string }>();
+
+  const run = async (fn: () => Promise<unknown>) => {
+    try {
+      await fn();
+      setNotice({ ok: true, text: t("settings.saved") });
+      reload();
+    } catch (e: any) {
+      setNotice({ ok: false, text: e.message });
+    }
+  };
+
+  const toggle = (f: Folder, userId: string) => {
+    const next = f.users.includes(userId) ? f.users.filter((u) => u !== userId) : [...f.users, userId];
+    void run(() => put(`/folders/${f.id}/access`, { users: next }));
+  };
+
+  const ws = data?.workspace ?? "";
+  return (
+    <>
+      <div className="notice">{t("folders.intro")}</div>
+      {notice && <div className={`notice ${notice.ok ? "ok" : "err"}`}>{notice.text}</div>}
+      {data?.folders.length === 0 && <div className="empty">{t("folders.none")}</div>}
+      {data?.folders.map((f) => (
+        <div className="panel" key={f.id}>
+          <h3>
+            📁 <code>{f.path.slice(ws.length) || "/"}</code>
+            <span className="spacer" />
+            <button className="small danger" onClick={() => confirm(t("folders.removeConfirm")) && run(() => del(`/folders/${f.id}`))}>
+              {t("folders.remove")}
+            </button>
+          </h3>
+          <div className="check-list">
+            {users.length === 0 && <div style={{ color: "var(--muted)" }}>{t("folders.noUsers")}</div>}
+            {users.map((u) => (
+              <label key={u.id}>
+                <input type="checkbox" checked={f.users.includes(u.id)} onChange={() => toggle(f, u.id)} />
+                {u.display_name || u.username} <span style={{ color: "var(--muted)" }}>@{u.username}</span>
+              </label>
+            ))}
+          </div>
+        </div>
+      ))}
+      <div className="panel">
+        <h3>{t("folders.add")}</h3>
+        <div className="row">
+          <code>{ws}/</code>
+          <input value={path} onChange={(e) => setPath(e.target.value)} placeholder="team/project" style={{ flex: 1, minWidth: 160 }} />
+          <button className="primary" disabled={!path.trim()} onClick={() => run(async () => (await post("/folders", { path }), setPath("")))}>
+            + {t("common.add")}
+          </button>
+        </div>
+        <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 6 }}>{t("folders.addHint")}</div>
+      </div>
+    </>
+  );
+}