@flamingo-stack/openframe-frontend-core 0.0.216 → 0.0.217

package/dist/components/tickets/index.js

@@ -4,18 +4,16 @@ import {
   EmptyState,
   UnifiedPagination,
   init_unified_pagination
-} from "../../chunk-2V4SACHE.js";
+} from "../../chunk-L6IBKPVM.js";
 import {
-  ConversationCardRow,
-  ConversationCardRowSkeletonList,
   DevCardRowContent,
   DevCardRowSkeletonList,
   DevSectionPage
-} from "../../chunk-GVNQAGXB.js";
+} from "../../chunk-N5IKPYRL.js";
 import "../../chunk-ORJREQ2W.js";
 import {
   ContactForm
-} from "../../chunk-QTKU6ULP.js";
+} from "../../chunk-BVFRD34B.js";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -28,18 +26,22 @@ import {
   Card,
   ChatAttachmentAddButton,
   ChatAttachmentChipStrip,
+  ChatInput,
+  ChatMessageRow,
+  ChatMessageRowSkeleton,
   ChatTicketItem,
   Label,
   SquareAvatar,
   StatusBadge,
   Textarea,
+  TicketAttachmentsList,
   embedAuthedFetch,
   formatRelativeTime,
   getStatusColorScheme,
   scrollElementIntoView,
   useChatAttachments,
   useChatIdentity
-} from "../../chunk-CDLYRFDE.js";
+} from "../../chunk-ENBGG2K2.js";
 import "../../chunk-LXC6P2EO.js";
 import "../../chunk-EL5YVPD5.js";
 import {
@@ -68,7 +70,7 @@ import "../../chunk-CZR7ARBA.js";
 import "../../chunk-GGWZFCYS.js";
 
 // src/components/tickets/ticket-center.tsx
-import { useCallback as useCallback3, useState as useState4 } from "react";
+import { useCallback as useCallback4, useState as useState4 } from "react";
 import { useQueryClient as useQueryClient2 } from "@tanstack/react-query";
 init_button();
 import { RefreshCw } from "lucide-react";
@@ -82,6 +84,7 @@ function isOptimistic(t) {
   return t._optimistic === true;
 }
 var TICKET_TEXT_MAX_CHARS = 5e3;
+var TICKET_LIVE_POLL_MS = 8e3;
 var TOAST_COPY = {
   open_success: { title: "Ticket opened", description: "We received your message and will follow up shortly." },
   open_mirror_pending: { title: "Ticket opened", description: "Syncing \u2014 your ticket will appear momentarily." },
@@ -217,7 +220,7 @@ function TicketOpenForm({
 }
 
 // src/components/tickets/ticket-row.tsx
-import { useCallback, useRef } from "react";
+import { useCallback as useCallback2, useRef } from "react";
 
 // src/components/collapsible.tsx
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
@@ -226,12 +229,12 @@ var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
 
 // src/components/tickets/ticket-detail-drawer.tsx
 init_button();
-import { useState as useState2 } from "react";
+import { useStickToBottom } from "use-stick-to-bottom";
 
 // src/components/tickets/hooks/use-ticket-engagements.ts
 import { useQuery } from "@tanstack/react-query";
 var LIST_ENGAGEMENTS_ENDPOINT = "/api/chat/agent/list-engagements";
-function useTicketEngagements(externalTicketId, enabled = true) {
+function useTicketEngagements(externalTicketId, enabled = true, refetchInterval = false) {
   const identity = useChatIdentity();
   const identityKey = identity.user?.email ?? "anon";
   const queryEnabled = enabled && identity.authTier !== "anon" && !!identity.user?.email && !!externalTicketId && !externalTicketId.startsWith("temp-");
@@ -245,6 +248,11 @@ function useTicketEngagements(externalTicketId, enabled = true) {
     gcTime: 0,
     refetchOnMount: "always",
     refetchOnWindowFocus: true,
+    // Live conversation: poll while the caller opts in (drawer open). New
+    // agent replies + attachments appear within one interval without a
+    // manual refresh. `refetchIntervalInBackground` stays false (default)
+    // so polling pauses on a hidden tab.
+    refetchInterval,
     queryFn: async () => {
       const response = await embedAuthedFetch(LIST_ENGAGEMENTS_ENDPOINT, {
         method: "POST",
@@ -305,8 +313,134 @@ function TicketLinkedDeliveryCard({
   );
 }
 
-// src/components/tickets/ticket-detail-drawer.tsx
+// src/components/tickets/ticket-reply-composer.tsx
+init_button();
+import { useCallback, useState as useState2 } from "react";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function TicketReplyComposer({
+  ticket,
+  busy,
+  supportSystemDown,
+  onSendMessage,
+  onClose
+}) {
+  const [resolution, setResolution] = useState2("");
+  const [closeDialogOpen, setCloseDialogOpen] = useState2(false);
+  const attachments = useChatAttachments();
+  const ticketRef = { id: ticket.id, external_id: ticket.external_id };
+  const hasReadyFiles = attachments.readyAttachments.length > 0;
+  const handleSend = useCallback(
+    async (text) => {
+      const ref = { id: ticket.id, external_id: ticket.external_id };
+      const ok = await onSendMessage(ref, text.trim(), attachments.readyAttachments);
+      if (ok) attachments.clear();
+      return ok;
+    },
+    // Depend on the reactive projections, not the whole bag (a fresh object each
+    // render). `readyAttachments` is memo-stable; `clear` is callback-stable.
+    [
+      onSendMessage,
+      ticket.id,
+      ticket.external_id,
+      attachments.readyAttachments,
+      attachments.clear
+    ]
+  );
+  const confirmClose = async () => {
+    setCloseDialogOpen(false);
+    await onClose(ticketRef, resolution.trim() || void 0);
+    setResolution("");
+  };
+  const disabled = busy || supportSystemDown;
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx3(
+      ChatAttachmentChipStrip,
+      {
+        attachments: attachments.attachments,
+        onRemove: attachments.removeAttachment,
+        disabled,
+        size: "compact"
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      ChatInput,
+      {
+        fullWidth: true,
+        autoFocus: true,
+        placeholder: "Type a reply\u2026",
+        sending: busy || attachments.hasInflightUploads,
+        disabled: supportSystemDown,
+        allowEmptySend: hasReadyFiles,
+        maxLength: TICKET_TEXT_MAX_CHARS,
+        onSend: handleSend
+      }
+    ),
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 w-full", children: [
+      !supportSystemDown && /* @__PURE__ */ jsx3(
+        ChatAttachmentAddButton,
+        {
+          attachmentsEnabled: true,
+          attachmentsCount: attachments.attachments.length,
+          onAddFiles: attachments.addFiles,
+          disabled,
+          size: "compact"
+        }
+      ),
+      /* @__PURE__ */ jsx3("div", { className: "flex-1 min-w-0" }),
+      /* @__PURE__ */ jsx3(
+        Button,
+        {
+          type: "button",
+          variant: "transparent",
+          size: "small",
+          onClick: () => setCloseDialogOpen(true),
+          disabled,
+          className: "text-ods-text-secondary hover:text-ods-text-primary",
+          children: "Close ticket"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx3(AlertDialog, { open: closeDialogOpen, onOpenChange: setCloseDialogOpen, children: /* @__PURE__ */ jsxs2(AlertDialogContent, { className: "bg-ods-card border-ods-border", children: [
+      /* @__PURE__ */ jsxs2(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx3(AlertDialogTitle, { className: "text-ods-text-primary", children: "Close this ticket?" }),
+        /* @__PURE__ */ jsx3(AlertDialogDescription, { className: "text-ods-text-secondary", children: "Add an optional resolution note below. You can reopen the ticket later if needed." })
+      ] }),
+      /* @__PURE__ */ jsx3(
+        Textarea,
+        {
+          value: resolution,
+          onChange: (e) => setResolution(e.target.value),
+          placeholder: "Resolution (optional)",
+          rows: 3,
+          maxLength: TICKET_TEXT_MAX_CHARS,
+          className: "mt-2"
+        }
+      ),
+      /* @__PURE__ */ jsxs2(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx3(
+          AlertDialogCancel,
+          {
+            disabled: busy,
+            className: "bg-transparent border-ods-border text-ods-text-primary hover:bg-ods-border",
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          AlertDialogAction,
+          {
+            onClick: () => void confirmClose(),
+            disabled: busy,
+            className: "bg-ods-accent text-ods-text-on-accent hover:bg-ods-accent-hover",
+            children: "Close ticket"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/components/tickets/ticket-detail-drawer.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function TicketDetailDrawer({
   ticket,
   busy,
@@ -319,22 +453,22 @@ function TicketDetailDrawer({
   onClearReplyError
 }) {
   const isClosed = (ticket.status ?? "").toUpperCase() === "CLOSED";
-  return /* @__PURE__ */ jsxs2("div", { className: "bg-ods-card border-t border-ods-border px-4 py-4 flex flex-col gap-4", children: [
-    /* @__PURE__ */ jsx3(AssignedAgentRow, { assignedOwner: ticket.assignedOwner }),
-    ticket.clickup && /* @__PURE__ */ jsx3(TicketLinkedDeliveryCard, { clickup: ticket.clickup }),
-    /* @__PURE__ */ jsxs2("div", { children: [
-      /* @__PURE__ */ jsx3("p", { className: "text-xs font-medium text-ods-text-secondary mb-2 uppercase tracking-wider", children: "Conversation" }),
-      /* @__PURE__ */ jsx3(TicketTimelinePanel, { ticket })
+  return /* @__PURE__ */ jsxs3("div", { className: "bg-ods-card border-t border-ods-border px-4 py-4 flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx4(AssignedAgentRow, { assignedOwner: ticket.assignedOwner }),
+    ticket.clickup && /* @__PURE__ */ jsx4(TicketLinkedDeliveryCard, { clickup: ticket.clickup }),
+    /* @__PURE__ */ jsxs3("div", { children: [
+      /* @__PURE__ */ jsx4("p", { className: "text-xs font-medium text-ods-text-secondary mb-2 uppercase tracking-wider", children: "Conversation" }),
+      /* @__PURE__ */ jsx4(TicketTimelinePanel, { ticket })
     ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "border-t border-ods-border pt-4", children: [
-      replyError && /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsxs3("div", { className: "border-t border-ods-border pt-4", children: [
+      replyError && /* @__PURE__ */ jsx4(
         ReplyFailureBanner,
         {
           error: replyError,
           onDismiss: onClearReplyError ?? (() => void 0)
         }
       ),
-      isClosed ? /* @__PURE__ */ jsx3(
+      isClosed ? /* @__PURE__ */ jsx4(
         ReopenAction,
         {
           ticketRef: { id: ticket.id, external_id: ticket.external_id },
@@ -343,37 +477,49 @@ function TicketDetailDrawer({
           onReopen,
           onActionCollapsed
         }
-      ) : /* @__PURE__ */ jsx3(
-        OpenActions,
+      ) : /* @__PURE__ */ jsx4(
+        TicketReplyComposer,
         {
           ticket,
           busy,
           supportSystemDown,
           onSendMessage,
-          onClose,
-          onActionCollapsed
+          onClose
         }
       )
     ] })
   ] });
 }
 var TURN_SEPARATOR_RE = /[\s]{1,16}---[\s]{1,16}/g;
+var TICKET_FEED_FRAME = "bg-ods-card border border-ods-border rounded-[6px] overflow-y-auto w-full";
+var TICKET_FEED_HEIGHT = "h-[60vh] md:h-[420px]";
+var TICKET_FEED_INNER = "flex flex-col gap-4 md:gap-6 px-4 md:px-6 py-4 md:py-6";
+var TICKET_FEED_SKELETON_ROWS = 6;
 function TicketTimelinePanel({ ticket }) {
   const identity = useChatIdentity();
   const externalId = isOptimistic(ticket) ? null : ticket.external_id;
-  const { engagements, isLoading } = useTicketEngagements(externalId, !!externalId);
+  const { engagements, isLoading } = useTicketEngagements(
+    externalId,
+    !!externalId,
+    TICKET_LIVE_POLL_MS
+  );
+  const { scrollRef, contentRef } = useStickToBottom({ initial: "instant", resize: "smooth" });
   const bodyTurns = ticket.body ? ticket.body.split(TURN_SEPARATOR_RE).map((t) => t.trim()).filter(Boolean) : [];
+  const customerEngagementBodies = new Set(
+    engagements.filter((e) => e.authorRole === "customer").map((e) => (e.body ?? "").trim()).filter(Boolean)
+  );
+  const suppressBodyTurnZero = bodyTurns.length > 0 && customerEngagementBodies.has(bodyTurns[0]);
   const sessionEmailLower = identity.user?.email?.trim().toLowerCase() ?? null;
   const isViewerTheCustomer = !!sessionEmailLower && ticket.customer_emails.some((e) => e.trim().toLowerCase() === sessionEmailLower);
   const viewerName = identity.user?.name?.trim() || null;
   const ticketCustomerName = ticket.customer_name?.trim() || null;
   const customerName = (isViewerTheCustomer ? viewerName : null) || ticketCustomerName || viewerName || identity.user?.email || "You";
   const customerAvatar = isViewerTheCustomer ? identity.user?.avatarUrl ?? void 0 : void 0;
+  if (isLoading) {
+    return /* @__PURE__ */ jsx4("div", { className: `${TICKET_FEED_FRAME} ${TICKET_FEED_HEIGHT}`, children: /* @__PURE__ */ jsx4("div", { className: TICKET_FEED_INNER, children: Array.from({ length: TICKET_FEED_SKELETON_ROWS }, (_, i) => /* @__PURE__ */ jsx4(ChatMessageRowSkeleton, {}, i)) }) });
+  }
   if (bodyTurns.length === 0 && engagements.length === 0) {
-    if (isLoading) {
-      return /* @__PURE__ */ jsx3(ConversationCardRowSkeletonList, { rows: 2 });
-    }
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx4(
       EmptyState,
       {
         type: "generic",
@@ -383,19 +529,17 @@ function TicketTimelinePanel({ ticket }) {
       }
     );
   }
-  return /* @__PURE__ */ jsxs2("div", { className: "bg-ods-card border border-ods-border rounded-[6px] overflow-hidden w-full", children: [
+  return /* @__PURE__ */ jsx4("div", { ref: scrollRef, className: `${TICKET_FEED_FRAME} ${TICKET_FEED_HEIGHT}`, children: /* @__PURE__ */ jsxs3("div", { ref: contentRef, className: TICKET_FEED_INNER, children: [
     bodyTurns.map((turn, i) => {
+      if (i === 0 && suppressBodyTurnZero) return null;
       const isResolution = turn.startsWith("[Resolution]");
-      const role = i === 0 ? "Original message" : isResolution ? "Resolution" : `Update ${i}`;
       const text = isResolution ? turn.replace(/^\[Resolution\]\s*/, "") : turn;
-      return /* @__PURE__ */ jsx3(
-        ConversationCardRow,
+      return /* @__PURE__ */ jsx4(
+        ChatMessageRow,
         {
-          author: customerName,
-          role,
-          avatarSrc: customerAvatar,
-          body: text,
-          variant: "current-user"
+          displayName: customerName,
+          avatarUrl: customerAvatar,
+          body: text
         },
         `body-${i}-${turn.slice(0, 24)}`
       );
@@ -418,32 +562,30 @@ function TicketTimelinePanel({ ticket }) {
         author = "Support team";
         avatarSrc = void 0;
       }
-      return /* @__PURE__ */ jsx3(
-        ConversationCardRow,
+      const engAttachments = mapEngagementAttachments(eng.attachments);
+      return /* @__PURE__ */ jsx4(
+        ChatMessageRow,
         {
-          author,
-          role: "Reply",
-          avatarSrc,
-          timestamp: eng.createdAt,
+          displayName: author,
+          avatarUrl: avatarSrc,
+          timeLabel: eng.createdAt ? formatRelativeTime(eng.createdAt) : null,
           body: stripAttachmentsPreamble(eng.body ?? ""),
-          attachments: mapEngagementAttachments(eng.attachments),
-          variant: isCustomer ? "current-user" : "support"
+          footer: engAttachments.length > 0 ? /* @__PURE__ */ jsx4("div", { className: "mt-2", children: /* @__PURE__ */ jsx4(TicketAttachmentsList, { attachments: engAttachments, size: "compact" }) }) : null
         },
         eng.id
       );
-    }),
-    isLoading && // Trailing single-row skeleton when the panel already has
-    // content rendered — drawer is showing the customer's body
-    // turns + cached engagements while a background refetch is
-    // in flight. Single row keeps the placeholder modest.
-    /* @__PURE__ */ jsx3(ConversationCardRowSkeletonList, { rows: 1 })
-  ] });
+    })
+  ] }) });
 }
 function mapEngagementAttachments(files) {
   return files.map((f) => ({
     id: f.id,
     fileName: f.name ?? `file-${f.id}`,
     fileSize: f.size ? formatBytes(f.size) : "",
+    // Show an inline thumbnail for image attachments (the signed `url` is a
+    // viewable URL). Non-images fall back to the file-type icon. SquareAvatar
+    // degrades to initials on a broken/expired image URL.
+    thumbnailSrc: f.url && (f.mime?.startsWith("image/") ?? false) ? f.url : void 0,
     onDownload: f.url ? () => window.open(f.url, "_blank", "noopener,noreferrer") : void 0
   }));
 }
@@ -466,10 +608,12 @@ function ReopenAction({
   const handleReopen = async () => {
     void await onReopen(ticketRef);
   };
-  return /* @__PURE__ */ jsx3("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx4(
     Button,
     {
       type: "button",
+      variant: "outline",
+      size: "small",
       onClick: () => void handleReopen(),
       disabled: busy || supportSystemDown,
       loading: busy,
@@ -477,146 +621,19 @@ function ReopenAction({
     }
   ) });
 }
-function OpenActions({
-  ticket,
-  busy,
-  supportSystemDown,
-  onSendMessage,
-  onClose,
-  onActionCollapsed
-}) {
-  const [messageText, setMessageText] = useState2("");
-  const [resolution, setResolution] = useState2("");
-  const [closeDialogOpen, setCloseDialogOpen] = useState2(false);
-  const attachments = useChatAttachments();
-  const disabled = busy || supportSystemDown;
-  const ticketRef = { id: ticket.id, external_id: ticket.external_id };
-  const hasText = messageText.trim().length > 0;
-  const hasReadyFiles = attachments.readyAttachments.length > 0;
-  const canSend = !disabled && (hasText || hasReadyFiles) && !attachments.hasInflightUploads;
-  const sendMessage = async () => {
-    if (!canSend) return;
-    const ok = await onSendMessage(ticketRef, messageText.trim(), attachments.readyAttachments);
-    if (ok) {
-      setMessageText("");
-      attachments.clear();
-    }
-  };
-  const confirmClose = async () => {
-    setCloseDialogOpen(false);
-    await onClose(ticketRef, resolution.trim() || void 0);
-    setResolution("");
-  };
-  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx3(
-        Textarea,
-        {
-          value: messageText,
-          onChange: (e) => setMessageText(e.target.value),
-          placeholder: "Type a reply\u2026 (attach files if needed)",
-          disabled,
-          rows: 3,
-          maxLength: TICKET_TEXT_MAX_CHARS
-        }
-      ),
-      /* @__PURE__ */ jsx3(
-        ChatAttachmentChipStrip,
-        {
-          attachments: attachments.attachments,
-          onRemove: attachments.removeAttachment,
-          disabled
-        }
-      ),
-      /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-center gap-2 flex-wrap", children: [
-        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx3(
-            ChatAttachmentAddButton,
-            {
-              attachmentsEnabled: !supportSystemDown,
-              attachmentsCount: attachments.attachments.length,
-              onAddFiles: attachments.addFiles,
-              disabled
-            }
-          ),
-          /* @__PURE__ */ jsx3("span", { className: "text-xs text-ods-text-secondary", children: "Attach files" })
-        ] }),
-        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx3(
-            Button,
-            {
-              type: "button",
-              variant: "transparent",
-              onClick: () => setCloseDialogOpen(true),
-              disabled,
-              className: "bg-ods-error hover:bg-ods-error-hover text-white border-transparent",
-              children: "Close ticket"
-            }
-          ),
-          /* @__PURE__ */ jsx3(
-            Button,
-            {
-              type: "button",
-              onClick: () => void sendMessage(),
-              disabled: !canSend,
-              loading: busy,
-              children: "Send reply"
-            }
-          )
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx3(AlertDialog, { open: closeDialogOpen, onOpenChange: setCloseDialogOpen, children: /* @__PURE__ */ jsxs2(AlertDialogContent, { className: "bg-ods-card border-ods-border", children: [
-      /* @__PURE__ */ jsxs2(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsx3(AlertDialogTitle, { className: "text-ods-text-primary font-['DM_Sans'] text-[20px] font-semibold", children: "Close this ticket?" }),
-        /* @__PURE__ */ jsx3(AlertDialogDescription, { className: "text-ods-text-secondary font-['DM_Sans'] text-[14px]", children: "Add an optional resolution note below. You can reopen the ticket later if needed." })
-      ] }),
-      /* @__PURE__ */ jsx3(
-        Textarea,
-        {
-          value: resolution,
-          onChange: (e) => setResolution(e.target.value),
-          placeholder: "Resolution (optional)",
-          rows: 3,
-          maxLength: TICKET_TEXT_MAX_CHARS,
-          className: "mt-2"
-        }
-      ),
-      /* @__PURE__ */ jsxs2(AlertDialogFooter, { children: [
-        /* @__PURE__ */ jsx3(
-          AlertDialogCancel,
-          {
-            disabled: busy,
-            className: "bg-transparent border-ods-border text-ods-text-primary hover:bg-ods-border",
-            children: "Cancel"
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          AlertDialogAction,
-          {
-            onClick: () => void confirmClose(),
-            disabled: busy,
-            className: "bg-ods-error hover:bg-ods-error-hover text-white",
-            children: "Close ticket"
-          }
-        )
-      ] })
-    ] }) })
-  ] });
-}
 function ReplyFailureBanner({
   error,
   onDismiss
 }) {
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       role: "status",
       "aria-live": "polite",
       className: "mb-3 flex items-start gap-3 rounded-md border border-ods-attention-red-error bg-ods-attention-red-error-secondary px-3 py-2 text-sm text-ods-attention-red-error",
       children: [
-        /* @__PURE__ */ jsx3("span", { className: "font-medium leading-snug", children: error.message }),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4("span", { className: "font-medium leading-snug", children: error.message }),
+        /* @__PURE__ */ jsx4(
           Button,
           {
             type: "button",
@@ -637,10 +654,10 @@ function AssignedAgentRow({
   const trimmedName = assignedOwner?.name?.trim() || null;
   const emailFallback = assignedOwner?.email?.trim() || null;
   const displayLabel = trimmedName ?? (emailFallback ? emailFallback.split("@")[0] : null);
-  return /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-xs", children: [
-    /* @__PURE__ */ jsx3("span", { className: "text-ods-text-secondary uppercase tracking-wider font-medium", children: "Assigned to" }),
-    displayLabel ? /* @__PURE__ */ jsxs2("span", { className: "flex items-center gap-1.5 text-ods-text-primary font-medium", children: [
-      /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 text-xs", children: [
+    /* @__PURE__ */ jsx4("span", { className: "text-ods-text-secondary uppercase tracking-wider font-medium", children: "Assigned to" }),
+    displayLabel ? /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-1.5 text-ods-text-primary font-medium", children: [
+      /* @__PURE__ */ jsx4(
         SquareAvatar,
         {
           size: "sm",
@@ -651,12 +668,12 @@ function AssignedAgentRow({
         }
       ),
       displayLabel
-    ] }) : /* @__PURE__ */ jsx3("span", { className: "text-ods-text-secondary italic", children: "Unassigned" })
+    ] }) : /* @__PURE__ */ jsx4("span", { className: "text-ods-text-secondary italic", children: "Unassigned" })
   ] });
 }
 
 // src/components/tickets/ticket-row.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function TicketRow({
   ticket,
   expanded,
@@ -670,7 +687,7 @@ function TicketRow({
 }) {
   const optimistic = isOptimistic(ticket);
   const rowRef = useRef(null);
-  const handleClick = useCallback(() => {
+  const handleClick = useCallback2(() => {
     onToggle(ticket.id);
     scrollElementIntoView(rowRef.current, {
       adjustTargetY: (raw) => {
@@ -706,13 +723,13 @@ function TicketRow({
     // when the task exists but its status hasn't synced yet.
     linkedTaskLabel: ticket.clickup ? ticket.clickup.status ? ticket.clickup.status.replace(/\b\w/g, (c) => c.toUpperCase()) : "Linked work" : void 0
   };
-  return /* @__PURE__ */ jsx4("div", { ref: rowRef, className: "scroll-mt-24", children: /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsx5("div", { ref: rowRef, className: "scroll-mt-24", children: /* @__PURE__ */ jsxs4(
     Collapsible,
     {
       open: expanded && !optimistic,
       className: "border-b border-ods-border last:border-b-0",
       children: [
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           ChatTicketItem,
           {
             ticket: tileData,
@@ -721,12 +738,12 @@ function TicketRow({
             "aria-controls": `ticket-drawer-${ticket.id}`
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           CollapsibleContent2,
           {
             id: `ticket-drawer-${ticket.id}`,
             className: "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
-            children: /* @__PURE__ */ jsx4(
+            children: /* @__PURE__ */ jsx5(
               TicketDetailDrawer,
               {
                 ticket,
@@ -758,6 +775,7 @@ function useTicketsList(filters) {
   const pageSize = Math.max(1, Math.min(100, Math.floor(filters.pageSize ?? DEFAULT_PAGE_SIZE) || DEFAULT_PAGE_SIZE));
   const enabled = !!customerEmail;
   const identityKey = customerEmail || "anon";
+  const refetchInterval = filters.refetchInterval ?? false;
   const query = useQuery2({
     queryKey: ["tickets", "self", identityKey, search, statusFilter, page, pageSize],
     enabled,
@@ -770,6 +788,10 @@ function useTicketsList(filters) {
     gcTime: 0,
     refetchOnMount: "always",
     refetchOnWindowFocus: true,
+    // Live status: poll while the caller opts in (drawer open). Defaults to
+    // false. `refetchIntervalInBackground` stays false (the default) so polling
+    // pauses on a hidden tab — no wasted requests when the user tabs away.
+    refetchInterval,
     queryFn: async () => {
       const body = {
         query: search,
@@ -831,7 +853,7 @@ function useTicketsList(filters) {
 }
 
 // src/components/tickets/hooks/use-ticket-actions.ts
-import { useCallback as useCallback2, useEffect, useMemo, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback as useCallback3, useEffect, useMemo, useRef as useRef2, useState as useState3 } from "react";
 import { useQueryClient } from "@tanstack/react-query";
 var TICKET_ACTION_ENDPOINT = "/api/chat/agent/ticket-action";
 var REPLY_BANNER_CODES = /* @__PURE__ */ new Set([
@@ -848,14 +870,14 @@ function useTicketActions(options) {
   const [isSubmittingForm, setIsSubmittingForm] = useState3(false);
   const busyRowsRef = useRef2(/* @__PURE__ */ new Set());
   const [busyRows, setBusyRows] = useState3(() => /* @__PURE__ */ new Set());
-  const setRowBusy = useCallback2((id, busy) => {
+  const setRowBusy = useCallback3((id, busy) => {
     if (busy) busyRowsRef.current.add(id);
     else busyRowsRef.current.delete(id);
     setBusyRows(new Set(busyRowsRef.current));
   }, []);
-  const isRowBusy = useCallback2((id) => busyRows.has(id), [busyRows]);
+  const isRowBusy = useCallback3((id) => busyRows.has(id), [busyRows]);
   const [replyErrorByTicket, setReplyErrorByTicket] = useState3(() => /* @__PURE__ */ new Map());
-  const setReplyError = useCallback2(
+  const setReplyError = useCallback3(
     (externalId, mapped) => {
       setReplyErrorByTicket((prev) => {
         const next = new Map(prev);
@@ -866,11 +888,11 @@ function useTicketActions(options) {
     },
     []
   );
-  const replyErrorFor = useCallback2(
+  const replyErrorFor = useCallback3(
     (externalId) => replyErrorByTicket.get(externalId) ?? null,
     [replyErrorByTicket]
   );
-  const clearReplyError = useCallback2(
+  const clearReplyError = useCallback3(
     (externalId) => setReplyError(externalId, null),
     [setReplyError]
   );
@@ -884,12 +906,12 @@ function useTicketActions(options) {
     };
   }, []);
   const queueRef = useRef2(Promise.resolve());
-  const enqueue = useCallback2((work) => {
+  const enqueue = useCallback3((work) => {
     const next = queueRef.current.then(work, work);
     queueRef.current = next.catch(() => void 0);
     return next;
   }, []);
-  const executeTicketAction = useCallback2(
+  const executeTicketAction = useCallback3(
     async (toolName, args) => {
       const res = await embedAuthedFetch(TICKET_ACTION_ENDPOINT, {
         method: "POST",
@@ -905,7 +927,7 @@ function useTicketActions(options) {
     },
     []
   );
-  const watchMirrorSync = useCallback2(
+  const watchMirrorSync = useCallback3(
     (placeholderId, expectedTicketId) => {
       const prior = watcherControllersRef.current.get(placeholderId);
       if (prior) prior.abort();
@@ -952,7 +974,7 @@ function useTicketActions(options) {
     [queryClient, removeOptimistic, toast2]
   );
   const lastUpdateErrorRef = useRef2(null);
-  const surfaceError = useCallback2(
+  const surfaceError = useCallback3(
     (err, action) => {
       const mapped = mapTicketActionError(err);
       lastUpdateErrorRef.current = mapped;
@@ -966,7 +988,7 @@ function useTicketActions(options) {
     },
     [toast2, onSupportSystemDown]
   );
-  const submitTicket = useCallback2(
+  const submitTicket = useCallback3(
     async (input) => {
       if (formInFlightRef.current) return false;
       formInFlightRef.current = true;
@@ -1035,7 +1057,7 @@ function useTicketActions(options) {
       surfaceError
     ]
   );
-  const updateTicket = useCallback2(
+  const updateTicket = useCallback3(
     async (ticket, serverArgs, successCopy, action) => {
       if (busyRowsRef.current.has(ticket.id)) return false;
       setRowBusy(ticket.id, true);
@@ -1081,7 +1103,7 @@ function useTicketActions(options) {
     // and cascade-recreate addNote/closeTicket/etc.
     [setRowBusy, enqueue, executeTicketAction, queryClient, toast2, surfaceError, removeTicketFromCache]
   );
-  const sendMessage = useCallback2(
+  const sendMessage = useCallback3(
     async (ticket, text, attachments) => {
       const trimmed = text.trim();
       const hasText = trimmed.length > 0;
@@ -1110,7 +1132,7 @@ function useTicketActions(options) {
     },
     [updateTicket, clearReplyError, setReplyError]
   );
-  const closeTicket = useCallback2(
+  const closeTicket = useCallback3(
     (ticket, resolution) => updateTicket(
       ticket,
       {
@@ -1122,7 +1144,7 @@ function useTicketActions(options) {
     ),
     [updateTicket]
   );
-  const reopenTicket = useCallback2(
+  const reopenTicket = useCallback3(
     (ticket) => updateTicket(ticket, { status: "OPEN" }, TOAST_COPY.reopen_success, "reopen ticket"),
     [updateTicket]
   );
@@ -1274,14 +1296,14 @@ function resolveErrorCode(bodyCode, status) {
 }
 
 // src/components/tickets/ticket-center.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function TicketCenter({ toast: toast2 = toast } = {}) {
   const identity = useChatIdentity();
   if (identity.isLoading) {
-    return /* @__PURE__ */ jsx5(TicketCenterSkeleton, {});
+    return /* @__PURE__ */ jsx6(TicketCenterSkeleton, {});
   }
   if (identity.authTier === "anon" || !identity.user?.email) {
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx6(
       EmptyState,
       {
         type: "generic",
@@ -1291,7 +1313,7 @@ function TicketCenter({ toast: toast2 = toast } = {}) {
       }
     );
   }
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     TicketCenterAuthed,
     {
       toast: toast2,
@@ -1310,14 +1332,14 @@ function TicketCenterAuthed({
   const [optimisticTickets, setOptimisticTickets] = useState4([]);
   const [expandedTicketId, setExpandedTicketId] = useState4(null);
   const [supportSystemDown, setSupportSystemDown] = useState4(false);
-  const prependOptimistic = useCallback3((placeholder) => {
+  const prependOptimistic = useCallback4((placeholder) => {
     setOptimisticTickets((prev) => [placeholder, ...prev]);
   }, []);
-  const removeOptimistic = useCallback3((placeholderId) => {
+  const removeOptimistic = useCallback4((placeholderId) => {
     setOptimisticTickets((prev) => prev.filter((t) => t.id !== placeholderId));
     setExpandedTicketId((prev) => prev === placeholderId ? null : prev);
   }, []);
-  const removeTicketFromCache = useCallback3(
+  const removeTicketFromCache = useCallback4(
     (ticketId) => {
       queryClient.setQueriesData(
         { queryKey: ["tickets"] },
@@ -1334,12 +1356,12 @@ function TicketCenterAuthed({
     toast: toast2,
     onSupportSystemDown: () => setSupportSystemDown(true)
   });
-  const toggleRow = useCallback3((id) => {
+  const toggleRow = useCallback4((id) => {
     setExpandedTicketId((prev) => prev === id ? null : id);
   }, []);
   const merged = [...optimisticTickets, ...tickets];
-  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-6", children: [
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ jsx6(
       TicketOpenForm,
       {
         onSubmit: (input) => actions.submitTicket(input),
@@ -1347,15 +1369,15 @@ function TicketCenterAuthed({
         supportSystemDown
       }
     ),
-    /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between gap-3", children: [
-        /* @__PURE__ */ jsx5("p", { className: "text-xs font-medium text-ods-text-secondary uppercase tracking-wider", children: "Your Current Tickets" }),
-        /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-3 text-xs text-ods-text-secondary", children: [
-          lastUpdatedAt && /* @__PURE__ */ jsxs4("span", { children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsx6("p", { className: "text-xs font-medium text-ods-text-secondary uppercase tracking-wider", children: "Your Current Tickets" }),
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3 text-xs text-ods-text-secondary", children: [
+          lastUpdatedAt && /* @__PURE__ */ jsxs5("span", { children: [
             "Updated ",
             formatRelativeTime(new Date(lastUpdatedAt))
           ] }),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             Button,
             {
               type: "button",
@@ -1364,12 +1386,12 @@ function TicketCenterAuthed({
               onClick: refetch,
               disabled: isFetching,
               "aria-label": "Refresh ticket list",
-              leftIcon: /* @__PURE__ */ jsx5(RefreshCw, { className: "h-4 w-4" })
+              leftIcon: /* @__PURE__ */ jsx6(RefreshCw, { className: "h-4 w-4" })
             }
           )
         ] })
       ] }),
-      isLoading ? /* @__PURE__ */ jsx5(TicketListSkeleton, {}) : merged.length === 0 ? /* @__PURE__ */ jsx5(Card, { className: "p-6", children: /* @__PURE__ */ jsx5(
+      isLoading ? /* @__PURE__ */ jsx6(TicketListSkeleton, {}) : merged.length === 0 ? /* @__PURE__ */ jsx6(Card, { className: "p-6", children: /* @__PURE__ */ jsx6(
         EmptyState,
         {
           type: "generic",
@@ -1377,7 +1399,7 @@ function TicketCenterAuthed({
           description: "Open one above to start the conversation.",
           showCTA: false
         }
-      ) }) : /* @__PURE__ */ jsx5(Card, { className: "overflow-hidden", children: merged.map((ticket) => /* @__PURE__ */ jsx5(
+      ) }) : /* @__PURE__ */ jsx6(Card, { className: "overflow-hidden", children: merged.map((ticket) => /* @__PURE__ */ jsx6(
         TicketRow,
         {
           ticket,
@@ -1396,34 +1418,34 @@ function TicketCenterAuthed({
   ] });
 }
 function TicketCenterSkeleton() {
-  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-6", children: [
-    /* @__PURE__ */ jsxs4(Card, { className: "p-6", children: [
-      /* @__PURE__ */ jsx5(Skeleton, { className: "h-7 w-48 mb-4" }),
-      /* @__PURE__ */ jsx5(Skeleton, { className: "h-10 w-full mb-3" }),
-      /* @__PURE__ */ jsx5(Skeleton, { className: "h-24 w-full" })
+  return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ jsxs5(Card, { className: "p-6", children: [
+      /* @__PURE__ */ jsx6(Skeleton, { className: "h-7 w-48 mb-4" }),
+      /* @__PURE__ */ jsx6(Skeleton, { className: "h-10 w-full mb-3" }),
+      /* @__PURE__ */ jsx6(Skeleton, { className: "h-24 w-full" })
     ] }),
-    /* @__PURE__ */ jsx5(TicketListSkeleton, {})
+    /* @__PURE__ */ jsx6(TicketListSkeleton, {})
   ] });
 }
 function TicketListSkeleton() {
-  return /* @__PURE__ */ jsx5(Card, { className: "overflow-hidden", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxs4("div", { className: "h-20 px-4 flex items-center gap-4 border-b border-ods-border last:border-b-0", children: [
-    /* @__PURE__ */ jsxs4("div", { className: "flex-1 flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx5(Skeleton, { className: "h-4 w-2/3" }),
-      /* @__PURE__ */ jsx5(Skeleton, { className: "h-3 w-full" })
+  return /* @__PURE__ */ jsx6(Card, { className: "overflow-hidden", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxs5("div", { className: "h-20 px-4 flex items-center gap-4 border-b border-ods-border last:border-b-0", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex-1 flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx6(Skeleton, { className: "h-4 w-2/3" }),
+      /* @__PURE__ */ jsx6(Skeleton, { className: "h-3 w-full" })
     ] }),
-    /* @__PURE__ */ jsx5(Skeleton, { className: "h-8 w-20" }),
-    /* @__PURE__ */ jsx5(Skeleton, { className: "h-8 w-16" })
+    /* @__PURE__ */ jsx6(Skeleton, { className: "h-8 w-20" }),
+    /* @__PURE__ */ jsx6(Skeleton, { className: "h-8 w-16" })
   ] }, i)) });
 }
 
 // src/components/tickets/help-center-list.tsx
-import { useCallback as useCallback5, useState as useState6 } from "react";
+import { useCallback as useCallback6, useState as useState6 } from "react";
 import { useQueryClient as useQueryClient3 } from "@tanstack/react-query";
 init_unified_pagination();
 
 // src/components/tickets/help-center-card.tsx
-import { useCallback as useCallback4, useRef as useRef3 } from "react";
-import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useCallback as useCallback5, useEffect as useEffect2, useRef as useRef3 } from "react";
+import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var STICKY_HEADER_OFFSET_PX = 96;
 function HelpCenterCard({
   ticket,
@@ -1448,25 +1470,20 @@ function HelpCenterCard({
   const isExpandable = !optimistic;
   const isExpanded = expanded && isExpandable;
   const rowRef = useRef3(null);
-  const handleClick = useCallback4(() => {
+  const handleClick = useCallback5(() => {
     onToggle(ticket.id);
-    scrollElementIntoView(rowRef.current, {
-      headerOffset: STICKY_HEADER_OFFSET_PX,
-      adjustTargetY: (raw) => {
-        if (!rowRef.current) return raw;
-        const expandedDrawer = document.querySelector(
-          'div[id^="help-center-drawer-"]'
-        );
-        if (!(expandedDrawer instanceof HTMLElement)) return raw;
-        const drawerRect = expandedDrawer.getBoundingClientRect();
-        const myRect = rowRef.current.getBoundingClientRect();
-        if (drawerRect.bottom > myRect.top) return raw;
-        return raw - drawerRect.height;
-      }
-    });
   }, [onToggle, ticket.id]);
-  const rightBadges = /* @__PURE__ */ jsxs5(Fragment, { children: [
-    /* @__PURE__ */ jsx6(
+  useEffect2(() => {
+    if (!isExpanded) return;
+    const raf = requestAnimationFrame(() => {
+      scrollElementIntoView(rowRef.current, {
+        headerOffset: STICKY_HEADER_OFFSET_PX
+      });
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [isExpanded]);
+  const rightBadges = /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx7(
       StatusBadge,
       {
         text: rawStatus,
@@ -1475,7 +1492,7 @@ function HelpCenterCard({
         className: "border border-ods-border"
       }
     ),
-    priority && /* @__PURE__ */ jsx6(
+    priority && /* @__PURE__ */ jsx7(
       StatusBadge,
       {
         text: priority,
@@ -1485,7 +1502,7 @@ function HelpCenterCard({
       }
     )
   ] });
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       ref: rowRef,
@@ -1493,7 +1510,7 @@ function HelpCenterCard({
       className: `border-b border-ods-border last:border-b-0 ${optimistic ? "opacity-60" : ""}`,
       "aria-busy": optimistic || void 0,
       children: [
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -1502,7 +1519,7 @@ function HelpCenterCard({
             "aria-expanded": isExpandable ? isExpanded : void 0,
             "aria-controls": isExpanded ? `help-center-drawer-${ticket.id}` : void 0,
             className: "w-full text-left p-[12px] md:p-[16px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent focus-visible:ring-inset disabled:cursor-default",
-            children: /* @__PURE__ */ jsx6(
+            children: /* @__PURE__ */ jsx7(
               DevCardRowContent,
               {
                 title,
@@ -1514,7 +1531,7 @@ function HelpCenterCard({
             )
           }
         ),
-        isExpanded && /* @__PURE__ */ jsx6("div", { id: `help-center-drawer-${ticket.id}`, children: /* @__PURE__ */ jsx6(
+        isExpanded && /* @__PURE__ */ jsx7("div", { id: `help-center-drawer-${ticket.id}`, children: /* @__PURE__ */ jsx7(
           TicketDetailDrawer,
           {
             ticket,
@@ -1540,31 +1557,31 @@ function mapPriorityScheme(priority) {
 
 // src/components/tickets/help-center-create-form.tsx
 import { useState as useState5 } from "react";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var SUBJECT_MAX_CHARS = 200;
 function HelpCenterCreateFormSkeleton() {
-  return /* @__PURE__ */ jsxs6("div", { className: "h-full flex flex-col border border-ods-border rounded-2xl md:rounded-3xl p-6 md:p-8 lg:p-10", children: [
-    /* @__PURE__ */ jsx7("div", { className: "mb-6 md:mb-8", children: /* @__PURE__ */ jsx7("div", { className: "h-10 w-72 bg-ods-border rounded animate-pulse mb-3 md:mb-4" }) }),
-    /* @__PURE__ */ jsxs6("div", { className: "flex flex-col flex-grow space-y-4 md:space-y-6", children: [
-      /* @__PURE__ */ jsx7("input", { type: "hidden", "aria-hidden": true }),
-      /* @__PURE__ */ jsx7("input", { type: "hidden", "aria-hidden": true }),
-      /* @__PURE__ */ jsx7("input", { type: "hidden", "aria-hidden": true }),
-      /* @__PURE__ */ jsx7("input", { type: "hidden", "aria-hidden": true }),
-      /* @__PURE__ */ jsxs6("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsx7("div", { className: "h-[27px] w-20 bg-ods-border rounded animate-pulse mb-1" }),
-        /* @__PURE__ */ jsx7("div", { className: "h-12 w-full bg-ods-border rounded animate-pulse" })
+  return /* @__PURE__ */ jsxs7("div", { className: "h-full flex flex-col border border-ods-border rounded-2xl md:rounded-3xl p-6 md:p-8 lg:p-10", children: [
+    /* @__PURE__ */ jsx8("div", { className: "mb-6 md:mb-8", children: /* @__PURE__ */ jsx8("div", { className: "h-10 w-72 bg-ods-border rounded animate-pulse mb-3 md:mb-4" }) }),
+    /* @__PURE__ */ jsxs7("div", { className: "flex flex-col flex-grow space-y-4 md:space-y-6", children: [
+      /* @__PURE__ */ jsx8("input", { type: "hidden", "aria-hidden": true }),
+      /* @__PURE__ */ jsx8("input", { type: "hidden", "aria-hidden": true }),
+      /* @__PURE__ */ jsx8("input", { type: "hidden", "aria-hidden": true }),
+      /* @__PURE__ */ jsx8("input", { type: "hidden", "aria-hidden": true }),
+      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx8("div", { className: "h-[27px] w-20 bg-ods-border rounded animate-pulse mb-1" }),
+        /* @__PURE__ */ jsx8("div", { className: "h-12 w-full bg-ods-border rounded animate-pulse" })
       ] }),
-      /* @__PURE__ */ jsxs6("div", { className: "flex flex-col flex-grow", children: [
-        /* @__PURE__ */ jsx7("div", { className: "h-[27px] w-32 bg-ods-border rounded animate-pulse mb-1" }),
-        /* @__PURE__ */ jsx7("div", { className: "h-24 w-full bg-ods-border rounded animate-pulse flex-grow" })
+      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col flex-grow", children: [
+        /* @__PURE__ */ jsx8("div", { className: "h-[27px] w-32 bg-ods-border rounded animate-pulse mb-1" }),
+        /* @__PURE__ */ jsx8("div", { className: "h-24 w-full bg-ods-border rounded animate-pulse flex-grow" })
       ] }),
-      /* @__PURE__ */ jsx7("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx7("div", { className: "h-7 w-7 bg-ods-border rounded animate-pulse shrink-0" }),
-        /* @__PURE__ */ jsx7("div", { className: "h-4 w-40 bg-ods-border rounded animate-pulse" })
+      /* @__PURE__ */ jsx8("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx8("div", { className: "h-7 w-7 bg-ods-border rounded animate-pulse shrink-0" }),
+        /* @__PURE__ */ jsx8("div", { className: "h-4 w-40 bg-ods-border rounded animate-pulse" })
       ] }) }),
-      /* @__PURE__ */ jsxs6("div", { className: "flex flex-col md:flex-row gap-4 md:gap-6 items-center justify-end w-full pt-2 mt-auto", children: [
-        /* @__PURE__ */ jsx7("div", { className: "h-4 w-72 bg-ods-border rounded animate-pulse" }),
-        /* @__PURE__ */ jsx7("div", { className: "h-12 w-32 bg-ods-border rounded animate-pulse" })
+      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col md:flex-row gap-4 md:gap-6 items-center justify-end w-full pt-2 mt-auto", children: [
+        /* @__PURE__ */ jsx8("div", { className: "h-4 w-72 bg-ods-border rounded animate-pulse" }),
+        /* @__PURE__ */ jsx8("div", { className: "h-12 w-32 bg-ods-border rounded animate-pulse" })
       ] })
     ] })
   ] });
@@ -1577,12 +1594,12 @@ function HelpCenterCreateForm({
 }) {
   const [subject, setSubject] = useState5("");
   const [subjectError, setSubjectError] = useState5(null);
-  const subjectField = /* @__PURE__ */ jsxs6("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsxs6(Label, { htmlFor: "help-center-subject", children: [
+  const subjectField = /* @__PURE__ */ jsxs7("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxs7(Label, { htmlFor: "help-center-subject", children: [
       "Subject",
-      /* @__PURE__ */ jsx7("span", { className: "text-ods-accent", children: "*" })
+      /* @__PURE__ */ jsx8("span", { className: "text-ods-accent", children: "*" })
     ] }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       Input,
       {
         id: "help-center-subject",
@@ -1600,7 +1617,7 @@ function HelpCenterCreateForm({
         className: "bg-ods-card border-ods-border text-ods-text-primary placeholder-ods-text-secondary px-3 h-12"
       }
     ),
-    subjectError && /* @__PURE__ */ jsx7(
+    subjectError && /* @__PURE__ */ jsx8(
       "span",
       {
         id: "help-center-subject-error",
@@ -1609,7 +1626,7 @@ function HelpCenterCreateForm({
       }
     )
   ] });
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     ContactForm,
     {
       title: "Open a new ticket",
@@ -1646,7 +1663,7 @@ function HelpCenterCreateForm({
 }
 
 // src/components/tickets/help-center-list.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function HelpCenterList({ toast: toast2 = toast } = {}) {
   const identity = useChatIdentity();
   const searchParams = useSearchParams();
@@ -1654,13 +1671,14 @@ function HelpCenterList({ toast: toast2 = toast } = {}) {
   const pathname = usePathname();
   const search = searchParams.get("search") || "";
   const status = searchParams.get("status") || "all";
+  const ticketParam = searchParams.get("ticket") || "";
   const rawPage = Number(searchParams.get("page"));
   const page = Number.isFinite(rawPage) && rawPage > 0 ? Math.floor(rawPage) : 1;
   if (identity.isLoading) {
-    return /* @__PURE__ */ jsx8(DevSectionPage, { sectionKey: "tickets", preControls: /* @__PURE__ */ jsx8(HelpCenterCreateFormSkeleton, {}), children: /* @__PURE__ */ jsx8(DevCardRowSkeletonList, {}) });
+    return /* @__PURE__ */ jsx9(DevSectionPage, { sectionKey: "tickets", preControls: /* @__PURE__ */ jsx9(HelpCenterCreateFormSkeleton, {}), children: /* @__PURE__ */ jsx9(DevCardRowSkeletonList, {}) });
   }
   if (identity.authTier === "anon" || !identity.user?.email) {
-    return /* @__PURE__ */ jsx8(DevSectionPage, { sectionKey: "tickets", children: /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(DevSectionPage, { sectionKey: "tickets", children: /* @__PURE__ */ jsx9(
       EmptyState,
       {
         type: "generic",
@@ -1672,12 +1690,13 @@ function HelpCenterList({ toast: toast2 = toast } = {}) {
   }
   const sessionName = [identity.user?.firstName, identity.user?.lastName].filter(Boolean).join(" ").trim() || identity.user?.email?.split("@")[0] || "Customer";
   const sessionEmail = identity.user.email;
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     HelpCenterListAuthed,
     {
       search,
       status,
       page,
+      ticketParam,
       searchParams,
       router,
       pathname,
@@ -1691,6 +1710,7 @@ function HelpCenterListAuthed({
   search,
   status,
   page,
+  ticketParam,
   searchParams,
   router,
   pathname,
@@ -1699,6 +1719,18 @@ function HelpCenterListAuthed({
   sessionEmail
 }) {
   const queryClient = useQueryClient3();
+  const [optimisticTickets, setOptimisticTickets] = useState6([]);
+  const [supportSystemDown, setSupportSystemDown] = useState6(false);
+  const setOpenTicket = useCallback6(
+    (externalId) => {
+      const params = new URLSearchParams(searchParams.toString());
+      if (externalId) params.set("ticket", externalId);
+      else params.delete("ticket");
+      const qs = params.toString();
+      router.replace(qs ? `${pathname}?${qs}` : pathname, { scroll: false });
+    },
+    [searchParams, router, pathname]
+  );
   const { tickets, isLoading, isFetching, error, refetch, totalPages } = useTicketsList({
     // `sessionEmail` is drilled in from the parent — see the same
     // pattern + race-cause rationale documented in
@@ -1709,19 +1741,21 @@ function HelpCenterListAuthed({
     customerEmail: sessionEmail,
     search,
     status,
-    page
+    page,
+    // Live status: while a drawer is open, poll so an out-of-band HubSpot
+    // status change (e.g. agent closes the ticket) flips the badge +
+    // open/reopen affordance within one interval. Idle (no drawer) → no poll.
+    // `ticketParam` (the open ticket's external_id) is the open signal.
+    refetchInterval: ticketParam ? TICKET_LIVE_POLL_MS : false
   });
-  const [optimisticTickets, setOptimisticTickets] = useState6([]);
-  const [expandedTicketId, setExpandedTicketId] = useState6(null);
-  const [supportSystemDown, setSupportSystemDown] = useState6(false);
-  const prependOptimistic = useCallback5((placeholder) => {
+  const expandedTicketId = ticketParam && tickets.find((t) => t.external_id === ticketParam)?.id || null;
+  const prependOptimistic = useCallback6((placeholder) => {
     setOptimisticTickets((prev) => [placeholder, ...prev]);
   }, []);
-  const removeOptimistic = useCallback5((placeholderId) => {
+  const removeOptimistic = useCallback6((placeholderId) => {
     setOptimisticTickets((prev) => prev.filter((t) => t.id !== placeholderId));
-    setExpandedTicketId((prev) => prev === placeholderId ? null : prev);
   }, []);
-  const removeTicketFromCache = useCallback5(
+  const removeTicketFromCache = useCallback6(
     (ticketId) => {
       queryClient.setQueriesData(
         { queryKey: ["tickets"] },
@@ -1732,7 +1766,6 @@ function HelpCenterListAuthed({
           return { ...prev, tickets: nextTickets };
         }
       );
-      setExpandedTicketId((prev) => prev === ticketId ? null : prev);
     },
     [queryClient]
   );
@@ -1743,13 +1776,18 @@ function HelpCenterListAuthed({
     toast: toast2,
     onSupportSystemDown: () => setSupportSystemDown(true)
   });
-  const toggleRow = useCallback5((id) => {
-    setExpandedTicketId((prev) => prev === id ? null : id);
-  }, []);
+  const toggleRow = useCallback6(
+    (id) => {
+      const t = tickets.find((x) => x.id === id);
+      if (!t?.external_id) return;
+      setOpenTicket(t.external_id === ticketParam ? null : t.external_id);
+    },
+    [tickets, ticketParam, setOpenTicket]
+  );
   const merged = [...optimisticTickets, ...tickets];
   const hasActiveFilters = search !== "" || status !== "" && status !== "all";
   const hasResults = merged.length > 0;
-  const form = /* @__PURE__ */ jsx8(
+  const form = /* @__PURE__ */ jsx9(
     HelpCenterCreateForm,
     {
       actions,
@@ -1758,22 +1796,22 @@ function HelpCenterListAuthed({
       supportSystemDown
     }
   );
-  const body = /* @__PURE__ */ jsxs7("div", { className: "w-full flex flex-col gap-[40px]", children: [
-    error && /* @__PURE__ */ jsxs7("div", { className: "bg-ods-card border border-ods-border rounded-[6px] p-[40px] text-center w-full flex flex-col items-center gap-3", children: [
-      /* @__PURE__ */ jsxs7("p", { className: "text-ods-error text-base", children: [
+  const body = /* @__PURE__ */ jsxs8("div", { className: "w-full flex flex-col gap-[40px]", children: [
+    error && /* @__PURE__ */ jsxs8("div", { className: "bg-ods-card border border-ods-border rounded-[6px] p-[40px] text-center w-full flex flex-col items-center gap-3", children: [
+      /* @__PURE__ */ jsxs8("p", { className: "text-ods-error text-base", children: [
         "Couldn\u2019t load your tickets. ",
         error.message
       ] }),
-      /* @__PURE__ */ jsx8(Button, { type: "button", variant: "accent", onClick: () => refetch(), children: "Retry" })
+      /* @__PURE__ */ jsx9(Button, { type: "button", variant: "accent", onClick: () => refetch(), children: "Retry" })
     ] }),
-    !error && /* @__PURE__ */ jsx8("div", { className: "w-full", children: isLoading ? /* @__PURE__ */ jsx8(DevCardRowSkeletonList, {}) : !hasResults && isFetching ? (
+    !error && /* @__PURE__ */ jsx9("div", { className: "w-full", children: isLoading ? /* @__PURE__ */ jsx9(DevCardRowSkeletonList, {}) : !hasResults && isFetching ? (
       // Bridge state — background refetch in flight and the
       // optimistic placeholder was just removed by the mutation
       // callback. Without this branch "No tickets yet" would flash
       // for ~50ms between `removeOptimistic` and the server
       // response landing.
-      /* @__PURE__ */ jsx8(DevCardRowSkeletonList, { rows: 1 })
-    ) : !hasResults ? hasActiveFilters ? /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(DevCardRowSkeletonList, { rows: 1 })
+    ) : !hasResults ? hasActiveFilters ? /* @__PURE__ */ jsx9(
       EmptyState,
       {
         type: "search",
@@ -1788,7 +1826,7 @@ function HelpCenterListAuthed({
           router.replace(`${pathname}?${params.toString()}`, { scroll: false });
         }
       }
-    ) : /* @__PURE__ */ jsx8(
+    ) : /* @__PURE__ */ jsx9(
       EmptyState,
       {
         type: "generic",
@@ -1805,7 +1843,7 @@ function HelpCenterListAuthed({
       // hidden) instead of bubbling up to the window. `clip`
       // keeps the visual clip but NOT the scroll-container
       // status, so click-to-scroll actually moves the page.
-      /* @__PURE__ */ jsx8("div", { className: "bg-ods-card border border-ods-border rounded-[6px] overflow-clip w-full", children: merged.map((ticket) => /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9("div", { className: "bg-ods-card border border-ods-border rounded-[6px] overflow-clip w-full", children: merged.map((ticket) => /* @__PURE__ */ jsx9(
         HelpCenterCard,
         {
           ticket,
@@ -1816,16 +1854,16 @@ function HelpCenterListAuthed({
           onSendMessage: actions.sendMessage,
           onClose: actions.closeTicket,
           onReopen: actions.reopenTicket,
-          onActionCollapsed: () => setExpandedTicketId(null),
+          onActionCollapsed: () => setOpenTicket(null),
           replyError: actions.replyErrorFor(ticket.external_id),
           onClearReplyError: () => actions.clearReplyError(ticket.external_id)
         },
         ticket.id
       )) })
     ) }),
-    !error && totalPages > 1 && /* @__PURE__ */ jsx8(UnifiedPagination, { currentPage: page, totalPages })
+    !error && totalPages > 1 && /* @__PURE__ */ jsx9(UnifiedPagination, { currentPage: page, totalPages })
   ] });
-  return /* @__PURE__ */ jsx8(DevSectionPage, { sectionKey: "tickets", preControls: form, children: body });
+  return /* @__PURE__ */ jsx9(DevSectionPage, { sectionKey: "tickets", preControls: form, children: body });
 }
 export {
   HelpCenterCard,
@@ -1837,6 +1875,7 @@ export {
   TicketDetailDrawer,
   TicketLinkedDeliveryCard,
   TicketOpenForm,
+  TicketReplyComposer,
   TicketRow,
   isOptimistic,
   mapTicketActionError,