@escalated-dev/escalated 0.7.0 → 0.8.0

package/src/widget/index.js

@@ -0,0 +1,254 @@
+import { createApp, h } from 'vue';
+import EscalatedWidget from './EscalatedWidget.vue';
+
+(function () {
+    const scriptTag = document.currentScript || document.querySelector('script[data-escalated-widget]');
+    const globalConfig = window.EscalatedWidget || {};
+
+    const config = {
+        baseUrl: scriptTag?.getAttribute('data-base-url') || globalConfig.baseUrl || '',
+        // Host-framework-specific path prefix. Every plugin except the NestJS
+        // reference mounts at /support/widget; NestJS mounts at
+        // /escalated/widget. Set via data-widget-path on NestJS backends.
+        widgetPath: scriptTag?.getAttribute('data-widget-path') || globalConfig.widgetPath || '/support/widget',
+        color: scriptTag?.getAttribute('data-color') || globalConfig.color || '#4F46E5',
+        position: scriptTag?.getAttribute('data-position') || globalConfig.position || 'bottom-right',
+    };
+
+    const host = document.createElement('div');
+    host.id = 'escalated-widget-host';
+    document.body.appendChild(host);
+
+    const shadow = host.attachShadow({ mode: 'open' });
+
+    const mountEl = document.createElement('div');
+    mountEl.id = 'escalated-widget-root';
+    shadow.appendChild(mountEl);
+
+    const styleEl = document.createElement('style');
+    styleEl.textContent = getWidgetStyles();
+    shadow.appendChild(styleEl);
+
+    const app = createApp({
+        render() {
+            return h(EscalatedWidget, {
+                baseUrl: config.baseUrl,
+                widgetPath: config.widgetPath,
+                initialColor: config.color,
+                initialPosition: config.position,
+            });
+        },
+    });
+
+    app.mount(mountEl);
+
+    window.EscalatedWidget = Object.assign(window.EscalatedWidget || {}, {
+        open() {
+            mountEl.querySelector('[data-widget-panel]')?.classList.add('esc-open');
+        },
+        close() {
+            mountEl.querySelector('[data-widget-panel]')?.classList.remove('esc-open');
+        },
+    });
+})();
+
+function getWidgetStyles() {
+    return `
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+#escalated-widget-root {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    font-size: 14px; line-height: 1.5; color: #1f2937; -webkit-font-smoothing: antialiased;
+}
+.esc-w-fab {
+    position: fixed; z-index: 2147483646; width: 56px; height: 56px;
+    border-radius: 50%; border: none; cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    transition: transform 0.2s, box-shadow 0.2s; color: #fff;
+}
+.esc-w-fab:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
+.esc-w-fab.bottom-right { bottom: 20px; right: 20px; }
+.esc-w-fab.bottom-left { bottom: 20px; left: 20px; }
+.esc-w-fab svg { width: 24px; height: 24px; fill: currentColor; }
+.esc-w-panel {
+    position: fixed; z-index: 2147483647;
+    width: 380px; max-width: calc(100vw - 24px);
+    height: 560px; max-height: calc(100vh - 100px);
+    border-radius: 12px; background: #ffffff;
+    box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
+    display: flex; flex-direction: column; overflow: hidden;
+    transform: scale(0.95) translateY(10px); opacity: 0;
+    pointer-events: none; transition: transform 0.25s ease, opacity 0.25s ease;
+}
+.esc-w-panel.esc-open { transform: scale(1) translateY(0); opacity: 1; pointer-events: auto; }
+.esc-w-panel.bottom-right { bottom: 84px; right: 20px; }
+.esc-w-panel.bottom-left { bottom: 84px; left: 20px; }
+@media (max-width: 440px) {
+    .esc-w-panel {
+        width: calc(100vw - 16px); height: calc(100vh - 80px);
+        max-height: calc(100vh - 80px); bottom: 8px !important;
+        right: 8px !important; left: 8px !important; border-radius: 10px;
+    }
+}
+.esc-w-header { padding: 16px 20px; color: #fff; flex-shrink: 0; }
+.esc-w-header h2 { font-size: 16px; font-weight: 600; margin-bottom: 2px; }
+.esc-w-header p { font-size: 13px; opacity: 0.9; }
+.esc-w-tabs { display: flex; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; background: #f9fafb; }
+.esc-w-tab {
+    flex: 1; padding: 10px 8px; font-size: 12px; font-weight: 500;
+    text-align: center; border: none; background: none; cursor: pointer;
+    color: #6b7280; border-bottom: 2px solid transparent;
+    transition: color 0.15s, border-color 0.15s;
+}
+.esc-w-tab:hover { color: #374151; }
+.esc-w-tab.active { color: #1f2937; border-bottom-color: var(--esc-widget-color, #4F46E5); }
+.esc-w-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
+.esc-w-input {
+    width: 100%; padding: 8px 12px; border: 1px solid #d1d5db;
+    border-radius: 8px; font-size: 13px; outline: none;
+    transition: border-color 0.15s; background: #fff; color: #1f2937;
+}
+.esc-w-input:focus { border-color: var(--esc-widget-color, #4F46E5); box-shadow: 0 0 0 2px rgba(79,70,229,0.1); }
+.esc-w-textarea {
+    width: 100%; padding: 8px 12px; border: 1px solid #d1d5db;
+    border-radius: 8px; font-size: 13px; outline: none;
+    resize: vertical; min-height: 80px; font-family: inherit;
+    transition: border-color 0.15s; background: #fff; color: #1f2937;
+}
+.esc-w-textarea:focus { border-color: var(--esc-widget-color, #4F46E5); box-shadow: 0 0 0 2px rgba(79,70,229,0.1); }
+.esc-w-select {
+    width: 100%; padding: 8px 12px; border: 1px solid #d1d5db;
+    border-radius: 8px; font-size: 13px; outline: none;
+    background: #fff; color: #1f2937; cursor: pointer;
+}
+.esc-w-select:focus { border-color: var(--esc-widget-color, #4F46E5); }
+.esc-w-label { display: block; font-size: 12px; font-weight: 500; color: #374151; margin-bottom: 4px; }
+.esc-w-field { margin-bottom: 12px; }
+.esc-w-btn {
+    width: 100%; padding: 10px 16px; border: none; border-radius: 8px;
+    font-size: 13px; font-weight: 600; color: #fff; cursor: pointer; transition: opacity 0.15s;
+}
+.esc-w-btn:hover { opacity: 0.9; }
+.esc-w-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.esc-w-article { padding: 10px 0; border-bottom: 1px solid #f3f4f6; cursor: pointer; }
+.esc-w-article:last-child { border-bottom: none; }
+.esc-w-article:hover { background: #f9fafb; margin: 0 -20px; padding: 10px 20px; }
+.esc-w-article h4 { font-size: 13px; font-weight: 600; color: #1f2937; margin-bottom: 2px; }
+.esc-w-article p { font-size: 12px; color: #6b7280; }
+.esc-w-back {
+    display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
+    color: #6b7280; cursor: pointer; margin-bottom: 12px;
+    background: none; border: none; padding: 0;
+}
+.esc-w-back:hover { color: #374151; }
+.esc-w-article-detail h3 { font-size: 16px; font-weight: 600; margin-bottom: 12px; color: #1f2937; }
+.esc-w-article-detail .esc-w-article-body { font-size: 13px; line-height: 1.7; color: #374151; }
+.esc-w-article-detail .esc-w-article-body p { margin-bottom: 8px; }
+.esc-w-article-detail .esc-w-article-body a { color: var(--esc-widget-color, #4F46E5); }
+.esc-w-success { text-align: center; padding: 24px 0; }
+.esc-w-success svg { width: 48px; height: 48px; color: #10b981; margin: 0 auto 12px; }
+.esc-w-success h4 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
+.esc-w-success p { font-size: 13px; color: #6b7280; }
+.esc-w-success .esc-w-ref {
+    display: inline-block; margin-top: 8px; padding: 4px 12px;
+    background: #f0fdf4; border-radius: 6px; font-size: 14px; font-weight: 600; color: #059669;
+}
+.esc-w-status-card { padding: 16px; border-radius: 10px; border: 1px solid #e5e7eb; margin-bottom: 12px; }
+.esc-w-status-card h4 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
+.esc-w-status-badge {
+    display: inline-block; padding: 2px 8px; border-radius: 12px;
+    font-size: 11px; font-weight: 600; color: #fff;
+}
+.esc-w-reply { padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
+.esc-w-reply:last-child { border-bottom: none; }
+.esc-w-reply-author { font-size: 12px; font-weight: 600; color: #374151; }
+.esc-w-reply-agent {
+    font-size: 10px; padding: 1px 6px; background: #eff6ff;
+    color: #3b82f6; border-radius: 4px; margin-left: 4px;
+}
+.esc-w-reply-time { font-size: 11px; color: #9ca3af; }
+.esc-w-reply-body { font-size: 13px; color: #374151; margin-top: 4px; line-height: 1.6; }
+.esc-w-error {
+    padding: 8px 12px; background: #fef2f2; border: 1px solid #fecaca;
+    border-radius: 8px; font-size: 12px; color: #dc2626; margin-bottom: 12px;
+}
+.esc-w-empty { text-align: center; padding: 24px 0; color: #9ca3af; font-size: 13px; }
+.esc-w-chat-avail {
+    display: flex; align-items: center; gap: 8px; padding: 10px 14px;
+    background: #f0fdf4; border-radius: 8px; font-size: 13px; color: #166534; margin-bottom: 16px;
+}
+.esc-w-chat-dot-green {
+    width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex-shrink: 0;
+}
+.esc-w-chat-header-bar {
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 8px 0; margin-bottom: 8px; border-bottom: 1px solid #e5e7eb;
+}
+.esc-w-chat-agent-info { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: #1f2937; }
+.esc-w-chat-agent-avatar {
+    width: 28px; height: 28px; border-radius: 50%; background: var(--esc-widget-color, #4F46E5);
+    color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
+}
+.esc-w-chat-header-actions { display: flex; align-items: center; gap: 8px; }
+.esc-w-chat-conn-dot { width: 6px; height: 6px; border-radius: 50%; }
+.esc-w-chat-conn-connected { background: #22c55e; }
+.esc-w-chat-conn-reconnecting { background: #eab308; }
+.esc-w-chat-conn-disconnected { background: #ef4444; }
+.esc-w-chat-end-link { background: none; border: none; color: #6b7280; font-size: 12px; cursor: pointer; }
+.esc-w-chat-end-link:hover { color: #ef4444; }
+.esc-w-chat-messages {
+    flex: 1; overflow-y: auto; max-height: 280px; min-height: 120px;
+    padding: 8px 0; display: flex; flex-direction: column; gap: 6px;
+}
+.esc-w-chat-bubble-row { display: flex; align-items: flex-end; gap: 6px; }
+.esc-w-chat-bubble-row.esc-w-chat-agent { flex-direction: row-reverse; }
+.esc-w-chat-bubble-row.esc-w-chat-customer { flex-direction: row; }
+.esc-w-chat-avatar-sm {
+    width: 24px; height: 24px; border-radius: 50%; background: #e5e7eb;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 9px; font-weight: 700; color: #6b7280; flex-shrink: 0;
+}
+.esc-w-chat-avatar-agent { background: var(--esc-widget-color, #4F46E5); color: #fff; }
+.esc-w-chat-bubble {
+    max-width: 75%; padding: 8px 12px; border-radius: 16px; font-size: 13px; line-height: 1.5; word-break: break-word;
+}
+.esc-w-chat-bubble-customer { background: #f3f4f6; color: #1f2937; border-bottom-left-radius: 4px; }
+.esc-w-chat-bubble-agent { color: #fff; border-bottom-right-radius: 4px; }
+.esc-w-chat-typing { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #9ca3af; padding: 4px 0; }
+.esc-w-chat-typing-dots { display: inline-flex; gap: 3px; }
+.esc-w-chat-typing-dots span {
+    width: 5px; height: 5px; border-radius: 50%; background: #9ca3af;
+    animation: esc-chat-bounce 1.4s infinite both;
+}
+.esc-w-chat-typing-dots span:nth-child(2) { animation-delay: 0.16s; }
+.esc-w-chat-typing-dots span:nth-child(3) { animation-delay: 0.32s; }
+@keyframes esc-chat-bounce {
+    0%, 80%, 100% { transform: scale(0); }
+    40% { transform: scale(1); }
+}
+.esc-w-chat-input-bar {
+    display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid #e5e7eb; margin-top: 8px;
+}
+.esc-w-chat-input {
+    flex: 1; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 20px;
+    font-size: 13px; outline: none; background: #fff; color: #1f2937;
+}
+.esc-w-chat-input:focus { border-color: var(--esc-widget-color, #4F46E5); }
+.esc-w-chat-send {
+    width: 36px; height: 36px; border-radius: 50%; border: none; color: #fff;
+    display: flex; align-items: center; justify-content: center; cursor: pointer;
+    transition: opacity 0.15s; flex-shrink: 0;
+}
+.esc-w-chat-send:disabled { opacity: 0.4; cursor: not-allowed; }
+.esc-w-chat-rating { display: flex; justify-content: center; gap: 4px; margin: 12px 0; }
+.esc-w-chat-star { background: none; border: none; cursor: pointer; color: #d1d5db; padding: 2px; transition: color 0.15s; }
+.esc-w-chat-star:hover, .esc-w-chat-star-active { color: #f59e0b; }
+.esc-w-chat-star svg { width: 28px; height: 28px; }
+.esc-w-spinner {
+    width: 20px; height: 20px; border: 2px solid #e5e7eb;
+    border-top-color: var(--esc-widget-color, #4F46E5);
+    border-radius: 50%; animation: esc-spin 0.6s linear infinite; margin: 24px auto;
+}
+@keyframes esc-spin { to { transform: rotate(360deg); } }
+    `;
+}

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

