@parhelia/core 0.1.12907 → 0.1.12909

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

@@ -11,28 +11,57 @@ import { cn } from "../../lib/utils";
 import { saveGraphLayout } from "../services/taskService";
 import { Button } from "../../components/ui/button";
 import { Badge } from "../../components/ui/badge";
+import { MultiSwitchButton } from "../../components/ui/multi-switch-button";
 import { Tooltip, TooltipContent, TooltipTrigger, } from "../../components/ui/tooltip";
-import { Circle, PlayCircle, Clock3, Eye, CheckCircle2, ArrowUp, ArrowDown, Minus, Flame, GitBranch, RotateCcw, Loader2, Plus, Trash2, Maximize2, Minimize2, SquareSquare, } from "lucide-react";
+import { Circle, PlayCircle, Clock3, Eye, CheckCircle2, GitBranch, RotateCcw, Loader2, Plus, Maximize2, Minimize2, SquareSquare, AlertCircle, MoveHorizontal, MoveVertical, } from "lucide-react";
+import { DeleteIcon } from "../../components/ui/delete-icon";
+import { TaskAssigneeBadge } from "../components/TaskAssigneeBadge";
 const NODE_WIDTH = 220;
-const NODE_HEIGHT = 80;
+const NODE_HEIGHT = 96;
 const SAVE_DEBOUNCE_MS = 500;
-const EDGE_BLOCKED_BY = "#f97316";
-const EDGE_CHILD_TASK = "#0d9488";
-const EDGE_RELATED = "#94a3b8";
+const EDGE_BLOCKED_BY = "var(--color-component-shared)";
+const EDGE_CHILD_TASK = "var(--color-component-suggestions)";
+const EDGE_RELATED = "var(--color-neutral-grey-50)";
 const STATUS_STYLES = {
-    Todo: { bg: "bg-slate-100", text: "text-slate-600", icon: Circle },
-    InProgress: { bg: "bg-blue-100", text: "text-blue-700", icon: PlayCircle },
-    Waiting: { bg: "bg-amber-100", text: "text-amber-700", icon: Clock3 },
-    Review: { bg: "bg-purple-100", text: "text-purple-700", icon: Eye },
-    Done: { bg: "bg-green-100", text: "text-green-700", icon: CheckCircle2 },
+    Todo: { bg: "bg-neutral-grey-5", text: "text-neutral-grey-50", icon: Circle },
+    InProgress: {
+        bg: "bg-feedback-blue-light",
+        text: "text-feedback-blue",
+        icon: PlayCircle,
+    },
+    Waiting: {
+        bg: "bg-feedback-orange-light",
+        text: "text-feedback-orange",
+        icon: Clock3,
+    },
+    Review: { bg: "bg-highlight-10", text: "text-highlight-100", icon: Eye },
+    Done: {
+        bg: "bg-feedback-green-light",
+        text: "text-feedback-green",
+        icon: CheckCircle2,
+    },
 };
