Split view, personal modes, budget warnings, server move script
- Up to three chats side by side (#/s/a+b+c), "Open beside" in the sidebar menu
- File manager tabs of a chat stored per user on the server (/sessions/{id}/tabs)
- Personal modes for every user (Settings → My modes, /account/modes)
- Budget meters (total, provider, images, opencode Go windows) with push warnings
for admins at the warning share and 100 %, shown in the status overlay
- scripts/move-server.sh: move to another Docker host with bind mounts (Unraid);
scripts/smoke-test.sh
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Richard ZinkandClaude Opus 5.5 committed
1 parent
81ee084ff2
commit
d152ad836d
26 files changed
+836
-52
No files matched your search
@@ -0,0 +1,148 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { get, put } from "../../api";
|
||||
import { confirmDialog, toast } from "../../dialogs";
|
||||
import { useFetch } from "../../hooks";
|
||||
import { useT } from "../../i18n";
|
||||
import { Icon } from "../Icon";
|
||||
import { ModelSelect } from "../ModelSelect";
|
||||
import { ToolPicker, type ToolInfo } from "./AgentsEditor";
|
||||
|
||||
interface Mode {
|
||||
description?: string | null;
|
||||
prompt?: string | null;
|
||||
model?: string | null;
|
||||
tools?: string[] | null;
|
||||
read_only?: boolean | null;
|
||||
style?: "coding" | "chat" | null;
|
||||
}
|
||||
|
||||
/** Modes a user creates for themselves; they appear in New session and the mode selector. */
|
||||
export function PersonalModes() {
|
||||
const t = useT();
|
||||
const tools = useFetch<ToolInfo[]>("/agents/tools").data ?? [];
|
||||
const [modes, setModes] = useState<Record<string, Mode>>();
|
||||
const [open, setOpen] = useState<string>();
|
||||
const [name, setName] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
get<Record<string, Mode>>("/account/modes")
|
||||
.then(setModes)
|
||||
.catch((e) => toast(e));
|
||||
}, []);
|
||||
|
||||
const save = async (next: Record<string, Mode>) => {
|
||||
try {
|
||||
setModes(await put<Record<string, Mode>>("/account/modes", next));
|
||||
toast(t("settings.saved"), "success");
|
||||
return true;
|
||||
} catch (e) {
|
||||
toast(e);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const add = async () => {
|
||||
const n = name.trim();
|
||||
if (!/^[a-zA-Z0-9_-]+$/.test(n)) return toast(t("settings.invalidName"));
|
||||
if (modes?.[n]) return toast(t("modes.exists", { name: n }));
|
||||
if (await save({ ...modes, [n]: { style: "chat", description: "", prompt: "" } })) {
|
||||
setName("");
|
||||
setOpen(n);
|
||||
}
|
||||
};
|
||||
|
||||
const remove = async (n: string) => {
|
||||
if (!(await confirmDialog({ message: t("agents.deleteConfirm", { name: n }), danger: true, confirmLabel: t("common.delete") }))) return;
|
||||
const next = { ...modes };
|
||||
delete next[n];
|
||||
void save(next);
|
||||
};
|
||||
|
||||
if (!modes) return <div className="empty">{t("common.loading")}</div>;
|
||||
const names = Object.keys(modes).sort();
|
||||
return (
|
||||
<>
|
||||
<div className="notice">{t("modes.intro")}</div>
|
||||
{names.map((n) => (
|
||||
<ModeRow key={n + JSON.stringify(modes[n])} name={n} mode={modes[n]} tools={tools} open={open === n} onToggle={() => setOpen(open === n ? undefined : n)} onSave={(m) => save({ ...modes, [n]: m })} onRemove={() => remove(n)} />
|
||||
))}
|
||||
{names.length === 0 && <div className="empty">{t("modes.none")}</div>}
|
||||
<div className="panel">
|
||||
<h3>{t("agents.addMode")}</h3>
|
||||
<div className="row">
|
||||
<input placeholder={t("settings.name")} value={name} onChange={(e) => setName(e.target.value)} onKeyDown={(e) => e.key === "Enter" && void add()} />
|
||||
<button className="primary" onClick={() => void add()} disabled={!name.trim()}>
|
||||
+ {t("agents.addMode")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function ModeRow({ name, mode, tools, open, onToggle, onSave, onRemove }: { name: string; mode: Mode; tools: ToolInfo[]; open: boolean; onToggle: () => void; onSave: (m: Mode) => Promise<boolean>; onRemove: () => void }) {
|
||||
const t = useT();
|
||||
const [form, setForm] = useState({
|
||||
description: mode.description ?? "",
|
||||
prompt: mode.prompt ?? "",
|
||||
model: mode.model ?? "",
|
||||
tools: mode.tools ?? [],
|
||||
read_only: !!mode.read_only,
|
||||
style: (mode.style ?? "coding") as "coding" | "chat",
|
||||
});
|
||||
const submit = () =>
|
||||
void onSave({
|
||||
description: form.description || null,
|
||||
prompt: form.prompt || null,
|
||||
model: form.model || null,
|
||||
tools: form.tools.length ? form.tools : null,
|
||||
read_only: form.read_only || null,
|
||||
style: form.style === "chat" ? "chat" : null,
|
||||
});
|
||||
return (
|
||||
<div className="panel">
|
||||
<h3>
|
||||
{name}
|
||||
<span className="chip">{form.style === "chat" ? t("agents.styleChatShort") : t("agents.styleCodingShort")}</span>
|
||||
{form.read_only && <span className="chip">{t("agents.readOnly")}</span>}
|
||||
<span className="spacer" />
|
||||
<button className="small ghost danger" onClick={onRemove} title={t("common.delete")} aria-label={t("common.delete")}>
|
||||
<Icon name="trash" />
|
||||
</button>
|
||||
<button className="small" onClick={onToggle}>
|
||||
{open ? t("common.collapse") : t("common.edit")}
|
||||
</button>
|
||||
</h3>
|
||||
{!open && mode.description && <div className="hint">{mode.description}</div>}
|
||||
{open && (
|
||||
<>
|
||||
<div className="form">
|
||||
<label>{t("agents.description")}</label>
|
||||
<input value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} />
|
||||
<label>{t("agents.style")}</label>
|
||||
<select value={form.style} onChange={(e) => setForm({ ...form, style: e.target.value as "coding" | "chat" })}>
|
||||
<option value="coding">{t("agents.styleCoding")}</option>
|
||||
<option value="chat">{t("agents.styleChat")}</option>
|
||||
</select>
|
||||
<label>{t("agents.model")}</label>
|
||||
<ModelSelect value={form.model} onChange={(v) => setForm({ ...form, model: v })} emptyLabel={t("agents.sessionModel")} />
|
||||
<label>{t("agents.readOnlyLabel")}</label>
|
||||
<label className="row" style={{ gap: 6, alignItems: "center" }}>
|
||||
<input type="checkbox" checked={form.read_only} onChange={(e) => setForm({ ...form, read_only: e.target.checked })} />
|
||||
<span className="hint">{t("agents.readOnlyHint")}</span>
|
||||
</label>
|
||||
<label>{t("agents.tools")}</label>
|
||||
<ToolPicker tools={tools} value={form.tools} onChange={(v) => setForm({ ...form, tools: v })} readOnly={form.read_only} />
|
||||
<label>{t("agents.prompt")}</label>
|
||||
<textarea rows={8} value={form.prompt} placeholder={t("modes.promptPlaceholder")} onChange={(e) => setForm({ ...form, prompt: e.target.value })} />
|
||||
</div>
|
||||
<div className="row" style={{ marginTop: 12 }}>
|
||||
<button className="primary" onClick={submit}>
|
||||
{t("common.save")}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user