@runfusion/fusion 0.22.0 → 0.24.0

package/dist/plugins/fusion-plugin-dependency-graph/src/__tests__/useGraphData.test.ts

@@ -0,0 +1,86 @@
+import { describe, expect, it } from "vitest";
+import { renderHook } from "@testing-library/react";
+import type { Task } from "@fusion/core";
+import { useGraphData } from "../useGraphData";
+
+function createTask(id: string, column: Task["column"] = "todo", dependencies: string[] = []): Task {
+  return {
+    id,
+    description: id,
+    column,
+    dependencies,
+    steps: [],
+    currentStep: 0,
+    log: [],
+  } as Task;
+}
+
+describe("useGraphData", () => {
+  it("returns empty graph for empty tasks", () => {
+    const { result } = renderHook(() => useGraphData([]));
+    expect(result.current).toEqual({ nodes: [], edges: [] });
+  });
+
+  it("creates node for single task with no deps", () => {
+    const { result } = renderHook(() => useGraphData([createTask("A")]));
+    expect(result.current.nodes.map((node) => node.task.id)).toEqual(["A"]);
+    expect(result.current.edges).toEqual([]);
+  });
+
+  describe("orphan dependencies to excluded tasks", () => {
+    it("drops dependency edge to done task while keeping dependent node", () => {
+      const filteredTasks = [createTask("A", "in-progress", ["DONE-1"])];
+      const { result } = renderHook(() => useGraphData(filteredTasks));
+
+      expect(result.current.nodes.map((node) => node.task.id)).toEqual(["A"]);
+      expect(result.current.edges).toEqual([]);
+    });
+
+    it("drops dependency edge to archived task while keeping dependent node", () => {
+      const filteredTasks = [createTask("A", "triage", ["ARCH-1"])];
+      const { result } = renderHook(() => useGraphData(filteredTasks));
+
+      expect(result.current.nodes.map((node) => node.task.id)).toEqual(["A"]);
+      expect(result.current.edges).toEqual([]);
+    });
+
+    it("keeps only included dependency edges when mixed dependencies are present", () => {
+      const filteredTasks = [createTask("A", "in-progress", ["B", "DONE-1", "ARCH-1"]), createTask("B", "todo")];
+      const { result } = renderHook(() => useGraphData(filteredTasks));
+
+      expect(result.current.nodes.map((node) => node.task.id)).toEqual(["A", "B"]);
+      expect(result.current.edges).toEqual([{ source: "A", target: "B" }]);
+    });
+
+    it("shows zero edges when all dependencies are excluded", () => {
+      const filteredTasks = [createTask("A", "in-progress", ["DONE-1", "ARCH-1"])];
+      const { result } = renderHook(() => useGraphData(filteredTasks));
+
+      expect(result.current.nodes.map((node) => node.task.id)).toEqual(["A"]);
+      expect(result.current.edges).toEqual([]);
+    });
+  });
+
+  describe("in-review dependency edges", () => {
+    it("renders edges between in-review tasks", () => {
+      const tasks = [createTask("A", "in-review", ["B"]), createTask("B", "in-review")];
+      const { result } = renderHook(() => useGraphData(tasks));
+
+      expect(result.current.edges).toEqual([{ source: "A", target: "B" }]);
+    });
+
+    it("renders edge from in-review task to in-progress task", () => {
+      const tasks = [createTask("A", "in-review", ["B"]), createTask("B", "in-progress")];
+      const { result } = renderHook(() => useGraphData(tasks));
+
+      expect(result.current.edges).toEqual([{ source: "A", target: "B" }]);
+    });
+
+    it("renders edge from in-progress task to in-review task", () => {
+      const tasks = [createTask("A", "in-progress", ["B"]), createTask("B", "in-review")];
+      const { result } = renderHook(() => useGraphData(tasks));
+
+      expect(result.current.edges).toEqual([{ source: "A", target: "B" }]);
+    });
+  });
+});

package/dist/plugins/fusion-plugin-dependency-graph/src/__tests__/useGraphInteraction.test.ts

