feat: breadcrumb nav, grouped properties sidebar, larger status selector, transitions

web/src/app/page.tsx

@@ -2,10 +2,10 @@
 
 import { useState, useEffect, useCallback } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
-import { PlusIcon, SearchIcon } from "lucide-react";
+import { PlusIcon, SearchIcon, ArrowLeftIcon, SendIcon, PaperclipIcon } from "lucide-react";
 import { formatDistanceToNow } from "date-fns";
-import { getTickets, getQueues, createTicket } from "@/lib/api";
+import { getTickets, getTicket, getTicketTransactions, getQueues, createTicket } from "@/lib/api";
-import type { Ticket, Queue } from "@/lib/types";
+import type { Ticket, Queue, Transaction } from "@/lib/types";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -17,12 +17,11 @@ import {
   DialogFooter,
 } from "@/components/ui/dialog";
 import {
-  Select,
+  Sheet,
-  SelectContent,
+  SheetContent,
-  SelectItem,
+  SheetHeader,
-  SelectTrigger,
+  SheetTitle,
-  SelectValue,
+} from "@/components/ui/sheet";
-} from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 
@@ -53,6 +52,20 @@ const FILTERS = [
 
 type FilterKey = (typeof FILTERS)[number]["key"];
 
+function getInitial(name: string): string {
+  if (!name) return "?";
+  return name.charAt(0).toUpperCase();
+}
+
+function getInitialColor(name: string): string {
+  const colors = ["#5e6ad2", "#7170ff", "#828fff", "#f59e0b", "#22c55e"];
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return colors[Math.abs(hash) % colors.length];
+}
+
 function TicketRow({ ticket, onClick }: { ticket: Ticket; onClick: () => void }) {
   const statusColor = STATUS_COLORS[ticket.status] || STATUS_COLORS.new;
   const shortId = ticket.id.slice(0, 8);
@@ -61,33 +74,33 @@ function TicketRow({ ticket, onClick }: { ticket: Ticket; onClick: () => void })
   return (
     <button
       onClick={onClick}
-      className="w-full flex items-center gap-3 px-4 py-2.5 text-left hover:bg-[rgba(255,255,255,0.02)] transition-colors border-b border-[rgba(255,255,255,0.04)]"
+      className="w-full flex items-center gap-3 py-3 px-4 text-left hover:bg-accent transition-all duration-150 border-l-2 border-transparent hover:border-primary border-b border-border"
     >
       <span
         className="w-2 h-2 rounded-full flex-shrink-0"
         style={{ backgroundColor: statusColor }}
       />
-      <span className="font-mono text-xs text-[#8a8f98] w-16 flex-shrink-0">
+      <span className="font-mono text-xs text-muted-foreground w-16 flex-shrink-0">
         {shortId}
       </span>
-      <span className="text-sm text-[#f7f8f8] flex-1 truncate font-medium">
+      <span className="text-sm text-foreground flex-1 truncate font-medium">
         {ticket.subject}
       </span>
-      <span className="text-xs text-[#8a8f98] bg-[#191a1b] px-1.5 py-0.5 rounded font-medium flex-shrink-0">
+      <span className="text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded font-medium flex-shrink-0">
         {ticket.queue_id.slice(0, 8)}
       </span>
       {ticket.owner_id ? (
-        <span className="w-5 h-5 rounded-full bg-[#5e6ad2] flex items-center justify-center flex-shrink-0">
+        <span className="w-5 h-5 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
-          <span className="text-[#f7f8f8] text-[10px] font-semibold leading-none">
+          <span className="text-primary-foreground text-[10px] font-semibold leading-none">
             {ticket.owner_id.charAt(0).toUpperCase()}
           </span>
         </span>
       ) : (
-        <span className="w-5 h-5 rounded-full border border-[rgba(255,255,255,0.08)] flex items-center justify-center flex-shrink-0">
+        <span className="w-5 h-5 rounded-full border border-border flex items-center justify-center flex-shrink-0">
-          <span className="text-[#8a8f98] text-[10px]">?</span>
+          <span className="text-muted-foreground text-[10px]">?</span>
         </span>
       )}
-      <span className="text-xs text-[#8a8f98] w-24 text-right flex-shrink-0 tabular-nums">
+      <span className="text-xs text-muted-foreground w-24 text-right flex-shrink-0 tabular-nums">
         {timeAgo}
       </span>
     </button>
@@ -96,17 +109,250 @@ function TicketRow({ ticket, onClick }: { ticket: Ticket; onClick: () => void })
 
 function SkeletonRow() {
   return (
-    <div className="flex items-center gap-3 px-4 py-2.5 border-b border-[rgba(255,255,255,0.04)]">
+    <div className="flex items-center gap-3 py-3 px-4 border-b border-border">
-      <div className="w-2 h-2 rounded-full bg-[#191a1b] animate-pulse" />
+      <div className="w-2 h-2 rounded-full bg-muted animate-pulse" />
-      <div className="w-16 h-3 bg-[#191a1b] rounded animate-pulse" />
+      <div className="w-16 h-3 bg-muted rounded animate-pulse" />
-      <div className="flex-1 h-3 bg-[#191a1b] rounded animate-pulse" />
+      <div className="flex-1 h-3 bg-muted rounded animate-pulse" />
-      <div className="w-12 h-4 bg-[#191a1b] rounded animate-pulse" />
+      <div className="w-12 h-4 bg-muted rounded animate-pulse" />
-      <div className="w-5 h-5 rounded-full bg-[#191a1b] animate-pulse" />
+      <div className="w-5 h-5 rounded-full bg-muted animate-pulse" />
-      <div className="w-20 h-3 bg-[#191a1b] rounded animate-pulse" />
+      <div className="w-20 h-3 bg-muted rounded animate-pulse" />
     </div>
   );
 }
 
+function TicketDetailSheet({
+  ticketId,
+  open,
+  onOpenChange,
+}: {
+  ticketId: string | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const [ticket, setTicket] = useState<Ticket | null>(null);
+  const [transactions, setTransactions] = useState<Transaction[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [replyText, setReplyText] = useState("");
+
+  useEffect(() => {
+    if (open && ticketId) {
+      setLoading(true);
+      setError(null);
+      Promise.all([
+        getTicket(ticketId),
+        getTicketTransactions(ticketId),
+      ]).then(([ticketRes, txRes]) => {
+        if (ticketRes.error) {
+          setError(ticketRes.error);
+        } else {
+          setTicket(ticketRes.data);
+        }
+        if (txRes.data) {
+          setTransactions(txRes.data);
+        }
+        setLoading(false);
+      });
+    }
+  }, [open, ticketId]);
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        className="w-full sm:max-w-lg flex flex-col p-0"
+        showCloseButton={true}
+      >
+        {loading && (
+          <div className="flex-1 p-4 space-y-4">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <div key={i} className="flex gap-3">
+                <div className="w-6 h-6 rounded-full bg-muted animate-pulse" />
+                <div className="flex-1 space-y-2">
+                  <div className="h-3 bg-muted rounded animate-pulse w-3/4" />
+                  <div className="h-3 bg-muted rounded animate-pulse w-1/2" />
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {error && (
+          <div className="flex flex-col items-center justify-center flex-1">
+            <p className="text-sm text-destructive">{error}</p>
+          </div>
+        )}
+
+        {!loading && !error && ticket && (
+          <div className="flex flex-col h-full">
+            {/* Header */}
+            <SheetHeader className="border-b border-border shrink-0">
+              <SheetTitle className="text-sm font-semibold truncate">
+                {ticket.subject}
+              </SheetTitle>
+              <p className="text-xs text-muted-foreground">
+                <span className="font-mono">{ticket.id.slice(0, 8)}</span>
+              </p>
+            </SheetHeader>
+
+            {/* Conversation */}
+            <div className="flex-1 overflow-y-auto">
+              {transactions.length === 0 && (
+                <div className="flex flex-col items-center justify-center py-20">
+                  <p className="text-sm text-muted-foreground">
+                    No activity yet
+                  </p>
+                </div>
+              )}
+              {transactions.map((tx) => {
+                const isSystem =
+                  tx.transaction_type === "status_change" ||
+                  tx.transaction_type === "assignment" ||
+                  tx.transaction_type === "create";
+                const isAgent =
+                  tx.transaction_type === "agent_reply" ||
+                  tx.transaction_type === "internal_note";
+
+                if (isSystem) {
+                  const txTimeAgo = formatDistanceToNow(
+                    new Date(tx.created_at),
+                    { addSuffix: true }
+                  );
+                  let message = "";
+                  if (tx.transaction_type === "create") {
+                    message = "Ticket created";
+                  } else if (tx.transaction_type === "status_change") {
+                    const oldLabel = tx.old_value
+                      ? STATUS_LABELS[tx.old_value] || tx.old_value
+                      : "?";
+                    const newLabel = tx.new_value
+                      ? STATUS_LABELS[tx.new_value] || tx.new_value
+                      : "?";
+                    message = `${getInitial(tx.creator_id)} changed status from ${oldLabel} to ${newLabel}`;
+                  } else if (tx.transaction_type === "assignment") {
+                    message = tx.new_value
+                      ? `${getInitial(tx.creator_id)} assigned to ${tx.new_value}`
+                      : `${getInitial(tx.creator_id)} unassigned`;
+                  } else {
+                    message = tx.transaction_type;
+                  }
+                  return (
+                    <div
+                      key={tx.id}
+                      className="flex justify-center py-2"
+                    >
+                      <span className="text-xs text-muted-foreground">
+                        {message} · {txTimeAgo}
+                      </span>
+                    </div>
+                  );
+                }
+
+                const isInternal =
+                  tx.transaction_type === "internal_note";
+                const txTimeAgo = formatDistanceToNow(
+                  new Date(tx.created_at),
+                  { addSuffix: true }
+                );
+
+                return (
+                  <div
+                    key={tx.id}
+                    className={cn(
+                      "flex gap-3 py-3 px-4",
+                      isAgent ? "flex-row-reverse" : ""
+                    )}
+                  >
+                    <div
+                      className="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0"
+                      style={{
+                        backgroundColor: isAgent
+                          ? getInitialColor(tx.creator_id)
+                          : "var(--muted)",
+                      }}
+                    >
+                      <span
+                        className="text-[11px] font-semibold"
+                        style={{
+                          color: isAgent
+                            ? "#f7f8f8"
+                            : "var(--muted-foreground)",
+                        }}
+                      >
+                        {getInitial(tx.creator_id)}
+                      </span>
+                    </div>
+                    <div
+                      className={cn(
+                        "max-w-[75%] rounded-lg px-3 py-2",
+                        isAgent
+                          ? "bg-primary/15 text-foreground"
+                          : isInternal
+                            ? "bg-muted border border-border text-foreground"
+                            : "bg-muted text-foreground"
+                      )}
+                    >
+                      {isInternal && (
+                        <div className="text-[10px] font-semibold text-chart-3 mb-0.5 uppercase tracking-wider">
+                          Internal note
+                        </div>
+                      )}
+                      <p className="text-sm whitespace-pre-wrap">
+                        {typeof tx.data === "object" &&
+                        tx.data !== null &&
+                        "body" in (tx.data as Record<string, unknown>)
+                          ? String(
+                              (tx.data as Record<string, unknown>).body
+                            )
+                          : tx.transaction_type}
+                      </p>
+                      <p className="text-[10px] text-muted-foreground mt-1">
+                        {txTimeAgo}
+                      </p>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+
+            {/* Reply box */}
+            <div className="border-t border-border bg-sidebar p-3 shrink-0">
+              <div className="flex items-end gap-2">
+                <textarea
+                  value={replyText}
+                  onChange={(e) => setReplyText(e.target.value)}
+                  placeholder="Reply to this ticket..."
+                  rows={2}
+                  className="flex-1 px-3 py-2 rounded-lg bg-background border border-border text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary resize-none transition-all duration-150"
+                />
+                <div className="flex items-center gap-1">
+                  <button
+                    className="w-8 h-8 flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-all duration-150"
+                    title="Attach file (coming soon)"
+                  >
+                    <PaperclipIcon className="w-4 h-4" />
+                  </button>
+                  <button
+                    disabled={!replyText.trim()}
+                    className={cn(
+                      "w-8 h-8 flex items-center justify-center rounded-lg transition-all duration-150",
+                      replyText.trim()
+                        ? "bg-primary text-primary-foreground hover:bg-primary/80"
+                        : "bg-muted text-muted-foreground cursor-not-allowed"
+                    )}
+                  >
+                    <SendIcon className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+}
+
 export default function TicketListPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -127,6 +373,10 @@ export default function TicketListPage() {
   const [submitting, setSubmitting] = useState(false);
   const [createError, setCreateError] = useState<string | null>(null);
 
+  // Sheet
+  const [sheetTicketId, setSheetTicketId] = useState<string | null>(null);
+  const [sheetOpen, setSheetOpen] = useState(false);
+
   const initialQueueId = searchParams.get("queue") || "";
 
   const fetchData = useCallback(async () => {
@@ -206,26 +456,28 @@ export default function TicketListPage() {
       setNewSubject("");
       setNewQueueId("");
       setNewDescription("");
-      router.push(`/tickets/${data.id}`);
+      // Open in sheet
+      setSheetTicketId(data.id);
+      setSheetOpen(true);
     }
   };
 
   return (
     <div className="flex flex-col h-full">
       {/* Top bar */}
-      <div className="flex items-center gap-3 px-4 py-3 border-b border-[rgba(255,255,255,0.05)]">
+      <div className="flex items-center gap-3 px-4 py-3 border-b border-border">
         <div className="relative flex-1">
-          <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[#8a8f98]" />
+          <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
           <input
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             placeholder="Search tickets..."
-            className="w-full h-8 pl-9 pr-3 rounded-lg bg-[#0f1011] border border-[rgba(255,255,255,0.08)] text-sm text-[#f7f8f8] placeholder:text-[#8a8f98] outline-none focus:border-[#5e6ad2] focus:ring-1 focus:ring-[#5e6ad2] transition-colors"
+            className="w-full h-8 pl-9 pr-3 rounded-lg bg-background border border-border text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all duration-150"
           />
         </div>
         <Button
           onClick={() => setDialogOpen(true)}
-          className="h-8 px-3 rounded-lg text-sm font-medium bg-[#5e6ad2] hover:bg-[#7170ff] text-[#f7f8f8] border-0 transition-colors"
+          className="h-8 px-3 rounded-lg text-sm font-medium bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 text-primary-foreground border-0 transition-all duration-150"
         >
           <PlusIcon className="w-4 h-4 mr-1.5" />
           New ticket
@@ -233,16 +485,16 @@ export default function TicketListPage() {
       </div>
 
       {/* Filter chips */}
-      <div className="flex items-center gap-1.5 px-4 py-2 border-b border-[rgba(255,255,255,0.04)]">
+      <div className="flex items-center gap-1.5 px-4 py-2 border-b border-border">
         {FILTERS.map((filter) => (
           <button
             key={filter.key ?? "all"}
             onClick={() => setActiveFilter(filter.key)}
             className={cn(
-              "px-2.5 py-1 rounded-md text-xs font-medium transition-colors",
+              "px-2.5 py-1 rounded-md text-xs font-medium transition-all duration-150",
               activeFilter === filter.key
-                ? "bg-[#5e6ad2] text-[#f7f8f8]"
+                ? "bg-primary text-primary-foreground"
-                : "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[rgba(255,255,255,0.04)]"
+                : "text-muted-foreground hover:text-foreground hover:bg-accent"
             )}
           >
             {filter.label}
@@ -253,11 +505,11 @@ export default function TicketListPage() {
       {/* Ticket list */}
       <div className="flex-1 overflow-y-auto">
         {error && (
-          <div className="px-4 py-3 text-sm text-red-400 bg-red-400/5 border-b border-red-400/10">
+          <div className="px-4 py-3 text-sm text-destructive bg-destructive/5 border-b border-destructive/10">
             {error}{" "}
             <button
               onClick={fetchData}
-              className="underline hover:text-red-300"
+              className="underline hover:text-destructive/80"
             >
               Retry
             </button>
@@ -271,18 +523,18 @@ export default function TicketListPage() {
           !error &&
           tickets.length === 0 && (
             <div className="flex flex-col items-center justify-center py-20 px-4">
-              <div className="w-12 h-12 rounded-full bg-[#191a1b] flex items-center justify-center mb-4">
+              <div className="w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4">
-                <SearchIcon className="w-5 h-5 text-[#8a8f98]" />
+                <SearchIcon className="w-5 h-5 text-muted-foreground" />
               </div>
-              <p className="text-sm text-[#d0d6e0] font-medium">
+              <p className="text-sm text-foreground font-medium">
                 No tickets match your filters
               </p>
-              <p className="text-xs text-[#8a8f98] mt-1">
+              <p className="text-xs text-muted-foreground mt-1">
                 Try adjusting your search or filter criteria
               </p>
               <Button
                 onClick={() => setDialogOpen(true)}
-                className="mt-4 h-8 px-3 rounded-lg text-sm font-medium bg-[#5e6ad2] hover:bg-[#7170ff] text-[#f7f8f8] border-0"
+                className="mt-4 h-8 px-3 rounded-lg text-sm font-medium bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 text-primary-foreground border-0 transition-all duration-150"
               >
                 <PlusIcon className="w-4 h-4 mr-1.5" />
                 Create a ticket
@@ -296,7 +548,10 @@ export default function TicketListPage() {
             <TicketRow
               key={ticket.id}
               ticket={ticket}
-              onClick={() => router.push(`/tickets/${ticket.id}`)}
+              onClick={() => {
+                setSheetTicketId(ticket.id);
+                setSheetOpen(true);
+              }}
             />
           ))}
       </div>
@@ -305,43 +560,38 @@ export default function TicketListPage() {
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
         <DialogContent
           className="sm:max-w-md"
-          style={{
-            backgroundColor: "#191a1b",
-            borderColor: "rgba(255,255,255,0.08)",
-            color: "#f7f8f8",
-          }}
           showCloseButton={true}
         >
           <DialogHeader>
-            <DialogTitle className="text-[#f7f8f8]">New ticket</DialogTitle>
+            <DialogTitle>New ticket</DialogTitle>
-            <DialogDescription className="text-[#8a8f98]">
+            <DialogDescription>
               Create a new ticket to track an issue or request.
             </DialogDescription>
           </DialogHeader>
 
           <div className="flex flex-col gap-3">
             <div>
-              <label className="block text-xs font-medium text-[#d0d6e0] mb-1">
+              <label className="block text-xs font-medium text-foreground mb-1">
                 Subject
               </label>
               <input
                 value={newSubject}
                 onChange={(e) => setNewSubject(e.target.value)}
                 placeholder="Ticket subject"
-                className="w-full h-8 px-2.5 rounded-lg bg-[#0f1011] border border-[rgba(255,255,255,0.08)] text-sm text-[#f7f8f8] placeholder:text-[#8a8f98] outline-none focus:border-[#5e6ad2] focus:ring-1 focus:ring-[#5e6ad2]"
+                className="w-full h-8 px-2.5 rounded-lg bg-background border border-border text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all duration-150"
                 autoFocus
               />
             </div>
 
             <div>
-              <label className="block text-xs font-medium text-[#d0d6e0] mb-1">
+              <label className="block text-xs font-medium text-foreground mb-1">
                 Queue
               </label>
               <div className="relative">
                 <select
                   value={newQueueId}
                   onChange={(e) => setNewQueueId(e.target.value)}
-                  className="w-full h-8 px-2.5 rounded-lg bg-[#0f1011] border border-[rgba(255,255,255,0.08)] text-sm text-[#f7f8f8] outline-none focus:border-[#5e6ad2] focus:ring-1 focus:ring-[#5e6ad2] appearance-none"
+                  className="w-full h-8 px-2.5 rounded-lg bg-background border border-border text-sm text-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary appearance-none transition-all duration-150"
                 >
                   <option value="" disabled>
                     Select a queue...
@@ -353,7 +603,7 @@ export default function TicketListPage() {
                   ))}
                 </select>
                 <svg
-                  className="absolute right-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[#8a8f98] pointer-events-none"
+                  className="absolute right-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -369,22 +619,24 @@ export default function TicketListPage() {
             </div>
 
             <div>
-              <label className="block text-xs font-medium text-[#d0d6e0] mb-1">
+              <label className="block text-xs font-medium text-foreground mb-1">
                 Description{" "}
-                <span className="text-[#8a8f98] font-normal">(optional)</span>
+                <span className="text-muted-foreground font-normal">
+                  (optional)
+                </span>
               </label>
               <textarea
                 value={newDescription}
                 onChange={(e) => setNewDescription(e.target.value)}
                 placeholder="Add a description..."
                 rows={3}
-                className="w-full px-2.5 py-2 rounded-lg bg-[#0f1011] border border-[rgba(255,255,255,0.08)] text-sm text-[#f7f8f8] placeholder:text-[#8a8f98] outline-none focus:border-[#5e6ad2] focus:ring-1 focus:ring-[#5e6ad2] resize-none"
+                className="w-full px-2.5 py-2 rounded-lg bg-background border border-border text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary resize-none transition-all duration-150"
               />
             </div>
           </div>
 
           {createError && (
-            <p className="text-xs text-red-400">{createError}</p>
+            <p className="text-xs text-destructive">{createError}</p>
           )}
 
           <DialogFooter showCloseButton={false}>
@@ -392,8 +644,8 @@ export default function TicketListPage() {
               onClick={handleCreate}
               disabled={!newSubject.trim() || !newQueueId || submitting}
               className={cn(
-                "h-8 px-4 rounded-lg text-sm font-medium transition-colors",
+                "h-8 px-4 rounded-lg text-sm font-medium transition-all duration-150",
-                "bg-[#5e6ad2] hover:bg-[#7170ff] text-[#f7f8f8]",
+                "bg-primary hover:bg-primary/80 text-primary-foreground",
                 "disabled:opacity-40 disabled:cursor-not-allowed"
               )}
             >
@@ -402,6 +654,13 @@ export default function TicketListPage() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {/* Ticket detail sheet */}
+      <TicketDetailSheet
+        ticketId={sheetTicketId}
+        open={sheetOpen}
+        onOpenChange={setSheetOpen}
+      />
     </div>
   );
 }

web/src/app/tickets/[id]/page.tsx

@@ -19,6 +19,7 @@ import type {
   PreviewResult,
   UpdateResult,
 } from "@/lib/types";
+import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
 
 const STATUS_COLORS: Record<string, string> = {
@@ -85,7 +86,7 @@ function TransactionBubble({
 
     return (
       <div className="flex justify-center py-2">
-        <span className="text-xs text-[#8a8f98]">
+        <span className="text-xs text-muted-foreground">
           {message} · {timeAgo}
         </span>
       </div>
@@ -109,28 +110,28 @@ function TransactionBubble({
         style={{
           backgroundColor: isAgent
             ? getInitialColor(tx.creator_id)
-            : "#191a1b",
+            : "var(--muted)",
         }}
       >
         <span
           className="text-[11px] font-semibold"
-          style={{ color: isAgent ? "#f7f8f8" : "#8a8f98" }}
+          style={{ color: isAgent ? "#f7f8f8" : "var(--muted-foreground)" }}
         >
           {getInitial(tx.creator_id)}
         </span>
       </div>
       <div
         className={cn(
-          "max-w-[75%] rounded-lg px-3 py-2",
+          "max-w-[75%] rounded-lg px-3 py-2 transition-all duration-150",
           isAgent
-            ? "bg-[#5e6ad2]/15 text-[#f7f8f8]"
+            ? "bg-primary/15 text-foreground"
             : isInternal
-              ? "bg-[#191a1b] border border-[rgba(255,255,255,0.05)] text-[#f7f8f8]"
+              ? "bg-muted border border-border text-foreground"
-              : "bg-[#191a1b] text-[#f7f8f8]"
+              : "bg-muted text-foreground"
         )}
       >
         {isInternal && (
-          <div className="text-[10px] font-semibold text-[#f59e0b] mb-0.5 uppercase tracking-wider">
+          <div className="text-[10px] font-semibold text-chart-3 mb-0.5 uppercase tracking-wider">
             Internal note
           </div>
         )}
@@ -139,7 +140,7 @@ function TransactionBubble({
             ? String((tx.data as Record<string, unknown>).body)
             : tx.transaction_type}
         </p>
-        <p className="text-[10px] text-[#8a8f98] mt-1">{timeAgo}</p>
+        <p className="text-[10px] text-muted-foreground mt-1">{timeAgo}</p>
       </div>
     </div>
   );
@@ -262,17 +263,17 @@ export default function TicketDetailPage({
         <div className="flex-1 p-4 space-y-4">
           {Array.from({ length: 6 }).map((_, i) => (
             <div key={i} className="flex gap-3">
-              <div className="w-6 h-6 rounded-full bg-[#191a1b] animate-pulse" />
+              <div className="w-6 h-6 rounded-full bg-muted animate-pulse" />
               <div className="flex-1 space-y-2">
-                <div className="h-3 bg-[#191a1b] rounded animate-pulse w-3/4" />
+                <div className="h-3 bg-muted rounded animate-pulse w-3/4" />
-                <div className="h-3 bg-[#191a1b] rounded animate-pulse w-1/2" />
+                <div className="h-3 bg-muted rounded animate-pulse w-1/2" />
               </div>
             </div>
           ))}
         </div>
-        <div className="w-80 bg-[#0f1011] border-l border-[rgba(255,255,255,0.05)] p-4 space-y-3">
+        <div className="w-80 bg-sidebar border-l border-border p-4 space-y-3">
           {Array.from({ length: 5 }).map((_, i) => (
-            <div key={i} className="h-6 bg-[#191a1b] rounded animate-pulse" />
+            <div key={i} className="h-6 bg-muted rounded animate-pulse" />
           ))}
         </div>
       </div>
@@ -282,10 +283,10 @@ export default function TicketDetailPage({
   if (error && !ticket) {
     return (
       <div className="flex flex-col items-center justify-center h-full">
-        <p className="text-red-400 text-sm">{error}</p>
+        <p className="text-destructive text-sm">{error}</p>
         <button
           onClick={fetchData}
-          className="mt-2 text-sm text-[#7170ff] hover:text-[#828fff]"
+          className="mt-2 text-sm text-primary hover:text-primary/80 transition-all duration-150"
         >
           Retry
         </button>
@@ -296,7 +297,7 @@ export default function TicketDetailPage({
   if (!ticket) {
     return (
       <div className="flex flex-col items-center justify-center h-full">
-        <p className="text-[#8a8f98] text-sm">Ticket not found</p>
+        <p className="text-muted-foreground text-sm">Ticket not found</p>
       </div>
     );
   }
@@ -311,28 +312,31 @@ export default function TicketDetailPage({
       {/* Left panel — conversation */}
       <div className="flex-1 flex flex-col min-w-0">
         {/* Header */}
-        <div className="flex items-center gap-3 px-4 py-2.5 border-b border-[rgba(255,255,255,0.05)]">
+        <div className="flex items-center gap-3 px-4 py-2.5 border-b border-border">
           <Link
             href="/"
-            className="w-7 h-7 flex items-center justify-center rounded-md hover:bg-[rgba(255,255,255,0.05)] text-[#8a8f98] hover:text-[#d0d6e0] transition-colors flex-shrink-0"
+            className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-all duration-150"
           >
-            <ArrowLeftIcon className="w-4 h-4" />
+            <ArrowLeftIcon className="w-3.5 h-3.5" />
+            All tickets
           </Link>
-          <div className="flex-1 min-w-0">
+        </div>
-            <h1 className="text-sm font-semibold text-[#f7f8f8] truncate">
+
-              {ticket.subject}
+        {/* Title */}
-            </h1>
+        <div className="px-4 py-3 border-b border-border">
-            <p className="text-xs text-[#8a8f98]">
+          <h1 className="text-sm font-semibold text-foreground truncate">
-              {ticket.id.slice(0, 8)} · {queue?.name || ticket.queue_id}
+            {ticket.subject}
-            </p>
+          </h1>
-          </div>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            <span className="font-mono">{ticket.id.slice(0, 8)}</span> · {queue?.name || ticket.queue_id}
+          </p>
         </div>
 
         {/* Conversation */}
         <div className="flex-1 overflow-y-auto">
           {transactions.length === 0 && (
             <div className="flex flex-col items-center justify-center py-20">
-              <p className="text-sm text-[#8a8f98]">
+              <p className="text-sm text-muted-foreground">
                 No activity yet
               </p>
             </div>
@@ -343,16 +347,16 @@ export default function TicketDetailPage({
         </div>
 
         {/* Reply box */}
-        <div className="border-t border-[rgba(255,255,255,0.05)] bg-[#0f1011] p-3">
+        <div className="border-t border-border bg-sidebar p-3">
           {/* Toggle tabs */}
-          <div className="flex gap-0.5 mb-2 p-0.5 rounded-lg bg-[#08090a] w-fit">
+          <div className="flex gap-0.5 mb-2 p-0.5 rounded-lg bg-background w-fit">
             <button
               onClick={() => setReplyMode("public")}
               className={cn(
-                "px-2.5 py-1 rounded-md text-xs font-medium transition-colors",
+                "px-2.5 py-1 rounded-md text-xs font-medium transition-all duration-150",
                 replyMode === "public"
-                  ? "bg-[#5e6ad2] text-[#f7f8f8]"
+                  ? "bg-primary text-primary-foreground"
-                  : "text-[#8a8f98] hover:text-[#d0d6e0]"
+                  : "text-muted-foreground hover:text-foreground"
               )}
             >
               Reply
@@ -360,10 +364,10 @@ export default function TicketDetailPage({
             <button
               onClick={() => setReplyMode("internal")}
               className={cn(
-                "px-2.5 py-1 rounded-md text-xs font-medium transition-colors",
+                "px-2.5 py-1 rounded-md text-xs font-medium transition-all duration-150",
                 replyMode === "internal"
-                  ? "bg-[#5e6ad2] text-[#f7f8f8]"
+                  ? "bg-primary text-primary-foreground"
-                  : "text-[#8a8f98] hover:text-[#d0d6e0]"
+                  : "text-muted-foreground hover:text-foreground"
               )}
             >
               Internal note
@@ -376,19 +380,19 @@ export default function TicketDetailPage({
               onChange={(e) => setReplyText(e.target.value)}
               placeholder="Reply to this ticket..."
               rows={2}
-              className="flex-1 px-3 py-2 rounded-lg bg-[#08090a] border border-[rgba(255,255,255,0.08)] text-sm text-[#f7f8f8] placeholder:text-[#8a8f98] outline-none focus:border-[#5e6ad2] focus:ring-1 focus:ring-[#5e6ad2] resize-none"
+              className="flex-1 px-3 py-2 rounded-lg bg-background border border-border text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary resize-none transition-all duration-150"
             />
             <div className="flex items-center gap-1">
-              <button className="w-8 h-8 flex items-center justify-center rounded-lg text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[rgba(255,255,255,0.05)] transition-colors" title="Attach file (coming soon)">
+              <button className="w-8 h-8 flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-all duration-150" title="Attach file (coming soon)">
                 <PaperclipIcon className="w-4 h-4" />
               </button>
               <button
                 disabled={!replyText.trim()}
                 className={cn(
-                  "w-8 h-8 flex items-center justify-center rounded-lg transition-colors",
+                  "w-8 h-8 flex items-center justify-center rounded-lg transition-all duration-150",
                   replyText.trim()
-                    ? "bg-[#5e6ad2] text-[#f7f8f8] hover:bg-[#7170ff]"
+                    ? "bg-primary text-primary-foreground hover:bg-primary/80"
-                    : "bg-[#191a1b] text-[#8a8f98] cursor-not-allowed"
+                    : "bg-muted text-muted-foreground cursor-not-allowed"
                 )}
               >
                 <SendIcon className="w-4 h-4" />
@@ -399,27 +403,27 @@ export default function TicketDetailPage({
       </div>
 
       {/* Right panel — properties */}
-      <div className="w-80 flex-shrink-0 bg-[#0f1011] border-l border-[rgba(255,255,255,0.05)] flex flex-col overflow-y-auto">
+      <div className="w-80 flex-shrink-0 bg-sidebar border-l border-border flex flex-col overflow-y-auto">
-        <div className="p-4 space-y-4">
+        <div className="p-4 space-y-5">
-          {/* Status */}
+          {/* Section: Status */}
           <div>
-            <label className="block text-xs font-medium text-[#8a8f98] mb-1.5 uppercase tracking-wider">
+            <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
               Status
-            </label>
+            </h3>
             <div className="relative">
               <button
                 onClick={() => setStatusSelectOpen(!statusSelectOpen)}
-                className="w-full flex items-center gap-2 px-3 py-2 rounded-lg border border-[rgba(255,255,255,0.08)] bg-[#08090a] text-sm hover:border-[rgba(255,255,255,0.15)] transition-colors"
+                className="w-full flex items-center gap-3 px-4 py-2.5 rounded-lg border border-border bg-background text-sm hover:border-foreground/20 transition-all duration-150"
               >
                 <span
-                  className="w-2.5 h-2.5 rounded-full flex-shrink-0"
+                  className="w-3 h-3 rounded-full flex-shrink-0"
                   style={{ backgroundColor: currentStatusColor }}
                 />
-                <span className="text-[#f7f8f8] font-medium flex-1 text-left">
+                <span className="text-foreground font-medium flex-1 text-left">
                   {currentStatusLabel}
                 </span>
                 <svg
-                  className="w-4 h-4 text-[#8a8f98]"
+                  className="w-4 h-4 text-muted-foreground"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -434,7 +438,7 @@ export default function TicketDetailPage({
               </button>
 
               {statusSelectOpen && (
-                <div className="absolute top-full left-0 right-0 mt-1 z-10 bg-[#191a1b] border border-[rgba(255,255,255,0.08)] rounded-lg shadow-xl overflow-hidden">
+                <div className="absolute top-full left-0 right-0 mt-1 z-10 bg-popover border border-border rounded-lg shadow-xl overflow-hidden">
                   {ALL_STATUSES.map((status) => {
                     const color = STATUS_COLORS[status];
                     const label = STATUS_LABELS[status];
@@ -445,19 +449,19 @@ export default function TicketDetailPage({
                         onClick={() => handleStatusSelect(status)}
                         disabled={isCurrent}
                         className={cn(
-                          "w-full flex items-center gap-2 px-3 py-2 text-sm text-left transition-colors",
+                          "w-full flex items-center gap-3 px-4 py-2.5 text-sm text-left transition-all duration-150",
                           isCurrent
-                            ? "bg-[rgba(255,255,255,0.03)] text-[#8a8f98] cursor-default"
+                            ? "bg-accent text-muted-foreground cursor-default"
-                            : "text-[#d0d6e0] hover:bg-[rgba(255,255,255,0.05)]"
+                            : "text-foreground hover:bg-accent"
                         )}
                       >
                         <span
-                          className="w-2.5 h-2.5 rounded-full flex-shrink-0"
+                          className="w-3 h-3 rounded-full flex-shrink-0"
                           style={{ backgroundColor: color }}
                         />
                         {label}
                         {isCurrent && (
-                          <span className="text-xs text-[#8a8f98] ml-auto">
+                          <span className="text-xs text-muted-foreground ml-auto">
                             current
                           </span>
                         )}
@@ -471,10 +475,10 @@ export default function TicketDetailPage({
 
           {/* Status change preview */}
           {preview && (
-            <div className="p-3 rounded-lg bg-[#08090a] border border-[rgba(255,255,255,0.08)]">
+            <div className="p-3 rounded-lg bg-background border border-border">
-              <p className="text-xs text-[#8a8f98] mb-2">
+              <p className="text-xs text-muted-foreground mb-2">
                 Preview: changing to{" "}
-                <span className="text-[#f7f8f8] font-medium">
+                <span className="text-foreground font-medium">
                   {STATUS_LABELS[pendingStatus || ""]}
                 </span>
               </p>
@@ -483,15 +487,15 @@ export default function TicketDetailPage({
                   {preview.prepared_scrips.map((scrip) => (
                     <div
                       key={scrip.scripId}
-                      className="text-xs text-[#d0d6e0] flex items-center gap-1.5"
+                      className="text-xs text-foreground flex items-center gap-1.5"
                     >
-                      <span className="w-2 h-2 rounded-full bg-[#f59e0b] flex-shrink-0" />
+                      <span className="w-2 h-2 rounded-full bg-chart-3 flex-shrink-0" />
                       {scrip.scripName}
                     </div>
                   ))}
                 </div>
               ) : (
-                <p className="text-xs text-[#8a8f98] mb-3">
+                <p className="text-xs text-muted-foreground mb-3">
                   No scrips will fire
                 </p>
               )}
@@ -499,7 +503,7 @@ export default function TicketDetailPage({
                 <button
                   onClick={handleApplyStatus}
                   disabled={applyLoading}
-                  className="px-2.5 py-1 rounded-md text-xs font-medium bg-[#5e6ad2] hover:bg-[#7170ff] text-[#f7f8f8] disabled:opacity-50 transition-colors"
+                  className="px-2.5 py-1 rounded-md text-xs font-medium bg-primary hover:bg-primary/80 text-primary-foreground disabled:opacity-50 transition-all duration-150"
                 >
                   {applyLoading
                     ? "Applying..."
@@ -508,7 +512,7 @@ export default function TicketDetailPage({
                 <button
                   onClick={handleCancelStatus}
                   disabled={applyLoading}
-                  className="px-2.5 py-1 rounded-md text-xs font-medium text-[#8a8f98] hover:text-[#d0d6e0] transition-colors"
+                  className="px-2.5 py-1 rounded-md text-xs font-medium text-muted-foreground hover:text-foreground transition-all duration-150"
                 >
                   Cancel
                 </button>
@@ -517,27 +521,27 @@ export default function TicketDetailPage({
           )}
 
           {previewError && (
-            <div className="p-2 rounded-lg bg-red-400/5 border border-red-400/10">
+            <div className="p-2 rounded-lg bg-destructive/5 border border-destructive/10">
-              <p className="text-xs text-red-400">{previewError}</p>
+              <p className="text-xs text-destructive">{previewError}</p>
             </div>
           )}
 
           {scripResults && (
-            <div className="p-3 rounded-lg bg-[#08090a] border border-[rgba(255,255,255,0.08)]">
+            <div className="p-3 rounded-lg bg-background border border-border">
-              <p className="text-xs text-[#8a8f98] mb-2">Scrip results:</p>
+              <p className="text-xs text-muted-foreground mb-2">Scrip results:</p>
               <div className="space-y-1">
                 {scripResults.map((result) => (
                   <div
                     key={result.scripId}
                     className={cn(
                       "text-xs flex items-center gap-1.5",
-                      result.success ? "text-[#22c55e]" : "text-red-400"
+                      result.success ? "text-[#22c55e]" : "text-destructive"
                     )}
                   >
                     <span
                       className={cn(
                         "w-2 h-2 rounded-full flex-shrink-0",
-                        result.success ? "bg-[#22c55e]" : "bg-red-400"
+                        result.success ? "bg-[#22c55e]" : "bg-destructive"
                       )}
                     />
                     {result.message}
@@ -546,119 +550,134 @@ export default function TicketDetailPage({
               </div>
               <button
                 onClick={() => setScripResults(null)}
-                className="mt-2 text-xs text-[#8a8f98] hover:text-[#d0d6e0]"
+                className="mt-2 text-xs text-muted-foreground hover:text-foreground transition-all duration-150"
               >
                 Dismiss
               </button>
             </div>
           )}
 
-          {/* Priority (placeholder) */}
+          <Separator />
-          <div>
-            <label className="block text-xs font-medium text-[#8a8f98] mb-1.5 uppercase tracking-wider">
-              Priority
-            </label>
-            <div className="px-3 py-2 rounded-lg border border-[rgba(255,255,255,0.05)] bg-[#08090a] text-sm text-[#8a8f98]">
-              Not set
-            </div>
-          </div>
 
-          {/* Assignee */}
+          {/* Section: Assignment */}
           <div>
-            <label className="block text-xs font-medium text-[#8a8f98] mb-1.5 uppercase tracking-wider">
+            <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
-              Assignee
+              Assignment
-            </label>
+            </h3>
-            {ticket.owner_id ? (
-              <div className="flex items-center gap-2 px-3 py-2 rounded-lg border border-[rgba(255,255,255,0.08)] bg-[#08090a]">
-                <div
-                  className="w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0"
-                  style={{
-                    backgroundColor: getInitialColor(ticket.owner_id),
-                  }}
-                >
-                  <span className="text-[10px] font-semibold text-[#f7f8f8]">
-                    {getInitial(ticket.owner_id)}
-                  </span>
-                </div>
-                <span className="text-sm text-[#f7f8f8]">
-                  {ticket.owner_id}
-                </span>
-              </div>
-            ) : (
-              <div className="px-3 py-2 rounded-lg border border-[rgba(255,255,255,0.05)] bg-[#08090a] text-sm text-[#8a8f98]">
-                Unassigned
-              </div>
-            )}
-          </div>
 
-          {/* Queue */}
+            {/* Assignee */}
-          <div>
+            <div className="mb-3">
-            <label className="block text-xs font-medium text-[#8a8f98] mb-1.5 uppercase tracking-wider">
+              <label className="block text-[11px] font-medium text-muted-foreground mb-1">
-              Queue
+                Assignee
-            </label>
-            <div className="px-3 py-2 rounded-lg border border-[rgba(255,255,255,0.08)] bg-[#08090a]">
-              <span className="text-sm text-[#f7f8f8]">
-                {queue?.name || ticket.queue_id}
-              </span>
-            </div>
-          </div>
-
-          {/* Custom fields */}
-          {ticket.custom_fields && ticket.custom_fields.length > 0 && (
-            <div>
-              <label className="block text-xs font-medium text-[#8a8f98] mb-1.5 uppercase tracking-wider">
-                Custom fields
               </label>
-              <div className="space-y-1.5">
+              {ticket.owner_id ? (
-                {ticket.custom_fields.map((cf) => (
+                <div className="flex items-center gap-2 px-3 py-2 rounded-lg border border-border bg-background transition-all duration-150 hover:border-foreground/20">
                   <div
-                    key={cf.id}
+                    className="w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0"
-                    className="flex justify-between items-center px-3 py-1.5 rounded-lg border border-[rgba(255,255,255,0.05)] bg-[#08090a]"
+                    style={{
+                      backgroundColor: getInitialColor(ticket.owner_id),
+                    }}
                   >
-                    <span className="text-xs text-[#8a8f98]">
+                    <span className="text-[10px] font-semibold text-primary-foreground">
-                      {cf.custom_field?.name || cf.custom_field_id}
+                      {getInitial(ticket.owner_id)}
-                    </span>
-                    <span className="text-xs text-[#f7f8f8] font-medium">
-                      {cf.value}
                     </span>
                   </div>
-                ))}
+                  <span className="text-sm text-foreground">
+                    {ticket.owner_id}
+                  </span>
+                </div>
+              ) : (
+                <div className="px-3 py-2 rounded-lg border border-border bg-background text-sm text-muted-foreground">
+                  Unassigned
+                </div>
+              )}
+            </div>
+
+            {/* Priority (placeholder) */}
+            <div>
+              <label className="block text-[11px] font-medium text-muted-foreground mb-1">
+                Priority
+              </label>
+              <div className="px-3 py-2 rounded-lg border border-border bg-background text-sm text-muted-foreground">
+                Not set
               </div>
             </div>
-          )}
+          </div>
 
-          {/* Dates */}
+          <Separator />
+
+          {/* Section: Details */}
           <div>
-            <label className="block text-xs font-medium text-[#8a8f98] mb-1.5 uppercase tracking-wider">
+            <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
-              Dates
+              Details
-            </label>
+            </h3>
-            <div className="space-y-1 text-xs">
+
-              <div className="flex justify-between px-1">
+            {/* Queue */}
-                <span className="text-[#8a8f98]">Created</span>
+            <div className="mb-3">
-                <span className="text-[#d0d6e0] tabular-nums">
+              <label className="block text-[11px] font-medium text-muted-foreground mb-1">
-                  {formatDistanceToNow(new Date(ticket.created_at), {
+                Queue
-                    addSuffix: true,
+              </label>
-                  })}
+              <div className="px-3 py-2 rounded-lg border border-border bg-background">
+                <span className="text-sm text-foreground">
+                  {queue?.name || ticket.queue_id}
                 </span>
               </div>
-              <div className="flex justify-between px-1">
+            </div>
-                <span className="text-[#8a8f98]">Updated</span>
+
-                <span className="text-[#d0d6e0] tabular-nums">
+            {/* Custom fields */}
-                  {formatDistanceToNow(new Date(ticket.updated_at), {
+            {ticket.custom_fields && ticket.custom_fields.length > 0 && (
-                    addSuffix: true,
+              <div className="mb-3">
-                  })}
+                <label className="block text-[11px] font-medium text-muted-foreground mb-1">
-                </span>
+                  Custom fields
+                </label>
+                <div className="space-y-1.5">
+                  {ticket.custom_fields.map((cf) => (
+                    <div
+                      key={cf.id}
+                      className="flex justify-between items-center px-3 py-1.5 rounded-lg border border-border bg-background"
+                    >
+                      <span className="text-xs text-muted-foreground">
+                        {cf.custom_field?.name || cf.custom_field_id}
+                      </span>
+                      <span className="text-xs text-foreground font-medium">
+                        {cf.value}
+                      </span>
+                    </div>
+                  ))}
+                </div>
               </div>
-              {ticket.resolved_at && (
+            )}
-                <div className="flex justify-between px-1">
+
-                  <span className="text-[#8a8f98]">Resolved</span>
+            {/* Dates */}
-                  <span className="text-[#d0d6e0] tabular-nums">
+            <div>
-                    {formatDistanceToNow(new Date(ticket.resolved_at), {
+              <div className="space-y-1.5 text-xs">
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">Created</span>
+                  <span className="text-foreground tabular-nums">
+                    {formatDistanceToNow(new Date(ticket.created_at), {
                       addSuffix: true,
                     })}
                   </span>
                 </div>
-              )}
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">Updated</span>
+                  <span className="text-foreground tabular-nums">
+                    {formatDistanceToNow(new Date(ticket.updated_at), {
+                      addSuffix: true,
+                    })}
+                  </span>
+                </div>
+                {ticket.resolved_at && (
+                  <div className="flex justify-between">
+                    <span className="text-muted-foreground">Resolved</span>
+                    <span className="text-foreground tabular-nums">
+                      {formatDistanceToNow(new Date(ticket.resolved_at), {
+                        addSuffix: true,
+                      })}
+                    </span>
+                  </div>
+                )}
+              </div>
             </div>
           </div>
         </div>

web/src/components/app-shell.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useState, useEffect, Suspense } from "react";
+import { useState, useEffect, Suspense, createContext, useContext } from "react";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { usePathname, useSearchParams } from "next/navigation";
 import Link from "next/link";
 import {
   LayoutGridIcon,
@@ -9,12 +9,21 @@ import {
   InboxIcon,
   ClockIcon,
   SettingsIcon,
+  PanelLeftCloseIcon,
+  PanelLeftIcon,
 } from "lucide-react";
 import { getTickets, getQueues } from "@/lib/api";
 import type { Queue } from "@/lib/types";
 import { CommandPalette } from "@/components/command-palette";
+import { ThemeToggle } from "@/components/theme-toggle";
 import { cn } from "@/lib/utils";
 
+const SidebarCollapsedContext = createContext(false);
+
+function useSidebarCollapsed() {
+  return useContext(SidebarCollapsedContext);
+}
+
 interface ViewCounts {
   all: number;
   my: number;
@@ -22,6 +31,46 @@ interface ViewCounts {
   recent: number;
 }
 
+function SidebarNavItem({
+  href,
+  icon: Icon,
+  label,
+  count,
+  active,
+}: {
+  href: string;
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  count?: number;
+  active: boolean;
+}) {
+  const collapsed = useSidebarCollapsed();
+
+  return (
+    <Link
+      href={href}
+      title={collapsed ? label : undefined}
+      className={cn(
+        "flex items-center px-2 py-1.5 rounded-md text-[13px] transition-all duration-150 mb-0.5",
+        collapsed ? "justify-center w-full" : "justify-between",
+        active
+          ? "bg-accent text-foreground font-medium"
+          : "text-muted-foreground hover:text-foreground hover:bg-accent font-normal"
+      )}
+    >
+      <span className={cn("flex items-center", collapsed ? "" : "gap-2.5")}>
+        <Icon className="w-4 h-4 flex-shrink-0" />
+        {!collapsed && label}
+      </span>
+      {!collapsed && count !== undefined && count > 0 && (
+        <span className="text-xs tabular-nums text-muted-foreground">
+          {count}
+        </span>
+      )}
+    </Link>
+  );
+}
+
 function SidebarNav() {
   const pathname = usePathname();
   const searchParams = useSearchParams();
@@ -64,6 +113,8 @@ function SidebarNav() {
     });
   }, []);
 
+  const collapsed = useSidebarCollapsed();
+
   const views = [
     {
       label: "All tickets",
@@ -101,64 +152,44 @@ function SidebarNav() {
     <>
       <div className="mb-4">
         {views.map((view) => {
-          const Icon = view.icon;
           const active =
             pathname === "/" &&
             (view.param ? currentView === view.param : !currentView);
           return (
-            <Link
+            <SidebarNavItem
               key={view.label}
               href={view.href}
-              className={cn(
+              icon={view.icon}
-                "flex items-center justify-between px-2 py-1.5 rounded-md text-[13px] transition-colors mb-0.5",
+              label={view.label}
-                active
+              count={view.count}
-                  ? "bg-[rgba(255,255,255,0.05)] text-[#f7f8f8] font-medium"
+              active={active}
-                  : "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[rgba(255,255,255,0.03)] font-normal"
+            />
-              )}
-            >
-              <span className="flex items-center gap-2.5">
-                <Icon className="w-4 h-4 flex-shrink-0" />
-                {view.label}
-              </span>
-              {view.count > 0 && (
-                <span className="text-xs tabular-nums text-[#8a8f98]">
-                  {view.count}
-                </span>
-              )}
-            </Link>
           );
         })}
       </div>
 
       {queues.length > 0 && (
         <div>
-          <div className="px-2 py-1.5 text-[11px] font-semibold text-[#8a8f98] uppercase tracking-wider">
+          {!collapsed && (
-            Queues
+            <div className="px-2 py-1.5 text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">
-          </div>
+              Queues
+            </div>
+          )}
           {queues.map((queue) => {
             const active =
               pathname === "/" && searchParams.get("queue") === queue.id;
+            const QueueIcon = () => (
+              <span className="w-2 h-2 rounded-full bg-muted-foreground flex-shrink-0" />
+            );
             return (
-              <Link
+              <SidebarNavItem
                 key={queue.id}
                 href={`/?queue=${queue.id}`}
-                className={cn(
+                icon={QueueIcon}
-                  "flex items-center justify-between px-2 py-1.5 rounded-md text-[13px] transition-colors",
+                label={queue.name}
-                  active
+                count={queue.count}
-                    ? "bg-[rgba(255,255,255,0.05)] text-[#f7f8f8] font-medium"
+                active={active}
-                    : "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[rgba(255,255,255,0.03)] font-normal"
+              />
-                )}
-              >
-                <span className="flex items-center gap-2.5">
-                  <span className="w-2 h-2 rounded-full bg-[#8a8f98] flex-shrink-0" />
-                  {queue.name}
-                </span>
-                {queue.count > 0 && (
-                  <span className="text-xs tabular-nums text-[#8a8f98]">
-                    {queue.count}
-                  </span>
-                )}
-              </Link>
             );
           })}
         </div>
@@ -169,26 +200,36 @@ function SidebarNav() {
 
 function SidebarBottom() {
   const pathname = usePathname();
+  const collapsed = useSidebarCollapsed();
 
   return (
-    <div className="border-t border-[rgba(255,255,255,0.05)] p-2">
+    <div className="border-t border-border p-2">
-      <Link
+      <SidebarNavItem
         href="/admin"
+        icon={SettingsIcon}
+        label="Admin"
+        active={pathname === "/admin"}
+      />
+      <div
         className={cn(
-          "flex items-center gap-2.5 px-2 py-1.5 rounded-md text-[13px] transition-colors",
+          "flex items-center mt-0.5 px-2 py-1.5",
-          pathname === "/admin"
+          collapsed ? "justify-center" : "gap-2"
-            ? "bg-[rgba(255,255,255,0.05)] text-[#f7f8f8] font-medium"
-            : "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[rgba(255,255,255,0.03)] font-normal"
         )}
+        title={collapsed ? "User" : undefined}
       >
-        <SettingsIcon className="w-4 h-4 flex-shrink-0" />
+        <div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
-        Admin
+          <span className="text-primary-foreground text-[10px] font-semibold">
-      </Link>
+            U
-      <div className="flex items-center gap-2 px-2 py-1.5 mt-0.5">
+          </span>
-        <div className="w-5 h-5 rounded-full bg-[#5e6ad2] flex items-center justify-center flex-shrink-0">
-          <span className="text-[#f7f8f8] text-[10px] font-semibold">U</span>
         </div>
-        <span className="text-[13px] text-[#8a8f98] truncate">User</span>
+        {!collapsed && (
+          <span className="text-[13px] text-muted-foreground truncate">
+            User
+          </span>
+        )}
+      </div>
+      <div className={cn("flex", collapsed ? "justify-center mt-1" : "mt-1")}>
+        <ThemeToggle />
       </div>
     </div>
   );
@@ -196,6 +237,7 @@ function SidebarBottom() {
 
 export function AppShell({ children }: { children: React.ReactNode }) {
   const [commandOpen, setCommandOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
 
   useEffect(() => {
     const down = (e: KeyboardEvent) => {
@@ -216,50 +258,73 @@ export function AppShell({ children }: { children: React.ReactNode }) {
   }, []);
 
   return (
-    <div className="flex h-screen overflow-hidden">
+    <SidebarCollapsedContext.Provider value={sidebarCollapsed}>
-      {/* Sidebar */}
+      <div className="flex h-screen overflow-hidden">
-      <aside className="w-60 flex-shrink-0 flex flex-col bg-[#0f1011] border-r border-[rgba(255,255,255,0.05)]">
+        {/* Sidebar */}
-        {/* Brand */}
+        <aside
-        <div className="h-11 flex items-center px-3 border-b border-[rgba(255,255,255,0.05)]">
+          className={cn(
-          <Link href="/" className="flex items-center gap-2">
+            "flex-shrink-0 flex flex-col bg-sidebar border-r border-border transition-all duration-150",
-            <div className="w-5 h-5 rounded-md bg-[#5e6ad2] flex items-center justify-center">
+            sidebarCollapsed ? "w-[60px]" : "w-60"
-              <span className="text-[#f7f8f8] text-[11px] font-semibold">
+          )}
-                T
+        >
-              </span>
+          {/* Brand */}
-            </div>
+          <div className="h-11 flex items-center px-3 border-b border-border">
-            <span className="font-semibold text-[#f7f8f8] text-sm tracking-tight">
+            <Link href="/" className="flex items-center gap-2">
-              Tessera
+              <div className="w-5 h-5 rounded-md bg-primary flex items-center justify-center">
-            </span>
+                <span className="text-primary-foreground text-[11px] font-semibold">
-          </Link>
+                  T
-        </div>
+                </span>
-
-        {/* Nav */}
-        <nav className="flex-1 overflow-y-auto py-2 px-2">
-          <Suspense
-            fallback={
-              <div className="space-y-1.5 px-2">
-                {Array.from({ length: 6 }).map((_, i) => (
-                  <div
-                    key={i}
-                    className="h-7 bg-[#191a1b] rounded-md animate-pulse"
-                  />
-                ))}
               </div>
-            }
+              {!sidebarCollapsed && (
-          >
+                <span className="font-semibold text-foreground text-sm tracking-tight">
-            <SidebarNav />
+                  Tessera
-          </Suspense>
+                </span>
-        </nav>
+              )}
+            </Link>
+          </div>
 
-        {/* Bottom */}
+          {/* Nav */}
-        <SidebarBottom />
+          <nav className="flex-1 overflow-y-auto py-2 px-2">
-      </aside>
+            <Suspense
+              fallback={
+                <div className="space-y-1.5 px-2">
+                  {Array.from({ length: 6 }).map((_, i) => (
+                    <div
+                      key={i}
+                      className="h-7 bg-muted rounded-md animate-pulse"
+                    />
+                  ))}
+                </div>
+              }
+            >
+              <SidebarNav />
+            </Suspense>
+          </nav>
 
-      {/* Main */}
+          {/* Bottom */}
-      <main className="flex-1 overflow-y-auto">{children}</main>
+          <SidebarBottom />
+        </aside>
 
-      {/* Command Palette */}
+        {/* Main */}
-      <CommandPalette open={commandOpen} onOpenChange={setCommandOpen} />
+        <main className="flex-1 overflow-y-auto">{children}</main>
-    </div>
+
+        {/* Command Palette */}
+        <CommandPalette open={commandOpen} onOpenChange={setCommandOpen} />
+      </div>
+
+      {/* Collapse toggle */}
+      <button
+        onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+        className="fixed bottom-4 left-0 z-40 w-6 h-6 flex items-center justify-center rounded-r-md bg-sidebar border border-border border-l-0 text-muted-foreground hover:text-foreground transition-all duration-150"
+        style={{ left: sidebarCollapsed ? 60 : 240 }}
+        aria-label={sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+      >
+        {sidebarCollapsed ? (
+          <PanelLeftIcon className="w-3.5 h-3.5" />
+        ) : (
+          <PanelLeftCloseIcon className="w-3.5 h-3.5" />
+        )}
+      </button>
+    </SidebarCollapsedContext.Provider>
   );
 }

web/src/components/command-palette.tsx

@@ -7,7 +7,10 @@ import {
   PlusIcon,
   LayoutGridIcon,
   SettingsIcon,
+  MessageSquareIcon,
 } from "lucide-react";
+import { getTickets } from "@/lib/api";
+import type { Ticket } from "@/lib/types";
 
 interface CommandItem {
   id: string;
@@ -28,8 +31,17 @@ export function CommandPalette({ open, onOpenChange }: CommandPaletteProps) {
   const listRef = useRef<HTMLDivElement>(null);
   const [query, setQuery] = useState("");
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const [tickets, setTickets] = useState<Ticket[]>([]);
 
-  const commands: CommandItem[] = [
+  useEffect(() => {
+    if (open) {
+      getTickets().then(({ data }) => {
+        if (data) setTickets(data);
+      });
+    }
+  }, [open]);
+
+  const alwaysCommands: CommandItem[] = [
     {
       id: "new-ticket",
       label: "New ticket",
@@ -40,16 +52,6 @@ export function CommandPalette({ open, onOpenChange }: CommandPaletteProps) {
       },
       category: "Actions",
     },
-    {
-      id: "all-tickets",
-      label: "All tickets",
-      icon: LayoutGridIcon,
-      action: () => {
-        onOpenChange(false);
-        router.push("/");
-      },
-      category: "Navigate",
-    },
     {
       id: "admin",
       label: "Go to admin",
@@ -60,12 +62,37 @@ export function CommandPalette({ open, onOpenChange }: CommandPaletteProps) {
       },
       category: "Navigate",
     },
+    {
+      id: "all-tickets",
+      label: "All tickets",
+      icon: LayoutGridIcon,
+      action: () => {
+        onOpenChange(false);
+        router.push("/");
+      },
+      category: "Navigate",
+    },
   ];
 
-  const filtered = commands.filter((cmd) =>
+  const ticketCommands: CommandItem[] = tickets
+    .filter((t) => t.subject.toLowerCase().includes(query.toLowerCase()))
+    .map((t) => ({
+      id: `ticket-${t.id}`,
+      label: t.subject,
+      icon: MessageSquareIcon,
+      action: () => {
+        onOpenChange(false);
+        router.push(`/tickets/${t.id}`);
+      },
+      category: "Tickets",
+    }));
+
+  const alwaysFiltered = alwaysCommands.filter((cmd) =>
     cmd.label.toLowerCase().includes(query.toLowerCase())
   );
 
+  const filtered = [...alwaysFiltered, ...ticketCommands];
+
   const grouped = filtered.reduce<Record<string, CommandItem[]>>((acc, cmd) => {
     const cat = cmd.category || "Other";
     if (!acc[cat]) acc[cat] = [];
@@ -114,27 +141,27 @@ export function CommandPalette({ open, onOpenChange }: CommandPaletteProps) {
         onClick={() => onOpenChange(false)}
       />
       <div className="fixed top-[20%] left-1/2 -translate-x-1/2 w-full max-w-md">
-        <div className="bg-[#191a1b] rounded-xl shadow-2xl border border-[rgba(255,255,255,0.08)] overflow-hidden">
+        <div className="bg-popover rounded-xl shadow-2xl border border-border overflow-hidden">
-          <div className="flex items-center gap-2 px-3 border-b border-[rgba(255,255,255,0.05)]">
+          <div className="flex items-center gap-2 px-3 border-b border-border">
-            <SearchIcon className="w-4 h-4 text-[#8a8f98] flex-shrink-0" />
+            <SearchIcon className="w-4 h-4 text-muted-foreground flex-shrink-0" />
             <input
               ref={inputRef}
               value={query}
               onChange={(e) => setQuery(e.target.value)}
               onKeyDown={handleKeyDown}
               placeholder="Type a command or search..."
-              className="w-full h-10 bg-transparent text-sm text-[#f7f8f8] placeholder:text-[#8a8f98] outline-none"
+              className="w-full h-10 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none"
             />
           </div>
           <div ref={listRef} className="max-h-64 overflow-y-auto p-1">
             {filtered.length === 0 && (
-              <div className="px-3 py-6 text-center text-sm text-[#8a8f98]">
+              <div className="px-3 py-6 text-center text-sm text-muted-foreground">
                 No results found
               </div>
             )}
             {Object.entries(grouped).map(([category, items]) => (
               <div key={category}>
-                <div className="px-2 py-1.5 text-xs font-medium text-[#8a8f98]">
+                <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
                   {category}
                 </div>
                 {items.map((item) => {
@@ -144,10 +171,10 @@ export function CommandPalette({ open, onOpenChange }: CommandPaletteProps) {
                   return (
                     <button
                       key={item.id}
-                      className={`w-full flex items-center gap-2.5 px-2 py-2 rounded-lg text-sm text-left transition-colors ${
+                      className={`w-full flex items-center gap-2.5 px-2 py-2 rounded-lg text-sm text-left transition-all duration-150 ${
                         isSelected
-                          ? "bg-[#5e6ad2] text-white"
+                          ? "bg-primary text-primary-foreground"
-                          : "text-[#d0d6e0] hover:bg-[rgba(255,255,255,0.05)]"
+                          : "text-foreground hover:bg-accent"
                       }`}
                       onClick={item.action}
                       onMouseEnter={() => setSelectedIndex(idx)}
@@ -160,7 +187,7 @@ export function CommandPalette({ open, onOpenChange }: CommandPaletteProps) {
               </div>
             ))}
           </div>
-          <div className="border-t border-[rgba(255,255,255,0.05)] px-3 py-2 flex items-center justify-between text-xs text-[#8a8f98]">
+          <div className="border-t border-border px-3 py-2 flex items-center justify-between text-xs text-muted-foreground">
             <span>↑↓ Navigate</span>
             <span>↵ Select</span>
             <span>Esc Dismiss</span>

web/src/components/theme-toggle.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { SunIcon, MoonIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) {
+    return <div className="w-8 h-8" />;
+  }
+
+  const isDark = theme === "dark";
+
+  return (
+    <button
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      className="w-8 h-8 flex items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-all duration-150"
+      aria-label="Toggle theme"
+    >
+      {isDark ? (
+        <SunIcon className="w-4 h-4" />
+      ) : (
+        <MoonIcon className="w-4 h-4" />
+      )}
+    </button>
+  );
+}