Submatter/apps/web/app/(app)/[workspaceSlug]/plans/page.tsx

"use client";

import * as React from "react";
import { useParams, useRouter } from "next/navigation";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
import { ChevronDown, ChevronRight, FileText, Folder, FolderKanban, Loader2, Plus, Search, Rocket, X } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from "@/components/ui/sheet";
import { api } from "@/lib/trpc";
import { cn } from "@/lib/utils";

const STATUS_VARIANT: Record<string, string> = {
  draft: "bg-muted text-muted-foreground",
  ready: "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
  in_progress: "bg-amber-500/15 text-amber-600 dark:text-amber-400 border-amber-500/20",
  blocked: "bg-destructive/10 text-destructive border-destructive/20",
  done: "bg-sky-500/15 text-sky-600 dark:text-sky-400 border-sky-500/20",
  cancelled: "bg-muted text-muted-foreground",
};

function StatusChip({ status }: { status: string | null }) {
  const s = status ?? "unknown";
  const cls = STATUS_VARIANT[s] ?? STATUS_VARIANT.draft;
  return (
    <span className={cn("inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-medium", cls)}>{s}</span>
  );
}

function slugify(value: string): string {
  return value
    .toLowerCase()
    .trim()
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/^-+|-+$/g, "")
    .replace(/--+/g, "-");
}

type DialogState =
  | { kind: "plan" }
  | { kind: "epic"; planSlug: string }
  | { kind: "task"; planSlug: string; epicSlug: string }
  | null;

