@escalated-dev/escalated 0.6.0 → 0.7.1

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 Escalated Dev
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 Escalated Dev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,14 +1,50 @@
+<p align="center">
+  <a href="docs/translations/README.ar.md">العربية</a> •
+  <a href="docs/translations/README.de.md">Deutsch</a> •
+  <b>English</b> •
+  <a href="docs/translations/README.es.md">Español</a> •
+  <a href="docs/translations/README.fr.md">Français</a> •
+  <a href="docs/translations/README.it.md">Italiano</a> •
+  <a href="docs/translations/README.ja.md">日本語</a> •
+  <a href="docs/translations/README.ko.md">한국어</a> •
+  <a href="docs/translations/README.nl.md">Nederlands</a> •
+  <a href="docs/translations/README.pl.md">Polski</a> •
+  <a href="docs/translations/README.pt-BR.md">Português (BR)</a> •
+  <a href="docs/translations/README.ru.md">Русский</a> •
+  <a href="docs/translations/README.tr.md">Türkçe</a> •
+  <a href="docs/translations/README.zh-CN.md">简体中文</a>
+</p>
+
 <h1>
   <img src="https://escalated.dev/apple-touch-icon.png" width="28" style="vertical-align:middle;" />
   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)
+
+<p align="center">
+  <img src=".github/profile/demo.gif" alt="Escalated demo: filing a ticket and replying from the agent inbox" width="800" />
+</p>
+
 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)**
 
 **You don't install this package directly.** Start with the backend package for your framework — it handles everything including pulling in these frontend assets.
 
+## Features
+
+- **Ticket splitting** — Split a reply into a new standalone ticket while preserving context
+- **Ticket snooze** — Snooze tickets with presets (1h, 4h, tomorrow, next week) and automatic wake
+- **Saved views / custom queues** — Save, name, and share filter presets as reusable ticket views
+- **Embeddable support widget** — Drop-in `<script>` widget with KB search, ticket form, and status check
+- **Real-time updates** — WebSocket support (Pusher/Reverb/Soketi) with automatic polling fallback
+- **Knowledge base toggle** — Enable or disable the public knowledge base from admin settings
+- **CI: ESLint + Prettier** — Automated code style enforcement on every pull request
+
 ## Get Started
 
 Pick your framework:
@@ -19,6 +55,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 +167,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">
-  <img src="docs/assets/escalated_admin_1.png" alt="Escalated Admin Screenshot 1" width="800" />
+  <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_2.png" alt="Escalated Admin Screenshot 2" 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">
+  <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 +256,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,7 +1,7 @@
 {
   "name": "@escalated-dev/escalated",
-  "version": "0.6.0",
-  "description": "Vue 3 + Inertia.js UI components for Escalated — the embeddable support ticket system",
+  "version": "0.7.1",
+  "description": "Vue 3 + Inertia.js UI components for Escalated \u00e2\u20ac\u201d the embeddable support ticket system",
   "author": "Escalated Dev <hello@escalated.dev>",
   "license": "MIT",
   "homepage": "https://github.com/escalated-dev/escalated",
@@ -29,18 +29,53 @@
     "src"
   ],
   "peerDependencies": {
-    "@inertiajs/vue3": "^1.0.0 || ^2.0.0",
+    "@inertiajs/vue3": "^1.0.0 || ^2.0.0 || ^3.0.0",
     "vue": "^3.3.0"
   },
   "scripts": {
-    "test": "vitest run"
+    "test": "vitest run",
+    "lint": "eslint src/ --max-warnings 0",
+    "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",
+    "demo:serve": "node scripts/demo-server.js",
+    "demo:record": "node scripts/generate-demo.js",
+    "demo": "concurrently -k -s second \"npm run demo:serve\" \"wait-on http://localhost:3000 && npm run demo:record\""
+  },
+  "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",
+    "concurrently": "^9.0.0",
+    "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",
+    "playwright": "^1.50.0",
+    "postcss": "^8.5.0",
+    "prettier": "^3.8.1",
+    "storybook": "^10.2.12",
+    "tailwindcss": "^3.4.0",
     "vitest": "^2.0.0",
-    "vue": "^3.5.0"
+    "vue": "^3.5.0",
+    "wait-on": "^8.0.0"
   }
 }

package/src/components/ActiveChatsPanel.vue

