@parhelia/core 0.3.12815 → 0.3.12816

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

@@ -10,7 +10,8 @@ import { getTaskExecutionDisplayFromTask } from "../taskExecutionStatus";
 import { cn } from "../../lib/utils";
 import { saveGraphLayout } from "../services/taskService";
 import { Button } from "../../components/ui/button";
-import { Badge } from "../../components/ui/badge";
+import { Badge, CountBadge } from "../../components/ui/badge";
+import { Popover, PopoverContent, PopoverTrigger, } from "../../components/ui/popover";
 import { MultiSwitchButton } from "../../components/ui/multi-switch-button";
 import { Tooltip, TooltipContent, TooltipTrigger, } from "../../components/ui/tooltip";
 import { Circle, PlayCircle, Clock3, Eye, CheckCircle2, GitBranch, RotateCcw, Loader2, Plus, Maximize2, Minimize2, SquareSquare, AlertCircle, MoveHorizontal, MoveVertical, } from "lucide-react";
@@ -18,7 +19,13 @@ import { DeleteIcon } from "../../components/ui/delete-icon";
 import { TaskAssigneeBadge } from "../components/TaskAssigneeBadge";
 const NODE_WIDTH = 220;
 const NODE_HEIGHT = 96;
+const GROUP_NODE_HEIGHT = 120;
 const SAVE_DEBOUNCE_MS = 500;
+const TASK_GROUP_NODE_ID_PREFIX = "taskgroup:";
+const TEMPLATE_GROUP_MIN_SIZE = 4;
+function isTaskGroupNodeId(nodeId) {
+    return nodeId.startsWith(TASK_GROUP_NODE_ID_PREFIX);
+}
 const EDGE_BLOCKED_BY = "var(--color-component-shared)";
 const EDGE_CHILD_TASK = "var(--color-component-suggestions)";
 const EDGE_RELATED = "var(--color-neutral-grey-50)";
@@ -62,6 +69,140 @@ const PRIORITY_HOVER_STYLES = {
 };
 const DEFAULT_HOVER_STYLE = "hover:border-neutral-grey-10/50";
 const HANDLE_CLASS = "bg-neutral-grey-10! border-border-default! w-2! h-2!";
