From f0bfaecb0b31f1c6863f150188451d81b998021a Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Sat, 14 Feb 2026 12:45:23 +0100
Subject: [PATCH] feat: add settings page with guild config, game settings, and
 command toggles

Implements the full admin settings page covering all game settings
(leveling, economy, inventory, lootdrops, trivia, moderation, commands)
and guild settings (roles, channels, welcome message, moderation,
feature overrides). Includes role/channel pickers, trivia category
multi-select, and a feature override flag editor.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 api/src/routes/settings.routes.ts |    2 +-
 panel/src/App.tsx                 |    3 +
 panel/src/lib/useSettings.ts      |  192 ++++
 panel/src/pages/Settings.tsx      | 1411 +++++++++++++++++++++++++++++
 4 files changed, 1607 insertions(+), 1 deletion(-)
 create mode 100644 panel/src/lib/useSettings.ts
 create mode 100644 panel/src/pages/Settings.tsx

diff --git a/api/src/routes/settings.routes.ts b/api/src/routes/settings.routes.ts
index eb055ce..1e22c67 100644
--- a/api/src/routes/settings.routes.ts
+++ b/api/src/routes/settings.routes.ts
@@ -139,7 +139,7 @@ async function handler(ctx: RouteContext): Promise<Response | null> {
                     return a.name.localeCompare(b.name);
                 });
 
-            return jsonResponse({ roles, channels, commands });
+            return jsonResponse({ guildId: env.DISCORD_GUILD_ID, roles, channels, commands });
         }, "fetch settings meta");
     }
 
diff --git a/panel/src/App.tsx b/panel/src/App.tsx
index 376fa7c..09b301c 100644
--- a/panel/src/App.tsx
+++ b/panel/src/App.tsx
@@ -3,6 +3,7 @@ import { useAuth } from "./lib/useAuth";
 import { Loader2 } from "lucide-react";
 import Layout, { type Page } from "./components/Layout";
 import Dashboard from "./pages/Dashboard";
