Ticket IDs, audit log, markdown comments, tabbed detail page

- Tickets get a random display ID (V + 9 digits, e.g. V325813929)
- Ticket detail page has Overview / Comments / Audit Log tabs
- Audit log records every action (create, status, assignee, severity,
  reroute, title/overview edit, comment add/delete) with who and when
- Comments redesigned: avatar (initials + color), markdown rendering
  via react-markdown + remark-gfm, Write/Preview toggle
- Dashboard shows displayId and assignee avatar
- URLs now use displayId (/tickets/V325813929)

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

client/package.json

@@ -16,7 +16,9 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.54.2",
+    "react-markdown": "^9.0.1",
     "react-router-dom": "^6.28.0",
+    "remark-gfm": "^4.0.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {

client/src/components/Avatar.tsx

@@ -0,0 +1,44 @@
+const PALETTE = [
+  '#ef4444', '#f97316', '#f59e0b', '#10b981',
+  '#06b6d4', '#3b82f6', '#8b5cf6', '#ec4899',
+]
+
+function nameToColor(name: string): string {
+  let hash = 0
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  return PALETTE[Math.abs(hash) % PALETTE.length]
+}
+
+function initials(name: string): string {
+  return name
+    .split(' ')
+    .slice(0, 2)
+    .map((n) => n[0])
+    .join('')
+    .toUpperCase()
+}
+
+const SIZES = {
+  sm: 'w-6 h-6 text-xs',
+  md: 'w-8 h-8 text-sm',
+  lg: 'w-10 h-10 text-base',
+}
+
+interface AvatarProps {
+  name: string
+  size?: keyof typeof SIZES
+}
+
+export default function Avatar({ name, size = 'md' }: AvatarProps) {
+  return (
+    <div
+      className={`${SIZES[size]} rounded-full flex items-center justify-center font-semibold text-white flex-shrink-0 select-none`}
+      style={{ backgroundColor: nameToColor(name) }}
+      title={name}
+    >
+      {initials(name)}
+    </div>
+  )
+}

client/src/index.css

@@ -1,3 +1,24 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Markdown prose styles */
+.prose p { @apply mb-3 last:mb-0 leading-relaxed; }
+.prose h1 { @apply text-xl font-bold mb-3 mt-5; }
+.prose h2 { @apply text-lg font-semibold mb-2 mt-4; }
+.prose h3 { @apply text-base font-semibold mb-2 mt-3; }
+.prose ul { @apply list-disc pl-5 mb-3 space-y-1; }
+.prose ol { @apply list-decimal pl-5 mb-3 space-y-1; }
+.prose li > ul,
+.prose li > ol { @apply mt-1 mb-0; }
+.prose a { @apply text-blue-600 underline hover:text-blue-800; }
+.prose strong { @apply font-semibold; }
+.prose em { @apply italic; }
+.prose blockquote { @apply border-l-4 border-gray-200 pl-4 text-gray-500 my-3 italic; }
+.prose code { @apply bg-gray-100 text-gray-800 px-1.5 py-0.5 rounded text-xs font-mono; }
+.prose pre { @apply bg-gray-900 text-gray-100 p-4 rounded-lg my-3 overflow-x-auto text-sm; }
+.prose pre code { @apply bg-transparent text-gray-100 p-0; }
+.prose hr { @apply border-gray-200 my-4; }
+.prose table { @apply w-full border-collapse text-sm my-3; }
+.prose th { @apply bg-gray-50 border border-gray-200 px-3 py-2 text-left font-semibold; }
+.prose td { @apply border border-gray-200 px-3 py-2; }

client/src/pages/Dashboard.tsx

@@ -6,6 +6,7 @@ import api from '../api/client'
 import Layout from '../components/Layout'
 import SeverityBadge from '../components/SeverityBadge'
 import StatusBadge from '../components/StatusBadge'
