@parhelia/core 0.1.12912 → 0.1.12918

package/dist/task-board/types.d.ts

@@ -58,19 +58,84 @@ export type ProjectWithPermission = {
     permission: ProjectPermission;
     overview?: ProjectOverviewSummary | null;
 };
+export type GoalStatus = "Open" | "InProgress" | "Achieved" | "Abandoned";
+export type SubgoalStatus = "Pending" | "InProgress" | "Done" | "Failed" | "Skipped";
+/** Arbitrary attached payload (parsed JSON object/array) on a goal or subgoal. */
+export type GoalData = unknown;
+export type GoalCoverage = {
+    total: number;
+    done: number;
+    skipped: number;
+    hasMeasurableSubgoals: boolean;
+    percent?: number | null;
+};
+export type Subgoal = {
+    subgoalId: string;
+    goalId: string;
+    title: string;
+    description?: string | null;
+    targetItemId?: string | null;
+    targetItemLanguage?: string | null;
+    targetItemPath?: string | null;
+    status: SubgoalStatus;
+    data?: GoalData;
+    sortOrder: number;
+    createdBy?: string;
+    createdByType?: string;
+    createdAt: string;
+    updatedBy?: string;
+    updatedByType?: string;
+    updatedAt: string;
+};
+export type Goal = {
+    goalId: string;
+    projectId: string;
+    title: string;
+    description?: string | null;
+    sourceGoalTemplateId?: string | null;
+    sourceGoalTemplateName?: string | null;
+    status: GoalStatus;
+    data?: GoalData;
+    sortOrder: number;
+    createdBy?: string;
+    createdByType?: string;
+    createdAt: string;
+    updatedBy?: string;
+    updatedByType?: string;
+    updatedAt: string;
+    subgoals?: Subgoal[] | null;
+    coverage?: GoalCoverage | null;
+};
+/** A predefined goal definition (catalog entry) declared by the project's template. */
+export type GoalDefinition = {
+    id: string;
+    title: string;
+    description?: string | null;
+    disabled?: boolean;
+    sortOrder?: number;
+    defaultScopeJson?: string | null;
+    dataShape?: string | null;
+};
+export type ProjectGoalsResponse = {
+    projectId: string;
+    includeDescendants: boolean;
+    goals: Goal[];
+    catalog: GoalDefinition[];
+    /** Effective permission per project id in scope (row-by-row edit gating). */
+    permissions: Record<string, ProjectPermission | string>;
+};
 export type ProjectTemplate = {
     id: string;
     name: string;
     description?: string | null;
     disabled?: boolean;
     hideFromCreateDialog?: boolean;
-    /** When true, new projects from this template open in taskboard wizard mode */
-    openInWizardMode?: boolean;
     /** True when stored under /sitecore/system/Parhelia/System/Project Templates */
     isSystem?: boolean;
     defaultCostLimit?: number | null;
     graphLayout?: ProjectTemplateGraphLayout | null;
     taskTemplates: TaskTemplateSummary[];
+    goalTemplates: GoalDefinition[];
 };
 export type ProjectTemplateAgentSession = {
     projectTemplateId: string;
@@ -443,10 +508,10 @@ export type UpsertProjectTemplateRequest = {
     description?: string | null;
     disabled: boolean;
     hideFromCreateDialog: boolean;
-    openInWizardMode: boolean;
     defaultCostLimit?: number | null;
     graphLayout?: ProjectTemplateGraphLayout | null;
     taskTemplates: TaskTemplateSummary[];
+    goalTemplates: GoalDefinition[];
 };
 export type DeleteProjectTemplateRequest = {
     projectTemplateId: string;

package/dist/task-board/views/DependencyGraphView.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { flushSync } from "react-dom";
-import { ReactFlow, Controls, MiniMap, useEdgesState, useNodesState, Handle, Position, MarkerType, } from "@xyflow/react";
+import { ReactFlow, Controls, MiniMap, BaseEdge, useEdgesState, useNodesState, Handle, Position, MarkerType, } from "@xyflow/react";
 import Dagre from "@dagrejs/dagre";
 import "@xyflow/react/dist/style.css";
 import { toast } from "sonner";
@@ -95,7 +95,7 @@ function TaskGraphNode({ data }) {
     const nodeSurfaceClass = data.isSelected
         ? cn("shadow-lg ring-2", selectedStyle)
         : hoverStyle;
-    return (_jsxs("div", { className: cn("group relative cursor-pointer overflow-hidden rounded-lg border bg-white p-3 text-left shadow-sm transition-all hover:shadow-md", nodeSurfaceClass), style: { width: NODE_WIDTH }, "data-testid": `dependency-graph-node-${data.taskId}`, children: [_jsx("div", { className: cn("absolute inset-y-0 left-0 w-1", priorityBarStyle) }), _jsx(Handle, { type: "target", position: Position.Left, id: "left", className: HANDLE_CLASS, "data-testid": `dependency-graph-target-left-${data.taskId}` }), _jsx(Handle, { type: "target", position: Position.Top, id: "top", className: HANDLE_CLASS, "data-testid": `dependency-graph-target-top-${data.taskId}` }), _jsxs("div", { className: "flex flex-col gap-2.5", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-muted-foreground mb-1 flex items-center gap-1 text-[10px] font-medium tracking-widest", children: _jsx("span", { className: "truncate", children: data.taskKey || data.taskId.slice(0, 8).toUpperCase() }) }), _jsx("div", { className: "line-clamp-2 text-sm leading-snug font-medium", children: data.title })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [isDecisionPoint ? (_jsx(GitBranch, { className: "text-highlight-100 h-4 w-4", "aria-label": "Decision Point" })) : null, data.priority === "Critical" ? (_jsx(AlertCircle, { className: "text-feedback-red h-4 w-4", "aria-label": "Critical priority" })) : null, data.onRemoveTask && (_jsx("button", { type: "button", className: "text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-50 -mt-px -mr-0.5 shrink-0 rounded p-0.5 transition-colors", "aria-label": "Remove task", "data-testid": `dependency-graph-remove-task-${data.taskId}`, onClick: (event) => {
+    return (_jsxs("div", { className: cn("group relative cursor-pointer overflow-visible rounded-lg border bg-white p-3 text-left shadow-sm transition-all hover:shadow-md", nodeSurfaceClass), style: { width: NODE_WIDTH }, "data-testid": `dependency-graph-node-${data.taskId}`, children: [_jsx("div", { className: cn("absolute inset-y-0 left-0 w-1 rounded-l-lg", priorityBarStyle) }), _jsx(Handle, { type: "target", position: Position.Left, id: "left", className: HANDLE_CLASS, "data-testid": `dependency-graph-target-left-${data.taskId}` }), _jsx(Handle, { type: "target", position: Position.Top, id: "top", className: HANDLE_CLASS, "data-testid": `dependency-graph-target-top-${data.taskId}` }), _jsxs("div", { className: "flex flex-col gap-2.5", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-muted-foreground mb-1 flex items-center gap-1 text-[10px] font-medium tracking-widest", children: _jsx("span", { className: "truncate", children: data.taskKey || data.taskId.slice(0, 8).toUpperCase() }) }), _jsx("div", { className: "line-clamp-2 text-sm leading-snug font-medium", children: data.title })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [isDecisionPoint ? (_jsx(GitBranch, { className: "text-highlight-100 h-4 w-4", "aria-label": "Decision Point" })) : null, data.priority === "Critical" ? (_jsx(AlertCircle, { className: "text-feedback-red h-4 w-4", "aria-label": "Critical priority" })) : null, data.onRemoveTask && (_jsx("button", { type: "button", className: "text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-50 -mt-px -mr-0.5 shrink-0 rounded p-0.5 transition-colors", "aria-label": "Remove task", "data-testid": `dependency-graph-remove-task-${data.taskId}`, onClick: (event) => {
                                             event.stopPropagation();
                                             data.onRemoveTask?.(data.taskId);
                                         }, children: _jsx(DeleteIcon, { size: "xs" }) }))] })] }), _jsxs("div", { className: "mt-0.5 flex flex-wrap items-center gap-2", children: [isDecisionPoint ? (_jsx(Badge, { variant: "outline", size: "sm", className: "text-2xs border-highlight-100 bg-highlight-10 text-highlight-100", children: "Decision Point" })) : null, data.assigneeDisplayName && (_jsx(TaskAssigneeBadge, { assigneeType: data.assigneeType, label: data.assigneeDisplayName })), executionDisplay ? (_jsxs(Badge, { variant: executionDisplay.variant, size: "sm", className: cn("max-w-full font-bold", executionDisplay.className), title: executionDisplay.needsAttention
@@ -117,8 +117,81 @@ function TaskGraphNode({ data }) {
 const nodeTypes = {
     taskNode: TaskGraphNode,
 };
+function getHierarchyOrthogonalPath({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, }) {
+    const sameColumn = Math.abs(sourceX - targetX) < 1;
+    const sameRow = Math.abs(sourceY - targetY) < 1;
+    if (sameColumn || sameRow) {
+        return `M ${sourceX} ${sourceY} L ${targetX} ${targetY}`;
+    }
+    if (sourcePosition === Position.Bottom && targetPosition === Position.Top) {
+        const midY = sourceY + (targetY - sourceY) / 2;
+        return `M ${sourceX} ${sourceY} L ${sourceX} ${midY} L ${targetX} ${midY} L ${targetX} ${targetY}`;
+    }
+    if (sourcePosition === Position.Right && targetPosition === Position.Left) {
+        const midX = sourceX + (targetX - sourceX) / 2;
+        return `M ${sourceX} ${sourceY} L ${midX} ${sourceY} L ${midX} ${targetY} L ${targetX} ${targetY}`;
+    }
+    const useHorizontalBend = Math.abs(targetX - sourceX) >= Math.abs(targetY - sourceY);
+    if (useHorizontalBend) {
+        const midX = sourceX + (targetX - sourceX) / 2;
+        return `M ${sourceX} ${sourceY} L ${midX} ${sourceY} L ${midX} ${targetY} L ${targetX} ${targetY}`;
+    }
+    const midY = sourceY + (targetY - sourceY) / 2;
+    return `M ${sourceX} ${sourceY} L ${sourceX} ${midY} L ${targetX} ${midY} L ${targetX} ${targetY}`;
+}
+function HierarchyOrthogonalEdge({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, markerEnd, markerStart, style, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, interactionWidth, }) {
+    const path = getHierarchyOrthogonalPath({
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+        sourcePosition,
+        targetPosition,
+    });
+    return (_jsx(BaseEdge, { id: id, path: path, markerEnd: markerEnd, markerStart: markerStart, style: style, label: label, labelStyle: labelStyle, labelShowBg: labelShowBg, labelBgStyle: labelBgStyle, labelBgPadding: labelBgPadding, labelBgBorderRadius: labelBgBorderRadius, interactionWidth: interactionWidth }));
+}
+const edgeTypes = {
+    hierarchyOrthogonal: HierarchyOrthogonalEdge,
+};
 const HIERARCHY_CHILD_GAP = 32;
 const HIERARCHY_SUBTREE_GAP = 80;
+function normalizeGraphNodeSize(size) {
+    if (!size ||
+        typeof size.width !== "number" ||
+        typeof size.height !== "number" ||
+        !Number.isFinite(size.width) ||
+        !Number.isFinite(size.height) ||
+        size.width <= 0 ||
+        size.height <= 0) {
+        return null;
+    }
+    return {
+        width: Math.max(NODE_WIDTH, size.width),
+        height: Math.max(NODE_HEIGHT, size.height),
+    };
+}
+function getGraphNodeSize(nodeId, nodeSizeOverrides) {
+    return (normalizeGraphNodeSize(nodeSizeOverrides?.get(nodeId)) ?? {
+        width: NODE_WIDTH,
+        height: NODE_HEIGHT,
+    });
+}
+function getMeasuredNodeSizeOverrides(nodes) {
+    if (!nodes?.length)
+        return undefined;
+    const sizes = new Map();
+    for (const node of nodes) {
+        const measuredNode = node;
+        const measuredSize = normalizeGraphNodeSize(measuredNode.measured ?? {
+            width: measuredNode.width,
+            height: measuredNode.height,
+        });
+        if (measuredSize) {
+            sizes.set(node.id, measuredSize);
+        }
+    }
+    return sizes.size > 0 ? sizes : undefined;
+}
 function normalizeGraphOrientation(orientation) {
     return orientation === "vertical" ? "vertical" : "horizontal";
 }
@@ -137,11 +210,12 @@ function getHierarchyHandles(orientation, autoLayoutStrategy) {
 }
 /**
  * Compound layout for the hierarchy strategy: each parent-child group is
- * laid out perpendicular to the selected orientation, and then the resulting subtree
- * "super-nodes" are arranged via Dagre using the dependency edges between
- * them.
+ * laid out perpendicular to the selected orientation, and then the resulting
+ * subtree "super-nodes" are arranged via Dagre using the dependency edges
+ * between them. Dagre receives root-anchored bounds so the top-level cards in a
+ * dependency chain stay aligned even when one of them has a deeper child tree.
  */
-function layoutGraphHierarchy(nodes, edges, orientation) {
+function layoutGraphHierarchy(nodes, edges, orientation, nodeSizeOverrides) {
     if (nodes.length === 0)
         return { nodes, edges };
     const childrenOf = new Map();
@@ -255,12 +329,13 @@ function layoutGraphHierarchy(nodes, edges, orientation) {
         }
     }
     function measureSubtree(nodeId) {
+        const nodeSize = getGraphNodeSize(nodeId, nodeSizeOverrides);
         const children = childrenOf.get(nodeId) ?? [];
         if (children.length === 0) {
             return {
                 positions: new Map([[nodeId, { x: 0, y: 0 }]]),
-                width: NODE_WIDTH,
-                height: NODE_HEIGHT,
+                width: nodeSize.width,
+                height: nodeSize.height,
             };
         }
         const childLayouts = children.map((childId) => measureSubtree(childId));
@@ -269,12 +344,12 @@ function layoutGraphHierarchy(nodes, edges, orientation) {
             const childRowWidth = childLayouts.reduce((sum, child) => sum + child.width, 0) +
                 HIERARCHY_CHILD_GAP * (childLayouts.length - 1);
             const childRowHeight = Math.max(...childLayouts.map((child) => child.height));
-            const width = Math.max(NODE_WIDTH, childRowWidth);
-            const height = NODE_HEIGHT + HIERARCHY_CHILD_GAP + childRowHeight;
-            positions.set(nodeId, { x: (width - NODE_WIDTH) / 2, y: 0 });
+            const width = Math.max(nodeSize.width, childRowWidth);
+            const height = nodeSize.height + HIERARCHY_CHILD_GAP + childRowHeight;
+            positions.set(nodeId, { x: (width - nodeSize.width) / 2, y: 0 });
             let childX = (width - childRowWidth) / 2;
             for (const childLayout of childLayouts) {
-                addTranslatedPositions(positions, childLayout.positions, childX, NODE_HEIGHT + HIERARCHY_CHILD_GAP);
+                addTranslatedPositions(positions, childLayout.positions, childX, nodeSize.height + HIERARCHY_CHILD_GAP);
                 childX += childLayout.width + HIERARCHY_CHILD_GAP;
             }
             return {
@@ -286,12 +361,12 @@ function layoutGraphHierarchy(nodes, edges, orientation) {
         const childColumnWidth = Math.max(...childLayouts.map((child) => child.width));
         const childColumnHeight = childLayouts.reduce((sum, child) => sum + child.height, 0) +
             HIERARCHY_CHILD_GAP * (childLayouts.length - 1);
-        const width = NODE_WIDTH + HIERARCHY_CHILD_GAP + childColumnWidth;
-        const height = Math.max(NODE_HEIGHT, childColumnHeight);
-        positions.set(nodeId, { x: 0, y: (height - NODE_HEIGHT) / 2 });
+        const width = nodeSize.width + HIERARCHY_CHILD_GAP + childColumnWidth;
+        const height = Math.max(nodeSize.height, childColumnHeight);
+        positions.set(nodeId, { x: 0, y: (height - nodeSize.height) / 2 });
         let childY = (height - childColumnHeight) / 2;
         for (const childLayout of childLayouts) {
-            addTranslatedPositions(positions, childLayout.positions, NODE_WIDTH + HIERARCHY_CHILD_GAP, childY);
+            addTranslatedPositions(positions, childLayout.positions, nodeSize.width + HIERARCHY_CHILD_GAP, childY);
             childY += childLayout.height + HIERARCHY_CHILD_GAP;
         }
         return {
@@ -317,7 +392,14 @@ function layoutGraphHierarchy(nodes, edges, orientation) {
         ranksep: HIERARCHY_SUBTREE_GAP,
     });
     for (const [rootId, data] of subtrees) {
-        g.setNode(rootId, { width: data.width, height: data.height });
+        const rootPosition = data.positions.get(rootId) ?? { x: 0, y: 0 };
+        const rootSize = getGraphNodeSize(rootId, nodeSizeOverrides);
+        const rootCenterX = rootPosition.x + rootSize.width / 2;
+        const rootCenterY = rootPosition.y + rootSize.height / 2;
+        g.setNode(rootId, {
+            width: Math.max(rootCenterX, data.width - rootCenterX) * 2,
+            height: Math.max(rootCenterY, data.height - rootCenterY) * 2,
+        });
     }
     const addedSuperEdges = new Set();
     for (const edge of edges) {
@@ -337,8 +419,10 @@ function layoutGraphHierarchy(nodes, edges, orientation) {
     const finalPositions = new Map();
     for (const [rootId, data] of subtrees) {
         const superNode = g.node(rootId);
-        const offsetX = superNode.x - data.width / 2;
-        const offsetY = superNode.y - data.height / 2;
+        const rootPosition = data.positions.get(rootId) ?? { x: 0, y: 0 };
+        const rootSize = getGraphNodeSize(rootId, nodeSizeOverrides);
+        const offsetX = superNode.x - rootPosition.x - rootSize.width / 2;
+        const offsetY = superNode.y - rootPosition.y - rootSize.height / 2;
         for (const [nodeId, localPos] of data.positions) {
             finalPositions.set(nodeId, {
                 x: offsetX + localPos.x,
@@ -354,10 +438,10 @@ function layoutGraphHierarchy(nodes, edges, orientation) {
         edges,
     };
 }
-function layoutGraph(nodes, edges, orientation, autoLayoutStrategy) {
+function layoutGraph(nodes, edges, orientation, autoLayoutStrategy, nodeSizeOverrides) {
     if (autoLayoutStrategy === "hierarchy" &&
         edges.some((e) => e.data?.relationship === "hierarchy")) {
-        return layoutGraphHierarchy(nodes, edges, orientation);
+        return layoutGraphHierarchy(nodes, edges, orientation, nodeSizeOverrides);
     }
     const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
     g.setGraph({
@@ -366,7 +450,7 @@ function layoutGraph(nodes, edges, orientation, autoLayoutStrategy) {
         ranksep: 60,
     });
     for (const node of nodes) {
-        g.setNode(node.id, { width: NODE_WIDTH, height: NODE_HEIGHT });
+        g.setNode(node.id, getGraphNodeSize(node.id, nodeSizeOverrides));
     }
     for (const edge of edges) {
         g.setEdge(edge.source, edge.target);
@@ -374,17 +458,18 @@ function layoutGraph(nodes, edges, orientation, autoLayoutStrategy) {
     Dagre.layout(g);
     const layoutedNodes = nodes.map((node) => {
         const dagNode = g.node(node.id);
+        const nodeSize = getGraphNodeSize(node.id, nodeSizeOverrides);
         return {
             ...node,
             position: {
-                x: dagNode.x - NODE_WIDTH / 2,
-                y: dagNode.y - NODE_HEIGHT / 2,
+                x: dagNode.x - nodeSize.width / 2,
+                y: dagNode.y - nodeSize.height / 2,
             },
         };
     });
     return { nodes: layoutedNodes, edges };
 }
-function buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, blockedTaskIds, orientation, showExecutionStateBadges, autoLayoutStrategy, onSelect, onAddDependentTaskFromNode, onAddChildTaskFromNode, onRemoveTask) {
+function buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, blockedTaskIds, orientation, showExecutionStateBadges, autoLayoutStrategy, onSelect, onAddDependentTaskFromNode, onAddChildTaskFromNode, onRemoveTask, nodeSizeOverrides) {
     const taskMap = new Map();
     for (const t of tasks)
         taskMap.set(t.taskId, t);
@@ -424,6 +509,8 @@ function buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, b
     const depTargetHandle = dependencyHandles.target;
     const hierSourceHandle = hierarchyHandles.source;
     const hierTargetHandle = hierarchyHandles.target;
+    const dependencyEdgeType = autoLayoutStrategy === "hierarchy" ? "step" : "smoothstep";
+    const hierarchyEdgeType = autoLayoutStrategy === "hierarchy" ? "hierarchyOrthogonal" : "smoothstep";
     const dependencyEdges = dependencies
         .filter((dep) => taskMap.has(dep.taskId) &&
         taskMap.has(dep.dependsOnTaskId) &&
@@ -441,7 +528,7 @@ function buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, b
             target: dep.taskId,
             sourceHandle: depSourceHandle,
             targetHandle: depTargetHandle,
-            type: "smoothstep",
+            type: dependencyEdgeType,
             animated: false,
             style: {
                 stroke: isSelected ? "var(--color-neutral-grey-100)" : strokeColor,
@@ -479,7 +566,7 @@ function buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, b
         target: task.taskId,
         sourceHandle: hierSourceHandle,
         targetHandle: hierTargetHandle,
-        type: "smoothstep",
+        type: hierarchyEdgeType,
         style: {
             stroke: "var(--color-component-default)",
             strokeWidth: 1.5,
@@ -497,7 +584,7 @@ function buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, b
     const edges = [...dependencyEdges, ...hierarchyEdges];
     if (nodes.length === 0)
         return { nodes: [], edges: [] };
-    return layoutGraph(nodes, edges, orientation, autoLayoutStrategy);
+    return layoutGraph(nodes, edges, orientation, autoLayoutStrategy, nodeSizeOverrides);
 }
 export function buildDependencyGraphLayout(args) {
     return buildGraph(args.tasks, args.dependencies, null, null, new Set(), args.orientation ?? "horizontal", false, args.autoLayoutStrategy ?? "hierarchy", () => undefined);
@@ -1020,7 +1107,9 @@ export function DependencyGraphView(props) {
     }, []);
     const hasVisibleNodes = initialNodes.length > 0;
     const handleAutoLayout = useCallback(() => {
-        const autoLayout = buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, blockedTaskIds, effectiveOrientation, showExecutionStateBadges, autoLayoutStrategy, onSelect, onAddDependentTaskFromNode, onAddChildTaskFromNode, onRemoveTask);
+        const measuredNodeSizes = getMeasuredNodeSizeOverrides(reactFlowRef.current?.getNodes() ??
+            nodesRef.current);
+        const autoLayout = buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, blockedTaskIds, effectiveOrientation, showExecutionStateBadges, autoLayoutStrategy, onSelect, onAddDependentTaskFromNode, onAddChildTaskFromNode, onRemoveTask, measuredNodeSizes);
         beginFittingView();
         flushSync(() => {
             setNodes(autoLayout.nodes);
@@ -1094,7 +1183,8 @@ export function DependencyGraphView(props) {
         tasks,
     ]);
     const handleOrientationChange = useCallback((nextOrientation) => {
-        const autoLayout = buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, blockedTaskIds, nextOrientation, showExecutionStateBadges, autoLayoutStrategy, onSelect, onAddDependentTaskFromNode, onAddChildTaskFromNode, onRemoveTask);
+        const measuredNodeSizes = getMeasuredNodeSizeOverrides(reactFlowRef.current?.getNodes() ?? nodesRef.current);
+        const autoLayout = buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, blockedTaskIds, nextOrientation, showExecutionStateBadges, autoLayoutStrategy, onSelect, onAddDependentTaskFromNode, onAddChildTaskFromNode, onRemoveTask, measuredNodeSizes);
         // Hide while we relayout-then-fit so the user can't see a paint where
         // the new node positions are still being viewed through the old
         // (orientation-stale) viewport.
@@ -1186,7 +1276,7 @@ export function DependencyGraphView(props) {
                             return;
                         }
                         queueLayoutSave(nodesRef.current, viewport);
-                    }, nodeTypes: nodeTypes, minZoom: 0.2, maxZoom: 2, proOptions: { hideAttribution: true }, nodesDraggable: canPersistLayout, nodesConnectable: allowDependencyConnect, isValidConnection: isValidConnection, elementsSelectable: true, children: [_jsxs(Controls, { showInteractive: false, showFitView: false, className: "border-border-default! rounded-lg! shadow-md!", children: [_jsx("button", { type: "button", className: "react-flow__controls-button react-flow__controls-fitview border-border-default text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-100 flex h-6 w-6 items-center justify-center border-t bg-white transition-colors", title: "Fit view", "aria-label": "Fit view", onClick: (event) => {
+                    }, nodeTypes: nodeTypes, edgeTypes: edgeTypes, minZoom: 0.2, maxZoom: 2, proOptions: { hideAttribution: true }, nodesDraggable: canPersistLayout, nodesConnectable: allowDependencyConnect, isValidConnection: isValidConnection, elementsSelectable: true, children: [_jsxs(Controls, { showInteractive: false, showFitView: false, className: "border-border-default! rounded-lg! shadow-md!", children: [_jsx("button", { type: "button", className: "react-flow__controls-button react-flow__controls-fitview border-border-default text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-100 flex h-6 w-6 items-center justify-center border-t bg-white transition-colors", title: "Fit view", "aria-label": "Fit view", onClick: (event) => {
                                         event.stopPropagation();
                                         reactFlowRef.current?.fitView({ padding: 0.2 });
                                     }, children: _jsx(SquareSquare, { className: "shrink-0", strokeWidth: 1.75, style: {