export default function PlansPage() {
  const params = useParams();
  const router = useRouter();
  const workspaceSlug = params?.workspaceSlug as string | undefined;

  const [search, setSearch] = React.useState("");
  const [expandedPlans, setExpandedPlans] = React.useState<Set<string>>(new Set());
  const [expandedEpics, setExpandedEpics] = React.useState<Set<string>>(new Set());
  const [selectedId, setSelectedId] = React.useState<string | null>(null);
  const [dialog, setDialog] = React.useState<DialogState>(null);
  const [formSlug, setFormSlug] = React.useState("");
  const [formTitle, setFormTitle] = React.useState("");
  const [formBody, setFormBody] = React.useState("");
  const [formAgentPrompt, setFormAgentPrompt] = React.useState("");
  const [formError, setFormError] = React.useState<string | null>(null);

  const treeQuery = api.backlog.listTree.useQuery({ workspace: workspaceSlug! }, { enabled: Boolean(workspaceSlug) });
  const detailQuery = api.backlog.getBacklogItem.useQuery(
    { workspace: workspaceSlug!, backlogItemId: selectedId! },
    { enabled: Boolean(workspaceSlug && selectedId) },
  );
  const promptQuery = api.backlog.getWorkflowPrompt.useQuery(
    { workspace: workspaceSlug!, backlogItemId: selectedId! },
    { enabled: Boolean(workspaceSlug && selectedId) },
  );

  const utils = api.useUtils();

  const createPlan = api.backlog.createPlan.useMutation({
    onSuccess: () => {
      void utils.backlog.listTree.invalidate();
      closeDialog();
    },
    onError: (e) => setFormError(e.message),
  });
  const createEpic = api.backlog.createEpic.useMutation({
    onSuccess: () => {
      void utils.backlog.listTree.invalidate();
      closeDialog();
    },
    onError: (e) => setFormError(e.message),
  });
  const createTask = api.backlog.createTask.useMutation({
    onSuccess: () => {
      void utils.backlog.listTree.invalidate();
      closeDialog();
    },
    onError: (e) => setFormError(e.message),
  });
  const startConvoy = api.backlog.startConvoy.useMutation({
    onSuccess: () => {
      void utils.convoys.kanban.invalidate();
      if (workspaceSlug) router.push(`/${workspaceSlug}/mission-control`);
    },
    onError: (e) => setFormError(e.message),
  });
  // Direct convoy.create path required by brief 4 — Start → Convoy via convoys.create with planSlug/epicSlug
  const createConvoyDirect = api.convoys.create.useMutation({
    onSuccess: () => {
      void utils.convoys.kanban.invalidate();
      if (workspaceSlug) router.push(`/${workspaceSlug}/mission-control`);
    },
    onError: (e) => setFormError(e.message),
  });

  function closeDialog() {
    setDialog(null);
    setFormSlug("");
    setFormTitle("");
    setFormBody("");
    setFormAgentPrompt("");
    setFormError(null);
  }

  function openPlanDialog() {
    setFormError(null);
    setFormSlug("");
    setFormTitle("");
    setFormBody("");
    setFormAgentPrompt("");
    setDialog({ kind: "plan" });
  }
  function openEpicDialog(planSlug: string) {
    setFormError(null);
    setFormSlug("");
    setFormTitle("");
    setFormBody("");
    setFormAgentPrompt("");
    setDialog({ kind: "epic", planSlug });
  }
  function openTaskDialog(planSlug: string, epicSlug: string) {
    setFormError(null);
    setFormSlug("");
    setFormTitle("");
    setFormBody("");
    setFormAgentPrompt("");
    setDialog({ kind: "task", planSlug, epicSlug });
  }

  const tree = React.useMemo(() => treeQuery.data?.plans ?? [], [treeQuery.data?.plans]);

  const filtered = React.useMemo(() => {
    if (!search.trim()) return tree;
    const q = search.trim().toLowerCase();
    return tree
      .map((plan) => {
        const planMatches = plan.title.toLowerCase().includes(q) || plan.slug.toLowerCase().includes(q);
        const epics = plan.epics
          .map((epic) => {
            const epicMatches = epic.title.toLowerCase().includes(q) || epic.slug.toLowerCase().includes(q);
            const tasks = epic.tasks.filter(
              (t) =>
                t.title.toLowerCase().includes(q) ||
                t.slug.toLowerCase().includes(q) ||
                (t.status ?? "").toLowerCase().includes(q),
            );
            if (epicMatches || tasks.length > 0 || planMatches) {
              return { ...epic, tasks: epicMatches && tasks.length === 0 ? epic.tasks : tasks };
            }
            return null;
          })
          .filter(Boolean) as typeof plan.epics;
        if (planMatches) return { ...plan, epics: epics.length ? epics : plan.epics };
        if (epics.length) return { ...plan, epics };
        return null;
      })
      .filter(Boolean) as typeof tree;
  }, [tree, search]);

  React.useEffect(() => {
    if (tree.length && expandedPlans.size === 0) {
      setExpandedPlans(new Set(tree.slice(0, 2).map((p) => p.slug)));
    }
  }, [tree, expandedPlans.size]);

  if (!workspaceSlug) return null;

  const isMutating = createPlan.isPending || createEpic.isPending || createTask.isPending;

  return (
    <div className="flex h-full min-h-0 flex-col">
      <header className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-border px-6 py-4">
        <div className="flex items-center gap-3">
          <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
            <FolderKanban className="size-5 text-primary" />
          </div>
          <div>
            <h1 className="text-lg font-semibold">Plans</h1>
            <p className="text-xs text-muted-foreground">Plan → Epic → Task tree from plans/ markdown</p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <div className="relative">
            <Search className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
            <Input placeholder="Search plans, epics, tasks…" value={search} onChange={(e) => setSearch(e.target.value)} className="w-64 pl-8" />
          </div>
          <Button type="button" size="sm" onClick={openPlanDialog}>
            <Plus className="size-4" />
            New Plan
          </Button>
        </div>
      </header>

      <div className="flex min-h-0 flex-1">
        <div className="flex min-h-0 flex-1 flex-col border-r border-border">
          {treeQuery.isLoading ? (
            <div className="flex items-center gap-2 p-6 text-sm text-muted-foreground">
              <Loader2 className="size-4 animate-spin" />
              Loading plans…
            </div>
          ) : filtered.length === 0 ? (
            <div className="flex flex-1 flex-col items-center justify-center gap-3 p-8 text-center">
              <FolderKanban className="size-8 text-muted-foreground" />
              <p className="text-sm font-medium">No plans yet</p>
              <p className="max-w-sm text-xs text-muted-foreground">
                {search.trim()
                  ? "No results for your search."
                  : "Create your first plan or run pnpm --filter @tasks/database watch:markdown-backlog to import plans/ after seeding."}
              </p>
              {!search.trim() && (
                <Button size="sm" onClick={openPlanDialog}>
                  <Plus className="mr-1 size-4" />
                  New Plan
                </Button>
              )}
            </div>
          ) : (
            <ScrollArea className="h-full">
              <div className="space-y-1 p-3">
                {filtered.map((plan) => {
                  const planOpen = expandedPlans.has(plan.slug);
                  return (
                    <CollapsiblePrimitive.Root
                      key={plan.id}
                      open={planOpen}
                      onOpenChange={(open) =>
                        setExpandedPlans((prev) => {
                          const next = new Set(prev);
                          if (open) next.add(plan.slug);
                          else next.delete(plan.slug);
                          return next;
                        })
                      }
                    >
                      <div className="group flex items-center gap-1 rounded-md px-1 py-1 hover:bg-muted/50">
                        <CollapsiblePrimitive.Trigger asChild>
                          <button type="button" className="flex items-center gap-1 rounded p-1 hover:bg-muted" aria-label={planOpen ? "Collapse" : "Expand"}>
                            {planOpen ? <ChevronDown className="size-3.5" /> : <ChevronRight className="size-3.5" />}
                          </button>
                        </CollapsiblePrimitive.Trigger>
                        <Folder className="size-4 shrink-0 text-primary" />
                        <button
                          type="button"
                          onClick={() => setSelectedId(plan.id.startsWith("placeholder-") ? null : plan.id)}
                          className={cn(
                            "min-w-0 flex-1 truncate text-left text-sm font-medium hover:underline",
                            selectedId === plan.id && "text-primary",
                          )}
                        >
                          {plan.title || plan.slug}
                        </button>
                        <StatusChip status={plan.status} />
                        <Badge variant="outline" className="text-[10px]">{plan.slug}</Badge>
                        <Button variant="ghost" size="sm" className="h-7 px-2 text-xs" onClick={() => openEpicDialog(plan.slug)}>
                          <Plus className="size-3" />
                          Epic
                        </Button>
                      </div>
                      <CollapsiblePrimitive.Content className="ml-5 border-l border-border pl-3">
                        <div className="space-y-1 py-1">
                          {plan.epics.length === 0 ? (
                            <p className="px-2 py-1 text-xs text-muted-foreground">No epics — add one.</p>
                          ) : (
                            plan.epics.map((epic) => {
                              const epicKey = `${plan.slug}/${epic.slug}`;
                              const epicOpen = expandedEpics.has(epicKey);
                              return (
                                <CollapsiblePrimitive.Root
                                  key={epic.id}
                                  open={epicOpen}
                                  onOpenChange={(open) =>
                                    setExpandedEpics((prev) => {
                                      const next = new Set(prev);
                                      if (open) next.add(epicKey);
                                      else next.delete(epicKey);
                                      return next;
                                    })
                                  }
                                >
                                  <div className="flex items-center gap-1 rounded-md px-1 py-1 hover:bg-muted/50">
                                    <CollapsiblePrimitive.Trigger asChild>
                                      <button type="button" className="flex items-center rounded p-1 hover:bg-muted">
                                        {epicOpen ? <ChevronDown className="size-3.5" /> : <ChevronRight className="size-3.5" />}
                                      </button>
                                    </CollapsiblePrimitive.Trigger>
                                    <FolderKanban className="size-3.5 shrink-0 text-muted-foreground" />
                                    <button
                                      type="button"
                                      onClick={() => setSelectedId(epic.id.startsWith("placeholder-") ? null : epic.id)}
                                      className={cn(
                                        "min-w-0 flex-1 truncate text-left text-sm hover:underline",
                                        selectedId === epic.id && "text-primary",
                                      )}
                                    >
                                      {epic.title || epic.slug}
                                    </button>
                                    <StatusChip status={epic.status} />
                                    <Badge variant="outline" className="hidden text-[10px] sm:inline-flex">{epic.slug}</Badge>
                                    <Button variant="ghost" size="sm" className="h-7 px-2 text-xs" onClick={() => openTaskDialog(plan.slug, epic.slug)}>
                                      <Plus className="size-3" />
                                      Task
                                    </Button>
                                  </div>
                                  <CollapsiblePrimitive.Content className="ml-5 border-l border-border pl-3">
                                    <ul className="space-y-0.5 py-1">
                                      {epic.tasks.length === 0 ? (
                                        <li className="px-2 py-1 text-xs text-muted-foreground">No tasks.</li>
                                      ) : (
                                        epic.tasks.map((task) => (
                                          <li
                                            key={task.id}
                                            className={cn(
                                              "flex items-center gap-1.5 rounded-md px-2 py-1.5 hover:bg-muted",
                                              selectedId === task.id && "bg-muted ring-1 ring-primary/20",
                                            )}
                                          >
                                            <FileText className="size-3.5 shrink-0 text-muted-foreground" />
                                            <button
                                              type="button"
                                              onClick={() => setSelectedId(task.id)}
                                              className="min-w-0 flex-1 truncate text-left text-sm"
                                            >
                                              <span className="font-medium">{task.title || task.slug}</span>
                                              <span className="ml-1 text-xs text-muted-foreground">{task.slug}</span>
                                            </button>
                                            <StatusChip status={task.status} />
                                            {task.priority && (
                                              <Badge variant="outline" className="hidden text-[10px] sm:inline-flex">
                                                {task.priority}
                                              </Badge>
                                            )}
                                            <span className="hidden max-w-[140px] truncate text-[10px] text-muted-foreground sm:inline">{task.repoPath}</span>
                                            <Button
                                              type="button"
                                              size="sm"
                                              variant={task.status === "ready" ? "default" : "outline"}
                                              className="h-7 shrink-0 px-2 text-xs"
                                              disabled={startConvoy.isPending || createConvoyDirect.isPending}
                                              onClick={() => {
                                                setSelectedId(task.id);
                                                // Primary: backlog.startConvoy (idempotent, creates briefFiles: [repoPath]); fallback/additional: convoys.create with planSlug/epicSlug per brief
                                                const convoySlug = `${task.planSlug}-${task.slug}`.toLowerCase();
                                                if (task.status === "ready") {
                                                  startConvoy.mutate({ workspace: workspaceSlug, backlogItemId: task.id });
                                                } else {
                                                  createConvoyDirect.mutate({
                                                    workspace: workspaceSlug,
                                                    slug: convoySlug,
                                                    classification: "feature",
                                                    successMetric: task.title || task.slug,
                                                    ideaMarkdown: task.bodyMarkdown || `# ${task.title}`,
                                                    planSlug: task.planSlug,
                                                    epicSlug: task.epicSlug ?? undefined,
                                                    backlogItemId: task.id,
                                                    repoPath: task.repoPath,
                                                    briefFiles: [task.repoPath],
                                                  });
                                                }
                                              }}
                                            >
                                              <Rocket className="mr-1 size-3" />
                                              Start
                                            </Button>
                                          </li>
                                        ))
                                      )}
                                    </ul>
                                  </CollapsiblePrimitive.Content>
                                </CollapsiblePrimitive.Root>
                              );
                            })
                          )}
                        </div>
                      </CollapsiblePrimitive.Content>
                    </CollapsiblePrimitive.Root>
                  );
                })}
              </div>
            </ScrollArea>
          )}
        </div>

        <Sheet open={Boolean(selectedId)} onOpenChange={(open) => !open && setSelectedId(null)}>
          <SheetContent className="flex w-[480px] max-w-[90vw] flex-col sm:max-w-[480px]">
            <SheetHeader>
              <SheetTitle className="pr-6">{detailQuery.data?.title ?? "Details"}</SheetTitle>
              <SheetDescription className="break-all text-xs">
                {detailQuery.data?.repoPath ?? ""}
                {detailQuery.data ? ` · ${detailQuery.data.kind}` : ""}
              </SheetDescription>
            </SheetHeader>
            <ScrollArea className="flex-1">
              <div className="space-y-4 p-1 pr-4">
                {detailQuery.isLoading ? (
                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
                    <Loader2 className="size-4 animate-spin" />
                    Loading…
                  </div>
                ) : detailQuery.data ? (
                  <>
                    <div className="flex flex-wrap gap-2">
                      <StatusChip status={detailQuery.data.status} />
                      {detailQuery.data.priority && <Badge variant="outline">{detailQuery.data.priority}</Badge>}
                      <Badge variant="secondary">{detailQuery.data.kind}</Badge>
                    </div>
                    <div className="rounded-md border border-border bg-muted/20 p-3">
                      <p className="text-xs font-medium text-muted-foreground">Repo path</p>
                      <p className="mt-1 break-all font-mono text-xs">{detailQuery.data.repoPath}</p>
                      <p className="mt-2 text-xs font-medium text-muted-foreground">Slugs</p>
                      <p className="mt-1 text-xs">
                        Plan: <code className="rounded bg-muted px-1 py-0.5">{detailQuery.data.planSlug}</code>
                        {detailQuery.data.epicSlug ? (
                          <>
                            {" "}
                            Epic: <code className="rounded bg-muted px-1 py-0.5">{detailQuery.data.epicSlug}</code>
                          </>
                        ) : null}{" "}
                        Slug: <code className="rounded bg-muted px-1 py-0.5">{detailQuery.data.slug}</code>
                      </p>
                    </div>
                    <div>
                      <h3 className="text-sm font-semibold">Body</h3>
                      <pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted/20 p-3 text-xs leading-relaxed">
                        {detailQuery.data.bodyMarkdown || "(empty)"}
                      </pre>
                    </div>
                    <div>
                      <h3 className="text-sm font-semibold">Effective prompt</h3>
                      <p className="mt-1 text-xs text-muted-foreground">Source: {promptQuery.data?.source ?? "—"}</p>
                      <pre className="mt-2 max-h-48 overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted/20 p-3 text-xs leading-relaxed">
                        {promptQuery.data?.effectivePrompt ?? promptQuery.data?.ownOverride ?? "(no prompt)"}
                      </pre>
                      {promptQuery.data?.ownOverride && <p className="mt-1 text-[10px] text-muted-foreground">Own override present</p>}
                    </div>
                    {detailQuery.data.kind === "task" && (
                      <div className="flex gap-2">
                        <Button
                          type="button"
                          size="sm"
                          disabled={startConvoy.isPending || createConvoyDirect.isPending}
                          onClick={() => {
                            const d = detailQuery.data!;
                            const convoySlug = `${d.planSlug}-${d.slug}`.toLowerCase();
                            // Use convoys.create with planSlug/epicSlug as required by brief, via createConvoyDirect
                            createConvoyDirect.mutate({
                              workspace: workspaceSlug,
                              slug: convoySlug,
                              classification: "feature",
                              successMetric: d.title || d.slug,
                              ideaMarkdown: d.bodyMarkdown || `# ${d.title}`,
                              planSlug: d.planSlug,
                              epicSlug: d.epicSlug ?? undefined,
                              backlogItemId: d.id,
                              repoPath: d.repoPath,
                              briefFiles: [d.repoPath],
                            });
                          }}
                        >
                          {(startConvoy.isPending || createConvoyDirect.isPending) ? <Loader2 className="size-4 animate-spin" /> : <Rocket className="size-4" />}
                          Start → Convoy
                        </Button>
                        <Button type="button" variant="outline" size="sm" onClick={() => setSelectedId(null)}>
                          Close
                        </Button>
                      </div>
                    )}
                    {(startConvoy.error || createConvoyDirect.error) && (
                      <p className="text-xs text-destructive">{(startConvoy.error ?? createConvoyDirect.error)?.message}</p>
                    )}
                    {(startConvoy.isSuccess || createConvoyDirect.isSuccess) && (
                      <p className="text-xs text-emerald-600">
                        Convoy {(startConvoy.data?.convoySlug ?? createConvoyDirect.data?.convoyId) ?? ""} created — check Mission Control.
                      </p>
                    )}
                  </>
                ) : (
                  <p className="text-sm text-muted-foreground">Select an item to see details.</p>
                )}
              </div>
            </ScrollArea>
          </SheetContent>
        </Sheet>
      </div>

      <DialogPrimitive.Root open={Boolean(dialog)} onOpenChange={(open) => !open && closeDialog()}>
        <DialogPrimitive.Portal>
          <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-black/50" />
          <DialogPrimitive.Content className="fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-background p-6 shadow-lg">
            <div className="mb-4 flex items-center justify-between">
              <DialogPrimitive.Title className="text-lg font-semibold">
                {dialog?.kind === "plan" ? "New Plan" : dialog?.kind === "epic" ? "New Epic" : dialog?.kind === "task" ? "New Task" : "New"}
              </DialogPrimitive.Title>
              <DialogPrimitive.Close asChild>
                <button type="button" className="rounded p-1 hover:bg-muted" aria-label="Close">
                  <X className="size-4" />
                </button>
              </DialogPrimitive.Close>
            </div>

            <div className="space-y-3">
              {dialog?.kind === "epic" && (
                <div>
                  <label className="mb-1 block text-sm font-medium">Plan</label>
                  <div className="rounded-md border border-input bg-muted px-3 py-2 text-sm">{dialog.planSlug}</div>
                </div>
              )}
              {dialog?.kind === "task" && (
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <label className="mb-1 block text-sm font-medium">Plan</label>
                    <div className="rounded-md border border-input bg-muted px-3 py-2 text-sm">{dialog.planSlug}</div>
                  </div>
                  <div>
                    <label className="mb-1 block text-sm font-medium">Epic</label>
                    <div className="rounded-md border border-input bg-muted px-3 py-2 text-sm">{dialog.epicSlug}</div>
                  </div>
                </div>
              )}

              <div>
                <label className="mb-1 block text-sm font-medium" htmlFor="plans-slug">
                  Slug <span className="font-normal text-muted-foreground">(a-z 0-9 -)</span>
                </label>
                <Input
                  id="plans-slug"
                  placeholder="my-slug"
                  value={formSlug}
                  onChange={(e) => {
                    const v = e.target.value.toLowerCase();
                    setFormSlug(v);
                    if (!formTitle.trim() || slugify(formTitle) === formSlug) {
                      // keep title in sync helper? no auto
                    }
                  }}
                />
                <p className="mt-1 text-[11px] text-muted-foreground">Must match ^[a-z0-9-]+$</p>
              </div>
              <div>
                <label className="mb-1 block text-sm font-medium" htmlFor="plans-title">
                  Title
                </label>
                <Input
                  id="plans-title"
                  placeholder="Human readable title"
                  value={formTitle}
                  onChange={(e) => setFormTitle(e.target.value)}
                  onBlur={() => {
                    if (!formSlug.trim() && formTitle.trim()) setFormSlug(slugify(formTitle));
                  }}
                />
              </div>
              <div>
                <label className="mb-1 block text-sm font-medium" htmlFor="plans-body">
                  Body markdown (optional)
                </label>
                <textarea
                  id="plans-body"
                  className="min-h-[90px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                  placeholder="# Summary…"
                  value={formBody}
                  onChange={(e) => setFormBody(e.target.value)}
                />
              </div>
              <div>
                <label className="mb-1 block text-sm font-medium" htmlFor="plans-prompt">
                  Agent prompt (optional)
                </label>
                <textarea
                  id="plans-prompt"
                  className="min-h-[60px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                  placeholder="Custom prompt for agents…"
                  value={formAgentPrompt}
                  onChange={(e) => setFormAgentPrompt(e.target.value)}
                />
              </div>

              {formError && <p className="text-xs text-destructive">{formError}</p>}

              <div className="flex justify-end gap-2 pt-2">
                <DialogPrimitive.Close asChild>
                  <Button type="button" variant="outline" onClick={closeDialog}>
                    Cancel
                  </Button>
                </DialogPrimitive.Close>
                <Button
                  type="button"
                  disabled={isMutating || !formSlug.trim() || !formTitle.trim()}
                  onClick={() => {
                    setFormError(null);
                    const slug = formSlug.trim().toLowerCase();
                    if (!SLUG_RE.test(slug)) {
                      setFormError("slug must match ^[a-z0-9-]+$");
                      return;
                    }
                    if (dialog?.kind === "plan") {
                      createPlan.mutate({
                        workspace: workspaceSlug,
                        slug,
                        title: formTitle.trim(),
                        bodyMarkdown: formBody.trim() || undefined,
                        agentPrompt: formAgentPrompt.trim() || null,
                      });
                    } else if (dialog?.kind === "epic") {
                      createEpic.mutate({
                        workspace: workspaceSlug,
                        planSlug: dialog.planSlug,
                        slug,
                        title: formTitle.trim(),
                        bodyMarkdown: formBody.trim() || undefined,
                        agentPrompt: formAgentPrompt.trim() || null,
                      });
                    } else if (dialog?.kind === "task") {
                      createTask.mutate({
                        workspace: workspaceSlug,
                        planSlug: dialog.planSlug,
                        epicSlug: dialog.epicSlug,
                        slug,
                        title: formTitle.trim(),
                        bodyMarkdown: formBody.trim() || undefined,
                        agentPrompt: formAgentPrompt.trim() || null,
                      });
                    }
                  }}
                >
                  {isMutating ? <Loader2 className="size-4 animate-spin" /> : <Plus className="size-4" />}
                  Create
                </Button>
              </div>
            </div>
          </DialogPrimitive.Content>
        </DialogPrimitive.Portal>
      </DialogPrimitive.Root>
    </div>
  );
}

const SLUG_RE = /^[a-z0-9-]+$/;