diff --git a/client/src/App.tsx b/client/src/App.tsx
index 8dd7f5b..12c157e 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -6,7 +6,7 @@ import Login from './pages/Login';
 import Dashboard from './pages/Dashboard';
 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';
diff --git a/client/src/pages/TicketDetail.tsx b/client/src/pages/TicketDetail.tsx
deleted file mode 100644
index f5f5e4a..0000000
--- a/client/src/pages/TicketDetail.tsx
+++ /dev/null
@@ -1,774 +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' },
-];
-
-import { AUDIT_LABELS, AUDIT_COLORS } from '../../../shared/constants/labels';
-
-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>
-  );
-}
diff --git a/client/src/pages/ticket-detail/TicketAuditLog.tsx b/client/src/pages/ticket-detail/TicketAuditLog.tsx
new file mode 100644
index 0000000..056504b
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/client/src/pages/ticket-detail/TicketComments.tsx b/client/src/pages/ticket-detail/TicketComments.tsx
new file mode 100644
index 0000000..144b457
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/client/src/pages/ticket-detail/TicketDetail.tsx b/client/src/pages/ticket-detail/TicketDetail.tsx
new file mode 100644
index 0000000..05d6146
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/client/src/pages/ticket-detail/TicketSidebar.tsx b/client/src/pages/ticket-detail/TicketSidebar.tsx
new file mode 100644
index 0000000..bb06e82
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/client/src/pages/ticket-detail/index.ts b/client/src/pages/ticket-detail/index.ts
new file mode 100644
index 0000000..4b73580
--- /dev/null
+++ b/client/src/pages/ticket-detail/index.ts
@@ -0,0 +1 @@
+export { default } from './TicketDetail';