@@ -1,184 +0,0 @@
-<script setup>
-import EscalatedLayout from '../../../components/EscalatedLayout.vue';
-import { useForm } from '@inertiajs/vue3';
-
-const props = defineProps({
-    automation: { type: Object, default: null },
-});
-
-const conditionFields = [
-    { value: 'hours_since_created', label: 'Hours since created' },
-    { value: 'hours_since_updated', label: 'Hours since updated' },
-    { value: 'hours_since_assigned', label: 'Hours since assigned' },
-    { value: 'status', label: 'Status' },
-    { value: 'priority', label: 'Priority' },
-    { value: 'assigned', label: 'Assignment' },
-];
-
-const actionTypes = [
-    { value: 'change_status', label: 'Change status' },
-    { value: 'assign', label: 'Assign to agent (ID)' },
-    { value: 'add_tag', label: 'Add tag (name)' },
-    { value: 'change_priority', label: 'Change priority' },
-    { value: 'add_note', label: 'Add internal note' },
-];
-
-const form = useForm({
-    name: props.automation?.name || '',
-    conditions: props.automation?.conditions || [{ field: 'hours_since_updated', operator: '>', value: '' }],
-    actions: props.automation?.actions || [{ type: 'change_status', value: '' }],
-    active: props.automation?.active ?? true,
-});
-
-function addCondition() {
-    form.conditions.push({ field: 'hours_since_updated', operator: '>', value: '' });
-}
-
-function removeCondition(index) {
-    form.conditions.splice(index, 1);
-}
-
-function addAction() {
-    form.actions.push({ type: 'change_status', value: '' });
-}
-
-function removeAction(index) {
-    form.actions.splice(index, 1);
-}
-
-function submit() {
-    if (props.automation) {
-        form.put(route('escalated.admin.automations.update', props.automation.id));
-    } else {
-        form.post(route('escalated.admin.automations.store'));
-    }
-}
-</script>
-
-<template>
-    <EscalatedLayout :title="automation ? 'Edit Automation' : 'Create Automation'">
-        <form class="max-w-2xl space-y-6" @submit.prevent="submit">
-            <div>
-                <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Name</label>
-                <input
-                    v-model="form.name"
-                    type="text"
-                    required
-                    class="mt-1 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)]"
-                />
-                <p v-if="form.errors.name" class="mt-1 text-xs text-rose-400">{{ form.errors.name }}</p>
-            </div>
-
-            <!-- Conditions -->
-            <div>
-                <label class="mb-2 block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
-                    >Conditions (ALL must match)</label
-                >
-                <div class="space-y-2">
-                    <div v-for="(condition, i) in form.conditions" :key="i" class="flex items-center gap-2">
-                        <select
-                            v-model="condition.field"
-                            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"
-                        >
-                            <option v-for="f in conditionFields" :key="f.value" :value="f.value">{{ f.label }}</option>
-                        </select>
-                        <select
-                            v-model="condition.operator"
-                            class="w-16 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"
-                        >
-                            <option value=">">&gt;</option>
-                            <option value=">=">&gt;=</option>
-                            <option value="<">&lt;</option>
-                            <option value="<=">&lt;=</option>
-                            <option value="=">=</option>
-                        </select>
-                        <input
-                            v-model="condition.value"
-                            type="text"
-                            placeholder="Value"
-                            class="flex-1 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 focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
-                        />
-                        <button
-                            v-if="form.conditions.length > 1"
-                            type="button"
-                            class="text-rose-400 hover:text-rose-300"
-                            @click="removeCondition(i)"
-                        >
-                            &times;
-                        </button>
-                    </div>
-                </div>
-                <button
-                    type="button"
-                    class="mt-2 text-xs text-[var(--esc-panel-text-tertiary)] hover:text-[var(--esc-panel-text-secondary)]"
-                    @click="addCondition"
-                >
-                    + Add condition
-                </button>
-            </div>
-
-            <!-- Actions -->
-            <div>
-                <label class="mb-2 block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Actions</label>
-                <div class="space-y-2">
-                    <div v-for="(action, i) in form.actions" :key="i" class="flex items-center gap-2">
-                        <select
-                            v-model="action.type"
-                            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"
-                        >
-                            <option v-for="a in actionTypes" :key="a.value" :value="a.value">{{ a.label }}</option>
-                        </select>
-                        <input
-                            v-model="action.value"
-                            type="text"
-                            placeholder="Value"
-                            class="flex-1 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 focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
-                        />
-                        <button
-                            v-if="form.actions.length > 1"
-                            type="button"
-                            class="text-rose-400 hover:text-rose-300"
-                            @click="removeAction(i)"
-                        >
-                            &times;
-                        </button>
-                    </div>
-                </div>
-                <button
-                    type="button"
-                    class="mt-2 text-xs text-[var(--esc-panel-text-tertiary)] hover:text-[var(--esc-panel-text-secondary)]"
-                    @click="addAction"
-                >
-                    + Add action
-                </button>
-            </div>
-
-            <div>
-                <label class="flex items-center gap-2 text-sm text-[var(--esc-panel-text-secondary)]">
-                    <input
-                        v-model="form.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"
-                    />
-                    Active
-                </label>
-            </div>
-
-            <div class="flex gap-3">
-                <button
-                    type="submit"
-                    :disabled="form.processing"
-                    class="rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-4 py-2 text-sm font-medium text-white shadow-lg shadow-[var(--esc-panel-bg)]/20 transition-all hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)] disabled:opacity-50"
-                >
-                    {{ automation ? 'Update' : 'Create' }}
-                </button>
-                <a
-                    :href="route('escalated.admin.automations.index')"
-                    class="rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] px-4 py-2 text-sm font-medium text-[var(--esc-panel-text-secondary)] transition-colors hover:bg-[var(--esc-panel-hover)]"
-                >
-                    Cancel
-                </a>
-            </div>
-        </form>
-    </EscalatedLayout>
-</template>

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

