@escalated-dev/escalated 0.6.0 → 0.7.1

package/src/components/WorkflowActionList.vue

@@ -0,0 +1,350 @@
+<script setup>
+import { ref, computed } from 'vue';
+import WorkflowActionConfig from './WorkflowActionConfig.vue';
+
+const props = defineProps({
+    modelValue: { type: Array, default: () => [] },
+});
+
+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',
+        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',
+        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',
+        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',
+        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',
+        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 showTypeSelector = ref(false);
+const expandedIndex = ref(null);
+const dragIndex = ref(null);
+
+const actions = computed(() => props.modelValue);
+
+function getActionType(value) {
+    return actionTypes.find((t) => t.value === value) || actionTypes[0];
+}
+
+function addAction(typeValue) {
+    const newActions = [...actions.value, { type: typeValue, config: {} }];
+    emit('update:modelValue', newActions);
+    showTypeSelector.value = false;
+    expandedIndex.value = newActions.length - 1;
+}
+
+function removeAction(index) {
+    const newActions = actions.value.filter((_, i) => i !== index);
+    emit('update:modelValue', newActions);
+    if (expandedIndex.value === index) expandedIndex.value = null;
+}
+
+function updateConfig(index, config) {
+    const newActions = actions.value.map((a, i) => (i === index ? { ...a, config } : a));
+    emit('update:modelValue', newActions);
+}
+
+function toggleExpand(index) {
+    expandedIndex.value = expandedIndex.value === index ? null : 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';
+    }
+}
+
+// Drag-and-drop reordering
+function onDragStart(index) {
+    dragIndex.value = index;
+}
+
+function onDragOver(event, index) {
+    event.preventDefault();
+    if (dragIndex.value === null || dragIndex.value === index) return;
+    const newActions = [...actions.value];
+    const [moved] = newActions.splice(dragIndex.value, 1);
+    newActions.splice(index, 0, moved);
+    emit('update:modelValue', newActions);
+    dragIndex.value = index;
+}
+
+function onDragEnd() {
+    dragIndex.value = null;
+}
+</script>
+
+<template>
+    <div class="space-y-0">
+        <div v-for="(action, i) in actions" :key="i" class="relative">
+            <!-- Connector line -->
+            <div v-if="i > 0" class="flex justify-center">
+                <div class="h-6 w-px bg-[var(--esc-panel-border)]" />
+            </div>
+
+            <!-- Delay divider -->
+            <div
+                v-if="action.type === 'delay'"
+                class="my-1 flex items-center gap-3"
+                draggable="true"
+                @dragstart="onDragStart(i)"
+                @dragover="onDragOver($event, i)"
+                @dragend="onDragEnd"
+            >
+                <div class="h-px flex-1 border-t border-dashed border-orange-500/40" />
+                <div
+                    class="flex items-center gap-2 rounded-full border border-orange-500/30 bg-orange-500/10 px-4 py-1.5"
+                >
+                    <svg
+                        class="h-4 w-4 text-orange-400"
+                        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>
+                    <span class="text-xs font-medium text-orange-400">{{ getActionSummary(action) }}</span>
+                    <button type="button" class="ml-1 text-orange-400/60 hover:text-rose-400" @click="removeAction(i)">
+                        <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+                <div class="h-px flex-1 border-t border-dashed border-orange-500/40" />
+            </div>
+
+            <!-- Regular action card -->
+            <div
+                v-else
+                class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] transition-all"
+                :class="expandedIndex === i ? 'shadow-lg' : ''"
+                draggable="true"
+                @dragstart="onDragStart(i)"
+                @dragover="onDragOver($event, i)"
+                @dragend="onDragEnd"
+            >
+                <!-- Action header -->
+                <div class="flex cursor-pointer items-center gap-3 px-4 py-3" @click="toggleExpand(i)">
+                    <!-- Drag handle -->
+                    <div class="cursor-grab text-[var(--esc-panel-text-muted)]">
+                        <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
+                            <circle cx="9" cy="6" r="1.5" />
+                            <circle cx="15" cy="6" r="1.5" />
+                            <circle cx="9" cy="12" r="1.5" />
+                            <circle cx="15" cy="12" r="1.5" />
+                            <circle cx="9" cy="18" r="1.5" />
+                            <circle cx="15" cy="18" r="1.5" />
+                        </svg>
+                    </div>
+
+                    <!-- Icon -->
+                    <div
+                        class="flex h-8 w-8 items-center justify-center rounded-lg"
+                        :class="getActionType(action.type).color"
+                    >
+                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" :d="getActionType(action.type).icon" />
+                        </svg>
+                    </div>
+
+                    <!-- Label and summary -->
+                    <div class="min-w-0 flex-1">
+                        <div class="text-sm font-medium text-[var(--esc-panel-text-secondary)]">
+                            {{ getActionType(action.type).label }}
+                        </div>
+                        <div class="truncate text-xs text-[var(--esc-panel-text-muted)]">
+                            {{ getActionSummary(action) }}
+                        </div>
+                    </div>
+
+                    <!-- Expand/collapse chevron -->
+                    <svg
+                        class="h-4 w-4 text-[var(--esc-panel-text-muted)] transition-transform"
+                        :class="expandedIndex === i ? 'rotate-180' : ''"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        viewBox="0 0 24 24"
+                    >
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+                    </svg>
+
+                    <!-- Remove -->
+                    <button
+                        type="button"
+                        class="flex h-7 w-7 items-center justify-center rounded-lg text-[var(--esc-panel-text-muted)] transition-colors hover:bg-rose-500/10 hover:text-rose-400"
+                        @click.stop="removeAction(i)"
+                    >
+                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+
+                <!-- Expanded config -->
+                <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)"
+                    />
+                </div>
+            </div>
+        </div>
+
+        <!-- Connector to add button -->
+        <div v-if="actions.length" class="flex justify-center">
+            <div class="h-6 w-px bg-[var(--esc-panel-border)]" />
+        </div>
+
+        <!-- Add action -->
+        <div class="relative">
+            <button
+                type="button"
+                class="flex w-full items-center justify-center gap-2 rounded-xl border-2 border-dashed border-[var(--esc-panel-border)] px-4 py-3 text-sm text-[var(--esc-panel-text-muted)] transition-all hover:border-emerald-500/50 hover:text-emerald-400"
+                @click="showTypeSelector = !showTypeSelector"
+            >
+                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+                </svg>
+                Add Action
+            </button>
+
+            <!-- Action type selector dropdown -->
+            <div
+                v-if="showTypeSelector"
+                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"
+                    :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)]"
+                    @click="addAction(at.value)"
+                >
+                    <div class="flex h-7 w-7 items-center justify-center rounded-lg" :class="at.color">
+                        <svg
+                            class="h-3.5 w-3.5"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            viewBox="0 0 24 24"
+                        >
+                            <path stroke-linecap="round" stroke-linejoin="round" :d="at.icon" />
+                        </svg>
+                    </div>
+                    <span class="text-sm text-[var(--esc-panel-text-secondary)]">{{ at.label }}</span>
+                </button>
+            </div>
+        </div>
+    </div>
+</template>

