@parhelia/core 0.1.12911 → 0.1.12917

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ChevronLeft, CopyPlus, CornerDownRight, GitBranch, LayoutTemplate, Link2, Plus, RefreshCw, Settings2, Shield, X, } from "lucide-react";
+import { ChevronLeft, CopyPlus, CornerDownRight, GitBranch, LayoutTemplate, Link2, PanelRightOpen, Plus, RefreshCw, Settings2, Shield, Trash2, 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 { CloseButton } from "../../../components/ui/close-button";
 import { DeleteIcon } from "../../../components/ui/delete-icon";
 import { Dialog, DialogContent, DialogFooter, } from "../../../components/ui/dialog";
 import { Input } from "../../../components/ui/input";
@@ -22,7 +22,7 @@ const DependencyGraphView = lazy(() => import("../../../task-board/views/Depende
 })));
 import { useEditContext } from "../../client/editContext";
 import { useSearchParams } from "../../client/navigation";
-import { updateAgentContext } from "../../services/agentService";
+import { updateAgentContext, } from "../../services/agentService";
 import { getAiProfilesErrorMessage, loadAiProfiles, } from "../../services/aiService";
 import { localStorageService } from "../../services/localStorageService";
 import { ItemNameDialog, } from "../../ui/ItemNameDialogNew";
