@parhelia/core 0.1.12802 → 0.1.12836

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

@@ -1,34 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
-import { ChevronLeft, CopyPlus, CornerDownRight, GitBranch, Link2, Plus, LayoutTemplate, RefreshCw, Settings2, Shield, Trash2, X, } from "lucide-react";
+import { ChevronLeft, CopyPlus, CornerDownRight, GitBranch, LayoutTemplate, Link2, Plus, RefreshCw, Settings2, Shield, X, } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState, Suspense, lazy, } from "react";
 import { toast } from "sonner";
+import { Badge } from "../../../components/ui/badge";
 import { Button } from "../../../components/ui/button";
+import { Card } from "../../../components/ui/card";
+import { DeleteIcon } from "../../../components/ui/delete-icon";
 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 { Popover, PopoverContent, PopoverTrigger, } from "../../../components/ui/popover";
 import { Select } from "../../../components/ui/select";
+import { StyledDialogTitle } from "../../../components/ui/styled-dialog-title";
 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 { Textarea } from "../../../components/ui/textarea";
+import { cn } from "../../../lib/utils";
 import { TaskAssigneePicker } from "../../../task-board/components/TaskAssigneePicker";
-import { deleteProjectTemplate, getProjectTemplates, getProjectTemplateAgent, resetProjectTemplateAgent, upsertProjectTemplate, } from "../../../task-board/services/taskService";
-import { getAiProfilesErrorMessage, loadAiProfiles, } from "../../services/aiService";
-import { updateAgentContext } from "../../services/agentService";
+import { deleteProjectTemplate, getProjectTemplateAgent, getProjectTemplates, resetProjectTemplateAgent, upsertProjectTemplate, } from "../../../task-board/services/taskService";
+const DependencyGraphView = lazy(() => import("../../../task-board/views/DependencyGraphView").then((module) => ({
+    default: module.DependencyGraphView,
+})));
 import { useEditContext } from "../../client/editContext";
+import { useSearchParams } from "../../client/navigation";
+import { updateAgentContext } from "../../services/agentService";
+import { getAiProfilesErrorMessage, loadAiProfiles, } from "../../services/aiService";
 import { localStorageService } from "../../services/localStorageService";
 import { ItemNameDialog, } from "../../ui/ItemNameDialogNew";
 import { SimpleTabs } from "../../ui/SimpleTabs";
+import { Splitter } from "../../ui/Splitter";
 import { isTypingEventTarget } from "../../utils/keyboardNavigation";
-import { cn } from "../../../lib/utils";
+import { useRequiredSettingsBreadcrumbItems, useRequiredSettingsHeaderActions, useRequiredSettingsMainContentRef, } from "../SettingsHeaderActionsContext";
 import { AgentProfileEditorPanel, } from "./AgentProfileEditorPanel";
 import { ProjectTemplateAgentPanel } from "./ProjectTemplateAgentPanel";
 import { ProjectTemplateSelector } from "./ProjectTemplateSelector";