+import Avatar from '../components/Avatar'
 import { Ticket, TicketStatus } from '../types'
 
 const STATUSES: { value: TicketStatus | ''; label: string }[] = [
@@ -102,7 +103,7 @@ export default function Dashboard() {
           {tickets.map((ticket) => (
             <Link
               key={ticket.id}
-              to={`/tickets/${ticket.id}`}
+              to={`/tickets/${ticket.displayId}`}
               className="flex items-center gap-4 bg-white border border-gray-200 rounded-lg px-4 py-3 hover:border-blue-400 hover:shadow-sm transition-all group"
             >
               {/* Severity stripe */}
@@ -122,6 +123,9 @@ export default function Dashboard() {
 
               <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-2 mb-0.5">
+                  <span className="text-xs font-mono font-medium text-gray-400">
+                    {ticket.displayId}
+                  </span>
                   <SeverityBadge severity={ticket.severity} />
                   <StatusBadge status={ticket.status} />
                   <span className="text-xs text-gray-400">
@@ -131,15 +135,24 @@ export default function Dashboard() {
                 <p className="text-sm font-medium text-gray-900 truncate group-hover:text-blue-700">
                   {ticket.title}
                 </p>
-                <p className="text-xs text-gray-400 truncate mt-0.5">{ticket.overview}</p>
               </div>
 
-              <div className="text-right text-xs text-gray-400 flex-shrink-0 space-y-0.5">
-                <div className="font-medium text-gray-600">
-                  {ticket.assignee?.displayName ?? 'Unassigned'}
-                </div>
-                <div>{ticket._count?.comments ?? 0} comments</div>
-                <div>{formatDistanceToNow(new Date(ticket.createdAt), { addSuffix: true })}</div>
+              <div className="flex items-center gap-3 flex-shrink-0">
+                {ticket.assignee && (
+                  <div className="flex items-center gap-1.5 text-xs text-gray-500">
+                    <Avatar name={ticket.assignee.displayName} size="sm" />
+                    <span>{ticket.assignee.displayName}</span>
+                  </div>
+                )}
+                {!ticket.assignee && (
+                  <span className="text-xs text-gray-400">Unassigned</span>
+                )}
+                <span className="text-xs text-gray-400">
+                  {ticket._count?.comments ?? 0} comments
+                </span>
+                <span className="text-xs text-gray-400">
+                  {formatDistanceToNow(new Date(ticket.createdAt), { addSuffix: true })}
+                </span>
               </div>
             </Link>
           ))}

client/src/pages/NewTicket.tsx

@@ -49,7 +49,7 @@ export default function NewTicket() {
       if (form.assigneeId) payload.assigneeId = form.assigneeId
 
       const res = await api.post('/tickets', payload)
-      navigate(`/tickets/${res.data.id}`)
+      navigate(`/tickets/${res.data.displayId}`)
     } catch {
       setError('Failed to create ticket')
     } finally {

client/src/pages/TicketDetail.tsx

@@ -1,15 +1,23 @@
-import { useState, useEffect, useRef } from 'react'
+import { useState, useEffect } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
-import { format } from 'date-fns'
-import { Pencil, Trash2, Send, X, Check } from 'lucide-react'
+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,
+} from 'lucide-react'
 import api from '../api/client'
 import Layout from '../components/Layout'
 import SeverityBadge from '../components/SeverityBadge'
 import StatusBadge from '../components/StatusBadge'
 import CTISelect from '../components/CTISelect'
-import { Ticket, TicketStatus, User, Comment } from '../types'
+import Avatar from '../components/Avatar'
+import { Ticket, TicketStatus, User, Comment, AuditLog } from '../types'
 import { useAuth } from '../contexts/AuthContext'
 
+type Tab = 'overview' | 'comments' | 'audit'
+
 const STATUS_OPTIONS: { value: TicketStatus; label: string }[] = [
   { value: 'OPEN', label: 'Open' },
   { value: 'IN_PROGRESS', label: 'In Progress' },
@@ -17,6 +25,30 @@ const STATUS_OPTIONS: { value: TicketStatus; label: string }[] = [
   { value: 'CLOSED', label: 'Closed' },
 ]
 
+const AUDIT_LABELS: Record<string, string> = {
+  CREATED: 'Ticket created',
+  STATUS_CHANGED: 'Status changed',
+  ASSIGNEE_CHANGED: 'Assignee changed',
+  SEVERITY_CHANGED: 'Severity changed',
+  REROUTED: 'Rerouted',
+  TITLE_CHANGED: 'Title updated',
+  OVERVIEW_CHANGED: 'Overview updated',
+  COMMENT_ADDED: 'Comment added',
+  COMMENT_DELETED: 'Comment deleted',
+}
+
+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-400',
+  OVERVIEW_CHANGED: 'bg-gray-400',
+  COMMENT_ADDED: 'bg-gray-400',
+  COMMENT_DELETED: 'bg-red-400',
+}
+
 export default function TicketDetail() {
   const { id } = useParams<{ id: string }>()
   const navigate = useNavigate()
@@ -24,11 +56,13 @@ export default function TicketDetail() {
 
   const [ticket, setTicket] = useState<Ticket | null>(null)
   const [users, setUsers] = useState<User[]>([])
+  const [auditLogs, setAuditLogs] = useState<AuditLog[]>([])
   const [loading, setLoading] = useState(true)
+  const [tab, setTab] = useState<Tab>('overview')
   const [editing, setEditing] = useState(false)
   const [commentBody, setCommentBody] = useState('')
   const [submittingComment, setSubmittingComment] = useState(false)
-  const commentRef = useRef<HTMLTextAreaElement>(null)
+  const [preview, setPreview] = useState(false)
 
   const [editForm, setEditForm] = useState({
     title: '',
@@ -50,6 +84,15 @@ export default function TicketDetail() {
     }).finally(() => setLoading(false))
   }, [id])
 
+  const fetchAudit = () => {
+    if (!ticket) return
+    api.get<AuditLog[]>(`/tickets/${id}/audit`).then((r) => setAuditLogs(r.data))
+  }
+
+  useEffect(() => {
+    if (tab === 'audit') fetchAudit()
+  }, [tab, ticket])
+
   const startEdit = () => {
     if (!ticket) return
     setEditForm({
@@ -66,7 +109,7 @@ export default function TicketDetail() {
 
   const saveEdit = async () => {
     if (!ticket) return
-    const payload: Record<string, unknown> = {
+    const res = await api.patch<Ticket>(`/tickets/${ticket.displayId}`, {
       title: editForm.title,
       overview: editForm.overview,
       severity: editForm.severity,
@@ -74,21 +117,20 @@ export default function TicketDetail() {
       typeId: editForm.typeId,
       itemId: editForm.itemId,
       assigneeId: editForm.assigneeId || null,
-    }
-    const res = await api.patch<Ticket>(`/tickets/${ticket.id}`, payload)
+    })
     setTicket(res.data)
     setEditing(false)
   }
 
   const updateStatus = async (status: TicketStatus) => {
     if (!ticket) return
-    const res = await api.patch<Ticket>(`/tickets/${ticket.id}`, { status })
+    const res = await api.patch<Ticket>(`/tickets/${ticket.displayId}`, { status })
     setTicket(res.data)
   }
 
   const updateAssignee = async (assigneeId: string) => {
     if (!ticket) return
-    const res = await api.patch<Ticket>(`/tickets/${ticket.id}`, {
+    const res = await api.patch<Ticket>(`/tickets/${ticket.displayId}`, {
       assigneeId: assigneeId || null,
     })
     setTicket(res.data)
@@ -96,7 +138,7 @@ export default function TicketDetail() {
 
   const deleteTicket = async () => {
     if (!ticket || !confirm('Delete this ticket?')) return
-    await api.delete(`/tickets/${ticket.id}`)
+    await api.delete(`/tickets/${ticket.displayId}`)
     navigate('/')
   }
 
@@ -105,13 +147,12 @@ export default function TicketDetail() {
     if (!ticket || !commentBody.trim()) return
     setSubmittingComment(true)
     try {
-      const res = await api.post<Comment>(`/tickets/${ticket.id}/comments`, {
+      const res = await api.post<Comment>(`/tickets/${ticket.displayId}/comments`, {
         body: commentBody.trim(),
       })
-      setTicket((t) =>
-        t ? { ...t, comments: [...(t.comments ?? []), res.data] } : t
-      )
+      setTicket((t) => t ? { ...t, comments: [...(t.comments ?? []), res.data] } : t)
       setCommentBody('')
+      setPreview(false)
     } finally {
       setSubmittingComment(false)
     }
@@ -119,272 +160,378 @@ export default function TicketDetail() {
 
   const deleteComment = async (commentId: string) => {
     if (!ticket) return
-    await api.delete(`/tickets/${ticket.id}/comments/${commentId}`)
-    setTicket((t) =>
-      t ? { ...t, comments: t.comments?.filter((c) => c.id !== commentId) } : t
-    )
+    await api.delete(`/tickets/${ticket.displayId}/comments/${commentId}`)
+    setTicket((t) => t ? { ...t, comments: t.comments?.filter((c) => c.id !== commentId) } : t)
   }
 
   const inputClass =
     'w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500'
 
   if (loading) {
-    return (
-      <Layout>
-        <div className="text-center py-16 text-gray-400 text-sm">Loading...</div>
-      </Layout>
-    )
+    return <Layout><div className="text-center py-16 text-gray-400 text-sm">Loading...</div></Layout>
   }
 
   if (!ticket) {
-    return (
-      <Layout>
-        <div className="text-center py-16 text-gray-400 text-sm">Ticket not found</div>
-      </Layout>
-    )
+    return <Layout><div className="text-center py-16 text-gray-400 text-sm">Ticket not found</div></Layout>
   }
 
+  const commentCount = ticket.comments?.length ?? 0
+
   return (
-    <Layout
-      title={ticket.title}
-      action={
-        authUser?.role === 'ADMIN' ? (
-          <button
-            onClick={deleteTicket}
-            className="flex items-center gap-2 text-sm text-red-600 hover:text-red-800 border border-red-200 hover:border-red-400 px-3 py-1.5 rounded-lg transition-colors"
-          >
-            <Trash2 size={14} />
-            Delete
-          </button>
-        ) : undefined
-      }
-    >
-      <div className="max-w-3xl space-y-5">
-        {/* Ticket card */}
-        <div className="bg-white border border-gray-200 rounded-xl">
-          {/* Header bar */}
-          <div className="flex items-center justify-between px-5 py-3 border-b border-gray-100">
-            <div className="flex items-center gap-2">
-              <SeverityBadge severity={ticket.severity} />
-              <StatusBadge status={ticket.status} />
-              {!editing && (
-                <span className="text-xs text-gray-400">
-                  {ticket.category.name} › {ticket.type.name} › {ticket.item.name}
-                </span>
-              )}
-            </div>
-            {!editing ? (
-              <button
-                onClick={startEdit}
-                className="flex items-center gap-1.5 text-xs text-gray-500 hover:text-gray-800 border border-gray-200 hover:border-gray-400 px-2.5 py-1 rounded-lg transition-colors"
-              >
-                <Pencil size={12} />
-                Edit
-              </button>
-            ) : (
+    <Layout>
+      <div className="max-w-3xl">
+        {/* Ticket header */}
+        <div className="bg-white border border-gray-200 rounded-xl mb-4">
+          <div className="px-5 pt-5 pb-4">
+            {/* ID + actions row */}
+            <div className="flex items-start justify-between gap-4 mb-3">
               <div className="flex items-center gap-2">
-                <button
-                  onClick={() => setEditing(false)}
-                  className="flex items-center gap-1.5 text-xs text-gray-500 hover:text-gray-700 border border-gray-200 px-2.5 py-1 rounded-lg transition-colors"
-                >
-                  <X size={12} />
-                  Cancel
-                </button>
-                <button
-                  onClick={saveEdit}
-                  className="flex items-center gap-1.5 text-xs bg-blue-600 text-white px-2.5 py-1 rounded-lg hover:bg-blue-700 transition-colors"
-                >
-                  <Check size={12} />
-                  Save
-                </button>
+                <span className="font-mono text-xs font-semibold text-gray-400 bg-gray-100 px-2 py-0.5 rounded">
+                  {ticket.displayId}
+                </span>
+                <SeverityBadge severity={ticket.severity} />
+                <StatusBadge status={ticket.status} />
+              </div>
+              <div className="flex items-center gap-2">
+                {!editing ? (
+                  <button
+                    onClick={startEdit}
+                    className="flex items-center gap-1.5 text-xs text-gray-500 hover:text-gray-800 border border-gray-200 hover:border-gray-400 px-2.5 py-1 rounded-lg transition-colors"
+                  >
+                    <Pencil size={12} />
+                    Edit
+                  </button>
+                ) : (
+                  <>
+                    <button
+                      onClick={() => setEditing(false)}
+                      className="flex items-center gap-1.5 text-xs text-gray-500 border border-gray-200 px-2.5 py-1 rounded-lg hover:bg-gray-50 transition-colors"
+                    >
+                      <X size={12} /> Cancel
+                    </button>
+                    <button
+                      onClick={saveEdit}
+                      className="flex items-center gap-1.5 text-xs bg-blue-600 text-white px-2.5 py-1 rounded-lg hover:bg-blue-700 transition-colors"
+                    >
+                      <Check size={12} /> Save
+                    </button>
+                  </>
+                )}
+                {authUser?.role === 'ADMIN' && (
+                  <button
+                    onClick={deleteTicket}
+                    className="flex items-center gap-1.5 text-xs text-red-500 hover:text-red-700 border border-red-200 hover:border-red-400 px-2.5 py-1 rounded-lg transition-colors"
+                  >
+                    <Trash2 size={12} />
+                    Delete
+                  </button>
+                )}
+              </div>
+            </div>
+
+            {/* Title */}
+            {editing ? (
+              <input
+                type="text"
+                value={editForm.title}
+                onChange={(e) => setEditForm((f) => ({ ...f, title: e.target.value }))}
+                className={`${inputClass} text-lg font-semibold mb-3`}
+              />
+            ) : (
+              <h1 className="text-lg font-semibold text-gray-900 mb-3">{ticket.title}</h1>
+            )}
+
+            {/* CTI breadcrumb / edit */}
+            {editing ? (
+              <div className="mb-3">
+                <label className="block text-xs font-medium text-gray-500 mb-1">Routing (CTI)</label>
+                <CTISelect
+                  value={{ categoryId: editForm.categoryId, typeId: editForm.typeId, itemId: editForm.itemId }}
+                  onChange={(cti) => setEditForm((f) => ({ ...f, ...cti }))}
+                />
+              </div>
+            ) : (
+              <p className="text-xs text-gray-400 mb-3">
+                {ticket.category.name} › {ticket.type.name} › {ticket.item.name}
+              </p>
+            )}
+
+            {/* Status + Assignee quick controls (when not editing) */}
+            {!editing && (
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-xs font-medium text-gray-500 mb-1">Status</label>
+                  <select
+                    value={ticket.status}
+                    onChange={(e) => updateStatus(e.target.value as TicketStatus)}
+                    className={inputClass}
+                  >
+                    {STATUS_OPTIONS.map((s) => (
+                      <option key={s.value} value={s.value}>{s.label}</option>
+                    ))}
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-xs font-medium text-gray-500 mb-1">Assignee</label>
+                  <select
+                    value={ticket.assigneeId ?? ''}
+                    onChange={(e) => updateAssignee(e.target.value)}
+                    className={inputClass}
+                  >
+                    <option value="">Unassigned</option>
+                    {users.filter((u) => u.role !== 'SERVICE').map((u) => (
+                      <option key={u.id} value={u.id}>{u.displayName}</option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+            )}
+
+            {/* Severity + Assignee edit controls */}
+            {editing && (
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-xs font-medium text-gray-500 mb-1">Severity</label>
+                  <select
+                    value={editForm.severity}
+                    onChange={(e) => setEditForm((f) => ({ ...f, severity: Number(e.target.value) }))}
+                    className={inputClass}
+                  >
+                    <option value={1}>SEV 1 — Critical</option>
+                    <option value={2}>SEV 2 — High</option>
+                    <option value={3}>SEV 3 — Medium</option>
+                    <option value={4}>SEV 4 — Low</option>
+                    <option value={5}>SEV 5 — Minimal</option>
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-xs font-medium text-gray-500 mb-1">Assignee</label>
+                  <select
+                    value={editForm.assigneeId}
+                    onChange={(e) => setEditForm((f) => ({ ...f, assigneeId: e.target.value }))}
+                    className={inputClass}
+                  >
+                    <option value="">Unassigned</option>
+                    {users.filter((u) => u.role !== 'SERVICE').map((u) => (
+                      <option key={u.id} value={u.id}>{u.displayName}</option>
+                    ))}
+                  </select>
+                </div>
               </div>
             )}
           </div>
 
-          <div className="p-5 space-y-4">
-            {editing ? (
-              <>
-                <div>
-                  <label className="block text-xs font-medium text-gray-500 mb-1">Title</label>
-                  <input
-                    type="text"
-                    value={editForm.title}
-                    onChange={(e) => setEditForm((f) => ({ ...f, title: e.target.value }))}
-                    className={inputClass}
-                  />
-                </div>
-                <div>
-                  <label className="block text-xs font-medium text-gray-500 mb-1">Overview</label>
-                  <textarea
-                    value={editForm.overview}
-                    onChange={(e) => setEditForm((f) => ({ ...f, overview: e.target.value }))}
-                    rows={4}
-                    className={inputClass}
-                  />
-                </div>
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <label className="block text-xs font-medium text-gray-500 mb-1">Severity</label>
-                    <select
-                      value={editForm.severity}
-                      onChange={(e) => setEditForm((f) => ({ ...f, severity: Number(e.target.value) }))}
-                      className={inputClass}
-                    >
-                      <option value={1}>SEV 1 — Critical</option>
-                      <option value={2}>SEV 2 — High</option>
-                      <option value={3}>SEV 3 — Medium</option>
-                      <option value={4}>SEV 4 — Low</option>
-                      <option value={5}>SEV 5 — Minimal</option>
-                    </select>
-                  </div>
-                  <div>
-                    <label className="block text-xs font-medium text-gray-500 mb-1">Assignee</label>
-                    <select
-                      value={editForm.assigneeId}
-                      onChange={(e) => setEditForm((f) => ({ ...f, assigneeId: e.target.value }))}
-                      className={inputClass}
-                    >
-                      <option value="">Unassigned</option>
-                      {users
-                        .filter((u) => u.role !== 'SERVICE')
-                        .map((u) => (
-                          <option key={u.id} value={u.id}>
-                            {u.displayName}
-                          </option>
-                        ))}
-                    </select>
-                  </div>
-                </div>
-                <div>
-                  <label className="block text-xs font-medium text-gray-500 mb-1">Routing (CTI)</label>
-                  <CTISelect
-                    value={{ categoryId: editForm.categoryId, typeId: editForm.typeId, itemId: editForm.itemId }}
-                    onChange={(cti) => setEditForm((f) => ({ ...f, ...cti }))}
-                  />
-                </div>
-              </>
-            ) : (
-              <>
-                <p className="text-sm text-gray-700 whitespace-pre-wrap">{ticket.overview}</p>
-
-                {/* Quick controls */}
-                <div className="grid grid-cols-2 gap-4 pt-2">
-                  <div>
-                    <label className="block text-xs font-medium text-gray-500 mb-1">Status</label>
-                    <select
-                      value={ticket.status}
-                      onChange={(e) => updateStatus(e.target.value as TicketStatus)}
-                      className={inputClass}
-                    >
-                      {STATUS_OPTIONS.map((s) => (
-                        <option key={s.value} value={s.value}>
-                          {s.label}
-                        </option>
-                      ))}
-                    </select>
-                  </div>
-                  <div>
-                    <label className="block text-xs font-medium text-gray-500 mb-1">Assignee</label>
-                    <select
-                      value={ticket.assigneeId ?? ''}
-                      onChange={(e) => updateAssignee(e.target.value)}
-                      className={inputClass}
-                    >
-                      <option value="">Unassigned</option>
-                      {users
-                        .filter((u) => u.role !== 'SERVICE')
-                        .map((u) => (
-                          <option key={u.id} value={u.id}>
-                            {u.displayName}
-                          </option>
-                        ))}
-                    </select>
-                  </div>
-                </div>
-              </>
-            )}
-          </div>
-
-          {/* Metadata footer */}
-          <div className="px-5 py-3 bg-gray-50 rounded-b-xl border-t border-gray-100 flex items-center gap-6 text-xs text-gray-400">
-            <span>Created by <strong className="text-gray-600">{ticket.createdBy.displayName}</strong></span>
+          {/* Meta footer */}
+          <div className="px-5 py-2.5 bg-gray-50 rounded-b-xl border-t border-gray-100 flex items-center gap-5 text-xs text-gray-400">
+            <span>
+              Opened by <strong className="text-gray-600">{ticket.createdBy.displayName}</strong>
+            </span>
             <span>{format(new Date(ticket.createdAt), 'MMM d, yyyy HH:mm')}</span>
             {ticket.resolvedAt && (
               <span>Resolved {format(new Date(ticket.resolvedAt), 'MMM d, yyyy')}</span>
             )}
-            <span>Updated {format(new Date(ticket.updatedAt), 'MMM d, yyyy HH:mm')}</span>
+            <span className="ml-auto">
+              Updated {formatDistanceToNow(new Date(ticket.updatedAt), { addSuffix: true })}
+            </span>
           </div>
         </div>
 
-        {/* Comments */}
-        <div className="bg-white border border-gray-200 rounded-xl">
-          <div className="px-5 py-3 border-b border-gray-100">
-            <h3 className="text-sm font-semibold text-gray-700">
-              Comments ({ticket.comments?.length ?? 0})
-            </h3>
-          </div>
+        {/* Tab bar */}
+        <div className="flex border-b border-gray-200 mb-4 bg-white rounded-t-xl border border-gray-200 border-b-0">
+          {(
+            [
+              { 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-5 py-3 text-sm font-medium border-b-2 transition-colors ${
+                tab === key
+                  ? 'border-blue-600 text-blue-600'
+                  : 'border-transparent text-gray-500 hover:text-gray-800'
+              }`}
+            >
+              <Icon size={14} />
+              {label}
+            </button>
+          ))}
+        </div>
 
-          {ticket.comments && ticket.comments.length > 0 ? (
-            <div className="divide-y divide-gray-100">
-              {ticket.comments.map((comment) => (
-                <div key={comment.id} className="px-5 py-4 group">
-                  <div className="flex items-start justify-between gap-3">
-                    <div className="flex-1">
-                      <div className="flex items-center gap-2 mb-1">
-                        <span className="text-xs font-medium text-gray-700">
-                          {comment.author.displayName}
-                        </span>
-                        <span className="text-xs text-gray-400">
-                          {format(new Date(comment.createdAt), 'MMM d, yyyy HH:mm')}
-                        </span>
+        {/* ── Overview tab ── */}
+        {tab === 'overview' && (
+          <div className="bg-white border border-gray-200 rounded-xl p-5">
+            {editing ? (
+              <textarea
+                value={editForm.overview}
+                onChange={(e) => setEditForm((f) => ({ ...f, overview: e.target.value }))}
+                rows={8}
+                className={inputClass}
+              />
+            ) : (
+              <div className="prose text-sm text-gray-700">
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                  {ticket.overview}
+                </ReactMarkdown>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* ── Comments tab ── */}
+        {tab === 'comments' && (
+          <div className="space-y-4">
+            {ticket.comments && ticket.comments.length > 0 ? (
+              ticket.comments.map((comment) => (
+                <div
+                  key={comment.id}
+                  className="bg-white border border-gray-200 rounded-xl p-5 group"
+                >
+                  <div className="flex items-start gap-3">
+                    <Avatar name={comment.author.displayName} size="md" />
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center justify-between mb-2">
+                        <div className="flex items-center gap-2">
+                          <span className="text-sm font-semibold text-gray-900">
+                            {comment.author.displayName}
+                          </span>
+                          <span className="text-xs text-gray-400">
+                            {formatDistanceToNow(new Date(comment.createdAt), { addSuffix: true })}
+                          </span>
+                          <span className="text-xs text-gray-300" title={format(new Date(comment.createdAt), 'MMM d, yyyy HH:mm')}>
+                            · {format(new Date(comment.createdAt), 'MMM d, yyyy')}
+                          </span>
+                        </div>
+                        {(comment.authorId === authUser?.id || authUser?.role === 'ADMIN') && (
+                          <button
+                            onClick={() => deleteComment(comment.id)}
+                            className="opacity-0 group-hover:opacity-100 text-gray-300 hover:text-red-500 transition-all"
+                          >
+                            <Trash2 size={13} />
+                          </button>
+                        )}
+                      </div>
+                      <div className="prose text-sm text-gray-700">
+                        <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                          {comment.body}
+                        </ReactMarkdown>
                       </div>
-                      <p className="text-sm text-gray-700 whitespace-pre-wrap">{comment.body}</p>
                     </div>
-                    {(comment.authorId === authUser?.id || authUser?.role === 'ADMIN') && (
-                      <button
-                        onClick={() => deleteComment(comment.id)}
-                        className="opacity-0 group-hover:opacity-100 text-gray-300 hover:text-red-500 transition-all flex-shrink-0"
-                      >
-                        <Trash2 size={13} />
-                      </button>
-                    )}
                   </div>
                 </div>
-              ))}
-            </div>
-          ) : (
-            <div className="px-5 py-8 text-center text-xs text-gray-400">No comments yet</div>
-          )}
+              ))
+            ) : (
+              <div className="bg-white border border-gray-200 rounded-xl px-5 py-10 text-center text-sm text-gray-400">
+                No comments yet
+              </div>
+            )}
 
-          {/* Comment form */}
-          <form onSubmit={submitComment} className="px-5 py-4 border-t border-gray-100">
-            <textarea
-              ref={commentRef}
-              value={commentBody}
-              onChange={(e) => setCommentBody(e.target.value)}
-              placeholder="Add a comment..."
-              rows={3}
-              className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-                  e.preventDefault()
-                  submitComment(e as unknown as React.FormEvent)
-                }
-              }}
-            />
-            <div className="flex justify-between items-center mt-2">
-              <span className="text-xs text-gray-400">Ctrl+Enter to submit</span>
-              <button
-                type="submit"
-                disabled={submittingComment || !commentBody.trim()}
-                className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 text-white text-xs rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
-              >
-                <Send size={12} />
-                Comment
-              </button>
+            {/* Comment composer */}
+            <div className="bg-white border border-gray-200 rounded-xl">
+              <div className="flex items-center gap-3 px-4 pt-4">
+                <Avatar name={authUser?.displayName ?? '?'} size="md" />
+                <div className="flex gap-3 border-b border-gray-100 pb-0 flex-1">
+                  <button
+                    onClick={() => setPreview(false)}
+                    className={`text-xs pb-2 border-b-2 transition-colors ${
+                      !preview ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-400 hover:text-gray-600'
+                    }`}
+                  >
+                    Write
+                  </button>
+                  <button
+                    onClick={() => setPreview(true)}
+                    className={`text-xs pb-2 border-b-2 transition-colors ${
+                      preview ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-400 hover:text-gray-600'
+                    }`}
+                  >
+                    Preview
+                  </button>
+                </div>
+              </div>
+
+              <form onSubmit={submitComment} className="p-4">
+                {preview ? (
+                  <div className="prose text-sm text-gray-700 min-h-[80px] px-1">
+                    {commentBody.trim() ? (
+                      <ReactMarkdown remarkPlugins={[remarkGfm]}>{commentBody}</ReactMarkdown>
+                    ) : (
+                      <span className="text-gray-400 italic">Nothing to preview</span>
+                    )}
+                  </div>
+                ) : (
+                  <textarea
+                    value={commentBody}
+                    onChange={(e) => setCommentBody(e.target.value)}
+                    placeholder="Leave a comment… Markdown supported"
+                    rows={4}
+                    className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+                        e.preventDefault()
+                        submitComment(e as unknown as React.FormEvent)
+                      }
+                    }}
+                  />
+                )}
+                <div className="flex justify-between items-center mt-3">
+                  <span className="text-xs text-gray-400">Markdown supported · Ctrl+Enter to submit</span>
+                  <button
+                    type="submit"
+                    disabled={submittingComment || !commentBody.trim()}
+                    className="flex items-center gap-2 px-4 py-1.5 bg-blue-600 text-white text-xs rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
+                  >
+                    <Send size={12} />
+                    Comment
+                  </button>
+                </div>
+              </form>
             </div>
-          </form>
-        </div>
+          </div>
+        )}
+
+        {/* ── Audit Log tab ── */}
+        {tab === 'audit' && (
+          <div className="bg-white border border-gray-200 rounded-xl divide-y divide-gray-100">
+            {auditLogs.length === 0 ? (
+              <div className="px-5 py-10 text-center text-sm text-gray-400">No audit entries</div>
+            ) : (
+              auditLogs.map((log, i) => (
+                <div key={log.id} className="flex items-start gap-4 px-5 py-4">
+                  {/* Timeline dot */}
+                  <div className="flex flex-col items-center flex-shrink-0 pt-0.5">
+                    <div
+                      className={`w-2.5 h-2.5 rounded-full ${AUDIT_COLORS[log.action] ?? 'bg-gray-400'}`}
+                    />
+                    {i < auditLogs.length - 1 && (
+                      <div className="w-px flex-1 bg-gray-100 mt-1" style={{ minHeight: '16px' }} />
+                    )}
+                  </div>
+
+                  <div className="flex-1 min-w-0 pb-1">
+                    <div className="flex items-baseline justify-between gap-3">
+                      <span className="text-sm text-gray-800">
+                        <strong className="font-medium">{log.user.displayName}</strong>
+                        {' '}{AUDIT_LABELS[log.action]?.toLowerCase() ?? log.action.toLowerCase()}
+                        {log.detail && (
+                          <span className="text-gray-500"> — {log.detail}</span>
+                        )}
+                      </span>
+                      <span
+                        className="text-xs text-gray-400 flex-shrink-0"
+                        title={format(new Date(log.createdAt), 'MMM d, yyyy HH:mm:ss')}
+                      >
+                        {formatDistanceToNow(new Date(log.createdAt), { addSuffix: true })}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        )}
       </div>
     </Layout>
   )

client/src/types/index.ts

@@ -39,8 +39,19 @@ export interface Comment {
   createdAt: string
 }
 
+export interface AuditLog {
+  id: string
+  ticketId: string
+  userId: string
+  action: string
+  detail: string | null
+  createdAt: string
+  user: Pick<User, 'id' | 'username' | 'displayName'>
+}
+
 export interface Ticket {
   id: string
+  displayId: string
   title: string
   overview: string
   severity: number