Add clear selection button to status multi-select dropdown

Shows a separator and centered "Clear selection" at the bottom of the dropdown
when any statuses are selected. Clearing shows all tickets regardless of status.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.env.example

@@ -1,3 +1,5 @@
+# Production — used with docker-compose (see server/.env.example for local dev)
+
 # ── Registry ──────────────────────────────────────────────────────────────────
 # Hostname of your container registry (no trailing slash)
 REGISTRY=gitea.thewrightserver.net

.gitignore

@@ -15,5 +15,12 @@ dist/
 .DS_Store
 Thumbs.db
 
+# IDE
+.vscode/
+.idea/
+
+# Test coverage
+coverage/
+
 # Claude Code
 .claude/

client/src/App.tsx

@@ -4,9 +4,9 @@ import PrivateRoute from './components/PrivateRoute';
 import AdminRoute from './components/AdminRoute';
 import Login from './pages/Login';
 import Dashboard from './pages/Dashboard';
-import Tickets from './pages/Tickets';
+import Tickets from './pages/tickets';
 import MyTickets from './pages/MyTickets';
-import TicketDetail from './pages/TicketDetail';
+import TicketDetail from './pages/ticket-detail';
 import Notifications from './pages/Notifications';
 import Settings from './pages/Settings';
 import AdminUsers from './pages/admin/Users';

client/src/api/queries.ts

@@ -7,6 +7,11 @@ import type {
   Webhook,
   PaginatedResponse,
 } from '../../../shared/types';
+import type { CreateTicketInput, UpdateTicketInput } from '../../../shared/schemas/ticket';
+import type { CreateUserInput, UpdateUserInput } from '../../../shared/schemas/user';
+import type { UpdateWebhookInput } from '../../../shared/schemas/notification';
+import type { CreateSavedViewInput } from '../../../shared/schemas/savedView';
+import { savedViewFiltersSchema } from '../../../shared/schemas/savedView';
 
 // ── Keys ─────────────────────────────────────────────────────────────────────
 
@@ -27,14 +32,20 @@ export const qk = {
   analytics: (window: number) => ['analytics', window] as const,
 };
 
-// ── Tickets ──────────────────────────────────────────────────────────────────
+// ── Helpers ─────────────────────────────────────────────────────────────────
 
