@parhelia/core 0.1.12907 → 0.1.12909

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

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GitBranch } from "lucide-react";
+import { useMemo, useState } from "react";
+import { Badge } from "../../../components/ui/badge";
+import { Button } from "../../../components/ui/button";
+import { DeleteIcon } from "../../../components/ui/delete-icon";
+import { SearchInput } from "../../../components/SearchInput";
+import { cn } from "../../../lib/utils";
+import { LoadingState } from "../../ui/LoadingState";
+import { ParheliaIconWhite } from "../../ui/ParheliaIconWhite";
+export function ProjectTemplateSelectorList({ templates, selectedTemplateId, error, deleting, loading, onSelectTemplate, onDeleteTemplate, onTemplateSelected, rootTestId, }) {
+    const [searchQuery, setSearchQuery] = useState("");
+    const filteredTemplates = useMemo(() => {
+        const query = searchQuery.trim().toLowerCase();
+        if (!query)
+            return templates;
+        return templates.filter((template) => {
+            const description = template.description?.toLowerCase() ?? "";
+            return (template.name.toLowerCase().includes(query) ||
+                description.includes(query) ||
+                template.taskTemplates.some((task) => task.title.toLowerCase().includes(query)));
+        });
+    }, [searchQuery, templates]);
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", "data-testid": rootTestId, children: [_jsxs("div", { className: "border-border-default border-b px-4 py-3", children: [_jsx(SearchInput, { placeholder: "Search templates...", value: searchQuery, onChange: setSearchQuery, inputClassName: "text-xs md:text-xs", testId: "project-template-search-input" }), error ? (_jsx("div", { className: "border-feedback-red bg-feedback-red-light text-feedback-red mt-2 rounded border p-2 text-xs whitespace-pre-wrap", children: error })) : null] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-3", children: loading && templates.length === 0 ? (_jsx(LoadingState, { "data-testid": "project-template-selector-loading", message: "Loading project templates...", className: "py-12", spinnerClassName: "text-neutral-grey-50", spinnerSize: "2xl", textClassName: "text-neutral-grey-50 text-xs" })) : filteredTemplates.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [_jsx(GitBranch, { className: "text-neutral-grey-50 mb-4 h-10 w-10", strokeWidth: 1.2 }), _jsx("p", { className: "text-neutral-grey-50 text-xs", children: searchQuery
+                                ? "No templates match your search"
+                                : "No project templates found" })] })) : (_jsx("div", { className: "divide-border-default divide-y", children: filteredTemplates.map((template) => {
+                        const isSelected = selectedTemplateId === template.id;
+                        return (_jsxs("div", { className: "group relative", children: [_jsx("button", { type: "button", onClick: async () => {
+                                        const didSelect = await onSelectTemplate(template);
+                                        if (didSelect) {
+                                            onTemplateSelected?.();
+                                        }
+                                    }, "data-testid": `project-template-list-item-${template.id}`, className: cn("w-full rounded-md border border-transparent px-4 py-3 pr-12 text-left transition-colors", isSelected
+                                        ? "border-feedback-blue/25 bg-feedback-blue-light/50"
+                                        : "hover:border-border-default hover:bg-neutral-grey-5"), children: _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 leading-tight", children: [template.isSystem ? (_jsx("span", { title: "System template", className: "inline-flex", "aria-label": "System template", children: _jsx(ParheliaIconWhite, { size: 14, className: "shrink-0 invert" }) })) : null, _jsx("span", { className: "text-neutral-grey-100 truncate text-sm font-medium", children: template.name }), template.disabled ? (_jsx(Badge, { variant: "secondary", size: "sm", children: "Disabled" })) : null, template.hideFromCreateDialog ? (_jsx(Badge, { variant: "secondary", size: "sm", children: "Hidden" })) : null, template.openInWizardMode ? (_jsx(Badge, { variant: "default", size: "sm", children: "Wizard" })) : null] }), template.description ? (_jsx("div", { className: "text-neutral-grey-50 mt-1 line-clamp-2 text-xs leading-snug", children: template.description })) : null] }) }), !template.isSystem ? (_jsx(Button, { type: "button", variant: "ghost", size: "iconXs", className: "text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-50 absolute top-3.5 right-3.5 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100", "data-testid": `project-template-card-delete-button-${template.id}`, "aria-label": `Delete ${template.name}`, disabled: deleting, onClick: (event) => {
+                                        event.preventDefault();
+                                        event.stopPropagation();
+                                        onDeleteTemplate(template);
+                                    }, children: _jsx(DeleteIcon, { size: "md" }) })) : null] }, template.id));
+                    }) })) })] }));
+}
+//# sourceMappingURL=ProjectTemplateSelectorList.js.map

package/dist/editor/settings/panels/ProjectTemplateSelectorList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectTemplateSelectorList.js","sourceRoot":"","sources":["../../../../src/editor/settings/panels/ProjectTemplateSelectorList.tsx"],"names":[],"mappings":"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"}

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 { 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 { 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;
@@ -620,6 +617,14 @@ 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");
@@ -645,9 +650,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 +679,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 +743,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 +1062,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 +1707,30 @@ export function ProjectTemplatesPanel() {
         state,
         templates,
     ]);
-    const desktopBreadcrumbSelector = useMemo(() => !isMobile ? (_jsx("div", { className: "max-w-[32rem] min-w-0", children: templateSelector })) : null, [isMobile, templateSelector]);
+    const breadcrumbDraftName = draftTemplate
+        ? draftTemplate.name.trim() || "Untitled template"
+        : null;
+    const breadcrumbTaskCount = draftTemplate?.taskTemplates.length ?? 0;
+    const breadcrumbItems = useMemo(() => breadcrumbDraftName
+        ? [
+            {
+                title: "Workflow 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 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] }));
+        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 +1740,13 @@ export function ProjectTemplatesPanel() {
         isMobile,
     ]);
     useEffect(() => {
-        if (!setSettingsBreadcrumbExtra)
+        if (!setSettingsBreadcrumbItems)
             return;
-        setSettingsBreadcrumbExtra(desktopBreadcrumbSelector);
+        setSettingsBreadcrumbItems(breadcrumbItems);
         return () => {
-            setSettingsBreadcrumbExtra(null);
+            setSettingsBreadcrumbItems(null);
         };
-    }, [desktopBreadcrumbSelector, setSettingsBreadcrumbExtra]);
+    }, [breadcrumbItems, setSettingsBreadcrumbItems]);
     useEffect(() => {
         if (!setSettingsHeaderActions)
             return;
@@ -1734,22 +1759,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-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) => ({
                                                         ...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 +1796,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 +1819,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,11 +1838,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 ? (_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 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",
@@ -1843,24 +1864,26 @@ 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 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." })] }) }))] }));
-    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 }));
+            })()) : (_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: "Workflow 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 }));
     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 ||
@@ -1882,7 +1905,13 @@ export function ProjectTemplatesPanel() {
             hidden: isMobile && mobileView !== "agent",
         },
     ];
-    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) => {
+    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) => {
                     setIsCreateTaskDialogOpen(open);
                     if (!open) {
                         setNewTaskDependencySourceId(null);