@@ -94,6 +94,9 @@ function normalizeTaskTemplate(task) {
     const rawAssigneeId = task.assigneeId?.trim() || null;
     const rawAgentProfileId = task.agentProfileId?.trim() || null;
     const rawParentTaskId = task.parentTaskId?.trim() || null;
+    const dependencyIds = Array.from(new Set((task.dependencyIds ?? [])
+        .map((dependencyId) => dependencyId?.trim())
+        .filter((dependencyId) => !!dependencyId)));
     const disabled = task.disabled === true;
     const taskType = String(task.taskType ?? "").toLowerCase() === "decisionpoint"
         ? "DecisionPoint"
@@ -115,6 +118,7 @@ function normalizeTaskTemplate(task) {
             assigneeId: canonicalAgentId,
             agentProfileId: canonicalAgentId,
             parentTaskId: rawParentTaskId,
+            dependencyIds,
         };
     }
     if (assigneeType === "user" || assigneeType === "Role") {
@@ -127,6 +131,7 @@ function normalizeTaskTemplate(task) {
             assigneeId: rawAssigneeId,
             agentProfileId: null,
             parentTaskId: rawParentTaskId,
+            dependencyIds,
         };
     }
     return {
@@ -138,6 +143,7 @@ function normalizeTaskTemplate(task) {
         assigneeId: rawAssigneeId,
         agentProfileId: null,
         parentTaskId: rawParentTaskId,
+        dependencyIds,
     };
 }
 function normalizeGraphOrientation(orientation) {
@@ -147,7 +153,6 @@ function normalizeProjectTemplate(template) {
     return {
         ...template,
         hideFromCreateDialog: template.hideFromCreateDialog === true,
-        openInWizardMode: template.openInWizardMode === true,
         graphLayout: template.graphLayout
             ? {
                 ...template.graphLayout,
@@ -155,6 +160,10 @@ function normalizeProjectTemplate(template) {
             }
             : null,
         taskTemplates: (template.taskTemplates ?? []).map(normalizeTaskTemplate),
+        goalTemplates: (template.goalTemplates ?? []).map((goal) => ({
+            ...goal,
+            disabled: goal.disabled === true,
+        })),
     };
 }
 function createEmptyTemplate() {
@@ -164,11 +173,11 @@ function createEmptyTemplate() {
         description: "",
         disabled: false,
         hideFromCreateDialog: false,
-        openInWizardMode: false,
         isSystem: false,
         defaultCostLimit: null,
         graphLayout: null,
         taskTemplates: [],
+        goalTemplates: [],
     };
 }
 function createEmptyTaskTemplate(taskCount, title) {
@@ -188,6 +197,17 @@ function createEmptyTaskTemplate(taskCount, title) {
         dependencyIds: [],
     };
 }
+function createEmptyGoalDefinition(goalCount, title) {
+    return {
+        id: crypto.randomUUID(),
+        title: title?.trim() || `Goal ${goalCount + 1}`,
+        description: "",
+        disabled: false,
+        sortOrder: goalCount * 100,
+        defaultScopeJson: null,
+        dataShape: null,
+    };
+}
 function sortTemplates(templates) {
     return [...templates].sort((left, right) => left.name.localeCompare(right.name, undefined, { sensitivity: "base" }));
 }
@@ -195,10 +215,9 @@ function buildUpsertTemplateRequest(template) {
     return {
         projectTemplateId: template.id,
         name: template.name.trim(),
-        description: template.description?.trim() || null,
+        description: template.description || null,
         disabled: template.disabled === true,
         hideFromCreateDialog: template.hideFromCreateDialog === true,
-        openInWizardMode: template.openInWizardMode === true,
         defaultCostLimit: template.defaultCostLimit == null ||
             Number.isNaN(template.defaultCostLimit)
             ? null
@@ -216,7 +235,7 @@ function buildUpsertTemplateRequest(template) {
             return {
                 ...normalizedTask,
                 title: normalizedTask.title.trim(),
-                description: normalizedTask.description?.trim() || null,
+                description: normalizedTask.description || null,
                 disabled: normalizedTask.disabled === true,
                 taskType: normalizedTask.taskType ?? "Task",
                 decisionMode: normalizedTask.taskType === "DecisionPoint"
@@ -231,10 +250,35 @@ function buildUpsertTemplateRequest(template) {
                 dependencyIds: Array.from(new Set(normalizedTask.dependencyIds || [])),
             };
         }),
+        goalTemplates: (template.goalTemplates ?? []).map((goal, index) => ({
+            id: goal.id,
+            title: goal.title.trim(),
+            description: goal.description || null,
+            disabled: goal.disabled === true,
+            sortOrder: goal.sortOrder || index * 100,
+            defaultScopeJson: goal.defaultScopeJson?.trim() || null,
+            dataShape: goal.dataShape?.trim() || null,
+        })),
     };
 }
 function mergeTemplateResponseWithRequest(serverTemplate, request) {
     const requestedTaskById = new Map((request.taskTemplates ?? []).map((task) => [task.id, task]));
+    const requestedGoalById = new Map((request.goalTemplates ?? []).map((goal) => [goal.id, goal]));
+    // Server re-reads goals after BeginEdit/EndEdit; if a just-written goal is
+    // briefly missing from the response, keep it from the request so the next
+    // autosave does not delete it.
+    const serverGoals = serverTemplate.goalTemplates ?? [];
+    const serverGoalIds = new Set(serverGoals.map((goal) => goal.id));
+    const mergedGoalTemplates = [
+        ...serverGoals.map((goal) => {
+            const requested = requestedGoalById.get(goal.id);
+            return {
+                ...goal,
+                description: requested?.description ?? goal.description,
+            };
+        }),
+        ...(request.goalTemplates ?? []).filter((goal) => !serverGoalIds.has(goal.id)),
+    ];
     const mergedGraphLayout = request.graphLayout === undefined
         ? serverTemplate.graphLayout
         : request.graphLayout === null
@@ -247,7 +291,9 @@ function mergeTemplateResponseWithRequest(serverTemplate, request) {
             };
     return normalizeProjectTemplate({
         ...serverTemplate,
+        description: request.description ?? serverTemplate.description,
         graphLayout: mergedGraphLayout,
+        goalTemplates: mergedGoalTemplates,
         taskTemplates: (serverTemplate.taskTemplates ?? []).map((task) => {
             const requested = requestedTaskById.get(task.id);
             // Sitecore item-cache reads after BeginEdit/EndEdit can briefly omit
@@ -258,6 +304,7 @@ function mergeTemplateResponseWithRequest(serverTemplate, request) {
             const requestedDeps = requested?.dependencyIds ?? [];
             return {
                 ...task,
+                description: requested?.description ?? task.description,
                 parentTaskId: task.parentTaskId ?? requested?.parentTaskId ?? null,
                 dependencyIds: serverDeps.length === 0 && requestedDeps.length > 0
                     ? Array.from(new Set(requestedDeps))
@@ -266,6 +313,61 @@ function mergeTemplateResponseWithRequest(serverTemplate, request) {
         }),
     });
 }
+function getActiveDescriptionDraftField(selectedTaskId, selectedGoalId) {
+    if (typeof document === "undefined") {
+        return null;
+    }
+    const activeElement = document.activeElement;
+    if (!(activeElement instanceof HTMLElement)) {
+        return null;
+    }
+    switch (activeElement.dataset.testid) {
+        case "project-template-description-input":
+            return { kind: "template" };
+        case "project-template-task-description-input":
+            return { kind: "task", id: selectedTaskId };
+        case "project-template-goal-description-input":
+            return { kind: "goal", id: selectedGoalId };
+        default:
+            return null;
+    }
+}
+function preserveActiveDescriptionDraft(template, draft, activeField) {
+    if (!draft || template.id !== draft.id || !activeField) {
+        return template;
+    }
+    if (activeField.kind === "template") {
+        return {
+            ...template,
+            description: draft.description,
+        };
+    }
+    if (activeField.kind === "task" && activeField.id) {
+        const draftTask = draft.taskTemplates.find((task) => task.id === activeField.id);
+        if (!draftTask) {
+            return template;
+        }
+        return {
+            ...template,
+            taskTemplates: template.taskTemplates.map((task) => task.id === activeField.id
+                ? { ...task, description: draftTask.description }
+                : task),
+        };
+    }
+    if (activeField.kind === "goal" && activeField.id) {
+        const draftGoal = (draft.goalTemplates ?? []).find((goal) => goal.id === activeField.id);
+        if (!draftGoal) {
+            return template;
+        }
+        return {
+            ...template,
+            goalTemplates: (template.goalTemplates ?? []).map((goal) => goal.id === activeField.id
+                ? { ...goal, description: draftGoal.description }
+                : goal),
+        };
+    }
+    return template;
+}
 function isValidGuid(value) {
     return (!!value &&
         /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(value));
@@ -362,12 +464,28 @@ function canAddTemplateDependency(template, taskId, dependencyId) {
     }
     return task.parentTaskId !== dependencyId;
 }
-function buildProjectTemplateAgentContext(template, selectedTaskTemplateId) {
+function buildProjectTemplateAgentContext(template, selectedTaskTemplateId, selectedGoalTemplateId = null) {
     const dependencyCount = template.taskTemplates.reduce((count, task) => count + (task.dependencyIds?.length ?? 0), 0);
     const agentAssignedTaskCount = template.taskTemplates.filter((task) => task.agentProfileId || (task.assigneeType === "Agent" && task.assigneeId)).length;
     const selectedTask = selectedTaskTemplateId
         ? (template.taskTemplates.find((task) => task.id === selectedTaskTemplateId) ?? null)
         : null;
+    const goalDefinitions = [...(template.goalTemplates ?? [])]
+        .sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0))
+        .map((goal) => ({
+        id: goal.id,
+        title: goal.title?.trim() || "Untitled goal",
+        description: goal.description?.trim() || null,
+        disabled: goal.disabled === true,
+        sortOrder: goal.sortOrder ?? 0,
+        defaultScopeJson: goal.defaultScopeJson?.trim() || null,
+        dataShape: goal.dataShape?.trim() || null,
+    }));
+    const selectedGoal = selectedGoalTemplateId
+        ? (goalDefinitions.find((goal) => goal.id === selectedGoalTemplateId) ??
+            null)
+        : null;
+    const enabledGoalCount = goalDefinitions.filter((goal) => goal.disabled !== true).length;
     return {
         activeWorkspace: "settings",
         additionalData: {
@@ -383,10 +501,22 @@ function buildProjectTemplateAgentContext(template, selectedTaskTemplateId) {
             selectedTaskTemplate: selectedTask
                 ? normalizeTaskTemplate(selectedTask)
                 : null,
+            selectedGoalTemplateId: selectedGoal ? selectedGoal.id : null,
+            selectedGoalTemplateTitle: selectedGoal?.title ?? null,
+            selectedGoalTemplate: selectedGoal,
+            projectTemplateGoalDefinitions: goalDefinitions,
+            projectTemplateGoalSummary: {
+                goalCount: goalDefinitions.length,
+                enabledGoalCount,
+                disabledGoalCount: goalDefinitions.length - enabledGoalCount,
+            },
             projectTemplateSummary: {
                 taskCount: template.taskTemplates.length,
                 dependencyCount,
                 agentAssignedTaskCount,
+                goalCount: goalDefinitions.length,
+                enabledGoalCount,
+                disabledGoalCount: goalDefinitions.length - enabledGoalCount,
                 defaultCostLimit: template.defaultCostLimit ?? null,
                 disabled: template.disabled === true,
             },
@@ -415,6 +545,10 @@ export function ProjectTemplatesPanel() {
     const [newTaskTitle, setNewTaskTitle] = useState("");
     const [newTaskDependencySourceId, setNewTaskDependencySourceId] = useState(null);
     const [creatingTask, setCreatingTask] = useState(false);
+    const [selectedGoalId, setSelectedGoalId] = useState(null);
+    const [isCreateGoalDialogOpen, setIsCreateGoalDialogOpen] = useState(false);
+    const [newGoalTitle, setNewGoalTitle] = useState("");
+    const [creatingGoal, setCreatingGoal] = useState(false);
     const [isAddChildTaskDialogOpen, setIsAddChildTaskDialogOpen] = useState(false);
     const [newChildTaskTitle, setNewChildTaskTitle] = useState("");
     const [creatingChildTask, setCreatingChildTask] = useState(false);
@@ -430,6 +564,12 @@ export function ProjectTemplatesPanel() {
     const [editingAgentProfile, setEditingAgentProfile] = useState(null);
     const [isTaskEditorMaximized, setIsTaskEditorMaximized] = useState(false);
     const [taskEditorOverlayBounds, setTaskEditorOverlayBounds] = useState(null);
+    const [settingsMainContentBounds, setSettingsMainContentBounds] = useState(null);
+    const [agentPanelBounds, setAgentPanelBounds] = useState(null);
+    const [isAgentPanelCollapsed, setIsAgentPanelCollapsed] = useState(() => {
+        const stored = localStorageService.getItem(PROJECT_TEMPLATE_SPLITTER_STORAGE_KEY);
+        return stored?.lastCollapsed ?? true;
+    });
     const [forceCollapseAgentPanelKey, setForceCollapseAgentPanelKey] = useState(0);
     const [forceExpandAgentPanelKey, setForceExpandAgentPanelKey] = useState(0);
     const settingsMainContentRef = useRequiredSettingsMainContentRef();
@@ -442,6 +582,7 @@ export function ProjectTemplatesPanel() {
     const draftTemplateRef = useRef(null);
     const selectedTemplateIdRef = useRef(selectedTemplateId);
     const selectedTaskIdRef = useRef(selectedTaskId);
+    const selectedGoalIdRef = useRef(selectedGoalId);
     const selectedDependencyIdRef = useRef(selectedDependencyId);
     const isDirtyRef = useRef(isDirty);
     const savingRef = useRef(saving);
@@ -456,6 +597,7 @@ export function ProjectTemplatesPanel() {
     };
     const restoreAgentPanelAfterMaximize = () => {
         if (agentPanelWasExpandedBeforeMaximizeRef.current === true) {
+            setIsAgentPanelCollapsed(false);
             setForceExpandAgentPanelKey((value) => value + 1);
         }
         agentPanelWasExpandedBeforeMaximizeRef.current = null;
@@ -478,11 +620,114 @@ export function ProjectTemplatesPanel() {
         const agentPanelCollapsed = wasAgentPanelCollapsed();
         agentPanelWasExpandedBeforeMaximizeRef.current = !agentPanelCollapsed;
         if (!agentPanelCollapsed) {
+            setIsAgentPanelCollapsed(true);
             setForceCollapseAgentPanelKey((value) => value + 1);
         }
         setTaskEditorOverlayBounds(nextBounds);
         setIsTaskEditorMaximized(true);
     };
+    useEffect(() => {
+        const settingsMainContent = settingsMainContentRef.current;
+        const updateBounds = () => {
+            const nextBounds = measureOverlayBounds(settingsMainContentRef.current);
+            if (nextBounds) {
+                setSettingsMainContentBounds(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);
+        };
+    }, [settingsMainContentRef]);
+    useEffect(() => {
+        if (isMobile) {
+            setAgentPanelBounds(null);
+            return;
+        }
+        const updateBounds = () => {
+            const element = document.querySelector('[data-testid="splitter-panel-project-template-agent"]');
+            const nextBounds = measureOverlayBounds(element);
+            setAgentPanelBounds((currentBounds) => {
+                if (!nextBounds) {
+                    return currentBounds === null ? currentBounds : null;
+                }
+                if (currentBounds &&
+                    Math.abs(currentBounds.top - nextBounds.top) < 0.5 &&
+                    Math.abs(currentBounds.left - nextBounds.left) < 0.5 &&
+                    Math.abs(currentBounds.width - nextBounds.width) < 0.5 &&
+                    Math.abs(currentBounds.height - nextBounds.height) < 0.5) {
+                    return currentBounds;
+                }
+                return 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 settingsMainContent = settingsMainContentRef.current;
+        const agentPanelElement = document.querySelector('[data-testid="splitter-panel-project-template-agent"]');
+        const resizeObserver = typeof ResizeObserver !== "undefined" && settingsMainContent
+            ? new ResizeObserver(scheduleUpdate)
+            : null;
+        if (resizeObserver && settingsMainContent) {
+            resizeObserver.observe(settingsMainContent);
+        }
+        if (resizeObserver && agentPanelElement) {
+            resizeObserver.observe(agentPanelElement);
+        }
+        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);
+        };
+    }, [
+        isAgentPanelCollapsed,
+        isMobile,
+        selectedTemplateId,
+        settingsMainContentRef,
+    ]);
     useEffect(() => {
         if (!isTaskEditorMaximized) {
             setTaskEditorOverlayBounds(null);
@@ -623,8 +868,14 @@ export function ProjectTemplatesPanel() {
             setMobileView("detail");
             return;
         }
+        setIsAgentPanelCollapsed(true);
         setForceCollapseAgentPanelKey((value) => value + 1);
     }, [isMobile]);
+    const handleShowTemplateAssistant = useCallback(() => {
+        setEditingAgentProfile(null);
+        setIsAgentPanelCollapsed(false);
+        setForceExpandAgentPanelKey((value) => value + 1);
+    }, []);
     useEffect(() => {
         if (!isMobile) {
             setMobileView("detail");
@@ -643,7 +894,8 @@ export function ProjectTemplatesPanel() {
             if (result.type !== "success") {
                 throw new Error(result.summary || "Failed to load project templates");
             }
-            const loadedTemplates = result.data ?? [];
+            const activeDescriptionDraftField = getActiveDescriptionDraftField(selectedTaskIdRef.current, selectedGoalIdRef.current);
+            const loadedTemplates = (result.data ?? []).map((template) => preserveActiveDescriptionDraft(template, draftTemplateRef.current, activeDescriptionDraftField));
             setTemplates(loadedTemplates);
             setState("success");
             const preferredTemplateExists = !!preferredTemplateId &&
@@ -713,6 +965,9 @@ export function ProjectTemplatesPanel() {
     }, [aiProfiles]);
     const selectedTask = useMemo(() => draftTemplate?.taskTemplates.find((task) => task.id === selectedTaskId) ??
         null, [draftTemplate, selectedTaskId]);
+    const templateAgentInitialMetadata = useMemo(() => draftTemplate
+        ? buildProjectTemplateAgentContext(draftTemplate, selectedTaskId, selectedGoalId)
+        : undefined, [draftTemplate, selectedGoalId, selectedTaskId]);
     const dependencyTasks = useMemo(() => {
         if (!draftTemplate || !selectedTask)
             return [];
@@ -782,9 +1037,9 @@ export function ProjectTemplatesPanel() {
             setMobileView("detail");
         }
     }, [isMobile]);
-    const syncProjectTemplateAgentContext = useCallback(async (agentId, template, selectedTaskTemplateId) => {
+    const syncProjectTemplateAgentContext = useCallback(async (agentId, template, selectedTaskTemplateId, selectedGoalTemplateId) => {
         try {
-            await updateAgentContext(agentId, buildProjectTemplateAgentContext(template, selectedTaskTemplateId));
+            await updateAgentContext(agentId, buildProjectTemplateAgentContext(template, selectedTaskTemplateId, selectedGoalTemplateId));
         }
         catch (error) {
             setTemplateAgentError(error instanceof Error
@@ -837,8 +1092,9 @@ export function ProjectTemplatesPanel() {
         const currentTemplate = draftTemplateRef.current;
         if (!currentTemplate || currentTemplate.id !== selectedTemplateId)
             return;
-        void syncProjectTemplateAgentContext(templateAgentId, currentTemplate, selectedTaskId);
+        void syncProjectTemplateAgentContext(templateAgentId, currentTemplate, selectedTaskId, selectedGoalId);
     }, [
+        selectedGoalId,
         selectedTaskId,
         templateAgentId,
         templateAgentLoading,
@@ -869,6 +1125,14 @@ export function ProjectTemplatesPanel() {
             taskTemplates: currentTemplate.taskTemplates.map((task) => task.id === selectedTaskId ? updater({ ...task }) : task),
         }));
     }, [applyDraftChange, selectedTaskId]);
+    const updateSelectedGoal = useCallback((updater) => {
+        if (!selectedGoalId)
+            return;
+        applyDraftChange((currentTemplate) => ({
+            ...currentTemplate,
+            goalTemplates: (currentTemplate.goalTemplates ?? []).map((goal) => goal.id === selectedGoalId ? updater({ ...goal }) : goal),
+        }));
+    }, [applyDraftChange, selectedGoalId]);
     const handleDuplicateAssignedAgentProfile = useCallback(async () => {
         if (!editContext || !selectedAgentProfileId)
             return;
@@ -1000,7 +1264,10 @@ export function ProjectTemplatesPanel() {
             }
             if (templateAgentId && savedTemplate.id === selectedTemplateId) {
                 const nextSelectedTaskId = getSelectedTaskIdForTemplate(savedTemplate, selectedTaskIdRef.current);
-                void syncProjectTemplateAgentContext(templateAgentId, savedTemplate, nextSelectedTaskId);
+                const nextSelectedGoalId = savedTemplate.goalTemplates?.some((goal) => goal.id === selectedGoalId) === true
+                    ? selectedGoalId
+                    : null;
+                void syncProjectTemplateAgentContext(templateAgentId, savedTemplate, nextSelectedTaskId, nextSelectedGoalId);
             }
             return true;
         }
@@ -1009,7 +1276,12 @@ export function ProjectTemplatesPanel() {
                 setSaving(false);
             }
         }
-    }, [selectedTemplateId, syncProjectTemplateAgentContext, templateAgentId]);
+    }, [
+        selectedGoalId,
+        selectedTemplateId,
+        syncProjectTemplateAgentContext,
+        templateAgentId,
+    ]);
     const applyDraftChangeAndPersist = useCallback((updater) => {
         let nextTemplate = null;
         let nextSignature = null;
@@ -1134,6 +1406,9 @@ export function ProjectTemplatesPanel() {
     useEffect(() => {
         selectedTaskIdRef.current = selectedTaskId;
     }, [selectedTaskId]);
+    useEffect(() => {
+        selectedGoalIdRef.current = selectedGoalId;
+    }, [selectedGoalId]);
     useEffect(() => {
         selectedDependencyIdRef.current = selectedDependencyId;
     }, [selectedDependencyId]);
@@ -1244,6 +1519,7 @@ export function ProjectTemplatesPanel() {
         setSelectedTemplateId(nextTemplate.id);
         setDraftTemplate(cloneTemplate(nextTemplate));
         setSelectedTaskId(null);
+        setSelectedGoalId(null);
         setIsDirty(true);
         setSaveError(null);
         lastPersistedSignatureRef.current = null;
@@ -1349,7 +1625,7 @@ export function ProjectTemplatesPanel() {
             setTemplateAgentId(result.data.agentId);
             const currentTemplate = draftTemplateRef.current;
             if (currentTemplate?.id === selectedTemplateId) {
-                await syncProjectTemplateAgentContext(result.data.agentId, currentTemplate, selectedTaskIdRef.current);
+                await syncProjectTemplateAgentContext(result.data.agentId, currentTemplate, selectedTaskIdRef.current, selectedGoalId);
             }
         }
         catch (error) {
@@ -1362,7 +1638,12 @@ export function ProjectTemplatesPanel() {
         finally {
             setTemplateAgentResetting(false);
         }
-    }, [flushPendingSave, selectedTemplateId, syncProjectTemplateAgentContext]);
+    }, [
+        flushPendingSave,
+        selectedGoalId,
+        selectedTemplateId,
+        syncProjectTemplateAgentContext,
+    ]);
     const handleOpenCreateTaskDialog = useCallback(async () => {
         if (!draftTemplate)
             return;
@@ -1450,6 +1731,56 @@ export function ProjectTemplatesPanel() {
             setCreatingTask(false);
         }
     }, [draftTemplate, newTaskDependencySourceId, newTaskTitle, persistTemplate]);
+    const handleConfirmCreateGoal = useCallback(async () => {
+        if (!draftTemplate)
+            return;
+        const trimmedTitle = newGoalTitle.trim();
+        if (!trimmedTitle) {
+            toast.error("Goal title is required");
+            return;
+        }
+        if (!draftTemplate.name.trim()) {
+            const message = "Project template name is required before it can be saved";
+            setSaveError(message);
+            toast.error(message);
+            return;
+        }
+        if (autosaveTimeoutRef.current !== null) {
+            window.clearTimeout(autosaveTimeoutRef.current);
+            autosaveTimeoutRef.current = null;
+        }
+        const nextGoal = createEmptyGoalDefinition((draftTemplate.goalTemplates ?? []).length, trimmedTitle);
+        const nextTemplate = cloneTemplate(draftTemplate);
+        nextTemplate.goalTemplates = [
+            ...(nextTemplate.goalTemplates ?? []),
+            nextGoal,
+        ];
+        const request = buildUpsertTemplateRequest(nextTemplate);
+        const signature = JSON.stringify(request);
+        latestDraftSignatureRef.current = signature;
+        setDraftTemplate(cloneTemplate(nextTemplate));
+        setTemplates((existingTemplates) => sortTemplates([
+            ...existingTemplates.filter((template) => template.id !== nextTemplate.id),
+            cloneTemplate(nextTemplate),
+        ]));
+        setSelectedGoalId(nextGoal.id);
+        setIsDirty(true);
+        setSaveError(null);
+        setCreatingGoal(true);
+        try {
+            const saved = await persistTemplate(request, signature, {
+                showErrorToast: true,
+            });
+            if (saved) {
+                setIsCreateGoalDialogOpen(false);
+                setNewGoalTitle("");
+                toast.success("Goal definition created");
+            }
+        }
+        finally {
+            setCreatingGoal(false);
+        }
+    }, [draftTemplate, newGoalTitle, persistTemplate]);
     const handleOpenAddChildTaskDialog = useCallback(async () => {
         if (!draftTemplate || !selectedTaskId)
             return;
@@ -1486,7 +1817,7 @@ export function ProjectTemplatesPanel() {
             ...existingTemplates.filter((template) => template.id !== nextTemplate.id),
             cloneTemplate(nextTemplate),
         ]));
-        // Keep the parent task selected so the new child appears in "Child tasks" immediately.
+        // Keep the parent task selected so the new subtask appears immediately.
         setIsDirty(true);
         setSaveError(null);
         setCreatingChildTask(true);
@@ -1497,7 +1828,7 @@ export function ProjectTemplatesPanel() {
             if (saved) {
                 setIsAddChildTaskDialogOpen(false);
                 setNewChildTaskTitle("");
-                toast.success("Child task template created");
+                toast.success("Subtask template created");
             }
         }
         finally {
@@ -1532,6 +1863,12 @@ export function ProjectTemplatesPanel() {
         setSelectedDependencyId(null);
         setSelectedTaskId(taskId);
     }, []);
+    const handleCloseTaskDetailsPane = useCallback(() => {
+        selectedTaskIdRef.current = null;
+        selectedDependencyIdRef.current = null;
+        setSelectedTaskId(null);
+        setSelectedDependencyId(null);
+    }, []);
     const handleSelectDependencyFromGraph = useCallback((taskId, dependencyId) => {
         selectedDependencyIdRef.current = dependencyId;
         setSelectedTaskId(taskId);
@@ -1662,6 +1999,43 @@ export function ProjectTemplatesPanel() {
         }
         runDelete();
     }, [applyDraftChange, editContext]);
+    const removeGoalDefinitionById = useCallback((goalId) => {
+        const template = draftTemplateRef.current;
+        const goals = template?.goalTemplates ?? [];
+        if (!goals.some((goal) => goal.id === goalId))
+            return;
+        const goalTitle = goals.find((goal) => goal.id === goalId)?.title ?? "Untitled goal";
+        const runDelete = () => {
+            const current = draftTemplateRef.current;
+            const currentGoals = current?.goalTemplates ?? [];
+            if (!currentGoals.some((goal) => goal.id === goalId))
+                return;
+            const remainingGoals = currentGoals.filter((goal) => goal.id !== goalId);
+            applyDraftChange((currentTemplate) => ({
+                ...currentTemplate,
+                goalTemplates: (currentTemplate.goalTemplates ?? []).filter((goal) => goal.id !== goalId),
+            }));
+            setSelectedGoalId((prev) => {
+                if (prev === goalId) {
+                    return remainingGoals[0]?.id ?? null;
+                }
+                return remainingGoals.some((goal) => goal.id === prev)
+                    ? prev
+                    : (remainingGoals[0]?.id ?? null);
+            });
+        };
+        if (editContext?.confirm) {
+            editContext.confirm({
+                header: "Remove goal definition",
+                message: `Are you sure you want to remove "${goalTitle}"?`,
+                acceptLabel: "Remove",
+                showCancel: true,
+                accept: runDelete,
+            });
+            return;
+        }
+        runDelete();
+    }, [applyDraftChange, editContext]);
     const handleDeleteSelectedTask = useCallback(() => {
         if (!selectedTaskId)
             return;
@@ -1713,30 +2087,41 @@ export function ProjectTemplatesPanel() {
     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`,
+                backLink: {
+                    label: "Back to project templates overview",
+                    onClick: () => {
+                        void handleNavigateToOverview();
+                    },
+                },
             },
         ]
         : null, [breadcrumbDraftName, breadcrumbTaskCount, handleNavigateToOverview]);
     const desktopHeaderActions = useMemo(() => {
         if (isMobile)
             return null;
+        const showCreate = !draftTemplate;
         const showDelete = draftTemplate && !draftTemplate.isSystem;
-        return (_jsxs("div", { className: "flex items-center gap-2", children: [headerStatusBadge, _jsxs(Button, { size: "sm", onClick: () => void handleCreateTemplate(), "data-testid": "project-template-create-button", children: [_jsx(Plus, { className: "h-4 w-4", strokeWidth: 1.5 }), "Create template"] }), showDelete ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => handleDeleteTemplate(), disabled: deleting, "data-testid": "project-template-delete-button", children: [_jsx(DeleteIcon, { size: "lg" }), deleting ? "Deleting..." : "Delete"] })) : null] }));
+        const agentPanelHeaderOffset = draftTemplate &&
+            !isTaskEditorMaximized &&
+            !isAgentPanelCollapsed &&
+            agentPanelBounds
+            ? Math.round(agentPanelBounds.width + 8)
+            : 0;
+        return (_jsxs("div", { className: "mt-2 flex items-center gap-2", style: agentPanelHeaderOffset > 0
+                ? { marginRight: agentPanelHeaderOffset }
+                : undefined, children: [headerStatusBadge, showCreate ? (_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"] })) : null, 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] }));
     }, [
+        agentPanelBounds,
         deleting,
         draftTemplate,
         handleCreateTemplate,
         handleDeleteTemplate,
         headerStatusBadge,
+        isAgentPanelCollapsed,
+        isTaskEditorMaximized,
         isMobile,
     ]);
     useEffect(() => {
@@ -1774,7 +2159,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: "border-border-default bg-neutral-grey-5 text-neutral-grey-50 rounded-lg border border-dashed p-6 text-center text-xs", children: "Select a task node to edit its details." }) })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "border-border-default shrink-0 border-b bg-white px-4 pt-4 pb-3", children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "text-neutral-grey-100 text-xs font-medium", "data-testid": "project-template-selected-task-title", children: selectedTask.title || "Untitled Task" }), selectedTask.taskType === "DecisionPoint" ? (_jsx(Badge, { variant: "outline", className: "border-highlight-100 bg-highlight-10 text-2xs text-highlight-100", children: "Decision Point" })) : null, selectedTask.disabled ? (_jsx(Badge, { variant: "outline", className: "text-2xs", children: "Disabled" })) : null] }), _jsx("div", { className: "text-neutral-grey-50 text-xs", children: "Configure task details, assignment, and dependencies." })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: handleDeleteSelectedTask, "data-testid": "project-template-remove-task-button", children: [_jsx(DeleteIcon, { size: "lg" }), "Remove Task"] })] }) }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-4 pt-3 pb-4", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsxs("div", { className: "grid gap-1.5 md:col-span-2", children: [_jsx(Label, { className: "text-xs", htmlFor: "project-template-task-title-input", children: "Task title" }), _jsx(Input, { id: "project-template-task-title-input", value: selectedTask.title, onChange: (event) => updateSelectedTask((currentTask) => ({
+        const 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-start 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("div", { className: "flex shrink-0 items-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: handleDeleteSelectedTask, "data-testid": "project-template-remove-task-button", children: [_jsx(DeleteIcon, { size: "lg" }), "Remove Task"] }), _jsx(CloseButton, { onClick: handleCloseTaskDetailsPane, label: "Close task details", "data-testid": "project-template-close-task-details-button" })] })] }) }), _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) => ({
@@ -1803,7 +2188,7 @@ export function ProjectTemplatesPanel() {
                                                                     agentProfileId: next?.assigneeType === "Agent"
                                                                         ? next.assigneeId
                                                                         : null,
-                                                                })), placeholder: "Assign user or agent", buttonClassName: "h-[27px] w-full justify-between rounded-md bg-neutral-grey-5 text-xs", buttonTestId: "project-template-task-assignee-picker" }) }), selectedTask.assigneeType === "Agent" ? (_jsxs(Button, { type: "button", size: "sm", variant: "outline", className: "h-[27px] shrink-0 gap-1 px-2 text-xs", onClick: () => void handleEditAssignedAgentProfile(), disabled: !selectedAgentProfileId, "data-testid": "project-template-task-edit-agent-profile-button", children: [_jsx(Settings2, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }), "Edit Profile"] })) : null] }), profilesError ? (_jsx("div", { className: "text-feedback-orange text-xs", children: profilesError })) : null] })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "border-border-default bg-neutral-grey-5 rounded-lg border p-3", "data-testid": "project-template-dependencies-section", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [_jsxs("div", { className: "text-neutral-grey-100 flex items-center gap-2 text-xs font-medium", children: [_jsx(Shield, { className: "text-neutral-grey-50 h-4 w-4", strokeWidth: 1.5 }), "Dependencies"] }), _jsxs(Popover, { open: dependencyPickerOpen, onOpenChange: setDependencyPickerOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { type: "button", size: "sm", variant: "outline", className: "h-7 gap-1 px-2", disabled: dependencyAddCandidates.length === 0, "aria-label": "Add dependency", "data-testid": "project-template-add-dependency-button", children: _jsx(Plus, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }) }) }), _jsxs(PopoverContent, { align: "end", className: "w-72 p-0", sideOffset: 6, "data-testid": "project-template-dependency-popover", children: [_jsx("div", { className: "border-border-default text-neutral-grey-100 border-b px-3 py-2 text-xs font-medium", children: "Depends on" }), _jsx("div", { className: "max-h-56 overflow-y-auto p-1", children: dependencyAddCandidates.length === 0 ? (_jsx("div", { className: "text-neutral-grey-50 px-2 py-3 text-center text-xs", children: "All other tasks are already linked." })) : (dependencyAddCandidates.map((task) => (_jsxs("button", { type: "button", className: "hover:bg-neutral-grey-5 flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-xs", onClick: () => handleAddDependency(task.id), "data-testid": `project-template-dependency-option-${task.id}`, children: [_jsx(Link2, { className: "text-neutral-grey-50 h-3.5 w-3.5 shrink-0", strokeWidth: 1.5 }), _jsx("span", { className: "text-neutral-grey-100 min-w-0 truncate font-medium", children: task.title || "Untitled Task" })] }, task.id)))) })] })] })] }), _jsx("p", { className: "text-neutral-grey-50 mb-2 text-[11px] leading-snug", children: "This task must wait for these tasks to finish first." }), dependencyTasks.length === 0 ? (_jsx("div", { className: "text-neutral-grey-50 text-xs", children: draftTemplate.taskTemplates.filter((t) => t.id !== selectedTask.id).length === 0
+                                                                })), placeholder: "Assign user or agent", buttonClassName: "h-8 min-h-0 w-full justify-between rounded-md bg-white text-xs", buttonTestId: "project-template-task-assignee-picker" }) }), selectedTask.assigneeType === "Agent" ? (_jsxs(Button, { type: "button", size: "sm", variant: "outline", className: "h-8 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-feedback-orange bg-feedback-orange-light ring-feedback-orange ring-1"
@@ -1819,23 +2204,28 @@ export function ProjectTemplatesPanel() {
                                                             event.preventDefault();
                                                             event.stopPropagation();
                                                             handleRemoveDependency(task.id);
-                                                        }, "data-testid": `project-template-dependency-row-${task.id}`, children: [_jsx("span", { className: "text-neutral-grey-100 min-w-0 truncate font-medium", children: task.title || "Untitled Task" }), _jsx("button", { type: "button", className: "text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-100 shrink-0 rounded p-0.5", "aria-label": `Remove dependency on ${task.title}`, onClick: () => handleRemoveDependency(task.id), "data-testid": `project-template-remove-dependency-${task.id}`, children: _jsx(X, { className: "h-4 w-4", strokeWidth: 1.5 }) })] }, task.id))) }))] }), _jsxs("div", { className: "border-border-default bg-neutral-grey-5 rounded-lg border p-3", "data-testid": "project-template-child-tasks-section", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [_jsxs("div", { className: "text-neutral-grey-100 flex items-center gap-2 text-xs font-medium", children: [_jsx(CornerDownRight, { className: "text-neutral-grey-50 h-4 w-4", strokeWidth: 1.5 }), "Child tasks"] }), _jsx(Button, { type: "button", size: "sm", variant: "outline", className: "h-7 gap-1 px-2", onClick: () => void handleOpenAddChildTaskDialog(), disabled: creatingChildTask, "aria-label": "Add child task", "data-testid": "project-template-add-child-task-button", children: _jsx(Plus, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }) })] }), _jsx("p", { className: "text-neutral-grey-50 mb-2 text-[11px] leading-snug", children: "Tasks that run after this one (they depend on this task)." }), childTaskTemplates.length === 0 ? (_jsx("div", { className: "text-neutral-grey-50 text-xs", children: "No child tasks yet. Use + to add one." })) : (_jsx("ul", { className: "space-y-1.5", children: childTaskTemplates.map((task) => (_jsxs("li", { className: "border-border-default flex items-center justify-between gap-2 rounded-md border bg-white px-3 py-2 text-xs", "data-testid": `project-template-child-task-row-${task.id}`, children: [_jsx("span", { className: "text-neutral-grey-100 min-w-0 truncate font-medium", children: task.title || "Untitled Task" }), _jsx("button", { type: "button", className: "text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-100 shrink-0 rounded p-0.5", "aria-label": `Unlink child task ${task.title}`, onClick: () => handleUnlinkChildTask(task.id), "data-testid": `project-template-unlink-child-task-${task.id}`, children: _jsx(X, { className: "h-4 w-4", strokeWidth: 1.5 }) })] }, task.id))) }))] })] })] }) })] })) }));
+                                                        }, "data-testid": `project-template-dependency-row-${task.id}`, children: [_jsx("span", { className: "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 }), "Subtasks"] }), _jsx(Button, { type: "button", size: "sm", variant: "outline", className: "h-7 gap-1 px-2", onClick: () => void handleOpenAddChildTaskDialog(), disabled: creatingChildTask, "aria-label": "Add subtask", "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: "Subtasks must be completed before this task is done." }), childTaskTemplates.length === 0 ? (_jsx("div", { className: "text-neutral-grey-50 text-xs", children: "No subtasks 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 subtask ${task.title}`, onClick: () => handleUnlinkChildTask(task.id), "data-testid": `project-template-unlink-child-task-${task.id}`, children: _jsx(X, { className: "h-4 w-4", strokeWidth: 1.5 }) })] }, task.id))) }))] })] })] }) })] })) }));
         if (isMobile) {
             return (_jsxs("div", { className: "border-border-default flex shrink-0 flex-col border-b", children: [_jsx("div", { className: "border-border-default h-[300px] shrink-0 overflow-hidden border-b", children: graphView }), taskPane] }));
         }
