@flamingo-stack/openframe-frontend-core 0.0.210 → 0.0.212-snapshot.20260528112413

package/dist/components/tickets/index.js

@@ -9,11 +9,11 @@ import {
   EmptyState,
   UnifiedPagination,
   init_unified_pagination
-} from "../../chunk-ATEUJQKU.js";
+} from "../../chunk-3JWIJJ44.js";
 import "../../chunk-4XLJWX2N.js";
 import {
   ContactForm
-} from "../../chunk-WJBPLMBX.js";
+} from "../../chunk-IK2X5YJU.js";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -33,24 +33,26 @@ import {
   embedAuthedFetch,
   formatRelativeTime,
   getStatusColorScheme,
+  scrollElementIntoView,
   useChatAttachments,
   useChatIdentity
-} from "../../chunk-R5RNRH62.js";
+} from "../../chunk-ZTJVRSN5.js";
 import {
   toast
-} from "../../chunk-UYQOPC57.js";
+} from "../../chunk-HICZPTRR.js";
 import "../../chunk-CIPO6DXK.js";
 import "../../chunk-EDW2NVRV.js";
 import "../../chunk-W72U7OU7.js";
-import "../../chunk-7L4DWM7P.js";
+import "../../chunk-ZG2YY5E7.js";
 import "../../chunk-MJNXIEV2.js";
+import "../../chunk-LXC6P2EO.js";
 import "../../chunk-EL5YVPD5.js";
 import {
   usePathname,
   useRouter,
   useSearchParams
 } from "../../chunk-PLJLE4A4.js";
