@invect/ui 0.0.1

package/src/components/flow-viewer/FlowRunsView.tsx

@@ -0,0 +1,268 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router';
+import { FlowLayout } from '../flow-editor/FlowLayout';
+import { ModeSwitcher } from '../flow-editor/ModeSwitcher';
+import { RunControls } from '../flow-editor/RunControls';
+import { FlowStatusView } from './FlowStatusView';
+import { LogsPanel } from './logs-panel';
+import { ChatPanel, ChatToggleButton } from '~/components/chat';
+import { useFlowRuns, useFlowRun, useNodeExecutions } from '../../api/executions.api';
+import { useFlowRunStream } from '../../api/use-flow-run-stream';
+import { useFlowReactFlowData } from '../../api/flows.api';
+import { FlowRun } from '@invect/core/types';
+import { useExecutionLogData, SelectedExecutionAttempt } from './use-execution-log-data';
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '../ui/resizable';
+import { useFlowActions } from '../../routes/flow-route-layout';
+
+export interface FlowRunsViewProps {
+  flowId: string;
+  flowVersion?: string;
+  basePath?: string;
+}
+
+// Runs view shell - displays the flow execution history and status
+export function FlowRunsView({ flowId, flowVersion, basePath }: FlowRunsViewProps) {
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+
+  // Get runId from URL query parameter if present
+  const urlRunId = searchParams.get('runId');
+
+  const [selectedRunId, setSelectedRunId] = useState<string | null>(urlRunId);
+  const [isLogsExpanded, setIsLogsExpanded] = useState(true);
+  const [selectedAttempt, setSelectedAttempt] = useState<SelectedExecutionAttempt | null>(null);
+  // focusNodeId is only set when user explicitly clicks - not on auto-select
+  const [focusNodeId, setFocusNodeId] = useState<string | null>(null);
+  const [recenterTrigger, setRecenterTrigger] = useState(0);
+
+  // Fetch selected run first to get its status for polling
+  const { data: selectedRun } = useFlowRun(selectedRunId || '');
+
+  // SSE stream — pushes updates into React Query caches for the selected run,
+  // eliminating the need for polling on useFlowRun, useFlowRuns, and useNodeExecutions.
+  useFlowRunStream(flowId, selectedRunId);
+
+  // Fetch runs list - uses cached data from the stream when available
+  const { data: executionsResponse } = useFlowRuns(flowId);
+  const runs = executionsResponse?.data ?? [];
+
+  const { data: nodeExecutionsData, isLoading: nodeExecutionsLoading } = useNodeExecutions(
+    selectedRunId || '',
+  );
+
+  // Fetch flow graph data with execution status — no longer polls; cache is
+  // updated by the SSE stream for node executions, and we derive status locally.
+  const { data: flowGraphData } = useFlowReactFlowData(flowId, {
+    version: flowVersion,
+    flowRunId: selectedRunId || undefined,
+  });
+
+  const nodeExecutions = nodeExecutionsData ?? [];
+
+  const { nodes: executionLogNodes } = useExecutionLogData({
+    nodes: flowGraphData?.nodes,
+    nodeExecutions,
+  });
+
+  // Select run from URL param when it becomes available in the list, or fallback to latest
+  useEffect(() => {
+    // If we have a URL runId, wait for it to appear in the runs list
+    if (urlRunId) {
+      const runExists = runs.some((r) => r.id === urlRunId);
+      if (runExists && selectedRunId !== urlRunId) {
+        setSelectedRunId(urlRunId);
+      }
+      return;
+    }
+
+    // No URL param - auto-select latest run if none selected
+    if (!selectedRunId && runs.length > 0) {
+      setSelectedRunId(runs[0].id);
+    }
+  }, [runs, selectedRunId, urlRunId]);
+
+  useEffect(() => {
+    if (!executionLogNodes.length) {
+      if (selectedAttempt !== null) {
+        setSelectedAttempt(null);
+      }
+      return;
+    }
+
+    if (selectedAttempt) {
+      const nodeMatch = executionLogNodes.find((node) => node.nodeId === selectedAttempt.nodeId);
+      const attemptExists = nodeMatch?.attempts.some(
+        (attempt) => attempt.id === selectedAttempt.attemptId,
+      );
+      if (attemptExists) {
+        return;
+      }
+    }
+
+    const firstNodeWithAttempt = executionLogNodes.find((node) => node.attempts.length > 0);
+    if (firstNodeWithAttempt) {
+      const lastAttempt = firstNodeWithAttempt.attempts[firstNodeWithAttempt.attempts.length - 1];
+      setSelectedAttempt({ nodeId: firstNodeWithAttempt.nodeId, attemptId: lastAttempt.id });
+    } else {
+      setSelectedAttempt(null);
+    }
+  }, [executionLogNodes, selectedAttempt]);
+
+  const handleModeChange = (newMode: 'edit' | 'runs') => {
+    if (newMode === 'edit') {
+      const editPath = flowVersion
+        ? `${basePath}/flow/${flowId}/version/${flowVersion}`
+        : `${basePath}/flow/${flowId}`;
+      navigate(editPath);
+    }
+  };
+
+  // Navigate to editor and open the node config panel for the given node
+  const handleEditNode = (nodeId: string) => {
+    const editPath = flowVersion
+      ? `${basePath}/flow/${flowId}/version/${flowVersion}`
+      : `${basePath}/flow/${flowId}`;
+    const params = new URLSearchParams();
+    params.set('openNode', nodeId);
+    if (selectedRunId) {
+      params.set('fromRunId', selectedRunId);
+    }
+    navigate(`${editPath}?${params.toString()}`);
+  };
+
+  // Handle node click in the flow graph - expand logs and select the node
+  const handleNodeClick = (nodeId: string) => {
+    // Find the node in execution logs
+    const nodeMatch = executionLogNodes.find((node) => node.nodeId === nodeId);
+
+    if (nodeMatch && nodeMatch.attempts.length > 0) {
+      // Select the latest attempt for this node
+      const lastAttempt = nodeMatch.attempts[nodeMatch.attempts.length - 1];
+      setSelectedAttempt({ nodeId: nodeMatch.nodeId, attemptId: lastAttempt.id });
+      // Set focusNodeId to trigger centering (user-initiated)
+      setFocusNodeId(nodeMatch.nodeId);
+
+      // Expand the logs panel if not already expanded
+      if (!isLogsExpanded) {
+        setIsLogsExpanded(true);
+      }
+    } else if (nodeMatch) {
+      // Node exists in logs but has no attempts - just expand and show node
+      setSelectedAttempt({ nodeId: nodeMatch.nodeId, attemptId: '' });
+      setFocusNodeId(nodeMatch.nodeId);
+      if (!isLogsExpanded) {
+        setIsLogsExpanded(true);
+      }
+    }
+  };
+
+  // Handle selection from logs panel - also triggers centering
+  const handleSelectAttempt = (attempt: SelectedExecutionAttempt) => {
+    setSelectedAttempt(attempt);
+    // Set focusNodeId to trigger centering (user-initiated)
+    setFocusNodeId(attempt.nodeId);
+  };
+
+  const runSelectorItems = runs.map((r: FlowRun) => ({
+    id: r.id,
+    status: r.status,
+    startedAt: r.startedAt,
+    completedAt: r.completedAt,
+  }));
+
+  // Flow actions from parent layout context (execute, active state)
+  const flowActions = useFlowActions();
+
+  return (
+    <div className="flex flex-col flex-1 h-full min-h-0 imp-page bg-imp-background text-imp-foreground">
+      <FlowLayout
+        modeSwitcher={<ModeSwitcher mode="runs" onModeChange={handleModeChange} />}
+        viewportRef={viewportRef}
+        chatPanel={
+          <ChatPanel
+            flowId={flowId}
+            basePath={basePath}
+            selectedRunId={selectedRunId ?? undefined}
+            viewMode="runs"
+          />
+        }
+        toolbarExtra={
+          <RunControls
+            onExecute={flowActions?.onExecute}
+            isExecuting={flowActions?.isExecuting}
+            isActive={flowActions?.isActive}
+            isTogglingActive={flowActions?.isTogglingActive}
+            onToggleActive={flowActions?.onToggleActive}
+          />
+        }
+        chatToggle={<ChatToggleButton />}
+        sidebar={<></>}
+        viewport={
+          <ResizablePanelGroup direction="vertical" className="h-full min-h-0">
+            <ResizablePanel defaultSize={55} minSize={20}>
+              <div className="relative h-full">
+                <FlowStatusView
+                  flowId={flowId}
+                  flowVersion={flowVersion}
+                  basePath={basePath}
+                  selectedRunId={selectedRunId}
+                  selectedRun={selectedRun}
+                  logsExpanded={isLogsExpanded}
+                  onNodeClick={handleNodeClick}
+                  onEditNode={handleEditNode}
+                  focusNodeId={focusNodeId}
+                  onFocusComplete={() => setFocusNodeId(null)}
+                  recenterTrigger={recenterTrigger}
+                  selectedNodeId={selectedAttempt?.nodeId}
+                />
+              </div>
+            </ResizablePanel>
+            {isLogsExpanded && (
+              <>
+                <ResizableHandle
+                  withHandle
+                  onDragging={(isDragging) => {
+                    if (!isDragging) {
+                      setRecenterTrigger((c) => c + 1);
+                    }
+                  }}
+                />
+                <ResizablePanel defaultSize={45} minSize={10}>
+                  <LogsPanel
+                    nodes={executionLogNodes}
+                    selectedAttempt={selectedAttempt}
+                    onSelectAttempt={handleSelectAttempt}
+                    isExpanded={isLogsExpanded}
+                    loading={nodeExecutionsLoading && !!selectedRunId}
+                    onToggle={() => setIsLogsExpanded(!isLogsExpanded)}
+                    runs={runSelectorItems}
+                    selectedRunId={selectedRunId}
+                    onSelectRun={setSelectedRunId}
+                  />
+                </ResizablePanel>
+              </>
+            )}
+            {!isLogsExpanded && (
+              <div className="shrink-0">
+                <LogsPanel
+                  nodes={executionLogNodes}
+                  selectedAttempt={selectedAttempt}
+                  onSelectAttempt={handleSelectAttempt}
+                  isExpanded={isLogsExpanded}
+                  loading={nodeExecutionsLoading && !!selectedRunId}
+                  onToggle={() => setIsLogsExpanded(!isLogsExpanded)}
+                  runs={runSelectorItems}
+                  selectedRunId={selectedRunId}
+                  onSelectRun={setSelectedRunId}
+                />
+              </div>
+            )}
+          </ResizablePanelGroup>
+        }
+      />
+    </div>
+  );
+}
+
+export default FlowRunsView;

