@escalated-dev/escalated 0.7.0 → 0.8.0

package/src/components/MacroDropdown.vue

@@ -1,150 +1,150 @@
-<script setup>
-import { ref, computed, inject } from 'vue';
-import { router } from '@inertiajs/vue3';
-
-const props = defineProps({
-    macros: { type: Array, default: () => [] },
-    action: { type: String, required: true },
-});
-
-const escDark = inject(
-    'esc-dark',
-    computed(() => false),
-);
-const open = ref(false);
-const processing = ref(false);
-
-function applyMacro(macroId) {
-    if (processing.value) return;
-    processing.value = true;
-    router.post(
-        props.action,
-        { macro_id: macroId },
-        {
-            preserveScroll: true,
-            onFinish: () => {
-                processing.value = false;
-                open.value = false;
-            },
-        },
-    );
-}
-
-function toggle() {
-    open.value = !open.value;
-}
-
-function close() {
-    open.value = false;
-}
-</script>
-
-<template>
-    <div class="relative">
-        <!-- Trigger button -->
-        <button
-            :class="[
-                'inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
-                escDark
-                    ? 'border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-secondary)] hover:bg-[var(--esc-panel-hover)]'
-                    : 'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50',
-            ]"
-            :disabled="processing"
-            aria-label="Apply macro"
-            :aria-expanded="open"
-            @click="toggle"
-        >
-            <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="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"
-                />
-            </svg>
-            Apply Macro
-            <svg
-                :class="['h-4 w-4 transition-transform', open && 'rotate-180']"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="1.5"
-                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>
-        </button>
-
-        <!-- Backdrop -->
-        <div v-if="open" class="fixed inset-0 z-30" @click="close"></div>
-
-        <!-- Dropdown -->
-        <Transition
-            enter-active-class="transition duration-100 ease-out"
-            enter-from-class="scale-95 opacity-0"
-            enter-to-class="scale-100 opacity-100"
-            leave-active-class="transition duration-75 ease-in"
-            leave-from-class="scale-100 opacity-100"
-            leave-to-class="scale-95 opacity-0"
-        >
-            <div
-                v-if="open"
-                :class="[
-                    'absolute right-0 z-40 mt-1 w-64 overflow-hidden rounded-xl border shadow-xl',
-                    escDark
-                        ? 'border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]'
-                        : 'border-gray-200 bg-white',
-                ]"
-            >
-                <div
-                    :class="[
-                        'px-3 py-2 text-xs font-semibold uppercase tracking-wider',
-                        escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500',
-                    ]"
-                >
-                    Macros
-                </div>
-                <div class="max-h-64 overflow-y-auto" role="menu">
-                    <div
-                        v-if="!macros.length"
-                        :class="[
-                            'px-3 py-4 text-center text-sm',
-                            escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-400',
-                        ]"
-                    >
-                        No macros available
-                    </div>
-                    <button
-                        v-for="macro in macros"
-                        :key="macro.id"
-                        role="menuitem"
-                        :disabled="processing"
-                        :class="[
-                            'flex w-full flex-col px-3 py-2.5 text-left transition-colors',
-                            escDark
-                                ? 'hover:bg-[var(--esc-panel-hover)] disabled:opacity-50'
-                                : 'hover:bg-gray-50 disabled:opacity-50',
-                        ]"
-                        @click="applyMacro(macro.id)"
-                    >
-                        <span
-                            :class="[
-                                'text-sm font-medium',
-                                escDark ? 'text-[var(--esc-panel-text-secondary)]' : 'text-gray-900',
-                            ]"
-                        >
-                            {{ macro.name }}
-                        </span>
-                        <span
-                            v-if="macro.description"
-                            :class="[
-                                'mt-0.5 text-xs',
-                                escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500',
-                            ]"
-                        >
-                            {{ macro.description }}
-                        </span>
-                    </button>
-                </div>
-            </div>
-        </Transition>
-    </div>
-</template>
+<script setup>
+import { ref, computed, inject } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    macros: { type: Array, default: () => [] },
+    action: { type: String, required: true },
+});
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+const open = ref(false);
+const processing = ref(false);
+
+function applyMacro(macroId) {
+    if (processing.value) return;
+    processing.value = true;
+    router.post(
+        props.action,
+        { macro_id: macroId },
+        {
+            preserveScroll: true,
+            onFinish: () => {
+                processing.value = false;
+                open.value = false;
+            },
+        },
+    );
+}
+
+function toggle() {
+    open.value = !open.value;
+}
+
+function close() {
+    open.value = false;
+}
+</script>
+
+<template>
+    <div class="relative">
+        <!-- Trigger button -->
+        <button
+            :class="[
+                'inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                escDark
+                    ? 'border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-secondary)] hover:bg-[var(--esc-panel-hover)]'
+                    : 'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50',
+            ]"
+            :disabled="processing"
+            aria-label="Apply macro"
+            :aria-expanded="open"
+            @click="toggle"
+        >
+            <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="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"
+                />
+            </svg>
+            Apply Macro
+            <svg
+                :class="['h-4 w-4 transition-transform', open && 'rotate-180']"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                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>
+        </button>
+
+        <!-- Backdrop -->
+        <div v-if="open" class="fixed inset-0 z-30" @click="close"></div>
+
+        <!-- Dropdown -->
+        <Transition
+            enter-active-class="transition duration-100 ease-out"
+            enter-from-class="scale-95 opacity-0"
+            enter-to-class="scale-100 opacity-100"
+            leave-active-class="transition duration-75 ease-in"
+            leave-from-class="scale-100 opacity-100"
+            leave-to-class="scale-95 opacity-0"
+        >
+            <div
+                v-if="open"
+                :class="[
+                    'absolute right-0 z-40 mt-1 w-64 overflow-hidden rounded-xl border shadow-xl',
+                    escDark
+                        ? 'border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]'
+                        : 'border-gray-200 bg-white',
+                ]"
+            >
+                <div
+                    :class="[
+                        'px-3 py-2 text-xs font-semibold uppercase tracking-wider',
+                        escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500',
+                    ]"
+                >
+                    Macros
+                </div>
+                <div class="max-h-64 overflow-y-auto" role="menu">
+                    <div
+                        v-if="!macros.length"
+                        :class="[
+                            'px-3 py-4 text-center text-sm',
+                            escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-400',
+                        ]"
+                    >
+                        No macros available
+                    </div>
+                    <button
+                        v-for="macro in macros"
+                        :key="macro.id"
+                        role="menuitem"
+                        :disabled="processing"
+                        :class="[
+                            'flex w-full flex-col px-3 py-2.5 text-left transition-colors',
+                            escDark
+                                ? 'hover:bg-[var(--esc-panel-hover)] disabled:opacity-50'
+                                : 'hover:bg-gray-50 disabled:opacity-50',
+                        ]"
+                        @click="applyMacro(macro.id)"
+                    >
+                        <span
+                            :class="[
+                                'text-sm font-medium',
+                                escDark ? 'text-[var(--esc-panel-text-secondary)]' : 'text-gray-900',
+                            ]"
+                        >
+                            {{ macro.name }}
+                        </span>
+                        <span
+                            v-if="macro.description"
+                            :class="[
+                                'mt-0.5 text-xs',
+                                escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500',
+                            ]"
+                        >
+                            {{ macro.description }}
+                        </span>
+                    </button>
+                </div>
+            </div>
+        </Transition>
+    </div>
+</template>

