@escalated-dev/escalated 0.7.0 → 0.8.0

package/src/components/AgentLoadIndicator.stories.js

@@ -1,37 +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>
-        `,
-    }),
-};
+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

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

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

@@ -1,82 +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>
+<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,37 +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-[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>
+<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

@@ -22,6 +22,18 @@ function iconForMime(mime) {
     if (mime === 'application/pdf') return '📄';
     return '📎';
 }
+
+function attachmentUrl(attachment) {
+    if (attachment.url) return attachment.url;
+    if (typeof window.route === 'function') {
+        try {
+            return window.route('escalated.attachments.download', attachment.id);
+        } catch {
+            // route not registered
+        }
+    }
+    return `/escalated/attachments/${attachment.id}/download`;
+}
 </script>
 
 <template>
@@ -36,7 +48,7 @@ function iconForMime(mime) {
         >
             <span>{{ iconForMime(attachment.mime_type) }}</span>
             <a
-                :href="attachment.url"
+                :href="attachmentUrl(attachment)"
                 target="_blank"
                 :class="[
                     'flex-1 truncate font-medium hover:underline',