@escalated-dev/escalated 0.5.0 → 0.7.0

package/src/components/AgentLoadIndicator.stories.js

@@ -0,0 +1,37 @@
+import AgentLoadIndicator from './AgentLoadIndicator.vue';
+
+export default {
+    title: 'Components/AgentLoadIndicator',
+    component: AgentLoadIndicator,
+};
+
+export const Low = { args: { current: 3, max: 20 } };
+export const Medium = { args: { current: 15, max: 20 } };
+export const High = { args: { current: 18, max: 20 } };
+export const Full = { args: { current: 20, max: 20 } };
+
+export const AllLevels = {
+    render: () => ({
+        components: { AgentLoadIndicator },
+        template: `
+            <div class="space-y-3" style="max-width: 200px;">
+                <div class="flex items-center justify-between">
+                    <span class="text-xs text-neutral-400">Light</span>
+                    <AgentLoadIndicator :current="3" :max="20" />
+                </div>
+                <div class="flex items-center justify-between">
+                    <span class="text-xs text-neutral-400">Moderate</span>
+                    <AgentLoadIndicator :current="12" :max="20" />
+                </div>
+                <div class="flex items-center justify-between">
+                    <span class="text-xs text-neutral-400">Heavy</span>
+                    <AgentLoadIndicator :current="16" :max="20" />
+                </div>
+                <div class="flex items-center justify-between">
+                    <span class="text-xs text-neutral-400">At Capacity</span>
+                    <AgentLoadIndicator :current="20" :max="20" />
+                </div>
+            </div>
+        `,
+    }),
+};

package/src/components/AgentLoadIndicator.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { computed, inject } from 'vue';
+
+const props = defineProps({
+    current: { type: Number, required: true },
+    max: { type: Number, required: true },
+});
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+const percentage = computed(() => {
+    if (props.max <= 0) return 100;
+    return Math.round((props.current / props.max) * 100);
+});
+
+const colorClass = computed(() => {
+    if (percentage.value >= 90) return 'bg-rose-500';
+    if (percentage.value >= 70) return 'bg-amber-500';
+    return 'bg-emerald-500';
+});
+
+const textColorClass = computed(() => {
+    if (percentage.value >= 90) return escDark.value ? 'text-rose-400' : 'text-rose-600';
+    if (percentage.value >= 70) return escDark.value ? 'text-amber-400' : 'text-amber-600';
+    return escDark.value ? 'text-emerald-400' : 'text-emerald-600';
+});
+</script>
+
+<template>
+    <div
+        class="flex items-center gap-2"
+        role="meter"
+        :aria-valuenow="percentage"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-label="Agent workload"
+    >
+        <div :class="['h-2 w-20 overflow-hidden rounded-full', escDark ? 'bg-white/[0.06]' : 'bg-gray-200']">
+            <div
+                :class="['h-full rounded-full transition-all', colorClass]"
+                :style="{ width: Math.min(percentage, 100) + '%' }"
+            ></div>
+        </div>
+        <span :class="['text-xs font-medium', textColorClass]">{{ current }}/{{ max }}</span>
+    </div>
+</template>

package/src/components/AgentPerformanceCard.vue

