@runfusion/fusion 0.23.0 → 0.24.0

package/dist/plugins/fusion-plugin-dependency-graph/src/GraphTaskNode.css

@@ -0,0 +1,157 @@
+.graph-task-node {
+  position: absolute;
+  z-index: 1;
+  width: min(100%, var(--graph-task-node-width, calc(var(--space-2xl) * 9)));
+  max-width: var(--graph-task-node-max-width, calc(var(--space-2xl) * 9.5));
+  transition:
+    box-shadow var(--transition-fast),
+    z-index var(--transition-fast),
+    opacity var(--transition-fast),
+    border-color var(--transition-fast);
+  border: var(--btn-border-width) solid transparent;
+  border-radius: var(--radius-sm);
+}
+
+.graph-task-node:hover {
+  box-shadow: var(--shadow-md);
+  z-index: 2;
+}
+
+.graph-task-node--highlighted {
+  box-shadow: 0 0 0 var(--btn-border-width) var(--todo), var(--shadow-md);
+  z-index: 2;
+}
+
+.graph-task-node--dimmed {
+  opacity: 0.4;
+}
+
+.graph-task-node--active {
+  border-color: rgba(var(--in-progress-rgb), 0.5);
+  box-shadow: 0 0 0 var(--btn-border-width) rgba(var(--in-progress-rgb), 0.45), 0 0 0.75rem rgba(var(--in-progress-rgb), 0.5), 0 0 1.5rem rgba(var(--in-progress-rgb), 0.2);
+  transform: scale(1.01);
+}
+
+.graph-task-node--in-review {
+  border-inline-start: calc(var(--btn-border-width) * 3) solid var(--in-review);
+  border-start-start-radius: var(--radius-md);
+  border-end-start-radius: var(--radius-md);
+}
+
+.graph-task-active-indicator {
+  display: flex;
+  align-items: center;
+  min-height: 1.25rem;
+  width: 100%;
+  padding-inline: var(--space-sm);
+  background: rgba(var(--in-progress-rgb), 0.85);
+  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+  animation: graph-task-active-pulse calc(var(--transition-normal) * 8) ease-in-out infinite;
+}
+
+.graph-task-active-indicator-text {
+  font-family: var(--font-mono);
+  font-size: 0.625rem;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--card);
+}
+
+.graph-task-node .card {
+  width: 100%;
+  height: 100%;
+}
+
+.graph-task-node[data-current-step="0"] .card-steps-list .card-step-item:nth-child(1),
+.graph-task-node[data-current-step="1"] .card-steps-list .card-step-item:nth-child(2),
+.graph-task-node[data-current-step="2"] .card-steps-list .card-step-item:nth-child(3),
+.graph-task-node[data-current-step="3"] .card-steps-list .card-step-item:nth-child(4),
+.graph-task-node[data-current-step="4"] .card-steps-list .card-step-item:nth-child(5),
+.graph-task-node[data-current-step="5"] .card-steps-list .card-step-item:nth-child(6),
+.graph-task-node[data-current-step="6"] .card-steps-list .card-step-item:nth-child(7),
+.graph-task-node[data-current-step="7"] .card-steps-list .card-step-item:nth-child(8),
+.graph-task-node[data-current-step="8"] .card-steps-list .card-step-item:nth-child(9),
+.graph-task-node[data-current-step="9"] .card-steps-list .card-step-item:nth-child(10),
+.graph-task-node[data-current-step="10"] .card-steps-list .card-step-item:nth-child(11),
+.graph-task-node[data-current-step="11"] .card-steps-list .card-step-item:nth-child(12),
+.graph-task-node[data-current-step="12"] .card-steps-list .card-step-item:nth-child(13),
+.graph-task-node[data-current-step="13"] .card-steps-list .card-step-item:nth-child(14),
+.graph-task-node[data-current-step="14"] .card-steps-list .card-step-item:nth-child(15),
+.graph-task-node[data-current-step="15"] .card-steps-list .card-step-item:nth-child(16),
+.graph-task-node[data-current-step="16"] .card-steps-list .card-step-item:nth-child(17),
+.graph-task-node[data-current-step="17"] .card-steps-list .card-step-item:nth-child(18),
+.graph-task-node[data-current-step="18"] .card-steps-list .card-step-item:nth-child(19),
+.graph-task-node[data-current-step="19"] .card-steps-list .card-step-item:nth-child(20) {
+  background: rgba(var(--in-progress-rgb), 0.15);
+  border-left: calc(var(--btn-border-width) * 2) solid var(--in-progress);
+  padding-left: var(--space-xs);
+  font-weight: 500;
+}
+
+.graph-task-node[data-current-step="0"] .card-steps-list .card-step-item:nth-child(1) .card-step-dot,
+.graph-task-node[data-current-step="1"] .card-steps-list .card-step-item:nth-child(2) .card-step-dot,
+.graph-task-node[data-current-step="2"] .card-steps-list .card-step-item:nth-child(3) .card-step-dot,
+.graph-task-node[data-current-step="3"] .card-steps-list .card-step-item:nth-child(4) .card-step-dot,
+.graph-task-node[data-current-step="4"] .card-steps-list .card-step-item:nth-child(5) .card-step-dot,
+.graph-task-node[data-current-step="5"] .card-steps-list .card-step-item:nth-child(6) .card-step-dot,
+.graph-task-node[data-current-step="6"] .card-steps-list .card-step-item:nth-child(7) .card-step-dot,
+.graph-task-node[data-current-step="7"] .card-steps-list .card-step-item:nth-child(8) .card-step-dot,
+.graph-task-node[data-current-step="8"] .card-steps-list .card-step-item:nth-child(9) .card-step-dot,
+.graph-task-node[data-current-step="9"] .card-steps-list .card-step-item:nth-child(10) .card-step-dot,
+.graph-task-node[data-current-step="10"] .card-steps-list .card-step-item:nth-child(11) .card-step-dot,
+.graph-task-node[data-current-step="11"] .card-steps-list .card-step-item:nth-child(12) .card-step-dot,
+.graph-task-node[data-current-step="12"] .card-steps-list .card-step-item:nth-child(13) .card-step-dot,
+.graph-task-node[data-current-step="13"] .card-steps-list .card-step-item:nth-child(14) .card-step-dot,
+.graph-task-node[data-current-step="14"] .card-steps-list .card-step-item:nth-child(15) .card-step-dot,
+.graph-task-node[data-current-step="15"] .card-steps-list .card-step-item:nth-child(16) .card-step-dot,
+.graph-task-node[data-current-step="16"] .card-steps-list .card-step-item:nth-child(17) .card-step-dot,
+.graph-task-node[data-current-step="17"] .card-steps-list .card-step-item:nth-child(18) .card-step-dot,
+.graph-task-node[data-current-step="18"] .card-steps-list .card-step-item:nth-child(19) .card-step-dot,
+.graph-task-node[data-current-step="19"] .card-steps-list .card-step-item:nth-child(20) .card-step-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  animation: graph-task-step-pulse calc(var(--transition-normal) * 10) ease-in-out infinite;
+}
+
+@keyframes graph-task-active-pulse {
+  0%,
+  100% {
+    background: rgba(var(--in-progress-rgb), 0.85);
+  }
+  50% {
+    background: rgba(var(--in-progress-rgb), 0.65);
+  }
+}
+
+@keyframes graph-task-step-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 0.75;
+  }
+}
+
+@media (max-width: 768px) {
+  .graph-task-node {
+    width: min(100%, var(--graph-task-node-mobile-width, calc(var(--space-2xl) * 8)));
+  }
+
+  .graph-task-node--active {
+    transform: scale(1.005);
+  }
+
+  .graph-task-active-indicator {
+    min-height: 1.5rem;
+    padding-inline: var(--space-md);
+  }
+
+  .graph-task-active-indicator-text {
+    font-size: 0.6875rem;
+  }
+}

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