package/src/components/MentionDropdown.vue

@@ -0,0 +1,154 @@
+<script setup>
+import { ref, computed, inject, watch, nextTick } from 'vue';
+
+const props = defineProps({
+    suggestions: { type: Array, default: () => [] },
+    visible: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['select', 'close']);
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+const activeIndex = ref(0);
+const listRef = ref(null);
+
+// Reset active index when suggestions change
+watch(
+    () => props.suggestions,
+    () => {
+        activeIndex.value = 0;
+    },
+);
+
+function scrollActiveIntoView() {
+    nextTick(() => {
+        const list = listRef.value;
+        if (!list) return;
+        const item = list.children[activeIndex.value];
+        if (item) {
+            item.scrollIntoView({ block: 'nearest' });
+        }
+    });
+}
+
+function onKeydown(e) {
+    if (!props.visible) return false;
+
+    if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        activeIndex.value = (activeIndex.value + 1) % props.suggestions.length;
+        scrollActiveIntoView();
+        return true;
+    }
+
+    if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        activeIndex.value = (activeIndex.value - 1 + props.suggestions.length) % props.suggestions.length;
+        scrollActiveIntoView();
+        return true;
+    }
+
+    if (e.key === 'Enter' || e.key === 'Tab') {
+        if (props.suggestions.length > 0) {
+            e.preventDefault();
+            emit('select', props.suggestions[activeIndex.value]);
+            return true;
+        }
+    }
+
+    if (e.key === 'Escape') {
+        e.preventDefault();
+        emit('close');
+        return true;
+    }
+
+    return false;
+}
+
+function selectAgent(agent) {
+    emit('select', agent);
+}
+
+defineExpose({ onKeydown });
+</script>
+
+<template>
+    <div
+        v-if="visible && (suggestions.length > 0 || loading)"
+        :class="[
+            'absolute z-50 w-64 max-h-48 overflow-y-auto rounded-lg border shadow-lg',
+            escDark ? 'border-white/10 bg-neutral-900 shadow-black/40' : 'border-gray-200 bg-white shadow-gray-200/50',
+        ]"
+        role="listbox"
+        aria-label="Agent suggestions"
+    >
+        <!-- Loading state -->
+        <div
+            v-if="loading && suggestions.length === 0"
+            :class="['px-3 py-2 text-xs', escDark ? 'text-neutral-500' : 'text-gray-400']"
+        >
+            Searching...
+        </div>
+
+        <!-- Suggestions list -->
+        <div ref="listRef">
+            <button
+                v-for="(agent, index) in suggestions"
+                :key="agent.id"
+                type="button"
+                role="option"
+                :aria-selected="index === activeIndex"
+                :class="[
+                    'flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition-colors',
+                    index === activeIndex
+                        ? escDark
+                            ? 'bg-white/[0.06] text-white'
+                            : 'bg-blue-50 text-blue-900'
+                        : escDark
+                          ? 'text-neutral-300 hover:bg-white/[0.04]'
+                          : 'text-gray-700 hover:bg-gray-50',
+                ]"
+                @click="selectAgent(agent)"
+                @mouseenter="activeIndex = index"
+            >
+                <!-- Avatar placeholder -->
+                <div
+                    :class="[
+                        'flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full text-xs font-semibold',
+                        escDark ? 'bg-cyan-500/20 text-cyan-400' : 'bg-blue-100 text-blue-700',
+                    ]"
+                >
+                    {{
+                        (agent.name || '')
+                            .split(' ')
+                            .map((w) => w[0])
+                            .join('')
+                            .toUpperCase()
+                            .slice(0, 2)
+                    }}
+                </div>
+                <div class="min-w-0 flex-1">
+                    <div :class="['truncate font-medium text-sm', escDark ? 'text-white' : 'text-gray-900']">
+                        {{ agent.name }}
+                    </div>
+                    <div :class="['truncate text-xs', escDark ? 'text-neutral-500' : 'text-gray-500']">
+                        {{ agent.email }}
+                    </div>
+                </div>
+            </button>
+        </div>
+
+        <!-- No results -->
+        <div
+            v-if="!loading && suggestions.length === 0 && visible"
+            :class="['px-3 py-2 text-xs', escDark ? 'text-neutral-500' : 'text-gray-400']"
+        >
+            No agents found
+        </div>
+    </div>
+</template>

