Full-page ticket layout: two-column with sticky sidebar

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

client/src/pages/TicketDetail.tsx

@@ -6,6 +6,7 @@ import remarkGfm from 'remark-gfm'
 import {
   Pencil, Trash2, Send, X, Check,
   MessageSquare, ClipboardList, FileText,
+  ArrowLeft,
 } from 'lucide-react'
 import api from '../api/client'
 import Layout from '../components/Layout'
@@ -25,16 +26,24 @@ const STATUS_OPTIONS: { value: TicketStatus; label: string }[] = [
   { value: 'CLOSED', label: 'Closed' },
 ]
 
+const SEVERITY_OPTIONS = [
+  { value: 1, label: 'SEV 1 — Critical' },
+  { value: 2, label: 'SEV 2 — High' },
+  { value: 3, label: 'SEV 3 — Medium' },
+  { value: 4, label: 'SEV 4 — Low' },
+  { value: 5, label: 'SEV 5 — Minimal' },
+]
+
 const AUDIT_LABELS: Record<string, string> = {
-  CREATED: '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',
+  CREATED: 'created this ticket',
+  STATUS_CHANGED: 'changed status',
+  ASSIGNEE_CHANGED: 'changed assignee',
+  SEVERITY_CHANGED: 'changed severity',
+  REROUTED: 'rerouted ticket',
+  TITLE_CHANGED: 'updated title',
+  OVERVIEW_CHANGED: 'updated overview',
+  COMMENT_ADDED: 'added a comment',
+  COMMENT_DELETED: 'deleted a comment',
 }
 
 const AUDIT_COLORS: Record<string, string> = {
@@ -49,6 +58,18 @@ const AUDIT_COLORS: Record<string, string> = {
   COMMENT_DELETED: 'bg-red-400',
 }
 
+const selectClass =
+  'w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white'
+
+function SidebarField({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <p className="text-xs font-medium text-gray-400 mb-1.5">{label}</p>
+      {children}
+    </div>
+  )
+}
+
 export default function TicketDetail() {
   const { id } = useParams<{ id: string }>()
   const navigate = useNavigate()
@@ -60,19 +81,13 @@ export default function TicketDetail() {
   const [loading, setLoading] = useState(true)
   const [tab, setTab] = useState<Tab>('overview')
   const [editing, setEditing] = useState(false)
+  const [reroutingCTI, setReroutingCTI] = useState(false)
   const [commentBody, setCommentBody] = useState('')
   const [submittingComment, setSubmittingComment] = useState(false)
   const [preview, setPreview] = useState(false)
 
-  const [editForm, setEditForm] = useState({
-    title: '',
-    overview: '',
-    severity: 3,
-    assigneeId: '',
-    categoryId: '',
-    typeId: '',
-    itemId: '',
-  })
+  const [editForm, setEditForm] = useState({ title: '', overview: '' })
+  const [pendingCTI, setPendingCTI] = useState({ categoryId: '', typeId: '', itemId: '' })
 
   useEffect(() => {
     Promise.all([
@@ -84,60 +99,44 @@ export default function TicketDetail() {
     }).finally(() => setLoading(false))
   }, [id])
 
-  const fetchAudit = () => {
-    if (!ticket) return
+  useEffect(() => {
+    if (tab === 'audit' && ticket) {
       api.get<AuditLog[]>(`/tickets/${id}/audit`).then((r) => setAuditLogs(r.data))
     }
+  }, [tab, ticket, id])
 
-  useEffect(() => {
-    if (tab === 'audit') fetchAudit()
-  }, [tab, ticket])
+  const patch = async (payload: Record<string, unknown>) => {
+    if (!ticket) return
+    const res = await api.patch<Ticket>(`/tickets/${ticket.displayId}`, payload)
+    setTicket(res.data)
+    return res.data
+  }
 
   const startEdit = () => {
     if (!ticket) return
-    setEditForm({
-      title: ticket.title,
-      overview: ticket.overview,
-      severity: ticket.severity,
-      assigneeId: ticket.assigneeId ?? '',
-      categoryId: ticket.categoryId,
-      typeId: ticket.typeId,
-      itemId: ticket.itemId,
-    })
+    setEditForm({ title: ticket.title, overview: ticket.overview })
     setEditing(true)
+    setTab('overview')
   }
 
   const saveEdit = async () => {
-    if (!ticket) return
-    const res = await api.patch<Ticket>(`/tickets/${ticket.displayId}`, {
-      title: editForm.title,
-      overview: editForm.overview,
-      severity: editForm.severity,
-      categoryId: editForm.categoryId,
-      typeId: editForm.typeId,
-      itemId: editForm.itemId,
-      assigneeId: editForm.assigneeId || null,
-    })
-    setTicket(res.data)
+    await patch({ title: editForm.title, overview: editForm.overview })
     setEditing(false)
   }
 
-  const updateStatus = async (status: TicketStatus) => {
+  const startReroute = () => {
     if (!ticket) return
-    const res = await api.patch<Ticket>(`/tickets/${ticket.displayId}`, { status })
-    setTicket(res.data)
+    setPendingCTI({ categoryId: ticket.categoryId, typeId: ticket.typeId, itemId: ticket.itemId })
+    setReroutingCTI(true)
   }
 
-  const updateAssignee = async (assigneeId: string) => {
-    if (!ticket) return
-    const res = await api.patch<Ticket>(`/tickets/${ticket.displayId}`, {
-      assigneeId: assigneeId || null,
-    })
-    setTicket(res.data)
+  const saveReroute = async () => {
+    await patch(pendingCTI)
+    setReroutingCTI(false)
   }
 
   const deleteTicket = async () => {
-    if (!ticket || !confirm('Delete this ticket?')) return
+    if (!ticket || !confirm('Delete this ticket? This cannot be undone.')) return
     await api.delete(`/tickets/${ticket.displayId}`)
     navigate('/')
   }
@@ -164,180 +163,73 @@ export default function TicketDetail() {
     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="flex items-center justify-center h-full 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="flex items-center justify-center h-full text-gray-400 text-sm">
+          Ticket not found
+        </div>
+      </Layout>
+    )
   }
 
   const commentCount = ticket.comments?.length ?? 0
+  const agentUsers = users.filter((u) => u.role !== 'SERVICE')
 
   return (
     <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">
+      {/* Back link */}
+      <button
+        onClick={() => navigate('/')}
+        className="flex items-center gap-1.5 text-sm text-gray-400 hover:text-gray-700 mb-4 transition-colors"
+      >
+        <ArrowLeft size={14} />
+        All tickets
+      </button>
+
+      <div className="flex gap-6 items-start">
+        {/* ── Main content ── */}
+        <div className="flex-1 min-w-0">
+          {/* Title card */}
+          <div className="bg-white border border-gray-200 rounded-xl px-6 py-5 mb-4">
+            <div className="flex items-center gap-2 mb-3">
               <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>
+              <span className="text-xs text-gray-400 ml-1">
+                {ticket.category.name} › {ticket.type.name} › {ticket.item.name}
+              </span>
             </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`}
+                className="w-full text-2xl font-bold text-gray-900 border-0 border-b-2 border-blue-500 focus:outline-none pb-1 bg-transparent"
+                autoFocus
               />
             ) : (
-              <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>
+              <h1 className="text-2xl font-bold text-gray-900">{ticket.title}</h1>
             )}
           </div>
 
-          {/* 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 className="ml-auto">
-              Updated {formatDistanceToNow(new Date(ticket.updatedAt), { addSuffix: true })}
-            </span>
-          </div>
-        </div>
-
+          {/* Tabs + content */}
+          <div className="bg-white border border-gray-200 rounded-xl overflow-hidden">
             {/* Tab bar */}
-        <div className="flex border-b border-gray-200 mb-4 bg-white rounded-t-xl border border-gray-200 border-b-0">
+            <div className="flex border-b border-gray-200 px-2">
               {(
                 [
                   { key: 'overview', icon: FileText, label: 'Overview' },
@@ -348,7 +240,7 @@ export default function TicketDetail() {
                 <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 ${
+                  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-blue-600 text-blue-600'
                       : 'border-transparent text-gray-500 hover:text-gray-800'
@@ -360,16 +252,32 @@ export default function TicketDetail() {
               ))}
             </div>
 
-        {/* ── Overview tab ── */}
+            {/* ── Overview ── */}
             {tab === 'overview' && (
-          <div className="bg-white border border-gray-200 rounded-xl p-5">
+              <div className="p-6">
                 {editing ? (
+                  <div className="space-y-3">
                     <textarea
                       value={editForm.overview}
                       onChange={(e) => setEditForm((f) => ({ ...f, overview: e.target.value }))}
-                rows={8}
-                className={inputClass}
+                      rows={12}
+                      className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-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-600 border border-gray-200 rounded-lg hover:bg-gray-50 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-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                      >
+                        <Check size={13} /> Save changes
+                      </button>
+                    </div>
+                  </div>
                 ) : (
                   <div className="prose text-sm text-gray-700">
                     <ReactMarkdown remarkPlugins={[remarkGfm]}>
@@ -380,15 +288,13 @@ export default function TicketDetail() {
               </div>
             )}
 
-        {/* ── Comments tab ── */}
+            {/* ── Comments ── */}
             {tab === 'comments' && (
-          <div className="space-y-4">
+              <div>
                 {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="divide-y divide-gray-100">
+                    {ticket.comments.map((comment) => (
+                      <div key={comment.id} className="p-6 group">
                         <div className="flex items-start gap-3">
                           <Avatar name={comment.author.displayName} size="md" />
                           <div className="flex-1 min-w-0">
@@ -398,10 +304,7 @@ export default function TicketDetail() {
                                   {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')}
+                                  {format(new Date(comment.createdAt), 'MMM d, yyyy · HH:mm')}
                                 </span>
                               </div>
                               {(comment.authorId === authUser?.id || authUser?.role === 'ADMIN') && (
@@ -421,45 +324,43 @@ export default function TicketDetail() {
                           </div>
                         </div>
                       </div>
-              ))
+                    ))}
+                  </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 className="py-16 text-center text-sm text-gray-400">
+                    No comments yet — be the first
                   </div>
                 )}
 
                 {/* Comment composer */}
-            <div className="bg-white border border-gray-200 rounded-xl">
-              <div className="flex items-center gap-3 px-4 pt-4">
+                <div className="border-t border-gray-200 p-6">
+                  <div className="flex gap-3">
                     <Avatar name={authUser?.displayName ?? '?'} size="md" />
-                <div className="flex gap-3 border-b border-gray-100 pb-0 flex-1">
+                    <div className="flex-1">
+                      {/* Write / Preview toggle */}
+                      <div className="flex gap-4 mb-2 border-b border-gray-100">
+                        {(['Write', 'Preview'] as const).map((label) => (
                           <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'
+                            key={label}
+                            onClick={() => setPreview(label === 'Preview')}
+                            className={`text-xs pb-2 border-b-2 -mb-px transition-colors ${
+                              (label === 'Preview') === preview
+                                ? 'border-blue-600 text-blue-600'
+                                : 'border-transparent text-gray-400 hover:text-gray-600'
                             }`}
                           >
-                    Write
+                            {label}
                           </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">
+                      <form onSubmit={submitComment}>
                         {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 className="prose text-sm text-gray-700 min-h-[80px] mb-3 px-1">
+                            {commentBody.trim()
+                              ? <ReactMarkdown remarkPlugins={[remarkGfm]}>{commentBody}</ReactMarkdown>
+                              : <span className="text-gray-400 italic">Nothing to preview</span>
+                            }
                           </div>
                         ) : (
                           <textarea
@@ -467,7 +368,7 @@ export default function TicketDetail() {
                             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"
+                            className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none mb-3"
                             onKeyDown={(e) => {
                               if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
                                 e.preventDefault()
@@ -476,49 +377,52 @@ export default function TicketDetail() {
                             }}
                           />
                         )}
-                <div className="flex justify-between items-center mt-3">
-                  <span className="text-xs text-gray-400">Markdown supported · Ctrl+Enter to submit</span>
+                        <div className="flex justify-between items-center">
+                          <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"
+                            className="flex items-center gap-2 px-4 py-1.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
                           >
-                    <Send size={12} />
+                            <Send size={13} />
                             Comment
                           </button>
                         </div>
                       </form>
                     </div>
                   </div>
+                </div>
+              </div>
             )}
 
-        {/* ── Audit Log tab ── */}
+            {/* ── Audit Log ── */}
             {tab === 'audit' && (
-          <div className="bg-white border border-gray-200 rounded-xl divide-y divide-gray-100">
+              <div className="p-6">
                 {auditLogs.length === 0 ? (
-              <div className="px-5 py-10 text-center text-sm text-gray-400">No audit entries</div>
+                  <div className="py-10 text-center text-sm text-gray-400">No activity yet</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'}`}
-                    />
+                  <div className="space-y-0">
+                    {auditLogs.map((log, i) => (
+                      <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-400'}`} />
                           {i < auditLogs.length - 1 && (
-                      <div className="w-px flex-1 bg-gray-100 mt-1" style={{ minHeight: '16px' }} />
+                            <div className="w-px flex-1 bg-gray-100 my-1" />
                           )}
                         </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()}
+                        {/* Entry */}
+                        <div className="flex-1 pb-5">
+                          <div className="flex items-baseline justify-between gap-4">
+                            <p className="text-sm text-gray-700">
+                              <span className="font-medium">{log.user.displayName}</span>
+                              {' '}{AUDIT_LABELS[log.action] ?? log.action.toLowerCase()}
                               {log.detail && (
                                 <span className="text-gray-500"> — {log.detail}</span>
                               )}
-                      </span>
+                            </p>
                             <span
                               className="text-xs text-gray-400 flex-shrink-0"
                               title={format(new Date(log.createdAt), 'MMM d, yyyy HH:mm:ss')}
@@ -528,11 +432,155 @@ export default function TicketDetail() {
                           </div>
                         </div>
                       </div>
-              ))
+                    ))}
+                  </div>
                 )}
               </div>
             )}
           </div>