+function getTaskGroupLabel(members) {
+    const titles = members.map((member) => member.title.trim()).filter(Boolean);
+    if (titles.length === 0)
+        return `${members.length} tasks`;
+    if (titles.every((title) => title === titles[0]))
+        return titles[0];
+    let prefix = titles[0];
+    for (const title of titles.slice(1)) {
+        let prefixLength = 0;
+        const maxLength = Math.min(prefix.length, title.length);
+        while (prefixLength < maxLength &&
+            prefix[prefixLength] === title[prefixLength]) {
+            prefixLength += 1;
+        }
+        prefix = prefix.slice(0, prefixLength);
+        if (!prefix)
+            break;
+    }
+    const trimmedPrefix = prefix.replace(/[\s\p{P}\p{S}]+$/gu, "").trim();
+    return trimmedPrefix || `${members.length} tasks`;
+}
+function collectBlockedTaskIds(tasks, dependencies) {
+    const taskMap = new Map(tasks.map((task) => [task.taskId, task]));
+    const blocked = new Set();
+    for (const task of tasks) {
+        if ((task.executionBlockedByProjectIds?.length ?? 0) > 0) {
+            blocked.add(task.taskId);
+        }
+    }
+    for (const dependency of dependencies) {
+        if (dependency.dependencyType !== "BlockedBy")
+            continue;
+        const blocker = taskMap.get(dependency.dependsOnTaskId);
+        if (!blocker ||
+            normalizeTaskStatus(blocker.status, blocker.executionState) !== "Done") {
+            blocked.add(dependency.taskId);
+        }
+    }
+    return blocked;
+}
+function collectTaskGroups(tasks, selectedTaskId, blockedTaskIds) {
+    const groupedTasks = new Map();
+    const taskIdsWithChildren = new Set(tasks
+        .map((task) => task.parentTaskId?.trim())
+        .filter((taskId) => !!taskId));
+    for (const task of tasks) {
+        const parentTaskId = task.parentTaskId?.trim();
+        const batchId = task.batchId?.trim();
+        if (!parentTaskId || !batchId)
+            continue;
+        const groupId = `${TASK_GROUP_NODE_ID_PREFIX}${parentTaskId}:${batchId}`;
+        const members = groupedTasks.get(groupId) ?? [];
+        members.push(task);
+        groupedTasks.set(groupId, members);
+    }
+    const groups = new Map();
+    const collapsedTargetByTaskId = new Map();
+    for (const [groupId, tasksInGroup] of groupedTasks) {
+        if (tasksInGroup.length < TEMPLATE_GROUP_MIN_SIZE)
+            continue;
+        const members = tasksInGroup.map((task) => {
+            const status = normalizeTaskStatus(task.status, task.executionState);
+            const isBlocked = blockedTaskIds.has(task.taskId) ||
+                task.executionState === "WaitingForDependency";
+            const needsAttention = Boolean(getTaskExecutionDisplayFromTask({
+                taskStatus: status,
+                executionState: task.executionState,
+                isBlocked,
+            })?.needsAttention);
+            return {
+                taskId: task.taskId,
+                taskKey: task.taskKey ?? null,
+                title: task.title,
+                status,
+                executionState: task.executionState,
+                isBlocked,
+                isOutlier: task.taskId === selectedTaskId ||
+                    (!isBlocked && needsAttention) ||
+                    taskIdsWithChildren.has(task.taskId),
+            };
+        });
+        const collapsedMembers = members.filter((member) => !member.isOutlier);
+        if (collapsedMembers.length < 2)
+            continue;
+        const statusCounts = {
+            done: 0,
+            inProgress: 0,
+            needsAttention: 0,
+            todo: 0,
+        };
+        for (const member of members) {
+            if (member.status === "Done") {
+                statusCounts.done += 1;
+            }
+            else if (member.isBlocked) {
+                statusCounts.todo += 1;
+            }
+            else if (getTaskExecutionDisplayFromTask({
+                taskStatus: member.status,
+                executionState: member.executionState,
+                isBlocked: member.isBlocked,
+            })?.needsAttention) {
+                statusCounts.needsAttention += 1;
+            }
+            else if (member.status === "InProgress" || member.status === "Review") {
+                statusCounts.inProgress += 1;
+            }
+            else {
+                statusCounts.todo += 1;
+            }
+        }
+        const firstTask = tasksInGroup[0];
+        const status = members.every((member) => member.status === "Done")
+            ? "Done"
+            : members.some((member) => member.status === "InProgress" || member.status === "Review")
+                ? "InProgress"
+                : "Todo";
+        groups.set(groupId, {
+            groupId,
+            parentTaskId: firstTask.parentTaskId.trim(),
+            batchId: firstTask.batchId.trim(),
+            label: getTaskGroupLabel(members),
+            memberCount: members.length,
+            statusCounts,
+            members,
+            status,
+            isBlocked: members.some((member) => member.isBlocked),
+        });
+        for (const member of collapsedMembers) {
+            collapsedTargetByTaskId.set(member.taskId, groupId);
+        }
+    }
+    return { groups, collapsedTargetByTaskId };
+}
 function TaskGraphNode({ data }) {
     const status = data.status;
     const statusStyle = STATUS_STYLES[status] || STATUS_STYLES.Todo;
@@ -114,8 +255,61 @@ function TaskGraphNode({ data }) {
                                 event.stopPropagation();
                             }, children: _jsx(Plus, { className: "h-3 w-3", strokeWidth: 1 }) }) }), _jsx(TooltipContent, { side: subtaskTooltipSide, sideOffset: 8, children: "Add subtask" })] })), _jsx(Handle, { type: "source", position: Position.Right, id: "right", className: HANDLE_CLASS, "data-testid": `dependency-graph-source-right-${data.taskId}` }), _jsx(Handle, { type: "source", position: Position.Bottom, id: "bottom", className: HANDLE_CLASS, "data-testid": `dependency-graph-source-bottom-${data.taskId}` })] }));
 }