@@ -1,129 +0,0 @@
-<script setup>
-import EscalatedLayout from '../../../components/EscalatedLayout.vue';
-import { Link, router } from '@inertiajs/vue3';
-
-defineProps({ automations: Array });
-
-function destroy(id) {
-    if (confirm('Delete this automation?')) {
-        router.delete(route('escalated.admin.automations.destroy', id));
-    }
-}
-
-function conditionsSummary(automation) {
-    return (automation.conditions || []).map((c) => `${c.field} ${c.operator} ${c.value}`).join(', ');
-}
-
-function actionsSummary(automation) {
-    return (automation.actions || []).map((a) => `${a.type}: ${a.value}`).join(', ');
-}
-</script>
-
-<template>
-    <EscalatedLayout title="Automations">
-        <div class="mb-4 flex justify-end">
-            <Link
-                :href="route('escalated.admin.automations.create')"
-                class="rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-4 py-2 text-sm font-medium text-white shadow-lg shadow-[var(--esc-panel-bg)]/20 transition-all hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)]"
-            >
-                Add Automation
-            </Link>
-        </div>
-        <div class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]">
-            <table class="min-w-full divide-y divide-[var(--esc-panel-border)]">
-                <thead>
-                    <tr class="bg-[var(--esc-panel-hover)]">
-                        <th
-                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
-                        >
-                            Name
-                        </th>
-                        <th
-                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
-                        >
-                            Conditions
-                        </th>
-                        <th
-                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
-                        >
-                            Actions
-                        </th>
-                        <th
-                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
-                        >
-                            Active
-                        </th>
-                        <th
-                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
-                        >
-                            Last Run
-                        </th>
-                        <th
-                            class="px-4 py-3 text-right text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
-                        >
-                            Actions
-                        </th>
-                    </tr>
-                </thead>
-                <tbody class="divide-y divide-[var(--esc-panel-border)]">
-                    <tr v-if="!automations?.length">
-                        <td colspan="6" class="px-4 py-12 text-center">
-                            <svg
-                                class="mx-auto mb-3 h-8 w-8 text-[var(--esc-panel-text-muted)]"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="1.5"
-                                viewBox="0 0 24 24"
-                            >
-                                <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
-                                />
-                            </svg>
-                            <p class="text-sm text-[var(--esc-panel-text-muted)]">No automations yet</p>
-                            <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
-                                Create time-based automations to act on idle tickets
-                            </p>
-                        </td>
-                    </tr>
-                    <tr
-                        v-for="automation in automations"
-                        :key="automation.id"
-                        class="transition-colors hover:bg-[var(--esc-panel-hover)]"
-                    >
-                        <td class="px-4 py-3 text-sm font-medium text-[var(--esc-panel-text-secondary)]">
-                            {{ automation.name }}
-                        </td>
-                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)] max-w-xs truncate">
-                            {{ conditionsSummary(automation) }}
-                        </td>
-                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)] max-w-xs truncate">
-                            {{ actionsSummary(automation) }}
-                        </td>
-                        <td class="px-4 py-3 text-sm">
-                            <span
-                                :class="automation.active ? 'text-emerald-400' : 'text-[var(--esc-panel-text-muted)]'"
-                                >{{ automation.active ? 'Yes' : 'No' }}</span
-                            >
-                        </td>
-                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
-                            {{ automation.last_run_at || '---' }}
-                        </td>
-                        <td class="px-4 py-3 text-right text-sm">
-                            <Link
-                                :href="route('escalated.admin.automations.edit', automation.id)"
-                                class="text-[var(--esc-panel-text-secondary)] hover:text-[var(--esc-panel-text)]"
-                            >
-                                Edit
-                            </Link>
-                            <button class="ml-3 text-rose-400 hover:text-rose-300" @click="destroy(automation.id)">
-                                Delete
-                            </button>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </EscalatedLayout>
-</template>