From b6e3efd30a93518556ee4a8237f5b12c75d7c271 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Wed, 25 Feb 2026 00:11:46 -0500
Subject: [PATCH] feat: add ForkModal component with name and reason fields

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/library/ForkModal.tsx | 120 ++++++++++++++++++
 1 file changed, 120 insertions(+)
 create mode 100644 frontend/src/components/library/ForkModal.tsx

diff --git a/frontend/src/components/library/ForkModal.tsx b/frontend/src/components/library/ForkModal.tsx
new file mode 100644
index 00000000..fc191396
--- /dev/null
+++ b/frontend/src/components/library/ForkModal.tsx
@@ -0,0 +1,120 @@
+import { useState } from 'react'
+import { GitBranch, X } from 'lucide-react'
+import { treesApi } from '@/api/trees'
+import { toast } from '@/lib/toast'
+import { cn } from '@/lib/utils'
+import { useNavigate } from 'react-router-dom'
+
+interface ForkModalProps {
+  treeId: string
+  treeName: string
+  onClose: () => void
+}
+
+export function ForkModal({ treeId, treeName, onClose }: ForkModalProps) {
+  const navigate = useNavigate()
+  const [name, setName] = useState(`Copy of ${treeName}`)
+  const [forkReason, setForkReason] = useState('')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!name.trim()) return
+    setIsSubmitting(true)
+    setError(null)
+    try {
+      await treesApi.fork(treeId, {
+        name: name.trim(),
+        fork_reason: forkReason.trim() || undefined,
+      })
+      toast.success('Flow forked successfully')
+      onClose()
+      navigate('/my-trees')
+    } catch (err) {
+      console.error('Failed to fork flow:', err)
+      setError('Failed to fork flow. Please try again.')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
+      <div className="w-full max-w-md rounded-xl border border-border bg-card shadow-xl">
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-border px-5 py-4">
+          <div className="flex items-center gap-2">
+            <GitBranch className="h-4 w-4 text-muted-foreground" />
+            <h2 className="text-sm font-semibold text-foreground">Fork Flow</h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        {/* Body */}
+        <form onSubmit={handleSubmit} className="space-y-4 px-5 py-4">
+          <div>
+            <label className="mb-1.5 block text-xs font-medium text-muted-foreground">
+              Name <span className="text-red-400">*</span>
+            </label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              required
+              autoFocus
+              className={cn(
+                'w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+              )}
+            />
+          </div>
+
+          <div>
+            <label className="mb-1.5 block text-xs font-medium text-muted-foreground">
+              Reason for Forking{' '}
+              <span className="text-muted-foreground/60">(optional)</span>
+            </label>
+            <textarea
+              value={forkReason}
+              onChange={(e) => setForkReason(e.target.value)}
+              rows={3}
+              placeholder="e.g. customizing for a specific client…"
+              className={cn(
+                'w-full resize-none rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+              )}
+            />
+          </div>
+
+          {error && (
+            <p className="text-xs text-red-400">{error}</p>
+          )}
+
+          {/* Footer */}
+          <div className="flex justify-end gap-2 pt-1">
+            <button
+              type="button"
+              onClick={onClose}
+              className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isSubmitting || !name.trim()}
+              className="bg-gradient-brand flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-40"
+            >
+              {isSubmitting ? 'Forking…' : 'Fork Flow'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}