@@ -0,0 +1,126 @@
+import type { CSSProperties, ComponentProps, HTMLAttributes } from "react";
+import type { GraphPosition } from "./types";
+import { useNodeDrag } from "./hooks/useNodeDrag";
+import { TaskCard } from "@fusion/dashboard/app/components/TaskCard";
+import { isTaskStuck } from "@fusion/dashboard/app/utils/taskStuck";
+import "./GraphTaskNode.css";
+import "./GraphHighlight.css";
+import "./styles/drag.css";
+
+type TaskCardComponentProps = ComponentProps<typeof TaskCard>;
+
+type TaskCardBridgeProps = Pick<
+  TaskCardComponentProps,
+  | "task"
+  | "projectId"
+  | "onOpenDetail"
+  | "addToast"
+  | "globalPaused"
+  | "onUpdateTask"
+  | "onArchiveTask"
+  | "onUnarchiveTask"
+  | "onDeleteTask"
+  | "onRetryTask"
+  | "onOpenDetailWithTab"
+  | "taskStuckTimeoutMs"
+  | "onOpenMission"
+  | "onMoveTask"
+  | "lastFetchTimeMs"
+  | "workflowStepNameLookup"
+>;
+
+export interface GraphTaskNodeProps extends TaskCardBridgeProps, Pick<HTMLAttributes<HTMLDivElement>, "onMouseEnter" | "onMouseLeave" | "onClick"> {
+  style?: CSSProperties;
+  position: GraphPosition;
+  scale: number;
+  isHighlighted?: boolean;
+  isDimmed?: boolean;
+  onNodePositionChange: (taskId: string, position: GraphPosition) => void;
+  onNodeDragStateChange?: (isDragging: boolean) => void;
+  onNodeDragEnd?: () => void;
+}
+
+const ACTIVE_STATUSES = new Set(["planning", "researching", "executing", "finalizing", "merging", "merging-fix"]);
+
+function getStatusLabel(status?: string): string {
+  if (!status) {
+    return "Executing";
+  }
+
+  return status.charAt(0).toUpperCase() + status.slice(1);
+}
+
+export function GraphTaskNode({
+  style,
+  position,
+  scale,
+  isHighlighted = false,
+  isDimmed = false,
+  onMouseEnter,
+  onMouseLeave,
+  onClick,
+  onNodePositionChange,
+  onNodeDragStateChange,
+  onNodeDragEnd,
+  ...taskCardProps
+}: GraphTaskNodeProps) {
+  const { task, globalPaused, taskStuckTimeoutMs, lastFetchTimeMs, onOpenDetail } = taskCardProps;
+  const isFailed = task.status === "failed";
+  const isPaused = task.paused === true;
+  const isStuck = isTaskStuck(task, taskStuckTimeoutMs, lastFetchTimeMs);
+  const isAwaitingApproval = task.column === "triage" && task.status === "awaiting-approval";
+  const isActive =
+    !globalPaused &&
+    !isFailed &&
+    !isPaused &&
+    !isStuck &&
+    !isAwaitingApproval &&
+    (task.column === "in-progress" || ACTIVE_STATUSES.has(task.status as string));
+
+  const hasValidCurrentStep =
+    typeof task.currentStep === "number" &&
+    task.currentStep >= 0 &&
+    Array.isArray(task.steps) &&
+    task.currentStep < task.steps.length;
+  const isInReview = task.column === "in-review";
+
+  const drag = useNodeDrag({
+    taskId: task.id,
+    position,
+    scale,
+    onPositionChange: onNodePositionChange,
+    onDragStateChange: onNodeDragStateChange,
+    onDragEnd: onNodeDragEnd,
+  });
+
+  return (
+    <div
+      className={`graph-task-node graph-node--draggable${drag.isDragging ? " graph-node--dragging" : ""}${isHighlighted ? " graph-task-node--highlighted graph-node--highlighted" : ""}${isDimmed ? " graph-task-node--dimmed graph-node--dimmed" : ""}${isActive ? " graph-task-node--active" : ""}${isInReview ? " graph-task-node--in-review" : ""}`}
+      style={style}
+      draggable={false}
+      data-testid={`graph-task-node-${task.id}`}
+      data-current-step={isActive && hasValidCurrentStep ? String(task.currentStep) : undefined}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onClick={(event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) {
+          return;
+        }
+        onOpenDetail(task);
+      }}
+      onClickCapture={drag.onClickCapture}
+      onPointerDown={drag.onPointerDown}
+      onPointerMove={drag.onPointerMove}
+      onPointerUp={drag.onPointerUp}
+      onPointerCancel={drag.onPointerCancel}
+    >
+      {isActive ? (
+        <div className="graph-task-active-indicator">
+          <span className="graph-task-active-indicator-text">{getStatusLabel(task.status)}</span>
+        </div>
+      ) : null}
+      <TaskCard {...taskCardProps} onOpenDetail={() => {}} disableDrag={true} />
+    </div>
+  );
+}

