@adatechnology/conversations-ui 0.1.0-rc.9 → 0.1.1

package/src/flows/FlowNodePanel.tsx

@@ -1,8 +1,8 @@
-import { useState } from 'react'
+import { useState, type ReactNode } from 'react'
 import { Plus, Trash2, Save, X, AlertTriangle, AlertCircle } from 'lucide-react'
 import { FlowWhatsAppPreview } from './FlowWhatsAppPreview'
 import { nodeLabel } from './FlowNodeCard'
-import { CROSS_FLOW_PREFIX, CONDITION_OPERATORS } from './flowGraph'
+import { CROSS_FLOW_PREFIX, CONDITION_OPERATORS, BUILT_IN_ACTION_KINDS, PASS_THROUGH_ACTION_KINDS } from './flowGraph'
 import { DEFAULT_FLOW_EDITOR_LABELS, type FlowEditorLabels } from './labels'
 import type { FlowGraphData, FlowNodeData, GraphIssue } from './flowGraph'
 
@@ -73,6 +73,14 @@ export interface FlowNodePanelProps {
   onChange: (updated: FlowNodeData) => void
   onDelete: (nodeId: string) => void
   labels?: Partial<FlowEditorLabels>
+  /**
+   * Seletor de arquivos do nó `send_media`, renderizado no lugar da mensagem direta.
+   *
+   * Slot, e não uma lista de arquivos por prop, porque a biblioteca é do host: upload, permissão e
+   * URL assinada são dele, e o painel não tem como buscar nada. Ausente, o nó continua editável —
+   * só não dá para anexar por aqui.
+   */
+  renderMediaPicker?: (node: FlowNodeData, graph: FlowGraphData) => ReactNode
 }
 
 // Paridade com financiamento-imobiliario-bot/apps/web/src/components/flows/FlowNodePanel.tsx —