+import Settings from "./pages/Settings";
 import PlaceholderPage from "./pages/PlaceholderPage";
 
 const placeholders: Record<string, { title: string; description: string }> = {
@@ -74,6 +75,8 @@ export default function App() {
     <Layout user={user} logout={logout} currentPage={page} onNavigate={setPage}>
       {page === "dashboard" ? (
         <Dashboard />
+      ) : page === "settings" ? (
+        <Settings />
       ) : (
         <PlaceholderPage {...placeholders[page]!} />
       )}
diff --git a/panel/src/lib/useSettings.ts b/panel/src/lib/useSettings.ts
new file mode 100644
index 0000000..34be1fc
--- /dev/null
+++ b/panel/src/lib/useSettings.ts
@@ -0,0 +1,192 @@
+import { useCallback, useEffect, useState } from "react";
+import { get, post, put } from "./api";
+
+export interface LevelingConfig {
+  base: number;
+  exponent: number;
+  chat: {
+    cooldownMs: number;
+    minXp: number;
+    maxXp: number;
+  };
+}
+
+export interface EconomyConfig {
+  daily: {
+    amount: string;
+    streakBonus: string;
+    weeklyBonus: string;
+    cooldownMs: number;
+  };
+  transfers: {
+    allowSelfTransfer: boolean;
+    minAmount: string;
+  };
+  exam: {
+    multMin: number;
+    multMax: number;
+  };
+}
+
+export interface InventoryConfig {
+  maxStackSize: string;
+  maxSlots: number;
+}
+
+export interface LootdropConfig {
+  activityWindowMs: number;
+  minMessages: number;
+  spawnChance: number;
+  cooldownMs: number;
+  reward: {
+    min: number;
+    max: number;
+    currency: string;
+  };
+}
+
+export interface TriviaConfig {
+  entryFee: string;
+  rewardMultiplier: number;
+  timeoutSeconds: number;
+  cooldownMs: number;
+  categories: number[];
+  difficulty: string;
+}
+
+export interface ModerationConfig {
+  prune: {
+    maxAmount: number;
+    confirmThreshold: number;
+    batchSize: number;
+    batchDelayMs: number;
+  };
+}
+
+export interface GameSettings {
+  leveling: LevelingConfig;
+  economy: EconomyConfig;
+  inventory: InventoryConfig;
+  lootdrop: LootdropConfig;
+  trivia: TriviaConfig;
+  moderation: ModerationConfig;
+  commands: Record<string, boolean>;
+  system: Record<string, unknown>;
+}
+
+export interface GuildSettings {
+  guildId: string;
+  configured: boolean;
+  studentRoleId?: string;
+  visitorRoleId?: string;
+  colorRoleIds?: string[];
+  welcomeChannelId?: string;
+  welcomeMessage?: string;
+  feedbackChannelId?: string;
+  terminalChannelId?: string;
+  terminalMessageId?: string;
+  moderationLogChannelId?: string;
+  moderationDmOnWarn?: boolean;
+  moderationAutoTimeoutThreshold?: number;
+  featureOverrides?: Record<string, boolean>;
+}
+
+export interface SettingsMeta {
+  guildId?: string;
+  roles: Array<{ id: string; name: string; color: string }>;
+  channels: Array<{ id: string; name: string; type: number }>;
+  commands: Array<{ name: string; category: string }>;
+}
+
+export function useSettings() {
+  const [settings, setSettings] = useState<GameSettings | null>(null);
+  const [guildSettings, setGuildSettings] = useState<GuildSettings | null>(null);
+  const [meta, setMeta] = useState<SettingsMeta | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchSettings = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const [settingsData, metaData] = await Promise.all([
+        get<GameSettings>("/api/settings"),
+        get<SettingsMeta>("/api/settings/meta"),
+      ]);
+      setSettings(settingsData);
+      setMeta(metaData);
+
+      // Fetch guild settings if we have a guild ID
+      if (metaData.guildId) {
+        const gs = await get<GuildSettings>(
+          `/api/guilds/${metaData.guildId}/settings`
+        );
+        setGuildSettings(gs);
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to load settings");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchSettings();
+  }, [fetchSettings]);
+
+  const saveSettings = useCallback(
+    async (partial: Record<string, unknown>) => {
+      try {
+        setSaving(true);
+        setError(null);
+        await post("/api/settings", partial);
+        const updated = await get<GameSettings>("/api/settings");
+        setSettings(updated);
+        return true;
+      } catch (e) {
+        setError(e instanceof Error ? e.message : "Failed to save settings");
+        return false;
+      } finally {
+        setSaving(false);
+      }
+    },
+    []
+  );
+
+  const saveGuildSettings = useCallback(
+    async (data: Partial<GuildSettings>) => {
+      if (!meta?.guildId) return false;
+      try {
+        setSaving(true);
+        setError(null);
+        await put(`/api/guilds/${meta.guildId}/settings`, data);
+        const updated = await get<GuildSettings>(
+          `/api/guilds/${meta.guildId}/settings`
+        );
+        setGuildSettings(updated);
+        return true;
+      } catch (e) {
+        setError(
+          e instanceof Error ? e.message : "Failed to save guild settings"
+        );
+        return false;
+      } finally {
+        setSaving(false);
+      }
+    },
+    [meta?.guildId]
+  );
+
+  return {
+    settings,
+    guildSettings,
+    meta,
+    loading,
+    saving,
+    error,
+    saveSettings,
+    saveGuildSettings,
+    refetch: fetchSettings,
+  };
+}
diff --git a/panel/src/pages/Settings.tsx b/panel/src/pages/Settings.tsx
new file mode 100644
index 0000000..e1e36ca
--- /dev/null
+++ b/panel/src/pages/Settings.tsx
@@ -0,0 +1,1411 @@
+import { useCallback, useEffect, useState } from "react";
+import {
+  Loader2,
+  AlertTriangle,
+  Save,
+  Check,
+  TrendingUp,
+  Coins,
+  Package,
+  Gift,
+  Brain,
+  Shield,
+  Terminal,
+  RotateCcw,
+  Server,
+  X,
+} from "lucide-react";
+import { cn } from "../lib/utils";
+import {
+  useSettings,
+  type GameSettings,
+  type GuildSettings,
+  type SettingsMeta,
+} from "../lib/useSettings";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+type SettingsSection =
+  | "guild"
+  | "leveling"
+  | "economy"
+  | "inventory"
+  | "lootdrop"
+  | "trivia"
+  | "moderation"
+  | "commands";
+
+const sections: {
+  key: SettingsSection;
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+}[] = [
+  { key: "guild", label: "Guild", icon: Server },
+  { key: "leveling", label: "Leveling", icon: TrendingUp },
+  { key: "economy", label: "Economy", icon: Coins },
+  { key: "inventory", label: "Inventory", icon: Package },
+  { key: "lootdrop", label: "Lootdrops", icon: Gift },
+  { key: "trivia", label: "Trivia", icon: Brain },
+  { key: "moderation", label: "Moderation", icon: Shield },
+  { key: "commands", label: "Commands", icon: Terminal },
+];
+
+function formatMs(ms: number): string {
+  if (ms >= 86_400_000) return `${ms / 86_400_000}h`;
+  if (ms >= 60_000) return `${ms / 60_000} min`;
+  return `${ms / 1_000}s`;
+}
+
+// ---------------------------------------------------------------------------
+// Reusable field components
+// ---------------------------------------------------------------------------
+
+function Field({
+  label,
+  hint,
+  children,
+}: {
+  label: string;
+  hint?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="space-y-1.5">
+      <label className="block text-xs font-semibold text-text-secondary">
+        {label}
+      </label>
+      {children}
+      {hint && <p className="text-[11px] text-text-tertiary">{hint}</p>}
+    </div>
+  );
+}
+
+function NumberInput({
+  value,
+  onChange,
+  min,
+  max,
+  step,
+  className,
+}: {
+  value: number;
+  onChange: (v: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  className?: string;
+}) {
+  return (
+    <input
+      type="number"
+      value={value}
+      onChange={(e) => onChange(Number(e.target.value))}
+      min={min}
+      max={max}
+      step={step}
+      className={cn(
+        "w-full bg-input border border-border rounded-md px-3 py-2 text-sm font-mono text-foreground",
+        "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
+        "transition-colors",
+        className
+      )}
+    />
+  );
+}
+
+function StringInput({
+  value,
+  onChange,
+  placeholder,
+  className,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  className?: string;
+}) {
+  return (
+    <input
+      type="text"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      className={cn(
+        "w-full bg-input border border-border rounded-md px-3 py-2 text-sm font-mono text-foreground",
+        "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
+        "transition-colors",
+        className
+      )}
+    />
+  );
+}
+
+function TextArea({
+  value,
+  onChange,
+  placeholder,
+  rows = 3,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  rows?: number;
+}) {
+  return (
+    <textarea
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      rows={rows}
+      className={cn(
+        "w-full bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground resize-y",
+        "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
+        "transition-colors"
+      )}
+    />
+  );
+}
+
+function Toggle({
+  checked,
+  onChange,
+}: {
+  checked: boolean;
+  onChange: (v: boolean) => void;
+}) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      onClick={() => onChange(!checked)}
+      className={cn(
+        "relative inline-flex h-6 w-11 items-center rounded-full transition-colors",
+        checked ? "bg-primary" : "bg-raised"
+      )}
+    >
+      <span
+        className={cn(
+          "inline-block h-4 w-4 rounded-full bg-white transition-transform",
+          checked ? "translate-x-6" : "translate-x-1"
+        )}
+      />
+    </button>
+  );
+}
+
+function SelectInput({
+  value,
+  onChange,
+  options,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  options: { value: string; label: string }[];
+}) {
+  return (
+    <select
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      className={cn(
+        "w-full bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
+        "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
+        "transition-colors"
+      )}
+    >
+      {options.map((o) => (
+        <option key={o.value} value={o.value}>
+          {o.label}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+/** Role picker dropdown — selects a single role ID */
+function RolePicker({
+  value,
+  onChange,
+  roles,
+  placeholder = "Select a role…",
+}: {
+  value: string | undefined;
+  onChange: (v: string | undefined) => void;
+  roles: SettingsMeta["roles"];
+  placeholder?: string;
+}) {
+  return (
+    <select
+      value={value ?? ""}
+      onChange={(e) => onChange(e.target.value || undefined)}
+      className={cn(
+        "w-full bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
+        "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
+        "transition-colors"
+      )}
+    >
+      <option value="">{placeholder}</option>
+      {roles.map((r) => (
+        <option key={r.id} value={r.id}>
+          {r.name}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+/** Channel picker dropdown — selects a single channel ID (text channels only) */
+function ChannelPicker({
+  value,
+  onChange,
+  channels,
+  placeholder = "Select a channel…",
+}: {
+  value: string | undefined;
+  onChange: (v: string | undefined) => void;
+  channels: SettingsMeta["channels"];
+  placeholder?: string;
+}) {
+  // type 0 = text channel
+  const textChannels = channels.filter((c) => c.type === 0);
+  return (
+    <select
+      value={value ?? ""}
+      onChange={(e) => onChange(e.target.value || undefined)}
+      className={cn(
+        "w-full bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
+        "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
+        "transition-colors"
+      )}
+    >
+      <option value="">{placeholder}</option>
+      {textChannels.map((c) => (
+        <option key={c.id} value={c.id}>
+          #{c.name}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+/** Multi-select role picker for color roles */
+function MultiRolePicker({
+  selected,
+  onChange,
+  roles,
+}: {
+  selected: string[];
+  onChange: (v: string[]) => void;
+  roles: SettingsMeta["roles"];
+}) {
+  const available = roles.filter((r) => !selected.includes(r.id));
+  const selectedRoles = selected
+    .map((id) => roles.find((r) => r.id === id))
+    .filter(Boolean) as SettingsMeta["roles"];
+
+  return (
+    <div className="space-y-2">
+      {selectedRoles.length > 0 && (
+        <div className="flex flex-wrap gap-2">
+          {selectedRoles.map((r) => (
+            <span
+              key={r.id}
+              className="inline-flex items-center gap-1.5 bg-primary/15 border border-primary/30 rounded-full px-3 py-1 text-xs font-medium"
+            >
+              <span
+                className="w-2.5 h-2.5 rounded-full"
+                style={{ backgroundColor: r.color !== "#000000" ? r.color : "#6B7280" }}
+              />
+              {r.name}
+              <button
+                type="button"
+                onClick={() => onChange(selected.filter((id) => id !== r.id))}
+                className="ml-0.5 text-text-tertiary hover:text-destructive transition-colors"
+              >
+                <X className="w-3 h-3" />
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
+      {available.length > 0 && (
+        <select
+          value=""
+          onChange={(e) => {
+            if (e.target.value) onChange([...selected, e.target.value]);
+          }}
+          className={cn(
+            "w-full bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
+            "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
+            "transition-colors"
+          )}
+        >
+          <option value="">Add a color role…</option>
+          {available.map((r) => (
+            <option key={r.id} value={r.id}>
+              {r.name}
+            </option>
+          ))}
+        </select>
+      )}
+    </div>
+  );
+}
+
+/** OpenTDB category IDs */
+const TRIVIA_CATEGORIES: { id: number; name: string }[] = [
+  { id: 9, name: "General Knowledge" },
+  { id: 10, name: "Books" },
+  { id: 11, name: "Film" },
+  { id: 12, name: "Music" },
+  { id: 13, name: "Musicals & Theatre" },
+  { id: 14, name: "Television" },
+  { id: 15, name: "Video Games" },
+  { id: 16, name: "Board Games" },
+  { id: 17, name: "Science & Nature" },
+  { id: 18, name: "Computers" },
+  { id: 19, name: "Mathematics" },
+  { id: 20, name: "Mythology" },
+  { id: 21, name: "Sports" },
+  { id: 22, name: "Geography" },
+  { id: 23, name: "History" },
+  { id: 24, name: "Politics" },
+  { id: 25, name: "Art" },
+  { id: 26, name: "Celebrities" },
+  { id: 27, name: "Animals" },
+  { id: 28, name: "Vehicles" },
+  { id: 29, name: "Comics" },
+  { id: 30, name: "Gadgets" },
+  { id: 31, name: "Anime & Manga" },
+  { id: 32, name: "Cartoons & Animations" },
+];
+
+function CategoryPicker({
+  selected,
+  onChange,
+}: {
+  selected: number[];
+  onChange: (v: number[]) => void;
+}) {
+  const available = TRIVIA_CATEGORIES.filter((c) => !selected.includes(c.id));
+  const selectedCats = selected
+    .map((id) => TRIVIA_CATEGORIES.find((c) => c.id === id))
+    .filter(Boolean) as typeof TRIVIA_CATEGORIES;
+
+  return (
+    <div className="space-y-2">
+      {selectedCats.length > 0 && (
+        <div className="flex flex-wrap gap-2">
+          {selectedCats.map((c) => (
+            <span
+              key={c.id}
+              className="inline-flex items-center gap-1.5 bg-info/15 border border-info/30 rounded-full px-3 py-1 text-xs font-medium"
+            >
+              {c.name}
+              <button
+                type="button"
+                onClick={() => onChange(selected.filter((id) => id !== c.id))}
+                className="ml-0.5 text-text-tertiary hover:text-destructive transition-colors"
+              >
+                <X className="w-3 h-3" />
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
+      {available.length > 0 && (
+        <select
+          value=""
+          onChange={(e) => {
+            const id = Number(e.target.value);
+            if (id) onChange([...selected, id]);
+          }}
+          className={cn(
+            "w-full bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground",
+            "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30",
+            "transition-colors"
+          )}
+        >
+          <option value="">Add a category…</option>
+          {available.map((c) => (
+            <option key={c.id} value={c.id}>
+              {c.name}
+            </option>
+          ))}
+        </select>
+      )}
+    </div>
+  );
+}
+
+/** Key-value editor for feature override flags */
+function FeatureOverridesEditor({
+  value,
+  onChange,
+}: {
+  value: Record<string, boolean>;
+  onChange: (v: Record<string, boolean>) => void;
+}) {
+  const [newKey, setNewKey] = useState("");
+  const entries = Object.entries(value).sort(([a], [b]) => a.localeCompare(b));
+
+  const addFlag = () => {
+    const key = newKey.trim().toLowerCase().replace(/\s+/g, "_");
+    if (!key || key in value) return;
+    onChange({ ...value, [key]: true });
+    setNewKey("");
+  };
+
+  return (
+    <div className="space-y-3">
+      {entries.length > 0 && (
+        <div className="space-y-2">
+          {entries.map(([key, enabled]) => (
+            <div
+              key={key}
+              className="flex items-center justify-between py-1.5"
+            >
+              <span
+                className={cn(
+                  "text-sm font-mono",
+                  enabled ? "text-foreground" : "text-text-disabled"
+                )}
+              >
+                {key}
+              </span>
+              <div className="flex items-center gap-3">
+                <Toggle
+                  checked={enabled}
+                  onChange={(v) => onChange({ ...value, [key]: v })}
+                />
+                <button
+                  type="button"
+                  onClick={() => {
+                    const { [key]: _, ...rest } = value;
+                    onChange(rest);
+                  }}
+                  className="text-text-tertiary hover:text-destructive transition-colors"
+                >
+                  <X className="w-3.5 h-3.5" />
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+      <div className="flex gap-2">
+        <StringInput
+          value={newKey}
+          onChange={setNewKey}
+          placeholder="feature_name"
+          className="flex-1"
+        />
+        <button
+          type="button"
+          onClick={addFlag}
+          disabled={!newKey.trim()}
+          className={cn(
+            "rounded-md px-4 py-2 text-sm font-medium transition-colors",
+            newKey.trim()
+              ? "bg-primary/15 text-primary hover:bg-primary/25 border border-primary/30"
+              : "bg-raised text-text-disabled cursor-not-allowed"
+          )}
+        >
+          Add
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function SectionCard({
+  title,
+  icon: Icon,
+  children,
+}: {
+  title: string;
+  icon: React.ComponentType<{ className?: string }>;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="bg-card rounded-lg border border-border">
+      <div className="flex items-center gap-2.5 px-6 py-4 border-b border-border">
+        <Icon className="w-4 h-4 text-primary" />
+        <h3 className="text-sm font-semibold">{title}</h3>
+      </div>
+      <div className="px-6 py-5 space-y-5">{children}</div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Section editors
+// ---------------------------------------------------------------------------
+
+function GuildSection({
+  data,
+  onChange,
+  meta,
+}: {
+  data: GuildSettings;
+  onChange: (d: GuildSettings) => void;
+  meta: SettingsMeta | null;
+}) {
+  const roles = meta?.roles ?? [];
+  const channels = meta?.channels ?? [];
+
+  return (
+    <div className="space-y-6">
+      <SectionCard title="Roles" icon={Server}>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
+          <Field label="Student Role" hint="Assigned to verified students">
+            <RolePicker
+              value={data.studentRoleId}
+              onChange={(v) => onChange({ ...data, studentRoleId: v })}
+              roles={roles}
+            />
+          </Field>
+          <Field label="Visitor Role" hint="Assigned to unverified members">
+            <RolePicker
+              value={data.visitorRoleId}
+              onChange={(v) => onChange({ ...data, visitorRoleId: v })}
+              roles={roles}
+            />
+          </Field>
+        </div>
+        <Field label="Color Roles" hint="Roles users can self-assign for name color">
+          <MultiRolePicker
+            selected={data.colorRoleIds ?? []}
+            onChange={(v) => onChange({ ...data, colorRoleIds: v })}
+            roles={roles}
+          />
+        </Field>
+      </SectionCard>
+
+      <SectionCard title="Channels" icon={Server}>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
+          <Field label="Welcome Channel">
+            <ChannelPicker
+              value={data.welcomeChannelId}
+              onChange={(v) => onChange({ ...data, welcomeChannelId: v })}
+              channels={channels}
+            />
+          </Field>
+          <Field label="Feedback Channel">
+            <ChannelPicker
+              value={data.feedbackChannelId}
+              onChange={(v) => onChange({ ...data, feedbackChannelId: v })}
+              channels={channels}
+            />
+          </Field>
+          <Field label="Terminal Channel">
+            <ChannelPicker
+              value={data.terminalChannelId}
+              onChange={(v) => onChange({ ...data, terminalChannelId: v })}
+              channels={channels}
+            />
+          </Field>
+          <Field label="Moderation Log Channel">
+            <ChannelPicker
+              value={data.moderationLogChannelId}
+              onChange={(v) => onChange({ ...data, moderationLogChannelId: v })}
+              channels={channels}
+            />
+          </Field>
+        </div>
+      </SectionCard>
+
+      <SectionCard title="Welcome Message" icon={Server}>
+        <Field label="Message" hint="Sent when a new member joins. Leave empty to disable.">
+          <TextArea
+            value={data.welcomeMessage ?? ""}
+            onChange={(v) => onChange({ ...data, welcomeMessage: v || undefined })}
+            placeholder="Welcome to the academy, {user}!"
+            rows={3}
+          />
+        </Field>
+      </SectionCard>
+
+      <SectionCard title="Moderation" icon={Shield}>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
+          <Field label="DM on Warn" hint="Send a DM to users when they receive a warning">
+            <Toggle
+              checked={data.moderationDmOnWarn ?? true}
+              onChange={(v) => onChange({ ...data, moderationDmOnWarn: v })}
+            />
+          </Field>
+          <Field label="Auto-Timeout Threshold" hint="Warnings before auto-timeout (empty = disabled)">
+            <NumberInput
+              value={data.moderationAutoTimeoutThreshold ?? 0}
+              onChange={(v) =>
+                onChange({
+                  ...data,
+                  moderationAutoTimeoutThreshold: v || undefined,
+                })
+              }
+              min={0}
+            />
+          </Field>
+        </div>
+      </SectionCard>
+
+      <SectionCard title="Feature Overrides" icon={Server}>
+        <p className="text-xs text-text-tertiary">
+          Toggle feature flags for this guild. Add new flags by name.
+        </p>
+        <FeatureOverridesEditor
+          value={data.featureOverrides ?? {}}
+          onChange={(v) => onChange({ ...data, featureOverrides: v })}
+        />
+      </SectionCard>
+    </div>
+  );
+}
+
+function LevelingSection({
+  data,
+  onChange,
+}: {
+  data: GameSettings["leveling"];
+  onChange: (d: GameSettings["leveling"]) => void;
+}) {
+  return (
+    <SectionCard title="Leveling" icon={TrendingUp}>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
+        <Field label="Base XP" hint="Base XP required for level 2">
+          <NumberInput
+            value={data.base}
+            onChange={(v) => onChange({ ...data, base: v })}
+            min={1}
+          />
+        </Field>
+        <Field label="Exponent" hint="XP growth curve exponent">
+          <NumberInput
+            value={data.exponent}
+            onChange={(v) => onChange({ ...data, exponent: v })}
+            min={1}
+            max={5}
+            step={0.1}
+          />
+        </Field>
+      </div>
+      <h4 className="text-xs font-semibold text-text-tertiary uppercase tracking-wider pt-2">
+        Chat XP
+      </h4>
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-5">
+        <Field label="Cooldown (ms)" hint={formatMs(data.chat.cooldownMs)}>
+          <NumberInput
+            value={data.chat.cooldownMs}
+            onChange={(v) =>
+              onChange({ ...data, chat: { ...data.chat, cooldownMs: v } })
+            }
+            min={0}
+            step={1000}
+          />
+        </Field>
+        <Field label="Min XP">
+          <NumberInput
+            value={data.chat.minXp}
+            onChange={(v) =>
+              onChange({ ...data, chat: { ...data.chat, minXp: v } })
+            }
+            min={0}
+          />
+        </Field>
+        <Field label="Max XP">
+          <NumberInput
+            value={data.chat.maxXp}
+            onChange={(v) =>
+              onChange({ ...data, chat: { ...data.chat, maxXp: v } })
+            }
+            min={0}
+          />
+        </Field>
+      </div>
+    </SectionCard>
+  );
+}
+
+function EconomySection({
+  data,
+  onChange,
+}: {
+  data: GameSettings["economy"];
+  onChange: (d: GameSettings["economy"]) => void;
+}) {
+  const setDaily = (patch: Partial<GameSettings["economy"]["daily"]>) =>
+    onChange({ ...data, daily: { ...data.daily, ...patch } });
+  const setTransfers = (
+    patch: Partial<GameSettings["economy"]["transfers"]>
+  ) => onChange({ ...data, transfers: { ...data.transfers, ...patch } });
+  const setExam = (patch: Partial<GameSettings["economy"]["exam"]>) =>
+    onChange({ ...data, exam: { ...data.exam, ...patch } });
+
+  return (
+    <SectionCard title="Economy" icon={Coins}>
+      <h4 className="text-xs font-semibold text-text-tertiary uppercase tracking-wider">
+        Daily Rewards
+      </h4>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
+        <Field label="Amount (AU)">
+          <StringInput
+            value={data.daily.amount}
+            onChange={(v) => setDaily({ amount: v })}
+          />
+        </Field>
+        <Field label="Streak Bonus">
+          <StringInput
+            value={data.daily.streakBonus}
+            onChange={(v) => setDaily({ streakBonus: v })}
+          />
+        </Field>
+        <Field label="Weekly Bonus">
+          <StringInput
+            value={data.daily.weeklyBonus}
+            onChange={(v) => setDaily({ weeklyBonus: v })}
+          />
+        </Field>
+        <Field label="Cooldown (ms)" hint={formatMs(data.daily.cooldownMs)}>
+          <NumberInput
+            value={data.daily.cooldownMs}
+            onChange={(v) => setDaily({ cooldownMs: v })}
+            min={0}
+            step={1000}
+          />
+        </Field>
+      </div>
+
+      <h4 className="text-xs font-semibold text-text-tertiary uppercase tracking-wider pt-2">
+        Transfers
+      </h4>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
+        <Field label="Min Amount">
+          <StringInput
+            value={data.transfers.minAmount}
+            onChange={(v) => setTransfers({ minAmount: v })}
+          />
+        </Field>
+        <Field label="Allow Self-Transfer">
+          <Toggle
+            checked={data.transfers.allowSelfTransfer}
+            onChange={(v) => setTransfers({ allowSelfTransfer: v })}
+          />
+        </Field>
+      </div>
+
+      <h4 className="text-xs font-semibold text-text-tertiary uppercase tracking-wider pt-2">
+        Exam
+      </h4>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
+        <Field label="Min Multiplier">
+          <NumberInput
+            value={data.exam.multMin}
+            onChange={(v) => setExam({ multMin: v })}
+            min={0}
+            step={0.1}
+          />
+        </Field>
+        <Field label="Max Multiplier">
+          <NumberInput
+            value={data.exam.multMax}
+            onChange={(v) => setExam({ multMax: v })}
+            min={0}
+            step={0.1}
+          />
+        </Field>
+      </div>
+    </SectionCard>
+  );
+}
+
+function InventorySection({
+  data,
+  onChange,
+}: {
+  data: GameSettings["inventory"];
+  onChange: (d: GameSettings["inventory"]) => void;
+}) {
+  return (
+    <SectionCard title="Inventory" icon={Package}>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
+        <Field label="Max Stack Size">
+          <StringInput
+            value={data.maxStackSize}
+            onChange={(v) => onChange({ ...data, maxStackSize: v })}
+          />
+        </Field>
+        <Field label="Max Slots">
+          <NumberInput
+            value={data.maxSlots}
+            onChange={(v) => onChange({ ...data, maxSlots: v })}
+            min={1}
+          />
+        </Field>
+      </div>
+    </SectionCard>
+  );
+}
+
+function LootdropSection({
+  data,
+  onChange,
+}: {
+  data: GameSettings["lootdrop"];
+  onChange: (d: GameSettings["lootdrop"]) => void;
+}) {
+  const setReward = (patch: Partial<GameSettings["lootdrop"]["reward"]>) =>
+    onChange({ ...data, reward: { ...data.reward, ...patch } });
+
+  return (
+    <SectionCard title="Lootdrops" icon={Gift}>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
+        <Field
+          label="Activity Window (ms)"
+          hint={formatMs(data.activityWindowMs)}
+        >
+          <NumberInput
+            value={data.activityWindowMs}
+            onChange={(v) => onChange({ ...data, activityWindowMs: v })}
+            min={0}
+            step={1000}
+          />
+        </Field>
+        <Field label="Min Messages">
+          <NumberInput
+            value={data.minMessages}
+            onChange={(v) => onChange({ ...data, minMessages: v })}
+            min={1}
+          />
+        </Field>
+        <Field label="Spawn Chance" hint="0.0 – 1.0">
+          <NumberInput
+            value={data.spawnChance}
+            onChange={(v) => onChange({ ...data, spawnChance: v })}
+            min={0}
+            max={1}
+            step={0.01}
+          />
+        </Field>
+        <Field label="Cooldown (ms)" hint={formatMs(data.cooldownMs)}>
+          <NumberInput
+            value={data.cooldownMs}
+            onChange={(v) => onChange({ ...data, cooldownMs: v })}
+            min={0}
+            step={1000}
+          />
+        </Field>
+      </div>
+
+      <h4 className="text-xs font-semibold text-text-tertiary uppercase tracking-wider pt-2">
+        Reward
+      </h4>
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-5">
+        <Field label="Min Reward">
+          <NumberInput
+            value={data.reward.min}
+            onChange={(v) => setReward({ min: v })}
+            min={0}
+          />
+        </Field>
+        <Field label="Max Reward">
+          <NumberInput
+            value={data.reward.max}
+            onChange={(v) => setReward({ max: v })}
+            min={0}
+          />
+        </Field>
+        <Field label="Currency">
+          <SelectInput
+            value={data.reward.currency}
+            onChange={(v) => setReward({ currency: v })}
+            options={[
+              { value: "AU", label: "AU (Astral Units)" },
+              { value: "CU", label: "CU (Constellation Units)" },
+            ]}
+          />
+        </Field>
+      </div>
+    </SectionCard>
+  );
+}
+
+function TriviaSection({
+  data,
+  onChange,
+}: {
+  data: GameSettings["trivia"];
+  onChange: (d: GameSettings["trivia"]) => void;
+}) {
+  return (
+    <SectionCard title="Trivia" icon={Brain}>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
+        <Field label="Entry Fee (AU)">
+          <StringInput
+            value={data.entryFee}
+            onChange={(v) => onChange({ ...data, entryFee: v })}
+          />
+        </Field>
+        <Field label="Reward Multiplier">
+          <NumberInput
+            value={data.rewardMultiplier}
+            onChange={(v) => onChange({ ...data, rewardMultiplier: v })}
+            min={0}
+            step={0.1}
+          />
+        </Field>
+        <Field label="Timeout (seconds)">
+          <NumberInput
+            value={data.timeoutSeconds}
+            onChange={(v) => onChange({ ...data, timeoutSeconds: v })}
+            min={5}
+          />
+        </Field>
+        <Field label="Cooldown (ms)" hint={formatMs(data.cooldownMs)}>
+          <NumberInput
+            value={data.cooldownMs}
+            onChange={(v) => onChange({ ...data, cooldownMs: v })}
+            min={0}
+            step={1000}
+          />
+        </Field>
+      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
+        <Field label="Difficulty">
+          <SelectInput
+            value={data.difficulty}
+            onChange={(v) => onChange({ ...data, difficulty: v })}
+            options={[
+              { value: "random", label: "Random" },
+              { value: "easy", label: "Easy" },
+              { value: "medium", label: "Medium" },
+              { value: "hard", label: "Hard" },
+            ]}
+          />
+        </Field>
+      </div>
+
+      <Field
+        label="Categories"
+        hint="Select which OpenTDB categories to pull from. Leave empty for all categories."
+      >
+        <CategoryPicker
+          selected={data.categories ?? []}
+          onChange={(v) => onChange({ ...data, categories: v })}
+        />
+      </Field>
+    </SectionCard>
+  );
+}
+
+function ModerationSection({
+  data,
+  onChange,
+}: {
+  data: GameSettings["moderation"];
+  onChange: (d: GameSettings["moderation"]) => void;
+}) {
+  const setPrune = (patch: Partial<GameSettings["moderation"]["prune"]>) =>
+    onChange({ ...data, prune: { ...data.prune, ...patch } });
+
+  return (
+    <SectionCard title="Moderation" icon={Shield}>
+      <h4 className="text-xs font-semibold text-text-tertiary uppercase tracking-wider">
+        Prune
+      </h4>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
+        <Field label="Max Amount">
+          <NumberInput
+            value={data.prune.maxAmount}
+            onChange={(v) => setPrune({ maxAmount: v })}
+            min={1}
+          />
+        </Field>
+        <Field
+          label="Confirm Threshold"
+          hint="Require confirmation above this"
+        >
+          <NumberInput
+            value={data.prune.confirmThreshold}
+            onChange={(v) => setPrune({ confirmThreshold: v })}
+            min={1}
+          />
+        </Field>
+        <Field label="Batch Size">
+          <NumberInput
+            value={data.prune.batchSize}
+            onChange={(v) => setPrune({ batchSize: v })}
+            min={1}
+          />
+        </Field>
+        <Field
+          label="Batch Delay (ms)"
+          hint={formatMs(data.prune.batchDelayMs)}
+        >
+          <NumberInput
+            value={data.prune.batchDelayMs}
+            onChange={(v) => setPrune({ batchDelayMs: v })}
+            min={0}
+            step={100}
+          />
+        </Field>
+      </div>
+    </SectionCard>
+  );
+}
+
+function CommandsSection({
+  commands,
+  onChange,
+  meta,
+}: {
+  commands: GameSettings["commands"];
+  meta: SettingsMeta | null;
+  onChange: (d: GameSettings["commands"]) => void;
+}) {
+  const grouped = (meta?.commands ?? []).reduce<
+    Record<string, Array<{ name: string; category: string }>>
+  >((acc, cmd) => {
+    (acc[cmd.category] ??= []).push(cmd);
+    return acc;
+  }, {});
+
+  const categories = Object.keys(grouped).sort();
+
+  if (categories.length === 0) {
+    return (
+      <SectionCard title="Commands" icon={Terminal}>
+        <p className="text-sm text-text-tertiary">
+          No registered commands found. Make sure the bot is online.
+        </p>
+      </SectionCard>
+    );
+  }
+
+  return (
+    <SectionCard title="Commands" icon={Terminal}>
+      <p className="text-xs text-text-tertiary">
+        Toggle commands on or off. Disabled commands cannot be used by anyone.
+      </p>
+      <div className="space-y-6">
+        {categories.map((cat) => (
+          <div key={cat}>
+            <h4 className="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-3">
+              {cat}
+            </h4>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-3">
+              {grouped[cat]!.map((cmd) => {
+                const enabled = commands[cmd.name] !== false;
+                return (
+                  <div
+                    key={cmd.name}
+                    className="flex items-center justify-between py-1.5"
+                  >
+                    <span
+                      className={cn(
+                        "text-sm font-mono",
+                        enabled ? "text-foreground" : "text-text-disabled"
+                      )}
+                    >
+                      /{cmd.name}
+                    </span>
+                    <Toggle
+                      checked={enabled}
+                      onChange={(v) =>
+                        onChange({ ...commands, [cmd.name]: v })
+                      }
+                    />
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+    </SectionCard>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Default guild settings (used when guild has no config yet)
+// ---------------------------------------------------------------------------
+
+const defaultGuildSettings: GuildSettings = {
+  guildId: "",
+  configured: false,
+  colorRoleIds: [],
+  moderationDmOnWarn: true,
+  featureOverrides: {},
+};
+
+// ---------------------------------------------------------------------------
+// Main Settings page
+// ---------------------------------------------------------------------------
+
+export default function Settings() {
+  const {
+    settings,
+    guildSettings,
+    meta,
+    loading,
+    saving,
+    error,
+    saveSettings,
+    saveGuildSettings,
+  } = useSettings();
+
+  const [gameDraft, setGameDraft] = useState<GameSettings | null>(null);
+  const [guildDraft, setGuildDraft] = useState<GuildSettings | null>(null);
+  const [activeSection, setActiveSection] =
+    useState<SettingsSection>("guild");
+  const [saveSuccess, setSaveSuccess] = useState(false);
+
+  // Sync drafts when data loads
+  useEffect(() => {
+    if (settings && !gameDraft) {
+      setGameDraft(structuredClone(settings));
+    }
+  }, [settings, gameDraft]);
+
+  useEffect(() => {
+    if (!guildDraft) {
+      setGuildDraft(
+        guildSettings
+          ? structuredClone(guildSettings)
+          : { ...defaultGuildSettings, guildId: meta?.guildId ?? "" }
+      );
+    }
+  }, [guildSettings, guildDraft, meta?.guildId]);
+
+  const isGuildTab = activeSection === "guild";
+
+  const gameDirty =
+    gameDraft && settings
+      ? JSON.stringify(gameDraft) !== JSON.stringify(settings)
+      : false;
+
+  const guildDirty =
+    guildDraft && guildSettings
+      ? JSON.stringify(guildDraft) !== JSON.stringify(guildSettings)
+      : guildDraft
+      ? JSON.stringify(guildDraft) !==
+        JSON.stringify({ ...defaultGuildSettings, guildId: meta?.guildId ?? "" })
+      : false;
+
+  const dirty = isGuildTab ? guildDirty : gameDirty;
+
+  const handleSave = useCallback(async () => {
+    let ok: boolean;
+    if (isGuildTab && guildDraft) {
+      ok = await saveGuildSettings(guildDraft);
+    } else if (gameDraft) {
+      ok = await saveSettings(
+        gameDraft as unknown as Record<string, unknown>
+      );
+    } else {
+      return;
+    }
+    if (ok) {
+      setSaveSuccess(true);
+      setTimeout(() => setSaveSuccess(false), 2000);
+      // Reset drafts so they re-sync from server
+      if (isGuildTab) setGuildDraft(null);
+      else setGameDraft(null);
+    }
+  }, [isGuildTab, gameDraft, guildDraft, saveSettings, saveGuildSettings]);
+
+  const handleReset = useCallback(() => {
+    if (isGuildTab) {
+      setGuildDraft(
+        guildSettings
+          ? structuredClone(guildSettings)
+          : { ...defaultGuildSettings, guildId: meta?.guildId ?? "" }
+      );
+    } else if (settings) {
+      setGameDraft(structuredClone(settings));
+    }
+  }, [isGuildTab, settings, guildSettings, meta?.guildId]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-32">
+        <Loader2 className="w-6 h-6 animate-spin text-primary" />
+      </div>
+    );
+  }
+
+  if (error && !settings) {
+    return (
+      <div className="flex items-center justify-center py-32">
+        <div className="text-center">
+          <AlertTriangle className="w-8 h-8 text-warning mx-auto mb-3" />
+          <p className="text-sm text-text-tertiary">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!gameDraft || !guildDraft) return null;
+
+  const updateGameSection = <K extends keyof GameSettings>(
+    key: K,
+    value: GameSettings[K]
+  ) => setGameDraft((prev) => (prev ? { ...prev, [key]: value } : prev));
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="font-display text-2xl font-bold tracking-tight">
+            Settings
+          </h1>
+          <p className="text-sm text-text-tertiary mt-1">
+            Configure guild, bot systems, economy, and command access
+          </p>
+        </div>
+        <div className="flex items-center gap-3">
+          {dirty && (
+            <button
+              onClick={handleReset}
+              className="inline-flex items-center gap-2 rounded-md border border-border px-4 py-2 text-sm font-medium text-text-secondary hover:bg-primary/10 transition-colors"
+            >
+              <RotateCcw className="w-4 h-4" />
+              Discard
+            </button>
+          )}
+          <button
+            onClick={handleSave}
+            disabled={!dirty || saving}
+            className={cn(
+              "inline-flex items-center gap-2 rounded-md px-5 py-2 text-sm font-medium transition-colors",
+              dirty
+                ? "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm shadow-primary/30"
+                : "bg-primary/30 text-primary-foreground/50 cursor-not-allowed"
+            )}
+          >
+            {saving ? (
+              <Loader2 className="w-4 h-4 animate-spin" />
+            ) : saveSuccess ? (
+              <Check className="w-4 h-4" />
+            ) : (
+              <Save className="w-4 h-4" />
+            )}
+            {saving ? "Saving…" : saveSuccess ? "Saved" : "Save Changes"}
+          </button>
+        </div>
+      </div>
+
+      {/* Error banner */}
+      {error && (
+        <div className="flex items-center gap-3 bg-destructive/10 border border-destructive/30 rounded-lg px-5 py-3">
+          <AlertTriangle className="w-4 h-4 text-destructive shrink-0" />
+          <span className="text-sm text-destructive">{error}</span>
+        </div>
+      )}
+
+      {/* Section tabs */}
+      <div className="flex gap-1 overflow-x-auto border-b border-border pb-px">
+        {sections.map(({ key, label, icon: Icon }) => (
+          <button
+            key={key}
+            onClick={() => setActiveSection(key)}
+            className={cn(
+              "inline-flex items-center gap-2 px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-colors border-b-2 -mb-px",
+              activeSection === key
+                ? "border-primary text-primary"
+                : "border-transparent text-text-tertiary hover:text-foreground hover:border-primary/30"
+            )}
+          >
+            <Icon className="w-4 h-4" />
+            {label}
+          </button>
+        ))}
+      </div>
+
+      {/* Active section content */}
+      <div>
+        {activeSection === "guild" && (
+          <GuildSection
+            data={guildDraft}
+            onChange={setGuildDraft}
+            meta={meta}
+          />
+        )}
+        {activeSection === "leveling" && (
+          <LevelingSection
+            data={gameDraft.leveling}
+            onChange={(v) => updateGameSection("leveling", v)}
+          />
+        )}
+        {activeSection === "economy" && (
+          <EconomySection
+            data={gameDraft.economy}
+            onChange={(v) => updateGameSection("economy", v)}
+          />
+        )}
+        {activeSection === "inventory" && (
+          <InventorySection
+            data={gameDraft.inventory}
+            onChange={(v) => updateGameSection("inventory", v)}
+          />
+        )}
+        {activeSection === "lootdrop" && (
+          <LootdropSection
+            data={gameDraft.lootdrop}
+            onChange={(v) => updateGameSection("lootdrop", v)}
+          />
+        )}
+        {activeSection === "trivia" && (
+          <TriviaSection
+            data={gameDraft.trivia}
+            onChange={(v) => updateGameSection("trivia", v)}
+          />
+        )}
+        {activeSection === "moderation" && (
+          <ModerationSection
+            data={gameDraft.moderation}
+            onChange={(v) => updateGameSection("moderation", v)}
+          />
+        )}
+        {activeSection === "commands" && (
+          <CommandsSection
+            commands={gameDraft.commands}
+            meta={meta}
+            onChange={(v) => updateGameSection("commands", v)}
+          />
+        )}
+      </div>
+
+      {/* Dirty indicator footer */}
+      {dirty && (
+        <div className="sticky bottom-0 -mx-6 px-6 py-3 bg-background/80 backdrop-blur border-t border-border flex items-center justify-between">
+          <span className="text-sm text-warning font-medium">
+            You have unsaved changes
+          </span>
+          <div className="flex items-center gap-3">
+            <button
+              onClick={handleReset}
+              className="text-sm text-text-tertiary hover:text-foreground transition-colors"
+            >
+              Discard
+            </button>
+            <button
+              onClick={handleSave}
+              disabled={saving}
+              className="inline-flex items-center gap-2 rounded-md bg-primary text-primary-foreground px-4 py-1.5 text-sm font-medium hover:bg-primary/90 transition-colors"
+            >
+              {saving ? (
+                <Loader2 className="w-3.5 h-3.5 animate-spin" />
+              ) : (
+                <Save className="w-3.5 h-3.5" />
+              )}
+              Save
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}