@@ -0,0 +1,167 @@
+import { describe, expect, it, vi } from "vitest";
+import { act, renderHook } from "@testing-library/react";
+import type React from "react";
+import { useGraphInteraction } from "../useGraphInteraction";
+
+function createKeyEvent(
+  key: string,
+  options?: { ctrlKey?: boolean; metaKey?: boolean; shiftKey?: boolean; target?: EventTarget | null },
+) {
+  return {
+    key,
+    ctrlKey: Boolean(options?.ctrlKey),
+    metaKey: Boolean(options?.metaKey),
+    shiftKey: Boolean(options?.shiftKey),
+    target: options?.target ?? document.createElement("div"),
+    preventDefault: vi.fn(),
+  } as unknown as React.KeyboardEvent;
+}
+
+describe("useGraphInteraction", () => {
+  it("starts with default pan/zoom", () => {
+    const { result } = renderHook(() => useGraphInteraction());
+    expect(result.current.zoom).toBe(1);
+    expect(result.current.zoomPercent).toBe(100);
+    expect(result.current.pan).toEqual({ x: 0, y: 0 });
+  });
+
+  it("clamps zoom between 0.1 and 3", () => {
+    const { result } = renderHook(() => useGraphInteraction());
+
+    act(() => {
+      for (let i = 0; i < 100; i += 1) result.current.zoomOut();
+    });
+    expect(result.current.zoom).toBe(0.1);
+
+    act(() => {
+      for (let i = 0; i < 100; i += 1) result.current.zoomIn();
+    });
+    expect(result.current.zoom).toBe(3);
+  });
+
+  it("keeps wheel zoom anchored to cursor position", () => {
+    const { result } = renderHook(() => useGraphInteraction());
+
+    act(() => {
+      result.current.onWheelZoom(-120, { x: 200, y: 150 }, 800, 600);
+    });
+
+    expect(result.current.zoom).toBe(1.1);
+    expect(result.current.pan.x).toBeCloseTo(-20, 5);
+    expect(result.current.pan.y).toBeCloseTo(-15, 5);
+  });
+
+  it("supports pinch zoom with stationary midpoint", () => {
+    const { result } = renderHook(() => useGraphInteraction());
+
+    act(() => {
+      result.current.onPointerDown(1, { x: 100, y: 100 });
+      result.current.onPointerDown(2, { x: 200, y: 100 });
+      result.current.onPointerMove(2, { x: 250, y: 100 }, 800, 600);
+    });
+
+    expect(result.current.zoom).toBe(1.5);
+    expect(result.current.pan).toEqual({ x: -50, y: -50 });
+  });
+
+  it("applies animation state for fit and reset", () => {
+    vi.useFakeTimers();
+    const { result } = renderHook(() => useGraphInteraction());
+
+    act(() => {
+      result.current.fitToGraph(new Map([["A", { x: 0, y: 0 }]]), 800, 600);
+    });
+    expect(result.current.transitioning).toBe(true);
+
+    act(() => {
+      vi.advanceTimersByTime(210);
+    });
+    expect(result.current.transitioning).toBe(false);
+
+    act(() => {
+      result.current.resetView();
+    });
+    expect(result.current.transitioning).toBe(true);
+
+    act(() => {
+      vi.advanceTimersByTime(210);
+    });
+    expect(result.current.transitioning).toBe(false);
+    vi.useRealTimers();
+  });
+
+  it("fits wide graph", () => {
+    const { result } = renderHook(() => useGraphInteraction());
+    act(() => {
+      result.current.fitToGraph(new Map([
+        ["A", { x: 0, y: 0 }],
+        ["B", { x: 2000, y: 0 }],
+      ]), 800, 600);
+    });
+
+    expect(result.current.zoom).toBeLessThan(1);
+  });
+
+  it("handles keyboard shortcuts for zoom in/out, reset, fit, and escape", () => {
+    const { result } = renderHook(() => useGraphInteraction());
+    const positions = new Map([
+      ["A", { x: 0, y: 0 }],
+      ["B", { x: 500, y: 200 }],
+    ]);
+
+    act(() => {
+      result.current.handleKeyDown(createKeyEvent("=", { ctrlKey: true }), 800, 600, positions);
+    });
+    expect(result.current.zoom).toBe(1.2);
+
+    act(() => {
+      result.current.handleKeyDown(createKeyEvent("-", { ctrlKey: true }), 800, 600, positions);
+    });
+    expect(result.current.zoom).toBeCloseTo(1, 5);
+
+    act(() => {
+      result.current.handleKeyDown(createKeyEvent("F", { ctrlKey: true, shiftKey: true }), 800, 600, positions, { nodeWidth: 280, nodeHeight: 100 });
+    });
+    expect(result.current.zoom).toBeLessThan(1);
+
+    act(() => {
+      result.current.handleKeyDown(createKeyEvent("0", { ctrlKey: true }), 800, 600, positions);
+    });
+    expect(result.current.zoom).toBe(1);
+    expect(result.current.pan).toEqual({ x: 0, y: 0 });
+
+    act(() => {
+      result.current.zoomIn();
+      result.current.handleKeyDown(createKeyEvent("Escape"), 800, 600, positions);
+    });
+    expect(result.current.zoom).toBe(1);
+    expect(result.current.pan).toEqual({ x: 0, y: 0 });
+  });
+
+  it("does not run shortcuts when focused on editable targets", () => {
+    const { result } = renderHook(() => useGraphInteraction());
+    const input = document.createElement("input");
+    const positions = new Map([["A", { x: 0, y: 0 }]]);
+
+    act(() => {
+      result.current.handleKeyDown(createKeyEvent("=", { ctrlKey: true, target: input }), 800, 600, positions);
+    });
+
+    expect(result.current.zoom).toBe(1);
+  });
+
+  it("resets when positions are empty", () => {
+    const { result } = renderHook(() => useGraphInteraction());
+
+    act(() => {
+      result.current.zoomIn();
+      result.current.onPointerDown(1, { x: 10, y: 10 });
+      result.current.onPointerMove(1, { x: 110, y: 60 }, 800, 600);
+      result.current.onPointerUp(1);
+      result.current.fitToGraph(new Map(), 800, 600);
+    });
+
+    expect(result.current.zoom).toBe(1);
+    expect(result.current.pan).toEqual({ x: 0, y: 0 });
+  });
+});

