@runfusion/fusion 0.22.0 → 0.24.0

package/dist/pi-claude-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fusion/pi-claude-cli",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "description": "Fusion vendored fork: pi coding-agent extension that routes LLM calls through the Claude Code CLI. Forked from rchern/pi-claude-cli (MIT). See UPSTREAM.md.",
   "license": "MIT",
   "private": true,

package/dist/plugins/fusion-plugin-cursor-runtime/bundled.js

@@ -0,0 +1,218 @@
+// ../plugin-sdk/dist/index.js
+function definePlugin(plugin2) {
+  return plugin2;
+}
+
+// ../../plugins/fusion-plugin-cursor-runtime/dist/cli-spawn.js
+import { spawn } from "node:child_process";
+async function runCursorCommand(binary, args, timeoutMs) {
+  return new Promise((resolve) => {
+    const child = spawn(binary, args, { stdio: ["ignore", "pipe", "pipe"] });
+    let stdout = "";
+    let stderr = "";
+    const timer = setTimeout(() => {
+      try {
+        child.kill("SIGKILL");
+      } catch {
+      }
+      resolve({ code: 124, stdout, stderr });
+    }, timeoutMs);
+    child.stdout?.on("data", (c) => {
+      stdout += c.toString("utf-8");
+    });
+    child.stderr?.on("data", (c) => {
+      stderr += c.toString("utf-8");
+    });
+    child.once("error", () => {
+      clearTimeout(timer);
+      resolve({ code: 127, stdout, stderr });
+    });
+    child.once("close", (code) => {
+      clearTimeout(timer);
+      resolve({ code, stdout, stderr });
+    });
+  });
+}
+
+// ../../plugins/fusion-plugin-cursor-runtime/dist/probe.js
+var CANDIDATES = ["cursor-agent", "cursor"];
+async function probeCursorBinary(options) {
+  const startedAt = Date.now();
+  const timeoutMs = options?.timeoutMs ?? 3e3;
+  const candidates = options?.binaryPath ? [options.binaryPath] : [...CANDIDATES];
+  for (const binary of candidates) {
+    const version = await runCursorCommand(binary, ["--version"], timeoutMs);
+    if (version.code === 0) {
+      return {
+        available: true,
+        authenticated: true,
+        binaryName: binary,
+        binaryPath: binary,
+        version: version.stdout.trim() || void 0,
+        probeDurationMs: Date.now() - startedAt
+      };
+    }
+    const combined = `${version.stdout}
+${version.stderr}`.toLowerCase();
+    if (combined.includes("keychain is locked")) {
+      return {
+        available: true,
+        authenticated: false,
+        binaryName: binary,
+        binaryPath: binary,
+        reason: "macOS login keychain is locked",
+        probeDurationMs: Date.now() - startedAt
+      };
+    }
+    if (combined.includes("no cursor ide installation found")) {
+      return {
+        available: true,
+        authenticated: false,
+        binaryName: binary,
+        binaryPath: binary,
+        reason: "Cursor IDE installation not found",
+        probeDurationMs: Date.now() - startedAt
+      };
+    }
+  }
+  return {
+    available: false,
+    authenticated: false,
+    reason: "cursor-agent/cursor not found on PATH",
+    probeDurationMs: Date.now() - startedAt
+  };
+}
+
+// ../../plugins/fusion-plugin-cursor-runtime/dist/process-manager.js
+function parseModelLines(raw) {
+  return raw.split(/\r?\n/).map((line) => line.trim()).filter(Boolean).filter((line) => !line.toLowerCase().startsWith("usage"));
+}
+async function discoverCursorModels(binary, timeoutMs = 5e3) {
+  const attempts = [
+    { args: ["models", "--json"], source: "models-json", structured: true },
+    { args: ["model", "list", "--json"], source: "model-list-json", structured: true },
+    { args: ["models"], source: "models-text", structured: false }
+  ];
+  for (const attempt of attempts) {
+    const res = await runCursorCommand(binary, attempt.args, timeoutMs);
+    if (res.code !== 0)
+      continue;
+    const output = (res.stdout || "").trim();
+    if (!output)
+      continue;
+    try {
+      const parsed = JSON.parse(output);
+      if (Array.isArray(parsed)) {
+        const ids2 = parsed.map((entry) => typeof entry === "string" ? entry : typeof entry?.id === "string" ? entry.id : void 0).filter((id) => Boolean(id));
+        if (ids2.length > 0) {
+          return { models: Array.from(new Set(ids2)), source: attempt.source, fallbackUsed: !attempt.structured };
+        }
+      }
+    } catch {
+    }
+    const ids = Array.from(new Set(parseModelLines(output)));
+    if (ids.length > 0) {
+      return { models: ids, source: attempt.source, fallbackUsed: !attempt.structured };
+    }
+  }
+  return { models: [], source: "none", fallbackUsed: true, reason: "model discovery command unavailable" };
+}
+
+// ../../plugins/fusion-plugin-cursor-runtime/dist/provider.js
+async function discoverCursorProviderModels() {
+  const probe = await probeCursorBinary();
+  if (!probe.available || !probe.binaryName) {
+    return { models: [], source: "probe", fallbackUsed: true, reason: probe.reason ?? "binary unavailable" };
+  }
+  const result = await discoverCursorModels(probe.binaryName);
+  return {
+    models: result.models.map((id) => ({ id, label: id })),
+    source: result.source,
+    fallbackUsed: result.fallbackUsed,
+    reason: result.reason
+  };
+}
+
+// ../../plugins/fusion-plugin-cursor-runtime/dist/runtime-adapter.js
+var CursorRuntimeAdapter = class {
+  id = "cursor";
+  name = "Cursor Runtime";
+  async createSession(options) {
+    return {
+      session: {
+        model: options.defaultModelId ?? "cursor/default",
+        systemPrompt: options.systemPrompt,
+        messages: []
+      },
+      sessionFile: void 0
+    };
+  }
+  async promptWithFallback() {
+    return;
+  }
+  describeModel(session) {
+    return `cursor/${session.model ?? "default"}`;
+  }
+};
+
+// ../../plugins/fusion-plugin-cursor-runtime/dist/index.js
+var plugin = definePlugin({
+  manifest: {
+    id: "fusion-plugin-cursor-runtime",
+    name: "Cursor Runtime Plugin",
+    version: "0.1.0",
+    description: "Cursor CLI runtime support for Fusion",
+    runtime: {
+      runtimeId: "cursor",
+      name: "Cursor Runtime",
+      version: "0.1.0"
+    }
+  },
+  state: "installed",
+  hooks: {},
+  runtime: {
+    metadata: {
+      runtimeId: "cursor",
+      name: "Cursor Runtime",
+      version: "0.1.0"
+    },
+    factory: async () => new CursorRuntimeAdapter()
+  },
+  cliProviders: [
+    {
+      providerId: "cursor-cli",
+      displayName: "Cursor CLI",
+      binaryName: "cursor-agent",
+      providerType: "cli",
+      statusRoute: "/providers/cursor-cli/status",
+      authRoute: "/auth/cursor-cli",
+      actions: [
+        { actionId: "enable", label: "Enable", actionType: "enable", method: "POST", route: "/auth/cursor-cli" },
+        { actionId: "disable", label: "Disable", actionType: "disable", method: "POST", route: "/auth/cursor-cli" },
+        { actionId: "test", label: "Test", actionType: "test", method: "GET", route: "/providers/cursor-cli/status" }
+      ],
+      probe: async () => {
+        const status = await probeCursorBinary();
+        return {
+          available: status.available,
+          authenticated: status.authenticated,
+          binaryPath: status.binaryPath,
+          binaryName: status.binaryName,
+          version: status.version,
+          reason: status.reason
+        };
+      },
+      discoverModels: discoverCursorProviderModels,
+      runtime: {
+        runtimeId: "cursor",
+        createAdapter: async () => new CursorRuntimeAdapter()
+      }
+    }
+  ]
+});
+var index_default = plugin;
+export {
+  index_default as default,
+  discoverCursorProviderModels,
+  probeCursorBinary
+};

