@parhelia/core 0.1.12439 → 0.1.12451

package/dist/task-board/views/DependencyGraphView.d.ts

@@ -1,5 +1,5 @@
 import "@xyflow/react/dist/style.css";
-import type { GraphLayoutSnapshot, TaskDependency, TaskItem, ProjectPermission } from "../types";
+import type { GraphOrientation, GraphLayoutSnapshot, TaskDependency, TaskItem, ProjectPermission } from "../types";
 export declare function DependencyGraphView(props: {
     projectId?: string;
     layoutKey?: string;
@@ -19,8 +19,9 @@ export declare function DependencyGraphView(props: {
     showExecutionStateBadges?: boolean;
     emptyStateTitle?: string;
     emptyStateDescription?: string;
-    orientation?: "vertical" | "horizontal";
+    orientation?: GraphOrientation;
     autoLayoutStrategy?: "allEdges" | "hierarchy";
+    showOrientationToggle?: boolean;
     /** Debounce before persisting layout (API or parent callback). Use 0 for immediate sync (e.g. project template draft). */
     layoutSaveDebounceMs?: number;
     /** When set, shows a create-dependent-task action near the right handle of each node. */
@@ -39,4 +40,6 @@ export declare function DependencyGraphView(props: {
     miniMapWidth?: number;
     /** MiniMap (overview) height in px. */
     miniMapHeight?: number;
+    /** When false, the overview minimap is not rendered (e.g. narrow mobile layouts). */
+    showMiniMap?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

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";
@@ -46,6 +46,14 @@ 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
@@ -56,19 +64,19 @@ function TaskGraphNode({ data }) {
     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 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, "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,
@@ -76,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();
@@ -127,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 });
     }
@@ -169,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({
@@ -204,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",
@@ -220,16 +251,18 @@ 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) &&
@@ -323,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") {
@@ -348,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") {
@@ -368,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,
@@ -394,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)
@@ -427,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,
@@ -444,6 +489,7 @@ 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);
@@ -461,22 +507,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;
         }
@@ -487,6 +545,7 @@ export function DependencyGraphView(props) {
                     x: node.position.x,
                     y: node.position.y,
                 })),
+                orientation: nextOrientation,
                 viewport: viewport == null
                     ? null
                     : {
@@ -503,6 +562,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");
@@ -514,6 +574,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,
@@ -530,15 +591,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;
         }
@@ -547,14 +609,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) {
@@ -566,7 +634,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;
         }
@@ -577,14 +645,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;
@@ -601,7 +670,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();
@@ -610,6 +679,7 @@ export function DependencyGraphView(props) {
         initialEdges,
         initialNodes,
         effectiveLayoutKey,
+        effectiveOrientation,
         restoreViewport,
         savedLayout,
         savedLayoutSignature,
@@ -626,18 +696,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,
@@ -651,8 +721,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;
@@ -661,24 +737,64 @@ 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") {
+        suppressNodeSelectionUntilRef.current = performance.now() + 150;
+        if (autoLayoutStrategy === "hierarchy" &&
+            sourceHandle === getHierarchyHandles(effectiveOrientation, "hierarchy").source) {
             onCreateChildRelationship?.(source, target);
-            return;
         }
-        onCreateDependency?.(source, target);
+        else {
+            onCreateDependency?.(source, target);
+        }
+        window.requestAnimationFrame(() => {
+            onSelectTask(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-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 && 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" &&
@@ -687,9 +803,15 @@ 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) => {
@@ -705,7 +827,7 @@ export function DependencyGraphView(props) {
                             return;
                         }
                         queueLayoutSave(nodesRef.current, viewport);
-                    }, nodeTypes: nodeTypes, minZoom: 0.2, maxZoom: 2, proOptions: { hideAttribution: true }, nodesDraggable: canPersistLayout, nodesConnectable: allowDependencyConnect, isValidConnection: isValidConnection, elementsSelectable: true, children: [_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 d = node.data;
@@ -724,6 +846,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