العربية • Deutsch • English • Español • Français • Italiano • 日本語 • 한국어 • Nederlands • Polski • Português (BR) • Русский • Türkçe • 简体中文

Escalated

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

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:

Each backend repo has full setup instructions — install command, migrations, config, and frontend integration.

Embedding the admin in your own admin panel (optional)

Escalated comes with its own standalone admin panel, and that stays the default. If your app already has an admin panel, you can optionally show Escalated's admin screens inside it instead: under your sidebar and header, your URL prefix and your middleware, with Escalated's menu available to render in your own sidebar. Nothing changes unless you turn it on.

Three ways to do it, depending on your admin:

• Vue + Inertia admin: Escalated's admin pages render chrome-free inside your layout (app.use(EscalatedPlugin, { layout, layoutScope: ['admin'] })), and <EscalatedNavigation /> lists the admin menu in your sidebar.
• Server-rendered admin (Blade, ERB, Django templates, …): your admin template becomes the Inertia root view for the embedded pages.
• Anything else: an allow-listed iframe with a small postMessage protocol for height, theme and navigation (@escalated-dev/escalated/embed).

Guides: frontend · Laravel · Rails · Django · AdonisJS · NestJS · Symfony · Phoenix · Go · .NET · Spring · WordPress. Laravel is the reference implementation; the other backends are adding it.

Tailwind CSS

Escalated components use Tailwind CSS utility classes (~hundreds of them across 140+ Vue files). Some Tailwind-compatible class processor must be available in the host app for the UI to render correctly — without one, every component renders as unstyled DOM with class names that don't resolve to any CSS.

Recommended: Tailwind in your existing build

If your host app already uses Tailwind via Vite / PostCSS / Tailwind CLI, just add this package to your content config so its classes aren't purged:

// tailwind.config.js
export default {
    content: [
        // ... your existing paths
        './node_modules/@escalated-dev/escalated/src/**/*.vue',
    ],
}

Tailwind 4+ users: content globs are auto-detected from imported modules — you usually don't need to add anything. Skip this step if you're on v4.

Using Escalated without a Tailwind build step

If you don't want a Tailwind toolchain in your build pipeline, you have a few options. Each has trade-offs — pick the one closest to your project's constraints:

If none of these fit, please open a discussion so we can understand the constraint and consider a pre-compiled CSS distribution.

Whatever path you choose, also make sure the theme tokens (CSS custom properties) are applied — those control colour, spacing, and radius and are independent of Tailwind.

Theming

Escalated renders inside a standalone layout by default. To integrate it into your app's design system, use the EscalatedPlugin:

import { createApp } from 'vue'
import { EscalatedPlugin } from '@escalated-dev/escalated'
import AppLayout from '@/Layouts/AppLayout.vue'

const app = createApp(...)

app.use(EscalatedPlugin, {
    layout: AppLayout,
    theme: {
        primary: '#3b82f6',
        radius: '0.75rem',
    }
})

Layout Integration

Pass your app's layout component and Escalated's customer pages (the ticket portal and knowledge base) render inside it. The admin and agent panels keep their own navigation by default. The layout component must accept a #header slot and a default slot:

<!-- Your layout must support these slots -->
<template>
    <div>
        <nav>...</nav>
        <header><slot name="header" /></header>
        <main><slot /></main>
    </div>
</template>

When no layout is provided, Escalated uses its own built-in navigation bar.

To render the admin (and optionally the agent workspace) inside your layout as well, list those sections in layoutScope. Admin pages then render without Escalated's sidebar and top bar, with the page title in your #header slot:

app.use(EscalatedPlugin, {
    layout: AdminLayout,
    layoutScope: ['customer', 'admin'], // default: ['customer']
})

This is optional and only changes anything when you set it. See Embedding the admin in your own admin panel.

CSS Custom Properties

The theme option sets CSS custom properties you can reference in your own styles:

Admin and Agent Panels

