diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index e9d6007..8cb541a 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -70,11 +70,14 @@
   "devDependencies": {
     "@playwright/test": "^1.49.0",
     "@tailwindcss/vite": "^4.1.7",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react": "^4.5.2",
     "@vitest/coverage-v8": "^4.0.18",
     "concurrently": "^9.1.2",
+    "jsdom": "^29.1.1",
     "tailwindcss": "^4.1.7",
     "tsx": "^4.21.0",
     "typescript": "catalog:",
diff --git a/apps/dashboard/src/client/features/automation/components/ActionFields.tsx b/apps/dashboard/src/client/features/automation/components/ActionFields.tsx
index 334a287..baecac5 100644
--- a/apps/dashboard/src/client/features/automation/components/ActionFields.tsx
+++ b/apps/dashboard/src/client/features/automation/components/ActionFields.tsx
@@ -10,14 +10,27 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../../../shared/ui/select";
+import { VariableEditor } from "../../../shared/ui/variable-field";
+import type { VariableDescriptor } from "../../../shared/ui/variable-field";
 import type { ActionFieldDescriptor, Channel, Role } from "../../../shared/lib/schemas";
 
+const VARIABLE_FIELD_KEYS = new Set([
+  "message",
+  "embed.title",
+  "embed.description",
+  "embed.footer",
+  "webhook.bodyTemplate",
+  "nickname",
+  "threadName",
+]);
+
 interface ActionFieldsProps {
   fields: ActionFieldDescriptor[];
   values: Record<string, unknown>;
   onChange: (key: string, value: unknown) => void;
   channels: Channel[];
   roles: Role[];
+  variables: VariableDescriptor[];
 }
 
 function getNestedValue(obj: Record<string, unknown>, path: string): unknown {
@@ -36,6 +49,7 @@ export function ActionFields({
   onChange,
   channels,
   roles,
+  variables,
 }: ActionFieldsProps) {
   const { t } = useTranslation("common");
   return (
@@ -106,26 +120,52 @@ export function ActionFields({
             )}
 
             {field.type === "text" && (
-              <Input
-                id={fieldId}
-                type="text"
-                aria-required={field.required}
-                value={String(value)}
-                onChange={(e) => onChange(field.key, e.target.value)}
-                placeholder={field.placeholder}
-                maxLength={field.maxLength}
-              />
+              VARIABLE_FIELD_KEYS.has(field.key) ? (
+                <VariableEditor
+                  id={fieldId}
+                  value={String(value ?? "")}
+                  onChange={(v) => onChange(field.key, v)}
+                  variables={variables}
+                  multiline={false}
+                  aria-required={field.required}
+                  placeholder={field.placeholder}
+                  maxLength={field.maxLength}
+                />
+              ) : (
+                <Input
+                  id={fieldId}
+                  type="text"
+                  aria-required={field.required}
+                  value={String(value)}
+                  onChange={(e) => onChange(field.key, e.target.value)}
+                  placeholder={field.placeholder}
+                  maxLength={field.maxLength}
+                />
+              )
             )}
 
             {field.type === "textarea" && (
-              <Textarea
-                id={fieldId}
-                aria-required={field.required}
-                value={String(value)}
-                onChange={(e) => onChange(field.key, e.target.value)}
-                placeholder={field.placeholder}
-                maxLength={field.maxLength}
-              />
+              VARIABLE_FIELD_KEYS.has(field.key) ? (
+                <VariableEditor
+                  id={fieldId}
+                  value={String(value ?? "")}
+                  onChange={(v) => onChange(field.key, v)}
+                  variables={variables}
+                  multiline={true}
+                  aria-required={field.required}
+                  placeholder={field.placeholder}
+                  maxLength={field.maxLength}
+                />
+              ) : (
+                <Textarea
+                  id={fieldId}
+                  aria-required={field.required}
+                  value={String(value)}
+                  onChange={(e) => onChange(field.key, e.target.value)}
+                  placeholder={field.placeholder}
+                  maxLength={field.maxLength}
+                />
+              )
             )}
 
             {field.type === "color" && (
diff --git a/apps/dashboard/src/client/features/automation/workflow/NodeDetailPanel.tsx b/apps/dashboard/src/client/features/automation/workflow/NodeDetailPanel.tsx
index e9a3c24..1163bb1 100644
--- a/apps/dashboard/src/client/features/automation/workflow/NodeDetailPanel.tsx
+++ b/apps/dashboard/src/client/features/automation/workflow/NodeDetailPanel.tsx
@@ -4,6 +4,7 @@ import type { TFunction } from "i18next";
 import { useChannels } from "../../../shared/hooks/useChannels";
 import { useRoles } from "../../../shared/hooks/useRoles";
 import { ActionFields } from "../components/ActionFields";
+import { buildAutomationVariables, DiscordMessagePreview, usePreviewContext } from "../../../shared/ui/variable-field";
 import { Button } from "../../../shared/ui/button";
 import { Label } from "../../../shared/ui/label";
 import { Input } from "../../../shared/ui/input";
@@ -45,6 +46,7 @@ interface ActionPanelProps {
   action: ActionConfig;
   constants: Constants;
   guildId: string;
+  eventType: string;
   totalActions: number;
   onActionChange: (index: number, action: ActionConfig) => void;
   onActionRemove: (index: number) => void;
@@ -59,6 +61,7 @@ interface StepPanelProps {
   steps: RuleStep[];
   constants: Constants;
   guildId: string;
+  eventType: string;
   onStepChange: (stepId: string, step: RuleStep) => void;
   onStepRemove: (stepId: string) => void;
   onClose: () => void;
@@ -236,6 +239,7 @@ function ActionPanel({
   action,
   constants,
   guildId,
+  eventType,
   totalActions,
   onActionChange,
   onActionRemove,
@@ -247,6 +251,8 @@ function ActionPanel({
   const { data: roles = [] } = useRoles(guildId);
   const fields: ActionFieldDescriptor[] =
     constants.actionTypeFields[action.type] ?? [];
+  const variables = buildAutomationVariables(constants, eventType);
+  const real = usePreviewContext(guildId);
 
   const handleTypeChange = (newType: string) => {
     onActionChange(index, { type: newType });
@@ -302,9 +308,34 @@ function ActionPanel({
               onChange={handleFieldChange}
               channels={channels}
               roles={roles}
+              variables={variables}
             />
           )}
 
+          {(action.type === "sendMessage" || action.type === "sendDM") && (
+            <div className="mt-2">
+              <DiscordMessagePreview
+                variables={variables}
+                real={real}
+                content={action.message ?? ""}
+              />
+            </div>
+          )}
+          {action.type === "sendEmbed" && (
+            <div className="mt-2">
+              <DiscordMessagePreview
+                variables={variables}
+                real={real}
+                embed={{
+                  title: action.embed?.title,
+                  description: action.embed?.description,
+                  footer: action.embed?.footer,
+                  color: action.embed?.color,
+                }}
+              />
+            </div>
+          )}
+
           {totalActions > 1 && (
             <div className="flex gap-2 border-t border-border pt-3">
               <Button
@@ -387,12 +418,14 @@ function StepPanel({
   steps,
   constants,
   guildId,
+  eventType,
   onStepChange,
   onStepRemove,
 }: StepPanelProps) {
   const { t } = useTranslation(["rules", "common"]);
   const { data: channels = [] } = useChannels(guildId);
   const { data: roles = [] } = useRoles(guildId);
+  const variables = buildAutomationVariables(constants, eventType);
   const step = steps.find((s) => s.id === stepId);
   if (!step) return <p className="text-xs text-text-muted">{t("panel.stepNotFound")}</p>;
 
@@ -440,6 +473,7 @@ function StepPanel({
             onChange={handleFieldChange}
             channels={channels}
             roles={roles}
+            variables={variables}
           />
         )}
 
diff --git a/apps/dashboard/src/client/features/automation/workflow/WorkflowEditor.tsx b/apps/dashboard/src/client/features/automation/workflow/WorkflowEditor.tsx
index 8f54833..153678a 100644
--- a/apps/dashboard/src/client/features/automation/workflow/WorkflowEditor.tsx
+++ b/apps/dashboard/src/client/features/automation/workflow/WorkflowEditor.tsx
@@ -596,6 +596,7 @@ function WorkflowEditorInner({ rule, draft, onClose }: WorkflowEditorProps) {
             action={actions[selectedNode.index]}
             constants={constants}
             guildId={guildId}
+            eventType={eventType}
             totalActions={actions.length}
             onActionChange={rawActionChange}
             onActionRemove={actions.length > 1 ? handleActionRemove : handleActionReset}
@@ -611,6 +612,7 @@ function WorkflowEditorInner({ rule, draft, onClose }: WorkflowEditorProps) {
             steps={steps}
             constants={constants}
             guildId={guildId}
+            eventType={eventType}
             onStepChange={handleStepChange}
             onStepRemove={handleStepRemove}
             onClose={() => setSelectedNode(null)}
diff --git a/apps/dashboard/src/client/features/tempvoice/components/TempVoiceForm.tsx b/apps/dashboard/src/client/features/tempvoice/components/TempVoiceForm.tsx
index 08f9e67..26607f1 100644
--- a/apps/dashboard/src/client/features/tempvoice/components/TempVoiceForm.tsx
+++ b/apps/dashboard/src/client/features/tempvoice/components/TempVoiceForm.tsx
@@ -3,8 +3,14 @@ import { useTranslation } from "react-i18next";
 import { useParams } from "@tanstack/react-router";
 import { Icon } from "../../../shared/components/Icon";
 import { Button } from "../../../shared/ui/button";
-import { Input } from "../../../shared/ui/input";
 import { Label } from "../../../shared/ui/label";
+import {
+  VariableEditor,
+  usePreviewContext,
+  tempvoiceVariables,
+  buildTokenValues,
+  resolveTemplatePreview,
+} from "../../../shared/ui/variable-field";
 import { Alert } from "../../../shared/ui/alert";
 import { Card } from "../../../shared/ui/card";
 import {
@@ -38,6 +44,8 @@ export function TempVoiceForm() {
   const updateConfig = useUpdateTempVoice(guildId);
   const deleteConfig = useDeleteTempVoice(guildId);
 
+  const real = usePreviewContext(guildId);
+
   const [showForm, setShowForm] = useState(false);
   const [editingId, setEditingId] = useState<number | null>(null);
   const [hubChannelId, setHubChannelId] = useState("");
@@ -246,16 +254,16 @@ export function TempVoiceForm() {
 
           <div>
             <Label htmlFor="tempvoice-name-template">{t("form.nameTemplate")}</Label>
-            <Input
+            <VariableEditor
               id="tempvoice-name-template"
-              type="text"
               value={nameTemplate}
-              onChange={(e) => setNameTemplate(e.target.value)}
+              onChange={setNameTemplate}
+              variables={tempvoiceVariables}
               placeholder={t("form.defaultNameTemplate")}
               maxLength={100}
             />
             <p className="mt-1 text-xs text-text-muted">
-              {t("form.nameTemplateHint")}
+              {t("common:variableField.preview")}: {resolveTemplatePreview(nameTemplate, buildTokenValues(tempvoiceVariables, real))}
             </p>
           </div>
 
diff --git a/apps/dashboard/src/client/routes/guild/$guildId/commands.tsx b/apps/dashboard/src/client/routes/guild/$guildId/commands.tsx
index cc85b95..c400885 100644
--- a/apps/dashboard/src/client/routes/guild/$guildId/commands.tsx
+++ b/apps/dashboard/src/client/routes/guild/$guildId/commands.tsx
@@ -23,8 +23,14 @@ import { Button } from "../../../shared/ui/button";
 import { Input } from "../../../shared/ui/input";
 import { Label } from "../../../shared/ui/label";
 import { Card } from "../../../shared/ui/card";
-import { Textarea } from "../../../shared/ui/textarea";
 import { Switch } from "../../../shared/ui/switch";
+import {
+  VariableEditor,
+  VariableBrowser,
+  DiscordMessagePreview,
+  usePreviewContext,
+  customCommandVariables,
+} from "../../../shared/ui/variable-field";
 import { Badge } from "../../../shared/ui/badge";
 import { Separator } from "../../../shared/ui/separator";
 import { ColorPicker } from "../../../shared/ui/color-picker";
@@ -70,6 +76,7 @@ export function CommandsPage() {
   const updateCommand = useUpdateCustomCommand(guildId);
   const deleteCommand = useDeleteCustomCommand(guildId);
   const { data: roles } = useRoles(guildId);
+  const real = usePreviewContext(guildId);
 
   const [dialogOpen, setDialogOpen] = useState(false);
   const [editingCommand, setEditingCommand] = useState<CustomCommandItem | null>(null);
@@ -490,45 +497,45 @@ export function CommandsPage() {
                       </div>
 
                       {formResponseType === "text" ? (
-                        <div>
+                        <div className="space-y-2">
                           <Label htmlFor="cmd-content">{t("form.message")}</Label>
-                          <Textarea
+                          <VariableEditor
                             id="cmd-content"
                             value={formContent}
-                            onChange={(e) => {
-                              setFormContent(e.target.value);
-                              markDirty();
-                            }}
+                            onChange={(v) => { setFormContent(v); markDirty(); }}
                             placeholder={t("form.message")}
+                            variables={customCommandVariables}
+                            multiline
                             rows={4}
                           />
+                          <VariableBrowser
+                            variables={customCommandVariables}
+                            onInsert={(tok) => { setFormContent(formContent + tok); markDirty(); }}
+                          />
                         </div>
                       ) : (
                         <div className="space-y-3">
                           <div>
                             <Label htmlFor="embed-title">{t("form.embedTitle")}</Label>
-                            <Input
+                            <VariableEditor
                               id="embed-title"
                               value={formEmbedTitle}
-                              onChange={(e) => {
-                                setFormEmbedTitle(e.target.value);
-                                markDirty();
-                              }}
+                              onChange={(v) => { setFormEmbedTitle(v); markDirty(); }}
                               placeholder={t("form.embedTitle")}
+                              variables={customCommandVariables}
                             />
                           </div>
                           <div>
                             <Label htmlFor="embed-desc">
                               {t("form.embedDescription")}
                             </Label>
-                            <Textarea
+                            <VariableEditor
                               id="embed-desc"
                               value={formEmbedDescription}
-                              onChange={(e) => {
-                                setFormEmbedDescription(e.target.value);
-                                markDirty();
-                              }}
+                              onChange={(v) => { setFormEmbedDescription(v); markDirty(); }}
                               placeholder={t("form.embedDescription")}
+                              variables={customCommandVariables}
+                              multiline
                               rows={3}
                             />
                           </div>
@@ -547,14 +554,12 @@ export function CommandsPage() {
                             </div>
                             <div>
                               <Label htmlFor="embed-footer">{t("form.footer")}</Label>
-                              <Input
+                              <VariableEditor
                                 id="embed-footer"
                                 value={formEmbedFooter}
-                                onChange={(e) => {
-                                  setFormEmbedFooter(e.target.value);
-                                  markDirty();
-                                }}
+                                onChange={(v) => { setFormEmbedFooter(v); markDirty(); }}
                                 placeholder={t("form.footer")}
+                                variables={customCommandVariables}
                               />
                             </div>
                           </div>
@@ -769,6 +774,13 @@ export function CommandsPage() {
                       </div>
                     </div>
 
+                    <DiscordMessagePreview
+                      variables={customCommandVariables}
+                      real={real}
+                      content={formResponseType === "text" ? formContent : undefined}
+                      embed={formResponseType === "embed" ? { title: formEmbedTitle, description: formEmbedDescription, footer: formEmbedFooter } : undefined}
+                    />
+
                     <div className="flex justify-end gap-2">
                       <Button
                         variant="outline"
diff --git a/apps/dashboard/src/client/routes/guild/$guildId/leveling.tsx b/apps/dashboard/src/client/routes/guild/$guildId/leveling.tsx
index 480396d..761c381 100644
--- a/apps/dashboard/src/client/routes/guild/$guildId/leveling.tsx
+++ b/apps/dashboard/src/client/routes/guild/$guildId/leveling.tsx
@@ -19,7 +19,6 @@ import { Input } from "../../../shared/ui/input";
 import { Label } from "../../../shared/ui/label";
 import { Card } from "../../../shared/ui/card";
 import { Switch } from "../../../shared/ui/switch";
-import { Textarea } from "../../../shared/ui/textarea";
 import {
   Select,
   SelectContent,
@@ -42,6 +41,7 @@ import { StatsCard } from "../../../shared/components/StatsCard";
 import { DiscordSelect } from "../../../shared/ui/discord-select";
 import { DiscordMultiSelect } from "../../../shared/ui/discord-multi-select";
 import { PageSkeleton, TableSkeleton, FormSkeleton } from "../../../shared/ui/skeletons";
+import { VariableEditor, VariableBrowser, DiscordMessagePreview, usePreviewContext, levelingVariables } from "../../../shared/ui/variable-field";
 import { Users, Award, Power, Loader2 } from "lucide-react";
 
 function formatVoiceTime(minutes: number, t: (key: string, opts?: Record<string, unknown>) => string): string {
@@ -95,6 +95,8 @@ export function LevelingPage() {
     { type: "channels" | "roles"; id: string } | null
   >(null);
 
+  const real = usePreviewContext(guildId);
+
   useEffect(() => {
     if (settings) {
       setNoXpChannels(settings.noXpChannels ?? []);
@@ -512,17 +514,24 @@ export function LevelingPage() {
                           {t("settings.announceDestHint")}
                         </p>
                       </div>
-                      <div>
+                      <div className="space-y-2">
                         <Label>{t("settings.announceMessage")}</Label>
-                        <Textarea
+                        <VariableEditor
+                          multiline
                           value={settings.announceMessage}
-                          onChange={(e) => handleAnnounceMessageChange(e.target.value)}
+                          onChange={(v) => handleAnnounceMessageChange(v)}
+                          variables={levelingVariables}
                           placeholder={t("settings.announceMessagePlaceholder")}
-                          className="mt-1"
                         />
-                        <p className="mt-1 text-xs text-text-muted">
-                          {t("settings.announceMessageVars")}
-                        </p>
+                        <VariableBrowser
+                          variables={levelingVariables}
+                          onInsert={(tok) => handleAnnounceMessageChange(settings.announceMessage + tok)}
+                        />
+                        <DiscordMessagePreview
+                          variables={levelingVariables}
+                          real={real}
+                          content={settings.announceMessage}
+                        />
                       </div>
                     </div>
                   </>
diff --git a/apps/dashboard/src/client/routes/guild/$guildId/scheduled.tsx b/apps/dashboard/src/client/routes/guild/$guildId/scheduled.tsx
index 15bfb4b..1763b29 100644
--- a/apps/dashboard/src/client/routes/guild/$guildId/scheduled.tsx
+++ b/apps/dashboard/src/client/routes/guild/$guildId/scheduled.tsx
@@ -19,7 +19,13 @@ import { ColorPicker } from "../../../shared/ui/color-picker";
 import { Label } from "../../../shared/ui/label";
 import { Card } from "../../../shared/ui/card";
 import { Switch } from "../../../shared/ui/switch";
-import { Textarea } from "../../../shared/ui/textarea";
+import {
+  VariableEditor,
+  VariableBrowser,
+  DiscordMessagePreview,
+  usePreviewContext,
+  welcomeVariables,
+} from "../../../shared/ui/variable-field";
 import {
   Select,
   SelectContent,
@@ -146,6 +152,8 @@ export function ScheduledMessagesPage() {
     [t],
   );
 
+  const real = usePreviewContext(guildId);
+
   const { data, isLoading } = useScheduledMessages(guildId, { page, limit: 10 });
   const { data: channels } = useChannels(guildId);
   const createMsg = useCreateScheduledMessage(guildId);
@@ -593,14 +601,22 @@ export function ScheduledMessagesPage() {
 
               <TabsContent value="text" className="mt-4">
                 <div>
-                  <Label htmlFor="msg-content">{t("form.messageContent")}</Label>
-                  <Textarea
+                  <div className="mb-1 flex items-center justify-between">
+                    <Label htmlFor="msg-content">{t("form.messageContent")}</Label>
+                    <VariableBrowser
+                      variables={welcomeVariables}
+                      onInsert={(tok) => updateForm({ textContent: form.textContent + tok })}
+                    />
+                  </div>
+                  <VariableEditor
                     id="msg-content"
                     placeholder={t("form.messageContent")}
                     value={form.textContent}
-                    onChange={(e) => updateForm({ textContent: e.target.value })}
-                    maxLength={2000}
+                    onChange={(v) => updateForm({ textContent: v })}
+                    variables={welcomeVariables}
+                    multiline
                     rows={5}
+                    maxLength={2000}
                   />
                   <p className="mt-1 text-xs text-text-muted">
                     {t("characters", { count: form.textContent.length })}
@@ -611,20 +627,23 @@ export function ScheduledMessagesPage() {
               <TabsContent value="embed" className="mt-4 space-y-4">
                 <div>
                   <Label htmlFor="embed-title">{t("embed.title")}</Label>
-                  <Input
+                  <VariableEditor
                     id="embed-title"
                     placeholder={t("embed.title")}
                     value={form.embedTitle}
-                    onChange={(e) => updateForm({ embedTitle: e.target.value })}
+                    onChange={(v) => updateForm({ embedTitle: v })}
+                    variables={welcomeVariables}
                   />
                 </div>
                 <div>
                   <Label htmlFor="embed-description">{t("embed.description")}</Label>
-                  <Textarea
+                  <VariableEditor
                     id="embed-description"
                     placeholder={t("embed.description")}
                     value={form.embedDescription}
-                    onChange={(e) => updateForm({ embedDescription: e.target.value })}
+                    onChange={(v) => updateForm({ embedDescription: v })}
+                    variables={welcomeVariables}
+                    multiline
                     rows={4}
                   />
                 </div>
@@ -638,22 +657,24 @@ export function ScheduledMessagesPage() {
                   </div>
                   <div>
                     <Label htmlFor="embed-footer">{t("embed.footer")}</Label>
-                    <Input
+                    <VariableEditor
                       id="embed-footer"
                       placeholder={t("embed.footer")}
                       value={form.embedFooter}
-                      onChange={(e) => updateForm({ embedFooter: e.target.value })}
+                      onChange={(v) => updateForm({ embedFooter: v })}
+                      variables={welcomeVariables}
                     />
                   </div>
                 </div>
                 <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                   <div>
                     <Label htmlFor="embed-thumbnail">{t("embed.thumbnail")}</Label>
-                    <Input
+                    <VariableEditor
                       id="embed-thumbnail"
                       placeholder="https://..."
                       value={form.embedThumbnail}
-                      onChange={(e) => updateForm({ embedThumbnail: e.target.value })}
+                      onChange={(v) => updateForm({ embedThumbnail: v })}
+                      variables={welcomeVariables}
                     />
                   </div>
                   <div>
@@ -667,28 +688,29 @@ export function ScheduledMessagesPage() {
                   </div>
                 </div>
 
-                {/* Embed Preview */}
-                {(form.embedTitle || form.embedDescription) && (
-                  <div
-                    className="rounded-md border-s-4 bg-surface-high p-4"
-                    style={{
-                      borderInlineStartColor: form.embedColor || "#a3a6ff",
-                    }}
-                  >
-                    {form.embedTitle && (
-                      <p className="mb-1 font-semibold text-text">{form.embedTitle}</p>
-                    )}
-                    {form.embedDescription && (
-                      <p className="text-sm text-text-muted">{form.embedDescription}</p>
-                    )}
-                    {form.embedFooter && (
-                      <p className="mt-2 text-xs text-text-muted">{form.embedFooter}</p>
-                    )}
-                  </div>
-                )}
               </TabsContent>
             </Tabs>
 
+            {/* Live Discord-style preview */}
+            <DiscordMessagePreview
+              variables={welcomeVariables}
+              real={real}
+              content={form.messageType === "text" ? form.textContent : undefined}
+              embed={
+                form.messageType === "embed"
+                  ? {
+                      title: form.embedTitle,
+                      description: form.embedDescription,
+                      footer: form.embedFooter,
+                      thumbnail: form.embedThumbnail,
+                      color: form.embedColor
+                        ? parseInt(form.embedColor.replace("#", ""), 16)
+                        : undefined,
+                    }
+                  : undefined
+              }
+            />
+
             {/* Enabled toggle */}
             <div className="flex items-center justify-between">
               <div>
diff --git a/apps/dashboard/src/client/routes/guild/$guildId/welcome.tsx b/apps/dashboard/src/client/routes/guild/$guildId/welcome.tsx
index de5fcdf..a2aa770 100644
--- a/apps/dashboard/src/client/routes/guild/$guildId/welcome.tsx
+++ b/apps/dashboard/src/client/routes/guild/$guildId/welcome.tsx
@@ -20,9 +20,16 @@ import { Label } from "../../../shared/ui/label";
 import { Card } from "../../../shared/ui/card";
 import { Switch } from "../../../shared/ui/switch";
 import { Separator } from "../../../shared/ui/separator";
-import { Textarea } from "../../../shared/ui/textarea";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../shared/ui/tabs";
 import { FormSkeleton } from "../../../shared/ui/skeletons";
+import {
+  VariableEditor,
+  VariableBrowser,
+  DiscordMessagePreview,
+  usePreviewContext,
+  welcomeVariables,
+} from "../../../shared/ui/variable-field";
+import type { PreviewRealData } from "../../../shared/ui/variable-field";
 import type { TFunction } from "i18next";
 
 function createDefaultWelcomeImage(t: TFunction<"welcome">): WelcomeImageSettings {
@@ -49,31 +56,44 @@ function createDefaultFarewellImage(t: TFunction<"welcome">): WelcomeImageSettin
 function EmbedEditor({
   value,
   onChange,
+  real,
   t,
 }: {
   value: EmbedConfig;
   onChange: (config: EmbedConfig) => void;
+  real: PreviewRealData;
   t: TFunction<"welcome">;
 }) {
   return (
     <div className="space-y-4">
       <div>
         <Label htmlFor="embed-title">{t("embed.title")}</Label>
-        <Input
+        <VariableEditor
           id="embed-title"
-          placeholder={t("embed.titlePlaceholder")}
           value={value.title ?? ""}
-          onChange={(e) => onChange({ ...value, title: e.target.value || undefined })}
+          onChange={(v) => onChange({ ...value, title: v || undefined })}
+          variables={welcomeVariables}
+          placeholder={t("embed.titlePlaceholder")}
+          maxLength={256}
         />
       </div>
       <div>
-        <Label htmlFor="embed-description">{t("embed.description")}</Label>
-        <Textarea
+        <div className="flex items-center justify-between">
+          <Label htmlFor="embed-description">{t("embed.description")}</Label>
+          <VariableBrowser
+            variables={welcomeVariables}
+            onInsert={(tok) => onChange({ ...value, description: (value.description ?? "") + tok })}
+          />
+        </div>
+        <VariableEditor
           id="embed-description"
-          placeholder={t("embed.descriptionPlaceholder")}
-          value={value.description ?? ""}
-          onChange={(e) => onChange({ ...value, description: e.target.value || undefined })}
+          multiline
           rows={3}
+          value={value.description ?? ""}
+          onChange={(v) => onChange({ ...value, description: v || undefined })}
+          variables={welcomeVariables}
+          placeholder={t("embed.descriptionPlaceholder")}
+          maxLength={4096}
         />
       </div>
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
@@ -93,22 +113,26 @@ function EmbedEditor({
         </div>
         <div>
           <Label htmlFor="embed-footer">{t("embed.footer")}</Label>
-          <Input
+          <VariableEditor
             id="embed-footer"
-            placeholder={t("embed.footerPlaceholder")}
             value={value.footer ?? ""}
-            onChange={(e) => onChange({ ...value, footer: e.target.value || undefined })}
+            onChange={(v) => onChange({ ...value, footer: v || undefined })}
+            variables={welcomeVariables}
+            placeholder={t("embed.footerPlaceholder")}
+            maxLength={2048}
           />
         </div>
       </div>
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
         <div>
           <Label htmlFor="embed-thumbnail">{t("embed.thumbnail")}</Label>
-          <Input
+          <VariableEditor
             id="embed-thumbnail"
-            placeholder="{user.avatar}"
             value={value.thumbnail ?? ""}
-            onChange={(e) => onChange({ ...value, thumbnail: e.target.value || undefined })}
+            onChange={(v) => onChange({ ...value, thumbnail: v || undefined })}
+            variables={welcomeVariables}
+            placeholder="{user.avatar}"
+            maxLength={2048}
           />
         </div>
         <div>
@@ -121,10 +145,17 @@ function EmbedEditor({
           />
         </div>
       </div>
-      <p className="text-xs text-text-muted">
-        {t("embed.variables")} {"{user}"} {"{user.tag}"} {"{user.name}"} {"{user.id}"} {"{user.avatar}"}{" "}
-        {"{server}"} {"{server.id}"} {"{membercount}"} {"{server.icon}"}
-      </p>
+      <DiscordMessagePreview
+        variables={welcomeVariables}
+        real={real}
+        embed={{
+          title: value.title,
+          description: value.description,
+          footer: value.footer,
+          thumbnail: value.thumbnail,
+          color: value.color,
+        }}
+      />
     </div>
   );
 }
@@ -135,6 +166,7 @@ export function WelcomePage() {
   const { data: config, isLoading } = useWelcomeConfig(guildId);
   const updateConfig = useUpdateWelcomeConfig(guildId);
   const testWelcome = useTestWelcome(guildId);
+  const real = usePreviewContext(guildId);
 
   const defaultWelcomeImage = useMemo(() => createDefaultWelcomeImage(t), [t]);
   const defaultFarewellImage = useMemo(() => createDefaultFarewellImage(t), [t]);
@@ -267,7 +299,7 @@ export function WelcomePage() {
             </div>
 
             <h4 className="mb-3 font-label text-sm font-semibold">{t("welcome.embedBuilder")}</h4>
-            <EmbedEditor value={welcomeMessage} onChange={setWelcomeMessage} t={t} />
+            <EmbedEditor value={welcomeMessage} onChange={setWelcomeMessage} real={real} t={t} />
           </Card>
         </TabsContent>
 
@@ -335,7 +367,7 @@ export function WelcomePage() {
             </div>
 
             <h4 className="mb-3 font-label text-sm font-semibold">{t("welcome.embedBuilder")}</h4>
-            <EmbedEditor value={farewellMessage} onChange={setFarewellMessage} t={t} />
+            <EmbedEditor value={farewellMessage} onChange={setFarewellMessage} real={real} t={t} />
           </Card>
         </TabsContent>
 
@@ -390,7 +422,7 @@ export function WelcomePage() {
             <Separator className="mb-6" />
 
             <h4 className="mb-3 font-label text-sm font-semibold">{t("welcome.embedBuilder")}</h4>
-            <EmbedEditor value={dmMessage} onChange={setDmMessage} t={t} />
+            <EmbedEditor value={dmMessage} onChange={setDmMessage} real={real} t={t} />
           </Card>
         </TabsContent>
 
diff --git a/apps/dashboard/src/client/shared/ui/variable-field/DiscordMessagePreview.tsx b/apps/dashboard/src/client/shared/ui/variable-field/DiscordMessagePreview.tsx
new file mode 100644
index 0000000..6cdf6e6
--- /dev/null
+++ b/apps/dashboard/src/client/shared/ui/variable-field/DiscordMessagePreview.tsx
@@ -0,0 +1,62 @@
+import * as React from "react";
+import type { PreviewRealData, VariableDescriptor } from "./types";
+import { buildTokenValues } from "./registry";
+import { resolveTemplatePreview } from "./resolvePreview";
+
+interface DiscordEmbedInput {
+  title?: string;
+  description?: string;
+  footer?: string;
+  thumbnail?: string;
+  color?: number;
+}
+interface DiscordMessagePreviewProps {
+  variables: VariableDescriptor[];
+  real: PreviewRealData;
+  content?: string;
+  embed?: DiscordEmbedInput;
+}
+
+function hexColor(color: number | undefined): string {
+  if (color === undefined) return "#a3a6ff";
+  return "#" + color.toString(16).padStart(6, "0");
+}
+
+export default function DiscordMessagePreview({ variables, real, content, embed }: DiscordMessagePreviewProps) {
+  const values = React.useMemo(() => buildTokenValues(variables, real), [variables, real]);
+  const resolve = React.useCallback((s?: string) => (s ? resolveTemplatePreview(s, values) : ""), [values]);
+
+  const hasEmbed = !!(embed && (embed.title || embed.description || embed.footer || embed.thumbnail));
+  const resolvedContent = resolve(content);
+  const thumb = resolve(embed?.thumbnail);
+
+  return (
+    <div className="rounded-md bg-surface-container p-3 text-sm">
+      <div className="flex gap-3">
+        <img src={real.userAvatar} alt="" className="size-10 rounded-full" />
+        <div className="min-w-0 flex-1">
+          <div className="flex items-baseline gap-2">
+            <span className="font-medium text-text">{real.userName}</span>
+            <span className="text-[10px] text-text-muted">today</span>
+          </div>
+          {resolvedContent && <p className="whitespace-pre-wrap wrap-break-word text-text">{resolvedContent}</p>}
+          {hasEmbed && (
+            <div
+              className="mt-1 flex gap-3 rounded-sm bg-surface-lowest p-3"
+              style={{ borderInlineStart: `4px solid ${hexColor(embed?.color)}` }}
+            >
+              <div className="min-w-0 flex-1">
+                {embed?.title && <div className="font-semibold text-text">{resolve(embed.title)}</div>}
+                {embed?.description && (
+                  <div className="whitespace-pre-wrap wrap-break-word text-text-muted">{resolve(embed.description)}</div>
+                )}
+                {embed?.footer && <div className="mt-2 text-[10px] text-text-muted">{resolve(embed.footer)}</div>}
+              </div>
+              {thumb && /^https?:\/\//.test(thumb) && <img src={thumb} alt="" className="size-16 rounded-sm object-cover" />}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/client/shared/ui/variable-field/VariableBrowser.tsx b/apps/dashboard/src/client/shared/ui/variable-field/VariableBrowser.tsx
new file mode 100644
index 0000000..914030c
--- /dev/null
+++ b/apps/dashboard/src/client/shared/ui/variable-field/VariableBrowser.tsx
@@ -0,0 +1,72 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Popover, PopoverTrigger, PopoverContent } from "../popover";
+import { Button } from "../button";
+import { Input } from "../input";
+import { ScrollArea } from "../scroll-area";
+import { Icon } from "../../components/Icon";
+import type { VariableDescriptor } from "./types";
+import { filterByQuery } from "./filterVariables";
+
+interface VariableBrowserProps {
+  variables: VariableDescriptor[];
+  onInsert: (token: string) => void;
+  label?: string;
+}
+
+export default function VariableBrowser({ variables, onInsert, label }: VariableBrowserProps) {
+  const { t } = useTranslation("common");
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const matches = React.useMemo(() => filterByQuery(variables, query), [variables, query]);
+
+  function pick(token: string) {
+    onInsert(token);
+    setOpen(false);
+    setQuery("");
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button type="button" variant="ghost" size="sm" className="gap-1 text-xs">
+          <Icon name="add" className="size-3.5" />
+          {label ?? t("variableField.insert")}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="end" className="w-72 p-2">
+        <Input
+          type="search"
+          role="searchbox"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder={t("variableField.search")}
+          className="mb-2"
+        />
+        <ScrollArea className="max-h-64">
+          <ul className="space-y-0.5">
+            {matches.length === 0 && (
+              <li className="px-2 py-3 text-center text-xs text-text-muted">
+                {t("variableField.noMatches")}
+              </li>
+            )}
+            {matches.map((m) => (
+              <li key={m.token}>
+                <button
+                  type="button"
+                  onClick={() => pick(m.token)}
+                  className="flex w-full items-center justify-between gap-3 rounded-sm px-2 py-1.5 text-left text-sm hover:bg-accent/10"
+                >
+                  <span className="font-mono text-accent">{m.token}</span>
+                  <span className="truncate text-xs text-text-muted">
+                    {m.description ?? (m.labelKey ? t(m.labelKey) : "")}
+                  </span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </ScrollArea>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/dashboard/src/client/shared/ui/variable-field/VariableEditor.tsx b/apps/dashboard/src/client/shared/ui/variable-field/VariableEditor.tsx
new file mode 100644
index 0000000..04294e8
--- /dev/null
+++ b/apps/dashboard/src/client/shared/ui/variable-field/VariableEditor.tsx
@@ -0,0 +1,292 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { cn } from "../../lib/utils";
+import { Popover, PopoverAnchor, PopoverContent } from "../popover";
+import { ScrollArea } from "../scroll-area";
+import type { VariableDescriptor } from "./types";
+import { tokenize } from "./tokens";
+import { detectUnknownTokens } from "./validation";
+import { insertToken, getActiveQuery } from "./caret";
+import { filterByQuery } from "./filterVariables";
+import { knownTokenSet } from "./registry";
+
+interface VariableEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  variables: VariableDescriptor[];
+  multiline?: boolean;
+  rows?: number;
+  maxLength?: number;
+  placeholder?: string;
+  disabled?: boolean;
+  id?: string;
+  "aria-label"?: string;
+  "aria-required"?: boolean;
+  className?: string;
+}
+
+// Border, background, rounding and the focus ring live on the CONTAINER, so the
+// highlight backdrop and the text field can stack without a doubled border.
+const CONTAINER =
+  "relative w-full rounded-sm border border-transparent bg-surface-lowest text-text transition-colors focus-within:border-accent focus-within:shadow-[0_0_4px_rgba(163,166,255,0.10)]";
+// Padding + typography shared by BOTH layers so glyphs line up exactly.
+const FIELD_BASE = "px-3 text-sm";
+const INPUT_BOX = "h-9 py-1";
+const AREA_BOX = "min-h-[60px] py-2";
+
+export default function VariableEditor(props: VariableEditorProps) {
+  const {
+    value,
+    onChange,
+    variables,
+    multiline,
+    rows = 3,
+    maxLength,
+    placeholder,
+    disabled,
+    id,
+  } = props;
+  const { t } = useTranslation("common");
+  const known = React.useMemo(() => knownTokenSet(variables), [variables]);
+  const fieldRef = React.useRef<HTMLTextAreaElement & HTMLInputElement>(null);
+  const backdropRef = React.useRef<HTMLDivElement>(null);
+
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const [queryStart, setQueryStart] = React.useState(0);
+  // -1 means "no item highlighted yet"; ArrowDown moves to 0 first
+  const [active, setActive] = React.useState(-1);
+
+  const matches = React.useMemo(
+    () => (open ? filterByQuery(variables, query) : []),
+    [open, query, variables],
+  );
+  // Use value prop for overlay rendering; unknown tokens computed from prop
+  const unknowns = React.useMemo(() => detectUnknownTokens(value, known), [value, known]);
+  const segments = React.useMemo(() => tokenize(value, known), [value, known]);
+
+  React.useEffect(() => {
+    // Reset to -1 (nothing highlighted) whenever the match list changes
+    setActive(-1);
+  }, [matches.length]);
+
+  function syncQueryFromValue(domValue: string, caret: number) {
+    const q = getActiveQuery(domValue, caret);
+    if (q) {
+      setQuery(q.query);
+      setQueryStart(q.start);
+      setOpen(true);
+    } else {
+      setOpen(false);
+    }
+  }
+
+  function syncQueryFromCaret() {
+    const el = fieldRef.current;
+    if (!el) return;
+    syncQueryFromValue(el.value, el.selectionStart ?? el.value.length);
+  }
+
+  function commit(token: string) {
+    const el = fieldRef.current;
+    if (!el) return;
+    // Use the DOM's live value so we always have the real current text
+    const domValue = el.value;
+    const caret = el.selectionStart ?? domValue.length;
+    const { value: next, cursor } = insertToken(domValue, queryStart, caret, token);
+    onChange(next);
+    setOpen(false);
+    requestAnimationFrame(() => {
+      el.focus();
+      el.setSelectionRange(cursor, cursor);
+    });
+  }
+
+  function handleChange(e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) {
+    const newValue = e.target.value;
+    const caret = e.target.selectionStart ?? newValue.length;
+    onChange(newValue);
+    // Read directly from the event target — available synchronously before rAF
+    syncQueryFromValue(newValue, caret);
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (!open || matches.length === 0) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActive((a) => (a + 1) % matches.length);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActive((a) => (a <= 0 ? matches.length - 1 : a - 1));
+    } else if (e.key === "Enter" || e.key === "Tab") {
+      e.preventDefault();
+      // If nothing is highlighted yet, default to first match
+      const idx = active < 0 ? 0 : active;
+      commit(matches[idx].token);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setOpen(false);
+    }
+  }
+
+  function handleScroll(e: React.UIEvent<HTMLElement>) {
+    if (backdropRef.current) {
+      backdropRef.current.scrollTop = e.currentTarget.scrollTop;
+      backdropRef.current.scrollLeft = e.currentTarget.scrollLeft;
+    }
+  }
+
+  const listboxId = id ? `${id}-listbox` : "vf-listbox";
+
+  return (
+    <div>
+      <Popover open={open && matches.length > 0}>
+        <PopoverAnchor asChild>
+          <div
+            className={cn(
+              CONTAINER,
+              disabled && "cursor-not-allowed opacity-50",
+              props.className,
+            )}
+          >
+            {/* Overlay backdrop for token highlighting — aria-hidden, pointer-events-none */}
+            <div
+              ref={backdropRef}
+              aria-hidden="true"
+              className={cn(
+                "pointer-events-none absolute inset-0 overflow-hidden text-text",
+                FIELD_BASE,
+                multiline ? AREA_BOX : INPUT_BOX,
+                multiline ? "whitespace-pre-wrap wrap-break-word" : "whitespace-pre",
+              )}
+            >
+              {segments.map((seg, i) =>
+                seg.type === "var" ? (
+                  <span
+                    key={i}
+                    className={
+                      seg.known
+                        ? "text-accent"
+                        : "text-danger underline decoration-danger/50"
+                    }
+                  >
+                    {seg.value}
+                  </span>
+                ) : (
+                  <span key={i}>{seg.value}</span>
+                ),
+              )}
+              {/* Preserve trailing newline height in textarea */}
+              {value.endsWith("\n") ? "\n" : ""}
+            </div>
+
+            {multiline ? (
+              <textarea
+                ref={fieldRef}
+                id={id}
+                rows={rows}
+                value={value}
+                maxLength={maxLength}
+                placeholder={placeholder}
+                disabled={disabled}
+                aria-label={props["aria-label"]}
+                aria-required={props["aria-required"]}
+                role="combobox"
+                aria-expanded={open && matches.length > 0}
+                aria-controls={listboxId}
+                aria-autocomplete="list"
+                aria-activedescendant={active >= 0 ? `${listboxId}-opt-${active}` : undefined}
+                className={cn(
+                  "relative block w-full resize-none bg-transparent text-transparent caret-text outline-none placeholder:text-outline",
+                  FIELD_BASE,
+                  AREA_BOX,
+                  "whitespace-pre-wrap wrap-break-word",
+                )}
+                onChange={handleChange}
+                onKeyDown={handleKeyDown}
+                onScroll={handleScroll}
+                onClick={syncQueryFromCaret}
+                onBlur={() => setTimeout(() => setOpen(false), 100)}
+              />
+            ) : (
+              <input
+                ref={fieldRef}
+                id={id}
+                type="text"
+                value={value}
+                maxLength={maxLength}
+                placeholder={placeholder}
+                disabled={disabled}
+                aria-label={props["aria-label"]}
+                aria-required={props["aria-required"]}
+                role="combobox"
+                aria-expanded={open && matches.length > 0}
+                aria-controls={listboxId}
+                aria-autocomplete="list"
+                aria-activedescendant={active >= 0 ? `${listboxId}-opt-${active}` : undefined}
+                className={cn(
+                  "relative block w-full bg-transparent text-transparent caret-text outline-none placeholder:text-outline",
+                  FIELD_BASE,
+                  INPUT_BOX,
+                )}
+                onChange={handleChange}
+                onKeyDown={handleKeyDown}
+                onScroll={handleScroll}
+                onClick={syncQueryFromCaret}
+                onBlur={() => setTimeout(() => setOpen(false), 100)}
+              />
+            )}
+          </div>
+        </PopoverAnchor>
+
+        <PopoverContent
+          align="start"
+          className="w-72 p-0"
+          onOpenAutoFocus={(e) => e.preventDefault()}
+        >
+          <ScrollArea className="max-h-56">
+            <ul role="listbox" id={listboxId} className="p-1">
+              {matches.map((m, i) => (
+                <li
+                  key={m.token}
+                  id={`${listboxId}-opt-${i}`}
+                  role="option"
+                  aria-selected={i === active}
+                  className={cn(
+                    "flex cursor-pointer items-center justify-between gap-3 rounded-sm px-2 py-1.5 text-sm",
+                    active >= 0 && i === active
+                      ? "bg-accent/15 text-text"
+                      : "text-text-muted",
+                  )}
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    commit(m.token);
+                  }}
+                  onMouseEnter={() => setActive(i)}
+                >
+                  <span className="font-mono text-accent">{m.token}</span>
+                  <span className="truncate text-xs">
+                    {m.description ?? (m.labelKey ? t(m.labelKey) : "")}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </ScrollArea>
+        </PopoverContent>
+      </Popover>
+
+      {unknowns.length > 0 && (
+        <ul className="mt-1 space-y-0.5">
+          {unknowns.map((u) => (
+            <li key={u.token} className="text-xs text-danger">
+              {t("variableField.unknown", { token: u.token })}
+              {u.suggestion
+                ? " " + t("variableField.didYouMean", { suggestion: u.suggestion })
+                : ""}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/client/shared/ui/variable-field/automationVariables.ts b/apps/dashboard/src/client/shared/ui/variable-field/automationVariables.ts
new file mode 100644
index 0000000..8c4ac3d
--- /dev/null
+++ b/apps/dashboard/src/client/shared/ui/variable-field/automationVariables.ts
@@ -0,0 +1,48 @@
+import type { RealDataKey, VariableDescriptor, VariableGroup } from "./types";
+
+const REAL_KEYS: Record<string, RealDataKey> = {
+  "{user}": "userMention",
+  "{user.name}": "userName",
+  "{user.tag}": "userTag",
+  "{user.id}": "userId",
+  "{guild}": "serverName",
+  "{guild.memberCount}": "memberCount",
+};
+
+const GROUPS: Record<string, VariableGroup> = {
+  "{user}": "user", "{user.name}": "user", "{user.tag}": "user", "{user.id}": "user",
+  "{channel}": "channel", "{channel.name}": "channel", "{channel.id}": "channel",
+  "{role}": "role", "{role.name}": "role", "{role.id}": "role",
+  "{guild}": "server", "{guild.memberCount}": "server",
+  "{message.content}": "message", "{message.id}": "message", "{message.url}": "message",
+  "{emoji}": "event", "{emoji.name}": "event", "{ban.reason}": "event",
+  "{old.nickname}": "event", "{new.nickname}": "event", "{boost.since}": "event",
+  "{timeout.until}": "event", "{voice.channel}": "event", "{voice.channel.name}": "event",
+  "{thread.name}": "event", "{thread.id}": "event", "{timestamp}": "misc",
+};
+
+const SAMPLES: Record<string, string> = {
+  "{user}": "@Ada", "{user.name}": "Ada", "{user.tag}": "Ada#0001", "{user.id}": "123456789012345678",
+  "{channel}": "#general", "{channel.name}": "general", "{channel.id}": "112233445566778899",
+  "{role}": "@Members", "{role.name}": "Members", "{role.id}": "223344556677889900",
+  "{guild}": "Acme", "{guild.memberCount}": "1,234", "{timestamp}": "just now",
+  "{message.content}": "Hello world", "{message.id}": "334455667788990011", "{message.url}": "https://discord.com/channels/…",
+  "{emoji}": "🎉", "{emoji.name}": "tada", "{ban.reason}": "Spamming",
+  "{old.nickname}": "OldNick", "{new.nickname}": "NewNick", "{boost.since}": "2 days ago",
+  "{timeout.until}": "in 1 hour", "{voice.channel}": "General VC", "{voice.channel.name}": "General VC",
+  "{thread.name}": "help-thread", "{thread.id}": "445566778899001122",
+};
+
+export function buildAutomationVariables(
+  constants: { eventTypeVariables: Record<string, string[]>; templateVariables: Record<string, string> },
+  eventType: string,
+): VariableDescriptor[] {
+  const tokens = constants.eventTypeVariables[eventType] ?? [];
+  return tokens.map((token) => ({
+    token,
+    description: constants.templateVariables[token] ?? token,
+    example: SAMPLES[token] ?? token,
+    group: GROUPS[token] ?? "misc",
+    realKey: REAL_KEYS[token],
+  }));
+}
diff --git a/apps/dashboard/src/client/shared/ui/variable-field/caret.ts b/apps/dashboard/src/client/shared/ui/variable-field/caret.ts
new file mode 100644
index 0000000..e4464ae
--- /dev/null
+++ b/apps/dashboard/src/client/shared/ui/variable-field/caret.ts
@@ -0,0 +1,23 @@
+export function insertToken(
+  value: string,
+  selStart: number,
+  selEnd: number,
+  token: string,
+): { value: string; cursor: number } {
+  const next = value.slice(0, selStart) + token + value.slice(selEnd);
+  return { value: next, cursor: selStart + token.length };
+}
+
+export function getActiveQuery(
+  value: string,
+  caret: number,
+): { query: string; start: number } | null {
+  const before = value.slice(0, caret);
+  const open = before.lastIndexOf("{");
+  if (open === -1) return null;
+  const run = before.slice(open + 1);
+  // Valid partial token chars only; a closing brace or any other char breaks it.
+  if (!/^[\w.]*$/.test(run)) return null;
+  if (run.includes("}")) return null;
+  return { query: run, start: open };
+}
diff --git a/apps/dashboard/src/client/shared/ui/variable-field/filterVariables.ts b/apps/dashboard/src/client/shared/ui/variable-field/filterVariables.ts
new file mode 100644
index 0000000..5ec39f4
--- /dev/null
+++ b/apps/dashboard/src/client/shared/ui/variable-field/filterVariables.ts
@@ -0,0 +1,18 @@
+import type { VariableDescriptor } from "./types";
+
+function bareToken(token: string): string {
+  return token.replace(/[{}]/g, "").toLowerCase();
+}
+
+export function filterByQuery(
+  descriptors: VariableDescriptor[],
+  query: string,
+): VariableDescriptor[] {
+  const q = query.toLowerCase();
+  if (q === "") return [...descriptors];
+  const matches = descriptors
+    .map((d, index) => ({ d, index, pos: bareToken(d.token).indexOf(q) }))
+    .filter((m) => m.pos !== -1);
+  matches.sort((a, b) => (a.pos !== b.pos ? a.pos - b.pos : a.index - b.index));
+  return matches.map((m) => m.d);
+}
diff --git a/apps/dashboard/src/client/shared/ui/variable-field/index.ts b/apps/dashboard/src/client/shared/ui/variable-field/index.ts
new file mode 100644
index 0000000..7dd2760
--- /dev/null
+++ b/apps/dashboard/src/client/shared/ui/variable-field/index.ts
@@ -0,0 +1,16 @@
+export { default as VariableEditor } from "./VariableEditor";
+export { default as VariableBrowser } from "./VariableBrowser";
+export { default as DiscordMessagePreview } from "./DiscordMessagePreview";
+export { usePreviewContext } from "./usePreviewContext";
+export {
+  welcomeVariables,
+  customCommandVariables,
+  levelingVariables,
+  tempvoiceVariables,
+  knownTokenSet,
+  buildRealData,
+  buildTokenValues,
+} from "./registry";
+export { buildAutomationVariables } from "./automationVariables";
+export { resolveTemplatePreview } from "./resolvePreview";
+export type { VariableDescriptor, VariableGroup, PreviewRealData, RealDataKey } from "./types";
diff --git a/apps/dashboard/src/client/shared/ui/variable-field/registry.ts b/apps/dashboard/src/client/shared/ui/variable-field/registry.ts
new file mode 100644
index 0000000..2a1809a
--- /dev/null
+++ b/apps/dashboard/src/client/shared/ui/variable-field/registry.ts
@@ -0,0 +1,77 @@
+import type { PreviewRealData, RealDataKey, VariableDescriptor } from "./types";
+
+export const welcomeVariables: VariableDescriptor[] = [
+  { token: "{user}", labelKey: "variables.user", example: "@Ada", group: "user", realKey: "userMention" },
+  { token: "{user.tag}", labelKey: "variables.userTag", example: "Ada#0001", group: "user", realKey: "userTag" },
+  { token: "{user.name}", labelKey: "variables.userName", example: "Ada", group: "user", realKey: "userName" },
+  { token: "{user.id}", labelKey: "variables.userId", example: "123456789012345678", group: "user", realKey: "userId" },
+  { token: "{user.avatar}", labelKey: "variables.userAvatar", example: "https://cdn.discordapp.com/embed/avatars/0.png", group: "user", realKey: "userAvatar" },
+  { token: "{server}", labelKey: "variables.server", example: "Acme", group: "server", realKey: "serverName" },
+  { token: "{server.id}", labelKey: "variables.serverId", example: "987654321098765432", group: "server", realKey: "serverId" },
+  { token: "{membercount}", labelKey: "variables.memberCount", example: "1,234", group: "server", realKey: "memberCount" },
+  { token: "{server.icon}", labelKey: "variables.serverIcon", example: "https://cdn.discordapp.com/embed/avatars/0.png", group: "server", realKey: "serverIcon" },
+];
+
+export const customCommandVariables: VariableDescriptor[] = [
+  { token: "{user}", labelKey: "variables.entries.user", example: "@Ada", group: "user", realKey: "userMention" },
+  { token: "{username}", labelKey: "variables.entries.username", example: "Ada", group: "user", realKey: "userName" },
+  { token: "{userId}", labelKey: "variables.entries.userId", example: "123456789012345678", group: "user", realKey: "userId" },
+  { token: "{server}", labelKey: "variables.entries.server", example: "Acme", group: "server", realKey: "serverName" },
+  { token: "{channel}", labelKey: "variables.entries.channel", example: "#general", group: "channel" },
+  { token: "{channelName}", labelKey: "variables.entries.channelName", example: "general", group: "channel" },
+  { token: "{memberCount}", labelKey: "variables.entries.memberCount", example: "1,234", group: "server", realKey: "memberCount" },
+];
+
+export const levelingVariables: VariableDescriptor[] = [
+  { token: "{user}", labelKey: "variables.user", example: "@Ada", group: "user", realKey: "userMention" },
+  { token: "{level}", labelKey: "variables.level", example: "5", group: "event" },
+];
+
+export const tempvoiceVariables: VariableDescriptor[] = [
+  { token: "{user}", labelKey: "variables.user", example: "Ada", group: "user", realKey: "userName" },
+];
+
+export function knownTokenSet(descriptors: VariableDescriptor[]): Set<string> {
+  return new Set(descriptors.map((d) => d.token));
+}
+
+export function buildRealData(
+  guild: { id: string; name: string; icon: string | null } | undefined,
+  user: { userId: string; username: string; avatar: string | null } | undefined,
+): PreviewRealData {
+  const serverName = guild?.name ?? "My Server";
+  const serverId = guild?.id ?? "987654321098765432";
+  const serverIcon =
+    guild?.icon && guild.id
+      ? `https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.png`
+      : "https://cdn.discordapp.com/embed/avatars/0.png";
+  const userName = user?.username ?? "User";
+  const userId = user?.userId ?? "123456789012345678";
+  const userAvatar =
+    user?.avatar && user.userId
+      ? `https://cdn.discordapp.com/avatars/${user.userId}/${user.avatar}.png`
+      : "https://cdn.discordapp.com/embed/avatars/0.png";
+  return {
+    userMention: `@${userName}`,
+    userName,
+    userTag: userName,
+    userId,
+    userAvatar,
+    serverName,
+    serverId,
+    serverIcon,
+    memberCount: "1,234",
+  };
+}
+
+export function buildTokenValues(
+  descriptors: VariableDescriptor[],
+  real: PreviewRealData,
+): Map<string, string> {
+  const map = new Map<string, string>();
+  for (const d of descriptors) {
+    const value: string = d.realKey ? real[d.realKey as RealDataKey] : d.example;
+    map.set(d.token, value);
+  }
+  return map;
+}
diff --git a/apps/dashboard/src/client/shared/ui/variable-field/resolvePreview.ts b/apps/dashboard/src/client/shared/ui/variable-field/resolvePreview.ts
new file mode 100644
index 0000000..44f4be8
--- /dev/null
+++ b/apps/dashboard/src/client/shared/ui/variable-field/resolvePreview.ts
@@ -0,0 +1,8 @@
+import { tokenize } from "./tokens";
+
+export function resolveTemplatePreview(template: string, values: Map<string, string>): string {
+  const known = new Set(values.keys());
+  return tokenize(template, known)
+    .map((seg) => (seg.type === "var" && seg.known ? values.get(seg.value)! : seg.value))
+    .join("");
+}
diff --git a/apps/dashboard/src/client/shared/ui/variable-field/tokens.ts b/apps/dashboard/src/client/shared/ui/variable-field/tokens.ts
new file mode 100644
index 0000000..650cb57
--- /dev/null
+++ b/apps/dashboard/src/client/shared/ui/variable-field/tokens.ts
@@ -0,0 +1,29 @@
+import type { Segment } from "./types";
+
+export const TOKEN_REGEX = /\{[\w.]+\}/g;
+
+export function tokenize(value: string, known: Set<string>): Segment[] {
+  const segments: Segment[] = [];
+  let lastIndex = 0;
+  const re = new RegExp(TOKEN_REGEX.source, "g");
+  let match: RegExpExecArray | null;
+  while ((match = re.exec(value)) !== null) {
+    if (match.index > lastIndex) {
+      segments.push({ type: "text", value: value.slice(lastIndex, match.index), known: false });
+    }
+    segments.push({ type: "var", value: match[0], known: known.has(match[0]) });
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < value.length) {
+    segments.push({ type: "text", value: value.slice(lastIndex), known: false });
+  }
+  return segments;
+}
+
+export function extractTokens(value: string): string[] {
+  const re = new RegExp(TOKEN_REGEX.source, "g");
+  const out: string[] = [];
+  let match: RegExpExecArray | null;
+  while ((match = re.exec(value)) !== null) out.push(match[0]);
+  return out;
+}
diff --git a/apps/dashboard/src/client/shared/ui/variable-field/types.ts b/apps/dashboard/src/client/shared/ui/variable-field/types.ts
new file mode 100644
index 0000000..9947a89
--- /dev/null
+++ b/apps/dashboard/src/client/shared/ui/variable-field/types.ts
@@ -0,0 +1,38 @@
+export type RealDataKey =
+  | "userMention" | "userName" | "userTag" | "userId" | "userAvatar"
+  | "serverName" | "serverId" | "serverIcon" | "memberCount";
+
+export type VariableGroup =
+  | "user" | "server" | "channel" | "role" | "message" | "event" | "misc";
+
+export interface VariableDescriptor {
+  token: string;
+  labelKey?: string;
+  description?: string;
+  example: string;
+  group: VariableGroup;
+  realKey?: RealDataKey;
+}
+
+export interface Segment {
+  type: "text" | "var";
+  value: string;
+  known: boolean;
+}
+
+export interface UnknownToken {
+  token: string;
+  suggestion: string | null;
+}
+
+export interface PreviewRealData {
+  userMention: string;
+  userName: string;
+  userTag: string;
+  userId: string;
+  userAvatar: string;
+  serverName: string;
+  serverId: string;
+  serverIcon: string;
+  memberCount: string;
+}
diff --git a/apps/dashboard/src/client/shared/ui/variable-field/usePreviewContext.ts b/apps/dashboard/src/client/shared/ui/variable-field/usePreviewContext.ts
new file mode 100644
index 0000000..471069d
--- /dev/null
+++ b/apps/dashboard/src/client/shared/ui/variable-field/usePreviewContext.ts
@@ -0,0 +1,17 @@
+import { useMemo } from "react";
+import { useAuth } from "../../hooks/useAuth";
+import { useGuilds } from "../../hooks/useGuilds";
+import { buildRealData } from "./registry";
+import type { PreviewRealData } from "./types";
+
+export function usePreviewContext(guildId: string): PreviewRealData {
+  const auth = useAuth();
+  const guilds = useGuilds();
+  return useMemo(() => {
+    const user = auth.data
+      ? { userId: auth.data.userId, username: auth.data.username, avatar: auth.data.avatar }
+      : undefined;
+    const guild = (guilds.data ?? []).find((g) => g.id === guildId);
+    return buildRealData(guild, user);
+  }, [auth.data, guilds.data, guildId]);
+}
diff --git a/apps/dashboard/src/client/shared/ui/variable-field/validation.ts b/apps/dashboard/src/client/shared/ui/variable-field/validation.ts
new file mode 100644
index 0000000..f571986
--- /dev/null
+++ b/apps/dashboard/src/client/shared/ui/variable-field/validation.ts
@@ -0,0 +1,39 @@
+import type { UnknownToken } from "./types";
+import { extractTokens } from "./tokens";
+
+export function levenshtein(a: string, b: string): number {
+  const m = a.length;
+  const n = b.length;
+  const dp: number[] = Array.from({ length: n + 1 }, (_, i) => i);
+  for (let i = 1; i <= m; i++) {
+    let prev = dp[0];
+    dp[0] = i;
+    for (let j = 1; j <= n; j++) {
+      const tmp = dp[j];
+      dp[j] = a[i - 1] === b[j - 1] ? prev : 1 + Math.min(prev, dp[j], dp[j - 1]);
+      prev = tmp;
+    }
+  }
+  return dp[n];
+}
+
+export function detectUnknownTokens(value: string, known: Set<string>): UnknownToken[] {
+  const knownList = [...known];
+  const seen = new Set<string>();
+  const result: UnknownToken[] = [];
+  for (const token of extractTokens(value)) {
+    if (known.has(token) || seen.has(token)) continue;
+    seen.add(token);
+    let best: string | null = null;
+    let bestDist = Infinity;
+    for (const candidate of knownList) {
+      const dist = levenshtein(token, candidate);
+      if (dist < bestDist) {
+        bestDist = dist;
+        best = candidate;
+      }
+    }
+    result.push({ token, suggestion: bestDist <= 3 ? best : null });
+  }
+  return result;
+}
diff --git a/apps/dashboard/tests/client/shared/ui/variable-field/DiscordMessagePreview.test.tsx b/apps/dashboard/tests/client/shared/ui/variable-field/DiscordMessagePreview.test.tsx
new file mode 100644
index 0000000..9641542
--- /dev/null
+++ b/apps/dashboard/tests/client/shared/ui/variable-field/DiscordMessagePreview.test.tsx
@@ -0,0 +1,25 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import DiscordMessagePreview from "../../../../../src/client/shared/ui/variable-field/DiscordMessagePreview";
+import { welcomeVariables, buildRealData } from "../../../../../src/client/shared/ui/variable-field/registry";
+
+const real = buildRealData({ id: "42", name: "Acme", icon: null }, { userId: "7", username: "Ada", avatar: null });
+
+describe("DiscordMessagePreview", () => {
+  it("renders resolved message content", () => {
+    render(<DiscordMessagePreview variables={welcomeVariables} real={real} content="Hey {user}, welcome to {server}!" />);
+    expect(screen.getByText("Hey @Ada, welcome to Acme!")).toBeTruthy();
+  });
+  it("renders an embed title and description", () => {
+    render(
+      <DiscordMessagePreview
+        variables={welcomeVariables}
+        real={real}
+        embed={{ title: "Welcome to {server}!", description: "Member #{membercount}" }}
+      />,
+    );
+    expect(screen.getByText("Welcome to Acme!")).toBeTruthy();
+    expect(screen.getByText("Member #1,234")).toBeTruthy();
+  });
+});
diff --git a/apps/dashboard/tests/client/shared/ui/variable-field/VariableBrowser.test.tsx b/apps/dashboard/tests/client/shared/ui/variable-field/VariableBrowser.test.tsx
new file mode 100644
index 0000000..12cf4e7
--- /dev/null
+++ b/apps/dashboard/tests/client/shared/ui/variable-field/VariableBrowser.test.tsx
@@ -0,0 +1,37 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeAll } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import VariableBrowser from "../../../../../src/client/shared/ui/variable-field/VariableBrowser";
+import type { VariableDescriptor } from "../../../../../src/client/shared/ui/variable-field/types";
+
+// jsdom lacks ResizeObserver (used by Radix ScrollArea); stub it so renders don't throw.
+beforeAll(() => {
+  if (typeof globalThis.ResizeObserver === "undefined") {
+    globalThis.ResizeObserver = class ResizeObserver {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    };
+  }
+});
+
+vi.mock("react-i18next", () => ({ useTranslation: () => ({ t: (k: string) => k }) }));
+
+const vars: VariableDescriptor[] = [
+  { token: "{user}", example: "@Ada", group: "user", description: "User mention" },
+  { token: "{server}", example: "Acme", group: "server", description: "Server name" },
+];
+
+describe("VariableBrowser", () => {
+  it("opens, filters, and inserts a token", async () => {
+    const user = userEvent.setup();
+    const onInsert = vi.fn();
+    render(<VariableBrowser variables={vars} onInsert={onInsert} />);
+    await user.click(screen.getByRole("button"));
+    const search = screen.getByRole("searchbox");
+    await user.type(search, "serv");
+    await user.click(screen.getByText("{server}"));
+    expect(onInsert).toHaveBeenCalledWith("{server}");
+  });
+});
diff --git a/apps/dashboard/tests/client/shared/ui/variable-field/VariableEditor.test.tsx b/apps/dashboard/tests/client/shared/ui/variable-field/VariableEditor.test.tsx
new file mode 100644
index 0000000..2f5cd28
--- /dev/null
+++ b/apps/dashboard/tests/client/shared/ui/variable-field/VariableEditor.test.tsx
@@ -0,0 +1,41 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import VariableEditor from "../../../../../src/client/shared/ui/variable-field/VariableEditor";
+import type { VariableDescriptor } from "../../../../../src/client/shared/ui/variable-field/types";
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (k: string, o?: Record<string, unknown>) => (o?.suggestion ? `${k}:${o.suggestion}` : k) }),
+}));
+
+const vars: VariableDescriptor[] = [
+  { token: "{user}", example: "@Ada", group: "user", description: "User mention" },
+  { token: "{user.name}", example: "Ada", group: "user", description: "Username" },
+  { token: "{server}", example: "Acme", group: "server", description: "Server name" },
+];
+
+function Harness({ initial = "" }: { initial?: string }) {
+  const [v, setV] = useState(initial);
+  return <VariableEditor value={v} onChange={setV} variables={vars} aria-label="field" />;
+}
+
+describe("VariableEditor", () => {
+  it("opens the suggestion list when typing '{' and inserts on Enter", async () => {
+    const user = userEvent.setup();
+    render(<Harness />);
+    const input = screen.getByLabelText("field");
+    await user.click(input);
+    await user.type(input, "{{");
+    // listbox appears
+    expect(screen.getByRole("listbox")).toBeTruthy();
+    await user.keyboard("{ArrowDown}{Enter}");
+    expect((input as HTMLInputElement).value).toContain("{user}");
+  });
+
+  it("shows an unknown-variable warning with a suggestion", () => {
+    render(<VariableEditor value="hi {membercont}" onChange={() => {}} variables={[{ token: "{membercount}", example: "1,234", group: "server" }]} aria-label="field" />);
+    expect(screen.getByText(/variableField\.didYouMean/)).toBeTruthy();
+  });
+});
diff --git a/apps/dashboard/tests/client/shared/ui/variable-field/automationVariables.test.ts b/apps/dashboard/tests/client/shared/ui/variable-field/automationVariables.test.ts
new file mode 100644
index 0000000..daecfe3
--- /dev/null
+++ b/apps/dashboard/tests/client/shared/ui/variable-field/automationVariables.test.ts
@@ -0,0 +1,33 @@
+import { describe, it, expect } from "vitest";
+import { buildAutomationVariables } from "../../../../../src/client/shared/ui/variable-field/automationVariables";
+
+const constants = {
+  eventTypeVariables: {
+    memberJoin: ["{user}", "{guild}", "{guild.memberCount}"],
+    memberBanned: ["{user}", "{ban.reason}"],
+  },
+  templateVariables: {
+    "{user}": "User mention (e.g. @User)",
+    "{guild}": "Server name",
+    "{guild.memberCount}": "Server member count",
+    "{ban.reason}": "Ban reason",
+  },
+};
+
+describe("buildAutomationVariables", () => {
+  it("returns descriptors for the event's tokens with descriptions from templateVariables", () => {
+    const vars = buildAutomationVariables(constants, "memberJoin");
+    expect(vars.map((v) => v.token)).toEqual(["{user}", "{guild}", "{guild.memberCount}"]);
+    expect(vars[0].description).toBe("User mention (e.g. @User)");
+    expect(vars.find((v) => v.token === "{guild}")?.realKey).toBe("serverName");
+  });
+  it("includes event-only tokens like {ban.reason} for memberBanned", () => {
+    expect(buildAutomationVariables(constants, "memberBanned").map((v) => v.token)).toContain("{ban.reason}");
+  });
+  it("excludes {ban.reason} for memberJoin (event scoping)", () => {
+    expect(buildAutomationVariables(constants, "memberJoin").map((v) => v.token)).not.toContain("{ban.reason}");
+  });
+  it("returns [] for an unknown event type", () => {
+    expect(buildAutomationVariables(constants, "nope")).toEqual([]);
+  });
+});
diff --git a/apps/dashboard/tests/client/shared/ui/variable-field/caret.test.ts b/apps/dashboard/tests/client/shared/ui/variable-field/caret.test.ts
new file mode 100644
index 0000000..e4c028d
--- /dev/null
+++ b/apps/dashboard/tests/client/shared/ui/variable-field/caret.test.ts
@@ -0,0 +1,33 @@
+import { describe, it, expect } from "vitest";
+import { insertToken, getActiveQuery } from "../../../../../src/client/shared/ui/variable-field/caret";
+
+describe("insertToken", () => {
+  it("inserts at a collapsed caret", () => {
+    expect(insertToken("Hi ", 3, 3, "{user}")).toEqual({ value: "Hi {user}", cursor: 9 });
+  });
+  it("replaces a selection", () => {
+    expect(insertToken("Hi XXX!", 3, 6, "{user}")).toEqual({ value: "Hi {user}!", cursor: 9 });
+  });
+  it("replaces an open query when start passed as selStart", () => {
+    // caller replaces "{us" (indices 3..6) with the full token
+    expect(insertToken("Hi {us", 3, 6, "{user}")).toEqual({ value: "Hi {user}", cursor: 9 });
+  });
+});
+
+describe("getActiveQuery", () => {
+  it("detects an open query at the caret", () => {
+    expect(getActiveQuery("Hi {us", 6)).toEqual({ query: "us", start: 3 });
+  });
+  it("detects an empty query right after {", () => {
+    expect(getActiveQuery("Hi {", 4)).toEqual({ query: "", start: 3 });
+  });
+  it("returns null when the brace is already closed before the caret", () => {
+    expect(getActiveQuery("Hi {user} x", 11)).toBeNull();
+  });
+  it("returns null when there is no open brace", () => {
+    expect(getActiveQuery("plain text", 5)).toBeNull();
+  });
+  it("returns null when a space breaks the run", () => {
+    expect(getActiveQuery("{us er", 6)).toBeNull();
+  });
+});
diff --git a/apps/dashboard/tests/client/shared/ui/variable-field/filterVariables.test.ts b/apps/dashboard/tests/client/shared/ui/variable-field/filterVariables.test.ts
new file mode 100644
index 0000000..d67af8f
--- /dev/null
+++ b/apps/dashboard/tests/client/shared/ui/variable-field/filterVariables.test.ts
@@ -0,0 +1,24 @@
+import { describe, it, expect } from "vitest";
+import { filterByQuery } from "../../../../../src/client/shared/ui/variable-field/filterVariables";
+import type { VariableDescriptor } from "../../../../../src/client/shared/ui/variable-field/types";
+
+const vars: VariableDescriptor[] = [
+  { token: "{user}", example: "@Ada", group: "user" },
+  { token: "{user.name}", example: "Ada", group: "user" },
+  { token: "{server}", example: "Acme", group: "server" },
+];
+
+describe("filterByQuery", () => {
+  it("returns all descriptors for an empty query", () => {
+    expect(filterByQuery(vars, "")).toHaveLength(3);
+  });
+  it("matches by substring, case-insensitively", () => {
+    expect(filterByQuery(vars, "USER").map((v) => v.token)).toEqual(["{user}", "{user.name}"]);
+  });
+  it("ranks prefix matches before mid-string matches", () => {
+    expect(filterByQuery(vars, "ser").map((v) => v.token)).toEqual(["{server}", "{user}", "{user.name}"]);
+  });
+  it("returns [] when nothing matches", () => {
+    expect(filterByQuery(vars, "zzz")).toEqual([]);
+  });
+});
diff --git a/apps/dashboard/tests/client/shared/ui/variable-field/registry.test.ts b/apps/dashboard/tests/client/shared/ui/variable-field/registry.test.ts
new file mode 100644
index 0000000..7379076
--- /dev/null
+++ b/apps/dashboard/tests/client/shared/ui/variable-field/registry.test.ts
@@ -0,0 +1,63 @@
+import { describe, it, expect } from "vitest";
+import {
+  welcomeVariables,
+  customCommandVariables,
+  levelingVariables,
+  tempvoiceVariables,
+  knownTokenSet,
+  buildRealData,
+  buildTokenValues,
+} from "../../../../../src/client/shared/ui/variable-field/registry";
+import { WELCOME_VARIABLES } from "@fluxcore/systems/welcome/constants";
+import { TEMPLATE_VARIABLES as CUSTOM_CMD_VARS } from "@fluxcore/systems/customCommands/variables";
+
+describe("registry drift guard", () => {
+  it("welcome descriptors match the canonical WELCOME_VARIABLES tokens exactly", () => {
+    expect(new Set(welcomeVariables.map((v) => v.token))).toEqual(new Set(Object.keys(WELCOME_VARIABLES)));
+  });
+  it("custom-command descriptors match the canonical customCommands TEMPLATE_VARIABLES tokens", () => {
+    expect(new Set(customCommandVariables.map((v) => v.token))).toEqual(new Set(Object.keys(CUSTOM_CMD_VARS)));
+  });
+  it("leveling exposes {user} and {level}", () => {
+    expect(levelingVariables.map((v) => v.token).sort()).toEqual(["{level}", "{user}"]);
+  });
+  it("tempvoice exposes at least {user}", () => {
+    expect(tempvoiceVariables.map((v) => v.token)).toContain("{user}");
+  });
+});
+
+describe("knownTokenSet", () => {
+  it("collects tokens into a Set", () => {
+    expect(knownTokenSet(levelingVariables).has("{level}")).toBe(true);
+  });
+});
+
+describe("buildRealData", () => {
+  it("uses real guild/user data and builds CDN URLs", () => {
+    const real = buildRealData(
+      { id: "42", name: "Acme", icon: "abc" },
+      { userId: "7", username: "Ada", avatar: "def" },
+    );
+    expect(real.serverName).toBe("Acme");
+    expect(real.serverIcon).toBe("https://cdn.discordapp.com/icons/42/abc.png");
+    expect(real.userName).toBe("Ada");
+    expect(real.userMention).toBe("@Ada");
+    expect(real.userAvatar).toBe("https://cdn.discordapp.com/avatars/7/def.png");
+    expect(real.memberCount).toBe("1,234"); // sample: not available client-side
+  });
+  it("falls back to defaults when data is missing", () => {
+    const real = buildRealData(undefined, undefined);
+    expect(real.serverName).toBe("My Server");
+    expect(real.userName).toBe("User");
+    expect(real.userAvatar).toBe("https://cdn.discordapp.com/embed/avatars/0.png");
+  });
+});
+
+describe("buildTokenValues", () => {
+  it("maps real values where realKey is set and samples otherwise", () => {
+    const real = buildRealData({ id: "42", name: "Acme", icon: null }, undefined);
+    const map = buildTokenValues(welcomeVariables, real);
+    expect(map.get("{server}")).toBe("Acme");
+    expect(map.get("{membercount}")).toBe("1,234");
+  });
+});
diff --git a/apps/dashboard/tests/client/shared/ui/variable-field/resolvePreview.test.ts b/apps/dashboard/tests/client/shared/ui/variable-field/resolvePreview.test.ts
new file mode 100644
index 0000000..e95d426
--- /dev/null
+++ b/apps/dashboard/tests/client/shared/ui/variable-field/resolvePreview.test.ts
@@ -0,0 +1,24 @@
+import { describe, it, expect } from "vitest";
+import { resolveTemplatePreview } from "../../../../../src/client/shared/ui/variable-field/resolvePreview";
+
+const values = new Map<string, string>([
+  ["{user}", "@Ada"],
+  ["{user.name}", "Ada"],
+  ["{server}", "Acme"],
+  ["{membercount}", "1,234"],
+]);
+
+describe("resolveTemplatePreview", () => {
+  it("replaces known tokens with their values", () => {
+    expect(resolveTemplatePreview("Hey {user}, welcome to {server}!", values)).toBe("Hey @Ada, welcome to Acme!");
+  });
+  it("does not let {user} clobber {user.name}", () => {
+    expect(resolveTemplatePreview("{user} / {user.name}", values)).toBe("@Ada / Ada");
+  });
+  it("leaves unknown tokens visible", () => {
+    expect(resolveTemplatePreview("member #{membercont}", values)).toBe("member #{membercont}");
+  });
+  it("replaces every occurrence", () => {
+    expect(resolveTemplatePreview("{server} {server}", values)).toBe("Acme Acme");
+  });
+});
diff --git a/apps/dashboard/tests/client/shared/ui/variable-field/tokens.test.ts b/apps/dashboard/tests/client/shared/ui/variable-field/tokens.test.ts
new file mode 100644
index 0000000..82946cd
--- /dev/null
+++ b/apps/dashboard/tests/client/shared/ui/variable-field/tokens.test.ts
@@ -0,0 +1,33 @@
+import { describe, it, expect } from "vitest";
+import { tokenize, extractTokens } from "../../../../../src/client/shared/ui/variable-field/tokens";
+
+const known = new Set(["{user}", "{server}"]);
+
+describe("tokenize", () => {
+  it("splits text and variable segments", () => {
+    const segs = tokenize("Hi {user}!", known);
+    expect(segs).toEqual([
+      { type: "text", value: "Hi ", known: false },
+      { type: "var", value: "{user}", known: true },
+      { type: "text", value: "!", known: false },
+    ]);
+  });
+
+  it("marks unknown variables as not known", () => {
+    const segs = tokenize("{nope}", known);
+    expect(segs).toEqual([{ type: "var", value: "{nope}", known: false }]);
+  });
+
+  it("returns a single text segment when there are no tokens", () => {
+    expect(tokenize("plain", known)).toEqual([{ type: "text", value: "plain", known: false }]);
+  });
+});
+
+describe("extractTokens", () => {
+  it("returns every token occurrence", () => {
+    expect(extractTokens("{user} and {user} and {server}")).toEqual(["{user}", "{user}", "{server}"]);
+  });
+  it("returns [] when none", () => {
+    expect(extractTokens("none here")).toEqual([]);
+  });
+});
diff --git a/apps/dashboard/tests/client/shared/ui/variable-field/usePreviewContext.test.tsx b/apps/dashboard/tests/client/shared/ui/variable-field/usePreviewContext.test.tsx
new file mode 100644
index 0000000..ed7f1f0
--- /dev/null
+++ b/apps/dashboard/tests/client/shared/ui/variable-field/usePreviewContext.test.tsx
@@ -0,0 +1,24 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from "vitest";
+import { renderHook } from "@testing-library/react";
+
+vi.mock("../../../../../src/client/shared/hooks/useAuth", () => ({
+  useAuth: () => ({ data: { userId: "7", username: "Ada", avatar: "def" } }),
+}));
+vi.mock("../../../../../src/client/shared/hooks/useGuilds", () => ({
+  useGuilds: () => ({ data: [{ id: "42", name: "Acme", icon: "abc" }] }),
+}));
+
+import { usePreviewContext } from "../../../../../src/client/shared/ui/variable-field/usePreviewContext";
+
+describe("usePreviewContext", () => {
+  it("assembles real data from the matching guild and current user", () => {
+    const { result } = renderHook(() => usePreviewContext("42"));
+    expect(result.current.serverName).toBe("Acme");
+    expect(result.current.userName).toBe("Ada");
+  });
+  it("falls back to defaults when the guild is not found", () => {
+    const { result } = renderHook(() => usePreviewContext("999"));
+    expect(result.current.serverName).toBe("My Server");
+  });
+});
diff --git a/apps/dashboard/tests/client/shared/ui/variable-field/validation.test.ts b/apps/dashboard/tests/client/shared/ui/variable-field/validation.test.ts
new file mode 100644
index 0000000..67824bb
--- /dev/null
+++ b/apps/dashboard/tests/client/shared/ui/variable-field/validation.test.ts
@@ -0,0 +1,35 @@
+import { describe, it, expect } from "vitest";
+import { levenshtein, detectUnknownTokens } from "../../../../../src/client/shared/ui/variable-field/validation";
+
+const known = new Set(["{user}", "{server}", "{membercount}"]);
+
+describe("levenshtein", () => {
+  it("computes edit distance", () => {
+    expect(levenshtein("kitten", "sitting")).toBe(3);
+    expect(levenshtein("same", "same")).toBe(0);
+  });
+});
+
+describe("detectUnknownTokens", () => {
+  it("returns nothing when all tokens are known", () => {
+    expect(detectUnknownTokens("Hi {user} on {server}", known)).toEqual([]);
+  });
+
+  it("flags an unknown token and suggests the closest known one", () => {
+    expect(detectUnknownTokens("member #{membercont}", known)).toEqual([
+      { token: "{membercont}", suggestion: "{membercount}" },
+    ]);
+  });
+
+  it("gives null suggestion when nothing is close", () => {
+    expect(detectUnknownTokens("{zzzzzzzz}", known)).toEqual([
+      { token: "{zzzzzzzz}", suggestion: null },
+    ]);
+  });
+
+  it("de-duplicates repeated unknown tokens", () => {
+    expect(detectUnknownTokens("{foo} {foo}", known)).toEqual([
+      { token: "{foo}", suggestion: null },
+    ]);
+  });
+});
diff --git a/apps/dashboard/tests/client/smoke.test.tsx b/apps/dashboard/tests/client/smoke.test.tsx
new file mode 100644
index 0000000..e9d4557
--- /dev/null
+++ b/apps/dashboard/tests/client/smoke.test.tsx
@@ -0,0 +1,14 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+function Hello() {
+  return <button type="button">click me</button>;
+}
+
+describe("jsdom toolchain", () => {
+  it("renders a component into the DOM", () => {
+    render(<Hello />);
+    expect(screen.getByRole("button", { name: "click me" })).toBeTruthy();
+  });
+});
diff --git a/apps/dashboard/vitest.config.ts b/apps/dashboard/vitest.config.ts
index 2fb95b3..64499c0 100644
--- a/apps/dashboard/vitest.config.ts
+++ b/apps/dashboard/vitest.config.ts
@@ -1,7 +1,9 @@
 import { defineConfig } from "vitest/config";
 import { resolve } from "node:path";
+import react from "@vitejs/plugin-react";
 
 export default defineConfig({
+  plugins: [react()],
   resolve: {
     extensions: [".ts", ".js", ".tsx", ".jsx", ".json"],
     alias: {
@@ -11,14 +13,13 @@ export default defineConfig({
   },
   test: {
     globals: true,
-    include: ["tests/**/*.test.ts"],
+    include: ["tests/**/*.test.ts", "tests/**/*.test.tsx"],
     alias: {
-      // Map .js extensions to .ts for ESM compat
       "../../src/server/": resolve(__dirname, "src/server") + "/",
     },
     coverage: {
       provider: "v8",
-      include: ["src/server/**/*.ts"],
+      include: ["src/server/**/*.ts", "src/client/shared/ui/variable-field/**/*.{ts,tsx}"],
       exclude: ["src/server/index.ts"],
     },
   },
diff --git a/docs/superpowers/plans/2026-07-08-variable-text-fields.md b/docs/superpowers/plans/2026-07-08-variable-text-fields.md
new file mode 100644
index 0000000..5a506b4
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-08-variable-text-fields.md
@@ -0,0 +1,2063 @@
+# Variable Text Fields Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Give every `{variable}` template text field in the dashboard `{`-triggered autocomplete, a searchable variable browser, inline highlighting, unknown-variable validation, and a live Discord-style preview — via one reusable component set.
+
+**Architecture:** A new module `apps/dashboard/src/client/shared/ui/variable-field/` holds three React components (`VariableEditor`, `VariableBrowser`, `DiscordMessagePreview`) plus pure, DOM-free helper modules (tokenizing, caret math, filtering, validation, preview resolution) and a per-scope variable registry. All logic lives in the pure helpers (unit-tested under the existing node vitest env); the components are thin wrappers (tested under a newly-added jsdom env). Rollout swaps the plain `Input`/`Textarea` in six feature areas for `VariableEditor` and adds a preview.
+
+**Tech Stack:** React 19, TypeScript (strict), Tailwind CSS 4 (Obsidian Engine tokens), Radix (`popover`, `scroll-area`), TanStack Query hooks (`useAuth`, `useGuilds`, `useConstants`), Vitest, `@testing-library/react` + `user-event` + `jsdom` (added in Task 1), react-i18next.
+
+## Global Constraints
+
+- **All `pnpm add`/`install` and all test runs execute inside Docker.** Canonical test command (abbreviated `<DTEST>` below):
+  `docker compose --profile bot run --rm bot pnpm --filter @fluxcore/dashboard test -- <files>`
+  Typecheck: `docker compose --profile bot run --rm --no-deps bot pnpm --filter @fluxcore/dashboard exec tsc -p tsconfig.client.json --noEmit`.
+- **Strict TypeScript — no `any`.** Prefer `unknown` + narrowing.
+- **UI components live at** `apps/dashboard/src/client/shared/ui/` (NOT `components/ui`). Import `cn` from `../lib/utils`. Client imports use **relative paths** (no `@/` alias).
+- **Placeholder syntax is `{token}` (curly braces).** A token matches `/\{[\w.]+\}/`.
+- **Do NOT rename/unify existing runtime tokens** across features (welcome `{user.name}`/`{membercount}` vs custom-commands `{username}`/`{memberCount}`). Each field surfaces its own set.
+- **No new backend endpoints.** Preview uses already-loaded `useGuilds()` (id/name/icon) + `useAuth()` (userId/username/avatar); `memberCount` is not client-available and uses a sample value.
+- **Design tokens:** accent = `text-accent`; destructive = `text-danger`; surfaces `bg-surface-lowest`/`bg-surface-container`; muted `text-text-muted`. Match existing `Input`/`Textarea` metrics: `text-sm`, `px-3`, input `py-1 h-9`, textarea `py-2 min-h-[60px]`.
+- **Every task ends green** (its tests pass) and is committed. Commit messages: `feat(dashboard): …` or `test(dashboard): …`.
+- **Locale source of truth:** `packages/i18n/src/locales/en/*.json` (never `dist`); other 47 langs fall back to `en`.
+
+---
+
+## File Structure
+
+```
+apps/dashboard/src/client/shared/ui/variable-field/
+  types.ts                 VariableDescriptor, Segment, UnknownToken, PreviewRealData, RealDataKey
+  tokens.ts                TOKEN_REGEX, tokenize(), extractTokens()
+  validation.ts            levenshtein(), detectUnknownTokens()
+  caret.ts                 insertToken(), getActiveQuery()
+  filterVariables.ts       filterByQuery()
+  registry.ts              descriptor arrays (welcome/customCommand/leveling/tempvoice),
+                           SAMPLE/GROUP/REAL maps, knownTokenSet(), buildRealData(), buildTokenValues()
+  automationVariables.ts   buildAutomationVariables()
+  resolvePreview.ts        resolveTemplatePreview()
+  usePreviewContext.ts     usePreviewContext(guildId) hook
+  VariableEditor.tsx       the field (input/textarea + overlay + autocomplete + validation)
+  VariableBrowser.tsx      "Insert variable" popover
+  DiscordMessagePreview.tsx Discord-style message/embed bubble
+  index.ts                 barrel
+
+apps/dashboard/tests/client/shared/ui/variable-field/
+  tokens.test.ts  validation.test.ts  caret.test.ts  filterVariables.test.ts
+  registry.test.ts  automationVariables.test.ts  resolvePreview.test.ts
+  VariableEditor.test.tsx  VariableBrowser.test.tsx  DiscordMessagePreview.test.tsx
+```
+
+---
+
+## Phase 0 — Test toolchain
+
+### Task 1: Add client (jsdom) test toolchain
+
+**Files:**
+- Modify: `apps/dashboard/package.json` (devDependencies)
+- Modify: `apps/dashboard/vitest.config.ts`
+- Test: `apps/dashboard/tests/client/smoke.test.tsx`
+
+**Interfaces:**
+- Produces: a working jsdom test environment so `*.test.tsx` under `tests/client/**` render React components.
+
+- [ ] **Step 1: Install devDependencies (in Docker)**
+
+Run:
+```bash
+docker compose --profile bot run --rm --no-deps bot \
+  pnpm --filter @fluxcore/dashboard add -D @testing-library/react @testing-library/user-event jsdom
+```
+Expected: pnpm reports the three packages added to `apps/dashboard/package.json` devDependencies.
+
+- [ ] **Step 2: Update `vitest.config.ts` to include `.test.tsx`**
+
+Replace the `include` line so both server `.ts` and client `.tsx` tests are collected. New `test` block:
+
+```ts
+  test: {
+    globals: true,
+    include: ["tests/**/*.test.ts", "tests/**/*.test.tsx"],
+    alias: {
+      "../../src/server/": resolve(__dirname, "src/server") + "/",
+    },
+    coverage: {
+      provider: "v8",
+      include: ["src/server/**/*.ts", "src/client/shared/ui/variable-field/**/*.ts"],
+      exclude: ["src/server/index.ts"],
+    },
+  },
+```
+
+(Global environment stays `node`; component test files opt into jsdom via a docblock in Step 3.)
+
+- [ ] **Step 3: Write the smoke component test**
+
+Create `apps/dashboard/tests/client/smoke.test.tsx`:
+
+```tsx
+// @vitest-environment jsdom
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+function Hello() {
+  return <button type="button">click me</button>;
+}
+
+describe("jsdom toolchain", () => {
+  it("renders a component into the DOM", () => {
+    render(<Hello />);
+    expect(screen.getByRole("button", { name: "click me" })).toBeTruthy();
+  });
+});
+```
+
+- [ ] **Step 4: Run it and confirm it passes**
+
+Run: `<DTEST> tests/client/smoke.test.tsx`
+Expected: PASS (1 test).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add apps/dashboard/package.json apps/dashboard/pnpm-lock.yaml ../../pnpm-lock.yaml apps/dashboard/vitest.config.ts apps/dashboard/tests/client/smoke.test.tsx
+git commit -m "test(dashboard): add jsdom + testing-library client test toolchain"
+```
+(If the lockfile lives only at repo root, adjust the `git add` to the actual changed lockfile path shown by `git status`.)
+
+---
+
+## Phase 1 — Pure logic foundations (node env)
+
+### Task 2: Token types + tokenizer
+
+**Files:**
+- Create: `apps/dashboard/src/client/shared/ui/variable-field/types.ts`
+- Create: `apps/dashboard/src/client/shared/ui/variable-field/tokens.ts`
+- Test: `apps/dashboard/tests/client/shared/ui/variable-field/tokens.test.ts`
+
+**Interfaces:**
+- Produces:
+  - `type RealDataKey = "userMention"|"userName"|"userTag"|"userId"|"userAvatar"|"serverName"|"serverId"|"serverIcon"|"memberCount"`
+  - `type VariableGroup = "user"|"server"|"channel"|"role"|"message"|"event"|"misc"`
+  - `interface VariableDescriptor { token: string; labelKey?: string; description?: string; example: string; group: VariableGroup; realKey?: RealDataKey }`
+  - `interface Segment { type: "text"|"var"; value: string; known: boolean }`
+  - `interface UnknownToken { token: string; suggestion: string | null }`
+  - `interface PreviewRealData { userMention: string; userName: string; userTag: string; userId: string; userAvatar: string; serverName: string; serverId: string; serverIcon: string; memberCount: string }`
+  - `const TOKEN_REGEX: RegExp` (global, matches `\{[\w.]+\}`)
+  - `function tokenize(value: string, known: Set<string>): Segment[]`
+  - `function extractTokens(value: string): string[]`
+
+- [ ] **Step 1: Write `types.ts`**
+
+```ts
+export type RealDataKey =
+  | "userMention" | "userName" | "userTag" | "userId" | "userAvatar"
+  | "serverName" | "serverId" | "serverIcon" | "memberCount";
+
+export type VariableGroup =
+  | "user" | "server" | "channel" | "role" | "message" | "event" | "misc";
+
+export interface VariableDescriptor {
+  token: string;
+  labelKey?: string;
+  description?: string;
+  example: string;
+  group: VariableGroup;
+  realKey?: RealDataKey;
+}
+
+export interface Segment {
+  type: "text" | "var";
+  value: string;
+  known: boolean;
+}
+
+export interface UnknownToken {
+  token: string;
+  suggestion: string | null;
+}
+
+export interface PreviewRealData {
+  userMention: string;
+  userName: string;
+  userTag: string;
+  userId: string;
+  userAvatar: string;
+  serverName: string;
+  serverId: string;
+  serverIcon: string;
+  memberCount: string;
+}
+```
+
+- [ ] **Step 2: Write the failing test**
+
+Create `tokens.test.ts`:
+
+```ts
+import { describe, it, expect } from "vitest";
+import { tokenize, extractTokens } from "../../../../../src/client/shared/ui/variable-field/tokens";
+
+const known = new Set(["{user}", "{server}"]);
+
+describe("tokenize", () => {
+  it("splits text and variable segments", () => {
+    const segs = tokenize("Hi {user}!", known);
+    expect(segs).toEqual([
+      { type: "text", value: "Hi ", known: false },
+      { type: "var", value: "{user}", known: true },
+      { type: "text", value: "!", known: false },
+    ]);
+  });
+
+  it("marks unknown variables as not known", () => {
+    const segs = tokenize("{nope}", known);
+    expect(segs).toEqual([{ type: "var", value: "{nope}", known: false }]);
+  });
+
+  it("returns a single text segment when there are no tokens", () => {
+    expect(tokenize("plain", known)).toEqual([{ type: "text", value: "plain", known: false }]);
+  });
+});
+
+describe("extractTokens", () => {
+  it("returns every token occurrence", () => {
+    expect(extractTokens("{user} and {user} and {server}")).toEqual(["{user}", "{user}", "{server}"]);
+  });
+  it("returns [] when none", () => {
+    expect(extractTokens("none here")).toEqual([]);
+  });
+});
+```
+
+- [ ] **Step 3: Run it to confirm it fails**
+
+Run: `<DTEST> tests/client/shared/ui/variable-field/tokens.test.ts`
+Expected: FAIL (cannot find module `tokens`).
+
+- [ ] **Step 4: Write `tokens.ts`**
+
+```ts
+import type { Segment } from "./types";
+
+export const TOKEN_REGEX = /\{[\w.]+\}/g;
+
+export function tokenize(value: string, known: Set<string>): Segment[] {
+  const segments: Segment[] = [];
+  let lastIndex = 0;
+  const re = new RegExp(TOKEN_REGEX.source, "g");
+  let match: RegExpExecArray | null;
+  while ((match = re.exec(value)) !== null) {
+    if (match.index > lastIndex) {
+      segments.push({ type: "text", value: value.slice(lastIndex, match.index), known: false });
+    }
+    segments.push({ type: "var", value: match[0], known: known.has(match[0]) });
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < value.length) {
+    segments.push({ type: "text", value: value.slice(lastIndex), known: false });
+  }
+  return segments;
+}
+
+export function extractTokens(value: string): string[] {
+  const re = new RegExp(TOKEN_REGEX.source, "g");
+  const out: string[] = [];
+  let match: RegExpExecArray | null;
+  while ((match = re.exec(value)) !== null) out.push(match[0]);
+  return out;
+}
+```
+
+- [ ] **Step 5: Run tests to confirm they pass**
+
+Run: `<DTEST> tests/client/shared/ui/variable-field/tokens.test.ts`
+Expected: PASS (5 tests).
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add apps/dashboard/src/client/shared/ui/variable-field/types.ts apps/dashboard/src/client/shared/ui/variable-field/tokens.ts apps/dashboard/tests/client/shared/ui/variable-field/tokens.test.ts
+git commit -m "feat(dashboard): add variable-field token types and tokenizer"
+```
+
+---
+
+### Task 3: Unknown-token validation with suggestions
+
+**Files:**
+- Create: `apps/dashboard/src/client/shared/ui/variable-field/validation.ts`
+- Test: `apps/dashboard/tests/client/shared/ui/variable-field/validation.test.ts`
+
+**Interfaces:**
+- Consumes: `extractTokens` (Task 2), `UnknownToken` type.
+- Produces:
+  - `function levenshtein(a: string, b: string): number`
+  - `function detectUnknownTokens(value: string, known: Set<string>): UnknownToken[]` — each unknown token gets the closest known token as `suggestion` when edit distance ≤ 3, else `null`. De-duplicated by token string, in first-seen order.
+
+- [ ] **Step 1: Write the failing test**
+
+```ts
+import { describe, it, expect } from "vitest";
+import { levenshtein, detectUnknownTokens } from "../../../../../src/client/shared/ui/variable-field/validation";
+
+const known = new Set(["{user}", "{server}", "{membercount}"]);
+
+describe("levenshtein", () => {
+  it("computes edit distance", () => {
+    expect(levenshtein("kitten", "sitting")).toBe(3);
+    expect(levenshtein("same", "same")).toBe(0);
+  });
+});
+
+describe("detectUnknownTokens", () => {
+  it("returns nothing when all tokens are known", () => {
+    expect(detectUnknownTokens("Hi {user} on {server}", known)).toEqual([]);
+  });
+
+  it("flags an unknown token and suggests the closest known one", () => {
+    expect(detectUnknownTokens("member #{membercont}", known)).toEqual([
+      { token: "{membercont}", suggestion: "{membercount}" },
+    ]);
+  });
+
+  it("gives null suggestion when nothing is close", () => {
+    expect(detectUnknownTokens("{zzzzzzzz}", known)).toEqual([
+      { token: "{zzzzzzzz}", suggestion: null },
+    ]);
+  });
+
+  it("de-duplicates repeated unknown tokens", () => {
+    expect(detectUnknownTokens("{foo} {foo}", known)).toEqual([
+      { token: "{foo}", suggestion: null },
+    ]);
+  });
+});
+```
+
+- [ ] **Step 2: Run to confirm it fails**
+
+Run: `<DTEST> tests/client/shared/ui/variable-field/validation.test.ts`
+Expected: FAIL (module not found).
+
+- [ ] **Step 3: Write `validation.ts`**
+
+```ts
+import type { UnknownToken } from "./types";
+import { extractTokens } from "./tokens";
+
+export function levenshtein(a: string, b: string): number {
+  const m = a.length;
+  const n = b.length;
+  const dp: number[] = Array.from({ length: n + 1 }, (_, i) => i);
+  for (let i = 1; i <= m; i++) {
+    let prev = dp[0];
+    dp[0] = i;
+    for (let j = 1; j <= n; j++) {
+      const tmp = dp[j];
+      dp[j] = a[i - 1] === b[j - 1] ? prev : 1 + Math.min(prev, dp[j], dp[j - 1]);
+      prev = tmp;
+    }
+  }
+  return dp[n];
+}
+
+export function detectUnknownTokens(value: string, known: Set<string>): UnknownToken[] {
+  const knownList = [...known];
+  const seen = new Set<string>();
+  const result: UnknownToken[] = [];
+  for (const token of extractTokens(value)) {
+    if (known.has(token) || seen.has(token)) continue;
+    seen.add(token);
+    let best: string | null = null;
+    let bestDist = Infinity;
+    for (const candidate of knownList) {
+      const dist = levenshtein(token, candidate);
+      if (dist < bestDist) {
+        bestDist = dist;
+        best = candidate;
+      }
+    }
+    result.push({ token, suggestion: bestDist <= 3 ? best : null });
+  }
+  return result;
+}
+```
+
+- [ ] **Step 4: Run to confirm pass**
+
+Run: `<DTEST> tests/client/shared/ui/variable-field/validation.test.ts`
+Expected: PASS (5 tests).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add apps/dashboard/src/client/shared/ui/variable-field/validation.ts apps/dashboard/tests/client/shared/ui/variable-field/validation.test.ts
+git commit -m "feat(dashboard): add unknown-variable detection with suggestions"
+```
+
+---
+
+### Task 4: Caret helpers (insert + active query)
+
+**Files:**
+- Create: `apps/dashboard/src/client/shared/ui/variable-field/caret.ts`
+- Test: `apps/dashboard/tests/client/shared/ui/variable-field/caret.test.ts`
+
+**Interfaces:**
+- Produces:
+  - `function insertToken(value: string, selStart: number, selEnd: number, token: string): { value: string; cursor: number }` — replaces `[selStart,selEnd)` with `token`, returns new value + caret positioned after the inserted token.
+  - `function getActiveQuery(value: string, caret: number): { query: string; start: number } | null` — if the caret sits inside an open, unclosed `{…` run of `[\w.]*`, returns the partial text after `{` and the index of the `{`. Otherwise `null`.
+
+- [ ] **Step 1: Write the failing test**
+
+```ts
+import { describe, it, expect } from "vitest";
+import { insertToken, getActiveQuery } from "../../../../../src/client/shared/ui/variable-field/caret";
+
+describe("insertToken", () => {
+  it("inserts at a collapsed caret", () => {
+    expect(insertToken("Hi ", 3, 3, "{user}")).toEqual({ value: "Hi {user}", cursor: 9 });
+  });
+  it("replaces a selection", () => {
+    expect(insertToken("Hi XXX!", 3, 6, "{user}")).toEqual({ value: "Hi {user}!", cursor: 9 });
+  });
+  it("replaces an open query when start passed as selStart", () => {
+    // caller replaces "{us" (indices 3..6) with the full token
+    expect(insertToken("Hi {us", 3, 6, "{user}")).toEqual({ value: "Hi {user}", cursor: 9 });
+  });
+});
+
+describe("getActiveQuery", () => {
+  it("detects an open query at the caret", () => {
+    expect(getActiveQuery("Hi {us", 6)).toEqual({ query: "us", start: 3 });
+  });
+  it("detects an empty query right after {", () => {
+    expect(getActiveQuery("Hi {", 4)).toEqual({ query: "", start: 3 });
+  });
+  it("returns null when the brace is already closed before the caret", () => {
+    expect(getActiveQuery("Hi {user} x", 11)).toBeNull();
+  });
+  it("returns null when there is no open brace", () => {
+    expect(getActiveQuery("plain text", 5)).toBeNull();
+  });
+  it("returns null when a space breaks the run", () => {
+    expect(getActiveQuery("{us er", 6)).toBeNull();
+  });
+});
+```
+
+- [ ] **Step 2: Run to confirm it fails**
+
+Run: `<DTEST> tests/client/shared/ui/variable-field/caret.test.ts`
+Expected: FAIL (module not found).
+
+- [ ] **Step 3: Write `caret.ts`**
+
+```ts
+export function insertToken(
+  value: string,
+  selStart: number,
+  selEnd: number,
+  token: string,
+): { value: string; cursor: number } {
+  const next = value.slice(0, selStart) + token + value.slice(selEnd);
+  return { value: next, cursor: selStart + token.length };
+}
+
+export function getActiveQuery(
+  value: string,
+  caret: number,
+): { query: string; start: number } | null {
+  const before = value.slice(0, caret);
+  const open = before.lastIndexOf("{");
+  if (open === -1) return null;
+  const run = before.slice(open + 1);
+  // Valid partial token chars only; a closing brace or any other char breaks it.
+  if (!/^[\w.]*$/.test(run)) return null;
+  if (run.includes("}")) return null;
+  return { query: run, start: open };
+}
+```
+
+- [ ] **Step 4: Run to confirm pass**
+
+Run: `<DTEST> tests/client/shared/ui/variable-field/caret.test.ts`
+Expected: PASS (8 tests).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add apps/dashboard/src/client/shared/ui/variable-field/caret.ts apps/dashboard/tests/client/shared/ui/variable-field/caret.test.ts
+git commit -m "feat(dashboard): add caret insert + active-query helpers"
+```
+
+---
+
+### Task 5: Autocomplete filtering
+
+**Files:**
+- Create: `apps/dashboard/src/client/shared/ui/variable-field/filterVariables.ts`
+- Test: `apps/dashboard/tests/client/shared/ui/variable-field/filterVariables.test.ts`
+
+**Interfaces:**
+- Consumes: `VariableDescriptor` (Task 2).
+- Produces: `function filterByQuery(descriptors: VariableDescriptor[], query: string): VariableDescriptor[]` — case-insensitive substring match against the token with `{`/`}` stripped; empty query returns all; exact prefix matches sort before mid-string matches; stable otherwise.
+
+- [ ] **Step 1: Write the failing test**
+
+```ts
+import { describe, it, expect } from "vitest";
+import { filterByQuery } from "../../../../../src/client/shared/ui/variable-field/filterVariables";
+import type { VariableDescriptor } from "../../../../../src/client/shared/ui/variable-field/types";
+
+const vars: VariableDescriptor[] = [
+  { token: "{user}", example: "@Ada", group: "user" },
+  { token: "{user.name}", example: "Ada", group: "user" },
+  { token: "{server}", example: "Acme", group: "server" },
+];
+
+describe("filterByQuery", () => {
+  it("returns all descriptors for an empty query", () => {
+    expect(filterByQuery(vars, "")).toHaveLength(3);
+  });
+  it("matches by substring, case-insensitively", () => {
+    expect(filterByQuery(vars, "USER").map((v) => v.token)).toEqual(["{user}", "{user.name}"]);
+  });
+  it("ranks prefix matches before mid-string matches", () => {
+    expect(filterByQuery(vars, "ser").map((v) => v.token)).toEqual(["{server}", "{user}", "{user.name}"]);
+  });
+  it("returns [] when nothing matches", () => {
+    expect(filterByQuery(vars, "zzz")).toEqual([]);
+  });
+});
+```
+
+- [ ] **Step 2: Run to confirm it fails**
+
+Run: `<DTEST> tests/client/shared/ui/variable-field/filterVariables.test.ts`
+Expected: FAIL (module not found).
+
+- [ ] **Step 3: Write `filterVariables.ts`**
+
+```ts
+import type { VariableDescriptor } from "./types";
+
+function bareToken(token: string): string {
+  return token.replace(/[{}]/g, "").toLowerCase();
+}
+
+export function filterByQuery(
+  descriptors: VariableDescriptor[],
+  query: string,
+): VariableDescriptor[] {
+  const q = query.toLowerCase();
+  if (q === "") return [...descriptors];
+  const matches = descriptors
+    .map((d, index) => ({ d, index, pos: bareToken(d.token).indexOf(q) }))
+    .filter((m) => m.pos !== -1);
+  matches.sort((a, b) => (a.pos !== b.pos ? a.pos - b.pos : a.index - b.index));
+  return matches.map((m) => m.d);
+}
+```
+
+- [ ] **Step 4: Run to confirm pass**
+
+Run: `<DTEST> tests/client/shared/ui/variable-field/filterVariables.test.ts`
+Expected: PASS (4 tests).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add apps/dashboard/src/client/shared/ui/variable-field/filterVariables.ts apps/dashboard/tests/client/shared/ui/variable-field/filterVariables.test.ts
+git commit -m "feat(dashboard): add variable autocomplete filtering"
+```
+
+---
+
+### Task 6: Registry (per-scope descriptors + real/sample maps + drift guard)
+
+**Files:**
+- Create: `apps/dashboard/src/client/shared/ui/variable-field/registry.ts`
+- Test: `apps/dashboard/tests/client/shared/ui/variable-field/registry.test.ts`
+
+**Interfaces:**
+- Consumes: `VariableDescriptor`, `PreviewRealData`, `RealDataKey`.
+- Produces:
+  - `const welcomeVariables: VariableDescriptor[]`
+  - `const customCommandVariables: VariableDescriptor[]`
+  - `const levelingVariables: VariableDescriptor[]`
+  - `const tempvoiceVariables: VariableDescriptor[]`
+  - `function knownTokenSet(descriptors: VariableDescriptor[]): Set<string>`
+  - `function buildRealData(guild: { id: string; name: string; icon: string | null } | undefined, user: { userId: string; username: string; avatar: string | null } | undefined): PreviewRealData`
+  - `function buildTokenValues(descriptors: VariableDescriptor[], real: PreviewRealData): Map<string, string>`
+
+**Notes:** `labelKey` values point at existing/added i18n keys (Task 20). Token **names** are asserted against the canonical `@fluxcore/systems` sources by the drift test; if that import fails to resolve, build the systems package first: `docker compose --profile bot run --rm --no-deps bot pnpm --filter @fluxcore/systems build`.
+
+- [ ] **Step 1: Write the failing test**
+
+```ts
+import { describe, it, expect } from "vitest";
+import {
+  welcomeVariables,
+  customCommandVariables,
+  levelingVariables,
+  tempvoiceVariables,
+  knownTokenSet,
+  buildRealData,
+  buildTokenValues,
+} from "../../../../../src/client/shared/ui/variable-field/registry";
+import { WELCOME_VARIABLES } from "@fluxcore/systems/welcome/constants";
+import { TEMPLATE_VARIABLES as CUSTOM_CMD_VARS } from "@fluxcore/systems/customCommands/variables";
+
+describe("registry drift guard", () => {
+  it("welcome descriptors match the canonical WELCOME_VARIABLES tokens exactly", () => {
+    expect(new Set(welcomeVariables.map((v) => v.token))).toEqual(new Set(Object.keys(WELCOME_VARIABLES)));
+  });
+  it("custom-command descriptors match the canonical customCommands TEMPLATE_VARIABLES tokens", () => {
+    expect(new Set(customCommandVariables.map((v) => v.token))).toEqual(new Set(Object.keys(CUSTOM_CMD_VARS)));
+  });
+  it("leveling exposes {user} and {level}", () => {
+    expect(levelingVariables.map((v) => v.token).sort()).toEqual(["{level}", "{user}"]);
+  });
+  it("tempvoice exposes at least {user}", () => {
+    expect(tempvoiceVariables.map((v) => v.token)).toContain("{user}");
+  });
+});
+
+describe("knownTokenSet", () => {
+  it("collects tokens into a Set", () => {
+    expect(knownTokenSet(levelingVariables).has("{level}")).toBe(true);
+  });
+});
+
+describe("buildRealData", () => {
+  it("uses real guild/user data and builds CDN URLs", () => {
+    const real = buildRealData(
+      { id: "42", name: "Acme", icon: "abc" },
+      { userId: "7", username: "Ada", avatar: "def" },
+    );
+    expect(real.serverName).toBe("Acme");
+    expect(real.serverIcon).toBe("https://cdn.discordapp.com/icons/42/abc.png");
+    expect(real.userName).toBe("Ada");
+    expect(real.userMention).toBe("@Ada");
+    expect(real.userAvatar).toBe("https://cdn.discordapp.com/avatars/7/def.png");
+    expect(real.memberCount).toBe("1,234"); // sample: not available client-side
+  });
+  it("falls back to defaults when data is missing", () => {
+    const real = buildRealData(undefined, undefined);
+    expect(real.serverName).toBe("My Server");
+    expect(real.userName).toBe("User");
+    expect(real.userAvatar).toBe("https://cdn.discordapp.com/embed/avatars/0.png");
+  });
+});
+
+describe("buildTokenValues", () => {
+  it("maps real values where realKey is set and samples otherwise", () => {
+    const real = buildRealData({ id: "42", name: "Acme", icon: null }, undefined);
+    const map = buildTokenValues(welcomeVariables, real);
+    expect(map.get("{server}")).toBe("Acme");
+    expect(map.get("{membercount}")).toBe("1,234");
+  });
+});
+```
+
+- [ ] **Step 2: Run to confirm it fails**
+
+Run: `<DTEST> tests/client/shared/ui/variable-field/registry.test.ts`
+Expected: FAIL (module not found).
+
+- [ ] **Step 3: Write `registry.ts`**
+
+```ts
+import type { PreviewRealData, RealDataKey, VariableDescriptor } from "./types";
+
+export const welcomeVariables: VariableDescriptor[] = [
+  { token: "{user}", labelKey: "variables.user", example: "@Ada", group: "user", realKey: "userMention" },
+  { token: "{user.tag}", labelKey: "variables.userTag", example: "Ada#0001", group: "user", realKey: "userTag" },
+  { token: "{user.name}", labelKey: "variables.userName", example: "Ada", group: "user", realKey: "userName" },
+  { token: "{user.id}", labelKey: "variables.userId", example: "123456789012345678", group: "user", realKey: "userId" },
+  { token: "{user.avatar}", labelKey: "variables.userAvatar", example: "https://cdn.discordapp.com/embed/avatars/0.png", group: "user", realKey: "userAvatar" },
+  { token: "{server}", labelKey: "variables.server", example: "Acme", group: "server", realKey: "serverName" },
+  { token: "{server.id}", labelKey: "variables.serverId", example: "987654321098765432", group: "server", realKey: "serverId" },
+  { token: "{membercount}", labelKey: "variables.memberCount", example: "1,234", group: "server", realKey: "memberCount" },
+  { token: "{server.icon}", labelKey: "variables.serverIcon", example: "https://cdn.discordapp.com/embed/avatars/0.png", group: "server", realKey: "serverIcon" },
+];
+
+export const customCommandVariables: VariableDescriptor[] = [
+  { token: "{user}", labelKey: "variables.entries.user", example: "@Ada", group: "user", realKey: "userMention" },
+  { token: "{username}", labelKey: "variables.entries.username", example: "Ada", group: "user", realKey: "userName" },
+  { token: "{userId}", labelKey: "variables.entries.userId", example: "123456789012345678", group: "user", realKey: "userId" },
+  { token: "{server}", labelKey: "variables.entries.server", example: "Acme", group: "server", realKey: "serverName" },
+  { token: "{channel}", labelKey: "variables.entries.channel", example: "#general", group: "channel" },
+  { token: "{channelName}", labelKey: "variables.entries.channelName", example: "general", group: "channel" },
+  { token: "{memberCount}", labelKey: "variables.entries.memberCount", example: "1,234", group: "server", realKey: "memberCount" },
+];
+
+export const levelingVariables: VariableDescriptor[] = [
+  { token: "{user}", labelKey: "variables.user", example: "@Ada", group: "user", realKey: "userMention" },
+  { token: "{level}", labelKey: "variables.level", example: "5", group: "event" },
+];
+
+export const tempvoiceVariables: VariableDescriptor[] = [
+  { token: "{user}", labelKey: "variables.user", example: "Ada", group: "user", realKey: "userName" },
+];
+
+export function knownTokenSet(descriptors: VariableDescriptor[]): Set<string> {
+  return new Set(descriptors.map((d) => d.token));
+}
+
+export function buildRealData(
+  guild: { id: string; name: string; icon: string | null } | undefined,
+  user: { userId: string; username: string; avatar: string | null } | undefined,
+): PreviewRealData {
+  const serverName = guild?.name ?? "My Server";
+  const serverId = guild?.id ?? "987654321098765432";
+  const serverIcon =
+    guild?.icon && guild.id
+      ? `https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.png`
+      : "https://cdn.discordapp.com/embed/avatars/0.png";
+  const userName = user?.username ?? "User";
+  const userId = user?.userId ?? "123456789012345678";
+  const userAvatar =
+    user?.avatar && user.userId
+      ? `https://cdn.discordapp.com/avatars/${user.userId}/${user.avatar}.png`
+      : "https://cdn.discordapp.com/embed/avatars/0.png";
+  return {
+    userMention: `@${userName}`,
+    userName,
+    userTag: userName,
+    userId,
+    userAvatar,
+    serverName,
+    serverId,
+    serverIcon,
+    memberCount: "1,234",
+  };
+}
+
+export function buildTokenValues(
+  descriptors: VariableDescriptor[],
+  real: PreviewRealData,
+): Map<string, string> {
+  const map = new Map<string, string>();
+  for (const d of descriptors) {
+    const value: string = d.realKey ? real[d.realKey as RealDataKey] : d.example;
+    map.set(d.token, value);
+  }
+  return map;
+}
+```
+
+- [ ] **Step 4: Run to confirm pass**
+
+Run: `<DTEST> tests/client/shared/ui/variable-field/registry.test.ts`
+Expected: PASS. (If the two `@fluxcore/systems` imports fail to resolve, build systems first per the Notes above, then re-run.)
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add apps/dashboard/src/client/shared/ui/variable-field/registry.ts apps/dashboard/tests/client/shared/ui/variable-field/registry.test.ts
+git commit -m "feat(dashboard): add per-scope variable registry with drift guard"
+```
+
+---
+
+### Task 7: Automation variables builder
+
+**Files:**
+- Create: `apps/dashboard/src/client/shared/ui/variable-field/automationVariables.ts`
+- Test: `apps/dashboard/tests/client/shared/ui/variable-field/automationVariables.test.ts`
+
+**Interfaces:**
+- Consumes: `VariableDescriptor`, `VariableGroup`, `RealDataKey`; the client `Constants` type from `../../lib/schemas` (fields used: `eventTypeVariables: Record<string,string[]>`, `templateVariables: Record<string,string>`).
+- Produces: `function buildAutomationVariables(constants: { eventTypeVariables: Record<string, string[]>; templateVariables: Record<string, string> }, eventType: string): VariableDescriptor[]` — for each token available to `eventType`, a descriptor whose `description` is the English text from `templateVariables[token]`, with `group`/`example`/`realKey` from the static maps below; unknown `eventType` → `[]`.
+
+- [ ] **Step 1: Write the failing test**
+
+```ts
+import { describe, it, expect } from "vitest";
+import { buildAutomationVariables } from "../../../../../src/client/shared/ui/variable-field/automationVariables";
+
+const constants = {
+  eventTypeVariables: {
+    memberJoin: ["{user}", "{guild}", "{guild.memberCount}"],
+    memberBanned: ["{user}", "{ban.reason}"],
+  },
+  templateVariables: {
+    "{user}": "User mention (e.g. @User)",
+    "{guild}": "Server name",
+    "{guild.memberCount}": "Server member count",
+    "{ban.reason}": "Ban reason",
+  },
+};
+
+describe("buildAutomationVariables", () => {
+  it("returns descriptors for the event's tokens with descriptions from templateVariables", () => {
+    const vars = buildAutomationVariables(constants, "memberJoin");
+    expect(vars.map((v) => v.token)).toEqual(["{user}", "{guild}", "{guild.memberCount}"]);
+    expect(vars[0].description).toBe("User mention (e.g. @User)");
+    expect(vars.find((v) => v.token === "{guild}")?.realKey).toBe("serverName");
+  });
+  it("includes event-only tokens like {ban.reason} for memberBanned", () => {
+    expect(buildAutomationVariables(constants, "memberBanned").map((v) => v.token)).toContain("{ban.reason}");
+  });
+  it("excludes {ban.reason} for memberJoin (event scoping)", () => {
+    expect(buildAutomationVariables(constants, "memberJoin").map((v) => v.token)).not.toContain("{ban.reason}");
+  });
+  it("returns [] for an unknown event type", () => {
+    expect(buildAutomationVariables(constants, "nope")).toEqual([]);
+  });
+});
+```
+
+- [ ] **Step 2: Run to confirm it fails**
+
+Run: `<DTEST> tests/client/shared/ui/variable-field/automationVariables.test.ts`
+Expected: FAIL (module not found).
+
+- [ ] **Step 3: Write `automationVariables.ts`**
+
+```ts
+import type { RealDataKey, VariableDescriptor, VariableGroup } from "./types";
+
+const REAL_KEYS: Record<string, RealDataKey> = {
+  "{user}": "userMention",
+  "{user.name}": "userName",
+  "{user.tag}": "userTag",
+  "{user.id}": "userId",
+  "{guild}": "serverName",
+  "{guild.memberCount}": "memberCount",
+};
+
+const GROUPS: Record<string, VariableGroup> = {
+  "{user}": "user", "{user.name}": "user", "{user.tag}": "user", "{user.id}": "user",
+  "{channel}": "channel", "{channel.name}": "channel", "{channel.id}": "channel",
+  "{role}": "role", "{role.name}": "role", "{role.id}": "role",
+  "{guild}": "server", "{guild.memberCount}": "server",
+  "{message.content}": "message", "{message.id}": "message", "{message.url}": "message",
+  "{emoji}": "event", "{emoji.name}": "event", "{ban.reason}": "event",
+  "{old.nickname}": "event", "{new.nickname}": "event", "{boost.since}": "event",
+  "{timeout.until}": "event", "{voice.channel}": "event", "{voice.channel.name}": "event",
+  "{thread.name}": "event", "{thread.id}": "event", "{timestamp}": "misc",
+};
+
+const SAMPLES: Record<string, string> = {
+  "{user}": "@Ada", "{user.name}": "Ada", "{user.tag}": "Ada#0001", "{user.id}": "123456789012345678",
+  "{channel}": "#general", "{channel.name}": "general", "{channel.id}": "112233445566778899",
+  "{role}": "@Members", "{role.name}": "Members", "{role.id}": "223344556677889900",
+  "{guild}": "Acme", "{guild.memberCount}": "1,234", "{timestamp}": "just now",
+  "{message.content}": "Hello world", "{message.id}": "334455667788990011", "{message.url}": "https://discord.com/channels/…",
+  "{emoji}": "🎉", "{emoji.name}": "tada", "{ban.reason}": "Spamming",
+  "{old.nickname}": "OldNick", "{new.nickname}": "NewNick", "{boost.since}": "2 days ago",
+  "{timeout.until}": "in 1 hour", "{voice.channel}": "General VC", "{voice.channel.name}": "General VC",
+  "{thread.name}": "help-thread", "{thread.id}": "445566778899001122",
+};
+
+export function buildAutomationVariables(
+  constants: { eventTypeVariables: Record<string, string[]>; templateVariables: Record<string, string> },
+  eventType: string,
+): VariableDescriptor[] {
+  const tokens = constants.eventTypeVariables[eventType] ?? [];
+  return tokens.map((token) => ({
+    token,
+    description: constants.templateVariables[token] ?? token,
+    example: SAMPLES[token] ?? token,
+    group: GROUPS[token] ?? "misc",
+    realKey: REAL_KEYS[token],
+  }));
+}
+```
+
+- [ ] **Step 4: Run to confirm pass**
+
+Run: `<DTEST> tests/client/shared/ui/variable-field/automationVariables.test.ts`
+Expected: PASS (4 tests).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add apps/dashboard/src/client/shared/ui/variable-field/automationVariables.ts apps/dashboard/tests/client/shared/ui/variable-field/automationVariables.test.ts
+git commit -m "feat(dashboard): build event-scoped automation variables"
+```
+
+---
+
+### Task 8: Preview resolver
+
+**Files:**
+- Create: `apps/dashboard/src/client/shared/ui/variable-field/resolvePreview.ts`
+- Test: `apps/dashboard/tests/client/shared/ui/variable-field/resolvePreview.test.ts`
+
+**Interfaces:**
+- Produces: `function resolveTemplatePreview(template: string, values: Map<string, string>): string` — replaces every token present in `values`; unknown tokens are left visible; `{user}` and `{user.name}` are treated as distinct exact strings (no partial overlap).
+
+- [ ] **Step 1: Write the failing test**
+
+```ts
+import { describe, it, expect } from "vitest";
+import { resolveTemplatePreview } from "../../../../../src/client/shared/ui/variable-field/resolvePreview";
+
+const values = new Map<string, string>([
+  ["{user}", "@Ada"],
+  ["{user.name}", "Ada"],
+  ["{server}", "Acme"],
+  ["{membercount}", "1,234"],
+]);
+
+describe("resolveTemplatePreview", () => {
+  it("replaces known tokens with their values", () => {
+    expect(resolveTemplatePreview("Hey {user}, welcome to {server}!", values)).toBe("Hey @Ada, welcome to Acme!");
+  });
+  it("does not let {user} clobber {user.name}", () => {
+    expect(resolveTemplatePreview("{user} / {user.name}", values)).toBe("@Ada / Ada");
+  });
+  it("leaves unknown tokens visible", () => {
+    expect(resolveTemplatePreview("member #{membercont}", values)).toBe("member #{membercont}");
+  });
+  it("replaces every occurrence", () => {
+    expect(resolveTemplatePreview("{server} {server}", values)).toBe("Acme Acme");
+  });
+});
+```
+
+- [ ] **Step 2: Run to confirm it fails**
+
+Run: `<DTEST> tests/client/shared/ui/variable-field/resolvePreview.test.ts`
+Expected: FAIL (module not found).
+
+- [ ] **Step 3: Write `resolvePreview.ts`**
+
+```ts
+import { tokenize } from "./tokens";
+
+export function resolveTemplatePreview(template: string, values: Map<string, string>): string {
+  const known = new Set(values.keys());
+  return tokenize(template, known)
+    .map((seg) => (seg.type === "var" && seg.known ? values.get(seg.value)! : seg.value))
+    .join("");
+}
+```
+
+- [ ] **Step 4: Run to confirm pass**
+
+Run: `<DTEST> tests/client/shared/ui/variable-field/resolvePreview.test.ts`
+Expected: PASS (4 tests).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add apps/dashboard/src/client/shared/ui/variable-field/resolvePreview.ts apps/dashboard/tests/client/shared/ui/variable-field/resolvePreview.test.ts
+git commit -m "feat(dashboard): add pure preview template resolver"
+```
+
+---
+
+## Phase 2 — Components, hook, i18n chrome
+
+### Task 9: `VariableEditor` component
+
+**Files:**
+- Create: `apps/dashboard/src/client/shared/ui/variable-field/VariableEditor.tsx`
+- Test: `apps/dashboard/tests/client/shared/ui/variable-field/VariableEditor.test.tsx`
+
+**Interfaces:**
+- Consumes: `tokenize` (Task 2), `detectUnknownTokens` (Task 3), `insertToken`/`getActiveQuery` (Task 4), `filterByQuery` (Task 5), `knownTokenSet` (Task 6); `Popover`/`PopoverAnchor`/`PopoverContent` from `../popover`; `cn` from `../lib/utils`; `useTranslation` from `react-i18next`.
+- Produces: default export `VariableEditor` with props:
+  ```ts
+  interface VariableEditorProps {
+    value: string;
+    onChange: (value: string) => void;
+    variables: VariableDescriptor[];
+    multiline?: boolean;
+    rows?: number;
+    maxLength?: number;
+    placeholder?: string;
+    disabled?: boolean;
+    id?: string;
+    "aria-label"?: string;
+    className?: string;
+  }
+  ```
+
+**Behavior:** overlay-mirror highlighting (transparent native text + colored backdrop), `{`-triggered combobox (ArrowUp/Down/Enter/Tab/Escape), unknown-token warnings listed under the field via `t`. Uses `common` namespace keys added in Task 20 (`variableField.unknown`, `variableField.didYouMean`, `variableField.noMatches`).
+
+- [ ] **Step 1: Write the failing component test**
+
+```tsx
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import VariableEditor from "../../../../../src/client/shared/ui/variable-field/VariableEditor";
+import type { VariableDescriptor } from "../../../../../src/client/shared/ui/variable-field/types";
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (k: string, o?: Record<string, unknown>) => (o?.suggestion ? `${k}:${o.suggestion}` : k) }),
+}));
+
+const vars: VariableDescriptor[] = [
+  { token: "{user}", example: "@Ada", group: "user", description: "User mention" },
+  { token: "{user.name}", example: "Ada", group: "user", description: "Username" },
+  { token: "{server}", example: "Acme", group: "server", description: "Server name" },
+];
+
+function Harness({ initial = "" }: { initial?: string }) {
+  const [v, setV] = (globalThis as unknown as { React: typeof import("react") }).React.useState(initial);
+  return <VariableEditor value={v} onChange={setV} variables={vars} aria-label="field" />;
+}
+
+describe("VariableEditor", () => {
+  it("opens the suggestion list when typing '{' and inserts on Enter", async () => {
+    const user = userEvent.setup();
+    let current = "";
+    const onChange = (val: string) => { current = val; };
+    render(<VariableEditor value="" onChange={onChange} variables={vars} aria-label="field" />);
+    const input = screen.getByLabelText("field");
+    await user.click(input);
+    await user.type(input, "{{");
+    // listbox appears
+    expect(screen.getByRole("listbox")).toBeTruthy();
+    await user.keyboard("{ArrowDown}{Enter}");
+    expect(current).toContain("{user}");
+  });
+
+  it("shows an unknown-variable warning with a suggestion", () => {
+    render(<VariableEditor value="hi {membercont}" onChange={() => {}} variables={[{ token: "{membercount}", example: "1,234", group: "server" }]} aria-label="field" />);
+    expect(screen.getByText(/variableField\.didYouMean/)).toBeTruthy();
+  });
+});
+```
+
+Note on `user.type(input, "{{")`: in `@testing-library/user-event`, `{{` types a single literal `{`. The suggestion list opens on the resulting `{`.
+
+- [ ] **Step 2: Run to confirm it fails**
+
+Run: `<DTEST> tests/client/shared/ui/variable-field/VariableEditor.test.tsx`
+Expected: FAIL (module not found).
+
+- [ ] **Step 3: Write `VariableEditor.tsx`**
+
+```tsx
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { cn } from "../lib/utils";
+import { Popover, PopoverAnchor, PopoverContent } from "../popover";
+import { ScrollArea } from "../scroll-area";
+import type { VariableDescriptor } from "./types";
+import { tokenize } from "./tokens";
+import { detectUnknownTokens } from "./validation";
+import { insertToken, getActiveQuery } from "./caret";
+import { filterByQuery } from "./filterVariables";
+import { knownTokenSet } from "./registry";
+
+interface VariableEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  variables: VariableDescriptor[];
+  multiline?: boolean;
+  rows?: number;
+  maxLength?: number;
+  placeholder?: string;
+  disabled?: boolean;
+  id?: string;
+  "aria-label"?: string;
+  className?: string;
+}
+
+const SHARED =
+  "w-full rounded-sm border border-transparent bg-surface-lowest px-3 text-sm text-text placeholder:text-outline focus-visible:outline-none focus-visible:border-accent focus-visible:shadow-[0_0_4px_rgba(163,166,255,0.10)] disabled:cursor-not-allowed disabled:opacity-50";
+const INPUT_BOX = "h-9 py-1";
+const AREA_BOX = "min-h-[60px] py-2";
+
+export default function VariableEditor(props: VariableEditorProps) {
+  const { value, onChange, variables, multiline, rows = 3, maxLength, placeholder, disabled, id } = props;
+  const { t } = useTranslation("common");
+  const known = React.useMemo(() => knownTokenSet(variables), [variables]);
+  const fieldRef = React.useRef<HTMLTextAreaElement & HTMLInputElement>(null);
+  const backdropRef = React.useRef<HTMLDivElement>(null);
+
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const [queryStart, setQueryStart] = React.useState(0);
+  const [active, setActive] = React.useState(0);
+
+  const matches = React.useMemo(() => (open ? filterByQuery(variables, query) : []), [open, query, variables]);
+  const unknowns = React.useMemo(() => detectUnknownTokens(value, known), [value, known]);
+  const segments = React.useMemo(() => tokenize(value, known), [value, known]);
+
+  React.useEffect(() => {
+    if (active >= matches.length) setActive(0);
+  }, [matches.length, active]);
+
+  function syncQueryFromCaret() {
+    const el = fieldRef.current;
+    if (!el) return;
+    const caret = el.selectionStart ?? el.value.length;
+    const q = getActiveQuery(el.value, caret);
+    if (q) {
+      setQuery(q.query);
+      setQueryStart(q.start);
+      setOpen(true);
+    } else {
+      setOpen(false);
+    }
+  }
+
+  function commit(token: string) {
+    const el = fieldRef.current;
+    if (!el) return;
+    const caret = el.selectionStart ?? el.value.length;
+    const { value: next, cursor } = insertToken(value, queryStart, caret, token);
+    onChange(next);
+    setOpen(false);
+    requestAnimationFrame(() => {
+      el.focus();
+      el.setSelectionRange(cursor, cursor);
+    });
+  }
+
+  function handleChange(e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) {
+    onChange(e.target.value);
+    // defer so selectionStart reflects the new value
+    requestAnimationFrame(syncQueryFromCaret);
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (!open || matches.length === 0) return;
+    if (e.key === "ArrowDown") { e.preventDefault(); setActive((a) => (a + 1) % matches.length); }
+    else if (e.key === "ArrowUp") { e.preventDefault(); setActive((a) => (a - 1 + matches.length) % matches.length); }
+    else if (e.key === "Enter" || e.key === "Tab") { e.preventDefault(); commit(matches[active].token); }
+    else if (e.key === "Escape") { e.preventDefault(); setOpen(false); }
+  }
+
+  function handleScroll(e: React.UIEvent<HTMLElement>) {
+    if (backdropRef.current) {
+      backdropRef.current.scrollTop = e.currentTarget.scrollTop;
+      backdropRef.current.scrollLeft = e.currentTarget.scrollLeft;
+    }
+  }
+
+  const listboxId = id ? `${id}-listbox` : undefined;
+
+  return (
+    <div>
+      <Popover open={open && matches.length > 0}>
+        <PopoverAnchor asChild>
+          <div className={cn("relative", props.className)}>
+            <div
+              ref={backdropRef}
+              aria-hidden="true"
+              className={cn(
+                SHARED,
+                multiline ? AREA_BOX : INPUT_BOX,
+                "pointer-events-none absolute inset-0 overflow-hidden border-transparent text-text",
+                multiline ? "whitespace-pre-wrap break-words" : "whitespace-pre",
+              )}
+            >
+              {segments.map((seg, i) =>
+                seg.type === "var" ? (
+                  <span key={i} className={seg.known ? "text-accent" : "text-danger underline decoration-danger/50"}>
+                    {seg.value}
+                  </span>
+                ) : (
+                  <span key={i}>{seg.value}</span>
+                ),
+              )}
+              {value.endsWith("\n") ? "\n" : ""}
+            </div>
+            {multiline ? (
+              <textarea
+                ref={fieldRef}
+                id={id}
+                rows={rows}
+                value={value}
+                maxLength={maxLength}
+                placeholder={placeholder}
+                disabled={disabled}
+                aria-label={props["aria-label"]}
+                role="combobox"
+                aria-expanded={open && matches.length > 0}
+                aria-controls={listboxId}
+                aria-autocomplete="list"
+                className={cn(SHARED, AREA_BOX, "relative bg-transparent text-transparent caret-text whitespace-pre-wrap break-words")}
+                onChange={handleChange}
+                onKeyDown={handleKeyDown}
+                onScroll={handleScroll}
+                onClick={syncQueryFromCaret}
+                onBlur={() => setTimeout(() => setOpen(false), 100)}
+              />
+            ) : (
+              <input
+                ref={fieldRef}
+                id={id}
+                type="text"
+                value={value}
+                maxLength={maxLength}
+                placeholder={placeholder}
+                disabled={disabled}
+                aria-label={props["aria-label"]}
+                role="combobox"
+                aria-expanded={open && matches.length > 0}
+                aria-controls={listboxId}
+                aria-autocomplete="list"
+                className={cn(SHARED, INPUT_BOX, "relative bg-transparent text-transparent caret-text")}
+                onChange={handleChange}
+                onKeyDown={handleKeyDown}
+                onScroll={handleScroll}
+                onClick={syncQueryFromCaret}
+                onBlur={() => setTimeout(() => setOpen(false), 100)}
+              />
+            )}
+          </div>
+        </PopoverAnchor>
+        <PopoverContent
+          align="start"
+          className="w-72 p-0"
+          onOpenAutoFocus={(e) => e.preventDefault()}
+        >
+          <ScrollArea className="max-h-56">
+            <ul role="listbox" id={listboxId} className="p-1">
+              {matches.map((m, i) => (
+                <li
+                  key={m.token}
+                  role="option"
+                  aria-selected={i === active}
+                  className={cn(
+                    "flex cursor-pointer items-center justify-between gap-3 rounded-sm px-2 py-1.5 text-sm",
+                    i === active ? "bg-accent/15 text-text" : "text-text-muted",
+                  )}
+                  onMouseDown={(e) => { e.preventDefault(); commit(m.token); }}
+                  onMouseEnter={() => setActive(i)}
+                >
+                  <span className="font-mono text-accent">{m.token}</span>
+                  <span className="truncate text-xs">{m.description ?? (m.labelKey ? t(m.labelKey) : "")}</span>
+                </li>
+              ))}
+            </ul>
+          </ScrollArea>
+        </PopoverContent>
+      </Popover>
+
+      {unknowns.length > 0 && (
+        <ul className="mt-1 space-y-0.5">
+          {unknowns.map((u) => (
+            <li key={u.token} className="text-xs text-danger">
+              {t("variableField.unknown", { token: u.token })}
+              {u.suggestion ? " " + t("variableField.didYouMean", { suggestion: u.suggestion }) : ""}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+```
+
+- [ ] **Step 4: Run to confirm pass**
+
+Run: `<DTEST> tests/client/shared/ui/variable-field/VariableEditor.test.tsx`
+Expected: PASS (2 tests). If the harness `React.useState` reference errors, replace the second test's `Harness` usage with the inline-`onChange` pattern already used in the first test (do not rely on a global React).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add apps/dashboard/src/client/shared/ui/variable-field/VariableEditor.tsx apps/dashboard/tests/client/shared/ui/variable-field/VariableEditor.test.tsx
+git commit -m "feat(dashboard): add VariableEditor with autocomplete, highlighting, validation"
+```
+
+---
+
+### Task 10: `VariableBrowser` component
+
+**Files:**
+- Create: `apps/dashboard/src/client/shared/ui/variable-field/VariableBrowser.tsx`
+- Test: `apps/dashboard/tests/client/shared/ui/variable-field/VariableBrowser.test.tsx`
+
+**Interfaces:**
+- Consumes: `filterByQuery` (Task 5); `Popover`/`PopoverTrigger`/`PopoverContent` from `../popover`; `Input` from `../input`; `Button` from `../button`; `ScrollArea` from `../scroll-area`; `useTranslation`.
+- Produces: default export `VariableBrowser` with props `{ variables: VariableDescriptor[]; onInsert: (token: string) => void; label?: string }`. Renders a trigger button that opens a searchable, grouped list; clicking a row calls `onInsert(token)` and closes.
+
+- [ ] **Step 1: Write the failing test**
+
+```tsx
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import VariableBrowser from "../../../../../src/client/shared/ui/variable-field/VariableBrowser";
+import type { VariableDescriptor } from "../../../../../src/client/shared/ui/variable-field/types";
+
+vi.mock("react-i18next", () => ({ useTranslation: () => ({ t: (k: string) => k }) }));
+
+const vars: VariableDescriptor[] = [
+  { token: "{user}", example: "@Ada", group: "user", description: "User mention" },
+  { token: "{server}", example: "Acme", group: "server", description: "Server name" },
+];
+
+describe("VariableBrowser", () => {
+  it("opens, filters, and inserts a token", async () => {
+    const user = userEvent.setup();
+    const onInsert = vi.fn();
+    render(<VariableBrowser variables={vars} onInsert={onInsert} />);
+    await user.click(screen.getByRole("button"));
+    const search = screen.getByRole("searchbox");
+    await user.type(search, "serv");
+    await user.click(screen.getByText("{server}"));
+    expect(onInsert).toHaveBeenCalledWith("{server}");
+  });
+});
+```
+
+- [ ] **Step 2: Run to confirm it fails**
+
+Run: `<DTEST> tests/client/shared/ui/variable-field/VariableBrowser.test.tsx`
+Expected: FAIL (module not found).
+
+- [ ] **Step 3: Write `VariableBrowser.tsx`**
+
+```tsx
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Popover, PopoverTrigger, PopoverContent } from "../popover";
+import { Button } from "../button";
+import { Input } from "../input";
+import { ScrollArea } from "../scroll-area";
+import { Icon } from "../../components/Icon";
+import type { VariableDescriptor } from "./types";
+import { filterByQuery } from "./filterVariables";
+
+interface VariableBrowserProps {
+  variables: VariableDescriptor[];
+  onInsert: (token: string) => void;
+  label?: string;
+}
+
+export default function VariableBrowser({ variables, onInsert, label }: VariableBrowserProps) {
+  const { t } = useTranslation("common");
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const matches = React.useMemo(() => filterByQuery(variables, query), [variables, query]);
+
+  function pick(token: string) {
+    onInsert(token);
+    setOpen(false);
+    setQuery("");
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button type="button" variant="ghost" size="sm" className="gap-1 text-xs">
+          <Icon name="add" className="size-3.5" />
+          {label ?? t("variableField.insert")}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="end" className="w-72 p-2">
+        <Input
+          type="search"
+          role="searchbox"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder={t("variableField.search")}
+          className="mb-2"
+        />
+        <ScrollArea className="max-h-64">
+          <ul className="space-y-0.5">
+            {matches.length === 0 && (
+              <li className="px-2 py-3 text-center text-xs text-text-muted">{t("variableField.noMatches")}</li>
+            )}
+            {matches.map((m) => (
+              <li key={m.token}>
+                <button
+                  type="button"
+                  onClick={() => pick(m.token)}
+                  className="flex w-full items-center justify-between gap-3 rounded-sm px-2 py-1.5 text-left text-sm hover:bg-accent/10"
+                >
+                  <span className="font-mono text-accent">{m.token}</span>
+                  <span className="truncate text-xs text-text-muted">{m.description ?? (m.labelKey ? t(m.labelKey) : "")}</span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </ScrollArea>
+      </PopoverContent>
+    </Popover>
+  );
+}
+```
+
+**Note:** confirm `Button` accepts `variant`/`size` and `Icon` accepts `name="add"` (used elsewhere in the app). If the icon name differs, use an existing name such as `"plus"` per `Icon.tsx`'s map.
+
+- [ ] **Step 4: Run to confirm pass**
+
+Run: `<DTEST> tests/client/shared/ui/variable-field/VariableBrowser.test.tsx`
+Expected: PASS (1 test).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add apps/dashboard/src/client/shared/ui/variable-field/VariableBrowser.tsx apps/dashboard/tests/client/shared/ui/variable-field/VariableBrowser.test.tsx
+git commit -m "feat(dashboard): add searchable VariableBrowser popover"
+```
+
+---
+
+### Task 11: `usePreviewContext` hook
+
+**Files:**
+- Create: `apps/dashboard/src/client/shared/ui/variable-field/usePreviewContext.ts`
+- Test: `apps/dashboard/tests/client/shared/ui/variable-field/usePreviewContext.test.tsx`
+
+**Interfaces:**
+- Consumes: `useAuth` from `../../hooks/useAuth`, `useGuilds` from `../../hooks/useGuilds`, `buildRealData` (Task 6).
+- Produces: `function usePreviewContext(guildId: string): PreviewRealData` — finds the guild by id in `useGuilds()`, reads the current user from `useAuth()`, returns `buildRealData(guild, user)`.
+
+- [ ] **Step 1: Write the failing test**
+
+```tsx
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from "vitest";
+import { renderHook } from "@testing-library/react";
+
+vi.mock("../../../../../src/client/shared/hooks/useAuth", () => ({
+  useAuth: () => ({ data: { userId: "7", username: "Ada", avatar: "def" } }),
+}));
+vi.mock("../../../../../src/client/shared/hooks/useGuilds", () => ({
+  useGuilds: () => ({ data: [{ id: "42", name: "Acme", icon: "abc" }] }),
+}));
+
+import { usePreviewContext } from "../../../../../src/client/shared/ui/variable-field/usePreviewContext";
+
+describe("usePreviewContext", () => {
+  it("assembles real data from the matching guild and current user", () => {
+    const { result } = renderHook(() => usePreviewContext("42"));
+    expect(result.current.serverName).toBe("Acme");
+    expect(result.current.userName).toBe("Ada");
+  });
+  it("falls back to defaults when the guild is not found", () => {
+    const { result } = renderHook(() => usePreviewContext("999"));
+    expect(result.current.serverName).toBe("My Server");
+  });
+});
+```
+
+**Note:** confirm the exact hook file names/exports (`useAuth`, `useGuilds`) and that `useGuilds` returns `{ data }`. Adjust the mock paths/shapes to match the real hooks (the exploration confirmed `useAuth()` → `{ userId, username, avatar }` and `useGuilds()` → `Guild[]`; verify whether they return the raw value or a `{ data }` query object and align `usePreviewContext` accordingly).
+
+- [ ] **Step 2: Run to confirm it fails**
+
+Run: `<DTEST> tests/client/shared/ui/variable-field/usePreviewContext.test.tsx`
+Expected: FAIL (module not found).
+
+- [ ] **Step 3: Write `usePreviewContext.ts`**
+
+```ts
+import { useMemo } from "react";
+import { useAuth } from "../../hooks/useAuth";
+import { useGuilds } from "../../hooks/useGuilds";
+import { buildRealData } from "./registry";
+import type { PreviewRealData } from "./types";
+
+export function usePreviewContext(guildId: string): PreviewRealData {
+  const auth = useAuth();
+  const guilds = useGuilds();
+  return useMemo(() => {
+    const user = auth.data ? { userId: auth.data.userId, username: auth.data.username, avatar: auth.data.avatar } : undefined;
+    const guild = (guilds.data ?? []).find((g) => g.id === guildId);
+    return buildRealData(guild, user);
+  }, [auth.data, guilds.data, guildId]);
+}
+```
+
+**Adjust** the `.data` access to match the real return shapes verified in the Step 1 note (e.g. if `useAuth()` returns the user object directly rather than a query result).
+
+- [ ] **Step 4: Run to confirm pass**
+
+Run: `<DTEST> tests/client/shared/ui/variable-field/usePreviewContext.test.tsx`
+Expected: PASS (2 tests).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add apps/dashboard/src/client/shared/ui/variable-field/usePreviewContext.ts apps/dashboard/tests/client/shared/ui/variable-field/usePreviewContext.test.tsx
+git commit -m "feat(dashboard): add usePreviewContext hook"
+```
+
+---
+
+### Task 12: `DiscordMessagePreview` component
+
+**Files:**
+- Create: `apps/dashboard/src/client/shared/ui/variable-field/DiscordMessagePreview.tsx`
+- Test: `apps/dashboard/tests/client/shared/ui/variable-field/DiscordMessagePreview.test.tsx`
+
+**Interfaces:**
+- Consumes: `resolveTemplatePreview` (Task 8), `buildTokenValues` (Task 6); `PreviewRealData`, `VariableDescriptor`.
+- Produces: default export `DiscordMessagePreview` with props:
+  ```ts
+  interface DiscordEmbedInput { title?: string; description?: string; footer?: string; thumbnail?: string; color?: number }
+  interface DiscordMessagePreviewProps {
+    variables: VariableDescriptor[];
+    real: PreviewRealData;
+    content?: string;      // plain message content
+    embed?: DiscordEmbedInput;
+  }
+  ```
+  Resolves each text field via `resolveTemplatePreview(field, buildTokenValues(variables, real))` and renders a Discord-style bubble: avatar + username + timestamp; when `embed` has any content, a left color bar + title/description/footer/thumbnail.
+
+- [ ] **Step 1: Write the failing test**
+
+```tsx
+// @vitest-environment jsdom
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import DiscordMessagePreview from "../../../../../src/client/shared/ui/variable-field/DiscordMessagePreview";
+import { welcomeVariables, buildRealData } from "../../../../../src/client/shared/ui/variable-field/registry";
+
+const real = buildRealData({ id: "42", name: "Acme", icon: null }, { userId: "7", username: "Ada", avatar: null });
+
+describe("DiscordMessagePreview", () => {
+  it("renders resolved message content", () => {
+    render(<DiscordMessagePreview variables={welcomeVariables} real={real} content="Hey {user}, welcome to {server}!" />);
+    expect(screen.getByText("Hey @Ada, welcome to Acme!")).toBeTruthy();
+  });
+  it("renders an embed title and description", () => {
+    render(
+      <DiscordMessagePreview
+        variables={welcomeVariables}
+        real={real}
+        embed={{ title: "Welcome to {server}!", description: "Member #{membercount}" }}
+      />,
+    );
+    expect(screen.getByText("Welcome to Acme!")).toBeTruthy();
+    expect(screen.getByText("Member #1,234")).toBeTruthy();
+  });
+});
+```
+
+- [ ] **Step 2: Run to confirm it fails**
+
+Run: `<DTEST> tests/client/shared/ui/variable-field/DiscordMessagePreview.test.tsx`
+Expected: FAIL (module not found).
+
+- [ ] **Step 3: Write `DiscordMessagePreview.tsx`**
+
+```tsx
+import * as React from "react";
+import type { PreviewRealData, VariableDescriptor } from "./types";
+import { buildTokenValues } from "./registry";
+import { resolveTemplatePreview } from "./resolvePreview";
+
+interface DiscordEmbedInput {
+  title?: string;
+  description?: string;
+  footer?: string;
+  thumbnail?: string;
+  color?: number;
+}
+interface DiscordMessagePreviewProps {
+  variables: VariableDescriptor[];
+  real: PreviewRealData;
+  content?: string;
+  embed?: DiscordEmbedInput;
+}
+
+function hexColor(color: number | undefined): string {
+  if (color === undefined) return "#a3a6ff";
+  return "#" + color.toString(16).padStart(6, "0");
+}
+
+export default function DiscordMessagePreview({ variables, real, content, embed }: DiscordMessagePreviewProps) {
+  const values = React.useMemo(() => buildTokenValues(variables, real), [variables, real]);
+  const resolve = React.useCallback((s?: string) => (s ? resolveTemplatePreview(s, values) : ""), [values]);
+
+  const hasEmbed = !!(embed && (embed.title || embed.description || embed.footer || embed.thumbnail));
+  const resolvedContent = resolve(content);
+  const thumb = resolve(embed?.thumbnail);
+
+  return (
+    <div className="rounded-md bg-surface-container p-3 text-sm">
+      <div className="flex gap-3">
+        <img src={real.userAvatar} alt="" className="size-10 rounded-full" />
+        <div className="min-w-0 flex-1">
+          <div className="flex items-baseline gap-2">
+            <span className="font-medium text-text">{real.userName}</span>
+            <span className="text-[10px] text-text-muted">today</span>
+          </div>
+          {resolvedContent && <p className="whitespace-pre-wrap break-words text-text">{resolvedContent}</p>}
+          {hasEmbed && (
+            <div
+              className="mt-1 flex gap-3 rounded-sm bg-surface-lowest p-3"
+              style={{ borderInlineStart: `4px solid ${hexColor(embed?.color)}` }}
+            >
+              <div className="min-w-0 flex-1">
+                {embed?.title && <div className="font-semibold text-text">{resolve(embed.title)}</div>}
+                {embed?.description && (
+                  <div className="whitespace-pre-wrap break-words text-text-muted">{resolve(embed.description)}</div>
+                )}
+                {embed?.footer && <div className="mt-2 text-[10px] text-text-muted">{resolve(embed.footer)}</div>}
+              </div>
+              {thumb && /^https?:\/\//.test(thumb) && <img src={thumb} alt="" className="size-16 rounded-sm object-cover" />}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 4: Run to confirm pass**
+
+Run: `<DTEST> tests/client/shared/ui/variable-field/DiscordMessagePreview.test.tsx`
+Expected: PASS (2 tests).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add apps/dashboard/src/client/shared/ui/variable-field/DiscordMessagePreview.tsx apps/dashboard/tests/client/shared/ui/variable-field/DiscordMessagePreview.test.tsx
+git commit -m "feat(dashboard): add Discord-style message/embed preview"
+```
+
+---
+
+### Task 13: Barrel export + i18n chrome keys
+
+**Files:**
+- Create: `apps/dashboard/src/client/shared/ui/variable-field/index.ts`
+- Modify: `packages/i18n/src/locales/en/common.json`
+
+**Interfaces:**
+- Produces: barrel re-exporting `VariableEditor` (default→named `VariableEditor`), `VariableBrowser`, `DiscordMessagePreview`, `usePreviewContext`, all registry members, `buildAutomationVariables`, and types.
+
+- [ ] **Step 1: Write `index.ts`**
+
+```ts
+export { default as VariableEditor } from "./VariableEditor";
+export { default as VariableBrowser } from "./VariableBrowser";
+export { default as DiscordMessagePreview } from "./DiscordMessagePreview";
+export { usePreviewContext } from "./usePreviewContext";
+export {
+  welcomeVariables,
+  customCommandVariables,
+  levelingVariables,
+  tempvoiceVariables,
+  knownTokenSet,
+  buildRealData,
+  buildTokenValues,
+} from "./registry";
+export { buildAutomationVariables } from "./automationVariables";
+export type { VariableDescriptor, VariableGroup, PreviewRealData, RealDataKey } from "./types";
+```
+
+- [ ] **Step 2: Add chrome keys to `common.json`**
+
+Add a `variableField` object under the appropriate top-level key in `packages/i18n/src/locales/en/common.json` (place alongside existing sibling keys; keep JSON valid):
+
+```json
+"variableField": {
+  "insert": "Insert variable",
+  "search": "Search variables…",
+  "noMatches": "No matches",
+  "unknown": "Unknown variable {{token}}",
+  "didYouMean": "did you mean {{suggestion}}?",
+  "preview": "Preview",
+  "notAvailable": "{{token}} isn't available for {{event}}"
+}
+```
+
+- [ ] **Step 3: Typecheck the module**
+
+Run: `docker compose --profile bot run --rm --no-deps bot pnpm --filter @fluxcore/dashboard exec tsc -p tsconfig.client.json --noEmit`
+Expected: no errors from `variable-field/**`.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/dashboard/src/client/shared/ui/variable-field/index.ts packages/i18n/src/locales/en/common.json
+git commit -m "feat(dashboard): barrel export variable-field + i18n chrome keys"
+```
+
+---
+
+## Phase 3 — Rollout
+
+Each rollout task swaps native fields for `VariableEditor`, adds a preview + browser, removes static hint text, and ends with a typecheck. There are no per-file unit tests for the swaps (behavior is covered by Phase 1–2 tests); the deliverable gate is a clean typecheck + the full suite still green.
+
+### Task 14: Welcome / Farewell / DM (`welcome.tsx`)
+
+**Files:**
+- Modify: `apps/dashboard/src/client/routes/guild/$guildId/welcome.tsx`
+
+**Interfaces:**
+- Consumes: `VariableEditor`, `VariableBrowser`, `DiscordMessagePreview`, `usePreviewContext`, `welcomeVariables` from `../../../shared/ui/variable-field`.
+
+- [ ] **Step 1: Import the module**
+
+Add to the imports block:
+```ts
+import {
+  VariableEditor,
+  VariableBrowser,
+  DiscordMessagePreview,
+  usePreviewContext,
+  welcomeVariables,
+} from "../../../shared/ui/variable-field";
+```
+
+- [ ] **Step 2: Thread preview data into `EmbedEditor`**
+
+In the `EmbedEditor` component, add a `real` prop of type `PreviewRealData` (import the type) and accept it from the parent. In the page component (which has `guildId`), compute `const real = usePreviewContext(guildId);` and pass `real={real}` to each `EmbedEditor`.
+
+- [ ] **Step 3: Replace the four fields**
+
+Replace the title `Input` (lines ~61-67) with:
+```tsx
+<VariableEditor
+  id="embed-title"
+  value={value.title ?? ""}
+  onChange={(v) => onChange({ ...value, title: v || undefined })}
+  variables={welcomeVariables}
+  placeholder={t("embed.titlePlaceholder")}
+  maxLength={256}
+/>
+```
+Replace the description `Textarea` (lines ~70-77) with the same but `multiline rows={3}` and `title`→`description`, `maxLength={4096}`.
+Replace the footer `Input` (lines ~95-101) → `VariableEditor` (single-line, `maxLength={2048}`, `footer`).
+Replace the thumbnail `Input` (lines ~106-112) → `VariableEditor` (single-line, `thumbnail`, keep placeholder `"{user.avatar}"`).
+
+- [ ] **Step 4: Replace static hint with the browser + add preview**
+
+Delete the static `<p>` hint (lines ~124-127). Add, near the fields:
+```tsx
+<VariableBrowser variables={welcomeVariables} onInsert={(tok) => onChange({ ...value, description: (value.description ?? "") + tok })} />
+```
+And below the embed fields render:
+```tsx
+<DiscordMessagePreview
+  variables={welcomeVariables}
+  real={real}
+  embed={{ title: value.title, description: value.description, footer: value.footer, thumbnail: value.thumbnail, color: value.color }}
+/>
+```
+(Use the field names actually present on `EmbedConfig`; if `color` is absent, omit it.)
+
+- [ ] **Step 5: Typecheck**
+
+Run: `docker compose --profile bot run --rm --no-deps bot pnpm --filter @fluxcore/dashboard exec tsc -p tsconfig.client.json --noEmit`
+Expected: no new errors in `welcome.tsx`.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add apps/dashboard/src/client/routes/guild/\$guildId/welcome.tsx
+git commit -m "feat(dashboard): variable editor + preview in welcome/farewell/DM"
+```
+
+---
+
+### Task 15: Custom commands (`commands.tsx`)
+
+**Files:**
+- Modify: `apps/dashboard/src/client/routes/guild/$guildId/commands.tsx`
+
+- [ ] **Step 1: Import**
+```ts
+import {
+  VariableEditor,
+  VariableBrowser,
+  DiscordMessagePreview,
+  usePreviewContext,
+  customCommandVariables,
+} from "../../../shared/ui/variable-field";
+```
+Add `const real = usePreviewContext(guildId);` in the component body.
+
+- [ ] **Step 2: Replace fields**
+
+- `cmd-content` Textarea (lines ~495-504) → `VariableEditor multiline rows={4}` bound to `formContent`/`setFormContent` (keep `markDirty()`), `variables={customCommandVariables}`.
+- `embed-title` Input (~510-518) → single-line `VariableEditor` bound to `formEmbedTitle`.
+- `embed-desc` Textarea (~524-533) → `VariableEditor multiline rows={3}` bound to `formEmbedDescription`.
+- `embed-footer` Input (~550-558) → single-line `VariableEditor` bound to `formEmbedFooter`.
+
+Each `onChange` receives the string directly, e.g.:
+```tsx
+onChange={(v) => { setFormContent(v); markDirty(); }}
+```
+
+- [ ] **Step 3: Replace the VARIABLE_HELP tab hint & add browser + preview**
+
+Keep the "Variables" tab table (it documents tokens) but also add a `VariableBrowser variables={customCommandVariables}` next to the content field for insert-at-cursor, and a `DiscordMessagePreview variables={customCommandVariables} real={real} content={formContent} embed={{ title: formEmbedTitle, description: formEmbedDescription, footer: formEmbedFooter }}` inside the dialog.
+
+- [ ] **Step 4: Typecheck**
+
+Run: `docker compose --profile bot run --rm --no-deps bot pnpm --filter @fluxcore/dashboard exec tsc -p tsconfig.client.json --noEmit`
+Expected: no new errors.
+
+- [ ] **Step 5: Commit**
+```bash
+git add apps/dashboard/src/client/routes/guild/\$guildId/commands.tsx
+git commit -m "feat(dashboard): variable editor + preview in custom commands"
+```
+
+---
+
+### Task 16: Scheduled messages (`scheduled.tsx`)
+
+**Files:**
+- Modify: `apps/dashboard/src/client/routes/guild/$guildId/scheduled.tsx`
+
+Scheduled messages fire on a timer (no triggering member), so use `welcomeVariables` (server-scoped subset is meaningful; `{user}`-style tokens resolve to sample values).
+
+- [ ] **Step 1: Import** the module + `welcomeVariables`; add `const real = usePreviewContext(guildId);`.
+- [ ] **Step 2: Replace fields:**
+  - `msg-content` Textarea (~597-604) → `VariableEditor multiline rows={5}` bound to `form.textContent` via `updateForm({ textContent: v })`, `maxLength={2000}`.
+  - `embed-title` (~614-619), `embed-description` (~623-629, multiline rows={4}), `embed-footer` (~640-646) → `VariableEditor`. Leave `embed-thumbnail` (~652-657) as-is (URL field) OR convert to single-line `VariableEditor` for consistency.
+- [ ] **Step 3:** Add `VariableBrowser` by the content field and a `DiscordMessagePreview` in the dialog (`content={form.textContent}`, `embed={{ title: form.embedTitle, description: form.embedDescription, footer: form.embedFooter, thumbnail: form.embedThumbnail }}`).
+- [ ] **Step 4: Typecheck** (same command). Expected: no new errors.
+- [ ] **Step 5: Commit**
+```bash
+git add apps/dashboard/src/client/routes/guild/\$guildId/scheduled.tsx
+git commit -m "feat(dashboard): variable editor + preview in scheduled messages"
+```
+
+---
+
+### Task 17: Leveling announce (`leveling.tsx`)
+
+**Files:**
+- Modify: `apps/dashboard/src/client/routes/guild/$guildId/leveling.tsx`
+
+- [ ] **Step 1: Import** `VariableEditor`, `VariableBrowser`, `DiscordMessagePreview`, `usePreviewContext`, `levelingVariables`; add `const real = usePreviewContext(guildId);`.
+- [ ] **Step 2: Replace** the announce `Textarea` (~516-526) with:
+```tsx
+<VariableEditor
+  multiline
+  value={settings.announceMessage}
+  onChange={(v) => handleAnnounceMessageChange(v)}
+  variables={levelingVariables}
+  placeholder={t("settings.announceMessagePlaceholder")}
+/>
+```
+Remove the static `<p>{t("settings.announceMessageVars")}</p>` hint; add `<VariableBrowser variables={levelingVariables} onInsert={(tok) => handleAnnounceMessageChange(settings.announceMessage + tok)} />`.
+- [ ] **Step 3: Add inline preview:** `<DiscordMessagePreview variables={levelingVariables} real={real} content={settings.announceMessage} />`.
+- [ ] **Step 4: Typecheck.** Expected: no new errors.
+- [ ] **Step 5: Commit**
+```bash
+git add apps/dashboard/src/client/routes/guild/\$guildId/leveling.tsx
+git commit -m "feat(dashboard): variable editor + preview in leveling announce"
+```
+
+---
+
+### Task 18: TempVoice name template (`TempVoiceForm.tsx`)
+
+**Files:**
+- Modify: `apps/dashboard/src/client/features/tempvoice/components/TempVoiceForm.tsx`
+
+- [ ] **Step 1: Import** `VariableEditor`, `usePreviewContext`, `tempvoiceVariables` from `../../../shared/ui/variable-field`; add `const real = usePreviewContext(guildId);`.
+- [ ] **Step 2: Replace** the `nameTemplate` `Input` (~247-259) with a single-line `VariableEditor`:
+```tsx
+<VariableEditor
+  id="tempvoice-name-template"
+  value={nameTemplate}
+  onChange={setNameTemplate}
+  variables={tempvoiceVariables}
+  placeholder={t("form.defaultNameTemplate")}
+  maxLength={100}
+/>
+```
+Keep the `{t("form.nameTemplateHint")}` line or replace with a `VariableBrowser`.
+- [ ] **Step 3: Inline preview** (channel-name style — plain text is fine): render the resolved template, e.g.
+```tsx
+<p className="mt-1 text-xs text-text-muted">
+  {t("common:variableField.preview")}: {nameTemplate.replace("{user}", real.userName)}
+</p>
+```
+(or reuse `resolveTemplatePreview` + `buildTokenValues(tempvoiceVariables, real)` for correctness).
+- [ ] **Step 4: Typecheck.** Expected: no new errors.
+- [ ] **Step 5: Commit**
+```bash
+git add apps/dashboard/src/client/features/tempvoice/components/TempVoiceForm.tsx
+git commit -m "feat(dashboard): variable editor + preview in tempvoice name template"
+```
+
+---
+
+### Task 19: Automation — thread eventType + swap action fields (`ActionFields.tsx`, `NodeDetailPanel.tsx`, `WorkflowEditor.tsx`)
+
+**Files:**
+- Modify: `apps/dashboard/src/client/features/automation/components/ActionFields.tsx`
+- Modify: `apps/dashboard/src/client/features/automation/workflow/NodeDetailPanel.tsx`
+- Modify: `apps/dashboard/src/client/features/automation/workflow/WorkflowEditor.tsx`
+
+**Interfaces:**
+- Consumes: `VariableEditor`, `buildAutomationVariables`; the already-fetched `constants` (`useConstants()`), the workflow `eventType`.
+- Produces: `ActionFields` accepts a new `variables: VariableDescriptor[]` prop and renders `VariableEditor` for variable-bearing fields.
+
+- [ ] **Step 1: Add a variable-field allowlist to `ActionFields.tsx`**
+
+At the top of the module:
+```ts
+import { VariableEditor } from "../../../shared/ui/variable-field";
+import type { VariableDescriptor } from "../../../shared/ui/variable-field";
+
+const VARIABLE_FIELD_KEYS = new Set([
+  "message",
+  "embed.title",
+  "embed.description",
+  "embed.footer",
+  "webhook.bodyTemplate",
+  "nickname",
+  "threadName",
+]);
+```
+
+- [ ] **Step 2: Add `variables` to `ActionFieldsProps`**
+```ts
+interface ActionFieldsProps {
+  fields: ActionFieldDescriptor[];
+  values: Record<string, unknown>;
+  onChange: (key: string, value: unknown) => void;
+  channels: Channel[];
+  roles: Role[];
+  variables: VariableDescriptor[];
+}
+```
+
+- [ ] **Step 3: Render `VariableEditor` for variable-bearing text/textarea fields**
+
+In the `text` and `textarea` branches, when `VARIABLE_FIELD_KEYS.has(field.key)`, render:
+```tsx
+<VariableEditor
+  id={field.key}
+  value={String(value ?? "")}
+  onChange={(v) => onChange(field.key, v)}
+  variables={variables}
+  multiline={field.type === "textarea"}
+  placeholder={field.placeholder}
+  maxLength={field.maxLength}
+/>
+```
+Otherwise keep the existing `<Input>`/`<Textarea>`.
+
+- [ ] **Step 4: Thread `eventType` to `ActionPanel` → `ActionFields`**
+
+In `NodeDetailPanel.tsx`, add `eventType: string` to `ActionPanelProps`. In `ActionPanel`, compute:
+```ts
+import { buildAutomationVariables } from "../../../shared/ui/variable-field";
+const variables = buildAutomationVariables(constants, eventType);
+```
+Pass `variables={variables}` into `<ActionFields …/>` (the render around lines ~299-305).
+
+In `WorkflowEditor.tsx`, where the action node renders `<NodeDetailPanel type="action" …/>` (lines ~592-605), add `eventType={eventType}` (the state variable already declared at ~line 101).
+
+- [ ] **Step 5: Typecheck**
+
+Run: `docker compose --profile bot run --rm --no-deps bot pnpm --filter @fluxcore/dashboard exec tsc -p tsconfig.client.json --noEmit`
+Expected: no new errors; `ActionFields` callers updated to pass `variables`.
+
+- [ ] **Step 6: Commit**
+```bash
+git add apps/dashboard/src/client/features/automation/components/ActionFields.tsx apps/dashboard/src/client/features/automation/workflow/NodeDetailPanel.tsx apps/dashboard/src/client/features/automation/workflow/WorkflowEditor.tsx
+git commit -m "feat(automation): event-scoped variable editor in action fields"
+```
+
+---
+
+### Task 20: Automation message preview (independent)
+
+**Files:**
+- Modify: `apps/dashboard/src/client/features/automation/workflow/NodeDetailPanel.tsx`
+
+Add a `DiscordMessagePreview` in `ActionPanel` for message-producing action types (`sendMessage`, `sendEmbed`, `sendDM`).
+
+- [ ] **Step 1: Import** `DiscordMessagePreview`, `usePreviewContext` from `../../../shared/ui/variable-field`. In `ActionPanel`, `const real = usePreviewContext(guildId);`.
+- [ ] **Step 2: Render** below `ActionFields`, gated on action type:
+```tsx
+{(action.type === "sendMessage" || action.type === "sendDM") && (
+  <DiscordMessagePreview variables={variables} real={real} content={String((action as Record<string, unknown>).message ?? "")} />
+)}
+{action.type === "sendEmbed" && (
+  <DiscordMessagePreview
+    variables={variables}
+    real={real}
+    embed={{
+      title: String((action as Record<string, unknown>)["embed.title"] ?? ""),
+      description: String((action as Record<string, unknown>)["embed.description"] ?? ""),
+      footer: String((action as Record<string, unknown>)["embed.footer"] ?? ""),
+    }}
+  />
+)}
+```
+Adjust property access to the actual `ActionConfig` shape (embed fields may be nested under `action.embed` rather than dotted keys — verify and use the real shape).
+
+- [ ] **Step 3: Typecheck.** Expected: no new errors.
+- [ ] **Step 4: Commit**
+```bash
+git add apps/dashboard/src/client/features/automation/workflow/NodeDetailPanel.tsx
+git commit -m "feat(automation): Discord preview for message/embed/DM actions"
+```
+
+---
+
+### Task 21: Feature-scope i18n descriptions + final verification
+
+**Files:**
+- Modify: `packages/i18n/src/locales/en/welcome.json`, `.../leveling.json`, `.../tempvoice.json`, `.../commands.json` (create keys referenced by registry `labelKey`s where missing)
+
+- [ ] **Step 1: Add missing description keys**
+
+For each registry `labelKey` not already present, add the English string. Welcome (`welcome.json`) needs a `variables` object:
+```json
+"variables": {
+  "user": "Mentions the member",
+  "userTag": "The member's tag (name#0001)",
+  "userName": "The member's username",
+  "userId": "The member's ID",
+  "userAvatar": "The member's avatar URL",
+  "server": "The server name",
+  "serverId": "The server ID",
+  "memberCount": "Current member count",
+  "serverIcon": "The server icon URL"
+}
+```
+Leveling (`leveling.json`): `"variables": { "user": "Mentions the member", "level": "The level reached" }`.
+TempVoice (`tempvoice.json`): `"variables": { "user": "The member's name" }`.
+Commands (`commands.json`): the registry reuses existing `variables.entries.*` keys — confirm they exist; add any missing.
+
+- [ ] **Step 2: Run the FULL dashboard test suite**
+
+Run: `docker compose --profile bot run --rm bot pnpm --filter @fluxcore/dashboard test`
+Expected: all tests PASS (Phase 1–2 suites + smoke).
+
+- [ ] **Step 3: Full client typecheck**
+
+Run: `docker compose --profile bot run --rm --no-deps bot pnpm --filter @fluxcore/dashboard exec tsc -p tsconfig.client.json --noEmit`
+Expected: exit 0.
+
+- [ ] **Step 4: Commit**
+```bash
+git add packages/i18n/src/locales/en/welcome.json packages/i18n/src/locales/en/leveling.json packages/i18n/src/locales/en/tempvoice.json packages/i18n/src/locales/en/commands.json
+git commit -m "feat(i18n): variable descriptions for welcome/leveling/tempvoice/commands"
+```
+
+---
+
+## Self-Review
+
+**Spec coverage:**
+- Autocomplete on `{` → Tasks 4, 5, 9. Variable browser → Task 10. Inline highlighting → Task 9 (overlay). Unknown-variable validation → Tasks 3, 9. Event-scope awareness → Task 7 + 19 (via `eventTypeVariables`). Live Discord preview (hybrid) → Tasks 6, 8, 11, 12. Rollout to all fields → Tasks 14–20. i18n → Tasks 13, 21. Accessibility (combobox ARIA, aria-hidden overlay) → Task 9. Non-goal (no token renaming) honored — registry surfaces each field's existing tokens. All spec sections map to tasks.
+
+**Placeholder scan:** No "TBD/TODO/implement later". Rollout tasks show the exact replacement JSX; a few carry explicit "verify the real shape" notes (guild/user hook return shape; `ActionConfig` embed nesting; `Icon` name) — these are verification instructions, not missing content.
+
+**Type consistency:** `VariableDescriptor` (with optional `description`) is defined in Task 2 and used identically in Tasks 5–12, 19. `buildTokenValues`/`buildRealData`/`knownTokenSet` signatures match between Task 6 (definition) and Tasks 9, 11, 12 (use). `resolveTemplatePreview(template, Map)` matches between Task 8 and Task 12. `buildAutomationVariables(constants, eventType)` matches between Task 7 and Task 19. `insertToken`/`getActiveQuery` signatures match Task 4 ↔ Task 9.
+
+**Known execution risks (flagged, not blockers):**
+1. Guild/user hook return shape (`{ data }` vs raw) — Task 11 Step 1 note instructs verifying before finalizing.
+2. `@fluxcore/systems` subpath resolution in the drift test — Task 6 note gives the `pnpm --filter @fluxcore/systems build` fallback.
+3. Overlay-mirror alignment (font/padding parity) is visual; unit tests cover logic, not pixel alignment — verify visually via the running app after Task 14.
+4. `Icon` name / `Button` variant props — Task 10 note instructs confirming against existing usage.
diff --git a/packages/i18n/src/locales/en/common.json b/packages/i18n/src/locales/en/common.json
index f0868f2..8cb4b77 100644
--- a/packages/i18n/src/locales/en/common.json
+++ b/packages/i18n/src/locales/en/common.json
@@ -141,5 +141,35 @@
   "language": {
     "searchPlaceholder": "Search languages...",
     "noResults": "No language found"
+  },
+  "variableField": {
+    "insert": "Insert variable",
+    "search": "Search variables…",
+    "noMatches": "No matches",
+    "unknown": "Unknown variable {{token}}",
+    "didYouMean": "did you mean {{suggestion}}?",
+    "preview": "Preview",
+    "notAvailable": "{{token}} isn't available for {{event}}"
+  },
+  "variables": {
+    "user": "Mentions the user",
+    "userTag": "The user's tag (e.g. name#0001)",
+    "userName": "The user's username",
+    "userId": "The user's ID",
+    "userAvatar": "The user's avatar URL",
+    "server": "The server name",
+    "serverId": "The server ID",
+    "memberCount": "The server's member count",
+    "serverIcon": "The server icon URL",
+    "level": "The level the member reached",
+    "entries": {
+      "user": "Mention the user who triggered the command",
+      "username": "Display name of the user",
+      "userId": "User ID",
+      "server": "Server name",
+      "channel": "Channel mention",
+      "channelName": "Channel name",
+      "memberCount": "Server member count"
+    }
   }
 }
diff --git a/packages/systems/package.json b/packages/systems/package.json
index a94e00f..182061e 100644
--- a/packages/systems/package.json
+++ b/packages/systems/package.json
@@ -326,6 +326,10 @@
       "types": "./dist/customCommands/constants.d.ts",
       "import": "./dist/customCommands/constants.js"
     },
+    "./customCommands/variables": {
+      "types": "./dist/customCommands/variables.d.ts",
+      "import": "./dist/customCommands/variables.js"
+    },
     "./customCommands/executor": {
       "types": "./dist/customCommands/executor.d.ts",
       "import": "./dist/customCommands/executor.js"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 75ccde6..094208d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -56,7 +56,7 @@ importers:
         version: 25.3.0
       '@vitest/coverage-v8':
         specifier: ^4.0.18
-        version: 4.0.18(vitest@4.0.18(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+        version: 4.0.18(vitest@4.0.18(@types/node@25.3.0)(jiti@2.6.1)(jsdom@29.1.1)(lightningcss@1.31.1)(tsx@4.21.0))
       tsx:
         specifier: ^4.21.0
         version: 4.21.0
@@ -65,7 +65,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: ^4.0.18
-        version: 4.0.18(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)
+        version: 4.0.18(@types/node@25.3.0)(jiti@2.6.1)(jsdom@29.1.1)(lightningcss@1.31.1)(tsx@4.21.0)
 
   apps/dashboard:
     dependencies:
@@ -208,6 +208,12 @@ importers:
       '@tailwindcss/vite':
         specifier: ^4.1.7
         version: 4.2.1(vite@6.4.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+      '@testing-library/react':
+        specifier: ^16.3.2
+        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@testing-library/user-event':
+        specifier: ^14.6.1
+        version: 14.6.1(@testing-library/dom@10.4.1)
       '@types/react':
         specifier: ^19.1.6
         version: 19.2.14
@@ -219,10 +225,13 @@ importers:
         version: 4.7.0(vite@6.4.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
       '@vitest/coverage-v8':
         specifier: ^4.0.18
-        version: 4.0.18(vitest@4.0.18(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+        version: 4.0.18(vitest@4.0.18(@types/node@25.3.0)(jiti@2.6.1)(jsdom@29.1.1)(lightningcss@1.31.1)(tsx@4.21.0))
       concurrently:
         specifier: ^9.1.2
         version: 9.2.1
+      jsdom:
+        specifier: ^29.1.1
+        version: 29.1.1
       tailwindcss:
         specifier: ^4.1.7
         version: 4.2.1
@@ -237,7 +246,7 @@ importers:
         version: 6.4.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)
       vitest:
         specifier: ^4.0.18
-        version: 4.0.18(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)
+        version: 4.0.18(@types/node@25.3.0)(jiti@2.6.1)(jsdom@29.1.1)(lightningcss@1.31.1)(tsx@4.21.0)
 
   packages/config:
     dependencies:
@@ -334,13 +343,13 @@ importers:
     devDependencies:
       '@vitest/coverage-v8':
         specifier: ^4.0.18
-        version: 4.0.18(vitest@4.0.18(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+        version: 4.0.18(vitest@4.0.18(@types/node@25.3.0)(jiti@2.6.1)(jsdom@29.1.1)(lightningcss@1.31.1)(tsx@4.21.0))
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
       vitest:
         specifier: ^4.0.18
-        version: 4.0.18(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)
+        version: 4.0.18(@types/node@25.3.0)(jiti@2.6.1)(jsdom@29.1.1)(lightningcss@1.31.1)(tsx@4.21.0)
 
   packages/types:
     dependencies:
@@ -367,6 +376,21 @@ importers:
 
 packages:
 
+  '@asamuzakjp/css-color@5.1.11':
+    resolution: {integrity: sha512-KVw6qIiCTUQhByfTd78h2yD1/00waTmm9uy/R7Ck/ctUyAPj+AEDLkQIdJW0T8+qGgj3j5bpNKK7Q3G+LedJWg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  '@asamuzakjp/dom-selector@7.1.1':
+    resolution: {integrity: sha512-67RZDnYRc8H/8MLDgQCDE//zoqVFwajkepHZgmXrbwybzXOEwOWGPYGmALYl9J2DOLfFPPs6kKCqmbzV895hTQ==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  '@asamuzakjp/generational-cache@1.0.1':
+    resolution: {integrity: sha512-wajfB8KqzMCN2KGNFdLkReeHncd0AslUSrvHVvvYWuU8ghncRJoA50kT3zP9MVL0+9g4/67H+cdvBskj9THPzg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  '@asamuzakjp/nwsapi@2.3.9':
+    resolution: {integrity: sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==}
+
   '@babel/code-frame@7.29.0':
     resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
     engines: {node: '>=6.9.0'}
@@ -458,6 +482,10 @@ packages:
     resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
     engines: {node: '>=18'}
 
+  '@bramus/specificity@2.4.2':
+    resolution: {integrity: sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==}
+    hasBin: true
+
   '@chevrotain/cst-dts-gen@10.5.0':
     resolution: {integrity: sha512-lhmC/FyqQ2o7pGK4Om+hzuDrm9rhFYIJ/AXoQBeongmn870Xeb0L6oGEiuR8nohFNL5sMaQEJWCxr1oIVIVXrw==}
 
@@ -470,6 +498,42 @@ packages:
   '@chevrotain/utils@10.5.0':
     resolution: {integrity: sha512-hBzuU5+JjB2cqNZyszkDHZgOSrUUT8V3dhgRl8Q9Gp6dAj/H5+KILGjbhDpc3Iy9qmqlm/akuOI2ut9VUtzJxQ==}
 
+  '@csstools/color-helpers@6.1.0':
+    resolution: {integrity: sha512-064IFJdjTfUqnjpCVpMOdbr8FLQBhinbZj6yRv2An2E41O/pLEXqfFRWqGq/SxlE5PEUYTlvWsG2r8MswAVvkg==}
+    engines: {node: '>=20.19.0'}
+
+  '@csstools/css-calc@3.2.1':
+    resolution: {integrity: sha512-DtdHlgXh5ZkA43cwBcAm+huzgJiwx3ZTWVjBs94kwz2xKqSimDA3lBgCjphYgwgVUMWatSM0pDd8TILB1yrVVg==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^4.0.0
+      '@csstools/css-tokenizer': ^4.0.0
+
+  '@csstools/css-color-parser@4.1.9':
+    resolution: {integrity: sha512-paQcIaOO53Rk5+YrBaBjm/SgrV4INImjo2BT1DtQRYr+XeTRbeAYlS+jxXp9drqvKmtFnWRJKIalDLhZZDu42A==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^4.0.0
+      '@csstools/css-tokenizer': ^4.0.0
+
+  '@csstools/css-parser-algorithms@4.0.0':
+    resolution: {integrity: sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^4.0.0
+
+  '@csstools/css-syntax-patches-for-csstree@1.1.6':
+    resolution: {integrity: sha512-TcJCWFbXLPpJYq6z7bfOyjWYJDiDg2/I4gyUC9pqPNqHFRIey0EB0q0L5cSnQDfWJg8Jd6VadakxdIez/3zkqQ==}
+    peerDependencies:
+      css-tree: ^3.2.1
+    peerDependenciesMeta:
+      css-tree:
+        optional: true
+
+  '@csstools/css-tokenizer@4.0.0':
+    resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==}
+    engines: {node: '>=20.19.0'}
+
   '@discordjs/builders@1.13.1':
     resolution: {integrity: sha512-cOU0UDHc3lp/5nKByDxkmRiNZBpdp0kx55aarbiAfakfKJHlxv/yFW1zmIqCAmwH5CRlrH9iMFKJMpvW4DPB+w==}
     engines: {node: '>=16.11.0'}
@@ -824,6 +888,15 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@exodus/bytes@1.15.1':
+    resolution: {integrity: sha512-S6mL0yNB/Abt9Ei4tq8gDhcczc4S3+vQ4ra7vxnAf+YHC02srtqxKKZghx2Dq6p0e66THKwR6r8N6P95wEty7Q==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+    peerDependencies:
+      '@noble/hashes': ^1.8.0 || ^2.0.0
+    peerDependenciesMeta:
+      '@noble/hashes':
+        optional: true
+
   '@fastify/accept-negotiator@2.0.1':
     resolution: {integrity: sha512-/c/TW2bO/v9JeEgoD/g1G5GxGeCF1Hafdf79WPmUlgYiBXummY0oX3VVq4yFkKKVBKDNlaDUYoab7g38RpPqCQ==}
 
@@ -1811,6 +1884,34 @@ packages:
   '@tanstack/store@0.9.1':
     resolution: {integrity: sha512-+qcNkOy0N1qSGsP7omVCW0SDrXtaDcycPqBDE726yryiA5eTDFpjBReaYjghVJwNf1pcPMyzIwTGlYjCSQR0Fg==}
 
+  '@testing-library/dom@10.4.1':
+    resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
+    engines: {node: '>=18'}
+
+  '@testing-library/react@16.3.2':
+    resolution: {integrity: sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@testing-library/dom': ^10.0.0
+      '@types/react': ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^18.0.0 || ^19.0.0
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@testing-library/user-event@14.6.1':
+    resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==}
+    engines: {node: '>=12', npm: '>=6'}
+    peerDependencies:
+      '@testing-library/dom': '>=7.21.4'
+
+  '@types/aria-query@5.0.4':
+    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
+
   '@types/babel__core@7.20.5':
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
@@ -1970,10 +2071,17 @@ packages:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
 
+  ansi-styles@5.2.0:
+    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
+    engines: {node: '>=10'}
+
   aria-hidden@1.2.6:
     resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
     engines: {node: '>=10'}
 
+  aria-query@5.3.0:
+    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
+
   assertion-error@2.0.1:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
@@ -2008,6 +2116,9 @@ packages:
     resolution: {integrity: sha512-8VYKM3MjCa9WcaSAI3hzwhmyHVlH8tiGFwf0RlTsZPWJ1I5MkzjiudCo4KC4DxOaL/53A5B1sI/IbldNFDbsKA==}
     engines: {node: 20.x || 22.x || 23.x || 24.x || 25.x}
 
+  bidi-js@1.0.3:
+    resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
+
   bindings@1.5.0:
     resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
 
@@ -2115,6 +2226,10 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
+  css-tree@3.2.1:
+    resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
@@ -2184,6 +2299,10 @@ packages:
     resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
     engines: {node: '>=12'}
 
+  data-urls@7.0.0:
+    resolution: {integrity: sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
   date-fns@4.1.0:
     resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
 
@@ -2199,6 +2318,9 @@ packages:
   decimal.js-light@2.5.1:
     resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
 
+  decimal.js@10.6.0:
+    resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
+
   decompress-response@6.0.0:
     resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
     engines: {node: '>=10'}
@@ -2243,6 +2365,9 @@ packages:
     resolution: {integrity: sha512-2l0gsPOLPs5t6GFZfQZKnL1OJNYFcuC/ETWsW4VtKVD/tg4ICa9x+jb9bkPffkMdRpRpuUaO/fKkHCBeiCKh8g==}
     engines: {node: '>=18'}
 
+  dom-accessibility-api@0.5.16:
+    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
+
   dotenv@16.6.1:
     resolution: {integrity: sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==}
     engines: {node: '>=12'}
@@ -2271,6 +2396,10 @@ packages:
     resolution: {integrity: sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==}
     engines: {node: '>=10.13.0'}
 
+  entities@8.0.0:
+    resolution: {integrity: sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==}
+    engines: {node: '>=20.19.0'}
+
   es-module-lexer@1.7.0:
     resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
 
@@ -2425,6 +2554,10 @@ packages:
     resolution: {integrity: sha512-U7tt8JsyrxSRKspfhtLET79pU8K+tInj5QZXs1jSugO1Vq5dFj3kmZsRldo29mTBfcjDRVRXrEZ6LS63Cog9ZA==}
     engines: {node: '>=16.9.0'}
 
+  html-encoding-sniffer@6.0.0:
+    resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
   html-escaper@2.0.2:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
 
@@ -2486,6 +2619,9 @@ packages:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
 
+  is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+
   is-property@1.0.2:
     resolution: {integrity: sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g==}
 
@@ -2518,6 +2654,15 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
+  jsdom@29.1.1:
+    resolution: {integrity: sha512-ECi4Fi2f7BdJtUKTflYRTiaMxIB0O6zfR1fX0GXpUrf6flp8QIYn1UT20YQqdSOfk2dfkCwS8LAFoJDEppNK5Q==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24.0.0}
+    peerDependencies:
+      canvas: ^3.0.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
   jsesc@3.1.0:
     resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
     engines: {node: '>=6'}
@@ -2627,6 +2772,10 @@ packages:
     resolution: {integrity: sha512-ESL2CrkS/2wTPfuend7Zhkzo2u0daGJ/A2VucJOgQ/C48S/zB8MMeMHSGKYpXhIjbPxfuezITkaBH1wqv00DDQ==}
     engines: {node: 20 || >=22}
 
+  lru-cache@11.5.2:
+    resolution: {integrity: sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g==}
+    engines: {node: 20 || >=22}
+
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
@@ -2639,6 +2788,10 @@ packages:
     peerDependencies:
       react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  lz-string@1.5.0:
+    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    hasBin: true
+
   magic-bytes.js@1.13.0:
     resolution: {integrity: sha512-afO2mnxW7GDTXMm5/AoN1WuOcdoKhtgXjIvHmobqTD1grNplhGdv3PFOyjCVmrnOZBIT/gD/koDKpYG+0mvHcg==}
 
@@ -2652,6 +2805,9 @@ packages:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
     engines: {node: '>=10'}
 
+  mdn-data@2.27.1:
+    resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
+
   mime@3.0.0:
     resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
     engines: {node: '>=10.0.0'}
@@ -2731,6 +2887,9 @@ packages:
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
+  parse5@8.0.1:
+    resolution: {integrity: sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==}
+
   path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
@@ -2843,6 +3002,10 @@ packages:
     deprecated: No longer maintained. Please contact the author of the relevant native addon; alternatives are available.
     hasBin: true
 
+  pretty-format@27.5.1:
+    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
   prisma@7.4.1:
     resolution: {integrity: sha512-gDKOXwnPiMdB+uYMhMeN8jj4K7Cu3Q2wB/wUsITOoOk446HtVb8T9BZxFJ1Zop6alc89k6PMNdR2FZCpbXp/jw==}
     engines: {node: ^20.19 || ^22.12 || >=24.0}
@@ -2868,6 +3031,10 @@ packages:
   pump@3.0.3:
     resolution: {integrity: sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==}
 
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
   pure-rand@6.1.0:
     resolution: {integrity: sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==}
 
@@ -2908,6 +3075,9 @@ packages:
       typescript:
         optional: true
 
+  react-is@17.0.2:
+    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+
   react-is@19.2.4:
     resolution: {integrity: sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA==}
 
@@ -3045,6 +3215,10 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
+  saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+
   scheduler@0.27.0:
     resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
@@ -3165,6 +3339,9 @@ packages:
     resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
     engines: {node: '>=10'}
 
+  symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+
   tailwind-merge@3.5.0:
     resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
 
@@ -3207,6 +3384,13 @@ packages:
     resolution: {integrity: sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==}
     engines: {node: '>=14.0.0'}
 
+  tldts-core@7.4.7:
+    resolution: {integrity: sha512-rNlAI8fKn/JckBMUSbNL/ES2kmDiurWaE49l+ikwEc9A6lFR7gMx9AhgQMQKBK4H5w4pKLH64JzZfB99uRsGNQ==}
+
+  tldts@7.4.7:
+    resolution: {integrity: sha512-56L0/9HELHSsG1bFCzay8UoLxzRL7kpFf7Wl5q/kSYwiSJGACvro61xnKzPNM+SadxllzdtXsKDSXE7HPeqIAw==}
+    hasBin: true
+
   toad-cache@3.7.0:
     resolution: {integrity: sha512-/m8M+2BJUpoJdgAHoG+baCwBT+tf2VraSfkBgl0Y00qIWt41DJ8R5B8nsEw0I58YwF5IZH6z24/2TobDKnqSWw==}
     engines: {node: '>=12'}
@@ -3215,9 +3399,17 @@ packages:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
 
+  tough-cookie@6.0.2:
+    resolution: {integrity: sha512-exgYmnmL/sJpR3upZfXG5PoatXQii55xAiXGXzY+sROLZ/Y+SLcp9PgJNI9Vz37HpQ74WvDcLT8eqm+kV3FzrA==}
+    engines: {node: '>=16'}
+
   tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
+  tr46@6.0.0:
+    resolution: {integrity: sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==}
+    engines: {node: '>=20'}
+
   tree-kill@1.2.2:
     resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
     hasBin: true
@@ -3285,6 +3477,10 @@ packages:
     resolution: {integrity: sha512-gBLkYIlEnSp8pFbT64yFgGE6UIB9tAkhukC23PmMDCe5Nd+cRqKxSjw5y54MK2AZMgZfJWMaNE4nYUHgi1XEOw==}
     engines: {node: '>=18.17'}
 
+  undici@7.28.0:
+    resolution: {integrity: sha512-cRZYrTDwWznlnRiPjggAGxZXanty6M8RV1ff8Wm4LWXBp7/IG8v5DnOm74DtUBp9OONpK75YlPnIjQqX0dBDtA==}
+    engines: {node: '>=20.18.1'}
+
   update-browserslist-db@1.2.3:
     resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
     hasBin: true
@@ -3448,9 +3644,25 @@ packages:
     resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
     engines: {node: '>=0.10.0'}
 
+  w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
+
   webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
 
+  webidl-conversions@8.0.1:
+    resolution: {integrity: sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==}
+    engines: {node: '>=20'}
+
+  whatwg-mimetype@5.0.0:
+    resolution: {integrity: sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==}
+    engines: {node: '>=20'}
+
+  whatwg-url@16.0.1:
+    resolution: {integrity: sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
   whatwg-url@5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
 
@@ -3483,6 +3695,13 @@ packages:
       utf-8-validate:
         optional: true
 
+  xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
+
+  xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+
   xtend@4.0.2:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
@@ -3525,6 +3744,26 @@ packages:
 
 snapshots:
 
+  '@asamuzakjp/css-color@5.1.11':
+    dependencies:
+      '@asamuzakjp/generational-cache': 1.0.1
+      '@csstools/css-calc': 3.2.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.9(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@asamuzakjp/dom-selector@7.1.1':
+    dependencies:
+      '@asamuzakjp/generational-cache': 1.0.1
+      '@asamuzakjp/nwsapi': 2.3.9
+      bidi-js: 1.0.3
+      css-tree: 3.2.1
+      is-potential-custom-element-name: 1.0.1
+
+  '@asamuzakjp/generational-cache@1.0.1': {}
+
+  '@asamuzakjp/nwsapi@2.3.9': {}
+
   '@babel/code-frame@7.29.0':
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
@@ -3641,6 +3880,10 @@ snapshots:
 
   '@bcoe/v8-coverage@1.0.2': {}
 
+  '@bramus/specificity@2.4.2':
+    dependencies:
+      css-tree: 3.2.1
+
   '@chevrotain/cst-dts-gen@10.5.0':
     dependencies:
       '@chevrotain/gast': 10.5.0
@@ -3656,6 +3899,30 @@ snapshots:
 
   '@chevrotain/utils@10.5.0': {}
 
+  '@csstools/color-helpers@6.1.0': {}
+
+  '@csstools/css-calc@3.2.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@csstools/css-color-parser@4.1.9(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/color-helpers': 6.1.0
+      '@csstools/css-calc': 3.2.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@csstools/css-syntax-patches-for-csstree@1.1.6(css-tree@3.2.1)':
+    optionalDependencies:
+      css-tree: 3.2.1
+
+  '@csstools/css-tokenizer@4.0.0': {}
+
   '@discordjs/builders@1.13.1':
     dependencies:
       '@discordjs/formatters': 0.6.2
@@ -3871,6 +4138,8 @@ snapshots:
   '@esbuild/win32-x64@0.27.3':
     optional: true
 
+  '@exodus/bytes@1.15.1': {}
+
   '@fastify/accept-negotiator@2.0.1': {}
 
   '@fastify/ajv-compiler@4.0.5':
@@ -4825,6 +5094,33 @@ snapshots:
 
   '@tanstack/store@0.9.1': {}
 
+  '@testing-library/dom@10.4.1':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/runtime': 7.29.2
+      '@types/aria-query': 5.0.4
+      aria-query: 5.3.0
+      dom-accessibility-api: 0.5.16
+      lz-string: 1.5.0
+      picocolors: 1.1.1
+      pretty-format: 27.5.1
+
+  '@testing-library/react@16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@testing-library/dom': 10.4.1
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)':
+    dependencies:
+      '@testing-library/dom': 10.4.1
+
+  '@types/aria-query@5.0.4': {}
+
   '@types/babel__core@7.20.5':
     dependencies:
       '@babel/parser': 7.29.0
@@ -4930,7 +5226,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vitest/coverage-v8@4.0.18(vitest@4.0.18(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))':
+  '@vitest/coverage-v8@4.0.18(vitest@4.0.18(@types/node@25.3.0)(jiti@2.6.1)(jsdom@29.1.1)(lightningcss@1.31.1)(tsx@4.21.0))':
     dependencies:
       '@bcoe/v8-coverage': 1.0.2
       '@vitest/utils': 4.0.18
@@ -4942,7 +5238,7 @@ snapshots:
       obug: 2.1.1
       std-env: 3.10.0
       tinyrainbow: 3.0.3
-      vitest: 4.0.18(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)
+      vitest: 4.0.18(@types/node@25.3.0)(jiti@2.6.1)(jsdom@29.1.1)(lightningcss@1.31.1)(tsx@4.21.0)
 
   '@vitest/expect@4.0.18':
     dependencies:
@@ -5027,10 +5323,16 @@ snapshots:
     dependencies:
       color-convert: 2.0.1
 
+  ansi-styles@5.2.0: {}
+
   aria-hidden@1.2.6:
     dependencies:
       tslib: 2.8.1
 
+  aria-query@5.3.0:
+    dependencies:
+      dequal: 2.0.3
+
   assertion-error@2.0.1: {}
 
   ast-v8-to-istanbul@0.3.11:
@@ -5061,6 +5363,10 @@ snapshots:
       prebuild-install: 7.1.3
     optional: true
 
+  bidi-js@1.0.3:
+    dependencies:
+      require-from-string: 2.0.2
+
   bindings@1.5.0:
     dependencies:
       file-uri-to-path: 1.0.0
@@ -5190,6 +5496,11 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  css-tree@3.2.1:
+    dependencies:
+      mdn-data: 2.27.1
+      source-map-js: 1.2.1
+
   csstype@3.2.3: {}
 
   d3-array@3.2.4:
@@ -5256,6 +5567,13 @@ snapshots:
       d3-selection: 3.0.0
       d3-transition: 3.0.1(d3-selection@3.0.0)
 
+  data-urls@7.0.0:
+    dependencies:
+      whatwg-mimetype: 5.0.0
+      whatwg-url: 16.0.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
   date-fns@4.1.0: {}
 
   debug@4.4.3:
@@ -5264,6 +5582,8 @@ snapshots:
 
   decimal.js-light@2.5.1: {}
 
+  decimal.js@10.6.0: {}
+
   decompress-response@6.0.0:
     dependencies:
       mimic-response: 3.1.0
@@ -5309,6 +5629,8 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
+  dom-accessibility-api@0.5.16: {}
+
   dotenv@16.6.1: {}
 
   dotenv@17.3.1: {}
@@ -5334,6 +5656,8 @@ snapshots:
       graceful-fs: 4.2.11
       tapable: 2.3.0
 
+  entities@8.0.0: {}
+
   es-module-lexer@1.7.0: {}
 
   es-toolkit@1.45.1: {}
@@ -5533,6 +5857,12 @@ snapshots:
 
   hono@4.11.4: {}
 
+  html-encoding-sniffer@6.0.0:
+    dependencies:
+      '@exodus/bytes': 1.15.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
   html-escaper@2.0.2: {}
 
   html-parse-stringify@3.0.1:
@@ -5589,6 +5919,8 @@ snapshots:
 
   is-fullwidth-code-point@3.0.0: {}
 
+  is-potential-custom-element-name@1.0.1: {}
+
   is-property@1.0.2: {}
 
   isbot@5.1.35: {}
@@ -5614,6 +5946,32 @@ snapshots:
 
   js-tokens@4.0.0: {}
 
+  jsdom@29.1.1:
+    dependencies:
+      '@asamuzakjp/css-color': 5.1.11
+      '@asamuzakjp/dom-selector': 7.1.1
+      '@bramus/specificity': 2.4.2
+      '@csstools/css-syntax-patches-for-csstree': 1.1.6(css-tree@3.2.1)
+      '@exodus/bytes': 1.15.1
+      css-tree: 3.2.1
+      data-urls: 7.0.0
+      decimal.js: 10.6.0
+      html-encoding-sniffer: 6.0.0
+      is-potential-custom-element-name: 1.0.1
+      lru-cache: 11.5.2
+      parse5: 8.0.1
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 6.0.2
+      undici: 7.28.0
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 8.0.1
+      whatwg-mimetype: 5.0.0
+      whatwg-url: 16.0.1
+      xml-name-validator: 5.0.0
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
   jsesc@3.1.0: {}
 
   json-schema-ref-resolver@3.0.0:
@@ -5691,6 +6049,8 @@ snapshots:
 
   lru-cache@11.2.6: {}
 
+  lru-cache@11.5.2: {}
+
   lru-cache@5.1.1:
     dependencies:
       yallist: 3.1.1
@@ -5701,6 +6061,8 @@ snapshots:
     dependencies:
       react: 19.2.4
 
+  lz-string@1.5.0: {}
+
   magic-bytes.js@1.13.0: {}
 
   magic-string@0.30.21:
@@ -5717,6 +6079,8 @@ snapshots:
     dependencies:
       semver: 7.7.4
 
+  mdn-data@2.27.1: {}
+
   mime@3.0.0: {}
 
   mimic-response@3.1.0:
@@ -5787,6 +6151,10 @@ snapshots:
       wrappy: 1.0.2
     optional: true
 
+  parse5@8.0.1:
+    dependencies:
+      entities: 8.0.0
+
   path-key@3.1.1: {}
 
   path-scurry@2.0.2:
@@ -5907,6 +6275,12 @@ snapshots:
       tunnel-agent: 0.6.0
     optional: true
 
+  pretty-format@27.5.1:
+    dependencies:
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 17.0.2
+
   prisma@7.4.1(@types/react@19.2.14)(better-sqlite3@12.6.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3):
     dependencies:
       '@prisma/config': 7.4.1
@@ -5940,6 +6314,8 @@ snapshots:
       once: 1.4.0
     optional: true
 
+  punycode@2.3.1: {}
+
   pure-rand@6.1.0: {}
 
   quick-format-unescaped@4.0.4: {}
@@ -5976,6 +6352,8 @@ snapshots:
       react-dom: 19.2.4(react@19.2.4)
       typescript: 5.9.3
 
+  react-is@17.0.2: {}
+
   react-is@19.2.4: {}
 
   react-redux@9.2.0(@types/react@19.2.14)(react@19.2.4)(redux@5.0.1):
@@ -6121,6 +6499,10 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
+  saxes@6.0.0:
+    dependencies:
+      xmlchars: 2.2.0
+
   scheduler@0.27.0: {}
 
   secure-json-parse@4.1.0: {}
@@ -6219,6 +6601,8 @@ snapshots:
     dependencies:
       has-flag: 4.0.0
 
+  symbol-tree@3.2.4: {}
+
   tailwind-merge@3.5.0: {}
 
   tailwindcss@4.2.1: {}
@@ -6261,12 +6645,26 @@ snapshots:
 
   tinyrainbow@3.0.3: {}
 
+  tldts-core@7.4.7: {}
+
+  tldts@7.4.7:
+    dependencies:
+      tldts-core: 7.4.7
+
   toad-cache@3.7.0: {}
 
   toidentifier@1.0.1: {}
 
+  tough-cookie@6.0.2:
+    dependencies:
+      tldts: 7.4.7
+
   tr46@0.0.3: {}
 
+  tr46@6.0.0:
+    dependencies:
+      punycode: 2.3.1
+
   tree-kill@1.2.2: {}
 
   ts-mixer@6.0.4: {}
@@ -6320,6 +6718,8 @@ snapshots:
 
   undici@6.21.3: {}
 
+  undici@7.28.0: {}
+
   update-browserslist-db@1.2.3(browserslist@4.28.1):
     dependencies:
       browserslist: 4.28.1
@@ -6399,7 +6799,7 @@ snapshots:
       lightningcss: 1.31.1
       tsx: 4.21.0
 
-  vitest@4.0.18(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0):
+  vitest@4.0.18(@types/node@25.3.0)(jiti@2.6.1)(jsdom@29.1.1)(lightningcss@1.31.1)(tsx@4.21.0):
     dependencies:
       '@vitest/expect': 4.0.18
       '@vitest/mocker': 4.0.18(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
@@ -6423,6 +6823,7 @@ snapshots:
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 25.3.0
+      jsdom: 29.1.1
     transitivePeerDependencies:
       - jiti
       - less
@@ -6438,8 +6839,24 @@ snapshots:
 
   void-elements@3.1.0: {}
 
+  w3c-xmlserializer@5.0.0:
+    dependencies:
+      xml-name-validator: 5.0.0
+
   webidl-conversions@3.0.1: {}
 
+  webidl-conversions@8.0.1: {}
+
+  whatwg-mimetype@5.0.0: {}
+
+  whatwg-url@16.0.1:
+    dependencies:
+      '@exodus/bytes': 1.15.1
+      tr46: 6.0.0
+      webidl-conversions: 8.0.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
   whatwg-url@5.0.0:
     dependencies:
       tr46: 0.0.3
@@ -6465,6 +6882,10 @@ snapshots:
 
   ws@8.19.0: {}
 
+  xml-name-validator@5.0.0: {}
+
+  xmlchars@2.2.0: {}
+
   xtend@4.0.2: {}
 
   y18n@5.0.8: {}