@parhelia/core 0.1.12368 → 0.1.12390

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

@@ -5,13 +5,19 @@ import Dagre from "@dagrejs/dagre";
 import "@xyflow/react/dist/style.css";
 import { toast } from "sonner";
 import { normalizeTaskStatus, getTaskStatusLabel } from "../taskStatus";
+import { getTaskExecutionDisplayFromTask } from "../taskExecutionStatus";
 import { cn } from "../../lib/utils";
 import { saveGraphLayout } from "../services/taskService";
 import { Button } from "../../components/ui/button";
-import { Circle, PlayCircle, Clock3, Eye, CheckCircle2, ArrowUp, ArrowDown, Minus, Flame, GitBranch, RotateCcw, } from "lucide-react";
+import { Badge } from "../../components/ui/badge";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../components/ui/tooltip";
+import { Circle, PlayCircle, Clock3, Eye, CheckCircle2, ArrowUp, ArrowDown, Minus, Flame, GitBranch, RotateCcw, Loader2, Plus, Trash2, } from "lucide-react";
 const NODE_WIDTH = 220;
 const NODE_HEIGHT = 80;
 const SAVE_DEBOUNCE_MS = 500;
+const EDGE_BLOCKED_BY = "#f97316";
+const EDGE_CHILD_TASK = "#0d9488";
+const EDGE_RELATED = "#94a3b8";
 const STATUS_STYLES = {
     Todo: { bg: "bg-slate-100", text: "text-slate-600", icon: Circle },
     InProgress: { bg: "bg-blue-100", text: "text-blue-700", icon: PlayCircle },
@@ -25,22 +31,147 @@ const PRIORITY_CONFIG = {
     Medium: { icon: Minus, color: "text-yellow-500", label: "Medium" },
     Low: { icon: ArrowDown, color: "text-slate-400", label: "Low" },
 };
+const HANDLE_CLASS = "bg-slate-300! border-slate-400! w-2! h-2!";
 function TaskGraphNode({ data }) {
     const status = data.status;
     const statusStyle = STATUS_STYLES[status] || STATUS_STYLES.Todo;
     const StatusIcon = statusStyle.icon;
+    const executionDisplay = data.showExecutionStateBadge
+        ? getTaskExecutionDisplayFromTask({
+            taskStatus: status,
+            executionState: data.executionState,
+            isBlocked: data.isBlocked,
+        })
+        : null;
     const priorityCfg = data.priority ? PRIORITY_CONFIG[data.priority] : null;
     const PriorityIcon = priorityCfg?.icon;
-    return (_jsxs("div", { className: cn("cursor-pointer rounded-lg border bg-white px-3 py-2 shadow-sm transition-all", data.isSelected
+    const actionButtonClass = "nodrag nopan absolute z-20 flex h-5 w-5 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-500 shadow-sm transition-colors hover:border-blue-200 hover:bg-blue-50 hover:text-blue-600";
+    return (_jsxs("div", { className: cn("relative cursor-pointer rounded-lg border bg-white px-3 py-2 shadow-sm transition-all", data.isSelected
             ? "ring-primary border-primary/50 ring-2"
-            : "border-slate-200 hover:border-slate-300 hover:shadow-md", data.isBlocked && !data.isSelected && "border-red-200 bg-red-50/40"), style: { width: NODE_WIDTH }, onClick: () => data.onSelect(data.taskId), children: [_jsx(Handle, { type: "target", position: Position.Top, className: "bg-slate-300! border-slate-400! w-2! h-2!" }), _jsxs("div", { className: "flex items-center justify-between gap-1", children: [_jsx("span", { className: "truncate text-[10px] font-medium text-slate-400", children: data.taskKey || data.taskId.slice(0, 8).toUpperCase() }), PriorityIcon && (_jsx(PriorityIcon, { className: cn("h-3 w-3 shrink-0", priorityCfg.color) }))] }), _jsx("div", { className: "mt-0.5 truncate text-xs font-medium text-slate-800", children: data.title }), _jsxs("div", { className: "mt-1 flex items-center gap-1.5", children: [_jsxs("span", { className: cn("inline-flex items-center gap-0.5 rounded-full px-1.5 py-0 text-[10px] font-medium", statusStyle.bg, statusStyle.text), children: [_jsx(StatusIcon, { className: "h-2.5 w-2.5" }), getTaskStatusLabel(status)] }), data.assigneeDisplayName && (_jsxs("span", { className: "truncate text-[10px] text-slate-400", children: ["@", data.assigneeDisplayName] }))] }), _jsx(Handle, { type: "source", position: Position.Bottom, className: "bg-slate-300! border-slate-400! w-2! h-2!" })] }));
+            : "border-slate-200 hover:border-slate-300 hover:shadow-md", data.isBlocked && !data.isSelected && "border-red-200 bg-red-50/40"), style: { width: NODE_WIDTH }, "data-testid": `dependency-graph-node-${data.taskId}`, children: [_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 items-start justify-between gap-1", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center justify-between gap-1", children: [_jsx("span", { className: "truncate text-[10px] font-medium text-slate-400", children: data.taskKey || data.taskId.slice(0, 8).toUpperCase() }), PriorityIcon && (_jsx(PriorityIcon, { className: cn("h-3 w-3 shrink-0", priorityCfg.color) }))] }), data.onRemoveTask && (_jsx("button", { type: "button", className: "text-slate-400 hover:bg-red-50 hover:text-red-600 -mr-0.5 -mt-px 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(Trash2, { className: "h-2.5 w-2.5", strokeWidth: 1.5 }) }))] }), _jsx("div", { className: "mt-0.5 truncate text-xs font-medium text-slate-800", children: data.title }), _jsxs("div", { className: "mt-1 flex items-center gap-1.5", children: [executionDisplay ? (_jsxs(Badge, { variant: executionDisplay.variant, className: cn("h-5 max-w-full px-1.5 text-[10px] font-bold uppercase tracking-wider", executionDisplay.className), children: [executionDisplay.showSpinner && (_jsx(Loader2, { className: "mr-1 h-2.5 w-2.5 animate-spin" })), executionDisplay.label] })) : (_jsxs("span", { className: cn("inline-flex items-center gap-0.5 rounded-full px-1.5 py-0 text-[10px] font-medium", statusStyle.bg, statusStyle.text), children: [_jsx(StatusIcon, { className: "h-2.5 w-2.5" }), getTaskStatusLabel(status)] })), data.assigneeDisplayName && (_jsxs("span", { className: "truncate text-[10px] text-slate-400", children: ["@", data.assigneeDisplayName] }))] }), data.onAddDependentTaskFromNode && (_jsxs(Tooltip, { delayDuration: 250, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", className: cn(actionButtonClass, "top-1/2 right-0 translate-x-[calc(100%+6px)] -translate-y-1/2"), "aria-label": "Add dependent task", "data-testid": `dependency-graph-add-dependent-task-${data.taskId}`, onClick: (event) => {
+                                event.stopPropagation();
+                                data.onSelect(data.taskId);
+                                data.onAddDependentTaskFromNode?.(data.taskId);
+                            }, onMouseDown: (event) => {
+                                event.stopPropagation();
+                            }, children: _jsx(Plus, { className: "h-3 w-3", strokeWidth: 1.75 }) }) }), _jsx(TooltipContent, { side: "right", sideOffset: 8, children: "Add dependent task" })] })), data.onAddChildTaskFromNode && (_jsxs(Tooltip, { delayDuration: 250, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", className: cn(actionButtonClass, "bottom-0 left-1/2 -translate-x-1/2 translate-y-[calc(100%+6px)]"), "aria-label": "Add subtask", "data-testid": `dependency-graph-add-subtask-${data.taskId}`, onClick: (event) => {
+                                event.stopPropagation();
+                                data.onSelect(data.taskId);
+                                data.onAddChildTaskFromNode?.(data.taskId);
+                            }, onMouseDown: (event) => {
+                                event.stopPropagation();
+                            }, children: _jsx(Plus, { className: "h-3 w-3", strokeWidth: 1.75 }) }) }), _jsx(TooltipContent, { side: "bottom", 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}` })] }));
 }
 const nodeTypes = {
     taskNode: TaskGraphNode,
 };
-function layoutGraph(nodes, edges) {
+const HIERARCHY_CHILD_INDENT = 24;
+const HIERARCHY_CHILD_GAP = 32;
+const HIERARCHY_SUBTREE_GAP = 80;
+/**
+ * Compound layout for the hierarchy strategy: each parent–children group is
+ * laid out vertically (parent on top, children stacked below with a slight
+ * indent), and then the resulting subtree "super-nodes" are arranged
+ * left-to-right via Dagre using the dependency edges between them.
+ */
+function layoutGraphHierarchy(nodes, edges) {
+    if (nodes.length === 0)
+        return { nodes, edges };
+    const childrenOf = new Map();
+    const parentOf = new Map();
+    for (const edge of edges) {
+        if (edge.data?.relationship !== "hierarchy")
+            continue;
+        parentOf.set(edge.target, edge.source);
+        const kids = childrenOf.get(edge.source) ?? [];
+        kids.push(edge.target);
+        childrenOf.set(edge.source, kids);
+    }
+    const roots = nodes.filter((n) => !parentOf.has(n.id));
+    function measureSubtree(nodeId, x, y, positions) {
+        positions.set(nodeId, { x, y });
+        const children = childrenOf.get(nodeId) ?? [];
+        if (children.length === 0) {
+            return { width: NODE_WIDTH, height: NODE_HEIGHT };
+        }
+        let childY = y + NODE_HEIGHT + HIERARCHY_CHILD_GAP;
+        let maxRight = x + NODE_WIDTH;
+        for (const childId of children) {
+            const result = measureSubtree(childId, x + HIERARCHY_CHILD_INDENT, childY, positions);
+            childY += result.height + HIERARCHY_CHILD_GAP;
+            maxRight = Math.max(maxRight, x + HIERARCHY_CHILD_INDENT + result.width);
+        }
+        return {
+            width: maxRight - x,
+            height: childY - HIERARCHY_CHILD_GAP - y,
+        };
+    }
+    const subtrees = new Map();
+    for (const root of roots) {
+        const positions = new Map();
+        const dims = measureSubtree(root.id, 0, 0, positions);
+        subtrees.set(root.id, { positions, ...dims });
+    }
+    const nodeToRoot = new Map();
+    for (const [rootId, data] of subtrees) {
+        for (const nodeId of data.positions.keys()) {
+            nodeToRoot.set(nodeId, rootId);
+        }
+    }
     const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
-    g.setGraph({ rankdir: "TB", nodesep: 40, ranksep: 60 });
+    g.setGraph({ rankdir: "LR", nodesep: 40, ranksep: HIERARCHY_SUBTREE_GAP });
+    for (const [rootId, data] of subtrees) {
+        g.setNode(rootId, { width: data.width, height: data.height });
+    }
+    const addedSuperEdges = new Set();
+    for (const edge of edges) {
+        if (edge.data?.relationship !== "dependency")
+            continue;
+        const srcRoot = nodeToRoot.get(edge.source);
+        const tgtRoot = nodeToRoot.get(edge.target);
+        if (srcRoot && tgtRoot && srcRoot !== tgtRoot) {
+            const key = `${srcRoot}->${tgtRoot}`;
+            if (!addedSuperEdges.has(key)) {
+                addedSuperEdges.add(key);
+                g.setEdge(srcRoot, tgtRoot);
+            }
+        }
+    }
+    Dagre.layout(g);
+    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;
+        for (const [nodeId, localPos] of data.positions) {
+            finalPositions.set(nodeId, {
+                x: offsetX + localPos.x,
+                y: offsetY + localPos.y,
+            });
+        }
+    }
+    return {
+        nodes: nodes.map((node) => ({
+            ...node,
+            position: finalPositions.get(node.id) ?? node.position,
+        })),
+        edges,
+    };
+}
+function layoutGraph(nodes, edges, orientation, autoLayoutStrategy) {
+    if (autoLayoutStrategy === "hierarchy" &&
+        edges.some((e) => e.data?.relationship === "hierarchy")) {
+        return layoutGraphHierarchy(nodes, edges);
+    }
+    const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
+    g.setGraph({
+        rankdir: orientation === "horizontal" ? "LR" : "TB",
+        nodesep: 40,
+        ranksep: 60,
+    });
     for (const node of nodes) {
         g.setNode(node.id, { width: NODE_WIDTH, height: NODE_HEIGHT });
     }
@@ -60,11 +191,14 @@ function layoutGraph(nodes, edges) {
     });
     return { nodes: layoutedNodes, edges };
 }
-function buildGraph(tasks, dependencies, selectedTaskId, blockedTaskIds, onSelect) {
+function buildGraph(tasks, dependencies, selectedTaskId, blockedTaskIds, orientation, showExecutionStateBadges, autoLayoutStrategy, onSelect, onAddDependentTaskFromNode, onAddChildTaskFromNode, onRemoveTask) {
     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 nodes = visibleTasks.map((task) => ({
         id: task.taskId,
         type: "taskNode",
@@ -74,41 +208,85 @@ function buildGraph(tasks, dependencies, selectedTaskId, blockedTaskIds, onSelec
             taskKey: task.taskKey ?? null,
             title: task.title,
             status: normalizeTaskStatus(task.status, task.executionState),
+            executionState: task.executionState,
+            showExecutionStateBadge: showExecutionStateBadges,
             priority: task.priority ?? null,
             assigneeDisplayName: task.assigneeDisplayName ?? null,
             isSelected: task.taskId === selectedTaskId,
             isBlocked: blockedTaskIds.has(task.taskId),
+            orientation,
             onSelect,
+            onAddDependentTaskFromNode,
+            onAddChildTaskFromNode,
+            onRemoveTask,
         },
     }));
-    const edges = dependencies
+    const depSourceHandle = orientation === "horizontal" ? "right" : "bottom";
+    const depTargetHandle = orientation === "horizontal" ? "left" : "top";
+    const hierSourceHandle = autoLayoutStrategy === "hierarchy" ? "bottom" : depSourceHandle;
+    const hierTargetHandle = autoLayoutStrategy === "hierarchy" ? "left" : depTargetHandle;
+    const dependencyEdges = dependencies
         .filter((dep) => taskMap.has(dep.taskId) &&
-        taskMap.has(dep.dependsOnTaskId))
+        taskMap.has(dep.dependsOnTaskId) &&
+        !childRelationshipKeys.has(`${dep.dependsOnTaskId}->${dep.taskId}`))
         .map((dep) => {
         const isBlockedBy = dep.dependencyType === "BlockedBy";
+        const strokeColor = isBlockedBy
+            ? EDGE_BLOCKED_BY
+            : EDGE_RELATED;
         return {
             id: dep.dependencyId,
             source: dep.dependsOnTaskId,
             target: dep.taskId,
-            animated: isBlockedBy,
+            sourceHandle: depSourceHandle,
+            targetHandle: depTargetHandle,
+            type: "smoothstep",
+            animated: false,
             style: {
-                stroke: isBlockedBy ? "#f97316" : "#94a3b8",
+                stroke: strokeColor,
                 strokeWidth: isBlockedBy ? 2 : 1.5,
-                strokeDasharray: isBlockedBy ? undefined : "5 5",
             },
             markerEnd: {
                 type: MarkerType.ArrowClosed,
-                color: isBlockedBy ? "#f97316" : "#94a3b8",
+                color: strokeColor,
                 width: 16,
                 height: 16,
             },
             label: isBlockedBy ? undefined : "related",
-            labelStyle: { fontSize: 10, fill: "#94a3b8" },
+            labelStyle: { fontSize: 10, fill: EDGE_RELATED },
+            data: {
+                relationship: "dependency",
+            },
         };
     });
+    const hierarchyEdges = visibleTasks
+        .filter((task) => !!task.parentTaskId &&
+        taskMap.has(task.parentTaskId))
+        .map((task) => ({
+        id: `parent:${task.parentTaskId}:${task.taskId}`,
+        source: task.parentTaskId,
+        target: task.taskId,
+        sourceHandle: hierSourceHandle,
+        targetHandle: hierTargetHandle,
+        type: "smoothstep",
+        style: {
+            stroke: "#3b82f6",
+            strokeWidth: 1.5,
+        },
+        markerEnd: {
+            type: MarkerType.ArrowClosed,
+            color: "#3b82f6",
+            width: 16,
+            height: 16,
+        },
+        data: {
+            relationship: "hierarchy",
+        },
+    }));
+    const edges = [...dependencyEdges, ...hierarchyEdges];
     if (nodes.length === 0)
         return { nodes: [], edges: [] };
-    return layoutGraph(nodes, edges);
+    return layoutGraph(nodes, edges, orientation, autoLayoutStrategy);
 }
 function applySavedLayout(nodes, savedLayout) {
     if (!savedLayout?.nodes?.length) {
@@ -133,9 +311,65 @@ function preserveNodePositions(previousNodes, nextNodes) {
         position: previousPositions.get(node.id) ?? node.position,
     }));
 }
-function createLayoutSignature(projectId, nodes, viewport) {
+function buildChildRelationshipKeys(tasks) {
+    return new Set(tasks
+        .filter((task) => !!task.parentTaskId)
+        .map((task) => `${task.parentTaskId}->${task.taskId}`));
+}
+function isHierarchyConnectionValid(connection, tasks) {
+    const { source, sourceHandle, target, targetHandle } = connection;
+    if (!source || !target || source === target) {
+        return false;
+    }
+    if (sourceHandle !== "bottom") {
+        return false;
+    }
+    if (targetHandle && targetHandle !== "left" && targetHandle !== "top") {
+        return false;
+    }
+    const validTaskIds = new Set(tasks.map((task) => task.taskId));
+    if (!validTaskIds.has(source) || !validTaskIds.has(target)) {
+        return false;
+    }
+    const parentByTaskId = new Map(tasks.map((task) => [task.taskId, task.parentTaskId ?? null]));
+    let ancestorTaskId = parentByTaskId.get(source) ?? null;
+    while (ancestorTaskId) {
+        if (ancestorTaskId === target) {
+            return false;
+        }
+        ancestorTaskId = parentByTaskId.get(ancestorTaskId) ?? null;
+    }
+    return !buildChildRelationshipKeys(tasks).has(`${source}->${target}`);
+}
+function isDependencyConnectionValid(connection, tasks, dependencies) {
+    const { source, sourceHandle, target, targetHandle } = connection;
+    if (!source || !target || source === target) {
+        return false;
+    }
+    if (sourceHandle !== "right") {
+        return false;
+    }
+    if (targetHandle && targetHandle !== "left" && targetHandle !== "top") {
+        return false;
+    }
+    const validTaskIds = new Set(tasks.map((task) => task.taskId));
+    if (!validTaskIds.has(source) || !validTaskIds.has(target)) {
+        return false;
+    }
+    if (dependencies.some((dependency) => dependency.dependsOnTaskId === source && dependency.taskId === target)) {
+        return false;
+    }
+    return !buildChildRelationshipKeys(tasks).has(`${source}->${target}`);
+}
+function isGraphConnectionValid(connection, tasks, dependencies) {
+    if (connection.sourceHandle === "bottom") {
+        return isHierarchyConnectionValid(connection, tasks);
+    }
+    return isDependencyConnectionValid(connection, tasks, dependencies);
+}
+function createLayoutSignature(layoutKey, nodes, viewport) {
     return JSON.stringify({
-        projectId,
+        layoutKey,
         nodes: nodes
             .map((node) => ({
             taskId: node.id,
@@ -153,8 +387,11 @@ function createLayoutSignature(projectId, nodes, viewport) {
     });
 }
 export function DependencyGraphView(props) {
-    const { projectId, tasks, dependencies, savedLayout, selectedTaskId, onSelectTask, permission, onLayoutSaved, } = props;
-    const canPersistLayout = permission === "Owner" || permission === "Editor";
+    const { projectId, layoutKey, tasks, dependencies, savedLayout, selectedTaskId, onSelectTask, permission, canPersistLayout: canPersistLayoutOverride, onPersistLayout, onLayoutSaved, highlightBlockedTasks = true, showExecutionStateBadges = true, emptyStateTitle = "No tasks to visualize", emptyStateDescription = "Create tasks in this project to see them in the dependency graph.", orientation = "vertical", autoLayoutStrategy = "allEdges", layoutSaveDebounceMs = SAVE_DEBOUNCE_MS, onAddDependentTaskFromNode, onAddChildTaskFromNode, onRemoveTask, allowDependencyConnect = false, onCreateDependency, onCreateChildRelationship, miniMapWidth, miniMapHeight, } = props;
+    const canPersistLayout = typeof canPersistLayoutOverride === "boolean"
+        ? canPersistLayoutOverride
+        : permission === "Owner" || permission === "Editor";
+    const effectiveLayoutKey = layoutKey ?? projectId ?? "graph";
     const taskMap = useMemo(() => {
         const m = new Map();
         for (const t of tasks)
@@ -162,6 +399,9 @@ export function DependencyGraphView(props) {
         return m;
     }, [tasks]);
     const blockedTaskIds = useMemo(() => {
+        if (!highlightBlockedTasks) {
+            return new Set();
+        }
         const blocked = new Set();
         for (const dep of dependencies) {
             if (dep.dependencyType !== "BlockedBy")
@@ -173,9 +413,21 @@ export function DependencyGraphView(props) {
             }
         }
         return blocked;
-    }, [dependencies, taskMap]);
+    }, [dependencies, highlightBlockedTasks, taskMap]);
     const onSelect = useCallback((taskId) => onSelectTask(taskId), [onSelectTask]);
-    const { nodes: initialNodes, edges: initialEdges } = useMemo(() => buildGraph(tasks, dependencies, selectedTaskId, blockedTaskIds, onSelect), [tasks, dependencies, selectedTaskId, blockedTaskIds, onSelect]);
+    const { nodes: initialNodes, edges: initialEdges } = useMemo(() => buildGraph(tasks, dependencies, selectedTaskId, blockedTaskIds, orientation, showExecutionStateBadges, autoLayoutStrategy, onSelect, onAddDependentTaskFromNode, onAddChildTaskFromNode, onRemoveTask), [
+        tasks,
+        dependencies,
+        selectedTaskId,
+        blockedTaskIds,
+        orientation,
+        showExecutionStateBadges,
+        autoLayoutStrategy,
+        onSelect,
+        onAddDependentTaskFromNode,
+        onAddChildTaskFromNode,
+        onRemoveTask,
+    ]);
     const [nodes, setNodes, onNodesChangeBase] = useNodesState(initialNodes);
     const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
     const nodesRef = useRef(nodes);
@@ -198,7 +450,7 @@ export function DependencyGraphView(props) {
     const skipNextMoveEndSaveRef = useRef(false);
     const saveAfterViewportRestoreRef = useRef(false);
     const lastSavedSignatureRef = useRef(null);
-    const lastAppliedProjectIdRef = useRef(null);
+    const lastAppliedLayoutKeyRef = useRef(null);
     const lastAppliedLayoutSignatureRef = useRef(null);
     const savedLayoutSignature = useMemo(() => savedLayout
         ? JSON.stringify({
@@ -211,56 +463,85 @@ export function DependencyGraphView(props) {
         if (!canPersistLayout) {
             return;
         }
-        const signature = createLayoutSignature(projectId, nextNodes, viewport);
+        const signature = createLayoutSignature(effectiveLayoutKey, nextNodes, viewport);
         if (signature === lastSavedSignatureRef.current) {
             return;
         }
-        const result = await saveGraphLayout({
-            projectId,
-            nodes: nextNodes.map((node) => ({
-                taskId: node.id,
-                x: node.position.x,
-                y: node.position.y,
-            })),
-            viewport: viewport == null
-                ? null
-                : {
-                    x: viewport.x,
-                    y: viewport.y,
-                    zoom: viewport.zoom,
-                },
-        });
-        if (result.type !== "success") {
-            toast.error(result.summary || "Failed to save graph layout");
-            return;
+        try {
+            const layoutPayload = {
+                nodes: nextNodes.map((node) => ({
+                    taskId: node.id,
+                    x: node.position.x,
+                    y: node.position.y,
+                })),
+                viewport: viewport == null
+                    ? null
+                    : {
+                        x: viewport.x,
+                        y: viewport.y,
+                        zoom: viewport.zoom,
+                    },
+            };
+            const nextLayout = onPersistLayout
+                ? await onPersistLayout(layoutPayload)
+                : projectId
+                    ? await (async () => {
+                        const result = await saveGraphLayout({
+                            projectId,
+                            nodes: layoutPayload.nodes,
+                            viewport: layoutPayload.viewport,
+                        });
+                        if (result.type !== "success") {
+                            toast.error(result.summary || "Failed to save graph layout");
+                            return null;
+                        }
+                        return result.data ?? null;
+                    })()
+                    : layoutPayload;
+            lastSavedSignatureRef.current = signature;
+            if (nextLayout) {
+                const incomingSignature = JSON.stringify({
+                    updatedAt: nextLayout.updatedAt ?? null,
+                    nodes: nextLayout.nodes ?? [],
+                    viewport: nextLayout.viewport ?? null,
+                });
+                lastAppliedLayoutSignatureRef.current = incomingSignature;
+            }
+            onLayoutSaved?.(nextLayout ?? null);
         }
-        lastSavedSignatureRef.current = signature;
-        if (result.data) {
-            const incomingSignature = JSON.stringify({
-                updatedAt: result.data.updatedAt ?? null,
-                nodes: result.data.nodes ?? [],
-                viewport: result.data.viewport ?? null,
-            });
-            lastAppliedLayoutSignatureRef.current = incomingSignature;
+        catch (error) {
+            toast.error(error instanceof Error
+                ? error.message
+                : "Failed to save graph layout");
         }
-        onLayoutSaved?.(result.data ?? null);
-    }, [canPersistLayout, onLayoutSaved, projectId]);
+    }, [
+        canPersistLayout,
+        effectiveLayoutKey,
+        onLayoutSaved,
+        onPersistLayout,
+        projectId,
+    ]);
     const queueLayoutSave = useCallback((nextNodes, viewport) => {
         if (!canPersistLayout) {
             return;
         }
-        const signature = createLayoutSignature(projectId, nextNodes, viewport);
+        const signature = createLayoutSignature(effectiveLayoutKey, nextNodes, viewport);
         if (signature === lastSavedSignatureRef.current) {
             return;
         }
         if (saveTimeoutRef.current !== null) {
             window.clearTimeout(saveTimeoutRef.current);
+            saveTimeoutRef.current = null;
+        }
+        if (layoutSaveDebounceMs === 0) {
+            void persistLayout(nextNodes, viewport);
+            return;
         }
         saveTimeoutRef.current = window.setTimeout(() => {
             saveTimeoutRef.current = null;
             void persistLayout(nextNodes, viewport);
-        }, SAVE_DEBOUNCE_MS);
-    }, [canPersistLayout, persistLayout, projectId]);
+        }, layoutSaveDebounceMs);
+    }, [canPersistLayout, effectiveLayoutKey, layoutSaveDebounceMs, persistLayout]);
     const restoreViewport = useCallback(() => {
         const instance = reactFlowRef.current;
         if (!instance || nodesRef.current.length === 0) {
@@ -272,7 +553,7 @@ export function DependencyGraphView(props) {
             skipNextMoveEndSaveRef.current = true;
             window.requestAnimationFrame(() => {
                 reactFlowRef.current?.setViewport(viewport, { duration: 0 });
-                lastSavedSignatureRef.current = createLayoutSignature(projectId, nodesRef.current, viewport);
+                lastSavedSignatureRef.current = createLayoutSignature(effectiveLayoutKey, nodesRef.current, viewport);
             });
             return;
         }
@@ -290,9 +571,9 @@ export function DependencyGraphView(props) {
             const viewport = reactFlowRef.current?.getViewport() ?? null;
             queueLayoutSave(nodesRef.current, viewport);
         });
-    }, [projectId, queueLayoutSave]);
+    }, [effectiveLayoutKey, queueLayoutSave]);
     useEffect(() => {
-        const shouldApplySavedLayout = lastAppliedProjectIdRef.current !== projectId ||
+        const shouldApplySavedLayout = lastAppliedLayoutKeyRef.current !== effectiveLayoutKey ||
             lastAppliedLayoutSignatureRef.current !== savedLayoutSignature;
         const nextNodes = shouldApplySavedLayout
             ? applySavedLayout(initialNodes, savedLayout)
@@ -301,13 +582,13 @@ export function DependencyGraphView(props) {
         setEdges(initialEdges);
         nodesRef.current = nextNodes;
         if (shouldApplySavedLayout) {
-            lastAppliedProjectIdRef.current = projectId;
+            lastAppliedLayoutKeyRef.current = effectiveLayoutKey;
             lastAppliedLayoutSignatureRef.current = savedLayoutSignature;
             pendingViewportRef.current = savedLayout?.viewport ?? null;
             fitViewOnNextSyncRef.current = !savedLayout?.viewport;
             if (!savedLayout?.viewport) {
                 lastSavedSignatureRef.current = savedLayout?.nodes?.length
-                    ? createLayoutSignature(projectId, nextNodes, null)
+                    ? createLayoutSignature(effectiveLayoutKey, nextNodes, null)
                     : null;
             }
             restoreViewport();
@@ -315,7 +596,7 @@ export function DependencyGraphView(props) {
     }, [
         initialEdges,
         initialNodes,
-        projectId,
+        effectiveLayoutKey,
         restoreViewport,
         savedLayout,
         savedLayoutSignature,
@@ -332,7 +613,7 @@ export function DependencyGraphView(props) {
     }, []);
     const hasVisibleNodes = initialNodes.length > 0;
     const handleAutoLayout = useCallback(() => {
-        const autoLayout = buildGraph(tasks, dependencies, selectedTaskId, blockedTaskIds, onSelect);
+        const autoLayout = buildGraph(tasks, dependencies, selectedTaskId, blockedTaskIds, orientation, showExecutionStateBadges, autoLayoutStrategy, onSelect, onAddDependentTaskFromNode, onAddChildTaskFromNode, onRemoveTask);
         setNodes(autoLayout.nodes);
         setEdges(autoLayout.edges);
         nodesRef.current = autoLayout.nodes;
@@ -343,15 +624,51 @@ export function DependencyGraphView(props) {
         blockedTaskIds,
         dependencies,
         onSelect,
+        orientation,
+        showExecutionStateBadges,
+        autoLayoutStrategy,
+        onRemoveTask,
+        onAddDependentTaskFromNode,
+        onAddChildTaskFromNode,
         restoreViewport,
         selectedTaskId,
         setEdges,
         setNodes,
         tasks,
     ]);
-    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsxs("div", { className: "flex shrink-0 items-center justify-between gap-3 px-3 pt-2", children: [hasVisibleNodes ? (_jsxs("div", { className: "flex items-center gap-2 text-[11px] text-slate-400", children: [_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx("span", { className: "inline-block h-2 w-4 rounded-sm border border-orange-300 bg-orange-400" }), "Blocked by"] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx("span", { className: "inline-block h-2 w-4 rounded-sm border border-slate-300 bg-slate-400", style: {
-                                            backgroundImage: "repeating-linear-gradient(90deg, transparent, transparent 2px, white 2px, white 4px)",
-                                        } }), "Related"] })] })) : (_jsx("div", {})), hasVisibleNodes && canPersistLayout && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-8 px-3", onClick: handleAutoLayout, children: [_jsx(RotateCcw, { className: "mr-1.5 h-4 w-4" }), "Auto layout"] }))] }), _jsx("div", { className: "min-h-0 flex-1", children: !hasVisibleNodes ? (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsxs("div", { className: "flex max-w-sm flex-col items-center gap-3 text-center", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-slate-100", children: _jsx(GitBranch, { className: "h-6 w-6 text-slate-400" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-slate-600", children: "No tasks to visualize" }), _jsx("p", { className: "mt-1 text-xs text-slate-400", children: "Create tasks in this project to see them in the dependency graph." })] })] }) })) : (_jsxs(ReactFlow, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onInit: (instance) => {
+    const isValidConnection = useCallback((connection) => allowDependencyConnect
+        ? isGraphConnectionValid(connection, tasks, dependencies)
+        : false, [allowDependencyConnect, dependencies, tasks]);
+    const handleConnect = useCallback((connection) => {
+        if (!allowDependencyConnect) {
+            return;
+        }
+        const { source, sourceHandle, target } = connection;
+        if (!source || !target) {
+            return;
+        }
+        if (!isGraphConnectionValid(connection, tasks, dependencies)) {
+            return;
+        }
+        onSelectTask(target);
+        if (sourceHandle === "bottom") {
+            onCreateChildRelationship?.(source, target);
+            return;
+        }
+        onCreateDependency?.(source, target);
+    }, [
+        allowDependencyConnect,
+        dependencies,
+        onCreateChildRelationship,
+        onCreateDependency,
+        onSelectTask,
+        tasks,
+    ]);
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsxs("div", { className: "flex shrink-0 items-center justify-between gap-3 px-3 pt-2", children: [hasVisibleNodes && highlightBlockedTasks ? (_jsxs("div", { className: "flex items-center gap-2 text-[11px] text-slate-400", children: [_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx("span", { className: "inline-block h-2 w-4 rounded-sm border border-orange-300 bg-orange-400" }), "Blocked by"] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx("span", { className: "inline-block h-0.5 w-4 rounded-sm bg-slate-400" }), "Related"] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx("span", { className: "inline-block h-0.5 w-4 rounded-sm bg-blue-500" }), "Child task"] })] })) : (_jsx("div", {})), hasVisibleNodes && canPersistLayout && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-8 px-3", onClick: handleAutoLayout, children: [_jsx(RotateCcw, { className: "mr-1.5 h-4 w-4" }), "Auto layout"] }))] }), _jsx("div", { className: "min-h-0 flex-1", children: !hasVisibleNodes ? (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsxs("div", { className: "flex max-w-sm flex-col items-center gap-3 text-center", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-slate-100", children: _jsx(GitBranch, { className: "h-6 w-6 text-slate-400" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-slate-600", children: emptyStateTitle }), _jsx("p", { className: "mt-1 text-xs text-slate-400", children: emptyStateDescription })] })] }) })) : (_jsxs(ReactFlow, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onConnect: handleConnect, onNodeClick: (_event, node) => {
+                        onSelectTask(node.id);
+                    }, onNodeDragStart: (_event, node) => {
+                        onSelectTask(node.id);
+                    }, onInit: (instance) => {
                         reactFlowRef.current = instance;
                         restoreViewport();
                     }, onNodeDragStop: () => {
@@ -364,7 +681,9 @@ export function DependencyGraphView(props) {
                             return;
                         }
                         queueLayoutSave(nodesRef.current, viewport);
-                    }, nodeTypes: nodeTypes, minZoom: 0.2, maxZoom: 2, proOptions: { hideAttribution: true }, nodesDraggable: canPersistLayout, nodesConnectable: false, elementsSelectable: false, children: [_jsx(Controls, { showInteractive: false, className: "rounded-lg! border-slate-200! shadow-md!" }), _jsx(MiniMap, { nodeColor: (node) => {
+                    }, nodeTypes: nodeTypes, minZoom: 0.2, maxZoom: 2, proOptions: { hideAttribution: true }, nodesDraggable: canPersistLayout, nodesConnectable: allowDependencyConnect, isValidConnection: isValidConnection, elementsSelectable: false, children: [_jsx(Controls, { showInteractive: false, className: "rounded-lg! border-slate-200! shadow-md!" }), _jsx(MiniMap, { ...(miniMapWidth != null && miniMapHeight != null
+                                ? { width: miniMapWidth, height: miniMapHeight }
+                                : {}), nodeColor: (node) => {
                                 const status = node.data?.status;
                                 switch (status) {
                                     case "Done":