feat(FN-3086): enhance graph navigation with toolbar and keyboard controls

The merge introduces a new Cursor CLI plugin provider with dashboard authentication (FN-3396), enabling Fusion to bundle Cursor's CLI as a native AI model source alongside native shell guide and bridge contract documentation (FN-3577). It also completes the dependency graph plugin's navigation contr

Fusion-Task-Id: FN-3086

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

@@ -1,7 +1,7 @@
-import { Maximize, ZoomIn, ZoomOut } from "lucide-react";
 import { useEffect, useMemo, useRef } 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";
@@ -11,6 +11,14 @@ import "./DependencyGraph.css";
 
 const NODE_WIDTH = 280;
 const NODE_HEIGHT = 100;
+const POSITION_STORAGE_KEY = "fusion-plugin-dependency-graph:positions";
+
+function getScopedPositionItem(projectId?: string): string | null {
+  if (typeof window === "undefined") return null;
+  if (typeof window.localStorage?.getItem !== "function") return null;
+  const key = projectId ? `kb:${projectId}:${POSITION_STORAGE_KEY}` : POSITION_STORAGE_KEY;
+  return window.localStorage.getItem(key);
+}
 
 export interface DependencyGraphProps {
   tasks: Task[];
@@ -52,6 +60,7 @@ export function DependencyGraph({
   workflowStepNameLookup,
 }: DependencyGraphProps) {
   const viewportRef = useRef<HTMLDivElement | null>(null);
+  const initialFitDoneRef = useRef(false);
   const filteredTasks = useMemo(() => filterGraphTasks(tasks), [tasks]);
   const graphData = useGraphData(filteredTasks);
   const positions = useMemo(
@@ -61,20 +70,35 @@ export function DependencyGraph({
 
   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(getScopedPositionItem(projectId));
+    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 });
-  }, [fitToGraph, positions]);
+    initialFitDoneRef.current = true;
+  }, [filteredTasks.length, fitToGraph, positions, projectId]);
 
   const bounds = useMemo(() => {
     const values = Array.from(positions.values());
@@ -104,11 +128,18 @@ export function DependencyGraph({
           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" }}
       >
         {filteredTasks.length === 0 ? (
           <div className="dependency-graph__empty">No active tasks to display in graph view.</div>
         ) : (
-          <div className="dependency-graph__canvas" style={{ transform, width: `${bounds.width}px`, height: `${bounds.height}px` }}>
+          <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} />
             <div className="dependency-graph__nodes-layer">
               {graphData.nodes.map((node) => {
@@ -143,17 +174,25 @@ export function DependencyGraph({
         )}
       </div>
 
-      <div className="dependency-graph__toolbar">
-        <button className="btn btn-icon" aria-label="Fit to screen" onClick={() => {
+      <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={() => {
           const viewport = viewportRef.current;
           if (!viewport) return;
           fitToGraph(positions, viewport.clientWidth, viewport.clientHeight, { nodeWidth: NODE_WIDTH, nodeHeight: NODE_HEIGHT });
-        }}>
-          <Maximize size={16} />
-        </button>
-        <button className="btn btn-icon" aria-label="Zoom in" onClick={zoomIn}><ZoomIn size={16} /></button>
-        <button className="btn btn-icon" aria-label="Zoom out" onClick={zoomOut}><ZoomOut size={16} /></button>
-      </div>
+        }}
+        onResetView={resetView}
+      />
     </section>
   );
 }