feat: introdce store

frontend/src/components/graph/AnimatedEdge.tsx

@@ -1,15 +1,15 @@
-import React, { useContext, useMemo, memo } from 'react'
+import React, { memo } from 'react'
 import {
   BaseEdge,
   getBezierPath,
   type EdgeProps,
 } from '@xyflow/react'
-import { ConnectionPathContext } from '@/lib/graph/flowContext'
-import { getConnectionStatus, CONNECTION_STATUS_CLASS } from '@/lib/graph/connectionStatus'
+import { useCanvasStore } from '@/app/canvas/canvasStore'
+import { selectConnectionStatusForEdge } from '@/app/canvas/canvasStore.selectors'
+import { CONNECTION_STATUS_CLASS } from '@/lib/graph/connectionStatus'
 
 const EDGE_STROKE_WIDTH = 2
 const DOT_MARKER_R = 1.5
-const EMPTY_PATH_NODE_IDS = new Set<string>()
 
 function AnimatedEdgeInner({
   id,
@@ -26,38 +26,13 @@ function AnimatedEdgeInner({
   target,
   data,
 }: EdgeProps) {
-  const ctx = useContext(ConnectionPathContext)
-  const pathNodeIds = ctx?.connectionPathNodeIds ?? EMPTY_PATH_NODE_IDS
-  const pausedSegmentNodeIds = ctx?.connectionPathPausedSegmentNodeIds ?? EMPTY_PATH_NODE_IDS
-  const activeSegmentNodeIds = ctx?.connectionPathActiveSegmentNodeIds ?? EMPTY_PATH_NODE_IDS
-  const errorTargetNodeIds = useMemo(
-    () => new Set(ctx?.connectionPathErrorNodeIds ?? []),
-    [ctx?.connectionPathErrorNodeIds]
-  )
-
-  const label = labelProp ?? (data as { connectionLabel?: string } | undefined)?.connectionLabel
-
-  const connectionStatus = useMemo(
-    () =>
-      getConnectionStatus({
-        source,
-        target,
-        pathNodeIds,
-        pausedSegmentNodeIds,
-        activeSegmentNodeIds,
-        errorTargetNodeIds,
-      }),
-    [
-      source,
-      target,
-      pathNodeIds,
-      pausedSegmentNodeIds,
-      activeSegmentNodeIds,
-      errorTargetNodeIds,
-    ]
+  const connectionStatus = useCanvasStore((s) =>
+    selectConnectionStatusForEdge(s, source, target)
   )
   const statusClass = CONNECTION_STATUS_CLASS[connectionStatus]
 
+  const label = labelProp ?? (data as { connectionLabel?: string } | undefined)?.connectionLabel
+
   const [edgePath, edgeLabelX, edgeLabelY] = getBezierPath({
     sourceX,
     sourceY,

frontend/src/components/graph/BaseNode.tsx

@@ -2,7 +2,8 @@ import type { ComponentProps, ReactNode } from "react";
 import { NodeResizer } from "@xyflow/react";
 import { useContext } from "react";
 
-import { FlowUIContext, useConnectionPathRole } from "@/lib/graph/flowContext";
+import { FlowUIContext } from "@/lib/graph/flowContext";
+import { useConnectionPathRoleFromStore } from "@/app/canvas/useCanvasConnectionPathFromStore";
 import { cn } from "@/lib/utils";
 
 /** Default min size for resizable nodes (used by NodeResizer). */
@@ -38,7 +39,7 @@ export function BaseNode({
 }: BaseNodeProps) {
   const flowUIContext = useContext(FlowUIContext);
   const isFullscreenInstance = Boolean(nodeId && flowUIContext?.fullscreenNodeId === nodeId);
-  const connectionPathRole = useConnectionPathRole(nodeId);
+  const connectionPathRole = useConnectionPathRoleFromStore(nodeId);
   const hasSize =
     dimensions &&
     dimensions.width > 0 &&

frontend/src/components/nodes/render/useRenderingNodeState.ts

@@ -4,10 +4,10 @@
  * pipeline interface.
  */
 
-import { useCallback, useContext, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react'
 import { useAbstractNode } from '@/lib/graph/abstractNode'
-import { ConnectionPathContext } from '@/lib/graph/flowContext'
 import { useSyncConnectionStatus } from '@/lib/graph/nodeLifecycle'
+import { useCanvasStore, dispatchCanvasCommand } from '@/app/canvas/canvasStore'
 import { usePlatform } from '@/app/kosmos/KosmosContext'
 import { getDefaultDataForType, getNextNodeId } from '@/lib/graph/flowUtils'
 import { getDefaultStyle } from '@/lib/graph/nodeRegistry'
@@ -189,10 +189,7 @@ export function useRenderingNodeState(
     const lastManualRunTriggerRef = useRef(0)
     const manualRunTriggerSyncedRef = useRef(false)
 
-    const pathCtx = useContext(ConnectionPathContext)
-    const pathCtxRef = useRef(pathCtx)
-    pathCtxRef.current = pathCtx
-    const triggerNodeIds = pathCtx?.connectionPathTriggerNodeIds ?? []
+    const triggerNodeIds = useCanvasStore((s) => s.path.triggerNodeIds)
 
     const updateDataRef = useRef(updateData)
     updateDataRef.current = updateData
@@ -265,7 +262,7 @@ export function useRenderingNodeState(
         let cancelled = false
 
         const run = async () => {
-            pathCtxRef.current?.addConnectionPathTrigger?.(id)
+            dispatchCanvasCommand({ type: 'path/addTrigger', payload: id })
             loadingStartedAtRef.current = Date.now()
             setLoading(true)
             setError(null)