@adatechnology/conversations-ui 0.1.0-rc.41 → 0.1.0-rc.43

package/dist/flows/index.js

@@ -858,8 +858,42 @@ function FlowPortalNode({ data }) {
 var flowPortalNodeTypes = { flowPortal: FlowPortalNode };
 
 // src/flows/FlowPalette.tsx
-import { useEffect, useRef, useState as useState2 } from "react";
+import { useEffect, useLayoutEffect, useRef, useState as useState2 } from "react";
 import { Plus as Plus2, MessageCircleQuestion as MessageCircleQuestion2, GitBranch as GitBranch3, Zap as Zap2, Diamond as Diamond2, ChevronRight } from "lucide-react";
+
+// src/flows/flowMenuPlacement.ts
+var DEFAULT_GAP = 4;
+var DEFAULT_MARGIN = 8;
+function clamp(value, minimum, maximum) {
+  return Math.max(minimum, Math.min(value, Math.max(minimum, maximum)));
+}
+function placeFloatingPanel({
+  anchor,
+  panel,
+  viewport,
+  prefer,
+  gap = DEFAULT_GAP,
+  margin = DEFAULT_MARGIN
+}) {
+  const maxHeight = Math.min(panel.height, viewport.height - margin * 2);
+  let left;
+  if (prefer === "side") {
+    const toTheRight = anchor.right + gap;
+    const toTheLeft = anchor.left - gap - panel.width;
+    left = toTheRight + panel.width <= viewport.width - margin ? toTheRight : toTheLeft;
+  } else {
+    left = anchor.left + gap;
+  }
+  left = clamp(left, margin, viewport.width - margin - panel.width);
+  const top = prefer === "side" ? anchor.top : anchor.bottom;
+  return {
+    left,
+    top: clamp(top, margin, viewport.height - margin - maxHeight),
+    maxHeight
+  };
+}
+
+// src/flows/FlowPalette.tsx
 import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var QUESTION_TYPES = ["text", "money", "date", "int", "cpf"];
 function FlowPaletteMenu({ onSelect, labels, actionOptions }) {
@@ -867,6 +901,38 @@ function FlowPaletteMenu({ onSelect, labels, actionOptions }) {
     { actionKind: "handoff", label: labels.actionKindLabels.handoff ?? "Encaminhar para atendimento" }
   ];
   const [submenu, setSubmenu] = useState2(null);
+  const questionTriggerRef = useRef(null);
+  const actionTriggerRef = useRef(null);
+  const submenuRef = useRef(null);
+  const [placement, setPlacement] = useState2(null);
+  useLayoutEffect(() => {
+    if (!submenu) {
+      setPlacement(null);
+      return;
+    }
+    const trigger = submenu === "question" ? questionTriggerRef.current : actionTriggerRef.current;
+    const panel = submenuRef.current;
+    if (!trigger || !panel) return;
+    const anchor = trigger.getBoundingClientRect();
+    setPlacement(
+      placeFloatingPanel({
+        anchor: { left: anchor.left, top: anchor.top, right: anchor.right, bottom: anchor.bottom },
+        panel: { width: panel.offsetWidth, height: panel.scrollHeight },
+        viewport: { width: window.innerWidth, height: window.innerHeight },
+        prefer: "side"
+      })
+    );
+  }, [submenu]);
+  const submenuStyle = {
+    position: "fixed",
+    left: placement?.left ?? 0,
+    top: placement?.top ?? 0,
+    maxHeight: placement?.maxHeight,
+    overflowY: "auto",
+    // Até a medição terminar o painel existe mas não aparece — senão ele pisca um quadro na
+    // posição errada, que é justamente o salto que esta correção remove.
+    visibility: placement ? "visible" : "hidden"
+  };
   function select(spec) {
     onSelect(spec);
     setSubmenu(null);
@@ -876,6 +942,7 @@ function FlowPaletteMenu({ onSelect, labels, actionOptions }) {
       /* @__PURE__ */ jsxs6(
         "button",
         {
+          ref: questionTriggerRef,
           "data-cv-tooltip": labels.palette.question,
           "aria-label": labels.palette.question,
           onMouseEnter: () => setSubmenu("question"),
@@ -891,17 +958,25 @@ function FlowPaletteMenu({ onSelect, labels, actionOptions }) {
           ]
         }
       ),
-      submenu === "question" && /* @__PURE__ */ jsx7("div", { className: "absolute left-full top-0 ml-1 w-56 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1", children: QUESTION_TYPES.map((qt) => /* @__PURE__ */ jsx7(
-        "button",
+      submenu === "question" && /* @__PURE__ */ jsx7(
+        "div",
         {
-          "data-cv-tooltip": labels.questionTypeLabels[qt],
-          "aria-label": labels.questionTypeLabels[qt],
-          onClick: () => select({ kind: "question", questionType: qt }),
-          className: "w-full text-left px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700",
-          children: labels.questionTypeLabels[qt]
-        },
-        qt
-      )) })
+          ref: submenuRef,
+          style: submenuStyle,
+          className: "z-50 w-56 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1",
+          children: QUESTION_TYPES.map((qt) => /* @__PURE__ */ jsx7(
+            "button",
+            {
+              "data-cv-tooltip": labels.questionTypeLabels[qt],
+              "aria-label": labels.questionTypeLabels[qt],
+              onClick: () => select({ kind: "question", questionType: qt }),
+              className: "w-full text-left px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700",
+              children: labels.questionTypeLabels[qt]
+            },
+            qt
+          ))
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxs6(
       "button",
@@ -937,6 +1012,7 @@ function FlowPaletteMenu({ onSelect, labels, actionOptions }) {
       /* @__PURE__ */ jsxs6(
         "button",
         {
+          ref: actionTriggerRef,
           "data-cv-tooltip": labels.palette.action,
           "aria-label": labels.palette.action,
           onMouseEnter: () => setSubmenu("action"),
@@ -952,17 +1028,25 @@ function FlowPaletteMenu({ onSelect, labels, actionOptions }) {
           ]
         }
       ),
-      submenu === "action" && /* @__PURE__ */ jsx7("div", { className: "absolute left-full top-0 ml-1 w-64 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1", children: resolvedActionOptions.map((option) => /* @__PURE__ */ jsx7(
-        "button",
+      submenu === "action" && /* @__PURE__ */ jsx7(
+        "div",
         {
-          "data-cv-tooltip": option.label,
-          "aria-label": option.label,
-          onClick: () => select({ kind: "action", actionKind: option.actionKind }),
-          className: "w-full text-left px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700",
-          children: option.label
-        },
-        option.actionKind
-      )) })
+          ref: submenuRef,
+          style: submenuStyle,
+          className: "z-50 w-64 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1",
+          children: resolvedActionOptions.map((option) => /* @__PURE__ */ jsx7(
+            "button",
+            {
+              "data-cv-tooltip": option.label,
+              "aria-label": option.label,
+              onClick: () => select({ kind: "action", actionKind: option.actionKind }),
+              className: "w-full text-left px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700",
+              children: option.label
+            },
+            option.actionKind
+          ))
+        }
+      )
     ] })
   ] });
 }