-import "../../chunk-LXC6P2EO.js";
+import "../../chunk-CZR7ARBA.js";
 import {
   Button,
   Input,
@@ -63,7 +65,7 @@ import "../../chunk-OHPI2HRK.js";
 import "../../chunk-GGWZFCYS.js";
 
 // src/components/tickets/ticket-center.tsx
-import { useCallback as useCallback2, useState as useState4 } from "react";
+import { useCallback as useCallback3, useState as useState4 } from "react";
 import { useQueryClient as useQueryClient2 } from "@tanstack/react-query";
 init_button();
 import { RefreshCw } from "lucide-react";
@@ -212,7 +214,7 @@ function TicketOpenForm({
 }
 
 // src/components/tickets/ticket-row.tsx
-import { useEffect, useRef } from "react";
+import { useCallback, useRef } from "react";
 
 // src/components/collapsible.tsx
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
@@ -405,7 +407,7 @@ function TicketTimelinePanel({ ticket }) {
         ConversationCardRow,
         {
           author,
-          role: isCustomer ? "Reply" : "Note",
+          role: "Reply",
           avatarSrc,
           timestamp: eng.createdAt,
           body: stripAttachmentsPreamble(eng.body ?? ""),
@@ -605,14 +607,22 @@ function TicketRow({
 }) {
   const optimistic = isOptimistic(ticket);
   const rowRef = useRef(null);
-  useEffect(() => {
-    if (!expanded || optimistic) return;
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        rowRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
-      });
+  const handleClick = useCallback(() => {
+    onToggle(ticket.id);
+    scrollElementIntoView(rowRef.current, {
+      adjustTargetY: (raw) => {
+        if (!rowRef.current) return raw;
+        const expandedDrawer = document.querySelector(
+          'div[id^="ticket-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;
+      }
     });
-  }, [expanded, optimistic]);
+  }, [onToggle, ticket.id]);
   const tileData = {
     id: ticket.id,
     title: ticket.subject ?? "(untitled)",
@@ -633,7 +643,7 @@ 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-4", children: /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsx4("div", { ref: rowRef, className: "scroll-mt-24", children: /* @__PURE__ */ jsxs3(
     Collapsible,
     {
       open: expanded && !optimistic,
@@ -643,7 +653,7 @@ function TicketRow({
           ChatTicketItem,
           {
             ticket: tileData,
-            onClick: optimistic ? void 0 : onToggle,
+            onClick: optimistic ? void 0 : handleClick,
             "aria-expanded": expanded && !optimistic,
             "aria-controls": `ticket-drawer-${ticket.id}`
           }
@@ -758,7 +768,7 @@ function useTicketsList(filters) {
 }
 
 // src/components/tickets/hooks/use-ticket-actions.ts
-import { useCallback, useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback as useCallback2, 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 MIRROR_SYNC_BACKOFF_MS = [3e3, 6e3, 12e3];
@@ -769,14 +779,14 @@ function useTicketActions(options) {
   const [isSubmittingForm, setIsSubmittingForm] = useState3(false);
   const busyRowsRef = useRef2(/* @__PURE__ */ new Set());
   const [busyRows, setBusyRows] = useState3(() => /* @__PURE__ */ new Set());
-  const setRowBusy = useCallback((id, busy) => {
+  const setRowBusy = useCallback2((id, busy) => {
     if (busy) busyRowsRef.current.add(id);
     else busyRowsRef.current.delete(id);
     setBusyRows(new Set(busyRowsRef.current));
   }, []);
-  const isRowBusy = useCallback((id) => busyRows.has(id), [busyRows]);
+  const isRowBusy = useCallback2((id) => busyRows.has(id), [busyRows]);
   const watcherControllersRef = useRef2(/* @__PURE__ */ new Map());
-  useEffect2(() => {
+  useEffect(() => {
     return () => {
       for (const controller of watcherControllersRef.current.values()) {
         controller.abort();
@@ -785,12 +795,12 @@ function useTicketActions(options) {
     };
   }, []);
   const queueRef = useRef2(Promise.resolve());
-  const enqueue = useCallback((work) => {
+  const enqueue = useCallback2((work) => {
     const next = queueRef.current.then(work, work);
     queueRef.current = next.catch(() => void 0);
     return next;
   }, []);
-  const executeTicketAction = useCallback(
+  const executeTicketAction = useCallback2(
     async (toolName, args) => {
       const res = await embedAuthedFetch(TICKET_ACTION_ENDPOINT, {
         method: "POST",
@@ -806,7 +816,7 @@ function useTicketActions(options) {
     },
     []
   );
-  const watchMirrorSync = useCallback(
+  const watchMirrorSync = useCallback2(
     (placeholderId, expectedTicketId) => {
       const prior = watcherControllersRef.current.get(placeholderId);
       if (prior) prior.abort();
@@ -852,7 +862,7 @@ function useTicketActions(options) {
     },
     [queryClient, removeOptimistic, toast2]
   );
-  const surfaceError = useCallback(
+  const surfaceError = useCallback2(
     (err, action) => {
       const mapped = mapTicketActionError(err);
       if (mapped.supportSystemDown) onSupportSystemDown();
@@ -865,7 +875,7 @@ function useTicketActions(options) {
     },
     [toast2, onSupportSystemDown]
   );
-  const submitTicket = useCallback(
+  const submitTicket = useCallback2(
     async (input) => {
       if (formInFlightRef.current) return false;
       formInFlightRef.current = true;
@@ -930,7 +940,7 @@ function useTicketActions(options) {
       surfaceError
     ]
   );
-  const updateTicket = useCallback(
+  const updateTicket = useCallback2(
     async (ticket, serverArgs, successCopy, action) => {
       if (busyRowsRef.current.has(ticket.id)) return false;
       setRowBusy(ticket.id, true);
@@ -963,7 +973,7 @@ function useTicketActions(options) {
     // and cascade-recreate addNote/closeTicket/etc.
     [setRowBusy, enqueue, executeTicketAction, queryClient, toast2, surfaceError, removeTicketFromCache]
   );
-  const sendMessage = useCallback(
+  const sendMessage = useCallback2(
     (ticket, text, attachments) => {
       const trimmed = text.trim();
       const hasText = trimmed.length > 0;
@@ -981,7 +991,7 @@ function useTicketActions(options) {
     },
     [updateTicket]
   );
-  const closeTicket = useCallback(
+  const closeTicket = useCallback2(
     (ticket, resolution) => updateTicket(
       ticket,
       {
@@ -993,7 +1003,7 @@ function useTicketActions(options) {
     ),
     [updateTicket]
   );
-  const reopenTicket = useCallback(
+  const reopenTicket = useCallback2(
     (ticket) => updateTicket(ticket, { status: "OPEN" }, TOAST_COPY.reopen_success, "reopen ticket"),
     [updateTicket]
   );
@@ -1140,14 +1150,14 @@ function TicketCenterAuthed({
   const [optimisticTickets, setOptimisticTickets] = useState4([]);
   const [expandedTicketId, setExpandedTicketId] = useState4(null);
   const [supportSystemDown, setSupportSystemDown] = useState4(false);
-  const prependOptimistic = useCallback2((placeholder) => {
+  const prependOptimistic = useCallback3((placeholder) => {
     setOptimisticTickets((prev) => [placeholder, ...prev]);
   }, []);
-  const removeOptimistic = useCallback2((placeholderId) => {
+  const removeOptimistic = useCallback3((placeholderId) => {
     setOptimisticTickets((prev) => prev.filter((t) => t.id !== placeholderId));
     setExpandedTicketId((prev) => prev === placeholderId ? null : prev);
   }, []);
-  const removeTicketFromCache = useCallback2(
+  const removeTicketFromCache = useCallback3(
     (ticketId) => {
       queryClient.setQueriesData(
         { queryKey: ["tickets"] },
@@ -1164,7 +1174,7 @@ function TicketCenterAuthed({
     toast: toast2,
     onSupportSystemDown: () => setSupportSystemDown(true)
   });
-  const toggleRow = useCallback2((id) => {
+  const toggleRow = useCallback3((id) => {
     setExpandedTicketId((prev) => prev === id ? null : id);
   }, []);
   const merged = [...optimisticTickets, ...tickets];
@@ -1247,12 +1257,14 @@ function TicketListSkeleton() {
 }
 
 // src/components/tickets/help-center-list.tsx
-import { useCallback as useCallback3, useState as useState6 } from "react";
+import { useCallback as useCallback5, 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";
+var STICKY_HEADER_OFFSET_PX = 96;
 function HelpCenterCard({
   ticket,
   expanded,
@@ -1273,6 +1285,24 @@ function HelpCenterCard({
   const description = ticket.preview ?? ticket.body ?? "";
   const isExpandable = !optimistic;
   const isExpanded = expanded && isExpandable;
+  const rowRef = useRef3(null);
+  const handleClick = useCallback4(() => {
+    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(
       StatusBadge,
@@ -1296,6 +1326,8 @@ function HelpCenterCard({
   return /* @__PURE__ */ jsxs5(
     "div",
     {
+      ref: rowRef,
+      style: { scrollMarginTop: STICKY_HEADER_OFFSET_PX },
       className: `border-b border-ods-border last:border-b-0 ${optimistic ? "opacity-60" : ""}`,
       "aria-busy": optimistic || void 0,
       children: [
@@ -1303,7 +1335,7 @@ function HelpCenterCard({
           "button",
           {
             type: "button",
-            onClick: isExpandable ? () => onToggle(ticket.id) : void 0,
+            onClick: isExpandable ? handleClick : void 0,
             disabled: !isExpandable,
             "aria-expanded": isExpandable ? isExpanded : void 0,
             "aria-controls": isExpanded ? `help-center-drawer-${ticket.id}` : void 0,
@@ -1518,14 +1550,14 @@ function HelpCenterListAuthed({
   const [optimisticTickets, setOptimisticTickets] = useState6([]);
   const [expandedTicketId, setExpandedTicketId] = useState6(null);
   const [supportSystemDown, setSupportSystemDown] = useState6(false);
-  const prependOptimistic = useCallback3((placeholder) => {
+  const prependOptimistic = useCallback5((placeholder) => {
     setOptimisticTickets((prev) => [placeholder, ...prev]);
   }, []);
-  const removeOptimistic = useCallback3((placeholderId) => {
+  const removeOptimistic = useCallback5((placeholderId) => {
     setOptimisticTickets((prev) => prev.filter((t) => t.id !== placeholderId));
     setExpandedTicketId((prev) => prev === placeholderId ? null : prev);
   }, []);
-  const removeTicketFromCache = useCallback3(
+  const removeTicketFromCache = useCallback5(
     (ticketId) => {
       queryClient.setQueriesData(
         { queryKey: ["tickets"] },
@@ -1542,7 +1574,7 @@ function HelpCenterListAuthed({
     toast: toast2,
     onSupportSystemDown: () => setSupportSystemDown(true)
   });
-  const toggleRow = useCallback3((id) => {
+  const toggleRow = useCallback5((id) => {
     setExpandedTicketId((prev) => prev === id ? null : id);
   }, []);
   const merged = [...optimisticTickets, ...tickets];
@@ -1595,21 +1627,31 @@ function HelpCenterListAuthed({
         description: "Open one above to start the conversation with the support team.",
         showCTA: false
       }
-    ) : /* @__PURE__ */ jsx8("div", { className: "bg-ods-card border border-ods-border rounded-[6px] overflow-hidden w-full", children: merged.map((ticket) => /* @__PURE__ */ jsx8(
-      HelpCenterCard,
-      {
-        ticket,
-        expanded: expandedTicketId === ticket.id,
-        onToggle: toggleRow,
-        busy: isOptimistic(ticket) ? false : actions.isRowBusy(ticket.id),
-        supportSystemDown,
-        onSendMessage: actions.sendMessage,
-        onClose: actions.closeTicket,
-        onReopen: actions.reopenTicket,
-        onActionCollapsed: () => setExpandedTicketId(null)
-      },
-      ticket.id
-    )) }) }),
+    ) : (
+      // `overflow-clip` (NOT `overflow-hidden`) — both visually
+      // clip the rounded corners, but `hidden` makes the element
+      // a "scroll container" per CSSOM spec, which causes
+      // `scrollIntoView` calls inside (`<HelpCenterCard>` click
+      // handlers) to try scrolling THIS div (can't, overflow
+      // 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(
+        HelpCenterCard,
+        {
+          ticket,
+          expanded: expandedTicketId === ticket.id,
+          onToggle: toggleRow,
+          busy: isOptimistic(ticket) ? false : actions.isRowBusy(ticket.id),
+          supportSystemDown,
+          onSendMessage: actions.sendMessage,
+          onClose: actions.closeTicket,
+          onReopen: actions.reopenTicket,
+          onActionCollapsed: () => setExpandedTicketId(null)
+        },
+        ticket.id
+      )) })
+    ) }),
     !error && totalPages > 1 && /* @__PURE__ */ jsx8(UnifiedPagination, { currentPage: page, totalPages })
   ] });
   return /* @__PURE__ */ jsx8(DevSectionPage, { sectionKey: "tickets", preControls: form, children: body });