@escalated-dev/escalated 0.3.5 → 0.5.0

package/src/pages/Agent/Dashboard.vue

@@ -1,63 +1,186 @@
-<script setup>
-import EscalatedLayout from '../../components/EscalatedLayout.vue';
-import StatsCard from '../../components/StatsCard.vue';
-
-defineProps({
-    stats: Object,
-    recentTickets: Array,
-});
-</script>
-
-<template>
-    <EscalatedLayout title="Agent Dashboard">
-        <div class="mb-8 grid grid-cols-2 gap-4 md:grid-cols-5">
-            <StatsCard label="Open Tickets" :value="stats.open" color="cyan" />
-            <StatsCard label="My Assigned" :value="stats.my_assigned" color="violet" />
-            <StatsCard label="Unassigned" :value="stats.unassigned" color="amber" />
-            <StatsCard label="SLA Breached" :value="stats.sla_breached" color="red" />
-            <StatsCard label="Resolved Today" :value="stats.resolved_today" color="green" />
-        </div>
-        <h2 class="mb-4 text-lg font-semibold text-neutral-200">Recent Tickets</h2>
-        <div class="overflow-hidden rounded-xl border border-white/[0.06] bg-neutral-900/60">
-            <table class="min-w-full divide-y divide-white/[0.06]">
-                <thead>
-                    <tr class="bg-white/[0.02]">
-                        <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Reference</th>
-                        <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Subject</th>
-                        <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Requester</th>
-                        <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Status</th>
-                        <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Priority</th>
-                        <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Assignee</th>
-                    </tr>
-                </thead>
-                <tbody class="divide-y divide-white/[0.04]">
-                    <tr v-for="ticket in recentTickets" :key="ticket.id" class="transition-colors hover:bg-white/[0.03]">
-                        <td class="px-4 py-3 text-sm">
-                            <a :href="route('escalated.agent.tickets.show', ticket.reference)" class="font-medium text-neutral-300 hover:text-white">{{ ticket.reference }}</a>
-                        </td>
-                        <td class="px-4 py-3 text-sm text-neutral-200">{{ ticket.subject }}</td>
-                        <td class="px-4 py-3 text-sm text-neutral-400">{{ ticket.requester?.name }}</td>
-                        <td class="px-4 py-3 text-sm">
-                            <span :class="[
-                                'inline-flex rounded-full px-2 py-0.5 text-xs font-medium ring-1',
-                                {
-                                    'bg-cyan-500/10 text-white ring-cyan-500/20': ticket.status === 'open',
-                                    'bg-blue-500/10 text-blue-400 ring-blue-500/20': ticket.status === 'in_progress',
-                                    'bg-emerald-500/10 text-emerald-400 ring-emerald-500/20': ticket.status === 'resolved',
-                                    'bg-rose-500/10 text-rose-400 ring-rose-500/20': ticket.status === 'escalated',
-                                    'bg-amber-500/10 text-amber-400 ring-amber-500/20': ticket.status === 'waiting_on_customer',
-                                    'bg-gray-500/10 text-neutral-400 ring-gray-500/20': ticket.status === 'closed',
-                                }
-                            ]">{{ ticket.status }}</span>
-                        </td>
-                        <td class="px-4 py-3 text-sm capitalize text-neutral-400">{{ ticket.priority }}</td>
-                        <td class="px-4 py-3 text-sm text-neutral-400">{{ ticket.assignee?.name || 'Unassigned' }}</td>
-                    </tr>
-                    <tr v-if="!recentTickets?.length">
-                        <td colspan="6" class="px-4 py-8 text-center text-sm text-neutral-500">No recent tickets</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </EscalatedLayout>
-</template>
+<script setup>
+import { computed, defineAsyncComponent } from 'vue';
+import { Link } from '@inertiajs/vue3';
+import EscalatedLayout from '../../components/EscalatedLayout.vue';
+import StatsCard from '../../components/StatsCard.vue';
+import StatusBadge from '../../components/StatusBadge.vue';
+import PriorityBadge from '../../components/PriorityBadge.vue';
+import PluginSlot from '../../components/PluginSlot.vue';
+import { usePluginExtensions } from '../../composables/usePluginExtensions';
+
+const props = defineProps({
+    stats: Object,
+    recentTickets: Array,
+    needsAttention: { type: Object, default: () => ({}) },
+    myPerformance: { type: Object, default: () => ({}) },
+});
+
+function timeAgo(date) {
+    if (!date) return '';
+    const diff = Date.now() - new Date(date).getTime();
+    const mins = Math.floor(diff / 60000);
+    if (mins < 60) return `${mins}m ago`;
+    const hrs = Math.floor(mins / 60);
+    if (hrs < 24) return `${hrs}h ago`;
+    const days = Math.floor(hrs / 24);
+    return `${days}d ago`;
+}
+
+function slaClass(ticket) {
+    if (ticket.sla_first_response_breached || ticket.sla_resolution_breached) return 'bg-rose-500';
+    if (ticket.first_response_due_at || ticket.resolution_due_at) {
+        const due = ticket.resolution_due_at || ticket.first_response_due_at;
+        const mins = (new Date(due) - Date.now()) / 60000;
+        if (mins < 30) return 'bg-amber-500';
+        return 'bg-emerald-500';
+    }
+    return '';
+}
+
+function truncate(str, len = 50) {
+    if (!str) return '';
+    return str.length > len ? str.slice(0, len) + '...' : str;
+}
+
+const hasSlaBreaching = computed(() => needsAttention.value?.sla_breaching?.length > 0);
+const hasUnassignedUrgent = computed(() => needsAttention.value?.unassigned_urgent?.length > 0);
+const needsAttention = computed(() => props.needsAttention);
+
+const { dashboardWidgets, getPageComponents } = usePluginExtensions();
+
+// Load a plugin widget component dynamically
+const loadWidgetComponent = (plugin, component) => {
+    return defineAsyncComponent(() =>
+        import(`../../../../../plugins/escalated/${plugin}/resources/js/Components/${component}.vue`)
+    );
+};
+</script>
+
+<template>
+    <EscalatedLayout title="Agent Dashboard">
+        <!-- Plugin: dashboard header slot -->
+        <PluginSlot slot="dashboard.header" :components="getPageComponents('dashboard', 'header')" />
+
+        <!-- Stats row -->
+        <div class="mb-8 grid grid-cols-2 gap-4 md:grid-cols-5">
+            <StatsCard label="Open Tickets" :value="stats.open" color="cyan" />
+            <StatsCard label="My Assigned" :value="stats.my_assigned" color="violet" />
+            <StatsCard label="Unassigned" :value="stats.unassigned" color="amber" />
+            <StatsCard label="SLA Breached" :value="stats.sla_breached" color="red" />
+            <StatsCard label="Resolved Today" :value="stats.resolved_today" color="green" />
+        </div>
+
+        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+            <div class="lg:col-span-2 space-y-6">
+                <!-- Needs Attention -->
+                <div v-if="hasSlaBreaching || hasUnassignedUrgent">
+                    <h2 class="mb-4 text-lg font-semibold text-neutral-200">Needs Attention</h2>
+                    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+                        <div v-if="hasSlaBreaching" class="rounded-xl border border-rose-500/20 bg-rose-500/5 p-4">
+                            <h3 class="mb-3 flex items-center gap-2 text-sm font-semibold text-rose-400">
+                                <span class="h-2 w-2 rounded-full bg-rose-500"></span>
+                                SLA Breaching
+                            </h3>
+                            <div v-for="ticket in needsAttention.sla_breaching" :key="ticket.id" class="mb-2 last:mb-0">
+                                <Link :href="route('escalated.agent.tickets.show', ticket.reference)"
+                                      class="flex items-center justify-between rounded-lg px-2 py-1.5 text-sm transition-colors hover:bg-white/[0.04]">
+                                    <span class="font-mono text-xs text-neutral-400">{{ ticket.reference }}</span>
+                                    <span class="truncate text-neutral-300" style="max-width: 140px">{{ ticket.requester?.name }}</span>
+                                </Link>
+                            </div>
+                        </div>
+                        <div v-if="hasUnassignedUrgent" class="rounded-xl border border-amber-500/20 bg-amber-500/5 p-4">
+                            <h3 class="mb-3 flex items-center gap-2 text-sm font-semibold text-amber-400">
+                                <span class="h-2 w-2 rounded-full bg-amber-500"></span>
+                                Unassigned Urgent
+                            </h3>
+                            <div v-for="ticket in needsAttention.unassigned_urgent" :key="ticket.id" class="mb-2 last:mb-0">
+                                <Link :href="route('escalated.agent.tickets.show', ticket.reference)"
+                                      class="flex items-center justify-between rounded-lg px-2 py-1.5 text-sm transition-colors hover:bg-white/[0.04]">
+                                    <span class="font-mono text-xs text-neutral-400">{{ ticket.reference }}</span>
+                                    <PriorityBadge :priority="ticket.priority" />
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Recent Tickets -->
+                <div>
+                    <h2 class="mb-4 text-lg font-semibold text-neutral-200">Recent Tickets</h2>
+                    <div class="overflow-hidden rounded-xl border border-white/[0.06] bg-neutral-900/60">
+                        <table class="min-w-full divide-y divide-white/[0.06]">
+                            <thead>
+                                <tr class="bg-white/[0.02]">
+                                    <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Reference</th>
+                                    <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Subject</th>
+                                    <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Requester</th>
+                                    <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Status</th>
+                                    <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Priority</th>
+                                    <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Assignee</th>
+                                    <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Last Reply</th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-y divide-white/[0.04]">
+                                <tr v-for="ticket in recentTickets" :key="ticket.id" class="transition-colors hover:bg-white/[0.03]">
+                                    <td class="whitespace-nowrap px-4 py-3 text-sm font-medium">
+                                        <div class="flex items-center gap-2">
+                                            <span v-if="slaClass(ticket)" :class="['h-2 w-2 shrink-0 rounded-full', slaClass(ticket)]"></span>
+                                            <Link :href="route('escalated.agent.tickets.show', ticket.reference)" class="text-white hover:text-neutral-300">
+                                                {{ ticket.reference }}
+                                            </Link>
+                                        </div>
+                                    </td>
+                                    <td class="px-4 py-3 text-sm text-neutral-300">{{ truncate(ticket.subject) }}</td>
+                                    <td class="px-4 py-3 text-sm text-neutral-400">{{ ticket.requester?.name }}</td>
+                                    <td class="px-4 py-3"><StatusBadge :status="ticket.status" /></td>
+                                    <td class="px-4 py-3"><PriorityBadge :priority="ticket.priority" /></td>
+                                    <td class="px-4 py-3 text-sm text-neutral-500">{{ ticket.assignee?.name || 'Unassigned' }}</td>
+                                    <td class="whitespace-nowrap px-4 py-3 text-sm text-neutral-600">
+                                        <template v-if="ticket.latest_reply">
+                                            <div class="text-neutral-400">{{ timeAgo(ticket.latest_reply.created_at) }}</div>
+                                            <div class="text-xs text-neutral-600">{{ ticket.latest_reply.author?.name || '' }}</div>
+                                        </template>
+                                        <span v-else class="text-neutral-700">—</span>
+                                    </td>
+                                </tr>
+                                <tr v-if="!recentTickets?.length">
+                                    <td colspan="7" class="px-4 py-8 text-center text-sm text-neutral-500">No recent tickets</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+
+            <!-- My Performance sidebar -->
+            <div class="space-y-4">
+                <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
+                    <h3 class="mb-4 text-sm font-semibold text-neutral-200">My Performance</h3>
+                    <dl class="space-y-3">
+                        <div class="flex items-center justify-between">
+                            <dt class="text-sm text-neutral-500">Resolved This Week</dt>
+                            <dd class="text-lg font-bold text-white">{{ myPerformance.resolved_this_week || 0 }}</dd>
+                        </div>
+                    </dl>
+                </div>
+            </div>
+        </div>
+
+        <!-- Plugin dashboard widgets -->
+        <div v-if="dashboardWidgets.length" class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div v-for="widget in dashboardWidgets" :key="widget.id"
+                 :class="['rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5',
+                          widget.width === 'full' ? 'md:col-span-2' : '']">
+                <h3 v-if="widget.title" class="mb-3 text-sm font-semibold text-neutral-200">{{ widget.title }}</h3>
+                <component
+                    :is="loadWidgetComponent(widget.plugin, widget.component)"
+                    v-bind="widget.data || {}"
+                />
+            </div>
+        </div>
+
+        <!-- Plugin: dashboard footer slot -->
+        <PluginSlot slot="dashboard.footer" :components="getPageComponents('dashboard', 'footer')" />
+    </EscalatedLayout>
+</template>

