@parhelia/core 0.1.12902 → 0.1.12904

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

@@ -1,39 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-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 { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { ChevronLeft, CopyPlus, CornerDownRight, GitBranch, Link2, Plus, LayoutTemplate, RefreshCw, Settings2, Shield, Trash2, X, } from "lucide-react";
 import { toast } from "sonner";
-import { Badge } from "../../../components/ui/badge";
 import { Button } from "../../../components/ui/button";
-import { SettingsCard as Card } from "../SettingsCard";
-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 { 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 { Textarea } from "../../../components/ui/textarea";
-import { cn } from "../../../lib/utils";
+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 { TaskAssigneePicker } from "../../../task-board/components/TaskAssigneePicker";
-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 { 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 { 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 { useRequiredSettingsBreadcrumbItems, useRequiredSettingsHeaderActions, useRequiredSettingsMainContentRef, } from "../SettingsHeaderActionsContext";
+import { cn } from "../../../lib/utils";
 import { AgentProfileEditorPanel, } from "./AgentProfileEditorPanel";
 import { ProjectTemplateAgentPanel } from "./ProjectTemplateAgentPanel";
 import { ProjectTemplateSelector } from "./ProjectTemplateSelector";
-import { ProjectTemplateSelectorList } from "./ProjectTemplateSelectorList";
+import { useRequiredSettingsBreadcrumbExtra, useRequiredSettingsHeaderActions, useRequiredSettingsMainContentRef, } from "../SettingsHeaderActionsContext";
+import { useSearchParams } from "../../client/navigation";
 // Query param for deep-linking the selected project template (settings reload).
 const SELECTED_PROJECT_TEMPLATE_QUERY_PARAM = "projectTemplateId";
 function measureOverlayBounds(element) {
@@ -434,7 +429,7 @@ export function ProjectTemplatesPanel() {
     const [forceExpandAgentPanelKey, setForceExpandAgentPanelKey] = useState(0);
     const settingsMainContentRef = useRequiredSettingsMainContentRef();
     const setSettingsHeaderActions = useRequiredSettingsHeaderActions();
-    const setSettingsBreadcrumbItems = useRequiredSettingsBreadcrumbItems();
+    const setSettingsBreadcrumbExtra = useRequiredSettingsBreadcrumbExtra();
     const autosaveTimeoutRef = useRef(null);
     const lastPersistedSignatureRef = useRef(null);
     const latestDraftSignatureRef = useRef(null);
@@ -531,7 +526,12 @@ 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,8 +584,11 @@ 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;
@@ -617,14 +620,6 @@ export function ProjectTemplatesPanel() {
         setEditingAgentProfile(null);
         setMobileView("detail");
     }, []);
-    const handleHideTemplateAssistant = useCallback(() => {
-        setEditingAgentProfile(null);
-        if (isMobile) {
-            setMobileView("detail");
-            return;
-        }
-        setForceCollapseAgentPanelKey((value) => value + 1);
-    }, [isMobile]);
     useEffect(() => {
         if (!isMobile) {
             setMobileView("detail");
@@ -650,7 +645,9 @@ export function ProjectTemplatesPanel() {
                 loadedTemplates.some((template) => template.id === preferredTemplateId);
             const nextTemplateId = preferredTemplateExists
                 ? preferredTemplateId
-                : null;
+                : preferredTemplateId
+                    ? null
+                    : loadedTemplates[0]?.id || null;
             const nextTemplate = loadedTemplates.find((template) => template.id === nextTemplateId);
             if (options?.preserveDraftIfDirty &&
                 (savingRef.current || isDirtyRef.current)) {
@@ -679,17 +676,27 @@ export function ProjectTemplatesPanel() {
         const fromUrl = readProjectTemplateIdFromUrl(searchParams);
         if (fromUrl === selectedTemplateId)
             return;
-        if (!fromUrl) {
-            // Overview navigation clears the selection explicitly; don't deselect the
-            // current draft just because unrelated query params changed.
+        if (!fromUrl && selectedTemplateId) {
+            editContext?.updateUrl({
+                [SELECTED_PROJECT_TEMPLATE_QUERY_PARAM]: selectedTemplateId,
+            });
             return;
         }
-        const match = templates.find((template) => template.id === fromUrl);
-        if (!match) {
+        const match = fromUrl
+            ? templates.find((template) => template.id === fromUrl)
+            : null;
+        if (fromUrl && !match) {
             return;
         }
-        selectTemplate(match);
-    }, [searchParams, selectTemplate, selectedTemplateId, state, templates]);
+        selectTemplate(match ?? null);
+    }, [
+        editContext,
+        searchParams,
+        selectTemplate,
+        selectedTemplateId,
+        state,
+        templates,
+    ]);
     useEffect(() => {
         if (!selectedTemplateId)
             return;
@@ -743,12 +750,12 @@ export function ProjectTemplatesPanel() {
     }, [dependencyTasks, selectedDependencyId]);
     const headerStatusBadge = useMemo(() => {
         if (saveError) {
-            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" }));
+            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" }));
         }
         if (isDirty || 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", { "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", { "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..." }));
+        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..." }));
     }, [isDirty, saveError, saving]);
     const graphTasks = useMemo(() => buildTemplateTaskItems(draftTemplate, aiProfilesById), [aiProfilesById, draftTemplate]);
     const graphDependencies = useMemo(() => buildTemplateDependencies(draftTemplate), [draftTemplate]);
@@ -1062,20 +1069,6 @@ 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);
@@ -1707,30 +1700,12 @@ export function ProjectTemplatesPanel() {
         state,
         templates,
     ]);
-    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 desktopBreadcrumbSelector = useMemo(() => !isMobile ? (_jsx("div", { className: "max-w-[32rem] min-w-0", children: templateSelector })) : null, [isMobile, templateSelector]);
     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(DeleteIcon, { size: "lg" }), 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 new 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] }));
     }, [
         deleting,
         draftTemplate,
@@ -1740,13 +1715,13 @@ export function ProjectTemplatesPanel() {
         isMobile,
     ]);
     useEffect(() => {
-        if (!setSettingsBreadcrumbItems)
+        if (!setSettingsBreadcrumbExtra)
             return;
-        setSettingsBreadcrumbItems(breadcrumbItems);
+        setSettingsBreadcrumbExtra(desktopBreadcrumbSelector);
         return () => {
-            setSettingsBreadcrumbItems(null);
+            setSettingsBreadcrumbExtra(null);
         };
-    }, [breadcrumbItems, setSettingsBreadcrumbItems]);
+    }, [desktopBreadcrumbSelector, setSettingsBreadcrumbExtra]);
     useEffect(() => {
         if (!setSettingsHeaderActions)
             return;
@@ -1759,22 +1734,22 @@ export function ProjectTemplatesPanel() {
         if (!draftTemplate) {
             return null;
         }
-        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-medium", "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) => ({
+        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) => ({
                                                         ...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) => ({
@@ -1796,18 +1771,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: "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) => ({
+                                                    })), 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) => ({
                                                                     ...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-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
+                                                                })), 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
                                                         ? "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-feedback-orange bg-feedback-orange-light ring-feedback-orange ring-1"
-                                                            : "border-border-default"), "aria-selected": selectedDependencyId === task.id, onClick: () => {
+                                                            ? "border-amber-300 bg-amber-50 ring-1 ring-amber-200"
+                                                            : "border-gray-200"), "aria-selected": selectedDependencyId === task.id, onClick: () => {
                                                             selectedDependencyIdRef.current = task.id;
                                                             setSelectedDependencyId(task.id);
                                                         }, onFocus: () => {
@@ -1819,11 +1794,11 @@ export function ProjectTemplatesPanel() {
                                                             event.preventDefault();
                                                             event.stopPropagation();
                                                             handleRemoveDependency(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))) }))] })] })] }) })] })) }));