theme.panel colours the admin and agent panels: navigation, header, logo tile, links and surfaces, in dark or light mode. Both panels collapse their navigation behind a menu button below 1024px. See docs/theming.md for every token.

Framework Examples

Laravel (Inertia + Vue 3):

import { EscalatedPlugin } from '@escalated-dev/escalated'
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'

app.use(EscalatedPlugin, { layout: AuthenticatedLayout })

Rails (Inertia + Vue 3):

import { EscalatedPlugin } from '@escalated-dev/escalated'
import AppLayout from '@/layouts/AppLayout.vue'

app.use(EscalatedPlugin, { layout: AppLayout })

Django (Inertia + Vue 3):

import { EscalatedPlugin } from '@escalated-dev/escalated'
import BaseLayout from '@/layouts/BaseLayout.vue'

app.use(EscalatedPlugin, { layout: BaseLayout })

AdonisJS (Inertia + Vue 3):

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, Django, and AdonisJS — the backend framework renders them via Inertia.

📸 Screenshots

Screenshots are auto-generated from Storybook via the component-screenshots workflow.

Admin Panel (Dark)

Admin Panel (Light)

Agent Inbox

Agent Panel (Light)

Ticket View

Pages

Customer Portal — Self-service ticket management

• pages/Customer/Index.vue — Ticket list with status filters and search
• pages/Customer/Create.vue — New ticket form with file attachments
• pages/Customer/Show.vue — Ticket detail with reply thread

Agent Dashboard — Ticket queue and workflows

• pages/Agent/Dashboard.vue — Stats overview and recent tickets
• pages/Agent/TicketIndex.vue — Filterable ticket queue
• pages/Agent/TicketShow.vue — Full ticket view with sidebar, internal notes, canned responses

Admin Panel — System configuration

• pages/Admin/Reports.vue — Analytics dashboard
• pages/Admin/Departments/ — Department CRUD
• pages/Admin/SlaPolicies/ — SLA policy management
• pages/Admin/EscalationRules/ — Escalation rule builder
• pages/Admin/Tags/ — Tag management
• pages/Admin/CannedResponses/ — Canned response templates

Shared Components

Reusable building blocks used across the pages above.

Composables

Plugin

Plugin Development

Escalated supports framework-agnostic plugins built with the 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.

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 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.

// 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. The Vue app imports frontend.ts and registers it with app.use().

Installing Plugins

npm install @escalated-dev/plugin-slack
npm install @escalated-dev/plugin-jira

Resources

• Plugin SDK — TypeScript SDK for building plugins
• Plugin Runtime — Runtime host for plugins
• Plugin Development Guide — Full documentation

For Package Maintainers

Verified guest access is enabled by backend capabilities. Escalated/Guest/Create accepts optional verification_url and lookup_url props. With these URLs, the form requests an email code before posting a ticket; a separate form verifies email to find existing tickets by tracking/ticket reference and renew private links. Guest/Show displays ticket.guest_access_expires_at when supplied.

The built-in widget enables the same flow only when /config returns guest_verification_required: true. The backend must provide POST /verification with email and purpose (ticket, chat, lookup), returning verification_id; creation accepts verification_id and the eight-digit verification_code. POST /lookup returns { data: [{ reference, subject, guest_access_token, expires_at }] }; subsequent widget status reads send the token as a Bearer header. Chat creation returns an opaque id and polling uses /chat/{id}/messages. Proofs and private results are cleared on destination or identity changes. Tokens remain in component memory. CSRF headers are sent only to the page's own origin.

Backends that omit these capabilities retain their existing form contract. Hosts must ship these forms before requiring verification in their backend. This does not implement verification in the other backend packages or release the separate web-widget plugin.

The widget can also be embedded on other sites, as a launcher or an on-page support form, with host parameters (department, prefill, metadata) and a JavaScript API. Backends opt in with an origin allow list, CORS and a CSRF exemption for those origins. See Embedding the widget.