+function TaskGroupGraphNode({ data }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const breakdown = [
+        {
+            key: "done",
+            label: "Done",
+            count: data.statusCounts.done,
+            icon: STATUS_STYLES.Done.icon,
+            className: STATUS_STYLES.Done.text,
+        },
+        {
+            key: "inProgress",
+            label: "In progress",
+            count: data.statusCounts.inProgress,
+            icon: STATUS_STYLES.InProgress.icon,
+            className: STATUS_STYLES.InProgress.text,
+        },
+        {
+            key: "needsAttention",
+            label: "Needs attention",
+            count: data.statusCounts.needsAttention,
+            icon: AlertCircle,
+            className: "text-feedback-red",
+        },
+        {
+            key: "todo",
+            label: "To do",
+            count: data.statusCounts.todo,
+            icon: STATUS_STYLES.Todo.icon,
+            className: STATUS_STYLES.Todo.text,
+        },
+    ].filter((item) => item.count > 0);
+    return (_jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsxs("div", { className: "relative overflow-visible", style: { width: NODE_WIDTH }, "data-testid": `dependency-graph-group-node-${data.groupId}`, children: [_jsx("div", { className: "border-border-default bg-neutral-grey-5 absolute inset-0 translate-x-2 translate-y-2 rounded-lg border shadow-sm" }), _jsx("div", { className: "border-border-default absolute inset-0 translate-x-1 translate-y-1 rounded-lg border bg-white shadow-sm" }), _jsx(Handle, { type: "target", position: Position.Left, id: "left", className: HANDLE_CLASS, "data-testid": `dependency-graph-group-target-left-${data.groupId}` }), _jsx(Handle, { type: "target", position: Position.Top, id: "top", className: HANDLE_CLASS, "data-testid": `dependency-graph-group-target-top-${data.groupId}` }), _jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "border-border-default relative z-10 flex min-h-30 w-full cursor-pointer flex-col gap-2.5 rounded-lg border bg-white p-3 text-left shadow-sm transition-all hover:shadow-md", "aria-label": `Show ${data.memberCount} tasks in ${data.label}`, children: [_jsxs("div", { className: "flex w-full min-w-0 items-start justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-muted-foreground mb-1 text-[10px] font-medium tracking-widest uppercase", children: "Batch" }), _jsx("div", { className: "line-clamp-2 text-sm leading-snug font-medium", children: data.label })] }), _jsx(CountBadge, { children: data.memberCount })] }), _jsxs("div", { className: "flex w-full flex-wrap items-center gap-x-2.5 gap-y-1", children: [breakdown.map((item) => {
+                                            const Icon = item.icon;
+                                            return (_jsxs("span", { className: cn("inline-flex items-center gap-1 text-[10px] font-medium tabular-nums", item.className), title: `${item.count} ${item.label.toLowerCase()}`, children: [_jsx(Icon, { className: "h-3 w-3" }), item.count] }, item.key));
+                                        }), data.isBlocked ? (_jsx(Badge, { variant: "outline", size: "sm", className: "bg-feedback-orange-light text-feedback-orange ml-auto border-transparent", children: "Blocked" })) : null] }), _jsxs("div", { className: "text-neutral-grey-50 text-[10px]", children: [data.memberCount, " tasks"] })] }) }), _jsx(Handle, { type: "source", position: Position.Right, id: "right", className: HANDLE_CLASS, "data-testid": `dependency-graph-group-source-right-${data.groupId}` }), _jsx(Handle, { type: "source", position: Position.Bottom, id: "bottom", className: HANDLE_CLASS, "data-testid": `dependency-graph-group-source-bottom-${data.groupId}` })] }), _jsx(PopoverContent, { className: "nodrag nopan max-h-64 w-72 overflow-y-auto p-1.5", onClick: (event) => event.stopPropagation(), children: _jsx("div", { className: "flex flex-col gap-0.5", children: data.members.map((member) => {
+                        const executionDisplay = member.isBlocked
+                            ? null
+                            : getTaskExecutionDisplayFromTask({
+                                taskStatus: member.status,
+                                executionState: member.executionState,
+                                isBlocked: member.isBlocked,
+                            });
+                        const statusStyle = STATUS_STYLES[member.status];
+                        const StatusIcon = statusStyle.icon;
+                        return (_jsxs("button", { type: "button", className: "hover:bg-neutral-grey-5 flex w-full items-center gap-2 rounded px-2 py-2 text-left transition-colors", "data-testid": `dependency-graph-group-member-${member.taskId}`, onClick: (event) => {
+                                event.stopPropagation();
+                                data.onSelect(member.taskId);
+                                setIsOpen(false);
+                            }, children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-xs font-medium", children: member.title }), _jsxs("span", { className: "text-neutral-grey-50 flex items-center gap-1 text-[10px]", children: [member.taskKey || member.taskId.slice(0, 8).toUpperCase(), member.isOutlier ? (_jsx("span", { className: "text-feedback-blue", children: "\u2022 shown in graph" })) : null] })] }), member.isBlocked ? (_jsx(Badge, { variant: "outline", size: "sm", className: "bg-feedback-orange-light text-feedback-orange border-transparent", children: "Blocked" })) : executionDisplay ? (_jsxs(Badge, { variant: executionDisplay.variant, size: "sm", className: cn("max-w-28 font-bold", executionDisplay.className), children: [executionDisplay.showSpinner ? (_jsx(Loader2, { className: "h-2.5 w-2.5 animate-spin" })) : null, executionDisplay.label] })) : (_jsxs(Badge, { variant: "outline", size: "sm", className: cn("border-transparent font-bold", statusStyle.bg, statusStyle.text), children: [_jsx(StatusIcon, {}), getTaskStatusLabel(member.status)] }))] }, member.taskId));
+                    }) }) })] }));
+}
 const nodeTypes = {
     taskNode: TaskGraphNode,
+    taskGroupNode: TaskGroupGraphNode,
 };
 function getHierarchyOrthogonalPath({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, }) {
     const sameColumn = Math.abs(sourceX - targetX) < 1;
@@ -173,7 +367,7 @@ function normalizeGraphNodeSize(size) {
 function getGraphNodeSize(nodeId, nodeSizeOverrides) {
     return (normalizeGraphNodeSize(nodeSizeOverrides?.get(nodeId)) ?? {
         width: NODE_WIDTH,
-        height: NODE_HEIGHT,
+        height: isTaskGroupNodeId(nodeId) ? GROUP_NODE_HEIGHT : NODE_HEIGHT,
     });
 }
 function getMeasuredNodeSizeOverrides(nodes) {
@@ -473,13 +667,27 @@ function buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, b
     const taskMap = new Map();
     for (const t of tasks)
         taskMap.set(t.taskId, t);
-    const visibleTasks = tasks;
-    const childRelationshipKeys = new Set(visibleTasks
-        .filter((task) => !!task.parentTaskId)
-        .map((task) => `${task.parentTaskId}->${task.taskId}`));
+    const { groups, collapsedTargetByTaskId } = collectTaskGroups(tasks, selectedTaskId, blockedTaskIds);
+    const mapTaskId = (taskId) => collapsedTargetByTaskId.get(taskId) ?? taskId;
+    const visibleTasks = tasks.filter((task) => !collapsedTargetByTaskId.has(task.taskId));
+    const childRelationshipKeys = new Set();
+    for (const task of visibleTasks) {
+        if (!task.parentTaskId)
+            continue;
+        const source = mapTaskId(task.parentTaskId);
+        if (source !== task.taskId) {
+            childRelationshipKeys.add(`${source}->${task.taskId}`);
+        }
+    }
+    for (const group of groups.values()) {
+        const source = mapTaskId(group.parentTaskId);
+        if (source !== group.groupId) {
+            childRelationshipKeys.add(`${source}->${group.groupId}`);
+        }
+    }
     const dependencyHandles = getDependencyHandles(orientation);
     const hierarchyHandles = getHierarchyHandles(orientation, autoLayoutStrategy);
-    const nodes = visibleTasks.map((task) => ({
+    const taskNodes = visibleTasks.map((task) => ({
         id: task.taskId,
         type: "taskNode",
         position: { x: 0, y: 0 },
@@ -495,7 +703,8 @@ function buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, b
             assigneeType: task.assigneeType ?? null,
             assigneeDisplayName: task.assigneeDisplayName ?? null,
             isSelected: task.taskId === selectedTaskId,
-            isBlocked: blockedTaskIds.has(task.taskId),
+            isBlocked: blockedTaskIds.has(task.taskId) ||
+                task.executionState === "WaitingForDependency",
             orientation,
             dependencySourceHandle: dependencyHandles.source,
             hierarchySourceHandle: hierarchyHandles.source,
@@ -505,27 +714,33 @@ function buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, b
             onRemoveTask,
         },
     }));
+    const groupNodes = Array.from(groups.values()).map((group) => ({
+        id: group.groupId,
+        type: "taskGroupNode",
+        position: { x: 0, y: 0 },
+        data: {
+            ...group,
+            orientation,
+            dependencySourceHandle: dependencyHandles.source,
+            hierarchySourceHandle: hierarchyHandles.source,
+            onSelect,
+        },
+    }));
+    const nodes = [...taskNodes, ...groupNodes];
     const depSourceHandle = dependencyHandles.source;
     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) &&
-        !childRelationshipKeys.has(`${dep.dependsOnTaskId}->${dep.taskId}`))
-        .map((dep) => {
-        const isBlockedBy = dep.dependencyType === "BlockedBy";
+    const buildDependencyEdge = (args) => {
+        const isBlockedBy = args.dependencyType === "BlockedBy";
+        const isSelected = args.isSelected === true;
         const strokeColor = isBlockedBy ? EDGE_BLOCKED_BY : EDGE_RELATED;
-        const sourceTaskType = String(taskMap.get(dep.dependsOnTaskId)?.taskType ?? "").toLowerCase();
-        const isDecisionEdge = isBlockedBy && sourceTaskType === "decisionpoint";
-        const isSelected = dep.taskId === selectedTaskId &&
-            dep.dependsOnTaskId === selectedDependencyId;
         return {
-            id: dep.dependencyId,
-            source: dep.dependsOnTaskId,
-            target: dep.taskId,
+            id: args.id,
+            source: args.source,
+            target: args.target,
             sourceHandle: depSourceHandle,
             targetHandle: depTargetHandle,
             type: dependencyEdgeType,
@@ -533,7 +748,7 @@ function buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, b
             style: {
                 stroke: isSelected ? "var(--color-neutral-grey-100)" : strokeColor,
                 strokeWidth: isSelected ? 3 : isBlockedBy ? 2 : 1.5,
-                strokeDasharray: isDecisionEdge ? "6 4" : undefined,
+                strokeDasharray: args.isDecisionEdge ? "6 4" : undefined,
             },
             markerEnd: {
                 type: MarkerType.ArrowClosed,
@@ -541,28 +756,88 @@ function buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, b
                 width: 16,
                 height: 16,
             },
-            label: isBlockedBy
-                ? isDecisionEdge
-                    ? "decision"
-                    : undefined
-                : "related",
+            label: args.count && args.count > 1
+                ? `×${args.count}`
+                : isBlockedBy
+                    ? args.isDecisionEdge
+                        ? "decision"
+                        : undefined
+                    : "related",
             labelStyle: {
                 fontSize: 10,
-                fill: isDecisionEdge ? EDGE_BLOCKED_BY : EDGE_RELATED,
+                fill: args.isDecisionEdge ? EDGE_BLOCKED_BY : EDGE_RELATED,
             },
             data: {
                 relationship: "dependency",
-                taskId: dep.taskId,
-                dependsOnTaskId: dep.dependsOnTaskId,
+                dependencyType: args.dependencyType,
+                count: args.count,
+                taskId: args.taskId,
+                dependsOnTaskId: args.dependsOnTaskId,
             },
-            selectable: true,
+            selectable: args.selectable,
         };
-    });
+    };
+    const dependencyEdges = [];
+    const syntheticDependencies = new Map();
+    for (const dep of dependencies) {
+        if (!taskMap.has(dep.taskId) || !taskMap.has(dep.dependsOnTaskId))
+            continue;
+        const source = mapTaskId(dep.dependsOnTaskId);
+        const target = mapTaskId(dep.taskId);
+        if (source === target ||
+            childRelationshipKeys.has(`${source}->${target}`)) {
+            continue;
+        }
+        const isBlockedBy = dep.dependencyType === "BlockedBy";
+        const sourceTaskType = String(taskMap.get(dep.dependsOnTaskId)?.taskType ?? "").toLowerCase();
+        const isDecisionEdge = isBlockedBy && sourceTaskType === "decisionpoint";
+        const wasRemapped = source !== dep.dependsOnTaskId || target !== dep.taskId;
+        if (!wasRemapped) {
+            dependencyEdges.push(buildDependencyEdge({
+                id: dep.dependencyId,
+                source,
+                target,
+                dependencyType: dep.dependencyType,
+                isDecisionEdge,
+                isSelected: dep.taskId === selectedTaskId &&
+                    dep.dependsOnTaskId === selectedDependencyId,
+                taskId: dep.taskId,
+                dependsOnTaskId: dep.dependsOnTaskId,
+                selectable: true,
+            }));
+            continue;
+        }
+        const key = `${source}->${target}`;
+        const existing = syntheticDependencies.get(key);
+        if (existing) {
+            existing.count += 1;
+            if (isBlockedBy)
+                existing.dependencyType = "BlockedBy";
+            if (isDecisionEdge)
+                existing.isDecisionEdge = true;
+        }
+        else {
+            syntheticDependencies.set(key, {
+                source,
+                target,
+                dependencyType: isBlockedBy ? "BlockedBy" : "RelatedTo",
+                isDecisionEdge,
+                count: 1,
+            });
+        }
+    }
+    for (const [key, summary] of Array.from(syntheticDependencies.entries()).sort(([a], [b]) => a.localeCompare(b))) {
+        dependencyEdges.push(buildDependencyEdge({
+            id: `groupdep:${key}`,
+            ...summary,
+            selectable: false,
+        }));
+    }
     const hierarchyEdges = visibleTasks
         .filter((task) => !!task.parentTaskId && taskMap.has(task.parentTaskId))
         .map((task) => ({
         id: `parent:${task.parentTaskId}:${task.taskId}`,
-        source: task.parentTaskId,
+        source: mapTaskId(task.parentTaskId),
         target: task.taskId,
         sourceHandle: hierSourceHandle,
         targetHandle: hierTargetHandle,
@@ -581,13 +856,35 @@ function buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, b
             relationship: "hierarchy",
         },
     }));
+    for (const group of groups.values()) {
+        hierarchyEdges.push({
+            id: `parent:${group.parentTaskId}:${group.groupId}`,
+            source: mapTaskId(group.parentTaskId),
+            target: group.groupId,
+            sourceHandle: hierSourceHandle,
+            targetHandle: hierTargetHandle,
+            type: hierarchyEdgeType,
+            style: {
+                stroke: "var(--color-component-default)",
+                strokeWidth: 1.5,
+            },
+            markerEnd: {
+                type: MarkerType.ArrowClosed,
+                color: "var(--color-component-default)",
+                width: 16,
+                height: 16,
+            },
+            data: { relationship: "hierarchy" },
+        });
+    }
     const edges = [...dependencyEdges, ...hierarchyEdges];
     if (nodes.length === 0)
         return { nodes: [], edges: [] };
     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);
+    const blockedTaskIds = collectBlockedTaskIds(args.tasks, args.dependencies);
+    return buildGraph(args.tasks, args.dependencies, args.selectedTaskId ?? null, null, blockedTaskIds, args.orientation ?? "horizontal", false, args.autoLayoutStrategy ?? "hierarchy", () => undefined);
 }
 function applySavedLayout(nodes, savedLayout) {
     if (!savedLayout?.nodes?.length) {
@@ -600,10 +897,30 @@ function applySavedLayout(nodes, savedLayout) {
             y: node.y,
         },
     ]));
