feat: add AnswerStubCard component for unresolved branch placeholders

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/tree-editor/AnswerStubCard.tsx

@@ -0,0 +1,73 @@
+import { useState } from 'react'
+import { HelpCircle, Zap, CheckCircle } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { TreeStructure } from '@/types'
+
+interface AnswerStubCardProps {
+  node: TreeStructure  // type === 'answer'
+  fromOption?: string
+  onSelectType: (nodeId: string, type: 'decision' | 'action' | 'solution') => void
+}
+
+export function AnswerStubCard({ node, fromOption, onSelectType }: AnswerStubCardProps) {
+  const [picking, setPicking] = useState(false)
+  const label = fromOption || node.title || 'Answer'
+
+  return (
+    <div
+      className={cn(
+        'min-w-[180px] max-w-[280px] rounded-xl border-2 border-dashed border-border bg-card/50',
+        'transition-all duration-150',
+        !picking && 'cursor-pointer hover:border-primary/40 hover:bg-accent/30'
+      )}
+      onClick={() => !picking && setPicking(true)}
+    >
+      {/* Label */}
+      <div className="px-3 pt-2.5 pb-1 text-sm font-heading font-medium text-foreground text-center">
+        {label}
+      </div>
+
+      {/* Prompt / type picker */}
+      {!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={cn(
+              '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={cn(
+              '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={cn(
+              '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>
+  )
+}
+
+export default AnswerStubCard