-import { useRequiredSettingsBreadcrumbExtra, useRequiredSettingsHeaderActions, useRequiredSettingsMainContentRef, } from "../SettingsHeaderActionsContext";
-import { useSearchParams } from "../../client/navigation";
+import { ProjectTemplateSelectorList } from "./ProjectTemplateSelectorList";
 // Query param for deep-linking the selected project template (settings reload).
 const SELECTED_PROJECT_TEMPLATE_QUERY_PARAM = "projectTemplateId";
 function measureOverlayBounds(element) {
@@ -429,7 +434,7 @@ export function ProjectTemplatesPanel() {
     const [forceExpandAgentPanelKey, setForceExpandAgentPanelKey] = useState(0);
     const settingsMainContentRef = useRequiredSettingsMainContentRef();
     const setSettingsHeaderActions = useRequiredSettingsHeaderActions();
-    const setSettingsBreadcrumbExtra = useRequiredSettingsBreadcrumbExtra();
+    const setSettingsBreadcrumbItems = useRequiredSettingsBreadcrumbItems();
     const autosaveTimeoutRef = useRef(null);
     const lastPersistedSignatureRef = useRef(null);
     const latestDraftSignatureRef = useRef(null);
@@ -526,12 +531,7 @@ export function ProjectTemplatesPanel() {
             (!draftTemplate || activeDetailTab !== "tasks" || isMobile)) {
             exitTaskEditorMaximizedRef.current();
         }
-    }, [
-        activeDetailTab,
-        draftTemplate,
-        isMobile,
-        isTaskEditorMaximized,
-    ]);
+    }, [activeDetailTab, draftTemplate, isMobile, isTaskEditorMaximized]);
     const projectTemplateEditorStyle = useMemo(() => {
         if (!isTaskEditorMaximized || !taskEditorOverlayBounds) {
             return undefined;
@@ -584,11 +584,8 @@ export function ProjectTemplatesPanel() {
             return;
         }
         const clonedTemplate = template ? cloneTemplate(template) : null;
-        const isSameTemplate = !!clonedTemplate &&
-            clonedTemplate.id === selectedTemplateIdRef.current;
-        const preferredTaskId = isSameTemplate
-            ? selectedTaskIdRef.current
-            : null;
+        const isSameTemplate = !!clonedTemplate && clonedTemplate.id === selectedTemplateIdRef.current;
+        const preferredTaskId = isSameTemplate ? selectedTaskIdRef.current : null;
         const persistedSignature = clonedTemplate && clonedTemplate.name.trim()
             ? JSON.stringify(buildUpsertTemplateRequest(clonedTemplate))
             : null;
@@ -645,9 +642,7 @@ export function ProjectTemplatesPanel() {
                 loadedTemplates.some((template) => template.id === preferredTemplateId);
             const nextTemplateId = preferredTemplateExists
                 ? preferredTemplateId
-                : preferredTemplateId
-                    ? null
-                    : loadedTemplates[0]?.id || null;
+                : null;
             const nextTemplate = loadedTemplates.find((template) => template.id === nextTemplateId);
             if (options?.preserveDraftIfDirty &&
                 (savingRef.current || isDirtyRef.current)) {
@@ -676,27 +671,17 @@ export function ProjectTemplatesPanel() {
         const fromUrl = readProjectTemplateIdFromUrl(searchParams);
         if (fromUrl === selectedTemplateId)
             return;
-        if (!fromUrl && selectedTemplateId) {
-            editContext?.updateUrl({
-                [SELECTED_PROJECT_TEMPLATE_QUERY_PARAM]: selectedTemplateId,
-            });
+        if (!fromUrl) {
+            // Overview navigation clears the selection explicitly; don't deselect the
+            // current draft just because unrelated query params changed.
             return;
         }
-        const match = fromUrl
-            ? templates.find((template) => template.id === fromUrl)
-            : null;
-        if (fromUrl && !match) {
+        const match = templates.find((template) => template.id === fromUrl);
+        if (!match) {
             return;
         }
-        selectTemplate(match ?? null);
-    }, [
-        editContext,
-        searchParams,
-        selectTemplate,
-        selectedTemplateId,
-        state,
-        templates,
-    ]);
+        selectTemplate(match);
+    }, [searchParams, selectTemplate, selectedTemplateId, state, templates]);
     useEffect(() => {
         if (!selectedTemplateId)
             return;
@@ -750,12 +735,12 @@ export function ProjectTemplatesPanel() {
     }, [dependencyTasks, selectedDependencyId]);
     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 whitespace-nowrap text-red-700", children: "Save failed" }));
+            return (_jsx("span", { "data-testid": "project-template-save-status", "data-state": "error", className: "rounded-badge badge-pad-sm bg-feedback-red-light text-2xs text-feedback-red inline-flex min-w-[84px] justify-center whitespace-nowrap", 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 whitespace-nowrap text-amber-700", children: "Saving..." }));
+            return (_jsx("span", { "data-testid": "project-template-save-status", "data-state": "saving", className: "rounded-badge badge-pad-sm bg-feedback-orange-light text-2xs text-feedback-orange inline-flex min-w-[84px] justify-center whitespace-nowrap", children: "Saving..." }));
         }
-        return (_jsx("span", { "aria-hidden": "true", "data-testid": "project-template-save-status", "data-state": "saved", className: "pointer-events-none inline-flex min-w-[84px] justify-center rounded px-1.5 whitespace-nowrap opacity-0 select-none", children: "Saving..." }));
+        return (_jsx("span", { "aria-hidden": "true", "data-testid": "project-template-save-status", "data-state": "saved", className: "rounded-badge badge-pad-sm pointer-events-none inline-flex min-w-[84px] justify-center whitespace-nowrap opacity-0 select-none", children: "Saving..." }));
     }, [isDirty, saveError, saving]);
     const graphTasks = useMemo(() => buildTemplateTaskItems(draftTemplate, aiProfilesById), [aiProfilesById, draftTemplate]);
     const graphDependencies = useMemo(() => buildTemplateDependencies(draftTemplate), [draftTemplate]);
@@ -1069,6 +1054,20 @@ export function ProjectTemplatesPanel() {
         }
         return persistTemplate(currentSaveRequest, currentSaveSignature, options);
     }, [currentSaveRequest, currentSaveSignature, draftTemplate, persistTemplate]);
+    const handleNavigateToOverview = useCallback(async () => {
+        const canContinue = await flushPendingSave({ showErrorToast: true });
+        if (!canContinue) {
+            return;
+        }
+        setEditingAgentProfile(null);
+        selectTemplate(null);
+        editContext?.updateUrl({
+            [SELECTED_PROJECT_TEMPLATE_QUERY_PARAM]: undefined,
+        });
+        if (isMobile) {
+            setMobileView("detail");
+        }
+    }, [editContext, flushPendingSave, isMobile, selectTemplate]);
     useEffect(() => {
         if (autosaveTimeoutRef.current !== null) {
             window.clearTimeout(autosaveTimeoutRef.current);
@@ -1700,12 +1699,30 @@ export function ProjectTemplatesPanel() {
         state,
         templates,
     ]);
-    const breadcrumbTemplateSelector = useMemo(() => (_jsx("div", { className: "min-w-0 max-w-[min(28rem,calc(100vw-12rem))] md:max-w-[32rem]", children: templateSelector })), [templateSelector]);
+    const breadcrumbDraftName = draftTemplate
+        ? draftTemplate.name.trim() || "Untitled template"
+        : null;
+    const breadcrumbTaskCount = draftTemplate?.taskTemplates.length ?? 0;
+    const breadcrumbItems = useMemo(() => breadcrumbDraftName
+        ? [
+            {
+                title: "Project Templates",
+                subtitle: "Create project templates",
+                onClick: () => {
+                    void handleNavigateToOverview();
+                },
+            },
+            {
+                title: breadcrumbDraftName,
+                subtitle: `${breadcrumbTaskCount} task templates`,
+            },
+        ]
+        : null, [breadcrumbDraftName, breadcrumbTaskCount, handleNavigateToOverview]);
     const desktopHeaderActions = useMemo(() => {
         if (isMobile)
             return null;
         const showDelete = draftTemplate && !draftTemplate.isSystem;
-        return (_jsxs("div", { className: "flex items-center gap-2", children: [headerStatusBadge, _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"] }), showDelete ? (_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"] })) : null] }));
+        return (_jsxs("div", { className: "flex items-center gap-2", children: [headerStatusBadge, _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"] }), showDelete ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => handleDeleteTemplate(), disabled: deleting, "data-testid": "project-template-delete-button", children: [_jsx(DeleteIcon, { size: "lg" }), deleting ? "Deleting..." : "Delete"] })) : null] }));
     }, [
         deleting,
         draftTemplate,
@@ -1715,13 +1732,13 @@ export function ProjectTemplatesPanel() {
         isMobile,
     ]);
     useEffect(() => {
-        if (!setSettingsBreadcrumbExtra)
+        if (!setSettingsBreadcrumbItems)
             return;
-        setSettingsBreadcrumbExtra(breadcrumbTemplateSelector);
+        setSettingsBreadcrumbItems(breadcrumbItems);
         return () => {
-            setSettingsBreadcrumbExtra(null);
+            setSettingsBreadcrumbItems(null);
         };
-    }, [breadcrumbTemplateSelector, setSettingsBreadcrumbExtra]);
+    }, [breadcrumbItems, setSettingsBreadcrumbItems]);
     useEffect(() => {
         if (!setSettingsHeaderActions)
             return;
@@ -1734,22 +1751,22 @@ export function ProjectTemplatesPanel() {
         if (!draftTemplate) {
             return null;
         }
-        const graphView = (_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: 160, miniMapHeight: 120, showMiniMap: !isMobile, isMaximized: !isMobile && isTaskEditorMaximized, onToggleMaximized: !isMobile ? handleToggleTaskEditorMaximized : undefined, orientation: "horizontal", showOrientationToggle: true, autoLayoutStrategy: "hierarchy", savedLayout: draftTemplate.graphLayout, selectedTaskId: selectedTaskId, selectedDependencyId: selectedDependencyId, onSelectTask: handleSelectTask, onSelectDependency: handleSelectDependencyFromGraph, onClearDependencySelection: handleClearDependencySelection, 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;
-                } }) }));
-        const taskPane = (_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 pt-4 pb-3", children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "text-xs font-semibold text-gray-900", "data-testid": "project-template-selected-task-title", children: selectedTask.title || "Untitled Task" }), selectedTask.taskType === "DecisionPoint" ? (_jsx(Badge, { variant: "outline", className: "border-violet-200 bg-violet-50 text-[10px] text-violet-700 uppercase", children: "Decision Point" })) : null, selectedTask.disabled ? (_jsx(Badge, { variant: "outline", className: "text-[10px] uppercase", children: "Disabled" })) : null] }), _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 pt-3 pb-4", 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", htmlFor: "project-template-task-title-input", children: "Task title" }), _jsx(Input, { id: "project-template-task-title-input", value: selectedTask.title, onChange: (event) => updateSelectedTask((currentTask) => ({
+        const graphView = (_jsx("div", { className: "bg-neutral-grey-5/40 h-full min-h-0 overflow-hidden", "data-testid": "project-template-graph", children: _jsx(Suspense, { fallback: null, children: _jsx(DependencyGraphView, { projectId: draftTemplate.id, layoutKey: `project-template:${draftTemplate.id}`, tasks: graphTasks, dependencies: graphDependencies, miniMapWidth: 160, miniMapHeight: 120, showMiniMap: !isMobile, isMaximized: !isMobile && isTaskEditorMaximized, onToggleMaximized: !isMobile ? handleToggleTaskEditorMaximized : undefined, orientation: "horizontal", showOrientationToggle: true, autoLayoutStrategy: "hierarchy", savedLayout: draftTemplate.graphLayout, selectedTaskId: selectedTaskId, selectedDependencyId: selectedDependencyId, onSelectTask: handleSelectTask, onSelectDependency: handleSelectDependencyFromGraph, onClearDependencySelection: handleClearDependencySelection, 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;
+                    } }) }) }));
+        const taskPane = (_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: "border-border-default bg-neutral-grey-5 text-neutral-grey-50 rounded-lg border border-dashed p-6 text-center text-xs", children: "Select a task node to edit its details." }) })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "border-border-default shrink-0 border-b bg-white px-4 pt-4 pb-3", children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "text-neutral-grey-100 text-xs font-semibold", "data-testid": "project-template-selected-task-title", children: selectedTask.title || "Untitled Task" }), selectedTask.taskType === "DecisionPoint" ? (_jsx(Badge, { variant: "outline", className: "border-highlight-100 bg-highlight-10 text-2xs text-highlight-100", children: "Decision Point" })) : null, selectedTask.disabled ? (_jsx(Badge, { variant: "outline", className: "text-2xs", children: "Disabled" })) : null] }), _jsx("div", { className: "text-neutral-grey-50 text-xs", children: "Configure task details, assignment, and dependencies." })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: handleDeleteSelectedTask, "data-testid": "project-template-remove-task-button", children: [_jsx(DeleteIcon, { size: "lg" }), "Remove Task"] })] }) }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-4 pt-3 pb-4", 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", htmlFor: "project-template-task-title-input", children: "Task title" }), _jsx(Input, { id: "project-template-task-title-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: "Description" }), _jsx(Textarea, { className: "text-xs", value: selectedTask.description ?? "", onChange: (event) => updateSelectedTask((currentTask) => ({
@@ -1771,18 +1788,18 @@ export function ProjectTemplatesPanel() {
                                                     })), options: DECISION_MODE_OPTIONS, "data-testid": "project-template-task-decision-mode-select" })] })) : null, _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" })] }), selectedTask.taskType === "DecisionPoint" ? (_jsx("div", { className: "grid gap-1.5 md:col-span-2", children: _jsx("div", { className: "rounded-md border border-violet-100 bg-violet-50 px-3 py-2 text-[11px] leading-snug text-violet-800", children: "Direct dependents of this task become selectable option roots when the project is created. Their descendants are materialized only after the Decision Point is resolved at runtime." }) })) : null, _jsxs("div", { className: "grid gap-1.5 md:col-span-2", children: [_jsx(Label, { className: "text-xs", children: "Default assignee" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(TaskAssigneePicker, { projectTemplateId: draftTemplate.id, assigneeType: selectedTask.assigneeType ?? null, value: selectedTask.assigneeId ?? null, displayValue: selectedTaskAssigneeDisplayValue, onChange: (next) => updateSelectedTask((currentTask) => ({
