From e94171fb18cefae934e9a6347c528eed3c2d3b47 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Wed, 18 Feb 2026 21:08:28 -0500
Subject: [PATCH] feat: add FlowCanvasAnswerNode stub card for React Flow
 canvas

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../tree-editor/FlowCanvasAnswerNode.tsx      | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 frontend/src/components/tree-editor/FlowCanvasAnswerNode.tsx

diff --git a/frontend/src/components/tree-editor/FlowCanvasAnswerNode.tsx b/frontend/src/components/tree-editor/FlowCanvasAnswerNode.tsx
new file mode 100644
index 00000000..2fd84eee
--- /dev/null
+++ b/frontend/src/components/tree-editor/FlowCanvasAnswerNode.tsx
@@ -0,0 +1,69 @@
+import { memo, useState } from 'react'
+import { Handle, Position, type NodeProps } from '@xyflow/react'
+import { HelpCircle, Zap, CheckCircle } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { TreeStructure } from '@/types'
+
+export interface FlowCanvasAnswerNodeData {
+  node: TreeStructure
+  onSelectType: (nodeId: string, type: 'decision' | 'action' | 'solution') => void
+}
+
+function FlowCanvasAnswerNodeComponent({ data, selected }: NodeProps) {
+  const { node, onSelectType } = data as unknown as FlowCanvasAnswerNodeData
+  const [picking, setPicking] = useState(false)
+  const label = node.title || 'Answer'
+
+  return (
+    <>
+      <Handle type="target" position={Position.Top} className="!bg-border !w-2 !h-2 !border-0" />
+
+      <div
+        className={cn(
+          'w-[280px] rounded-xl border-2 border-dashed border-border bg-card/50 transition-all',
+          !picking && 'cursor-pointer hover:border-primary/40 hover:bg-accent/30',
+          selected && 'ring-1 ring-primary'
+        )}
+        onClick={() => !picking && setPicking(true)}
+      >
+        <div className="px-3 pt-2.5 pb-1 text-sm font-heading font-medium text-foreground text-center">
+          {label}
+        </div>
+
+        {!picking ? (
+          <div className="pb-2.5 text-center text-[10px] text-muted-foreground font-label">
+            + Choose Type
+          </div>
+        ) : (
+          <div className="flex items-center justify-center gap-1.5 pb-2.5 px-2">
+            <button
+              type="button"
+              onClick={(e) => { e.stopPropagation(); onSelectType(node.id, 'decision') }}
+              className="flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-label border border-blue-500/30 bg-blue-500/10 text-blue-400 hover:bg-blue-500/20"
+            >
+              <HelpCircle className="h-2.5 w-2.5" /> Decision
+            </button>
+            <button
+              type="button"
+              onClick={(e) => { e.stopPropagation(); onSelectType(node.id, 'action') }}
+              className="flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-label border border-yellow-500/30 bg-yellow-500/10 text-yellow-400 hover:bg-yellow-500/20"
+            >
+              <Zap className="h-2.5 w-2.5" /> Action
+            </button>
+            <button
+              type="button"
+              onClick={(e) => { e.stopPropagation(); onSelectType(node.id, 'solution') }}
+              className="flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-label border border-green-500/30 bg-green-500/10 text-green-400 hover:bg-green-500/20"
+            >
+              <CheckCircle className="h-2.5 w-2.5" /> Solution
+            </button>
+          </div>
+        )}
+      </div>
+
+      <Handle type="source" position={Position.Bottom} className="!bg-border !w-2 !h-2 !border-0" />
+    </>
+  )
+}
+
+export const FlowCanvasAnswerNode = memo(FlowCanvasAnswerNodeComponent)