@@ -86,18 +94,27 @@ export function FlowNodePanel({
   onChange,
   onDelete,
   labels: labelsOverride,
+  renderMediaPicker,
 }: FlowNodePanelProps) {
   const labels = { ...DEFAULT_FLOW_EDITOR_LABELS, ...labelsOverride }
   const [draft, setDraft] = useState<FlowNodeData>(node)
   const otherNodeIds = Object.keys(graph.nodes).filter((id) => id !== node.id)
   const isFixedLogic = draft.type === 'entrada_choice'
   const isAction = draft.type === 'action'
+  const isSendMedia = isAction && draft.actionKind === BUILT_IN_ACTION_KINDS.SEND_MEDIA
+  const isPassThroughAction = isAction && Boolean(draft.actionKind && PASS_THROUGH_ACTION_KINDS.includes(draft.actionKind))
   const isCondition = draft.type === 'condition'
   const isStart = graph.startNodeId === node.id
   const nodeIssues = issues.filter((i) => i.nodeId === node.id)
   // Chaves já usadas por perguntas deste fluxo — sugestão pro campo de variável da condição,
   // sem travar em texto livre (a variável pode ter vindo de outro fluxo ou de um cálculo derivado).
-  const knownContextKeys = [...new Set(Object.values(graph.nodes).map((n) => n.contextKey).filter((key): key is string => !!key))]
+  const knownContextKeys = [
+    ...new Set(
+      Object.values(graph.nodes)
+        .map((n) => n.contextKey)
+        .filter((key): key is string => !!key),
+    ),
+  ]
   const conditionAnswerIds = isCondition ? ['true', 'false'] : (draft.options ?? []).map(([id]) => id)
 
   function updateNextString(value: string) {
@@ -106,7 +123,8 @@ export function FlowNodePanel({
 
   function updateNextByAnswer(answerId: string, value: string) {
     setDraft((prev) => {
-      const current = typeof prev.next === 'object' && prev.next ? prev.next : { byAnswer: {}, default: otherNodeIds[0] ?? '' }
+      const current =
+        typeof prev.next === 'object' && prev.next ? prev.next : { byAnswer: {}, default: otherNodeIds[0] ?? '' }
       return { ...prev, next: { ...current, byAnswer: { ...current.byAnswer, [answerId]: value } } }
     })
   }
@@ -129,7 +147,10 @@ export function FlowNodePanel({
   }
 
   function addOption() {
-    setDraft((prev) => ({ ...prev, options: [...(prev.options ?? []), [String((prev.options?.length ?? 0) + 1), 'Nova opção']] }))
+    setDraft((prev) => ({
+      ...prev,
+      options: [...(prev.options ?? []), [String((prev.options?.length ?? 0) + 1), 'Nova opção']],
+    }))
   }
 
   function removeOption(index: number) {
@@ -140,12 +161,16 @@ export function FlowNodePanel({
     return (
       <>
         {otherNodeIds.map((id) => (
-          <option key={id} value={id}>{truncateLabel(nodeLabel(graph.nodes[id], labels))}</option>
+          <option key={id} value={id}>
+            {truncateLabel(nodeLabel(graph.nodes[id], labels))}
+          </option>
         ))}
         {otherFlows.length > 0 && (
           <optgroup label={labels.nodePanel.otherFlowsGroup}>
             {otherFlows.map((flow) => (
-              <option key={flow.key} value={`${CROSS_FLOW_PREFIX}${flow.key}`}>{flow.label}</option>
+              <option key={flow.key} value={`${CROSS_FLOW_PREFIX}${flow.key}`}>
+                {flow.label}
+              </option>
             ))}
           </optgroup>
         )}
@@ -157,13 +182,17 @@ export function FlowNodePanel({
     <div className="fixed inset-y-0 right-0 w-96 bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700 shadow-xl z-50 flex flex-col">
       <div className="flex items-center justify-between px-4 py-3 border-b border-gray-100 dark:border-gray-700">
         <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">{labels.nodePanel.title}</h3>
-        <button onClick={onClose} className="text-gray-400 hover:text-gray-600"><X size={18} /></button>
+        <button data-cv-tooltip={labels.nodePanel.close} aria-label={labels.nodePanel.close} onClick={onClose} className="text-gray-400 hover:text-gray-600">
+          <X size={18} />
+        </button>
       </div>
 
       <div className="flex-1 overflow-y-auto p-4 space-y-4">
         {nodeIssues.length > 0 && (
           <div className="rounded-lg border border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/40 p-2.5 space-y-1.5">
-            {nodeIssues.map((issue, i) => <IssueRow key={i} issue={issue} />)}
+            {nodeIssues.map((issue, i) => (
+              <IssueRow key={i} issue={issue} />
+            ))}
           </div>
         )}
 
@@ -183,23 +212,48 @@ export function FlowNodePanel({
           </p>
         )}
 
+        <div>
+          <label className="text-xs font-medium text-gray-500 dark:text-gray-400">
+            {labels.nodePanel.nodeName}
+          </label>
+          <input
+            value={draft.label ?? ''}
+            placeholder={labels.nodePanel.nodeNamePlaceholder}
+            onChange={(event) => setDraft((prev) => ({ ...prev, label: event.target.value || undefined }))}
+            className={`w-full mt-1 ${INPUT_CLASSNAME}`}
+          />
+          <p className="text-[11px] text-gray-400 dark:text-gray-500 mt-1">{labels.nodePanel.nodeNameHint}</p>
+        </div>
+
         {draft.contextKey && (
           <div>
-            <label className="text-xs font-medium text-gray-500 dark:text-gray-400">{labels.nodePanel.contextKey}</label>
-            <input value={draft.contextKey} disabled className="w-full mt-1 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 px-3 py-2.5 text-sm text-gray-500" />
+            <label className="text-xs font-medium text-gray-500 dark:text-gray-400">
+              {labels.nodePanel.contextKey}
+            </label>
+            <input
+              value={draft.contextKey}
+              disabled
+              className="w-full mt-1 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 px-3 py-2.5 text-sm text-gray-500"
+            />
           </div>
         )}
 
         {!isFixedLogic && !isAction && !isCondition && (
           <div>
-            <label className="text-xs font-medium text-gray-500 dark:text-gray-400">{labels.nodePanel.questionType}</label>
+            <label className="text-xs font-medium text-gray-500 dark:text-gray-400">
+              {labels.nodePanel.questionType}
+            </label>
             <select
               value={draft.questionType ?? 'text'}
-              onChange={(e) => setDraft((prev) => ({ ...prev, questionType: e.target.value as FlowNodeData['questionType'] }))}
+              onChange={(e) =>
+                setDraft((prev) => ({ ...prev, questionType: e.target.value as FlowNodeData['questionType'] }))
+              }
               className={`w-full mt-1 ${SELECT_CLASSNAME}`}
             >
               {Object.entries(labels.questionTypeLabels).map(([key, label]) => (
-                <option key={key} value={key}>{label}</option>
+                <option key={key} value={key}>
+                  {label}
+                </option>
               ))}
             </select>
           </div>
@@ -218,7 +272,9 @@ export function FlowNodePanel({
         {isCondition && (
           <div className="space-y-3">
             <div>
-              <label className="text-xs font-medium text-gray-500 dark:text-gray-400">{labels.nodePanel.conditionVariable}</label>
+              <label className="text-xs font-medium text-gray-500 dark:text-gray-400">
+                {labels.nodePanel.conditionVariable}
+              </label>
               <input
                 value={draft.conditionContextKey ?? ''}
                 onChange={(e) => setDraft((prev) => ({ ...prev, conditionContextKey: e.target.value }))}
@@ -226,23 +282,36 @@ export function FlowNodePanel({
                 className={`w-full mt-1 ${INPUT_CLASSNAME}`}
               />
               <datalist id="condition-context-keys">
-                {knownContextKeys.map((key) => <option key={key} value={key} />)}
+                {knownContextKeys.map((key) => (
+                  <option key={key} value={key} />
+                ))}
               </datalist>
             </div>
             <div>
-              <label className="text-xs font-medium text-gray-500 dark:text-gray-400">{labels.nodePanel.conditionOperator}</label>
+              <label className="text-xs font-medium text-gray-500 dark:text-gray-400">
+                {labels.nodePanel.conditionOperator}
+              </label>
               <select
                 value={draft.conditionOperator ?? '>'}
-                onChange={(e) => setDraft((prev) => ({ ...prev, conditionOperator: e.target.value as FlowNodeData['conditionOperator'] }))}
+                onChange={(e) =>
+                  setDraft((prev) => ({
+                    ...prev,
+                    conditionOperator: e.target.value as FlowNodeData['conditionOperator'],
+                  }))
+                }
                 className={`w-full mt-1 ${SELECT_CLASSNAME}`}
               >
                 {CONDITION_OPERATORS.map((operator) => (
-                  <option key={operator} value={operator}>{labels.conditionOperatorLabels[operator] ?? operator}</option>
+                  <option key={operator} value={operator}>
+                    {labels.conditionOperatorLabels[operator] ?? operator}
+                  </option>
                 ))}
               </select>
             </div>
             <div>
-              <label className="text-xs font-medium text-gray-500 dark:text-gray-400">{labels.nodePanel.conditionValue}</label>
+              <label className="text-xs font-medium text-gray-500 dark:text-gray-400">
+                {labels.nodePanel.conditionValue}
+              </label>
               <input
                 value={draft.conditionValue ?? ''}
                 onChange={(e) => setDraft((prev) => ({ ...prev, conditionValue: e.target.value }))}
@@ -262,7 +331,21 @@ export function FlowNodePanel({
           />
         )}
 
-        {isAction && draft.actionKind !== 'send_product_list' && (
+        {/* Os arquivos moram na biblioteca, não no grafo — trocar o material não repassa pelo editor. */}
+        {isSendMedia && (
+          <div>
+            <label className="text-xs font-medium text-gray-500 dark:text-gray-400">{labels.nodePanel.media}</label>
+            <div className="mt-1">
+              {renderMediaPicker?.(node, graph) ?? (
+                <p className="text-xs text-gray-400">{labels.nodePanel.mediaUnavailable}</p>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* `send_media` fica de fora: o handler do módulo só envia os anexos, então um campo de
+            mensagem aqui seria texto que o cliente nunca recebe. A legenda é por arquivo. */}
+        {isAction && draft.actionKind !== 'send_product_list' && !isSendMedia && (
           <WhatsAppTextField
             label={labels.nodePanel.directMessage}
             value={draft.directMessage ?? ''}
@@ -276,31 +359,46 @@ export function FlowNodePanel({
           <div>
             <div className="flex items-center justify-between mb-1.5">
               <label className="text-xs font-medium text-gray-500 dark:text-gray-400">{labels.nodePanel.options}</label>
-              <button onClick={addOption} className="text-xs text-blue-600 hover:underline flex items-center gap-1">
+              <button data-cv-tooltip={labels.nodePanel.addOption} aria-label={labels.nodePanel.addOption} onClick={addOption} className="text-xs text-blue-600 hover:underline flex items-center gap-1">
                 <Plus size={12} /> {labels.nodePanel.addOption}
               </button>
             </div>
             <div className="space-y-2">
               {(draft.options ?? []).map(([id, label], i) => (
                 <div key={i} className="flex items-center gap-2">
-                  <input value={id} onChange={(e) => updateOption(i, 0, e.target.value)} placeholder={labels.nodePanel.optionId}
-                    className={`w-16 ${INPUT_CLASSNAME}`} />
-                  <input value={label} onChange={(e) => updateOption(i, 1, e.target.value)} placeholder={labels.nodePanel.optionLabel}
-                    className={`flex-1 ${INPUT_CLASSNAME}`} />
-                  <button onClick={() => removeOption(i)} className="text-gray-400 hover:text-red-600"><Trash2 size={14} /></button>
+                  <input
+                    value={id}
+                    onChange={(e) => updateOption(i, 0, e.target.value)}
+                    placeholder={labels.nodePanel.optionId}
+                    className={`w-16 ${INPUT_CLASSNAME}`}
+                  />
+                  <input
+                    value={label}
+                    onChange={(e) => updateOption(i, 1, e.target.value)}
+                    placeholder={labels.nodePanel.optionLabel}
+                    className={`flex-1 ${INPUT_CLASSNAME}`}
+                  />
+                  <button data-cv-tooltip={labels.nodePanel.removeOption} aria-label={labels.nodePanel.removeOption} onClick={() => removeOption(i)} className="text-gray-400 hover:text-red-600">
+                    <Trash2 size={14} />
+                  </button>
                 </div>
               ))}
             </div>
           </div>
         )}
 
-        {!isAction && (
+        {/* Ação de passagem também escolhe destino: sem isto, o material era enviado e a conversa
+            parava ali, sem caminho para o atendimento. Ação terminal continua sem o campo. */}
+        {(!isAction || isPassThroughAction) && (
           <div className="pt-2 border-t border-gray-100 dark:border-gray-700">
             <label className="text-xs font-medium text-gray-500 dark:text-gray-400">{labels.nodePanel.next}</label>
             <p className="text-[11px] text-gray-400 dark:text-gray-500 mb-1">{labels.nodePanel.nextHint}</p>
             {typeof draft.next !== 'object' && !isCondition ? (
-              <select value={typeof draft.next === 'string' ? draft.next : ''} onChange={(e) => updateNextString(e.target.value)}
-                className={`w-full mt-1 ${SELECT_CLASSNAME}`}>
+              <select
+                value={typeof draft.next === 'string' ? draft.next : ''}
+                onChange={(e) => updateNextString(e.target.value)}
+                className={`w-full mt-1 ${SELECT_CLASSNAME}`}
+              >
                 <option value="">—</option>
                 {nextNodeOptions()}
               </select>
@@ -309,10 +407,17 @@ export function FlowNodePanel({
                 {conditionAnswerIds.map((id) => (
                   <div key={id} className="flex items-center gap-2">
                     <span className="text-xs text-gray-500 w-32 shrink-0">
-                      {isCondition ? (id === 'true' ? labels.nodePanel.conditionTrue : labels.nodePanel.conditionFalse) : labels.nodePanel.nextByAnswer(id)}
+                      {isCondition
+                        ? id === 'true'
+                          ? labels.nodePanel.conditionTrue
+                          : labels.nodePanel.conditionFalse
+                        : labels.nodePanel.nextByAnswer(id)}
                     </span>
-                    <select value={draft.next && typeof draft.next === 'object' ? draft.next.byAnswer[id] ?? '' : ''} onChange={(e) => updateNextByAnswer(id, e.target.value)}
-                      className={`flex-1 ${SELECT_CLASSNAME}`}>
+                    <select
+                      value={draft.next && typeof draft.next === 'object' ? (draft.next.byAnswer[id] ?? '') : ''}
+                      onChange={(e) => updateNextByAnswer(id, e.target.value)}
+                      className={`flex-1 ${SELECT_CLASSNAME}`}
+                    >
                       <option value="">—</option>
                       {nextNodeOptions()}
                     </select>
@@ -322,8 +427,11 @@ export function FlowNodePanel({
                   <span className="text-xs text-gray-500 w-32 shrink-0">
                     {isCondition ? labels.nodePanel.conditionVariableMissing : labels.nodePanel.nextDefault}
                   </span>
-                  <select value={draft.next && typeof draft.next === 'object' ? draft.next.default : ''} onChange={(e) => updateNextDefault(e.target.value)}
-                    className={`flex-1 ${SELECT_CLASSNAME}`}>
+                  <select
+                    value={draft.next && typeof draft.next === 'object' ? draft.next.default : ''}
+                    onChange={(e) => updateNextDefault(e.target.value)}
+                    className={`flex-1 ${SELECT_CLASSNAME}`}
+                  >
                     <option value="">—</option>
                     {nextNodeOptions()}
                   </select>
@@ -335,19 +443,25 @@ export function FlowNodePanel({
       </div>
 
       <div className="p-4 border-t border-gray-100 dark:border-gray-700 flex gap-2">
-        <button onClick={() => onChange(draft)} className="flex-1 inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">
+        <button
+          data-cv-tooltip={labels.nodePanel.save} aria-label={labels.nodePanel.save}
+          onClick={() => onChange(draft)}
+          className="flex-1 inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+        >
           <Save size={14} /> {labels.nodePanel.save}
         </button>
         {!isStart && (
           <button
-            onClick={() => { if (window.confirm(labels.nodePanel.deleteConfirm)) onDelete(node.id) }}
-            title={labels.nodePanel.delete}
+            onClick={() => {
+              if (window.confirm(labels.nodePanel.deleteConfirm)) onDelete(node.id)
+            }}
+            data-cv-tooltip={labels.nodePanel.delete} aria-label={labels.nodePanel.delete}
             className="px-3 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-lg"
           >
             <Trash2 size={14} />
           </button>
         )}
-        <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 dark:text-gray-300 hover:underline">
+        <button data-cv-tooltip={labels.nodePanel.cancel} aria-label={labels.nodePanel.cancel} onClick={onClose} className="px-4 py-2 text-sm text-gray-600 dark:text-gray-300 hover:underline">
           {labels.nodePanel.cancel}
         </button>
       </div>

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'
 
@@ -28,21 +30,164 @@ const QUESTION_TYPES: FlowQuestionType[] = ['text', 'money', 'date', 'int', 'cpf
 // Paridade com financiamento-imobiliario-bot/apps/web/src/components/flows/FlowPalette.tsx —
 // botão "Adicionar" com submenus por categoria (Pergunta/Decisão/Condição/Ação). Sem
 // dependência de dropdown externa — menu simples com fechamento por clique fora.
-export function FlowPalette({ onAdd, labels: labelsOverride, actionOptions }: FlowPaletteProps) {
-  const labels = { ...DEFAULT_FLOW_EDITOR_LABELS, ...labelsOverride }
+export interface FlowPaletteMenuProps {
+  onSelect: (spec: NewNodeSpec) => void
+  labels: FlowEditorLabels
+  actionOptions?: FlowPaletteActionOption[]
+}
+
+/**
+ * A lista de tipos de nó, sem o botão que a abre.
+ *
+ * Separada porque o "+" do card abre exatamente esta lista: duplicar os itens era garantir que um
+ * tipo novo aparecesse num caminho e faltasse no outro.
+ */
+export function FlowPaletteMenu({ onSelect, labels, actionOptions }: FlowPaletteMenuProps) {
   const resolvedActionOptions = actionOptions ?? [
     { 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)
+    setSubmenu(null)
+  }
+
+  return (
+    <>
+      <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')}
+          className="w-full flex items-center justify-between gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
+        >
+          <span className="flex items-center gap-2">
+            <MessageCircleQuestion size={15} className="text-blue-500" /> {labels.palette.question}
+          </span>
+          <ChevronRight size={13} className="text-gray-400" />
+        </button>
+        {submenu === 'question' && (
+          <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]}
+                key={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"
+              >
+                {labels.questionTypeLabels[qt]}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <button
+        data-cv-tooltip={labels.palette.decision} aria-label={labels.palette.decision}
+        onMouseEnter={() => setSubmenu(null)}
+        onClick={() => select({ kind: 'decision' })}
+        className="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
+      >
+        <GitBranch size={15} className="text-purple-500" /> {labels.palette.decision}
+      </button>
+
+      <button
+        onMouseEnter={() => setSubmenu(null)}
+        onClick={() => select({ kind: 'condition' })}
+        className="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
+        data-cv-tooltip={labels.palette.conditionHint} aria-label={labels.palette.conditionHint}
+      >
+        <Diamond size={15} className="text-cyan-500" /> {labels.palette.condition}
+      </button>
+
+      <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')}
+          className="w-full flex items-center justify-between gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
+        >
+          <span className="flex items-center gap-2">
+            <Zap size={15} className="text-orange-500" /> {labels.palette.action}
+          </span>
+          <ChevronRight size={13} className="text-gray-400" />
+        </button>
+        {submenu === 'action' && (
+          <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}
+                key={option.actionKind}
+                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"
+              >
+                {option.label}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
+
+export function FlowPalette({ onAdd, labels: labelsOverride, actionOptions }: FlowPaletteProps) {
+  const labels = { ...DEFAULT_FLOW_EDITOR_LABELS, ...labelsOverride }
   const [open, setOpen] = useState(false)
-  const [submenu, setSubmenu] = useState<'question' | 'action' | null>(null)
   const containerRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
       if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
         setOpen(false)
-        setSubmenu(null)
       }
     }
     document.addEventListener('mousedown', handleClickOutside)
@@ -52,12 +197,12 @@ export function FlowPalette({ onAdd, labels: labelsOverride, actionOptions }: Fl
   function select(spec: NewNodeSpec) {
     onAdd(spec)
     setOpen(false)
-    setSubmenu(null)
   }
 
   return (
     <div ref={containerRef} className="relative">
       <button
+        data-cv-tooltip={labels.palette.title} aria-label={labels.palette.title}
         onClick={() => setOpen((v) => !v)}
         className="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-700"
       >
@@ -66,70 +211,11 @@ export function FlowPalette({ onAdd, labels: labelsOverride, actionOptions }: Fl
 
       {open && (
         <div className="absolute left-0 top-full mt-1.5 w-64 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg z-50 py-1">
-          <div className="relative">
-            <button
-              onMouseEnter={() => setSubmenu('question')}
-              onClick={() => setSubmenu(submenu === 'question' ? null : 'question')}
-              className="w-full flex items-center justify-between gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
-            >
-              <span className="flex items-center gap-2"><MessageCircleQuestion size={15} className="text-blue-500" /> {labels.palette.question}</span>
-              <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">
-                {QUESTION_TYPES.map((qt) => (
-                  <button
-                    key={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"
-                  >
-                    {labels.questionTypeLabels[qt]}
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-
-          <button
-            onMouseEnter={() => setSubmenu(null)}
-            onClick={() => select({ kind: 'decision' })}
-            className="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
-          >
-            <GitBranch size={15} className="text-purple-500" /> {labels.palette.decision}
-          </button>
-
-          <button
-            onMouseEnter={() => setSubmenu(null)}
-            onClick={() => select({ kind: 'condition' })}
-            className="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
-            title={labels.palette.conditionHint}
-          >
-            <Diamond size={15} className="text-cyan-500" /> {labels.palette.condition}
-          </button>
-
-          <div className="relative">
-            <button
-              onMouseEnter={() => setSubmenu('action')}
-              onClick={() => setSubmenu(submenu === 'action' ? null : 'action')}
-              className="w-full flex items-center justify-between gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
-            >
-              <span className="flex items-center gap-2"><Zap size={15} className="text-orange-500" /> {labels.palette.action}</span>
-              <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">
-                {resolvedActionOptions.map((option) => (
-                  <button
-                    key={option.actionKind}
-                    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"
-                  >
-                    {option.label}
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
+          <FlowPaletteMenu
+            onSelect={select}
+            labels={labels}
+            {...(actionOptions ? { actionOptions } : {})}
+          />
         </div>
       )}
     </div>

package/src/flows/FlowPortalNode.tsx

@@ -16,7 +16,7 @@ export function FlowPortalNode({ data }: NodeProps) {
   return (
     <button
       type="button"
-      title={labels.crossFlowPortal.tooltip}
+      data-cv-tooltip={labels.crossFlowPortal.tooltip} aria-label={labels.crossFlowPortal.tooltip}
       onClick={onNavigate}
       className="relative flex items-center gap-1.5 rounded-full border-2 border-dashed border-cyan-400 dark:border-cyan-600 bg-cyan-50 dark:bg-cyan-950/40 px-3 py-1.5 text-xs font-medium text-cyan-700 dark:text-cyan-300 hover:bg-cyan-100 dark:hover:bg-cyan-950/70 transition-colors cursor-pointer"
     >