@adatechnology/conversations-ui 0.0.0

package/src/StatusTicks.tsx

@@ -0,0 +1,39 @@
+import { AlertTriangle } from 'lucide-react'
+
+export interface StatusTicksProps {
+  status: string
+  title?: string
+}
+
+const STATUS_COLOR_CLASS: Record<string, string> = {
+  sent: 'text-black/40 dark:text-white/40',
+  delivered: 'text-black/40 dark:text-white/40',
+  read: 'text-sky-500',
+  failed: 'text-red-500',
+}
+
+function Ticks({ double }: { double: boolean }) {
+  return (
+    <svg viewBox="0 0 20 12" width="15" height="9" fill="none" xmlns="http://www.w3.org/2000/svg">
+      {double && (
+        <path d="M1 6.5L4.5 10L11 2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+      )}
+      <path
+        d={double ? 'M6 6.5L9.5 10L19 1' : 'M1 6.5L5 10.5L14.5 1'}
+        stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+// Paridade com financiamento-imobiliario-bot/apps/web/src/components/MessageBubble.tsx —
+// mesmo path de SVG, mesma cor por status (read → sky-500, failed → red-500 com AlertTriangle).
+export function StatusTicks({ status, title }: StatusTicksProps) {
+  const colorClass = STATUS_COLOR_CLASS[status] ?? STATUS_COLOR_CLASS.sent
+
+  return (
+    <span className={`cursor-help leading-none flex items-center ${colorClass}`} title={title}>
+      {status === 'failed' ? <AlertTriangle size={11} /> : <Ticks double={status !== 'sent'} />}
+    </span>
+  )
+}

package/src/Toast.tsx

@@ -0,0 +1,140 @@
+import { createContext, useContext, useState, useCallback, useEffect, type ReactNode } from 'react'
+
+export type ToastType = 'success' | 'error' | 'info'
+
+interface ToastItem {
+  id: number
+  type: ToastType
+  message: string
+}
+
+interface ToastContextValue {
+  show: (type: ToastType, message: string) => void
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null)
+
+let nextId = 0
+
+let singletonShow: ((type: ToastType, message: string) => void) | null = null
+
+export const toast = {
+  show(type: ToastType, message: string) {
+    if (singletonShow) {
+      singletonShow(type, message)
+    }
+  },
+}
+
+const typeStyles: Record<ToastType, string> = {
+  success: 'bg-green-600',
+  error: 'bg-red-600',
+  info: 'bg-blue-600',
+}
+
+const typeIcons: Record<ToastType, ReactNode> = {
+  success: (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  ),
+  error: (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <line x1="18" y1="6" x2="6" y2="18" />
+      <line x1="6" y1="6" x2="18" y2="18" />
+    </svg>
+  ),
+  info: (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <circle cx="12" cy="12" r="10" />
+      <line x1="12" y1="16" x2="12" y2="12" />
+      <line x1="12" y1="8" x2="12.01" y2="8" />
+    </svg>
+  ),
+}
+
+function ToastItemComponent({ item, onRemove }: { item: ToastItem; onRemove: (id: number) => void }) {
+  const [exiting, setExiting] = useState(false)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setExiting(true)
+      setTimeout(() => onRemove(item.id), 300)
+    }, 5000)
+    return () => clearTimeout(timer)
+  }, [item.id, onRemove])
+
+  return (
+    <div
+      className={`flex items-center gap-2 px-4 py-3 rounded-lg shadow-lg text-white text-sm min-w-[280px] max-w-[400px] ${
+        typeStyles[item.type]
+      } ${exiting ? 'animate-slide-out' : 'animate-slide-in'}`}
+    >
+      <span className="flex-shrink-0">{typeIcons[item.type]}</span>
+      <span className="flex-1">{item.message}</span>
+      <button
+        onClick={() => {
+          setExiting(true)
+          setTimeout(() => onRemove(item.id), 300)
+        }}
+        className="flex-shrink-0 opacity-70 hover:opacity-100 transition-opacity"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      </button>
+    </div>
+  )
+}
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [items, setItems] = useState<ToastItem[]>([])
+
+  const show = useCallback((type: ToastType, message: string) => {
+    const id = ++nextId
+    setItems((prev) => [...prev, { id, type, message }])
+  }, [])
+
+  const remove = useCallback((id: number) => {
+    setItems((prev) => prev.filter((item) => item.id !== id))
+  }, [])
+
+  useEffect(() => {
+    singletonShow = show
+    return () => {
+      singletonShow = null
+    }
+  }, [show])
+
+  return (
+    <ToastContext.Provider value={{ show }}>
+      {children}
+      <div className="fixed top-4 right-4 z-[100] flex flex-col gap-2">
+        {items.map((item) => (
+          <ToastItemComponent key={item.id} item={item} onRemove={remove} />
+        ))}
+      </div>
+      <style>{`
+        @keyframes slide-in {
+          from { transform: translateX(100%); opacity: 0; }
+          to { transform: translateX(0); opacity: 1; }
+        }
+        @keyframes slide-out {
+          from { transform: translateX(0); opacity: 1; }
+          to { transform: translateX(100%); opacity: 0; }
+        }
+        .animate-slide-in { animation: slide-in 0.3s ease-out; }
+        .animate-slide-out { animation: slide-out 0.3s ease-in forwards; }
+      `}</style>
+    </ToastContext.Provider>
+  )
+}
+
+export function useToast(): ToastContextValue {
+  const context = useContext(ToastContext)
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider')
+  }
+  return context
+}