-const PRIORITY_CONFIG = {
-    Critical: { icon: Flame, color: "text-red-500", label: "Critical" },
-    High: { icon: ArrowUp, color: "text-orange-500", label: "High" },
-    Medium: { icon: Minus, color: "text-yellow-500", label: "Medium" },
-    Low: { icon: ArrowDown, color: "text-slate-400", label: "Low" },
+const PRIORITY_BAR_STYLES = {
+    Critical: "bg-feedback-red-strong",
+    High: "bg-component-shared",
+    Medium: "bg-feedback-blue",
+    Low: "bg-neutral-grey-50",
 };
-const HANDLE_CLASS = "bg-slate-300! border-slate-400! w-2! h-2!";
+const PRIORITY_SELECTED_STYLES = {
+    Critical: "border-feedback-red-strong ring-feedback-red-strong",
+    High: "border-component-shared ring-component-shared",
+    Medium: "border-feedback-blue ring-feedback-blue",
+    Low: "border-neutral-grey-50 ring-neutral-grey-50",
+};
+const DEFAULT_SELECTED_STYLE = "border-feedback-blue ring-feedback-blue";
+const PRIORITY_HOVER_STYLES = {
+    Critical: "hover:border-feedback-red-strong/50",
+    High: "hover:border-component-shared/50",
+    Medium: "hover:border-feedback-blue/50",
+    Low: "hover:border-neutral-grey-50/50",
+};
+const DEFAULT_HOVER_STYLE = "hover:border-neutral-grey-10/50";
+const HANDLE_CLASS = "bg-neutral-grey-10! border-border-default! w-2! h-2!";
 function TaskGraphNode({ data }) {
     const status = data.status;
     const statusStyle = STATUS_STYLES[status] || STATUS_STYLES.Todo;
@@ -44,9 +73,13 @@ function TaskGraphNode({ data }) {
             isBlocked: data.isBlocked,
         })
         : null;
-    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 priorityBarStyle = data.priority
+        ? PRIORITY_BAR_STYLES[data.priority]
+        : "bg-neutral-grey-10";
+    const hoverStyle = data.priority
+        ? PRIORITY_HOVER_STYLES[data.priority]
+        : DEFAULT_HOVER_STYLE;
+    const actionButtonClass = "nodrag nopan absolute z-20 flex h-5 w-5 items-center justify-center rounded-full border border-border-default bg-white text-neutral-grey-50 shadow-sm transition-colors hover:border-feedback-blue hover:bg-feedback-blue-light hover:text-feedback-blue";
     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)]";
