@adatechnology/conversations-ui 0.1.0-rc.39 → 0.1.0-rc.40

package/src/flows/FlowPalette.tsx

@@ -28,21 +28,117 @@ 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)
+
+  function select(spec: NewNodeSpec) {
+    onSelect(spec)
+    setSubmenu(null)
+  }
+
+  return (
+    <>
+      <div className="relative">
+        <button
+          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 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
+                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
+          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 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
+                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,7 +148,6 @@ export function FlowPalette({ onAdd, labels: labelsOverride, actionOptions }: Fl
   function select(spec: NewNodeSpec) {
     onAdd(spec)
     setOpen(false)
-    setSubmenu(null)
   }
 
   return (
@@ -67,79 +162,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
-              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 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
-                    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
-              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 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
-                    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>
+          <FlowPaletteMenu
+            onSelect={select}
+            labels={labels}
+            {...(actionOptions ? { actionOptions } : {})}
+          />
         </div>
       )}
     </div>

package/src/flows/FlowsWorkspace.tsx

@@ -5,6 +5,7 @@ import {
   Controls,
   MiniMap,
   MarkerType,
+  Panel,
   applyNodeChanges,
   type Node,
   type NodeChange,
@@ -16,12 +17,14 @@ import '@xyflow/react/dist/style.css'
 import { Plus, Trash2, LayoutGrid, AlertTriangle, AlertCircle, Save, Undo2, Map as MapIcon, Workflow } from 'lucide-react'
 
 import { useIsDarkTheme } from '../useDarkMode'
-import { flowNodeTypes, nodeLabel, type FlowNodeCardData } from './FlowNodeCard'
+import { NODE_TYPE_COLOR, flowNodeTypes, nodeLabel, type FlowNodeCardData } from './FlowNodeCard'
+import { FlowLegend, type FlowLegendEdgeSample } from './FlowLegend'
 import { flowPortalNodeTypes, type FlowPortalNodeData } from './FlowPortalNode'
 import { flowGroupHeaderNodeTypes, type FlowGroupHeaderData } from './FlowGroupHeader'
 import { flowGroupFrameNodeTypes, type FlowGroupFrameData } from './FlowGroupFrame'
 import { FlowNodePanel } from './FlowNodePanel'
-import { FlowPalette, type FlowPaletteActionOption, type NewNodeSpec } from './FlowPalette'
+import { FlowPalette, FlowPaletteMenu, type FlowPaletteActionOption, type NewNodeSpec } from './FlowPalette'
+import { flowEdgeTypes, type FlowConnectionEdgeData } from './FlowConnectionEdge'
 import { FlowMapCanvas } from './FlowMapCanvas'
 import { mergeFlowEditorLabels, type FlowEditorLabels } from './labels'
 // Operações puras do grafo, com teste próprio. As decisões que elas tomam não dão erro quando estão
@@ -32,6 +35,7 @@ import {
   chainFrameNodeId,
   computeMergedLayout,
   countLiveByNode,
+  findFreeSlot,
   newNodeFromSpec,
   portalNodeId,
   GROUP_HEADER_NODE_ID,
@@ -40,6 +44,7 @@ import {
 } from './flowCanvasModel'
 import {
   applyConnection,
+  clearConnection,
   mergedFlowKeysFrom,
   namespaceNodeId,
   parseNamespacedId,
@@ -68,7 +73,28 @@ const RF_NODE_TYPES = {
   ...flowGroupFrameNodeTypes,
 }
 
+/**
+ * A legenda lê as mesmas constantes que pintam as arestas — chave que diverge do desenho é pior que
+ * chave nenhuma, porque ensina errado com ar de autoridade.
+ */
+function legendEdgeSamples(labels: FlowEditorLabels): FlowLegendEdgeSample[] {
+  return [
+    { color: EDGE_COLOR_LINEAR, label: labels.legendPanel.linear },
+    { color: EDGE_COLOR_BRANCH, label: labels.legendPanel.branch },
+    { color: EDGE_COLOR_FALLBACK, dash: '5 4', label: labels.legendPanel.fallback },
+    { color: EDGE_COLOR_CROSS_FLOW, dash: '3 3', label: labels.legendPanel.crossFlow },
+    { color: EDGE_COLOR_LIVE, label: labels.legendPanel.live },
+  ]
+}
+
+const LEGEND_NODE_SWATCHES = (Object.keys(NODE_TYPE_COLOR) as (keyof typeof NODE_TYPE_COLOR)[]).map((type) => ({
+  type,
+  className: NODE_TYPE_COLOR[type],
+}))
+
 const CHAIN_FRAME_PADDING = 36
+/** Coluna à direita do card de origem em que o nó criado pelo "+" nasce. */
+const QUICK_ADD_COLUMN_GAP = 320
 const FLOW_KEY_PATTERN = /^[a-z0-9_]{2,40}$/
 
 const EDGE_COLOR_LINEAR = '#94a3b8'
@@ -145,7 +171,7 @@ export interface FlowsWorkspaceProps {
  * O estilo fica aqui e a topologia fica no modelo, de propósito: destino errado é invisível até a
  * conversa do cliente parar; cor errada aparece na primeira olhada.
  */
-function styleEdge(spec: FlowEdgeSpec): Edge {
+function styleEdge(spec: FlowEdgeSpec, params: { disconnectLabel: string; onDisconnect: (spec: FlowEdgeSpec) => void }): Edge {
   const color = spec.crossFlow
     ? EDGE_COLOR_CROSS_FLOW
     : spec.kind === 'fallback'
@@ -164,7 +190,12 @@ function styleEdge(spec: FlowEdgeSpec): Edge {
     source: spec.source,
     target: spec.target,
     ...(spec.sourceHandle === undefined ? {} : { sourceHandle: spec.sourceHandle }),
-    type: 'bezier',
+    type: 'flowConnection',
+    reconnectable: 'target',
+    data: {
+      disconnectLabel: params.disconnectLabel,
+      onDisconnect: () => params.onDisconnect(spec),
+    } satisfies FlowConnectionEdgeData,
     animated: spec.live,
     style: {
       stroke: color,
@@ -222,6 +253,10 @@ export function FlowsWorkspace({
   const [saveErrorMessage, setSaveErrorMessage] = useState<string | undefined>(undefined)
   const [showCreateDialog, setShowCreateDialog] = useState(false)
   const [showDeleteDialog, setShowDeleteDialog] = useState(false)
+  /** Saída de onde o "+" foi clicado, e o ponto da tela onde ancorar o menu. */
+  const [quickAddFrom, setQuickAddFrom] = useState<
+    { flowKey: string; nodeId: string; handle: string; anchor: { x: number; y: number } } | null
+  >(null)
   const [newFlow, setNewFlow] = useState({ key: '', label: '', showInMenu: false, menuOptionLabel: '' })
   const [flowMutationState, setFlowMutationState] = useState<{ pending: boolean; error?: string }>({ pending: false })
   const [rfNodes, setRfNodes] = useState<Node[]>([])
@@ -417,7 +452,19 @@ export function FlowsWorkspace({
           return renderedPositionsRef.current.get(nsId) ?? mergedPositions.get(nsId) ?? { x: 0, y: 0 }
         }
         // Fluxo sozinho no canvas: a posição salva no grafo é a do card, sem tradução no meio.
-        return graph!.nodes[nodeId]?.position ?? fallbackPositions[nodeId] ?? { x: 0, y: 0 }
+        //
+        // O `renderedPositionsRef` no meio é o que impede o card de sumir ao desligar um fio. Nó
+        // vindo do seed não tem posição salva, então quem manda nele é o auto-layout — e o
+        // auto-layout joga todo nó sem ligação de entrada para uma faixa ABAIXO de tudo. Desligar
+        // a última ação a mandava para fora da área visível no mesmo instante, o que se lê como
+        // "o editor apagou meu card". Congelando o lugar em que ele já foi desenhado, desligar o
+        // fio passa a mudar só o fio.
+        const nsId = namespaceNodeId(flowKey, nodeId)
+        return (
+          graph!.nodes[nodeId]?.position ??
+          renderedPositionsRef.current.get(nsId) ??
+          fallbackPositions[nodeId] ?? { x: 0, y: 0 }
+        )
       }
 
       for (const node of Object.values(graph.nodes)) {
@@ -436,6 +483,7 @@ export function FlowsWorkspace({
             issues: flowIssues,
             labels,
             onSelect: (nodeId: string) => setEditingRef({ flowKey, nodeId }),
+            onQuickAdd: ({ nodeId, handle, anchor }) => setQuickAddFrom({ flowKey, nodeId, handle, anchor }),
           } satisfies FlowNodeCardData,
         })
 
@@ -523,10 +571,52 @@ export function FlowsWorkspace({
     labels,
   ])
 
+  // Desligar um fio é gravar destino vazio no nó de origem — o nó do outro lado NÃO se mexe. Era
+  // isso que faltava: sem caminho para desligar, trocar o destino da última ação passava por
+  // apagar o card e refazê-lo.
+  const disconnectEdge = useCallback(
+    (spec: FlowEdgeSpec) => {
+      const { flowKey, nodeId } = parseNamespacedId(spec.source)
+      updateFlow(flowKey, (graph) => {
+        const node = graph.nodes[nodeId]
+        if (!node) return graph
+        return { ...graph, nodes: { ...graph.nodes, [nodeId]: clearConnection(node, spec.sourceHandle ?? 'next') } }
+      })
+    },
+    [updateFlow],
+  )
+
   const edges = useMemo(
     () =>
-      buildFlowEdges({ openKeys: openFlowKeys, graphs: workingGraphs, rootFlowKey, livePositions }).map(styleEdge),
-    [openFlowKeys, workingGraphs, rootFlowKey, livePositions],
+      buildFlowEdges({ openKeys: openFlowKeys, graphs: workingGraphs, rootFlowKey, livePositions }).map((spec) =>
+        // Salto entre fluxos desenhado como portal não se desliga daqui: quem manda nele é o `next`
+        // do nó de origem, e o portal é só a caixa que representa o fluxo alvo ausente.
+        styleEdge(spec, { disconnectLabel: labels.quickAdd.disconnect, onDisconnect: disconnectEdge }),
+      ),
+    [openFlowKeys, workingGraphs, rootFlowKey, livePositions, labels, disconnectEdge],
+  )
+
+  // Arrastar a ponta de um fio para outro card: religa em UMA edição, sem passar por um estado
+  // intermediário em que o fluxo está quebrado.
+  const onReconnect = useCallback(
+    (oldEdge: Edge, connection: Connection) => {
+      const resolved = resolveConnection({
+        connection: {
+          source: connection.source,
+          target: connection.target,
+          sourceHandle: connection.sourceHandle ?? oldEdge.sourceHandle,
+        },
+        graphs: workingGraphs,
+      })
+      if (!resolved) return
+
+      updateFlow(resolved.flowKey, (graph) => {
+        const node = graph.nodes[resolved.nodeId]
+        if (!node) return graph
+        return { ...graph, nodes: { ...graph.nodes, [resolved.nodeId]: applyConnection(node, resolved) } }
+      })
+    },
+    [workingGraphs, updateFlow],
   )
 
   useEffect(() => {
@@ -596,6 +686,56 @@ export function FlowsWorkspace({
     setPendingFocusNodeId(namespaceNodeId(primaryFlowKey, newNode.id))
   }
 
+  /**
+   * Cria o próximo nó e liga o fio na MESMA edição.
+   *
+   * Uma edição só, e não duas, porque o desfazer é por passo: criar e ligar separados fariam um
+   * "desfazer" deixar o card novo solto no canvas, que é justamente o estado que ninguém quer.
+   * A posição sai do card de origem, à direita dele — o nó nasce onde a pessoa estava olhando,
+   * em vez de na faixa de órfãos abaixo de tudo.
+   */
+  function handleQuickAdd(spec: NewNodeSpec) {
+    const origin = quickAddFrom
+    setQuickAddFrom(null)
+    if (!origin) return
+
+    const originGraph = workingGraphs[origin.flowKey]
+    if (!originGraph) return
+
+    const newNode = newNodeFromSpec(spec, new Set(Object.keys(originGraph.nodes)))
+    const originPosition =
+      renderedPositionsRef.current.get(namespaceNodeId(origin.flowKey, origin.nodeId)) ??
+      originGraph.nodes[origin.nodeId]?.position ?? { x: 0, y: 0 }
+    // À direita de quem criou, e descendo se aquele lugar já tiver dono — tipicamente o próprio nó
+    // que acabou de perder a ligação, que é exatamente quem está naquela coluna.
+    const taken = openFlowKeys.flatMap((key) =>
+      Object.entries(workingGraphs[key]?.nodes ?? {}).map(
+        ([id, node]) => renderedPositionsRef.current.get(namespaceNodeId(key, id)) ?? node.position ?? { x: 0, y: 0 },
+      ),
+    )
+    newNode.position = findFreeSlot({
+      desired: { x: originPosition.x + QUICK_ADD_COLUMN_GAP, y: originPosition.y },
+      taken,
+    })
+    // Com fluxos mesclados quem decide o lugar é o layout, não o `position` do nó — sem semear
+    // aqui, o card nascia na coluna calculada, em cima do nó que acabou de ficar solto.
+    renderedPositionsRef.current.set(namespaceNodeId(origin.flowKey, newNode.id), newNode.position)
+
+    updateFlow(origin.flowKey, (graph) => {
+      const sourceNode = graph.nodes[origin.nodeId]
+      if (!sourceNode) return graph
+      const connected = applyConnection(sourceNode, {
+        flowKey: origin.flowKey,
+        nodeId: origin.nodeId,
+        handle: origin.handle,
+        targetValue: newNode.id,
+      })
+      return { ...graph, nodes: { ...graph.nodes, [origin.nodeId]: connected, [newNode.id]: newNode } }
+    })
+
+    setEditingRef({ flowKey: origin.flowKey, nodeId: newNode.id })
+  }
+
   function handleNodePanelChange(updated: FlowNodeData) {
     if (!editingRef) return
     updateFlow(editingRef.flowKey, (graph) => ({ ...graph, nodes: { ...graph.nodes, [updated.id]: updated } }))
@@ -875,9 +1015,11 @@ export function FlowsWorkspace({
             nodes={rfNodes}
             edges={edges}
             nodeTypes={RF_NODE_TYPES}
+            edgeTypes={flowEdgeTypes}
             onNodesChange={onNodesChange}
             onNodeDragStop={onNodeDragStop}
             onConnect={onConnect}
+            onReconnect={onReconnect}
             onInit={setFlowInstance}
             fitView
             proOptions={{ hideAttribution: true }}
@@ -885,11 +1027,39 @@ export function FlowsWorkspace({
           >
             <Background color={isDark ? BACKGROUND_COLOR_DARK : BACKGROUND_COLOR_LIGHT} />
             <Controls />
+            <Panel position="top-right">
+              <FlowLegend
+                labels={labels}
+                edgeSamples={legendEdgeSamples(labels)}
+                nodeSwatches={LEGEND_NODE_SWATCHES}
+              />
+            </Panel>
             <MiniMap pannable zoomable className="!bg-white dark:!bg-gray-800" />
           </ReactFlow>
         )}
       </div>
 
+      {/* Menu do "+": ancorado no ponto clicado e em coordenadas de tela (`fixed`), porque o canvas
+          tem pan e zoom próprios — posicionar dentro dele faria o menu escorregar junto. */}
+      {quickAddFrom && (
+        <>
+          <div className="fixed inset-0 z-40" onClick={() => setQuickAddFrom(null)} />
+          <div
+            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 }}
+          >
+            <p className="px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500">
+              {labels.quickAdd.title}
+            </p>
+            <FlowPaletteMenu
+              onSelect={handleQuickAdd}
+              labels={labels}
+              {...(actionOptions ? { actionOptions: [...actionOptions] } : {})}
+            />
+          </div>
+        </>
+      )}
+
       {/* `key` por nó: o painel guarda um rascunho local em estado, e sem remontar ao trocar de nó
           selecionado ele seguia mostrando (e salvando) os campos do nó anterior. */}
       {editingNode && editingGraph && (

package/src/flows/flowCanvasModel.test.ts

@@ -17,8 +17,9 @@ import {
   newNodeFromSpec,
   portalNodeId,
   type FlowLivePosition,
+  findFreeSlot,
 } from './flowCanvasModel'
-import type { FlowGraphData, FlowNodeData } from './flowGraph'
+import { estimateNodeHeight, type FlowGraphData, type FlowNodeData } from './flowGraph'
 
 const ROOT = 'menu'
 
@@ -310,3 +311,146 @@ describe('nó novo da paleta', () => {
     expect(newNodeFromSpec({ kind: 'action', actionKind: 'handoff' }, new Set()).actionKind).toBe('handoff')
   })
 })
+
+/**
+ * O "+" cria o nó à direita de quem o criou — que é onde costuma estar o card que acabou de perder
+ * a ligação. Dois cards no mesmo pixel se leem como um card só, e "sumiu" de novo.
+ */
+describe('findFreeSlot', () => {
+  it('lugar vazio é usado como está', () => {
+    expect(findFreeSlot({ desired: { x: 100, y: 0 }, taken: [] })).toEqual({ x: 100, y: 0 })
+  })
+
+  it('lugar ocupado desce até sobrar espaço, sem sair da coluna', () => {
+    const slot = findFreeSlot({ desired: { x: 100, y: 0 }, taken: [{ x: 100, y: 0 }] })
+
+    expect(slot.x).toBe(100)
+    expect(slot.y).toBeGreaterThan(0)
+  })
+
+  it('desce quantas vezes precisar quando a coluna está empilhada', () => {
+    const taken = [
+      { x: 100, y: 0 },
+      { x: 100, y: 120 },
+      { x: 100, y: 240 },
+    ]
+
+    expect(findFreeSlot({ desired: { x: 100, y: 0 }, taken }).y).toBe(360)
+  })
+
+  it('card em outra coluna não empurra ninguém', () => {
+    expect(findFreeSlot({ desired: { x: 100, y: 0 }, taken: [{ x: 900, y: 0 }] })).toEqual({ x: 100, y: 0 })
+  })
+})
+
+/**
+ * A altura do card decide o espaçamento do layout. `send_media` ganhou uma linha de saída (o motor
+ * do bot anda para o `next` depois dela), e a altura tem de acompanhar — senão a camada de baixo
+ * encosta no card.
+ */
+describe('estimateNodeHeight em nó de ação', () => {
+  it('ação de passagem é mais alta que ação terminal, pela linha de saída', () => {
+    const passThrough = estimateNodeHeight({ id: 'a', type: 'action', actionKind: 'send_media' })
+    const terminal = estimateNodeHeight({ id: 'b', type: 'action', actionKind: 'handoff' })
+
+    expect(passThrough).toBeGreaterThan(terminal)
+  })
+
+  it('ação sem kind conta como terminal, em vez de estourar', () => {
+    expect(estimateNodeHeight({ id: 'c', type: 'action' })).toBe(
+      estimateNodeHeight({ id: 'd', type: 'action', actionKind: 'handoff' }),
+    )
+  })
+})
+
+/**
+ * A regra que o empilhamento por camada quebrava: dois cards na mesma altura fazem o fio entre eles
+ * correr na horizontal, e um fio horizontal passa POR TRÁS de qualquer card que esteja no caminho.
+ * Um card por linha transforma toda ligação numa diagonal curta e visível.
+ */
+describe('cascata: um card por linha', () => {
+  it('cada card tem altura própria — ninguém divide linha com ninguém', () => {
+    const graphs = {
+      menu: graph({
+        key: 'menu',
+        start: 'a',
+        nodes: [node('a', { byAnswer: { sim: 'b', nao: 'c' }, default: 'd' }), node('b'), node('c'), node('d')],
+      }),
+    }
+
+    const positions = computeMergedLayout({ openKeys: ['menu'], graphs, primaryFlowKey: 'menu' })
+    const ys = [...positions.values()].map((each) => each.y)
+
+    expect(new Set(ys).size).toBe(ys.length)
+  })
+
+  it('o card seguinte fica à direita E abaixo de quem o alimenta', () => {
+    const graphs = { menu: graph({ key: 'menu', start: 'a', nodes: [node('a', 'b'), node('b', 'c'), node('c')] }) }
+
+    const positions = computeMergedLayout({ openKeys: ['menu'], graphs, primaryFlowKey: 'menu' })
+    const a = positions.get('menu::a')!
+    const b = positions.get('menu::b')!
+    const c = positions.get('menu::c')!
+
+    expect(b.x).toBeGreaterThan(a.x)
+    expect(b.y).toBeGreaterThan(a.y)
+    expect(c.x).toBeGreaterThan(b.x)
+    expect(c.y).toBeGreaterThan(b.y)
+  })
+
+  it('um ramo inteiro sai antes do próximo começar — caminho de conversa não se intercala', () => {
+    const graphs = {
+      menu: graph({
+        key: 'menu',
+        start: 'a',
+        nodes: [
+          node('a', { byAnswer: { sim: 'b1', nao: 'c1' }, default: '' }),
+          node('b1', 'b2'),
+          node('b2'),
+          node('c1'),
+        ],
+      }),
+    }
+
+    const positions = computeMergedLayout({ openKeys: ['menu'], graphs, primaryFlowKey: 'menu' })
+
+    // b1 e b2 são o mesmo ramo: c1 (o outro ramo) só aparece depois dos dois.
+    expect(positions.get('menu::b2')!.y).toBeLessThan(positions.get('menu::c1')!.y)
+  })
+})
+
+/**
+ * Um `next` apontando para o próprio nó não vira aresta: de A para A não há trajeto que caiba —
+ * por baixo some atrás do card, por cima o cobre. Quem mostra é o ícone de repetição na linha de
+ * saída. O teste existe porque "não desenhar" é fácil de perder numa refatoração de arestas.
+ */
+describe('laço no próprio card', () => {
+  it('saída que volta ao mesmo nó não gera aresta', () => {
+    const graphs = {
+      menu: graph({
+        key: 'menu',
+        start: 'a',
+        nodes: [node('a', { byAnswer: { sim: 'b' }, default: 'a' }), node('b')],
+      }),
+    }
+
+    const edges = buildFlowEdges({ openKeys: ['menu'], graphs, rootFlowKey: 'menu' })
+
+    expect(edges.map((each) => each.id)).toEqual(['menu::a->menu::b-sim'])
+  })
+
+  it('as demais saídas do mesmo card continuam desenhadas', () => {
+    const graphs = {
+      menu: graph({
+        key: 'menu',
+        start: 'a',
+        nodes: [node('a', { byAnswer: { sim: 'b', repete: 'a' }, default: 'b' }), node('b')],
+      }),
+    }
+
+    const edges = buildFlowEdges({ openKeys: ['menu'], graphs, rootFlowKey: 'menu' })
+
+    expect(edges).toHaveLength(2)
+    expect(edges.every((each) => each.target === 'menu::b')).toBe(true)
+  })
+})