-        return (_jsx("div", { className: "border-border-default min-h-[360px] flex-1 overflow-hidden border-b", children: _jsx(Splitter, { direction: "vertical", localStorageKey: "settings-project-template-graph-task-splitter-v1", className: "h-full", panels: [
+        return (_jsx("div", { className: "border-border-default min-h-[360px] flex-1 overflow-hidden border-b", children: _jsx(Splitter, { direction: "horizontal", localStorageKey: "settings-project-template-graph-task-splitter-v2", className: "h-full", panels: [
                     {
                         name: "project-template-graph",
-                        defaultSize: 400,
-                        className: "min-h-0",
-                        content: graphView,
-                    },
-                    {
-                        name: "project-template-task-details",
                         defaultSize: "auto",
                         className: "min-h-0",
-                        content: taskPane,
+                        content: graphView,
                     },
+                    ...(selectedTask
+                        ? [
+                            {
+                                name: "project-template-task-details",
+                                defaultSize: 560,
+                                minSize: 360,
+                                className: "min-h-0",
+                                content: taskPane,
+                            },
+                        ]
+                        : []),
                 ] }) }));
     };
     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 ? ((() => {
@@ -1852,6 +2242,12 @@ export function ProjectTemplatesPanel() {
                         content: null,
                         testId: "project-template-tab-task-editor",
                     },
+                    {
+                        id: "project-template-tab-goals",
+                        label: "Goals",
+                        content: null,
+                        testId: "project-template-tab-goals",
+                    },
                 ];
                 const basicSettingsContent = (_jsxs("div", { className: "grid gap-4 overflow-y-auto p-4 md:grid-cols-2", "data-testid": "project-template-basic-settings-panel", children: [_jsxs("div", { className: "grid gap-1.5 md:col-span-2", children: [_jsx(Label, { className: "text-xs", htmlFor: "project-template-name-input", children: "Template name" }), _jsx(Input, { id: "project-template-name-input", value: draftTemplate.name, onChange: (event) => applyDraftChange((currentTemplate) => ({
                                         ...currentTemplate,
@@ -1870,20 +2266,81 @@ export function ProjectTemplatesPanel() {
                                     })), 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-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" })] })] }));
+                                    })), "aria-label": "Hide this project template from the create dialog", "data-testid": "project-template-hide-from-create-dialog-switch" })] })] }));
                 const taskEditorContent = (_jsx("div", { className: "flex h-full min-h-0 flex-1 flex-col overflow-hidden", children: renderTemplateTaskEditorMain() }));
-                return (_jsxs("div", { className: cn("flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-y-contain md:overflow-hidden", isTaskEditorMaximized ? "overflow-hidden p-0" : "p-5"), children: [_jsx("div", { className: "flex shrink-0 flex-col gap-5 md:max-h-[50vh] md:min-h-0 md:overflow-y-auto md:overscroll-y-contain", children: saveError && (_jsx("div", { className: "border-feedback-red bg-feedback-red-light text-feedback-red rounded border px-4 py-3 text-xs", children: saveError })) }), _jsxs("section", { className: cn("border-border-default flex min-h-0 flex-1 flex-col rounded-lg border bg-white md:overflow-hidden", isTaskEditorMaximized &&
-                                "overflow-hidden rounded-none shadow-xl"), "data-testid": "project-template-task-editor-shell", children: [_jsxs("div", { className: "border-border-default flex shrink-0 items-center justify-between gap-3 border-b px-4 py-3", children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(SimpleTabs, { tabs: detailTabs, activeTab: activeDetailTab === "basic" ? 0 : 1, setActiveTab: (index) => setActiveDetailTab(index === 0 ? "basic" : "tasks"), hideContent: true, className: "w-full justify-start gap-6" }) }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => void handleOpenCreateTaskDialog(), disabled: creatingTask, "data-testid": "project-template-add-task-button", className: activeDetailTab === "tasks"
-                                                ? ""
-                                                : "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"
+                const goalDefinitions = draftTemplate.goalTemplates ?? [];
+                const selectedGoal = goalDefinitions.find((goal) => goal.id === selectedGoalId) ?? null;
+                const goalsContent = (_jsx("div", { className: "flex h-full min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-4", "data-testid": "project-template-goals-section", children: goalDefinitions.length === 0 ? (_jsx("div", { className: "border-border-default text-neutral-grey-50 rounded-md border border-dashed p-6 text-center text-xs", children: "No goal definitions yet. Use \u201CAdd Goal\u201D to create one \u2014 projects created from this template can pick from these goals." })) : (_jsxs("div", { className: "grid gap-3 md:grid-cols-[220px_1fr]", children: [_jsx("div", { className: "flex flex-col gap-1", children: [...goalDefinitions]
+                                    .sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0))
+                                    .map((goal) => (_jsxs("div", { "data-testid": `project-template-goal-row-${goal.id}`, className: cn("flex items-center justify-between gap-2 rounded-md px-3 py-2 text-xs", goal.id === selectedGoalId
+                                        ? "bg-neutral-grey-5"
+                                        : "hover:bg-neutral-grey-5 bg-transparent"), children: [_jsxs("button", { type: "button", className: "min-w-0 flex-1 truncate text-left", onClick: () => setSelectedGoalId(goal.id), children: [goal.title || "Untitled goal", goal.disabled ? " (disabled)" : ""] }), _jsx("button", { type: "button", "aria-label": `Remove ${goal.title || "goal"}`, "data-testid": `project-template-remove-goal-${goal.id}`, className: "text-neutral-grey-50 hover:text-feedback-red shrink-0", onClick: () => removeGoalDefinitionById(goal.id), children: _jsx(Trash2, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }) })] }, goal.id))) }), selectedGoal ? (_jsxs("div", { className: "border-border-default flex flex-col gap-3 rounded-md border bg-white p-4", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { className: "text-xs", htmlFor: "project-template-goal-title-input", children: "Title" }), _jsx(Input, { id: "project-template-goal-title-input", "data-testid": "project-template-goal-title-input", className: "text-xs md:text-xs", value: selectedGoal.title, onChange: (event) => updateSelectedGoal((goal) => ({
+                                                    ...goal,
+                                                    title: event.target.value,
+                                                })), placeholder: "Goal title" })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { className: "text-xs", htmlFor: "project-template-goal-description-input", children: "Description" }), _jsx(Textarea, { id: "project-template-goal-description-input", "data-testid": "project-template-goal-description-input", className: "text-xs", rows: 3, value: selectedGoal.description ?? "", onChange: (event) => updateSelectedGoal((goal) => ({
+                                                    ...goal,
+                                                    description: event.target.value,
+                                                })), placeholder: "What this goal covers" })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { className: "text-xs", htmlFor: "project-template-goal-sort-order-input", children: "Sort order" }), _jsx(Input, { id: "project-template-goal-sort-order-input", type: "number", className: "text-xs md:text-xs", value: selectedGoal.sortOrder ?? 0, onChange: (event) => updateSelectedGoal((goal) => ({
+                                                    ...goal,
+                                                    sortOrder: event.target.value.trim() === ""
+                                                        ? 0
+                                                        : Number(event.target.value),
+                                                })) })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { className: "text-xs", htmlFor: "project-template-goal-default-scope-input", children: "Default scope (JSON, optional)" }), _jsx(Textarea, { id: "project-template-goal-default-scope-input", className: "font-mono text-xs", rows: 2, value: selectedGoal.defaultScopeJson ?? "", onChange: (event) => updateSelectedGoal((goal) => ({
+                                                    ...goal,
+                                                    defaultScopeJson: event.target.value,
+                                                })), placeholder: '{"rootItemId":"...","pagesOnly":true}' })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { className: "text-xs", htmlFor: "project-template-goal-data-shape-input", children: "Data shape hint (optional)" }), _jsx(Input, { id: "project-template-goal-data-shape-input", className: "text-xs md:text-xs", value: selectedGoal.dataShape ?? "", onChange: (event) => updateSelectedGoal((goal) => ({
+                                                    ...goal,
+                                                    dataShape: event.target.value,
+                                                })), placeholder: "e.g. { recommendations: string[] }" })] }), _jsxs("div", { className: "flex items-center justify-between gap-4", 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: "Keeps the definition but hides it from the runtime goal catalog." })] }), _jsx(Switch, { checked: selectedGoal.disabled === true, onCheckedChange: (checked) => updateSelectedGoal((goal) => ({
+                                                    ...goal,
+                                                    disabled: checked,
+                                                })), "aria-label": "Disable this goal definition", "data-testid": "project-template-goal-disabled-switch" })] })] })) : (_jsx("div", { className: "border-border-default text-neutral-grey-50 flex items-center justify-center rounded-md border border-dashed p-6 text-center text-xs", children: "Select a goal to edit its details." }))] })) }));
+                const detailAction = 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"] })) : activeDetailTab === "goals" ? (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
+                        setNewGoalTitle("");
+                        setIsCreateGoalDialogOpen(true);
+                    }, disabled: creatingGoal, "data-testid": "project-template-add-goal-button", children: [_jsx(Plus, { className: "h-4 w-4", strokeWidth: 1.5 }), "Add Goal"] })) : null;
+                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"), children: [saveError ? (_jsx("div", { className: "flex shrink-0 flex-col pb-3 md:max-h-[50vh] md:min-h-0 md:overflow-y-auto md:overscroll-y-contain", children: _jsx("div", { className: "border-feedback-red bg-feedback-red-light text-feedback-red rounded border px-4 py-3 text-xs", children: saveError }) })) : null, _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 h-[53px] shrink-0 items-center justify-between gap-3 border-b px-4 pt-3", children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(SimpleTabs, { tabs: detailTabs, activeTab: activeDetailTab === "basic"
+                                                    ? 0
+                                                    : activeDetailTab === "tasks"
+                                                        ? 1
+                                                        : 2, setActiveTab: (index) => setActiveDetailTab(index === 0
+                                                    ? "basic"
+                                                    : index === 1
+                                                        ? "tasks"
+                                                        : "goals"), hideContent: true, className: "w-full translate-y-0.5 justify-start gap-6" }) }), detailAction ? (_jsx("div", { className: "mb-2 flex shrink-0 items-center", children: detailAction })) : null] }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: activeDetailTab === "basic"
                                         ? basicSettingsContent