@@ -0,0 +1,44 @@
+<script setup>
+defineProps({
+    agent: { type: Object, required: true },
+});
+</script>
+
+<template>
+    <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
+        <div class="mb-4 flex items-center gap-3">
+            <div
+                class="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-cyan-500/20 to-violet-500/20 text-sm font-bold text-white"
+            >
+                {{ agent.agent_name?.charAt(0)?.toUpperCase() || '?' }}
+            </div>
+            <div>
+                <div class="text-sm font-semibold text-neutral-200">{{ agent.agent_name }}</div>
+                <div class="text-xs text-neutral-500">Agent</div>
+            </div>
+        </div>
+
+        <div class="grid grid-cols-2 gap-3">
+            <div class="rounded-lg bg-white/[0.03] p-3">
+                <div class="text-[11px] font-medium uppercase tracking-wider text-neutral-600">Total Tickets</div>
+                <div class="mt-1 text-lg font-bold text-white">{{ agent.total_tickets }}</div>
+            </div>
+            <div class="rounded-lg bg-white/[0.03] p-3">
+                <div class="text-[11px] font-medium uppercase tracking-wider text-neutral-600">Resolved</div>
+                <div class="mt-1 text-lg font-bold text-emerald-400">{{ agent.resolved_tickets }}</div>
+            </div>
+            <div class="rounded-lg bg-white/[0.03] p-3">
+                <div class="text-[11px] font-medium uppercase tracking-wider text-neutral-600">Avg Response</div>
+                <div class="mt-1 text-lg font-bold text-white">
+                    {{ agent.avg_response_hours ?? '—' }}<span class="text-xs text-neutral-500">h</span>
+                </div>
+            </div>
+            <div class="rounded-lg bg-white/[0.03] p-3">
+                <div class="text-[11px] font-medium uppercase tracking-wider text-neutral-600">Avg Resolution</div>
+                <div class="mt-1 text-lg font-bold text-white">
+                    {{ agent.avg_resolution_hours ?? '—' }}<span class="text-xs text-neutral-500">h</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

package/src/components/ArticleEditor.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+    modelValue: { type: String, default: '' },
+});
+
+const emit = defineEmits(['update:modelValue']);
+const textarea = ref(null);
+
+function insertMarkdown(before, after = '') {
+    const el = textarea.value;
+    if (!el) return;
+
+    const start = el.selectionStart;
+    const end = el.selectionEnd;
+    const text = props.modelValue;
+    const selected = text.substring(start, end);
+    const replacement = before + (selected || 'text') + after;
+    const newValue = text.substring(0, start) + replacement + text.substring(end);
+
+    emit('update:modelValue', newValue);
+
+    requestAnimationFrame(() => {
+        el.focus();
+        const cursorPos = start + before.length + (selected ? selected.length : 4);
+        el.setSelectionRange(cursorPos, cursorPos);
+    });
+}
+
+function insertBold() {
+    insertMarkdown('**', '**');
+}
+function insertItalic() {
+    insertMarkdown('*', '*');
+}
+function insertLink() {
+    insertMarkdown('[', '](url)');
+}
+function insertHeading() {
+    insertMarkdown('## ');
+}
+function insertList() {
+    insertMarkdown('- ');
+}
+
+const buttons = [
+    { label: 'Bold', action: insertBold, icon: 'B', cls: 'font-bold' },
+    { label: 'Italic', action: insertItalic, icon: 'I', cls: 'italic' },
+    { label: 'Link', action: insertLink, icon: 'Link', cls: '' },
+    { label: 'Heading', action: insertHeading, icon: 'H', cls: 'font-bold' },
+    { label: 'List', action: insertList, icon: 'List', cls: '' },
+];
+</script>
+
+<template>
+    <div>
+        <div class="flex gap-1 rounded-t-lg border border-white/[0.06] bg-neutral-800/60 px-2 py-1.5">
+            <button
+                v-for="btn in buttons"
+                :key="btn.label"
+                type="button"
+                :title="btn.label"
+                :class="[
+                    'rounded px-2.5 py-1 text-xs text-neutral-400 transition-colors hover:bg-white/[0.08] hover:text-neutral-200',
+                    btn.cls,
+                ]"
+                @click="btn.action"
+            >
+                {{ btn.icon }}
+            </button>
+        </div>
+        <textarea
+            ref="textarea"
+            :value="modelValue"
+            class="block w-full rounded-b-lg border border-t-0 border-white/[0.06] bg-white/[0.03] px-3 py-3 text-sm text-neutral-200 placeholder-neutral-600 focus:border-cyan-500/40 focus:outline-none focus:ring-1 focus:ring-cyan-500/40"
+            rows="16"
+            placeholder="Write your article content using Markdown..."
+            @input="emit('update:modelValue', $event.target.value)"
+        ></textarea>
+    </div>
+</template>

