From ef839683aed1f501e0de507e2ca72ccdc7b29666 Mon Sep 17 00:00:00 2001
From: soryu <soryu@soryu.co>
Date: Wed, 21 Jan 2026 16:18:11 +0000
Subject: feat(frontend): Add BranchTaskModal component

Modal component for creating a branched task from an existing task.
Features:
- Pre-filled name with "Branch of {taskName}"
- Required message textarea for initial task instruction
- Cancel and Create Branch buttons with purple theme
- Error message display on failure
- Follows existing modal patterns (PhaseConfirmationModal)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/components/mesh/BranchTaskModal.tsx        | 132 +++++++++++++++++++++
 1 file changed, 132 insertions(+)
 create mode 100644 makima/frontend/src/components/mesh/BranchTaskModal.tsx

diff --git a/makima/frontend/src/components/mesh/BranchTaskModal.tsx b/makima/frontend/src/components/mesh/BranchTaskModal.tsx
new file mode 100644
index 0000000..ade4c7d
--- /dev/null
+++ b/makima/frontend/src/components/mesh/BranchTaskModal.tsx
@@ -0,0 +1,132 @@
+import { useState } from "react";
+import type { TaskWithSubtasks } from "../../lib/api";
+
+interface BranchTaskModalProps {
+  task: TaskWithSubtasks;
+  onBranch: (taskId: string, message: string, name?: string) => Promise<void>;
+  onClose: () => void;
+}
+
+export function BranchTaskModal({
+  task,
+  onBranch,
+  onClose,
+}: BranchTaskModalProps) {
+  const [name, setName] = useState(`Branch of ${task.name}`);
+  const [message, setMessage] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async () => {
+    if (!message.trim()) {
+      setError("Message is required");
+      return;
+    }
+
+    setSubmitting(true);
+    setError(null);
+
+    try {
+      await onBranch(task.id, message.trim(), name.trim() || undefined);
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create branch");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm">
+      <div className="w-full max-w-lg mx-4 bg-[#0a1628] border border-[rgba(117,170,252,0.3)] shadow-2xl">
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-[rgba(117,170,252,0.2)]">
+          <div className="flex items-center gap-2">
+            <span className="text-purple-400 text-lg">*</span>
+            <h2 className="font-mono text-sm text-[#75aafc] uppercase tracking-wide">
+              Branch Task
+            </h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="text-[#555] hover:text-[#9bc3ff] transition-colors"
+            aria-label="Close"
+          >
+            <span className="text-xl">&times;</span>
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="p-4 space-y-4">
+          {/* Source task info */}
+          <div className="bg-[#0d1b2d] border border-[rgba(117,170,252,0.15)] p-3">
+            <p className="font-mono text-xs text-[#9bc3ff] mb-1 uppercase">
+              Branching From
+            </p>
+            <p className="font-mono text-sm text-[#dbe7ff]">{task.name}</p>
+            <p className="font-mono text-[10px] text-[#555] mt-1">
+              Status: {task.status}
+            </p>
+          </div>
+
+          {/* Name input */}
+          <div className="space-y-2">
+            <label className="block font-mono text-xs text-[#9bc3ff] uppercase">
+              Branch Name
+            </label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Enter branch task name..."
+              className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc]"
+            />
+          </div>
+
+          {/* Message input */}
+          <div className="space-y-2">
+            <label className="block font-mono text-xs text-[#9bc3ff] uppercase">
+              Message <span className="text-red-400">*</span>
+            </label>
+            <textarea
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              placeholder="Enter a message for the new task to continue with..."
+              rows={4}
+              className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc] resize-none"
+              autoFocus
+            />
+            <p className="font-mono text-[10px] text-[#555]">
+              This message will be sent to the branched task when it starts.
+            </p>
+          </div>
+
+          {/* Error message */}
+          {error && (
+            <div className="bg-red-900/20 border border-red-500/30 p-3 text-red-400 font-mono text-sm">
+              {error}
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex gap-3 pt-4 border-t border-[rgba(117,170,252,0.2)]">
+            <button
+              onClick={onClose}
+              disabled={submitting}
+              className="flex-1 px-4 py-2.5 font-mono text-sm text-[#9bc3ff] border border-[rgba(117,170,252,0.25)] hover:border-[#3f6fb3] disabled:opacity-50 disabled:cursor-not-allowed transition-colors uppercase"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSubmit}
+              disabled={submitting || !message.trim()}
+              className="flex-1 px-4 py-2.5 font-mono text-sm text-[#dbe7ff] bg-purple-700/30 border border-purple-400/50 hover:bg-purple-700/40 hover:border-purple-400/70 disabled:opacity-50 disabled:cursor-not-allowed transition-colors uppercase"
+            >
+              {submitting ? "Creating..." : "Create Branch"}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
-- 
cgit v1.2.3