+                                                    })), options: PRIORITY_OPTIONS, "data-testid": "project-template-task-priority-select" })] }), selectedTask.taskType === "DecisionPoint" ? (_jsx("div", { className: "grid gap-1.5 md:col-span-2", children: _jsx("div", { className: "border-highlight-100 bg-highlight-10 text-highlight-100 rounded-md border px-3 py-2 text-[11px] leading-snug", children: "Direct dependents of this task become selectable option roots when the project is created. Their descendants are materialized only after the Decision Point is resolved at runtime." }) })) : null, _jsxs("div", { className: "grid gap-1.5 md:col-span-2", children: [_jsx(Label, { className: "text-xs", children: "Default assignee" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(TaskAssigneePicker, { projectTemplateId: draftTemplate.id, assigneeType: selectedTask.assigneeType ?? null, value: selectedTask.assigneeId ?? null, displayValue: selectedTaskAssigneeDisplayValue, onChange: (next) => updateSelectedTask((currentTask) => ({
                                                                     ...currentTask,
                                                                     assigneeType: next?.assigneeType ?? null,
                                                                     assigneeId: next?.assigneeId ?? null,
                                                                     agentProfileId: next?.assigneeType === "Agent"
                                                                         ? next.assigneeId
                                                                         : null,
-                                                                })), placeholder: "Assign user or agent", buttonClassName: "h-[27px] w-full justify-between rounded-md bg-gray-5 text-xs", buttonTestId: "project-template-task-assignee-picker" }) }), selectedTask.assigneeType === "Agent" ? (_jsxs(Button, { type: "button", size: "sm", variant: "outline", className: "h-[27px] shrink-0 gap-1 px-2 text-xs", onClick: () => void handleEditAssignedAgentProfile(), disabled: !selectedAgentProfileId, "data-testid": "project-template-task-edit-agent-profile-button", children: [_jsx(Settings2, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }), "Edit Profile"] })) : null] }), profilesError ? (_jsx("div", { className: "text-xs text-amber-700", children: profilesError })) : 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
+                                                                })), placeholder: "Assign user or agent", buttonClassName: "h-[27px] w-full justify-between rounded-md bg-neutral-grey-5 text-xs", buttonTestId: "project-template-task-assignee-picker" }) }), selectedTask.assigneeType === "Agent" ? (_jsxs(Button, { type: "button", size: "sm", variant: "outline", className: "h-[27px] shrink-0 gap-1 px-2 text-xs", onClick: () => void handleEditAssignedAgentProfile(), disabled: !selectedAgentProfileId, "data-testid": "project-template-task-edit-agent-profile-button", children: [_jsx(Settings2, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }), "Edit Profile"] })) : null] }), profilesError ? (_jsx("div", { className: "text-feedback-orange text-xs", children: profilesError })) : null] })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "border-border-default bg-neutral-grey-5 rounded-lg border 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: "text-neutral-grey-100 flex items-center gap-2 text-xs font-medium", children: [_jsx(Shield, { className: "text-neutral-grey-50 h-4 w-4", 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-border-default text-neutral-grey-100 border-b px-3 py-2 text-xs font-medium", children: "Depends on" }), _jsx("div", { className: "max-h-56 overflow-y-auto p-1", children: dependencyAddCandidates.length === 0 ? (_jsx("div", { className: "text-neutral-grey-50 px-2 py-3 text-center text-xs", children: "All other tasks are already linked." })) : (dependencyAddCandidates.map((task) => (_jsxs("button", { type: "button", className: "hover:bg-neutral-grey-5 flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-xs", onClick: () => handleAddDependency(task.id), "data-testid": `project-template-dependency-option-${task.id}`, children: [_jsx(Link2, { className: "text-neutral-grey-50 h-3.5 w-3.5 shrink-0", strokeWidth: 1.5 }), _jsx("span", { className: "text-neutral-grey-100 min-w-0 truncate font-medium", children: task.title || "Untitled Task" })] }, task.id)))) })] })] })] }), _jsx("p", { className: "text-neutral-grey-50 mb-2 text-[11px] leading-snug", children: "This task must wait for these tasks to finish first." }), dependencyTasks.length === 0 ? (_jsx("div", { className: "text-neutral-grey-50 text-xs", 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", { tabIndex: 0, className: cn("flex items-center justify-between gap-2 rounded-md border bg-white px-3 py-2 text-xs transition-colors outline-none", selectedDependencyId === task.id
-                                                            ? "border-amber-300 bg-amber-50 ring-1 ring-amber-200"
-                                                            : "border-gray-200"), "aria-selected": selectedDependencyId === task.id, onClick: () => {
+                                                            ? "border-feedback-orange bg-feedback-orange-light ring-feedback-orange ring-1"
+                                                            : "border-border-default"), "aria-selected": selectedDependencyId === task.id, onClick: () => {
                                                             selectedDependencyIdRef.current = task.id;
                                                             setSelectedDependencyId(task.id);
                                                         }, onFocus: () => {
@@ -1794,11 +1811,11 @@ export function ProjectTemplatesPanel() {
                                                             event.preventDefault();
                                                             event.stopPropagation();
                                                             handleRemoveDependency(task.id);
-                                                        }, "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))) }))] })] })] }) })] })) }));
+                                                        }, "data-testid": `project-template-dependency-row-${task.id}`, children: [_jsx("span", { className: "text-neutral-grey-100 min-w-0 truncate font-medium", children: task.title || "Untitled Task" }), _jsx("button", { type: "button", className: "text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-100 shrink-0 rounded p-0.5", "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: "border-border-default bg-neutral-grey-5 rounded-lg border 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: "text-neutral-grey-100 flex items-center gap-2 text-xs font-medium", children: [_jsx(CornerDownRight, { className: "text-neutral-grey-50 h-4 w-4", 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: "text-neutral-grey-50 mb-2 text-[11px] leading-snug", children: "Tasks that run after this one (they depend on this task)." }), childTaskTemplates.length === 0 ? (_jsx("div", { className: "text-neutral-grey-50 text-xs", children: "No child tasks yet. Use + to add one." })) : (_jsx("ul", { className: "space-y-1.5", children: childTaskTemplates.map((task) => (_jsxs("li", { className: "border-border-default flex items-center justify-between gap-2 rounded-md border bg-white px-3 py-2 text-xs", "data-testid": `project-template-child-task-row-${task.id}`, children: [_jsx("span", { className: "text-neutral-grey-100 min-w-0 truncate font-medium", children: task.title || "Untitled Task" }), _jsx("button", { type: "button", className: "text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-100 shrink-0 rounded p-0.5", "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))) }))] })] })] }) })] })) }));
         if (isMobile) {
-            return (_jsxs("div", { className: "flex shrink-0 flex-col border-b border-gray-100", children: [_jsx("div", { className: "h-[300px] shrink-0 overflow-hidden border-b border-gray-100", children: graphView }), taskPane] }));
+            return (_jsxs("div", { className: "border-border-default flex shrink-0 flex-col border-b", children: [_jsx("div", { className: "border-border-default h-[300px] shrink-0 overflow-hidden border-b", children: graphView }), taskPane] }));
         }
-        return (_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: [
+        return (_jsx("div", { className: "border-border-default min-h-[360px] flex-1 overflow-hidden border-b", children: _jsx(Splitter, { direction: "vertical", localStorageKey: "settings-project-template-graph-task-splitter-v1", className: "h-full", panels: [
                     {
                         name: "project-template-graph",
                         defaultSize: 400,
@@ -1813,7 +1830,7 @@ export function ProjectTemplatesPanel() {
                     },
                 ] }) }));
     };
-    const detailContent = (_jsxs("div", { className: "flex h-full flex-col bg-gray-50/40", "data-testid": "project-template-detail-pane", children: [isMobile && draftTemplate && !draftTemplate.isSystem ? (_jsx("div", { className: "flex items-center justify-end border-b border-gray-200 bg-white px-5 py-2", "data-testid": "project-template-detail-pane-header", children: _jsx("div", { className: "flex shrink-0 items-center gap-1.5 self-center", children: _jsx(Button, { variant: "outline", size: "icon", className: "h-9 w-9 shrink-0", onClick: () => handleDeleteTemplate(), disabled: deleting, "aria-label": deleting ? "Deleting template" : "Delete template", title: deleting ? "Deleting…" : "Delete template", "data-testid": "project-template-delete-button", children: deleting ? (_jsx(RefreshCw, { className: "h-4 w-4 animate-spin", strokeWidth: 1.5 })) : (_jsx(Trash2, { className: "h-4 w-4", strokeWidth: 1.5 })) }) }) })) : null, draftTemplate ? ((() => {
+    const detailContent = (_jsxs("div", { className: "bg-neutral-grey-5/40 flex h-full flex-col", "data-testid": "project-template-detail-pane", children: [isMobile && draftTemplate && !draftTemplate.isSystem ? (_jsxs("div", { className: "border-border-default flex min-w-0 items-center gap-3 border-b bg-white px-5 py-2", "data-testid": "project-template-detail-pane-header", children: [_jsx("div", { className: "min-w-0 flex-1", children: templateSelector }), _jsx("div", { className: "flex shrink-0 items-center gap-1.5 self-center", children: _jsx(Button, { variant: "outline", size: "icon", className: "h-9 w-9 shrink-0", onClick: () => handleDeleteTemplate(), disabled: deleting, "aria-label": deleting ? "Deleting template" : "Delete template", title: deleting ? "Deleting…" : "Delete template", "data-testid": "project-template-delete-button", children: deleting ? (_jsx(RefreshCw, { className: "h-4 w-4 animate-spin", strokeWidth: 1.5 })) : (_jsx(DeleteIcon, { size: "lg" })) }) })] })) : null, draftTemplate ? ((() => {
                 const detailTabs = [
                     {
                         id: "project-template-tab-basic-settings",
@@ -1839,23 +1856,25 @@ export function ProjectTemplatesPanel() {
                                         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) => ({
+                                    })), 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-neutral-grey-100 text-xs font-medium", children: "Disabled" }), _jsx("div", { className: "text-neutral-grey-50 mt-0.5 text-xs", 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) => ({
+                                    })), className: "data-[state=checked]:bg-feedback-orange dark:data-[state=checked]:bg-feedback-orange data-[state=checked]:shadow-inner", "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-neutral-grey-100 text-xs font-medium", children: "Hide from create dialog" }), _jsx("div", { className: "text-neutral-grey-50 mt-0.5 text-xs", 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) => ({
+                                    })), "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-neutral-grey-100 text-xs font-medium", children: "Open in wizard mode" }), _jsx("div", { className: "text-neutral-grey-50 mt-0.5 text-xs", 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" })] })] }));
                 const taskEditorContent = (_jsx("div", { className: "flex h-full min-h-0 flex-1 flex-col overflow-hidden", children: renderTemplateTaskEditorMain() }));
-                return (_jsxs("div", { className: cn("flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-y-contain md:overflow-hidden", isTaskEditorMaximized ? "overflow-hidden p-0" : "p-5"), children: [_jsx("div", { className: "flex shrink-0 flex-col gap-5 md:max-h-[50vh] md:min-h-0 md:overflow-y-auto md:overscroll-y-contain", 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: cn("flex min-h-0 flex-1 flex-col rounded-lg border border-gray-200 bg-white shadow-sm md:overflow-hidden", isTaskEditorMaximized && "overflow-hidden rounded-none shadow-xl"), "data-testid": "project-template-task-editor-shell", children: [_jsxs("div", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-gray-100 px-4 py-3", children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(SimpleTabs, { tabs: detailTabs, activeTab: activeDetailTab === "basic" ? 0 : 1, setActiveTab: (index) => setActiveDetailTab(index === 0 ? "basic" : "tasks"), hideContent: true, variant: "elegant", className: "w-full justify-start gap-6" }) }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void handleOpenCreateTaskDialog(), disabled: creatingTask, "data-testid": "project-template-add-task-button", className: activeDetailTab === "tasks"
+                return (_jsxs("div", { className: cn("flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-y-contain md:overflow-hidden", isTaskEditorMaximized ? "overflow-hidden p-0" : "p-5"), children: [_jsx("div", { className: "flex shrink-0 flex-col gap-5 md:max-h-[50vh] md:min-h-0 md:overflow-y-auto md:overscroll-y-contain", children: saveError && (_jsx("div", { className: "border-feedback-red bg-feedback-red-light text-feedback-red rounded border px-4 py-3 text-xs", children: saveError })) }), _jsxs("section", { className: cn("border-border-default flex min-h-0 flex-1 flex-col rounded-lg border bg-white md:overflow-hidden", isTaskEditorMaximized &&
+                                "overflow-hidden rounded-none shadow-xl"), "data-testid": "project-template-task-editor-shell", children: [_jsxs("div", { className: "border-border-default flex shrink-0 items-center justify-between gap-3 border-b px-4 py-3", children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(SimpleTabs, { tabs: detailTabs, activeTab: activeDetailTab === "basic" ? 0 : 1, setActiveTab: (index) => setActiveDetailTab(index === 0 ? "basic" : "tasks"), hideContent: true, className: "w-full justify-start gap-6" }) }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void handleOpenCreateTaskDialog(), disabled: creatingTask, "data-testid": "project-template-add-task-button", className: activeDetailTab === "tasks"
                                                 ? ""
                                                 : "pointer-events-none invisible", "aria-hidden": activeDetailTab !== "tasks", tabIndex: activeDetailTab === "tasks" ? undefined : -1, children: [_jsx(Plus, { className: "h-4 w-4", strokeWidth: 1.5 }), "Add Task"] })] }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: activeDetailTab === "basic"
                                         ? basicSettingsContent
                                         : taskEditorContent })] })] }));
-            })()) : (_jsx("div", { className: "flex min-h-0 flex-1 items-center justify-center p-5", 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 dropdown or create a new one to start editing." })] }) }))] }));
+            })()) : (_jsx("div", { className: "flex min-h-0 flex-1 items-center justify-center p-5", children: _jsxs("div", { className: "border-border-default max-w-sm rounded-lg border border-dashed bg-white p-8 text-center", children: [_jsx(GitBranch, { className: "text-neutral-grey-50 mx-auto mb-3 h-10 w-10", strokeWidth: 1.2 }), _jsx("h3", { className: "text-neutral-grey-100 text-xs font-semibold", children: "Select a project template" }), _jsx("p", { className: "text-neutral-grey-50 mt-1 text-xs", children: "Choose a template from the dropdown or create a new one to start editing." })] }) }))] }));
+    const overviewContent = (_jsx("div", { className: "flex h-full min-h-0 flex-col p-4", "data-testid": "project-template-overview", children: _jsx(Card, { icon: _jsx(GitBranch, { strokeWidth: 1, className: "h-5 w-5" }), title: "Project templates", description: "Select a template to edit its defaults and task graph.", noPadding: true, className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: _jsx("div", { className: "border-border-default flex min-h-0 flex-1 flex-col border-t", children: _jsx(ProjectTemplateSelectorList, { rootTestId: "project-template-overview-list", templates: templates, selectedTemplateId: selectedTemplateId, error: error, deleting: deleting, loading: state === "loading", onSelectTemplate: handleSelectTemplate, onDeleteTemplate: handleDeleteTemplate }) }) }) }));
     const agentPanelContent = (_jsx(ProjectTemplateAgentPanel, { templateName: draftTemplate?.name ?? null, agentId: templateAgentId, loading: templateAgentLoading, resetting: templateAgentResetting, error: templateAgentError, onStartOver: () => void handleResetTemplateAgent(), headerStart: isMobile ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "gap-1 px-2", onClick: handleMobileBackFromAgent, "data-testid": "project-template-mobile-back-from-agent", children: _jsx(ChevronLeft, { className: "h-5 w-5", strokeWidth: 1.5 }) })) : undefined }));
     const rightPanelContent = editingAgentProfile ? (_jsx(AgentProfileEditorPanel, { agent: editingAgentProfile, onClose: handleCloseEditingAgentProfile, actions: _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => void handleDuplicateAssignedAgentProfile(), disabled: !selectedAgentProfileId ||
                 !editContext ||
@@ -1881,6 +1900,9 @@ export function ProjectTemplatesPanel() {
     const forceCollapseLastPanelKey = forceCollapseAgentPanelKey > 0 ? forceCollapseAgentPanelKey : null;
     const forceExpandLastPanelKey = editingAgentProfile?.id ??
         (forceExpandAgentPanelKey > 0 ? forceExpandAgentPanelKey : null);
+    if (!draftTemplate) {
+        return overviewContent;
+    }
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn("h-full", isTaskEditorMaximized && "fixed overflow-hidden bg-white shadow-xl"), style: projectTemplateEditorStyle, "data-testid": "project-template-editor", onKeyDownCapture: handleProjectTemplateEditorKeyDownCapture, children: _jsx(Splitter, { panels: panels, localStorageKey: PROJECT_TEMPLATE_SPLITTER_STORAGE_KEY, direction: "horizontal", className: "h-full", forceCollapseLastPanelKey: forceCollapseLastPanelKey, forceExpandLastPanelKey: forceExpandLastPanelKey }) }), _jsx(Dialog, { open: isCreateTaskDialogOpen, onOpenChange: (open) => {
                     setIsCreateTaskDialogOpen(open);
                     if (!open) {