@escalated-dev/escalated 0.4.0 → 0.6.0

package/README.md

@@ -18,6 +18,7 @@ Pick your framework:
 | **Laravel** | [escalated-dev/escalated-laravel](https://github.com/escalated-dev/escalated-laravel) | `composer require escalated-dev/escalated-laravel` |
 | **Rails** | [escalated-dev/escalated-rails](https://github.com/escalated-dev/escalated-rails) | `gem "escalated"` |
 | **Django** | [escalated-dev/escalated-django](https://github.com/escalated-dev/escalated-django) | `pip install escalated-django` |
+| **AdonisJS** | [escalated-dev/escalated-adonis](https://github.com/escalated-dev/escalated-adonis) | `npm install @escalated-dev/escalated-adonis` |
 
 Each backend repo has full setup instructions — install command, migrations, config, and frontend integration.
 
@@ -112,9 +113,27 @@ import BaseLayout from '@/layouts/BaseLayout.vue'
 app.use(EscalatedPlugin, { layout: BaseLayout })
 ```
 
+**AdonisJS** (Inertia + Vue 3):
+```js
+import { EscalatedPlugin } from '@escalated-dev/escalated'
+import AppLayout from '@/layouts/AppLayout.vue'
+
+app.use(EscalatedPlugin, { layout: AppLayout })
+```
+
 ## What's in This Repo
 
-All the Vue 3 + Inertia.js components that power the Escalated UI. These are identical across Laravel, Rails, and Django — the backend framework renders them via Inertia.
+All the Vue 3 + Inertia.js components that power the Escalated UI. These are identical across Laravel, Rails, Django, and AdonisJS — the backend framework renders them via Inertia.
+
+## 📸 Screenshots
+
+<p align="center">
+  <img src="docs/assets/escalated_admin_1.png" alt="Escalated Admin Screenshot 1" width="800" />
+</p>
+
+<p align="center">
+  <img src="docs/assets/escalated_admin_2.png" alt="Escalated Admin Screenshot 2" width="800" />
+</p>
 
 ### Pages
 
@@ -157,6 +176,20 @@ Reusable building blocks used across the pages above.
 | `AttachmentList` | File attachment display with download links |
 | `StatsCard` | Metric card with label, value, and trend |
 | `EscalatedLayout` | Top-level layout with navigation (supports host layout injection) |
+| `BulkActionBar` | Toolbar for batch operations on selected tickets |
+| `QuickFilters` | One-click filter chips (My Tickets, Unassigned, Urgent, SLA Breaching) |
+| `MacroDropdown` | Dropdown to apply multi-step macros to a ticket |
+| `FollowButton` | Toggle button to follow/unfollow a ticket |
+| `SatisfactionRating` | 1-5 star CSAT rating input with optional comment |
+| `KeyboardShortcutHelp` | Modal overlay showing all available keyboard shortcuts |
+| `PinnedNotes` | Display pinned internal notes at the top of the thread |
+| `PresenceIndicator` | Real-time indicator showing who is viewing a ticket |
+
+### Composables
+
+| Composable | Description |
+|------------|-------------|
+| `useKeyboardShortcuts` | Registers and manages keyboard shortcuts for ticket actions |
 
 ### Plugin
 
@@ -185,6 +218,17 @@ import CustomerIndex from '@escalated-dev/escalated/pages/Customer/Index.vue'
 
 Peer dependencies: `vue` ^3.3.0, `@inertiajs/vue3` ^1.0.0 || ^2.0.0
 
+## Ecosystem
+
+This is the shared frontend for the Escalated support ticket system. Backend packages available for every major framework:
+
+- **[Escalated for Laravel](https://github.com/escalated-dev/escalated-laravel)** — Laravel Composer package
+- **[Escalated for Rails](https://github.com/escalated-dev/escalated-rails)** — Ruby on Rails engine
+- **[Escalated for Django](https://github.com/escalated-dev/escalated-django)** — Django reusable app
+- **[Escalated for AdonisJS](https://github.com/escalated-dev/escalated-adonis)** — AdonisJS v6 package
+- **[Escalated for Filament](https://github.com/escalated-dev/escalated-filament)** — Filament v3 admin panel plugin
+- **[Shared Frontend](https://github.com/escalated-dev/escalated)** — Vue 3 + Inertia.js UI components (you are here)
+
 ## License
 
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@escalated-dev/escalated",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Vue 3 + Inertia.js UI components for Escalated — the embeddable support ticket system",
   "author": "Escalated Dev <hello@escalated.dev>",
   "license": "MIT",
@@ -21,17 +21,26 @@
   "exports": {
     "./components/*": "./src/components/*",
     "./pages/*": "./src/pages/*",
+    "./locales": "./src/locales/index.js",
+    "./locales/*": "./src/locales/*",
     ".": "./src/index.js"
   },
   "files": [
     "src"
   ],
   "peerDependencies": {
-    "vue": "^3.3.0",
-    "@inertiajs/vue3": "^1.0.0 || ^2.0.0"
+    "@inertiajs/vue3": "^1.0.0 || ^2.0.0",
+    "vue": "^3.3.0"
+  },
+  "scripts": {
+    "test": "vitest run"
   },
   "devDependencies": {
-    "vue": "^3.5.0",
-    "@inertiajs/vue3": "^2.0.0"
+    "@inertiajs/vue3": "^2.0.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vue/test-utils": "^2.4.0",
+    "happy-dom": "^15.0.0",
+    "vitest": "^2.0.0",
+    "vue": "^3.5.0"
   }
 }

package/src/components/ActivityTimeline.vue

@@ -1,66 +1,66 @@
-<script setup>
-import { computed, inject } from 'vue';
-
-defineProps({
-    activities: { type: Array, required: true },
-});
-
-const dark = inject('esc-dark', computed(() => false));
-
-const typeLabels = {
-    status_changed: 'changed status',
-    assigned: 'assigned ticket',
-    unassigned: 'unassigned ticket',
-    priority_changed: 'changed priority',
-    tag_added: 'added tag',
-    tag_removed: 'removed tag',
-    escalated: 'escalated ticket',
-    sla_breached: 'SLA breached',
-    replied: 'replied',
-    note_added: 'added note',
-    department_changed: 'changed department',
-    reopened: 'reopened ticket',
-    resolved: 'resolved ticket',
-    closed: 'closed ticket',
-};
-
-function formatDate(date) {
-    return new Date(date).toLocaleString();
-}
-
-function describeActivity(activity) {
-    const label = typeLabels[activity.type] || activity.type;
-    const who = activity.causer?.name || 'System';
-    const props = activity.properties || {};
-
-    if (activity.type === 'status_changed' && props.to) {
-        return `${who} ${label} to ${props.to}`;
-    }
-    if (activity.type === 'assigned' && props.agent_name) {
-        return `${who} assigned to ${props.agent_name}`;
-    }
-    if (activity.type === 'priority_changed' && props.to) {
-        return `${who} ${label} to ${props.to}`;
-    }
-    if ((activity.type === 'tag_added' || activity.type === 'tag_removed') && props.tag) {
-        return `${who} ${label} "${props.tag}"`;
-    }
-    if (activity.type === 'department_changed' && props.department) {
-        return `${who} ${label} to ${props.department}`;
-    }
-    return `${who} ${label}`;
-}
-</script>
-
-<template>
-    <div class="space-y-3">
-        <div v-for="activity in activities" :key="activity.id" class="flex gap-3 text-sm">
-            <div :class="['mt-1 h-2 w-2 flex-shrink-0 rounded-full', dark ? 'bg-neutral-600' : 'bg-gray-400']"></div>
-            <div class="flex-1">
-                <p :class="dark ? 'text-neutral-300' : 'text-gray-700'">{{ describeActivity(activity) }}</p>
-                <p :class="['text-xs', dark ? 'text-neutral-600' : 'text-gray-400']">{{ formatDate(activity.created_at) }}</p>
-            </div>
-        </div>
-        <div v-if="!activities?.length" :class="['py-4 text-center text-sm', dark ? 'text-neutral-600' : 'text-gray-500']">No activity yet.</div>
-    </div>
-</template>
+<script setup>
+import { computed, inject } from 'vue';
+
+defineProps({
+    activities: { type: Array, required: true },
+});
+
+const dark = inject('esc-dark', computed(() => false));
+
+const typeLabels = {
+    status_changed: 'changed status',
+    assigned: 'assigned ticket',
+    unassigned: 'unassigned ticket',
+    priority_changed: 'changed priority',
+    tag_added: 'added tag',
+    tag_removed: 'removed tag',
+    escalated: 'escalated ticket',
+    sla_breached: 'SLA breached',
+    replied: 'replied',
+    note_added: 'added note',
+    department_changed: 'changed department',
+    reopened: 'reopened ticket',
+    resolved: 'resolved ticket',
+    closed: 'closed ticket',
+};
+
+function formatDate(date) {
+    return new Date(date).toLocaleString();
+}
+
+function describeActivity(activity) {
+    const label = typeLabels[activity.type] || activity.type;
+    const who = activity.causer?.name || 'System';
+    const props = activity.properties || {};
+
+    if (activity.type === 'status_changed' && props.to) {
+        return `${who} ${label} to ${props.to}`;
+    }
+    if (activity.type === 'assigned' && props.agent_name) {
+        return `${who} assigned to ${props.agent_name}`;
+    }
+    if (activity.type === 'priority_changed' && props.to) {
+        return `${who} ${label} to ${props.to}`;
+    }
+    if ((activity.type === 'tag_added' || activity.type === 'tag_removed') && props.tag) {
+        return `${who} ${label} "${props.tag}"`;
+    }
+    if (activity.type === 'department_changed' && props.department) {
+        return `${who} ${label} to ${props.department}`;
+    }
+    return `${who} ${label}`;
+}
+</script>
+
+<template>
+    <div class="space-y-3">
+        <div v-for="activity in activities" :key="activity.id" class="flex gap-3 text-sm">
+            <div :class="['mt-1 h-2 w-2 flex-shrink-0 rounded-full', dark ? 'bg-neutral-600' : 'bg-gray-400']"></div>
+            <div class="flex-1">
+                <p :class="dark ? 'text-neutral-300' : 'text-gray-700'">{{ describeActivity(activity) }}</p>
+                <p :class="['text-xs', dark ? 'text-neutral-600' : 'text-gray-400']">{{ formatDate(activity.created_at) }}</p>
+            </div>
+        </div>
+        <div v-if="!activities?.length" :class="['py-4 text-center text-sm', dark ? 'text-neutral-600' : 'text-gray-500']">No activity yet.</div>
+    </div>
+</template>

package/src/components/AssigneeSelect.vue

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

package/src/components/EscalatedLayout.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, inject, provide } from 'vue';
 import { usePage, Link } from '@inertiajs/vue3';
+import { usePluginExtensions } from '../composables/usePluginExtensions';
 
 const props = defineProps({
     title: { type: String, default: 'Support' },
@@ -23,17 +24,36 @@ const isDark = computed(() => isAdminSection.value || isAgentSection.value);
 
 provide('esc-dark', isDark);
 
-const adminLinks = computed(() => [
-    { href: `${prefix.value}/admin/reports`, label: 'Reports', icon: 'M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z' },
-    { href: `${prefix.value}/admin/tickets`, label: 'Tickets', icon: 'M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z' },
-    { href: `${prefix.value}/admin/departments`, label: 'Departments', icon: 'M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 01-1.125-1.125v-3.75zM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-8.25zM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-2.25z' },
-    { href: `${prefix.value}/admin/sla-policies`, label: 'SLA Policies', icon: 'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z' },
-    { href: `${prefix.value}/admin/escalation-rules`, label: 'Escalation Rules', icon: 'M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12' },
-    { href: `${prefix.value}/admin/tags`, label: 'Tags', icon: 'M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z M6 6h.008v.008H6V6z' },
-    { href: `${prefix.value}/admin/canned-responses`, label: 'Canned Responses', icon: 'M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z' },
-    { href: `${prefix.value}/admin/macros`, label: 'Macros', icon: 'M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z' },
-    { href: `${prefix.value}/admin/settings`, label: 'Settings', icon: 'M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.204-.107-.397.165-.71.505-.781.93l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894zM15 12a3 3 0 11-6 0 3 3 0 016 0z' },
-]);
+const { menuItems: pluginMenuItems } = usePluginExtensions();
+
+const adminLinks = computed(() => {
+    const p = prefix.value;
+    const coreLinks = [
+        { href: `${p}/admin/reports`, label: 'Reports', icon: 'M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z', position: 10 },
+        { href: `${p}/admin/tickets`, label: 'Tickets', icon: 'M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z', position: 20 },
+        { href: `${p}/admin/departments`, label: 'Departments', icon: 'M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 01-1.125-1.125v-3.75zM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-8.25zM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-2.25z', position: 30 },
+        { href: `${p}/admin/sla-policies`, label: 'SLA Policies', icon: 'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z', position: 40 },
+        { href: `${p}/admin/escalation-rules`, label: 'Escalation Rules', icon: 'M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12', position: 50 },
+        { href: `${p}/admin/tags`, label: 'Tags', icon: 'M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z M6 6h.008v.008H6V6z', position: 60 },
+        { href: `${p}/admin/canned-responses`, label: 'Canned Responses', icon: 'M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z', position: 70 },
+        { href: `${p}/admin/macros`, label: 'Macros', icon: 'M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z', position: 80 },
+        { href: `${p}/admin/api-tokens`, label: 'API Tokens', icon: 'M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z', position: 90 },
+        { href: `${p}/admin/plugins`, label: 'Plugins', icon: 'M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 01-.657.643 48.39 48.39 0 01-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 01-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 00-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 01-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 00.657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 01-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 005.427-.63 48.05 48.05 0 00.582-4.717.532.532 0 00-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 00.658-.663 48.422 48.422 0 00-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 01-.61-.58v0z', position: 95 },
+        { href: `${p}/admin/settings`, label: 'Settings', icon: 'M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.204-.107-.397.165-.71.505-.781.93l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894zM15 12a3 3 0 11-6 0 3 3 0 016 0z', position: 100 },
+    ];
+
+    // Merge core admin links with plugin-provided menu items
+    const pluginLinks = pluginMenuItems.value.map(item => ({
+        href: item.route,
+        label: item.label,
+        icon: item.icon,
+        position: item.position || 100,
+        badge: item.badge || null,
+        submenu: item.submenu || [],
+    }));
+
+    return [...coreLinks, ...pluginLinks].sort((a, b) => (a.position || 100) - (b.position || 100));
+});
 
 const agentLinks = computed(() => [
     { href: `${prefix.value}/agent`, label: 'Dashboard', icon: 'M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25' },
@@ -80,6 +100,10 @@ function isActive(href) {
                         <path stroke-linecap="round" stroke-linejoin="round" :d="link.icon" />
                     </svg>
                     {{ link.label }}
+                    <span v-if="link.badge"
+                          class="ml-auto inline-flex h-5 min-w-[20px] items-center justify-center rounded-full bg-cyan-500/20 px-1.5 text-[10px] font-semibold text-cyan-400">
+                        {{ link.badge }}
+                    </span>
                 </Link>
             </nav>
 

package/src/components/FileDropzone.vue

@@ -1,41 +1,41 @@
-<script setup>
-import { ref, computed, inject } from 'vue';
-
-const emit = defineEmits(['files']);
-const dark = inject('esc-dark', computed(() => false));
-
-const dragging = ref(false);
-const fileInput = ref(null);
-
-function onDrop(e) {
-    dragging.value = false;
-    if (e.dataTransfer?.files?.length) {
-        emit('files', Array.from(e.dataTransfer.files));
-    }
-}
-
-function onFileSelect(e) {
-    if (e.target.files?.length) {
-        emit('files', Array.from(e.target.files));
-        e.target.value = '';
-    }
-}
-
-function browse() {
-    fileInput.value?.click();
-}
-</script>
-
-<template>
-    <div @dragover.prevent="dragging = true" @dragleave="dragging = false" @drop.prevent="onDrop"
-         :class="['cursor-pointer rounded-lg border-2 border-dashed px-4 py-3 text-center text-xs transition-colors',
-                  dark
-                      ? (dragging ? 'border-white/20 bg-white/[0.04]' : 'border-white/[0.08] hover:border-white/[0.12]')
-                      : (dragging ? 'border-blue-400 bg-blue-50' : 'border-gray-300 hover:border-gray-400')]"
-         @click="browse">
-        <p :class="dark ? 'text-neutral-500' : 'text-gray-500'">
-            Drop files here or <span :class="['font-medium', dark ? 'text-white' : 'text-blue-600']">browse</span>
-        </p>
-        <input ref="fileInput" type="file" multiple class="hidden" @change="onFileSelect" />
-    </div>
-</template>
+<script setup>
+import { ref, computed, inject } from 'vue';
+
+const emit = defineEmits(['files']);
+const dark = inject('esc-dark', computed(() => false));
+
+const dragging = ref(false);
+const fileInput = ref(null);
+
+function onDrop(e) {
+    dragging.value = false;
+    if (e.dataTransfer?.files?.length) {
+        emit('files', Array.from(e.dataTransfer.files));
+    }
+}
+
+function onFileSelect(e) {
+    if (e.target.files?.length) {
+        emit('files', Array.from(e.target.files));
+        e.target.value = '';
+    }
+}
+
+function browse() {
+    fileInput.value?.click();
+}
+</script>
+
+<template>
+    <div @dragover.prevent="dragging = true" @dragleave="dragging = false" @drop.prevent="onDrop"
+         :class="['cursor-pointer rounded-lg border-2 border-dashed px-4 py-3 text-center text-xs transition-colors',
+                  dark
+                      ? (dragging ? 'border-white/20 bg-white/[0.04]' : 'border-white/[0.08] hover:border-white/[0.12]')
+                      : (dragging ? 'border-blue-400 bg-blue-50' : 'border-gray-300 hover:border-gray-400')]"
+         @click="browse">
+        <p :class="dark ? 'text-neutral-500' : 'text-gray-500'">
+            Drop files here or <span :class="['font-medium', dark ? 'text-white' : 'text-blue-600']">browse</span>
+        </p>
+        <input ref="fileInput" type="file" multiple class="hidden" @change="onFileSelect" />
+    </div>
+</template>

package/src/components/PinnedNotes.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { ref, computed, inject } from 'vue';
 import { router } from '@inertiajs/vue3';
+import { sanitizeHtml } from '../utils/sanitizeHtml';
+import { useI18n } from '../composables/useI18n';
 
 const props = defineProps({
     notes: { type: Array, default: () => [] },
@@ -9,6 +11,7 @@ const props = defineProps({
 });
 
 const escDark = inject('esc-dark', computed(() => false));
+const { t } = useI18n();
 const processingId = ref(null);
 
 function unpinNote(note) {
@@ -49,7 +52,7 @@ function formatDate(dateStr) {
             </svg>
             <span :class="['text-xs font-semibold uppercase tracking-wider',
                            escDark ? 'text-amber-400' : 'text-amber-700']">
-                Pinned Notes
+                {{ t('pinned_notes.title') }}
             </span>
         </div>
 
@@ -61,7 +64,7 @@ function formatDate(dateStr) {
                               ? 'border-amber-500/10 bg-amber-500/[0.04]'
                               : 'border-amber-200 bg-white']">
                 <!-- Note body -->
-                <div :class="['prose prose-sm max-w-none', escDark ? 'prose-invert text-neutral-200' : 'text-gray-800']" v-html="note.body"></div>
+                <div :class="['prose prose-sm max-w-none', escDark ? 'prose-invert text-neutral-200' : 'text-gray-800']" v-html="sanitizeHtml(note.body)"></div>
 
                 <!-- Meta row -->
                 <div class="mt-2 flex items-center justify-between">
@@ -78,7 +81,7 @@ function formatDate(dateStr) {
                                          ? 'text-amber-400 hover:bg-amber-500/10 hover:text-amber-300'
                                          : 'text-amber-600 hover:bg-amber-100 hover:text-amber-700',
                                      processingId === note.id && 'opacity-50 cursor-not-allowed']">
-                        Unpin
+                        {{ t('pinned_notes.unpin') }}
                     </button>
                 </div>
             </div>

package/src/components/PluginSlot.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { defineAsyncComponent, h } from 'vue';
+
+const props = defineProps({
+    slot: {
+        type: String,
+        required: true,
+    },
+    components: {
+        type: Array,
+        default: () => [],
+    },
+});
+
+// Error fallback component rendered when a plugin component fails to load
+const ErrorFallback = {
+    props: ['error', 'plugin', 'component'],
+    render() {
+        return h('div', {
+            class: 'rounded-lg border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-xs text-rose-400',
+        }, `Plugin "${this.plugin}" failed to load component "${this.component}"`);
+    },
+};
+
+// Loading placeholder component
+const LoadingFallback = {
+    render() {
+        return h('div', {
+            class: 'animate-pulse rounded-lg bg-white/[0.03] px-3 py-2',
+        }, [
+            h('div', { class: 'h-4 w-24 rounded bg-white/[0.06]' }),
+        ]);
+    },
+};
+
+// Load plugin components dynamically from host app's plugins directory
+const loadPluginComponent = (plugin, component) => {
+    return defineAsyncComponent({
+        loader: () => import(`../../../../plugins/escalated/${plugin}/resources/js/Components/${component}.vue`),
+        loadingComponent: LoadingFallback,
+        errorComponent: {
+            props: ['error'],
+            render() {
+                return h(ErrorFallback, { error: this.error, plugin, component });
+            },
+        },
+        delay: 100,
+        timeout: 10000,
+    });
+};
+</script>
+
+<template>
+    <template v-if="components?.length > 0">
+        <component
+            v-for="(pluginComp, index) in components"
+            :key="`${slot}-${pluginComp.plugin}-${pluginComp.component}-${index}`"
+            :is="loadPluginComponent(pluginComp.plugin, pluginComp.component)"
+            v-bind="pluginComp.data || {}"
+        />
+    </template>
+</template>