@escalated-dev/escalated 0.6.0 → 0.7.0

package/README.md

@@ -3,6 +3,11 @@
   Escalated
 </h1>
 
+[![Tests](https://github.com/escalated-dev/escalated/actions/workflows/run-tests.yml/badge.svg)](https://github.com/escalated-dev/escalated/actions/workflows/run-tests.yml)
+[![npm](https://img.shields.io/npm/v/@escalated-dev/escalated)](https://www.npmjs.com/package/@escalated-dev/escalated)
+[![Vue 3](https://img.shields.io/badge/vue-3.x-4FC08D?logo=vue.js&logoColor=white)](https://vuejs.org/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
 Escalated is an embeddable support ticket system with SLA tracking, escalation rules, agent workflows, and a customer portal. This repo contains all the shared frontend assets (Vue 3 + Inertia.js) used across every supported backend framework.
 
 👉 **Learn more, view demos, and compare Cloud vs Self-Hosted options at** **[https://escalated.dev](https://escalated.dev)**
@@ -19,6 +24,10 @@ Pick your framework:
 | **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` |
+| **WordPress** | [escalated-dev/escalated-wordpress](https://github.com/escalated-dev/escalated-wordpress) | [Download escalated.zip](https://github.com/escalated-dev/escalated-wordpress/releases/latest) |
+| **Filament** | [escalated-dev/escalated-filament](https://github.com/escalated-dev/escalated-filament) | `composer require escalated-dev/escalated-filament` |
+| **React Native** | [escalated-dev/escalated-react-native](https://github.com/escalated-dev/escalated-react-native) | `npm install @escalated-dev/escalated-react-native` |
+| **Flutter** | [escalated-dev/escalated-flutter](https://github.com/escalated-dev/escalated-flutter) | See [pubspec.yaml setup](https://github.com/escalated-dev/escalated-flutter#quick-start) |
 
 Each backend repo has full setup instructions — install command, migrations, config, and frontend integration.
 
@@ -127,12 +136,31 @@ All the Vue 3 + Inertia.js components that power the Escalated UI. These are ide
 
 ## 📸 Screenshots
 
+> Screenshots are auto-generated from Storybook via the [component-screenshots](.github/workflows/screenshots.yml) workflow.
+
+<p align="center">
+  <strong>Admin Panel (Dark)</strong><br/>
+  <img src="docs/assets/escalated_admin_1.png" alt="Escalated Admin Panel — dark mode with sidebar navigation, KPI cards, stats, and ticket list" width="800" />
+</p>
+
 <p align="center">
-  <img src="docs/assets/escalated_admin_1.png" alt="Escalated Admin Screenshot 1" width="800" />
+  <strong>Admin Panel (Light)</strong><br/>
+  <img src="docs/assets/escalated_admin_3.png" alt="Escalated Admin Panel — light mode with sidebar navigation, KPI cards, stats, and ticket list" width="800" />
 </p>
 
 <p align="center">
-  <img src="docs/assets/escalated_admin_2.png" alt="Escalated Admin Screenshot 2" width="800" />
+  <strong>Ticket Queue</strong><br/>
+  <img src="docs/assets/escalated_ticket_list.png" alt="Escalated Ticket Queue — agent ticket list with filters, search, bulk actions, and SLA indicators" width="800" />
+</p>
+
+<p align="center">
+  <strong>Agent Panel</strong><br/>
+  <img src="docs/assets/escalated_admin_2.png" alt="Escalated Agent Panel — top navigation, stats, and assigned ticket queue" width="800" />
+</p>
+
+<p align="center">
+  <strong>Ticket Detail View</strong><br/>
+  <img src="docs/assets/escalated_ticket_view.png" alt="Escalated Ticket Detail View — conversation thread, reply composer, and ticket sidebar with SLA timer" width="800" />
 </p>
 
 ### Pages
@@ -197,6 +225,70 @@ Reusable building blocks used across the pages above.
 |--------|-------------|
 | `EscalatedPlugin` | Vue plugin for layout injection and CSS theming |
 
+## Plugin Development
+
+Escalated supports framework-agnostic plugins built with the [Plugin SDK](https://github.com/escalated-dev/escalated-plugin-sdk). Plugins are written once in TypeScript and work across all Escalated backends.
+
+### How the Frontend Plugin System Works
+
+The frontend uses `defineEscalatedPlugin()` to register Vue components — custom admin pages, ticket sidebar widgets, or dashboard panels — that are mounted automatically when the plugin is active.
+
+```typescript
+import { defineEscalatedPlugin } from '@escalated-dev/escalated'
+import MySettingsPage from './MySettingsPage.vue'
+
+export default defineEscalatedPlugin({
+  name: 'my-plugin',
+  pages: {
+    'admin/my-plugin/settings': MySettingsPage,
+  },
+})
+```
+
+### How It Connects to the Backend
+
+The backend uses `definePlugin()` from the [Plugin SDK](https://github.com/escalated-dev/escalated-plugin-sdk) to handle TypeScript business logic — subscribing to ticket lifecycle hooks, exposing API endpoints, and persisting data. The frontend and backend entries work together as a single npm package.
+
+```typescript
+// backend entry (index.ts)
+import { definePlugin } from '@escalated-dev/plugin-sdk'
+
+export default definePlugin({
+  name: 'my-plugin',
+  version: '1.0.0',
+  actions: {
+    'ticket.created': async (event, ctx) => {
+      ctx.log.info('New ticket!', event)
+    },
+  },
+})
+```
+
+### Quick Example: Both Entry Points
+
+A published plugin package typically exports both:
+
+```
+my-plugin/
+  index.ts          ← backend: definePlugin() for TypeScript logic
+  frontend.ts       ← frontend: defineEscalatedPlugin() for Vue components
+```
+
+The backend framework (Laravel, Rails, Django, AdonisJS) loads `index.ts` via the [Plugin Runtime](https://github.com/escalated-dev/escalated-plugin-runtime). The Vue app imports `frontend.ts` and registers it with `app.use()`.
+
+### Installing Plugins
+
+```bash
+npm install @escalated-dev/plugin-slack
+npm install @escalated-dev/plugin-jira
+```
+
+### Resources
+
+- [Plugin SDK](https://github.com/escalated-dev/escalated-plugin-sdk) — TypeScript SDK for building plugins
+- [Plugin Runtime](https://github.com/escalated-dev/escalated-plugin-runtime) — Runtime host for plugins
+- [Plugin Development Guide](https://github.com/escalated-dev/escalated-docs) — Full documentation
+
 ## For Package Maintainers
 
 If you're building a new backend integration, this package is available on npm:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@escalated-dev/escalated",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Vue 3 + Inertia.js UI components for Escalated — the embeddable support ticket system",
   "author": "Escalated Dev <hello@escalated.dev>",
   "license": "MIT",
@@ -33,13 +33,42 @@
     "vue": "^3.3.0"
   },
   "scripts": {
-    "test": "vitest run"
+    "test": "vitest run",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
+    "format": "prettier --write src/",
+    "format:check": "prettier --check src/",
+    "prepare": "husky",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "screenshot": "npx playwright test --config=playwright-screenshots.config.js"
+  },
+  "lint-staged": {
+    "*.{js,vue}": [
+      "eslint --fix",
+      "prettier --write"
+    ]
   },
   "devDependencies": {
+    "@eslint/js": "^10.0.1",
     "@inertiajs/vue3": "^2.0.0",
+    "@playwright/test": "^1.50.0",
+    "@storybook/addon-a11y": "^10.2.12",
+    "@storybook/addon-docs": "^10.2.12",
+    "@storybook/vue3-vite": "^10.2.12",
     "@vitejs/plugin-vue": "^5.0.0",
     "@vue/test-utils": "^2.4.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^10.0.1",
+    "eslint-plugin-storybook": "^10.2.12",
+    "eslint-plugin-vue": "^10.8.0",
     "happy-dom": "^15.0.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
+    "postcss": "^8.5.0",
+    "prettier": "^3.8.1",
+    "storybook": "^10.2.12",
+    "tailwindcss": "^3.4.0",
     "vitest": "^2.0.0",
     "vue": "^3.5.0"
   }

package/src/components/ActivityTimeline.stories.js

@@ -0,0 +1,55 @@
+import ActivityTimeline from './ActivityTimeline.vue';
+
+export default {
+    title: 'Components/ActivityTimeline',
+    component: ActivityTimeline,
+};
+
+const sampleActivities = [
+    {
+        id: 1,
+        type: 'status_changed',
+        causer: { name: 'Alice Chen' },
+        properties: { from: 'open', to: 'in_progress' },
+        created_at: new Date(Date.now() - 300000).toISOString(),
+    },
+    {
+        id: 2,
+        type: 'assigned',
+        causer: { name: 'Bob Smith' },
+        properties: { agent_name: 'Alice Chen' },
+        created_at: new Date(Date.now() - 600000).toISOString(),
+    },
+    {
+        id: 3,
+        type: 'priority_changed',
+        causer: { name: 'Alice Chen' },
+        properties: { from: 'medium', to: 'high' },
+        created_at: new Date(Date.now() - 1200000).toISOString(),
+    },
+    {
+        id: 4,
+        type: 'tag_added',
+        causer: { name: 'Alice Chen' },
+        properties: { tag: 'billing' },
+        created_at: new Date(Date.now() - 1800000).toISOString(),
+    },
+    {
+        id: 5,
+        type: 'replied',
+        causer: { name: 'Alice Chen' },
+        properties: {},
+        created_at: new Date(Date.now() - 2400000).toISOString(),
+    },
+    {
+        id: 6,
+        type: 'sla_breached',
+        causer: null,
+        properties: {},
+        created_at: new Date(Date.now() - 3600000).toISOString(),
+    },
+];
+
+export const Default = { args: { activities: sampleActivities } };
+export const Empty = { args: { activities: [] } };
+export const SingleItem = { args: { activities: [sampleActivities[0]] } };

package/src/components/ActivityTimeline.vue

@@ -5,7 +5,10 @@ defineProps({
     activities: { type: Array, required: true },
 });
 
-const dark = inject('esc-dark', computed(() => false));
+const dark = inject(
+    'esc-dark',
+    computed(() => false),
+);
 
 const typeLabels = {
     status_changed: 'changed status',
@@ -53,14 +56,28 @@ function describeActivity(activity) {
 </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="space-y-3" role="feed">
+        <div v-for="activity in activities" :key="activity.id" role="article" class="flex gap-3 text-sm">
+            <div
+                :class="[
+                    'mt-1 h-2 w-2 flex-shrink-0 rounded-full',
+                    dark ? 'bg-[var(--esc-panel-text-muted)]' : '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>
+                <p :class="dark ? 'text-[var(--esc-panel-text-secondary)]' : 'text-gray-700'">
+                    {{ describeActivity(activity) }}
+                </p>
+                <p :class="['text-xs', dark ? 'text-[var(--esc-panel-text-muted)]' : '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
+            v-if="!activities?.length"
+            :class="['py-4 text-center text-sm', dark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500']"
+        >
+            No activity yet.
+        </div>
     </div>
 </template>