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

@@ -0,0 +1,96 @@
+import { useEffect, useRef } from "react";
+import { basicSetup } from "codemirror";
+import { Compartment, EditorState } from "@codemirror/state";
+import { EditorView, keymap } from "@codemirror/view";
+import { HighlightStyle, LanguageDescription, syntaxHighlighting } from "@codemirror/language";
+import { languages } from "@codemirror/language-data";
+import { indentWithTab } from "@codemirror/commands";
+import { tags } from "@lezer/highlight";
+
+// Colours come from the theme variables, so every CSS theme applies.
+const theme = EditorView.theme({
+  "&": { height: "100%", backgroundColor: "var(--bg0)", color: "var(--fg1)", fontSize: "13px" },
+  ".cm-content": { fontFamily: "var(--mono)", caretColor: "var(--accent)" },
+  ".cm-gutters": { backgroundColor: "var(--bg1)", color: "var(--muted)", border: "none", borderRight: "1px solid var(--bg2)" },
+  ".cm-activeLine": { backgroundColor: "color-mix(in srgb, var(--bg2) 55%, transparent)" },
+  ".cm-activeLineGutter": { backgroundColor: "var(--bg2)" },
+  "&.cm-focused .cm-cursor": { borderLeftColor: "var(--accent)" },
+  "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, ::selection": { backgroundColor: "color-mix(in srgb, var(--blue) 35%, transparent) !important" },
+  ".cm-searchMatch": { backgroundColor: "color-mix(in srgb, var(--accent) 35%, transparent)" },
+  ".cm-panels": { backgroundColor: "var(--bg1)", color: "var(--fg1)" },
+  ".cm-tooltip": { backgroundColor: "var(--bg1)", border: "1px solid var(--bg3)" },
+  ".cm-scroller": { overflow: "auto" },
+});
+
+const highlight = HighlightStyle.define([
+  { tag: [tags.keyword, tags.controlKeyword, tags.operatorKeyword, tags.modifier], color: "var(--syntax-keyword)" },
+  { tag: [tags.string, tags.special(tags.string), tags.regexp], color: "var(--syntax-string)" },
+  { tag: [tags.number, tags.bool, tags.null, tags.atom], color: "var(--syntax-number)" },
+  { tag: [tags.comment, tags.lineComment, tags.blockComment], color: "var(--syntax-comment)", fontStyle: "italic" },
+  { tag: [tags.function(tags.variableName), tags.function(tags.propertyName), tags.heading], color: "var(--syntax-function)" },
+  { tag: [tags.typeName, tags.className, tags.tagName, tags.namespace], color: "var(--syntax-type)" },
+  { tag: [tags.variableName, tags.propertyName, tags.attributeName], color: "var(--syntax-variable)" },
+  { tag: [tags.meta, tags.processingInstruction, tags.annotation, tags.link], color: "var(--syntax-meta)" },
+  { tag: tags.strong, fontWeight: "bold" },
+  { tag: tags.emphasis, fontStyle: "italic" },
+]);
+
+export function CodeEditor({
+  value,
+  filename,
+  readOnly,
+  onChange,
+  onSave,
+}: {
+  value: string;
+  filename: string;
+  readOnly?: boolean;
+  onChange: (v: string) => void;
+  onSave?: () => void;
+}) {
+  const host = useRef<HTMLDivElement>(null);
+  const view = useRef<EditorView | null>(null);
+  const lang = useRef(new Compartment());
+  const ro = useRef(new Compartment());
+  const cb = useRef({ onChange, onSave });
+  cb.current = { onChange, onSave };
+
+  // Create the editor once per file.
+  useEffect(() => {
+    const v = new EditorView({
+      parent: host.current!,
+      state: EditorState.create({
+        doc: value,
+        extensions: [
+          basicSetup,
+          keymap.of([indentWithTab, { key: "Mod-s", preventDefault: true, run: () => (cb.current.onSave?.(), true) }]),
+          theme,
+          syntaxHighlighting(highlight),
+          lang.current.of([]),
+          ro.current.of(EditorState.readOnly.of(!!readOnly)),
+          EditorView.lineWrapping,
+          EditorView.updateListener.of((u) => u.docChanged && cb.current.onChange(u.state.doc.toString())),
+        ],
+      }),
+    });
+    view.current = v;
+    const desc = LanguageDescription.matchFilename(languages, filename);
+    desc?.load().then((support) => v.dispatch({ effects: lang.current.reconfigure(support) }));
+    return () => v.destroy();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filename]);
+
+  // External content changes (reload) replace the document.
+  useEffect(() => {
+    const v = view.current;
+    if (v && v.state.doc.toString() !== value) {
+      v.dispatch({ changes: { from: 0, to: v.state.doc.length, insert: value } });
+    }
+  }, [value]);
+
+  useEffect(() => {
+    view.current?.dispatch({ effects: ro.current.reconfigure(EditorState.readOnly.of(!!readOnly)) });
+  }, [readOnly]);
+
+  return <div className="code-editor" ref={host} />;
+}