package/src/components/flow-viewer/FlowStatusView.tsx

@@ -0,0 +1,351 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useNavigate } from 'react-router';
+import {
+  ReactFlow,
+  type NodeTypes,
+  type EdgeTypes,
+  Controls,
+  Background,
+  useReactFlow,
+  useNodesInitialized,
+  useUpdateNodeInternals,
+} from '@xyflow/react';
+
+import { BatchFlowEdge, defaultEdgeOptions } from '../graph';
+import { NodeViewProvider, createContextAwareNodes } from '../nodes';
+import { getNodeComponent } from '../nodes/nodeRegistry';
+import { withNodeContext } from '../nodes/withNodeContext';
+import { FlowRunStatus, NodeExecutionStatus, ReactFlowNodeData } from '@invect/core/types';
+import { FlowRun } from '@invect/core/types';
+import { Node } from '@xyflow/react';
+import { useTheme } from '~/contexts/ThemeProvider';
+import { InvectLoader } from '../shared/InvectLoader';
+
+// Import shared hook
+import { useFlowData } from '../../hooks/use-flow-data';
+
+// Base node types (enum-based) wrapped with view context
+const baseNodeTypes = createContextAwareNodes();
+
+const edgeTypes = {
+  // invect: BatchFlowEdge,
+  default: BatchFlowEdge,
+} as EdgeTypes;
+
+interface FlowStatusViewProps {
+  flowId: string;
+  flowVersion?: string;
+  basePath?: string;
+  selectedRunId: string | null;
+  selectedRun: FlowRun | null | undefined;
+  logsExpanded: boolean;
+  onNodeClick?: (nodeId: string) => void;
+  onEditNode?: (nodeId: string) => void;
+  /** Node ID to focus/center on (only set on user-initiated selection) */
+  focusNodeId?: string | null;
+  /** Callback when focus animation completes */
+  onFocusComplete?: () => void;
+  /** Incrementing counter that triggers a recenter (e.g. after panel resize) */
+  recenterTrigger?: number;
+  /** Currently selected node ID in the execution logs (for resize recenter) */
+  selectedNodeId?: string | null;
+}
+
+export function FlowStatusView({
+  flowId,
+  flowVersion,
+  basePath: _basePath = '',
+  selectedRunId,
+  selectedRun,
+  logsExpanded,
+  onNodeClick,
+  onEditNode,
+  focusNodeId,
+  onFocusComplete,
+  recenterTrigger,
+  selectedNodeId,
+}: FlowStatusViewProps) {
+  const _navigate = useNavigate();
+  const reactFlowInstance = useReactFlow();
+  const { resolvedTheme } = useTheme();
+
+  // Get flow data — execution status is streamed via SSE (useFlowRunStream in
+  // FlowRunsView), so we only need a single fetch of the graph structure here.
+  const { flowData, loading, queryError, nodes, onNodesChange, edges, onEdgesChange } = useFlowData(
+    flowId,
+    flowVersion,
+    selectedRunId || undefined,
+  );
+
+  // Wait until React Flow has measured all nodes and registered their handles
+  // before rendering edges. Output handles use nested relative positioning with
+  // CSS transforms, so we add a short delay after nodesInitialized for the
+  // browser to compute final handle positions. Without this, edge source points
+  // appear slightly disconnected from output handles.
+  const nodesInitialized = useNodesInitialized();
+  const updateNodeInternals = useUpdateNodeInternals();
+  const [edgesReady, setEdgesReady] = useState(false);
+
+  // nodeTypes: AGENT gets a custom component, everything else renders as
+  // UniversalNode. Register action types from current flow nodes to avoid
+  // ReactFlow's fallback CSS class; "default" catches unknown types.
+  // Derive a stable key from the set of unique node types so the memo only
+  // recomputes when a genuinely new type appears (not on every node change).
+  const nodeTypeKeys = useMemo(() => {
+    const types = new Set<string>();
+    for (const node of nodes) {
+      const nodeType = (node.data as { type?: string })?.type ?? node.type;
+      if (nodeType) {
+        types.add(nodeType);
+      }
+    }
+    return [...types].sort().join(',');
+  }, [nodes]);
+
+  const nodeTypes = useMemo(() => {
+    const mapping = { ...baseNodeTypes };
+    for (const key of nodeTypeKeys.split(',')) {
+      if (key && !(key in mapping)) {
+        mapping[key] = withNodeContext(getNodeComponent(key));
+      }
+    }
+    return mapping as NodeTypes;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [nodeTypeKeys]);
+
+  // Fit view when logs panel is expanded/collapsed
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      if (typeof reactFlowInstance.fitView === 'function') {
+        reactFlowInstance.fitView({ padding: 0.5, maxZoom: 1.2, duration: 200 });
+      }
+    }, 150);
+
+    return () => clearTimeout(timeout);
+  }, [logsExpanded, reactFlowInstance]);
+
+  // Keep refs for values used by the recenter effect so it only fires on recenterTrigger
+  const recenterStateRef = useRef({ focusNodeId, selectedNodeId, nodes, reactFlowInstance });
+  recenterStateRef.current = { focusNodeId, selectedNodeId, nodes, reactFlowInstance };
+
+  // Recenter after panel resize — center on selected node or fit entire flow
+  React.useEffect(() => {
+    if (!recenterTrigger) {
+      return;
+    }
+
+    const {
+      focusNodeId: fid,
+      selectedNodeId: sid,
+      nodes: n,
+      reactFlowInstance: rf,
+    } = recenterStateRef.current;
+    if (!n.length) {
+      return;
+    }
+
+    const timeout = setTimeout(() => {
+      const centerId = fid || sid;
+      if (centerId) {
+        const targetNode = n.find((node) => node.id === centerId);
+        if (targetNode) {
+          const nodeWidth = targetNode.measured?.width ?? targetNode.width ?? 200;
+          const nodeHeight = targetNode.measured?.height ?? targetNode.height ?? 60;
+          const x = targetNode.position.x + nodeWidth / 2;
+          const y = targetNode.position.y + nodeHeight / 2;
+          rf.setCenter(x, y, { duration: 200, zoom: rf.getZoom() });
+          return;
+        }
+      }
+      rf.fitView({ padding: 0.5, maxZoom: 1.2, duration: 200 });
+    }, 50);
+
+    return () => clearTimeout(timeout);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [recenterTrigger]);
+
+  // Center on focused node when user explicitly clicks (not on auto-select)
+  useEffect(() => {
+    if (!focusNodeId || !nodes.length) {
+      return;
+    }
+
+    // Find the node in the current nodes array
+    const targetNode = nodes.find((n) => n.id === focusNodeId);
+    if (!targetNode) {
+      return;
+    }
+
+    // Use setCenter to pan and zoom to the node's position
+    // Adding a small delay to ensure the view has settled
+    const timeout = setTimeout(() => {
+      const nodeWidth = targetNode.measured?.width ?? targetNode.width ?? 200;
+      const nodeHeight = targetNode.measured?.height ?? targetNode.height ?? 60;
+
+      // Center on the node's center point and zoom in
+      const x = targetNode.position.x + nodeWidth / 2;
+      const y = targetNode.position.y + nodeHeight / 2;
+
+      // Zoom to 1.5x when focusing on a node (or current zoom if already higher)
+      const targetZoom = Math.max(1.5, reactFlowInstance.getZoom());
+      reactFlowInstance.setCenter(x, y, { duration: 300, zoom: targetZoom });
+
+      // Clear the focus after centering is complete
+      if (onFocusComplete) {
+        setTimeout(onFocusComplete, 350);
+      }
+    }, 50);
+
+    return () => clearTimeout(timeout);
+  }, [focusNodeId, nodes, reactFlowInstance, onFocusComplete]);
+
+  // Process nodes for batch execution state management
+  const processNodesForBatchExecution = (originalNodes: Node[]) => {
+    // If there's no execution or execution is not active, return nodes as-is
+    if (!selectedRun || !selectedRun.status) {
+      return originalNodes;
+    }
+
+    const isExecutionActive = [
+      FlowRunStatus.RUNNING,
+      FlowRunStatus.PENDING,
+      FlowRunStatus.PAUSED_FOR_BATCH,
+    ].includes(selectedRun.status);
+
+    return originalNodes.map((node) => {
+      const processedNode = { ...node };
+      const nodeData = node.data as ReactFlowNodeData;
+
+      if (isExecutionActive) {
+        // If flow is running via batch, set nodes to appropriate states
+        if (!nodeData.executionStatus) {
+          // Node hasn't been executed yet - set to waiting
+          processedNode.data = {
+            ...node.data,
+            executionStatus: NodeExecutionStatus.PENDING,
+          };
+        } else if (nodeData.executionStatus === NodeExecutionStatus.BATCH_SUBMITTED) {
+          // Node is in batch processing - show as running
+          processedNode.data = {
+            ...node.data,
+            executionStatus: NodeExecutionStatus.RUNNING,
+          };
+        }
+        // Otherwise keep the current execution status (SUCCESS, FAILED, RUNNING, etc.)
+      } else {
+        // Flow is not active - clean up temporary states but keep final states
+        if (
+          nodeData.executionStatus &&
+          [NodeExecutionStatus.PENDING, NodeExecutionStatus.RUNNING].includes(
+            nodeData.executionStatus,
+          )
+        ) {
+          const { executionStatus, executionOutput, executionError, ...cleanData } = nodeData;
+          processedNode.data = cleanData;
+        }
+      }
+
+      return processedNode;
+    });
+  };
+
+  const renderedNodes = useMemo(() => processNodesForBatchExecution(nodes), [nodes, selectedRun]);
+
+  // Build a fingerprint of execution statuses for the exact node set rendered
+  // into React Flow. This includes temporary run-state decoration applied in
+  // `processNodesForBatchExecution`, not just the raw fetched node data.
+  const executionFingerprint = useMemo(
+    () =>
+      renderedNodes
+        .map((n) => {
+          const d = n.data as { executionStatus?: string } | undefined;
+          return `${n.id}:${d?.executionStatus ?? ''}`;
+        })
+        .join(','),
+    [renderedNodes],
+  );
+
+  useEffect(() => {
+    if (nodesInitialized && renderedNodes.length > 0) {
+      // Force React Flow to re-measure handle positions for all rendered nodes.
+      // Execution status styling changes node borders and shifts handle DOM
+      // positions, but React Flow caches stale coordinates until internals are
+      // refreshed.
+      updateNodeInternals(renderedNodes.map((n) => n.id));
+
+      setEdgesReady(false);
+      const timeout = setTimeout(() => setEdgesReady(true), 80);
+      return () => clearTimeout(timeout);
+    }
+    setEdgesReady(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [nodesInitialized, renderedNodes.length, executionFingerprint, updateNodeInternals]);
+
+  const readyEdges = edgesReady ? edges : [];
+
+  // Get current version's validation status (versions don't have isValid anymore)
+  // const isValidFlow = displayVersion?.isValid;
+
+  // Loading state
+  if (loading) {
+    return <InvectLoader className="w-full h-full" iconClassName="h-16" label="Loading flow..." />;
+  }
+
+  // Error state
+  if (queryError) {
+    return (
+      <div className="flex items-center justify-center w-full h-full">
+        <div className="p-4 border border-red-200 rounded-lg bg-red-50">
+          <div className="text-red-800">{JSON.stringify(queryError)}</div>
+        </div>
+      </div>
+    );
+  }
+
+  // No flow state
+  if (!flowData) {
+    return (
+      <div className="flex items-center justify-center w-full h-full">
+        <div className="text-muted-foreground">No flow data available</div>
+      </div>
+    );
+  }
+
+  return (
+    <NodeViewProvider mode="view" onEditNode={onEditNode}>
+      <div style={{ width: '100%', height: '100%', background: 'var(--canvas-background)' }}>
+        <ReactFlow
+          nodes={renderedNodes}
+          edges={readyEdges}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          nodeTypes={nodeTypes}
+          edgeTypes={edgeTypes}
+          colorMode={resolvedTheme}
+          defaultEdgeOptions={defaultEdgeOptions}
+          fitView={true}
+          fitViewOptions={{
+            padding: 0.5,
+            maxZoom: 1.2,
+          }}
+          minZoom={0.1}
+          maxZoom={4}
+          nodesDraggable={false}
+          nodesConnectable={false}
+          nodesFocusable={true}
+          edgesFocusable={false}
+          elementsSelectable={true}
+          onNodeClick={(_, node) => onNodeClick?.(node.id)}
+          proOptions={{ hideAttribution: true }}
+          panOnDrag={true}
+          zoomOnScroll={true}
+          zoomOnPinch={true}
+          zoomOnDoubleClick={true}
+        >
+          <Background />
+          <Controls />
+        </ReactFlow>
+      </div>
+    </NodeViewProvider>
+  );
+}