Add properties sidebar to inline ticket detail panel

- Two-column layout inside TicketDetailPanel: conversation (left) + sidebar (right)
- Status section: Select dropdown with all statuses, previewTicket + updateTicket flow with Apply/Cancel
- Assignment section: read-only assignee display with avatar initial
- Details section: queue name, created/updated/resolved dates
- Custom fields section: name:value pairs when present
- Sidebar skeleton during loading
- Fetches queue info alongside ticket data for display

web/src/app/page.tsx

@@ -4,8 +4,8 @@ import { useState, useEffect, useCallback } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { PlusIcon, SearchIcon, ArrowLeftIcon, SendIcon, PaperclipIcon } from "lucide-react";
 import { formatDistanceToNow } from "date-fns";
-import { getTickets, getTicket, getTicketTransactions, getQueues, createTicket } from "@/lib/api";
+import { getTickets, getTicket, getTicketTransactions, getQueues, createTicket, updateTicket, previewTicket } from "@/lib/api";
-import type { Ticket, Queue, Transaction } from "@/lib/types";
+import type { Ticket, Queue, Transaction, PreviewResult, UpdateResult } from "@/lib/types";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -16,6 +16,14 @@ import {
   DialogDescription,
   DialogFooter,
 } from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
 import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 
@@ -35,6 +43,8 @@ const STATUS_LABELS: Record<string, string> = {
   closed: "Closed",
 };
 