package/src/components/WorkflowConditionBuilder.vue

@@ -0,0 +1,265 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    modelValue: {
+        type: Object,
+        default: () => ({ match: 'all', conditions: [] }),
+    },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const fields = [
+    {
+        value: 'status',
+        label: 'Status',
+        type: 'enum',
+        options: [
+            'open',
+            'in_progress',
+            'waiting_on_customer',
+            'waiting_on_agent',
+            'escalated',
+            'resolved',
+            'closed',
+            'reopened',
+        ],
+    },
+    { value: 'priority', label: 'Priority', type: 'enum', options: ['low', 'medium', 'high', 'urgent', 'critical'] },
+    {
+        value: '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: '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 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' },
+    ],
+};
+
+const data = computed(() => props.modelValue);
+
+function update(patch) {
+    emit('update:modelValue', { ...data.value, ...patch });
+}
+
+function toggleMatch() {
+    update({ match: data.value.match === 'all' ? 'any' : 'all' });
+}
+
+function addCondition() {
+    const conditions = [...(data.value.conditions || []), { field: 'status', operator: 'equals', value: '' }];
+    update({ conditions });
+}
+
+function removeCondition(index) {
+    const conditions = data.value.conditions.filter((_, i) => i !== index);
+    update({ conditions });
+}
+
+function updateCondition(index, patch) {
+    const conditions = data.value.conditions.map((c, i) => (i === index ? { ...c, ...patch } : c));
+    update({ conditions });
+}
+
+function getFieldConfig(fieldValue) {
+    return fields.find((f) => f.value === fieldValue) || fields[0];
+}
+
+function getOperators(fieldValue) {
+    const field = getFieldConfig(fieldValue);
+    return operatorsByType[field.type] || operatorsByType.text;
+}
+
+function onFieldChange(index, newField) {
+    const operators = getOperators(newField);
+    updateCondition(index, { field: newField, operator: operators[0].value, value: '' });
+}
+
+const previewText = computed(() => {
+    if (!data.value.conditions?.length) return '';
+    const joiner = data.value.match === 'all' ? ' AND ' : ' OR ';
+    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`;
+            const val = Array.isArray(c.value) ? `[${c.value.join(', ')}]` : c.value;
+            return `${field.label} ${opLabel} ${val}`;
+        })
+        .join(joiner);
+});
+</script>
+
+<template>
+    <div class="space-y-4">
+        <!-- Match type toggle -->
+        <div class="flex items-center gap-3">
+            <span class="text-sm text-[var(--esc-panel-text-muted)]">Match:</span>
+            <button
+                type="button"
+                class="rounded-lg px-3 py-1.5 text-xs font-semibold transition-colors"
+                :class="
+                    data.match === 'all'
+                        ? 'bg-amber-500/20 text-amber-400'
+                        : 'bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-muted)] hover:text-[var(--esc-panel-text-secondary)]'
+                "
+                @click="toggleMatch"
+            >
+                All conditions (AND)
+            </button>
+            <button
+                type="button"
+                class="rounded-lg px-3 py-1.5 text-xs font-semibold transition-colors"
+                :class="
+                    data.match === 'any'
+                        ? 'bg-amber-500/20 text-amber-400'
+                        : 'bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-muted)] hover:text-[var(--esc-panel-text-secondary)]'
+                "
+                @click="toggleMatch"
+            >
+                Any condition (OR)
+            </button>
+        </div>
+
+        <!-- Condition rows -->
+        <div class="space-y-2">
+            <div
+                v-for="(condition, i) in data.conditions"
+                :key="i"
+                class="flex flex-wrap items-center gap-2 rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-3"
+            >
+                <!-- Field -->
+                <select
+                    :value="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"
+                    @change="onFieldChange(i, $event.target.value)"
+                >
+                    <option v-for="f in fields" :key="f.value" :value="f.value">{{ f.label }}</option>
+                </select>
+
+                <!-- Operator -->
+                <select
+                    :value="condition.operator"
+                    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, { operator: $event.target.value })"
+                >
+                    <option v-for="op in getOperators(condition.field)" :key="op.value" :value="op.value">
+                        {{ op.label }}
+                    </option>
+                </select>
+
+                <!-- Value (contextual) -->
+                <template v-if="condition.operator !== 'is_empty'">
+                    <!-- Enum select for enum fields -->
+                    <select
+                        v-if="getFieldConfig(condition.field).type === 'enum' && condition.operator !== 'in'"
+                        :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 })"
+                    >
+                        <option value="">Select...</option>
+                        <option v-for="opt in getFieldConfig(condition.field).options" :key="opt" :value="opt">
+                            {{ opt }}
+                        </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'"
+                        type="number"
+                        :value="condition.value"
+                        placeholder="0"
+                        class="w-24 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)]"
+                        @input="updateCondition(i, { value: $event.target.value })"
+                    />
+
+                    <!-- Text input (default) -->
+                    <input
+                        v-else
+                        type="text"
+                        :value="condition.value"
+                        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)]"
+                        @input="updateCondition(i, { value: $event.target.value })"
+                    />
+                </template>
+
+                <!-- Remove button -->
+                <button
+                    type="button"
+                    class="ml-auto flex h-7 w-7 items-center justify-center rounded-lg text-rose-400 transition-colors hover:bg-rose-500/10 hover:text-rose-300"
+                    @click="removeCondition(i)"
+                >
+                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+        </div>
+
+        <!-- Add condition button -->
+        <button
+            type="button"
+            class="flex items-center gap-1.5 rounded-lg border border-dashed border-[var(--esc-panel-border)] px-3 py-2 text-xs text-[var(--esc-panel-text-muted)] transition-colors hover:border-amber-500/50 hover:text-amber-400"
+            @click="addCondition"
+        >
+            <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+            </svg>
+            Add Condition
+        </button>
+
+        <!-- Preview -->
+        <div
+            v-if="previewText"
+            class="rounded-lg border border-amber-500/20 bg-amber-500/5 px-4 py-2.5 text-xs text-amber-300"
+        >
+            <span class="font-medium">Preview:</span> When {{ previewText }}
+        </div>
+    </div>
+</template>