diff --git a/frontend/src/components/tree-editor/AnswerStubCard.tsx b/frontend/src/components/tree-editor/AnswerStubCard.tsx
index dea56a01..1a630ad6 100644
--- a/frontend/src/components/tree-editor/AnswerStubCard.tsx
+++ b/frontend/src/components/tree-editor/AnswerStubCard.tsx
@@ -1,5 +1,5 @@
import { useState } from 'react'
-import { HelpCircle, Zap, CheckCircle } from 'lucide-react'
+import { HelpCircle, Zap, CheckCircle, Trash2 } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { TreeStructure } from '@/types'
@@ -7,28 +7,62 @@ interface AnswerStubCardProps {
node: TreeStructure // type === 'answer'
fromOption?: string
onSelectType: (nodeId: string, type: 'decision' | 'action' | 'solution') => void
+ onDelete: (nodeId: string) => void
}
-export function AnswerStubCard({ node, fromOption, onSelectType }: AnswerStubCardProps) {
+export function AnswerStubCard({ node, fromOption, onSelectType, onDelete }: AnswerStubCardProps) {
const [picking, setPicking] = useState(false)
+ const [confirming, setConfirming] = useState(false)
const label = fromOption || node.title || 'Answer'
return (
!picking && setPicking(true)}
+ onClick={() => !picking && !confirming && setPicking(true)}
>
+ {/* Delete button — top-right corner */}
+ {!picking && !confirming && (
+
+ )}
+
{/* Label */}
{label}
- {/* Prompt / type picker */}
- {!picking ? (
+ {/* Confirm delete */}
+ {confirming ? (
+
+
Delete this stub?
+
+
+
+
+
+ ) : !picking ? (
+ Choose Type
diff --git a/frontend/src/components/tree-editor/TreeCanvas.tsx b/frontend/src/components/tree-editor/TreeCanvas.tsx
index b8f7bedf..255023bc 100644
--- a/frontend/src/components/tree-editor/TreeCanvas.tsx
+++ b/frontend/src/components/tree-editor/TreeCanvas.tsx
@@ -503,6 +503,7 @@ export function TreeCanvas() {
node={node}
fromOption={optionLabel}
onSelectType={handleSelectAnswerType}
+ onDelete={handleDelete}
/>
) : (