+const ALL_STATUSES = ["new", "open", "in_progress", "resolved", "closed"];
+
 const FILTERS = [
   { key: null, label: "All" },
   { key: "open", label: "Open" },
@@ -128,20 +138,32 @@ function TicketDetailPanel({
 }) {
   const [ticket, setTicket] = useState<Ticket | null>(null);
   const [transactions, setTransactions] = useState<Transaction[]>([]);
+  const [queue, setQueue] = useState<Queue | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [replyText, setReplyText] = useState("");
 
-  useEffect(() => {
+  // Status change
+  const [pendingStatus, setPendingStatus] = useState<string | null>(null);
+  const [preview, setPreview] = useState<PreviewResult | null>(null);
+  const [previewLoading, setPreviewLoading] = useState(false);
+  const [previewError, setPreviewError] = useState<string | null>(null);
+  const [applyLoading, setApplyLoading] = useState(false);
+  const [scripResults, setScripResults] = useState<UpdateResult["scrip_results"] | null>(null);
+
+  const fetchData = useCallback(async () => {
     setLoading(true);
     setError(null);
     setTicket(null);
     setTransactions([]);
     setReplyText("");
-    Promise.all([
+
+    const [ticketRes, txRes, queuesRes] = await Promise.all([
       getTicket(ticketId),
       getTicketTransactions(ticketId),
-    ]).then(([ticketRes, txRes]) => {
+      getQueues(),
+    ]);
+
     if (ticketRes.error) {
       setError(ticketRes.error);
     } else {
@@ -150,10 +172,64 @@ function TicketDetailPanel({
     if (txRes.data) {
       setTransactions(txRes.data);
     }
+    if (queuesRes.data && ticketRes.data) {
+      const q = queuesRes.data.find((q) => q.id === ticketRes.data!.queue_id);
+      if (q) setQueue(q);
+    }
     setLoading(false);
-    });
   }, [ticketId]);
 
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const handleStatusSelect = (value: string | null) => {
+    if (!value || value === ticket?.status) return;
+    setPendingStatus(value);
+    setPreview(null);
+    setPreviewError(null);
+    setScripResults(null);
+    setPreviewLoading(true);
+
+    previewTicket(ticketId, { status: value }).then(({ data, error }) => {
+      setPreviewLoading(false);
+      if (error) {
+        setPreviewError(error);
+        setPendingStatus(null);
+      } else {
+        setPreview(data);
+      }
+    });
+  };
+
+  const handleApplyStatus = async () => {
+    if (!pendingStatus) return;
+    setApplyLoading(true);
+    setPreviewError(null);
+
+    const { data, error } = await updateTicket(ticketId, { status: pendingStatus });
+
+    setApplyLoading(false);
+
+    if (error) {
+      setPreviewError(error);
+    } else if (data) {
+      setTicket(data.ticket);
+      setScripResults(data.scrip_results);
+      setPreview(null);
+      setPendingStatus(null);
+      const txRes = await getTicketTransactions(ticketId);
+      if (txRes.data) setTransactions(txRes.data);
+    }
+  };
+
+  const handleCancelStatus = () => {
+    setPendingStatus(null);
+    setPreview(null);
+    setPreviewError(null);
+    setScripResults(null);
+  };
+
   return (
     <div className="flex flex-col h-full">
       {/* Header */}
@@ -168,6 +244,7 @@ function TicketDetailPanel({
       </div>
 
       {loading && (
+        <div className="flex h-full">
           <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">
@@ -179,6 +256,12 @@ function TicketDetailPanel({
               </div>
             ))}
           </div>
+          <div className="w-72 flex-shrink-0 border-l bg-muted/30 p-4 space-y-4">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <div key={i} className="h-6 bg-muted rounded animate-pulse" />
+            ))}
+          </div>
+        </div>
       )}
 
       {error && (
@@ -188,7 +271,9 @@ function TicketDetailPanel({
       )}
 
       {!loading && !error && ticket && (
-        <>
+        <div className="flex flex-1 min-h-0">
+          {/* Left: conversation */}
+          <div className="flex-1 flex flex-col min-w-0">
             {/* Title */}
             <div className="px-4 py-3 border-b border-border shrink-0">
               <h2 className="text-sm font-semibold truncate">
@@ -350,9 +435,265 @@ function TicketDetailPanel({
                 </div>
               </div>
             </div>
+          </div>
+
+          {/* Right: properties sidebar */}
+          <div className="w-72 flex-shrink-0 border-l bg-muted/30 overflow-y-auto">
+            <div className="p-4 space-y-5">
+              {/* Status */}
+              <div>
+                <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
+                  Status
+                </h3>
+                <Select
+                  value={ticket.status}
+                  onValueChange={handleStatusSelect}
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue>
+                      <span className="flex items-center gap-2">
+                        <span
+                          className="w-3 h-3 rounded-full flex-shrink-0"
+                          style={{
+                            backgroundColor:
+                              STATUS_COLORS[ticket.status] || STATUS_COLORS.new,
+                          }}
+                        />
+                        {STATUS_LABELS[ticket.status] || ticket.status}
+                      </span>
+                    </SelectValue>
+                  </SelectTrigger>
+                  <SelectContent>
+                    {ALL_STATUSES.map((status) => {
+                      const color = STATUS_COLORS[status];
+                      const label = STATUS_LABELS[status];
+                      return (
+                        <SelectItem
+                          key={status}
+                          value={status}
+                          disabled={status === ticket.status}
+                        >
+                          <span className="flex items-center gap-2">
+                            <span
+                              className="w-3 h-3 rounded-full flex-shrink-0"
+                              style={{ backgroundColor: color }}
+                            />
+                            {label}
+                          </span>
+                        </SelectItem>
+                      );
+                    })}
+                  </SelectContent>
+                </Select>
+
+                {/* Status preview */}
+                {previewLoading && (
+                  <div className="mt-3 p-3 rounded-lg bg-background border border-border">
+                    <p className="text-xs text-muted-foreground">
+                      Loading preview...
+                    </p>
+                  </div>
+                )}
+
+                {preview && (
+                  <div className="mt-3 p-3 rounded-lg bg-background border border-border">
+                    <p className="text-xs text-muted-foreground mb-2">
+                      Preview: changing to{" "}
+                      <span className="text-foreground font-medium">
+                        {STATUS_LABELS[pendingStatus || ""]}
+                      </span>
+                    </p>
+                    {preview.prepared_scrips.length > 0 ? (
+                      <div className="space-y-1 mb-3">
+                        {preview.prepared_scrips.map((scrip) => (
+                          <div
+                            key={scrip.scripId}
+                            className="text-xs text-foreground flex items-center gap-1.5"
+                          >
+                            <span className="w-2 h-2 rounded-full bg-chart-3 flex-shrink-0" />
+                            {scrip.scripName}
+                          </div>
+                        ))}
+                      </div>
+                    ) : (
+                      <p className="text-xs text-muted-foreground mb-3">
+                        No scrips will fire
+                      </p>
+                    )}
+                    <div className="flex items-center gap-2">
+                      <button
+                        onClick={handleApplyStatus}
+                        disabled={applyLoading}
+                        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..."
+                          : `Apply`}
+                      </button>
+                      <button
+                        onClick={handleCancelStatus}
+                        disabled={applyLoading}
+                        className="px-2.5 py-1 rounded-md text-xs font-medium text-muted-foreground hover:text-foreground transition-all duration-150"
+                      >
+                        Cancel
+                      </button>
+                    </div>
+                  </div>
+                )}
+
+                {previewError && (
+                  <div className="mt-3 p-2 rounded-lg bg-destructive/5 border border-destructive/10">
+                    <p className="text-xs text-destructive">{previewError}</p>
+                  </div>
+                )}
+
+                {scripResults && (
+                  <div className="mt-3 p-3 rounded-lg bg-background border border-border">
+                    <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-destructive"
+                          )}
+                        >
+                          <span
+                            className={cn(
+                              "w-2 h-2 rounded-full flex-shrink-0",
+                              result.success
+                                ? "bg-[#22c55e]"
+                                : "bg-destructive"
+                            )}
+                          />
+                          {result.message}
+                        </div>
+                      ))}
+                    </div>
+                    <button
+                      onClick={() => setScripResults(null)}
+                      className="mt-2 text-xs text-muted-foreground hover:text-foreground transition-all duration-150"
+                    >
+                      Dismiss
+                    </button>
+                  </div>
+                )}
+              </div>
+
+              <Separator />
+
+              {/* Assignment */}
+              <div>
+                <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
+                  Assignment
+                </h3>
+                <div className="mb-3">
+                  <label className="block text-[11px] font-medium text-muted-foreground mb-1">
+                    Assignee
+                  </label>
+                  {ticket.owner_id ? (
+                    <div className="flex items-center gap-2 px-3 py-2 rounded-lg border border-border bg-background">
+                      <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-primary-foreground">
+                          {getInitial(ticket.owner_id)}
+                        </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>
+              </div>
+
+              <Separator />
+
+              {/* Details */}
+              <div>
+                <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
+                  Details
+                </h3>
+                <div className="space-y-1.5 text-xs">
+                  <div className="flex justify-between">
+                    <span className="text-muted-foreground">Queue</span>
+                    <span className="text-foreground font-medium">
+                      {queue?.name || ticket.queue_id}
+                    </span>
+                  </div>
+                  <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>
+
+              {/* Custom fields */}
+              {ticket.custom_fields && ticket.custom_fields.length > 0 && (
+                <>
+                  <Separator />
+                  <div>
+                    <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
+                      Custom fields
+                    </h3>
+                    <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>
                 </>
               )}
             </div>
+          </div>
+        </div>
+      )}
+    </div>
   );
 }