diff --git a/tests/modules/ai.test.js b/tests/modules/ai.test.js
index b87073767..7b5a07a3a 100644
--- a/tests/modules/ai.test.js
+++ b/tests/modules/ai.test.js
@@ -49,8 +49,7 @@ describe('ai module', () => {
       addToHistory('ch1', 'user', 'hello');
       const history = await getHistoryAsync('ch1');
       expect(history.length).toBe(1);
-      expect(history[0]).toMatchObject({ role: 'user', content: 'hello' });
-      expect(history[0].timestamp).toEqual(expect.any(Number));
+      expect(history[0]).toEqual(expect.objectContaining({ role: 'user', content: 'hello' }));
     });
 
     it('should hydrate DB history in-place when concurrent messages are added', async () => {
@@ -75,8 +74,8 @@ describe('ai module', () => {
 
       resolveHydration({
         rows: [
-          { role: 'assistant', content: 'db reply', created_at: '2026-04-01T10:00:01.000Z' },
-          { role: 'user', content: 'db message', created_at: '2026-04-01T10:00:00.000Z' },
+          { role: 'assistant', content: 'db reply' },
+          { role: 'user', content: 'db message' },
         ],
       });
 
@@ -84,22 +83,11 @@ describe('ai module', () => {
       await asyncHistoryPromise;
 
       await vi.waitFor(() => {
-        expect(historyRef).toHaveLength(3);
-        expect(historyRef[0]).toMatchObject({
-          role: 'user',
-          content: 'db message',
-          timestamp: Date.parse('2026-04-01T10:00:00.000Z'),
-        });
-        expect(historyRef[1]).toMatchObject({
-          role: 'assistant',
-          content: 'db reply',
-          timestamp: Date.parse('2026-04-01T10:00:01.000Z'),
-        });
-        expect(historyRef[2]).toMatchObject({
-          role: 'user',
-          content: 'concurrent message',
-          timestamp: expect.any(Number),
-        });
+        expect(historyRef).toEqual([
+          expect.objectContaining({ role: 'user', content: 'db message' }),
+          expect.objectContaining({ role: 'assistant', content: 'db reply' }),
+          expect.objectContaining({ role: 'user', content: 'concurrent message' }),
+        ]);
         expect(getConversationHistory().get('race-channel')).toBe(historyRef);
       });
     });
@@ -119,7 +107,7 @@ describe('ai module', () => {
       expect(history[0].content).toBe('from db');
       expect(history[1].content).toBe('response');
       expect(mockQuery).toHaveBeenCalledWith(
-        expect.stringContaining('SELECT role, content, created_at FROM conversations'),
+        expect.stringContaining('SELECT role, content FROM conversations'),
         ['ch-new', 20],
       );
     });
diff --git a/web/src/app/api/auth/[...nextauth]/route.ts b/web/src/app/api/auth/[...nextauth]/route.ts
index 0a4c217bc..970218e37 100644
--- a/web/src/app/api/auth/[...nextauth]/route.ts
+++ b/web/src/app/api/auth/[...nextauth]/route.ts
@@ -1,6 +1,66 @@
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
 import NextAuth from 'next-auth';
-import { authOptions } from '@/lib/auth';
+import { getAuthOptions } from '@/lib/auth';
+import { logger } from '@/lib/logger';
 
-const handler = NextAuth(authOptions);
+function fallbackAuthResponse(request: NextRequest, error: unknown) {
+  const pathname = request.nextUrl.pathname;
+  logger.warn('[auth] Auth route requested without valid environment configuration', {
+    pathname,
+    error: error instanceof Error ? error.message : String(error),
+  });
 
-export { handler as GET, handler as POST };
+  if (pathname.endsWith('/session')) {
+    return NextResponse.json({}, { status: 200 });
+  }
+
+  if (pathname.endsWith('/providers')) {
+    return NextResponse.json({}, { status: 200 });
+  }
+
+  if (pathname.endsWith('/csrf')) {
+    return NextResponse.json({ csrfToken: '' }, { status: 200 });
+  }
+
+  return NextResponse.json({ error: 'AuthUnavailable' }, { status: 503 });
+}
+
+// Cache the NextAuth handler after the first successful creation to avoid
+// reconstructing it on every request (getAuthOptions() is already cached internally).
+let cachedHandler: ReturnType<typeof NextAuth> | undefined;
+
+function getHandler() {
+  if (!cachedHandler) {
+    cachedHandler = NextAuth(getAuthOptions());
+  }
+  return cachedHandler;
+}
+
+async function handleAuth(
+  request: NextRequest,
+  context: { params: Promise<{ nextauth: string[] }> },
+) {
+  try {
+    const handler = getHandler();
+    return await handler(request, context);
+  } catch (error) {
+    // Reset cache on failure so next request retries handler creation
+    cachedHandler = undefined;
+    return fallbackAuthResponse(request, error);
+  }
+}
+
+export async function GET(
+  request: NextRequest,
+  context: { params: Promise<{ nextauth: string[] }> },
+) {
+  return handleAuth(request, context);
+}
+
+export async function POST(
+  request: NextRequest,
+  context: { params: Promise<{ nextauth: string[] }> },
+) {
+  return handleAuth(request, context);
+}
diff --git a/web/src/components/dashboard/config-editor.tsx b/web/src/components/dashboard/config-editor.tsx
index 5b87c850a..0c521238f 100644
--- a/web/src/components/dashboard/config-editor.tsx
+++ b/web/src/components/dashboard/config-editor.tsx
@@ -1,91 +1,180 @@
 'use client';
 
-import { Save } from 'lucide-react';
-import { ConfigProvider, useConfigContext } from '@/components/dashboard/config-context';
-import { Button } from '@/components/ui/button';
+import { useEffect, useState } from 'react';
+import { SELECTED_GUILD_KEY } from '@/lib/guild-selection';
+import type { GuildConfig } from './config-editor-utils';
+import { isGuildConfig } from './config-editor-utils';
 import { DiscardChangesButton } from './reset-defaults-button';
 import { SystemPromptEditor } from './system-prompt-editor';
 
-export function ConfigEditor() {
-  return (
-    <ConfigProvider>
-      <ConfigEditorContent />
-    </ConfigProvider>
-  );
+function getSelectedGuildId(): string {
+  try {
+    return localStorage.getItem(SELECTED_GUILD_KEY) ?? '';
+  } catch {
+    return '';
+  }
 }
 
-function ConfigEditorContent() {
-  const {
-    guildId,
-    draftConfig,
-    loading,
-    error,
-    saving,
-    hasChanges,
-    hasValidationErrors,
-    openDiffModal,
-    discardChanges,
-    fetchConfig,
-    updateDraftConfig,
-  } = useConfigContext();
-
-  if (!guildId) {
-    return <div className="p-6">Select a server to manage its configuration.</div>;
-  }
+export function ConfigEditor() {
+  const [draftConfig, setDraftConfig] = useState<GuildConfig | null>(null);
+  const [savedConfig, setSavedConfig] = useState<GuildConfig | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [hasChanges, setHasChanges] = useState(false);
+
+  useEffect(() => {
+    const guildId = getSelectedGuildId();
+    if (!guildId) {
+      setLoading(false);
+      setDraftConfig({});
+      return;
+    }
+
+    let cancelled = false;
+
+    async function loadConfig() {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const res = await fetch(`/api/guilds/${encodeURIComponent(guildId)}/config`, {
+          cache: 'no-store',
+        });
+
+        if (!res.ok) {
+          throw new Error(`HTTP ${res.status}`);
+        }
+
+        const data: unknown = await res.json();
+        if (!isGuildConfig(data)) {
+          throw new Error('Invalid config response');
+        }
+
+        if (!cancelled) {
+          setDraftConfig(data);
+          setSavedConfig(data);
+          setHasChanges(false);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError((err as Error).message || 'Failed to load config');
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    }
+
+    void loadConfig();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
 
   if (loading) {
-    return <div className="p-6">Loading configuration...</div>;
+    return <div>Loading configuration…</div>;
   }
 
   if (error) {
-    return (
-      <div className="space-y-4 p-6">
-        <p>{error}</p>
-        <Button variant="outline" onClick={() => fetchConfig(guildId)}>
-          Retry
-        </Button>
-      </div>
-    );
+    return <div role="alert">{error}</div>;
+  }
+
+  async function saveChanges() {
+    const guildId = getSelectedGuildId();
+    if (!guildId || !draftConfig) {
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+
+    try {
+      const res = await fetch(`/api/guilds/${encodeURIComponent(guildId)}/config`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          path: 'ai.systemPrompt',
+          value: draftConfig.ai?.systemPrompt ?? '',
+        }),
+      });
+
+      if (!res.ok) {
+        throw new Error(`HTTP ${res.status}`);
+      }
+
+      const updatedSection: unknown = await res.json();
+      const nextDraftConfig = {
+        ...(draftConfig ?? {}),
+        ai: updatedSection && typeof updatedSection === 'object' ? updatedSection : draftConfig.ai,
+      } satisfies GuildConfig;
+
+      setDraftConfig(nextDraftConfig);
+      setSavedConfig(nextDraftConfig);
+      setHasChanges(false);
+    } catch (err) {
+      setError((err as Error).message || 'Failed to save config');
+    } finally {
+      setSaving(false);
+    }
   }
 
-  if (!draftConfig) {
-    return null;
+  function discardChanges() {
+    if (!savedConfig) {
+      return;
+    }
+
+    setDraftConfig(structuredClone(savedConfig));
+    setHasChanges(false);
   }
 
   return (
-    <div className="space-y-6 p-6">
-      <div className="flex items-center justify-between gap-4">
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-bold">Bot Configuration</h1>
-          <p className="text-sm text-muted-foreground">Manage core bot settings in one place.</p>
+          <h1 className="text-2xl font-semibold">Bot Configuration</h1>
+          <p className="text-sm text-muted-foreground">Manage guild configuration sections.</p>
         </div>
         <div className="flex items-center gap-2">
-          <DiscardChangesButton onReset={discardChanges} disabled={saving || !hasChanges} />
-          <Button onClick={openDiffModal} disabled={saving || !hasChanges || hasValidationErrors}>
-            <Save className="mr-2 h-4 w-4" />
-            Save Changes
-          </Button>
+          <DiscardChangesButton
+            onReset={discardChanges}
+            disabled={!hasChanges || saving}
+            sectionLabel="all unsaved changes"
+          />
+          <button
+            type="button"
+            onClick={() => void saveChanges()}
+            disabled={!hasChanges || saving}
+            className="rounded-md bg-primary px-3 py-2 text-sm text-primary-foreground disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {saving ? 'Saving…' : 'Save Changes'}
+          </button>
         </div>
       </div>
 
-      <section className="space-y-3">
-        <h2 className="text-lg font-semibold">AI Chat</h2>
+      <section className="space-y-2">
+        <h2 className="text-lg font-medium">AI Chat</h2>
         <SystemPromptEditor
-          value={draftConfig.ai?.systemPrompt ?? ''}
-          onChange={(value) =>
-            updateDraftConfig((prev) => ({
-              ...prev,
-              ai: { ...prev.ai, systemPrompt: value },
-            }))
-          }
+          value={draftConfig?.ai?.systemPrompt ?? ''}
+          onChange={(systemPrompt) => {
+            setDraftConfig((prev) => ({
+              ...(prev ?? {}),
+              ai: {
+                ...(prev?.ai ?? {}),
+                systemPrompt,
+              },
+            }));
+            setHasChanges(true);
+          }}
         />
       </section>
 
-      {/* TODO: Integrate DiscordMarkdownEditor for welcome message template editing */}
-      <section className="space-y-3">
-        <h2 className="text-lg font-semibold">Welcome Messages</h2>
+      <section className="space-y-2">
+        <h2 className="text-lg font-medium">Welcome Messages</h2>
         <p className="text-sm text-muted-foreground">
-          Configure welcome message templates for new server members.
+          Welcome message configuration is available in the settings workspace.
         </p>
       </section>
     </div>
diff --git a/web/src/components/dashboard/config-sections/ReputationSection.tsx b/web/src/components/dashboard/config-sections/ReputationSection.tsx
deleted file mode 100644
index 530cd54dd..000000000
--- a/web/src/components/dashboard/config-sections/ReputationSection.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { Card, CardContent, CardTitle } from '@/components/ui/card';
-import { parseNumberInput } from '@/lib/config-normalization';
-import type { GuildConfig } from '@/lib/config-utils';
-import { ToggleSwitch } from '../toggle-switch';
-
-interface ReputationSectionProps {
-  draftConfig: GuildConfig;
-  saving: boolean;
-  onEnabledChange: (enabled: boolean) => void;
-  /** @deprecated Prefer updateDraftConfig for consistent update patterns. */
-  onFieldChange: (field: string, value: unknown) => void;
-  updateDraftConfig: (updater: (prev: GuildConfig) => GuildConfig) => void;
-}
-
-/** Shared input styling for text inputs. */
-const inputClasses =
-  'w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
-
-const DEFAULT_LEVEL_THRESHOLDS = [100, 300, 600, 1000, 1500, 2500, 4000, 6000, 8500, 12000];
-
-/**
- * Reputation / XP configuration section.
- *
- * Provides controls for XP settings, cooldowns, and level thresholds.
- */
-export function ReputationSection({
-  draftConfig,
-  saving,
-  onEnabledChange,
-  onFieldChange: _onFieldChange,
-  updateDraftConfig,
-}: ReputationSectionProps) {
-  const xpRange = draftConfig.reputation?.xpPerMessage ?? [5, 15];
-  const levelThresholds = draftConfig.xp?.levelThresholds ?? DEFAULT_LEVEL_THRESHOLDS;
-
-  // Local state for level thresholds raw input (parsed on blur)
-  const thresholdsDisplay = levelThresholds.join(', ');
-  const [thresholdsRaw, setThresholdsRaw] = useState(thresholdsDisplay);
-  useEffect(() => {
-    setThresholdsRaw(thresholdsDisplay);
-  }, [thresholdsDisplay]);
-
-  return (
-    <Card>
-      <CardContent className="space-y-4 pt-6">
-        <div className="flex items-center justify-between">
-          <CardTitle className="text-base">Reputation / XP</CardTitle>
-          <ToggleSwitch
-            checked={draftConfig.reputation?.enabled ?? false}
-            onChange={onEnabledChange}
-            disabled={saving}
-            label="Reputation"
-          />
-        </div>
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-          <label htmlFor="xp-per-message-min" className="space-y-2">
-            <span className="text-sm font-medium">XP per Message (min)</span>
-            <input
-              id="xp-per-message-min"
-              type="number"
-              min={1}
-              max={100}
-              value={xpRange[0] ?? 5}
-              onChange={(e) => {
-                const num = parseNumberInput(e.target.value, 1, 100);
-                if (num !== undefined) {
-                  const newMax = num > (xpRange[1] ?? 15) ? num : (xpRange[1] ?? 15);
-                  updateDraftConfig((prev) => ({
-                    ...prev,
-                    reputation: { ...prev.reputation, xpPerMessage: [num, newMax] },
-                  }));
-                }
-              }}
-              disabled={saving}
-              className={inputClasses}
-            />
-          </label>
-          <label htmlFor="xp-per-message-max" className="space-y-2">
-            <span className="text-sm font-medium">XP per Message (max)</span>
-            <input
-              id="xp-per-message-max"
-              type="number"
-              min={1}
-              max={100}
-              value={xpRange[1] ?? 15}
-              onChange={(e) => {
-                const num = parseNumberInput(e.target.value, 1, 100);
-                if (num !== undefined) {
-                  const newMin = num < (xpRange[0] ?? 5) ? num : (xpRange[0] ?? 5);
-                  updateDraftConfig((prev) => ({
-                    ...prev,
-                    reputation: { ...prev.reputation, xpPerMessage: [newMin, num] },
-                  }));
-                }
-              }}
-              disabled={saving}
-              className={inputClasses}
-            />
-          </label>
-          <label htmlFor="xp-cooldown-seconds" className="space-y-2">
-            <span className="text-sm font-medium">XP Cooldown (seconds)</span>
-            <input
-              id="xp-cooldown-seconds"
-              type="number"
-              min={0}
-              value={draftConfig.reputation?.xpCooldownSeconds ?? 60}
-              onChange={(e) => {
-                const num = parseNumberInput(e.target.value, 0);
-                if (num !== undefined) {
-                  updateDraftConfig((prev) => ({
-                    ...prev,
-                    reputation: { ...prev.reputation, xpCooldownSeconds: num },
-                  }));
-                }
-              }}
-              disabled={saving}
-              className={inputClasses}
-            />
-          </label>
-        </div>
-        <label htmlFor="level-thresholds-comma-separated" className="space-y-2">
-          <span className="text-sm font-medium">Level Thresholds (comma-separated XP values)</span>
-          <input
-            id="level-thresholds-comma-separated"
-            type="text"
-            value={thresholdsRaw}
-            onChange={(e) => setThresholdsRaw(e.target.value)}
-            onBlur={() => {
-              const nums = thresholdsRaw
-                .split(',')
-                .map((s: string) => Number(s.trim()))
-                .filter((n: number) => Number.isFinite(n) && n > 0);
-              if (nums.length > 0) {
-                const sorted = [...nums].sort((a, b) => a - b);
-                const deduped = sorted.filter((t, i, arr) => i === 0 || t !== arr[i - 1]);
-                updateDraftConfig((prev) => ({
-                  ...prev,
-                  xp: { ...prev.xp, levelThresholds: deduped },
-                }));
-              }
-            }}
-            disabled={saving}
-            className={inputClasses}
-            placeholder="100, 300, 600, 1000, ..."
-          />
-          <p className="text-xs text-muted-foreground">
-            XP required for each level (L1, L2, L3, ...). Add more values for more levels.
-          </p>
-        </label>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/web/src/components/dashboard/config-sections/index.ts b/web/src/components/dashboard/config-sections/index.ts
index 65ad60c13..7cf8e2b4e 100644
--- a/web/src/components/dashboard/config-sections/index.ts
+++ b/web/src/components/dashboard/config-sections/index.ts
@@ -7,6 +7,5 @@ export { EngagementSection } from './EngagementSection';
 export { GitHubSection } from './GitHubSection';
 export { MemorySection } from './MemorySection';
 export { PermissionsSection } from './PermissionsSection';
-export { ReputationSection } from './ReputationSection';
 export { StarboardSection } from './StarboardSection';
 export { TicketsSection } from './TicketsSection';
diff --git a/web/src/components/ui/embed-builder.tsx b/web/src/components/ui/embed-builder.tsx
new file mode 100644
index 000000000..311eaf941
--- /dev/null
+++ b/web/src/components/ui/embed-builder.tsx
@@ -0,0 +1,947 @@
+'use client';
+
+import {
+  AlignLeft,
+  ChevronDown,
+  ChevronUp,
+  Clock,
+  Columns,
+  Eye,
+  ImageIcon,
+  Plus,
+  Settings,
+  Trash2,
+  Type,
+} from 'lucide-react';
+import * as React from 'react';
+import { generateId } from '@/components/dashboard/config-editor-utils';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { cn } from '@/lib/utils';
+
+// ── Types ───────────────────────────────────────────────────────────
+
+export interface EmbedField {
+  id?: string;
+  name: string;
+  value: string;
+  inline: boolean;
+}
+
+export type ThumbnailType = 'none' | 'user_avatar' | 'server_icon' | 'custom';
+export type FormatType = 'text' | 'embed' | 'both';
+
+export interface EmbedConfig {
+  color: string;
+  title: string;
+  description: string;
+  thumbnailType: ThumbnailType;
+  thumbnailUrl: string;
+  fields: EmbedField[];
+  footerText: string;
+  footerIconUrl: string;
+  imageUrl: string;
+  showTimestamp: boolean;
+  format: FormatType;
+}
+
+export interface EmbedBuilderProps {
+  value: EmbedConfig;
+  onChange: (config: EmbedConfig) => void;
+  variables?: string[];
+  className?: string;
+}
+
+// ── Constants ───────────────────────────────────────────────────────
+
+export const CHAR_LIMITS = {
+  title: 256,
+  description: 4096,
+  fieldName: 256,
+  fieldValue: 1024,
+  footer: 2048,
+  total: 6000,
+} as const;
+
+const DISCORD_PRESET_COLORS = [
+  '#5865F2', // Blurple
+  '#57F287', // Green
+  '#FEE75C', // Yellow
+  '#EB459E', // Fuchsia
+  '#ED4245', // Red
+  '#FFFFFF', // White
+  '#E67E22', // Orange
+  '#1ABC9C', // Teal
+  '#3498DB', // Blue
+  '#9B59B6', // Purple
+];
+
+const THUMBNAIL_OPTIONS: { value: ThumbnailType; label: string }[] = [
+  { value: 'none', label: 'None' },
+  { value: 'user_avatar', label: 'User Avatar' },
+  { value: 'server_icon', label: 'Server Icon' },
+  { value: 'custom', label: 'Custom URL' },
+];
+
+const FORMAT_OPTIONS: { value: FormatType; label: string }[] = [
+  { value: 'text', label: 'Text Only' },
+  { value: 'embed', label: 'Embed Only' },
+  { value: 'both', label: 'Text + Embed' },
+];
+
+// ── Helpers ─────────────────────────────────────────────────────────
+
+function createFieldId(): string {
+  return generateId();
+}
+
+function createEmptyField(): EmbedField {
+  return {
+    id: createFieldId(),
+    name: '',
+    value: '',
+    inline: false,
+  };
+}
+
+function ensureFieldIds(fields: EmbedField[]): EmbedField[] {
+  let changed = false;
+  const nextFields = fields.map((field) => {
+    if (field.id) return field;
+    changed = true;
+    return { ...field, id: createFieldId() };
+  });
+
+  return changed ? nextFields : fields;
+}
+
+function appendVariable(text: string, variable: string, maxLength: number): string {
+  const normalizedText = text.slice(0, maxLength);
+  const token = `{{${variable}}}`;
+  if (normalizedText.length + token.length > maxLength) {
+    return normalizedText;
+  }
+
+  return `${normalizedText}${token}`;
+}
+
+function sanitizeColorInput(rawValue: string): string {
+  const normalized = rawValue.trim().replace(/^#*/, '');
+  const hex = normalized
+    .replace(/[^0-9a-f]/gi, '')
+    .toUpperCase()
+    .slice(0, 6);
+  return hex ? `#${hex}` : '#';
+}
+
+function isValidHexColor(value: string): boolean {
+  return /^#[0-9A-F]{6}$/i.test(value);
+}
+
+export function defaultEmbedConfig(): EmbedConfig {
+  return {
+    color: '#5865F2',
+    title: '',
+    description: '',
+    thumbnailType: 'none',
+    thumbnailUrl: '',
+    fields: [],
+    footerText: '',
+    footerIconUrl: '',
+    imageUrl: '',
+    showTimestamp: false,
+    format: 'embed',
+  };
+}
+
+export function getTotalCharCount(config: EmbedConfig): number {
+  let total = config.title.length + config.description.length + config.footerText.length;
+  for (const field of config.fields) {
+    total += field.name.length + field.value.length;
+  }
+  return total;
+}
+
+function tokenizeVariableSegments(text: string): string[] {
+  const segments: string[] = [];
+  let cursor = 0;
+
+  while (cursor < text.length) {
+    const variableStart = text.indexOf('{{', cursor);
+    if (variableStart === -1) {
+      segments.push(text.slice(cursor));
+      break;
+    }
+
+    if (variableStart > cursor) {
+      segments.push(text.slice(cursor, variableStart));
+    }
+
+    const variableEnd = text.indexOf('}}', variableStart + 2);
+    if (variableEnd === -1) {
+      segments.push(text.slice(variableStart));
+      break;
+    }
+
+    segments.push(text.slice(variableStart, variableEnd + 2));
+    cursor = variableEnd + 2;
+  }
+
+  return segments;
+}
+
+function tokenizeMarkdownSegments(line: string): string[] {
+  const segments: string[] = [];
+  let cursor = 0;
+
+  while (cursor < line.length) {
+    if (line.startsWith('{{', cursor)) {
+      const variableEnd = line.indexOf('}}', cursor + 2);
+      if (variableEnd !== -1) {
+        segments.push(line.slice(cursor, variableEnd + 2));
+        cursor = variableEnd + 2;
+        continue;
+      }
+    }
+
+    if (line.startsWith('**', cursor)) {
+      const boldEnd = line.indexOf('**', cursor + 2);
+      if (boldEnd !== -1) {
+        segments.push(line.slice(cursor, boldEnd + 2));
+        cursor = boldEnd + 2;
+        continue;
+      }
+    }
+
+    if (line.startsWith('*', cursor)) {
+      const italicEnd = line.indexOf('*', cursor + 1);
+      if (italicEnd !== -1) {
+        segments.push(line.slice(cursor, italicEnd + 1));
+        cursor = italicEnd + 1;
+        continue;
+      }
+    }
+
+    if (line.startsWith('`', cursor)) {
+      const codeEnd = line.indexOf('`', cursor + 1);
+      if (codeEnd !== -1) {
+        segments.push(line.slice(cursor, codeEnd + 1));
+        cursor = codeEnd + 1;
+        continue;
+      }
+    }
+
+    const nextTokenStarts = [
+      line.indexOf('{{', cursor + 1),
+      line.indexOf('**', cursor + 1),
+      line.indexOf('*', cursor + 1),
+      line.indexOf('`', cursor + 1),
+    ].filter((index) => index !== -1);
+    const nextTokenStart = nextTokenStarts.length > 0 ? Math.min(...nextTokenStarts) : line.length;
+
+    segments.push(line.slice(cursor, nextTokenStart));
+    cursor = nextTokenStart;
+  }
+
+  return segments;
+}
+
+/** Render template variables as styled badges in a string for preview */
+function renderVariablePreview(text: string): React.ReactNode[] {
+  if (!text) return [];
+
+  return tokenizeVariableSegments(text).map((part, index) => {
+    if (part.startsWith('{{') && part.endsWith('}}')) {
+      const varName = part.slice(2, -2);
+      return (
+        <span
+          key={`${varName}-${index}`}
+          className="inline-flex items-center rounded bg-primary/20 px-1.5 py-0.5 text-xs font-medium text-primary"
+        >
+          {varName}
+        </span>
+      );
+    }
+    return <span key={`text-${index}`}>{part}</span>;
+  });
+}
+
+/** Very lightweight Discord markdown → HTML (bold, italic, inline code) */
+function renderMarkdownSegment(segment: string, lineIndex: number, segmentIndex: number) {
+  if (segment.startsWith('{{') && segment.endsWith('}}')) {
+    const varName = segment.slice(2, -2);
+    return (
+      <span
+        key={`var-${lineIndex}-${segmentIndex}`}
+        className="inline-flex items-center rounded bg-primary/20 px-1.5 py-0.5 text-xs font-medium text-primary"
+      >
+        {varName}
+      </span>
+    );
+  }
+
+  if (segment.startsWith('**') && segment.endsWith('**')) {
+    return <strong key={`b-${lineIndex}-${segmentIndex}`}>{segment.slice(2, -2)}</strong>;
+  }
+
+  if (segment.startsWith('*') && segment.endsWith('*')) {
+    return <em key={`i-${lineIndex}-${segmentIndex}`}>{segment.slice(1, -1)}</em>;
+  }
+
+  if (segment.startsWith('`') && segment.endsWith('`')) {
+    return (
+      <code
+        key={`c-${lineIndex}-${segmentIndex}`}
+        className="rounded bg-muted px-1 py-0.5 text-xs font-mono"
+      >
+        {segment.slice(1, -1)}
+      </code>
+    );
+  }
+
+  return <span key={`t-${lineIndex}-${segmentIndex}`}>{segment}</span>;
+}
+
+function renderDiscordMarkdown(text: string): React.ReactNode[] {
+  const lines = text.split('\n');
+  const result: React.ReactNode[] = [];
+
+  for (let li = 0; li < lines.length; li++) {
+    if (li > 0) result.push(<br key={`br-${li}`} />);
+    const line = lines[li];
+    const segments = tokenizeMarkdownSegments(line);
+    for (let si = 0; si < segments.length; si++) {
+      const seg = segments[si];
+      if (!seg) continue;
+      result.push(renderMarkdownSegment(seg, li, si));
+    }
+  }
+  return result;
+}
+
+function getCharCountClassName(ratio: number): string {
+  if (ratio >= 1) {
+    return 'text-destructive font-semibold';
+  }
+
+  if (ratio >= 0.9) {
+    return 'text-yellow-500';
+  }
+
+  return 'text-muted-foreground';
+}
+
+function formatPreviewTimestamp(date: Date): string {
+  return new Intl.DateTimeFormat('en-US', {
+    hour: 'numeric',
+    minute: '2-digit',
+  }).format(date);
+}
+
+// ── CharCount indicator ─────────────────────────────────────────────
+
+function CharCount({ current, max }: { current: number; max: number }) {
+  const ratio = current / max;
+  return (
+    <span
+      data-testid="char-count"
+      className={cn('text-xs tabular-nums', getCharCountClassName(ratio))}
+    >
+      {current}/{max}
+    </span>
+  );
+}
+
+// ── Variable Badge Palette ──────────────────────────────────────────
+
+function VariablePalette({
+  variables,
+  onInsert,
+}: {
+  variables: string[];
+  onInsert: (variable: string) => void;
+}) {
+  if (!variables.length) return null;
+  return (
+    <div className="flex flex-wrap gap-1">
+      {variables.map((v) => (
+        <button
+          key={v}
+          type="button"
+          onClick={() => onInsert(v)}
+          className="inline-flex cursor-pointer items-center rounded bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary transition-colors hover:bg-primary/20"
+        >
+          {`{{${v}}}`}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+// ── Embed Preview ───────────────────────────────────────────────────
+
+function EmbedPreview({ config }: { config: EmbedConfig }) {
+  const hasContent =
+    config.title ||
+    config.description ||
+    config.fields.length > 0 ||
+    config.footerText ||
+    config.imageUrl ||
+    config.showTimestamp;
+
+  const previewTimestamp = React.useMemo(() => formatPreviewTimestamp(new Date()), []);
+
+  if (!hasContent) {
+    return (
+      <div className="flex h-32 items-center justify-center text-sm text-muted-foreground">
+        Start editing to see a preview
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-testid="embed-preview"
+      className="overflow-hidden rounded-md border border-border bg-[#2b2d31] text-sm text-[#dbdee1]"
+    >
+      <div className="flex">
+        {/* Accent color bar */}
+        <div
+          className="w-1 shrink-0 rounded-l"
+          style={{ backgroundColor: config.color }}
+          data-testid="embed-color-bar"
+        />
+
+        <div className="min-w-0 flex-1 space-y-2 p-3">
+          <div className="flex gap-3">
+            <div className="min-w-0 flex-1 space-y-1">
+              {/* Title */}
+              {config.title && (
+                <div className="font-semibold text-white" data-testid="embed-preview-title">
+                  {renderVariablePreview(config.title)}
+                </div>
+              )}
+
+              {/* Description */}
+              {config.description && (
+                <div
+                  className="whitespace-pre-wrap text-sm leading-relaxed"
+                  data-testid="embed-preview-description"
+                >
+                  {renderDiscordMarkdown(config.description)}
+                </div>
+              )}
+            </div>
+
+            {/* Thumbnail */}
+            {config.thumbnailType !== 'none' && (
+              <div className="shrink-0">
+                {config.thumbnailType === 'custom' && config.thumbnailUrl ? (
+                  <img
+                    src={config.thumbnailUrl}
+                    alt="Thumbnail"
+                    className="h-16 w-16 rounded object-cover"
+                  />
+                ) : (
+                  <div className="flex h-16 w-16 items-center justify-center rounded bg-[#404249] text-xs text-[#80848e]">
+                    {config.thumbnailType === 'user_avatar' ? 'Avatar' : 'Icon'}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Fields */}
+          {config.fields.length > 0 && (
+            <div className="grid grid-cols-3 gap-2" data-testid="embed-preview-fields">
+              {config.fields.map((field, i) => {
+                const renderedName = renderVariablePreview(field.name);
+                const renderedValue = renderDiscordMarkdown(field.value);
+
+                return (
+                  <div
+                    key={field.id ?? `field-${i}`}
+                    className={cn(field.inline ? 'col-span-1' : 'col-span-3')}
+                  >
+                    <div className="text-xs font-semibold text-white">
+                      {renderedName.length > 0 ? renderedName : '\u200b'}
+                    </div>
+                    <div className="text-xs">
+                      {renderedValue.length > 0 ? renderedValue : '\u200b'}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+
+          {/* Image */}
+          {config.imageUrl && (
+            <div className="mt-2">
+              <img
+                src={config.imageUrl}
+                alt="Embed"
+                className="max-h-64 max-w-full rounded object-contain"
+              />
+            </div>
+          )}
+
+          {/* Footer */}
+          {(config.footerText || config.showTimestamp) && (
+            <div
+              className="flex items-center gap-1.5 text-xs text-[#80848e]"
+              data-testid="embed-preview-footer"
+            >
+              {config.footerIconUrl && (
+                <img
+                  src={config.footerIconUrl}
+                  alt="Footer icon"
+                  className="h-5 w-5 rounded-full object-cover"
+                />
+              )}
+              {config.footerText && <span>{renderVariablePreview(config.footerText)}</span>}
+              {config.footerText && config.showTimestamp && <span>•</span>}
+              {config.showTimestamp && <span>{previewTimestamp}</span>}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── Main Component ──────────────────────────────────────────────────
+
+function EmbedBuilder({ value, onChange, variables = [], className }: EmbedBuilderProps) {
+  const [colorInput, setColorInput] = React.useState(value.color);
+  const lastHydratedFieldsKeyRef = React.useRef<string | null>(null);
+
+  React.useEffect(() => {
+    setColorInput(value.color);
+  }, [value.color]);
+
+  React.useEffect(() => {
+    if (!value.fields.some((field) => !field.id)) {
+      lastHydratedFieldsKeyRef.current = null;
+      return;
+    }
+
+    const hydrationKey = JSON.stringify(value.fields.map(({ id: _id, ...field }) => field));
+    if (lastHydratedFieldsKeyRef.current === hydrationKey) {
+      return;
+    }
+
+    lastHydratedFieldsKeyRef.current = hydrationKey;
+
+    const fieldsWithIds = ensureFieldIds(value.fields);
+    if (fieldsWithIds !== value.fields) {
+      onChange({ ...value, fields: fieldsWithIds });
+    }
+  }, [value, onChange]);
+
+  const update = React.useCallback(
+    (patch: Partial<EmbedConfig>) => {
+      onChange({ ...value, ...patch });
+    },
+    [value, onChange],
+  );
+
+  const updateField = React.useCallback(
+    (index: number, patch: Partial<EmbedField>) => {
+      const fields = [...value.fields];
+      fields[index] = { ...fields[index], ...patch };
+      onChange({ ...value, fields });
+    },
+    [value, onChange],
+  );
+
+  const addField = React.useCallback(() => {
+    onChange({
+      ...value,
+      fields: [...value.fields, createEmptyField()],
+    });
+  }, [value, onChange]);
+
+  const removeField = React.useCallback(
+    (index: number) => {
+      onChange({
+        ...value,
+        fields: value.fields.filter((_, i) => i !== index),
+      });
+    },
+    [value, onChange],
+  );
+
+  const moveField = React.useCallback(
+    (index: number, direction: 'up' | 'down') => {
+      const fields = [...value.fields];
+      const target = direction === 'up' ? index - 1 : index + 1;
+      if (target < 0 || target >= fields.length) return;
+      [fields[index], fields[target]] = [fields[target], fields[index]];
+      onChange({ ...value, fields });
+    },
+    [value, onChange],
+  );
+
+  const totalChars = getTotalCharCount(value);
+
+  return (
+    <div className={cn('grid gap-6 lg:grid-cols-2', className)}>
+      {/* ── Editor Panel ─────────────────── */}
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <h3 className="flex items-center gap-2 text-sm font-semibold">
+            <Settings className="size-4" />
+            Embed Editor
+          </h3>
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-muted-foreground">Total:</span>
+            <CharCount current={totalChars} max={CHAR_LIMITS.total} />
+          </div>
+        </div>
+
+        {/* Format selector */}
+        <fieldset className="space-y-1.5">
+          <legend className="text-xs font-medium">Format</legend>
+          <div className="flex gap-1">
+            {FORMAT_OPTIONS.map((opt) => (
+              <button
+                key={opt.value}
+                type="button"
+                onClick={() => update({ format: opt.value })}
+                aria-pressed={value.format === opt.value}
+                className={cn(
+                  'rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
+                  value.format === opt.value
+                    ? 'bg-primary text-primary-foreground'
+                    : 'bg-muted text-muted-foreground hover:bg-muted/80',
+                )}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        </fieldset>
+
+        {/* Color picker */}
+        <div className="space-y-1.5">
+          <Label className="text-xs">Accent Color</Label>
+          <div className="flex items-center gap-2">
+            <div className="flex flex-wrap gap-1">
+              {DISCORD_PRESET_COLORS.map((c) => (
+                <button
+                  key={c}
+                  type="button"
+                  onClick={() => {
+                    setColorInput(c);
+                    update({ color: c });
+                  }}
+                  className={cn(
+                    'size-6 rounded-md border-2 transition-all',
+                    value.color === c ? 'scale-110 border-foreground' : 'border-transparent',
+                  )}
+                  style={{ backgroundColor: c }}
+                  aria-label={`Color ${c}`}
+                />
+              ))}
+            </div>
+            <Input
+              value={colorInput}
+              onChange={(e) => {
+                const nextColor = sanitizeColorInput(e.target.value);
+                setColorInput(nextColor);
+                if (isValidHexColor(nextColor)) {
+                  update({ color: nextColor });
+                }
+              }}
+              className="h-8 w-24 font-mono text-xs"
+              maxLength={7}
+              placeholder="#5865F2"
+            />
+          </div>
+        </div>
+
+        {/* Title */}
+        <div className="space-y-1.5">
+          <div className="flex items-center justify-between">
+            <Label className="flex items-center gap-1 text-xs">
+              <Type className="size-3" /> Title
+            </Label>
+            <CharCount current={value.title.length} max={CHAR_LIMITS.title} />
+          </div>
+          <Input
+            value={value.title}
+            onChange={(e) => update({ title: e.target.value })}
+            placeholder="Embed title..."
+            maxLength={CHAR_LIMITS.title}
+          />
+          {variables.length > 0 && (
+            <VariablePalette
+              variables={variables}
+              onInsert={(v) => update({ title: appendVariable(value.title, v, CHAR_LIMITS.title) })}
+            />
+          )}
+        </div>
+
+        {/* Description */}
+        <div className="space-y-1.5">
+          <div className="flex items-center justify-between">
+            <Label className="flex items-center gap-1 text-xs">
+              <AlignLeft className="size-3" /> Description
+            </Label>
+            <CharCount current={value.description.length} max={CHAR_LIMITS.description} />
+          </div>
+          <Textarea
+            value={value.description}
+            onChange={(e) => update({ description: e.target.value })}
+            placeholder="Embed description... Supports **bold**, *italic*, `code`"
+            maxLength={CHAR_LIMITS.description}
+            rows={4}
+          />
+          {variables.length > 0 && (
+            <VariablePalette
+              variables={variables}
+              onInsert={(v) =>
+                update({
+                  description: appendVariable(value.description, v, CHAR_LIMITS.description),
+                })
+              }
+            />
+          )}
+        </div>
+
+        {/* Thumbnail */}
+        <fieldset className="space-y-1.5">
+          <legend className="flex items-center gap-1 text-xs font-medium">
+            <ImageIcon className="size-3" /> Thumbnail
+          </legend>
+          <div className="flex flex-wrap gap-1">
+            {THUMBNAIL_OPTIONS.map((opt) => (
+              <button
+                key={opt.value}
+                type="button"
+                onClick={() => update({ thumbnailType: opt.value })}
+                aria-pressed={value.thumbnailType === opt.value}
+                className={cn(
+                  'rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
+                  value.thumbnailType === opt.value
+                    ? 'bg-primary text-primary-foreground'
+                    : 'bg-muted text-muted-foreground hover:bg-muted/80',
+                )}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+          {value.thumbnailType === 'custom' && (
+            <Input
+              value={value.thumbnailUrl}
+              onChange={(e) => update({ thumbnailUrl: e.target.value })}
+              placeholder="https://example.com/thumbnail.png"
+              className="h-8 text-xs"
+            />
+          )}
+        </fieldset>
+
+        {/* Fields */}
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label className="flex items-center gap-1 text-xs">
+              <Columns className="size-3" /> Fields
+            </Label>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={addField}
+              className="h-7 text-xs"
+            >
+              <Plus className="mr-1 size-3" />
+              Add Field
+            </Button>
+          </div>
+
+          {value.fields.map((field, i) => (
+            <div
+              key={field.id ?? `field-editor-${i}`}
+              className="space-y-2 rounded-md border border-border bg-muted/30 p-3"
+            >
+              <div className="flex items-center justify-between">
+                <span className="text-xs font-medium text-muted-foreground">Field {i + 1}</span>
+                <div className="flex items-center gap-1">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="size-6"
+                    onClick={() => moveField(i, 'up')}
+                    disabled={i === 0}
+                    aria-label="Move field up"
+                  >
+                    <ChevronUp className="size-3" />
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="size-6"
+                    onClick={() => moveField(i, 'down')}
+                    disabled={i === value.fields.length - 1}
+                    aria-label="Move field down"
+                  >
+                    <ChevronDown className="size-3" />
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="size-6 text-destructive hover:text-destructive"
+                    onClick={() => removeField(i)}
+                    aria-label="Remove field"
+                  >
+                    <Trash2 className="size-3" />
+                  </Button>
+                </div>
+              </div>
+
+              <div className="space-y-1.5">
+                <div className="flex items-center justify-between">
+                  <Label className="text-xs">Name</Label>
+                  <CharCount current={field.name.length} max={CHAR_LIMITS.fieldName} />
+                </div>
+                <Input
+                  value={field.name}
+                  onChange={(e) => updateField(i, { name: e.target.value })}
+                  placeholder="Field name"
+                  maxLength={CHAR_LIMITS.fieldName}
+                  className="h-8 text-xs"
+                />
+                {variables.length > 0 && (
+                  <VariablePalette
+                    variables={variables}
+                    onInsert={(v) =>
+                      updateField(i, {
+                        name: appendVariable(field.name, v, CHAR_LIMITS.fieldName),
+                      })
+                    }
+                  />
+                )}
+              </div>
+
+              <div className="space-y-1.5">
+                <div className="flex items-center justify-between">
+                  <Label className="text-xs">Value</Label>
+                  <CharCount current={field.value.length} max={CHAR_LIMITS.fieldValue} />
+                </div>
+                <Textarea
+                  value={field.value}
+                  onChange={(e) => updateField(i, { value: e.target.value })}
+                  placeholder="Field value"
+                  maxLength={CHAR_LIMITS.fieldValue}
+                  rows={2}
+                  className="min-h-[60px] text-xs"
+                />
+                {variables.length > 0 && (
+                  <VariablePalette
+                    variables={variables}
+                    onInsert={(v) =>
+                      updateField(i, {
+                        value: appendVariable(field.value, v, CHAR_LIMITS.fieldValue),
+                      })
+                    }
+                  />
+                )}
+              </div>
+
+              <div className="flex items-center gap-2">
+                <Switch
+                  checked={field.inline}
+                  onCheckedChange={(checked: boolean) => updateField(i, { inline: checked })}
+                  size="sm"
+                  aria-label={`Field ${i + 1} inline`}
+                />
+                <Label className="text-xs">Inline</Label>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Footer */}
+        <div className="space-y-1.5">
+          <div className="flex items-center justify-between">
+            <Label className="text-xs">Footer Text</Label>
+            <CharCount current={value.footerText.length} max={CHAR_LIMITS.footer} />
+          </div>
+          <Input
+            value={value.footerText}
+            onChange={(e) => update({ footerText: e.target.value })}
+            placeholder="Footer text..."
+            maxLength={CHAR_LIMITS.footer}
+          />
+          {variables.length > 0 && (
+            <VariablePalette
+              variables={variables}
+              onInsert={(v) =>
+                update({
+                  footerText: appendVariable(value.footerText, v, CHAR_LIMITS.footer),
+                })
+              }
+            />
+          )}
+          <Input
+            value={value.footerIconUrl}
+            onChange={(e) => update({ footerIconUrl: e.target.value })}
+            placeholder="Footer icon URL (optional)"
+            className="h-8 text-xs"
+          />
+        </div>
+
+        {/* Image */}
+        <div className="space-y-1.5">
+          <Label className="flex items-center gap-1 text-xs">
+            <ImageIcon className="size-3" /> Image URL
+          </Label>
+          <Input
+            value={value.imageUrl}
+            onChange={(e) => update({ imageUrl: e.target.value })}
+            placeholder="https://example.com/image.png"
+          />
+        </div>
+
+        {/* Timestamp toggle */}
+        <div className="flex items-center gap-2">
+          <Switch
+            checked={value.showTimestamp}
+            onCheckedChange={(checked: boolean) => update({ showTimestamp: checked })}
+            aria-label="Show Timestamp"
+          />
+          <Label className="flex items-center gap-1 text-xs">
+            <Clock className="size-3" /> Show Timestamp
+          </Label>
+        </div>
+      </div>
+
+      {/* ── Preview Panel ────────────────── */}
+      <div className="space-y-2">
+        <h3 className="flex items-center gap-2 text-sm font-semibold">
+          <Eye className="size-4" />
+          Preview
+        </h3>
+        <EmbedPreview config={value} />
+      </div>
+    </div>
+  );
+}
+
+export {
+  CharCount,
+  EmbedBuilder,
+  EmbedPreview,
+  formatPreviewTimestamp,
+  renderDiscordMarkdown,
+  renderVariablePreview,
+  VariablePalette,
+};
diff --git a/web/tests/api/auth-route.test.ts b/web/tests/api/auth-route.test.ts
new file mode 100644
index 000000000..3a018535c
--- /dev/null
+++ b/web/tests/api/auth-route.test.ts
@@ -0,0 +1,205 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const { mockGetAuthOptions, mockNextAuth, mockWarn } = vi.hoisted(() => ({
+  mockGetAuthOptions: vi.fn(),
+  mockNextAuth: vi.fn(),
+  mockWarn: vi.fn(),
+}));
+
+vi.mock('@/lib/auth', () => ({
+  getAuthOptions: mockGetAuthOptions,
+}));
+
+vi.mock('next-auth', () => ({
+  default: mockNextAuth,
+}));
+
+vi.mock('@/lib/logger', () => ({
+  logger: {
+    warn: mockWarn,
+  },
+}));
+
+function createRequest(pathname: string) {
+  return new NextRequest(new URL(`http://localhost:3000${pathname}`));
+}
+
+function createContext(nextauth: string[] = []) {
+  return {
+    params: Promise.resolve({ nextauth }),
+  };
+}
+
+async function importRouteModule() {
+  const route = await import('@/app/api/auth/[...nextauth]/route');
+  return route;
+}
+
+describe('auth route fallback handling', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.resetModules();
+  });
+
+  it('returns a null session when auth env is unavailable for /session', async () => {
+    mockGetAuthOptions.mockImplementation(() => {
+      throw new Error('missing auth env');
+    });
+
+    const { GET } = await importRouteModule();
+    const response = await GET(createRequest('/api/auth/session'), createContext(['session']));
+
+    expect(response.status).toBe(200);
+    await expect(response.json()).resolves.toEqual({});
+    expect(mockWarn).toHaveBeenCalledWith(
+      '[auth] Auth route requested without valid environment configuration',
+      expect.objectContaining({ pathname: '/api/auth/session', error: 'missing auth env' }),
+    );
+  });
+
+  it('returns an empty provider map when auth env is unavailable for /providers', async () => {
+    mockGetAuthOptions.mockImplementation(() => {
+      throw new Error('missing auth env');
+    });
+
+    const { GET } = await importRouteModule();
+    const response = await GET(
+      createRequest('/api/auth/providers'),
+      createContext(['providers']),
+    );
+
+    expect(response.status).toBe(200);
+    await expect(response.json()).resolves.toEqual({});
+  });
+
+  it('stringifies non-Error throws in fallback logging metadata', async () => {
+    mockGetAuthOptions.mockImplementation(() => {
+      throw 'missing auth env';
+    });
+
+    const { GET } = await importRouteModule();
+    const response = await GET(
+      createRequest('/api/auth/providers'),
+      createContext(['providers']),
+    );
+
+    expect(response.status).toBe(200);
+    await expect(response.json()).resolves.toEqual({});
+    expect(mockWarn).toHaveBeenCalledWith(
+      '[auth] Auth route requested without valid environment configuration',
+      expect.objectContaining({ pathname: '/api/auth/providers', error: 'missing auth env' }),
+    );
+  });
+
+  it('returns an empty csrf token when auth env is unavailable for /csrf', async () => {
+    mockGetAuthOptions.mockImplementation(() => {
+      throw new Error('missing auth env');
+    });
+
+    const { GET } = await importRouteModule();
+    const response = await GET(createRequest('/api/auth/csrf'), createContext(['csrf']));
+
+    expect(response.status).toBe(200);
+    await expect(response.json()).resolves.toEqual({ csrfToken: '' });
+  });
+
+  it('delegates to NextAuth when auth env is valid', async () => {
+    const nextAuthResponse = NextResponse.json({ ok: true }, { status: 200 });
+    const handler = vi.fn().mockResolvedValue(nextAuthResponse);
+    mockGetAuthOptions.mockReturnValue({ providers: [] });
+    mockNextAuth.mockReturnValue(handler);
+
+    const { GET } = await importRouteModule();
+    const request = createRequest('/api/auth/session');
+    const context = createContext(['session']);
+    const response = await GET(request, context);
+
+    expect(mockNextAuth).toHaveBeenCalledWith({ providers: [] });
+    expect(handler).toHaveBeenCalledWith(request, context);
+    expect(response.status).toBe(200);
+    await expect(response.json()).resolves.toEqual({ ok: true });
+  });
+
+  it('reuses the cached NextAuth handler after the first successful request', async () => {
+    const nextAuthResponse = NextResponse.json({ ok: true }, { status: 200 });
+    const handler = vi.fn().mockResolvedValue(nextAuthResponse);
+    mockGetAuthOptions.mockReturnValue({ providers: [] });
+    mockNextAuth.mockReturnValue(handler);
+
+    const { GET } = await importRouteModule();
+    const firstRequest = createRequest('/api/auth/session');
+    const firstContext = createContext(['session']);
+    const secondRequest = createRequest('/api/auth/providers');
+    const secondContext = createContext(['providers']);
+
+    await GET(firstRequest, firstContext);
+    await GET(secondRequest, secondContext);
+
+    expect(mockNextAuth).toHaveBeenCalledTimes(1);
+    expect(handler).toHaveBeenCalledTimes(2);
+    expect(handler).toHaveBeenNthCalledWith(2, secondRequest, secondContext);
+  });
+
+  it('returns the CSRF fallback for POST requests when auth env is unavailable', async () => {
+    mockGetAuthOptions.mockImplementation(() => {
+      throw new Error('missing auth env');
+    });
+
+    const { POST } = await importRouteModule();
+    const response = await POST(createRequest('/api/auth/csrf'), createContext(['csrf']));
+
+    expect(response.status).toBe(200);
+    await expect(response.json()).resolves.toEqual({ csrfToken: '' });
+    expect(mockWarn).toHaveBeenCalledWith(
+      '[auth] Auth route requested without valid environment configuration',
+      expect.objectContaining({ pathname: '/api/auth/csrf', error: 'missing auth env' }),
+    );
+  });
+
+  it('resets the cached handler after a failure and retries initialization on the next request', async () => {
+    const firstHandler = vi.fn().mockRejectedValue(new Error('cached handler failed'));
+    const secondResponse = NextResponse.json({ ok: true }, { status: 200 });
+    const secondHandler = vi.fn().mockResolvedValue(secondResponse);
+
+    mockGetAuthOptions.mockReturnValue({ providers: [] });
+    mockNextAuth.mockReturnValueOnce(firstHandler).mockReturnValueOnce(secondHandler);
+
+    const { GET } = await importRouteModule();
+
+    const failedResponse = await GET(createRequest('/api/auth/session'), createContext(['session']));
+    expect(failedResponse.status).toBe(200);
+    await expect(failedResponse.json()).resolves.toEqual({});
+    expect(mockNextAuth).toHaveBeenCalledTimes(1);
+    expect(firstHandler).toHaveBeenCalledTimes(1);
+
+    const recoveredResponse = await GET(
+      createRequest('/api/auth/providers'),
+      createContext(['providers']),
+    );
+
+    expect(mockNextAuth).toHaveBeenCalledTimes(2);
+    expect(secondHandler).toHaveBeenCalledTimes(1);
+    expect(recoveredResponse.status).toBe(200);
+    await expect(recoveredResponse.json()).resolves.toEqual({ ok: true });
+    expect(mockWarn).toHaveBeenCalledWith(
+      '[auth] Auth route requested without valid environment configuration',
+      expect.objectContaining({ pathname: '/api/auth/session', error: 'cached handler failed' }),
+    );
+  });
+
+  it('uses the same fallback for non-CSRF POST requests', async () => {
+    mockGetAuthOptions.mockImplementation(() => {
+      throw new Error('missing auth env');
+    });
+
+    const { POST } = await importRouteModule();
+    const response = await POST(
+      createRequest('/api/auth/callback/discord'),
+      createContext(['callback', 'discord']),
+    );
+
+    expect(response.status).toBe(503);
+    await expect(response.json()).resolves.toEqual({ error: 'AuthUnavailable' });
+  });
+});
diff --git a/web/tests/components/dashboard/config-editor-autosave.test.tsx b/web/tests/components/dashboard/config-editor-autosave.test.tsx
index 7fe82042b..340bf231c 100644
--- a/web/tests/components/dashboard/config-editor-autosave.test.tsx
+++ b/web/tests/components/dashboard/config-editor-autosave.test.tsx
@@ -7,8 +7,8 @@
  * - Section-level revert functionality
  * - Normalization utilities
  */
-import { render, screen, waitFor } from '@testing-library/react';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, waitFor, act, fireEvent } from '@testing-library/react';
 
 // ── Mocks ─────────────────────────────────────────────────────────
 
@@ -17,14 +17,6 @@ vi.mock('sonner', () => ({
   Toaster: () => null,
 }));
 
-const mockPush = vi.fn();
-let mockPathname = '/dashboard/settings';
-
-vi.mock('next/navigation', () => ({
-  usePathname: () => mockPathname,
-  useRouter: () => ({ push: mockPush }),
-}));
-
 vi.mock('@/components/dashboard/reset-defaults-button', () => ({
   DiscardChangesButton: ({
     onReset,
@@ -100,8 +92,6 @@ const minimalConfig = {
 
 describe('ConfigEditor integration', () => {
   beforeEach(() => {
-    mockPathname = '/dashboard/settings';
-    mockPush.mockClear();
     localStorage.clear();
     localStorage.setItem('volvox-bot-selected-guild', 'guild-123');
   });
@@ -183,6 +173,77 @@ describe('ConfigEditor integration', () => {
     const discardButton = screen.getByTestId('discard-button');
     expect(discardButton).toBeDisabled();
   });
+
+  it('saves the edited system prompt via PATCH', async () => {
+    const fetchMock = vi
+      .fn()
+      .mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+        json: () => Promise.resolve(minimalConfig),
+      })
+      .mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+        json: () => Promise.resolve({
+          ...minimalConfig.ai,
+          systemPrompt: 'Updated prompt',
+        }),
+      });
+    vi.stubGlobal('fetch', fetchMock);
+
+    const { ConfigEditor } = await import('@/components/dashboard/config-editor');
+    render(<ConfigEditor />);
+
+    await waitFor(() => expect(screen.getByTestId('system-prompt')).toBeInTheDocument());
+
+    const prompt = screen.getByTestId('system-prompt') as HTMLTextAreaElement;
+    await act(async () => {
+      fireEvent.change(prompt, { target: { value: 'Updated prompt' } });
+    });
+
+    const saveButton = screen.getByRole('button', { name: 'Save Changes' });
+    await act(async () => {
+      saveButton.click();
+    });
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledWith('/api/guilds/guild-123/config', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: 'ai.systemPrompt', value: 'Updated prompt' }),
+      });
+    });
+  });
+
+  it('discard restores the last saved config', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      json: () => Promise.resolve({
+        ...minimalConfig,
+        ai: { ...minimalConfig.ai, systemPrompt: 'Saved prompt' },
+      }),
+    });
+    vi.stubGlobal('fetch', fetchMock);
+
+    const { ConfigEditor } = await import('@/components/dashboard/config-editor');
+    render(<ConfigEditor />);
+
+    await waitFor(() => expect(screen.getByTestId('system-prompt')).toBeInTheDocument());
+
+    const prompt = screen.getByTestId('system-prompt') as HTMLTextAreaElement;
+    await act(async () => {
+      fireEvent.change(prompt, { target: { value: 'Edited prompt' } });
+    });
+
+    const discardButton = screen.getByTestId('discard-button');
+    await act(async () => {
+      discardButton.click();
+    });
+
+    expect(screen.getByTestId('system-prompt')).toHaveValue('Saved prompt');
+  });
 });
 
 // ── Unit tests for normalization utilities ────────────────────────
diff --git a/web/tests/components/ui/embed-builder.test.tsx b/web/tests/components/ui/embed-builder.test.tsx
new file mode 100644
index 000000000..fff6e0d73
--- /dev/null
+++ b/web/tests/components/ui/embed-builder.test.tsx
@@ -0,0 +1,482 @@
+import * as React from 'react';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  CHAR_LIMITS,
+  EmbedBuilder,
+  EmbedPreview,
+  defaultEmbedConfig,
+  formatPreviewTimestamp,
+  getTotalCharCount,
+  type EmbedConfig,
+} from '@/components/ui/embed-builder';
+
+function renderBuilder(overrides: Partial<EmbedConfig> = {}, variables: string[] = []) {
+  const config = { ...defaultEmbedConfig(), ...overrides };
+  const onChange = vi.fn();
+  const result = render(
+    <EmbedBuilder value={config} onChange={onChange} variables={variables} />,
+  );
+  return { config, onChange, ...result };
+}
+
+describe('EmbedBuilder', () => {
+  // ── Rendering ──────────────────────────────────────────────────
+
+  it('renders editor and preview panels', () => {
+    renderBuilder();
+    expect(screen.getByText('Embed Editor')).toBeInTheDocument();
+    expect(screen.getByText('Preview')).toBeInTheDocument();
+  });
+
+  it('shows empty state when no content', () => {
+    renderBuilder();
+    expect(screen.getByText('Start editing to see a preview')).toBeInTheDocument();
+  });
+
+  // ── Title editing ─────────────────────────────────────────────
+
+  it('calls onChange with the full title when title is edited', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    function Wrapper() {
+      const [value, setValue] = React.useState(defaultEmbedConfig());
+      return (
+        <EmbedBuilder
+          value={value}
+          onChange={(next) => {
+            onChange(next);
+            setValue(next);
+          }}
+          variables={[]}
+        />
+      );
+    }
+
+    render(<Wrapper />);
+
+    const titleInput = screen.getByPlaceholderText('Embed title...');
+    await user.type(titleInput, 'Hello');
+    expect(onChange).toHaveBeenCalled();
+    const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1][0];
+    expect(lastCall.title).toBe('Hello');
+  });
+
+  // ── Description editing ───────────────────────────────────────
+
+  it('calls onChange when description is edited', async () => {
+    const user = userEvent.setup();
+    const { onChange } = renderBuilder();
+    const descInput = screen.getByPlaceholderText(/Embed description/);
+    await user.type(descInput, 'Test');
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  // ── Color picker ──────────────────────────────────────────────
+
+  it('selects a preset color', async () => {
+    const user = userEvent.setup();
+    const { onChange } = renderBuilder();
+    const greenBtn = screen.getByLabelText('Color #57F287');
+    await user.click(greenBtn);
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({ color: '#57F287' }),
+    );
+  });
+
+  it('normalizes custom hex input and only commits valid colors', async () => {
+    const user = userEvent.setup();
+    const { onChange } = renderBuilder({ color: '#5865F2' });
+    const hexInput = screen.getByPlaceholderText('#5865F2');
+
+    await user.clear(hexInput);
+    await user.type(hexInput, 'abc123');
+
+    expect(hexInput).toHaveValue('#ABC123');
+    expect(onChange).toHaveBeenLastCalledWith(
+      expect.objectContaining({ color: '#ABC123' }),
+    );
+  });
+
+  // ── Format selector ───────────────────────────────────────────
+
+  it('switches format', async () => {
+    const user = userEvent.setup();
+    const { onChange } = renderBuilder();
+    await user.click(screen.getByText('Text Only'));
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({ format: 'text' }),
+    );
+  });
+
+  it('marks the selected format button as pressed', () => {
+    renderBuilder({ format: 'embed' });
+    expect(screen.getByRole('button', { name: 'Embed Only' })).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByRole('button', { name: 'Text Only' })).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  // ── Thumbnail selector ────────────────────────────────────────
+
+  it('selects thumbnail type and shows custom URL input', async () => {
+    const user = userEvent.setup();
+    const { onChange, rerender } = renderBuilder();
+    await user.click(screen.getByText('Custom URL'));
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({ thumbnailType: 'custom' }),
+    );
+
+    const updatedConfig = { ...defaultEmbedConfig(), thumbnailType: 'custom' as const };
+    rerender(
+      <EmbedBuilder value={updatedConfig} onChange={onChange} variables={[]} />,
+    );
+    expect(screen.getByPlaceholderText('https://example.com/thumbnail.png')).toBeInTheDocument();
+  });
+
+  it('marks the selected thumbnail type button as pressed', () => {
+    renderBuilder({ thumbnailType: 'server_icon' });
+    expect(screen.getByRole('button', { name: 'Server Icon' })).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByRole('button', { name: 'None' })).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  // ── Field management ──────────────────────────────────────────
+
+  it('adds a field with a stable id', async () => {
+    const user = userEvent.setup();
+    const { onChange } = renderBuilder();
+    await user.click(screen.getByText('Add Field'));
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        fields: [
+          expect.objectContaining({ id: expect.any(String), name: '', value: '', inline: false }),
+        ],
+      }),
+    );
+  });
+
+  it('removes a field', async () => {
+    const user = userEvent.setup();
+    const { onChange } = renderBuilder({
+      fields: [
+        { id: 'field-1', name: 'Field 1', value: 'Val 1', inline: false },
+        { id: 'field-2', name: 'Field 2', value: 'Val 2', inline: true },
+      ],
+    });
+
+    const removeButtons = screen.getAllByLabelText('Remove field');
+    await user.click(removeButtons[0]);
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        fields: [{ id: 'field-2', name: 'Field 2', value: 'Val 2', inline: true }],
+      }),
+    );
+  });
+
+  it('reorders fields up', async () => {
+    const user = userEvent.setup();
+    const { onChange } = renderBuilder({
+      fields: [
+        { id: 'field-a', name: 'A', value: '1', inline: false },
+        { id: 'field-b', name: 'B', value: '2', inline: false },
+      ],
+    });
+
+    const upButtons = screen.getAllByLabelText('Move field up');
+    await user.click(upButtons[1]);
+    const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1][0];
+    expect(lastCall.fields[0].name).toBe('B');
+    expect(lastCall.fields[1].name).toBe('A');
+    expect(lastCall.fields[0].id).toBe('field-b');
+    expect(lastCall.fields[1].id).toBe('field-a');
+  });
+
+  it('reorders fields down', async () => {
+    const user = userEvent.setup();
+    const { onChange } = renderBuilder({
+      fields: [
+        { id: 'field-a', name: 'A', value: '1', inline: false },
+        { id: 'field-b', name: 'B', value: '2', inline: false },
+      ],
+    });
+
+    const downButtons = screen.getAllByLabelText('Move field down');
+    await user.click(downButtons[0]);
+    const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1][0];
+    expect(lastCall.fields[0].name).toBe('B');
+    expect(lastCall.fields[1].name).toBe('A');
+    expect(lastCall.fields[0].id).toBe('field-b');
+    expect(lastCall.fields[1].id).toBe('field-a');
+  });
+
+  it('toggles field inline', async () => {
+    const user = userEvent.setup();
+    const { onChange } = renderBuilder({
+      fields: [{ id: 'field-1', name: 'Test', value: 'Val', inline: false }],
+    });
+
+    const inlineSwitch = screen.getByRole('switch', { name: /field 1 inline/i });
+    await user.click(inlineSwitch);
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        fields: [expect.objectContaining({ inline: true })],
+      }),
+    );
+  });
+
+  // ── Timestamp toggle ──────────────────────────────────────────
+
+  it('toggles timestamp', async () => {
+    const user = userEvent.setup();
+    const { onChange } = renderBuilder();
+    const timestampSwitch = screen.getByRole('switch', {
+      name: /show timestamp/i,
+    });
+    await user.click(timestampSwitch);
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({ showTimestamp: true }),
+    );
+  });
+
+  // ── Character limit indicators ────────────────────────────────
+
+  it('shows character counts', () => {
+    renderBuilder({ title: 'Hello', description: 'World' });
+    const charCounts = screen.getAllByTestId('char-count');
+    expect(charCounts.length).toBeGreaterThanOrEqual(3);
+  });
+
+  // ── Variable template support ─────────────────────────────────
+
+  it('renders variable buttons when variables provided', () => {
+    renderBuilder({}, ['username', 'level']);
+    const varButtons = screen.getAllByText(/{{username}}/);
+    expect(varButtons.length).toBeGreaterThan(0);
+  });
+
+  it('inserts variable into title on click', async () => {
+    const user = userEvent.setup();
+    const { onChange } = renderBuilder({ title: 'Hello ' }, ['username']);
+    const varButtons = screen.getAllByText('{{username}}');
+    await user.click(varButtons[0]);
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({ title: 'Hello {{username}}' }),
+    );
+  });
+
+  it('inserts variable into field value on click', async () => {
+    const user = userEvent.setup();
+    const { onChange } = renderBuilder(
+      {
+        fields: [{ id: 'field-1', name: 'Level', value: 'Current ', inline: false }],
+      },
+      ['username'],
+    );
+
+    const fieldEditor = screen.getByText('Field 1').closest('div[class*="space-y-2"]');
+    expect(fieldEditor).not.toBeNull();
+    const valueGroup = within(fieldEditor as HTMLElement).getByPlaceholderText('Field value').closest('div');
+    expect(valueGroup).not.toBeNull();
+
+    await user.click(within(valueGroup as HTMLElement).getByText('{{username}}'));
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        fields: [expect.objectContaining({ value: 'Current {{username}}' })],
+      }),
+    );
+  });
+
+  it('inserts variable into footer text on click', async () => {
+    const user = userEvent.setup();
+    const { onChange } = renderBuilder({ footerText: 'Footer ' }, ['username']);
+    const footerInput = screen.getByPlaceholderText('Footer text...');
+    const footerSection = footerInput.closest('div');
+    expect(footerSection).not.toBeNull();
+
+    await user.click(within(footerSection as HTMLElement).getByText('{{username}}'));
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({ footerText: 'Footer {{username}}' }),
+    );
+  });
+
+  it('does not insert a partial variable token when the field is near its limit', async () => {
+    const user = userEvent.setup();
+    const almostFullTitle = 'a'.repeat(CHAR_LIMITS.title - '{{username}}'.length + 2);
+    const { onChange } = renderBuilder({ title: almostFullTitle }, ['username']);
+
+    await user.click(screen.getAllByText('{{username}}')[0]);
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: almostFullTitle,
+      }),
+    );
+  });
+
+  it('hydrates missing field ids only once for the same field payload', () => {
+    const onChange = vi.fn();
+    const value = {
+      ...defaultEmbedConfig(),
+      fields: [{ name: 'Level', value: '42', inline: false }],
+    };
+
+    const { rerender } = render(<EmbedBuilder value={value} onChange={onChange} variables={[]} />);
+    expect(onChange).toHaveBeenCalledTimes(1);
+
+    rerender(<EmbedBuilder value={{ ...value }} onChange={onChange} variables={[]} />);
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  // ── Footer ────────────────────────────────────────────────────
+
+  it('updates footer text', async () => {
+    const user = userEvent.setup();
+    const { onChange } = renderBuilder();
+    const footerInput = screen.getByPlaceholderText('Footer text...');
+    await user.type(footerInput, 'My footer');
+    expect(onChange).toHaveBeenCalled();
+  });
+});
+
+// ── Preview component ─────────────────────────────────────────────
+
+describe('EmbedPreview', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2026-04-02T16:49:00Z'));
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('renders title in preview', () => {
+    const config = { ...defaultEmbedConfig(), title: 'Test Title' };
+    render(<EmbedPreview config={config} />);
+    expect(screen.getByTestId('embed-preview-title')).toHaveTextContent('Test Title');
+  });
+
+  it('renders description with markdown', () => {
+    const config = { ...defaultEmbedConfig(), description: '**bold** and *italic*' };
+    render(<EmbedPreview config={config} />);
+    const desc = screen.getByTestId('embed-preview-description');
+    expect(desc.querySelector('strong')).toHaveTextContent('bold');
+    expect(desc.querySelector('em')).toHaveTextContent('italic');
+  });
+
+  it('renders variables as badges in preview', () => {
+    const config = { ...defaultEmbedConfig(), title: 'Hello {{username}}!' };
+    render(<EmbedPreview config={config} />);
+    const title = screen.getByTestId('embed-preview-title');
+    expect(title).toHaveTextContent('username');
+  });
+
+  it('renders fields in preview', () => {
+    const config = {
+      ...defaultEmbedConfig(),
+      fields: [
+        { id: 'field-1', name: 'Level', value: '42', inline: true },
+        { id: 'field-2', name: 'XP', value: '1000', inline: true },
+      ],
+    };
+    render(<EmbedPreview config={config} />);
+    const fieldsContainer = screen.getByTestId('embed-preview-fields');
+    expect(fieldsContainer).toHaveTextContent('Level');
+    expect(fieldsContainer).toHaveTextContent('42');
+  });
+
+  it('renders zero-width placeholders for empty field content', () => {
+    const config = {
+      ...defaultEmbedConfig(),
+      fields: [{ id: 'field-1', name: '', value: '', inline: false }],
+    };
+    render(<EmbedPreview config={config} />);
+    const fieldsContainer = screen.getByTestId('embed-preview-fields');
+    expect(fieldsContainer).toHaveTextContent('\u200b');
+  });
+
+  it('renders accent color bar', () => {
+    const config = { ...defaultEmbedConfig(), title: 'Test', color: '#FF0000' };
+    render(<EmbedPreview config={config} />);
+    const colorBar = screen.getByTestId('embed-color-bar');
+    expect(colorBar).toHaveStyle({ backgroundColor: '#FF0000' });
+  });
+
+  it('renders footer with a dynamic timestamp', () => {
+    const config = {
+      ...defaultEmbedConfig(),
+      footerText: 'Bot Footer',
+      showTimestamp: true,
+    };
+    render(<EmbedPreview config={config} />);
+    const footer = screen.getByTestId('embed-preview-footer');
+    expect(footer).toHaveTextContent('Bot Footer');
+    expect(footer).toHaveTextContent(
+      formatPreviewTimestamp(new Date('2026-04-02T16:49:00Z')),
+    );
+  });
+
+  it('renders preview when only timestamp is enabled', () => {
+    const config = {
+      ...defaultEmbedConfig(),
+      showTimestamp: true,
+    };
+    render(<EmbedPreview config={config} />);
+    expect(screen.getByTestId('embed-preview-footer')).toBeInTheDocument();
+    expect(screen.queryByText('Start editing to see a preview')).not.toBeInTheDocument();
+  });
+
+  it('renders thumbnail placeholder for user avatar', () => {
+    const config = {
+      ...defaultEmbedConfig(),
+      title: 'Test',
+      thumbnailType: 'user_avatar' as const,
+    };
+    render(<EmbedPreview config={config} />);
+    expect(screen.getByText('Avatar')).toBeInTheDocument();
+  });
+});
+
+// ── Utility functions ─────────────────────────────────────────────
+
+describe('getTotalCharCount', () => {
+  it('sums all character counts', () => {
+    const config: EmbedConfig = {
+      ...defaultEmbedConfig(),
+      title: 'abc',
+      description: 'defgh',
+      footerText: 'ij',
+      fields: [
+        { id: 'field-1', name: 'kl', value: 'mno', inline: false },
+      ],
+    };
+    expect(getTotalCharCount(config)).toBe(15);
+  });
+
+  it('returns 0 for empty config', () => {
+    expect(getTotalCharCount(defaultEmbedConfig())).toBe(0);
+  });
+});
+
+describe('defaultEmbedConfig', () => {
+  it('returns valid default config', () => {
+    const config = defaultEmbedConfig();
+    expect(config.color).toBe('#5865F2');
+    expect(config.fields).toEqual([]);
+    expect(config.format).toBe('embed');
+    expect(config.showTimestamp).toBe(false);
+  });
+});
+
+describe('CHAR_LIMITS', () => {
+  it('has correct limits', () => {
+    expect(CHAR_LIMITS.title).toBe(256);
+    expect(CHAR_LIMITS.description).toBe(4096);
+    expect(CHAR_LIMITS.fieldName).toBe(256);
+    expect(CHAR_LIMITS.fieldValue).toBe(1024);
+    expect(CHAR_LIMITS.footer).toBe(2048);
+    expect(CHAR_LIMITS.total).toBe(6000);
+  });
+});