feat: three-column ticket list layout (list + detail as peers, no Sheet)

- Replace Sheet slide-over with persistent right-column detail panel
- Ticket list shrinks to w-80 when ticket selected, detail takes flex-1
- Animated transition (300ms ease-out) when selecting/deselecting
- Kept existing conversation thread, properties sidebar, reply box inline

web/src/app/page.tsx

@@ -16,12 +16,6 @@ import {
   DialogDescription,
   DialogFooter,
 } from "@/components/ui/dialog";
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-} from "@/components/ui/sheet";
 import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 
@@ -66,7 +60,7 @@ function getInitialColor(name: string): string {
   return colors[Math.abs(hash) % colors.length];
 }
 
-function TicketRow({ ticket, onClick }: { ticket: Ticket; onClick: () => void }) {
+function TicketRow({ ticket, selected, onClick }: { ticket: Ticket; selected: boolean; onClick: () => void }) {
   const statusColor = STATUS_COLORS[ticket.status] || STATUS_COLORS.new;
   const shortId = ticket.id.slice(0, 8);
   const timeAgo = formatDistanceToNow(new Date(ticket.updated_at), { addSuffix: true });
@@ -74,7 +68,12 @@ function TicketRow({ ticket, onClick }: { ticket: Ticket; onClick: () => void })
   return (
     <button
       onClick={onClick}
-      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"
+      className={cn(
+        "w-full flex items-center gap-3 py-3 px-4 text-left transition-all duration-150 border-l-2 border-b border-border",
+        selected
+          ? "bg-accent border-l-primary"
+          : "border-l-transparent hover:bg-accent hover:border-l-primary"
+      )}
     >
       <span
         className="w-2 h-2 rounded-full flex-shrink-0"
@@ -120,25 +119,25 @@ function SkeletonRow() {
   );
 }
 
-function TicketDetailSheet({
+function TicketDetailPanel({
   ticketId,
-  open,
+  onBack,
-  onOpenChange,
 }: {
-  ticketId: string | null;
+  ticketId: string;
-  open: boolean;
+  onBack: () => void;
-  onOpenChange: (open: boolean) => void;
 }) {
   const [ticket, setTicket] = useState<Ticket | null>(null);
   const [transactions, setTransactions] = useState<Transaction[]>([]);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [replyText, setReplyText] = useState("");
 
   useEffect(() => {
-    if (open && ticketId) {
     setLoading(true);
     setError(null);
+    setTicket(null);
+    setTransactions([]);
+    setReplyText("");
     Promise.all([
       getTicket(ticketId),
       getTicketTransactions(ticketId),
@@ -153,18 +152,23 @@ function TicketDetailSheet({
       }
       setLoading(false);
     });
-    }
+  }, [ticketId]);
-  }, [open, ticketId]);
 
   return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
+    <div className="flex flex-col h-full">
-      <SheetContent
+      {/* Header */}
-        side="right"
+      <div className="flex items-center gap-3 px-4 py-2.5 border-b border-border shrink-0">
-        className="w-full sm:max-w-lg flex flex-col p-0"
+        <button
-        showCloseButton={true}
+          onClick={onBack}
+          className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-all duration-150 flex-shrink-0"
         >
+          <ArrowLeftIcon className="w-3.5 h-3.5" />
+          Back
+        </button>
+      </div>
+
       {loading && (
-          <div className="flex-1 p-4 space-y-4">
+        <div className="flex-1 p-4 space-y-4 overflow-y-auto">
           {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" />
@@ -184,16 +188,16 @@ function TicketDetailSheet({
       )}
 
       {!loading && !error && ticket && (
-          <div className="flex flex-col h-full">
+        <>
-            {/* Header */}
+          {/* Title */}
-            <SheetHeader className="border-b border-border shrink-0">
+          <div className="px-4 py-3 border-b border-border shrink-0">
-              <SheetTitle className="text-sm font-semibold truncate">
+            <h2 className="text-sm font-semibold truncate">
               {ticket.subject}
-              </SheetTitle>
+            </h2>
-              <p className="text-xs text-muted-foreground">
+            <p className="text-xs text-muted-foreground mt-0.5">
               <span className="font-mono">{ticket.id.slice(0, 8)}</span>
             </p>
-            </SheetHeader>
+          </div>
 
           {/* Conversation */}
           <div className="flex-1 overflow-y-auto">
@@ -346,10 +350,9 @@ function TicketDetailSheet({
               </div>
             </div>
           </div>
-          </div>
+        </>
       )}
-      </SheetContent>
+    </div>
-    </Sheet>
   );
 }
 
@@ -373,9 +376,8 @@ function TicketListPageContent() {
   const [submitting, setSubmitting] = useState(false);
   const [createError, setCreateError] = useState<string | null>(null);
 
-  // Sheet
+  // Selected ticket
-  const [sheetTicketId, setSheetTicketId] = useState<string | null>(null);
+  const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null);
-  const [sheetOpen, setSheetOpen] = useState(false);
 
   const initialQueueId = searchParams.get("queue") || "";
 
@@ -456,16 +458,31 @@ function TicketListPageContent() {
       setNewSubject("");
       setNewQueueId("");
       setNewDescription("");
-      // Open in sheet
+      setSelectedTicketId(data.id);
-      setSheetTicketId(data.id);
+      // Refresh the list to show the new ticket
-      setSheetOpen(true);
+      fetchData();
     }
   };
 
+  const handleSelectTicket = (ticketId: string) => {
+    setSelectedTicketId(ticketId);
+  };
+
+  const handleDeselectTicket = () => {
+    setSelectedTicketId(null);
+  };
+
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex h-full">
+      {/* Ticket list column */}
+      <div
+        className={cn(
+          "flex flex-col h-full overflow-hidden transition-all duration-300 ease-out",
+          selectedTicketId ? "w-80 min-w-80 flex-shrink-0" : "flex-1 min-w-0"
+        )}
+      >
         {/* Top bar */}
-      <div className="flex items-center gap-3 px-4 py-3 border-b border-border">
+        <div className="flex items-center gap-3 px-4 py-3 border-b border-border shrink-0">
           <div className="relative flex-1">
             <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
             <input
@@ -485,7 +502,7 @@ function TicketListPageContent() {
         </div>
 
         {/* Filter chips */}
-      <div className="flex items-center gap-1.5 px-4 py-2 border-b border-border">
+        <div className="flex items-center gap-1.5 px-4 py-2 border-b border-border shrink-0">
           {FILTERS.map((filter) => (
             <button
               key={filter.key ?? "all"}
@@ -548,13 +565,25 @@ function TicketListPageContent() {
               <TicketRow
                 key={ticket.id}
                 ticket={ticket}
-              onClick={() => {
+                selected={ticket.id === selectedTicketId}
-                setSheetTicketId(ticket.id);
+                onClick={() => handleSelectTicket(ticket.id)}
-                setSheetOpen(true);
-              }}
               />
             ))}
         </div>
+      </div>
+
+      {/* Ticket detail column */}
+      {selectedTicketId && (
+        <div
+          className="flex-1 min-w-0 border-l overflow-hidden"
+          style={{ animation: "slide-in-right 300ms ease-out" }}
+        >
+          <TicketDetailPanel
+            ticketId={selectedTicketId}
+            onBack={handleDeselectTicket}
+          />
+        </div>
+      )}
 
       {/* Create ticket dialog */}
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
@@ -654,13 +683,6 @@ function TicketListPageContent() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-
-      {/* Ticket detail sheet */}
-      <TicketDetailSheet
-        ticketId={sheetTicketId}
-        open={sheetOpen}
-        onOpenChange={setSheetOpen}
-      />
     </div>
   );
 }