@escalated-dev/escalated 0.8.0 → 0.9.0

package/src/components/FollowButton.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, inject } from 'vue';
+import { ref, computed, inject, watch } from 'vue';
 import { router } from '@inertiajs/vue3';
 
 const props = defineProps({
@@ -16,6 +16,25 @@ const following = ref(props.isFollowing);
 const count = ref(props.followersCount);
 const processing = ref(false);
 
+// Re-sync local state when the props change. Inertia reuses this component
+// instance when navigating between tickets (Vue does not re-run setup), so the
+// refs above are only seeded from the FIRST ticket's props. Without these
+// watchers the button shows a stale follow state — e.g. an already-followed
+// ticket renders as "Follow" — and the optimistic toggle below would also
+// drift from the server's authoritative value after a reload.
+watch(
+    () => props.isFollowing,
+    (value) => {
+        following.value = value;
+    },
+);
+watch(
+    () => props.followersCount,
+    (value) => {
+        count.value = value;
+    },
+);
+
 function toggle() {
     if (processing.value) return;
     processing.value = true;

package/src/components/MentionDropdown.vue

@@ -1,154 +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>
+<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

@@ -1,89 +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>
+<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

@@ -1,67 +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>
+<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>