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

package/dist/components/tickets/index.js

@@ -9,11 +9,11 @@ import {
   EmptyState,
   UnifiedPagination,
   init_unified_pagination
-} from "../../chunk-QKFBZLIR.js";
+} from "../../chunk-ATEUJQKU.js";
 import "../../chunk-4XLJWX2N.js";
 import {
   ContactForm
-} from "../../chunk-5BNWGK6D.js";
+} from "../../chunk-WJBPLMBX.js";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -33,17 +33,16 @@ import {
   embedAuthedFetch,
   formatRelativeTime,
   getStatusColorScheme,
-  scrollElementIntoView,
   useChatAttachments,
   useChatIdentity
-} from "../../chunk-3E5ANY55.js";
+} from "../../chunk-R5RNRH62.js";
 import {
   toast
 } from "../../chunk-UYQOPC57.js";
 import "../../chunk-CIPO6DXK.js";
 import "../../chunk-EDW2NVRV.js";
 import "../../chunk-W72U7OU7.js";
-import "../../chunk-ZG2YY5E7.js";
+import "../../chunk-7L4DWM7P.js";
 import "../../chunk-MJNXIEV2.js";
 import "../../chunk-EL5YVPD5.js";
 import {
@@ -64,7 +63,7 @@ import "../../chunk-OHPI2HRK.js";
 import "../../chunk-GGWZFCYS.js";
 
 // src/components/tickets/ticket-center.tsx
-import { useCallback as useCallback3, useState as useState4 } from "react";
+import { useCallback as useCallback2, useState as useState4 } from "react";
 import { useQueryClient as useQueryClient2 } from "@tanstack/react-query";
 init_button();
 import { RefreshCw } from "lucide-react";
@@ -213,7 +212,7 @@ function TicketOpenForm({
 }
 
 // src/components/tickets/ticket-row.tsx
-import { useCallback, useRef } from "react";
+import { useEffect, useRef } from "react";
 
 // src/components/collapsible.tsx
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
@@ -406,7 +405,7 @@ function TicketTimelinePanel({ ticket }) {
         ConversationCardRow,
         {
           author,
-          role: "Reply",
+          role: isCustomer ? "Reply" : "Note",
           avatarSrc,
           timestamp: eng.createdAt,
           body: stripAttachmentsPreamble(eng.body ?? ""),
@@ -606,22 +605,14 @@ function TicketRow({
 }) {
   const optimistic = isOptimistic(ticket);
   const rowRef = useRef(null);
-  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;
-      }
+  useEffect(() => {
+    if (!expanded || optimistic) return;
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        rowRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+      });
     });
-  }, [onToggle, ticket.id]);
+  }, [expanded, optimistic]);
   const tileData = {
     id: ticket.id,
     title: ticket.subject ?? "(untitled)",
@@ -642,7 +633,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-24", children: /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsx4("div", { ref: rowRef, className: "scroll-mt-4", children: /* @__PURE__ */ jsxs3(
     Collapsible,
     {
       open: expanded && !optimistic,
@@ -652,7 +643,7 @@ function TicketRow({
           ChatTicketItem,
           {
             ticket: tileData,
-            onClick: optimistic ? void 0 : handleClick,
+            onClick: optimistic ? void 0 : onToggle,
             "aria-expanded": expanded && !optimistic,
             "aria-controls": `ticket-drawer-${ticket.id}`
           }
@@ -767,7 +758,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, useEffect as useEffect2, 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];
@@ -778,14 +769,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 = useCallback((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 = useCallback((id) => busyRows.has(id), [busyRows]);
   const watcherControllersRef = useRef2(/* @__PURE__ */ new Map());
-  useEffect(() => {
+  useEffect2(() => {
     return () => {
       for (const controller of watcherControllersRef.current.values()) {
         controller.abort();
@@ -794,12 +785,12 @@ function useTicketActions(options) {
     };
   }, []);
   const queueRef = useRef2(Promise.resolve());
-  const enqueue = useCallback2((work) => {
+  const enqueue = useCallback((work) => {
     const next = queueRef.current.then(work, work);
     queueRef.current = next.catch(() => void 0);
     return next;
   }, []);
-  const executeTicketAction = useCallback2(
+  const executeTicketAction = useCallback(
     async (toolName, args) => {
       const res = await embedAuthedFetch(TICKET_ACTION_ENDPOINT, {
         method: "POST",
@@ -815,7 +806,7 @@ function useTicketActions(options) {
     },
     []
   );
-  const watchMirrorSync = useCallback2(
+  const watchMirrorSync = useCallback(
     (placeholderId, expectedTicketId) => {
       const prior = watcherControllersRef.current.get(placeholderId);
       if (prior) prior.abort();
@@ -861,7 +852,7 @@ function useTicketActions(options) {
     },
     [queryClient, removeOptimistic, toast2]
   );
-  const surfaceError = useCallback2(
+  const surfaceError = useCallback(
     (err, action) => {
       const mapped = mapTicketActionError(err);
       if (mapped.supportSystemDown) onSupportSystemDown();
@@ -874,7 +865,7 @@ function useTicketActions(options) {
     },
     [toast2, onSupportSystemDown]
   );
-  const submitTicket = useCallback2(
+  const submitTicket = useCallback(
     async (input) => {
       if (formInFlightRef.current) return false;
       formInFlightRef.current = true;
@@ -939,7 +930,7 @@ function useTicketActions(options) {
       surfaceError
     ]
   );
-  const updateTicket = useCallback2(
+  const updateTicket = useCallback(
     async (ticket, serverArgs, successCopy, action) => {
       if (busyRowsRef.current.has(ticket.id)) return false;
       setRowBusy(ticket.id, true);
@@ -972,7 +963,7 @@ function useTicketActions(options) {
     // and cascade-recreate addNote/closeTicket/etc.
     [setRowBusy, enqueue, executeTicketAction, queryClient, toast2, surfaceError, removeTicketFromCache]
   );
-  const sendMessage = useCallback2(
+  const sendMessage = useCallback(
     (ticket, text, attachments) => {
       const trimmed = text.trim();
       const hasText = trimmed.length > 0;
@@ -990,7 +981,7 @@ function useTicketActions(options) {
     },
     [updateTicket]
   );
-  const closeTicket = useCallback2(
+  const closeTicket = useCallback(
     (ticket, resolution) => updateTicket(
       ticket,
       {
@@ -1002,7 +993,7 @@ function useTicketActions(options) {
     ),
     [updateTicket]
   );
-  const reopenTicket = useCallback2(
+  const reopenTicket = useCallback(
     (ticket) => updateTicket(ticket, { status: "OPEN" }, TOAST_COPY.reopen_success, "reopen ticket"),
     [updateTicket]
   );
@@ -1149,14 +1140,14 @@ function TicketCenterAuthed({
   const [optimisticTickets, setOptimisticTickets] = useState4([]);
   const [expandedTicketId, setExpandedTicketId] = useState4(null);
   const [supportSystemDown, setSupportSystemDown] = useState4(false);
-  const prependOptimistic = useCallback3((placeholder) => {
+  const prependOptimistic = useCallback2((placeholder) => {
     setOptimisticTickets((prev) => [placeholder, ...prev]);
   }, []);
-  const removeOptimistic = useCallback3((placeholderId) => {
+  const removeOptimistic = useCallback2((placeholderId) => {
     setOptimisticTickets((prev) => prev.filter((t) => t.id !== placeholderId));
     setExpandedTicketId((prev) => prev === placeholderId ? null : prev);
   }, []);
-  const removeTicketFromCache = useCallback3(
+  const removeTicketFromCache = useCallback2(
     (ticketId) => {
       queryClient.setQueriesData(
         { queryKey: ["tickets"] },
@@ -1173,7 +1164,7 @@ function TicketCenterAuthed({
     toast: toast2,
     onSupportSystemDown: () => setSupportSystemDown(true)
   });
-  const toggleRow = useCallback3((id) => {
+  const toggleRow = useCallback2((id) => {
     setExpandedTicketId((prev) => prev === id ? null : id);
   }, []);
   const merged = [...optimisticTickets, ...tickets];
@@ -1256,14 +1247,12 @@ function TicketListSkeleton() {
 }
 
 // src/components/tickets/help-center-list.tsx
-import { useCallback as useCallback5, useState as useState6 } from "react";
+import { useCallback as useCallback3, 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,
@@ -1284,24 +1273,6 @@ 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,
@@ -1325,8 +1296,6 @@ 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: [
@@ -1334,7 +1303,7 @@ function HelpCenterCard({
           "button",
           {
             type: "button",
-            onClick: isExpandable ? handleClick : void 0,
+            onClick: isExpandable ? () => onToggle(ticket.id) : void 0,
             disabled: !isExpandable,
             "aria-expanded": isExpandable ? isExpanded : void 0,
             "aria-controls": isExpanded ? `help-center-drawer-${ticket.id}` : void 0,
@@ -1549,14 +1518,14 @@ function HelpCenterListAuthed({
   const [optimisticTickets, setOptimisticTickets] = useState6([]);
   const [expandedTicketId, setExpandedTicketId] = useState6(null);
   const [supportSystemDown, setSupportSystemDown] = useState6(false);
-  const prependOptimistic = useCallback5((placeholder) => {
+  const prependOptimistic = useCallback3((placeholder) => {
     setOptimisticTickets((prev) => [placeholder, ...prev]);
   }, []);
-  const removeOptimistic = useCallback5((placeholderId) => {
+  const removeOptimistic = useCallback3((placeholderId) => {
     setOptimisticTickets((prev) => prev.filter((t) => t.id !== placeholderId));
     setExpandedTicketId((prev) => prev === placeholderId ? null : prev);
   }, []);
-  const removeTicketFromCache = useCallback5(
+  const removeTicketFromCache = useCallback3(
     (ticketId) => {
       queryClient.setQueriesData(
         { queryKey: ["tickets"] },
@@ -1573,7 +1542,7 @@ function HelpCenterListAuthed({
     toast: toast2,
     onSupportSystemDown: () => setSupportSystemDown(true)
   });
-  const toggleRow = useCallback5((id) => {
+  const toggleRow = useCallback3((id) => {
     setExpandedTicketId((prev) => prev === id ? null : id);
   }, []);
   const merged = [...optimisticTickets, ...tickets];
@@ -1626,31 +1595,21 @@ function HelpCenterListAuthed({
         description: "Open one above to start the conversation with the support team.",
         showCTA: false
       }
-    ) : (
-      // `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
-      )) })
-    ) }),
+    ) : /* @__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
+    )) }) }),
     !error && totalPages > 1 && /* @__PURE__ */ jsx8(UnifiedPagination, { currentPage: page, totalPages })
   ] });
   return /* @__PURE__ */ jsx8(DevSectionPage, { sectionKey: "tickets", preControls: form, children: body });