-    return nodes.map((node) => ({
-        ...node,
-        position: positionsByTaskId.get(node.id) ?? node.position,
-    }));
+    return nodes.map((node) => {
+        if (node.type === "taskGroupNode") {
+            const memberPositions = node.data.members
+                .filter((member) => !member.isOutlier)
+                .map((member) => positionsByTaskId.get(member.taskId))
+                .filter((position) => !!position);
+            if (memberPositions.length > 0) {
+                return {
+                    ...node,
+                    position: {
+                        x: memberPositions.reduce((sum, position) => sum + position.x, 0) /
+                            memberPositions.length,
+                        y: memberPositions.reduce((sum, position) => sum + position.y, 0) /
+                            memberPositions.length,
+                    },
+                };
+            }
+            return node;
+        }
+        return {
+            ...node,
+            position: positionsByTaskId.get(node.id) ?? node.position,
+        };
+    });
 }
 function preserveNodePositions(previousNodes, nextNodes) {
     const previousPositions = new Map(previousNodes.map((node) => [node.id, node.position]));
@@ -716,17 +1033,11 @@ function isGraphConnectionValid(connection, tasks, dependencies, orientation, au
     }
     return isDependencyConnectionValid(connection, tasks, dependencies, orientation);
 }
-function createLayoutSignature(layoutKey, nodes, viewport, orientation) {
+function createLayoutSignature(layoutKey, nodes, viewport, orientation, savedLayout, collapsedMemberIds = new Set()) {
     return JSON.stringify({
         layoutKey,
         orientation,
-        nodes: nodes
-            .map((node) => ({
-            taskId: node.id,
-            x: node.position.x,
-            y: node.position.y,
-        }))
-            .sort((a, b) => a.taskId.localeCompare(b.taskId)),
+        nodes: buildPersistableLayoutNodes(nodes, savedLayout, collapsedMemberIds).sort((a, b) => a.taskId.localeCompare(b.taskId)),
         viewport: viewport
             ? {
                 x: viewport.x,
@@ -736,22 +1047,76 @@ function createLayoutSignature(layoutKey, nodes, viewport, orientation) {
             : null,
     });
 }
+function buildPersistableLayoutNodes(nodes, savedLayout, collapsedMemberIds) {
+    const renderedTaskIds = new Set();
+    const persistableNodes = [];
+    for (const node of nodes) {
+        if (node.type === "taskGroupNode")
+            continue;
+        renderedTaskIds.add(node.id);
+        persistableNodes.push({
+            taskId: node.id,
+            x: node.position.x,
+            y: node.position.y,
+        });
+    }
+    for (const savedNode of savedLayout?.nodes ?? []) {
+        if (collapsedMemberIds.has(savedNode.taskId) &&
+            !renderedTaskIds.has(savedNode.taskId)) {
+            persistableNodes.push({
+                taskId: savedNode.taskId,
+                x: savedNode.x,
+                y: savedNode.y,
+            });
+            renderedTaskIds.add(savedNode.taskId);
+        }
+    }
+    return persistableNodes;
+}
 function createGraphSyncSignature(nodes, edges) {
     return JSON.stringify({
         nodes: nodes
-            .map((node) => ({
-            id: node.id,
-            x: node.position.x,
-            y: node.position.y,
-            selected: node.data.isSelected,
-            status: node.data.status,
-            executionState: node.data.executionState ?? null,
-            priority: node.data.priority ?? null,
-            blocked: node.data.isBlocked,
-            taskType: node.data.taskType ?? null,
-            assigneeType: node.data.assigneeType ?? null,
-            assignee: node.data.assigneeDisplayName ?? null,
-        }))
+            .map((node) => {
+            if (node.type === "taskGroupNode") {
+                return {
+                    id: node.id,
+                    type: node.type,
+                    x: node.position.x,
+                    y: node.position.y,
+                    memberCount: node.data.memberCount,
+                    statusCounts: node.data.statusCounts,
+                    label: node.data.label,
+                    status: node.data.status,
+                    blocked: node.data.isBlocked,
+                    members: node.data.members
+                        .map((member) => ({
+                        taskId: member.taskId,
+                        taskKey: member.taskKey,
+                        title: member.title,
+                        status: member.status,
+                        executionState: member.executionState ?? null,
+                        isBlocked: member.isBlocked,
+                        isOutlier: member.isOutlier,
+                    }))
+                        .sort((a, b) => a.taskId.localeCompare(b.taskId)),
+                };
+            }
+            return {
+                id: node.id,
+                type: node.type,
+                x: node.position.x,
+                y: node.position.y,
+                title: node.data.title,
+                selected: node.data.isSelected,
+                status: node.data.status,
+                executionState: node.data.executionState ?? null,
+                priority: node.data.priority ?? null,
+                blocked: node.data.isBlocked,
+                taskType: node.data.taskType ?? null,
+                assigneeType: node.data.assigneeType ?? null,
+                assignee: node.data.assigneeDisplayName ?? null,
+            };
+        })
             .sort((a, b) => a.id.localeCompare(b.id)),
         edges: edges
             .map((edge) => ({
@@ -760,6 +1125,9 @@ function createGraphSyncSignature(nodes, edges) {
             target: edge.target,
             sourceHandle: edge.sourceHandle ?? null,
             targetHandle: edge.targetHandle ?? null,
+            relationship: edge.data?.relationship ?? null,
+            dependencyType: edge.data?.dependencyType ?? null,
+            count: edge.data?.count ?? null,
         }))
             .sort((a, b) => a.id.localeCompare(b.id)),
     });
@@ -776,33 +1144,12 @@ export function DependencyGraphView(props) {
         : null;
     const [transientOrientation, setTransientOrientation] = useState(null);
     const effectiveOrientation = transientOrientation ?? savedLayoutOrientation ?? fallbackOrientation;
-    const taskMap = useMemo(() => {
-        const m = new Map();
-        for (const t of tasks)
-            m.set(t.taskId, t);
-        return m;
-    }, [tasks]);
     const blockedTaskIds = useMemo(() => {
         if (!highlightBlockedTasks) {
             return new Set();
         }
-        const blocked = new Set();
-        for (const task of tasks) {
-            if ((task.executionBlockedByProjectIds?.length ?? 0) > 0) {
-                blocked.add(task.taskId);
-            }
-        }
-        for (const dep of dependencies) {
-            if (dep.dependencyType !== "BlockedBy")
-                continue;
-            const blocker = taskMap.get(dep.dependsOnTaskId);
-            if (!blocker ||
-                normalizeTaskStatus(blocker.status, blocker.executionState) !== "Done") {
-                blocked.add(dep.taskId);
-            }
-        }
-        return blocked;
-    }, [dependencies, highlightBlockedTasks, taskMap]);
+        return collectBlockedTaskIds(tasks, dependencies);
+    }, [dependencies, highlightBlockedTasks, tasks]);
     const onSelect = useCallback((taskId) => onSelectTask(taskId), [onSelectTask]);
     const { nodes: initialNodes, edges: initialEdges } = useMemo(() => buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, blockedTaskIds, effectiveOrientation, showExecutionStateBadges, autoLayoutStrategy, onSelect, onAddDependentTaskFromNode, onAddChildTaskFromNode, onRemoveTask), [
         tasks,
@@ -818,6 +1165,18 @@ export function DependencyGraphView(props) {
         onAddChildTaskFromNode,
         onRemoveTask,
     ]);
+    const collapsedMemberIds = useMemo(() => {
+        const ids = new Set();
+        for (const node of initialNodes) {
+            if (node.type !== "taskGroupNode")
+                continue;
+            for (const member of node.data.members) {
+                if (!member.isOutlier)
+                    ids.add(member.taskId);
+            }
+        }
+        return ids;
+    }, [initialNodes]);
     const [nodes, setNodes, onNodesChangeBase] = useNodesState(initialNodes);
     const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
     const nodesRef = useRef(nodes);
@@ -959,17 +1318,13 @@ export function DependencyGraphView(props) {
         if (!canPersistLayout) {
             return;
         }
-        const signature = createLayoutSignature(effectiveLayoutKey, nextNodes, viewport, nextOrientation);
+        const signature = createLayoutSignature(effectiveLayoutKey, nextNodes, viewport, nextOrientation, savedLayout, collapsedMemberIds);
         if (signature === lastSavedSignatureRef.current) {
             return;
         }
         try {
             const layoutPayload = {
-                nodes: nextNodes.map((node) => ({
-                    taskId: node.id,
-                    x: node.position.x,
-                    y: node.position.y,
-                })),
+                nodes: buildPersistableLayoutNodes(nextNodes, savedLayout, collapsedMemberIds),
                 orientation: nextOrientation,
                 viewport: viewport == null
                     ? null
@@ -1015,17 +1370,18 @@ export function DependencyGraphView(props) {
         }
     }, [
         canPersistLayout,
+        collapsedMemberIds,
         effectiveLayoutKey,
-        effectiveOrientation,
         onLayoutSaved,
         onPersistLayout,
         projectId,
+        savedLayout,
     ]);
     const queueLayoutSave = useCallback((nextNodes, viewport, nextOrientation = effectiveOrientation) => {
         if (!canPersistLayout) {
             return;
         }
-        const signature = createLayoutSignature(effectiveLayoutKey, nextNodes, viewport, nextOrientation);
+        const signature = createLayoutSignature(effectiveLayoutKey, nextNodes, viewport, nextOrientation, savedLayout, collapsedMemberIds);
         if (signature === lastSavedSignatureRef.current) {
             return;
         }
@@ -1043,10 +1399,12 @@ export function DependencyGraphView(props) {
         }, layoutSaveDebounceMs);
     }, [
         canPersistLayout,
+        collapsedMemberIds,
         effectiveLayoutKey,
         effectiveOrientation,
         layoutSaveDebounceMs,
         persistLayout,
+        savedLayout,
     ]);
     const restoreViewport = useCallback(() => {
         const instance = reactFlowRef.current;
@@ -1059,7 +1417,7 @@ export function DependencyGraphView(props) {
             skipNextMoveEndSaveRef.current = true;
             window.requestAnimationFrame(() => {
                 reactFlowRef.current?.setViewport(viewport, { duration: 0 });
-                lastSavedSignatureRef.current = createLayoutSignature(effectiveLayoutKey, nodesRef.current, viewport, effectiveOrientation);
+                lastSavedSignatureRef.current = createLayoutSignature(effectiveLayoutKey, nodesRef.current, viewport, effectiveOrientation, savedLayout, collapsedMemberIds);
             });
             return;
         }
@@ -1078,14 +1436,21 @@ export function DependencyGraphView(props) {
             const viewport = reactFlowRef.current?.getViewport() ?? null;
             queueLayoutSave(nodesRef.current, viewport, nextOrientation);
         });
-    }, [effectiveLayoutKey, effectiveOrientation, queueLayoutSave]);
+    }, [
+        collapsedMemberIds,
+        effectiveLayoutKey,
+        effectiveOrientation,
+        queueLayoutSave,
+        savedLayout,
+    ]);
     useEffect(() => {
         const shouldApplySavedLayout = lastAppliedLayoutKeyRef.current !== effectiveLayoutKey ||
             lastAppliedLayoutSignatureRef.current !== savedLayoutSignature;
         const nextNodeIdSignature = initialNodes.map((node) => node.id).join("|");
-        const savedLayoutNodeCount = savedLayout?.nodes?.length ?? 0;
+        const savedLayoutTaskIds = new Set((savedLayout?.nodes ?? []).map((node) => node.taskId));
+        const hasRenderedNodeMissingFromSavedLayout = initialNodes.some((node) => node.type !== "taskGroupNode" && !savedLayoutTaskIds.has(node.id));
         const shouldAutoLayoutForHierarchy = autoLayoutStrategy === "hierarchy" &&
-            (savedLayoutNodeCount < initialNodes.length ||
+            (hasRenderedNodeMissingFromSavedLayout ||
                 (lastAppliedNodeIdSignatureRef.current !== null &&
                     lastAppliedNodeIdSignatureRef.current !== nextNodeIdSignature));
         const positionedNodes = shouldApplySavedLayout
@@ -1117,7 +1482,7 @@ export function DependencyGraphView(props) {
                 shouldAutoLayoutForHierarchy || !savedLayout?.viewport;
             if (!savedLayout?.viewport || shouldAutoLayoutForHierarchy) {
                 lastSavedSignatureRef.current = savedLayout?.nodes?.length
-                    ? createLayoutSignature(effectiveLayoutKey, nextNodes, null, effectiveOrientation)
+                    ? createLayoutSignature(effectiveLayoutKey, nextNodes, null, effectiveOrientation, savedLayout, collapsedMemberIds)
                     : null;
             }
             if (shouldAutoLayoutForHierarchy) {
@@ -1134,6 +1499,7 @@ export function DependencyGraphView(props) {
         }
     }, [
         autoLayoutStrategy,
+        collapsedMemberIds,
         getLatestGraphNodes,
         initialEdges,
         initialNodes,
@@ -1305,6 +1671,9 @@ export function DependencyGraphView(props) {
                         }
                     }, onNodeClick: (_event, node) => {
                         focusGraphContainer();
+                        if (node.type === "taskGroupNode") {
+                            return;
+                        }
                         if (performance.now() < suppressNodeSelectionUntilRef.current) {
                             return;
                         }
@@ -1312,6 +1681,9 @@ export function DependencyGraphView(props) {
                         onSelectTask(node.id);
                     }, onNodeDragStart: (_event, node) => {
                         focusGraphContainer();
+                        if (node.type === "taskGroupNode") {
+                            return;
+                        }
                         if (performance.now() < suppressNodeSelectionUntilRef.current) {
                             return;
                         }