-export function useTickets(params: Record<string, string | number | undefined> = {}) {
+function cleanParams(params: Record<string, string | number | undefined>): Record<string, string | number> {
-  // Strip undefined values for a stable key
   const clean: Record<string, string | number> = {};
   Object.entries(params).forEach(([k, v]) => {
     if (v !== undefined && v !== '' && v !== null) clean[k] = v;
   });
+  return clean;
+}
+
+// ── Tickets ──────────────────────────────────────────────────────────────────
+
+export function useTickets(params: Record<string, string | number | undefined> = {}) {
+  const clean = cleanParams(params);
 
   return useQuery({
     queryKey: qk.tickets(clean),
@@ -47,10 +58,7 @@ export function useTickets(params: Record<string, string | number | undefined> =
 }
 
 export function useTicketsPaged(params: Record<string, string | number | undefined> = {}) {
-  const clean: Record<string, string | number> = {};
+  const clean = cleanParams(params);
-  Object.entries(params).forEach(([k, v]) => {
-    if (v !== undefined && v !== '' && v !== null) clean[k] = v;
-  });
 
   return useQuery({
     queryKey: qk.ticketsPaged(clean),
@@ -93,7 +101,7 @@ export function useTicketAudit(id: string | undefined, enabled = true) {
 export function useCreateTicket() {
   const qc = useQueryClient();
   return useMutation({
-    mutationFn: async (data: Record<string, unknown>) =>
+    mutationFn: async (data: CreateTicketInput) =>
       (await api.post<Ticket>('/tickets', data)).data,
     onSuccess: () => {
       qc.invalidateQueries({ queryKey: ['tickets'] });
@@ -104,7 +112,7 @@ export function useCreateTicket() {
 export function useUpdateTicket() {
   const qc = useQueryClient();
   return useMutation({
-    mutationFn: async ({ id, data }: { id: string; data: Record<string, unknown> }) =>
+    mutationFn: async ({ id, data }: { id: string; data: UpdateTicketInput }) =>
       (await api.patch<Ticket>(`/tickets/${id}`, data)).data,
     onSuccess: (ticket) => {
       qc.setQueryData(qk.ticket(ticket.displayId), ticket);
@@ -262,7 +270,7 @@ export function useUsers() {
 export function useCreateUser() {
   const qc = useQueryClient();
   return useMutation({
-    mutationFn: async (data: Record<string, unknown>) =>
+    mutationFn: async (data: CreateUserInput) =>
       (await api.post<User>('/users', data)).data,
     onSuccess: () => qc.invalidateQueries({ queryKey: qk.users() }),
   });
@@ -271,7 +279,7 @@ export function useCreateUser() {
 export function useUpdateUser() {
   const qc = useQueryClient();
   return useMutation({
-    mutationFn: async ({ id, data }: { id: string; data: Record<string, unknown> }) =>
+    mutationFn: async ({ id, data }: { id: string; data: UpdateUserInput }) =>
       (await api.patch<User>(`/users/${id}`, data)).data,
     onSuccess: () => qc.invalidateQueries({ queryKey: qk.users() }),
   });
@@ -341,7 +349,7 @@ export function useCreateWebhook() {
 export function useUpdateWebhook() {
   const qc = useQueryClient();
   return useMutation({
-    mutationFn: async ({ id, data }: { id: string; data: Record<string, unknown> }) =>
+    mutationFn: async ({ id, data }: { id: string; data: UpdateWebhookInput }) =>
       (await api.patch<Webhook>(`/webhooks/${id}`, data)).data,
     onSuccess: () => qc.invalidateQueries({ queryKey: qk.webhooks() }),
   });
@@ -371,7 +379,13 @@ export function useRotateWebhookSecret() {
 export function useSavedViews() {
   return useQuery({
     queryKey: qk.savedViews(),
-    queryFn: async () => (await api.get<SavedView[]>('/saved-views')).data,
+    queryFn: async () => {
+      const views = (await api.get<SavedView[]>('/saved-views')).data;
+      return views.map((v) => ({
+        ...v,
+        filters: savedViewFiltersSchema.catch({}).parse(v.filters),
+      }));
+    },
     staleTime: 60_000,
   });
 }
@@ -379,7 +393,7 @@ export function useSavedViews() {
 export function useCreateSavedView() {
   const qc = useQueryClient();
   return useMutation({
-    mutationFn: async (data: { name: string; filters: Record<string, unknown> }) =>
+    mutationFn: async (data: CreateSavedViewInput) =>
       (await api.post<SavedView>('/saved-views', data)).data,
     onSuccess: () => qc.invalidateQueries({ queryKey: qk.savedViews() }),
   });

client/src/components/CTISelect.tsx

@@ -4,9 +4,10 @@ interface CTISelectProps {
   value: { categoryId: string; typeId: string; itemId: string };
   onChange: (value: { categoryId: string; typeId: string; itemId: string }) => void;
   disabled?: boolean;
+  compact?: boolean;
 }
 
-export default function CTISelect({ value, onChange, disabled }: CTISelectProps) {
+export default function CTISelect({ value, onChange, disabled, compact }: CTISelectProps) {
   const { data: categories = [] } = useCategories();
   const { data: types = [] } = useTypes(value.categoryId || undefined);
   const { data: items = [] } = useItems(value.typeId || undefined);
@@ -24,12 +25,58 @@ export default function CTISelect({ value, onChange, disabled }: CTISelectProps)
   };
 
   const selectClass =
-    'block w-full bg-gray-800 border border-gray-700 text-gray-100 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed';
+    'block w-full rounded-md border border-input bg-background px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50';
+
+  if (compact) {
+    return (
+      <div className="flex gap-2">
+        <select
+          value={value.categoryId}
+          onChange={(e) => handleCategory(e.target.value)}
+          disabled={disabled}
+          className={selectClass}
+        >
+          <option value="">Category...</option>
+          {categories.map((c) => (
+            <option key={c.id} value={c.id}>
+              {c.name}
+            </option>
+          ))}
+        </select>
+        <select
+          value={value.typeId}
+          onChange={(e) => handleType(e.target.value)}
+          disabled={disabled || !value.categoryId}
+          className={selectClass}
+        >
+          <option value="">Type...</option>
+          {types.map((t) => (
+            <option key={t.id} value={t.id}>
+              {t.name}
+            </option>
+          ))}
+        </select>
+        <select
+          value={value.itemId}
+          onChange={(e) => handleItem(e.target.value)}
+          disabled={disabled || !value.typeId}
+          className={selectClass}
+        >
+          <option value="">Item...</option>
+          {items.map((i) => (
+            <option key={i.id} value={i.id}>
+              {i.name}
+            </option>
+          ))}
+        </select>
+      </div>
+    );
+  }
 
   return (
     <div className="grid grid-cols-3 gap-3">
       <div>
-        <label className="block text-xs font-medium text-gray-400 mb-1">Category</label>
+        <label className="block text-xs font-medium text-muted-foreground mb-1">Category</label>
         <select
           value={value.categoryId}
           onChange={(e) => handleCategory(e.target.value)}
@@ -46,7 +93,7 @@ export default function CTISelect({ value, onChange, disabled }: CTISelectProps)
       </div>
 
       <div>
-        <label className="block text-xs font-medium text-gray-400 mb-1">Type</label>
+        <label className="block text-xs font-medium text-muted-foreground mb-1">Type</label>
         <select
           value={value.typeId}
           onChange={(e) => handleType(e.target.value)}
@@ -63,7 +110,7 @@ export default function CTISelect({ value, onChange, disabled }: CTISelectProps)
       </div>
 
       <div>
-        <label className="block text-xs font-medium text-gray-400 mb-1">Item</label>
+        <label className="block text-xs font-medium text-muted-foreground mb-1">Item</label>
         <select
           value={value.itemId}
           onChange={(e) => handleItem(e.target.value)}

client/src/components/SeverityBadge.tsx

@@ -1,13 +1,7 @@
-const config: Record<number, { label: string; className: string }> = {
+import { SEVERITY_BADGE } from '../lib/severityColors';
-  1: { label: 'SEV 1', className: 'bg-red-500/20 text-red-400 border-red-500/30' },
-  2: { label: 'SEV 2', className: 'bg-orange-500/20 text-orange-400 border-orange-500/30' },
-  3: { label: 'SEV 3', className: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30' },
-  4: { label: 'SEV 4', className: 'bg-blue-500/20 text-blue-400 border-blue-500/30' },
-  5: { label: 'SEV 5', className: 'bg-gray-500/20 text-gray-400 border-gray-500/30' },
-};
 
 export default function SeverityBadge({ severity }: { severity: number }) {
-  const { label, className } = config[severity] ?? config[5];
+  const { label, className } = SEVERITY_BADGE[severity] ?? SEVERITY_BADGE[5];
   return (
     <span
       className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold border ${className}`}

client/src/lib/severityColors.ts

@@ -0,0 +1,15 @@
+export const SEVERITY_BG: Record<number, string> = {
+  1: 'bg-red-500',
+  2: 'bg-orange-400',
+  3: 'bg-yellow-400',
+  4: 'bg-blue-400',
+  5: 'bg-gray-600',
+};
+
+export const SEVERITY_BADGE: Record<number, { label: string; className: string }> = {
+  1: { label: 'SEV 1', className: 'bg-red-500/20 text-red-400 border-red-500/30' },
+  2: { label: 'SEV 2', className: 'bg-orange-500/20 text-orange-400 border-orange-500/30' },
+  3: { label: 'SEV 3', className: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30' },
+  4: { label: 'SEV 4', className: 'bg-blue-500/20 text-blue-400 border-blue-500/30' },
+  5: { label: 'SEV 5', className: 'bg-gray-500/20 text-gray-400 border-gray-500/30' },
+};

client/src/pages/MyTickets.tsx

@@ -6,6 +6,7 @@ import SeverityBadge from '../components/SeverityBadge';
 import StatusBadge from '../components/StatusBadge';
 import { useTickets } from '../api/queries';
 import { useAuth } from '../contexts/AuthContext';
+import { SEVERITY_BG } from '../lib/severityColors';
 
 export default function MyTickets() {
   const { user } = useAuth();
@@ -42,17 +43,7 @@ export default function MyTickets() {
               className="flex items-center gap-4 bg-gray-900 border border-gray-800 rounded-lg px-4 py-3 hover:border-indigo-500/50 transition-all group"
             >
               <div
-                className={`w-1 self-stretch rounded-full flex-shrink-0 ${
+                className={`w-1 self-stretch rounded-full flex-shrink-0 ${SEVERITY_BG[ticket.severity] ?? 'bg-gray-600'}`}
-                  ticket.severity === 1
-                    ? 'bg-red-500'
-                    : ticket.severity === 2
-                      ? 'bg-orange-400'
-                      : ticket.severity === 3
-                        ? 'bg-yellow-400'
-                        : ticket.severity === 4
-                          ? 'bg-blue-400'
-                          : 'bg-gray-600'
-                }`}
               />
 
               <div className="flex-1 min-w-0">

client/src/pages/NewTicket.tsx

@@ -38,9 +38,10 @@ export default function NewTicketModal({ onClose }: NewTicketModalProps) {
   const onSubmit = async (data: CreateTicketInput) => {
     setError('');
     try {
-      const payload: Record<string, unknown> = { ...data };
+      const { assigneeId, ...rest } = data;
-      if (!data.assigneeId) delete payload.assigneeId;
+      const created = await createTicket.mutateAsync(
-      const created = await createTicket.mutateAsync(payload);
+        assigneeId ? { ...rest, assigneeId } : rest,
+      );
       onClose();
       navigate(`/${created.displayId}`);
     } catch {

client/src/pages/TicketDetail.tsx

@@ -1,796 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
-import { useShortcut } from '../hooks/useShortcuts';
-import { format, formatDistanceToNow } from 'date-fns';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import {
-  Pencil,
-  Trash2,
-  Send,
-  X,
-  Check,
-  MessageSquare,
-  ClipboardList,
-  FileText,
-  ArrowLeft,
-  ChevronDown,
-  ChevronRight,
-} from 'lucide-react';
-import { toast } from 'sonner';
-import Layout from '../components/Layout';
-import Modal from '../components/Modal';
-import SeverityBadge from '../components/SeverityBadge';
-import StatusBadge from '../components/StatusBadge';
-import CTISelect from '../components/CTISelect';
-import Avatar from '../components/Avatar';
-import MentionTextarea from '../components/MentionTextarea';
-import { injectMentionLinks } from '../lib/mentions';
-import { TicketStatus } from '../types';
-import { useAuth } from '../contexts/AuthContext';
-import {
-  useTicket,
-  useTicketAudit,
-  useUpdateTicket,
-  useDeleteTicket,
-  useUsers,
-  useAddComment,
-  useDeleteComment,
-} from '../api/queries';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
-
-type Tab = 'overview' | 'comments' | 'audit';
-
-const SEVERITY_OPTIONS = [
-  { value: 1, label: 'SEV 1 — Critical' },
-  { value: 2, label: 'SEV 2 — High' },
-  { value: 3, label: 'SEV 3 — Medium' },
-  { value: 4, label: 'SEV 4 — Low' },
-  { value: 5, label: 'SEV 5 — Minimal' },
-];
-
-const AUDIT_LABELS: Record<string, string> = {
-  CREATED: 'created this ticket',
-  STATUS_CHANGED: 'changed status',
-  ASSIGNEE_CHANGED: 'changed assignee',
-  SEVERITY_CHANGED: 'changed severity',
-  REROUTED: 'rerouted ticket',
-  TITLE_CHANGED: 'updated title',
-  OVERVIEW_CHANGED: 'updated overview',
-  COMMENT_ADDED: 'added a comment',
-  COMMENT_DELETED: 'deleted a comment',
-};
-
-const AUDIT_COLORS: Record<string, string> = {
-  CREATED: 'bg-green-500',
-  STATUS_CHANGED: 'bg-blue-500',
-  ASSIGNEE_CHANGED: 'bg-purple-500',
-  SEVERITY_CHANGED: 'bg-orange-500',
-  REROUTED: 'bg-cyan-500',
-  TITLE_CHANGED: 'bg-gray-500',
-  OVERVIEW_CHANGED: 'bg-gray-500',
-  COMMENT_ADDED: 'bg-gray-500',
-  COMMENT_DELETED: 'bg-red-500',
-};
-
-const COMMENT_ACTIONS = new Set(['COMMENT_ADDED', 'COMMENT_DELETED']);
-
-export default function TicketDetail() {
-  const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
-  const { user: authUser } = useAuth();
-
-  const [tab, setTab] = useState<Tab>('overview');
-  const [editing, setEditing] = useState(false);
-  const [reroutingCTI, setReroutingCTI] = useState(false);
-  const [commentBody, setCommentBody] = useState('');
-  const [preview, setPreview] = useState(false);
-  const [expandedLogs, setExpandedLogs] = useState<Set<string>>(new Set());
-  const [deleteOpen, setDeleteOpen] = useState(false);
-
-  const commentTextareaRef = useRef<HTMLTextAreaElement | null>(null);
-  const [editForm, setEditForm] = useState({ title: '', overview: '' });
-  const [pendingCTI, setPendingCTI] = useState({ categoryId: '', typeId: '', itemId: '' });
-  const [statusOpen, setStatusOpen] = useState(false);
-  const [severityOpen, setSeverityOpen] = useState(false);
-  const [assigneeOpen, setAssigneeOpen] = useState(false);
-  const [expandedDates, setExpandedDates] = useState<Set<string>>(new Set());
-  const [expandedCommentDates, setExpandedCommentDates] = useState<Set<string>>(new Set());
-
-  // Draft autosave
-  const draftKey = id ? `comment-draft:${id}` : null;
-  useEffect(() => {
-    if (!draftKey) return;
-    const saved = localStorage.getItem(draftKey);
-    if (saved) setCommentBody(saved);
-  }, [draftKey]);
-  useEffect(() => {
-    if (!draftKey) return;
-    if (commentBody) localStorage.setItem(draftKey, commentBody);
-    else localStorage.removeItem(draftKey);
-  }, [commentBody, draftKey]);
-
-  const { data: ticket, isLoading } = useTicket(id);
-  const { data: users = [] } = useUsers();
-  const { data: auditLogs = [] } = useTicketAudit(id, tab === 'audit');
-
-  const updateTicket = useUpdateTicket();
-  const deleteTicketMutation = useDeleteTicket();
-  const addComment = useAddComment(id);
-  const deleteCommentMutation = useDeleteComment(id);
-
-  const toggleDate = (key: string) =>
-    setExpandedDates((prev) => {
-      const next = new Set(prev);
-      if (next.has(key)) next.delete(key);
-      else next.add(key);
-      return next;
-    });
-
-  const toggleCommentDate = (commentId: string) =>
-    setExpandedCommentDates((prev) => {
-      const next = new Set(prev);
-      if (next.has(commentId)) next.delete(commentId);
-      else next.add(commentId);
-      return next;
-    });
-
-  const isAdmin = authUser?.role === 'ADMIN';
-
-  const patch = async (payload: Record<string, unknown>) => {
-    if (!ticket) return;
-    await updateTicket.mutateAsync({ id: ticket.displayId, data: payload });
-  };
-
-  const startEdit = () => {
-    if (!ticket) return;
-    setEditForm({ title: ticket.title, overview: ticket.overview });
-    setEditing(true);
-    setTab('overview');
-  };
-
-  const saveEdit = async () => {
-    await patch({ title: editForm.title, overview: editForm.overview });
-    setEditing(false);
-  };
-
-  const startReroute = () => {
-    if (!ticket) return;
-    setPendingCTI({ categoryId: ticket.categoryId, typeId: ticket.typeId, itemId: ticket.itemId });
-    setReroutingCTI(true);
-  };
-
-  const saveReroute = async () => {
-    await patch(pendingCTI);
-    setReroutingCTI(false);
-  };
-
-  const confirmDeleteTicket = async () => {
-    if (!ticket) return;
-    await deleteTicketMutation.mutateAsync(ticket.displayId);
-    toast.success('Ticket deleted');
-    navigate('/tickets');
-  };
-
-  const submitComment = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!ticket || !commentBody.trim()) return;
-    await addComment.mutateAsync(commentBody.trim());
-    setCommentBody('');
-    setPreview(false);
-    if (draftKey) localStorage.removeItem(draftKey);
-  };
-
-  const handleDeleteComment = async (commentId: string) => {
-    await deleteCommentMutation.mutateAsync(commentId);
-  };
-
-  useShortcut('e', (e) => {
-    if (!ticket || editing) return;
-    e.preventDefault();
-    startEdit();
-  }, [ticket, editing]);
-
-  useShortcut('r', (e) => {
-    if (!ticket) return;
-    e.preventDefault();
-    setTab('comments');
-    setPreview(false);
-    setTimeout(() => commentTextareaRef.current?.focus(), 40);
-  }, [ticket]);
-
-  const toggleLog = (logId: string) => {
-    setExpandedLogs((prev) => {
-      const next = new Set(prev);
-      if (next.has(logId)) next.delete(logId);
-      else next.add(logId);
-      return next;
-    });
-  };
-
-  if (isLoading) {
-    return (
-      <Layout>
-        <div className="flex items-center justify-center h-full text-gray-600 text-sm">
-          Loading...
-        </div>
-      </Layout>
-    );
-  }
-
-  if (!ticket) {
-    return (
-      <Layout>
-        <div className="flex items-center justify-center h-full text-gray-600 text-sm">
-          Ticket not found
-        </div>
-      </Layout>
-    );
-  }
-
-  const commentCount = ticket.comments?.length ?? 0;
-  const agentUsers = users;
-
-  const statusOptions: { value: TicketStatus; label: string }[] = [
-    { value: 'OPEN', label: 'Open' },
-    { value: 'IN_PROGRESS', label: 'In Progress' },
-    { value: 'RESOLVED', label: 'Resolved' },
-    ...(isAdmin ? [{ value: 'CLOSED' as TicketStatus, label: 'Closed' }] : []),
-  ];
-
-  return (
-    <Layout>
-      {/* Back link */}
-      <button
-        onClick={() => navigate('/tickets')}
-        className="flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-300 mb-4 transition-colors"
-      >
-        <ArrowLeft size={14} />
-        All tickets
-      </button>
-
-      <div className="flex flex-col-reverse md:flex-row gap-6 md:items-start">
-        {/* ── Main content ── */}
-        <div className="flex-1 min-w-0">
-          {/* Title card */}
-          <div className="bg-gray-900 border border-gray-800 rounded-xl px-6 py-5 mb-3">
-            <div className="flex items-center gap-2 mb-3 flex-wrap">
-              <span className="font-mono text-xs font-semibold text-gray-500 bg-gray-800 px-2 py-0.5 rounded">
-                {ticket.displayId}
-              </span>
-              <SeverityBadge severity={ticket.severity} />
-              <StatusBadge status={ticket.status} />
-              <span className="text-xs text-gray-500 ml-1">
-                {ticket.category.name} › {ticket.type.name} › {ticket.item.name}
-              </span>
-              <button
-                onClick={startEdit}
-                className="ml-auto text-gray-500 hover:text-gray-300 transition-colors"
-                title="Edit title & overview"
-              >
-                <Pencil size={14} />
-              </button>
-            </div>
-
-            {editing ? (
-              <input
-                type="text"
-                value={editForm.title}
-                onChange={(e) => setEditForm((f) => ({ ...f, title: e.target.value }))}
-                className="w-full text-2xl font-bold text-gray-100 bg-transparent border-0 border-b-2 border-indigo-500 focus:outline-none pb-1"
-                autoFocus
-              />
-            ) : (
-              <h1 className="text-2xl font-bold text-gray-100">{ticket.title}</h1>
-            )}
-          </div>
-
-          {/* Tabs + content */}
-          <div className="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden">
-            {/* Tab bar */}
-            <div className="flex border-b border-gray-800 px-2">
-              {(
-                [
-                  { key: 'overview', icon: FileText, label: 'Overview' },
-                  {
-                    key: 'comments',
-                    icon: MessageSquare,
-                    label: `Comments${commentCount > 0 ? ` (${commentCount})` : ''}`,
-                  },
-                  { key: 'audit', icon: ClipboardList, label: 'Audit Log' },
-                ] as const
-              ).map(({ key, icon: Icon, label }) => (
-                <button
-                  key={key}
-                  onClick={() => setTab(key)}
-                  className={`flex items-center gap-2 px-4 py-3.5 text-sm font-medium border-b-2 -mb-px transition-colors ${
-                    tab === key
-                      ? 'border-indigo-500 text-indigo-400'
-                      : 'border-transparent text-gray-500 hover:text-gray-300'
-                  }`}
-                >
-                  <Icon size={14} />
-                  {label}
-                </button>
-              ))}
-            </div>
-
-            {/* ── Overview ── */}
-            {tab === 'overview' && (
-              <div className="p-6">
-                {editing ? (
-                  <div className="space-y-3">
-                    <textarea
-                      value={editForm.overview}
-                      onChange={(e) => setEditForm((f) => ({ ...f, overview: e.target.value }))}
-                      rows={12}
-                      className="w-full bg-gray-800 border border-gray-700 text-gray-100 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-y font-mono"
-                    />
-                    <div className="flex justify-end gap-2">
-                      <button
-                        onClick={() => setEditing(false)}
-                        className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-400 border border-gray-700 rounded-lg hover:bg-gray-800 transition-colors"
-                      >
-                        <X size={13} /> Cancel
-                      </button>
-                      <button
-                        onClick={saveEdit}
-                        className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
-                      >
-                        <Check size={13} /> Save changes
-                      </button>
-                    </div>
-                  </div>
-                ) : (
-                  <div className="prose text-sm text-gray-300">
-                    <ReactMarkdown remarkPlugins={[remarkGfm]}>{ticket.overview}</ReactMarkdown>
-                  </div>
-                )}
-              </div>
-            )}
-
-            {/* ── Comments ── */}
-            {tab === 'comments' && (
-              <div className="p-6 space-y-4">
-                {ticket.comments && ticket.comments.length > 0 ? (
-                  ticket.comments.map((comment, i) => (
-                    <div key={comment.id} className="flex gap-3 group">
-                      {/* Avatar + spine */}
-                      <div className="flex flex-col items-center">
-                        <Avatar name={comment.author.displayName} size="md" />
-                        {i < ticket.comments!.length - 1 && (
-                          <div className="flex-1 w-px bg-gray-800 mt-2" />
-                        )}
-                      </div>
-                      {/* Card */}
-                      <div className="flex-1 min-w-0 border border-gray-700 rounded-lg overflow-hidden">
-                        <div className="flex items-center justify-between px-4 py-2 bg-gray-800/60 border-b border-gray-700">
-                          <div className="flex items-center gap-2">
-                            <span className="text-sm font-semibold text-gray-200">
-                              {comment.author.displayName}
-                            </span>
-                            <button
-                              onClick={() => toggleCommentDate(comment.id)}
-                              className="text-xs text-gray-500 hover:text-gray-300 transition-colors"
-                            >
-                              {expandedCommentDates.has(comment.id)
-                                ? format(new Date(comment.createdAt), 'MMM d, yyyy HH:mm')
-                                : formatDistanceToNow(new Date(comment.createdAt), {
-                                    addSuffix: true,
-                                  })}
-                            </button>
-                          </div>
-                          {(comment.authorId === authUser?.id || isAdmin) && (
-                            <button
-                              onClick={() => handleDeleteComment(comment.id)}
-                              className="opacity-0 group-hover:opacity-100 text-gray-600 hover:text-red-400 transition-all"
-                            >
-                              <Trash2 size={13} />
-                            </button>
-                          )}
-                        </div>
-                        <div className="px-4 py-3 prose prose-sm prose-invert text-gray-300 text-sm max-w-none">
-                          <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                            {injectMentionLinks(comment.body, users)}
-                          </ReactMarkdown>
-                        </div>
-                      </div>
-                    </div>
-                  ))
-                ) : (
-                  <div className="py-12 text-center text-sm text-gray-600">No comments yet</div>
-                )}
-
-                {/* Composer */}
-                <div className="flex gap-3">
-                  <Avatar name={authUser?.displayName ?? '?'} size="md" />
-                  <div className="flex-1 border border-gray-700 rounded-lg overflow-hidden">
-                    <div className="flex gap-4 px-4 bg-gray-800/60 border-b border-gray-700">
-                      {(['Write', 'Preview'] as const).map((label) => (
-                        <button
-                          key={label}
-                          onClick={() => setPreview(label === 'Preview')}
-                          className={`text-xs py-2 border-b-2 -mb-px transition-colors ${
-                            (label === 'Preview') === preview
-                              ? 'border-indigo-500 text-indigo-400'
-                              : 'border-transparent text-gray-500 hover:text-gray-300'
-                          }`}
-                        >
-                          {label}
-                        </button>
-                      ))}
-                    </div>
-                    <form onSubmit={submitComment} className="p-3">
-                      {preview ? (
-                        <div className="prose prose-sm prose-invert text-gray-300 min-h-[80px] mb-3 px-1 max-w-none">
-                          {commentBody.trim() ? (
-                            <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                              {injectMentionLinks(commentBody, users)}
-                            </ReactMarkdown>
-                          ) : (
-                            <span className="text-gray-600 italic">Nothing to preview</span>
-                          )}
-                        </div>
-                      ) : (
-                        <div className="mb-3">
-                          <MentionTextarea
-                            ref={commentTextareaRef}
-                            value={commentBody}
-                            onChange={setCommentBody}
-                            users={users}
-                            onSubmit={() =>
-                              submitComment({
-                                preventDefault: () => {},
-                              } as unknown as React.FormEvent)
-                            }
-                            placeholder="Leave a comment… Markdown & @mentions"
-                            rows={4}
-                            className="w-full bg-transparent text-gray-100 placeholder-gray-600 text-sm focus:outline-none resize-none"
-                          />
-                        </div>
-                      )}
-                      <div className="flex justify-between items-center border-t border-gray-700 pt-2">
-                        <span className="text-xs text-gray-600">Markdown · Ctrl+Enter</span>
-                        <button
-                          type="submit"
-                          disabled={addComment.isPending || !commentBody.trim()}
-                          className="flex items-center gap-2 px-4 py-1.5 bg-indigo-600 text-white text-sm rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
-                        >
-                          <Send size={13} />
-                          Comment
-                        </button>
-                      </div>
-                    </form>
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {/* ── Audit Log ── */}
-            {tab === 'audit' && (
-              <div className="p-6">
-                {auditLogs.length === 0 ? (
-                  <div className="py-10 text-center text-sm text-gray-600">No activity yet</div>
-                ) : (
-                  <div>
-                    {auditLogs.map((log, i) => {
-                      const hasDetail = !!log.detail;
-                      const isExpanded = expandedLogs.has(log.id);
-                      const isComment = COMMENT_ACTIONS.has(log.action);
-
-                      return (
-                        <div key={log.id} className="flex gap-4">
-                          {/* Timeline */}
-                          <div className="flex flex-col items-center w-5 flex-shrink-0">
-                            <div
-                              className={`w-2.5 h-2.5 rounded-full mt-1 flex-shrink-0 ${AUDIT_COLORS[log.action] ?? 'bg-gray-500'}`}
-                            />
-                            {i < auditLogs.length - 1 && (
-                              <div className="w-px flex-1 bg-gray-800 my-1" />
-                            )}
-                          </div>
-
-                          {/* Entry */}
-                          <div className="flex-1 pb-4">
-                            <div
-                              className={`flex items-baseline justify-between gap-4 ${hasDetail ? 'cursor-pointer select-none' : ''}`}
-                              onClick={() => hasDetail && toggleLog(log.id)}
-                            >
-                              <p className="text-sm text-gray-300">
-                                <span className="font-medium text-gray-100">
-                                  {log.user.displayName}
-                                </span>{' '}
-                                {AUDIT_LABELS[log.action] ?? log.action.toLowerCase()}
-                                {hasDetail && (
-                                  <span className="ml-1 inline-flex items-center text-gray-600">
-                                    {isExpanded ? (
-                                      <ChevronDown size={13} />
-                                    ) : (
-                                      <ChevronRight size={13} />
-                                    )}
-                                  </span>
-                                )}
-                              </p>
-                              <span
-                                className="text-xs text-gray-600 flex-shrink-0"
-                                title={format(new Date(log.createdAt), 'MMM d, yyyy HH:mm:ss')}
-                              >
-                                {formatDistanceToNow(new Date(log.createdAt), { addSuffix: true })}
-                              </span>
-                            </div>
-
-                            {hasDetail && isExpanded && (
-                              <div className="mt-2 ml-0 bg-gray-800 border border-gray-700 rounded-lg px-4 py-3">
-                                {isComment ? (
-                                  <div className="prose text-sm text-gray-300">
-                                    <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                                      {injectMentionLinks(log.detail!, users)}
-                                    </ReactMarkdown>
-                                  </div>
-                                ) : (
-                                  <p className="text-sm text-gray-400">{log.detail}</p>
-                                )}
-                              </div>
-                            )}
-                          </div>
-                        </div>
-                      );
-                    })}
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* ── Sidebar ── */}
-        <div className="w-full md:w-64 flex-shrink-0 md:sticky md:top-0 space-y-3">
-          {/* Ticket Summary */}
-          <div className="bg-gray-900 border border-gray-800 rounded-xl divide-y divide-gray-800">
-            <div className="px-4 py-3">
-              <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
-                Ticket Summary
-              </p>
-            </div>
-
-            {/* Status */}
-            <Popover open={statusOpen} onOpenChange={setStatusOpen}>
-              <PopoverTrigger asChild>
-                <button className="w-full px-4 py-3 text-left hover:bg-gray-800/50 transition-colors">
-                  <p className="text-xs font-medium text-gray-500 mb-1.5">Status</p>
-                  <StatusBadge status={ticket.status} />
-                </button>
-              </PopoverTrigger>
-              <PopoverContent align="start" className="w-56 p-1">
-                {statusOptions.map((s) => (
-                  <button
-                    key={s.value}
-                    onClick={async () => {
-                      await patch({ status: s.value });
-                      setStatusOpen(false);
-                    }}
-                    className="w-full flex items-center gap-2 px-2 py-1.5 rounded-sm text-sm hover:bg-accent"
-                  >
-                    <StatusBadge status={s.value} />
-                    {ticket.status === s.value && (
-                      <Check size={13} className="ml-auto text-primary" />
-                    )}
-                  </button>
-                ))}
-                {!isAdmin && (
-                  <p className="px-2 pt-1 text-[11px] text-muted-foreground">
-                    Closing requires admin
-                  </p>
-                )}
-              </PopoverContent>
-            </Popover>
-
-            {/* Severity */}
-            <Popover open={severityOpen} onOpenChange={setSeverityOpen}>
-              <PopoverTrigger asChild>
-                <button className="w-full px-4 py-3 text-left hover:bg-gray-800/50 transition-colors">
-                  <p className="text-xs font-medium text-gray-500 mb-1.5">Severity</p>
-                  <SeverityBadge severity={ticket.severity} />
-                </button>
-              </PopoverTrigger>
-              <PopoverContent align="start" className="w-56 p-1">
-                {SEVERITY_OPTIONS.map((s) => (
-                  <button
-                    key={s.value}
-                    onClick={async () => {
-                      await patch({ severity: s.value });
-                      setSeverityOpen(false);
-                    }}
-                    className="w-full flex items-center gap-2 px-2 py-1.5 rounded-sm text-sm hover:bg-accent"
-                  >
-                    <SeverityBadge severity={s.value} />
-                    <span className="text-muted-foreground text-xs">
-                      {s.label.split(' — ')[1]}
-                    </span>
-                    {ticket.severity === s.value && (
-                      <Check size={13} className="ml-auto text-primary" />
-                    )}
-                  </button>
-                ))}
-              </PopoverContent>
-            </Popover>
-
-            {/* CTI — one clickable unit */}
-            <button
-              onClick={startReroute}
-              className="w-full px-4 py-3 text-left space-y-3 hover:bg-gray-800/50 transition-colors"
-            >
-              <div>
-                <p className="text-xs font-medium text-gray-500 mb-1">Category</p>
-                <p className="text-sm text-gray-300">{ticket.category.name}</p>
-              </div>
-              <div>
-                <p className="text-xs font-medium text-gray-500 mb-1">Type</p>
-                <p className="text-sm text-gray-300">{ticket.type.name}</p>
-              </div>
-              <div>
-                <p className="text-xs font-medium text-gray-500 mb-1">Issue</p>
-                <p className="text-sm text-gray-300">{ticket.item.name}</p>
-              </div>
-            </button>
-
-            {/* Dates */}
-            <div className="px-4 py-3 space-y-2.5">
-              {[
-                { key: 'created', label: 'Created', date: ticket.createdAt },
-                { key: 'modified', label: 'Modified', date: ticket.updatedAt },
-                ...(ticket.resolvedAt
-                  ? [{ key: 'resolved', label: 'Resolved', date: ticket.resolvedAt }]
-                  : []),
-              ].map(({ key, label, date }) => (
-                <div key={key}>
-                  <p className="text-xs font-medium text-gray-500 mb-1">{label}</p>
-                  <button
-                    onClick={() => toggleDate(key)}
-                    className="text-xs text-gray-300 hover:text-gray-100 transition-colors"
-                  >
-                    {expandedDates.has(key)
-                      ? format(new Date(date), 'MMM d, yyyy HH:mm')
-                      : formatDistanceToNow(new Date(date), { addSuffix: true })}
-                  </button>
-                </div>
-              ))}
-            </div>
-
-            {/* Assignee */}
-            <Popover open={assigneeOpen} onOpenChange={setAssigneeOpen}>
-              <PopoverTrigger asChild>
-                <button className="w-full px-4 py-3 text-left hover:bg-gray-800/50 transition-colors">
-                  <p className="text-xs font-medium text-gray-500 mb-1.5">Assignee</p>
-                  {ticket.assignee ? (
-                    <div className="flex items-center gap-1.5">
-                      <Avatar name={ticket.assignee.displayName} size="sm" />
-                      <span className="text-sm text-gray-300">{ticket.assignee.displayName}</span>
-                    </div>
-                  ) : (
-                    <p className="text-sm text-gray-500">Unassigned</p>
-                  )}
-                </button>
-              </PopoverTrigger>
-              <PopoverContent align="start" className="w-60 p-1">
-                <button
-                  onClick={async () => {
-                    await patch({ assigneeId: null });
-                    setAssigneeOpen(false);
-                  }}
-                  className="w-full flex items-center gap-2 px-2 py-1.5 rounded-sm text-sm hover:bg-accent"
-                >
-                  <span className="text-muted-foreground">Unassigned</span>
-                  {!ticket.assigneeId && <Check size={13} className="ml-auto text-primary" />}
-                </button>
-                <div className="max-h-64 overflow-auto">
-                  {agentUsers.map((u) => (
-                    <button
-                      key={u.id}
-                      onClick={async () => {
-                        await patch({ assigneeId: u.id });
-                        setAssigneeOpen(false);
-                      }}
-                      className="w-full flex items-center gap-2 px-2 py-1.5 rounded-sm text-sm hover:bg-accent"
-                    >
-                      <Avatar name={u.displayName} size="sm" />
-                      <span>{u.displayName}</span>
-                      {ticket.assigneeId === u.id && (
-                        <Check size={13} className="ml-auto text-primary" />
-                      )}
-                    </button>
-                  ))}
-                </div>
-              </PopoverContent>
-            </Popover>
-
-            {/* Requester */}
-            <div className="px-4 py-3">
-              <p className="text-xs font-medium text-gray-500 mb-1.5">Requester</p>
-              <div className="flex items-center gap-1.5">
-                <Avatar name={ticket.createdBy.displayName} size="sm" />
-                <span className="text-sm text-gray-300">{ticket.createdBy.displayName}</span>
-              </div>
-            </div>
-          </div>
-
-          {isAdmin && (
-            <div className="bg-gray-900 border border-gray-800 rounded-xl px-4 py-3">
-              <button
-                onClick={() => setDeleteOpen(true)}
-                className="w-full flex items-center justify-center gap-2 py-2 text-sm text-red-400 border border-red-500/30 rounded-lg hover:bg-red-500/10 transition-colors"
-              >
-                <Trash2 size={13} />
-                Delete ticket
-              </button>
-            </div>
-          )}
-        </div>
-      </div>
-
-      <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Delete this ticket?</AlertDialogTitle>
-            <AlertDialogDescription>
-              {ticket.displayId} · {ticket.title} will be permanently removed along with its
-              comments and audit log. This cannot be undone.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={confirmDeleteTicket}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-            >
-              Delete
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-
-      {reroutingCTI && (
-        <Modal title="Change Routing" onClose={() => setReroutingCTI(false)} size="lg">
-          <div className="space-y-5">
-            <p className="text-sm text-gray-400">
-              Current:{' '}
-              <span className="text-gray-200">
-                {ticket.category.name} › {ticket.type.name} › {ticket.item.name}
-              </span>
-            </p>
-            <CTISelect value={pendingCTI} onChange={setPendingCTI} />
-            <div className="flex justify-end gap-3 pt-1">
-              <button
-                onClick={() => setReroutingCTI(false)}
-                className="px-4 py-2 text-sm text-gray-400 border border-gray-700 rounded-lg hover:bg-gray-800 transition-colors"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={saveReroute}
-                disabled={!pendingCTI.itemId}
-                className="px-4 py-2 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
-              >
-                Save routing
-              </button>
-            </div>
-          </div>
-        </Modal>
-      )}
-    </Layout>
-  );
-}

client/src/pages/Tickets.tsx

@@ -1,641 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { Link, useNavigate, useSearchParams } from 'react-router-dom';
-import { useShortcut } from '../hooks/useShortcuts';
-import { ChevronLeft, ChevronRight, Trash2, Save } from 'lucide-react';
-import { formatDistanceToNow } from 'date-fns';
-import { toast } from 'sonner';
-import Layout from '../components/Layout';
-import SeverityBadge from '../components/SeverityBadge';
-import StatusBadge from '../components/StatusBadge';
-import Avatar from '../components/Avatar';
-import CTISelect from '../components/CTISelect';
-import { TicketStatus } from '../types';
-import { useAuth } from '../contexts/AuthContext';
-import {
-  useTicketsPaged,
-  useBulkTickets,
-  useSavedViews,
-  useCreateSavedView,
-  useDeleteSavedView,
-  useUsers,
-} from '../api/queries';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
-
-const STATUS_TABS: { value: TicketStatus | ''; label: string }[] = [
-  { value: '', label: 'All' },
-  { value: 'OPEN', label: 'Open' },
-  { value: 'IN_PROGRESS', label: 'In progress' },
-  { value: 'RESOLVED', label: 'Resolved' },
-  { value: 'CLOSED', label: 'Closed' },
-];
-
-const PAGE_SIZE = 25;
-const BULK_LIMIT = 500;
-
-function sevColor(severity: number) {
-  return severity === 1
-    ? 'bg-red-500'
-    : severity === 2
-      ? 'bg-orange-400'
-      : severity === 3
-        ? 'bg-yellow-400'
-        : severity === 4
-          ? 'bg-blue-400'
-          : 'bg-gray-600';
-}
-
-export default function Tickets() {
-  const [params, setParams] = useSearchParams();
-  const navigate = useNavigate();
-  const { user: authUser } = useAuth();
-  const { data: users = [] } = useUsers();
-
-  const status = (params.get('status') ?? '') as TicketStatus | '';
-  const severity = params.get('severity') ?? '';
-  const assigneeId = params.get('assigneeId') ?? '';
-  const categoryId = params.get('categoryId') ?? '';
-  const typeId = params.get('typeId') ?? '';
-  const itemId = params.get('itemId') ?? '';
-  const search = params.get('search') ?? '';
-  const page = Math.max(1, Number(params.get('page') ?? '1'));
-
-  const [searchInput, setSearchInput] = useState(search);
-  const [selected, setSelected] = useState<Set<string>>(new Set());
-  const [cursor, setCursor] = useState<number>(-1);
-  const [saveOpen, setSaveOpen] = useState(false);
-  const [newViewName, setNewViewName] = useState('');
-  const [confirmBulk, setConfirmBulk] = useState<
-    | { kind: 'close' | 'setSeverity' | 'reassign'; value?: unknown; label: string }
-    | null
-  >(null);
-
-  useEffect(() => {
-    const t = setTimeout(() => {
-      if (search !== searchInput) {
-        updateParam('search', searchInput);
-        updateParam('page', '1');
-      }
-    }, 250);
-    return () => clearTimeout(t);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchInput]);
-
-  const updateParam = (key: string, value: string | null) => {
-    setParams(
-      (prev) => {
-        const next = new URLSearchParams(prev);
-        if (value === null || value === '') next.delete(key);
-        else next.set(key, value);
-        if (key !== 'page') next.delete('page'); // reset page on filter change
-        return next;
-      },
-      { replace: true },
-    );
-  };
-
-  const queryParams = {
-    status: status || undefined,
-    severity: severity ? Number(severity) : undefined,
-    assigneeId: assigneeId || undefined,
-    categoryId: categoryId || undefined,
-    typeId: typeId || undefined,
-    itemId: itemId || undefined,
-    search: search || undefined,
-    page,
-    pageSize: PAGE_SIZE,
-  };
-
-  const { data, isLoading, isFetching } = useTicketsPaged(queryParams);
-  const tickets = data?.data ?? [];
-  const total = data?.total ?? 0;
-  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
-
-  const savedViewsQ = useSavedViews();
-  const createView = useCreateSavedView();
-  const deleteView = useDeleteSavedView();
-  const bulk = useBulkTickets();
-
-  const allVisible = tickets.length > 0 && tickets.every((t) => selected.has(t.id));
-  const someVisible = tickets.some((t) => selected.has(t.id));
-
-  const toggleAll = () => {
-    setSelected((prev) => {
-      const next = new Set(prev);
-      if (allVisible) tickets.forEach((t) => next.delete(t.id));
-      else tickets.forEach((t) => next.add(t.id));
-      return next;
-    });
-  };
-
-  const toggleOne = (id: string) => {
-    setSelected((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  };
-
-  const clearSelected = () => setSelected(new Set());
-
-  const currentFilters = useMemo(
-    () => ({
-      status: status || undefined,
-      severity: severity || undefined,
-      assigneeId: assigneeId || undefined,
-      categoryId: categoryId || undefined,
-      typeId: typeId || undefined,
-      itemId: itemId || undefined,
-      search: search || undefined,
-    }),
-    [status, severity, assigneeId, categoryId, typeId, itemId, search],
-  );
-
-  const runBulk = async (payload: { action: string; value?: unknown }) => {
-    const ids = Array.from(selected).slice(0, BULK_LIMIT);
-    try {
-      const res = (await bulk.mutateAsync({ ids, ...payload })) as { updated?: number };
-      toast.success(`Updated ${res.updated ?? ids.length} ticket${ids.length === 1 ? '' : 's'}`);
-      clearSelected();
-    } catch (e) {
-      toast.error((e as Error).message || 'Bulk action failed');
-    } finally {
-      setConfirmBulk(null);
-    }
-  };
-
-  const activeCount = Object.values(currentFilters).filter(Boolean).length;
-
-  const handleSaveView = async () => {
-    if (!newViewName.trim()) return;
-    try {
-      await createView.mutateAsync({
-        name: newViewName.trim(),
-        filters: currentFilters,
-      });
-      toast.success('Saved view');
-      setNewViewName('');
-      setSaveOpen(false);
-    } catch (e) {
-      toast.error((e as Error).message || 'Failed to save view');
-    }
-  };
-
-  const applyView = (filters: Record<string, unknown>) => {
-    const next = new URLSearchParams();
-    Object.entries(filters).forEach(([k, v]) => {
-      if (v !== undefined && v !== null && v !== '') next.set(k, String(v));
-    });
-    setParams(next, { replace: true });
-    setSearchInput(String(filters.search ?? ''));
-  };
-
-  const agentUsers = users;
-
-  // Keyboard navigation
-  useEffect(() => {
-    setCursor((c) => (c >= tickets.length ? tickets.length - 1 : c));
-  }, [tickets.length]);
-
-  useShortcut('j', (e) => {
-    if (tickets.length === 0) return;
-    e.preventDefault();
-    setCursor((c) => Math.min(tickets.length - 1, c < 0 ? 0 : c + 1));
-  }, [tickets.length]);
-
-  useShortcut('k', (e) => {
-    if (tickets.length === 0) return;
-    e.preventDefault();
-    setCursor((c) => Math.max(0, c < 0 ? 0 : c - 1));
-  }, [tickets.length]);
-
-  useShortcut('enter', (e) => {
-    if (cursor < 0 || cursor >= tickets.length) return;
-    e.preventDefault();
-    navigate(`/${tickets[cursor].displayId}`);
-  }, [cursor, tickets]);
-
-  useShortcut('x', (e) => {
-    if (cursor < 0 || cursor >= tickets.length) return;
-    e.preventDefault();
-    toggleOne(tickets[cursor].id);
-  }, [cursor, tickets]);
-
-  return (
-    <Layout wide>
-      {/* Status tabs */}
-      <div className="flex items-center border-b border-border mb-4 -mx-4 px-4 overflow-x-auto">
-        {STATUS_TABS.map((tab) => (
-          <button
-            key={tab.value}
-            onClick={() => updateParam('status', tab.value || null)}
-            className={`px-3 py-2 text-sm whitespace-nowrap border-b-2 -mb-px transition-colors ${
-              status === tab.value
-                ? 'border-primary text-foreground font-medium'
-                : 'border-transparent text-muted-foreground hover:text-foreground'
-            }`}
-          >
-            {tab.label}
-          </button>
-        ))}
-      </div>
-
-      {/* Filter bar */}
-      <div className="flex gap-2 mb-4 flex-wrap items-center">
-        <input
-          type="search"
-          value={searchInput}
-          onChange={(e) => setSearchInput(e.target.value)}
-          placeholder="Search title, overview, ID…"
-          className="flex-1 min-w-48 max-w-xs px-3 py-1.5 rounded-md border border-input bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-ring"
-        />
-
-        <select
-          value={severity}
-          onChange={(e) => updateParam('severity', e.target.value || null)}
-          className="px-3 py-1.5 rounded-md border border-input bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-ring"
-        >
-          <option value="">All severities</option>
-          {[1, 2, 3, 4, 5].map((s) => (
-            <option key={s} value={s}>
-              SEV {s}
-            </option>
-          ))}
-        </select>
-
-        <select
-          value={assigneeId}
-          onChange={(e) => updateParam('assigneeId', e.target.value || null)}
-          className="px-3 py-1.5 rounded-md border border-input bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-ring"
-        >
-          <option value="">All assignees</option>
-          {authUser && (
-            <option value={authUser.id}>Me ({authUser.displayName})</option>
-          )}
-          {agentUsers
-            .filter((u) => u.id !== authUser?.id)
-            .map((u) => (
-              <option key={u.id} value={u.id}>
-                {u.displayName}
-              </option>
-            ))}
-        </select>
-
-        <div className="min-w-56">
-          <CTISelect
-            value={{ categoryId, typeId, itemId }}
-            onChange={(cti) => {
-              setParams(
-                (prev) => {
-                  const next = new URLSearchParams(prev);
-                  next.delete('page');
-                  if (cti.categoryId) next.set('categoryId', cti.categoryId);
-                  else next.delete('categoryId');
-                  if (cti.typeId) next.set('typeId', cti.typeId);
-                  else next.delete('typeId');
-                  if (cti.itemId) next.set('itemId', cti.itemId);
-                  else next.delete('itemId');
-                  return next;
-                },
-                { replace: true },
-              );
-            }}
-          />
-        </div>
-
-        {/* Saved views */}
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <button className="px-3 py-1.5 rounded-md border border-input bg-background text-sm hover:bg-accent">
-              Saved views
-            </button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-64">
-            <DropdownMenuLabel>Saved views</DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            {savedViewsQ.data && savedViewsQ.data.length > 0 ? (
-              savedViewsQ.data.map((v) => (
-                <div
-                  key={v.id}
-                  className="flex items-center gap-1 px-2 py-1 hover:bg-accent rounded-sm"
-                >
-                  <button
-                    onClick={() => applyView(v.filters)}
-                    className="flex-1 text-left text-sm truncate"
-                  >
-                    {v.name}
-                  </button>
-                  <button
-                    onClick={() => deleteView.mutate(v.id)}
-                    aria-label="Delete view"
-                    className="text-muted-foreground hover:text-destructive"
-                  >
-                    <Trash2 size={13} />
-                  </button>
-                </div>
-              ))
-            ) : (
-              <p className="px-2 py-1 text-xs text-muted-foreground">No saved views yet</p>
-            )}
-            <DropdownMenuSeparator />
-            <DropdownMenuItem
-              disabled={activeCount === 0}
-              onSelect={() => setSaveOpen(true)}
-              className="gap-2"
-            >
-              <Save size={13} />
-              Save current filters
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-
-        <div className="ml-auto text-xs text-muted-foreground">
-          {isFetching ? 'Loading…' : `${total} result${total === 1 ? '' : 's'}`}
-        </div>
-      </div>
-
-      {/* Bulk bar */}
-      {selected.size > 0 && (
-        <div className="flex items-center gap-3 mb-3 px-3 py-2 rounded-md bg-accent border border-border">
-          <span className="text-sm font-medium">
-            {selected.size} selected
-          </span>
-          <button
-            onClick={clearSelected}
-            className="text-xs text-muted-foreground hover:text-foreground"
-          >
-            Clear
-          </button>
-          <div className="h-4 w-px bg-border mx-1" />
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <button className="px-2 py-1 rounded-md text-sm hover:bg-background">
-                Reassign
-              </button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start">
-              <DropdownMenuItem
-                onSelect={() =>
-                  setConfirmBulk({
-                    kind: 'reassign',
-                    value: null,
-                    label: 'Unassign',
-                  })
-                }
-              >
-                Unassigned
-              </DropdownMenuItem>
-              {agentUsers.map((u) => (
-                <DropdownMenuItem
-                  key={u.id}
-                  onSelect={() =>
-                    setConfirmBulk({
-                      kind: 'reassign',
-                      value: u.id,
-                      label: `Assign to ${u.displayName}`,
-                    })
-                  }
-                >
-                  {u.displayName}
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuContent>
-          </DropdownMenu>
-
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <button className="px-2 py-1 rounded-md text-sm hover:bg-background">
-                Severity
-              </button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start">
-              {[1, 2, 3, 4, 5].map((s) => (
-                <DropdownMenuItem
-                  key={s}
-                  onSelect={() =>
-                    setConfirmBulk({
-                      kind: 'setSeverity',
-                      value: s,
-                      label: `Set severity SEV ${s}`,
-                    })
-                  }
-                >
-                  SEV {s}
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuContent>
-          </DropdownMenu>
-
-          <button
-            onClick={() =>
-              setConfirmBulk({ kind: 'close', label: 'Close selected tickets' })
-            }
-            className="px-2 py-1 rounded-md text-sm hover:bg-background"
-          >
-            Close
-          </button>
-        </div>
-      )}
-
-      {/* Ticket list */}
-      {isLoading ? (
-        <div className="text-center py-16 text-muted-foreground text-sm">Loading…</div>
-      ) : tickets.length === 0 ? (
-        <div className="text-center py-16 text-muted-foreground text-sm">No tickets found</div>
-      ) : (
-        <div className="rounded-md border border-border overflow-hidden">
-          <div className="flex items-center gap-3 px-4 py-2 bg-card text-xs text-muted-foreground border-b border-border">
-            <input
-              type="checkbox"
-              checked={allVisible}
-              aria-label="Select all on page"
-              ref={(el) => {
-                if (el) el.indeterminate = !allVisible && someVisible;
-              }}
-              onChange={toggleAll}
-              className="cursor-pointer"
-            />
-            <span>
-              {tickets.length} of {total}
-            </span>
-          </div>
-
-          <ul className="divide-y divide-border">
-            {tickets.map((ticket, idx) => (
-              <li
-                key={ticket.id}
-                className={`flex items-center gap-3 px-4 py-3 transition-colors ${
-                  idx === cursor
-                    ? 'bg-accent/50 ring-1 ring-inset ring-primary'
-                    : 'hover:bg-accent/30'
-                }`}
-              >
-                <input
-                  type="checkbox"
-                  checked={selected.has(ticket.id)}
-                  onChange={() => toggleOne(ticket.id)}
-                  aria-label={`Select ${ticket.displayId}`}
-                  className="cursor-pointer flex-shrink-0"
-                />
-                <div
-                  className={`w-1 self-stretch rounded-full flex-shrink-0 ${sevColor(ticket.severity)}`}
-                />
-                <Link
-                  to={`/${ticket.displayId}`}
-                  className="flex-1 min-w-0 flex items-center gap-3 group"
-                >
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2 mb-0.5 flex-wrap">
-                      <span className="text-sm font-medium text-foreground group-hover:text-primary truncate">
-                        {ticket.title}
-                      </span>
-                      <span className="text-xs font-mono text-muted-foreground">
-                        {ticket.displayId}
-                      </span>
-                    </div>
-                    <div className="flex items-center gap-2 text-xs text-muted-foreground flex-wrap">
-                      <SeverityBadge severity={ticket.severity} />
-                      <StatusBadge status={ticket.status} />
-                      <span>
-                        opened {formatDistanceToNow(new Date(ticket.createdAt), {
-                          addSuffix: true,
-                        })}{' '}
-                        by {ticket.createdBy.displayName}
-                      </span>
-                      <span className="hidden md:inline">
-                        · {ticket.category.name} › {ticket.type.name} › {ticket.item.name}
-                      </span>
-                      {ticket.assignee && (
-                        <span className="hidden md:inline">· assigned {ticket.assignee.displayName}</span>
-                      )}
-                      <span>· {ticket._count?.comments ?? 0} comments</span>
-                    </div>
-                  </div>
-                  <div className="hidden sm:flex items-center flex-shrink-0">
-                    {ticket.assignee ? (
-                      <Avatar name={ticket.assignee.displayName} size="sm" />
-                    ) : null}
-                  </div>
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-
-      {/* Pagination */}
-      {totalPages > 1 && (
-        <div className="flex items-center justify-between mt-4 text-sm">
-          <div className="text-muted-foreground">
-            Page {page} of {totalPages}
-          </div>
-          <div className="flex items-center gap-1">
-            <button
-              disabled={page <= 1}
-              onClick={() => updateParam('page', String(page - 1))}
-              className="p-1.5 rounded-md hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed"
-            >
-              <ChevronLeft size={16} />
-            </button>
-            <button
-              disabled={page >= totalPages}
-              onClick={() => updateParam('page', String(page + 1))}
-              className="p-1.5 rounded-md hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed"
-            >
-              <ChevronRight size={16} />
-            </button>
-          </div>
-        </div>
-      )}
-
-      {/* Save view dialog */}
-      <Dialog open={saveOpen} onOpenChange={setSaveOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Save current filters</DialogTitle>
-          </DialogHeader>
-          <div className="py-2">
-            <input
-              autoFocus
-              type="text"
-              value={newViewName}
-              onChange={(e) => setNewViewName(e.target.value)}
-              placeholder="View name"
-              className="w-full px-3 py-2 rounded-md border border-input bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring"
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') handleSaveView();
-              }}
-            />
-          </div>
-          <DialogFooter>
-            <button
-              onClick={() => setSaveOpen(false)}
-              className="px-3 py-1.5 rounded-md border border-input text-sm hover:bg-accent"
-            >
-              Cancel
-            </button>
-            <button
-              onClick={handleSaveView}
-              disabled={!newViewName.trim() || createView.isPending}
-              className="px-3 py-1.5 rounded-md bg-primary text-primary-foreground text-sm disabled:opacity-50"
-            >
-              Save
-            </button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      {/* Confirm bulk action */}
-      <AlertDialog open={!!confirmBulk} onOpenChange={(o) => !o && setConfirmBulk(null)}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>{confirmBulk?.label}</AlertDialogTitle>
-            <AlertDialogDescription>
-              This will affect {selected.size} ticket{selected.size === 1 ? '' : 's'}.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={() => {
-                if (!confirmBulk) return;
-                if (confirmBulk.kind === 'close') runBulk({ action: 'close' });
-                else
-                  runBulk({
-                    action: confirmBulk.kind,
-                    value: confirmBulk.value,
-                  });
-              }}
-            >
-              Confirm
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </Layout>
-  );
-}

client/src/pages/admin/Users.tsx

@@ -4,6 +4,7 @@ import { toast } from 'sonner';
 import Layout from '../../components/Layout';
 import Modal from '../../components/Modal';
 import { User, Role } from '../../types';
+import type { CreateUserInput } from '../../../../shared/schemas/user';
 import { useAuth } from '../../contexts/AuthContext';
 import {
   useUsers,
@@ -105,14 +106,13 @@ export default function AdminUsers() {
     e.preventDefault();
     setError('');
     try {
-      const payload: Record<string, string> = {
+      const created = await createUser.mutateAsync({
         username: form.username,
         email: form.email,
         displayName: form.displayName,
-        role: form.role,
+        role: form.role as CreateUserInput['role'],
-      };
+        password: form.password,
-      if (form.password) payload.password = form.password;
+      });
-      const created = await createUser.mutateAsync(payload);
       if (created.apiKey) setNewApiKey(created.apiKey);
       else closeModal();
     } catch (err: unknown) {

client/src/pages/ticket-detail/TicketAuditLog.tsx

@@ -0,0 +1,104 @@
+import { useState } from 'react';
+import { format, formatDistanceToNow } from 'date-fns';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { AUDIT_LABELS, AUDIT_COLORS } from '../../../../shared/constants/labels';
+import { injectMentionLinks } from '../../lib/mentions';
+import type { AuditLog, User } from '../../types';
+
+const COMMENT_ACTIONS = new Set(['COMMENT_ADDED', 'COMMENT_DELETED']);
+
+interface TicketAuditLogProps {
+  auditLogs: AuditLog[];
+  users: User[];
+}
+
+export default function TicketAuditLog({ auditLogs, users }: TicketAuditLogProps) {
+  const [expandedLogs, setExpandedLogs] = useState<Set<string>>(new Set());
+
+  const toggleLog = (logId: string) => {
+    setExpandedLogs((prev) => {
+      const next = new Set(prev);
+      if (next.has(logId)) next.delete(logId);
+      else next.add(logId);
+      return next;
+    });
+  };
+
+  if (auditLogs.length === 0) {
+    return (
+      <div className="p-6">
+        <div className="py-10 text-center text-sm text-gray-600">No activity yet</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <div>
+        {auditLogs.map((log, i) => {
+          const hasDetail = !!log.detail;
+          const isExpanded = expandedLogs.has(log.id);
+          const isComment = COMMENT_ACTIONS.has(log.action);
+
+          return (
+            <div key={log.id} className="flex gap-4">
+              <div className="flex flex-col items-center w-5 flex-shrink-0">
+                <div
+                  className={`w-2.5 h-2.5 rounded-full mt-1 flex-shrink-0 ${AUDIT_COLORS[log.action] ?? 'bg-gray-500'}`}
+                />
+                {i < auditLogs.length - 1 && (
+                  <div className="w-px flex-1 bg-gray-800 my-1" />
+                )}
+              </div>
+
+              <div className="flex-1 pb-4">
+                <div
+                  className={`flex items-baseline justify-between gap-4 ${hasDetail ? 'cursor-pointer select-none' : ''}`}
+                  onClick={() => hasDetail && toggleLog(log.id)}
+                >
+                  <p className="text-sm text-gray-300">
+                    <span className="font-medium text-gray-100">
+                      {log.user.displayName}
+                    </span>{' '}
+                    {AUDIT_LABELS[log.action] ?? log.action.toLowerCase()}
+                    {hasDetail && (
+                      <span className="ml-1 inline-flex items-center text-gray-600">
+                        {isExpanded ? (
+                          <ChevronDown size={13} />
+                        ) : (
+                          <ChevronRight size={13} />
+                        )}
+                      </span>
+                    )}
+                  </p>
+                  <span
+                    className="text-xs text-gray-600 flex-shrink-0"
+                    title={format(new Date(log.createdAt), 'MMM d, yyyy HH:mm:ss')}
+                  >
+                    {formatDistanceToNow(new Date(log.createdAt), { addSuffix: true })}
+                  </span>
+                </div>
+
+                {hasDetail && isExpanded && (
+                  <div className="mt-2 ml-0 bg-gray-800 border border-gray-700 rounded-lg px-4 py-3">
+                    {isComment ? (
+                      <div className="prose text-sm text-gray-300">
+                        <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                          {injectMentionLinks(log.detail!, users)}
+                        </ReactMarkdown>
+                      </div>
+                    ) : (
+                      <p className="text-sm text-gray-400">{log.detail}</p>
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

client/src/pages/ticket-detail/TicketComments.tsx

@@ -0,0 +1,161 @@
+import { useState } from 'react';
+import { format, formatDistanceToNow } from 'date-fns';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Trash2, Send } from 'lucide-react';
+import Avatar from '../../components/Avatar';
+import MentionTextarea from '../../components/MentionTextarea';
+import { injectMentionLinks } from '../../lib/mentions';
+import type { Ticket, User, Comment } from '../../types';
+
+interface TicketCommentsProps {
+  ticket: Ticket & { comments?: Comment[] };
+  users: User[];
+  authUser: { id: string; displayName: string; role: string } | null;
+  isAdmin: boolean;
+  commentBody: string;
+  setCommentBody: (v: string) => void;
+  preview: boolean;
+  setPreview: (v: boolean) => void;
+  commentTextareaRef: React.Ref<HTMLTextAreaElement>;
+  onSubmitComment: (e: React.FormEvent) => void;
+  onDeleteComment: (commentId: string) => void;
+  isSubmitting: boolean;
+}
+
+export default function TicketComments({
+  ticket,
+  users,
+  authUser,
+  isAdmin,
+  commentBody,
+  setCommentBody,
+  preview,
+  setPreview,
+  commentTextareaRef,
+  onSubmitComment,
+  onDeleteComment,
+  isSubmitting,
+}: TicketCommentsProps) {
+  const [expandedDates, setExpandedDates] = useState<Set<string>>(new Set());
+
+  const toggleDate = (commentId: string) =>
+    setExpandedDates((prev) => {
+      const next = new Set(prev);
+      if (next.has(commentId)) next.delete(commentId);
+      else next.add(commentId);
+      return next;
+    });
+
+  return (
+    <div className="p-6 space-y-4">
+      {ticket.comments && ticket.comments.length > 0 ? (
+        ticket.comments.map((comment, i) => (
+          <div key={comment.id} className="flex gap-3 group">
+            <div className="flex flex-col items-center">
+              <Avatar name={comment.author.displayName} size="md" />
+              {i < ticket.comments!.length - 1 && (
+                <div className="flex-1 w-px bg-gray-800 mt-2" />
+              )}
+            </div>
+            <div className="flex-1 min-w-0 border border-gray-700 rounded-lg overflow-hidden">
+              <div className="flex items-center justify-between px-4 py-2 bg-gray-800/60 border-b border-gray-700">
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-semibold text-gray-200">
+                    {comment.author.displayName}
+                  </span>
+                  <button
+                    onClick={() => toggleDate(comment.id)}
+                    className="text-xs text-gray-500 hover:text-gray-300 transition-colors"
+                  >
+                    {expandedDates.has(comment.id)
+                      ? format(new Date(comment.createdAt), 'MMM d, yyyy HH:mm')
+                      : formatDistanceToNow(new Date(comment.createdAt), { addSuffix: true })}
+                  </button>
+                </div>
+                {(comment.authorId === authUser?.id || isAdmin) && (
+                  <button
+                    onClick={() => onDeleteComment(comment.id)}
+                    className="opacity-0 group-hover:opacity-100 text-gray-600 hover:text-red-400 transition-all"
+                  >
+                    <Trash2 size={13} />
+                  </button>
+                )}
+              </div>
+              <div className="px-4 py-3 prose prose-sm prose-invert text-gray-300 text-sm max-w-none">
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                  {injectMentionLinks(comment.body, users)}
+                </ReactMarkdown>
+              </div>
+            </div>
+          </div>
+        ))
+      ) : (
+        <div className="py-12 text-center text-sm text-gray-600">No comments yet</div>
+      )}
+
+      {/* Composer */}
+      <div className="flex gap-3">
+        <Avatar name={authUser?.displayName ?? '?'} size="md" />
+        <div className="flex-1 border border-gray-700 rounded-lg overflow-hidden">
+          <div className="flex gap-4 px-4 bg-gray-800/60 border-b border-gray-700">
+            {(['Write', 'Preview'] as const).map((label) => (
+              <button
+                key={label}
+                onClick={() => setPreview(label === 'Preview')}
+                className={`text-xs py-2 border-b-2 -mb-px transition-colors ${
+                  (label === 'Preview') === preview
+                    ? 'border-indigo-500 text-indigo-400'
+                    : 'border-transparent text-gray-500 hover:text-gray-300'
+                }`}
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+          <form onSubmit={onSubmitComment} className="p-3">
+            {preview ? (
+              <div className="prose prose-sm prose-invert text-gray-300 min-h-[80px] mb-3 px-1 max-w-none">
+                {commentBody.trim() ? (
+                  <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                    {injectMentionLinks(commentBody, users)}
+                  </ReactMarkdown>
+                ) : (
+                  <span className="text-gray-600 italic">Nothing to preview</span>
+                )}
+              </div>
+            ) : (
+              <div className="mb-3">
+                <MentionTextarea
+                  ref={commentTextareaRef}
+                  value={commentBody}
+                  onChange={setCommentBody}
+                  users={users}
+                  onSubmit={() =>
+                    onSubmitComment({
+                      preventDefault: () => {},
+                    } as unknown as React.FormEvent)
+                  }
+                  placeholder="Leave a comment… Markdown & @mentions"
+                  rows={4}
+                  className="w-full bg-transparent text-gray-100 placeholder-gray-600 text-sm focus:outline-none resize-none"
+                />
+              </div>
+            )}
+            <div className="flex justify-between items-center border-t border-gray-700 pt-2">
+              <span className="text-xs text-gray-600">Markdown · Ctrl+Enter</span>
+              <button
+                type="submit"
+                disabled={isSubmitting || !commentBody.trim()}
+                className="flex items-center gap-2 px-4 py-1.5 bg-indigo-600 text-white text-sm rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
+              >
+                <Send size={13} />
+                Comment
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/pages/ticket-detail/TicketDetail.tsx

@@ -0,0 +1,354 @@
+import { useEffect, useRef, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useShortcut } from '../../hooks/useShortcuts';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Pencil, X, Check, MessageSquare, ClipboardList, FileText, ArrowLeft } from 'lucide-react';
+import { toast } from 'sonner';
+import Layout from '../../components/Layout';
+import Modal from '../../components/Modal';
+import SeverityBadge from '../../components/SeverityBadge';
+import StatusBadge from '../../components/StatusBadge';
+import CTISelect from '../../components/CTISelect';
+import { useAuth } from '../../contexts/AuthContext';
+import {
+  useTicket,
+  useTicketAudit,
+  useUpdateTicket,
+  useDeleteTicket,
+  useUsers,
+  useAddComment,
+  useDeleteComment,
+} from '../../api/queries';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import type { UpdateTicketInput } from '../../../../shared/schemas/ticket';
+import TicketComments from './TicketComments';
+import TicketAuditLog from './TicketAuditLog';
+import TicketSidebar from './TicketSidebar';
+
+type Tab = 'overview' | 'comments' | 'audit';
+
+export default function TicketDetail() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { user: authUser } = useAuth();
+
+  const [tab, setTab] = useState<Tab>('overview');
+  const [editing, setEditing] = useState(false);
+  const [reroutingCTI, setReroutingCTI] = useState(false);
+  const [commentBody, setCommentBody] = useState('');
+  const [preview, setPreview] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+
+  const commentTextareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const [editForm, setEditForm] = useState({ title: '', overview: '' });
+  const [pendingCTI, setPendingCTI] = useState({ categoryId: '', typeId: '', itemId: '' });
+
+  // Draft autosave
+  const draftKey = id ? `comment-draft:${id}` : null;
+  useEffect(() => {
+    if (!draftKey) return;
+    const saved = localStorage.getItem(draftKey);
+    if (saved) setCommentBody(saved);
+  }, [draftKey]);
+  useEffect(() => {
+    if (!draftKey) return;
+    if (commentBody) localStorage.setItem(draftKey, commentBody);
+    else localStorage.removeItem(draftKey);
+  }, [commentBody, draftKey]);
+
+  const { data: ticket, isLoading } = useTicket(id);
+  const { data: users = [] } = useUsers();
+  const { data: auditLogs = [] } = useTicketAudit(id, tab === 'audit');
+
+  const updateTicket = useUpdateTicket();
+  const deleteTicketMutation = useDeleteTicket();
+  const addComment = useAddComment(id);
+  const deleteCommentMutation = useDeleteComment(id);
+
+  const isAdmin = authUser?.role === 'ADMIN';
+
+  const patch = async (payload: UpdateTicketInput) => {
+    if (!ticket) return;
+    await updateTicket.mutateAsync({ id: ticket.displayId, data: payload });
+  };
+
+  const startEdit = () => {
+    if (!ticket) return;
+    setEditForm({ title: ticket.title, overview: ticket.overview });
+    setEditing(true);
+    setTab('overview');
+  };
+
+  const saveEdit = async () => {
+    await patch({ title: editForm.title, overview: editForm.overview });
+    setEditing(false);
+  };
+
+  const startReroute = () => {
+    if (!ticket) return;
+    setPendingCTI({ categoryId: ticket.categoryId, typeId: ticket.typeId, itemId: ticket.itemId });
+    setReroutingCTI(true);
+  };
+
+  const saveReroute = async () => {
+    await patch(pendingCTI);
+    setReroutingCTI(false);
+  };
+
+  const confirmDeleteTicket = async () => {
+    if (!ticket) return;
+    await deleteTicketMutation.mutateAsync(ticket.displayId);
+    toast.success('Ticket deleted');
+    navigate('/tickets');
+  };
+
+  const submitComment = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!ticket || !commentBody.trim()) return;
+    await addComment.mutateAsync(commentBody.trim());
+    setCommentBody('');
+    setPreview(false);
+    if (draftKey) localStorage.removeItem(draftKey);
+  };
+
+  const handleDeleteComment = async (commentId: string) => {
+    await deleteCommentMutation.mutateAsync(commentId);
+  };
+
+  useShortcut('e', (e) => {
+    if (!ticket || editing) return;
+    e.preventDefault();
+    startEdit();
+  }, [ticket, editing]);
+
+  useShortcut('r', (e) => {
+    if (!ticket) return;
+    e.preventDefault();
+    setTab('comments');
+    setPreview(false);
+    setTimeout(() => commentTextareaRef.current?.focus(), 40);
+  }, [ticket]);
+
+  if (isLoading) {
+    return (
+      <Layout>
+        <div className="flex items-center justify-center h-full text-gray-600 text-sm">
+          Loading...
+        </div>
+      </Layout>
+    );
+  }
+
+  if (!ticket) {
+    return (
+      <Layout>
+        <div className="flex items-center justify-center h-full text-gray-600 text-sm">
+          Ticket not found
+        </div>
+      </Layout>
+    );
+  }
+
+  const commentCount = ticket.comments?.length ?? 0;
+
+  return (
+    <Layout>
+      <button
+        onClick={() => navigate('/tickets')}
+        className="flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-300 mb-4 transition-colors"
+      >
+        <ArrowLeft size={14} />
+        All tickets
+      </button>
+
+      <div className="flex flex-col-reverse md:flex-row gap-6 md:items-start">
+        {/* Main content */}
+        <div className="flex-1 min-w-0">
+          {/* Title card */}
+          <div className="bg-gray-900 border border-gray-800 rounded-xl px-6 py-5 mb-3">
+            <div className="flex items-center gap-2 mb-3 flex-wrap">
+              <span className="font-mono text-xs font-semibold text-gray-500 bg-gray-800 px-2 py-0.5 rounded">
+                {ticket.displayId}
+              </span>
+              <SeverityBadge severity={ticket.severity} />
+              <StatusBadge status={ticket.status} />
+              <span className="text-xs text-gray-500 ml-1">
+                {ticket.category.name} › {ticket.type.name} › {ticket.item.name}
+              </span>
+              <button
+                onClick={startEdit}
+                className="ml-auto text-gray-500 hover:text-gray-300 transition-colors"
+                title="Edit title & overview"
+              >
+                <Pencil size={14} />
+              </button>
+            </div>
+
+            {editing ? (
+              <input
+                type="text"
+                value={editForm.title}
+                onChange={(e) => setEditForm((f) => ({ ...f, title: e.target.value }))}
+                className="w-full text-2xl font-bold text-gray-100 bg-transparent border-0 border-b-2 border-indigo-500 focus:outline-none pb-1"
+                autoFocus
+              />
+            ) : (
+              <h1 className="text-2xl font-bold text-gray-100">{ticket.title}</h1>
+            )}
+          </div>
+
+          {/* Tabs + content */}
+          <div className="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden">
+            <div className="flex border-b border-gray-800 px-2">
+              {(
+                [
+                  { key: 'overview', icon: FileText, label: 'Overview' },
+                  {
+                    key: 'comments',
+                    icon: MessageSquare,
+                    label: `Comments${commentCount > 0 ? ` (${commentCount})` : ''}`,
+                  },
+                  { key: 'audit', icon: ClipboardList, label: 'Audit Log' },
+                ] as const
+              ).map(({ key, icon: Icon, label }) => (
+                <button
+                  key={key}
+                  onClick={() => setTab(key)}
+                  className={`flex items-center gap-2 px-4 py-3.5 text-sm font-medium border-b-2 -mb-px transition-colors ${
+                    tab === key
+                      ? 'border-indigo-500 text-indigo-400'
+                      : 'border-transparent text-gray-500 hover:text-gray-300'
+                  }`}
+                >
+                  <Icon size={14} />
+                  {label}
+                </button>
+              ))}
+            </div>
+
+            {tab === 'overview' && (
+              <div className="p-6">
+                {editing ? (
+                  <div className="space-y-3">
+                    <textarea
+                      value={editForm.overview}
+                      onChange={(e) => setEditForm((f) => ({ ...f, overview: e.target.value }))}
+                      rows={12}
+                      className="w-full bg-gray-800 border border-gray-700 text-gray-100 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-y font-mono"
+                    />
+                    <div className="flex justify-end gap-2">
+                      <button
+                        onClick={() => setEditing(false)}
+                        className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-400 border border-gray-700 rounded-lg hover:bg-gray-800 transition-colors"
+                      >
+                        <X size={13} /> Cancel
+                      </button>
+                      <button
+                        onClick={saveEdit}
+                        className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
+                      >
+                        <Check size={13} /> Save changes
+                      </button>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="prose text-sm text-gray-300">
+                    <ReactMarkdown remarkPlugins={[remarkGfm]}>{ticket.overview}</ReactMarkdown>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {tab === 'comments' && (
+              <TicketComments
+                ticket={ticket}
+                users={users}
+                authUser={authUser}
+                isAdmin={isAdmin}
+                commentBody={commentBody}
+                setCommentBody={setCommentBody}
+                preview={preview}
+                setPreview={setPreview}
+                commentTextareaRef={commentTextareaRef}
+                onSubmitComment={submitComment}
+                onDeleteComment={handleDeleteComment}
+                isSubmitting={addComment.isPending}
+              />
+            )}
+
+            {tab === 'audit' && <TicketAuditLog auditLogs={auditLogs} users={users} />}
+          </div>
+        </div>
+
+        <TicketSidebar
+          ticket={ticket}
+          users={users}
+          isAdmin={isAdmin}
+          patch={patch}
+          onReroute={startReroute}
+          onDelete={() => setDeleteOpen(true)}
+        />
+      </div>
+
+      <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete this ticket?</AlertDialogTitle>
+            <AlertDialogDescription>
+              {ticket.displayId} · {ticket.title} will be permanently removed along with its
+              comments and audit log. This cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={confirmDeleteTicket}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {reroutingCTI && (
+        <Modal title="Change Routing" onClose={() => setReroutingCTI(false)} size="lg">
+          <div className="space-y-5">
+            <p className="text-sm text-gray-400">
+              Current:{' '}
+              <span className="text-gray-200">
+                {ticket.category.name} › {ticket.type.name} › {ticket.item.name}
+              </span>
+            </p>
+            <CTISelect value={pendingCTI} onChange={setPendingCTI} />
+            <div className="flex justify-end gap-3 pt-1">
+              <button
+                onClick={() => setReroutingCTI(false)}
+                className="px-4 py-2 text-sm text-gray-400 border border-gray-700 rounded-lg hover:bg-gray-800 transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={saveReroute}
+                disabled={!pendingCTI.itemId}
+                className="px-4 py-2 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
+              >
+                Save routing
+              </button>
+            </div>
+          </div>
+        </Modal>
+      )}
+    </Layout>
+  );
+}

client/src/pages/ticket-detail/TicketSidebar.tsx

@@ -0,0 +1,243 @@
+import { useState } from 'react';
+import { format, formatDistanceToNow } from 'date-fns';
+import { Trash2, Check } from 'lucide-react';
+import SeverityBadge from '../../components/SeverityBadge';
+import StatusBadge from '../../components/StatusBadge';
+import Avatar from '../../components/Avatar';
+import type { Ticket, User, TicketStatus } from '../../types';
+import type { UpdateTicketInput } from '../../../../shared/schemas/ticket';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+
+const SEVERITY_OPTIONS = [
+  { value: 1, label: 'SEV 1 — Critical' },
+  { value: 2, label: 'SEV 2 — High' },
+  { value: 3, label: 'SEV 3 — Medium' },
+  { value: 4, label: 'SEV 4 — Low' },
+  { value: 5, label: 'SEV 5 — Minimal' },
+];
+
+interface TicketSidebarProps {
+  ticket: Ticket;
+  users: User[];
+  isAdmin: boolean;
+  patch: (payload: UpdateTicketInput) => Promise<void>;
+  onReroute: () => void;
+  onDelete: () => void;
+}
+
+export default function TicketSidebar({
+  ticket,
+  users,
+  isAdmin,
+  patch,
+  onReroute,
+  onDelete,
+}: TicketSidebarProps) {
+  const [statusOpen, setStatusOpen] = useState(false);
+  const [severityOpen, setSeverityOpen] = useState(false);
+  const [assigneeOpen, setAssigneeOpen] = useState(false);
+  const [expandedDates, setExpandedDates] = useState<Set<string>>(new Set());
+
+  const toggleDate = (key: string) =>
+    setExpandedDates((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+
+  const statusOptions: { value: TicketStatus; label: string }[] = [
+    { value: 'OPEN', label: 'Open' },
+    { value: 'IN_PROGRESS', label: 'In Progress' },
+    { value: 'RESOLVED', label: 'Resolved' },
+    ...(isAdmin ? [{ value: 'CLOSED' as TicketStatus, label: 'Closed' }] : []),
+  ];
+
+  return (
+    <div className="w-full md:w-64 flex-shrink-0 md:sticky md:top-0 space-y-3">
+      <div className="bg-gray-900 border border-gray-800 rounded-xl divide-y divide-gray-800">
+        <div className="px-4 py-3">
+          <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
+            Ticket Summary
+          </p>
+        </div>
+
+        {/* Status */}
+        <Popover open={statusOpen} onOpenChange={setStatusOpen}>
+          <PopoverTrigger asChild>
+            <button className="w-full px-4 py-3 text-left hover:bg-gray-800/50 transition-colors">
+              <p className="text-xs font-medium text-gray-500 mb-1.5">Status</p>
+              <StatusBadge status={ticket.status} />
+            </button>
+          </PopoverTrigger>
+          <PopoverContent align="start" className="w-56 p-1">
+            {statusOptions.map((s) => (
+              <button
+                key={s.value}
+                onClick={async () => {
+                  await patch({ status: s.value });
+                  setStatusOpen(false);
+                }}
+                className="w-full flex items-center gap-2 px-2 py-1.5 rounded-sm text-sm hover:bg-accent"
+              >
+                <StatusBadge status={s.value} />
+                {ticket.status === s.value && (
+                  <Check size={13} className="ml-auto text-primary" />
+                )}
+              </button>
+            ))}
+            {!isAdmin && (
+              <p className="px-2 pt-1 text-[11px] text-muted-foreground">
+                Closing requires admin
+              </p>
+            )}
+          </PopoverContent>
+        </Popover>
+
+        {/* Severity */}
+        <Popover open={severityOpen} onOpenChange={setSeverityOpen}>
+          <PopoverTrigger asChild>
+            <button className="w-full px-4 py-3 text-left hover:bg-gray-800/50 transition-colors">
+              <p className="text-xs font-medium text-gray-500 mb-1.5">Severity</p>
+              <SeverityBadge severity={ticket.severity} />
+            </button>
+          </PopoverTrigger>
+          <PopoverContent align="start" className="w-56 p-1">
+            {SEVERITY_OPTIONS.map((s) => (
+              <button
+                key={s.value}
+                onClick={async () => {
+                  await patch({ severity: s.value });
+                  setSeverityOpen(false);
+                }}
+                className="w-full flex items-center gap-2 px-2 py-1.5 rounded-sm text-sm hover:bg-accent"
+              >
+                <SeverityBadge severity={s.value} />
+                <span className="text-muted-foreground text-xs">
+                  {s.label.split(' — ')[1]}
+                </span>
+                {ticket.severity === s.value && (
+                  <Check size={13} className="ml-auto text-primary" />
+                )}
+              </button>
+            ))}
+          </PopoverContent>
+        </Popover>
+
+        {/* CTI */}
+        <button
+          onClick={onReroute}
+          className="w-full px-4 py-3 text-left space-y-3 hover:bg-gray-800/50 transition-colors"
+        >
+          <div>
+            <p className="text-xs font-medium text-gray-500 mb-1">Category</p>
+            <p className="text-sm text-gray-300">{ticket.category.name}</p>
+          </div>
+          <div>
+            <p className="text-xs font-medium text-gray-500 mb-1">Type</p>
+            <p className="text-sm text-gray-300">{ticket.type.name}</p>
+          </div>
+          <div>
+            <p className="text-xs font-medium text-gray-500 mb-1">Issue</p>
+            <p className="text-sm text-gray-300">{ticket.item.name}</p>
+          </div>
+        </button>
+
+        {/* Dates */}
+        <div className="px-4 py-3 space-y-2.5">
+          {[
+            { key: 'created', label: 'Created', date: ticket.createdAt },
+            { key: 'modified', label: 'Modified', date: ticket.updatedAt },
+            ...(ticket.resolvedAt
+              ? [{ key: 'resolved', label: 'Resolved', date: ticket.resolvedAt }]
+              : []),
+          ].map(({ key, label, date }) => (
+            <div key={key}>
+              <p className="text-xs font-medium text-gray-500 mb-1">{label}</p>
+              <button
+                onClick={() => toggleDate(key)}
+                className="text-xs text-gray-300 hover:text-gray-100 transition-colors"
+              >
+                {expandedDates.has(key)
+                  ? format(new Date(date), 'MMM d, yyyy HH:mm')
+                  : formatDistanceToNow(new Date(date), { addSuffix: true })}
+              </button>
+            </div>
+          ))}
+        </div>
+
+        {/* Assignee */}
+        <Popover open={assigneeOpen} onOpenChange={setAssigneeOpen}>
+          <PopoverTrigger asChild>
+            <button className="w-full px-4 py-3 text-left hover:bg-gray-800/50 transition-colors">
+              <p className="text-xs font-medium text-gray-500 mb-1.5">Assignee</p>
+              {ticket.assignee ? (
+                <div className="flex items-center gap-1.5">
+                  <Avatar name={ticket.assignee.displayName} size="sm" />
+                  <span className="text-sm text-gray-300">{ticket.assignee.displayName}</span>
+                </div>
+              ) : (
+                <p className="text-sm text-gray-500">Unassigned</p>
+              )}
+            </button>
+          </PopoverTrigger>
+          <PopoverContent align="start" className="w-60 p-1">
+            <button
+              onClick={async () => {
+                await patch({ assigneeId: null });
+                setAssigneeOpen(false);
+              }}
+              className="w-full flex items-center gap-2 px-2 py-1.5 rounded-sm text-sm hover:bg-accent"
+            >
+              <span className="text-muted-foreground">Unassigned</span>
+              {!ticket.assigneeId && <Check size={13} className="ml-auto text-primary" />}
+            </button>
+            <div className="max-h-64 overflow-auto">
+              {users.map((u) => (
+                <button
+                  key={u.id}
+                  onClick={async () => {
+                    await patch({ assigneeId: u.id });
+                    setAssigneeOpen(false);
+                  }}
+                  className="w-full flex items-center gap-2 px-2 py-1.5 rounded-sm text-sm hover:bg-accent"
+                >
+                  <Avatar name={u.displayName} size="sm" />
+                  <span>{u.displayName}</span>
+                  {ticket.assigneeId === u.id && (
+                    <Check size={13} className="ml-auto text-primary" />
+                  )}
+                </button>
+              ))}
+            </div>
+          </PopoverContent>
+        </Popover>
+
+        {/* Requester */}
+        <div className="px-4 py-3">
+          <p className="text-xs font-medium text-gray-500 mb-1.5">Requester</p>
+          <div className="flex items-center gap-1.5">
+            <Avatar name={ticket.createdBy.displayName} size="sm" />
+            <span className="text-sm text-gray-300">{ticket.createdBy.displayName}</span>
+          </div>
+        </div>
+      </div>
+
+      {isAdmin && (
+        <div className="bg-gray-900 border border-gray-800 rounded-xl px-4 py-3">
+          <button
+            onClick={onDelete}
+            className="w-full flex items-center justify-center gap-2 py-2 text-sm text-red-400 border border-red-500/30 rounded-lg hover:bg-red-500/10 transition-colors"
+          >
+            <Trash2 size={13} />
+            Delete ticket
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

client/src/pages/ticket-detail/index.ts

@@ -0,0 +1 @@
+export { default } from './TicketDetail';

client/src/pages/tickets/BulkActions.tsx

@@ -0,0 +1,78 @@
+import type { User } from '../../types';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+interface BulkActionsProps {
+  selectedCount: number;
+  users: User[];
+  onClear: () => void;
+  onConfirm: (bulk: { kind: 'close' | 'setSeverity' | 'reassign'; value?: unknown; label: string }) => void;
+}
+
+export default function BulkActions({ selectedCount, users, onClear, onConfirm }: BulkActionsProps) {
+  return (
+    <div className="flex items-center gap-3 mb-3 px-3 py-2 rounded-md bg-accent border border-border">
+      <span className="text-sm font-medium">
+        {selectedCount} selected
+      </span>
+      <button
+        onClick={onClear}
+        className="text-xs text-muted-foreground hover:text-foreground"
+      >
+        Clear
+      </button>
+      <div className="h-4 w-px bg-border mx-1" />
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button className="px-2 py-1 rounded-md text-sm hover:bg-background">
+            Reassign
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem
+            onSelect={() => onConfirm({ kind: 'reassign', value: null, label: 'Unassign' })}
+          >
+            Unassigned
+          </DropdownMenuItem>
+          {users.map((u) => (
+            <DropdownMenuItem
+              key={u.id}
+              onSelect={() => onConfirm({ kind: 'reassign', value: u.id, label: `Assign to ${u.displayName}` })}
+            >
+              {u.displayName}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button className="px-2 py-1 rounded-md text-sm hover:bg-background">
+            Severity
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          {[1, 2, 3, 4, 5].map((s) => (
+            <DropdownMenuItem
+              key={s}
+              onSelect={() => onConfirm({ kind: 'setSeverity', value: s, label: `Set severity SEV ${s}` })}
+            >
+              SEV {s}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <button
+        onClick={() => onConfirm({ kind: 'close', label: 'Close selected tickets' })}
+        className="px-2 py-1 rounded-md text-sm hover:bg-background"
+      >
+        Close
+      </button>
+    </div>
+  );
+}

client/src/pages/tickets/TicketFilters.tsx

@@ -0,0 +1,240 @@
+import { Trash2, Save, Check } from 'lucide-react';
+import CTISelect from '../../components/CTISelect';
+import { TICKET_STATUSES } from '../../../../shared/schemas/enums';
+import type { User } from '../../types';
+import type { SavedView } from '../../../../shared/types';
+import { STATUS_LABELS } from '../../../../shared/constants/labels';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+
+interface TicketFiltersProps {
+  status: string;
+  severity: string;
+  assigneeId: string;
+  categoryId: string;
+  typeId: string;
+  itemId: string;
+  searchInput: string;
+  onSearchChange: (v: string) => void;
+  onUpdateParam: (key: string, value: string | null) => void;
+  onSetParams: (fn: (prev: URLSearchParams) => URLSearchParams) => void;
+  authUser: { id: string; displayName: string } | null;
+  users: User[];
+  savedViews: SavedView[];
+  onDeleteView: (id: string) => void;
+  onApplyView: (filters: Record<string, unknown>) => void;
+  onSaveView: () => void;
+  activeFilterCount: number;
+  total: number;
+  isFetching: boolean;
+}
+
+export default function TicketFilters({
+  status,
+  severity,
+  assigneeId,
+  categoryId,
+  typeId,
+  itemId,
+  searchInput,
+  onSearchChange,
+  onUpdateParam,
+  onSetParams,
+  authUser,
+  users,
+  savedViews,
+  onDeleteView,
+  onApplyView,
+  onSaveView,
+  activeFilterCount,
+  total,
+  isFetching,
+}: TicketFiltersProps) {
+  const selectedStatuses = status ? status.split(',') : [];
+
+  const toggleStatus = (s: string) => {
+    const next = selectedStatuses.includes(s)
+      ? selectedStatuses.filter((v) => v !== s)
+      : [...selectedStatuses, s];
+    onUpdateParam('status', next.length > 0 ? next.join(',') : null);
+  };
+
+  const statusLabel =
+    selectedStatuses.length === 0 || selectedStatuses.length === TICKET_STATUSES.length
+      ? 'All statuses'
+      : selectedStatuses.map((s) => STATUS_LABELS[s] ?? s).join(', ');
+
+  return (
+    <>
+      {/* Row 1: Search + saved views + result count */}
+      <div className="flex gap-2 mb-2 items-center">
+        <input
+          type="search"
+          value={searchInput}
+          onChange={(e) => onSearchChange(e.target.value)}
+          placeholder="Search title, overview, ID…"
+          className="flex-1 min-w-48 max-w-sm px-3 py-1.5 rounded-md border border-input bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+        />
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="sm" className="gap-1.5">
+              <Save size={14} />
+              Saved views
+              {savedViews.length > 0 && (
+                <Badge variant="secondary" className="ml-1 px-1.5 py-0 text-[10px] leading-4">
+                  {savedViews.length}
+                </Badge>
+              )}
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-64">
+            <DropdownMenuLabel>Saved views</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {savedViews.length > 0 ? (
+              savedViews.map((v) => (
+                <div
+                  key={v.id}
+                  className="flex items-center gap-1 px-2 py-1 hover:bg-accent rounded-sm"
+                >
+                  <button
+                    onClick={() => onApplyView(v.filters)}
+                    className="flex-1 text-left text-sm truncate"
+                  >
+                    {v.name}
+                  </button>
+                  <button
+                    onClick={() => onDeleteView(v.id)}
+                    aria-label="Delete view"
+                    className="text-muted-foreground hover:text-destructive"
+                  >
+                    <Trash2 size={13} />
+                  </button>
+                </div>
+              ))
+            ) : (
+              <p className="px-2 py-1 text-xs text-muted-foreground">No saved views yet</p>
+            )}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              disabled={activeFilterCount === 0}
+              onSelect={onSaveView}
+              className="gap-2"
+            >
+              <Save size={13} />
+              Save current filters
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <div className="ml-auto text-xs text-muted-foreground">
+          {isFetching ? 'Loading…' : `${total} result${total === 1 ? '' : 's'}`}
+        </div>
+      </div>
+
+      {/* Row 2: Filter selectors */}
+      <div className="flex gap-2 mb-4 items-center flex-wrap">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="sm" className="gap-1.5 text-sm font-normal">
+              {statusLabel}
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="w-48">
+            {TICKET_STATUSES.map((s) => (
+              <DropdownMenuItem
+                key={s}
+                onSelect={(e) => {
+                  e.preventDefault();
+                  toggleStatus(s);
+                }}
+                className="gap-2"
+              >
+                <div className="flex h-4 w-4 items-center justify-center rounded-sm border border-input">
+                  {selectedStatuses.includes(s) && <Check size={12} />}
+                </div>
+                {STATUS_LABELS[s] ?? s}
+              </DropdownMenuItem>
+            ))}
+            {selectedStatuses.length > 0 && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  onSelect={(e) => {
+                    e.preventDefault();
+                    onSetParams((prev) => {
+                      const next = new URLSearchParams(prev);
+                      next.set('status', '');
+                      next.delete('page');
+                      return next;
+                    });
+                  }}
+                  className="justify-center text-xs text-muted-foreground"
+                >
+                  Clear selection
+                </DropdownMenuItem>
+              </>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <select
+          value={severity}
+          onChange={(e) => onUpdateParam('severity', e.target.value || null)}
+          className="px-3 py-1.5 rounded-md border border-input bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+        >
+          <option value="">All severities</option>
+          {[1, 2, 3, 4, 5].map((s) => (
+            <option key={s} value={s}>
+              SEV {s}
+            </option>
+          ))}
+        </select>
+
+        <select
+          value={assigneeId}
+          onChange={(e) => onUpdateParam('assigneeId', e.target.value || null)}
+          className="px-3 py-1.5 rounded-md border border-input bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+        >
+          <option value="">All assignees</option>
+          {authUser && (
+            <option value={authUser.id}>Me ({authUser.displayName})</option>
+          )}
+          {users
+            .filter((u) => u.id !== authUser?.id)
+            .map((u) => (
+              <option key={u.id} value={u.id}>
+                {u.displayName}
+              </option>
+            ))}
+        </select>
+
+        <CTISelect
+          compact
+          value={{ categoryId, typeId, itemId }}
+          onChange={(cti) => {
+            onSetParams((prev) => {
+              const next = new URLSearchParams(prev);
+              next.delete('page');
+              if (cti.categoryId) next.set('categoryId', cti.categoryId);
+              else next.delete('categoryId');
+              if (cti.typeId) next.set('typeId', cti.typeId);
+              else next.delete('typeId');
+              if (cti.itemId) next.set('itemId', cti.itemId);
+              else next.delete('itemId');
+              return next;
+            });
+          }}
+        />
+      </div>
+    </>
+  );
+}

client/src/pages/tickets/TicketListItem.tsx

@@ -0,0 +1,74 @@
+import { Link } from 'react-router-dom';
+import { formatDistanceToNow } from 'date-fns';
+import { SEVERITY_BG } from '../../lib/severityColors';
+import SeverityBadge from '../../components/SeverityBadge';
+import StatusBadge from '../../components/StatusBadge';
+import Avatar from '../../components/Avatar';
+import type { Ticket } from '../../types';
+
+interface TicketListItemProps {
+  ticket: Ticket;
+  selected: boolean;
+  focused: boolean;
+  onToggle: () => void;
+}
+
+export default function TicketListItem({ ticket, selected, focused, onToggle }: TicketListItemProps) {
+  return (
+    <li
+      className={`flex items-center gap-3 px-4 py-3 transition-colors ${
+        focused
+          ? 'bg-accent/50 ring-1 ring-inset ring-primary'
+          : 'hover:bg-accent/30'
+      }`}
+    >
+      <input
+        type="checkbox"
+        checked={selected}
+        onChange={onToggle}
+        aria-label={`Select ${ticket.displayId}`}
+        className="cursor-pointer flex-shrink-0"
+      />
+      <div
+        className={`w-1 self-stretch rounded-full flex-shrink-0 ${SEVERITY_BG[ticket.severity] ?? 'bg-gray-600'}`}
+      />
+      <Link
+        to={`/${ticket.displayId}`}
+        className="flex-1 min-w-0 flex items-center gap-3 group"
+      >
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 mb-0.5 flex-wrap">
+            <span className="text-sm font-medium text-foreground group-hover:text-primary truncate">
+              {ticket.title}
+            </span>
+            <span className="text-xs font-mono text-muted-foreground">
+              {ticket.displayId}
+            </span>
+          </div>
+          <div className="flex items-center gap-2 text-xs text-muted-foreground flex-wrap">
+            <SeverityBadge severity={ticket.severity} />
+            <StatusBadge status={ticket.status} />
+            <span>
+              opened {formatDistanceToNow(new Date(ticket.createdAt), {
+                addSuffix: true,
+              })}{' '}
+              by {ticket.createdBy.displayName}
+            </span>
+            <span className="hidden md:inline">
+              · {ticket.category.name} › {ticket.type.name} › {ticket.item.name}
+            </span>
+            {ticket.assignee && (
+              <span className="hidden md:inline">· assigned {ticket.assignee.displayName}</span>
+            )}
+            <span>· {ticket._count?.comments ?? 0} comments</span>
+          </div>
+        </div>
+        <div className="hidden sm:flex items-center flex-shrink-0">
+          {ticket.assignee ? (
+            <Avatar name={ticket.assignee.displayName} size="sm" />
+          ) : null}
+        </div>
+      </Link>
+    </li>
+  );
+}

client/src/pages/tickets/Tickets.tsx

@@ -0,0 +1,378 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useShortcut } from '../../hooks/useShortcuts';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { toast } from 'sonner';
+import Layout from '../../components/Layout';
+import { useAuth } from '../../contexts/AuthContext';
+import {
+  useTicketsPaged,
+  useBulkTickets,
+  useSavedViews,
+  useCreateSavedView,
+  useDeleteSavedView,
+  useUsers,
+} from '../../api/queries';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import TicketFilters from './TicketFilters';
+import BulkActions from './BulkActions';
+import TicketListItem from './TicketListItem';
+
+const PAGE_SIZE = 25;
+const BULK_LIMIT = 500;
+
+export default function Tickets() {
+  const [params, setParams] = useSearchParams();
+  const navigate = useNavigate();
+  const { user: authUser } = useAuth();
+  const { data: users = [] } = useUsers();
+
+  const DEFAULT_STATUSES = 'OPEN,IN_PROGRESS';
+  const statusParam = params.get('status');
+  const status = statusParam === null ? DEFAULT_STATUSES : statusParam;
+  const severity = params.get('severity') ?? '';
+  const assigneeId = params.get('assigneeId') ?? '';
+  const categoryId = params.get('categoryId') ?? '';
+  const typeId = params.get('typeId') ?? '';
+  const itemId = params.get('itemId') ?? '';
+  const search = params.get('search') ?? '';
+  const page = Math.max(1, Number(params.get('page') ?? '1'));
+
+  const [searchInput, setSearchInput] = useState(search);
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [cursor, setCursor] = useState<number>(-1);
+  const [saveOpen, setSaveOpen] = useState(false);
+  const [newViewName, setNewViewName] = useState('');
+  const [confirmBulk, setConfirmBulk] = useState<
+    | { kind: 'close' | 'setSeverity' | 'reassign'; value?: unknown; label: string }
+    | null
+  >(null);
+
+  useEffect(() => {
+    const t = setTimeout(() => {
+      if (search !== searchInput) {
+        updateParam('search', searchInput);
+        updateParam('page', '1');
+      }
+    }, 250);
+    return () => clearTimeout(t);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchInput]);
+
+  const updateParam = (key: string, value: string | null) => {
+    setParams(
+      (prev) => {
+        const next = new URLSearchParams(prev);
+        if (value === null || value === '') next.delete(key);
+        else next.set(key, value);
+        if (key !== 'page') next.delete('page');
+        return next;
+      },
+      { replace: true },
+    );
+  };
+
+  const queryParams = {
+    status: status || undefined as string | undefined,
+    severity: severity ? Number(severity) : undefined,
+    assigneeId: assigneeId || undefined,
+    categoryId: categoryId || undefined,
+    typeId: typeId || undefined,
+    itemId: itemId || undefined,
+    search: search || undefined,
+    page,
+    pageSize: PAGE_SIZE,
+  };
+
+  const { data, isLoading, isFetching } = useTicketsPaged(queryParams);
+  const tickets = data?.data ?? [];
+  const total = data?.total ?? 0;
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+
+  const savedViewsQ = useSavedViews();
+  const createView = useCreateSavedView();
+  const deleteView = useDeleteSavedView();
+  const bulk = useBulkTickets();
+
+  const allVisible = tickets.length > 0 && tickets.every((t) => selected.has(t.id));
+  const someVisible = tickets.some((t) => selected.has(t.id));
+
+  const toggleAll = () => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (allVisible) tickets.forEach((t) => next.delete(t.id));
+      else tickets.forEach((t) => next.add(t.id));
+      return next;
+    });
+  };
+
+  const toggleOne = (id: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const clearSelected = () => setSelected(new Set());
+
+  const currentFilters = useMemo(
+    () => ({
+      status: status || undefined,
+      severity: severity ? Number(severity) : undefined,
+      assigneeId: assigneeId || undefined,
+      categoryId: categoryId || undefined,
+      typeId: typeId || undefined,
+      itemId: itemId || undefined,
+      search: search || undefined,
+    }),
+    [status, severity, assigneeId, categoryId, typeId, itemId, search],
+  );
+
+  const runBulk = async (payload: { action: string; value?: unknown }) => {
+    const ids = Array.from(selected).slice(0, BULK_LIMIT);
+    try {
+      const res = (await bulk.mutateAsync({ ids, ...payload })) as { updated?: number };
+      toast.success(`Updated ${res.updated ?? ids.length} ticket${ids.length === 1 ? '' : 's'}`);
+      clearSelected();
+    } catch (e) {
+      toast.error((e as Error).message || 'Bulk action failed');
+    } finally {
+      setConfirmBulk(null);
+    }
+  };
+
+  const activeCount = Object.values(currentFilters).filter(Boolean).length;
+
+  const handleSaveView = async () => {
+    if (!newViewName.trim()) return;
+    try {
+      await createView.mutateAsync({
+        name: newViewName.trim(),
+        filters: currentFilters,
+      });
+      toast.success('Saved view');
+      setNewViewName('');
+      setSaveOpen(false);
+    } catch (e) {
+      toast.error((e as Error).message || 'Failed to save view');
+    }
+  };
+
+  const applyView = (filters: Record<string, unknown>) => {
+    const next = new URLSearchParams();
+    Object.entries(filters).forEach(([k, v]) => {
+      if (v !== undefined && v !== null && v !== '') next.set(k, String(v));
+    });
+    setParams(next, { replace: true });
+    setSearchInput(String(filters.search ?? ''));
+  };
+
+  // Keyboard navigation
+  useEffect(() => {
+    setCursor((c) => (c >= tickets.length ? tickets.length - 1 : c));
+  }, [tickets.length]);
+
+  useShortcut('j', (e) => {
+    if (tickets.length === 0) return;
+    e.preventDefault();
+    setCursor((c) => Math.min(tickets.length - 1, c < 0 ? 0 : c + 1));
+  }, [tickets.length]);
+
+  useShortcut('k', (e) => {
+    if (tickets.length === 0) return;
+    e.preventDefault();
+    setCursor((c) => Math.max(0, c < 0 ? 0 : c - 1));
+  }, [tickets.length]);
+
+  useShortcut('enter', (e) => {
+    if (cursor < 0 || cursor >= tickets.length) return;
+    e.preventDefault();
+    navigate(`/${tickets[cursor].displayId}`);
+  }, [cursor, tickets]);
+
+  useShortcut('x', (e) => {
+    if (cursor < 0 || cursor >= tickets.length) return;
+    e.preventDefault();
+    toggleOne(tickets[cursor].id);
+  }, [cursor, tickets]);
+
+  return (
+    <Layout wide>
+      <TicketFilters
+        status={status}
+        severity={severity}
+        assigneeId={assigneeId}
+        categoryId={categoryId}
+        typeId={typeId}
+        itemId={itemId}
+        searchInput={searchInput}
+        onSearchChange={setSearchInput}
+        onUpdateParam={updateParam}
+        onSetParams={(fn) => setParams(fn, { replace: true })}
+        authUser={authUser}
+        users={users}
+        savedViews={savedViewsQ.data ?? []}
+        onDeleteView={(id) => deleteView.mutate(id)}
+        onApplyView={applyView}
+        onSaveView={() => setSaveOpen(true)}
+        activeFilterCount={activeCount}
+        total={total}
+        isFetching={isFetching}
+      />
+
+      {selected.size > 0 && (
+        <BulkActions
+          selectedCount={selected.size}
+          users={users}
+          onClear={clearSelected}
+          onConfirm={setConfirmBulk}
+        />
+      )}
+
+      {/* Ticket list */}
+      {isLoading ? (
+        <div className="text-center py-16 text-muted-foreground text-sm">Loading…</div>
+      ) : tickets.length === 0 ? (
+        <div className="text-center py-16 text-muted-foreground text-sm">No tickets found</div>
+      ) : (
+        <div className="rounded-md border border-border overflow-hidden">
+          <div className="flex items-center gap-3 px-4 py-2 bg-card text-xs text-muted-foreground border-b border-border">
+            <input
+              type="checkbox"
+              checked={allVisible}
+              aria-label="Select all on page"
+              ref={(el) => {
+                if (el) el.indeterminate = !allVisible && someVisible;
+              }}
+              onChange={toggleAll}
+              className="cursor-pointer"
+            />
+            <span>
+              {tickets.length} of {total}
+            </span>
+          </div>
+
+          <ul className="divide-y divide-border">
+            {tickets.map((ticket, idx) => (
+              <TicketListItem
+                key={ticket.id}
+                ticket={ticket}
+                selected={selected.has(ticket.id)}
+                focused={idx === cursor}
+                onToggle={() => toggleOne(ticket.id)}
+              />
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between mt-4 text-sm">
+          <div className="text-muted-foreground">
+            Page {page} of {totalPages}
+          </div>
+          <div className="flex items-center gap-1">
+            <button
+              disabled={page <= 1}
+              onClick={() => updateParam('page', String(page - 1))}
+              className="p-1.5 rounded-md hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed"
+            >
+              <ChevronLeft size={16} />
+            </button>
+            <button
+              disabled={page >= totalPages}
+              onClick={() => updateParam('page', String(page + 1))}
+              className="p-1.5 rounded-md hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed"
+            >
+              <ChevronRight size={16} />
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Save view dialog */}
+      <Dialog open={saveOpen} onOpenChange={setSaveOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Save current filters</DialogTitle>
+          </DialogHeader>
+          <div className="py-2">
+            <input
+              autoFocus
+              type="text"
+              value={newViewName}
+              onChange={(e) => setNewViewName(e.target.value)}
+              placeholder="View name"
+              className="w-full px-3 py-2 rounded-md border border-input bg-background text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleSaveView();
+              }}
+            />
+          </div>
+          <DialogFooter>
+            <button
+              onClick={() => setSaveOpen(false)}
+              className="px-3 py-1.5 rounded-md border border-input text-sm hover:bg-accent"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSaveView}
+              disabled={!newViewName.trim() || createView.isPending}
+              className="px-3 py-1.5 rounded-md bg-primary text-primary-foreground text-sm disabled:opacity-50"
+            >
+              Save
+            </button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Confirm bulk action */}
+      <AlertDialog open={!!confirmBulk} onOpenChange={(o) => !o && setConfirmBulk(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{confirmBulk?.label}</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will affect {selected.size} ticket{selected.size === 1 ? '' : 's'}.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => {
+                if (!confirmBulk) return;
+                if (confirmBulk.kind === 'close') runBulk({ action: 'close' });
+                else
+                  runBulk({
+                    action: confirmBulk.kind,
+                    value: confirmBulk.value,
+                  });
+              }}
+            >
+              Confirm
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Layout>
+  );
+}

client/src/pages/tickets/index.ts

@@ -0,0 +1 @@
+export { default } from './Tickets';

server/.env.example

@@ -1,4 +1,13 @@
+# Development — used with 'npm run dev' (see root .env.example for Docker/production)
 DATABASE_URL="postgresql://postgres:postgres@localhost:5432/ticketing"
 JWT_SECRET="change-this-to-a-long-random-secret"
 CLIENT_URL="http://localhost:5173"
 PORT=3000
+
+# Email notifications (optional) — leave SMTP_HOST empty to disable
+SMTP_HOST=
+SMTP_PORT=587
+SMTP_USER=
+SMTP_PASS=
+SMTP_FROM=noreply@localhost
+SMTP_SECURE=false

server/prisma/schema.prisma

@@ -57,6 +57,7 @@ model Type {
   tickets    Ticket[]
 
   @@unique([categoryId, name])
+  @@index([categoryId])
 }
 
 model Item {
@@ -67,6 +68,7 @@ model Item {
   tickets Ticket[]
 
   @@unique([typeId, name])
+  @@index([typeId])
 }
 
 model Ticket {
@@ -141,6 +143,7 @@ model Attachment {
 
   @@index([ticketId])
   @@index([commentId])
+  @@index([uploadedById])
 }
 
 model Webhook {
@@ -195,4 +198,6 @@ model AuditLog {
 
   ticket Ticket @relation(fields: [ticketId], references: [id], onDelete: Cascade)
   user   User   @relation(fields: [userId], references: [id])
+
+  @@index([ticketId, createdAt])
 }

server/src/routes/analytics.ts

@@ -1,9 +1,10 @@
 import { Router } from 'express';
 import * as analyticsService from '../services/analyticsService';
+import { requireAgent } from '../middleware/auth';
 
 const router = Router();
 
-router.get('/summary', async (req, res) => {
+router.get('/summary', requireAgent, async (req, res) => {
   const raw = Number(req.query.window);
   const window: analyticsService.AnalyticsWindow =
     raw === 14 || raw === 30 || raw === 90 ? raw : 30;

server/src/routes/export.ts

@@ -1,5 +1,6 @@
 import { Router } from 'express';
 import * as ticketService from '../services/ticketService';
+import { requireAgent } from '../middleware/auth';
 
 const router = Router();
 
@@ -10,7 +11,7 @@ function csvEscape(v: unknown): string {
   return s;
 }
 
-router.get('/tickets.csv', async (req, res) => {
+router.get('/tickets.csv', requireAgent, async (req, res) => {
   const { status, severity, assigneeId, categoryId, typeId, itemId, search } = req.query;
 
   const tickets = await ticketService.listTickets({

server/src/services/commentService.ts

@@ -2,11 +2,10 @@ import prisma from '../lib/prisma';
 import { HttpError } from '../lib/httpError';
 import * as notificationService from './notificationService';
 import { logger } from '../lib/logger';
+import { findByIdOrDisplay } from './ticketService';
 
 export async function addComment(ticketIdOrDisplay: string, body: string, actorId: string) {
-  const ticket = await prisma.ticket.findFirst({
+  const ticket = await findByIdOrDisplay(ticketIdOrDisplay);
-    where: { OR: [{ id: ticketIdOrDisplay }, { displayId: ticketIdOrDisplay }] },
-  });
   if (!ticket) throw new HttpError(404, 'Ticket not found');
 
   const [comment] = await prisma.$transaction([

server/src/services/searchService.ts

@@ -6,7 +6,14 @@ function whereConditions(query: string, filters: TicketFilters): Prisma.Sql[] {
   const conds: Prisma.Sql[] = [
     Prisma.sql`"searchVector" @@ plainto_tsquery('english', ${query})`,
   ];
-  if (filters.status) conds.push(Prisma.sql`"status" = ${filters.status}::"TicketStatus"`);
+  if (filters.status) {
+    const statuses = filters.status.split(',');
+    if (statuses.length === 1) {
+      conds.push(Prisma.sql`"status" = ${statuses[0]}::"TicketStatus"`);
+    } else {
+      conds.push(Prisma.sql`"status" IN (${Prisma.join(statuses.map(s => Prisma.sql`${s}::"TicketStatus"`))})`);
+    }
+  }
   if (filters.severity !== undefined) conds.push(Prisma.sql`"severity" = ${filters.severity}`);
   if (filters.assigneeId) conds.push(Prisma.sql`"assigneeId" = ${filters.assigneeId}`);
   if (filters.createdById) conds.push(Prisma.sql`"createdById" = ${filters.createdById}`);

server/src/services/ticketService.ts

@@ -40,12 +40,7 @@ const ticketListInclude = {
   _count: { select: { comments: true, attachments: true } },
 } as const;
 
-const STATUS_LABELS: Record<string, string> = {
+import { STATUS_LABELS } from '../../../shared/constants/labels';
-  OPEN: 'Open',
-  IN_PROGRESS: 'In Progress',
-  RESOLVED: 'Resolved',
-  CLOSED: 'Closed',
-};
 
 export type TicketFilters = {
   status?: string;
@@ -75,15 +70,22 @@ async function generateDisplayId(): Promise<string> {
   }
 }
 
-export function findByIdOrDisplay(idOrDisplay: string) {
+const idOrDisplayWhere = (idOrDisplay: string): Prisma.TicketWhereInput => ({
-  return prisma.ticket.findFirst({
+  OR: [{ id: idOrDisplay }, { displayId: idOrDisplay }],
-    where: { OR: [{ id: idOrDisplay }, { displayId: idOrDisplay }] },
 });
+
+export function findByIdOrDisplay(idOrDisplay: string) {
+  return prisma.ticket.findFirst({ where: idOrDisplayWhere(idOrDisplay) });
 }
 
 export function buildTicketWhere(filters: TicketFilters): Prisma.TicketWhereInput {
   const where: Prisma.TicketWhereInput = {};
-  if (filters.status) where.status = filters.status as Prisma.TicketWhereInput['status'];
+  if (filters.status) {
+    const statuses = filters.status.split(',');
+    where.status = statuses.length === 1
+      ? (statuses[0] as Prisma.TicketWhereInput['status'])
+      : { in: statuses as string[] } as Prisma.TicketWhereInput['status'];
+  }
   if (filters.severity) where.severity = filters.severity;
   if (filters.assigneeId) where.assigneeId = filters.assigneeId;
   if (filters.createdById) where.createdById = filters.createdById;
@@ -143,7 +145,7 @@ export async function listTicketsPaged(filters: TicketFilters, pagination: Pagin
 
 export async function getTicket(idOrDisplay: string) {
   const ticket = await prisma.ticket.findFirst({
-    where: { OR: [{ id: idOrDisplay }, { displayId: idOrDisplay }] },
+    where: idOrDisplayWhere(idOrDisplay),
     include: ticketInclude,
   });
   if (!ticket) throw new HttpError(404, 'Ticket not found');
@@ -196,7 +198,7 @@ export async function updateTicket(
   }
 
   const existing = await prisma.ticket.findFirst({
-    where: { OR: [{ id: idOrDisplay }, { displayId: idOrDisplay }] },
+    where: idOrDisplayWhere(idOrDisplay),
     include: {
       category: true,
       type: true,

shared/constants/labels.ts

@@ -0,0 +1,30 @@
+export const STATUS_LABELS: Record<string, string> = {
+  OPEN: 'Open',
+  IN_PROGRESS: 'In Progress',
+  RESOLVED: 'Resolved',
+  CLOSED: 'Closed',
+};
+
+export const AUDIT_LABELS: Record<string, string> = {
+  CREATED: 'created this ticket',
+  STATUS_CHANGED: 'changed status',
+  ASSIGNEE_CHANGED: 'changed assignee',
+  SEVERITY_CHANGED: 'changed severity',
+  REROUTED: 'rerouted ticket',
+  TITLE_CHANGED: 'updated title',
+  OVERVIEW_CHANGED: 'updated overview',
+  COMMENT_ADDED: 'added a comment',
+  COMMENT_DELETED: 'deleted a comment',
+};
+
+export const AUDIT_COLORS: Record<string, string> = {
+  CREATED: 'bg-green-500',
+  STATUS_CHANGED: 'bg-blue-500',
+  ASSIGNEE_CHANGED: 'bg-purple-500',
+  SEVERITY_CHANGED: 'bg-orange-500',
+  REROUTED: 'bg-cyan-500',
+  TITLE_CHANGED: 'bg-gray-500',
+  OVERVIEW_CHANGED: 'bg-gray-500',
+  COMMENT_ADDED: 'bg-gray-500',
+  COMMENT_DELETED: 'bg-red-500',
+};