package/dist/plugins/fusion-plugin-dependency-graph/src/__tests__/useGraphPositions.test.ts

@@ -0,0 +1,66 @@
+import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useGraphPositions } from "../hooks/useGraphPositions";
+import * as storage from "../utils/graphPositionStorage";
+
+vi.mock("../utils/graphPositionStorage", () => ({
+  loadPositions: vi.fn(),
+  savePositions: vi.fn(),
+  clearPositions: vi.fn(),
+}));
+
+describe("useGraphPositions", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("loads saved positions on mount with project scope", () => {
+    vi.mocked(storage.loadPositions).mockReturnValue({ a: { x: 1, y: 2 } });
+
+    const { result } = renderHook(() => useGraphPositions({ projectId: "p1", visibleTaskIds: new Set(["a"]) }));
+
+    expect(storage.loadPositions).toHaveBeenCalledWith("p1");
+    expect(result.current.savedPositions).toEqual({ a: { x: 1, y: 2 } });
+  });
+
+  it("reloads positions when project id changes", () => {
+    vi.mocked(storage.loadPositions).mockReturnValueOnce({ a: { x: 1, y: 1 } }).mockReturnValueOnce({ b: { x: 2, y: 2 } });
+
+    const { result, rerender } = renderHook(
+      ({ projectId }) => useGraphPositions({ projectId, visibleTaskIds: new Set(["a", "b"]) }),
+      { initialProps: { projectId: "p1" } },
+    );
+
+    rerender({ projectId: "p2" });
+
+    expect(storage.loadPositions).toHaveBeenNthCalledWith(1, "p1");
+    expect(storage.loadPositions).toHaveBeenNthCalledWith(2, "p2");
+    expect(result.current.savedPositions).toEqual({ b: { x: 2, y: 2 } });
+  });
+
+  it("persistPositions writes scoped and filters non-visible ids", () => {
+    vi.mocked(storage.loadPositions).mockReturnValue({});
+
+    const { result } = renderHook(() => useGraphPositions({ projectId: "p1", visibleTaskIds: new Set(["a"]) }));
+
+    act(() => {
+      result.current.persistPositions({ a: { x: 1, y: 2 }, hidden: { x: 9, y: 9 } });
+    });
+
+    expect(storage.savePositions).toHaveBeenCalledWith({ a: { x: 1, y: 2 }, hidden: { x: 9, y: 9 } }, new Set(["a"]), "p1");
+    expect(result.current.savedPositions).toEqual({ a: { x: 1, y: 2 } });
+  });
+
+  it("clearSavedPositions clears storage and resets state", () => {
+    vi.mocked(storage.loadPositions).mockReturnValue({ a: { x: 1, y: 2 } });
+
+    const { result } = renderHook(() => useGraphPositions({ projectId: "p1", visibleTaskIds: new Set(["a"]) }));
+
+    act(() => {
+      result.current.clearSavedPositions();
+    });
+
+    expect(storage.clearPositions).toHaveBeenCalledWith("p1");
+    expect(result.current.savedPositions).toBeNull();
+  });
+});

