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>
2026-11-08 16:54:08 +01:00
1 parent f3a2fe3816
commit 49262c612c
@@ -0,0 +1,47 @@
+import { useState } from "react";
+import { post } from "../../api";
+import { useT } from "../../i18n";
+import { useStore } from "../../store";
+
+export function Account() {
+  const t = useT();
+  const me = useStore((s) => s.me);
+  const [form, setForm] = useState({ current: "", next: "", repeat: "" });
+  const [notice, setNotice] = useState<{ ok: boolean; text: string }>();
+
+  const save = async () => {
+    if (form.next !== form.repeat) return setNotice({ ok: false, text: t("login.mismatch") });
+    try {
+      await post("/auth/password", { current: form.current || undefined, new: form.next });
+      setForm({ current: "", next: "", repeat: "" });
+      setNotice({ ok: true, text: t("account.changed") });
+    } catch (e: any) {
+      setNotice({ ok: false, text: e.message });
+    }
+  };
+
+  return (
+    <div className="panel">
+      <h3>
+        {t("account.title")}: {me?.username}
+      </h3>
+      <div className="form">
+        {me?.has_password && (
+          <>
+            <label>{t("account.current")}</label>
+            <input type="password" value={form.current} onChange={(e) => setForm({ ...form, current: e.target.value })} autoComplete="current-password" />
+          </>
+        )}
+        <label>{t("account.new")}</label>
+        <input type="password" value={form.next} onChange={(e) => setForm({ ...form, next: e.target.value })} autoComplete="new-password" />
+        <label>{t("login.passwordRepeat")}</label>
+        <input type="password" value={form.repeat} onChange={(e) => setForm({ ...form, repeat: e.target.value })} autoComplete="new-password" />
+      </div>
+      {notice && <div className={`notice ${notice.ok ? "ok" : "err"}`} style={{ marginTop: 10 }}>{notice.text}</div>}
+      <button className="primary" style={{ marginTop: 12 }} disabled={!form.next} onClick={save}>
+        {t("account.change")}
+      </button>
+      <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 8 }}>{t("account.hint")}</div>
+    </div>
+  );
+}
@@ -0,0 +1,183 @@
+import { useState } from "react";
+import { patch } from "../../api";
+import { useFetch } from "../../hooks";
+import { useT } from "../../i18n";
+import type { AgentInfo } from "../../types";
+import { ModelSelect } from "../ModelSelect";
+
+type Patch = { path: string[]; value: unknown };
+
+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 }) {
+  const t = useT();
+  const [open, setOpen] = useState(false);
+  const [form, setForm] = useState({
+    model: a.model ?? "",
+    max_parallel: a.max_parallel ? String(a.max_parallel) : "",
+    description: raw?.description ?? "",
+    tools: (raw?.tools ?? []).join(", "),
+    prompt: raw?.prompt ?? "",
+    mode: raw?.mode ?? a.mode,
+  });
+  const builtin = a.source === "builtin" || (a.source === "config" && !raw?.prompt && ["build", "plan", "craft", "general", "explore"].includes(a.name));
+
+  const save = async () => {
+    const base = ["agents", a.name];
+    const patches: Patch[] = [
+      { path: [...base, "model"], value: form.model || null },
+      { path: [...base, "max_parallel"], value: form.max_parallel ? Number(form.max_parallel) : null },
+    ];
+    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, "prompt"], value: form.prompt || null });
+    }
+    try {
+      await patch("/config", { patches });
+      onSaved(true, t("settings.saved"));
+    } catch (e: any) {
+      onSaved(false, e.message);
+    }
+  };
+
+  const reset = async () => {
+    if (!confirm(t(builtin ? "agents.resetConfirm" : "agents.deleteConfirm", { name: a.name }))) return;
+    try {
+      await patch("/config", { patches: [{ path: ["agents", a.name], value: null }] });
+      onSaved(true, t("settings.saved"));
+    } catch (e: any) {
+      onSaved(false, e.message);
+    }
+  };
+
+  return (
+    <div className="panel">
+      <h3>
+        <code>{a.name}</code>
+        <span className="chip">{a.mode === "primary" ? t("agents.modePrimary") : t("agents.modeSubagent")}</span>
+        <span className="chip">{t(`agents.source.${a.source}` as any)}</span>
+        {a.read_only && <span className="chip">{t("agents.readOnly")}</span>}
+        <span className="spacer" />
+        <button className="small" onClick={() => setOpen(!open)}>
+          {open ? t("common.collapse") : t("common.edit")}
+        </button>
+      </h3>
+      <div style={{ fontSize: 13, color: "var(--fg3)" }}>{a.description}</div>
+      <div className="row" style={{ marginTop: 8 }}>
+        <span style={{ fontSize: 12, color: "var(--muted)" }}>{t("agents.model")}:</span>
+        <span className="chip">{a.model || t("agents.sessionModel")}</span>
+        {a.max_parallel ? <span className="chip">{t("agents.maxParallelShort", { n: a.max_parallel })}</span> : null}
+      </div>
+      {open && (
+        <>
+          <div className="form" style={{ marginTop: 12 }}>
+            <label>{t("agents.model")}</label>
+            <ModelSelect value={form.model} onChange={(v) => setForm({ ...form, model: v })} emptyLabel={t("agents.sessionModel")} />
+            <div className="hint">{t("agents.modelHint")}</div>
+            {a.mode !== "primary" && (
+              <>
+                <label>{t("agents.maxParallel")}</label>
+                <input type="number" min={1} value={form.max_parallel} placeholder="∞" onChange={(e) => setForm({ ...form, max_parallel: e.target.value })} />
+              </>
+            )}
+            <label>{t("agents.description")}</label>
+            <input value={form.description} placeholder={a.description} onChange={(e) => setForm({ ...form, description: e.target.value })} />
+            {a.mode !== "primary" && <div className="hint">{t("agents.descriptionHint")}</div>}
+            {!builtin && (
+              <>
+                <label>{t("agents.mode")}</label>
+                <select value={form.mode} onChange={(e) => setForm({ ...form, mode: e.target.value })}>
+                  <option value="subagent">{t("agents.modeSubagent")}</option>
+                  <option value="primary">{t("agents.modePrimary")}</option>
+                </select>
+                <label>{t("agents.tools")}</label>
+                <input value={form.tools} placeholder={t("agents.toolsAll")} onChange={(e) => setForm({ ...form, tools: e.target.value })} className="mono" />
+                <label>{t("agents.prompt")}</label>
+                <textarea rows={6} value={form.prompt} onChange={(e) => setForm({ ...form, prompt: e.target.value })} />
+              </>
+            )}
+          </div>
+          <div className="row" style={{ marginTop: 12 }}>
+            <button className="primary" onClick={save}>
+              {t("common.save")}
+            </button>
+            <span className="spacer" />
+            {a.source === "config" && (
+              <button className="danger" onClick={reset}>
+                {builtin ? t("agents.reset") : t("common.delete")}
+              </button>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+export function AgentsEditor({ rawAgents, reloadConfig }: { rawAgents: Record<string, any>; reloadConfig: () => void }) {
+  const t = useT();
+  const { data: agents, reload } = useFetch<AgentInfo[]>("/agents");
+  const cmds = useFetch<{ commands: any[]; skills: any[] }>("/commands").data;
+  const [notice, setNotice] = useState<{ ok: boolean; text: string }>();
+  const [name, setName] = useState("");
+
+  const saved = (ok: boolean, text: string) => {
+    setNotice({ ok, text });
+    if (ok) {
+      reload();
+      reloadConfig();
+    }
+  };
+
+  const add = async (template: "writer" | "blank") => {
+    const n = name.trim() || (template === "writer" ? "writer" : "");
+    if (!/^[a-zA-Z0-9_-]+$/.test(n)) return alert(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: "" };
+    try {
+      await patch("/config", { patches: [{ path: ["agents", n], value }] });
+      setName("");
+      saved(true, t("settings.saved"));
+    } catch (e: any) {
+      saved(false, e.message);
+    }
+  };
+
+  const key = (a: AgentInfo) => a.name + JSON.stringify(rawAgents[a.name] ?? {}) + (a.model ?? "");
+  return (
+    <>
+      <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} />)}
+      <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} />)}
+      <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 onClick={() => add("writer")}>+ {t("agents.addWriter")}</button>
+          <button onClick={() => add("blank")} disabled={!name.trim()}>
+            + {t("agents.addBlank")}
+          </button>
+        </div>
+      </div>
+      <div className="two-col">
+        <div className="panel">
+          <h3>{t("agents.commands")}</h3>
+          {cmds?.commands.length ? cmds.commands.map((c) => <div key={c.name}><code>/{c.name}</code> – {c.description}</div>) : <div className="empty">–</div>}
+        </div>
+        <div className="panel">
+          <h3>{t("agents.skills")}</h3>
+          {cmds?.skills.length ? cmds.skills.map((s) => <div key={s.name}><code>{s.name}</code> – {s.description}</div>) : <div className="empty">–</div>}
+        </div>
+      </div>
+    </>
+  );
+}
@@ -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>
+    </>
+  );
+}
@@ -0,0 +1,117 @@
+import { useState } from "react";
+import { del, patch, post } from "../../api";
+import { useFetch } from "../../hooks";
+import { fmtDate, useT } from "../../i18n";
+import { useStore } from "../../store";
+import type { User } from "../../types";
+
+export function Users() {
+  const t = useT();
+  const me = useStore((s) => s.me);
+  const { data: users, reload } = useFetch<User[]>("/users");
+  const [form, setForm] = useState({ username: "", display_name: "", password: "", role: "user" });
+  const [notice, setNotice] = useState<{ ok: boolean; text: string }>();
+
+  const run = async (fn: () => Promise<unknown>, ok = t("settings.saved")) => {
+    try {
+      await fn();
+      setNotice({ ok: true, text: ok });
+      reload();
+    } catch (e: any) {
+      setNotice({ ok: false, text: e.message });
+    }
+  };
+
+  const resetPassword = (u: User) => {
+    const pw = prompt(t("users.newPasswordFor", { name: u.username }));
+    if (pw) void run(() => patch(`/users/${u.id}`, { password: pw }));
+  };
+
+  return (
+    <>
+      <div className="notice">{t("users.intro")}</div>
+      {notice && <div className={`notice ${notice.ok ? "ok" : "err"}`}>{notice.text}</div>}
+      <div className="panel" style={{ overflowX: "auto" }}>
+        <table className="grid">
+          <thead>
+            <tr>
+              <th>{t("users.username")}</th>
+              <th>{t("users.displayName")}</th>
+              <th>{t("users.role")}</th>
+              <th>{t("users.login")}</th>
+              <th>{t("users.created")}</th>
+              <th />
+            </tr>
+          </thead>
+          <tbody>
+            {users?.map((u) => (
+              <tr key={u.id} style={{ opacity: u.disabled ? 0.5 : 1 }}>
+                <td>
+                  <code>{u.username}</code>
+                  {u.id === me?.id && <span className="chip" style={{ marginLeft: 6 }}>{t("users.you")}</span>}
+                </td>
+                <td>{u.display_name}</td>
+                <td>
+                  <select value={u.role} onChange={(e) => run(() => patch(`/users/${u.id}`, { role: e.target.value }))}>
+                    <option value="user">{t("users.roleUser")}</option>
+                    <option value="admin">{t("users.roleAdmin")}</option>
+                  </select>
+                </td>
+                <td>
+                  {u.has_password && <span className="chip">{t("users.password")}</span>} {u.oidc && <span className="chip">SSO</span>}
+                </td>
+                <td>{fmtDate(u.created_at, false)}</td>
+                <td>
+                  <div className="row" style={{ flexWrap: "nowrap" }}>
+                    <button className="small" onClick={() => resetPassword(u)}>
+                      {t("users.setPassword")}
+                    </button>
+                    <button className="small" onClick={() => run(() => patch(`/users/${u.id}`, { disabled: !u.disabled }))}>
+                      {u.disabled ? t("users.enable") : t("users.disable")}
+                    </button>
+                    {u.id !== me?.id && (
+                      <button className="small danger" onClick={() => confirm(t("users.deleteConfirm", { name: u.username })) && run(() => del(`/users/${u.id}`))}>
+                        {t("common.delete")}
+                      </button>
+                    )}
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div className="panel">
+        <h3>{t("users.add")}</h3>
+        <div className="form">
+          <label>{t("users.username")}</label>
+          <input value={form.username} onChange={(e) => setForm({ ...form, username: e.target.value })} autoCapitalize="none" />
+          <div className="hint">{t("users.usernameHint")}</div>
+          <label>{t("users.displayName")}</label>
+          <input value={form.display_name} onChange={(e) => setForm({ ...form, display_name: e.target.value })} />
+          <label>{t("users.password")}</label>
+          <input type="password" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} autoComplete="new-password" />
+          <div className="hint">{t("users.passwordHint")}</div>
+          <label>{t("users.role")}</label>
+          <select value={form.role} onChange={(e) => setForm({ ...form, role: e.target.value })}>
+            <option value="user">{t("users.roleUser")}</option>
+            <option value="admin">{t("users.roleAdmin")}</option>
+          </select>
+        </div>
+        <button
+          className="primary"
+          style={{ marginTop: 12 }}
+          disabled={!form.username.trim()}
+          onClick={() =>
+            run(async () => {
+              await post("/users", { ...form, password: form.password || undefined });
+              setForm({ username: "", display_name: "", password: "", role: "user" });
+            })
+          }
+        >
+          + {t("common.add")}
+        </button>
+      </div>
+    </>
+  );
+}