Backends with account isolation can share escalated.broadcasting.channel_prefix through Inertia, for example escalated.tenants.<opaque-account-namespace>. Ticket, agent, chat and presence subscriptions use this prefix and rejoin when it changes. Omitting it preserves the existing escalated channels. Standalone PresenceIndicator consumers can pass its channelPrefix prop; useRealtime and useChat accept channelPrefix as a string, ref or getter. Raw useRealtime().listen(channel, event, callback) still treats the channel literally.

The backend must authorize the current account and each private/presence join. Channel names alone are not authorization. Ticket presence should expose only agent identity/display names, with requester access limited to private ticket updates. Deploy a frontend version containing this support before enabling a backend's account-scoped channels.

If you're building a new backend integration, this package is available on npm:

npm install @escalated-dev/escalated

// Import the plugin
import { EscalatedPlugin } from '@escalated-dev/escalated'

// Import individual components
import { StatusBadge, SlaTimer } from '@escalated-dev/escalated'

// Or reference pages directly for Inertia resolution
import CustomerIndex from '@escalated-dev/escalated/pages/Customer/Index.vue'

Peer dependencies: vue ^3.3.0, @inertiajs/vue3 ^1.0.0 || ^2.0.0 || ^3.0.0

The API token and two-factor pages accept flash data from page.props.flash (legacy shared props) and page.flash (Inertia 3). Top-level values take precedence, including explicit null values that clear legacy data. Inertia 3 backends should send one-time tokens, setup URIs, and recovery codes through top-level flash so they are excluded from the adapter's browser history state. Hosts must deploy a frontend release containing this support before changing their backend's flash protocol.

Contributing

The development tools require Node 22.22.2+ on the 22.x line, 24.15.0+ on the 24.x line, or 26+. Use nvm use to select the version in .nvmrc. These requirements apply when working on this repository; the published Vue and Inertia peer dependencies are listed above.

npm ci
npm test
npm run lint
npm run format:check
npm run pages:check
npm run build-storybook
npm audit

Commit package-lock.json with dependency updates. CI installs that exact graph with npm ci, checks dependency engines and peer requirements, and runs the test suite on Node 22.22.2, 24.15.0, and 26. Storybook's production build and the full dependency audit also run before merging.

The browser contract packs the current source, installs that tarball in isolated consumers with real Inertia 1, 2, and 3 adapters, audits each consumer, and tests token and two-factor flows on desktop and mobile Chromium. It uses a local HTTP server and synthetic credentials. The clipboard boundary is simulated so the test does not change your clipboard.

npx --no-install playwright install chromium
npm run test:inertia
# Or select a single adapter major:
npm run test:inertia -- 3

Reports and screenshots are written to test-results/inertia-flash/. CI runs each adapter separately and uploads that evidence on success or failure.

Backend settings capabilities

The Escalated/Admin/Settings page accepts optional supported_settings and update_url props. Pass an array of editable setting names to show and submit only those fields, and a URL accepting a flat POST payload. An empty array exposes no editable settings. Omitting these props preserves the full settings form and its Laravel named route. Backends must validate their own setting allowlist; hiding a control is not authorization.

For example, a backend implementing only knowledge-base and branding preferences can expose knowledge_base_enabled, knowledge_base_public, knowledge_base_feedback_enabled, and show_powered_by. Supply typed values in the settings prop. Changing the settings/account props clears stale form values and pending requests, including previously entered credentials.

Ecosystem

This is the shared frontend for the Escalated support ticket system. Host framework packages and client SDKs available across the ecosystem:

• Escalated for Laravel — Laravel Composer package
• Escalated for Rails — Ruby on Rails engine
• Escalated for Django — Django reusable app
• Escalated for AdonisJS — AdonisJS v6 package
• Escalated for WordPress — WordPress plugin
• Escalated for Filament — Filament v3 admin panel plugin
• Escalated for React Native — React Native SDK
• Escalated for Flutter — Flutter SDK
• Shared Frontend — Vue 3 + Inertia.js UI components (you are here)

License

MIT - Copyright (c) Escalated.dev. See LICENSE.