package/dist/plugins/fusion-plugin-dependency-graph/src/__tests__/useNodeDrag.test.ts

@@ -0,0 +1,81 @@
+import { act, renderHook } from "@testing-library/react";
+import type React from "react";
+import { describe, expect, it, vi } from "vitest";
+import { __internal, useNodeDrag } from "../hooks/useNodeDrag";
+
+function pointerEvent(overrides: Partial<PointerEvent> = {}) {
+  const target = {
+    setPointerCapture: vi.fn(),
+    releasePointerCapture: vi.fn(),
+    hasPointerCapture: vi.fn(() => true),
+  };
+  return {
+    isPrimary: true,
+    pointerId: 1,
+    clientX: 0,
+    clientY: 0,
+    stopPropagation: vi.fn(),
+    currentTarget: target,
+    ...overrides,
+  } as unknown as React.PointerEvent<HTMLElement>;
+}
+
+describe("useNodeDrag", () => {
+  it("transitions pending to dragging and back on pointer up", () => {
+    const onPositionChange = vi.fn();
+    const onDragStateChange = vi.fn();
+    const { result } = renderHook(() =>
+      useNodeDrag({ taskId: "A", position: { x: 10, y: 10 }, scale: 1, onPositionChange, onDragStateChange }),
+    );
+
+    act(() => result.current.onPointerDown(pointerEvent({ clientX: 10, clientY: 20 })));
+    act(() => result.current.onPointerMove(pointerEvent({ clientX: 16, clientY: 26 })));
+    expect(result.current.isDragging).toBe(true);
+    expect(onPositionChange).toHaveBeenCalledWith("A", { x: 16, y: 16 });
+
+    act(() => result.current.onPointerUp(pointerEvent({ clientX: 16, clientY: 26 })));
+    expect(result.current.isDragging).toBe(false);
+    expect(onDragStateChange).toHaveBeenCalledWith(true);
+    expect(onDragStateChange).toHaveBeenCalledWith(false);
+  });
+
+  it("stays click-only below threshold", () => {
+    const onPositionChange = vi.fn();
+    const { result } = renderHook(() =>
+      useNodeDrag({ taskId: "A", position: { x: 0, y: 0 }, scale: 1, onPositionChange }),
+    );
+
+    act(() => result.current.onPointerDown(pointerEvent()));
+    act(() => result.current.onPointerMove(pointerEvent({ clientX: __internal.DRAG_THRESHOLD_PX - 1, clientY: 0 })));
+    act(() => result.current.onPointerUp(pointerEvent({ clientX: __internal.DRAG_THRESHOLD_PX - 1, clientY: 0 })));
+
+    expect(result.current.isDragging).toBe(false);
+    expect(onPositionChange).not.toHaveBeenCalled();
+  });
+
+  it("divides pointer delta by zoom scale", () => {
+    const onPositionChange = vi.fn();
+    const { result } = renderHook(() =>
+      useNodeDrag({ taskId: "A", position: { x: 0, y: 0 }, scale: 2, onPositionChange }),
+    );
+
+    act(() => result.current.onPointerDown(pointerEvent()));
+    act(() => result.current.onPointerMove(pointerEvent({ clientX: 10, clientY: 6 })));
+
+    expect(onPositionChange).toHaveBeenCalledWith("A", { x: 5, y: 3 });
+  });
+
+  it("cancels drag cleanly on pointer cancel", () => {
+    const onPositionChange = vi.fn();
+    const { result } = renderHook(() =>
+      useNodeDrag({ taskId: "A", position: { x: 0, y: 0 }, scale: 1, onPositionChange }),
+    );
+
+    act(() => result.current.onPointerDown(pointerEvent()));
+    act(() => result.current.onPointerMove(pointerEvent({ clientX: 8, clientY: 0 })));
+    expect(result.current.isDragging).toBe(true);
+
+    act(() => result.current.onPointerCancel(pointerEvent({ clientX: 8, clientY: 0 })));
+    expect(result.current.isDragging).toBe(false);
+  });
+});

