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/NewSession.tsx

@@ -7,6 +7,7 @@ import { ModelSelect } from "./ModelSelect";
 interface DirListing {
   path: string;
   parent: string | null;
+  root: string;
   workspace: string;
   dirs: { name: string; path: string; git: boolean }[];
 }
@@ -16,6 +17,7 @@ const LAST_DIR = "codecraft.lastDir";
 export function NewSession({ onMenu, onCreated }: { onMenu: () => void; onCreated: (id: string) => void }) {
   const t = useT();
   const [path, setPath] = useState<string>(localStorage.getItem(LAST_DIR) ?? "");
+  const roots = useFetch<{ path: string; name: string }[]>("/fs/roots").data ?? [];
   const { data: listing, error: dirError } = useFetch<DirListing>(`/fs/dirs${path ? `?path=${encodeURIComponent(path)}` : ""}`);
   const config = useFetch<{ default_model?: string }>("/config").data;
   const [model, setModel] = useState("");
@@ -50,6 +52,7 @@ export function NewSession({ onMenu, onCreated }: { onMenu: () => void; onCreate
   };
 
   const rel = listing ? listing.path.slice(listing.workspace.length) || "/" : "";
+  const currentRoot = listing?.root;
 
   return (
     <>
@@ -65,6 +68,15 @@ export function NewSession({ onMenu, onCreated }: { onMenu: () => void; onCreate
         <div className="page-inner" style={{ maxWidth: 760 }}>
           <div className="panel">
             <h3>{t("new.directory")}</h3>
+            {roots.length > 1 && (
+              <div className="mode-tabs" style={{ marginBottom: 8, flexWrap: "wrap" }}>
+                {roots.map((r) => (
+                  <button key={r.path} className={currentRoot === r.path ? "active" : ""} onClick={() => setPath(r.path)}>
+                    {r.name}
+                  </button>
+                ))}
+              </div>
+            )}
             <div className="row" style={{ marginBottom: 8 }}>
               <code className="grow" style={{ flex: 1 }}>
                 {rel}