package/src/components/AssigneeSelect.vue

@@ -1,23 +1,37 @@
-<script setup>
-import { computed, inject } from 'vue';
-
-defineProps({
-    agents: { type: Array, required: true },
-    modelValue: { type: [Number, String], default: null },
-});
-
-const emit = defineEmits(['update:modelValue']);
-const dark = inject('esc-dark', computed(() => false));
-</script>
-
-<template>
-    <div>
-        <label :class="['mb-1 block text-xs font-medium', dark ? 'text-neutral-500' : 'text-gray-600']">Assigned To</label>
-        <select :value="modelValue" @change="emit('update:modelValue', $event.target.value || null)"
-                :class="['w-full rounded-md border px-2 py-1.5 text-sm focus:outline-none',
-                         dark ? 'border-white/10 bg-neutral-950 text-neutral-200 focus:border-white/20 focus:ring-1 focus:ring-white/10' : 'border-gray-300 focus:border-blue-500']">
-            <option value="">Unassigned</option>
-            <option v-for="agent in agents" :key="agent.id" :value="agent.id">{{ agent.name }}</option>
-        </select>
-    </div>
-</template>
+<script setup>
+import { computed, inject } from 'vue';
+
+defineProps({
+    agents: { type: Array, required: true },
+    modelValue: { type: [Number, String], default: null },
+});
+
+const emit = defineEmits(['update:modelValue']);
+const dark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+</script>
+
+<template>
+    <div>
+        <label
+            :class="['mb-1 block text-xs font-medium', dark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-600']"
+            >Assigned To</label
+        >
+        <select
+            :value="modelValue"
+            aria-label="Assign to agent"
+            :class="[
+                'w-full rounded-md border px-2 py-1.5 text-sm focus:outline-none',
+                dark
+                    ? 'border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:ring-1 focus:ring-[var(--esc-panel-border-input)]'
+                    : 'border-gray-300 focus:border-blue-500',
+            ]"
+            @change="emit('update:modelValue', $event.target.value || null)"
+        >
+            <option value="">Unassigned</option>
+            <option v-for="agent in agents" :key="agent.id" :value="agent.id">{{ agent.name }}</option>
+        </select>
+    </div>
+</template>

package/src/components/AttachmentList.vue

@@ -1,37 +1,53 @@
-<script setup>
-import { computed, inject } from 'vue';
-
-defineProps({
-    attachments: { type: Array, required: true },
-});
-
-const dark = inject('esc-dark', computed(() => false));
-
-function formatSize(bytes) {
-    if (bytes < 1024) return bytes + ' B';
-    if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
-    return (bytes / 1048576).toFixed(1) + ' MB';
-}
-
-function iconForMime(mime) {
-    if (mime?.startsWith('image/')) return '🖼️';
-    if (mime?.startsWith('video/')) return '🎬';
-    if (mime === 'application/pdf') return '📄';
-    return '📎';
-}
-</script>
-
-<template>
-    <div class="space-y-1">
-        <div v-for="attachment in attachments" :key="attachment.id"
-             :class="['flex items-center gap-2 rounded-lg border px-3 py-2 text-sm',
-                      dark ? 'border-white/[0.06] bg-white/[0.03]' : 'border-gray-200 bg-gray-50']">
-            <span>{{ iconForMime(attachment.mime_type) }}</span>
-            <a :href="attachment.url" target="_blank"
-               :class="['flex-1 truncate font-medium hover:underline', dark ? 'text-white' : 'text-blue-600']">
-                {{ attachment.original_filename }}
-            </a>
-            <span :class="['text-xs', dark ? 'text-neutral-500' : 'text-gray-400']">{{ formatSize(attachment.size) }}</span>
-        </div>
-    </div>
-</template>
+<script setup>
+import { computed, inject } from 'vue';
+
+defineProps({
+    attachments: { type: Array, required: true },
+});
+
+const dark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+function formatSize(bytes) {
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
+    return (bytes / 1048576).toFixed(1) + ' MB';
+}
+
+function iconForMime(mime) {
+    if (mime?.startsWith('image/')) return '🖼️';
+    if (mime?.startsWith('video/')) return '🎬';
+    if (mime === 'application/pdf') return '📄';
+    return '📎';
+}
+</script>
+
+<template>
+    <div class="space-y-1">
+        <div
+            v-for="attachment in attachments"
+            :key="attachment.id"
+            :class="[
+                'flex items-center gap-2 rounded-lg border px-3 py-2 text-sm',
+                dark ? 'border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)]' : 'border-gray-200 bg-gray-50',
+            ]"
+        >
+            <span>{{ iconForMime(attachment.mime_type) }}</span>
+            <a
+                :href="attachment.url"
+                target="_blank"
+                :class="[
+                    'flex-1 truncate font-medium hover:underline',
+                    dark ? 'text-[var(--esc-panel-text)]' : 'text-blue-600',
+                ]"
+            >
+                {{ attachment.original_filename }}
+            </a>
+            <span :class="['text-xs', dark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-400']">{{
+                formatSize(attachment.size)
+            }}</span>
+        </div>
+    </div>
+</template>

