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>
This commit is contained in:
Richard ZinkandClaude Opus 5.5 committed
1 parent
f3a2fe3816
commit
49262c612c
70 files changed
+8495
-714
No files matched your search
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user