+                                                        }, "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))) }))] })] })] }) })] })) }));
         if (isMobile) {
-            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 (_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 (_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: [
+        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: [
                     {
                         name: "project-template-graph",
                         defaultSize: 400,
@@ -1838,7 +1813,11 @@ export function ProjectTemplatesPanel() {
                     },
                 ] }) }));
     };
-    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 detailContent = (_jsxs("div", { className: "flex h-full flex-col bg-gray-50/40", "data-testid": "project-template-detail-pane", children: [isMobile ? (_jsxs("div", { className: cn("gap-3 border-b border-gray-200 bg-white px-5 pt-1 pb-0.5", isMobile
+                    ? "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3"
+                    : "flex items-center justify-end"), "data-testid": "project-template-detail-pane-header", children: [isMobile ? _jsx("div", { className: "min-w-0", children: templateSelector }) : null, _jsx("div", { className: "flex shrink-0 items-center gap-1.5 self-center bg-white pl-1", children: draftTemplate &&
+                            !draftTemplate.isSystem &&
+                            (isMobile ? (_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) })] })) : null, draftTemplate ? ((() => {
                 const detailTabs = [
                     {
                         id: "project-template-tab-basic-settings",
@@ -1864,26 +1843,24 @@ 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-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) => ({
+                                    })), 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-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) => ({
+                                    })), 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-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) => ({
+                                    })), "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" })] })] }));
                 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: "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"
+                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"
                                                 ? ""
                                                 : "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: "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-medium", 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 px-10 pt-0 pb-10", "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(), onClose: handleHideTemplateAssistant, 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 }));
+            })()) : (_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." })] }) }))] }));
+    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 ||
                 duplicatingAgentProfile ||
@@ -1905,13 +1882,7 @@ export function ProjectTemplatesPanel() {
             hidden: isMobile && mobileView !== "agent",
         },
     ];
-    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 && "px-10 pt-0 pb-10"), 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) => {
+    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", forceExpandLastPanelKey: editingAgentProfile?.id ?? null }) }), _jsx(Dialog, { open: isCreateTaskDialogOpen, onOpenChange: (open) => {
                     setIsCreateTaskDialogOpen(open);
                     if (!open) {
                         setNewTaskDependencySourceId(null);