@@ -1541,7 +1625,7 @@ function FlowNodePanel({
 }
 
 // src/flows/FlowsWorkspace.tsx
-import { useCallback, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState6 } from "react";
+import { useCallback, useEffect as useEffect3, useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useRef as useRef3, useState as useState6 } from "react";
 import {
   ReactFlow as ReactFlow2,
   Background as Background2,
@@ -1872,6 +1956,7 @@ var EDGE_COLOR_LINEAR = "#94a3b8";
 var FOCUS_MAX_ZOOM = 1;
 var FOCUS_PADDING = 0.2;
 var FOCUS_DURATION_MS = 400;
+var QUICK_ADD_MENU_GAP = 12;
 var EDGE_COLOR_BRANCH = "#8b5cf6";
 var EDGE_COLOR_FALLBACK = "#cbd5e1";
 var EDGE_COLOR_LIVE = "#3b82f6";
@@ -1941,6 +2026,8 @@ function FlowsWorkspace({
   const [flowInstance, setFlowInstance] = useState6(null);
   const [pendingFocusNodeId, setPendingFocusNodeId] = useState6(null);
   const [pendingFocusFlowKey, setPendingFocusFlowKey] = useState6(null);
+  const quickAddMenuRef = useRef3(null);
+  const [quickAddPlacement, setQuickAddPlacement] = useState6(null);
   const reloadGraphs = useCallback(async () => {
     try {
       const loaded = await api.getGraphs();
@@ -2239,6 +2326,31 @@ function FlowsWorkspace({
     });
     setPendingFocusFlowKey(null);
   }, [pendingFocusFlowKey, flowInstance, rfNodes]);
+  useLayoutEffect2(() => {
+    if (!quickAddFrom) {
+      setQuickAddPlacement(null);
+      return;
+    }
+    const panel = quickAddMenuRef.current;
+    if (!panel) return;
+    const { x, y } = quickAddFrom.anchor;
+    setQuickAddPlacement(
+      placeFloatingPanel({
+        anchor: { left: x, top: y, right: x, bottom: y },
+        panel: { width: panel.offsetWidth, height: panel.scrollHeight },
+        viewport: { width: window.innerWidth, height: window.innerHeight },
+        prefer: "below",
+        gap: QUICK_ADD_MENU_GAP
+      })
+    );
+  }, [quickAddFrom]);
+  const quickAddMenuStyle = {
+    left: quickAddPlacement?.left ?? 0,
+    top: quickAddPlacement?.top ?? 0,
+    maxHeight: quickAddPlacement?.maxHeight,
+    overflowY: "auto",
+    visibility: quickAddPlacement ? "visible" : "hidden"
+  };
   const onNodesChange = useCallback((changes) => {
     setRfNodes((current) => applyNodeChanges(changes, current));
   }, []);
@@ -2620,8 +2732,9 @@ function FlowsWorkspace({
       /* @__PURE__ */ jsxs11(
         "div",
         {
+          ref: quickAddMenuRef,
           className: "fixed z-50 w-64 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1",
-          style: { left: quickAddFrom.anchor.x + 12, top: quickAddFrom.anchor.y },
+          style: quickAddMenuStyle,
           children: [
             /* @__PURE__ */ jsx12("p", { className: "px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500", children: labels.quickAdd.title }),
             /* @__PURE__ */ jsx12(

package/dist/index.d.ts

@@ -545,6 +545,45 @@ type WindowOfParams = {
 declare function windowOf(params: WindowOfParams): ConversationWindow;
 declare function formatStalledFor(lastAt: string, now: number): string;
 
+/**
+ * Copyright (c) 2026 Ada Technology. MIT License.
+ *
+ * Há quanto tempo o cliente espera resposta.
+ *
+ * Não confundir com `conversationWindow`: aquilo é a janela de sessão da plataforma (o que o canal
+ * ainda deixa enviar), isto é serviço (quanto o cliente esperou). Os dois divergem justamente no
+ * caso que interessa — respondida a conversa, o relógio do SLA para e o da janela continua correndo.
+ *
+ * A conta sai de dados que a listagem já traz: se a última mensagem foi do cliente, ninguém
+ * respondeu ainda e a espera conta desde ela. Se a última foi nossa, não há espera pendente.
+ */
+declare const REPLY_LATENCY: {
+    /** Até 6h — dentro do combinado. */
+    readonly WITHIN: "within";
+    /** 6h a 12h — passou do combinado. */
+    readonly LATE: "late";
+    /** Acima de 12h. */
+    readonly CRITICAL: "critical";
+};
+type ReplyLatency = (typeof REPLY_LATENCY)[keyof typeof REPLY_LATENCY];
+declare const REPLY_LATENCY_LATE_HOURS = 6;
+declare const REPLY_LATENCY_CRITICAL_HOURS = 12;
+type ReplyLatencyParams = {
+    /** Direção da última mensagem. Ausente = desconhecida, e aí não se afirma espera. */
+    readonly lastDirection?: 'inbound' | 'outbound' | undefined;
+    readonly lastInboundAt: string | null;
+    readonly now: number;
+};
+/**
+ * `null` quando não há espera a mostrar — conversa já respondida, ou cliente que nunca escreveu.
+ *
+ * Devolver uma faixa nesses casos encheria a lista de selos em conversa que não deve nada, e o
+ * alerta que aponta para todo lado não aponta para lugar nenhum.
+ */
+declare function replyLatencyOf(params: ReplyLatencyParams): ReplyLatency | null;
+/** Só o que passou do combinado merece alerta — é o corte que a lista usa para destacar. */
+declare function isReplyOverdue(latency: ReplyLatency | null): boolean;
+
 type ConversationRowClassNames = {
     root: string;
     windowBar: string;
@@ -1880,4 +1919,4 @@ interface ConversationsInboxListProps {
 }
 declare function ConversationsInboxList({ inbox, labels, className, renderFilters, renderBulkActions, renderRow, onSendTemplateToSelected, }: ConversationsInboxListProps): react.JSX.Element;
 
-export { type AsyncResourceState, AudioPlayer, type AudioPlayerProps, AudioTranscription, type AudioTranscriptionProps, Avatar, type AvatarLabels, type AvatarProps, type BotMessages, type BuildTranscriptTextParams, BulkActionBar, type BulkActionBarProps, CHANNEL_BRAND_COLOR, CONVERSATIONS_PER_PAGE, CONVERSATION_WINDOW, ChannelFilter, ChannelFilterOption, ChannelIcon, type ChannelIconProps, ConversationChannel, type ConversationContextEntry, ConversationContextPanel, type ConversationContextPanelClassNames, type ConversationContextPanelLabels, type ConversationContextPanelProps, type ConversationContextStatus, ConversationDocument, ConversationDocumentsPanel, type ConversationDocumentsPanelClassNames, type ConversationDocumentsPanelLabels, type ConversationDocumentsPanelProps, ConversationHeader, type ConversationHeaderClassNames, type ConversationHeaderLabels, type ConversationHeaderProps, type ConversationHeaderUtility, ConversationListItem, type ConversationListItemLabels, type ConversationListItemProps, type ConversationLocales, ConversationLocalesProvider, type ConversationLocalesProviderProps, ConversationPane, type ConversationPaneProps, type ConversationRealtimeHandler, ConversationRow, type ConversationRowClassNames, type ConversationRowProps, ConversationSimulatorClient, ConversationSummary, ConversationTemplate, ConversationWallpaper, type ConversationWallpaperProps, type ConversationWindow, ConversationsApi, ConversationsFeatures, ConversationsInboxList, type ConversationsInboxListProps, ConversationsProvider, ConversationsWorkspace, type ConversationsWorkspaceLabels, type ConversationsWorkspaceProps, type ConversationsWorkspaceSimulator, DEFAULT_ACCEPTED_FILE_TYPES, DEFAULT_AVATAR_LABELS, DEFAULT_CONVERSATIONS_WORKSPACE_LABELS, DEFAULT_CONVERSATION_CONTEXT_LABELS, DEFAULT_CONVERSATION_DOCUMENTS_LABELS, DEFAULT_CONVERSATION_HEADER_LABELS, DEFAULT_CONVERSATION_LIST_ITEM_LABELS, DEFAULT_DARK_MODE_TOGGLE_LABELS, DEFAULT_DOCUMENTS_LIBRARY_LABELS, DEFAULT_DOCUMENTS_WORKSPACE_LABELS, DEFAULT_EMOJI_PICKER_LABELS, DEFAULT_INTERACTIVE_MESSAGE_LABELS, DEFAULT_LIGHTBOX_LABELS, DEFAULT_MESSAGE_COMPOSER_LABELS, DEFAULT_RICH_COMPOSER_TOOLTIPS, DEFAULT_TEMPLATES_SETTINGS_LABELS, DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS, DEFAULT_WINDOW_EXPIRED_LABELS, DOCUMENT_SOURCE_FILTER, DarkModeToggle, type DarkModeToggleLabels, type DarkModeToggleProps, DateDivider, type DateDividerClassNames, type DateDividerProps, type DocumentSourceFilter, type DocumentsFiltersContext, DocumentsLibrary, type DocumentsLibraryClassNames, type DocumentsLibraryLabels, type DocumentsLibraryProps, DocumentsWorkspace, type DocumentsWorkspaceClassNames, type DocumentsWorkspaceLabels, type DocumentsWorkspaceProps, EMOJI_CATEGORIES, type EmojiCategory, type EmojiEntry, EmojiPicker, type EmojiPickerLabels, type EmojiPickerProps, FileIcon, type FileIconProps, type FilterOption, InteractiveMessage, type InteractiveMessageLabels, type InteractiveMessageProps, InteractivePayload, InteractiveSelection, Lightbox, type LightboxLabels, type LightboxProps, ListConversationsParams, ListDocumentsParams, ListingPagination, type ListingPaginationProps, MessageBubble, type MessageBubbleProps, MessageComposer, type MessageComposerClassNames, type MessageComposerLabels, type MessageComposerProps, MessagePayload, MessageTail, MessageText, type MessageTextProps, MessageTimestamp, MessageTranscription, MessagesWorkspace, type MessagesWorkspaceApi, type MessagesWorkspaceLabels, type MessagesWorkspaceProps, type MessagesWorkspaceTemplateRole, MultiSelectFilter, type MultiSelectFilterProps, NARROW_MAX_WIDTH_PX, type QuickReply, RICH_COMPOSER_ACTION, ResolveMediaUrl, type RichComposerAction, type RichComposerQuickReply, type RichComposerTooltips, type RichComposerVariable, RichMessageComposer, type RichMessageComposerHandle, type RichMessageComposerProps, SSEProvider, SimpleEmojiPicker, type SimpleEmojiPickerProps, type SimulatorTransportFactory, type SimulatorTransportParams, type SortDirection, SortableHead, type SortableHeadProps, StatusTicks, type StatusTicksProps, TEMPLATE_SETTINGS_TAB, TOOLTIP_ATTRIBUTE, type TemplateSettings, type TemplateSettingsTab, ToastProvider, TooltipLayer, type TopicItem, TopicsForm, type TopicsFormLabels, type TopicsFormProps, TranscriptionMode, type TranscriptionSettings, TranscriptionSettingsForm, type TranscriptionSettingsFormLabels, type TranscriptionSettingsFormProps, type UrlStateOptions, type UseConversationActionsResult, type UseConversationContextResult, type UseConversationDocumentsParams, type UseConversationDocumentsResult, type UseConversationListParams, type UseConversationListResult, type UseConversationMessagesResult, type UseConversationsInboxParams, type UseConversationsInboxResult, type UseInboxActionsResult, type UseScrollToLatestMessageParams, type UseScrollToLatestMessageResult, type UseWaitingNotificationsLabels, type UseWaitingNotificationsParams, type UseWaitingNotificationsResult, WINDOW_FILTERS, WelcomeFarewellForm, type WelcomeFarewellFormLabels, type WelcomeFarewellFormProps, WhatsAppCreateTemplateForm, type WhatsAppCreateTemplateFormLabels, type WhatsAppCreateTemplateFormProps, type WhatsAppCreateTemplateResult, type WhatsAppCreateTemplateState, WhatsAppMessageEditor, type WhatsAppMessageEditorLabels, type WhatsAppMessageEditorProps, type WhatsAppTemplateHeaderType, WhatsAppTemplateSettingsForm, type WhatsAppTemplateSettingsFormLabels, type WhatsAppTemplateSettingsFormProps, type WhatsAppTemplateSummary, type WhatsAppTemplateVariableSuggestion, WhatsAppTemplatesSettings, type WhatsAppTemplatesSettingsLabels, type WhatsAppTemplatesSettingsProps, WindowExpiredNotice, type WindowExpiredNoticeLabels, type WindowExpiredNoticeProps, type WindowOfParams, applyQuickReplyVariables, buildTranscriptFilename, buildTranscriptText, createMediaUrlResolver, downloadTextFile, formatDateTime, formatFileSize, formatPhone, formatStalledFor, formatTimestamp, htmlToWA, isSameDay, isWindowBlocking, parseWhatsAppFormatting, phoneInitials, resolveQuickReply, searchEmojis, toast, useConversationActions, useConversationContext, useConversationDocuments, useConversationList, useConversationLocales, useConversationMessages, useConversationRealtime, useConversations, useConversationsInbox, useDarkMode, useDebouncedValue, useGlobalRealtime, useInboxActions, useIsDarkTheme, useIsNarrow, useScrollToLatestMessage, useToast, useUrlArrayState, useUrlNumberState, useUrlStringState, useWaitingNotifications, waToHTML, waToHTMLInline, windowOf };
+export { type AsyncResourceState, AudioPlayer, type AudioPlayerProps, AudioTranscription, type AudioTranscriptionProps, Avatar, type AvatarLabels, type AvatarProps, type BotMessages, type BuildTranscriptTextParams, BulkActionBar, type BulkActionBarProps, CHANNEL_BRAND_COLOR, CONVERSATIONS_PER_PAGE, CONVERSATION_WINDOW, ChannelFilter, ChannelFilterOption, ChannelIcon, type ChannelIconProps, ConversationChannel, type ConversationContextEntry, ConversationContextPanel, type ConversationContextPanelClassNames, type ConversationContextPanelLabels, type ConversationContextPanelProps, type ConversationContextStatus, ConversationDocument, ConversationDocumentsPanel, type ConversationDocumentsPanelClassNames, type ConversationDocumentsPanelLabels, type ConversationDocumentsPanelProps, ConversationHeader, type ConversationHeaderClassNames, type ConversationHeaderLabels, type ConversationHeaderProps, type ConversationHeaderUtility, ConversationListItem, type ConversationListItemLabels, type ConversationListItemProps, type ConversationLocales, ConversationLocalesProvider, type ConversationLocalesProviderProps, ConversationPane, type ConversationPaneProps, type ConversationRealtimeHandler, ConversationRow, type ConversationRowClassNames, type ConversationRowProps, ConversationSimulatorClient, ConversationSummary, ConversationTemplate, ConversationWallpaper, type ConversationWallpaperProps, type ConversationWindow, ConversationsApi, ConversationsFeatures, ConversationsInboxList, type ConversationsInboxListProps, ConversationsProvider, ConversationsWorkspace, type ConversationsWorkspaceLabels, type ConversationsWorkspaceProps, type ConversationsWorkspaceSimulator, DEFAULT_ACCEPTED_FILE_TYPES, DEFAULT_AVATAR_LABELS, DEFAULT_CONVERSATIONS_WORKSPACE_LABELS, DEFAULT_CONVERSATION_CONTEXT_LABELS, DEFAULT_CONVERSATION_DOCUMENTS_LABELS, DEFAULT_CONVERSATION_HEADER_LABELS, DEFAULT_CONVERSATION_LIST_ITEM_LABELS, DEFAULT_DARK_MODE_TOGGLE_LABELS, DEFAULT_DOCUMENTS_LIBRARY_LABELS, DEFAULT_DOCUMENTS_WORKSPACE_LABELS, DEFAULT_EMOJI_PICKER_LABELS, DEFAULT_INTERACTIVE_MESSAGE_LABELS, DEFAULT_LIGHTBOX_LABELS, DEFAULT_MESSAGE_COMPOSER_LABELS, DEFAULT_RICH_COMPOSER_TOOLTIPS, DEFAULT_TEMPLATES_SETTINGS_LABELS, DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS, DEFAULT_WINDOW_EXPIRED_LABELS, DOCUMENT_SOURCE_FILTER, DarkModeToggle, type DarkModeToggleLabels, type DarkModeToggleProps, DateDivider, type DateDividerClassNames, type DateDividerProps, type DocumentSourceFilter, type DocumentsFiltersContext, DocumentsLibrary, type DocumentsLibraryClassNames, type DocumentsLibraryLabels, type DocumentsLibraryProps, DocumentsWorkspace, type DocumentsWorkspaceClassNames, type DocumentsWorkspaceLabels, type DocumentsWorkspaceProps, EMOJI_CATEGORIES, type EmojiCategory, type EmojiEntry, EmojiPicker, type EmojiPickerLabels, type EmojiPickerProps, FileIcon, type FileIconProps, type FilterOption, InteractiveMessage, type InteractiveMessageLabels, type InteractiveMessageProps, InteractivePayload, InteractiveSelection, Lightbox, type LightboxLabels, type LightboxProps, ListConversationsParams, ListDocumentsParams, ListingPagination, type ListingPaginationProps, MessageBubble, type MessageBubbleProps, MessageComposer, type MessageComposerClassNames, type MessageComposerLabels, type MessageComposerProps, MessagePayload, MessageTail, MessageText, type MessageTextProps, MessageTimestamp, MessageTranscription, MessagesWorkspace, type MessagesWorkspaceApi, type MessagesWorkspaceLabels, type MessagesWorkspaceProps, type MessagesWorkspaceTemplateRole, MultiSelectFilter, type MultiSelectFilterProps, NARROW_MAX_WIDTH_PX, type QuickReply, REPLY_LATENCY, REPLY_LATENCY_CRITICAL_HOURS, REPLY_LATENCY_LATE_HOURS, RICH_COMPOSER_ACTION, type ReplyLatency, type ReplyLatencyParams, ResolveMediaUrl, type RichComposerAction, type RichComposerQuickReply, type RichComposerTooltips, type RichComposerVariable, RichMessageComposer, type RichMessageComposerHandle, type RichMessageComposerProps, SSEProvider, SimpleEmojiPicker, type SimpleEmojiPickerProps, type SimulatorTransportFactory, type SimulatorTransportParams, type SortDirection, SortableHead, type SortableHeadProps, StatusTicks, type StatusTicksProps, TEMPLATE_SETTINGS_TAB, TOOLTIP_ATTRIBUTE, type TemplateSettings, type TemplateSettingsTab, ToastProvider, TooltipLayer, type TopicItem, TopicsForm, type TopicsFormLabels, type TopicsFormProps, TranscriptionMode, type TranscriptionSettings, TranscriptionSettingsForm, type TranscriptionSettingsFormLabels, type TranscriptionSettingsFormProps, type UrlStateOptions, type UseConversationActionsResult, type UseConversationContextResult, type UseConversationDocumentsParams, type UseConversationDocumentsResult, type UseConversationListParams, type UseConversationListResult, type UseConversationMessagesResult, type UseConversationsInboxParams, type UseConversationsInboxResult, type UseInboxActionsResult, type UseScrollToLatestMessageParams, type UseScrollToLatestMessageResult, type UseWaitingNotificationsLabels, type UseWaitingNotificationsParams, type UseWaitingNotificationsResult, WINDOW_FILTERS, WelcomeFarewellForm, type WelcomeFarewellFormLabels, type WelcomeFarewellFormProps, WhatsAppCreateTemplateForm, type WhatsAppCreateTemplateFormLabels, type WhatsAppCreateTemplateFormProps, type WhatsAppCreateTemplateResult, type WhatsAppCreateTemplateState, WhatsAppMessageEditor, type WhatsAppMessageEditorLabels, type WhatsAppMessageEditorProps, type WhatsAppTemplateHeaderType, WhatsAppTemplateSettingsForm, type WhatsAppTemplateSettingsFormLabels, type WhatsAppTemplateSettingsFormProps, type WhatsAppTemplateSummary, type WhatsAppTemplateVariableSuggestion, WhatsAppTemplatesSettings, type WhatsAppTemplatesSettingsLabels, type WhatsAppTemplatesSettingsProps, WindowExpiredNotice, type WindowExpiredNoticeLabels, type WindowExpiredNoticeProps, type WindowOfParams, applyQuickReplyVariables, buildTranscriptFilename, buildTranscriptText, createMediaUrlResolver, downloadTextFile, formatDateTime, formatFileSize, formatPhone, formatStalledFor, formatTimestamp, htmlToWA, isReplyOverdue, isSameDay, isWindowBlocking, parseWhatsAppFormatting, phoneInitials, replyLatencyOf, resolveQuickReply, searchEmojis, toast, useConversationActions, useConversationContext, useConversationDocuments, useConversationList, useConversationLocales, useConversationMessages, useConversationRealtime, useConversations, useConversationsInbox, useDarkMode, useDebouncedValue, useGlobalRealtime, useInboxActions, useIsDarkTheme, useIsNarrow, useScrollToLatestMessage, useToast, useUrlArrayState, useUrlNumberState, useUrlStringState, useWaitingNotifications, waToHTML, waToHTMLInline, windowOf };

package/dist/index.js

@@ -1170,6 +1170,30 @@ function formatStalledFor(lastAt, now) {
   return `${minutes}m`;
 }
 
+// src/replyLatency.ts
+var HOUR_MS2 = 60 * 60 * 1e3;
+var REPLY_LATENCY = {
+  /** Até 6h — dentro do combinado. */
+  WITHIN: "within",
+  /** 6h a 12h — passou do combinado. */
+  LATE: "late",
+  /** Acima de 12h. */
+  CRITICAL: "critical"
+};
+var REPLY_LATENCY_LATE_HOURS = 6;
+var REPLY_LATENCY_CRITICAL_HOURS = 12;
+function replyLatencyOf(params) {
+  if (params.lastDirection !== "inbound") return null;
+  if (!params.lastInboundAt) return null;
+  const elapsedHours = (params.now - new Date(params.lastInboundAt).getTime()) / HOUR_MS2;
+  if (elapsedHours < REPLY_LATENCY_LATE_HOURS) return REPLY_LATENCY.WITHIN;
+  if (elapsedHours < REPLY_LATENCY_CRITICAL_HOURS) return REPLY_LATENCY.LATE;
+  return REPLY_LATENCY.CRITICAL;
+}
+function isReplyOverdue(latency) {
+  return latency === REPLY_LATENCY.LATE || latency === REPLY_LATENCY.CRITICAL;
+}
+
 // src/ConversationRow.tsx
 import { AlarmClock, Bot, Hourglass, Play, UserRound } from "lucide-react";
 
@@ -1246,6 +1270,11 @@ var WINDOW_TITLE = {
   [CONVERSATION_WINDOW.EXPIRED]: "Janela de 24h expirada \u2014 s\xF3 template"
 };
 var STALLED_THRESHOLD_MS = 60 * 60 * 1e3;
+var REPLY_LATENCY_PILL_CLASS = {
+  [REPLY_LATENCY.WITHIN]: "cv-pill--success",
+  [REPLY_LATENCY.LATE]: "cv-pill--warning",
+  [REPLY_LATENCY.CRITICAL]: "cv-pill--danger"
+};
 var TAKEOVER_LABEL = "Continuar Atendimento";
 var WINDOW_BAR_CLASS = {
   [CONVERSATION_WINDOW.ALL]: "bg-transparent",
@@ -1271,6 +1300,11 @@ function ConversationRow({
   const stalledMs = now - new Date(conversation.lastAt).getTime();
   const isStalled = stalledMs > STALLED_THRESHOLD_MS;
   const isWaiting = conversation.mode === "bot" && conversation.waitingHuman;
+  const replyLatency = replyLatencyOf({
+    lastDirection: conversation.lastDirection,
+    lastInboundAt: conversation.lastInboundAt,
+    now
+  });
   return /* @__PURE__ */ jsxs9("div", { className: cn("cv-row flex border-b", active && "cv-row--active", classNames?.root, className), children: [
     /* @__PURE__ */ jsx11(
       "span",
@@ -1321,6 +1355,12 @@ function ConversationRow({
           /* @__PURE__ */ jsx11(Bot, { size: ICON_SIZE_PILL, "aria-hidden": "true" }),
           " bot ativo"
         ] }) : null,
+        replyLatency ? /* @__PURE__ */ jsxs9("span", { className: cn("cv-pill", REPLY_LATENCY_PILL_CLASS[replyLatency]), children: [
+          /* @__PURE__ */ jsx11(AlarmClock, { size: ICON_SIZE_PILL, "aria-hidden": "true" }),
+          " sem resposta h\xE1",
+          " ",
+          formatStalledFor(conversation.lastInboundAt ?? conversation.lastAt, now)
+        ] }) : null,
         isStalled ? /* @__PURE__ */ jsxs9("span", { className: "cv-pill cv-pill--danger", children: [
           /* @__PURE__ */ jsx11(AlarmClock, { size: ICON_SIZE_PILL, "aria-hidden": "true" }),
           " parada h\xE1",
@@ -5000,6 +5040,9 @@ export {
   MultiSelectFilter,
   NARROW_MAX_WIDTH_PX,
   REOPEN_MECHANISM,
+  REPLY_LATENCY,
+  REPLY_LATENCY_CRITICAL_HOURS,
+  REPLY_LATENCY_LATE_HOURS,
   RICH_COMPOSER_ACTION,
   RichMessageComposer,
   SimpleEmojiPicker,
@@ -5033,10 +5076,12 @@ export {
   formatStalledFor,
   formatTimestamp,
   htmlToWA,
+  isReplyOverdue,
   isSameDay,
   isWindowBlocking,
   parseWhatsAppFormatting,
   phoneInitials,
+  replyLatencyOf,
   resolveQuickReply,
   searchEmojis,
   toast,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.1.0-rc.41",
+  "version": "0.1.0-rc.43",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"

package/src/ConversationRow.tsx

@@ -21,6 +21,7 @@ import {
   windowOf,
   type ConversationWindow,
 } from './conversationWindow'
+import { REPLY_LATENCY, replyLatencyOf } from './replyLatency'
 
 
 const WINDOW_TITLE: Record<ConversationWindow, string> = {
@@ -34,6 +35,14 @@ const WINDOW_TITLE: Record<ConversationWindow, string> = {
 // Abaixo disto a conversa é recente e o aviso de "parada" só faria ruído.
 const STALLED_THRESHOLD_MS = 60 * 60 * 1000
 
+// Verde só até 6h: a partir daí o selo perde a cor de "tudo certo", que é o sinal que o operador
+// varre na lista. Crítico ganha vermelho para não se confundir com uma espera de 7h.
+const REPLY_LATENCY_PILL_CLASS = {
+  [REPLY_LATENCY.WITHIN]: 'cv-pill--success',
+  [REPLY_LATENCY.LATE]: 'cv-pill--warning',
+  [REPLY_LATENCY.CRITICAL]: 'cv-pill--danger',
+} as const
+
 const TAKEOVER_LABEL = 'Continuar Atendimento'
 
 const WINDOW_BAR_CLASS: Record<ConversationWindow, string> = {
@@ -81,6 +90,13 @@ export function ConversationRow({
   // ao `waitingHuman` escondia justamente o caso ruim: conversa assumida e esquecida.
   const isStalled = stalledMs > STALLED_THRESHOLD_MS
   const isWaiting = conversation.mode === 'bot' && conversation.waitingHuman
+  // Espera do cliente por resposta — outra coisa que a janela de sessão acima: aqui o relógio para
+  // quando alguém responde. Ver `replyLatency.ts`.
+  const replyLatency = replyLatencyOf({
+    lastDirection: conversation.lastDirection,
+    lastInboundAt: conversation.lastInboundAt,
+    now,
+  })
 
   // Realce e hover ficam na linha inteira: com eles no item, só o bloco dele ficava cinza enquanto
   // checkbox, barra lateral e pills continuavam brancos — parecia meia linha selecionada.
@@ -137,6 +153,12 @@ export function ConversationRow({
               <Bot size={ICON_SIZE_PILL} aria-hidden="true" /> bot ativo
             </span>
           ) : null}
+          {replyLatency ? (
+            <span className={cn('cv-pill', REPLY_LATENCY_PILL_CLASS[replyLatency])}>
+              <AlarmClock size={ICON_SIZE_PILL} aria-hidden="true" /> sem resposta há{' '}
+              {formatStalledFor(conversation.lastInboundAt ?? conversation.lastAt, now)}
+            </span>
+          ) : null}
           {isStalled ? (
             <span className="cv-pill cv-pill--danger">
               <AlarmClock size={ICON_SIZE_PILL} aria-hidden="true" /> parada há{' '}

package/src/flows/FlowPalette.tsx

@@ -1,5 +1,7 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { Plus, MessageCircleQuestion, GitBranch, Zap, Diamond, ChevronRight } from 'lucide-react'
+
+import { placeFloatingPanel, type FloatingPlacement } from './flowMenuPlacement'
 import { DEFAULT_FLOW_EDITOR_LABELS, type FlowEditorLabels } from './labels'
 import type { FlowActionKind, FlowQuestionType } from './flowGraph'
 
@@ -45,6 +47,43 @@ export function FlowPaletteMenu({ onSelect, labels, actionOptions }: FlowPalette
     { actionKind: 'handoff', label: labels.actionKindLabels.handoff ?? 'Encaminhar para atendimento' },
   ]
   const [submenu, setSubmenu] = useState<'question' | 'action' | null>(null)
+  const questionTriggerRef = useRef<HTMLButtonElement>(null)
+  const actionTriggerRef = useRef<HTMLButtonElement>(null)
+  const submenuRef = useRef<HTMLDivElement>(null)
+  const [placement, setPlacement] = useState<FloatingPlacement | null>(null)
+
+  // `fixed` posicionado por medição, e não preso ao item por CSS: alinhado sempre à direita e ao
+  // topo do item, o submenu era cortado pela borda da tela — e sem rolagem os últimos itens ficavam
+  // inalcançáveis. Roda antes da pintura, então não pisca.
+  useLayoutEffect(() => {
+    if (!submenu) {
+      setPlacement(null)
+      return
+    }
+    const trigger = submenu === 'question' ? questionTriggerRef.current : actionTriggerRef.current
+    const panel = submenuRef.current
+    if (!trigger || !panel) return
+    const anchor = trigger.getBoundingClientRect()
+    setPlacement(
+      placeFloatingPanel({
+        anchor: { left: anchor.left, top: anchor.top, right: anchor.right, bottom: anchor.bottom },
+        panel: { width: panel.offsetWidth, height: panel.scrollHeight },
+        viewport: { width: window.innerWidth, height: window.innerHeight },
+        prefer: 'side',
+      }),
+    )
+  }, [submenu])
+
+  const submenuStyle = {
+    position: 'fixed' as const,
+    left: placement?.left ?? 0,
+    top: placement?.top ?? 0,
+    maxHeight: placement?.maxHeight,
+    overflowY: 'auto' as const,
+    // Até a medição terminar o painel existe mas não aparece — senão ele pisca um quadro na
+    // posição errada, que é justamente o salto que esta correção remove.
+    visibility: placement ? ('visible' as const) : ('hidden' as const),
+  }
 
   function select(spec: NewNodeSpec) {
     onSelect(spec)
@@ -55,6 +94,7 @@ export function FlowPaletteMenu({ onSelect, labels, actionOptions }: FlowPalette
     <>
       <div className="relative">
         <button
+          ref={questionTriggerRef}
           data-cv-tooltip={labels.palette.question} aria-label={labels.palette.question}
           onMouseEnter={() => setSubmenu('question')}
           onClick={() => setSubmenu(submenu === 'question' ? null : 'question')}
@@ -66,7 +106,11 @@ export function FlowPaletteMenu({ onSelect, labels, actionOptions }: FlowPalette
           <ChevronRight size={13} className="text-gray-400" />
         </button>
         {submenu === 'question' && (
-          <div className="absolute left-full top-0 ml-1 w-56 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1">
+          <div
+            ref={submenuRef}
+            style={submenuStyle}
+            className="z-50 w-56 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1"
+          >
             {QUESTION_TYPES.map((qt) => (
               <button
                 data-cv-tooltip={labels.questionTypeLabels[qt]} aria-label={labels.questionTypeLabels[qt]}
@@ -101,6 +145,7 @@ export function FlowPaletteMenu({ onSelect, labels, actionOptions }: FlowPalette
 
       <div className="relative">
         <button
+          ref={actionTriggerRef}
           data-cv-tooltip={labels.palette.action} aria-label={labels.palette.action}
           onMouseEnter={() => setSubmenu('action')}
           onClick={() => setSubmenu(submenu === 'action' ? null : 'action')}
@@ -112,7 +157,11 @@ export function FlowPaletteMenu({ onSelect, labels, actionOptions }: FlowPalette
           <ChevronRight size={13} className="text-gray-400" />
         </button>
         {submenu === 'action' && (
-          <div className="absolute left-full top-0 ml-1 w-64 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1">
+          <div
+            ref={submenuRef}
+            style={submenuStyle}
+            className="z-50 w-64 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1"
+          >
             {resolvedActionOptions.map((option) => (
               <button
                 data-cv-tooltip={option.label} aria-label={option.label}

package/src/flows/FlowsWorkspace.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from 'react'
 import {
   ReactFlow,
   Background,
@@ -51,6 +51,7 @@ import {
   removeNodeAndCleanRefs,
   resolveConnection,
 } from './flowEditorOps'
+import { placeFloatingPanel, type FloatingPlacement } from './flowMenuPlacement'
 import {
   computeAutoLayout,
   targetsOf,
@@ -103,6 +104,9 @@ const EDGE_COLOR_LINEAR = '#94a3b8'
 const FOCUS_MAX_ZOOM = 1
 const FOCUS_PADDING = 0.2
 const FOCUS_DURATION_MS = 400
+
+/** Folga entre o "+" e o menu que ele abre. */
+const QUICK_ADD_MENU_GAP = 12
 const EDGE_COLOR_BRANCH = '#8b5cf6'
 const EDGE_COLOR_FALLBACK = '#cbd5e1'
 const EDGE_COLOR_LIVE = '#3b82f6'
@@ -268,6 +272,8 @@ export function FlowsWorkspace({
   const [flowInstance, setFlowInstance] = useState<ReactFlowInstance | null>(null)
   const [pendingFocusNodeId, setPendingFocusNodeId] = useState<string | null>(null)
   const [pendingFocusFlowKey, setPendingFocusFlowKey] = useState<string | null>(null)
+  const quickAddMenuRef = useRef<HTMLDivElement>(null)
+  const [quickAddPlacement, setQuickAddPlacement] = useState<FloatingPlacement | null>(null)
 
   const reloadGraphs = useCallback(async () => {
     try {
@@ -663,6 +669,35 @@ export function FlowsWorkspace({
     setPendingFocusFlowKey(null)
   }, [pendingFocusFlowKey, flowInstance, rfNodes])
 
+  // O menu do "+" saía da tela quando o card estava perto da borda: a âncora era usada crua, sem
+  // consultar o tamanho da janela. Mede depois de montar e reposiciona antes da pintura.
+  useLayoutEffect(() => {
+    if (!quickAddFrom) {
+      setQuickAddPlacement(null)
+      return
+    }
+    const panel = quickAddMenuRef.current
+    if (!panel) return
+    const { x, y } = quickAddFrom.anchor
+    setQuickAddPlacement(
+      placeFloatingPanel({
+        anchor: { left: x, top: y, right: x, bottom: y },
+        panel: { width: panel.offsetWidth, height: panel.scrollHeight },
+        viewport: { width: window.innerWidth, height: window.innerHeight },
+        prefer: 'below',
+        gap: QUICK_ADD_MENU_GAP,
+      }),
+    )
+  }, [quickAddFrom])
+
+  const quickAddMenuStyle = {
+    left: quickAddPlacement?.left ?? 0,
+    top: quickAddPlacement?.top ?? 0,
+    maxHeight: quickAddPlacement?.maxHeight,
+    overflowY: 'auto' as const,
+    visibility: quickAddPlacement ? ('visible' as const) : ('hidden' as const),
+  }
+
   const onNodesChange = useCallback((changes: NodeChange[]) => {
     setRfNodes((current) => applyNodeChanges(changes, current))
   }, [])
@@ -1071,8 +1106,9 @@ export function FlowsWorkspace({
         <>
           <div className="fixed inset-0 z-40" onClick={() => setQuickAddFrom(null)} />
           <div
+            ref={quickAddMenuRef}
             className="fixed z-50 w-64 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1"
-            style={{ left: quickAddFrom.anchor.x + 12, top: quickAddFrom.anchor.y }}
+            style={quickAddMenuStyle}
           >
             <p className="px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500">
               {labels.quickAdd.title}

package/src/flows/flowMenuPlacement.test.ts

@@ -0,0 +1,130 @@
+/**
+ * Copyright (c) 2026 Ada Technology. MIT License.
+ *
+ * O caso que originou isto: o submenu "Ação" aberto perto do rodapé mostrava metade da lista, com
+ * "Enviar catálogo de produtos" cortado pela borda — e sem rolagem, o item era inalcançável.
+ */
+
+import { describe, expect, it } from 'bun:test'
+
+import { placeFloatingPanel } from './flowMenuPlacement'
+
+const VIEWPORT = { width: 1200, height: 800 }
+const rect = (left: number, top: number, width = 0, height = 0) => ({
+  left,
+  top,
+  right: left + width,
+  bottom: top + height,
+})
+
+describe('menu abaixo do ponto clicado', () => {
+  it('fica onde foi pedido quando há espaço', () => {
+    const placement = placeFloatingPanel({
+      anchor: rect(100, 100),
+      panel: { width: 256, height: 300 },
+      viewport: VIEWPORT,
+      prefer: 'below',
+    })
+
+    expect(placement.left).toBeGreaterThanOrEqual(100)
+    expect(placement.top).toBe(100)
+    expect(placement.maxHeight).toBe(300)
+  })
+
+  it('encosta na borda direita em vez de sair dela', () => {
+    const placement = placeFloatingPanel({
+      anchor: rect(1150, 100),
+      panel: { width: 256, height: 300 },
+      viewport: VIEWPORT,
+      prefer: 'below',
+    })
+
+    expect(placement.left + 256).toBeLessThanOrEqual(VIEWPORT.width)
+  })
+
+  it('sobe quando não cabe para baixo, em vez de vazar pelo rodapé', () => {
+    const placement = placeFloatingPanel({
+      anchor: rect(100, 700),
+      panel: { width: 256, height: 300 },
+      viewport: VIEWPORT,
+      prefer: 'below',
+    })
+
+    expect(placement.top + placement.maxHeight).toBeLessThanOrEqual(VIEWPORT.height)
+    expect(placement.top).toBeLessThan(700)
+  })
+})
+
+describe('submenu ao lado do item', () => {
+  it('abre à direita quando cabe', () => {
+    const placement = placeFloatingPanel({
+      anchor: rect(300, 200, 256, 36),
+      panel: { width: 256, height: 240 },
+      viewport: VIEWPORT,
+      prefer: 'side',
+    })
+
+    expect(placement.left).toBeGreaterThanOrEqual(300 + 256)
+  })
+
+  it('vira para a esquerda quando não cabe à direita', () => {
+    const placement = placeFloatingPanel({
+      anchor: rect(900, 200, 256, 36),
+      panel: { width: 256, height: 240 },
+      viewport: VIEWPORT,
+      prefer: 'side',
+    })
+
+    expect(placement.left).toBeLessThan(900)
+    expect(placement.left).toBeGreaterThanOrEqual(0)
+  })
+
+  it('lista longa perto do rodapé ganha rolagem em vez de ser cortada', () => {
+    // O caso da captura: submenu de ações mais alto que o espaço abaixo do item.
+    const placement = placeFloatingPanel({
+      anchor: rect(300, 620, 256, 36),
+      panel: { width: 256, height: 520 },
+      viewport: VIEWPORT,
+      prefer: 'side',
+    })
+
+    expect(placement.top + placement.maxHeight).toBeLessThanOrEqual(VIEWPORT.height)
+    expect(placement.maxHeight).toBeLessThanOrEqual(520)
+  })
+
+  it('painel mais alto que a tela cabe inteiro na tela, rolando por dentro', () => {
+    const placement = placeFloatingPanel({
+      anchor: rect(300, 400, 256, 36),
+      panel: { width: 256, height: 2000 },
+      viewport: VIEWPORT,
+      prefer: 'side',
+    })
+
+    expect(placement.top).toBeGreaterThanOrEqual(0)
+    expect(placement.maxHeight).toBeLessThan(VIEWPORT.height)
+    expect(placement.top + placement.maxHeight).toBeLessThanOrEqual(VIEWPORT.height)
+  })
+})
+
+describe('os menus do editor usam a conta acima', () => {
+  /**
+   * A função pura pode estar correta e ninguém chamá-la. Estes dois amarram o uso: sem eles a
+   * correção some no primeiro refactor e o menu volta a encostar na borda.
+   */
+  it('o menu do "+" mede antes de posicionar, em vez de usar a âncora crua', async () => {
+    const content = await Bun.file(`${import.meta.dir}/FlowsWorkspace.tsx`).text()
+
+    expect(content).toContain('placeFloatingPanel')
+    expect(content).not.toContain('left: quickAddFrom.anchor.x + 12')
+  })
+
+  it('o submenu não fica mais preso ao item por CSS', async () => {
+    const content = await Bun.file(`${import.meta.dir}/FlowPalette.tsx`).text()
+
+    expect(content).toContain('placeFloatingPanel')
+    // Verifica o uso em JSX, não a menção: o comentário do arquivo cita a classe antiga para
+    // explicar o que mudou, e casar com o texto solto reprovaria a própria explicação.
+    expect(content).not.toContain('className="absolute left-full')
+    expect(content).toContain('overflowY')
+  })
+})

package/src/flows/flowMenuPlacement.ts

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2026 Ada Technology. MIT License.
+ *
+ * Onde um menu flutuante do editor pode aparecer sem sair da tela.
+ *
+ * Existe porque tanto o menu do "+" quanto os submenus dele eram posicionados por uma âncora crua:
+ * o menu em `fixed` na coordenada do clique, os submenus em `left-full top-0`. Card perto da borda
+ * direita jogava o menu para fora; item de ação perto do rodapé cortava a lista no meio, e não havia
+ * como rolar nem alcançar o resto — o menu ficava preso contra a borda.
+ *
+ * A conta é pura de propósito: é ela que decide se o operador consegue clicar na opção, e testá-la
+ * exige apenas números.
+ */
+
+/** Retângulo do gatilho. Um clique é um retângulo de tamanho zero. */
+export type AnchorRect = {
+  readonly left: number
+  readonly top: number
+  readonly right: number
+  readonly bottom: number
+}
+
+export type PanelSize = {
+  readonly width: number
+  readonly height: number
+}
+
+export type ViewportSize = {
+  readonly width: number
+  readonly height: number
+}
+
+export type FloatingPlacement = {
+  readonly left: number
+  readonly top: number
+  /** Teto de altura: acima disso o painel rola por dentro em vez de vazar pelo rodapé. */
+  readonly maxHeight: number
+}
+
+export type PlaceFloatingPanelParams = {
+  readonly anchor: AnchorRect
+  readonly panel: PanelSize
+  readonly viewport: ViewportSize
+  /** `side`: submenu sai ao lado do item; `below`: menu sai abaixo do ponto clicado. */
+  readonly prefer: 'side' | 'below'
+  readonly gap?: number
+  readonly margin?: number
+}
+
+const DEFAULT_GAP = 4
+const DEFAULT_MARGIN = 8
+
+function clamp(value: number, minimum: number, maximum: number): number {
+  // `maximum` menor que `minimum` acontece com painel maior que a viewport: a margem de cima manda,
+  // porque cortar em cima esconde o começo da lista.
+  return Math.max(minimum, Math.min(value, Math.max(minimum, maximum)))
+}
+
+export function placeFloatingPanel({
+  anchor,
+  panel,
+  viewport,
+  prefer,
+  gap = DEFAULT_GAP,
+  margin = DEFAULT_MARGIN,
+}: PlaceFloatingPanelParams): FloatingPlacement {
+  const maxHeight = Math.min(panel.height, viewport.height - margin * 2)
+
+  let left: number
+  if (prefer === 'side') {
+    // Vira para a esquerda quando não cabe à direita — o inverso de escolher sempre um lado.
+    const toTheRight = anchor.right + gap
+    const toTheLeft = anchor.left - gap - panel.width
+    left = toTheRight + panel.width <= viewport.width - margin ? toTheRight : toTheLeft
+  } else {
+    left = anchor.left + gap
+  }
+  left = clamp(left, margin, viewport.width - margin - panel.width)
+
+  const top = prefer === 'side' ? anchor.top : anchor.bottom
+  return {
+    left,
+    top: clamp(top, margin, viewport.height - margin - maxHeight),
+    maxHeight,
+  }
+}

package/src/index.ts

@@ -42,6 +42,17 @@ export { MessageTail } from './MessageTail'
 // plataforma e do ofício de atender, não de um produto — por isso moram aqui.
 export { CONVERSATION_WINDOW, WINDOW_FILTERS, windowOf, formatStalledFor } from './conversationWindow'
 export type { WindowOfParams } from './conversationWindow'
+
+// Tempo sem resposta (SLA), distinto da janela de sessão acima: o host usa isto para o alerta e
+// para filtrar quem está esperando demais.
+export {
+  REPLY_LATENCY,
+  REPLY_LATENCY_LATE_HOURS,
+  REPLY_LATENCY_CRITICAL_HOURS,
+  replyLatencyOf,
+  isReplyOverdue,
+} from './replyLatency'
+export type { ReplyLatency, ReplyLatencyParams } from './replyLatency'
 // Canal de origem: capacidades por plataforma (janela de sessão, reabertura, tipo de identificador).
 export {
   CONVERSATION_CHANNEL,

package/src/replyLatency.test.ts

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2026 Ada Technology. MIT License.
+ *
+ * A distinção que estes testes protegem: janela de sessão e tempo sem resposta medem coisas
+ * diferentes, e reaproveitar `windowOf` para o SLA marcaria como atrasada toda conversa já
+ * respondida — o alerta apontaria para tudo, ou seja, para nada.
+ */
+
+import { describe, expect, it } from 'bun:test'
+
+import { REPLY_LATENCY, isReplyOverdue, replyLatencyOf } from './replyLatency'
+
+const NOW = new Date('2026-08-29T12:00:00Z').getTime()
+const hoursAgo = (hours: number) => new Date(NOW - hours * 60 * 60 * 1000).toISOString()
+
+describe('faixas de espera', () => {
+  it('até 6h está dentro do combinado', () => {
+    expect(replyLatencyOf({ lastDirection: 'inbound', lastInboundAt: hoursAgo(0), now: NOW })).toBe(
+      REPLY_LATENCY.WITHIN,
+    )
+    expect(replyLatencyOf({ lastDirection: 'inbound', lastInboundAt: hoursAgo(5.9), now: NOW })).toBe(
+      REPLY_LATENCY.WITHIN,
+    )
+  })
+
+  it('de 6h a 12h já passou do combinado', () => {
+    expect(replyLatencyOf({ lastDirection: 'inbound', lastInboundAt: hoursAgo(6), now: NOW })).toBe(REPLY_LATENCY.LATE)
+    expect(replyLatencyOf({ lastDirection: 'inbound', lastInboundAt: hoursAgo(11.9), now: NOW })).toBe(
+      REPLY_LATENCY.LATE,
+    )
+  })
+
+  it('acima de 12h é crítico — não se confunde com uma espera de 7h', () => {
+    expect(replyLatencyOf({ lastDirection: 'inbound', lastInboundAt: hoursAgo(12), now: NOW })).toBe(
+      REPLY_LATENCY.CRITICAL,
+    )
+    expect(replyLatencyOf({ lastDirection: 'inbound', lastInboundAt: hoursAgo(72), now: NOW })).toBe(
+      REPLY_LATENCY.CRITICAL,
+    )
+  })
+})
+
+describe('quando não há espera a mostrar', () => {
+  it('conversa já respondida não tem selo, por mais antiga que seja', () => {
+    // É aqui que o SLA se separa da janela de sessão: `windowOf` marcaria isto como crítico.
+    expect(replyLatencyOf({ lastDirection: 'outbound', lastInboundAt: hoursAgo(20), now: NOW })).toBeNull()
+  })
+
+  it('cliente que nunca escreveu não tem espera', () => {
+    expect(replyLatencyOf({ lastDirection: 'inbound', lastInboundAt: null, now: NOW })).toBeNull()
+  })
+
+  it('direção desconhecida não afirma espera', () => {
+    expect(replyLatencyOf({ lastInboundAt: hoursAgo(20), now: NOW })).toBeNull()
+  })
+
+  it('relógio adiantado não vira conversa crítica', () => {
+    expect(replyLatencyOf({ lastDirection: 'inbound', lastInboundAt: hoursAgo(-0.05), now: NOW })).toBe(
+      REPLY_LATENCY.WITHIN,
+    )
+  })
+})
+
+describe('o que merece alerta', () => {
+  it('só o que passou de 6h', () => {
+    expect(isReplyOverdue(REPLY_LATENCY.WITHIN)).toBe(false)
+    expect(isReplyOverdue(REPLY_LATENCY.LATE)).toBe(true)
+    expect(isReplyOverdue(REPLY_LATENCY.CRITICAL)).toBe(true)
+    expect(isReplyOverdue(null)).toBe(false)
+  })
+})

package/src/replyLatency.ts

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2026 Ada Technology. MIT License.
+ *
+ * Há quanto tempo o cliente espera resposta.
+ *
+ * Não confundir com `conversationWindow`: aquilo é a janela de sessão da plataforma (o que o canal
+ * ainda deixa enviar), isto é serviço (quanto o cliente esperou). Os dois divergem justamente no
+ * caso que interessa — respondida a conversa, o relógio do SLA para e o da janela continua correndo.
+ *
+ * A conta sai de dados que a listagem já traz: se a última mensagem foi do cliente, ninguém
+ * respondeu ainda e a espera conta desde ela. Se a última foi nossa, não há espera pendente.
+ */
+
+const HOUR_MS = 60 * 60 * 1000
+
+export const REPLY_LATENCY = {
+  /** Até 6h — dentro do combinado. */
+  WITHIN: 'within',
+  /** 6h a 12h — passou do combinado. */
+  LATE: 'late',
+  /** Acima de 12h. */
+  CRITICAL: 'critical',
+} as const
+export type ReplyLatency = (typeof REPLY_LATENCY)[keyof typeof REPLY_LATENCY]
+
+export const REPLY_LATENCY_LATE_HOURS = 6
+export const REPLY_LATENCY_CRITICAL_HOURS = 12
+
+export type ReplyLatencyParams = {
+  /** Direção da última mensagem. Ausente = desconhecida, e aí não se afirma espera. */
+  readonly lastDirection?: 'inbound' | 'outbound' | undefined
+  readonly lastInboundAt: string | null
+  readonly now: number
+}
+
+/**
+ * `null` quando não há espera a mostrar — conversa já respondida, ou cliente que nunca escreveu.
+ *
+ * Devolver uma faixa nesses casos encheria a lista de selos em conversa que não deve nada, e o
+ * alerta que aponta para todo lado não aponta para lugar nenhum.
+ */
+export function replyLatencyOf(params: ReplyLatencyParams): ReplyLatency | null {
+  if (params.lastDirection !== 'inbound') return null
+  if (!params.lastInboundAt) return null
+
+  const elapsedHours = (params.now - new Date(params.lastInboundAt).getTime()) / HOUR_MS
+  // Espera negativa é relógio fora de sincronia entre servidor e navegador, não conversa do futuro:
+  // tratar como recém-chegada evita um selo "crítico" nascido de alguns segundos de diferença.
+  if (elapsedHours < REPLY_LATENCY_LATE_HOURS) return REPLY_LATENCY.WITHIN
+  if (elapsedHours < REPLY_LATENCY_CRITICAL_HOURS) return REPLY_LATENCY.LATE
+  return REPLY_LATENCY.CRITICAL
+}
+
+/** Só o que passou do combinado merece alerta — é o corte que a lista usa para destacar. */
+export function isReplyOverdue(latency: ReplyLatency | null): boolean {
+  return latency === REPLY_LATENCY.LATE || latency === REPLY_LATENCY.CRITICAL
+}