@escalated-dev/escalated 0.11.5 → 0.11.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@escalated-dev/escalated",
-    "version": "0.11.5",
+    "version": "0.11.6",
     "description": "Vue 3 + Inertia.js UI components for Escalated — the embeddable support ticket system",
     "author": "Escalated Dev <hello@escalated.dev>",
     "license": "MIT",

package/pages.json

@@ -1,6 +1,6 @@
 {
     "$comment": "Generated by scripts/generate-page-manifest.js from src/pages. Every name here resolves to a component; a name a backend renders that is not here is a blank screen.",
-    "version": "0.11.5",
+    "version": "0.11.6",
     "pages": [
         "Escalated/Admin/ApiTokens/Index",
         "Escalated/Admin/AuditLog/Index",

package/src/components/WorkflowActionConfig.vue

@@ -4,16 +4,19 @@ import VariableTokenInput from './VariableTokenInput.vue';
 
 const props = defineProps({
     actionType: { type: String, required: true },
-    modelValue: { type: Object, default: () => ({}) },
+    // The action's `value`, which the contract keeps scalar. A structured value
+    // a backend stored itself (Laravel's `{agent_id, strategy}`, say) is left
+    // untouched until someone edits the field.
+    modelValue: { type: [String, Number, Object, Array], default: '' },
 });
 
 const emit = defineEmits(['update:modelValue']);
 
-const headersPlaceholder = '{"Authorization": "Bearer ..."}';
-const config = computed(() => props.modelValue || {});
+const isStructured = computed(() => props.modelValue !== null && typeof props.modelValue === 'object');
+const value = computed(() => (isStructured.value ? '' : (props.modelValue ?? '')));
 
-function update(key, value) {
-    emit('update:modelValue', { ...config.value, [key]: value });
+function update(next) {
+    emit('update:modelValue', next);
 }
 
 const statusOptions = [
@@ -26,17 +29,6 @@ const statusOptions = [
     'closed',
 ];
 const priorityOptions = ['low', 'medium', 'high', 'urgent', 'critical'];
-const assignModes = [
-    { value: 'specific', label: 'Specific agent' },
-    { value: 'least_busy', label: 'Least busy agent' },
-    { value: 'round_robin', label: 'Round robin' },
-];
-const delayUnits = [
-    { value: 'minutes', label: 'Minutes' },
-    { value: 'hours', label: 'Hours' },
-    { value: 'days', label: 'Days' },
-];
-const webhookMethods = ['POST', 'PUT', 'PATCH'];
 
 const inputClass =
     'w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]';
@@ -47,38 +39,15 @@ const labelClass = 'block text-xs font-medium text-[var(--esc-panel-text-muted)]
 
 <template>
     <div class="space-y-3 pt-2">
-        <!-- Assign Agent -->
-        <template v-if="actionType === 'assign_agent'">
-            <div>
-                <label :class="labelClass">Assignment mode</label>
-                <select
-                    :class="selectClass"
-                    :value="config.mode || 'specific'"
-                    @change="update('mode', $event.target.value)"
-                >
-                    <option v-for="m in assignModes" :key="m.value" :value="m.value">{{ m.label }}</option>
-                </select>
-            </div>
-            <div v-if="(config.mode || 'specific') === 'specific'">
-                <label :class="labelClass">Agent</label>
-                <input
-                    :class="inputClass"
-                    :value="config.agent || ''"
-                    placeholder="Agent ID or email"
-                    @input="update('agent', $event.target.value)"
-                />
-            </div>
-        </template>
+        <p v-if="isStructured" class="text-xs text-[var(--esc-panel-text-muted)]">
+            This action was configured outside the builder. Editing it here replaces that configuration.
+        </p>
 
         <!-- Change Status -->
-        <template v-else-if="actionType === 'change_status'">
+        <template v-if="actionType === 'change_status'">
             <div>
                 <label :class="labelClass">New status</label>
-                <select
-                    :class="selectClass"
-                    :value="config.status || ''"
-                    @change="update('status', $event.target.value)"
-                >
+                <select :class="selectClass" :value="value" @change="update($event.target.value)">
                     <option value="">Select status...</option>
                     <option v-for="s in statusOptions" :key="s" :value="s">{{ s }}</option>
                 </select>
@@ -89,11 +58,7 @@ const labelClass = 'block text-xs font-medium text-[var(--esc-panel-text-muted)]
         <template v-else-if="actionType === 'change_priority'">
             <div>
                 <label :class="labelClass">New priority</label>
-                <select
-                    :class="selectClass"
-                    :value="config.priority || ''"
-                    @change="update('priority', $event.target.value)"
-                >
+                <select :class="selectClass" :value="value" @change="update($event.target.value)">
                     <option value="">Select priority...</option>
                     <option v-for="p in priorityOptions" :key="p" :value="p">{{ p }}</option>
                 </select>
@@ -106,182 +71,116 @@ const labelClass = 'block text-xs font-medium text-[var(--esc-panel-text-muted)]
                 <label :class="labelClass">Tag name</label>
                 <input
                     :class="inputClass"
-                    :value="config.tag || ''"
+                    :value="value"
                     placeholder="Enter tag name"
-                    @input="update('tag', $event.target.value)"
+                    @input="update($event.target.value)"
+                />
+            </div>
+        </template>
+
+        <!-- Set Department -->
+        <template v-else-if="actionType === 'set_department' || actionType === 'move_department'">
+            <div>
+                <label :class="labelClass">Department ID</label>
+                <input
+                    :class="inputClass"
+                    :value="value"
+                    placeholder="Department ID"
+                    @input="update($event.target.value)"
                 />
             </div>
         </template>
 
-        <!-- Move Department -->
-        <template v-else-if="actionType === 'move_department'">
+        <!-- Assign Agent -->
+        <template v-else-if="actionType === 'assign_agent'">
             <div>
-                <label :class="labelClass">Department</label>
+                <label :class="labelClass">Agent</label>
                 <input
                     :class="inputClass"
-                    :value="config.department || ''"
-                    placeholder="Department name or ID"
-                    @input="update('department', $event.target.value)"
+                    :value="value"
+                    placeholder="Agent user ID"
+                    @input="update($event.target.value)"
                 />
             </div>
         </template>
 
         <!-- Add Internal Note -->
-        <template v-else-if="actionType === 'add_note'">
+        <template v-else-if="actionType === 'add_note' || actionType === 'add_internal_note'">
             <div>
                 <label :class="labelClass">Note content</label>
                 <VariableTokenInput
-                    :model-value="config.body || ''"
+                    :model-value="value"
                     :multiline="true"
                     placeholder="Write the note..."
-                    @update:model-value="update('body', $event)"
+                    @update:model-value="update($event)"
                 />
             </div>
         </template>
 
-        <!-- Send Email -->
-        <template v-else-if="actionType === 'send_email'">
-            <div>
-                <label :class="labelClass">To</label>
-                <VariableTokenInput
-                    :model-value="config.to || ''"
-                    placeholder="Recipient email or variable"
-                    @update:model-value="update('to', $event)"
-                />
-            </div>
-            <div>
-                <label :class="labelClass">Subject</label>
-                <VariableTokenInput
-                    :model-value="config.subject || ''"
-                    placeholder="Email subject"
-                    @update:model-value="update('subject', $event)"
-                />
-            </div>
+        <!-- Insert Canned Reply -->
+        <template v-else-if="actionType === 'insert_canned_reply'">
             <div>
-                <label :class="labelClass">Body</label>
+                <label :class="labelClass">Reply</label>
                 <VariableTokenInput
-                    :model-value="config.body || ''"
+                    :model-value="value"
                     :multiline="true"
-                    placeholder="Email body..."
-                    @update:model-value="update('body', $event)"
+                    placeholder="The reply to post on the ticket..."
+                    @update:model-value="update($event)"
                 />
             </div>
         </template>
 
-        <!-- Send Webhook -->
-        <template v-else-if="actionType === 'send_webhook'">
-            <div>
-                <label :class="labelClass">URL</label>
-                <input
-                    :class="inputClass"
-                    :value="config.url || ''"
-                    placeholder="https://..."
-                    @input="update('url', $event.target.value)"
-                />
-            </div>
-            <div>
-                <label :class="labelClass">Method</label>
-                <select
-                    :class="selectClass"
-                    :value="config.method || 'POST'"
-                    @change="update('method', $event.target.value)"
-                >
-                    <option v-for="m in webhookMethods" :key="m" :value="m">{{ m }}</option>
-                </select>
-            </div>
-            <div>
-                <label :class="labelClass">Headers (JSON)</label>
-                <input
-                    :class="inputClass"
-                    :value="config.headers || ''"
-                    :placeholder="headersPlaceholder"
-                    @input="update('headers', $event.target.value)"
-                />
-            </div>
+        <!-- Add Follower -->
+        <template v-else-if="actionType === 'add_follower'">
             <div>
-                <label :class="labelClass">Body template</label>
-                <VariableTokenInput
-                    :model-value="config.body || ''"
-                    :multiline="true"
-                    placeholder="JSON body with variables..."
-                    @update:model-value="update('body', $event)"
-                />
+                <label :class="labelClass">Follower</label>
+                <input :class="inputClass" :value="value" placeholder="User ID" @input="update($event.target.value)" />
             </div>
         </template>
 
         <!-- Delay -->
         <template v-else-if="actionType === 'delay'">
-            <div class="flex items-center gap-3">
-                <div class="flex-1">
-                    <label :class="labelClass">Duration</label>
-                    <input
-                        type="number"
-                        min="1"
-                        :class="inputClass"
-                        :value="config.duration || 1"
-                        @input="update('duration', parseInt($event.target.value) || 1)"
-                    />
-                </div>
-                <div class="flex-1">
-                    <label :class="labelClass">Unit</label>
-                    <select
-                        :class="selectClass + ' w-full'"
-                        :value="config.unit || 'hours'"
-                        @change="update('unit', $event.target.value)"
-                    >
-                        <option v-for="u in delayUnits" :key="u.value" :value="u.value">{{ u.label }}</option>
-                    </select>
-                </div>
+            <div>
+                <label :class="labelClass">Wait (minutes)</label>
+                <input
+                    type="number"
+                    min="1"
+                    :class="inputClass"
+                    :value="value || 1"
+                    @input="update(parseInt($event.target.value) || 1)"
+                />
             </div>
             <div class="rounded-lg bg-orange-500/10 px-3 py-2 text-xs text-orange-400">
-                Wait {{ config.duration || 1 }} {{ config.unit || 'hours' }}, then continue...
+                Wait {{ value || 1 }} minutes, then continue...
             </div>
         </template>
 
-        <!-- Apply Macro -->
-        <template v-else-if="actionType === 'apply_macro'">
+        <!-- Send Webhook -->
+        <template v-else-if="actionType === 'send_webhook'">
             <div>
-                <label :class="labelClass">Macro</label>
+                <label :class="labelClass">URL</label>
                 <input
                     :class="inputClass"
-                    :value="config.macro || ''"
-                    placeholder="Macro name or ID"
-                    @input="update('macro', $event.target.value)"
+                    :value="value"
+                    placeholder="https://..."
+                    @input="update($event.target.value)"
                 />
             </div>
         </template>
 
-        <!-- Snooze -->
-        <template v-else-if="actionType === 'snooze'">
-            <div class="flex items-center gap-3">
-                <div class="flex-1">
-                    <label :class="labelClass">Duration</label>
-                    <input
-                        type="number"
-                        min="1"
-                        :class="inputClass"
-                        :value="config.duration || 1"
-                        @input="update('duration', parseInt($event.target.value) || 1)"
-                    />
-                </div>
-                <div class="flex-1">
-                    <label :class="labelClass">Unit</label>
-                    <select
-                        :class="selectClass + ' w-full'"
-                        :value="config.unit || 'hours'"
-                        @change="update('unit', $event.target.value)"
-                    >
-                        <option v-for="u in delayUnits" :key="u.value" :value="u.value">{{ u.label }}</option>
-                    </select>
-                </div>
-            </div>
-        </template>
-
-        <!-- Close Ticket (no config needed) -->
+        <!-- Close Ticket (no value needed) -->
         <template v-else-if="actionType === 'close_ticket'">
             <p class="text-xs text-[var(--esc-panel-text-muted)]">
                 This action closes the ticket immediately. No configuration needed.
             </p>
         </template>
+
+        <!-- Anything else the backend lists -->
+        <template v-else>
+            <div>
+                <label :class="labelClass">Value</label>
+                <input :class="inputClass" :value="value" @input="update($event.target.value)" />
+            </div>
+        </template>
     </div>
 </template>

package/src/components/WorkflowActionList.vue

@@ -1,93 +1,72 @@
 <script setup>
 import { ref, computed } from 'vue';
 import WorkflowActionConfig from './WorkflowActionConfig.vue';
+import { CORE_ACTION_TYPES, normalizeOptions } from '../utils/workflowContract.js';
 
 const props = defineProps({
+    // `[{type, value}]` (workflow-admin-contract.md).
     modelValue: { type: Array, default: () => [] },
+    // What the backend executes. Absent means the core catalog every backend
+    // handles; anything else the backend lists is offered as well.
+    actionTypes: { type: [Array, Object], default: null },
 });
 
 const emit = defineEmits(['update:modelValue']);
 
-const actionTypes = [
-    {
-        value: 'assign_agent',
-        label: 'Assign Agent',
-        icon: 'M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z',
-        color: 'text-blue-400 bg-blue-500/10',
-    },
-    {
-        value: 'change_status',
-        label: 'Change Status',
+const PERSON_ICON =
+    'M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z';
+const TAG_ICON =
+    'M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z';
+const DEPARTMENT_ICON =
+    'M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 01-1.125-1.125v-3.75z';
+const NOTE_ICON =
+    'M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931z';
+const MAIL_ICON =
+    'M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75';
+const BOLT_ICON = 'M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z';
+
+const ACTION_STYLES = {
+    assign_agent: { icon: PERSON_ICON, color: 'text-blue-400 bg-blue-500/10' },
+    change_status: {
         icon: 'M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
         color: 'text-emerald-400 bg-emerald-500/10',
     },
-    {
-        value: 'change_priority',
-        label: 'Change Priority',
+    change_priority: {
         icon: 'M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12',
         color: 'text-red-400 bg-red-500/10',
     },
-    {
-        value: 'add_tag',
-        label: 'Add Tag',
-        icon: 'M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z',
-        color: 'text-violet-400 bg-violet-500/10',
-    },
-    {
-        value: 'remove_tag',
-        label: 'Remove Tag',
-        icon: 'M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z',
-        color: 'text-pink-400 bg-pink-500/10',
-    },
-    {
-        value: 'move_department',
-        label: 'Move Department',
-        icon: 'M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 01-1.125-1.125v-3.75z',
-        color: 'text-cyan-400 bg-cyan-500/10',
-    },
-    {
-        value: 'add_note',
-        label: 'Add Internal Note',
-        icon: 'M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931z',
-        color: 'text-amber-400 bg-amber-500/10',
-    },
-    {
-        value: 'send_email',
-        label: 'Send Email Notification',
-        icon: 'M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75',
-        color: 'text-sky-400 bg-sky-500/10',
-    },
-    {
-        value: 'send_webhook',
-        label: 'Send Webhook',
+    add_tag: { icon: TAG_ICON, color: 'text-violet-400 bg-violet-500/10' },
+    remove_tag: { icon: TAG_ICON, color: 'text-pink-400 bg-pink-500/10' },
+    set_department: { icon: DEPARTMENT_ICON, color: 'text-cyan-400 bg-cyan-500/10' },
+    move_department: { icon: DEPARTMENT_ICON, color: 'text-cyan-400 bg-cyan-500/10' },
+    add_note: { icon: NOTE_ICON, color: 'text-amber-400 bg-amber-500/10' },
+    add_internal_note: { icon: NOTE_ICON, color: 'text-amber-400 bg-amber-500/10' },
+    insert_canned_reply: { icon: MAIL_ICON, color: 'text-sky-400 bg-sky-500/10' },
+    send_notification: { icon: MAIL_ICON, color: 'text-sky-400 bg-sky-500/10' },
+    add_follower: { icon: PERSON_ICON, color: 'text-indigo-400 bg-indigo-500/10' },
+    send_webhook: {
         icon: 'M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244',
         color: 'text-indigo-400 bg-indigo-500/10',
     },
-    {
-        value: 'delay',
-        label: 'Delay',
-        icon: 'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z',
-        color: 'text-orange-400 bg-orange-500/10',
-    },
-    {
-        value: 'apply_macro',
-        label: 'Apply Macro',
-        icon: 'M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z',
-        color: 'text-yellow-400 bg-yellow-500/10',
-    },
-    {
-        value: 'close_ticket',
-        label: 'Close Ticket',
+    delay: { icon: 'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z', color: 'text-orange-400 bg-orange-500/10' },
+    apply_macro: { icon: BOLT_ICON, color: 'text-yellow-400 bg-yellow-500/10' },
+    close_ticket: {
         icon: 'M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
         color: 'text-gray-400 bg-gray-500/10',
     },
-    {
-        value: 'snooze',
-        label: 'Snooze',
+    snooze_ticket: {
         icon: 'M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0',
         color: 'text-teal-400 bg-teal-500/10',
     },
-];
+};
+
+const DEFAULT_STYLE = { icon: BOLT_ICON, color: 'text-gray-400 bg-gray-500/10' };
+
+function withStyle(option) {
+    return { ...option, ...(ACTION_STYLES[option.value] ?? DEFAULT_STYLE) };
+}
+
+const availableTypes = computed(() => normalizeOptions(props.actionTypes, CORE_ACTION_TYPES).map(withStyle));
 
 const showTypeSelector = ref(false);
 const expandedIndex = ref(null);
@@ -95,12 +74,16 @@ const dragIndex = ref(null);
 
 const actions = computed(() => props.modelValue);
 
+// A stored action may have a type the backend no longer lists; it still gets a
+// label, derived from its name.
 function getActionType(value) {
-    return actionTypes.find((t) => t.value === value) || actionTypes[0];
+    const listed = availableTypes.value.find((t) => t.value === value);
+
+    return listed ?? withStyle(normalizeOptions([value], CORE_ACTION_TYPES)[0]);
 }
 
 function addAction(typeValue) {
-    const newActions = [...actions.value, { type: typeValue, config: {} }];
+    const newActions = [...actions.value, { type: typeValue, value: '' }];
     emit('update:modelValue', newActions);
     showTypeSelector.value = false;
     expandedIndex.value = newActions.length - 1;
@@ -112,8 +95,8 @@ function removeAction(index) {
     if (expandedIndex.value === index) expandedIndex.value = null;
 }
 
-function updateConfig(index, config) {
-    const newActions = actions.value.map((a, i) => (i === index ? { ...a, config } : a));
+function updateValue(index, value) {
+    const newActions = actions.value.map((a, i) => (i === index ? { ...a, value } : a));
     emit('update:modelValue', newActions);
 }
 
@@ -122,40 +105,16 @@ function toggleExpand(index) {
 }
 
 function getActionSummary(action) {
-    const c = action.config || {};
-    switch (action.type) {
-        case 'assign_agent':
-            return c.mode === 'round_robin'
-                ? 'Round robin'
-                : c.mode === 'least_busy'
-                  ? 'Least busy'
-                  : c.agent || 'Not configured';
-        case 'change_status':
-            return c.status || 'Not configured';
-        case 'change_priority':
-            return c.priority || 'Not configured';
-        case 'add_tag':
-        case 'remove_tag':
-            return c.tag || 'Not configured';
-        case 'move_department':
-            return c.department || 'Not configured';
-        case 'add_note':
-            return c.body ? c.body.substring(0, 40) + (c.body.length > 40 ? '...' : '') : 'Not configured';
-        case 'send_email':
-            return c.to || 'Not configured';
-        case 'send_webhook':
-            return c.url || 'Not configured';
-        case 'delay':
-            return `Wait ${c.duration || 1} ${c.unit || 'hours'}`;
-        case 'apply_macro':
-            return c.macro || 'Not configured';
-        case 'close_ticket':
-            return 'Close immediately';
-        case 'snooze':
-            return `${c.duration || 1} ${c.unit || 'hours'}`;
-        default:
-            return 'Not configured';
-    }
+    const value = action.value;
+
+    if (action.type === 'delay') return `Wait ${value || 1} minutes`;
+    if (action.type === 'close_ticket') return 'Close immediately';
+    if (value === null || value === undefined || value === '') return 'Not configured';
+    if (typeof value === 'object') return 'Configured outside the builder';
+
+    const text = String(value);
+
+    return text.length > 40 ? `${text.substring(0, 40)}...` : text;
 }
 
 // Drag-and-drop reordering
@@ -294,8 +253,8 @@ function onDragEnd() {
                 <div v-if="expandedIndex === i" class="border-t border-[var(--esc-panel-border)] px-4 pb-4">
                     <WorkflowActionConfig
                         :action-type="action.type"
-                        :model-value="action.config"
-                        @update:model-value="updateConfig(i, $event)"
+                        :model-value="action.value"
+                        @update:model-value="updateValue(i, $event)"
                     />
                 </div>
             </div>
@@ -325,7 +284,7 @@ function onDragEnd() {
                 class="absolute left-0 z-20 mt-2 w-full rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] py-2 shadow-2xl"
             >
                 <button
-                    v-for="at in actionTypes"
+                    v-for="at in availableTypes"
                     :key="at.value"
                     type="button"
                     class="flex w-full items-center gap-3 px-4 py-2 text-left transition-colors hover:bg-[var(--esc-panel-hover)]"

package/src/components/WorkflowConditionBuilder.vue

@@ -1,15 +1,21 @@
 <script setup>
 import { computed } from 'vue';
+import { DEFAULT_OPERATORS, humanize, normalizeOptions } from '../utils/workflowContract.js';
 
 const props = defineProps({
+    // The editor's `{match, conditions}`; the builder sends it as `{all}` or
+    // `{any}` (workflow-admin-contract.md).
     modelValue: {
         type: Object,
         default: () => ({ match: 'all', conditions: [] }),
     },
+    // The operators the backend evaluates. Absent means the contract's twelve.
+    operators: { type: [Array, Object], default: null },
 });
 
 const emit = defineEmits(['update:modelValue']);
 
+// The field names every backend resolves (workflow-admin-contract.md#conditions).
 const fields = [
     {
         value: 'status',
@@ -28,43 +34,48 @@ const fields = [
     },
     { value: 'priority', label: 'Priority', type: 'enum', options: ['low', 'medium', 'high', 'urgent', 'critical'] },
     {
-        value: 'type',
+        value: 'ticket_type',
         label: 'Type',
         type: 'enum',
         options: ['question', 'problem', 'incident', 'task', 'feature_request'],
     },
     { value: 'channel', label: 'Channel', type: 'enum', options: ['web', 'email', 'chat', 'api', 'phone'] },
-    { value: 'tags', label: 'Tags', type: 'text' },
-    { value: 'department', label: 'Department', type: 'text' },
-    { value: 'assigned_agent', label: 'Assigned Agent', type: 'text' },
     { value: 'subject', label: 'Subject', type: 'text' },
+    { value: 'description', label: 'Description', type: 'text' },
+    { value: 'tags', label: 'Tags', type: 'text' },
+    { value: 'department_id', label: 'Department', type: 'text' },
+    { value: 'assigned_to', label: 'Assigned Agent', type: 'text' },
     { value: 'hours_since_created', label: 'Hours Since Created', type: 'number' },
     { value: 'hours_since_updated', label: 'Hours Since Updated', type: 'number' },
-    { value: 'reply_count', label: 'Reply Count', type: 'number' },
-    { value: 'custom_field', label: 'Custom Field', type: 'text' },
 ];
 
+const OPERATOR_LABELS = {
+    equals: 'equals',
+    not_equals: 'not equals',
+    contains: 'contains',
+    not_contains: 'does not contain',
+    starts_with: 'starts with',
+    ends_with: 'ends with',
+    greater_than: 'greater than',
+    less_than: 'less than',
+    greater_or_equal: 'at least',
+    less_or_equal: 'at most',
+    is_empty: 'is empty',
+    is_not_empty: 'is not empty',
+};
+
 const operatorsByType = {
-    enum: [
-        { value: 'equals', label: 'equals' },
-        { value: 'not_equals', label: 'not equals' },
-        { value: 'in', label: 'in' },
-    ],
-    text: [
-        { value: 'equals', label: 'equals' },
-        { value: 'not_equals', label: 'not equals' },
-        { value: 'contains', label: 'contains' },
-        { value: 'is_empty', label: 'is empty' },
-        { value: 'matches', label: 'matches' },
-    ],
-    number: [
-        { value: 'equals', label: 'equals' },
-        { value: 'not_equals', label: 'not equals' },
-        { value: 'greater_than', label: 'greater than' },
-        { value: 'less_than', label: 'less than' },
-    ],
+    enum: ['equals', 'not_equals', 'is_empty', 'is_not_empty'],
+    text: ['equals', 'not_equals', 'contains', 'not_contains', 'starts_with', 'ends_with', 'is_empty', 'is_not_empty'],
+    number: ['equals', 'not_equals', 'greater_than', 'less_than', 'greater_or_equal', 'less_or_equal'],
 };
 
+const VALUELESS_OPERATORS = ['is_empty', 'is_not_empty'];
+
+const backendOperators = computed(() =>
+    props.operators ? normalizeOptions(props.operators, []).map((o) => o.value) : null,
+);
+
 const data = computed(() => props.modelValue);
 
 function update(patch) {
@@ -94,14 +105,28 @@ function getFieldConfig(fieldValue) {
     return fields.find((f) => f.value === fieldValue) || fields[0];
 }
 
+function operatorLabel(operator) {
+    return OPERATOR_LABELS[operator] ?? humanize(operator).toLowerCase();
+}
+
+// The operators that make sense for the field. When the backend lists its own,
+// only those are offered: the canonical ones that fit the field, plus any
+// extras it evaluates.
 function getOperators(fieldValue) {
-    const field = getFieldConfig(fieldValue);
-    return operatorsByType[field.type] || operatorsByType.text;
+    const forType = operatorsByType[getFieldConfig(fieldValue).type] || operatorsByType.text;
+    const listed = backendOperators.value;
+    const values = listed ? listed.filter((op) => forType.includes(op) || !DEFAULT_OPERATORS.includes(op)) : forType;
+
+    return values.map((value) => ({ value, label: operatorLabel(value) }));
+}
+
+function valueless(operator) {
+    return VALUELESS_OPERATORS.includes(operator);
 }
 
 function onFieldChange(index, newField) {
     const operators = getOperators(newField);
-    updateCondition(index, { field: newField, operator: operators[0].value, value: '' });
+    updateCondition(index, { field: newField, operator: operators[0]?.value ?? 'equals', value: '' });
 }
 
 const previewText = computed(() => {
@@ -110,11 +135,9 @@ const previewText = computed(() => {
     return data.value.conditions
         .map((c) => {
             const field = getFieldConfig(c.field);
-            const opLabel =
-                (operatorsByType[field.type] || []).find((o) => o.value === c.operator)?.label || c.operator;
-            if (c.operator === 'is_empty') return `${field.label} is empty`;
+            if (valueless(c.operator)) return `${field.label} ${operatorLabel(c.operator)}`;
             const val = Array.isArray(c.value) ? `[${c.value.join(', ')}]` : c.value;
-            return `${field.label} ${opLabel} ${val}`;
+            return `${field.label} ${operatorLabel(c.operator)} ${val}`;
         })
         .join(joiner);
 });
@@ -179,10 +202,10 @@ const previewText = computed(() => {
                 </select>
 
                 <!-- Value (contextual) -->
-                <template v-if="condition.operator !== 'is_empty'">
+                <template v-if="!valueless(condition.operator)">
                     <!-- Enum select for enum fields -->
                     <select
-                        v-if="getFieldConfig(condition.field).type === 'enum' && condition.operator !== 'in'"
+                        v-if="getFieldConfig(condition.field).type === 'enum'"
                         :value="condition.value"
                         class="rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-2 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none"
                         @change="updateCondition(i, { value: $event.target.value })"
@@ -193,21 +216,6 @@ const previewText = computed(() => {
                         </option>
                     </select>
 
-                    <!-- Multi-select for "in" operator on enum fields -->
-                    <select
-                        v-else-if="getFieldConfig(condition.field).type === 'enum' && condition.operator === 'in'"
-                        :value="condition.value"
-                        multiple
-                        class="min-h-[60px] rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-2 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none"
-                        @change="
-                            updateCondition(i, { value: Array.from($event.target.selectedOptions, (o) => o.value) })
-                        "
-                    >
-                        <option v-for="opt in getFieldConfig(condition.field).options" :key="opt" :value="opt">
-                            {{ opt }}
-                        </option>
-                    </select>
-
                     <!-- Number input -->
                     <input
                         v-else-if="getFieldConfig(condition.field).type === 'number'"

package/src/components/WorkflowTriggerSelector.vue

@@ -1,74 +1,70 @@
 <script setup>
 import { computed } from 'vue';
+import { DEFAULT_TRIGGER_EVENTS, normalizeOptions } from '../utils/workflowContract.js';
 
 const props = defineProps({
     modelValue: { type: String, default: '' },
+    // The events the backend fires, in any shape normalizeOptions accepts.
+    // Absent means the contract's five canonical triggers.
+    options: { type: [Array, Object], default: null },
 });
 
 const emit = defineEmits(['update:modelValue']);
 
-const triggers = [
-    {
-        value: 'ticket_created',
-        label: 'Ticket Created',
+const REPLY_ICON =
+    'M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z';
+const DEFAULT_ICON = 'M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z';
+
+// Descriptions and icons for the events backends are known to fire. An event
+// not listed here still renders, with its derived label and a generic icon.
+const DETAILS = {
+    'ticket.created': {
         description: 'When a new ticket is submitted',
         icon: 'M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z',
     },
-    {
-        value: 'ticket_updated',
-        label: 'Ticket Updated',
+    'ticket.updated': {
         description: 'When any ticket field is modified',
         icon: 'M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182',
     },
-    {
-        value: 'reply_added',
-        label: 'Reply Added',
-        description: 'When a reply is posted on a ticket',
-        icon: 'M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z',
+    'ticket.assigned': {
+        description: 'When a ticket is assigned to an agent',
+        icon: 'M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z',
     },
-    {
-        value: 'status_changed',
-        label: 'Status Changed',
+    'ticket.status_changed': {
         description: 'When the ticket status is updated',
         icon: 'M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
     },
-    {
-        value: 'ticket_assigned',
-        label: 'Ticket Assigned',
-        description: 'When a ticket is assigned to an agent',
-        icon: 'M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z',
-    },
-    {
-        value: 'ticket_escalated',
-        label: 'Ticket Escalated',
+    'reply.created': { description: 'When a reply is posted on a ticket', icon: REPLY_ICON },
+    'ticket.replied': { description: 'When a reply is posted on a ticket', icon: REPLY_ICON },
+    'ticket.escalated': {
         description: 'When a ticket is escalated',
         icon: 'M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12',
     },
-    {
-        value: 'sla_breached',
-        label: 'SLA Breached',
+    'sla.breached': {
         description: 'When an SLA target is breached',
         icon: 'M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z',
     },
-    {
-        value: 'sla_warning',
-        label: 'SLA Warning',
+    'sla.warning': {
         description: 'When an SLA target is approaching',
         icon: 'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z',
     },
-    {
-        value: 'chat_started',
-        label: 'Chat Started',
+    'chat.started': {
         description: 'When a live chat session begins',
         icon: 'M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155',
     },
-    {
-        value: 'chat_ended',
-        label: 'Chat Ended',
+    'chat.ended': {
         description: 'When a live chat session ends',
         icon: 'M15 11.25l-3-3m0 0l-3 3m3-3v7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
     },
-];
+};
+
+const triggers = computed(() =>
+    normalizeOptions(props.options, DEFAULT_TRIGGER_EVENTS).map((option) => ({
+        ...option,
+        description: DETAILS[option.value]?.description ?? '',
+        icon: DETAILS[option.value]?.icon ?? DEFAULT_ICON,
+    })),
+);
 
 const selected = computed(() => props.modelValue);
 
@@ -109,7 +105,7 @@ function select(value) {
             >
                 {{ trigger.label }}
             </span>
-            <span class="mt-1 text-[10px] leading-tight text-[var(--esc-panel-text-muted)]">
+            <span v-if="trigger.description" class="mt-1 text-[10px] leading-tight text-[var(--esc-panel-text-muted)]">
                 {{ trigger.description }}
             </span>
             <div

package/src/pages/Admin/Workflows/Builder.vue

@@ -5,18 +5,26 @@ import WorkflowConditionBuilder from '../../../components/WorkflowConditionBuild
 import WorkflowActionList from '../../../components/WorkflowActionList.vue';
 import { useForm } from '@inertiajs/vue3';
 import { ref, computed } from 'vue';
+import { toActionState, toConditionState, toWirePayload } from '../../../utils/workflowContract.js';
 
 const props = defineProps({
     workflow: { type: Object, default: null },
+    // What the backend fires, executes and evaluates. Any shape
+    // normalizeOptions accepts; absent means the contract's defaults.
+    triggerEvents: { type: [Array, Object], default: null },
+    actionTypes: { type: [Array, Object], default: null },
+    operators: { type: [Array, Object], default: null },
 });
 
+// The form holds the editor's state; submit() sends it in the shape every
+// backend reads (escalated-developer-context domain-model/workflow-admin-contract.md).
 const form = useForm({
     name: props.workflow?.name || '',
     description: props.workflow?.description || '',
-    trigger: props.workflow?.trigger || '',
-    conditions: props.workflow?.conditions || { match: 'all', conditions: [] },
-    actions: props.workflow?.actions || [],
-    active: props.workflow?.active ?? true,
+    trigger_event: props.workflow?.trigger_event || props.workflow?.trigger || '',
+    conditions: toConditionState(props.workflow?.conditions),
+    actions: toActionState(props.workflow?.actions),
+    is_active: props.workflow?.is_active ?? props.workflow?.active ?? true,
 });
 
 const expandedStep = ref(props.workflow ? null : 1);
@@ -26,6 +34,8 @@ function toggleStep(step) {
 }
 
 function submit() {
+    form.transform(toWirePayload);
+
     if (props.workflow) {
         form.put(route('escalated.admin.workflows.update', props.workflow.id));
     } else {
@@ -34,7 +44,7 @@ function submit() {
 }
 
 const isValid = computed(() => {
-    return form.name && form.trigger && form.actions.length > 0;
+    return form.name && form.trigger_event && form.actions.length > 0;
 });
 
 const stepBorderColors = {
@@ -64,7 +74,7 @@ const stepDescriptions = {
 function stepHasData(step) {
     switch (step) {
         case 1:
-            return !!form.trigger;
+            return !!form.trigger_event;
         case 2:
             return form.conditions?.conditions?.length > 0;
         case 3:
@@ -108,7 +118,7 @@ function stepHasData(step) {
                     <div>
                         <label class="flex items-center gap-2 text-sm text-[var(--esc-panel-text-secondary)]">
                             <input
-                                v-model="form.active"
+                                v-model="form.is_active"
                                 type="checkbox"
                                 class="rounded border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] text-cyan-500 focus:ring-cyan-500/20"
                             />
@@ -175,13 +185,17 @@ function stepHasData(step) {
                     <!-- Step content -->
                     <div v-if="expandedStep === step" class="border-t border-[var(--esc-panel-border)] px-6 py-4">
                         <!-- Trigger selector -->
-                        <WorkflowTriggerSelector v-if="step === 1" v-model="form.trigger" />
+                        <WorkflowTriggerSelector
+                            v-if="step === 1"
+                            v-model="form.trigger_event"
+                            :options="triggerEvents"
+                        />
 
                         <!-- Condition builder -->
-                        <WorkflowConditionBuilder v-if="step === 2" v-model="form.conditions" />
+                        <WorkflowConditionBuilder v-if="step === 2" v-model="form.conditions" :operators="operators" />
 
                         <!-- Action list -->
-                        <WorkflowActionList v-if="step === 3" v-model="form.actions" />
+                        <WorkflowActionList v-if="step === 3" v-model="form.actions" :action-types="actionTypes" />
                     </div>
                 </div>
             </div>

package/src/pages/Admin/Workflows/Form.vue

@@ -4,21 +4,33 @@ import Builder from './Builder.vue';
 /**
  * The workflow editor, under the name the backends render.
  *
- * Builder.vue is the editor itself and takes exactly these props. Several
- * backends render `Escalated/Admin/Workflows/Form` for both create and edit,
- * and a page name with no component behind it is not an error in Inertia --
- * the panel simply comes up blank. This is that name.
+ * Builder.vue is the editor itself. Several backends render
+ * `Escalated/Admin/Workflows/Form` for both create and edit, and a page name
+ * with no component behind it is not an error in Inertia -- the panel simply
+ * comes up blank. This is that name.
  */
 defineProps({
     workflow: { type: Object, default: null },
 
-    // Passed by the backends alongside the workflow. Builder derives its own
-    // trigger list, so this is accepted rather than forwarded; declaring it
-    // keeps it out of the fallthrough attributes.
-    triggerEvents: { type: [Array, Object], default: null },
+    // What the backend fires, evaluates and executes, passed alongside the
+    // workflow (escalated-developer-context domain-model/workflow-admin-contract.md).
+    // The builder offers exactly these, so they are handed on.
+    //
+    // Declared in snake_case because that is what arrives. Vue folds
+    // kebab-case into camelCase and nothing else, so a `triggerEvents`
+    // declaration never matched the `trigger_events` the backends send -- it
+    // landed on Builder's root element as an attribute.
+    trigger_events: { type: [Array, Object], default: null },
+    operators: { type: [Array, Object], default: null },
+    action_types: { type: [Array, Object], default: null },
 });
 </script>
 
 <template>
-    <Builder :workflow="workflow" />
+    <Builder
+        :workflow="workflow"
+        :trigger-events="trigger_events"
+        :action-types="action_types"
+        :operators="operators"
+    />
 </template>

package/src/pages/Admin/Workflows/Index.vue

@@ -2,6 +2,7 @@
 import EscalatedLayout from '../../../components/EscalatedLayout.vue';
 import { Link, router } from '@inertiajs/vue3';
 import { ref } from 'vue';
+import { humanize } from '../../../utils/workflowContract.js';
 
 defineProps({
     workflows: { type: Array, default: () => [] },
@@ -9,6 +10,16 @@ defineProps({
 
 const dragIndex = ref(null);
 
+// Backends send `trigger_event` and `is_active` (workflow-admin-contract.md).
+// `trigger` and `active` are read too, for anything still sending the aliases.
+function triggerOf(workflow) {
+    return workflow.trigger_event ?? workflow.trigger ?? '';
+}
+
+function isActive(workflow) {
+    return workflow.is_active ?? workflow.active ?? false;
+}
+
 function destroy(id) {
     if (confirm('Delete this workflow? This cannot be undone.')) {
         router.delete(route('escalated.admin.workflows.destroy', id));
@@ -16,9 +27,7 @@ function destroy(id) {
 }
 
 function toggleActive(workflow) {
-    router.put(route('escalated.admin.workflows.toggle', workflow.id), {
-        active: !workflow.active,
-    });
+    router.post(route('escalated.admin.workflows.toggle', workflow.id));
 }
 
 function onDragStart(index) {
@@ -35,7 +44,7 @@ function onDrop(event, workflows, targetIndex) {
     const ids = workflows.map((w) => w.id);
     const [moved] = ids.splice(dragIndex.value, 1);
     ids.splice(targetIndex, 0, moved);
-    router.post(route('escalated.admin.workflows.reorder'), { ids });
+    router.post(route('escalated.admin.workflows.reorder'), { workflow_ids: ids });
     dragIndex.value = null;
 }
 
@@ -45,23 +54,20 @@ function onDragEnd() {
 
 function triggerBadgeClass(trigger) {
     const classes = {
-        ticket_created: 'bg-blue-500/10 text-blue-400',
-        ticket_updated: 'bg-cyan-500/10 text-cyan-400',
-        reply_added: 'bg-emerald-500/10 text-emerald-400',
-        status_changed: 'bg-violet-500/10 text-violet-400',
-        ticket_assigned: 'bg-indigo-500/10 text-indigo-400',
-        ticket_escalated: 'bg-red-500/10 text-red-400',
-        sla_breached: 'bg-rose-500/10 text-rose-400',
-        sla_warning: 'bg-amber-500/10 text-amber-400',
-        chat_started: 'bg-teal-500/10 text-teal-400',
-        chat_ended: 'bg-gray-500/10 text-gray-400',
+        'ticket.created': 'bg-blue-500/10 text-blue-400',
+        'ticket.updated': 'bg-cyan-500/10 text-cyan-400',
+        'reply.created': 'bg-emerald-500/10 text-emerald-400',
+        'ticket.replied': 'bg-emerald-500/10 text-emerald-400',
+        'ticket.status_changed': 'bg-violet-500/10 text-violet-400',
+        'ticket.assigned': 'bg-indigo-500/10 text-indigo-400',
+        'ticket.escalated': 'bg-red-500/10 text-red-400',
+        'sla.breached': 'bg-rose-500/10 text-rose-400',
+        'sla.warning': 'bg-amber-500/10 text-amber-400',
+        'chat.started': 'bg-teal-500/10 text-teal-400',
+        'chat.ended': 'bg-gray-500/10 text-gray-400',
     };
     return classes[trigger] || 'bg-gray-500/10 text-gray-400';
 }
-
-function triggerLabel(trigger) {
-    return (trigger || '').replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
-}
 </script>
 
 <template>
@@ -192,21 +198,21 @@ function triggerLabel(trigger) {
                         <td class="px-4 py-3">
                             <span
                                 class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium"
-                                :class="triggerBadgeClass(workflow.trigger)"
+                                :class="triggerBadgeClass(triggerOf(workflow))"
                             >
-                                {{ triggerLabel(workflow.trigger) }}
+                                {{ humanize(triggerOf(workflow)) }}
                             </span>
                         </td>
                         <td class="px-4 py-3">
                             <button
                                 type="button"
                                 class="relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none"
-                                :class="workflow.active ? 'bg-emerald-500' : 'bg-[var(--esc-panel-border)]'"
+                                :class="isActive(workflow) ? 'bg-emerald-500' : 'bg-[var(--esc-panel-border)]'"
                                 @click="toggleActive(workflow)"
                             >
                                 <span
                                     class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
-                                    :class="workflow.active ? 'translate-x-4' : 'translate-x-0'"
+                                    :class="isActive(workflow) ? 'translate-x-4' : 'translate-x-0'"
                                 />
                             </button>
                         </td>

package/src/utils/workflowContract.js

@@ -0,0 +1,143 @@
+/**
+ * The Workflows admin wire format, as fixed in escalated-developer-context
+ * `domain-model/workflow-admin-contract.md`.
+ *
+ * Every backend engine reads `trigger_event` with dotted names, conditions as
+ * `{all: [...]}` or `{any: [...]}`, and actions as `{type, value}`. The builder
+ * used to send `trigger: 'ticket_created'`, `{match, conditions}` and
+ * `{type, config}`, none of which any backend reads. The older shapes are still
+ * read here, so a workflow saved that way, or stored by Laravel as
+ * `{match, rules}`, opens in the builder and is saved back in the contract shape.
+ */
+
+export const DEFAULT_TRIGGER_EVENTS = [
+    { value: 'ticket.created', label: 'Ticket Created' },
+    { value: 'ticket.updated', label: 'Ticket Updated' },
+    { value: 'ticket.assigned', label: 'Ticket Assigned' },
+    { value: 'ticket.status_changed', label: 'Status Changed' },
+    { value: 'reply.created', label: 'Reply Added' },
+];
+
+export const CORE_ACTION_TYPES = [
+    { value: 'change_status', label: 'Change Status' },
+    { value: 'change_priority', label: 'Change Priority' },
+    { value: 'add_tag', label: 'Add Tag' },
+    { value: 'remove_tag', label: 'Remove Tag' },
+    { value: 'set_department', label: 'Set Department' },
+    { value: 'assign_agent', label: 'Assign Agent' },
+    { value: 'add_note', label: 'Add Internal Note' },
+    { value: 'insert_canned_reply', label: 'Insert Canned Reply' },
+];
+
+export const DEFAULT_OPERATORS = [
+    'equals',
+    'not_equals',
+    'contains',
+    'not_contains',
+    'starts_with',
+    'ends_with',
+    'greater_than',
+    'less_than',
+    'greater_or_equal',
+    'less_or_equal',
+    'is_empty',
+    'is_not_empty',
+];
+
+const ACRONYMS = { sla: 'SLA' };
+
+/** `ticket.status_changed` -> `Ticket Status Changed`. */
+export function humanize(value) {
+    return String(value ?? '')
+        .split(/[._\s]+/)
+        .filter(Boolean)
+        .map((word) => ACRONYMS[word.toLowerCase()] ?? word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+}
+
+/**
+ * A backend option list in any of the shapes the contract allows, as
+ * `[{value, label}]`: a list of `{value, label}`, a list of plain values, or a
+ * value -> label map. An absent or empty list means `fallback`.
+ */
+export function normalizeOptions(input, fallback = []) {
+    const known = new Map(fallback.map((option) => [option.value, option.label]));
+    const labelFor = (value) => known.get(value) ?? humanize(value);
+
+    let options = [];
+
+    if (Array.isArray(input)) {
+        options = input.map((item) =>
+            item !== null && typeof item === 'object'
+                ? { value: item.value, label: item.label ?? labelFor(item.value) }
+                : { value: item, label: labelFor(item) },
+        );
+    } else if (input !== null && typeof input === 'object') {
+        options = Object.entries(input).map(([value, label]) => ({ value, label: label || labelFor(value) }));
+    }
+
+    return options.length ? options : fallback;
+}
+
+/** Stored conditions, in any shape, as the editor's `{match, conditions}`. */
+export function toConditionState(conditions) {
+    if (Array.isArray(conditions)) {
+        return { match: 'all', conditions };
+    }
+
+    if (conditions === null || typeof conditions !== 'object') {
+        return { match: 'all', conditions: [] };
+    }
+
+    if (Array.isArray(conditions.all)) {
+        return { match: 'all', conditions: conditions.all };
+    }
+
+    if (Array.isArray(conditions.any)) {
+        return { match: 'any', conditions: conditions.any };
+    }
+
+    const match = conditions.match === 'any' ? 'any' : 'all';
+    const list = conditions.rules ?? conditions.conditions;
+
+    return { match, conditions: Array.isArray(list) ? list : [] };
+}
+
+/** The editor's `{match, conditions}` as the contract's `{all}` or `{any}`. */
+export function toWireConditions(state) {
+    return { [state?.match === 'any' ? 'any' : 'all']: state?.conditions ?? [] };
+}
+
+// The builder's old `{type, config}` kept the one value an action needs under
+// one of these keys.
+const LEGACY_CONFIG_KEYS = ['status', 'priority', 'tag', 'department', 'agent', 'body', 'url', 'duration', 'macro'];
+
+/** Stored actions as `{type, value}`. */
+export function toActionState(actions) {
+    if (!Array.isArray(actions)) {
+        return [];
+    }
+
+    return actions.map((action) => {
+        if (Object.prototype.hasOwnProperty.call(action, 'value')) {
+            return { type: action.type, value: action.value };
+        }
+
+        const config = action.config ?? {};
+        const key = LEGACY_CONFIG_KEYS.find((candidate) => config[candidate] !== undefined && config[candidate] !== '');
+
+        return { type: action.type, value: key ? config[key] : '' };
+    });
+}
+
+/** The create/update request body. */
+export function toWirePayload(form) {
+    return {
+        name: form.name,
+        description: form.description ? form.description : null,
+        trigger_event: form.trigger_event,
+        conditions: toWireConditions(form.conditions),
+        actions: (form.actions ?? []).map(({ type, value }) => ({ type, value: value ?? '' })),
+        is_active: Boolean(form.is_active),
+    };
+}