package/dist/plugins/fusion-plugin-cursor-runtime/manifest.json

@@ -0,0 +1,6 @@
+{
+  "id": "fusion-plugin-cursor-runtime",
+  "name": "Cursor Runtime Plugin",
+  "version": "0.1.0",
+  "description": "Provides Cursor CLI-backed model provider and runtime integration"
+}

package/dist/plugins/fusion-plugin-cursor-runtime/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@fusion-plugin-examples/cursor-runtime",
+  "version": "0.1.1",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./bundled.js"
+    }
+  },
+  "private": true
+}

package/dist/plugins/fusion-plugin-dependency-graph/manifest.json

@@ -7,7 +7,7 @@
     {
       "viewId": "graph",
       "label": "Graph",
-      "componentPath": "./src/DependencyGraphView.tsx",
+      "componentPath": "./dashboard-view",
       "icon": "Network",
       "placement": "more",
       "order": 40

package/dist/plugins/fusion-plugin-dependency-graph/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fusion-plugin-examples/dependency-graph",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "type": "module",
   "description": "Dependency graph dashboard view plugin for Fusion",
   "private": true,
@@ -10,8 +10,8 @@
       "import": "./src/index.ts"
     },
     "./dashboard-view": {
-      "types": "./src/DependencyGraphView.tsx",
-      "import": "./src/DependencyGraphView.tsx"
+      "types": "./src/dashboard-view.tsx",
+      "import": "./src/dashboard-view.tsx"
     }
   },
   "scripts": {
@@ -20,7 +20,9 @@
   },
   "dependencies": {
     "@fusion/core": "workspace:*",
-    "@fusion/plugin-sdk": "workspace:*"
+    "@fusion/dashboard": "workspace:*",
+    "@fusion/plugin-sdk": "workspace:*",
+    "lucide-react": "^0.542.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.2",

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

@@ -0,0 +1,58 @@
+.dependency-graph {
+  position: relative;
+  height: 100%;
+  padding: var(--space-md);
+}
+
+.dependency-graph__viewport {
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+  min-height: calc(var(--space-2xl) * 10);
+  border: var(--btn-border-width) solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--surface);
+  touch-action: none;
+}
+
+.graph-canvas-transform {
+  position: relative;
+  transform-origin: top left;
+}
+
+.graph-canvas-transform--animate {
+  transition: transform var(--transition-normal);
+}
+
+.dependency-graph__nodes-layer {
+  position: relative;
+  z-index: 1;
+}
+
+.dependency-graph__nodes-layer .graph-task-node {
+  max-width: min(100%, calc(var(--space-2xl) * 9));
+}
+
+.dependency-graph-edges {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: visible;
+}
+
+
+.dependency-graph__empty {
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+@media (max-width: 768px) {
+  .dependency-graph {
+    padding: var(--space-sm);
+  }
+}

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

@@ -0,0 +1,301 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { Task } from "@fusion/core";
+import { GraphTaskNode } from "./GraphTaskNode";
+import { GraphToolbar } from "./GraphToolbar";
+import { GraphEdges } from "./edges";
+import { filterGraphTasks } from "./filters";
+import { computeAutoLayout } from "./layout";
+import { useGraphData } from "./useGraphData";
+import { useGraphInteraction } from "./useGraphInteraction";
+import { useDependencyChain } from "./hooks/useDependencyChain";
+import { useGraphPositions } from "./hooks/useGraphPositions";
+import { mergePositions, type NodePositions } from "./utils/graphPositionStorage";
+import "./DependencyGraph.css";
+
+const NODE_WIDTH = 280;
+const NODE_HEIGHT = 100;
+
+export interface DependencyGraphProps {
+  tasks: Task[];
+  projectId?: string;
+  onOpenTaskDetail?: (taskId: string) => void;
+  onOpenDetail?: (task: Task) => 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, initialTab: "changes") => void;
+  taskStuckTimeoutMs?: number;
+  onOpenMission?: (missionId: string) => void;
+  onMoveTask?: (id: string, column: Task["column"], optionsOrPosition?: { preserveProgress?: boolean } | number) => Promise<Task>;
+  lastFetchTimeMs?: number;
+  workflowStepNameLookup?: ReadonlyMap<string, string>;
+}
+
+const POINTER_MOVE_THRESHOLD = 4;
+
+export function DependencyGraph({
+  tasks,
+  projectId,
+  onOpenTaskDetail,
+  onOpenDetail,
+  addToast,
+  globalPaused,
+  onUpdateTask,
+  onArchiveTask,
+  onUnarchiveTask,
+  onDeleteTask,
+  onRetryTask,
+  onOpenDetailWithTab,
+  taskStuckTimeoutMs,
+  onOpenMission,
+  onMoveTask,
+  lastFetchTimeMs,
+  workflowStepNameLookup,
+}: DependencyGraphProps) {
+  const viewportRef = useRef<HTMLDivElement | null>(null);
+  const initialFitDoneRef = useRef(false);
+  const pointerDownRef = useRef<{ x: number; y: number } | null>(null);
+  const pointerDraggedRef = useRef(false);
+  const [hoveredTaskId, setHoveredTaskId] = useState<string | null>(null);
+  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
+  const filteredTasks = useMemo(() => filterGraphTasks(tasks), [tasks]);
+  const graphData = useGraphData(filteredTasks);
+  const { getChain } = useDependencyChain(filteredTasks);
+  const activeTaskId = hoveredTaskId ?? selectedTaskId;
+  const highlightedTaskIds = useMemo(() => (activeTaskId ? getChain(activeTaskId) : new Set<string>()), [activeTaskId, getChain]);
+
+  const autoLayoutPositions = useMemo(
+    () => computeAutoLayout(graphData, { nodeWidth: NODE_WIDTH, nodeHeight: NODE_HEIGHT, horizontalGap: 40, verticalGap: 80 }),
+    [graphData],
+  );
+  const visibleTaskIds = useMemo(() => new Set(filteredTasks.map((task) => task.id)), [filteredTasks]);
+  const { savedPositions, persistPositions, clearSavedPositions } = useGraphPositions({ projectId, visibleTaskIds });
+  const [positions, setPositions] = useState<Map<string, { x: number; y: number }>>(autoLayoutPositions);
+  const [isNodeDragging, setIsNodeDragging] = useState(false);
+
+  useEffect(() => {
+    const autoLayoutRecord: NodePositions = {};
+    for (const [taskId, position] of autoLayoutPositions.entries()) {
+      autoLayoutRecord[taskId] = position;
+    }
+
+    const merged = savedPositions ? mergePositions(autoLayoutRecord, savedPositions, visibleTaskIds) : autoLayoutRecord;
+    setPositions(new Map(Object.entries(merged)));
+  }, [autoLayoutPositions, savedPositions, visibleTaskIds]);
+
+  const {
+    transform,
+    zoom,
+    transitioning,
+    zoomIn,
+    zoomOut,
+    resetView,
+    fitToGraph,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    onWheelZoom,
+    handleKeyDown,
+  } = useGraphInteraction();
+
+  useEffect(() => {
+    if (initialFitDoneRef.current) return;
+    if (filteredTasks.length === 0) return;
+
+    const hasSavedPositions = Boolean(savedPositions && Object.keys(savedPositions).length > 0);
+    if (hasSavedPositions) {
+      initialFitDoneRef.current = true;
+      return;
+    }
+
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+
+    fitToGraph(positions, viewport.clientWidth, viewport.clientHeight, { nodeWidth: NODE_WIDTH, nodeHeight: NODE_HEIGHT });
+    initialFitDoneRef.current = true;
+  }, [filteredTasks.length, fitToGraph, positions, savedPositions]);
+
+  const bounds = useMemo(() => {
+    const values = Array.from(positions.values());
+    if (values.length === 0) return { width: 0, height: 0 };
+    const maxX = Math.max(...values.map((pos) => pos.x + NODE_WIDTH));
+    const maxY = Math.max(...values.map((pos) => pos.y + NODE_HEIGHT));
+    return { width: maxX, height: maxY };
+  }, [positions]);
+
+  const handleResetLayout = useCallback(() => {
+    clearSavedPositions();
+    const freshLayout = computeAutoLayout(graphData, { nodeWidth: NODE_WIDTH, nodeHeight: NODE_HEIGHT, horizontalGap: 40, verticalGap: 80 });
+    setPositions(freshLayout);
+  }, [clearSavedPositions, graphData]);
+
+  const handleNodeDragEnd = useCallback(() => {
+    const positionRecord: NodePositions = {};
+    for (const [taskId, position] of positions.entries()) {
+      positionRecord[taskId] = position;
+    }
+    persistPositions(positionRecord);
+  }, [persistPositions, positions]);
+
+  return (
+    <section className="dependency-graph" data-testid="dependency-graph">
+      <div
+        ref={viewportRef}
+        className="dependency-graph__viewport"
+        onPointerDown={(event) => {
+          if (isNodeDragging) return;
+          pointerDownRef.current = { x: event.clientX, y: event.clientY };
+          pointerDraggedRef.current = false;
+          onPointerDown(event.pointerId, { x: event.clientX, y: event.clientY });
+        }}
+        onPointerMove={(event) => {
+          if (isNodeDragging) return;
+          const viewport = viewportRef.current;
+          if (!viewport) return;
+          const pointerDown = pointerDownRef.current;
+          if (pointerDown) {
+            const deltaX = Math.abs(event.clientX - pointerDown.x);
+            const deltaY = Math.abs(event.clientY - pointerDown.y);
+            if (deltaX > POINTER_MOVE_THRESHOLD || deltaY > POINTER_MOVE_THRESHOLD) {
+              pointerDraggedRef.current = true;
+            }
+          }
+          onPointerMove(event.pointerId, { x: event.clientX, y: event.clientY }, viewport.clientWidth, viewport.clientHeight);
+        }}
+        onPointerUp={(event) => {
+          if (!isNodeDragging) {
+            onPointerUp(event.pointerId);
+          }
+          pointerDownRef.current = null;
+        }}
+        onPointerCancel={(event) => {
+          if (!isNodeDragging) {
+            onPointerUp(event.pointerId);
+          }
+          pointerDownRef.current = null;
+          pointerDraggedRef.current = false;
+        }}
+        onWheel={(event) => {
+          event.preventDefault();
+          const viewport = viewportRef.current;
+          if (!viewport) return;
+          const rect = viewport.getBoundingClientRect();
+          onWheelZoom(event.deltaY, { x: event.clientX - rect.left, y: event.clientY - rect.top }, viewport.clientWidth, viewport.clientHeight);
+        }}
+        onKeyDown={(event) => {
+          const viewport = viewportRef.current;
+          if (!viewport) return;
+          handleKeyDown(event, viewport.clientWidth, viewport.clientHeight, positions, { nodeWidth: NODE_WIDTH, nodeHeight: NODE_HEIGHT });
+        }}
+        tabIndex={0}
+        style={{ outline: "none" }}
+        onClick={() => {
+          if (pointerDraggedRef.current || isNodeDragging) return;
+          setSelectedTaskId(null);
+        }}
+      >
+        {filteredTasks.length === 0 ? (
+          <div className="dependency-graph__empty">No active tasks to display in graph view.</div>
+        ) : (
+          <div className={`graph-canvas-transform${transitioning ? " graph-canvas-transform--animate" : ""}`} style={{ transform, width: `${bounds.width}px`, height: `${bounds.height}px` }}>
+            <GraphEdges
+              edges={graphData.edges}
+              positions={positions}
+              nodeWidth={NODE_WIDTH}
+              nodeHeight={NODE_HEIGHT}
+              highlightedEdgeIds={
+                highlightedTaskIds.size > 0
+                  ? new Set(
+                      graphData.edges
+                        .filter((edge) => highlightedTaskIds.has(edge.source) && highlightedTaskIds.has(edge.target))
+                        .map((edge) => `${edge.source}->${edge.target}`),
+                    )
+                  : undefined
+              }
+            />
+            <div className="dependency-graph__nodes-layer">
+              {graphData.nodes.map((node) => {
+                const position = positions.get(node.task.id);
+                if (!position) return null;
+
+                return (
+                  <GraphTaskNode
+                    key={node.task.id}
+                    task={node.task}
+                    projectId={projectId}
+                    style={{ minHeight: `${NODE_HEIGHT}px`, left: `${position.x}px`, top: `${position.y}px` }}
+                    position={position}
+                    scale={zoom}
+                    onNodePositionChange={(taskId, nextPosition) => {
+                      setPositions((current) => {
+                        const existing = current.get(taskId);
+                        if (existing && existing.x === nextPosition.x && existing.y === nextPosition.y) return current;
+                        const next = new Map(current);
+                        next.set(taskId, nextPosition);
+                        return next;
+                      });
+                    }}
+                    onNodeDragStateChange={setIsNodeDragging}
+                    onNodeDragEnd={handleNodeDragEnd}
+                    isHighlighted={highlightedTaskIds.size > 0 && highlightedTaskIds.has(node.task.id)}
+                    isDimmed={highlightedTaskIds.size > 0 && !highlightedTaskIds.has(node.task.id)}
+                    onOpenDetail={onOpenDetail ?? ((task) => onOpenTaskDetail?.(task.id))}
+                    addToast={addToast ?? (() => {})}
+                    globalPaused={globalPaused}
+                    onUpdateTask={onUpdateTask}
+                    onArchiveTask={onArchiveTask}
+                    onUnarchiveTask={onUnarchiveTask}
+                    onDeleteTask={onDeleteTask}
+                    onRetryTask={onRetryTask}
+                    onOpenDetailWithTab={onOpenDetailWithTab}
+                    taskStuckTimeoutMs={taskStuckTimeoutMs}
+                    onOpenMission={onOpenMission}
+                    onMoveTask={onMoveTask}
+                    lastFetchTimeMs={lastFetchTimeMs}
+                    workflowStepNameLookup={workflowStepNameLookup}
+                    onMouseEnter={() => setHoveredTaskId(node.task.id)}
+                    onMouseLeave={() => setHoveredTaskId(null)}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      pointerDraggedRef.current = false;
+                      setSelectedTaskId((current) => (current === node.task.id ? null : node.task.id));
+                    }}
+                  />
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+
+      <GraphToolbar
+        zoom={zoom}
+        onZoomIn={() => {
+          const viewport = viewportRef.current;
+          if (!viewport) return;
+          zoomIn(viewport.clientWidth, viewport.clientHeight);
+        }}
+        onZoomOut={() => {
+          const viewport = viewportRef.current;
+          if (!viewport) return;
+          zoomOut(viewport.clientWidth, viewport.clientHeight);
+        }}
+        onFitToGraph={() => {
+          handleResetLayout();
+          const viewport = viewportRef.current;
+          if (!viewport) return;
+          const freshLayout = computeAutoLayout(graphData, { nodeWidth: NODE_WIDTH, nodeHeight: NODE_HEIGHT, horizontalGap: 40, verticalGap: 80 });
+          fitToGraph(freshLayout, viewport.clientWidth, viewport.clientHeight, { nodeWidth: NODE_WIDTH, nodeHeight: NODE_HEIGHT });
+        }}
+        onResetView={() => {
+          handleResetLayout();
+          resetView();
+        }}
+      />
+    </section>
+  );
+}

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

@@ -0,0 +1,27 @@
+.graph-node--highlighted {
+  opacity: 1;
+  box-shadow: var(--shadow-glow);
+}
+
+.graph-node--dimmed {
+  opacity: 0.25;
+  transition: opacity var(--transition-fast);
+}
+
+.graph-edge--highlighted {
+  opacity: 1;
+  stroke: var(--todo);
+  stroke-width: var(--space-xs);
+}
+
+.graph-edge--dimmed {
+  opacity: 0.15;
+  transition: opacity var(--transition-fast);
+}
+
+@media (max-width: 768px) {
+  .graph-node--dimmed,
+  .graph-edge--dimmed {
+    transition: opacity var(--transition-fast);
+  }
+}