package/src/components/AuditLogEntry.vue

@@ -0,0 +1,95 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    log: { type: Object, required: true },
+});
+
+const actionColors = {
+    created: 'bg-emerald-500/10 text-emerald-400 ring-1 ring-emerald-500/20',
+    updated: 'bg-cyan-500/10 text-cyan-400 ring-1 ring-cyan-500/20',
+    deleted: 'bg-rose-500/10 text-rose-400 ring-1 ring-rose-500/20',
+};
+
+const actionColor = computed(
+    () => actionColors[props.log.action] || 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20',
+);
+
+const userInitial = computed(() => {
+    const name = props.log.user?.name || 'System';
+    return name.charAt(0).toUpperCase();
+});
+
+const resourceName = computed(() => {
+    const type = props.log.auditable_type || '';
+    return type.split('\\').pop() || type;
+});
+
+const changedFields = computed(() => {
+    if (props.log.action !== 'updated') return [];
+    const oldVals = props.log.old_values || {};
+    const newVals = props.log.new_values || {};
+    const keys = new Set([...Object.keys(oldVals), ...Object.keys(newVals)]);
+    return Array.from(keys).map((key) => ({
+        field: key,
+        old: oldVals[key] ?? '-',
+        new: newVals[key] ?? '-',
+    }));
+});
+
+const formattedDate = computed(() => {
+    if (!props.log.created_at) return '';
+    const d = new Date(props.log.created_at);
+    return d.toLocaleString();
+});
+</script>
+
+<template>
+    <div
+        class="flex gap-3 rounded-lg border border-white/[0.04] bg-white/[0.02] px-4 py-3 transition-colors hover:bg-white/[0.03]"
+    >
+        <!-- Avatar -->
+        <div
+            class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-cyan-500/20 to-violet-500/20 text-xs font-semibold text-neutral-300"
+        >
+            {{ userInitial }}
+        </div>
+
+        <div class="min-w-0 flex-1">
+            <div class="flex items-center gap-2 text-sm">
+                <span class="font-medium text-neutral-200">{{ log.user?.name || 'System' }}</span>
+                <span :class="['inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium', actionColor]">
+                    {{ log.action }}
+                </span>
+                <span class="text-neutral-400">{{ resourceName }}</span>
+                <span class="text-neutral-600">#{{ log.auditable_id }}</span>
+                <span class="ml-auto text-xs text-neutral-500">{{ formattedDate }}</span>
+            </div>
+
+            <!-- Changed fields diff -->
+            <div v-if="changedFields.length" class="mt-2 space-y-1">
+                <div v-for="change in changedFields" :key="change.field" class="flex items-center gap-2 text-xs">
+                    <span class="font-medium text-neutral-400">{{ change.field }}:</span>
+                    <span class="text-rose-400/70 line-through">{{
+                        typeof change.old === 'object' ? JSON.stringify(change.old) : change.old
+                    }}</span>
+                    <svg
+                        class="h-3 w-3 text-neutral-600"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        viewBox="0 0 24 24"
+                    >
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
+                    </svg>
+                    <span class="text-emerald-400/70">{{
+                        typeof change.new === 'object' ? JSON.stringify(change.new) : change.new
+                    }}</span>
+                </div>
+            </div>
+
+            <!-- IP address -->
+            <div v-if="log.ip_address" class="mt-1 text-xs text-neutral-600">IP: {{ log.ip_address }}</div>
+        </div>
+    </div>
+</template>