+        </div>
+
+        {/* ── Sidebar ── */}
+        <div className="w-64 flex-shrink-0 sticky top-0 space-y-3">
+
+          {/* Details */}
+          <div className="bg-white border border-gray-200 rounded-xl divide-y divide-gray-100">
+            <div className="px-4 py-3">
+              <p className="text-xs font-semibold text-gray-400 uppercase tracking-wide">Details</p>
+            </div>
+
+            <div className="px-4 py-3 space-y-3">
+              <SidebarField label="Status">
+                <select
+                  value={ticket.status}
+                  onChange={(e) => patch({ status: e.target.value })}
+                  className={selectClass}
+                >
+                  {STATUS_OPTIONS.map((s) => (
+                    <option key={s.value} value={s.value}>{s.label}</option>
+                  ))}
+                </select>
+              </SidebarField>
+
+              <SidebarField label="Severity">
+                <select
+                  value={ticket.severity}
+                  onChange={(e) => patch({ severity: Number(e.target.value) })}
+                  className={selectClass}
+                >
+                  {SEVERITY_OPTIONS.map((s) => (
+                    <option key={s.value} value={s.value}>{s.label}</option>
+                  ))}
+                </select>
+              </SidebarField>
+
+              <SidebarField label="Assignee">
+                <select
+                  value={ticket.assigneeId ?? ''}
+                  onChange={(e) => patch({ assigneeId: e.target.value || null })}
+                  className={selectClass}
+                >
+                  <option value="">Unassigned</option>
+                  {agentUsers.map((u) => (
+                    <option key={u.id} value={u.id}>{u.displayName}</option>
+                  ))}
+                </select>
+                {ticket.assignee && (
+                  <div className="flex items-center gap-1.5 mt-1.5">
+                    <Avatar name={ticket.assignee.displayName} size="sm" />
+                    <span className="text-xs text-gray-500">{ticket.assignee.displayName}</span>
+                  </div>
+                )}
+              </SidebarField>
+            </div>
+
+            {/* Routing */}
+            <div className="px-4 py-3">
+              <p className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-2">Routing</p>
+              {reroutingCTI ? (
+                <div className="space-y-2">
+                  <CTISelect value={pendingCTI} onChange={setPendingCTI} />
+                  <div className="flex gap-2 pt-1">
+                    <button
+                      onClick={() => setReroutingCTI(false)}
+                      className="flex-1 text-xs py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-gray-600"
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      onClick={saveReroute}
+                      className="flex-1 text-xs py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                    >
+                      Save
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <div>
+                  <p className="text-xs text-gray-700 leading-relaxed">
+                    {ticket.category.name}
+                    <span className="text-gray-400"> › </span>
+                    {ticket.type.name}
+                    <span className="text-gray-400"> › </span>
+                    {ticket.item.name}
+                  </p>
+                  <button
+                    onClick={startReroute}
+                    className="mt-1.5 text-xs text-blue-600 hover:text-blue-800 transition-colors"
+                  >
+                    Change routing
+                  </button>
+                </div>
+              )}
+            </div>
+
+            {/* Dates */}
+            <div className="px-4 py-3 space-y-2">
+              <div className="flex items-center gap-2">
+                <Avatar name={ticket.createdBy.displayName} size="sm" />
+                <div>
+                  <p className="text-xs text-gray-400">Opened by</p>
+                  <p className="text-xs font-medium text-gray-700">{ticket.createdBy.displayName}</p>
+                </div>
+              </div>
+              <div>
+                <p className="text-xs text-gray-400">Created</p>
+                <p className="text-xs text-gray-700">{format(new Date(ticket.createdAt), 'MMM d, yyyy HH:mm')}</p>
+              </div>
+              {ticket.resolvedAt && (
+                <div>
+                  <p className="text-xs text-gray-400">Resolved</p>
+                  <p className="text-xs text-gray-700">{format(new Date(ticket.resolvedAt), 'MMM d, yyyy')}</p>
+                </div>
+              )}
+              <div>
+                <p className="text-xs text-gray-400">Updated</p>
+                <p className="text-xs text-gray-700">{formatDistanceToNow(new Date(ticket.updatedAt), { addSuffix: true })}</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Actions */}
+          <div className="bg-white border border-gray-200 rounded-xl px-4 py-3 space-y-2">
+            <button
+              onClick={startEdit}
+              className="w-full flex items-center justify-center gap-2 py-2 text-sm text-gray-700 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
+            >
+              <Pencil size={13} />
+              Edit title &amp; overview
+            </button>
+            {authUser?.role === 'ADMIN' && (
+              <button
+                onClick={deleteTicket}
+                className="w-full flex items-center justify-center gap-2 py-2 text-sm text-red-600 border border-red-200 rounded-lg hover:bg-red-50 transition-colors"
+              >
+                <Trash2 size={13} />
+                Delete ticket
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
     </Layout>
   )
 }