package/src/pages/Agent/TicketIndex.vue

@@ -1,21 +1,38 @@
-<script setup>
-import EscalatedLayout from '../../components/EscalatedLayout.vue';
-import TicketList from '../../components/TicketList.vue';
-import TicketFilters from '../../components/TicketFilters.vue';
-
-defineProps({
-    tickets: Object,
-    filters: Object,
-    departments: Array,
-    tags: Array,
-});
-</script>
-
-<template>
-    <EscalatedLayout title="Ticket Queue">
-        <div class="mb-6">
-            <TicketFilters :filters="filters" :route="route('escalated.agent.tickets.index')" :departments="departments" :tags="tags" show-assignee />
-        </div>
-        <TicketList :tickets="tickets" route-prefix="escalated.agent.tickets" show-assignee />
-    </EscalatedLayout>
-</template>
+<script setup>
+import { ref } from 'vue';
+import { usePage, router } from '@inertiajs/vue3';
+import EscalatedLayout from '../../components/EscalatedLayout.vue';
+import TicketList from '../../components/TicketList.vue';
+import TicketFilters from '../../components/TicketFilters.vue';
+import QuickFilters from '../../components/QuickFilters.vue';
+import BulkActionBar from '../../components/BulkActionBar.vue';
+
+defineProps({
+    tickets: Object,
+    filters: Object,
+    departments: Array,
+    tags: Array,
+});
+
+const page = usePage();
+const selectedIds = ref([]);
+
+function applyQuickFilter(filter) {
+    router.get(route('escalated.agent.tickets.index'), filter, { preserveState: true });
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Ticket Queue">
+        <div class="mb-4">
+            <QuickFilters :current-user-id="page.props.auth?.user?.id" @filter="applyQuickFilter" />
+        </div>
+        <div class="mb-6">
+            <TicketFilters :filters="filters" :route="route('escalated.agent.tickets.index')" :departments="departments" :tags="tags" show-assignee show-following />
+        </div>
+        <TicketList :tickets="tickets" route-prefix="escalated.agent.tickets" show-assignee
+                    selectable v-model:selected-ids="selectedIds" />
+        <BulkActionBar :selected-ids="selectedIds" :bulk-route="route('escalated.agent.tickets.bulk')"
+                       :departments="departments" @clear="selectedIds = []" />
+    </EscalatedLayout>
+</template>

package/src/pages/Agent/TicketShow.vue

@@ -1,108 +1,155 @@
-<script setup>
-import EscalatedLayout from '../../components/EscalatedLayout.vue';
-import StatusBadge from '../../components/StatusBadge.vue';
-import PriorityBadge from '../../components/PriorityBadge.vue';
-import ReplyThread from '../../components/ReplyThread.vue';
-import ReplyComposer from '../../components/ReplyComposer.vue';
-import TicketSidebar from '../../components/TicketSidebar.vue';
-import AttachmentList from '../../components/AttachmentList.vue';
-import { router, useForm, usePage } from '@inertiajs/vue3';
-import { ref } from 'vue';
-
-const props = defineProps({
-    ticket: Object,
-    departments: Array,
-    tags: Array,
-    cannedResponses: Array,
-});
-
-const page = usePage();
-const activeTab = ref('reply');
-
-const statusForm = useForm({ status: '' });
-const priorityForm = useForm({ priority: '' });
-const assignForm = useForm({ agent_id: '' });
-
-function changeStatus(status) {
-    statusForm.status = status;
-    statusForm.post(route('escalated.agent.tickets.status', props.ticket.reference), { preserveScroll: true });
-}
-
-function changePriority(priority) {
-    priorityForm.priority = priority;
-    priorityForm.post(route('escalated.agent.tickets.priority', props.ticket.reference), { preserveScroll: true });
-}
-
-function assignToMe() {
-    assignForm.agent_id = page.props.auth.user.id;
-    assignForm.post(route('escalated.agent.tickets.assign', props.ticket.reference), { preserveScroll: true });
-}
-</script>
-
-<template>
-    <EscalatedLayout :title="ticket.subject">
-        <div class="mb-5 flex flex-wrap items-center gap-3">
-            <span class="text-sm font-mono font-medium text-white">{{ ticket.reference }}</span>
-            <StatusBadge :status="ticket.status" />
-            <PriorityBadge :priority="ticket.priority" />
-            <span class="text-sm text-neutral-500">by {{ ticket.requester?.name }}</span>
-            <div class="ml-auto flex gap-2">
-                <button v-if="!ticket.assigned_to" @click="assignToMe"
-                        class="rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-3 py-1.5 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400">
-                    Assign to Me
-                </button>
-                <select @change="changeStatus($event.target.value); $event.target.value = ''"
-                        class="rounded-lg border border-white/10 bg-neutral-950 px-3 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10">
-                    <option value="">Change Status...</option>
-                    <option value="in_progress">In Progress</option>
-                    <option value="waiting_on_customer">Waiting on Customer</option>
-                    <option value="resolved">Resolved</option>
-                    <option value="closed">Closed</option>
-                </select>
-                <select @change="changePriority($event.target.value); $event.target.value = ''"
-                        class="rounded-lg border border-white/10 bg-neutral-950 px-3 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10">
-                    <option value="">Change Priority...</option>
-                    <option value="low">Low</option>
-                    <option value="medium">Medium</option>
-                    <option value="high">High</option>
-                    <option value="urgent">Urgent</option>
-                    <option value="critical">Critical</option>
-                </select>
-            </div>
-        </div>
-        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
-            <div class="lg:col-span-2 space-y-6">
-                <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
-                    <p class="whitespace-pre-wrap text-sm text-neutral-300">{{ ticket.description }}</p>
-                    <AttachmentList v-if="ticket.attachments?.length" :attachments="ticket.attachments" class="mt-3" />
-                </div>
-                <div>
-                    <div class="mb-4 flex gap-4 border-b border-white/[0.06]">
-                        <button @click="activeTab = 'reply'"
-                                :class="['pb-2 text-sm font-medium transition-colors', activeTab === 'reply' ? 'border-b-2 border-cyan-500 text-white' : 'text-neutral-500 hover:text-neutral-300']">
-                            Reply
-                        </button>
-                        <button @click="activeTab = 'note'"
-                                :class="['pb-2 text-sm font-medium transition-colors', activeTab === 'note' ? 'border-b-2 border-amber-500 text-amber-400' : 'text-neutral-500 hover:text-neutral-300']">
-                            Internal Note
-                        </button>
-                    </div>
-                    <ReplyComposer v-if="activeTab === 'reply'"
-                                   :action="route('escalated.agent.tickets.reply', ticket.reference)"
-                                   :canned-responses="cannedResponses" />
-                    <ReplyComposer v-else
-                                   :action="route('escalated.agent.tickets.note', ticket.reference)"
-                                   placeholder="Write an internal note..."
-                                   submit-label="Add Note" />
-                </div>
-                <div>
-                    <h2 class="mb-4 text-lg font-semibold text-neutral-200">Conversation</h2>
-                    <ReplyThread :replies="ticket.replies || []" :current-user-id="page.props.auth?.user?.id" />
-                </div>
-            </div>
-            <div>
-                <TicketSidebar :ticket="ticket" :tags="tags" :departments="departments" />
-            </div>
-        </div>
-    </EscalatedLayout>
-</template>
+<script setup>
+import EscalatedLayout from '../../components/EscalatedLayout.vue';
+import StatusBadge from '../../components/StatusBadge.vue';
+import PriorityBadge from '../../components/PriorityBadge.vue';
+import ReplyThread from '../../components/ReplyThread.vue';
+import ReplyComposer from '../../components/ReplyComposer.vue';
+import TicketSidebar from '../../components/TicketSidebar.vue';
+import AttachmentList from '../../components/AttachmentList.vue';
+import MacroDropdown from '../../components/MacroDropdown.vue';
+import FollowButton from '../../components/FollowButton.vue';
+import PresenceIndicator from '../../components/PresenceIndicator.vue';
+import PinnedNotes from '../../components/PinnedNotes.vue';
+import KeyboardShortcutHelp from '../../components/KeyboardShortcutHelp.vue';
+import PluginSlot from '../../components/PluginSlot.vue';
+import { useKeyboardShortcuts } from '../../composables/useKeyboardShortcuts';
+import { usePluginExtensions } from '../../composables/usePluginExtensions';
+import { router, useForm, usePage } from '@inertiajs/vue3';
+import { ref } from 'vue';
+
+const props = defineProps({
+    ticket: Object,
+    departments: Array,
+    tags: Array,
+    cannedResponses: Array,
+    macros: { type: Array, default: () => [] },
+    is_following: { type: Boolean, default: false },
+    followers_count: { type: Number, default: 0 },
+});
+
+const page = usePage();
+const activeTab = ref('reply');
+const showShortcutHelp = ref(false);
+const replyComposerRef = ref(null);
+const statusSelectRef = ref(null);
+const prioritySelectRef = ref(null);
+
+const statusForm = useForm({ status: '' });
+const priorityForm = useForm({ priority: '' });
+const assignForm = useForm({ agent_id: '' });
+
+function changeStatus(status) {
+    statusForm.status = status;
+    statusForm.post(route('escalated.agent.tickets.status', props.ticket.reference), { preserveScroll: true });
+}
+
+function changePriority(priority) {
+    priorityForm.priority = priority;
+    priorityForm.post(route('escalated.agent.tickets.priority', props.ticket.reference), { preserveScroll: true });
+}
+
+function assignToMe() {
+    assignForm.agent_id = page.props.auth.user.id;
+    assignForm.post(route('escalated.agent.tickets.assign', props.ticket.reference), { preserveScroll: true });
+}
+
+function toggleFollow() {
+    router.post(route('escalated.agent.tickets.follow', props.ticket.reference), {}, { preserveScroll: true });
+}
+
+const { getPageComponents } = usePluginExtensions();
+
+// Keyboard shortcuts
+useKeyboardShortcuts({
+    'r': () => { activeTab.value = 'reply'; replyComposerRef.value?.$el?.querySelector('textarea')?.focus(); },
+    'n': () => { activeTab.value = 'note'; },
+    's': () => { statusSelectRef.value?.focus(); },
+    'p': () => { prioritySelectRef.value?.focus(); },
+    'f': () => { toggleFollow(); },
+    '?': () => { showShortcutHelp.value = true; },
+});
+</script>
+
+<template>
+    <EscalatedLayout :title="ticket.subject">
+        <!-- Plugin: ticket show header slot -->
+        <PluginSlot slot="ticket.show.header" :components="getPageComponents('ticket.show', 'header')" />
+
+        <div class="mb-5 flex flex-wrap items-center gap-3">
+            <span class="text-sm font-mono font-medium text-white">{{ ticket.reference }}</span>
+            <StatusBadge :status="ticket.status" />
+            <PriorityBadge :priority="ticket.priority" />
+            <span class="text-sm text-neutral-500">by {{ ticket.requester?.name }}</span>
+            <PresenceIndicator :ticket-reference="ticket.reference" route-prefix="escalated.agent" />
+            <div class="ml-auto flex items-center gap-2">
+                <FollowButton :is-following="is_following" :followers-count="followers_count"
+                              :action="route('escalated.agent.tickets.follow', ticket.reference)" />
+                <MacroDropdown v-if="macros.length" :macros="macros"
+                               :action="route('escalated.agent.tickets.macro', ticket.reference)" />
+                <button v-if="!ticket.assigned_to" @click="assignToMe"
+                        class="rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-3 py-1.5 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400">
+                    Assign to Me
+                </button>
+                <select ref="statusSelectRef" @change="changeStatus($event.target.value); $event.target.value = ''"
+                        class="rounded-lg border border-white/10 bg-neutral-950 px-3 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10">
+                    <option value="">Change Status...</option>
+                    <option value="in_progress">In Progress</option>
+                    <option value="waiting_on_customer">Waiting on Customer</option>
+                    <option value="resolved">Resolved</option>
+                    <option value="closed">Closed</option>
+                </select>
+                <select ref="prioritySelectRef" @change="changePriority($event.target.value); $event.target.value = ''"
+                        class="rounded-lg border border-white/10 bg-neutral-950 px-3 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10">
+                    <option value="">Change Priority...</option>
+                    <option value="low">Low</option>
+                    <option value="medium">Medium</option>
+                    <option value="high">High</option>
+                    <option value="urgent">Urgent</option>
+                    <option value="critical">Critical</option>
+                </select>
+                <!-- Plugin: ticket show actions slot -->
+                <PluginSlot slot="ticket.show.actions" :components="getPageComponents('ticket.show', 'actions')" />
+            </div>
+        </div>
+        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+            <div class="lg:col-span-2 space-y-6">
+                <PinnedNotes v-if="ticket.pinned_notes?.length" :notes="ticket.pinned_notes"
+                             :ticket-reference="ticket.reference" route-prefix="escalated.agent" />
+                <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
+                    <p class="whitespace-pre-wrap text-sm text-neutral-300">{{ ticket.description }}</p>
+                    <AttachmentList v-if="ticket.attachments?.length" :attachments="ticket.attachments" class="mt-3" />
+                </div>
+                <div>
+                    <div class="mb-4 flex gap-4 border-b border-white/[0.06]">
+                        <button @click="activeTab = 'reply'"
+                                :class="['pb-2 text-sm font-medium transition-colors', activeTab === 'reply' ? 'border-b-2 border-cyan-500 text-white' : 'text-neutral-500 hover:text-neutral-300']">
+                            Reply
+                        </button>
+                        <button @click="activeTab = 'note'"
+                                :class="['pb-2 text-sm font-medium transition-colors', activeTab === 'note' ? 'border-b-2 border-amber-500 text-amber-400' : 'text-neutral-500 hover:text-neutral-300']">
+                            Internal Note
+                        </button>
+                    </div>
+                    <ReplyComposer v-if="activeTab === 'reply'" ref="replyComposerRef"
+                                   :action="route('escalated.agent.tickets.reply', ticket.reference)"
+                                   :canned-responses="cannedResponses" />
+                    <ReplyComposer v-else
+                                   :action="route('escalated.agent.tickets.note', ticket.reference)"
+                                   placeholder="Write an internal note..."
+                                   submit-label="Add Note" />
+                </div>
+                <div>
+                    <h2 class="mb-4 text-lg font-semibold text-neutral-200">Conversation</h2>
+                    <ReplyThread :replies="ticket.replies || []" :current-user-id="page.props.auth?.user?.id"
+                                 :ticket-reference="ticket.reference" route-prefix="escalated.agent" pinnable />
+                </div>
+            </div>
+            <div class="space-y-6">
+                <TicketSidebar :ticket="ticket" :tags="tags" :departments="departments" />
+                <!-- Plugin: ticket show sidebar slot -->
+                <PluginSlot slot="ticket.show.sidebar" :components="getPageComponents('ticket.show', 'sidebar')" />
+            </div>
+        </div>
+        <KeyboardShortcutHelp v-model:show="showShortcutHelp" context="detail" />
+    </EscalatedLayout>
+</template>