package/src/components/MetricComparison.vue

@@ -0,0 +1,89 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    label: { type: String, required: true },
+    value: { type: [Number, String], required: true },
+    previousValue: { type: [Number, String], default: null },
+    format: { type: String, default: '' },
+    icon: { type: String, default: null },
+    invertColor: { type: Boolean, default: false },
+});
+
+const percentChange = computed(() => {
+    if (props.previousValue === null || props.previousValue === 0) return null;
+    const current = Number(props.value) || 0;
+    const previous = Number(props.previousValue) || 0;
+    if (previous === 0) return null;
+    return Math.round(((current - previous) / previous) * 100);
+});
+
+const changeDirection = computed(() => {
+    if (percentChange.value === null || percentChange.value === 0) return 'neutral';
+    return percentChange.value > 0 ? 'up' : 'down';
+});
+
+const changeColor = computed(() => {
+    if (changeDirection.value === 'neutral') return 'text-[var(--esc-panel-text-muted)]';
+    const isPositiveGood = !props.invertColor;
+    if (changeDirection.value === 'up') {
+        return isPositiveGood ? 'text-emerald-400' : 'text-red-400';
+    }
+    return isPositiveGood ? 'text-red-400' : 'text-emerald-400';
+});
+</script>
+
+<template>
+    <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-5">
+        <div class="flex items-start justify-between">
+            <div>
+                <div class="text-[13px] font-medium text-[var(--esc-panel-text-muted)]">
+                    {{ label }}
+                </div>
+                <div class="mt-2 text-2xl font-bold tracking-tight text-[var(--esc-panel-text)]">
+                    {{ value }}{{ format }}
+                </div>
+            </div>
+            <div v-if="icon" class="flex h-10 w-10 items-center justify-center rounded-lg bg-[var(--esc-panel-hover)]">
+                <svg
+                    class="h-5 w-5 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="icon" />
+                </svg>
+            </div>
+        </div>
+        <div v-if="previousValue !== null" class="mt-3 flex items-center gap-2">
+            <div class="flex items-center gap-1" :class="changeColor">
+                <svg
+                    v-if="changeDirection === 'up'"
+                    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="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
+                </svg>
+                <svg
+                    v-else-if="changeDirection === 'down'"
+                    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="M4.5 4.5l15 15m0 0V8.25m0 11.25H8.25" />
+                </svg>
+                <span v-else class="text-sm">--</span>
+                <span class="text-xs font-medium">
+                    {{ percentChange !== null ? `${Math.abs(percentChange)}%` : '--' }}
+                </span>
+            </div>
+            <span class="text-xs text-[var(--esc-panel-text-muted)]"> vs {{ previousValue }}{{ format }} prev </span>
+        </div>
+    </div>
+</template>

