1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
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">×</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>
);
}
|
