Escalated

العربية • 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:

Framework	Repo	Install
Laravel	escalated-dev/escalated-laravel	`composer require escalated-dev/escalated-laravel`
Rails	escalated-dev/escalated-rails	`gem "escalated"`
Django	escalated-dev/escalated-django	`pip install escalated-django`
AdonisJS	escalated-dev/escalated-adonis	`npm install @escalated-dev/escalated-adonis`
WordPress	escalated-dev/escalated-wordpress	Download escalated.zip
Filament	escalated-dev/escalated-filament	`composer require escalated-dev/escalated-filament`
React Native	escalated-dev/escalated-react-native	`npm install @escalated-dev/escalated-react-native`
Flutter	escalated-dev/escalated-flutter	See pubspec.yaml setup

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

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:

Option	When to use	How
Tailwind Play CDN	Prototyping, internal tools, demos. Not recommended for production (no purging, ~3 MB script tag).	Add `<script src="https://cdn.tailwindcss.com"></script>` to the page that renders Escalated. The CDN script JIT-compiles classes at runtime.
Tailwind standalone CLI	You want a static stylesheet without npm/Vite.	Download the standalone CLI binary and run `tailwindcss -i input.css -o public/escalated.css --content './node_modules/@escalated-dev/escalated/src/*/.vue' --minify`. Link the output stylesheet from your page.
UnoCSS / Twind in attributify mode	Already using one of these atomic-CSS engines.	Configure with the Tailwind preset (`@unocss/preset-wind` or `@twind/preset-tailwind`) and add the Escalated package path to the engine's scan config. Class semantics match.
Forking with hand-rolled CSS	You categorically cannot ship any Tailwind-compatible tooling and are willing to maintain a fork.	Replace utility classes with scoped CSS per component. Substantial effort; not officially supported.

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 all Escalated pages render inside it automatically. 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.

CSS Custom Properties

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

Property	Default	Description
`--esc-primary`	`#4f46e5`	Primary action color
`--esc-primary-hover`	auto-darkened	Primary hover color
`--esc-radius`	`0.5rem`	Border radius for inputs and buttons
`--esc-radius-lg`	auto-scaled	Border radius for cards and panels
`--esc-font-family`	inherit	Font family override

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)

Ticket Queue

Agent Panel

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

Component	Description
`StatusBadge`	Colored badge for ticket status
`PriorityBadge`	Colored badge for ticket priority
`TicketList`	Paginated ticket table
`ReplyThread`	Chronological reply display
`ReplyComposer`	Reply/note editor with file upload and canned response insertion
`ActivityTimeline`	Audit log of ticket events
`SlaTimer`	SLA countdown with breach/warning states
`TicketFilters`	Status, priority, agent, department filter bar
`TicketSidebar`	Ticket detail sidebar (status, SLA, tags, activity)
`AssigneeSelect`	Agent assignment dropdown
`TagSelect`	Multi-select tag picker
`FileDropzone`	Drag-and-drop file upload
`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

Export	Description
`EscalatedPlugin`	Vue plugin for layout injection and CSS theming

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, release the separate web-widget plugin, or configure cross-origin CORS/CSRF policy.

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

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.

Name		Name	Last commit message	Last commit date
.github		.github
.husky		.husky
.storybook		.storybook
docs		docs
screenshots		screenshots
scripts		scripts
src		src
tests		tests
.gitattributes		.gitattributes
.gitignore		.gitignore
.prettierrc		.prettierrc
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
eslint.config.js		eslint.config.js
package-lock.json		package-lock.json
package.json		package.json
pages.json		pages.json
playwright-screenshots.config.js		playwright-screenshots.config.js
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
todo.txt		todo.txt
vitest.config.js		vitest.config.js

Navigation Menu

Repository files navigation

Escalated

Features

Get Started

Tailwind CSS

Recommended: Tailwind in your existing build

Using Escalated without a Tailwind build step

Theming

Layout Integration

CSS Custom Properties

Admin and Agent Panels

Framework Examples

What's in This Repo

📸 Screenshots

Pages

Shared Components

Composables

Plugin

Plugin Development

How the Frontend Plugin System Works

How It Connects to the Backend

Quick Example: Both Entry Points

Installing Plugins

Resources

For Package Maintainers

Backend settings capabilities

Ecosystem

License

About

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

Escalated

Features

Get Started

Tailwind CSS

Recommended: Tailwind in your existing build

Using Escalated without a Tailwind build step

Theming

Layout Integration

CSS Custom Properties

Admin and Agent Panels

Framework Examples

What's in This Repo

📸 Screenshots

Pages

Shared Components

Composables

Plugin

Plugin Development

How the Frontend Plugin System Works

How It Connects to the Backend

Quick Example: Both Entry Points

Installing Plugins

Resources

For Package Maintainers

Backend settings capabilities

Ecosystem

License

About

Resources

Security policy

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages