feat: add cross-reference node picker to decision option rows

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

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

@@ -1,7 +1,7 @@
 import { useRef, useEffect } from 'react'
-import { Play } from 'lucide-react'
+import { Play, Link2 } from 'lucide-react'
 import { DynamicArrayField } from './DynamicArrayField'
-import { useTreeEditorStore } from '@/store/treeEditorStore'
+import { useTreeEditorStore, collectAllNodesFlat } from '@/store/treeEditorStore'
 import type { TreeStructure, TreeOption } from '@/types'
 import { cn } from '@/lib/utils'
 import { InfoTip } from '@/components/common/InfoTip'
@@ -195,12 +195,89 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
                       <p className="mt-1 text-xs text-red-400">{optionLabelError.message}</p>
                     )}
                   </div>
+                  {/* Cross-reference link indicator */}
+                  {option.next_node_id && (() => {
+                    const treeStructure = useTreeEditorStore.getState().treeStructure
+                    const childIds = new Set(node.children?.map(c => c.id) ?? [])
+                    // Only show if it's a cross-reference (points outside children)
+                    if (childIds.has(option.next_node_id)) return null
+                    const allNodes = collectAllNodesFlat(treeStructure)
+                    const target = allNodes.find(n => n.id === option.next_node_id)
+                    if (!target) return null
+                    return (
+                      <div className="flex items-center gap-1 text-xs text-primary" title={`Links to: ${target.label}`}>
+                        <Link2 className="h-3 w-3" />
+                      </div>
+                    )
+                  })()}
                 </div>
               )
             }}
           />
         </div>
 
+        {/* Quick-link: assign an option to an existing node */}
+        <details className="mt-2">
+          <summary className="cursor-pointer text-xs text-muted-foreground hover:text-foreground">
+            <Link2 className="inline h-3 w-3 mr-1" />
+            Link an option to an existing node (cross-reference)
+          </summary>
+          <div className="mt-2 space-y-2 rounded-md border border-border bg-accent/30 p-3">
+            <p className="text-xs text-muted-foreground">
+              Select an option, then pick a target node. This creates a loop-back or cross-reference.
+            </p>
+            <div className="flex gap-2">
+              <select
+                id="xref-option-select"
+                className={cn(
+                  'flex-1 rounded-md border border-border px-2 py-1.5 text-xs',
+                  'bg-card text-foreground'
+                )}
+                defaultValue=""
+              >
+                <option value="">Select option...</option>
+                {(node.options || []).map((opt, i) => (
+                  <option key={opt.id} value={i}>
+                    {indexToLetter(i)}: {opt.label || '(empty)'}
+                  </option>
+                ))}
+              </select>
+              <select
+                id="xref-target-select"
+                className={cn(
+                  'flex-1 rounded-md border border-border px-2 py-1.5 text-xs',
+                  'bg-card text-foreground'
+                )}
+                defaultValue=""
+                onChange={(e) => {
+                  const optSelect = document.getElementById('xref-option-select') as HTMLSelectElement
+                  const optIndex = parseInt(optSelect?.value, 10)
+                  const targetId = e.target.value
+                  if (!isNaN(optIndex) && targetId) {
+                    handleUpdateOption(optIndex, { next_node_id: targetId })
+                    // Reset selects
+                    optSelect.value = ''
+                    e.target.value = ''
+                  }
+                }}
+              >
+                <option value="">Select target node...</option>
+                {(() => {
+                  const treeStructure = useTreeEditorStore.getState().treeStructure
+                  const allNodes = collectAllNodesFlat(treeStructure)
+                  return allNodes
+                    .filter(n => n.id !== node.id && n.type !== 'answer')
+                    .map(n => (
+                      <option key={n.id} value={n.id}>
+                        {'  '.repeat(n.depth)}{n.type === 'decision' ? '?' : n.type === 'action' ? '>' : '*'} {n.label}
+                      </option>
+                    ))
+                })()}
+              </select>
+            </div>
+          </div>
+        </details>
+
         {/* Example hint for root node */}
         {isRootNode && (node.options?.length || 0) < 2 && (
           <div className="mt-3 rounded-md border border-dashed border-border bg-accent/50 p-3 text-xs text-muted-foreground">