package/dist/plugins/fusion-plugin-dependency-graph/src/GraphToolbar.css

@@ -0,0 +1,35 @@
+.graph-toolbar {
+  position: absolute;
+  right: var(--space-md);
+  bottom: var(--space-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  padding: var(--space-sm);
+  background: var(--surface);
+  border: var(--btn-border-width) solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  z-index: 10;
+}
+
+.graph-toolbar__zoom-label {
+  min-width: 3.5ch;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  text-align: center;
+}
+
+@media (max-width: 768px) {
+  .graph-toolbar {
+    right: var(--space-sm);
+    bottom: var(--space-sm);
+    padding: var(--space-md);
+  }
+
+  .graph-toolbar .btn-icon {
+    min-width: calc(var(--space-xs) * 11);
+    min-height: calc(var(--space-xs) * 11);
+  }
+}

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

@@ -0,0 +1,36 @@
+import { Maximize, RotateCcw, ZoomIn, ZoomOut } from "lucide-react";
+import "./GraphToolbar.css";
+
+export interface GraphToolbarProps {
+  zoom: number;
+  onZoomIn: () => void;
+  onZoomOut: () => void;
+  onFitToGraph: () => void;
+  onResetView: () => void;
+}
+
+export function GraphToolbar({
+  zoom,
+  onZoomIn,
+  onZoomOut,
+  onFitToGraph,
+  onResetView,
+}: GraphToolbarProps) {
+  return (
+    <div className="graph-toolbar" data-testid="graph-toolbar">
+      <button className="btn btn-icon" title="Zoom in (Ctrl+=)" aria-label="Zoom in" onClick={onZoomIn}>
+        <ZoomIn size={16} />
+      </button>
+      <button className="btn btn-icon" title="Zoom out (Ctrl+-)" aria-label="Zoom out" onClick={onZoomOut}>
+        <ZoomOut size={16} />
+      </button>
+      <div className="graph-toolbar__zoom-label" aria-live="polite">{Math.round(zoom * 100)}%</div>
+      <button className="btn btn-icon" title="Fit to graph (Ctrl+Shift+F)" aria-label="Fit to graph" onClick={onFitToGraph}>
+        <Maximize size={16} />
+      </button>
+      <button className="btn btn-icon" title="Reset view (Ctrl+0)" aria-label="Reset view" onClick={onResetView}>
+        <RotateCcw size={16} />
+      </button>
+    </div>
+  );
+}

package/dist/plugins/fusion-plugin-dependency-graph/src/__tests__/DependencyGraph.highlighting.test.tsx

@@ -0,0 +1,112 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import type { Task } from "@fusion/core";
+import { DependencyGraph } from "../DependencyGraph";
+
+vi.mock("@fusion/dashboard/app/components/TaskCard", () => ({
+  TaskCard: ({ task, onOpenDetail }: { task: Task; onOpenDetail: (task: Task) => void }) => (
+    <button data-testid={`task-${task.id}`} onClick={() => onOpenDetail(task)}>{task.id}</button>
+  ),
+}));
+
+vi.mock("../useGraphInteraction", () => ({
+  useGraphInteraction: () => ({
+    transform: "translate(0px, 0px) scale(1)",
+    zoom: 1,
+    transitioning: false,
+    zoomIn: vi.fn(),
+    zoomOut: vi.fn(),
+    resetView: vi.fn(),
+    fitToGraph: vi.fn(),
+    onPointerDown: vi.fn(),
+    onPointerMove: vi.fn(),
+    onPointerUp: vi.fn(),
+    onWheelZoom: vi.fn(),
+    handleKeyDown: vi.fn(),
+  }),
+}));
+
+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;
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("DependencyGraph highlighting", () => {
+  const tasks = [createTask("A"), createTask("B", ["A"]), createTask("C", ["B"]), createTask("D")];
+
+  it("highlights chain on hover and returns to neutral on mouse leave", () => {
+    render(<DependencyGraph tasks={tasks} onOpenDetail={vi.fn()} />);
+
+    fireEvent.mouseEnter(screen.getByTestId("graph-task-node-C"));
+    expect(screen.getByTestId("graph-task-node-A").className).toContain("graph-task-node--highlighted");
+    expect(screen.getByTestId("graph-task-node-B").className).toContain("graph-task-node--highlighted");
+    expect(screen.getByTestId("graph-task-node-C").className).toContain("graph-task-node--highlighted");
+    expect(screen.getByTestId("graph-task-node-D").className).toContain("graph-task-node--dimmed");
+
+    fireEvent.mouseLeave(screen.getByTestId("graph-task-node-C"));
+    expect(screen.getByTestId("graph-task-node-A").className).not.toContain("graph-task-node--highlighted");
+    expect(screen.getByTestId("graph-task-node-D").className).not.toContain("graph-task-node--dimmed");
+  });
+
+  it("keeps selection until toggled or pane clicked", () => {
+    render(<DependencyGraph tasks={tasks} onOpenDetail={vi.fn()} />);
+
+    fireEvent.click(screen.getByTestId("graph-task-node-B"));
+    expect(screen.getByTestId("graph-task-node-A").className).toContain("graph-task-node--highlighted");
+
+    fireEvent.click(screen.getByTestId("graph-task-node-B"));
+    expect(screen.getByTestId("graph-task-node-A").className).not.toContain("graph-task-node--highlighted");
+
+    fireEvent.click(screen.getByTestId("graph-task-node-B"));
+    fireEvent.click(document.querySelector(".dependency-graph__viewport") as Element);
+    expect(screen.getByTestId("graph-task-node-B").className).not.toContain("graph-task-node--highlighted");
+  });
+
+  it("hover overrides selection and reverts when hover leaves", () => {
+    render(<DependencyGraph tasks={tasks} onOpenDetail={vi.fn()} />);
+
+    fireEvent.click(screen.getByTestId("graph-task-node-B"));
+    fireEvent.mouseEnter(screen.getByTestId("graph-task-node-D"));
+    expect(screen.getByTestId("graph-task-node-D").className).toContain("graph-task-node--highlighted");
+    expect(screen.getByTestId("graph-task-node-A").className).toContain("graph-task-node--dimmed");
+
+    fireEvent.mouseLeave(screen.getByTestId("graph-task-node-D"));
+    expect(screen.getByTestId("graph-task-node-A").className).toContain("graph-task-node--highlighted");
+  });
+
+  it("applies edge dimming/highlighting and preserves click-to-detail", () => {
+    const onOpenDetail = vi.fn();
+    render(<DependencyGraph tasks={tasks} onOpenDetail={onOpenDetail} />);
+
+    fireEvent.mouseEnter(screen.getByTestId("graph-task-node-C"));
+    const edges = screen.getAllByTestId("dependency-edge");
+    const edgeAB = edges.find((edge) => edge.getAttribute("data-edge-id") === "B->A");
+    const edgeCB = edges.find((edge) => edge.getAttribute("data-edge-id") === "C->B");
+
+    expect(edgeAB?.className.baseVal || edgeAB?.className).toContain("graph-edge--highlighted");
+    expect(edgeCB?.className.baseVal || edgeCB?.className).toContain("graph-edge--highlighted");
+
+    fireEvent.click(screen.getByTestId("task-C"));
+    expect(onOpenDetail).toHaveBeenCalledTimes(1);
+    expect(onOpenDetail).toHaveBeenCalledWith(expect.objectContaining({ id: "C" }));
+  });
+
+  it("highlights only isolated node with no dependencies", () => {
+    render(<DependencyGraph tasks={[createTask("X")]} onOpenDetail={vi.fn()} />);
+    fireEvent.mouseEnter(screen.getByTestId("graph-task-node-X"));
+    expect(screen.getByTestId("graph-task-node-X").className).toContain("graph-task-node--highlighted");
+  });
+});

package/dist/plugins/fusion-plugin-dependency-graph/src/__tests__/DependencyGraph.persistence.test.tsx

@@ -0,0 +1,115 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import type { Task } from "@fusion/core";
+import { DependencyGraph } from "../DependencyGraph";
+
+const fitToGraph = vi.fn();
+
+vi.mock("@fusion/dashboard/app/components/TaskCard", () => ({
+  TaskCard: ({ task, onOpenDetail }: { task: Task; onOpenDetail: (task: Task) => void }) => (
+    <button data-testid={`task-${task.id}`} onClick={() => onOpenDetail(task)}>{task.id}</button>
+  ),
+}));
+
+vi.mock("../useGraphInteraction", () => ({
+  useGraphInteraction: () => ({
+    transform: "translate(0px, 0px) scale(1)",
+    zoom: 1,
+    transitioning: false,
+    zoomIn: vi.fn(),
+    zoomOut: vi.fn(),
+    resetView: vi.fn(),
+    fitToGraph,
+    onPointerDown: vi.fn(),
+    onPointerMove: vi.fn(),
+    onPointerUp: vi.fn(),
+    onWheelZoom: vi.fn(),
+    handleKeyDown: vi.fn(),
+  }),
+}));
+
+vi.mock("../layout", () => ({
+  computeAutoLayout: ({ nodes }: { nodes: Array<{ task: { id: string } }> }) => {
+    const map = new Map<string, { x: number; y: number }>();
+    for (const node of nodes) {
+      if (node.task.id === "A") map.set("A", { x: 0, y: 0 });
+      if (node.task.id === "B") map.set("B", { x: 200, y: 0 });
+    }
+    return map;
+  },
+}));
+
+function createStorage() {
+  const store = new Map<string, string>();
+  return {
+    getItem: (key: string) => store.get(key) ?? null,
+    setItem: (key: string, value: string) => {
+      store.set(key, value);
+    },
+    removeItem: (key: string) => {
+      store.delete(key);
+    },
+  };
+}
+
+function createTask(id: string, column: Task["column"] = "todo"): Task {
+  return { id, description: id, column, dependencies: [], steps: [], currentStep: 0, log: [] } as Task;
+}
+
+describe("DependencyGraph persistence", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  beforeEach(() => {
+    Object.defineProperty(window, "localStorage", { value: createStorage(), configurable: true });
+    fitToGraph.mockReset();
+  });
+
+  it("persists dragged node position across remount", () => {
+    const { unmount } = render(<DependencyGraph tasks={[createTask("A")]} projectId="p1" />);
+
+    const node = screen.getByTestId("graph-task-node-A");
+    fireEvent.pointerDown(node, { pointerId: 1, isPrimary: true, clientX: 10, clientY: 10 });
+    fireEvent.pointerMove(node, { pointerId: 1, isPrimary: true, clientX: 30, clientY: 40 });
+    fireEvent.pointerUp(node, { pointerId: 1, isPrimary: true, clientX: 30, clientY: 40 });
+
+    expect(window.localStorage.getItem("kb:p1:fusion-plugin-dependency-graph:positions")).toContain('"A":{"x":20,"y":30}');
+
+    unmount();
+    render(<DependencyGraph tasks={[createTask("A")]} projectId="p1" />);
+
+    expect(screen.getByTestId("graph-task-node-A").getAttribute("style")).toContain("left: 20px");
+    expect(screen.getByTestId("graph-task-node-A").getAttribute("style")).toContain("top: 30px");
+  });
+
+  it("merges saved positions with auto-layout for new tasks", () => {
+    window.localStorage.setItem("kb:p1:fusion-plugin-dependency-graph:positions", JSON.stringify({ A: { x: 25, y: 35 } }));
+
+    render(<DependencyGraph tasks={[createTask("A"), createTask("B")]} projectId="p1" />);
+
+    expect(screen.getByTestId("graph-task-node-A").getAttribute("style")).toContain("left: 25px");
+    expect(screen.getByTestId("graph-task-node-B").getAttribute("style")).toContain("left: 200px");
+  });
+
+  it("fit to graph clears saved positions and reapplies auto-layout", () => {
+    window.localStorage.setItem("kb:p1:fusion-plugin-dependency-graph:positions", JSON.stringify({ A: { x: 25, y: 35 } }));
+
+    render(<DependencyGraph tasks={[createTask("A")]} projectId="p1" />);
+    fireEvent.click(screen.getByRole("button", { name: "Fit to graph" }));
+
+    expect(window.localStorage.getItem("kb:p1:fusion-plugin-dependency-graph:positions")).toBeNull();
+    expect(screen.getByTestId("graph-task-node-A").getAttribute("style")).toContain("left: 0px");
+  });
+
+  it("switching projects loads project-scoped positions", () => {
+    window.localStorage.setItem("kb:p1:fusion-plugin-dependency-graph:positions", JSON.stringify({ A: { x: 11, y: 22 } }));
+    window.localStorage.setItem("kb:p2:fusion-plugin-dependency-graph:positions", JSON.stringify({ A: { x: 33, y: 44 } }));
+
+    const { rerender } = render(<DependencyGraph tasks={[createTask("A")]} projectId="p1" />);
+    expect(screen.getByTestId("graph-task-node-A").getAttribute("style")).toContain("left: 11px");
+
+    rerender(<DependencyGraph tasks={[createTask("A")]} projectId="p2" />);
+    expect(screen.getByTestId("graph-task-node-A").getAttribute("style")).toContain("left: 33px");
+  });
+});