package/src/components/BulkActionBar.vue

@@ -10,21 +10,30 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['clear']);
-const escDark = inject('esc-dark', computed(() => false));
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
 const processing = ref(false);
 
 function performAction(action, value) {
     if (!props.selectedIds.length || processing.value) return;
     processing.value = true;
-    router.post(props.bulkRoute, {
-        ticket_ids: props.selectedIds,
-        action,
-        value,
-    }, {
-        preserveScroll: true,
-        onSuccess: () => emit('clear'),
-        onFinish: () => { processing.value = false; },
-    });
+    router.post(
+        props.bulkRoute,
+        {
+            ticket_ids: props.selectedIds,
+            action,
+            value,
+        },
+        {
+            preserveScroll: true,
+            onSuccess: () => emit('clear'),
+            onFinish: () => {
+                processing.value = false;
+            },
+        },
+    );
 }
 
 const statusOptions = [
@@ -42,53 +51,113 @@ const priorityOptions = [
     { value: 'critical', label: 'Critical' },
 ];
 
-const selectClass = computed(() => escDark.value
-    ? 'rounded-lg border border-white/10 bg-neutral-950 px-2 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10'
-    : 'rounded-md border border-gray-300 bg-white px-2 py-1.5 text-sm focus:border-blue-500 focus:outline-none'
+const selectClass = computed(() =>
+    escDark.value
+        ? '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)]'
+        : 'rounded-md border border-gray-300 bg-white px-2 py-1.5 text-sm focus:border-blue-500 focus:outline-none',
 );
 </script>
 
 <template>
-    <Transition enter-active-class="transition-all duration-200 ease-out" enter-from-class="translate-y-full opacity-0" enter-to-class="translate-y-0 opacity-100"
-                leave-active-class="transition-all duration-150 ease-in" leave-from-class="translate-y-0 opacity-100" leave-to-class="translate-y-full opacity-0">
-        <div v-if="selectedIds.length > 0"
-             :class="['fixed bottom-0 left-0 right-0 z-50 border-t px-6 py-3',
-                       escDark ? 'border-white/[0.06] bg-neutral-950/95 backdrop-blur-xl' : 'border-gray-200 bg-white/95 backdrop-blur-xl shadow-lg']">
+    <Transition
+        enter-active-class="transition-all duration-200 ease-out"
+        enter-from-class="translate-y-full opacity-0"
+        enter-to-class="translate-y-0 opacity-100"
+        leave-active-class="transition-all duration-150 ease-in"
+        leave-from-class="translate-y-0 opacity-100"
+        leave-to-class="translate-y-full opacity-0"
+    >
+        <div
+            v-if="selectedIds.length > 0"
+            :class="[
+                'fixed bottom-0 left-0 right-0 z-50 border-t px-6 py-3',
+                escDark
+                    ? 'border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface-alt)]/95 backdrop-blur-xl'
+                    : 'border-gray-200 bg-white/95 backdrop-blur-xl shadow-lg',
+            ]"
+        >
             <div class="mx-auto flex max-w-7xl items-center gap-4">