@@ -0,0 +1,246 @@
+<script setup>
+import { ref, computed, inject, onMounted, onUnmounted } from 'vue';
+import { usePage } from '@inertiajs/vue3';
+import { useI18n } from '../composables/useI18n';
+import { useChat } from '../composables/useChat';
+import { timeAgo } from '../utils/formatting';
+
+const props = defineProps({
+    chats: { type: Array, default: () => [] },
+    agentId: { type: [String, Number], default: null },
+    agentStatus: { type: String, default: 'online' },
+    navigateRoute: { type: String, default: '' },
+});
+
+const emit = defineEmits(['navigate', 'status-change']);
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+const { t } = useI18n();
+
+const isOpen = ref(false);
+const currentStatus = ref(props.agentStatus);
+
+const statusOptions = [
+    { value: 'online', label: 'Online', color: 'bg-emerald-500' },
+    { value: 'away', label: 'Away', color: 'bg-amber-500' },
+    { value: 'offline', label: 'Offline', color: 'bg-neutral-500' },
+];
+
+const currentStatusOption = computed(
+    () => statusOptions.find((s) => s.value === currentStatus.value) || statusOptions[0],
+);
+
+function changeStatus(status) {
+    currentStatus.value = status;
+    emit('status-change', status);
+}
+
+const totalUnread = computed(() => {
+    return props.chats.reduce((sum, chat) => sum + (chat.unread_count || 0), 0);
+});
+
+// Activity state for each chat
+const now = ref(Date.now());
+let timerInterval = null;
+
+onMounted(() => {
+    timerInterval = setInterval(() => {
+        now.value = Date.now();
+    }, 10000);
+});
+
+onUnmounted(() => {
+    clearInterval(timerInterval);
+});
+
+function chatActivityState(chat) {
+    if (!chat.last_message_at) return 'new';
+    const diffMs = now.value - new Date(chat.last_message_at).getTime();
+    if (diffMs > 2 * 60 * 1000) return 'idle';
+    return 'active';
+}
+
+function activityDotClass(chat) {
+    const state = chatActivityState(chat);
+    if (state === 'new') return 'bg-blue-500 animate-pulse';
+    if (state === 'idle') return 'bg-amber-500';
+    return 'bg-emerald-500';
+}
+
+function navigateToChat(chat) {
+    emit('navigate', chat);
+}
+
+function truncate(str, len = 40) {
+    if (!str) return '';
+    return str.length > len ? str.slice(0, len) + '...' : str;
+}
+
+function chatInitials(chat) {
+    const name = chat.customer_name || 'U';
+    return name
+        .split(' ')
+        .map((w) => w[0])
+        .join('')
+        .toUpperCase()
+        .slice(0, 2);
+}
+
+// Real-time: listen for new chats assigned to this agent. Read the
+// host framework's route prefix from Inertia page props (default
+// 'support') so chat API calls resolve correctly on NestJS backends
+// that use '/escalated/widget' instead of '/support/widget'.
+const page = usePage();
+const routePrefix = page.props.escalated?.prefix || 'support';
+const { subscribeToChatQueue } = useChat({ widgetPath: `/${routePrefix}/widget` });
+
+onMounted(() => {
+    subscribeToChatQueue({
+        onNewChat() {
+            // Parent should refresh chat list
+        },
+    });
+});
+</script>
+
+<template>
+    <!-- Toggle button -->
+    <button
+        :class="[
+            'fixed right-4 bottom-20 z-40 flex h-12 w-12 items-center justify-center rounded-full shadow-lg transition-all',
+            escDark
+                ? 'bg-gradient-to-r from-cyan-500 to-violet-500 text-white hover:from-cyan-400 hover:to-violet-400'
+                : 'bg-blue-600 text-white hover:bg-blue-500',
+        ]"
+        :aria-label="isOpen ? t('chat.close_panel') : t('chat.open_panel')"
+        @click="isOpen = !isOpen"
+    >
+        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z"
+            />
+        </svg>
+        <!-- Unread badge -->
+        <span
+            v-if="totalUnread > 0"
+            class="absolute -right-1 -top-1 flex h-5 min-w-[20px] items-center justify-center rounded-full bg-rose-500 px-1 text-[10px] font-bold text-white"
+        >
+            {{ totalUnread > 99 ? '99+' : totalUnread }}
+        </span>
+    </button>
+
+    <!-- Panel -->
+    <div
+        v-if="isOpen"
+        :class="[
+            'fixed right-4 bottom-36 z-40 w-80 rounded-xl border shadow-2xl',
+            escDark ? 'border-white/[0.08] bg-neutral-900' : 'border-gray-200 bg-white',
+        ]"
+        style="max-height: calc(100vh - 200px)"
+    >
+        <!-- Header -->
+        <div
+            :class="[
+                'flex items-center justify-between border-b px-4 py-3',
+                escDark ? 'border-white/[0.06]' : 'border-gray-200',
+            ]"
+        >
+            <div class="flex items-center gap-2">
+                <h3 :class="['text-sm font-semibold', escDark ? 'text-white' : 'text-gray-900']">
+                    {{ t('chat.active_chats') }}
+                </h3>
+                <span
+                    v-if="chats.length"
+                    :class="[
+                        'rounded-full px-1.5 py-0.5 text-[10px] font-medium',
+                        escDark ? 'bg-white/[0.06] text-neutral-400' : 'bg-gray-100 text-gray-500',
+                    ]"
+                >
+                    {{ chats.length }}
+                </span>
+            </div>
+            <!-- Status dropdown -->
+            <div class="relative">
+                <button
+                    :class="[
+                        'flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs font-medium transition-colors',
+                        escDark ? 'hover:bg-white/[0.06] text-neutral-400' : 'hover:bg-gray-100 text-gray-500',
+                    ]"
+                    @click="
+                        const idx = statusOptions.findIndex((s) => s.value === currentStatus);
+                        changeStatus(statusOptions[(idx + 1) % statusOptions.length].value);
+                    "
+                >
+                    <span :class="['h-2 w-2 rounded-full', currentStatusOption.color]"></span>
+                    {{ currentStatusOption.label }}
+                </button>
+            </div>
+        </div>
+
+        <!-- Chat list -->
+        <div class="overflow-y-auto" style="max-height: 400px">
+            <div
+                v-if="!chats.length"
+                :class="['p-6 text-center text-sm', escDark ? 'text-neutral-600' : 'text-gray-400']"
+            >
+                {{ t('chat.no_active_chats') }}
+            </div>
+            <button
+                v-for="chat in chats"
+                :key="chat.id"
+                :class="[
+                    'flex w-full items-start gap-3 px-4 py-3 text-left transition-colors',
+                    escDark ? 'hover:bg-white/[0.04]' : 'hover:bg-gray-50',
+                ]"
+                @click="navigateToChat(chat)"
+            >
+                <!-- Avatar with status dot -->
+                <div class="relative flex-shrink-0">
+                    <div
+                        :class="[
+                            'flex h-9 w-9 items-center justify-center rounded-full text-xs font-semibold',
+                            escDark ? 'bg-neutral-800 text-neutral-300' : 'bg-gray-200 text-gray-600',
+                        ]"
+                    >
+                        {{ chatInitials(chat) }}
+                    </div>
+                    <span
+                        :class="[
+                            'absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full border-2',
+                            escDark ? 'border-neutral-900' : 'border-white',
+                            activityDotClass(chat),
+                        ]"
+                    ></span>
+                </div>
+
+                <!-- Chat info -->
+                <div class="min-w-0 flex-1">
+                    <div class="flex items-center justify-between">
+                        <span :class="['truncate text-sm font-medium', escDark ? 'text-neutral-200' : 'text-gray-900']">
+                            {{ chat.customer_name || t('ticket.unknown') }}
+                        </span>
+                        <span :class="['flex-shrink-0 text-[10px]', escDark ? 'text-neutral-600' : 'text-gray-400']">
+                            {{ chat.last_message_at ? timeAgo(chat.last_message_at) : '' }}
+                        </span>
+                    </div>
+                    <div class="flex items-center justify-between">
+                        <span :class="['truncate text-xs', escDark ? 'text-neutral-500' : 'text-gray-500']">
+                            {{ truncate(chat.last_message) }}
+                        </span>
+                        <span
+                            v-if="chat.unread_count"
+                            class="ml-2 flex h-4 min-w-[16px] flex-shrink-0 items-center justify-center rounded-full bg-cyan-500 px-1 text-[10px] font-bold text-white"
+                        >
+                            {{ chat.unread_count }}
+                        </span>
+                    </div>
+                </div>
+            </button>
+        </div>
+    </div>
+</template>

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]] } };