package/src/Wallpaper.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react'
+
+export interface ConversationWallpaperProps {
+  children?: ReactNode
+  className?: string
+}
+
+// Requer o import de '@adatechnology/conversations-ui/styles.css' uma vez no host —
+// a classe `.cv-wallpaper` (e sua variante `.dark`) vive nesse stylesheet, não em CSS-in-JS,
+// para não depender da configuração de Tailwind do consumidor.
+export function ConversationWallpaper({ children, className = '' }: ConversationWallpaperProps) {
+  return <div className={`cv-wallpaper ${className}`.trim()}>{children}</div>
+}

package/src/WhatsAppMessageEditor.tsx

@@ -0,0 +1,142 @@
+import { useRef, type ReactNode } from 'react'
+import { Bold, Italic, Strikethrough } from 'lucide-react'
+
+export interface WhatsAppMessageEditorProps {
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  placeholders?: readonly string[]
+  rows?: number
+  previewLabel?: string
+  emptyPreviewText?: string
+}
+
+const INLINE_TOKEN = /(\*[^*\n]+\*|_[^_\n]+_|~[^~\n]+~|`[^`\n]+`|\{[a-zA-Z_]+\})/g
+
+function renderLine(line: string, lineKey: string): ReactNode[] {
+  const nodes: ReactNode[] = []
+  let lastIndex = 0
+  let match: RegExpExecArray | null
+  let tokenIndex = 0
+  INLINE_TOKEN.lastIndex = 0
+  while ((match = INLINE_TOKEN.exec(line)) !== null) {
+    if (match.index > lastIndex) nodes.push(line.slice(lastIndex, match.index))
+    const token = match[0]
+    const key = `${lineKey}-${tokenIndex++}`
+    if (token.startsWith('*')) nodes.push(<strong key={key}>{token.slice(1, -1)}</strong>)
+    else if (token.startsWith('_')) nodes.push(<em key={key}>{token.slice(1, -1)}</em>)
+    else if (token.startsWith('~')) nodes.push(<s key={key}>{token.slice(1, -1)}</s>)
+    else if (token.startsWith('`')) nodes.push(<code key={key} className="font-mono text-[0.85em]">{token.slice(1, -1)}</code>)
+    else nodes.push(<span key={key} className="rounded bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 px-1">{token}</span>)
+    lastIndex = INLINE_TOKEN.lastIndex
+  }
+  if (lastIndex < line.length) nodes.push(line.slice(lastIndex))
+  return nodes
+}
+
+function renderWhatsApp(text: string): ReactNode[] {
+  const lines = text.split('\n')
+  return lines.map((line, index) => (
+    <span key={`ln-${index}`}>
+      {renderLine(line, `ln-${index}`)}
+      {index < lines.length - 1 ? <br /> : null}
+    </span>
+  ))
+}
+
+// Paridade com financiamento-imobiliario-bot/apps/web/src/components/WhatsAppMessageEditor.tsx —
+// editor para autoria de templates/mensagens padrão (welcome, farewell, etc.), com toolbar de
+// formatação, inserção de placeholders de variável e preview no estilo balão do WhatsApp.
+// Diferente de MessageComposer (caixa de envio de uma conversa ao vivo).
+export function WhatsAppMessageEditor({
+  value,
+  onChange,
+  placeholder,
+  placeholders = [],
+  rows = 4,
+  previewLabel = 'Prévia (como aparece no WhatsApp)',
+  emptyPreviewText = 'Sua mensagem aparecerá aqui…',
+}: WhatsAppMessageEditorProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  function wrapSelection(marker: string): void {
+    const textarea = textareaRef.current
+    if (!textarea) return
+    const start = textarea.selectionStart
+    const end = textarea.selectionEnd
+    const selected = value.slice(start, end) || 'texto'
+    const next = value.slice(0, start) + marker + selected + marker + value.slice(end)
+    onChange(next)
+    requestAnimationFrame(() => {
+      textarea.focus()
+      textarea.setSelectionRange(start + marker.length, start + marker.length + selected.length)
+    })
+  }
+
+  function insertAtCursor(snippet: string): void {
+    const textarea = textareaRef.current
+    if (!textarea) return
+    const start = textarea.selectionStart
+    const end = textarea.selectionEnd
+    const next = value.slice(0, start) + snippet + value.slice(end)
+    onChange(next)
+    requestAnimationFrame(() => {
+      textarea.focus()
+      const caret = start + snippet.length
+      textarea.setSelectionRange(caret, caret)
+    })
+  }
+
+  const toolbarButtonClass =
+    'inline-flex items-center justify-center h-8 w-8 rounded-lg border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors'
+
+  return (
+    <div>
+      <div className="flex flex-wrap items-center gap-1.5 mb-2">
+        <button type="button" onClick={() => wrapSelection('*')} className={toolbarButtonClass} title="Negrito (*texto*)" aria-label="Negrito">
+          <Bold size={15} />
+        </button>
+        <button type="button" onClick={() => wrapSelection('_')} className={toolbarButtonClass} title="Itálico (_texto_)" aria-label="Itálico">
+          <Italic size={15} />
+        </button>
+        <button type="button" onClick={() => wrapSelection('~')} className={toolbarButtonClass} title="Tachado (~texto~)" aria-label="Tachado">
+          <Strikethrough size={15} />
+        </button>
+        {placeholders.length > 0 && (
+          <>
+            <span className="mx-1 h-5 w-px bg-gray-200 dark:bg-gray-600" />
+            {placeholders.map((token) => (
+              <button
+                key={token}
+                type="button"
+                onClick={() => insertAtCursor(token)}
+                className="inline-flex items-center h-8 px-2 rounded-lg border border-gray-200 dark:border-gray-600 text-xs text-blue-600 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/40 transition-colors"
+                title={`Inserir ${token}`}
+              >
+                {token}
+              </button>
+            ))}
+          </>
+        )}
+      </div>
+
+      <textarea
+        ref={textareaRef}
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder={placeholder}
+        rows={rows}
+        className="w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all placeholder:text-gray-400 dark:placeholder:text-gray-500 resize-y"
+      />
+
+      <div className="mt-2">
+        <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">{previewLabel}</p>
+        <div className="rounded-xl bg-[#e5ded8] dark:bg-gray-900 p-3">
+          <div className="inline-block max-w-full rounded-lg rounded-tl-none bg-white dark:bg-gray-800 shadow-sm px-3 py-2 text-sm text-gray-800 dark:text-gray-100 whitespace-pre-wrap break-words">
+            {value.trim() ? renderWhatsApp(value) : <span className="text-gray-400 dark:text-gray-500">{emptyPreviewText}</span>}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/channel/index.ts

@@ -0,0 +1 @@
+export {}

package/src/conversations/index.ts

@@ -0,0 +1 @@
+export {}

package/src/flows/FlowGroupFrame.tsx

@@ -0,0 +1,21 @@
+import { type NodeProps } from '@xyflow/react'
+
+export type FlowGroupFrameData = {
+  label: string
+}
+
+// Moldura decorativa atrás de uma cadeia de perguntas lineares que alimenta um nó de ação
+// (ex.: "renda → valor do imóvel → prazo" antes de uma ação) — puramente visual, não editável,
+// computada da topologia real do grafo (findCollectionChains), não é um dado novo.
+export function FlowGroupFrame({ data }: NodeProps) {
+  const { label } = data as unknown as FlowGroupFrameData
+  return (
+    <div className="relative w-full h-full rounded-xl border-2 border-dashed border-orange-300/70 dark:border-orange-700/50 bg-orange-50/40 dark:bg-orange-950/10">
+      <span className="absolute -top-6 left-1 text-[11px] font-semibold text-orange-600 dark:text-orange-400 uppercase tracking-wide whitespace-nowrap">
+        {label}
+      </span>
+    </div>
+  )
+}
+
+export const flowGroupFrameNodeTypes = { flowGroupFrame: FlowGroupFrame }

package/src/flows/FlowGroupHeader.tsx

@@ -0,0 +1,31 @@
+import { type NodeProps } from '@xyflow/react'
+import { Maximize2, X } from 'lucide-react'
+import { DEFAULT_FLOW_EDITOR_LABELS, type FlowEditorLabels } from './labels'
+
+export type FlowGroupHeaderData = {
+  label: string
+  labels?: FlowEditorLabels
+  onFocus: () => void
+  onClose: () => void
+}
+
+// Rótulo flutuante acima do primeiro nó de um fluxo mesclado no canvas (fusão editável) —
+// não é um nó de verdade do grafo, só identifica de qual fluxo é aquele agrupado de cards e
+// oferece as duas ações que o isolam de volta: focar nele sozinho, ou fechá-lo sem editar.
+export function FlowGroupHeader({ data }: NodeProps) {
+  const { label, labels = DEFAULT_FLOW_EDITOR_LABELS, onFocus, onClose } = data as unknown as FlowGroupHeaderData
+
+  return (
+    <div className="flex items-center gap-2 rounded-full border border-cyan-300 dark:border-cyan-700 bg-cyan-50 dark:bg-cyan-950/50 px-3 py-1 text-xs font-medium text-cyan-800 dark:text-cyan-200 shadow-sm whitespace-nowrap">
+      <span>{label}</span>
+      <button type="button" onClick={onFocus} title={labels.flowGroup.focus} className="hover:text-blue-600 dark:hover:text-blue-400">
+        <Maximize2 size={12} />
+      </button>
+      <button type="button" onClick={onClose} title={labels.flowGroup.close} className="hover:text-red-600 dark:hover:text-red-400">
+        <X size={12} />
+      </button>
+    </div>
+  )
+}
+
+export const flowGroupHeaderNodeTypes = { flowGroupHeader: FlowGroupHeader }

package/src/flows/FlowMapCanvas.tsx

@@ -0,0 +1,76 @@
+import { useMemo } from 'react'
+import { ReactFlow, Background, Controls, MarkerType, type Node, type Edge } from '@xyflow/react'
+import '@xyflow/react/dist/style.css'
+import { useDarkMode } from '../useDarkMode'
+import { flowMapNodeTypes, type FlowMapNodeData } from './FlowMapNode'
+import { computeFlowMapLayout, crossFlowTargetsOf, type FlowGraphData } from './flowGraph'
+import { DEFAULT_FLOW_EDITOR_LABELS, type FlowEditorLabels } from './labels'
+
+const MAP_NODE_TYPES = { ...flowMapNodeTypes }
+
+const EDGE_COLOR = '#06b6d4'
+const BACKGROUND_COLOR_LIGHT = '#cbd5e1'
+const BACKGROUND_COLOR_DARK = '#334155'
+
+export interface FlowMapCanvasProps {
+  graphs: Record<string, FlowGraphData>
+  rootKey: string
+  onOpenFlow: (key: string) => void
+  labels?: Partial<FlowEditorLabels>
+}
+
+// Paridade com financiamento-imobiliario-bot/apps/web/src/components/flows/FlowMapCanvas.tsx —
+// visão hierárquica onde cada fluxo é um único nó, ligado por saltos "flow:<key>".
+export function FlowMapCanvas({ graphs, rootKey, onOpenFlow, labels: labelsOverride }: FlowMapCanvasProps) {
+  const labels = { ...DEFAULT_FLOW_EDITOR_LABELS, ...labelsOverride }
+  const { isDark } = useDarkMode()
+  const positions = useMemo(() => computeFlowMapLayout(graphs, rootKey), [graphs, rootKey])
+
+  const nodes = useMemo<Node[]>(
+    () => Object.values(graphs).map((g): Node => ({
+      id: g.key,
+      type: 'flowMapNode',
+      position: positions[g.key] ?? { x: 0, y: 0 },
+      data: {
+        label: g.label,
+        nodeCount: Object.keys(g.nodes).length,
+        isRoot: g.key === rootKey,
+        labels,
+        onOpen: () => onOpenFlow(g.key),
+      } satisfies FlowMapNodeData,
+    })),
+    [graphs, positions, rootKey, onOpenFlow, labels],
+  )
+
+  const edges = useMemo<Edge[]>(() => {
+    const list: Edge[] = []
+    for (const g of Object.values(graphs)) {
+      for (const targetKey of crossFlowTargetsOf(g)) {
+        if (!graphs[targetKey]) continue
+        list.push({
+          id: `${g.key}->${targetKey}`,
+          source: g.key,
+          target: targetKey,
+          type: 'default',
+          style: { stroke: EDGE_COLOR, strokeWidth: 1.75 },
+          markerEnd: { type: MarkerType.ArrowClosed, color: EDGE_COLOR, width: 18, height: 18 },
+        })
+      }
+    }
+    return list
+  }, [graphs])
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      nodeTypes={MAP_NODE_TYPES}
+      fitView
+      proOptions={{ hideAttribution: true }}
+      colorMode={isDark ? 'dark' : 'light'}
+    >
+      <Background color={isDark ? BACKGROUND_COLOR_DARK : BACKGROUND_COLOR_LIGHT} />
+      <Controls />
+    </ReactFlow>
+  )
+}

package/src/flows/FlowMapNode.tsx

@@ -0,0 +1,39 @@
+import { Handle, Position, type NodeProps } from '@xyflow/react'
+import { GitBranch, Maximize2 } from 'lucide-react'
+import { DEFAULT_FLOW_EDITOR_LABELS, type FlowEditorLabels } from './labels'
+
+export type FlowMapNodeData = {
+  label: string
+  nodeCount: number
+  isRoot: boolean
+  labels: FlowEditorLabels
+  onOpen: () => void
+}
+
+// Nó do MAPA de fluxos (visão hierárquica): representa um fluxo inteiro como uma única caixa,
+// sem entrar nos nós internos — complementar à fusão editável, que mostra os nós de verdade.
+export function FlowMapNode({ data }: NodeProps) {
+  const { label, nodeCount, isRoot, labels = DEFAULT_FLOW_EDITOR_LABELS, onOpen } = data as unknown as FlowMapNodeData
+
+  return (
+    <div className="relative rounded-xl border-2 border-emerald-300 dark:border-emerald-700 bg-emerald-50 dark:bg-emerald-950/40 px-4 py-3 w-56 shadow-sm">
+      <Handle type="target" position={Position.Top} className="!bg-gray-400 dark:!bg-gray-500" />
+      <div className="flex items-center gap-1.5 text-emerald-700 dark:text-emerald-300">
+        <GitBranch size={14} />
+        <span className="text-sm font-semibold truncate">{label}</span>
+        {isRoot && <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 shrink-0" title={labels.startNodeTooltip} />}
+      </div>
+      <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{labels.flowMap.nodeCount(nodeCount)}</p>
+      <button
+        type="button"
+        onClick={onOpen}
+        className="mt-2 inline-flex items-center gap-1 text-xs font-medium text-blue-600 dark:text-blue-400 hover:underline"
+      >
+        <Maximize2 size={11} /> {labels.flowMap.openFlow}
+      </button>
+      <Handle type="source" position={Position.Bottom} className="!bg-gray-400 dark:!bg-gray-500" />
+    </div>
+  )
+}
+
+export const flowMapNodeTypes = { flowMapNode: FlowMapNode }

package/src/flows/FlowNodeCard.tsx

@@ -0,0 +1,150 @@
+import { Handle, Position, type NodeProps } from '@xyflow/react'
+import { MessageCircleQuestion, GitBranch, Zap, ListTree, Diamond, AlertTriangle, AlertCircle, Headset, Clock3, ShoppingBag, type LucideIcon } from 'lucide-react'
+import type { FlowEditorLabels } from './labels'
+import type { FlowNodeData, GraphIssue } from './flowGraph'
+
+const NODE_TYPE_COLOR: Record<FlowNodeData['type'], string> = {
+  question: 'border-blue-300 bg-blue-50 dark:bg-blue-950/40 dark:border-blue-800',
+  entrada_choice: 'border-purple-300 bg-purple-50 dark:bg-purple-950/40 dark:border-purple-800',
+  action: 'border-orange-300 bg-orange-50 dark:bg-orange-950/40 dark:border-orange-800',
+  menu: 'border-emerald-300 bg-emerald-50 dark:bg-emerald-950/40 dark:border-emerald-800',
+  condition: 'border-cyan-300 bg-cyan-50 dark:bg-cyan-950/40 dark:border-cyan-800',
+}
+
+const NODE_TYPE_ICON: Record<FlowNodeData['type'], LucideIcon> = {
+  question: MessageCircleQuestion,
+  entrada_choice: ListTree,
+  action: Zap,
+  menu: GitBranch,
+  condition: Diamond,
+}
+
+// Ícone por função da ação — o host estende via `actionKindIcons` (FlowNodeCardData) para
+// registrar ícones dos próprios `actionKind`s sem o pacote assumir nenhum caso de negócio.
+const DEFAULT_ACTION_KIND_ICON: Record<string, LucideIcon> = {
+  handoff: Headset,
+  rate_limited_handoff: Clock3,
+  send_product_list: ShoppingBag,
+}
+
+// Rótulo amigável para exibir em cartões/selects — nunca a chave interna crua (ex.: "action_handoff"),
+// que só faz sentido para quem escreveu o interpretador do fluxo, não para quem está editando.
+export function nodeLabel(node: FlowNodeData | undefined, labels: FlowEditorLabels): string {
+  if (!node) return '—'
+  if (node.type === 'action') {
+    const actionKindLabel = node.actionKind ? labels.actionKindLabels[node.actionKind] : undefined
+    // Sempre retorna string: um actionKind futuro sem label mapeado cai no próprio valor bruto
+    // em vez de undefined (que quebraria qualquer .length/truncate rio abaixo).
+    return node.directMessage || node.fallbackMessage || actionKindLabel || node.actionKind || node.id
+  }
+  if (node.type === 'condition') {
+    if (!node.conditionContextKey || !node.conditionOperator || !node.conditionValue) return node.id
+    const operatorLabel = labels.conditionOperatorLabels[node.conditionOperator] ?? node.conditionOperator
+    return `${node.conditionContextKey} ${operatorLabel} ${node.conditionValue}`
+  }
+  return node.question || node.contextKey || node.id
+}
+
+export type FlowNodeCardData = {
+  node: FlowNodeData
+  liveCount: number
+  isStart: boolean
+  isSelected: boolean
+  issues: GraphIssue[]
+  labels: FlowEditorLabels
+  actionKindIcons?: Record<string, LucideIcon>
+  onSelect: (id: string) => void
+}
+
+// Uma linha por saída: nós de escolha (question+choice ou menu) ganham UMA linha por opção mais
+// uma linha "caso contrário" — cada uma com seu próprio handle, arrastável pra uma conexão
+// condicional distinta. Nós lineares (pergunta simples) têm uma única linha "Próximo". Ações são
+// terminais (o motor do host nunca continua a partir de 'next' de uma ação) — sem linha.
+function sourceRows(node: FlowNodeData, labels: FlowEditorLabels): { id: string; label: string; isDefault: boolean }[] {
+  if (node.type === 'action') return []
+  if (node.type === 'condition') {
+    return [
+      { id: 'true', label: labels.nodePanel.conditionTrue, isDefault: false },
+      { id: 'false', label: labels.nodePanel.conditionFalse, isDefault: false },
+    ]
+  }
+  const isChoice = node.type === 'menu' || node.questionType === 'choice'
+  if (!isChoice) return [{ id: 'next', label: labels.nodePanel.nextRowLabel, isDefault: false }]
+  const options = node.options ?? []
+  return [
+    ...options.map(([id, label]) => ({ id, label, isDefault: false })),
+    { id: '__default', label: labels.edgeFallbackLabel, isDefault: true },
+  ]
+}
+
+// Uma linha de saída, com seu próprio handle ancorado na borda direita da própria linha (não
+// mais distribuído na borda inferior do card) — assim dá pra ler "opção → destino" sem seguir
+// o fio até o label da ligação, que é justamente o que confundia num fluxo com muitos ramos.
+function SourceRow({ label, isDefault, handleId }: { label: string; isDefault: boolean; handleId: string }) {
+  return (
+    <div className="relative flex items-center gap-1.5 rounded-md border border-gray-200 dark:border-gray-600 bg-white/70 dark:bg-gray-900/40 px-2 py-1 pr-3">
+      <span className={`text-xs truncate flex-1 ${isDefault ? 'italic text-gray-400 dark:text-gray-500' : 'text-gray-700 dark:text-gray-200'}`}>
+        {label}
+      </span>
+      <Handle
+        type="source"
+        position={Position.Right}
+        id={handleId}
+        style={{ position: 'absolute', right: -7, top: '50%', transform: 'translateY(-50%)' }}
+        className={isDefault ? '!bg-gray-400 dark:!bg-gray-500' : '!bg-purple-500'}
+      />
+    </div>
+  )
+}
+
+export function FlowNodeCard({ data }: NodeProps) {
+  const { node, liveCount, isStart, isSelected, issues, labels, actionKindIcons, onSelect } = data as unknown as FlowNodeCardData
+  const label = nodeLabel(node, labels)
+  const iconMap = { ...DEFAULT_ACTION_KIND_ICON, ...actionKindIcons }
+  const Icon = node.type === 'action' && node.actionKind ? (iconMap[node.actionKind] ?? NODE_TYPE_ICON[node.type]) : NODE_TYPE_ICON[node.type]
+  const rows = sourceRows(node, labels)
+  const hasError = issues.some((i) => i.severity === 'error')
+  const hasWarning = !hasError && issues.some((i) => i.severity === 'warning')
+
+  return (
+    <div
+      title={label}
+      className={`relative rounded-lg border-2 px-3 py-2 w-60 cursor-pointer shadow-sm hover:shadow-md transition-shadow ${NODE_TYPE_COLOR[node.type]} ${isSelected ? 'ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-gray-900' : ''}`}
+      onClick={() => onSelect(node.id)}
+    >
+      <Handle type="target" position={Position.Top} id="target" className="!bg-gray-400 dark:!bg-gray-500" />
+
+      <div className="flex items-center justify-between gap-2">
+        <span className="flex items-center gap-1.5 uppercase tracking-wide font-semibold text-gray-500 dark:text-gray-400 text-xs">
+          <Icon size={12} strokeWidth={2.5} />
+          {isStart && <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" title={labels.startNodeTooltip} />}
+          {labels.legend[node.type]}
+        </span>
+        <div className="flex items-center gap-1">
+          {hasError && <AlertCircle size={13} className="text-red-600 dark:text-red-400" />}
+          {hasWarning && <AlertTriangle size={13} className="text-amber-500 dark:text-amber-400" />}
+          {liveCount > 0 && (
+            <span
+              title={labels.liveCountTooltip(liveCount)}
+              className="font-bold bg-blue-600 text-white rounded-full px-1.5 py-0.5 text-xs"
+            >
+              {liveCount}
+            </span>
+          )}
+        </div>
+      </div>
+
+      <p className="text-sm text-gray-900 dark:text-gray-100 mt-1 line-clamp-3">{label}</p>
+
+      {rows.length > 0 && (
+        <div className="mt-2 space-y-1">
+          {rows.map((row) => (
+            <SourceRow key={row.id} label={row.label} isDefault={row.isDefault} handleId={row.id} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export const flowNodeTypes = { flowNode: FlowNodeCard }