@escalated-dev/escalated 0.11.4 → 0.11.6

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/pages/Error.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { Link } from '@inertiajs/vue3';
+import { computed } from 'vue';
+
+/**
+ * The refusal and not-found screen.
+ *
+ * Backends render this instead of an HTML error page so a 403 or a 404 inside
+ * the panel stays inside the panel. It deliberately does not use
+ * EscalatedLayout: the most common reason to arrive here is that the viewer was
+ * refused, and the layout's navigation is a list of places they may equally not
+ * be allowed to go. Rendering it would offer a menu that mostly leads back
+ * here.
+ *
+ * The message comes from the backend, already translated. The headings below
+ * are the fallback for a status arriving with no message at all.
+ */
+const props = defineProps({
+    status: { type: [Number, String], default: 500 },
+    message: { type: String, default: '' },
+
+    // Where "back" goes. A host mounts Escalated under its own prefix, and this
+    // page is reached without a layout to resolve one.
+    home: { type: String, default: '' },
+});
+
+const code = computed(() => String(props.status));
+
+const title = computed(
+    () =>
+        ({
+            403: 'Not allowed',
+            404: 'Not found',
+            419: 'Session expired',
+            429: 'Too many requests',
+            500: 'Something went wrong',
+            503: 'Temporarily unavailable',
+        })[code.value] || 'Something went wrong',
+);
+
+const explanation = computed(
+    () =>
+        ({
+            403: 'Your account does not have access to this.',
+            404: 'That page does not exist, or it has been removed.',
+            419: 'Your session expired. Sign in again to continue.',
+            429: 'Too many requests in a short space of time. Wait a moment and try again.',
+            503: 'The service is down for maintenance. Try again shortly.',
+        })[code.value] || 'The request could not be completed.',
+);
+</script>
+
+<template>
+    <div class="flex min-h-screen items-center justify-center bg-[var(--esc-panel-bg)] px-4">
+        <div class="w-full max-w-md text-center">
+            <p class="font-mono text-sm tracking-widest text-[var(--esc-panel-text-muted)]">{{ code }}</p>
+            <h1 class="mt-2 text-xl font-semibold text-[var(--esc-panel-text-secondary)]">{{ title }}</h1>
+            <p class="mt-3 text-sm text-[var(--esc-panel-text-muted)]">{{ message || explanation }}</p>
+
+            <Link
+                v-if="home"
+                :href="home"
+                class="mt-6 inline-block rounded-lg border border-[var(--esc-panel-border)] px-4 py-2 text-sm text-[var(--esc-panel-text-tertiary)] transition-colors hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]"
+            >
+                Back to the panel
+            </Link>
+        </div>
+    </div>
+</template>