fix: address review comments on saga flow and preview tabs

- Fix duplicate edge when step has earlyExit by tracking when decision
  "No" edge already connects to the next step
- Add type="button" to clipboard copy button to prevent form submits
- Add .catch() to clipboard writeText for restricted contexts
- Add relative positioning to saga flow wrapper for legend overlay

Author: bjcoombs

frontend/src/features/cookbook/components/preview-source-tabs.tsx

@@ -11,10 +11,13 @@ interface PreviewSourceTabsProps {
 export function PreviewSourceTabs({ preview, source, sourceLabel = 'Source', className }: PreviewSourceTabsProps) {
   const [copied, setCopied] = useState(false)
 
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(source)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
+  const handleCopy = () => {
+    navigator.clipboard.writeText(source).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    }).catch(() => {
+      // Silently fail in restricted contexts
+    })
   }
 
   return (
@@ -31,6 +34,7 @@ export function PreviewSourceTabs({ preview, source, sourceLabel = 'Source', cla
       <TabsContent value="source" className="mt-4">
         <div className="relative">
           <button
+            type="button"
             onClick={handleCopy}
             className="absolute right-2 top-2 z-10 rounded border bg-background px-2 py-1 text-xs text-muted-foreground hover:bg-accent"
           >

frontend/src/features/cookbook/components/saga-flow.tsx

@@ -228,7 +228,7 @@ function buildFlowGraph(flow: SagaFlow): { nodes: Node[]; edges: Edge[] } {
   }
 
   // Step + decision + exit nodes
-  let prevId = 'start'
+  let prevId: string | null = 'start'
 
   for (let i = 0; i < flow.steps.length; i++) {
     const step = flow.steps[i]
@@ -245,11 +245,14 @@ function buildFlowGraph(flow: SagaFlow): { nodes: Node[]; edges: Edge[] } {
       } satisfies StepNodeData,
     })
 
-    edges.push({
-      id: `${prevId}-${stepId}`,
-      source: prevId,
-      target: stepId,
-    })
+    // Connect from previous node (null when previous decision's "No" edge already connects)
+    if (prevId) {
+      edges.push({
+        id: `${prevId}-${stepId}`,
+        source: prevId,
+        target: stepId,
+      })
+    }
 
     if (step.earlyExit) {
       const decisionId = `decision-${i}`
@@ -285,15 +288,15 @@ function buildFlowGraph(flow: SagaFlow): { nodes: Node[]; edges: Edge[] } {
         style: { stroke: '#ef4444', strokeDasharray: '6 3' },
       })
 
-      // "No" -> next step
+      // "No" -> next step (already connects to nextId, so skip prevId for next iteration)
       edges.push({
         id: `${decisionId}-${nextId}`,
         source: decisionId,
         target: nextId,
         label: 'No',
       })
 
-      prevId = decisionId
+      prevId = null
     } else {
       prevId = stepId
     }
@@ -307,9 +310,8 @@ function buildFlowGraph(flow: SagaFlow): { nodes: Node[]; edges: Edge[] } {
     data: {},
   })
 
-  // Connect last step to end (only if no early exit on last step)
-  const lastStep = flow.steps[flow.steps.length - 1]
-  if (!lastStep.earlyExit) {
+  // Connect last step to end (only if no early exit on last step already connected it)
+  if (prevId) {
     edges.push({
       id: `${prevId}-end`,
       source: prevId,
@@ -343,7 +345,7 @@ export function SagaFlowDiagram({ flow, onStepClick, className }: SagaFlowDiagra
   }, [flow])
 
   return (
-    <div className={className} style={{ width: '100%', height: '100%', minHeight: 400 }}>
+    <div className={`relative ${className ?? ''}`} style={{ width: '100%', height: '100%', minHeight: 400 }}>
       <ReactFlow
         nodes={nodes}
         edges={edges}