package/dist/plugins/fusion-plugin-dependency-graph/src/dashboard-interop.d.ts

@@ -0,0 +1,35 @@
+declare module "@fusion/dashboard/app/utils/taskStuck" {
+  import type { Task } from "@fusion/core";
+
+  export function isTaskStuck(task: Task, taskStuckTimeoutMs?: number, lastFetchTimeMs?: number): boolean;
+}
+
+declare module "@fusion/dashboard/app/components/TaskCard" {
+  import type { Column, Task, TaskDetail } from "@fusion/core";
+  import type { ReactElement } from "react";
+
+  interface TaskCardProps {
+    task: Task;
+    projectId?: string;
+    onOpenDetail: (task: Task | TaskDetail) => void;
+    addToast: (message: string, type?: "success" | "error" | "info" | "warning") => void;
+    globalPaused?: boolean;
+    onUpdateTask?: (
+      id: string,
+      updates: { title?: string; description?: string; dependencies?: string[] }
+    ) => Promise<Task>;
+    onArchiveTask?: (id: string) => Promise<Task>;
+    onUnarchiveTask?: (id: string) => Promise<Task>;
+    onDeleteTask?: (id: string, options?: { removeDependencyReferences?: boolean }) => Promise<Task>;
+    onRetryTask?: (id: string) => Promise<Task>;
+    onOpenDetailWithTab?: (task: Task | TaskDetail, initialTab: "changes") => void;
+    taskStuckTimeoutMs?: number;
+    onOpenMission?: (missionId: string) => void;
+    onMoveTask?: (id: string, column: Column, optionsOrPosition?: { preserveProgress?: boolean } | number) => Promise<Task>;
+    lastFetchTimeMs?: number;
+    workflowStepNameLookup?: ReadonlyMap<string, string>;
+    disableDrag?: boolean;
+  }
+
+  export function TaskCard(props: TaskCardProps): ReactElement;
+}

package/dist/plugins/fusion-plugin-dependency-graph/src/dashboard-view.tsx

@@ -0,0 +1,19 @@
+import type { Task, TaskDetail, WorkflowStep } from "@fusion/core";
+import type { PluginDashboardViewContext } from "@fusion/dashboard/app/plugins/types";
+import { createElement } from "react";
+import { DependencyGraph } from "./DependencyGraph";
+
+function createWorkflowStepNameLookup(workflowSteps: WorkflowStep[] | undefined): ReadonlyMap<string, string> {
+  return new Map((workflowSteps ?? []).map((step) => [step.id, step.name] as const));
+}
+
+export function DependencyGraphDashboardView({ context }: { context?: PluginDashboardViewContext }) {
+  return createElement(DependencyGraph, {
+    tasks: context?.tasks ?? [],
+    projectId: context?.projectId,
+    workflowStepNameLookup: createWorkflowStepNameLookup(context?.workflowSteps),
+    onOpenDetail: context?.openTaskDetail as ((task: Task | TaskDetail) => void) | undefined,
+  });
+}
+
+export { DependencyGraph };