@@ -56,20 +89,18 @@ function TaskGraphNode({ data }) {
         : "bottom-0 left-1/2 -translate-x-1/2 translate-y-[calc(100%+6px)]";
     const subtaskTooltipSide = data.hierarchySourceHandle === "right" ? "right" : "bottom";
     const isDecisionPoint = String(data.taskType ?? "").toLowerCase() === "decisionpoint";
-    const stateSurfaceClass = isDecisionPoint
-        ? "border-violet-200 bg-violet-50/70 hover:border-violet-300 hover:shadow-md"
-        : 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";
+    const selectedStyle = data.priority
+        ? PRIORITY_SELECTED_STYLES[data.priority]
+        : DEFAULT_SELECTED_STYLE;
     const nodeSurfaceClass = data.isSelected
-        ? cn(stateSurfaceClass, "ring-primary border-primary ring-2")
-        : stateSurfaceClass;
-    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: [_jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [_jsx("span", { className: "truncate text-[10px] font-medium text-slate-400", children: data.taskKey || data.taskId.slice(0, 8).toUpperCase() }), isDecisionPoint ? (_jsxs("span", { className: "inline-flex items-center gap-0.5 rounded-full bg-violet-100 px-1 py-0.5 text-[9px] font-semibold tracking-wide text-violet-700 uppercase", title: "Decision Point", children: [_jsx(GitBranch, { className: "h-2.5 w-2.5" }), "DP"] })) : null] }), 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, dependentButtonClass), "aria-label": "Add dependent task", "data-testid": `dependency-graph-add-dependent-task-${data.taskId}`, onClick: (event) => {
+        ? cn("shadow-lg ring-2", selectedStyle)
+        : hoverStyle;
+    return (_jsxs("div", { className: cn("group relative cursor-pointer overflow-hidden rounded-lg border bg-white p-3 text-left shadow-sm transition-all hover:shadow-md", nodeSurfaceClass), style: { width: NODE_WIDTH }, "data-testid": `dependency-graph-node-${data.taskId}`, children: [_jsx("div", { className: cn("absolute inset-y-0 left-0 w-1", priorityBarStyle) }), _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 flex-col gap-2.5", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-muted-foreground mb-1 flex items-center gap-1 text-[10px] font-medium tracking-widest", children: _jsx("span", { className: "truncate", children: data.taskKey || data.taskId.slice(0, 8).toUpperCase() }) }), _jsx("div", { className: "line-clamp-2 text-sm leading-snug font-medium", children: data.title })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [isDecisionPoint ? (_jsx(GitBranch, { className: "text-highlight-100 h-4 w-4", "aria-label": "Decision Point" })) : null, data.priority === "Critical" ? (_jsx(AlertCircle, { className: "text-feedback-red h-4 w-4", "aria-label": "Critical priority" })) : null, data.onRemoveTask && (_jsx("button", { type: "button", className: "text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-50 -mt-px -mr-0.5 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(DeleteIcon, { size: "xs" }) }))] })] }), _jsxs("div", { className: "mt-0.5 flex flex-wrap items-center gap-2", children: [isDecisionPoint ? (_jsx(Badge, { variant: "outline", size: "sm", className: "text-2xs border-highlight-100 bg-highlight-10 text-highlight-100", children: "Decision Point" })) : null, data.assigneeDisplayName && (_jsx(TaskAssigneeBadge, { assigneeType: data.assigneeType, label: data.assigneeDisplayName })), executionDisplay ? (_jsxs(Badge, { variant: executionDisplay.variant, size: "sm", className: cn("max-w-full font-bold", executionDisplay.className), title: executionDisplay.needsAttention
+                                    ? "Assigned agent requires attention"
+                                    : undefined, children: [executionDisplay.showSpinner && (_jsx(Loader2, { className: "mr-1 h-2.5 w-2.5 animate-spin" })), executionDisplay.label] })) : (_jsxs(Badge, { variant: "outline", size: "sm", className: cn("border-transparent font-bold", statusStyle.bg, statusStyle.text), children: [_jsx(StatusIcon, {}), getTaskStatusLabel(status)] }))] })] }), 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);
@@ -86,7 +117,6 @@ function TaskGraphNode({ data }) {
 const nodeTypes = {
     taskNode: TaskGraphNode,
 };
-const HIERARCHY_CHILD_INDENT = 24;
 const HIERARCHY_CHILD_GAP = 32;
 const HIERARCHY_SUBTREE_GAP = 80;
 function normalizeGraphOrientation(orientation) {
@@ -102,14 +132,13 @@ function getHierarchyHandles(orientation, autoLayoutStrategy) {
         return getDependencyHandles(orientation);
     }
     return orientation === "horizontal"
-        ? { source: "bottom", target: "left" }
+        ? { source: "bottom", target: "top" }
         : { 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
+ * Compound layout for the hierarchy strategy: each parent-child group is
+ * laid out perpendicular to the selected orientation, and then the resulting subtree
+ * "super-nodes" are arranged via Dagre using the dependency edges between
  * them.
  */
 function layoutGraphHierarchy(nodes, edges, orientation) {
@@ -125,30 +154,155 @@ function layoutGraphHierarchy(nodes, edges, orientation) {
         kids.push(edge.target);
         childrenOf.set(edge.source, kids);
     }
+    const nodeOrder = new Map(nodes.map((node, index) => [node.id, index]));
+    const dependencyEdges = edges.filter((edge) => edge.data?.relationship === "dependency");
+    const subtreeNodeIds = new Map();
+    function getSubtreeNodeIds(nodeId) {
+        const cached = subtreeNodeIds.get(nodeId);
+        if (cached)
+            return cached;
+        const result = new Set();
+        const stack = [nodeId];
+        while (stack.length > 0) {
+            const currentId = stack.pop();
+            if (result.has(currentId))
+                continue;
+            result.add(currentId);
+            for (const childId of childrenOf.get(currentId) ?? []) {
+                stack.push(childId);
+            }
+        }
+        subtreeNodeIds.set(nodeId, result);
+        return result;
+    }
+    function orderHierarchyChildren(parentId, children) {
+        if (children.length < 2)
+            return children;
+        const originalOrder = new Map(children.map((childId, index) => [childId, index]));
+        const parentSubtree = getSubtreeNodeIds(parentId);
+        const branchByNodeId = new Map();
+        for (const childId of children) {
+            for (const nodeId of getSubtreeNodeIds(childId)) {
+                branchByNodeId.set(nodeId, childId);
+            }
+        }
+        const outgoingBranchEdges = new Map();
+        const incomingBranchCounts = new Map(children.map((childId) => [childId, 0]));
+        const externalContinuationRank = new Map(children.map((childId) => [childId, Number.POSITIVE_INFINITY]));
+        for (const edge of dependencyEdges) {
+            const sourceBranch = branchByNodeId.get(edge.source);
+            if (!sourceBranch)
+                continue;
+            const targetBranch = branchByNodeId.get(edge.target);
+            if (targetBranch && targetBranch !== sourceBranch) {
+                const outgoing = outgoingBranchEdges.get(sourceBranch) ?? new Set();
+                if (!outgoing.has(targetBranch)) {
+                    outgoing.add(targetBranch);
+                    outgoingBranchEdges.set(sourceBranch, outgoing);
+                    incomingBranchCounts.set(targetBranch, (incomingBranchCounts.get(targetBranch) ?? 0) + 1);
+                }
+            }
+            if (!parentSubtree.has(edge.target)) {
+                externalContinuationRank.set(sourceBranch, Math.min(externalContinuationRank.get(sourceBranch) ??
+                    Number.POSITIVE_INFINITY, nodeOrder.get(edge.target) ?? Number.MAX_SAFE_INTEGER));
+            }
+        }
+        const compareBranches = (a, b) => {
+            const continuationDelta = (externalContinuationRank.get(a) ?? Number.POSITIVE_INFINITY) -
+                (externalContinuationRank.get(b) ?? Number.POSITIVE_INFINITY);
+            if (continuationDelta !== 0)
+                return continuationDelta;
+            return ((nodeOrder.get(a) ?? originalOrder.get(a) ?? Number.MAX_SAFE_INTEGER) -
+                (nodeOrder.get(b) ?? originalOrder.get(b) ?? Number.MAX_SAFE_INTEGER));
+        };
+        const ordered = [];
+        const orderedSet = new Set();
+        const ready = children
+            .filter((childId) => (incomingBranchCounts.get(childId) ?? 0) === 0)
+            .sort(compareBranches);
+        while (ready.length > 0) {
+            const childId = ready.shift();
+            if (orderedSet.has(childId))
+                continue;
+            ordered.push(childId);
+            orderedSet.add(childId);
+            for (const nextChildId of outgoingBranchEdges.get(childId) ?? []) {
+                const nextIncomingCount = (incomingBranchCounts.get(nextChildId) ?? 0) - 1;
+                incomingBranchCounts.set(nextChildId, nextIncomingCount);
+                if (nextIncomingCount === 0) {
+                    ready.push(nextChildId);
+                    ready.sort(compareBranches);
+                }
+            }
+        }
+        return [
+            ...ordered,
+            ...children
+                .filter((childId) => !orderedSet.has(childId))
+                .sort(compareBranches),
+        ];
+    }
+    for (const [parentId, children] of childrenOf) {
+        childrenOf.set(parentId, orderHierarchyChildren(parentId, children));
+    }
     const roots = nodes.filter((n) => !parentOf.has(n.id));
-    function measureSubtree(nodeId, x, y, positions) {
-        positions.set(nodeId, { x, y });
+    function addTranslatedPositions(target, positions, offsetX, offsetY) {
+        for (const [nodeId, position] of positions) {
+            target.set(nodeId, {
+                x: offsetX + position.x,
+                y: offsetY + position.y,
+            });
+        }
+    }
+    function measureSubtree(nodeId) {
         const children = childrenOf.get(nodeId) ?? [];
         if (children.length === 0) {
-            return { width: NODE_WIDTH, height: NODE_HEIGHT };
+            return {
+                positions: new Map([[nodeId, { x: 0, y: 0 }]]),
+                width: NODE_WIDTH,
+                height: NODE_HEIGHT,
+            };
         }
-        let childY = y + NODE_HEIGHT + HIERARCHY_CHILD_GAP;
-        let maxRight = x + NODE_WIDTH;
-        for (const childId of children) {
-            const result = measureSubtree(childId, x + HIERARCHY_CHILD_INDENT, childY, positions);
-            childY += result.height + HIERARCHY_CHILD_GAP;
-            maxRight = Math.max(maxRight, x + HIERARCHY_CHILD_INDENT + result.width);
+        const childLayouts = children.map((childId) => measureSubtree(childId));
+        const positions = new Map();
+        if (orientation === "horizontal") {
+            const childRowWidth = childLayouts.reduce((sum, child) => sum + child.width, 0) +
+                HIERARCHY_CHILD_GAP * (childLayouts.length - 1);
+            const childRowHeight = Math.max(...childLayouts.map((child) => child.height));
+            const width = Math.max(NODE_WIDTH, childRowWidth);
+            const height = NODE_HEIGHT + HIERARCHY_CHILD_GAP + childRowHeight;
+            positions.set(nodeId, { x: (width - NODE_WIDTH) / 2, y: 0 });
+            let childX = (width - childRowWidth) / 2;
+            for (const childLayout of childLayouts) {
+                addTranslatedPositions(positions, childLayout.positions, childX, NODE_HEIGHT + HIERARCHY_CHILD_GAP);
+                childX += childLayout.width + HIERARCHY_CHILD_GAP;
+            }
+            return {
+                positions,
+                width,
+                height,
+            };
+        }
+        const childColumnWidth = Math.max(...childLayouts.map((child) => child.width));
+        const childColumnHeight = childLayouts.reduce((sum, child) => sum + child.height, 0) +
+            HIERARCHY_CHILD_GAP * (childLayouts.length - 1);
+        const width = NODE_WIDTH + HIERARCHY_CHILD_GAP + childColumnWidth;
+        const height = Math.max(NODE_HEIGHT, childColumnHeight);
+        positions.set(nodeId, { x: 0, y: (height - NODE_HEIGHT) / 2 });
+        let childY = (height - childColumnHeight) / 2;
+        for (const childLayout of childLayouts) {
+            addTranslatedPositions(positions, childLayout.positions, NODE_WIDTH + HIERARCHY_CHILD_GAP, childY);
+            childY += childLayout.height + HIERARCHY_CHILD_GAP;
         }
         return {
-            width: maxRight - x,
-            height: childY - HIERARCHY_CHILD_GAP - y,
+            positions,
+            width,
+            height,
         };
     }
     const subtrees = new Map();
     for (const root of roots) {
-        const positions = new Map();
-        const dims = measureSubtree(root.id, 0, 0, positions);
-        subtrees.set(root.id, { positions, ...dims });
+        subtrees.set(root.id, measureSubtree(root.id));
     }
     const nodeToRoot = new Map();
     for (const [rootId, data] of subtrees) {
@@ -253,6 +407,7 @@ function buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, b
             executionState: task.executionState,
             showExecutionStateBadge: showExecutionStateBadges,
             priority: task.priority ?? null,
+            assigneeType: task.assigneeType ?? null,
             assigneeDisplayName: task.assigneeDisplayName ?? null,
             isSelected: task.taskId === selectedTaskId,
             isBlocked: blockedTaskIds.has(task.taskId),
@@ -289,13 +444,13 @@ function buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, b
             type: "smoothstep",
             animated: false,
             style: {
-                stroke: isSelected ? "#0f172a" : strokeColor,
+                stroke: isSelected ? "var(--color-neutral-grey-100)" : strokeColor,
                 strokeWidth: isSelected ? 3 : isBlockedBy ? 2 : 1.5,
                 strokeDasharray: isDecisionEdge ? "6 4" : undefined,
             },
             markerEnd: {
                 type: MarkerType.ArrowClosed,
-                color: isSelected ? "#0f172a" : strokeColor,
+                color: isSelected ? "var(--color-neutral-grey-100)" : strokeColor,
                 width: 16,
                 height: 16,
             },
@@ -326,12 +481,12 @@ function buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, b
         targetHandle: hierTargetHandle,
         type: "smoothstep",
         style: {
-            stroke: "#3b82f6",
+            stroke: "var(--color-component-default)",
             strokeWidth: 1.5,
         },
         markerEnd: {
             type: MarkerType.ArrowClosed,
-            color: "#3b82f6",
+            color: "var(--color-component-default)",
             width: 16,
             height: 16,
         },
@@ -344,6 +499,9 @@ function buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, b
         return { nodes: [], edges: [] };
     return layoutGraph(nodes, edges, orientation, autoLayoutStrategy);
 }
+export function buildDependencyGraphLayout(args) {
+    return buildGraph(args.tasks, args.dependencies, null, null, new Set(), args.orientation ?? "horizontal", false, args.autoLayoutStrategy ?? "hierarchy", () => undefined);
+}
 function applySavedLayout(nodes, savedLayout) {
     if (!savedLayout?.nodes?.length) {
         return nodes;
@@ -458,8 +616,10 @@ function createGraphSyncSignature(nodes, edges) {
             selected: node.data.isSelected,
             status: node.data.status,
             executionState: node.data.executionState ?? null,
+            priority: node.data.priority ?? null,
             blocked: node.data.isBlocked,
             taskType: node.data.taskType ?? null,
+            assigneeType: node.data.assigneeType ?? null,
             assignee: node.data.assigneeDisplayName ?? null,
         }))
             .sort((a, b) => a.id.localeCompare(b.id)),
@@ -934,9 +1094,6 @@ export function DependencyGraphView(props) {
         tasks,
     ]);
     const handleOrientationChange = useCallback((nextOrientation) => {
-        if (nextOrientation === effectiveOrientation) {
-            return;
-        }
         const autoLayout = buildGraph(tasks, dependencies, selectedTaskId, selectedDependencyId, blockedTaskIds, nextOrientation, showExecutionStateBadges, autoLayoutStrategy, onSelect, onAddDependentTaskFromNode, onAddChildTaskFromNode, onRemoveTask);
         // Hide while we relayout-then-fit so the user can't see a paint where
         // the new node positions are still being viewed through the old
@@ -967,7 +1124,6 @@ export function DependencyGraphView(props) {
         beginFittingView,
         blockedTaskIds,
         dependencies,
-        effectiveOrientation,
         onAddChildTaskFromNode,
         onAddDependentTaskFromNode,
         onRemoveTask,
@@ -980,11 +1136,20 @@ export function DependencyGraphView(props) {
         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", ref: graphContainerRef, tabIndex: -1, style: { visibility: isFittingView ? "hidden" : "visible" }, 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: "text-neutral-grey-50 flex items-center gap-2 text-[11px]", children: [_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx("span", { className: "bg-component-shared inline-block h-0.5 w-4 rounded-sm" }), "Blocked by"] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx("span", { className: "bg-neutral-grey-50 inline-block h-0.5 w-4 rounded-sm" }), "Related"] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx("span", { className: "bg-feedback-blue inline-block h-0.5 w-4 rounded-sm" }), "Child task"] })] })) : (_jsx("div", {})), hasVisibleNodes && (_jsxs("div", { className: "flex items-center gap-2", children: [showOrientationToggle && (_jsx(MultiSwitchButton, { value: effectiveOrientation, options: [
+                                    {
+                                        value: "horizontal",
+                                        label: "Horizontal",
+                                        icon: MoveHorizontal,
+                                        testId: "dependency-graph-orientation-horizontal",
+                                    },
+                                    {
+                                        value: "vertical",
+                                        label: "Vertical",
+                                        icon: MoveVertical,
+                                        testId: "dependency-graph-orientation-vertical",
+                                    },
+                                ], onValueChange: handleOrientationChange, className: "inline-grid w-auto", optionClassName: "h-8 px-3", "aria-label": "Dependency graph orientation", testId: "dependency-graph-orientation-toggle" })), 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", ref: graphContainerRef, tabIndex: -1, style: { visibility: isFittingView ? "hidden" : "visible" }, 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: "bg-neutral-grey-5 flex h-12 w-12 items-center justify-center rounded-full", children: _jsx(GitBranch, { className: "text-neutral-grey-50 h-6 w-6" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-neutral-grey-50 text-sm font-medium", children: emptyStateTitle }), _jsx("p", { className: "text-2xs text-neutral-grey-50 mt-1", children: emptyStateDescription })] })] }) })) : (_jsxs(ReactFlow, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onConnect: handleConnect, onPaneClick: () => {
                         focusGraphContainer();
                         onClearDependencySelection?.();
                     }, onEdgeClick: (_event, edge) => {
@@ -1021,7 +1186,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: [_jsxs(Controls, { showInteractive: false, showFitView: false, className: "rounded-lg! border-slate-200! shadow-md!", children: [_jsx("button", { type: "button", className: "react-flow__controls-button react-flow__controls-fitview flex h-6 w-6 items-center justify-center border-t border-slate-200 bg-white text-slate-600 transition-colors hover:bg-slate-50 hover:text-slate-900", title: "Fit view", "aria-label": "Fit view", onClick: (event) => {
+                    }, nodeTypes: nodeTypes, minZoom: 0.2, maxZoom: 2, proOptions: { hideAttribution: true }, nodesDraggable: canPersistLayout, nodesConnectable: allowDependencyConnect, isValidConnection: isValidConnection, elementsSelectable: true, children: [_jsxs(Controls, { showInteractive: false, showFitView: false, className: "border-border-default! rounded-lg! shadow-md!", children: [_jsx("button", { type: "button", className: "react-flow__controls-button react-flow__controls-fitview border-border-default text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-100 flex h-6 w-6 items-center justify-center border-t bg-white transition-colors", title: "Fit view", "aria-label": "Fit view", onClick: (event) => {
                                         event.stopPropagation();
                                         reactFlowRef.current?.fitView({ padding: 0.2 });
                                     }, children: _jsx(SquareSquare, { className: "shrink-0", strokeWidth: 1.75, style: {
@@ -1030,7 +1195,7 @@ export function DependencyGraphView(props) {
                                             height: "14px",
                                             maxWidth: "none",
                                             maxHeight: "none",
-                                        } }) }), onToggleMaximized ? (_jsx("button", { type: "button", className: "react-flow__controls-button flex h-6 w-6 items-center justify-center border-t border-slate-200 bg-white text-slate-600 transition-colors hover:bg-slate-50 hover:text-slate-900", "aria-label": isMaximized
+                                        } }) }), onToggleMaximized ? (_jsx("button", { type: "button", className: "react-flow__controls-button border-border-default text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-100 flex h-6 w-6 items-center justify-center border-t bg-white transition-colors", "aria-label": isMaximized
                                         ? "Restore task editor size"
                                         : "Maximize task editor", title: isMaximized
                                         ? "Restore task editor size"
@@ -1057,20 +1222,20 @@ export function DependencyGraphView(props) {
                                 : undefined, pannable: true, zoomable: true, nodeColor: (node) => {
                                 const d = node.data;
                                 if (d?.isBlocked)
-                                    return "#fecaca";
+                                    return "var(--color-feedback-red-light)";
                                 const status = d?.status;
                                 switch (status) {
                                     case "Done":
-                                        return "#bbf7d0";
+                                        return "var(--color-feedback-green-light)";
                                     case "InProgress":
-                                        return "#93c5fd";
+                                        return "var(--color-component-default-drop-zone)";
                                     case "Review":
-                                        return "#c4b5fd";
+                                        return "var(--color-component-layout-drop-zone)";
                                     case "Waiting":
-                                        return "#fcd34d";
+                                        return "var(--color-feedback-orange-light)";
                                     default:
-                                        return "#cbd5e1";
+                                        return "var(--color-neutral-grey-10)";
                                 }
-                            }, maskColor: "rgba(0, 0, 0, 0.08)", className: "rounded-lg! border-slate-200! opacity-60 shadow-md! transition-opacity duration-200 hover:opacity-100" })) : null] })) })] }));
+                            }, maskColor: "color-mix(in srgb, var(--color-neutral-grey-100) 8%, transparent)", className: "border-border-default! rounded-lg! opacity-60 shadow-md! transition-opacity duration-200 hover:opacity-100" })) : null] })) })] }));
 }
 //# sourceMappingURL=DependencyGraphView.js.map