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,252 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { post } from "../api";
|
||||
import { fmtRelative, useT } from "../i18n";
|
||||
import { Spinner } from "./Activity";
|
||||
|
||||
export interface GitFile {
|
||||
path: string;
|
||||
index: string;
|
||||
worktree: string;
|
||||
from?: string;
|
||||
}
|
||||
|
||||
export interface GitStatus {
|
||||
repo: string;
|
||||
branch: string | null;
|
||||
upstream: string | null;
|
||||
ahead: number;
|
||||
behind: number;
|
||||
files: GitFile[];
|
||||
}
|
||||
|
||||
interface Commit {
|
||||
hash: string;
|
||||
author: string;
|
||||
time: number;
|
||||
subject: string;
|
||||
refs: string;
|
||||
}
|
||||
|
||||
const LABEL: Record<string, string> = { M: "M", A: "A", D: "D", R: "R", C: "C", U: "!", "?": "U" };
|
||||
|
||||
export function GitPanel({
|
||||
repo,
|
||||
status,
|
||||
refresh,
|
||||
showDiff,
|
||||
openFile,
|
||||
}: {
|
||||
repo: string;
|
||||
status?: GitStatus;
|
||||
refresh: () => Promise<void>;
|
||||
showDiff: (title: string, diff: string) => void;
|
||||
openFile: (path: string) => void;
|
||||
}) {
|
||||
const t = useT();
|
||||
const [message, setMessage] = useState("");
|
||||
const [amend, setAmend] = useState(false);
|
||||
const [busy, setBusy] = useState<string>();
|
||||
const [output, setOutput] = useState<{ ok: boolean; text: string }>();
|
||||
const [branches, setBranches] = useState<{ name: string; current: boolean }[]>([]);
|
||||
const [log, setLog] = useState<Commit[]>([]);
|
||||
const [view, setView] = useState<"changes" | "history">("changes");
|
||||
|
||||
const call = async <T,>(action: string, extra: Record<string, unknown> = {}): Promise<T> => post<T>("/git", { path: repo, action, ...extra });
|
||||
|
||||
const run = async (label: string, fn: () => Promise<unknown>, showOutput = false) => {
|
||||
setBusy(label);
|
||||
setOutput(undefined);
|
||||
try {
|
||||
const r: any = await fn();
|
||||
if (showOutput) setOutput({ ok: true, text: (r?.output ?? "").trim() || t("git.done") });
|
||||
await refresh();
|
||||
void loadMeta();
|
||||
} catch (e: any) {
|
||||
setOutput({ ok: false, text: e.message });
|
||||
} finally {
|
||||
setBusy(undefined);
|
||||
}
|
||||
};
|
||||
|
||||
const loadMeta = async () => {
|
||||
try {
|
||||
const [b, l] = await Promise.all([call<{ branches: any[] }>("branches"), call<{ commits: Commit[] }>("log", { limit: 60 })]);
|
||||
setBranches(b.branches.filter((x: any) => !String(x.name).startsWith("origin/HEAD")));
|
||||
setLog(l.commits);
|
||||
} catch {
|
||||
/* empty repository */
|
||||
}
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
useEffect(() => void loadMeta(), [repo]);
|
||||
|
||||
if (!status) return <div className="empty"><Spinner /></div>;
|
||||
const abs = (f: GitFile) => `${status.repo}/${f.path}`;
|
||||
const staged = status.files.filter((f) => f.index !== " " && f.index !== "?");
|
||||
const unstaged = status.files.filter((f) => f.worktree !== " " || f.index === "?");
|
||||
|
||||
const diff = async (f: GitFile, isStaged: boolean) => {
|
||||
try {
|
||||
const r = await call<{ diff: string }>("diff", { files: [abs(f)], staged: isStaged });
|
||||
showDiff(`${f.path}${isStaged ? ` (${t("git.staged")})` : ""}`, r.diff);
|
||||
} catch (e: any) {
|
||||
alert(e.message);
|
||||
}
|
||||
};
|
||||
|
||||
const fileRow = (f: GitFile, isStaged: boolean) => {
|
||||
const code = isStaged ? f.index : f.index === "?" ? "?" : f.worktree;
|
||||
return (
|
||||
<div key={`${isStaged}-${f.path}`} className="git-file">
|
||||
<span className={`git-mark m-${LABEL[code] ?? code}`}>{LABEL[code] ?? code}</span>
|
||||
<button className="ghost git-name" onClick={() => diff(f, isStaged)} title={f.path}>
|
||||
{f.path}
|
||||
</button>
|
||||
<button className="small ghost" title={t("git.openFile")} onClick={() => openFile(abs(f))}>
|
||||
↗
|
||||
</button>
|
||||
{isStaged ? (
|
||||
<button className="small" title={t("git.unstage")} onClick={() => run("unstage", () => call("unstage", { files: [abs(f)] }))}>
|
||||
−
|
||||
</button>
|
||||
) : (
|
||||
<>
|
||||
{f.index !== "?" && (
|
||||
<button className="small ghost danger" title={t("git.discard")} onClick={() => confirm(t("git.discardConfirm", { file: f.path })) && run("discard", () => call("discard", { files: [abs(f)] }))}>
|
||||
↺
|
||||
</button>
|
||||
)}
|
||||
<button className="small" title={t("git.stage")} onClick={() => run("stage", () => call("stage", { files: [abs(f)] }))}>
|
||||
+
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="git-panel">
|
||||
<div className="git-branch">
|
||||
<select
|
||||
value={branches.find((b) => b.current)?.name ?? status.branch ?? ""}
|
||||
onChange={(e) => run("checkout", () => call("checkout", { branch: e.target.value.replace(/^origin\//, "") }), true)}
|
||||
aria-label={t("git.branch")}
|
||||
>
|
||||
{!branches.length && <option>{status.branch}</option>}
|
||||
{branches.map((b) => (
|
||||
<option key={b.name} value={b.name}>
|
||||
{b.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
className="small"
|
||||
title={t("git.newBranch")}
|
||||
onClick={() => {
|
||||
const name = prompt(t("git.newBranchName"));
|
||||
if (name) void run("checkout", () => call("checkout", { branch: name, create: true }), true);
|
||||
}}
|
||||
>
|
||||
+
|
||||
</button>
|
||||
{status.upstream && (
|
||||
<span className="chip" title={status.upstream}>
|
||||
↑{status.ahead} ↓{status.behind}
|
||||
</span>
|
||||
)}
|
||||
<span className="spacer" />
|
||||
{(["fetch", "pull", "push"] as const).map((a) => (
|
||||
<button key={a} className="small" disabled={!!busy} onClick={() => run(a, () => call(a), true)}>
|
||||
{busy === a ? <Spinner small /> : t(`git.${a}`)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{output && <pre className={`git-output ${output.ok ? "" : "err"}`}>{output.text}</pre>}
|
||||
|
||||
<div className="mode-tabs" style={{ margin: "8px 0" }}>
|
||||
<button className={view === "changes" ? "active" : ""} onClick={() => setView("changes")}>
|
||||
{t("git.changes")} ({status.files.length})
|
||||
</button>
|
||||
<button className={view === "history" ? "active" : ""} onClick={() => setView("history")}>
|
||||
{t("git.history")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{view === "changes" ? (
|
||||
<>
|
||||
<div className="git-section">
|
||||
<div className="git-head">
|
||||
{t("git.staged")} ({staged.length})
|
||||
{staged.length > 0 && (
|
||||
<button className="small ghost" onClick={() => run("unstage", () => call("unstage", { files: staged.map(abs) }))}>
|
||||
{t("git.unstageAll")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{staged.map((f) => fileRow(f, true))}
|
||||
</div>
|
||||
<div className="git-section">
|
||||
<div className="git-head">
|
||||
{t("git.unstaged")} ({unstaged.length})
|
||||
{unstaged.length > 0 && (
|
||||
<button className="small ghost" onClick={() => run("stage", () => call("stage", { files: unstaged.map(abs) }))}>
|
||||
{t("git.stageAll")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{unstaged.map((f) => fileRow(f, false))}
|
||||
{status.files.length === 0 && <div className="empty" style={{ padding: 12 }}>{t("git.clean")}</div>}
|
||||
</div>
|
||||
<div className="git-commit">
|
||||
<textarea rows={3} placeholder={t("git.message")} value={message} onChange={(e) => setMessage(e.target.value)} />
|
||||
<div className="row">
|
||||
<label style={{ fontSize: 12.5 }}>
|
||||
<input type="checkbox" checked={amend} onChange={(e) => setAmend(e.target.checked)} /> {t("git.amend")}
|
||||
</label>
|
||||
<span className="spacer" />
|
||||
<button
|
||||
className="primary"
|
||||
disabled={!!busy || (!amend && (!message.trim() || staged.length === 0))}
|
||||
onClick={() =>
|
||||
run(
|
||||
"commit",
|
||||
async () => {
|
||||
const r = await call("commit", { message, amend });
|
||||
setMessage("");
|
||||
setAmend(false);
|
||||
return r;
|
||||
},
|
||||
true,
|
||||
)
|
||||
}
|
||||
>
|
||||
{busy === "commit" ? <Spinner small /> : t("git.commit")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="git-log">
|
||||
{log.length === 0 && <div className="empty">{t("git.noCommits")}</div>}
|
||||
{log.map((c) => (
|
||||
<button
|
||||
key={c.hash}
|
||||
className="git-commit-row"
|
||||
onClick={async () => {
|
||||
const r = await call<{ diff: string }>("show", { rev: c.hash });
|
||||
showDiff(`${c.hash.slice(0, 8)} ${c.subject}`, r.diff);
|
||||
}}
|
||||
>
|
||||
<span className="subject">{c.subject}</span>
|
||||
<span className="meta">
|
||||
{c.hash.slice(0, 7)} · {c.author} · {fmtRelative(c.time)}
|
||||
{c.refs && <span className="chip" style={{ marginLeft: 6 }}>{c.refs}</span>}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user