feat(dashboard): variable autocomplete, highlighting & live preview for {variable} fields

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:",

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" && (

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}
           />
         )}
 

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)}

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>
 

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"