package/src/components/PercentileChart.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    title: { type: String, default: 'Percentile Distribution' },
+    percentiles: {
+        type: Object,
+        default: () => ({ p50: 0, p75: 0, p90: 0, p95: 0, p99: 0 }),
+    },
+    unit: { type: String, default: 'h' },
+    target: { type: Number, default: null },
+});
+
+const maxVal = computed(() => {
+    const vals = Object.values(props.percentiles);
+    return Math.max(...vals, 1);
+});
+
+const bars = computed(() => {
+    const entries = [
+        { key: 'p50', label: 'P50 (Median)', color: '#10b981' },
+        { key: 'p75', label: 'P75', color: '#f59e0b' },
+        { key: 'p90', label: 'P90', color: '#f97316' },
+        { key: 'p95', label: 'P95', color: '#ef4444' },
+        { key: 'p99', label: 'P99', color: '#dc2626' },
+    ];
+    return entries.map((e) => ({
+        ...e,
+        value: props.percentiles[e.key] || 0,
+        width: ((props.percentiles[e.key] || 0) / maxVal.value) * 100,
+    }));
+});
+</script>
+
+<template>
+    <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-5">
+        <h3 v-if="title" class="mb-4 text-sm font-semibold text-[var(--esc-panel-text-secondary)]">{{ title }}</h3>
+        <div class="space-y-3">
+            <div v-for="bar in bars" :key="bar.key" class="flex items-center gap-3">
+                <span class="w-24 shrink-0 text-xs font-medium text-[var(--esc-panel-text-muted)]">
+                    {{ bar.label }}
+                </span>
+                <div class="relative flex-1">
+                    <div class="h-6 overflow-hidden rounded-full bg-[var(--esc-panel-hover)]">
+                        <div
+                            class="h-full rounded-full transition-all duration-700 ease-out"
+                            :style="{ width: `${bar.width}%`, backgroundColor: bar.color }"
+                        ></div>
+                    </div>
+                    <div
+                        v-if="target !== null"
+                        class="absolute top-0 h-6 w-0.5 bg-white/40"
+                        :style="{ left: `${(target / maxVal) * 100}%` }"
+                        :title="`Target: ${target}${unit}`"
+                    ></div>
+                </div>
+                <span class="w-16 text-right text-xs font-bold text-[var(--esc-panel-text)]">
+                    {{ bar.value }}{{ unit }}
+                </span>
+            </div>
+        </div>
+        <div v-if="target !== null" class="mt-3 flex items-center gap-2 text-xs text-[var(--esc-panel-text-muted)]">
+            <span class="inline-block h-3 w-0.5 bg-white/40"></span>
+            Target: {{ target }}{{ unit }}
+        </div>
+    </div>
+</template>