@parhelia/core 0.1.12468 → 0.1.12477

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import { ReactFlow, Controls, MiniMap, useNodesState, useEdgesState, Handle, Position, MarkerType, } from "@xyflow/react";
 import Dagre from "@dagrejs/dagre";
 import "@xyflow/react/dist/style.css";
@@ -10,7 +10,7 @@ import { cn } from "../../lib/utils";
 import { saveGraphLayout } from "../services/taskService";
 import { Button } from "../../components/ui/button";
 import { Badge } from "../../components/ui/badge";
-import { Tooltip, TooltipContent, TooltipTrigger, } from "../../components/ui/tooltip";
+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;
@@ -46,37 +46,24 @@ function TaskGraphNode({ data }) {
     const priorityCfg = data.priority ? PRIORITY_CONFIG[data.priority] : null;
     const PriorityIcon = priorityCfg?.icon;
     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";
-    const dependentButtonClass = data.dependencySourceHandle === "right"
-        ? "top-1/2 right-0 translate-x-[calc(100%+6px)] -translate-y-1/2"
-        : "bottom-0 left-1/2 -translate-x-1/2 translate-y-[calc(100%+6px)]";
-    const dependentTooltipSide = data.dependencySourceHandle === "right" ? "right" : "bottom";
-    const subtaskButtonClass = data.hierarchySourceHandle === "right"
-        ? "top-1/2 right-0 translate-x-[calc(100%+6px)] -translate-y-1/2"
-        : "bottom-0 left-1/2 -translate-x-1/2 translate-y-[calc(100%+6px)]";
-    const subtaskTooltipSide = data.hierarchySourceHandle === "right" ? "right" : "bottom";
-    const nodeSurfaceClass = data.isSelected
-        ? "ring-primary border-primary/50 ring-2 bg-white"
-        : data.isBlocked
-            ? "border-red-200 bg-red-50/70"
-            : data.status === "Done"
-                ? "border-emerald-200 bg-emerald-50/80"
-                : "border-slate-200 bg-white hover:border-slate-300 hover:shadow-md";
-    return (_jsxs("div", { className: cn("relative cursor-pointer rounded-lg border px-3 py-2 shadow-sm transition-all", nodeSurfaceClass), 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: "-mt-px -mr-0.5 shrink-0 rounded p-0.5 text-slate-400 transition-colors hover:bg-red-50 hover:text-red-600", "aria-label": "Remove task", "data-testid": `dependency-graph-remove-task-${data.taskId}`, onClick: (event) => {
+    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 }, "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 tracking-wider uppercase", 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, dependentButtonClass), "aria-label": "Add dependent task", "data-testid": `dependency-graph-add-dependent-task-${data.taskId}`, onClick: (event) => {
+                        }, 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: dependentTooltipSide, 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, subtaskButtonClass), "aria-label": "Add subtask", "data-testid": `dependency-graph-add-subtask-${data.taskId}`, onClick: (event) => {
+                            }, 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: 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}` })] }));
+                            }, 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,
@@ -84,30 +71,13 @@ const nodeTypes = {
 const HIERARCHY_CHILD_INDENT = 24;
 const HIERARCHY_CHILD_GAP = 32;
 const HIERARCHY_SUBTREE_GAP = 80;
-function normalizeGraphOrientation(orientation) {
-    return orientation === "vertical" ? "vertical" : "horizontal";
-}
-function getDependencyHandles(orientation) {
-    return orientation === "horizontal"
-        ? { source: "right", target: "left" }
-        : { source: "bottom", target: "top" };
-}
-function getHierarchyHandles(orientation, autoLayoutStrategy) {
-    if (autoLayoutStrategy !== "hierarchy") {
-        return getDependencyHandles(orientation);
-    }
-    return orientation === "horizontal"
-        ? { source: "bottom", target: "left" }
-        : { source: "right", target: "left" };
-}
 /**
  * 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
- * in the selected orientation via Dagre using the dependency edges between
- * them.
+ * left-to-right via Dagre using the dependency edges between them.
  */
-function layoutGraphHierarchy(nodes, edges, orientation) {
+function layoutGraphHierarchy(nodes, edges) {
     if (nodes.length === 0)
         return { nodes, edges };
     const childrenOf = new Map();
@@ -152,11 +122,7 @@ function layoutGraphHierarchy(nodes, edges, orientation) {
         }
     }
     const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
-    g.setGraph({
-        rankdir: orientation === "horizontal" ? "LR" : "TB",
-        nodesep: 40,
-        ranksep: HIERARCHY_SUBTREE_GAP,
-    });
+    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 });
     }
@@ -198,7 +164,7 @@ function layoutGraphHierarchy(nodes, edges, orientation) {
 function layoutGraph(nodes, edges, orientation, autoLayoutStrategy) {
     if (autoLayoutStrategy === "hierarchy" &&
         edges.some((e) => e.data?.relationship === "hierarchy")) {
-        return layoutGraphHierarchy(nodes, edges, orientation);
+        return layoutGraphHierarchy(nodes, edges);
     }
     const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
     g.setGraph({
@@ -233,8 +199,6 @@ function buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, b
     const childRelationshipKeys = new Set(visibleTasks
         .filter((task) => !!task.parentTaskId)
         .map((task) => `${task.parentTaskId}->${task.taskId}`));
-    const dependencyHandles = getDependencyHandles(orientation);
-    const hierarchyHandles = getHierarchyHandles(orientation, autoLayoutStrategy);
     const nodes = visibleTasks.map((task) => ({
         id: task.taskId,
         type: "taskNode",
@@ -251,27 +215,26 @@ function buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, b
             isSelected: task.taskId === selectedTaskId,
             isBlocked: blockedTaskIds.has(task.taskId),
             orientation,
-            dependencySourceHandle: dependencyHandles.source,
-            hierarchySourceHandle: hierarchyHandles.source,
             onSelect,
             onAddDependentTaskFromNode,
             onAddChildTaskFromNode,
             onRemoveTask,
         },
     }));
-    const depSourceHandle = dependencyHandles.source;
-    const depTargetHandle = dependencyHandles.target;
-    const hierSourceHandle = hierarchyHandles.source;
-    const hierTargetHandle = hierarchyHandles.target;
+    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) &&
         !childRelationshipKeys.has(`${dep.dependsOnTaskId}->${dep.taskId}`))
         .map((dep) => {
         const isBlockedBy = dep.dependencyType === "BlockedBy";
-        const strokeColor = isBlockedBy ? EDGE_BLOCKED_BY : EDGE_RELATED;
-        const isSelected = dep.taskId === selectedTaskId &&
-            dep.dependsOnTaskId === selectedDependencyId;
+        const strokeColor = isBlockedBy
+            ? EDGE_BLOCKED_BY
+            : EDGE_RELATED;
+        const isSelected = dep.taskId === selectedTaskId && dep.dependsOnTaskId === selectedDependencyId;
         return {
             id: dep.dependencyId,
             source: dep.dependsOnTaskId,
@@ -301,7 +264,8 @@ function buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, b
         };
     });
     const hierarchyEdges = visibleTasks
-        .filter((task) => !!task.parentTaskId && taskMap.has(task.parentTaskId))
+        .filter((task) => !!task.parentTaskId &&
+        taskMap.has(task.parentTaskId))
         .map((task) => ({
         id: `parent:${task.parentTaskId}:${task.taskId}`,
         source: task.parentTaskId,
@@ -356,15 +320,12 @@ function buildChildRelationshipKeys(tasks) {
         .filter((task) => !!task.parentTaskId)
         .map((task) => `${task.parentTaskId}->${task.taskId}`));
 }
-function isHierarchyConnectionValid(connection, tasks, orientation, autoLayoutStrategy) {
-    if (autoLayoutStrategy !== "hierarchy") {
-        return false;
-    }
+function isHierarchyConnectionValid(connection, tasks) {
     const { source, sourceHandle, target, targetHandle } = connection;
     if (!source || !target || source === target) {
         return false;
     }
-    if (sourceHandle !== getHierarchyHandles(orientation, autoLayoutStrategy).source) {
+    if (sourceHandle !== "bottom") {
         return false;
     }
     if (targetHandle && targetHandle !== "left" && targetHandle !== "top") {
@@ -384,12 +345,12 @@ function isHierarchyConnectionValid(connection, tasks, orientation, autoLayoutSt
     }
     return !buildChildRelationshipKeys(tasks).has(`${source}->${target}`);
 }
-function isDependencyConnectionValid(connection, tasks, dependencies, orientation) {
+function isDependencyConnectionValid(connection, tasks, dependencies) {
     const { source, sourceHandle, target, targetHandle } = connection;
     if (!source || !target || source === target) {
         return false;
     }
-    if (sourceHandle !== getDependencyHandles(orientation).source) {
+    if (sourceHandle !== "right") {
         return false;
     }
     if (targetHandle && targetHandle !== "left" && targetHandle !== "top") {
@@ -404,18 +365,15 @@ function isDependencyConnectionValid(connection, tasks, dependencies, orientatio
     }
     return !buildChildRelationshipKeys(tasks).has(`${source}->${target}`);
 }
-function isGraphConnectionValid(connection, tasks, dependencies, orientation, autoLayoutStrategy) {
-    const hierarchySourceHandle = getHierarchyHandles(orientation, "hierarchy").source;
-    if (autoLayoutStrategy === "hierarchy" &&
-        connection.sourceHandle === hierarchySourceHandle) {
-        return isHierarchyConnectionValid(connection, tasks, orientation, autoLayoutStrategy);
+function isGraphConnectionValid(connection, tasks, dependencies) {
+    if (connection.sourceHandle === "bottom") {
+        return isHierarchyConnectionValid(connection, tasks);
     }
-    return isDependencyConnectionValid(connection, tasks, dependencies, orientation);
+    return isDependencyConnectionValid(connection, tasks, dependencies);
 }
-function createLayoutSignature(layoutKey, nodes, viewport, orientation) {
+function createLayoutSignature(layoutKey, nodes, viewport) {
     return JSON.stringify({
         layoutKey,
-        orientation,
         nodes: nodes
             .map((node) => ({
             taskId: node.id,
@@ -432,43 +390,12 @@ function createLayoutSignature(layoutKey, nodes, viewport, orientation) {
             : null,
     });
 }
-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,
-            blocked: node.data.isBlocked,
-            assignee: node.data.assigneeDisplayName ?? null,
-        }))
-            .sort((a, b) => a.id.localeCompare(b.id)),
-        edges: edges
-            .map((edge) => ({
-            id: edge.id,
-            source: edge.source,
-            target: edge.target,
-            sourceHandle: edge.sourceHandle ?? null,
-            targetHandle: edge.targetHandle ?? null,
-        }))
-            .sort((a, b) => a.id.localeCompare(b.id)),
-    });
-}
 export function DependencyGraphView(props) {
-    const { projectId, layoutKey, tasks, dependencies, savedLayout, selectedTaskId, selectedDependencyId = null, onSelectTask, onSelectDependency, onClearDependencySelection, 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", showOrientationToggle = false, layoutSaveDebounceMs = SAVE_DEBOUNCE_MS, onAddDependentTaskFromNode, onAddChildTaskFromNode, onRemoveTask, allowDependencyConnect = false, onCreateDependency, onCreateChildRelationship, miniMapWidth, miniMapHeight, showMiniMap = true, } = props;
+    const { projectId, layoutKey, tasks, dependencies, savedLayout, selectedTaskId, selectedDependencyId = null, onSelectTask, onSelectDependency, onClearDependencySelection, 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 fallbackOrientation = normalizeGraphOrientation(orientation);
-    const savedLayoutOrientation = savedLayout
-        ? normalizeGraphOrientation(savedLayout.orientation ?? fallbackOrientation)
-        : null;
-    const [transientOrientation, setTransientOrientation] = useState(null);
-    const effectiveOrientation = transientOrientation ?? savedLayoutOrientation ?? fallbackOrientation;
     const taskMap = useMemo(() => {
         const m = new Map();
         for (const t of tasks)
@@ -480,11 +407,6 @@ export function DependencyGraphView(props) {
             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;
@@ -497,13 +419,13 @@ export function DependencyGraphView(props) {
         return blocked;
     }, [dependencies, highlightBlockedTasks, taskMap]);
     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), [
+    const { nodes: initialNodes, edges: initialEdges } = useMemo(() => buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, blockedTaskIds, orientation, showExecutionStateBadges, autoLayoutStrategy, onSelect, onAddDependentTaskFromNode, onAddChildTaskFromNode, onRemoveTask), [
         tasks,
         dependencies,
         selectedTaskId,
         selectedDependencyId,
         blockedTaskIds,
-        effectiveOrientation,
+        orientation,
         showExecutionStateBadges,
         autoLayoutStrategy,
         onSelect,
@@ -514,7 +436,6 @@ export function DependencyGraphView(props) {
     const [nodes, setNodes, onNodesChangeBase] = useNodesState(initialNodes);
     const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
     const nodesRef = useRef(nodes);
-    const suppressNodeSelectionUntilRef = useRef(0);
     const onNodesChange = useCallback((changes) => {
         onNodesChangeBase(changes);
         const hasPositionChange = changes.some((c) => c.type === "position" && c.position);
@@ -532,36 +453,22 @@ export function DependencyGraphView(props) {
     const pendingViewportRef = useRef(null);
     const fitViewOnNextSyncRef = useRef(false);
     const skipNextMoveEndSaveRef = useRef(false);
-    const pendingSaveOrientationRef = useRef(null);
+    const saveAfterViewportRestoreRef = useRef(false);
     const lastSavedSignatureRef = useRef(null);
     const lastAppliedLayoutKeyRef = useRef(null);
     const lastAppliedLayoutSignatureRef = useRef(null);
-    const lastAppliedGraphSignatureRef = useRef(null);
-    const lastAppliedNodeIdSignatureRef = useRef(null);
     const savedLayoutSignature = useMemo(() => savedLayout
         ? JSON.stringify({
-            orientation: savedLayoutOrientation,
             updatedAt: savedLayout.updatedAt ?? null,
             nodes: savedLayout.nodes ?? [],
             viewport: savedLayout.viewport ?? null,
         })
-        : "null", [savedLayout, savedLayoutOrientation]);
-    useEffect(() => {
-        setTransientOrientation(null);
-        pendingSaveOrientationRef.current = null;
-    }, [effectiveLayoutKey]);
-    useEffect(() => {
-        if (transientOrientation &&
-            savedLayoutOrientation &&
-            transientOrientation === savedLayoutOrientation) {
-            setTransientOrientation(null);
-        }
-    }, [savedLayoutOrientation, transientOrientation]);
-    const persistLayout = useCallback(async (nextNodes, viewport, nextOrientation) => {
+        : "null", [savedLayout]);
+    const persistLayout = useCallback(async (nextNodes, viewport) => {
         if (!canPersistLayout) {
             return;
         }
-        const signature = createLayoutSignature(effectiveLayoutKey, nextNodes, viewport, nextOrientation);
+        const signature = createLayoutSignature(effectiveLayoutKey, nextNodes, viewport);
         if (signature === lastSavedSignatureRef.current) {
             return;
         }
@@ -572,7 +479,6 @@ export function DependencyGraphView(props) {
                     x: node.position.x,
                     y: node.position.y,
                 })),
-                orientation: nextOrientation,
                 viewport: viewport == null
                     ? null
                     : {
@@ -589,7 +495,6 @@ export function DependencyGraphView(props) {
                             projectId,
                             nodes: layoutPayload.nodes,
                             viewport: layoutPayload.viewport,
-                            orientation: layoutPayload.orientation,
                         });
                         if (result.type !== "success") {
                             toast.error(result.summary || "Failed to save graph layout");
@@ -601,7 +506,6 @@ export function DependencyGraphView(props) {
             lastSavedSignatureRef.current = signature;
             if (nextLayout) {
                 const incomingSignature = JSON.stringify({
-                    orientation: normalizeGraphOrientation(nextLayout.orientation ?? nextOrientation),
                     updatedAt: nextLayout.updatedAt ?? null,
                     nodes: nextLayout.nodes ?? [],
                     viewport: nextLayout.viewport ?? null,
@@ -618,16 +522,15 @@ export function DependencyGraphView(props) {
     }, [
         canPersistLayout,
         effectiveLayoutKey,
-        effectiveOrientation,
         onLayoutSaved,
         onPersistLayout,
         projectId,
     ]);
-    const queueLayoutSave = useCallback((nextNodes, viewport, nextOrientation = effectiveOrientation) => {
+    const queueLayoutSave = useCallback((nextNodes, viewport) => {
         if (!canPersistLayout) {
             return;
         }
-        const signature = createLayoutSignature(effectiveLayoutKey, nextNodes, viewport, nextOrientation);
+        const signature = createLayoutSignature(effectiveLayoutKey, nextNodes, viewport);
         if (signature === lastSavedSignatureRef.current) {
             return;
         }
@@ -636,20 +539,14 @@ export function DependencyGraphView(props) {
             saveTimeoutRef.current = null;
         }
         if (layoutSaveDebounceMs === 0) {
-            void persistLayout(nextNodes, viewport, nextOrientation);
+            void persistLayout(nextNodes, viewport);
             return;
         }
         saveTimeoutRef.current = window.setTimeout(() => {
             saveTimeoutRef.current = null;
-            void persistLayout(nextNodes, viewport, nextOrientation);
+            void persistLayout(nextNodes, viewport);
         }, layoutSaveDebounceMs);
-    }, [
-        canPersistLayout,
-        effectiveLayoutKey,
-        effectiveOrientation,
-        layoutSaveDebounceMs,
-        persistLayout,
-    ]);
+    }, [canPersistLayout, effectiveLayoutKey, layoutSaveDebounceMs, persistLayout]);
     const restoreViewport = useCallback(() => {
         const instance = reactFlowRef.current;
         if (!instance || nodesRef.current.length === 0) {
@@ -661,7 +558,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);
             });
             return;
         }
@@ -672,73 +569,39 @@ export function DependencyGraphView(props) {
         skipNextMoveEndSaveRef.current = true;
         window.requestAnimationFrame(() => {
             reactFlowRef.current?.fitView({ padding: 0.2 });
-            if (!pendingSaveOrientationRef.current) {
+            if (!saveAfterViewportRestoreRef.current) {
                 return;
             }
-            const nextOrientation = pendingSaveOrientationRef.current;
-            pendingSaveOrientationRef.current = null;
+            saveAfterViewportRestoreRef.current = false;
             const viewport = reactFlowRef.current?.getViewport() ?? null;
-            queueLayoutSave(nodesRef.current, viewport, nextOrientation);
+            queueLayoutSave(nodesRef.current, viewport);
         });
-    }, [effectiveLayoutKey, effectiveOrientation, queueLayoutSave]);
+    }, [effectiveLayoutKey, queueLayoutSave]);
     useEffect(() => {
         const shouldApplySavedLayout = lastAppliedLayoutKeyRef.current !== effectiveLayoutKey ||
             lastAppliedLayoutSignatureRef.current !== savedLayoutSignature;
-        const nextNodeIdSignature = initialNodes.map((node) => node.id).join("|");
-        const savedLayoutNodeCount = savedLayout?.nodes?.length ?? 0;
-        const shouldAutoLayoutForHierarchy = autoLayoutStrategy === "hierarchy" &&
-            (savedLayoutNodeCount < initialNodes.length ||
-                (lastAppliedNodeIdSignatureRef.current !== null &&
-                    lastAppliedNodeIdSignatureRef.current !== nextNodeIdSignature));
         const nextNodes = shouldApplySavedLayout
-            ? shouldAutoLayoutForHierarchy
-                ? initialNodes
-                : applySavedLayout(initialNodes, savedLayout)
-            : shouldAutoLayoutForHierarchy
-                ? initialNodes
-                : preserveNodePositions(nodesRef.current, initialNodes);
-        const nextGraphSignature = createGraphSyncSignature(nextNodes, initialEdges);
-        if (!shouldApplySavedLayout &&
-            !shouldAutoLayoutForHierarchy &&
-            nextGraphSignature === lastAppliedGraphSignatureRef.current) {
-            return;
-        }
+            ? applySavedLayout(initialNodes, savedLayout)
+            : preserveNodePositions(nodesRef.current, initialNodes);
         setNodes(nextNodes);
         setEdges(initialEdges);
         nodesRef.current = nextNodes;
-        lastAppliedGraphSignatureRef.current = nextGraphSignature;
-        lastAppliedNodeIdSignatureRef.current = nextNodeIdSignature;
         if (shouldApplySavedLayout) {
             lastAppliedLayoutKeyRef.current = effectiveLayoutKey;
             lastAppliedLayoutSignatureRef.current = savedLayoutSignature;
-            pendingViewportRef.current =
-                shouldAutoLayoutForHierarchy ? null : (savedLayout?.viewport ?? null);
-            fitViewOnNextSyncRef.current =
-                shouldAutoLayoutForHierarchy || !savedLayout?.viewport;
-            if (!savedLayout?.viewport || shouldAutoLayoutForHierarchy) {
+            pendingViewportRef.current = savedLayout?.viewport ?? null;
+            fitViewOnNextSyncRef.current = !savedLayout?.viewport;
+            if (!savedLayout?.viewport) {
                 lastSavedSignatureRef.current = savedLayout?.nodes?.length
-                    ? createLayoutSignature(effectiveLayoutKey, nextNodes, null, effectiveOrientation)
+                    ? createLayoutSignature(effectiveLayoutKey, nextNodes, null)
                     : null;
             }
-            if (shouldAutoLayoutForHierarchy) {
-                pendingSaveOrientationRef.current = effectiveOrientation;
-            }
-            restoreViewport();
-            return;
-        }
-        if (shouldAutoLayoutForHierarchy) {
-            pendingViewportRef.current = null;
-            fitViewOnNextSyncRef.current = true;
-            pendingSaveOrientationRef.current = effectiveOrientation;
             restoreViewport();
         }
     }, [
-        autoLayoutStrategy,
         initialEdges,
         initialNodes,
         effectiveLayoutKey,
-        effectiveOrientation,
-        projectId,
         restoreViewport,
         savedLayout,
         savedLayoutSignature,
@@ -755,18 +618,18 @@ 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 autoLayout = buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, blockedTaskIds, orientation, showExecutionStateBadges, autoLayoutStrategy, onSelect, onAddDependentTaskFromNode, onAddChildTaskFromNode, onRemoveTask);
         setNodes(autoLayout.nodes);
         setEdges(autoLayout.edges);
         nodesRef.current = autoLayout.nodes;
         fitViewOnNextSyncRef.current = true;
-        pendingSaveOrientationRef.current = effectiveOrientation;
+        saveAfterViewportRestoreRef.current = true;
         restoreViewport();
     }, [
         blockedTaskIds,
         dependencies,
-        effectiveOrientation,
         onSelect,
+        orientation,
         showExecutionStateBadges,
         autoLayoutStrategy,
         onRemoveTask,
@@ -780,14 +643,8 @@ export function DependencyGraphView(props) {
         tasks,
     ]);
     const isValidConnection = useCallback((connection) => allowDependencyConnect
-        ? isGraphConnectionValid(connection, tasks, dependencies, effectiveOrientation, autoLayoutStrategy)
-        : false, [
-        allowDependencyConnect,
-        autoLayoutStrategy,
-        dependencies,
-        effectiveOrientation,
-        tasks,
-    ]);
+        ? isGraphConnectionValid(connection, tasks, dependencies)
+        : false, [allowDependencyConnect, dependencies, tasks]);
     const handleConnect = useCallback((connection) => {
         if (!allowDependencyConnect) {
             return;
@@ -796,64 +653,24 @@ export function DependencyGraphView(props) {
         if (!source || !target) {
             return;
         }
-        if (!isGraphConnectionValid(connection, tasks, dependencies, effectiveOrientation, autoLayoutStrategy)) {
+        if (!isGraphConnectionValid(connection, tasks, dependencies)) {
             return;
         }
-        suppressNodeSelectionUntilRef.current = performance.now() + 150;
-        if (autoLayoutStrategy === "hierarchy" &&
-            sourceHandle === getHierarchyHandles(effectiveOrientation, "hierarchy").source) {
+        onSelectTask(target);
+        if (sourceHandle === "bottom") {
             onCreateChildRelationship?.(source, target);
+            return;
         }
-        else {
-            onCreateDependency?.(source, target);
-        }
-        window.requestAnimationFrame(() => {
-            onSelectTask(target);
-        });
+        onCreateDependency?.(source, target);
     }, [
         allowDependencyConnect,
-        autoLayoutStrategy,
         dependencies,
-        effectiveOrientation,
         onCreateChildRelationship,
         onCreateDependency,
         onSelectTask,
         tasks,
     ]);
-    const handleOrientationChange = useCallback((nextOrientation) => {
-        if (nextOrientation === effectiveOrientation) {
-            return;
-        }
-        setTransientOrientation(nextOrientation);
-        const autoLayout = buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, blockedTaskIds, nextOrientation, showExecutionStateBadges, autoLayoutStrategy, onSelect, onAddDependentTaskFromNode, onAddChildTaskFromNode, onRemoveTask);
-        setNodes(autoLayout.nodes);
-        setEdges(autoLayout.edges);
-        nodesRef.current = autoLayout.nodes;
-        fitViewOnNextSyncRef.current = true;
-        pendingSaveOrientationRef.current = nextOrientation;
-        restoreViewport();
-    }, [
-        autoLayoutStrategy,
-        blockedTaskIds,
-        dependencies,
-        effectiveOrientation,
-        onAddChildTaskFromNode,
-        onAddDependentTaskFromNode,
-        onRemoveTask,
-        onSelect,
-        restoreViewport,
-        selectedDependencyId,
-        selectedTaskId,
-        setEdges,
-        setNodes,
-        showExecutionStateBadges,
-        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-0.5 w-4 rounded-sm 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 && (_jsxs("div", { className: "flex items-center gap-2", children: [showOrientationToggle && (_jsxs("div", { className: "inline-flex rounded-md border border-slate-200 bg-white p-0.5", "data-testid": "dependency-graph-orientation-toggle", children: [_jsx("button", { type: "button", className: cn("rounded px-2.5 py-1 text-xs font-medium transition-colors", effectiveOrientation === "horizontal"
-                                            ? "bg-slate-900 text-white"
-                                            : "text-slate-500 hover:bg-slate-100 hover:text-slate-700"), "data-testid": "dependency-graph-orientation-horizontal", onClick: () => handleOrientationChange("horizontal"), children: "Horizontal" }), _jsx("button", { type: "button", className: cn("rounded px-2.5 py-1 text-xs font-medium transition-colors", effectiveOrientation === "vertical"
-                                            ? "bg-slate-900 text-white"
-                                            : "text-slate-500 hover:bg-slate-100 hover:text-slate-700"), "data-testid": "dependency-graph-orientation-vertical", onClick: () => handleOrientationChange("vertical"), children: "Vertical" })] })), 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, onPaneClick: () => {
+    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, onPaneClick: () => {
                         onClearDependencySelection?.();
                     }, onEdgeClick: (_event, edge) => {
                         if (edge.data?.relationship === "dependency" &&
@@ -862,15 +679,9 @@ export function DependencyGraphView(props) {
                             onSelectDependency?.(edge.data.taskId, edge.data.dependsOnTaskId);
                         }
                     }, onNodeClick: (_event, node) => {
-                        if (performance.now() < suppressNodeSelectionUntilRef.current) {
-                            return;
-                        }
                         onClearDependencySelection?.();
                         onSelectTask(node.id);
                     }, onNodeDragStart: (_event, node) => {
-                        if (performance.now() < suppressNodeSelectionUntilRef.current) {
-                            return;
-                        }
                         onClearDependencySelection?.();
                         onSelectTask(node.id);
                     }, onInit: (instance) => {
@@ -886,16 +697,13 @@ 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: [_jsx(Controls, { showInteractive: false, className: "rounded-lg! border-slate-200! shadow-md!" }), showMiniMap ? (_jsx(MiniMap, { ...(miniMapWidth != null && miniMapHeight != null
+                    }, nodeTypes: nodeTypes, minZoom: 0.2, maxZoom: 2, proOptions: { hideAttribution: true }, nodesDraggable: canPersistLayout, nodesConnectable: allowDependencyConnect, isValidConnection: isValidConnection, elementsSelectable: true, 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 d = node.data;
-                                if (d?.isBlocked)
-                                    return "#fecaca";
-                                const status = d?.status;
+                                const status = node.data?.status;
                                 switch (status) {
                                     case "Done":
-                                        return "#bbf7d0";
+                                        return "#86efac";
                                     case "InProgress":
                                         return "#93c5fd";
                                     case "Review":
@@ -905,6 +713,6 @@ export function DependencyGraphView(props) {
                                     default:
                                         return "#cbd5e1";
                                 }
-                            }, maskColor: "rgba(0, 0, 0, 0.08)", className: "rounded-lg! border-slate-200! shadow-md!" })) : null] })) })] }));
+                            }, maskColor: "rgba(0, 0, 0, 0.08)", className: "rounded-lg! border-slate-200! shadow-md!" })] })) })] }));
 }
 //# sourceMappingURL=DependencyGraphView.js.map