@parhelia/core 0.1.12774 → 0.1.12776

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

@@ -19,6 +19,7 @@ import { deleteProjectTemplate, getProjectTemplates, getProjectTemplateAgent, re
 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 { isTypingEventTarget } from "../../utils/keyboardNavigation";
@@ -26,10 +27,25 @@ import { cn } from "../../../lib/utils";
 import { AgentProfileEditorPanel, } from "./AgentProfileEditorPanel";
 import { ProjectTemplateAgentPanel } from "./ProjectTemplateAgentPanel";
 import { ProjectTemplateSelector } from "./ProjectTemplateSelector";
-import { useRequiredSettingsHeaderActions } from "../SettingsHeaderActionsContext";
+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) {
+    if (!element) {
+        return null;
+    }
+    const rect = element.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) {
+        return null;
+    }
+    return {
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height,
+    };
+}
 const PRIORITY_OPTIONS = [
     { value: "", label: "No priority" },
     { value: "Low", label: "Low" },
@@ -51,6 +67,7 @@ const PROJECT_TEMPLATE_ROOT_PATHS = [
     "/sitecore/system/parhelia/settings/project templates",
     "/sitecore/system/parhelia/system/project templates",
 ];
+const PROJECT_TEMPLATE_SPLITTER_STORAGE_KEY = "settings-project-templates-panel-splitter-v3";
 function isProjectTemplateItemChange(changes, selectedTemplateId) {
     const normalizedSelectedTemplateId = selectedTemplateId?.toLowerCase() ?? null;
     return changes.some((change) => {
@@ -198,7 +215,7 @@ function buildUpsertTemplateRequest(template) {
                 disabled: normalizedTask.disabled === true,
                 taskType: normalizedTask.taskType ?? "Task",
                 decisionMode: normalizedTask.taskType === "DecisionPoint"
-                    ? normalizedTask.decisionMode ?? "MultiSelect"
+                    ? (normalizedTask.decisionMode ?? "MultiSelect")
                     : null,
                 priority: normalizedTask.priority || null,
                 sortOrder: normalizedTask.sortOrder || index * 100,
@@ -406,7 +423,13 @@ export function ProjectTemplatesPanel() {
     const [duplicatingAgentProfile, setDuplicatingAgentProfile] = useState(false);
     const [mobileView, setMobileView] = useState("detail");
     const [editingAgentProfile, setEditingAgentProfile] = useState(null);
+    const [isTaskEditorMaximized, setIsTaskEditorMaximized] = useState(false);
+    const [taskEditorOverlayBounds, setTaskEditorOverlayBounds] = useState(null);
+    const [forceCollapseAgentPanelKey, setForceCollapseAgentPanelKey] = useState(0);
+    const [forceExpandAgentPanelKey, setForceExpandAgentPanelKey] = useState(0);
+    const settingsMainContentRef = useRequiredSettingsMainContentRef();
     const setSettingsHeaderActions = useRequiredSettingsHeaderActions();
+    const setSettingsBreadcrumbExtra = useRequiredSettingsBreadcrumbExtra();
     const autosaveTimeoutRef = useRef(null);
     const lastPersistedSignatureRef = useRef(null);
     const latestDraftSignatureRef = useRef(null);
@@ -420,6 +443,108 @@ export function ProjectTemplatesPanel() {
     const templateAgentLoadRunIdRef = useRef(0);
     const externalRefreshTimeoutRef = useRef(null);
     const pendingExternalRefreshRef = useRef(false);
+    const agentPanelWasExpandedBeforeMaximizeRef = useRef(null);
+    const exitTaskEditorMaximizedRef = useRef(() => { });
+    const wasAgentPanelCollapsed = () => {
+        const stored = localStorageService.getItem(PROJECT_TEMPLATE_SPLITTER_STORAGE_KEY);
+        return stored?.lastCollapsed ?? true;
+    };
+    const restoreAgentPanelAfterMaximize = () => {
+        if (agentPanelWasExpandedBeforeMaximizeRef.current === true) {
+            setForceExpandAgentPanelKey((value) => value + 1);
+        }
+        agentPanelWasExpandedBeforeMaximizeRef.current = null;
+    };
+    /* eslint-disable react-hooks/exhaustive-deps */
+    const exitTaskEditorMaximized = () => {
+        setIsTaskEditorMaximized(false);
+        restoreAgentPanelAfterMaximize();
+    };
+    exitTaskEditorMaximizedRef.current = exitTaskEditorMaximized;
+    const handleToggleTaskEditorMaximized = () => {
+        if (isTaskEditorMaximized) {
+            exitTaskEditorMaximized();
+            return;
+        }
+        const nextBounds = measureOverlayBounds(settingsMainContentRef.current);
+        if (!nextBounds) {
+            return;
+        }
+        const agentPanelCollapsed = wasAgentPanelCollapsed();
+        agentPanelWasExpandedBeforeMaximizeRef.current = !agentPanelCollapsed;
+        if (!agentPanelCollapsed) {
+            setForceCollapseAgentPanelKey((value) => value + 1);
+        }
+        setTaskEditorOverlayBounds(nextBounds);
+        setIsTaskEditorMaximized(true);
+    };
+    useEffect(() => {
+        if (!isTaskEditorMaximized) {
+            setTaskEditorOverlayBounds(null);
+            return;
+        }
+        const settingsMainContent = settingsMainContentRef.current;
+        const updateBounds = () => {
+            const nextBounds = measureOverlayBounds(settingsMainContentRef.current);
+            if (nextBounds) {
+                setTaskEditorOverlayBounds(nextBounds);
+            }
+        };
+        updateBounds();
+        if (typeof window === "undefined") {
+            return;
+        }
+        let frameId = null;
+        const scheduleUpdate = () => {
+            if (frameId != null) {
+                window.cancelAnimationFrame(frameId);
+            }
+            frameId = window.requestAnimationFrame(() => {
+                frameId = null;
+                updateBounds();
+            });
+        };
+        const resizeObserver = typeof ResizeObserver !== "undefined" && settingsMainContent
+            ? new ResizeObserver(scheduleUpdate)
+            : null;
+        if (resizeObserver && settingsMainContent) {
+            resizeObserver.observe(settingsMainContent);
+        }
+        window.addEventListener("resize", scheduleUpdate);
+        window.addEventListener("scroll", scheduleUpdate, true);
+        return () => {
+            if (frameId != null) {
+                window.cancelAnimationFrame(frameId);
+            }
+            resizeObserver?.disconnect();
+            window.removeEventListener("resize", scheduleUpdate);
+            window.removeEventListener("scroll", scheduleUpdate, true);
+        };
+    }, [isTaskEditorMaximized, settingsMainContentRef]);
+    useEffect(() => {
+        if (isTaskEditorMaximized &&
+            (!draftTemplate || activeDetailTab !== "tasks" || isMobile)) {
+            exitTaskEditorMaximizedRef.current();
+        }
+    }, [
+        activeDetailTab,
+        draftTemplate,
+        isMobile,
+        isTaskEditorMaximized,
+    ]);
+    const projectTemplateEditorStyle = useMemo(() => {
+        if (!isTaskEditorMaximized || !taskEditorOverlayBounds) {
+            return undefined;
+        }
+        return {
+            position: "fixed",
+            top: taskEditorOverlayBounds.top,
+            left: taskEditorOverlayBounds.left,
+            width: taskEditorOverlayBounds.width,
+            height: taskEditorOverlayBounds.height,
+            zIndex: 80,
+        };
+    }, [isTaskEditorMaximized, taskEditorOverlayBounds]);
     useEffect(() => {
         let cancelled = false;
         loadAiProfiles()
@@ -459,8 +584,9 @@ export function ProjectTemplatesPanel() {
             return;
         }
         const clonedTemplate = template ? cloneTemplate(template) : null;
-        const preferredTaskId = clonedTemplate?.id &&
-            clonedTemplate.id === selectedTemplateIdRef.current
+        const isSameTemplate = !!clonedTemplate &&
+            clonedTemplate.id === selectedTemplateIdRef.current;
+        const preferredTaskId = isSameTemplate
             ? selectedTaskIdRef.current
             : null;
         const persistedSignature = clonedTemplate && clonedTemplate.name.trim()
@@ -472,7 +598,12 @@ export function ProjectTemplatesPanel() {
         setDraftTemplate(clonedTemplate);
         setEditingAgentProfile(null);
         setSelectedTaskId(getSelectedTaskIdForTemplate(clonedTemplate, preferredTaskId));
-        setActiveDetailTab(clonedTemplate && !clonedTemplate.name.trim() ? "basic" : "tasks");
+        // Re-selecting the same template (e.g. via external refresh) must not
+        // clobber the user's current tab choice. Only reset the tab when the
+        // selected template actually changes.
+        if (!isSameTemplate) {
+            setActiveDetailTab(clonedTemplate && !clonedTemplate.name.trim() ? "basic" : "tasks");
+        }
         setIsDirty(false);
         setSaveError(null);
         lastPersistedSignatureRef.current = persistedSignature;
@@ -518,7 +649,8 @@ export function ProjectTemplatesPanel() {
                     ? null
                     : loadedTemplates[0]?.id || null;
             const nextTemplate = loadedTemplates.find((template) => template.id === nextTemplateId);
-            if (options?.preserveDraftIfDirty && (savingRef.current || isDirtyRef.current)) {
+            if (options?.preserveDraftIfDirty &&
+                (savingRef.current || isDirtyRef.current)) {
                 return;
             }
             selectTemplate(nextTemplate ?? null);
@@ -618,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: "inline-flex min-w-[84px] justify-center rounded bg-red-100 px-1.5 py-0.5 whitespace-nowrap text-red-700", children: "Save failed" }));
+            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: "inline-flex min-w-[84px] justify-center rounded bg-amber-100 px-1.5 py-0.5 whitespace-nowrap text-amber-700", children: "Saving..." }));
+            return (_jsx("span", { "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: "pointer-events-none inline-flex min-w-[84px] justify-center rounded px-1.5 py-0.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: "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]);
@@ -897,7 +1029,9 @@ export function ProjectTemplatesPanel() {
                 : null;
             draftTemplateRef.current = nextTemplate;
             latestDraftSignatureRef.current = nextSignature;
-            setTemplates((existingTemplates) => existingTemplates.map((template) => template.id === nextTemplate.id ? cloneTemplate(nextTemplate) : template));
+            setTemplates((existingTemplates) => existingTemplates.map((template) => template.id === nextTemplate.id
+                ? cloneTemplate(nextTemplate)
+                : template));
             return nextTemplate;
         });
         setIsDirty(true);
@@ -1527,6 +1661,12 @@ export function ProjectTemplatesPanel() {
         removeTaskTemplateById(selectedTaskId);
     }, [removeTaskTemplateById, selectedTaskId]);
     const handleProjectTemplateEditorKeyDownCapture = useCallback((event) => {
+        if (event.key === "Escape" && isTaskEditorMaximized) {
+            event.preventDefault();
+            event.stopPropagation();
+            exitTaskEditorMaximizedRef.current();
+            return;
+        }
         if (event.key !== "Delete")
             return;
         if (isTypingEventTarget(event.nativeEvent))
@@ -1546,36 +1686,55 @@ export function ProjectTemplatesPanel() {
     }, [
         handleDeleteSelectedTask,
         handleRemoveDependency,
+        isTaskEditorMaximized,
         selectedDependencyId,
         selectedTaskId,
     ]);
-    const templateSelector = useMemo(() => (_jsx(ProjectTemplateSelector, { templates: templates, selectedTemplate: draftTemplate, selectedTemplateId: selectedTemplateId, state: state, error: error, deleting: deleting, statusBadge: headerStatusBadge, onSelectTemplate: handleSelectTemplate, onCreateTemplate: handleCreateTemplate, onRefreshTemplates: handleRefreshTemplates, onDeleteTemplate: handleDeleteTemplate })), [
+    const templateSelector = useMemo(() => (_jsx(ProjectTemplateSelector, { templates: templates, selectedTemplate: draftTemplate, selectedTemplateId: selectedTemplateId, error: error, deleting: deleting, loading: state === "loading", onSelectTemplate: handleSelectTemplate, onDeleteTemplate: handleDeleteTemplate })), [
         deleting,
         draftTemplate,
         error,
-        handleCreateTemplate,
         handleDeleteTemplate,
-        handleRefreshTemplates,
         handleSelectTemplate,
-        headerStatusBadge,
         selectedTemplateId,
         state,
         templates,
     ]);
-    const desktopTemplateSelector = useMemo(() => !isMobile ? (_jsxs("div", { className: "flex w-full max-w-[40rem] items-center justify-end gap-2", children: [_jsx("div", { className: "min-w-0 flex-1 max-w-[32rem]", children: templateSelector }), draftTemplate && !draftTemplate.isSystem ? (_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] })) : null, [deleting, draftTemplate, handleDeleteTemplate, isMobile, templateSelector]);
+    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 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,
+        handleCreateTemplate,
+        handleDeleteTemplate,
+        headerStatusBadge,
+        isMobile,
+    ]);
+    useEffect(() => {
+        if (!setSettingsBreadcrumbExtra)
+            return;
+        setSettingsBreadcrumbExtra(desktopBreadcrumbSelector);
+        return () => {
+            setSettingsBreadcrumbExtra(null);
+        };
+    }, [desktopBreadcrumbSelector, setSettingsBreadcrumbExtra]);
     useEffect(() => {
         if (!setSettingsHeaderActions)
             return;
-        setSettingsHeaderActions(desktopTemplateSelector);
+        setSettingsHeaderActions(desktopHeaderActions);
         return () => {
             setSettingsHeaderActions(null);
         };
-    }, [desktopTemplateSelector, setSettingsHeaderActions]);
+    }, [desktopHeaderActions, setSettingsHeaderActions]);
     const renderTemplateTaskEditorMain = () => {
         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: 56, miniMapHeight: 42, showMiniMap: !isMobile, orientation: "horizontal", showOrientationToggle: true, autoLayoutStrategy: "hierarchy", savedLayout: draftTemplate.graphLayout, selectedTaskId: selectedTaskId, selectedDependencyId: selectedDependencyId, onSelectTask: handleSelectTask, onSelectDependency: handleSelectDependencyFromGraph, onClearDependencySelection: handleClearDependencySelection, onAddDependentTaskFromNode: (taskId) => {
+        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);
@@ -1590,7 +1749,7 @@ export function ProjectTemplatesPanel() {
                     }));
                     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] uppercase text-violet-700", 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 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) => ({
@@ -1598,9 +1757,11 @@ export function ProjectTemplatesPanel() {
                                                         description: event.target.value,
                                                     })), rows: 4, placeholder: "Describe what this task should accomplish", "data-testid": "project-template-task-description-input" })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { className: "text-xs", children: "Task type" }), _jsx(Select, { className: "text-xs", value: selectedTask.taskType ?? "Task", onValueChange: (value) => updateSelectedTask((currentTask) => ({
                                                         ...currentTask,
-                                                        taskType: value === "DecisionPoint" ? "DecisionPoint" : "Task",
+                                                        taskType: value === "DecisionPoint"
+                                                            ? "DecisionPoint"
+                                                            : "Task",
                                                         decisionMode: value === "DecisionPoint"
-                                                            ? currentTask.decisionMode ?? "MultiSelect"
+                                                            ? (currentTask.decisionMode ?? "MultiSelect")
                                                             : null,
                                                     })), options: TASK_TYPE_OPTIONS, "data-testid": "project-template-task-type-select" })] }), selectedTask.taskType === "DecisionPoint" ? (_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { className: "text-xs", children: "Decision mode" }), _jsx(Select, { className: "text-xs", value: selectedTask.decisionMode ?? "MultiSelect", onValueChange: (value) => updateSelectedTask((currentTask) => ({
                                                         ...currentTask,
@@ -1610,14 +1771,14 @@ 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: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx(Label, { className: "text-xs", children: "Default assignee" }), selectedTask.assigneeType === "Agent" ? (_jsxs(Button, { type: "button", size: "sm", variant: "outline", className: "h-7 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] }), _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" }), 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
+                                                    })), 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-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-amber-300 bg-amber-50 ring-1 ring-amber-200"
@@ -1693,7 +1854,9 @@ export function ProjectTemplatesPanel() {
                                         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: "flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-y-contain p-5 md:overflow-hidden", 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: "flex min-h-0 flex-1 flex-col rounded-lg border border-gray-200 bg-white shadow-sm md:overflow-hidden", 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" }) }), activeDetailTab === "tasks" ? (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => void handleOpenCreateTaskDialog(), disabled: creatingTask, "data-testid": "project-template-add-task-button", children: [_jsx(Plus, { className: "h-4 w-4", strokeWidth: 1.5 }), "Add Task"] })) : null] }), _jsx("div", { className: "flex flex-col min-h-0 flex-1 overflow-hidden", children: activeDetailTab === "basic"
+                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: "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." })] }) }))] }));
@@ -1719,7 +1882,7 @@ export function ProjectTemplatesPanel() {
             hidden: isMobile && mobileView !== "agent",
         },
     ];
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "h-full", "data-testid": "project-template-editor", onKeyDownCapture: handleProjectTemplateEditorKeyDownCapture, children: _jsx(Splitter, { panels: panels, localStorageKey: "settings-project-templates-panel-splitter-v3", direction: "horizontal", className: "h-full" }) }), _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);