("");
+
+ useLayoutEffect(() => {
+ const body = bodyRef.current;
+ if (!body) return;
+ if (stickToBottomRef.current) {
+ body.scrollTop = body.scrollHeight;
+ }
+ }, [rows]);
+
+ useEffect(() => {
+ void getLogsFolder()
+ .then(setLogsFolder)
+ .catch(() => undefined);
+ }, []);
+
+ const latestLevel = rows.length > 0 ? rows[rows.length - 1].level : "info";
+
+ if (collapsed) {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+}
diff --git a/docs/reference-repos/adainrivers/app/src/components/management/AdminTab.tsx b/docs/reference-repos/adainrivers/app/src/components/management/AdminTab.tsx
new file mode 100644
index 0000000..4455cb5
--- /dev/null
+++ b/docs/reference-repos/adainrivers/app/src/components/management/AdminTab.tsx
@@ -0,0 +1,789 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+ AlertDialog,
+ Badge,
+ Box,
+ Button,
+ Checkbox,
+ Flex,
+ Select,
+ Table,
+ Text,
+ TextArea,
+ TextField,
+} from "@radix-ui/themes";
+
+import { managementApi } from "../../services/management";
+import type {
+ Category,
+ CommandSpec,
+ FieldSpec,
+ HistoryDto,
+ PublishResultDto,
+} from "../../types/management";
+import { formatTime } from "../../utils/formatting";
+import Combobox from "./Combobox";
+
+export type AdminTabPrefill = {
+ commandId: string;
+ values: Record;
+} | null;
+
+export type AdminTabProps = {
+ tunnelId: string;
+ prefill?: AdminTabPrefill;
+ onPrefillConsumed?: () => void;
+};
+
+const CATEGORY_LABEL: Record = {
+ items: "Inventory",
+ player: "Player ops",
+ progression: "Progression",
+ movement: "Teleport & spawn",
+ broadcast: "Broadcast",
+ journey: "Story journey",
+ exec: "Server scripts",
+};
+
+const CATEGORY_ORDER: Category[] = [
+ "broadcast",
+ "items",
+ "player",
+ "progression",
+ "movement",
+ "journey",
+ "exec",
+];
+
+const CLIENT_DEFAULTS: Record = {
+ Quantity: 1,
+ Durability: 1.0,
+ WaterAmount: 1_000_000,
+ Experience: 1000,
+ Level: 1,
+ SkillPoints: 0,
+ BroadcastType: "Generic",
+ BroadcastDuration: 30,
+ Persistent: 1.0,
+};
+
+function applyDefaults(spec: CommandSpec): Record {
+ const out: Record = {};
+ for (const field of spec.fields) {
+ if (CLIENT_DEFAULTS[field.key] !== undefined) {
+ out[field.key] = CLIENT_DEFAULTS[field.key];
+ } else if (field.default !== undefined && field.default !== null) {
+ out[field.key] = field.default;
+ }
+ }
+ return out;
+}
+
+export default function AdminTab({ tunnelId, prefill, onPrefillConsumed }: AdminTabProps) {
+ const [commands, setCommands] = useState([]);
+ const [selected, setSelected] = useState(null);
+ const [values, setValues] = useState>({});
+ const [history, setHistory] = useState([]);
+ const [busy, setBusy] = useState(false);
+ const [result, setResult] = useState(null);
+ const [error, setError] = useState(null);
+ const [confirmOpen, setConfirmOpen] = useState(false);
+ const appliedRef = useRef<{ selectedId: string; prefillFp: string | null } | null>(null);
+ // Templates available for the currently-picked vehicle (SpawnVehicleAt).
+ // Populated whenever values.ClassName changes so TemplateName renders as a
+ // proper combobox of valid options instead of a free-text field.
+ const [vehicleTemplates, setVehicleTemplates] = useState([]);
+
+ const refreshHistory = useCallback(async () => {
+ try {
+ const list = await managementApi.history(tunnelId, 30);
+ setHistory(list);
+ } catch (err) {
+ setError(String(err));
+ }
+ }, [tunnelId]);
+
+ useEffect(() => {
+ managementApi
+ .listCommands(tunnelId)
+ .then(setCommands)
+ .catch((err) => setError(String(err)));
+ void refreshHistory();
+ }, [tunnelId, refreshHistory]);
+
+ useEffect(() => {
+ // Reset values + apply prefill exactly once per (selected, prefill) pair.
+ // The earlier two-effect version raced; the single-effect version still
+ // clobbered prefill on the next render after onPrefillConsumed cleared it
+ // because the [prefill] dep change re-ran the defaults reset. Track what
+ // we've already applied so post-consumption re-renders are a no-op.
+ if (!selected) {
+ appliedRef.current = null;
+ return;
+ }
+ const prefillFp =
+ prefill && prefill.commandId === selected.id ? JSON.stringify(prefill) : null;
+ const current = appliedRef.current;
+
+ if (!current || current.selectedId !== selected.id) {
+ // Brand new command pick (sidebar click or first prefill into a new command).
+ if (prefillFp) {
+ setValues({ ...applyDefaults(selected), ...(prefill?.values ?? {}) });
+ onPrefillConsumed?.();
+ } else {
+ setValues(applyDefaults(selected));
+ }
+ setResult(null);
+ appliedRef.current = { selectedId: selected.id, prefillFp };
+ return;
+ }
+
+ // Same command. Only act if a NEW prefill arrived for it.
+ if (prefillFp && prefillFp !== current.prefillFp) {
+ setValues((prev) => ({ ...prev, ...(prefill?.values ?? {}) }));
+ setResult(null);
+ onPrefillConsumed?.();
+ appliedRef.current = { selectedId: selected.id, prefillFp };
+ }
+ // Otherwise the prefill was cleared after we consumed it — leave values alone.
+ }, [selected, prefill, onPrefillConsumed]);
+
+ useEffect(() => {
+ // If a prefill arrives for a command different from what's currently
+ // selected, switch the sidebar to that command. The effect above will
+ // then notice prefill.commandId === selected.id and apply the values.
+ if (!prefill || commands.length === 0) return;
+ if (selected?.id === prefill.commandId) return;
+ const target = commands.find((c) => c.id === prefill.commandId);
+ if (!target) return;
+ setSelected(target);
+ }, [prefill, commands, selected?.id]);
+
+ useEffect(() => {
+ // For SpawnVehicleAt, look up the templates of the picked vehicle so the
+ // TemplateName field can render its real options.
+ const cls =
+ selected?.id === "SpawnVehicleAt" && typeof values.ClassName === "string"
+ ? (values.ClassName as string).trim()
+ : "";
+ if (!cls) {
+ setVehicleTemplates([]);
+ return;
+ }
+ let cancelled = false;
+ (async () => {
+ try {
+ const matches = await managementApi.searchVehicles(tunnelId, cls, 10);
+ const hit = matches.find((v) => v.id === cls || v.actor_class === cls);
+ const templates = hit?.templates ?? [];
+ if (cancelled) return;
+ setVehicleTemplates(templates);
+ // If the current TemplateName isn't valid for this vehicle, auto-pick
+ // the first available one. Keeps the form submittable without the user
+ // having to know that TreadWheel doesn't carry a T0.
+ if (templates.length > 0) {
+ setValues((prev) => {
+ const current = typeof prev.TemplateName === "string" ? prev.TemplateName : "";
+ if (current && templates.includes(current)) return prev;
+ return { ...prev, TemplateName: templates[0] };
+ });
+ }
+ } catch {
+ if (!cancelled) setVehicleTemplates([]);
+ }
+ })();
+ return () => {
+ cancelled = true;
+ };
+ }, [selected?.id, values.ClassName, tunnelId]);
+
+ const grouped = useMemo(() => groupByCategory(commands), [commands]);
+
+ const doPublish = useCallback(async () => {
+ if (!selected) return;
+ setBusy(true);
+ setError(null);
+ setResult(null);
+ try {
+ const out = await managementApi.publish(tunnelId, selected.id, values);
+ setResult(out);
+ await refreshHistory();
+ } catch (err) {
+ setError(String(err));
+ } finally {
+ setBusy(false);
+ }
+ }, [selected, tunnelId, values, refreshHistory]);
+
+ const publish = useCallback(() => {
+ if (!selected) return;
+ if (selected.destructive) {
+ setConfirmOpen(true);
+ } else {
+ void doPublish();
+ }
+ }, [selected, doPublish]);
+
+ return (
+
+
+
+ Commands
+
+ {CATEGORY_ORDER.map((cat) => {
+ const specs = grouped[cat];
+ if (!specs || specs.length === 0) return null;
+ return (
+
+
+ {CATEGORY_LABEL[cat] ?? cat}
+
+
+ {specs.map((spec) => (
+
+ ))}
+
+
+ );
+ })}
+
+
+ {selected ? (
+
+
+
+ {selected.label}
+
+ {selected.destructive ? destructive : null}
+
+
+ {selected.describe}
+
+
+ {visibleFields(selected, values).map((field) => (
+ setValues((prev) => ({ ...prev, [field.key]: v }))}
+ tunnelId={tunnelId}
+ vehicleTemplates={vehicleTemplates}
+ />
+ ))}
+
+ {selected.id === "SpawnVehicleAt" ? (
+
+ setValues((prev) => ({ ...prev, X: loc.x, Y: loc.y, Z: loc.z }))
+ }
+ />
+ ) : null}
+
+
+ {result ? (
+ {result.ok ? "ok" : "failed"}
+ ) : null}
+
+ {result && !result.ok && result.error ? (
+
+ {result.error}
+
+ ) : null}
+ {result?.output ? (
+
+ {result.output}
+
+ ) : null}
+ {error ? (
+
+ {error}
+
+ ) : null}
+
+ ) : (
+ Select a command on the left.
+ )}
+
+
+
+ Recent publishes
+
+
+
+
+ Cmd
+ OK
+ When
+
+
+
+ {history.map((h) => (
+
+
+ {h.command}
+
+
+ {h.ok ? "ok" : "fail"}
+
+
+ {formatTime(h.createdAt)}
+
+
+ ))}
+
+
+
+
+
+
+ Run {selected?.label}?
+
+ This command is destructive and cannot be undone. {selected?.describe}
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function groupByCategory(specs: CommandSpec[]): Record {
+ const out: Record = {};
+ for (const spec of specs) {
+ if (!out[spec.category]) out[spec.category] = [];
+ out[spec.category].push(spec);
+ }
+ return out;
+}
+
+function compareText(a: string | undefined | null, b: string | undefined | null): number {
+ return (a || "").localeCompare(b || "", undefined, { sensitivity: "base", numeric: true });
+}
+
+function comparePlayers(a: any, b: any): number {
+ const aOnline = String(a.online || "").toLowerCase() === "online";
+ const bOnline = String(b.online || "").toLowerCase() === "online";
+ if (aOnline !== bOnline) return aOnline ? -1 : 1;
+ return compareText(a.name || a.flsId, b.name || b.flsId);
+}
+
+function sortCommandOptions(kind: ComboboxKind, options: any[]): any[] {
+ const rows = [...options];
+ if (kind === "players") return rows.sort(comparePlayers);
+ if (kind === "vehicles") return rows.sort((a, b) => compareText(a.id, b.id));
+ return rows.sort((a, b) => compareText(a.name || a.id, b.name || b.id));
+}
+
+function UsePlayerPositionButton({
+ tunnelId,
+ playerId,
+ onLocation,
+}: {
+ tunnelId: string;
+ playerId: string | undefined;
+ onLocation: (loc: { x: number; y: number; z: number }) => void;
+}) {
+ const [busy, setBusy] = useState(false);
+ const [error, setError] = useState(null);
+ const enabled = !!playerId && !busy;
+
+ const click = useCallback(async () => {
+ if (!playerId) return;
+ setBusy(true);
+ setError(null);
+ try {
+ const loc = await managementApi.playerLocation(tunnelId, playerId);
+ onLocation(loc);
+ } catch (err) {
+ // Backend wraps proxy errors as `GET /path -> STATUS: {"error":"…"}`.
+ // Pull out the inner `error` field for a readable message; fall back to raw.
+ const raw = String(err);
+ let nice = raw;
+ const bodyStart = raw.indexOf("{");
+ if (bodyStart >= 0) {
+ try {
+ const obj = JSON.parse(raw.slice(bodyStart));
+ if (obj && typeof obj.error === "string") nice = obj.error;
+ } catch {
+ // leave nice as raw
+ }
+ }
+ setError(nice);
+ } finally {
+ setBusy(false);
+ }
+ }, [tunnelId, playerId, onLocation]);
+
+ return (
+
+
+ {!playerId ? (
+
+ (pick a player first)
+
+ ) : null}
+ {error ? (
+
+ {error}
+
+ ) : null}
+
+ );
+}
+
+type ComboboxKind = "items" | "vehicles" | "players" | "skill-modules";
+
+function comboboxKindFor(fieldKey: string): ComboboxKind | null {
+ switch (fieldKey) {
+ case "ItemName":
+ return "items";
+ case "ClassName":
+ return "vehicles";
+ case "PlayerId":
+ return "players";
+ case "Module":
+ return "skill-modules";
+ default:
+ return null;
+ }
+}
+
+function FieldInput({
+ field,
+ value,
+ onChange,
+ tunnelId,
+ vehicleTemplates,
+}: {
+ field: FieldSpec;
+ value: unknown;
+ onChange: (v: unknown) => void;
+ tunnelId: string;
+ vehicleTemplates: string[];
+}) {
+ const comboKind = comboboxKindFor(field.key);
+ const templateMode = field.key === "TemplateName" && vehicleTemplates.length > 0;
+ return (
+
+
+
+ {field.label}
+ {field.required ? " *" : ""}
+
+ {field.helper ? (
+
+ {field.helper}
+
+ ) : null}
+
+
+ {templateMode ? (
+
+ ) : comboKind ? (
+
+ ) : (
+ renderInput(field, value, onChange)
+ )}
+
+
+ );
+}
+
+function TemplateCombobox({
+ value,
+ onPick,
+ templates,
+}: {
+ value: string;
+ onPick: (v: unknown) => void;
+ templates: string[];
+}) {
+ const loadOptions = useCallback(
+ async (query: string) => {
+ const q = query.trim().toLowerCase();
+ const filtered = q
+ ? templates.filter((t) => t.toLowerCase().includes(q))
+ : templates;
+ return [...filtered].sort(compareText).map((name) => ({ name }));
+ },
+ [templates],
+ );
+ return (
+ o.name}
+ resolveLabel={async (id) => id}
+ renderOption={(o: { name: string }) => (
+ {o.name}
+ )}
+ placeholder="Pick a template…"
+ searchPlaceholder="Filter templates…"
+ />
+ );
+}
+
+/// Filters the spec's field list down to what's relevant for the current
+/// values. Today only ServiceBroadcast has conditional fields — Generic
+/// hides the shutdown-specific knobs, ServerShutdown hides Generic-only
+/// fields, and a `ShouldCancel=true` hides everything except the cancel
+/// toggle itself.
+function visibleFields(
+ spec: CommandSpec,
+ values: Record,
+): FieldSpec[] {
+ if (spec.id !== "ServiceBroadcast") return [...spec.fields];
+ const broadcastType = (values.BroadcastType as string) || "Generic";
+ const shouldCancel = values.ShouldCancel === true;
+ const GENERIC_ONLY = new Set(["Title", "Body"]);
+ const SHUTDOWN_ONLY = new Set([
+ "ShutdownType",
+ "ShutdownDuration",
+ "BroadcastFrequency",
+ "ShouldCancel",
+ ]);
+ return spec.fields.filter((field) => {
+ if (field.key === "BroadcastType") return true;
+ if (broadcastType === "Generic") {
+ if (SHUTDOWN_ONLY.has(field.key)) return false;
+ return true;
+ }
+ // ServerShutdown branch
+ if (GENERIC_ONLY.has(field.key)) return false;
+ if (shouldCancel && field.key !== "ShouldCancel") return false;
+ return true;
+ });
+}
+
+function renderInput(field: FieldSpec, value: unknown, onChange: (v: unknown) => void) {
+ const strValue = value === undefined || value === null ? "" : String(value);
+ if (field.kind === "select" && field.options) {
+ return (
+
+
+
+ {field.options.map((opt) => (
+
+ {opt.label}
+
+ ))}
+
+
+ );
+ }
+ if (field.kind === "text") {
+ return