-                                        : taskEditorContent })] })] }));
+                                        : activeDetailTab === "tasks"
+                                            ? taskEditorContent
+                                            : goalsContent })] })] }));
             })()) : (_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 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("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg bg-white", children: _jsx(ProjectTemplateSelectorList, { rootTestId: "project-template-overview-list", templates: templates, selectedTemplateId: selectedTemplateId, error: error, deleting: deleting, loading: state === "loading", onSelectTemplate: handleSelectTemplate, onDeleteTemplate: handleDeleteTemplate }) }) }));
+    const agentFullHeightBounds = useMemo(() => !isMobile && !isTaskEditorMaximized && settingsMainContentBounds
+        ? {
+            top: settingsMainContentBounds.top,
+            right: settingsMainContentBounds.left + settingsMainContentBounds.width,
+            height: settingsMainContentBounds.height,
+        }
+        : undefined, [isMobile, isTaskEditorMaximized, settingsMainContentBounds]);
+    const assistantTopToggleStyle = useMemo(() => !isMobile &&
+        !isTaskEditorMaximized &&
+        isAgentPanelCollapsed &&
+        settingsMainContentBounds
+        ? {
+            position: "fixed",
+            top: settingsMainContentBounds.top + 8,
+            left: settingsMainContentBounds.left +
+                settingsMainContentBounds.width -
+                88,
+            zIndex: 45,
+        }
+        : undefined, [
+        isAgentPanelCollapsed,
+        isMobile,
+        isTaskEditorMaximized,
+        settingsMainContentBounds,
+    ]);
+    const agentPanelContent = (_jsx(ProjectTemplateAgentPanel, { templateName: draftTemplate?.name ?? null, agentId: templateAgentId, loading: templateAgentLoading, resetting: templateAgentResetting, error: templateAgentError, initialMetadata: templateAgentInitialMetadata, fullHeightBounds: agentFullHeightBounds, 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 ||
@@ -1900,7 +2357,7 @@ export function ProjectTemplatesPanel() {
             name: "project-template-agent",
             defaultSize: 460,
             content: rightPanelContent,
-            className: "overflow-hidden",
+            className: "overflow-hidden bg-white",
             collapsible: true,
             hidden: isMobile && mobileView !== "agent",
         },
@@ -1911,7 +2368,9 @@ export function ProjectTemplatesPanel() {
     if (!draftTemplate) {
         return overviewContent;
     }
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn("h-full", !isTaskEditorMaximized && "px-10 pt-0 pb-10"), children: _jsx("div", { className: cn("h-full", isTaskEditorMaximized && "fixed overflow-hidden bg-white shadow-xl"), style: projectTemplateEditorStyle, "data-testid": "project-template-editor", onKeyDownCapture: handleProjectTemplateEditorKeyDownCapture, children: _jsx(Splitter, { panels: panels, localStorageKey: PROJECT_TEMPLATE_SPLITTER_STORAGE_KEY, direction: "horizontal", className: "h-full", forceCollapseLastPanelKey: forceCollapseLastPanelKey, forceExpandLastPanelKey: forceExpandLastPanelKey }) }) }), _jsx(Dialog, { open: isCreateTaskDialogOpen, onOpenChange: (open) => {
+    return (_jsxs(_Fragment, { children: [assistantTopToggleStyle ? (_jsx(Button, { type: "button", variant: "outline", size: "icon", className: "h-8 w-8 rounded-md bg-white shadow-sm hover:bg-white", style: assistantTopToggleStyle, onClick: handleShowTemplateAssistant, "aria-label": "Show template assistant", title: "Show template assistant", "data-testid": "project-template-assistant-expand-button", children: _jsx(PanelRightOpen, { className: "h-5 w-5", strokeWidth: 1 }) })) : null, _jsx("div", { className: cn("h-full", !isTaskEditorMaximized && "px-10 pt-0 pb-5"), 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 !overflow-visible", expandLabel: _jsx(PanelRightOpen, { className: "h-5 w-5", strokeWidth: 1 }), expandButtonLabel: "Show template assistant", expandButtonTestId: isTaskEditorMaximized
+                            ? "project-template-assistant-expand-button"
+                            : undefined, expandButtonClassName: cn("border-border-default absolute right-4 z-50 h-8 w-8 rounded-md bg-white p-0 text-neutral-grey-100 shadow-sm backdrop-blur-sm hover:bg-white hover:text-neutral-grey-100 md:p-0", isTaskEditorMaximized ? "top-4" : "hidden"), forceCollapseLastPanelKey: forceCollapseLastPanelKey, forceExpandLastPanelKey: forceExpandLastPanelKey, onLastPanelCollapsedChange: setIsAgentPanelCollapsed }) }) }), _jsx(Dialog, { open: isCreateTaskDialogOpen, onOpenChange: (open) => {
                     setIsCreateTaskDialogOpen(open);
                     if (!open) {
                         setNewTaskDependencySourceId(null);
@@ -1929,7 +2388,12 @@ export function ProjectTemplatesPanel() {
                                         ? "Creating..."
                                         : newTaskDependencySourceId
                                             ? "Create Dependent Task"
-                                            : "Create Task" })] })] }) }), _jsx(Dialog, { open: isAddChildTaskDialogOpen, onOpenChange: setIsAddChildTaskDialogOpen, children: _jsxs(DialogContent, { className: "max-w-md", "data-testid": "project-template-create-child-task-dialog", children: [_jsx(StyledDialogTitle, { icon: _jsx(Plus, { strokeWidth: 1.5 }), title: "Add Child Task", subtitle: "Creates a new task that depends on the current task." }), _jsxs("div", { className: "grid gap-2 p-6", children: [_jsx(Label, { className: "text-xs", htmlFor: "project-template-new-child-task-title", children: "Task title" }), _jsx(Input, { id: "project-template-new-child-task-title", value: newChildTaskTitle, onChange: (event) => setNewChildTaskTitle(event.target.value), placeholder: "e.g. Review content", className: "text-xs md:text-xs", autoFocus: true, onKeyDown: (event) => {
+                                            : "Create Task" })] })] }) }), _jsx(Dialog, { open: isCreateGoalDialogOpen, onOpenChange: setIsCreateGoalDialogOpen, children: _jsxs(DialogContent, { className: "max-w-md", "data-testid": "project-template-create-goal-dialog", children: [_jsx(StyledDialogTitle, { icon: _jsx(Plus, { strokeWidth: 1.5 }), title: "Add Goal Definition", subtitle: "Create the goal and save it immediately." }), _jsxs("div", { className: "grid gap-2 p-6", children: [_jsx(Label, { className: "text-xs", htmlFor: "project-template-new-goal-title", children: "Goal title" }), _jsx(Input, { id: "project-template-new-goal-title", value: newGoalTitle, onChange: (event) => setNewGoalTitle(event.target.value), placeholder: "e.g. Review all pages", className: "text-xs md:text-xs", autoFocus: true, onKeyDown: (event) => {
+                                        if (event.key === "Enter" && !event.shiftKey) {
+                                            event.preventDefault();
+                                            void handleConfirmCreateGoal();
+                                        }
+                                    } })] }), _jsxs(DialogFooter, { className: "px-6 pt-0 pb-6", children: [_jsx(Button, { variant: "outline", onClick: () => setIsCreateGoalDialogOpen(false), disabled: creatingGoal, "data-testid": "project-template-create-goal-cancel-button", children: "Cancel" }), _jsx(Button, { onClick: () => void handleConfirmCreateGoal(), disabled: creatingGoal || !newGoalTitle.trim(), "data-testid": "project-template-create-goal-submit-button", children: creatingGoal ? "Creating..." : "Create Goal" })] })] }) }), _jsx(Dialog, { open: isAddChildTaskDialogOpen, onOpenChange: setIsAddChildTaskDialogOpen, children: _jsxs(DialogContent, { className: "max-w-md", "data-testid": "project-template-create-child-task-dialog", children: [_jsx(StyledDialogTitle, { icon: _jsx(Plus, { strokeWidth: 1.5 }), title: "Add Child Task", subtitle: "Creates a new task that depends on the current task." }), _jsxs("div", { className: "grid gap-2 p-6", children: [_jsx(Label, { className: "text-xs", htmlFor: "project-template-new-child-task-title", children: "Task title" }), _jsx(Input, { id: "project-template-new-child-task-title", value: newChildTaskTitle, onChange: (event) => setNewChildTaskTitle(event.target.value), placeholder: "e.g. Review content", className: "text-xs md:text-xs", autoFocus: true, onKeyDown: (event) => {
                                         if (event.key === "Enter" && !event.shiftKey) {
                                             event.preventDefault();
                                             void handleConfirmCreateChildTask();