package/dist/plugins/fusion-plugin-dependency-graph/src/edges.tsx

@@ -0,0 +1,70 @@
+import type { GraphEdge, GraphPosition } from "./types";
+import "./GraphHighlight.css";
+
+interface GraphEdgesProps {
+  edges: GraphEdge[];
+  positions: Map<string, GraphPosition>;
+  nodeWidth?: number;
+  nodeHeight?: number;
+  highlightedEdgeIds?: Set<string>;
+}
+
+const DEFAULT_NODE_WIDTH = 280;
+const DEFAULT_NODE_HEIGHT = 100;
+
+export function GraphEdges({
+  edges,
+  positions,
+  nodeWidth = DEFAULT_NODE_WIDTH,
+  nodeHeight = DEFAULT_NODE_HEIGHT,
+  highlightedEdgeIds,
+}: GraphEdgesProps) {
+  const hasHighlights = Boolean(highlightedEdgeIds && highlightedEdgeIds.size > 0);
+
+  return (
+    <svg className="dependency-graph-edges" aria-hidden="true">
+      <defs>
+        <marker
+          id="dependency-graph-arrowhead"
+          markerWidth="10"
+          markerHeight="7"
+          refX="10"
+          refY="3.5"
+          orient="auto"
+          markerUnits="strokeWidth"
+        >
+          <path d="M 0 0 L 10 3.5 L 0 7 z" fill="var(--border)" />
+        </marker>
+      </defs>
+      {edges.map((edge) => {
+        const source = positions.get(edge.source);
+        const target = positions.get(edge.target);
+        if (!source || !target) return null;
+
+        const edgeId = `${edge.source}->${edge.target}`;
+        const isActiveHighlight = hasHighlights && (highlightedEdgeIds?.has(edgeId) ?? false);
+        const x1 = source.x + nodeWidth / 2;
+        const y1 = source.y + nodeHeight;
+        const x2 = target.x + nodeWidth / 2;
+        const y2 = target.y;
+        const controlY = y1 + (y2 - y1) / 2;
+
+        return (
+          <path
+            key={edgeId}
+            data-testid="dependency-edge"
+            data-edge-id={edgeId}
+            className={`dependency-graph-edge${isActiveHighlight ? " graph-edge--highlighted" : ""}${hasHighlights && !isActiveHighlight ? " graph-edge--dimmed" : ""}`}
+            d={`M ${x1} ${y1} C ${x1} ${controlY}, ${x2} ${controlY}, ${x2} ${y2}`}
+            fill="none"
+            stroke={isActiveHighlight ? "var(--todo)" : "var(--border)"}
+            strokeWidth={isActiveHighlight ? "var(--space-xs)" : "var(--btn-border-width)"}
+            opacity={hasHighlights && !isActiveHighlight ? 0.15 : 1}
+            markerEnd="url(#dependency-graph-arrowhead)"
+            style={{ transition: "opacity var(--transition-fast), stroke var(--transition-fast), stroke-width var(--transition-fast)" }}
+          />
+        );
+      })}
+    </svg>
+  );
+}

package/dist/plugins/fusion-plugin-dependency-graph/src/filters.ts

@@ -0,0 +1,8 @@
+import type { Column, Task } from "@fusion/core";
+
+export const INCLUDED_COLUMNS: ReadonlySet<Column> = new Set(["triage", "todo", "in-progress", "in-review"]);
+export const EXCLUDED_COLUMNS: ReadonlySet<Column> = new Set(["done", "archived"]);
+
+export function filterGraphTasks(tasks: Task[]): Task[] {
+  return tasks.filter((task) => INCLUDED_COLUMNS.has(task.column));
+}

