@parhelia/core 0.1.12368 → 0.1.12393

package/dist/editor/settings/panels/ProjectTemplatesPanel.js

@@ -0,0 +1,1340 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { AlertCircle, ChevronDown, CornerDownRight, GitBranch, Link2, Plus, RefreshCw, Search, Settings2, Shield, Trash2, X, } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "../../../components/ui/button";
+import { Dialog, DialogContent, DialogFooter, } from "../../../components/ui/dialog";
+import { Input } from "../../../components/ui/input";
+import { Label } from "../../../components/ui/label";
+import { StyledDialogTitle } from "../../../components/ui/styled-dialog-title";
+import { Textarea } from "../../../components/ui/textarea";
+import { Select } from "../../../components/ui/select";
+import { Switch } from "../../../components/ui/switch";
+import { Badge } from "../../../components/ui/badge";
+import { Popover, PopoverContent, PopoverTrigger, } from "../../../components/ui/popover";
+import { Splitter } from "../../ui/Splitter";
+import { DependencyGraphView } from "../../../task-board/views/DependencyGraphView";
+import { deleteProjectTemplate, getProjectTemplates, getProjectTemplateAgent, resetProjectTemplateAgent, upsertProjectTemplate, } from "../../../task-board/services/taskService";
+import { getAiProfilesErrorMessage, loadAiProfiles, } from "../../services/aiService";
+import { updateAgentContext } from "../../services/agentService";
+import { useEditContext } from "../../client/editContext";
+import { isTypingEventTarget } from "../../utils/keyboardNavigation";
+import { cn } from "../../../lib/utils";
+import { ProjectTemplateAgentPanel } from "./ProjectTemplateAgentPanel";
+import { useSearchParams } from "next/navigation";
+/** Query param for deep-linking the selected project template (settings reload). */
+const SELECTED_PROJECT_TEMPLATE_QUERY_PARAM = "projectTemplateId";
+const PRIORITY_OPTIONS = [
+    { value: "", label: "No priority" },
+    { value: "Low", label: "Low" },
+    { value: "Medium", label: "Medium" },
+    { value: "High", label: "High" },
+    { value: "Critical", label: "Critical" },
+];
+const ASSIGNEE_TYPE_OPTIONS = [
+    { value: "", label: "Unassigned" },
+    { value: "Agent", label: "Agent profile" },
+    { value: "Human", label: "Human user" },
+    { value: "Role", label: "Role" },
+];
+const PROJECT_TEMPLATE_AUTOSAVE_DEBOUNCE_MS = 1200;
+function cloneTemplate(template) {
+    return normalizeProjectTemplate(JSON.parse(JSON.stringify(template)));
+}
+function normalizeTaskTemplate(task) {
+    const rawAssigneeId = task.assigneeId?.trim() || null;
+    const rawAgentProfileId = task.agentProfileId?.trim() || null;
+    const rawParentTaskId = task.parentTaskId?.trim() || null;
+    const assigneeType = task.assigneeType ?? (rawAgentProfileId ? "Agent" : null);
+    if (assigneeType === "Agent") {
+        const canonicalAgentId = rawAgentProfileId || (isValidGuid(rawAssigneeId) ? rawAssigneeId : null);
+        return {
+            ...task,
+            assigneeType: "Agent",
+            assigneeId: canonicalAgentId,
+            agentProfileId: canonicalAgentId,
+            parentTaskId: rawParentTaskId,
+        };
+    }
+    if (assigneeType === "Human" || assigneeType === "Role") {
+        return {
+            ...task,
+            assigneeType,
+            assigneeId: rawAssigneeId,
+            agentProfileId: null,
+            parentTaskId: rawParentTaskId,
+        };
+    }
+    return {
+        ...task,
+        assigneeType: null,
+        assigneeId: rawAssigneeId,
+        agentProfileId: null,
+        parentTaskId: rawParentTaskId,
+    };
+}
+function normalizeProjectTemplate(template) {
+    return {
+        ...template,
+        hideFromCreateDialog: template.hideFromCreateDialog === true,
+        openInWizardMode: template.openInWizardMode === true,
+        taskTemplates: (template.taskTemplates ?? []).map(normalizeTaskTemplate),
+    };
+}
+function createEmptyTemplate() {
+    return {
+        id: crypto.randomUUID(),
+        name: "New Project Template",
+        description: "",
+        disabled: false,
+        hideFromCreateDialog: false,
+        openInWizardMode: false,
+        isSystem: false,
+        defaultCostLimit: null,
+        graphLayout: null,
+        taskTemplates: [],
+    };
+}
+function createEmptyTaskTemplate(taskCount, title) {
+    return {
+        id: crypto.randomUUID(),
+        title: title?.trim() || `Task ${taskCount + 1}`,
+        description: "",
+        agentProfileId: null,
+        assigneeType: null,
+        assigneeId: null,
+        priority: null,
+        sortOrder: taskCount * 100,
+        parentTaskId: null,
+        dependencyIds: [],
+    };
+}
+function sortTemplates(templates) {
+    return [...templates].sort((left, right) => left.name.localeCompare(right.name, undefined, { sensitivity: "base" }));
+}
+function buildUpsertTemplateRequest(template) {
+    return {
+        projectTemplateId: template.id,
+        name: template.name.trim(),
+        description: template.description?.trim() || null,
+        disabled: template.disabled === true,
+        hideFromCreateDialog: template.hideFromCreateDialog === true,
+        openInWizardMode: template.openInWizardMode === true,
+        defaultCostLimit: template.defaultCostLimit == null ||
+            Number.isNaN(template.defaultCostLimit)
+            ? null
+            : template.defaultCostLimit,
+        graphLayout: template.graphLayout
+            ? {
+                projectTemplateId: template.id,
+                nodes: template.graphLayout.nodes ?? [],
+                viewport: template.graphLayout.viewport ?? null,
+            }
+            : null,
+        taskTemplates: template.taskTemplates.map((task, index) => {
+            const normalizedTask = normalizeTaskTemplate(task);
+            return {
+                ...normalizedTask,
+                title: normalizedTask.title.trim(),
+                description: normalizedTask.description?.trim() || null,
+                priority: normalizedTask.priority || null,
+                sortOrder: normalizedTask.sortOrder || index * 100,
+                parentTaskId: normalizedTask.parentTaskId || null,
+                agentProfileId: normalizedTask.agentProfileId || null,
+                assigneeType: normalizedTask.assigneeType || null,
+                assigneeId: normalizedTask.assigneeId || null,
+                dependencyIds: Array.from(new Set(normalizedTask.dependencyIds || [])),
+            };
+        }),
+    };
+}
+function mergeTemplateResponseWithRequest(serverTemplate, request) {
+    const parentTaskIdByTaskId = new Map((request.taskTemplates ?? []).map((task) => [
+        task.id,
+        task.parentTaskId ?? null,
+    ]));
+    const mergedGraphLayout = request.graphLayout === undefined
+        ? serverTemplate.graphLayout
+        : request.graphLayout === null
+            ? null
+            : {
+                projectTemplateId: serverTemplate.id,
+                nodes: request.graphLayout.nodes ?? [],
+                viewport: request.graphLayout.viewport ?? null,
+            };
+    return normalizeProjectTemplate({
+        ...serverTemplate,
+        graphLayout: mergedGraphLayout,
+        taskTemplates: (serverTemplate.taskTemplates ?? []).map((task) => ({
+            ...task,
+            parentTaskId: task.parentTaskId ?? parentTaskIdByTaskId.get(task.id) ?? null,
+        })),
+    });
+}
+function isValidGuid(value) {
+    return (!!value &&
+        /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(value));
+}
+function readProjectTemplateIdFromUrl(searchParams) {
+    const raw = searchParams.get(SELECTED_PROJECT_TEMPLATE_QUERY_PARAM) ||
+        (typeof window !== "undefined"
+            ? new URLSearchParams(window.location.search).get(SELECTED_PROJECT_TEMPLATE_QUERY_PARAM)
+            : null);
+    return raw && isValidGuid(raw) ? raw : null;
+}
+function readProjectTemplateIdFromWindow() {
+    const raw = typeof window !== "undefined"
+        ? new URLSearchParams(window.location.search).get(SELECTED_PROJECT_TEMPLATE_QUERY_PARAM)
+        : null;
+    return raw && isValidGuid(raw) ? raw : null;
+}
+function getSelectedTaskIdForTemplate(template, preferredTaskId) {
+    const taskTemplates = template?.taskTemplates ?? [];
+    if (!taskTemplates.length) {
+        return null;
+    }
+    if (preferredTaskId &&
+        taskTemplates.some((task) => task.id === preferredTaskId)) {
+        return preferredTaskId;
+    }
+    return taskTemplates[0]?.id ?? null;
+}
+function normalizeTaskPriority(priority) {
+    if (priority === "Low" ||
+        priority === "Medium" ||
+        priority === "High" ||
+        priority === "Critical") {
+        return priority;
+    }
+    return null;
+}
+function buildTemplateTaskItems(template, aiProfilesById) {
+    if (!template)
+        return [];
+    const now = new Date().toISOString();
+    return template.taskTemplates.map((task) => {
+        const normalizedTask = normalizeTaskTemplate(task);
+        const assigneeType = normalizedTask.assigneeType;
+        const assigneeId = normalizedTask.assigneeId;
+        const assigneeDisplayName = assigneeType === "Agent" && assigneeId
+            ? aiProfilesById[assigneeId.toLowerCase()]?.displayTitle ||
+                aiProfilesById[assigneeId.toLowerCase()]?.name ||
+                assigneeId
+            : assigneeId;
+        return {
+            taskId: task.id,
+            projectId: template.id,
+            parentTaskId: normalizedTask.parentTaskId ?? null,
+            taskType: "Task",
+            title: task.title || "Untitled Task",
+            description: normalizedTask.description ?? null,
+            status: "Todo",
+            assigneeType,
+            assigneeId,
+            assigneeDisplayName,
+            priority: normalizeTaskPriority(normalizedTask.priority),
+            sortOrder: normalizedTask.sortOrder,
+            executionState: "Unassigned",
+            assignedAgentId: null,
+            createdBy: "template",
+            createdAt: now,
+            updatedAt: now,
+        };
+    });
+}
+function buildTemplateDependencies(template) {
+    if (!template)
+        return [];
+    return template.taskTemplates.flatMap((task) => (task.dependencyIds ?? []).map((dependencyId) => ({
+        dependencyId: `${task.id}:${dependencyId}`,
+        taskId: task.id,
+        dependsOnTaskId: dependencyId,
+        dependencyType: "BlockedBy",
+    })));
+}
+function canAddTemplateDependency(template, taskId, dependencyId) {
+    if (!template || taskId === dependencyId) {
+        return false;
+    }
+    const tasksById = new Map(template.taskTemplates.map((task) => [task.id, task]));
+    const task = tasksById.get(taskId);
+    const dependencyTask = tasksById.get(dependencyId);
+    if (!task || !dependencyTask) {
+        return false;
+    }
+    if ((task.dependencyIds ?? []).includes(dependencyId)) {
+        return false;
+    }
+    return task.parentTaskId !== dependencyId;
+}
+function buildProjectTemplateAgentContext(template, selectedTaskTemplateId) {
+    const dependencyCount = template.taskTemplates.reduce((count, task) => count + (task.dependencyIds?.length ?? 0), 0);
+    const agentAssignedTaskCount = template.taskTemplates.filter((task) => task.agentProfileId || (task.assigneeType === "Agent" && task.assigneeId)).length;
+    const selectedTask = selectedTaskTemplateId
+        ? template.taskTemplates.find((task) => task.id === selectedTaskTemplateId) ??
+            null
+        : null;
+    return {
+        activeWorkspace: "settings",
+        additionalData: {
+            activeWorkspace: "settings",
+            projectTemplateEditor: true,
+            projectTemplateId: template.id,
+            projectTemplateName: template.name,
+            projectTemplateDescription: template.description ?? null,
+            projectTemplateDisabled: template.disabled === true,
+            projectTemplateDefaultCostLimit: template.defaultCostLimit ?? null,
+            selectedTaskTemplateId: selectedTask ? selectedTask.id : null,
+            selectedTaskTemplateTitle: selectedTask?.title?.trim() || null,
+            selectedTaskTemplate: selectedTask
+                ? normalizeTaskTemplate(selectedTask)
+                : null,
+            projectTemplateSummary: {
+                taskCount: template.taskTemplates.length,
+                dependencyCount,
+                agentAssignedTaskCount,
+                defaultCostLimit: template.defaultCostLimit ?? null,
+                disabled: template.disabled === true,
+            },
+            projectTemplate: cloneTemplate(template),
+            projectTemplateSavePayload: buildUpsertTemplateRequest(template),
+        },
+    };
+}
+export function ProjectTemplatesPanel() {
+    const editContext = useEditContext();
+    const searchParams = useSearchParams();
+    const [state, setState] = useState("loading");
+    const [templates, setTemplates] = useState([]);
+    const [error, setError] = useState(null);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [selectedTemplateId, setSelectedTemplateId] = useState(null);
+    const [draftTemplate, setDraftTemplate] = useState(null);
+    const [selectedTaskId, setSelectedTaskId] = useState(null);
+    const [saving, setSaving] = useState(false);
+    const [deleting, setDeleting] = useState(false);
+    const [isDirty, setIsDirty] = useState(false);
+    const [saveError, setSaveError] = useState(null);
+    const [aiProfiles, setAiProfiles] = useState([]);
+    const [profilesError, setProfilesError] = useState(null);
+    const [isCreateTaskDialogOpen, setIsCreateTaskDialogOpen] = useState(false);
+    const [newTaskTitle, setNewTaskTitle] = useState("");
+    const [newTaskDependencySourceId, setNewTaskDependencySourceId] = useState(null);
+    const [creatingTask, setCreatingTask] = useState(false);
+    const [isAddChildTaskDialogOpen, setIsAddChildTaskDialogOpen] = useState(false);
+    const [newChildTaskTitle, setNewChildTaskTitle] = useState("");
+    const [creatingChildTask, setCreatingChildTask] = useState(false);
+    const [dependencyPickerOpen, setDependencyPickerOpen] = useState(false);
+    const [isBasicSettingsExpanded, setIsBasicSettingsExpanded] = useState(false);
+    const [templateAgentId, setTemplateAgentId] = useState(null);
+    const [templateAgentLoading, setTemplateAgentLoading] = useState(false);
+    const [templateAgentResetting, setTemplateAgentResetting] = useState(false);
+    const [templateAgentError, setTemplateAgentError] = useState(null);
+    const autosaveTimeoutRef = useRef(null);
+    const lastPersistedSignatureRef = useRef(null);
+    const latestDraftSignatureRef = useRef(null);
+    const saveRunIdRef = useRef(0);
+    const draftTemplateRef = useRef(null);
+    const selectedTemplateIdRef = useRef(selectedTemplateId);
+    const selectedTaskIdRef = useRef(selectedTaskId);
+    const templateAgentLoadRunIdRef = useRef(0);
+    useEffect(() => {
+        let cancelled = false;
+        loadAiProfiles()
+            .then((items) => {
+            if (!cancelled) {
+                setAiProfiles(items || []);
+                setProfilesError(null);
+            }
+        })
+            .catch((loadError) => {
+            if (!cancelled) {
+                setAiProfiles([]);
+                setProfilesError(getAiProfilesErrorMessage(loadError));
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    useEffect(() => {
+        draftTemplateRef.current = draftTemplate;
+    }, [draftTemplate]);
+    const selectTemplate = useCallback((template) => {
+        const clonedTemplate = template ? cloneTemplate(template) : null;
+        const preferredTaskId = clonedTemplate?.id &&
+            clonedTemplate.id === selectedTemplateIdRef.current
+            ? selectedTaskIdRef.current
+            : null;
+        const persistedSignature = clonedTemplate && clonedTemplate.name.trim()
+            ? JSON.stringify(buildUpsertTemplateRequest(clonedTemplate))
+            : null;
+        selectedTemplateIdRef.current = template?.id ?? null;
+        draftTemplateRef.current = clonedTemplate;
+        setSelectedTemplateId(template?.id ?? null);
+        setDraftTemplate(clonedTemplate);
+        setSelectedTaskId(getSelectedTaskIdForTemplate(clonedTemplate, preferredTaskId));
+        setIsDirty(false);
+        setSaveError(null);
+        lastPersistedSignatureRef.current = persistedSignature;
+        latestDraftSignatureRef.current = persistedSignature;
+        const nextId = template?.id ?? null;
+        const currentUrlId = readProjectTemplateIdFromUrl(searchParams);
+        if (nextId !== currentUrlId) {
+            editContext?.updateUrl({
+                [SELECTED_PROJECT_TEMPLATE_QUERY_PARAM]: nextId ?? undefined,
+            });
+        }
+    }, [editContext, searchParams]);
+    const loadTemplates = useCallback(async (preferredTemplateId) => {
+        try {
+            setState("loading");
+            setError(null);
+            const result = await getProjectTemplates({ includeDisabled: true });
+            if (result.type !== "success") {
+                throw new Error(result.summary || "Failed to load project templates");
+            }
+            const loadedTemplates = result.data ?? [];
+            setTemplates(loadedTemplates);
+            setState("success");
+            const preferredTemplateExists = !!preferredTemplateId &&
+                loadedTemplates.some((template) => template.id === preferredTemplateId);
+            const nextTemplateId = preferredTemplateExists
+                ? preferredTemplateId
+                : preferredTemplateId
+                    ? null
+                    : loadedTemplates[0]?.id || null;
+            const nextTemplate = loadedTemplates.find((template) => template.id === nextTemplateId);
+            selectTemplate(nextTemplate ?? null);
+        }
+        catch (loadError) {
+            setState("error");
+            setError(loadError instanceof Error
+                ? loadError.message
+                : "Failed to load project templates");
+        }
+    }, [selectTemplate]);
+    useEffect(() => {
+        void loadTemplates(readProjectTemplateIdFromWindow());
+        // Run once on mount. `loadTemplates` is recreated whenever `selectTemplate` changes
+        // (e.g. searchParams / editContext). Re-running on that identity change refetches from
+        // the server and calls selectTemplate, which resets the draft and drops unsaved edits
+        // before autosave can persist.
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- intentional mount-only bootstrap
+    }, []);
+    useEffect(() => {
+        if (state !== "success" || !templates.length)
+            return;
+        const fromUrl = readProjectTemplateIdFromUrl(searchParams);
+        if (fromUrl === selectedTemplateId)
+            return;
+        if (!fromUrl && selectedTemplateId) {
+            editContext?.updateUrl({
+                [SELECTED_PROJECT_TEMPLATE_QUERY_PARAM]: selectedTemplateId,
+            });
+            return;
+        }
+        const match = fromUrl
+            ? templates.find((template) => template.id === fromUrl)
+            : null;
+        if (fromUrl && !match) {
+            return;
+        }
+        selectTemplate(match ?? null);
+    }, [
+        editContext,
+        searchParams,
+        selectTemplate,
+        selectedTemplateId,
+        state,
+        templates,
+    ]);
+    useEffect(() => {
+        if (!selectedTemplateId)
+            return;
+        const matchingTemplate = templates.find((template) => template.id === selectedTemplateId);
+        if (!matchingTemplate)
+            return;
+        if (draftTemplate?.id === matchingTemplate.id)
+            return;
+        setDraftTemplate(cloneTemplate(matchingTemplate));
+        setSelectedTaskId((currentSelectedTaskId) => getSelectedTaskIdForTemplate(matchingTemplate, currentSelectedTaskId));
+        setIsDirty(false);
+    }, [draftTemplate?.id, selectedTemplateId, templates]);
+    const aiProfilesById = useMemo(() => {
+        const byId = {};
+        for (const profile of aiProfiles) {
+            if (!profile.id)
+                continue;
+            byId[profile.id.toLowerCase()] = profile;
+        }
+        return byId;
+    }, [aiProfiles]);
+    const filteredTemplates = useMemo(() => {
+        const query = searchQuery.trim().toLowerCase();
+        if (!query)
+            return templates;
+        return templates.filter((template) => {
+            return (template.name.toLowerCase().includes(query) ||
+                template.description?.toLowerCase().includes(query) ||
+                template.taskTemplates.some((task) => task.title.toLowerCase().includes(query)));
+        });
+    }, [searchQuery, templates]);
+    const selectedTask = useMemo(() => draftTemplate?.taskTemplates.find((task) => task.id === selectedTaskId) ??
+        null, [draftTemplate, selectedTaskId]);
+    const dependencyTasks = useMemo(() => {
+        if (!draftTemplate || !selectedTask)
+            return [];
+        const byId = new Map(draftTemplate.taskTemplates.map((t) => [t.id, t]));
+        return selectedTask.dependencyIds
+            .map((id) => byId.get(id))
+            .filter((t) => t != null);
+    }, [draftTemplate, selectedTask]);
+    const childTaskTemplates = useMemo(() => {
+        if (!draftTemplate || !selectedTaskId)
+            return [];
+        return draftTemplate.taskTemplates.filter((task) => task.id !== selectedTaskId && task.parentTaskId === selectedTaskId);
+    }, [draftTemplate, selectedTaskId]);
+    const dependencyAddCandidates = useMemo(() => {
+        if (!draftTemplate || !selectedTaskId || !selectedTask)
+            return [];
+        return draftTemplate.taskTemplates.filter((task) => task.id !== selectedTaskId &&
+            !selectedTask.dependencyIds.includes(task.id));
+    }, [draftTemplate, selectedTaskId, selectedTask]);
+    const parentTaskSelectOptions = useMemo(() => {
+        if (!draftTemplate || !selectedTaskId) {
+            return [{ value: "", label: "None" }];
+        }
+        const others = draftTemplate.taskTemplates.filter((task) => task.id !== selectedTaskId);
+        return [
+            { value: "", label: "None" },
+            ...[...others]
+                .sort((a, b) => (a.title || "").localeCompare(b.title || "", undefined, {
+                sensitivity: "base",
+            }))
+                .map((task) => ({
+                value: task.id,
+                label: task.title?.trim() || "Untitled Task",
+            })),
+        ];
+    }, [draftTemplate, selectedTaskId]);
+    const headerStatusBadge = useMemo(() => {
+        if (saveError) {
+            return (_jsx("span", { "data-testid": "project-template-save-status", "data-state": "error", className: "inline-flex min-w-[84px] justify-center rounded bg-red-100 px-1.5 py-0.5 whitespace-nowrap text-red-700", children: "Save failed" }));
+        }
+        if (isDirty || saving) {
+            return (_jsx("span", { "data-testid": "project-template-save-status", "data-state": "saving", className: "inline-flex min-w-[84px] justify-center rounded bg-amber-100 px-1.5 py-0.5 whitespace-nowrap text-amber-700", children: "Saving..." }));
+        }
+        return (_jsx("span", { "aria-hidden": "true", "data-testid": "project-template-save-status", "data-state": "saved", className: "inline-flex min-w-[84px] justify-center rounded px-1.5 py-0.5 whitespace-nowrap opacity-0", children: "Saving..." }));
+    }, [isDirty, saveError, saving]);
+    const graphTasks = useMemo(() => buildTemplateTaskItems(draftTemplate, aiProfilesById), [aiProfilesById, draftTemplate]);
+    const graphDependencies = useMemo(() => buildTemplateDependencies(draftTemplate), [draftTemplate]);
+    const profileOptions = useMemo(() => aiProfiles.map((profile) => ({
+        value: profile.id,
+        label: profile.displayTitle || profile.name,
+        description: profile.description || undefined,
+    })), [aiProfiles]);
+    const syncProjectTemplateAgentContext = useCallback(async (agentId, template, selectedTaskTemplateId) => {
+        try {
+            await updateAgentContext(agentId, buildProjectTemplateAgentContext(template, selectedTaskTemplateId));
+        }
+        catch (error) {
+            setTemplateAgentError(error instanceof Error
+                ? `Failed to update template assistant context: ${error.message}`
+                : "Failed to update template assistant context");
+        }
+    }, []);
+    useEffect(() => {
+        const runId = ++templateAgentLoadRunIdRef.current;
+        if (!selectedTemplateId) {
+            setTemplateAgentId(null);
+            setTemplateAgentLoading(false);
+            setTemplateAgentError(null);
+            return;
+        }
+        const selectedTemplate = draftTemplateRef.current;
+        if (!selectedTemplate || selectedTemplate.id !== selectedTemplateId) {
+            setTemplateAgentId(null);
+            setTemplateAgentLoading(true);
+            setTemplateAgentError(null);
+            return;
+        }
+        setTemplateAgentId(null);
+        setTemplateAgentLoading(true);
+        setTemplateAgentError(null);
+        void getProjectTemplateAgent(selectedTemplateId)
+            .then(async (result) => {
+            if (runId !== templateAgentLoadRunIdRef.current) {
+                return;
+            }
+            if (result.type !== "success" || !result.data) {
+                throw new Error(result.summary || "Failed to load project template assistant");
+            }
+            setTemplateAgentId(result.data.agentId);
+            setTemplateAgentLoading(false);
+        })
+            .catch((loadError) => {
+            if (runId !== templateAgentLoadRunIdRef.current)
+                return;
+            setTemplateAgentId(null);
+            setTemplateAgentLoading(false);
+            setTemplateAgentError(loadError instanceof Error
+                ? loadError.message
+                : "Failed to load project template assistant");
+        });
+    }, [draftTemplate?.id, selectedTemplateId, syncProjectTemplateAgentContext]);
+    useEffect(() => {
+        if (!templateAgentId || templateAgentLoading)
+            return;
+        const currentTemplate = draftTemplateRef.current;
+        if (!currentTemplate || currentTemplate.id !== selectedTemplateId)
+            return;
+        void syncProjectTemplateAgentContext(templateAgentId, currentTemplate, selectedTaskId);
+    }, [
+        selectedTaskId,
+        templateAgentId,
+        templateAgentLoading,
+        selectedTemplateId,
+        syncProjectTemplateAgentContext,
+    ]);
+    const applyDraftChange = useCallback((updater) => {
+        setDraftTemplate((current) => {
+            if (!current)
+                return current;
+            const next = normalizeProjectTemplate(updater(cloneTemplate(current)));
+            const nextSignature = next.name.trim()
+                ? JSON.stringify(buildUpsertTemplateRequest(next))
+                : null;
+            draftTemplateRef.current = next;
+            latestDraftSignatureRef.current = nextSignature;
+            setTemplates((existingTemplates) => existingTemplates.map((template) => template.id === next.id ? cloneTemplate(next) : template));
+            return next;
+        });
+        setIsDirty(true);
+        setSaveError(null);
+    }, []);
+    const updateSelectedTask = useCallback((updater) => {
+        if (!selectedTaskId)
+            return;
+        applyDraftChange((currentTemplate) => ({
+            ...currentTemplate,
+            taskTemplates: currentTemplate.taskTemplates.map((task) => task.id === selectedTaskId ? updater({ ...task }) : task),
+        }));
+    }, [applyDraftChange, selectedTaskId]);
+    const currentSaveRequest = useMemo(() => {
+        if (!draftTemplate || !draftTemplate.name.trim()) {
+            return null;
+        }
+        return buildUpsertTemplateRequest(draftTemplate);
+    }, [draftTemplate]);
+    const currentSaveSignature = useMemo(() => (currentSaveRequest ? JSON.stringify(currentSaveRequest) : null), [currentSaveRequest]);
+    useEffect(() => {
+        latestDraftSignatureRef.current = currentSaveSignature;
+    }, [currentSaveSignature]);
+    const persistTemplate = useCallback(async (request, signature, options) => {
+        const runId = ++saveRunIdRef.current;
+        setSaving(true);
+        setSaveError(null);
+        try {
+            const result = await upsertProjectTemplate(request);
+            if (result.type !== "success" || !result.data) {
+                const message = result.summary || "Failed to save project template";
+                if (latestDraftSignatureRef.current === signature) {
+                    setSaveError(message);
+                }
+                if (options?.showErrorToast) {
+                    toast.error(message);
+                }
+                return false;
+            }
+            const savedTemplate = mergeTemplateResponseWithRequest(result.data, request);
+            lastPersistedSignatureRef.current = signature;
+            setTemplates((existingTemplates) => sortTemplates([
+                ...existingTemplates.filter((template) => template.id !== savedTemplate.id),
+                savedTemplate,
+            ]));
+            if (latestDraftSignatureRef.current === signature) {
+                setDraftTemplate((current) => current?.id === savedTemplate.id
+                    ? cloneTemplate(savedTemplate)
+                    : current);
+                if (selectedTemplateIdRef.current === savedTemplate.id) {
+                    setSelectedTaskId((currentSelectedTaskId) => getSelectedTaskIdForTemplate(savedTemplate, currentSelectedTaskId));
+                }
+                setIsDirty(false);
+                setSaveError(null);
+            }
+            if (templateAgentId && savedTemplate.id === selectedTemplateId) {
+                const nextSelectedTaskId = getSelectedTaskIdForTemplate(savedTemplate, selectedTaskIdRef.current);
+                void syncProjectTemplateAgentContext(templateAgentId, savedTemplate, nextSelectedTaskId);
+            }
+            return true;
+        }
+        finally {
+            if (runId === saveRunIdRef.current) {
+                setSaving(false);
+            }
+        }
+    }, [selectedTemplateId, syncProjectTemplateAgentContext, templateAgentId]);
+    const flushPendingSave = useCallback(async (options) => {
+        if (autosaveTimeoutRef.current !== null) {
+            window.clearTimeout(autosaveTimeoutRef.current);
+            autosaveTimeoutRef.current = null;
+        }
+        if (!currentSaveRequest || !currentSaveSignature) {
+            if (draftTemplate && !draftTemplate.name.trim()) {
+                const message = "Project template name is required before it can be saved";
+                setSaveError(message);
+                if (options?.showErrorToast) {
+                    toast.error(message);
+                }
+                return false;
+            }
+            return true;
+        }
+        if (currentSaveSignature === lastPersistedSignatureRef.current) {
+            return true;
+        }
+        return persistTemplate(currentSaveRequest, currentSaveSignature, options);
+    }, [currentSaveRequest, currentSaveSignature, draftTemplate, persistTemplate]);
+    useEffect(() => {
+        if (autosaveTimeoutRef.current !== null) {
+            window.clearTimeout(autosaveTimeoutRef.current);
+            autosaveTimeoutRef.current = null;
+        }
+        if (!draftTemplate) {
+            setIsDirty(false);
+            return;
+        }
+        if (saving) {
+            return;
+        }
+        if (!currentSaveRequest || !currentSaveSignature) {
+            if (!draftTemplate.name.trim()) {
+                setIsDirty(true);
+                setSaveError("Project template name is required before it can be saved");
+            }
+            return;
+        }
+        if (currentSaveSignature === lastPersistedSignatureRef.current) {
+            setIsDirty(false);
+            return;
+        }
+        setIsDirty(true);
+        autosaveTimeoutRef.current = window.setTimeout(() => {
+            autosaveTimeoutRef.current = null;
+            void persistTemplate(currentSaveRequest, currentSaveSignature);
+        }, PROJECT_TEMPLATE_AUTOSAVE_DEBOUNCE_MS);
+        return () => {
+            if (autosaveTimeoutRef.current !== null) {
+                window.clearTimeout(autosaveTimeoutRef.current);
+                autosaveTimeoutRef.current = null;
+            }
+        };
+    }, [
+        currentSaveRequest,
+        currentSaveSignature,
+        draftTemplate,
+        persistTemplate,
+        saving,
+    ]);
+    useEffect(() => {
+        return () => {
+            if (autosaveTimeoutRef.current !== null) {
+                window.clearTimeout(autosaveTimeoutRef.current);
+            }
+        };
+    }, []);
+    const loadTemplatesRef = useRef(loadTemplates);
+    useEffect(() => {
+        loadTemplatesRef.current = loadTemplates;
+    }, [loadTemplates]);
+    useEffect(() => {
+        selectedTemplateIdRef.current = selectedTemplateId;
+    }, [selectedTemplateId]);
+    useEffect(() => {
+        selectedTaskIdRef.current = selectedTaskId;
+    }, [selectedTaskId]);
+    const handleCreateTemplate = useCallback(async () => {
+        const canContinue = await flushPendingSave({ showErrorToast: true });
+        if (!canContinue) {
+            return;
+        }
+        const nextTemplate = createEmptyTemplate();
+        selectedTemplateIdRef.current = nextTemplate.id;
+        draftTemplateRef.current = nextTemplate;
+        setTemplates((current) => sortTemplates([nextTemplate, ...current]));
+        setSelectedTemplateId(nextTemplate.id);
+        setDraftTemplate(cloneTemplate(nextTemplate));
+        setSelectedTaskId(null);
+        setIsDirty(true);
+        setSaveError(null);
+        lastPersistedSignatureRef.current = null;
+        latestDraftSignatureRef.current = null;
+        editContext?.updateUrl({
+            [SELECTED_PROJECT_TEMPLATE_QUERY_PARAM]: nextTemplate.id,
+        });
+    }, [editContext, flushPendingSave]);
+    const handleDeleteTemplate = useCallback(() => {
+        if (!draftTemplate)
+            return;
+        const templateId = draftTemplate.id;
+        const templateName = draftTemplate.name.trim() || "Untitled template";
+        const runDelete = async () => {
+            if (autosaveTimeoutRef.current !== null) {
+                window.clearTimeout(autosaveTimeoutRef.current);
+                autosaveTimeoutRef.current = null;
+            }
+            const existsOnServer = templates.some((template) => template.id === templateId);
+            if (!existsOnServer) {
+                const remainingTemplates = templates.filter((template) => template.id !== templateId);
+                setTemplates(remainingTemplates);
+                selectTemplate(remainingTemplates[0] ?? null);
+                return;
+            }
+            setDeleting(true);
+            try {
+                const result = await deleteProjectTemplate(templateId);
+                if (result.type !== "success") {
+                    toast.error(result.summary || "Failed to delete project template");
+                    return;
+                }
+                toast.success("Project template deleted");
+                const fallbackId = templates.find((template) => template.id !== templateId)?.id;
+                await loadTemplates(fallbackId ?? null);
+            }
+            finally {
+                setDeleting(false);
+            }
+        };
+        if (editContext?.confirm) {
+            const existsOnServer = templates.some((template) => template.id === templateId);
+            editContext.confirm({
+                header: "Delete project template",
+                message: existsOnServer
+                    ? `Are you sure you want to delete "${templateName}"?\n\nThis action cannot be undone.`
+                    : `Remove "${templateName}" from the list?\n\nThis template has not been saved yet.`,
+                acceptLabel: "Delete",
+                showCancel: true,
+                accept: () => {
+                    void runDelete();
+                },
+            });
+            return;
+        }
+        void runDelete();
+    }, [draftTemplate, editContext, loadTemplates, selectTemplate, templates]);
+    const handleSelectTemplate = useCallback(async (template) => {
+        const canContinue = await flushPendingSave({ showErrorToast: true });
+        if (!canContinue) {
+            return;
+        }
+        selectTemplate(template);
+    }, [flushPendingSave, selectTemplate]);
+    const handleRefreshTemplates = useCallback(async () => {
+        const canContinue = await flushPendingSave({ showErrorToast: true });
+        if (!canContinue) {
+            return;
+        }
+        await loadTemplates(selectedTemplateId);
+    }, [flushPendingSave, loadTemplates, selectedTemplateId]);
+    const handleResetTemplateAgent = useCallback(async () => {
+        if (!selectedTemplateId)
+            return;
+        const canContinue = await flushPendingSave({ showErrorToast: true });
+        if (!canContinue) {
+            return;
+        }
+        setTemplateAgentResetting(true);
+        setTemplateAgentError(null);
+        try {
+            const result = await resetProjectTemplateAgent(selectedTemplateId);
+            if (result.type !== "success" || !result.data) {
+                const message = result.summary || "Failed to restart the template assistant";
+                setTemplateAgentError(message);
+                toast.error(message);
+                return;
+            }
+            setTemplateAgentId(result.data.agentId);
+            const currentTemplate = draftTemplateRef.current;
+            if (currentTemplate?.id === selectedTemplateId) {
+                await syncProjectTemplateAgentContext(result.data.agentId, currentTemplate, selectedTaskIdRef.current);
+            }
+            toast.success("Template assistant restarted");
+        }
+        catch (error) {
+            const message = error instanceof Error
+                ? error.message
+                : "Failed to restart the template assistant";
+            setTemplateAgentError(message);
+            toast.error(message);
+        }
+        finally {
+            setTemplateAgentResetting(false);
+        }
+    }, [flushPendingSave, selectedTemplateId, syncProjectTemplateAgentContext]);
+    const handleOpenCreateTaskDialog = useCallback(async () => {
+        if (!draftTemplate)
+            return;
+        const canContinue = await flushPendingSave({ showErrorToast: true });
+        if (!canContinue) {
+            return;
+        }
+        setNewTaskDependencySourceId(null);
+        setNewTaskTitle("");
+        setIsCreateTaskDialogOpen(true);
+    }, [draftTemplate, flushPendingSave]);
+    const handleOpenCreateDependentTaskDialogForTask = useCallback(async (taskId) => {
+        if (!draftTemplate)
+            return;
+        const canContinue = await flushPendingSave({ showErrorToast: true });
+        if (!canContinue) {
+            return;
+        }
+        setSelectedTaskId(taskId);
+        setNewTaskDependencySourceId(taskId);
+        setNewTaskTitle("");
+        setIsCreateTaskDialogOpen(true);
+    }, [draftTemplate, flushPendingSave]);
+    const handleOpenAddChildTaskDialogForTask = useCallback(async (taskId) => {
+        if (!draftTemplate)
+            return;
+        const canContinue = await flushPendingSave({ showErrorToast: true });
+        if (!canContinue) {
+            return;
+        }
+        setSelectedTaskId(taskId);
+        setNewChildTaskTitle("");
+        setIsAddChildTaskDialogOpen(true);
+    }, [draftTemplate, flushPendingSave]);
+    const handleConfirmCreateTask = useCallback(async () => {
+        if (!draftTemplate)
+            return;
+        const trimmedTitle = newTaskTitle.trim();
+        if (!trimmedTitle) {
+            toast.error("Task title is required");
+            return;
+        }
+        if (!draftTemplate.name.trim()) {
+            const message = "Project template name is required before it can be saved";
+            setSaveError(message);
+            toast.error(message);
+            return;
+        }
+        if (autosaveTimeoutRef.current !== null) {
+            window.clearTimeout(autosaveTimeoutRef.current);
+            autosaveTimeoutRef.current = null;
+        }
+        const nextTask = createEmptyTaskTemplate(draftTemplate.taskTemplates.length, trimmedTitle);
+        if (newTaskDependencySourceId) {
+            nextTask.dependencyIds = [newTaskDependencySourceId];
+        }
+        const nextTemplate = cloneTemplate(draftTemplate);
+        nextTemplate.taskTemplates = [...nextTemplate.taskTemplates, nextTask];
+        const request = buildUpsertTemplateRequest(nextTemplate);
+        const signature = JSON.stringify(request);
+        latestDraftSignatureRef.current = signature;
+        setDraftTemplate(cloneTemplate(nextTemplate));
+        setTemplates((existingTemplates) => sortTemplates([
+            ...existingTemplates.filter((template) => template.id !== nextTemplate.id),
+            cloneTemplate(nextTemplate),
+        ]));
+        setSelectedTaskId(nextTask.id);
+        setIsDirty(true);
+        setSaveError(null);
+        setCreatingTask(true);
+        try {
+            const saved = await persistTemplate(request, signature, {
+                showErrorToast: true,
+            });
+            if (saved) {
+                setIsCreateTaskDialogOpen(false);
+                setNewTaskDependencySourceId(null);
+                setNewTaskTitle("");
+                toast.success(newTaskDependencySourceId
+                    ? "Dependent task template created"
+                    : "Task template created");
+            }
+        }
+        finally {
+            setCreatingTask(false);
+        }
+    }, [
+        draftTemplate,
+        newTaskDependencySourceId,
+        newTaskTitle,
+        persistTemplate,
+    ]);
+    const handleOpenAddChildTaskDialog = useCallback(async () => {
+        if (!draftTemplate || !selectedTaskId)
+            return;
+        await handleOpenAddChildTaskDialogForTask(selectedTaskId);
+    }, [draftTemplate, handleOpenAddChildTaskDialogForTask, selectedTaskId]);
+    const handleConfirmCreateChildTask = useCallback(async () => {
+        if (!draftTemplate || !selectedTaskId)
+            return;
+        const trimmedTitle = newChildTaskTitle.trim();
+        if (!trimmedTitle) {
+            toast.error("Task title is required");
+            return;
+        }
+        if (!draftTemplate.name.trim()) {
+            const message = "Project template name is required before it can be saved";
+            setSaveError(message);
+            toast.error(message);
+            return;
+        }
+        if (autosaveTimeoutRef.current !== null) {
+            window.clearTimeout(autosaveTimeoutRef.current);
+            autosaveTimeoutRef.current = null;
+        }
+        const nextTask = createEmptyTaskTemplate(draftTemplate.taskTemplates.length, trimmedTitle);
+        nextTask.parentTaskId = selectedTaskId;
+        nextTask.dependencyIds = [selectedTaskId];
+        const nextTemplate = cloneTemplate(draftTemplate);
+        nextTemplate.taskTemplates = [...nextTemplate.taskTemplates, nextTask];
+        const request = buildUpsertTemplateRequest(nextTemplate);
+        const signature = JSON.stringify(request);
+        latestDraftSignatureRef.current = signature;
+        setDraftTemplate(cloneTemplate(nextTemplate));
+        setTemplates((existingTemplates) => sortTemplates([
+            ...existingTemplates.filter((template) => template.id !== nextTemplate.id),
+            cloneTemplate(nextTemplate),
+        ]));
+        // Keep the parent task selected so the new child appears in "Child tasks" immediately.
+        setIsDirty(true);
+        setSaveError(null);
+        setCreatingChildTask(true);
+        try {
+            const saved = await persistTemplate(request, signature, {
+                showErrorToast: true,
+            });
+            if (saved) {
+                setIsAddChildTaskDialogOpen(false);
+                setNewChildTaskTitle("");
+                toast.success("Child task template created");
+            }
+        }
+        finally {
+            setCreatingChildTask(false);
+        }
+    }, [draftTemplate, newChildTaskTitle, persistTemplate, selectedTaskId]);
+    const handleRemoveDependency = useCallback((dependencyId) => {
+        updateSelectedTask((currentTask) => ({
+            ...currentTask,
+            parentTaskId: currentTask.parentTaskId === dependencyId
+                ? null
+                : currentTask.parentTaskId,
+            dependencyIds: currentTask.dependencyIds.filter((id) => id !== dependencyId),
+        }));
+    }, [updateSelectedTask]);
+    const handleAddDependencyToTask = useCallback((taskId, dependencyId) => {
+        const currentTemplate = draftTemplateRef.current;
+        if (!canAddTemplateDependency(currentTemplate, taskId, dependencyId)) {
+            return false;
+        }
+        applyDraftChange((template) => ({
+            ...template,
+            taskTemplates: template.taskTemplates.map((task) => task.id === taskId
+                ? {
+                    ...task,
+                    dependencyIds: Array.from(new Set([...(task.dependencyIds ?? []), dependencyId])),
+                }
+                : task),
+        }));
+        return true;
+    }, [applyDraftChange]);
+    const handleAddDependency = useCallback((dependencyId) => {
+        if (!selectedTaskId)
+            return;
+        handleAddDependencyToTask(selectedTaskId, dependencyId);
+        setDependencyPickerOpen(false);
+    }, [handleAddDependencyToTask, selectedTaskId]);
+    const handleCreateDependencyFromGraph = useCallback((dependsOnTaskId, taskId) => {
+        const didAddDependency = handleAddDependencyToTask(taskId, dependsOnTaskId);
+        if (!didAddDependency) {
+            return;
+        }
+        setSelectedTaskId(taskId);
+    }, [handleAddDependencyToTask]);
+    const handleCreateChildRelationshipFromGraph = useCallback((parentTaskId, childTaskId) => {
+        const currentTemplate = draftTemplateRef.current;
+        const taskTemplates = currentTemplate?.taskTemplates ?? [];
+        const childTask = taskTemplates.find((task) => task.id === childTaskId);
+        if (!childTask || childTaskId === parentTaskId) {
+            return;
+        }
+        const parentByTaskId = new Map(taskTemplates.map((task) => [task.id, task.parentTaskId ?? null]));
+        let ancestorTaskId = parentByTaskId.get(parentTaskId) ?? null;
+        while (ancestorTaskId) {
+            if (ancestorTaskId === childTaskId) {
+                return;
+            }
+            ancestorTaskId = parentByTaskId.get(ancestorTaskId) ?? null;
+        }
+        applyDraftChange((template) => ({
+            ...template,
+            taskTemplates: template.taskTemplates.map((task) => {
+                if (task.id !== childTaskId) {
+                    return task;
+                }
+                const existingParentTaskId = task.parentTaskId ?? null;
+                return {
+                    ...task,
+                    parentTaskId,
+                    dependencyIds: Array.from(new Set([
+                        ...task.dependencyIds.filter((id) => id !== existingParentTaskId),
+                        parentTaskId,
+                    ])),
+                };
+            }),
+        }));
+        setSelectedTaskId(childTaskId);
+    }, [applyDraftChange]);
+    const handleUnlinkChildTask = useCallback((childTaskId) => {
+        if (!selectedTaskId)
+            return;
+        applyDraftChange((currentTemplate) => ({
+            ...currentTemplate,
+            taskTemplates: currentTemplate.taskTemplates.map((task) => task.id === childTaskId
+                ? {
+                    ...task,
+                    parentTaskId: null,
+                    dependencyIds: task.dependencyIds.filter((id) => id !== selectedTaskId),
+                }
+                : task),
+        }));
+    }, [applyDraftChange, selectedTaskId]);
+    const removeTaskTemplateById = useCallback((taskId) => {
+        const template = draftTemplateRef.current;
+        if (!template?.taskTemplates.some((t) => t.id === taskId))
+            return;
+        const taskTitle = template.taskTemplates.find((t) => t.id === taskId)?.title ??
+            "Untitled task";
+        const runDelete = () => {
+            const current = draftTemplateRef.current;
+            if (!current?.taskTemplates.some((t) => t.id === taskId))
+                return;
+            const remainingTasks = current.taskTemplates.filter((task) => task.id !== taskId);
+            applyDraftChange((currentTemplate) => ({
+                ...currentTemplate,
+                graphLayout: currentTemplate.graphLayout
+                    ? {
+                        ...currentTemplate.graphLayout,
+                        nodes: currentTemplate.graphLayout.nodes.filter((node) => node.taskId !== taskId),
+                    }
+                    : null,
+                taskTemplates: currentTemplate.taskTemplates
+                    .filter((task) => task.id !== taskId)
+                    .map((task) => ({
+                    ...task,
+                    parentTaskId: task.parentTaskId === taskId ? null : task.parentTaskId,
+                    dependencyIds: task.dependencyIds.filter((id) => id !== taskId),
+                })),
+            }));
+            setSelectedTaskId((prev) => {
+                if (prev === taskId) {
+                    return remainingTasks[0]?.id ?? null;
+                }
+                return remainingTasks.some((t) => t.id === prev)
+                    ? prev
+                    : (remainingTasks[0]?.id ?? null);
+            });
+        };
+        if (editContext?.confirm) {
+            editContext.confirm({
+                header: "Remove task template",
+                message: `Are you sure you want to remove "${taskTitle}"?\n\nOther tasks will no longer depend on this task.`,
+                acceptLabel: "Remove",
+                showCancel: true,
+                accept: runDelete,
+            });
+            return;
+        }
+        runDelete();
+    }, [applyDraftChange, editContext]);
+    const handleDeleteSelectedTask = useCallback(() => {
+        if (!selectedTaskId)
+            return;
+        removeTaskTemplateById(selectedTaskId);
+    }, [removeTaskTemplateById, selectedTaskId]);
+    const handleProjectTemplateEditorKeyDownCapture = useCallback((event) => {
+        if (event.key !== "Delete")
+            return;
+        if (!selectedTaskId)
+            return;
+        if (isTypingEventTarget(event.nativeEvent))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        handleDeleteSelectedTask();
+    }, [handleDeleteSelectedTask, selectedTaskId]);
+    const listContent = (_jsx("div", { className: "h-full overflow-auto p-4", "data-testid": "project-template-list-pane", children: _jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [_jsxs("div", { className: "shrink-0 space-y-4 pb-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("div", { className: "flex min-h-5 items-center gap-2 text-xs text-gray-700", children: state === "loading" ? (_jsx(RefreshCw, { className: "h-4 w-4 animate-spin text-amber-600", strokeWidth: 1.5 })) : state === "error" ? (_jsx(AlertCircle, { className: "h-4 w-4 text-red-600", strokeWidth: 1.5 })) : null }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { size: "sm", variant: "outline", onClick: () => void handleRefreshTemplates(), disabled: state === "loading" || deleting, "data-testid": "project-template-refresh-button", children: _jsx(RefreshCw, { className: cn("h-4 w-4", state === "loading" && "animate-spin"), strokeWidth: 1.5 }) }), _jsxs(Button, { size: "sm", onClick: () => void handleCreateTemplate(), "data-testid": "project-template-create-button", children: [_jsx(Plus, { className: "h-4 w-4", strokeWidth: 1.5 }), "Create Template"] })] })] }), _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400", strokeWidth: 1.5 }), _jsx(Input, { type: "text", placeholder: "Search templates...", value: searchQuery, onChange: (event) => setSearchQuery(event.target.value), className: "pl-9 text-xs md:text-xs", "data-testid": "project-template-search-input" })] }), error && (_jsx("div", { className: "rounded border border-red-200 bg-red-50 p-2 text-xs whitespace-pre-wrap text-red-700", children: error }))] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: filteredTemplates.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [_jsx(GitBranch, { className: "mb-4 h-10 w-10 text-gray-300", strokeWidth: 1.2 }), _jsx("p", { className: "text-xs text-gray-500", children: searchQuery
+                                    ? "No templates match your search"
+                                    : "No project templates found" })] })) : (_jsx("div", { className: "space-y-3", children: filteredTemplates.map((template) => {
+                            const isSelected = selectedTemplateId === template.id;
+                            return (_jsx("button", { type: "button", onClick: () => void handleSelectTemplate(template), "data-testid": `project-template-list-item-${template.id}`, className: cn("w-full rounded-lg border p-4 text-left transition-shadow hover:shadow-sm", isSelected
+                                    ? "border-blue-400 bg-blue-50"
+                                    : "border-gray-200 bg-white"), children: _jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [template.isSystem && (_jsx("span", { title: "System template", className: "inline-flex", children: _jsx(Shield, { className: "h-3.5 w-3.5 shrink-0 text-amber-600", strokeWidth: 1.5, "aria-label": "System template" }) })), _jsx("h4", { className: "font-medium text-gray-900", children: template.name }), template.disabled && (_jsx(Badge, { variant: "outline", className: "text-[10px] uppercase", children: "Disabled" })), template.hideFromCreateDialog && (_jsx(Badge, { variant: "outline", className: "text-[10px] uppercase", children: "Hidden" })), template.openInWizardMode && (_jsx(Badge, { variant: "outline", className: "text-[10px] uppercase", children: "Wizard" }))] }), template.description && (_jsx("div", { className: "mt-2 line-clamp-2 text-xs text-gray-600", children: template.description })), _jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-2 text-xs text-gray-500", children: [_jsxs("span", { children: [template.taskTemplates.length, " task templates"] }), template.defaultCostLimit != null && (_jsxs("span", { children: ["Default budget: ", template.defaultCostLimit] }))] })] }) }, template.id));
+                        }) })) })] }) }));
+    const detailContent = draftTemplate ? (_jsxs("div", { className: "flex h-full flex-col bg-gray-50/40", "data-testid": "project-template-detail-pane", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-gray-200 bg-white px-5 py-3.5", children: [_jsx("div", { className: "min-w-0", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gray-900 text-white", children: _jsx(GitBranch, { className: "h-4 w-4", strokeWidth: 1.5 }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("h2", { className: "truncate text-xs font-semibold text-gray-900", children: draftTemplate.name || "Project Template" }), _jsxs("div", { className: "mt-0.5 flex min-h-[20px] items-center gap-2 text-[11px] text-gray-500", children: [_jsxs("span", { children: [draftTemplate.taskTemplates.length, " task templates"] }), headerStatusBadge] })] })] }) }), _jsx("div", { className: "flex shrink-0 items-center gap-2", children: _jsxs(Button, { variant: "outline", size: "sm", onClick: handleDeleteTemplate, disabled: deleting, "data-testid": "project-template-delete-button", children: [_jsx(Trash2, { className: "h-4 w-4", strokeWidth: 1.5 }), deleting ? "Deleting..." : "Delete"] }) })] }), _jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-5 overflow-hidden p-5", children: [saveError && (_jsx("div", { className: "rounded border border-red-200 bg-red-50 px-4 py-3 text-xs text-red-700", children: saveError })), _jsxs("section", { className: "shrink-0 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm", children: [_jsxs("button", { type: "button", className: "flex w-full items-center justify-between gap-3 px-4 py-3 text-left", onClick: () => setIsBasicSettingsExpanded((currentValue) => !currentValue), "aria-expanded": isBasicSettingsExpanded, "aria-controls": "project-template-basic-settings", "data-testid": "project-template-basic-settings-toggle", children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-gray-100 text-gray-500", children: _jsx(Settings2, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-xs font-semibold tracking-wide text-gray-800", children: "Basic Settings" }), _jsx("p", { className: "text-[11px] leading-tight text-gray-400", children: "Configure the shared defaults for this project template." })] })] }), _jsx(ChevronDown, { className: cn("h-4 w-4 shrink-0 text-gray-400 transition-transform", isBasicSettingsExpanded ? "rotate-180" : "rotate-0"), strokeWidth: 1.5 })] }), isBasicSettingsExpanded && (_jsxs("div", { id: "project-template-basic-settings", className: "grid gap-4 border-t border-gray-100 p-4 md:grid-cols-2", children: [_jsxs("div", { className: "grid gap-1.5 md:col-span-2", children: [_jsx(Label, { className: "text-xs", children: "Template name" }), _jsx(Input, { value: draftTemplate.name, onChange: (event) => applyDraftChange((currentTemplate) => ({
+                                                    ...currentTemplate,
+                                                    name: event.target.value,
+                                                })), placeholder: "Project template name", className: "text-xs md:text-xs", "data-testid": "project-template-name-input" })] }), _jsxs("div", { className: "grid gap-1.5 md:col-span-2", children: [_jsx(Label, { className: "text-xs", children: "Description" }), _jsx(Textarea, { className: "text-xs", value: draftTemplate.description ?? "", onChange: (event) => applyDraftChange((currentTemplate) => ({
+                                                    ...currentTemplate,
+                                                    description: event.target.value,
+                                                })), rows: 4, placeholder: "Describe when to use this template", "data-testid": "project-template-description-input" })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { className: "text-xs", children: "Default cost limit" }), _jsx(Input, { type: "number", value: draftTemplate.defaultCostLimit ?? "", onChange: (event) => applyDraftChange((currentTemplate) => ({
+                                                    ...currentTemplate,
+                                                    defaultCostLimit: event.target.value.trim() === ""
+                                                        ? null
+                                                        : Number(event.target.value),
+                                                })), placeholder: "0", className: "text-xs md:text-xs", "data-testid": "project-template-default-cost-limit-input" })] }), _jsxs("div", { className: "flex items-center justify-between gap-4 md:col-span-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs font-medium text-zinc-900", children: "Disabled" }), _jsx("div", { className: "mt-0.5 text-xs text-zinc-500", children: "Makes the template unavailable for project creation and template resolution." })] }), _jsx(Switch, { checked: draftTemplate.disabled === true, onCheckedChange: (checked) => applyDraftChange((currentTemplate) => ({
+                                                    ...currentTemplate,
+                                                    disabled: checked,
+                                                })), className: "data-[state=checked]:bg-amber-600 data-[state=checked]:shadow-inner dark:data-[state=checked]:bg-amber-600", "aria-label": "Disable this project template", "data-testid": "project-template-disabled-switch" })] }), _jsxs("div", { className: "flex items-center justify-between gap-4 md:col-span-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs font-medium text-zinc-900", children: "Hide from create dialog" }), _jsx("div", { className: "mt-0.5 text-xs text-zinc-500", children: "Keeps the template active, but removes it from the create project dialog." })] }), _jsx(Switch, { checked: draftTemplate.hideFromCreateDialog === true, onCheckedChange: (checked) => applyDraftChange((currentTemplate) => ({
+                                                    ...currentTemplate,
+                                                    hideFromCreateDialog: checked,
+                                                })), "aria-label": "Hide this project template from the create dialog", "data-testid": "project-template-hide-from-create-dialog-switch" })] }), _jsxs("div", { className: "flex items-center justify-between gap-4 md:col-span-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs font-medium text-zinc-900", children: "Open in wizard mode" }), _jsx("div", { className: "mt-0.5 text-xs text-zinc-500", children: "New projects created from this template start in taskboard wizard mode." })] }), _jsx(Switch, { checked: draftTemplate.openInWizardMode === true, onCheckedChange: (checked) => applyDraftChange((currentTemplate) => ({
+                                                    ...currentTemplate,
+                                                    openInWizardMode: checked,
+                                                })), "aria-label": "Open new projects from this template in wizard mode", "data-testid": "project-template-open-in-wizard-mode-switch" })] })] }))] }), _jsxs("section", { className: "flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-gray-100 px-4 py-3", children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-gray-100 text-gray-500", children: _jsx(GitBranch, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-xs font-semibold tracking-wide text-gray-800", children: "Template Task Editor" }), _jsx("p", { className: "text-[11px] leading-tight text-gray-400", children: "Add task templates, arrange them in the graph, and define dependencies." })] })] }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void handleOpenCreateTaskDialog(), disabled: creatingTask, "data-testid": "project-template-add-task-button", children: [_jsx(Plus, { className: "h-4 w-4", strokeWidth: 1.5 }), "Add Task"] })] }), _jsx("div", { className: "min-h-[360px] flex-1 overflow-hidden border-b border-gray-100", children: _jsx(Splitter, { direction: "vertical", localStorageKey: "settings-project-template-graph-task-splitter-v1", className: "h-full", panels: [
+                                        {
+                                            name: "project-template-graph",
+                                            defaultSize: 400,
+                                            className: "min-h-0",
+                                            content: (_jsx("div", { className: "h-full min-h-0 overflow-hidden bg-slate-50/40", "data-testid": "project-template-graph", children: _jsx(DependencyGraphView, { projectId: draftTemplate.id, layoutKey: `project-template:${draftTemplate.id}`, tasks: graphTasks, dependencies: graphDependencies, miniMapWidth: 112, miniMapHeight: 84, orientation: "horizontal", autoLayoutStrategy: "hierarchy", savedLayout: draftTemplate.graphLayout, selectedTaskId: selectedTaskId, onSelectTask: setSelectedTaskId, onAddDependentTaskFromNode: (taskId) => {
+                                                        void handleOpenCreateDependentTaskDialogForTask(taskId);
+                                                    }, onAddChildTaskFromNode: (taskId) => {
+                                                        void handleOpenAddChildTaskDialogForTask(taskId);
+                                                    }, onRemoveTask: removeTaskTemplateById, allowDependencyConnect: true, onCreateDependency: handleCreateDependencyFromGraph, onCreateChildRelationship: handleCreateChildRelationshipFromGraph, canPersistLayout: true, layoutSaveDebounceMs: 0, highlightBlockedTasks: false, showExecutionStateBadges: false, emptyStateTitle: "No task templates yet", emptyStateDescription: "Add task templates to start designing the project flow.", onPersistLayout: async (layout) => {
+                                                        const nextLayout = {
+                                                            ...layout,
+                                                            projectTemplateId: draftTemplate.id,
+                                                        };
+                                                        applyDraftChange((currentTemplate) => ({
+                                                            ...currentTemplate,
+                                                            graphLayout: nextLayout,
+                                                        }));
+                                                        return nextLayout;
+                                                    } }) })),
+                                        },
+                                        {
+                                            name: "project-template-task-details",
+                                            defaultSize: "auto",
+                                            className: "min-h-0",
+                                            content: (_jsx("div", { className: "flex h-full min-h-0 flex-col overflow-hidden", "data-testid": "project-template-task-detail-pane", children: !selectedTask ? (_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-4", children: _jsx("div", { className: "rounded-lg border border-dashed border-gray-200 bg-gray-50 p-6 text-center text-xs text-gray-500", children: "Select a task node to edit its details." }) })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "shrink-0 border-b border-gray-100 bg-white px-4 pb-3 pt-4", children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-gray-900", "data-testid": "project-template-selected-task-title", children: selectedTask.title || "Untitled Task" }), _jsx("div", { className: "text-xs text-gray-500", children: "Configure task details, assignment, and dependencies." })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: handleDeleteSelectedTask, "data-testid": "project-template-remove-task-button", children: [_jsx(Trash2, { className: "h-4 w-4", strokeWidth: 1.5 }), "Remove Task"] })] }) }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-4 pb-4 pt-3", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsxs("div", { className: "grid gap-1.5 md:col-span-2", children: [_jsx(Label, { className: "text-xs", children: "Task title" }), _jsx(Input, { value: selectedTask.title, onChange: (event) => updateSelectedTask((currentTask) => ({
+                                                                                            ...currentTask,
+                                                                                            title: event.target.value,
+                                                                                        })), placeholder: "Task title", className: "text-xs md:text-xs", "data-testid": "project-template-task-title-input" })] }), _jsxs("div", { className: "grid gap-1.5 md:col-span-2", children: [_jsx(Label, { className: "text-xs", children: "Parent task" }), _jsx(Select, { className: "text-xs", value: selectedTask.parentTaskId ?? "", onValueChange: (value) => {
+                                                                                            const newParentId = value.trim() || null;
+                                                                                            updateSelectedTask((currentTask) => {
+                                                                                                const oldParent = currentTask.parentTaskId ?? null;
+                                                                                                let deps = [
+                                                                                                    ...(currentTask.dependencyIds ?? []),
+                                                                                                ];
+                                                                                                if (oldParent &&
+                                                                                                    oldParent !== newParentId) {
+                                                                                                    deps = deps.filter((id) => id !== oldParent);
+                                                                                                }
+                                                                                                if (newParentId) {
+                                                                                                    if (!deps.includes(newParentId)) {
+                                                                                                        deps = [...deps, newParentId];
+                                                                                                    }
+                                                                                                }
+                                                                                                else if (oldParent) {
+                                                                                                    deps = deps.filter((id) => id !== oldParent);
+                                                                                                }
+                                                                                                return {
+                                                                                                    ...currentTask,
+                                                                                                    parentTaskId: newParentId,
+                                                                                                    dependencyIds: deps,
+                                                                                                };
+                                                                                            });
+                                                                                        }, options: parentTaskSelectOptions, placeholder: "No parent", "data-testid": "project-template-task-parent-select" }), _jsx("p", { className: "text-[11px] leading-snug text-gray-500", children: "Marks this task as a child in the template; the parent is also added as a blocking dependency unless already listed." })] }), _jsxs("div", { className: "grid gap-1.5 md:col-span-2", children: [_jsx(Label, { className: "text-xs", children: "Description" }), _jsx(Textarea, { className: "text-xs", value: selectedTask.description ?? "", onChange: (event) => updateSelectedTask((currentTask) => ({
+                                                                                            ...currentTask,
+                                                                                            description: event.target.value,
+                                                                                        })), rows: 4, placeholder: "Describe what this task should accomplish", "data-testid": "project-template-task-description-input" })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { className: "text-xs", children: "Priority" }), _jsx(Select, { className: "text-xs", value: selectedTask.priority ?? "", onValueChange: (value) => updateSelectedTask((currentTask) => ({
+                                                                                            ...currentTask,
+                                                                                            priority: value || null,
+                                                                                        })), options: PRIORITY_OPTIONS, "data-testid": "project-template-task-priority-select" })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { className: "text-xs", children: "Default assignment type" }), _jsx(Select, { className: "text-xs", value: selectedTask.assigneeType ?? "", onValueChange: (value) => updateSelectedTask((currentTask) => ({
+                                                                                            ...currentTask,
+                                                                                            assigneeType: (value ||
+                                                                                                null),
+                                                                                            assigneeId: value
+                                                                                                ? (currentTask.assigneeId ?? null)
+                                                                                                : null,
+                                                                                            agentProfileId: value === "Agent"
+                                                                                                ? (currentTask.agentProfileId ?? null)
+                                                                                                : null,
+                                                                                        })), options: ASSIGNEE_TYPE_OPTIONS, "data-testid": "project-template-task-assignee-type-select" })] }), selectedTask.assigneeType === "Agent" ? (_jsxs("div", { className: "grid gap-1.5 md:col-span-2", children: [_jsx(Label, { className: "text-xs", children: "Agent profile" }), _jsx(Select, { className: "text-xs", value: selectedTask.assigneeId ??
+                                                                                            selectedTask.agentProfileId ??
+                                                                                            "", onValueChange: (value) => updateSelectedTask((currentTask) => ({
+                                                                                            ...currentTask,
+                                                                                            assigneeType: "Agent",
+                                                                                            assigneeId: value || null,
+                                                                                            agentProfileId: value || null,
+                                                                                        })), options: profileOptions, searchable: true, placeholder: "Select an agent profile", "data-testid": "project-template-task-agent-profile-select" }), profilesError && (_jsx("div", { className: "text-xs text-amber-700", children: profilesError }))] })) : selectedTask.assigneeType === "Human" ? (_jsxs("div", { className: "grid gap-1.5 md:col-span-2", children: [_jsx(Label, { className: "text-xs", children: "Default user identifier" }), _jsx(Input, { value: selectedTask.assigneeId ?? "", onChange: (event) => updateSelectedTask((currentTask) => ({
+                                                                                            ...currentTask,
+                                                                                            assigneeType: "Human",
+                                                                                            assigneeId: event.target.value,
+                                                                                            agentProfileId: null,
+                                                                                        })), placeholder: "sitecore\\\\john", className: "text-xs md:text-xs", "data-testid": "project-template-task-user-assignee-input" })] })) : selectedTask.assigneeType === "Role" ? (_jsxs("div", { className: "grid gap-1.5 md:col-span-2", children: [_jsx(Label, { className: "text-xs", children: "Default role identifier" }), _jsx(Input, { value: selectedTask.assigneeId ?? "", onChange: (event) => updateSelectedTask((currentTask) => ({
+                                                                                            ...currentTask,
+                                                                                            assigneeType: "Role",
+                                                                                            assigneeId: event.target.value,
+                                                                                            agentProfileId: null,
+                                                                                        })), placeholder: "sitecore\\\\Author", className: "text-xs md:text-xs", "data-testid": "project-template-task-role-assignee-input" })] })) : null] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "rounded-lg border border-gray-200 bg-gray-50 p-3", "data-testid": "project-template-dependencies-section", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs font-medium text-gray-800", children: [_jsx(Shield, { className: "h-4 w-4 text-gray-500", strokeWidth: 1.5 }), "Dependencies"] }), _jsxs(Popover, { open: dependencyPickerOpen, onOpenChange: setDependencyPickerOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { type: "button", size: "sm", variant: "outline", className: "h-7 gap-1 px-2", disabled: dependencyAddCandidates.length === 0, "aria-label": "Add dependency", "data-testid": "project-template-add-dependency-button", children: _jsx(Plus, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }) }) }), _jsxs(PopoverContent, { align: "end", className: "w-72 p-0", sideOffset: 6, "data-testid": "project-template-dependency-popover", children: [_jsx("div", { className: "border-b border-gray-100 px-3 py-2 text-xs font-medium text-gray-700", children: "Depends on" }), _jsx("div", { className: "max-h-56 overflow-y-auto p-1", children: dependencyAddCandidates.length ===
+                                                                                                                    0 ? (_jsx("div", { className: "px-2 py-3 text-center text-xs text-gray-500", children: "All other tasks are already linked." })) : (dependencyAddCandidates.map((task) => (_jsxs("button", { type: "button", className: "flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-xs hover:bg-gray-100", onClick: () => handleAddDependency(task.id), "data-testid": `project-template-dependency-option-${task.id}`, children: [_jsx(Link2, { className: "h-3.5 w-3.5 shrink-0 text-gray-400", strokeWidth: 1.5 }), _jsx("span", { className: "min-w-0 truncate font-medium text-gray-900", children: task.title ||
+                                                                                                                                "Untitled Task" })] }, task.id)))) })] })] })] }), _jsx("p", { className: "mb-2 text-[11px] leading-snug text-gray-500", children: "This task must wait for these tasks to finish first." }), dependencyTasks.length === 0 ? (_jsx("div", { className: "text-xs text-gray-500", children: draftTemplate.taskTemplates.filter((t) => t.id !== selectedTask.id).length === 0
+                                                                                            ? "Add more task templates to create dependencies."
+                                                                                            : "No dependencies yet. Use + to add one." })) : (_jsx("ul", { className: "space-y-1.5", children: dependencyTasks.map((task) => (_jsxs("li", { className: "flex items-center justify-between gap-2 rounded-md border border-gray-200 bg-white px-3 py-2 text-xs", "data-testid": `project-template-dependency-row-${task.id}`, children: [_jsx("span", { className: "min-w-0 truncate font-medium text-gray-800", children: task.title || "Untitled Task" }), _jsx("button", { type: "button", className: "shrink-0 rounded p-0.5 text-gray-400 hover:bg-gray-100 hover:text-gray-700", "aria-label": `Remove dependency on ${task.title}`, onClick: () => handleRemoveDependency(task.id), "data-testid": `project-template-remove-dependency-${task.id}`, children: _jsx(X, { className: "h-4 w-4", strokeWidth: 1.5 }) })] }, task.id))) }))] }), _jsxs("div", { className: "rounded-lg border border-gray-200 bg-gray-50 p-3", "data-testid": "project-template-child-tasks-section", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs font-medium text-gray-800", children: [_jsx(CornerDownRight, { className: "h-4 w-4 text-gray-500", strokeWidth: 1.5 }), "Child tasks"] }), _jsx(Button, { type: "button", size: "sm", variant: "outline", className: "h-7 gap-1 px-2", onClick: () => void handleOpenAddChildTaskDialog(), disabled: creatingChildTask, "aria-label": "Add child task", "data-testid": "project-template-add-child-task-button", children: _jsx(Plus, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }) })] }), _jsx("p", { className: "mb-2 text-[11px] leading-snug text-gray-500", children: "Tasks that run after this one (they depend on this task)." }), childTaskTemplates.length === 0 ? (_jsx("div", { className: "text-xs text-gray-500", children: "No child tasks yet. Use + to add one." })) : (_jsx("ul", { className: "space-y-1.5", children: childTaskTemplates.map((task) => (_jsxs("li", { className: "flex items-center justify-between gap-2 rounded-md border border-gray-200 bg-white px-3 py-2 text-xs", "data-testid": `project-template-child-task-row-${task.id}`, children: [_jsx("span", { className: "min-w-0 truncate font-medium text-gray-800", children: task.title || "Untitled Task" }), _jsx("button", { type: "button", className: "shrink-0 rounded p-0.5 text-gray-400 hover:bg-gray-100 hover:text-gray-700", "aria-label": `Unlink child task ${task.title}`, onClick: () => handleUnlinkChildTask(task.id), "data-testid": `project-template-unlink-child-task-${task.id}`, children: _jsx(X, { className: "h-4 w-4", strokeWidth: 1.5 }) })] }, task.id))) }))] })] })] }) })] })) })),
+                                        },
+                                    ] }) })] })] })] })) : (_jsx("div", { className: "flex h-full items-center justify-center bg-gray-50/40", children: _jsxs("div", { className: "max-w-sm rounded-lg border border-dashed border-gray-300 bg-white p-8 text-center", children: [_jsx(GitBranch, { className: "mx-auto mb-3 h-10 w-10 text-gray-300", strokeWidth: 1.2 }), _jsx("h3", { className: "text-xs font-semibold text-gray-900", children: "Select a project template" }), _jsx("p", { className: "mt-1 text-xs text-gray-500", children: "Choose a template from the list or create a new one to start editing." })] }) }));
+    const agentPanelContent = (_jsx(ProjectTemplateAgentPanel, { templateName: draftTemplate?.name ?? null, agentId: templateAgentId, loading: templateAgentLoading, resetting: templateAgentResetting, error: templateAgentError, onStartOver: () => void handleResetTemplateAgent() }));
+    const panels = [
+        {
+            name: "project-template-list",
+            defaultSize: 360,
+            content: listContent,
+            className: "overflow-hidden",
+        },
+        {
+            name: "project-template-detail",
+            defaultSize: "auto",
+            content: detailContent,
+            className: "overflow-hidden",
+        },
+        {
+            name: "project-template-agent",
+            defaultSize: 460,
+            content: agentPanelContent,
+            className: "overflow-hidden",
+            collapsible: true,
+        },
+    ];
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "h-full", "data-testid": "project-template-editor", onKeyDownCapture: handleProjectTemplateEditorKeyDownCapture, children: _jsx(Splitter, { panels: panels, localStorageKey: "settings-project-templates-panel-splitter-v2", direction: "horizontal", className: "h-full" }) }), _jsx(Dialog, { open: isCreateTaskDialogOpen, onOpenChange: (open) => {
+                    setIsCreateTaskDialogOpen(open);
+                    if (!open) {
+                        setNewTaskDependencySourceId(null);
+                    }
+                }, children: _jsxs(DialogContent, { className: "max-w-md", "data-testid": "project-template-create-task-dialog", children: [_jsx(StyledDialogTitle, { icon: _jsx(Plus, { strokeWidth: 1.5 }), title: newTaskDependencySourceId
+                                ? "Add Dependent Task"
+                                : "Add Task Template", subtitle: newTaskDependencySourceId
+                                ? "Creates a new task that depends on the selected task."
+                                : "Create the task and save it immediately." }), _jsxs("div", { className: "grid gap-2 p-6", children: [_jsx(Label, { className: "text-xs", htmlFor: "project-template-new-task-title", children: "Task title" }), _jsx(Input, { id: "project-template-new-task-title", value: newTaskTitle, onChange: (event) => setNewTaskTitle(event.target.value), placeholder: "e.g. Discover Sitecore Setup", className: "text-xs md:text-xs", autoFocus: true, onKeyDown: (event) => {
+                                        if (event.key === "Enter" && !event.shiftKey) {
+                                            event.preventDefault();
+                                            void handleConfirmCreateTask();
+                                        }
+                                    } })] }), _jsxs(DialogFooter, { className: "px-6 pt-0 pb-6", children: [_jsx(Button, { variant: "outline", onClick: () => setIsCreateTaskDialogOpen(false), disabled: creatingTask, "data-testid": "project-template-create-task-cancel-button", children: "Cancel" }), _jsx(Button, { onClick: () => void handleConfirmCreateTask(), disabled: creatingTask || !newTaskTitle.trim(), "data-testid": "project-template-create-task-submit-button", children: creatingTask
+                                        ? "Creating..."
+                                        : newTaskDependencySourceId
+                                            ? "Create Dependent Task"
+                                            : "Create Task" })] })] }) }), _jsx(Dialog, { open: isAddChildTaskDialogOpen, onOpenChange: setIsAddChildTaskDialogOpen, children: _jsxs(DialogContent, { className: "max-w-md", "data-testid": "project-template-create-child-task-dialog", children: [_jsx(StyledDialogTitle, { icon: _jsx(Plus, { strokeWidth: 1.5 }), title: "Add Child Task", subtitle: "Creates a new task that depends on the current task." }), _jsxs("div", { className: "grid gap-2 p-6", children: [_jsx(Label, { className: "text-xs", htmlFor: "project-template-new-child-task-title", children: "Task title" }), _jsx(Input, { id: "project-template-new-child-task-title", value: newChildTaskTitle, onChange: (event) => setNewChildTaskTitle(event.target.value), placeholder: "e.g. Review content", className: "text-xs md:text-xs", autoFocus: true, onKeyDown: (event) => {
+                                        if (event.key === "Enter" && !event.shiftKey) {
+                                            event.preventDefault();
+                                            void handleConfirmCreateChildTask();
+                                        }
+                                    } })] }), _jsxs(DialogFooter, { className: "px-6 pt-0 pb-6", children: [_jsx(Button, { variant: "outline", onClick: () => setIsAddChildTaskDialogOpen(false), disabled: creatingChildTask, "data-testid": "project-template-create-child-task-cancel-button", children: "Cancel" }), _jsx(Button, { onClick: () => void handleConfirmCreateChildTask(), disabled: creatingChildTask || !newChildTaskTitle.trim(), "data-testid": "project-template-create-child-task-submit-button", children: creatingChildTask ? "Creating..." : "Create Task" })] })] }) })] }));
+}
+export default ProjectTemplatesPanel;
+//# sourceMappingURL=ProjectTemplatesPanel.js.map