-                <span :class="['text-sm font-semibold', escDark ? 'text-white' : 'text-gray-900']">
+                <span
+                    :class="['text-sm font-semibold', escDark ? 'text-[var(--esc-panel-text)]' : 'text-gray-900']"
+                    aria-live="polite"
+                >
                     {{ selectedIds.length }} ticket{{ selectedIds.length !== 1 ? 's' : '' }} selected
                 </span>
 
-                <select @change="performAction('status', $event.target.value); $event.target.value = ''" :class="selectClass" :disabled="processing">
+                <select
+                    :class="selectClass"
+                    :disabled="processing"
+                    aria-label="Change status"
+                    @change="
+                        performAction('status', $event.target.value);
+                        $event.target.value = '';
+                    "
+                >
                     <option value="">Status...</option>
                     <option v-for="o in statusOptions" :key="o.value" :value="o.value">{{ o.label }}</option>
                 </select>
 
-                <select @change="performAction('priority', $event.target.value); $event.target.value = ''" :class="selectClass" :disabled="processing">
+                <select
+                    :class="selectClass"
+                    :disabled="processing"
+                    aria-label="Change priority"
+                    @change="
+                        performAction('priority', $event.target.value);
+                        $event.target.value = '';
+                    "
+                >
                     <option value="">Priority...</option>
                     <option v-for="o in priorityOptions" :key="o.value" :value="o.value">{{ o.label }}</option>
                 </select>
 
-                <select v-if="agents.length" @change="performAction('assign', $event.target.value); $event.target.value = ''" :class="selectClass" :disabled="processing">
+                <select
+                    v-if="agents.length"
+                    :class="selectClass"
+                    :disabled="processing"
+                    @change="
+                        performAction('assign', $event.target.value);
+                        $event.target.value = '';
+                    "
+                >
                     <option value="">Assign to...</option>
                     <option v-for="a in agents" :key="a.id" :value="a.id">{{ a.name }}</option>
                 </select>
 
-                <select v-if="departments.length" @change="performAction('department', $event.target.value); $event.target.value = ''" :class="selectClass" :disabled="processing">
+                <select
+                    v-if="departments.length"
+                    :class="selectClass"
+                    :disabled="processing"
+                    @change="
+                        performAction('department', $event.target.value);
+                        $event.target.value = '';
+                    "
+                >
                     <option value="">Department...</option>
                     <option v-for="d in departments" :key="d.id" :value="d.id">{{ d.name }}</option>
                 </select>
 
-                <button @click="performAction('delete', null)"
-                        :class="['rounded-lg px-3 py-1.5 text-sm font-medium transition-colors',
-                                 escDark ? 'bg-rose-500/15 text-rose-400 ring-1 ring-rose-500/20 hover:bg-rose-500/25' : 'bg-red-50 text-red-600 ring-1 ring-red-200 hover:bg-red-100']"
-                        :disabled="processing">
+                <button
+                    :class="[
+                        'rounded-lg px-3 py-1.5 text-sm font-medium transition-colors',
+                        escDark
+                            ? 'bg-rose-500/15 text-rose-400 ring-1 ring-rose-500/20 hover:bg-rose-500/25'
+                            : 'bg-red-50 text-red-600 ring-1 ring-red-200 hover:bg-red-100',
+                    ]"
+                    :disabled="processing"
+                    @click="performAction('delete', null)"
+                >
                     Delete
                 </button>
 
-                <button @click="emit('clear')"
-                        :class="['ml-auto rounded-lg px-3 py-1.5 text-sm font-medium transition-colors',
-                                 escDark ? 'text-neutral-400 hover:bg-white/[0.04] hover:text-neutral-200' : 'text-gray-500 hover:bg-gray-100 hover:text-gray-700']">
+                <button
+                    :class="[
+                        'ml-auto rounded-lg px-3 py-1.5 text-sm font-medium transition-colors',
+                        escDark
+                            ? 'text-[var(--esc-panel-text-tertiary)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]'
+                            : 'text-gray-500 hover:bg-gray-100 hover:text-gray-700',
+                    ]"
+                    @click="emit('clear')"
+                >
                     Deselect All
                 </button>
             </div>