@parhelia/core 0.1.12436 → 0.1.12447

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 } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } 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,24 +46,37 @@ 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";
-    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) => {
+    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) => {
                             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) => {
+                        }, 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) => {
                                 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) => {
+                            }, 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) => {
                                 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}` })] }));
+                            }, 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}` })] }));
 }
 const nodeTypes = {
     taskNode: TaskGraphNode,
@@ -71,13 +84,30 @@ 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
- * left-to-right via Dagre using the dependency edges between them.
+ * in the selected orientation via Dagre using the dependency edges between
+ * them.
  */
-function layoutGraphHierarchy(nodes, edges) {
+function layoutGraphHierarchy(nodes, edges, orientation) {
     if (nodes.length === 0)
         return { nodes, edges };
     const childrenOf = new Map();
@@ -122,7 +152,11 @@ function layoutGraphHierarchy(nodes, edges) {
         }
     }
     const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
-    g.setGraph({ rankdir: "LR", nodesep: 40, ranksep: HIERARCHY_SUBTREE_GAP });
+    g.setGraph({
+        rankdir: orientation === "horizontal" ? "LR" : "TB",
+        nodesep: 40,
+        ranksep: HIERARCHY_SUBTREE_GAP,
+    });
     for (const [rootId, data] of subtrees) {
         g.setNode(rootId, { width: data.width, height: data.height });
     }
@@ -164,7 +198,7 @@ function layoutGraphHierarchy(nodes, edges) {
 function layoutGraph(nodes, edges, orientation, autoLayoutStrategy) {
     if (autoLayoutStrategy === "hierarchy" &&
         edges.some((e) => e.data?.relationship === "hierarchy")) {
-        return layoutGraphHierarchy(nodes, edges);
+        return layoutGraphHierarchy(nodes, edges, orientation);
     }
     const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
     g.setGraph({
@@ -199,6 +233,8 @@ 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",
@@ -215,26 +251,27 @@ 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 = orientation === "horizontal" ? "right" : "bottom";
-    const depTargetHandle = orientation === "horizontal" ? "left" : "top";
-    const hierSourceHandle = autoLayoutStrategy === "hierarchy" ? "bottom" : depSourceHandle;
-    const hierTargetHandle = autoLayoutStrategy === "hierarchy" ? "left" : depTargetHandle;
+    const depSourceHandle = dependencyHandles.source;
+    const depTargetHandle = dependencyHandles.target;
+    const hierSourceHandle = hierarchyHandles.source;
+    const hierTargetHandle = hierarchyHandles.target;
     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,
@@ -264,8 +301,7 @@ 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,
@@ -320,12 +356,15 @@ function buildChildRelationshipKeys(tasks) {
         .filter((task) => !!task.parentTaskId)
         .map((task) => `${task.parentTaskId}->${task.taskId}`));
 }
-function isHierarchyConnectionValid(connection, tasks) {
+function isHierarchyConnectionValid(connection, tasks, orientation, autoLayoutStrategy) {
+    if (autoLayoutStrategy !== "hierarchy") {
+        return false;
+    }
     const { source, sourceHandle, target, targetHandle } = connection;
     if (!source || !target || source === target) {
         return false;
     }
-    if (sourceHandle !== "bottom") {
+    if (sourceHandle !== getHierarchyHandles(orientation, autoLayoutStrategy).source) {
         return false;
     }
     if (targetHandle && targetHandle !== "left" && targetHandle !== "top") {
@@ -345,12 +384,12 @@ function isHierarchyConnectionValid(connection, tasks) {
     }
     return !buildChildRelationshipKeys(tasks).has(`${source}->${target}`);
 }
-function isDependencyConnectionValid(connection, tasks, dependencies) {
+function isDependencyConnectionValid(connection, tasks, dependencies, orientation) {
     const { source, sourceHandle, target, targetHandle } = connection;
     if (!source || !target || source === target) {
         return false;
     }
-    if (sourceHandle !== "right") {
+    if (sourceHandle !== getDependencyHandles(orientation).source) {
         return false;
     }
     if (targetHandle && targetHandle !== "left" && targetHandle !== "top") {
@@ -365,15 +404,18 @@ function isDependencyConnectionValid(connection, tasks, dependencies) {
     }
     return !buildChildRelationshipKeys(tasks).has(`${source}->${target}`);
 }
-function isGraphConnectionValid(connection, tasks, dependencies) {
-    if (connection.sourceHandle === "bottom") {
-        return isHierarchyConnectionValid(connection, tasks);
+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);
     }
-    return isDependencyConnectionValid(connection, tasks, dependencies);
+    return isDependencyConnectionValid(connection, tasks, dependencies, orientation);
 }
-function createLayoutSignature(layoutKey, nodes, viewport) {
+function createLayoutSignature(layoutKey, nodes, viewport, orientation) {
     return JSON.stringify({
         layoutKey,
+        orientation,
         nodes: nodes
             .map((node) => ({
             taskId: node.id,
@@ -391,11 +433,17 @@ function createLayoutSignature(layoutKey, nodes, viewport) {
     });
 }
 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", layoutSaveDebounceMs = SAVE_DEBOUNCE_MS, onAddDependentTaskFromNode, onAddChildTaskFromNode, onRemoveTask, allowDependencyConnect = false, onCreateDependency, onCreateChildRelationship, miniMapWidth, miniMapHeight, } = 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 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)
@@ -424,13 +472,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, orientation, showExecutionStateBadges, autoLayoutStrategy, onSelect, onAddDependentTaskFromNode, onAddChildTaskFromNode, onRemoveTask), [
+    const { nodes: initialNodes, edges: initialEdges } = useMemo(() => buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, blockedTaskIds, effectiveOrientation, showExecutionStateBadges, autoLayoutStrategy, onSelect, onAddDependentTaskFromNode, onAddChildTaskFromNode, onRemoveTask), [
         tasks,
         dependencies,
         selectedTaskId,
         selectedDependencyId,
         blockedTaskIds,
-        orientation,
+        effectiveOrientation,
         showExecutionStateBadges,
         autoLayoutStrategy,
         onSelect,
@@ -458,22 +506,34 @@ export function DependencyGraphView(props) {
     const pendingViewportRef = useRef(null);
     const fitViewOnNextSyncRef = useRef(false);
     const skipNextMoveEndSaveRef = useRef(false);
-    const saveAfterViewportRestoreRef = useRef(false);
+    const pendingSaveOrientationRef = useRef(null);
     const lastSavedSignatureRef = useRef(null);
     const lastAppliedLayoutKeyRef = useRef(null);
     const lastAppliedLayoutSignatureRef = useRef(null);
     const savedLayoutSignature = useMemo(() => savedLayout
         ? JSON.stringify({
+            orientation: savedLayoutOrientation,
             updatedAt: savedLayout.updatedAt ?? null,
             nodes: savedLayout.nodes ?? [],
             viewport: savedLayout.viewport ?? null,
         })
-        : "null", [savedLayout]);
-    const persistLayout = useCallback(async (nextNodes, viewport) => {
+        : "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) => {
         if (!canPersistLayout) {
             return;
         }
-        const signature = createLayoutSignature(effectiveLayoutKey, nextNodes, viewport);
+        const signature = createLayoutSignature(effectiveLayoutKey, nextNodes, viewport, nextOrientation);
         if (signature === lastSavedSignatureRef.current) {
             return;
         }
@@ -484,6 +544,7 @@ export function DependencyGraphView(props) {
                     x: node.position.x,
                     y: node.position.y,
                 })),
+                orientation: nextOrientation,
                 viewport: viewport == null
                     ? null
                     : {
@@ -500,6 +561,7 @@ 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");
@@ -511,6 +573,7 @@ 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,
@@ -527,15 +590,16 @@ export function DependencyGraphView(props) {
     }, [
         canPersistLayout,
         effectiveLayoutKey,
+        effectiveOrientation,
         onLayoutSaved,
         onPersistLayout,
         projectId,
     ]);
-    const queueLayoutSave = useCallback((nextNodes, viewport) => {
+    const queueLayoutSave = useCallback((nextNodes, viewport, nextOrientation = effectiveOrientation) => {
         if (!canPersistLayout) {
             return;
         }
-        const signature = createLayoutSignature(effectiveLayoutKey, nextNodes, viewport);
+        const signature = createLayoutSignature(effectiveLayoutKey, nextNodes, viewport, nextOrientation);
         if (signature === lastSavedSignatureRef.current) {
             return;
         }
@@ -544,14 +608,20 @@ export function DependencyGraphView(props) {
             saveTimeoutRef.current = null;
         }
         if (layoutSaveDebounceMs === 0) {
-            void persistLayout(nextNodes, viewport);
+            void persistLayout(nextNodes, viewport, nextOrientation);
             return;
         }
         saveTimeoutRef.current = window.setTimeout(() => {
             saveTimeoutRef.current = null;
-            void persistLayout(nextNodes, viewport);
+            void persistLayout(nextNodes, viewport, nextOrientation);
         }, layoutSaveDebounceMs);
-    }, [canPersistLayout, effectiveLayoutKey, layoutSaveDebounceMs, persistLayout]);
+    }, [
+        canPersistLayout,
+        effectiveLayoutKey,
+        effectiveOrientation,
+        layoutSaveDebounceMs,
+        persistLayout,
+    ]);
     const restoreViewport = useCallback(() => {
         const instance = reactFlowRef.current;
         if (!instance || nodesRef.current.length === 0) {
@@ -563,7 +633,7 @@ export function DependencyGraphView(props) {
             skipNextMoveEndSaveRef.current = true;
             window.requestAnimationFrame(() => {
                 reactFlowRef.current?.setViewport(viewport, { duration: 0 });
-                lastSavedSignatureRef.current = createLayoutSignature(effectiveLayoutKey, nodesRef.current, viewport);
+                lastSavedSignatureRef.current = createLayoutSignature(effectiveLayoutKey, nodesRef.current, viewport, effectiveOrientation);
             });
             return;
         }
@@ -574,14 +644,15 @@ export function DependencyGraphView(props) {
         skipNextMoveEndSaveRef.current = true;
         window.requestAnimationFrame(() => {
             reactFlowRef.current?.fitView({ padding: 0.2 });
-            if (!saveAfterViewportRestoreRef.current) {
+            if (!pendingSaveOrientationRef.current) {
                 return;
             }
-            saveAfterViewportRestoreRef.current = false;
+            const nextOrientation = pendingSaveOrientationRef.current;
+            pendingSaveOrientationRef.current = null;
             const viewport = reactFlowRef.current?.getViewport() ?? null;
-            queueLayoutSave(nodesRef.current, viewport);
+            queueLayoutSave(nodesRef.current, viewport, nextOrientation);
         });
-    }, [effectiveLayoutKey, queueLayoutSave]);
+    }, [effectiveLayoutKey, effectiveOrientation, queueLayoutSave]);
     useEffect(() => {
         const shouldApplySavedLayout = lastAppliedLayoutKeyRef.current !== effectiveLayoutKey ||
             lastAppliedLayoutSignatureRef.current !== savedLayoutSignature;
@@ -598,7 +669,7 @@ export function DependencyGraphView(props) {
             fitViewOnNextSyncRef.current = !savedLayout?.viewport;
             if (!savedLayout?.viewport) {
                 lastSavedSignatureRef.current = savedLayout?.nodes?.length
-                    ? createLayoutSignature(effectiveLayoutKey, nextNodes, null)
+                    ? createLayoutSignature(effectiveLayoutKey, nextNodes, null, effectiveOrientation)
                     : null;
             }
             restoreViewport();
@@ -607,6 +678,7 @@ export function DependencyGraphView(props) {
         initialEdges,
         initialNodes,
         effectiveLayoutKey,
+        effectiveOrientation,
         restoreViewport,
         savedLayout,
         savedLayoutSignature,
@@ -623,18 +695,18 @@ export function DependencyGraphView(props) {
     }, []);
     const hasVisibleNodes = initialNodes.length > 0;
     const handleAutoLayout = useCallback(() => {
-        const autoLayout = buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, blockedTaskIds, orientation, showExecutionStateBadges, autoLayoutStrategy, onSelect, onAddDependentTaskFromNode, onAddChildTaskFromNode, onRemoveTask);
+        const autoLayout = buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, blockedTaskIds, effectiveOrientation, showExecutionStateBadges, autoLayoutStrategy, onSelect, onAddDependentTaskFromNode, onAddChildTaskFromNode, onRemoveTask);
         setNodes(autoLayout.nodes);
         setEdges(autoLayout.edges);
         nodesRef.current = autoLayout.nodes;
         fitViewOnNextSyncRef.current = true;
-        saveAfterViewportRestoreRef.current = true;
+        pendingSaveOrientationRef.current = effectiveOrientation;
         restoreViewport();
     }, [
         blockedTaskIds,
         dependencies,
+        effectiveOrientation,
         onSelect,
-        orientation,
         showExecutionStateBadges,
         autoLayoutStrategy,
         onRemoveTask,
@@ -648,8 +720,14 @@ export function DependencyGraphView(props) {
         tasks,
     ]);
     const isValidConnection = useCallback((connection) => allowDependencyConnect
-        ? isGraphConnectionValid(connection, tasks, dependencies)
-        : false, [allowDependencyConnect, dependencies, tasks]);
+        ? isGraphConnectionValid(connection, tasks, dependencies, effectiveOrientation, autoLayoutStrategy)
+        : false, [
+        allowDependencyConnect,
+        autoLayoutStrategy,
+        dependencies,
+        effectiveOrientation,
+        tasks,
+    ]);
     const handleConnect = useCallback((connection) => {
         if (!allowDependencyConnect) {
             return;
@@ -658,24 +736,60 @@ export function DependencyGraphView(props) {
         if (!source || !target) {
             return;
         }
-        if (!isGraphConnectionValid(connection, tasks, dependencies)) {
+        if (!isGraphConnectionValid(connection, tasks, dependencies, effectiveOrientation, autoLayoutStrategy)) {
             return;
         }
         onSelectTask(target);
-        if (sourceHandle === "bottom") {
+        if (autoLayoutStrategy === "hierarchy" &&
+            sourceHandle === getHierarchyHandles(effectiveOrientation, "hierarchy").source) {
             onCreateChildRelationship?.(source, target);
             return;
         }
         onCreateDependency?.(source, target);
     }, [
         allowDependencyConnect,
+        autoLayoutStrategy,
         dependencies,
+        effectiveOrientation,
         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, onPaneClick: () => {
+    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: () => {
                         onClearDependencySelection?.();
                     }, onEdgeClick: (_event, edge) => {
                         if (edge.data?.relationship === "dependency" &&
@@ -702,13 +816,16 @@ 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!" }), _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!" }), showMiniMap ? (_jsx(MiniMap, { ...(miniMapWidth != null && miniMapHeight != null
                                 ? { width: miniMapWidth, height: miniMapHeight }
                                 : {}), nodeColor: (node) => {
-                                const status = node.data?.status;
+                                const d = node.data;
+                                if (d?.isBlocked)
+                                    return "#fecaca";
+                                const status = d?.status;
                                 switch (status) {
                                     case "Done":
-                                        return "#86efac";
+                                        return "#bbf7d0";
                                     case "InProgress":
                                         return "#93c5fd";
                                     case "Review":
@@ -718,6 +835,6 @@ export function DependencyGraphView(props) {
                                     default:
                                         return "#cbd5e1";
                                 }
-                            }, maskColor: "rgba(0, 0, 0, 0.08)", className: "rounded-lg! border-slate-200! shadow-md!" })] })) })] }));
+                            }, maskColor: "rgba(0, 0, 0, 0.08)", className: "rounded-lg! border-slate-200! shadow-md!" })) : null] })) })] }));
 }
 //# sourceMappingURL=DependencyGraphView.js.map