246 lines
8.7 KiB
TypeScript
246 lines
8.7 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { CardDescription, CardTitle } from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Select } from "@/components/ui/select";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import type { FleetAgent, TaskPriority, TaskTemplate } from "@/lib/types";
|
|
|
|
const PRIORITIES: TaskPriority[] = ["Low", "Medium", "High", "Critical"];
|
|
|
|
export function TaskIntakeModal({
|
|
agents,
|
|
templates,
|
|
open,
|
|
onClose,
|
|
onCreated,
|
|
}: {
|
|
agents: FleetAgent[];
|
|
templates: TaskTemplate[];
|
|
open: boolean;
|
|
onClose: () => void;
|
|
onCreated: () => Promise<void>;
|
|
}) {
|
|
const [formState, setFormState] = useState({
|
|
templateKey: "",
|
|
title: "",
|
|
description: "",
|
|
assignee: "",
|
|
priority: "Medium" as TaskPriority,
|
|
tags: "",
|
|
repoSlug: "",
|
|
baseBranch: "main",
|
|
preferredAgent: "codex",
|
|
reasoningEffort: "high",
|
|
modelHint: "",
|
|
});
|
|
|
|
const selectedTemplate = templates.find((template) => template.key === formState.templateKey) || null;
|
|
const selectedAgent = agents.find((agent) => agent.assignmentKey === formState.assignee) || null;
|
|
|
|
useEffect(() => {
|
|
if (!open) {
|
|
return;
|
|
}
|
|
|
|
function onKeyDown(event: KeyboardEvent) {
|
|
if (event.key === "Escape") {
|
|
onClose();
|
|
}
|
|
}
|
|
|
|
window.addEventListener("keydown", onKeyDown);
|
|
document.body.style.overflow = "hidden";
|
|
return () => {
|
|
window.removeEventListener("keydown", onKeyDown);
|
|
document.body.style.overflow = "";
|
|
};
|
|
}, [onClose, open]);
|
|
|
|
function applyTemplate(templateKey: string) {
|
|
const template = templates.find((entry) => entry.key === templateKey) || null;
|
|
if (!template) {
|
|
setFormState((current) => ({ ...current, templateKey }));
|
|
return;
|
|
}
|
|
|
|
setFormState((current) => ({
|
|
...current,
|
|
templateKey,
|
|
title: current.title || template.title,
|
|
priority: template.defaults.priority,
|
|
tags: template.tags.join(", "),
|
|
repoSlug: template.defaults.repoSlug || current.repoSlug,
|
|
baseBranch: template.defaults.baseBranch || current.baseBranch,
|
|
preferredAgent: template.defaults.preferredAgent || current.preferredAgent,
|
|
reasoningEffort: template.defaults.reasoningEffort || current.reasoningEffort,
|
|
}));
|
|
}
|
|
|
|
async function createTask(event: React.FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
const tags = formState.tags
|
|
.split(",")
|
|
.map((tag) => tag.trim())
|
|
.filter(Boolean);
|
|
|
|
await fetch("/api/tasks", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
title: formState.title,
|
|
description: formState.description,
|
|
assignee: formState.assignee,
|
|
priority: formState.priority,
|
|
tags,
|
|
template_key: formState.templateKey || null,
|
|
repo_slug: formState.repoSlug || null,
|
|
base_branch: formState.baseBranch || null,
|
|
preferred_agent: formState.preferredAgent || null,
|
|
reasoning_effort: formState.reasoningEffort || null,
|
|
model_hint: formState.modelHint || null,
|
|
family: selectedAgent?.family || selectedTemplate?.family || null,
|
|
target_host: selectedAgent?.host || selectedTemplate?.defaults.targetHost || "",
|
|
target_channel: selectedAgent?.channels[0]?.value || selectedTemplate?.defaults.targetChannel || "",
|
|
dispatch_method: selectedAgent?.defaultDispatchMethod || selectedTemplate?.defaults.dispatchMethod || "manual",
|
|
}),
|
|
});
|
|
|
|
setFormState({
|
|
templateKey: "",
|
|
title: "",
|
|
description: "",
|
|
assignee: "",
|
|
priority: "Medium",
|
|
tags: "",
|
|
repoSlug: "",
|
|
baseBranch: "main",
|
|
preferredAgent: "codex",
|
|
reasoningEffort: "high",
|
|
modelHint: "",
|
|
});
|
|
await onCreated();
|
|
onClose();
|
|
}
|
|
|
|
if (!open) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-slate-950/70 px-4 py-10 backdrop-blur-sm">
|
|
<div className="absolute inset-0" onClick={onClose} />
|
|
<div className="relative w-full max-w-3xl rounded-3xl border border-white/10 bg-slate-950/95 shadow-2xl">
|
|
<div className="flex items-start justify-between gap-4 border-b border-white/10 px-6 py-5">
|
|
<div>
|
|
<CardTitle>New Task</CardTitle>
|
|
<CardDescription>
|
|
Create a typed task and route it to the right execution family without leaving the board.
|
|
</CardDescription>
|
|
</div>
|
|
<Button size="sm" variant="ghost" onClick={onClose}>
|
|
Close
|
|
</Button>
|
|
</div>
|
|
|
|
<form className="grid gap-3 p-6 md:grid-cols-2" onSubmit={createTask}>
|
|
<Select value={formState.templateKey} onChange={(event) => applyTemplate(event.target.value)}>
|
|
<option value="">Select template</option>
|
|
{templates.map((template) => (
|
|
<option key={template.key} value={template.key}>
|
|
{template.title} • {template.family}
|
|
</option>
|
|
))}
|
|
</Select>
|
|
<Select
|
|
value={formState.assignee}
|
|
onChange={(event) => setFormState((current) => ({ ...current, assignee: event.target.value }))}
|
|
>
|
|
<option value="">Select agent</option>
|
|
{agents.map((agent) => (
|
|
<option key={agent.slug} value={agent.assignmentKey}>
|
|
{agent.name} • {agent.family} • {agent.host}
|
|
</option>
|
|
))}
|
|
</Select>
|
|
<Input
|
|
placeholder="Task title"
|
|
required
|
|
value={formState.title}
|
|
onChange={(event) => setFormState((current) => ({ ...current, title: event.target.value }))}
|
|
/>
|
|
<Select
|
|
value={formState.priority}
|
|
onChange={(event) =>
|
|
setFormState((current) => ({ ...current, priority: event.target.value as TaskPriority }))
|
|
}
|
|
>
|
|
{PRIORITIES.map((priority) => (
|
|
<option key={priority} value={priority}>
|
|
{priority}
|
|
</option>
|
|
))}
|
|
</Select>
|
|
<Input
|
|
placeholder="Repo slug from repo-map.json"
|
|
value={formState.repoSlug}
|
|
onChange={(event) => setFormState((current) => ({ ...current, repoSlug: event.target.value }))}
|
|
/>
|
|
<Input
|
|
placeholder="Base branch"
|
|
value={formState.baseBranch}
|
|
onChange={(event) => setFormState((current) => ({ ...current, baseBranch: event.target.value }))}
|
|
/>
|
|
<Input
|
|
placeholder="Preferred swarm agent"
|
|
value={formState.preferredAgent}
|
|
onChange={(event) => setFormState((current) => ({ ...current, preferredAgent: event.target.value }))}
|
|
/>
|
|
<Input
|
|
placeholder="Reasoning effort"
|
|
value={formState.reasoningEffort}
|
|
onChange={(event) => setFormState((current) => ({ ...current, reasoningEffort: event.target.value }))}
|
|
/>
|
|
<Input
|
|
className="md:col-span-2"
|
|
placeholder="Tags (comma-separated)"
|
|
value={formState.tags}
|
|
onChange={(event) => setFormState((current) => ({ ...current, tags: event.target.value }))}
|
|
/>
|
|
<Input
|
|
className="md:col-span-2"
|
|
placeholder="Model hint (optional)"
|
|
value={formState.modelHint}
|
|
onChange={(event) => setFormState((current) => ({ ...current, modelHint: event.target.value }))}
|
|
/>
|
|
<div className="md:col-span-2">
|
|
<Textarea
|
|
placeholder="Describe the task, target host, expected outcome, and any validation steps."
|
|
value={formState.description}
|
|
onChange={(event) => setFormState((current) => ({ ...current, description: event.target.value }))}
|
|
/>
|
|
</div>
|
|
<div className="md:col-span-2 flex flex-wrap items-center justify-between gap-3 border-t border-white/10 pt-3">
|
|
<p className="text-sm text-slate-400">
|
|
{selectedAgent
|
|
? `Dispatch target: ${selectedAgent.family} on ${selectedAgent.host}`
|
|
: selectedTemplate
|
|
? `Template dispatch: ${selectedTemplate.defaults.dispatchMethod}`
|
|
: "Select an agent or template to prefill dispatch metadata."}
|
|
</p>
|
|
<div className="flex gap-2">
|
|
<Button type="button" variant="ghost" onClick={onClose}>
|
|
Cancel
|
|
</Button>
|
|
<Button type="submit">Create Task</Button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|