package/dist/plugins/fusion-plugin-dependency-graph/src/hooks/__tests__/useDependencyChain.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest";
+import { renderHook } from "@testing-library/react";
+import type { Task } from "@fusion/core";
+import { useDependencyChain } from "../useDependencyChain";
+
+function createTask(id: string, dependencies: string[] = []): Task {
+  return {
+    id,
+    description: id,
+    column: "todo",
+    dependencies,
+    steps: [],
+    currentStep: 0,
+    log: [],
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+  } as Task;
+}
+
+describe("useDependencyChain", () => {
+  it("returns empty set for unknown task in empty list", () => {
+    const { result } = renderHook(() => useDependencyChain([]));
+    expect(result.current.getChain("A").size).toBe(0);
+  });
+
+  it("returns single task when no dependencies", () => {
+    const { result } = renderHook(() => useDependencyChain([createTask("A")]));
+    expect(result.current.getChain("A")).toEqual(new Set(["A"]));
+  });
+
+  it("returns full linear chain", () => {
+    const tasks = [createTask("A"), createTask("B", ["A"]), createTask("C", ["B"]), createTask("D")];
+    const { result } = renderHook(() => useDependencyChain(tasks));
+    expect(result.current.getChain("C")).toEqual(new Set(["A", "B", "C"]));
+  });
+
+  it("returns full diamond chain", () => {
+    const tasks = [createTask("A"), createTask("B", ["A"]), createTask("C", ["A"]), createTask("D", ["B", "C"]), createTask("E")];
+    const { result } = renderHook(() => useDependencyChain(tasks));
+    expect(result.current.getChain("D")).toEqual(new Set(["A", "B", "C", "D"]));
+  });
+
+  it("does not include disconnected tasks", () => {
+    const { result } = renderHook(() => useDependencyChain([createTask("A"), createTask("B")]));
+    expect(result.current.getChain("A")).toEqual(new Set(["A"]));
+  });
+
+  it("handles circular dependencies safely", () => {
+    const tasks = [createTask("A", ["B"]), createTask("B", ["A"]), createTask("C")];
+    const { result } = renderHook(() => useDependencyChain(tasks));
+    expect(result.current.getChain("A")).toEqual(new Set(["A", "B"]));
+  });
+});

package/dist/plugins/fusion-plugin-dependency-graph/src/hooks/useDependencyChain.ts

@@ -0,0 +1,60 @@
+import { useCallback, useMemo } from "react";
+import type { Task } from "@fusion/core";
+
+export function useDependencyChain(tasks: Task[]) {
+  const { upstreamMap, downstreamMap } = useMemo(() => {
+    const upstream = new Map<string, Set<string>>();
+    const downstream = new Map<string, Set<string>>();
+
+    for (const task of tasks) {
+      upstream.set(task.id, new Set(task.dependencies ?? []));
+      if (!downstream.has(task.id)) downstream.set(task.id, new Set());
+    }
+
+    for (const task of tasks) {
+      for (const dependencyId of task.dependencies ?? []) {
+        if (!downstream.has(dependencyId)) downstream.set(dependencyId, new Set());
+        downstream.get(dependencyId)?.add(task.id);
+      }
+    }
+
+    return { upstreamMap: upstream, downstreamMap: downstream };
+  }, [tasks]);
+
+  const getChain = useCallback(
+    (taskId: string): Set<string> => {
+      if (!upstreamMap.has(taskId) && !downstreamMap.has(taskId)) {
+        return new Set();
+      }
+
+      const chain = new Set<string>([taskId]);
+
+      const visit = (origin: string, adjacency: Map<string, Set<string>>) => {
+        const queue = [origin];
+        const visited = new Set<string>([origin]);
+
+        while (queue.length > 0) {
+          const current = queue.shift();
+          if (!current) continue;
+          const neighbors = adjacency.get(current);
+          if (!neighbors) continue;
+
+          for (const neighbor of neighbors) {
+            if (visited.has(neighbor)) continue;
+            visited.add(neighbor);
+            chain.add(neighbor);
+            queue.push(neighbor);
+          }
+        }
+      };
+
+      visit(taskId, upstreamMap);
+      visit(taskId, downstreamMap);
+
+      return chain;
+    },
+    [downstreamMap, upstreamMap],
+  );
+
+  return { getChain };
+}