>(({ className, ...props }, ref) => (
[role=checkbox]]:translate-y-[2px]",
className
)}
{...props}
/>
))
TableCell.displayName = "TableCell"
const TableCaption = React.forwardRef<
HTMLTableCaptionElement,
React.HTMLAttributes
>(({ className, ...props }, ref) => (
,
React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
,
React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
,
React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
,
React.ComponentPropsWithoutRef
>(({ className, sideOffset = 4, ...props }, ref) => (
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
================================================
FILE: app/frontend/src/contexts/flow-context.tsx
================================================
import { getMultiNodeDefinition, isMultiNodeComponent } from '@/data/multi-node-mappings';
import { getNodeTypeDefinition } from '@/data/node-mappings';
import { flowConnectionManager } from '@/hooks/use-flow-connection';
import { clearAllNodeStates, getAllNodeStates, setNodeInternalState, setCurrentFlowId as setNodeStateFlowId } from '@/hooks/use-node-state';
import { flowService } from '@/services/flow-service';
import { Flow } from '@/types/flow';
import { MarkerType, ReactFlowInstance, useReactFlow, XYPosition } from '@xyflow/react';
import { createContext, ReactNode, useCallback, useContext, useState } from 'react';
interface FlowContextType {
addComponentToFlow: (componentName: string) => Promise;
saveCurrentFlow: (name?: string, description?: string) => Promise;
loadFlow: (flow: Flow) => Promise;
createNewFlow: () => Promise;
currentFlowId: number | null;
currentFlowName: string;
isUnsaved: boolean;
reactFlowInstance: ReactFlowInstance;
}
const FlowContext = createContext(null);
export function useFlowContext() {
const context = useContext(FlowContext);
if (!context) {
throw new Error('useFlowContext must be used within a FlowProvider');
}
return context;
}
interface FlowProviderProps {
children: ReactNode;
}
export function FlowProvider({ children }: FlowProviderProps) {
const reactFlowInstance = useReactFlow();
const [currentFlowId, setCurrentFlowId] = useState(null);
const [currentFlowName, setCurrentFlowName] = useState('Untitled Flow');
const [isUnsaved, setIsUnsaved] = useState(false);
// Calculate viewport center position with optional randomness
const getViewportPosition = useCallback((addRandomness = false): XYPosition => {
let position: XYPosition = { x: 0, y: 0 }; // Default position
try {
const { zoom, x, y } = reactFlowInstance.getViewport();
// Get the React Flow container dimensions instead of window dimensions
const flowContainer = document.querySelector('.react-flow__viewport')?.parentElement;
const containerWidth = flowContainer?.clientWidth || window.innerWidth;
const containerHeight = flowContainer?.clientHeight || window.innerHeight;
position = {
x: (containerWidth / 2 - x) / zoom,
y: (containerHeight / 2 - y) / zoom,
};
} catch (err) {
console.warn('Could not get viewport', err);
}
if (addRandomness) {
position.x += Math.random() * 300;
position.y = 0;
}
return position;
}, [reactFlowInstance]);
// Mark flow as unsaved when changes are made
const markAsUnsaved = useCallback(() => {
setIsUnsaved(true);
}, []);
// Save current flow
const saveCurrentFlow = useCallback(async (name?: string, description?: string): Promise => {
try {
const nodes = reactFlowInstance.getNodes();
const edges = reactFlowInstance.getEdges();
const viewport = reactFlowInstance.getViewport();
// Collect all node internal states (from use-node-state)
const nodeStates = getAllNodeStates();
const nodeInternalStates = Object.fromEntries(nodeStates);
// Create structured data - nodeContextData will be added by enhanced save functions
const data = {
nodeStates: nodeInternalStates, // use-node-state data
// nodeContextData will be added separately by enhanced save functions
};
if (currentFlowId) {
// Update existing flow
const updatedFlow = await flowService.updateFlow(currentFlowId, {
name: name || currentFlowName,
description,
nodes,
edges,
viewport,
data,
});
setCurrentFlowName(updatedFlow.name);
setIsUnsaved(false);
// Remember this flow as the last selected
localStorage.setItem('lastSelectedFlowId', updatedFlow.id.toString());
// Ensure the flow ID is set for node state isolation
setNodeStateFlowId(updatedFlow.id.toString());
return updatedFlow;
} else {
// Create new flow
const newFlow = await flowService.createFlow({
name: name || currentFlowName,
description,
nodes,
edges,
viewport,
data,
});
setCurrentFlowId(newFlow.id);
setCurrentFlowName(newFlow.name);
setIsUnsaved(false);
// Remember this flow as the last selected
localStorage.setItem('lastSelectedFlowId', newFlow.id.toString());
// Set the flow ID for node state isolation
setNodeStateFlowId(newFlow.id.toString());
return newFlow;
}
} catch (error) {
console.error('Failed to save flow:', error);
return null;
}
}, [reactFlowInstance, currentFlowId, currentFlowName]);
// Load a flow
const loadFlow = useCallback(async (flow: Flow) => {
try {
// CRITICAL: Set the current flow ID FIRST, before rendering nodes
// This ensures useNodeState hooks initialize with the correct flow ID
setNodeStateFlowId(flow.id.toString());
setCurrentFlowId(flow.id);
setCurrentFlowName(flow.name);
// DO NOT clear configuration state when loading flows - useNodeState handles flow isolation automatically
// Only restore additional internal states if they exist in the flow data
if (flow.data) {
// Handle backward compatibility - data might be direct nodeStates or structured data
const dataToRestore = flow.data.nodeStates || flow.data;
if (dataToRestore) {
Object.entries(dataToRestore).forEach(([nodeId, nodeState]) => {
setNodeInternalState(nodeId, nodeState as Record);
});
}
// nodeContextData restoration will be handled by enhanced load functions
}
// Now render the nodes - useNodeState hooks will initialize with correct flow ID
reactFlowInstance.setNodes(flow.nodes || []);
reactFlowInstance.setEdges(flow.edges || []);
if (flow.viewport) {
reactFlowInstance.setViewport(flow.viewport);
} else {
// Fit view if no viewport data
setTimeout(() => {
reactFlowInstance.fitView();
}, 100);
}
setIsUnsaved(false);
// Remember this flow as the last selected
localStorage.setItem('lastSelectedFlowId', flow.id.toString());
// IMPORTANT: Allow components to mount first, then recover connection state
// This ensures useFlowConnection hooks are initialized before recovery
setTimeout(() => {
// Check if this flow has any stale processing states and recover them
const connection = flowConnectionManager.getConnection(flow.id.toString());
if (connection.state === 'idle') {
// No active connection, so any IN_PROGRESS states are stale and should be reset
console.log(`Flow ${flow.id} loaded - checking for stale connection states`);
}
}, 100);
} catch (error) {
console.error('Failed to load flow:', error);
}
}, [reactFlowInstance]);
// Create a new flow
const createNewFlow = useCallback(async () => {
try {
// CRITICAL: Reset flow ID FIRST, before clearing nodes
setNodeStateFlowId(null);
setCurrentFlowId(null);
setCurrentFlowName('Untitled Flow');
// Clear all node states for the current flow
clearAllNodeStates();
// Clear the React Flow canvas
reactFlowInstance.setNodes([]);
reactFlowInstance.setEdges([]);
reactFlowInstance.setViewport({ x: 0, y: 0, zoom: 1 });
setIsUnsaved(false);
// Clear any active connections when creating a new flow
// Note: We don't have a current flow ID to clear, so this is mainly cleanup
console.log('Created new flow - any previous connections should be cleaned up');
} catch (error) {
console.error('Failed to create new flow:', error);
}
}, [reactFlowInstance]);
// Add a single node to the flow
const addSingleNodeToFlow = useCallback(async (componentName: string) => {
try {
const nodeTypeDefinition = await getNodeTypeDefinition(componentName);
if (!nodeTypeDefinition) {
console.warn(`No node type definition found for component: ${componentName}`);
return;
}
const position = getViewportPosition(false);
const newNode = nodeTypeDefinition.createNode(position);
reactFlowInstance.setNodes((nodes) => [...nodes, newNode]);
markAsUnsaved();
} catch (error) {
console.error(`Failed to add component ${componentName} to flow:`, error);
}
}, [reactFlowInstance, getViewportPosition, markAsUnsaved]);
// Add a multi node (group of nodes with edges) to the flow
const addMultipleNodesToFlow = useCallback(async (name: string) => {
try {
const multiNodeDefinition = getMultiNodeDefinition(name);
if (!multiNodeDefinition) {
console.warn(`No multi node definition found for: ${name}`);
return;
}
const basePosition = getViewportPosition();
// Calculate bounding box of all nodes to center the group
const nodePositions = multiNodeDefinition.nodes.map(node => ({
x: node.offsetX,
y: node.offsetY
}));
const minX = Math.min(...nodePositions.map(pos => pos.x));
const maxX = Math.max(...nodePositions.map(pos => pos.x));
const minY = Math.min(...nodePositions.map(pos => pos.y));
const maxY = Math.max(...nodePositions.map(pos => pos.y));
// Center the group by adjusting base position
const groupCenterX = (minX + maxX) / 2;
const groupCenterY = (minY + maxY) / 2;
const adjustedBasePosition = {
x: basePosition.x - groupCenterX,
y: basePosition.y - groupCenterY,
};
// Create nodes (async)
const newNodes = await Promise.all(
multiNodeDefinition.nodes.map(async (nodeConfig) => {
try {
const nodeTypeDefinition = await getNodeTypeDefinition(nodeConfig.componentName);
if (!nodeTypeDefinition) {
console.warn(`No node type definition found for: ${nodeConfig.componentName}`);
return null;
}
const position = {
x: adjustedBasePosition.x + nodeConfig.offsetX,
y: adjustedBasePosition.y + nodeConfig.offsetY,
};
return nodeTypeDefinition.createNode(position);
} catch (error) {
console.error(`Failed to create node for ${nodeConfig.componentName}:`, error);
return null;
}
})
);
const validNodes = newNodes.filter((node): node is NonNullable => node !== null);
// Create a mapping from component names to actual node IDs
const componentNameToNodeId = new Map();
multiNodeDefinition.nodes.forEach((nodeConfig, index) => {
const correspondingNode = validNodes[index];
if (correspondingNode) {
componentNameToNodeId.set(nodeConfig.componentName, correspondingNode.id);
}
});
// Create edges using the actual node IDs
const newEdges = multiNodeDefinition.edges.map((edgeConfig) => {
const sourceNodeId = componentNameToNodeId.get(edgeConfig.source);
const targetNodeId = componentNameToNodeId.get(edgeConfig.target);
if (!sourceNodeId || !targetNodeId) {
console.warn(`Could not resolve node IDs for edge: ${edgeConfig.source} -> ${edgeConfig.target}`);
return null;
}
return {
id: `${sourceNodeId}-${targetNodeId}`,
source: sourceNodeId,
target: targetNodeId,
markerEnd: {
type: MarkerType.ArrowClosed,
},
};
}).filter((edge): edge is NonNullable => edge !== null);
// Add nodes and edges to flow
reactFlowInstance.setNodes((nodes) => [...nodes, ...validNodes]);
reactFlowInstance.setEdges((edges) => [...edges, ...newEdges]);
markAsUnsaved();
// Fit view to show all nodes after a short delay to ensure nodes are rendered
setTimeout(() => {
reactFlowInstance.fitView({ padding: 0.1, duration: 500 });
}, 100);
} catch (error) {
console.error(`Failed to add multi-node component ${name} to flow:`, error);
}
}, [reactFlowInstance, getViewportPosition, markAsUnsaved]);
// Main entry point - route to single node or multi node
const addComponentToFlow = useCallback(async (componentName: string) => {
if (isMultiNodeComponent(componentName)) {
await addMultipleNodesToFlow(componentName);
} else {
await addSingleNodeToFlow(componentName);
}
}, [addMultipleNodesToFlow, addSingleNodeToFlow]);
const value = {
addComponentToFlow,
saveCurrentFlow,
loadFlow,
createNewFlow,
currentFlowId,
currentFlowName,
isUnsaved,
reactFlowInstance,
};
return (
{children}
);
}
================================================
FILE: app/frontend/src/contexts/layout-context.tsx
================================================
import { SidebarStorageService } from '@/services/sidebar-storage';
import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
interface LayoutContextType {
isBottomCollapsed: boolean;
expandBottomPanel: () => void;
collapseBottomPanel: () => void;
toggleBottomPanel: () => void;
setBottomPanelTab: (tab: string) => void;
currentBottomTab: string;
}
const LayoutContext = createContext(null);
export function useLayoutContext() {
const context = useContext(LayoutContext);
if (!context) {
throw new Error('useLayoutContext must be used within a LayoutProvider');
}
return context;
}
interface LayoutProviderProps {
children: ReactNode;
}
export function LayoutProvider({ children }: LayoutProviderProps) {
const [isBottomCollapsed, setIsBottomCollapsed] = useState(() =>
SidebarStorageService.loadBottomPanelState(true)
);
const [currentBottomTab, setCurrentBottomTab] = useState('output');
// Save bottom panel state when it changes
useEffect(() => {
SidebarStorageService.saveBottomPanelState(isBottomCollapsed);
}, [isBottomCollapsed]);
const expandBottomPanel = () => {
setIsBottomCollapsed(false);
};
const collapseBottomPanel = () => {
setIsBottomCollapsed(true);
};
const toggleBottomPanel = () => {
setIsBottomCollapsed(!isBottomCollapsed);
};
const setBottomPanelTab = (tab: string) => {
setCurrentBottomTab(tab);
};
const value = {
isBottomCollapsed,
expandBottomPanel,
collapseBottomPanel,
toggleBottomPanel,
setBottomPanelTab,
currentBottomTab,
};
return (
{children}
);
}
================================================
FILE: app/frontend/src/contexts/node-context.tsx
================================================
import { LanguageModel } from '@/data/models';
import { createContext, ReactNode, useCallback, useContext, useState } from 'react';
export type NodeStatus = 'IDLE' | 'IN_PROGRESS' | 'COMPLETE' | 'ERROR';
// Message history item
export interface MessageItem {
timestamp: string;
message: string;
ticker: string | null;
analysis: Record;
}
// Agent node state structure
export interface AgentNodeData {
status: NodeStatus;
ticker: string | null;
message: string;
lastUpdated: number;
messages: MessageItem[];
timestamp?: string;
analysis: string | null;
backtestResults?: any[];
}
// Data structure for the output node data (from complete event)
export interface OutputNodeData {
decisions: Record;
analyst_signals: Record;
// Backtest-specific fields
performance_metrics?: {
sharpe_ratio?: number;
sortino_ratio?: number;
max_drawdown?: number;
max_drawdown_date?: string;
long_short_ratio?: number;
gross_exposure?: number;
net_exposure?: number;
};
final_portfolio?: {
cash: number;
margin_used: number;
positions: Record;
};
total_days?: number;
}
// Default agent node state
const DEFAULT_AGENT_NODE_STATE: AgentNodeData = {
status: 'IDLE',
ticker: null,
message: '',
messages: [],
lastUpdated: Date.now(),
analysis: null,
};
// Helper function to create flow-aware composite keys
function createCompositeKey(flowId: string | null, nodeId: string): string {
return flowId ? `${flowId}:${nodeId}` : nodeId;
}
interface NodeContextType {
agentNodeData: Record;
outputNodeData: OutputNodeData | null;
agentModels: Record;
updateAgentNode: (flowId: string | null, nodeId: string, data: Partial | NodeStatus) => void;
updateAgentNodes: (flowId: string | null, nodeIds: string[], status: NodeStatus) => void;
setOutputNodeData: (flowId: string | null, data: OutputNodeData) => void;
setAgentModel: (flowId: string | null, nodeId: string, model: LanguageModel | null) => void;
getAgentModel: (flowId: string | null, nodeId: string) => LanguageModel | null;
getAllAgentModels: (flowId: string | null) => Record;
resetAllNodes: (flowId: string | null) => void;
resetNodeStatuses: (flowId: string | null) => void;
exportNodeContextData: (flowId: string | null) => {
agentNodeData: Record;
outputNodeData: OutputNodeData | null;
};
importNodeContextData: (flowId: string | null, data: {
agentNodeData?: Record;
outputNodeData?: OutputNodeData | null;
}) => void;
// New flow-aware functions
getAgentNodeDataForFlow: (flowId: string | null) => Record;
getOutputNodeDataForFlow: (flowId: string | null) => OutputNodeData | null;
}
const NodeContext = createContext(undefined);
export function NodeProvider({ children }: { children: ReactNode }) {
// Use composite keys for flow-aware agent node data storage
const [agentNodeData, setAgentNodeData] = useState>({});
// Flow-aware output node data storage
const [outputNodeData, setOutputNodeData] = useState>({});
// Agent models also need to be flow-aware to maintain model selections per flow
const [agentModels, setAgentModels] = useState>({});
const updateAgentNode = useCallback((flowId: string | null, nodeId: string, data: Partial | NodeStatus) => {
const compositeKey = createCompositeKey(flowId, nodeId);
// Handle string status shorthand (just passing a status string)
if (typeof data === 'string') {
setAgentNodeData(prev => {
const existingNode = prev[compositeKey] || { ...DEFAULT_AGENT_NODE_STATE };
return {
...prev,
[compositeKey]: {
...existingNode,
status: data,
lastUpdated: Date.now()
}
};
});
return;
}
// Handle data object - full update
setAgentNodeData(prev => {
const existingNode = prev[compositeKey] || { ...DEFAULT_AGENT_NODE_STATE };
const newMessages = [...existingNode.messages];
// Add message to history if it's new - use more robust checking
if (data.message && data.timestamp) {
// Check if this exact message already exists (prevent duplicates)
const messageExists = newMessages.some(msg =>
msg.timestamp === data.timestamp &&
msg.message === data.message &&
msg.ticker === data.ticker
);
if (!messageExists) {
const ticker = data.ticker || null;
const messageItem: MessageItem = {
timestamp: data.timestamp,
message: data.message,
ticker: ticker,
analysis: {} as Record,
}
// Add analysis for ticker to messageItem if ticker is not null
if (ticker && data.analysis) {
messageItem.analysis[ticker] = data.analysis;
}
newMessages.push(messageItem);
}
}
const updatedNode = {
...existingNode,
...data,
messages: newMessages,
lastUpdated: Date.now()
};
return {
...prev,
[compositeKey]: updatedNode
};
});
}, []);
const updateAgentNodes = useCallback((flowId: string | null, nodeIds: string[], status: NodeStatus) => {
if (nodeIds.length === 0) return;
setAgentNodeData(prev => {
const newStates = { ...prev };
nodeIds.forEach(id => {
const compositeKey = createCompositeKey(flowId, id);
newStates[compositeKey] = {
...(newStates[compositeKey] || { ...DEFAULT_AGENT_NODE_STATE }),
status,
lastUpdated: Date.now()
};
});
return newStates;
});
}, []);
const setAgentModel = useCallback((flowId: string | null, nodeId: string, model: LanguageModel | null) => {
const compositeKey = createCompositeKey(flowId, nodeId);
setAgentModels(prev => {
if (model === null) {
// Remove the agent model if setting to null
const { [compositeKey]: removed, ...rest } = prev;
return rest;
} else {
// Set the agent model
return {
...prev,
[compositeKey]: model
};
}
});
}, []);
const getAgentModel = useCallback((flowId: string | null, nodeId: string): LanguageModel | null => {
const compositeKey = createCompositeKey(flowId, nodeId);
return agentModels[compositeKey] || null;
}, [agentModels]);
const getAllAgentModels = useCallback((flowId: string | null): Record => {
// Return only models for the specified flow
if (!flowId) {
// If no flow ID, return models without flow prefix (backward compatibility)
return Object.fromEntries(
Object.entries(agentModels).filter(([key]) => !key.includes(':'))
);
}
const flowPrefix = `${flowId}:`;
const currentFlowModels: Record = {};
Object.entries(agentModels).forEach(([compositeKey, model]) => {
if (compositeKey.startsWith(flowPrefix)) {
const nodeId = compositeKey.substring(flowPrefix.length);
currentFlowModels[nodeId] = model;
}
});
return currentFlowModels;
}, [agentModels]);
const setOutputNodeDataForFlow = useCallback((flowId: string | null, data: OutputNodeData) => {
if (!flowId) {
// If no flow ID, use 'default' as key for backward compatibility
setOutputNodeData(prev => ({ ...prev, 'default': data }));
} else {
setOutputNodeData(prev => ({ ...prev, [flowId]: data }));
}
}, []);
const resetAllNodes = useCallback((flowId: string | null) => {
// Clear all agent data for specified flow only
if (!flowId) {
// If no flow ID, clear all data (backward compatibility)
setAgentNodeData({});
setOutputNodeData({});
} else {
// Clear only data for specified flow
const flowPrefix = `${flowId}:`;
setAgentNodeData(prev => {
const newData: Record = {};
Object.entries(prev).forEach(([key, value]) => {
if (!key.startsWith(flowPrefix)) {
newData[key] = value;
}
});
return newData;
});
// Clear output data for specified flow
setOutputNodeData(prev => {
const { [flowId]: removed, ...rest } = prev;
return rest;
});
}
// Note: We don't reset agentModels here as users would want to keep their model selections
}, []);
const resetNodeStatuses = useCallback((flowId: string | null) => {
// Reset only node statuses to IDLE, preserving all data (messages, backtestResults, etc.)
if (!flowId) {
// If no flow ID, reset all node statuses (backward compatibility)
setAgentNodeData(prev => {
const newData: Record = {};
Object.entries(prev).forEach(([key, value]) => {
newData[key] = {
...value,
status: 'IDLE',
lastUpdated: Date.now(),
};
});
return newData;
});
} else {
// Reset only statuses for specified flow
const flowPrefix = `${flowId}:`;
setAgentNodeData(prev => {
const newData: Record = {};
Object.entries(prev).forEach(([key, value]) => {
if (key.startsWith(flowPrefix)) {
// Reset status for this flow's nodes
newData[key] = {
...value,
status: 'IDLE',
lastUpdated: Date.now(),
};
} else {
// Keep other flows' data unchanged
newData[key] = value;
}
});
return newData;
});
}
// Note: We don't touch output data or agent models - only reset processing statuses
}, []);
// Export node context data for persistence
const exportNodeContextData = useCallback((flowId: string | null) => {
// Export agent data for specified flow
const currentFlowAgentData: Record = {};
const flowPrefix = flowId ? `${flowId}:` : '';
Object.entries(agentNodeData).forEach(([compositeKey, data]) => {
if (flowId) {
if (compositeKey.startsWith(flowPrefix)) {
const nodeId = compositeKey.substring(flowPrefix.length);
currentFlowAgentData[nodeId] = data;
}
} else {
// If no flow ID, export data without flow prefix (backward compatibility)
if (!compositeKey.includes(':')) {
currentFlowAgentData[compositeKey] = data;
}
}
});
// Export output data for specified flow
const currentFlowOutputData = flowId
? outputNodeData[flowId] || null
: outputNodeData['default'] || null;
return {
agentNodeData: currentFlowAgentData,
outputNodeData: currentFlowOutputData,
};
}, [agentNodeData, outputNodeData]);
// Import node context data from persistence
const importNodeContextData = useCallback((flowId: string | null, data: {
agentNodeData?: Record;
outputNodeData?: OutputNodeData | null;
}) => {
// Import agent data
if (data.agentNodeData) {
Object.entries(data.agentNodeData).forEach(([nodeId, nodeData]) => {
const compositeKey = createCompositeKey(flowId, nodeId);
setAgentNodeData(prev => ({
...prev,
[compositeKey]: nodeData,
}));
});
}
// Import output data
if (data.outputNodeData) {
if (flowId) {
setOutputNodeData(prev => ({
...prev,
[flowId]: data.outputNodeData!,
}));
} else {
setOutputNodeData(prev => ({
...prev,
'default': data.outputNodeData!,
}));
}
}
}, []);
// Helper functions to get data for a specific flow
const getAgentNodeDataForFlow = useCallback((flowId: string | null): Record => {
if (!flowId) {
// If no flow ID, return data without flow prefix (backward compatibility)
return Object.fromEntries(
Object.entries(agentNodeData).filter(([key]) => !key.includes(':'))
);
}
const flowPrefix = `${flowId}:`;
const currentFlowData: Record = {};
Object.entries(agentNodeData).forEach(([compositeKey, data]) => {
if (compositeKey.startsWith(flowPrefix)) {
const nodeId = compositeKey.substring(flowPrefix.length);
currentFlowData[nodeId] = data;
}
});
return currentFlowData;
}, [agentNodeData]);
const getOutputNodeDataForFlow = useCallback((flowId: string | null): OutputNodeData | null => {
if (!flowId) {
// If no flow ID, return 'default' data for backward compatibility
return outputNodeData['default'] || null;
}
return outputNodeData[flowId] || null;
}, [outputNodeData]);
// Context value object
const contextValue = {
// Legacy getters for backward compatibility - these will return empty data
// Components should use the explicit flow-based functions instead
agentNodeData: {},
outputNodeData: null,
agentModels,
updateAgentNode,
updateAgentNodes,
setOutputNodeData: setOutputNodeDataForFlow,
setAgentModel,
getAgentModel,
getAllAgentModels,
resetAllNodes,
resetNodeStatuses,
exportNodeContextData,
importNodeContextData,
// New flow-aware functions
getAgentNodeDataForFlow,
getOutputNodeDataForFlow,
};
return (
{children}
);
}
export function useNodeContext() {
const context = useContext(NodeContext);
if (context === undefined) {
throw new Error('useNodeContext must be used within a NodeProvider');
}
return context;
}
================================================
FILE: app/frontend/src/contexts/tabs-context.tsx
================================================
import { Flow } from '@/types/flow';
import { createContext, ReactNode, useCallback, useContext, useEffect, useState } from 'react';
// Define tab types
export type TabType = 'flow' | 'settings';
export interface Tab {
id: string;
type: TabType;
title: string;
content: ReactNode;
// For flow tabs
flow?: Flow;
// For other tabs (settings, etc.)
metadata?: Record;
}
// Serializable version of Tab for localStorage (without content)
interface SerializableTab {
id: string;
type: TabType;
title: string;
flow?: Flow;
metadata?: Record;
}
interface TabsContextType {
tabs: Tab[];
activeTabId: string | null;
openTab: (tab: Omit & { id?: string }) => void;
closeTab: (tabId: string) => void;
setActiveTab: (tabId: string) => void;
closeAllTabs: () => void;
isTabOpen: (identifier: string, type: TabType) => boolean;
getTabByIdentifier: (identifier: string, type: TabType) => Tab | undefined;
reorderTabs: (fromIndex: number, toIndex: number) => void;
updateTabTitle: (tabId: string, newTitle: string) => void;
updateFlowTabTitle: (flowId: number, newTitle: string) => void;
}
const TabsContext = createContext(null);
export function useTabsContext() {
const context = useContext(TabsContext);
if (!context) {
throw new Error('useTabsContext must be used within a TabsProvider');
}
return context;
}
interface TabsProviderProps {
children: ReactNode;
}
// localStorage keys
const TABS_STORAGE_KEY = 'ai-hedge-fund-tabs';
const ACTIVE_TAB_STORAGE_KEY = 'ai-hedge-fund-active-tab';
export function TabsProvider({ children }: TabsProviderProps) {
const [tabs, setTabs] = useState([]);
const [activeTabId, setActiveTabId] = useState(null);
const [isInitialized, setIsInitialized] = useState(false);
// Generate unique tab ID
const generateTabId = useCallback((type: TabType, identifier?: string): string => {
if (type === 'flow' && identifier) {
return `flow-${identifier}`;
}
if (type === 'settings') {
return 'settings';
}
return `${type}-${Date.now()}`;
}, []);
// Save tabs to localStorage
const saveTabsToStorage = useCallback((tabsToSave: Tab[], activeId: string | null) => {
try {
// Convert tabs to serializable format (without content)
const serializableTabs: SerializableTab[] = tabsToSave.map(tab => ({
id: tab.id,
type: tab.type,
title: tab.title,
flow: tab.flow,
metadata: tab.metadata,
}));
localStorage.setItem(TABS_STORAGE_KEY, JSON.stringify(serializableTabs));
localStorage.setItem(ACTIVE_TAB_STORAGE_KEY, activeId || '');
} catch (error) {
console.error('Failed to save tabs to localStorage:', error);
}
}, []);
// Load tabs from localStorage
const loadTabsFromStorage = useCallback((): { tabs: SerializableTab[], activeTabId: string | null } => {
try {
const savedTabs = localStorage.getItem(TABS_STORAGE_KEY);
const savedActiveTabId = localStorage.getItem(ACTIVE_TAB_STORAGE_KEY);
if (savedTabs) {
const parsedTabs: SerializableTab[] = JSON.parse(savedTabs);
return {
tabs: parsedTabs,
activeTabId: savedActiveTabId || null,
};
}
} catch (error) {
console.error('Failed to load tabs from localStorage:', error);
}
return { tabs: [], activeTabId: null };
}, []);
// Initialize tabs from localStorage on mount
useEffect(() => {
if (!isInitialized) {
const { tabs: savedTabs, activeTabId: savedActiveTabId } = loadTabsFromStorage();
if (savedTabs.length > 0) {
// We'll restore the content later when the tab service is available
// For now, just set up the tab structure
const restoredTabs: Tab[] = savedTabs.map(savedTab => ({
...savedTab,
content: null, // Will be filled in by TabService when tabs are accessed
}));
setTabs(restoredTabs);
setActiveTabId(savedActiveTabId);
}
setIsInitialized(true);
}
}, [isInitialized, loadTabsFromStorage]);
// Save tabs to localStorage whenever they change
useEffect(() => {
if (isInitialized) {
saveTabsToStorage(tabs, activeTabId);
}
}, [tabs, activeTabId, isInitialized, saveTabsToStorage]);
// Check if a tab is already open
const isTabOpen = useCallback((identifier: string, type: TabType): boolean => {
const tabId = generateTabId(type, identifier);
return tabs.some(tab => tab.id === tabId);
}, [tabs, generateTabId]);
// Get tab by identifier
const getTabByIdentifier = useCallback((identifier: string, type: TabType): Tab | undefined => {
const tabId = generateTabId(type, identifier);
return tabs.find(tab => tab.id === tabId);
}, [tabs, generateTabId]);
// Open a new tab or focus existing one
const openTab = useCallback((tabData: Omit & { id?: string }) => {
const tabId = tabData.id || generateTabId(tabData.type,
tabData.type === 'flow' && tabData.flow ? tabData.flow.id.toString() : undefined
);
setTabs(prevTabs => {
// Check if tab already exists
const existingTabIndex = prevTabs.findIndex(tab => tab.id === tabId);
if (existingTabIndex !== -1) {
// Tab exists, just update it and focus
const updatedTabs = [...prevTabs];
updatedTabs[existingTabIndex] = { ...tabData, id: tabId };
setActiveTabId(tabId);
return updatedTabs;
} else {
// Create new tab
const newTab: Tab = { ...tabData, id: tabId };
setActiveTabId(tabId);
return [...prevTabs, newTab];
}
});
}, [generateTabId]);
// Close a tab
const closeTab = useCallback((tabId: string) => {
setTabs(prevTabs => {
const newTabs = prevTabs.filter(tab => tab.id !== tabId);
// If closing active tab, set new active tab
if (activeTabId === tabId) {
if (newTabs.length > 0) {
// Find the index of the closed tab
const closedIndex = prevTabs.findIndex(tab => tab.id === tabId);
// Try to activate the tab to the right, or the last tab if closing the last one
const newActiveIndex = closedIndex < newTabs.length ? closedIndex : newTabs.length - 1;
setActiveTabId(newTabs[newActiveIndex]?.id || null);
} else {
setActiveTabId(null);
}
}
return newTabs;
});
}, [activeTabId]);
// Set active tab
const setActiveTab = useCallback((tabId: string) => {
if (tabs.some(tab => tab.id === tabId)) {
setActiveTabId(tabId);
}
}, [tabs]);
// Close all tabs
const closeAllTabs = useCallback(() => {
setTabs([]);
setActiveTabId(null);
}, []);
// Reorder tabs
const reorderTabs = useCallback((fromIndex: number, toIndex: number) => {
setTabs(prevTabs => {
const newTabs = [...prevTabs];
const [movedTab] = newTabs.splice(fromIndex, 1);
newTabs.splice(toIndex, 0, movedTab);
return newTabs;
});
}, []);
// Update tab title
const updateTabTitle = useCallback((tabId: string, newTitle: string) => {
setTabs(prevTabs => {
const updatedTabs = prevTabs.map(tab =>
tab.id === tabId ? { ...tab, title: newTitle } : tab
);
return updatedTabs;
});
}, []);
// Update flow tab title
const updateFlowTabTitle = useCallback((flowId: number, newTitle: string) => {
setTabs(prevTabs => {
const updatedTabs = prevTabs.map(tab => {
if (tab.type === 'flow' && tab.flow?.id === flowId) {
return {
...tab,
title: newTitle,
// Also update the flow object's name to keep it in sync
flow: tab.flow ? { ...tab.flow, name: newTitle } : tab.flow
};
}
return tab;
});
return updatedTabs;
});
}, []);
const value = {
tabs,
activeTabId,
openTab,
closeTab,
setActiveTab,
closeAllTabs,
isTabOpen,
getTabByIdentifier,
reorderTabs,
updateTabTitle,
updateFlowTabTitle,
};
return (
{children}
);
}
================================================
FILE: app/frontend/src/data/agents.ts
================================================
import { api } from '@/services/api';
export interface Agent {
key: string;
display_name: string;
description: string;
investing_style: string;
order: number;
}
// In-memory cache for agents to avoid repeated API calls
let agents: Agent[] | null = null;
/**
* Get the list of agents from the backend API
* Uses caching to avoid repeated API calls
*/
export const getAgents = async (): Promise => {
if (agents) {
return agents;
}
try {
agents = await api.getAgents();
return agents;
} catch (error) {
console.error('Failed to fetch agents:', error);
throw error; // Let the calling component handle the error
}
};
================================================
FILE: app/frontend/src/data/models.ts
================================================
import { api } from '@/services/api';
export interface LanguageModel {
display_name: string;
model_name: string;
provider: "Anthropic" | "DeepSeek" | "Google" | "Groq" | "OpenAI";
}
// Cache for models to avoid repeated API calls
let languageModels: LanguageModel[] | null = null;
/**
* Get the list of models from the backend API
* Uses caching to avoid repeated API calls
*/
export const getModels = async (): Promise => {
if (languageModels) {
return languageModels;
}
try {
languageModels = await api.getLanguageModels();
return languageModels;
} catch (error) {
console.error('Failed to fetch models:', error);
throw error; // Let the calling component handle the error
}
};
/**
* Get the default model (GPT-4.1) from the models list
*/
export const getDefaultModel = async (): Promise => {
try {
const models = await getModels();
return models.find(model => model.model_name === "gpt-4.1") || models[0] || null;
} catch (error) {
console.error('Failed to get default model:', error);
return null;
}
};
================================================
FILE: app/frontend/src/data/multi-node-mappings.ts
================================================
export interface MultiNodeDefinition {
name: string;
nodes: {
componentName: string;
offsetX: number;
offsetY: number;
}[];
edges: {
source: string;
target: string;
}[];
}
const multiNodeDefinition: Record = {
"Value Investors": {
name: "Value Investors",
nodes: [
{ componentName: "Stock Input", offsetX: 0, offsetY: 0 },
{ componentName: "Ben Graham", offsetX: 400, offsetY: -400 },
{ componentName: "Charlie Munger", offsetX: 400, offsetY: 0 },
{ componentName: "Warren Buffett", offsetX: 400, offsetY: 400 },
{ componentName: "Portfolio Manager", offsetX: 800, offsetY: 0 },
],
edges: [
{ source: "Stock Input", target: "Ben Graham" },
{ source: "Stock Input", target: "Charlie Munger" },
{ source: "Stock Input", target: "Warren Buffett" },
{ source: "Ben Graham", target: "Portfolio Manager" },
{ source: "Charlie Munger", target: "Portfolio Manager" },
{ source: "Warren Buffett", target: "Portfolio Manager" },
],
},
"Data Wizards": {
name: "Data Wizards",
nodes: [
{ componentName: "Stock Input", offsetX: 0, offsetY: 0 },
{ componentName: "Technical Analyst", offsetX: 400, offsetY: -550 },
{ componentName: "Fundamentals Analyst", offsetX: 400, offsetY: -200 },
{ componentName: "Sentiment Analyst", offsetX: 400, offsetY: 150 },
{ componentName: "Valuation Analyst", offsetX: 400, offsetY: 500 },
{ componentName: "Portfolio Manager", offsetX: 800, offsetY: 0 },
],
edges: [
{ source: "Stock Input", target: "Technical Analyst" },
{ source: "Stock Input", target: "Fundamentals Analyst" },
{ source: "Stock Input", target: "Sentiment Analyst" },
{ source: "Stock Input", target: "Valuation Analyst" },
{ source: "Technical Analyst", target: "Portfolio Manager" },
{ source: "Fundamentals Analyst", target: "Portfolio Manager" },
{ source: "Sentiment Analyst", target: "Portfolio Manager" },
{ source: "Valuation Analyst", target: "Portfolio Manager" },
],
},
"Market Mavericks": {
name: "Market Mavericks",
nodes: [
{ componentName: "Stock Input", offsetX: 0, offsetY: 0 },
{ componentName: "Michael Burry", offsetX: 400, offsetY: -400 },
{ componentName: "Bill Ackman", offsetX: 400, offsetY: 0 },
{ componentName: "Stanley Druckenmiller", offsetX: 400, offsetY: 400 },
{ componentName: "Portfolio Manager", offsetX: 800, offsetY: 0 },
],
edges: [
{ source: "Stock Input", target: "Michael Burry" },
{ source: "Stock Input", target: "Bill Ackman" },
{ source: "Stock Input", target: "Stanley Druckenmiller" },
{ source: "Michael Burry", target: "Portfolio Manager" },
{ source: "Bill Ackman", target: "Portfolio Manager" },
{ source: "Stanley Druckenmiller", target: "Portfolio Manager" },
],
},
};
export function getMultiNodeDefinition(name: string): MultiNodeDefinition | null {
return multiNodeDefinition[name] || null;
}
export function isMultiNodeComponent(componentName: string): boolean {
return componentName in multiNodeDefinition;
}
================================================
FILE: app/frontend/src/data/node-mappings.ts
================================================
import { AppNode } from "@/nodes/types";
import { Agent, getAgents } from "./agents";
// Map of sidebar item names to node creation functions
export interface NodeTypeDefinition {
createNode: (position: { x: number, y: number }) => AppNode;
}
// Cache for node type definitions to avoid repeated API calls
let nodeTypeDefinitionsCache: Record | null = null;
// Utility function to generate unique short ID suffix
const generateUniqueIdSuffix = (): string => {
// Generate a short random ID (6 characters)
const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
let result = '';
for (let i = 0; i < 6; i++) {
result += chars.charAt(Math.floor(Math.random() * chars.length));
}
return result;
};
/**
* Extract the base agent key from a unique node ID
* @param uniqueId The unique node ID with suffix (e.g., "warren_buffett_abc123")
* @returns The base agent key (e.g., "warren_buffett")
*/
export const extractBaseAgentKey = (uniqueId: string): string => {
// For agent nodes, remove the last underscore and 6-character suffix
// For other nodes like portfolio_manager, also remove the suffix
const parts = uniqueId.split('_');
if (parts.length >= 2) {
const lastPart = parts[parts.length - 1];
// If the last part is a 6-character alphanumeric string, it's likely our suffix
if (lastPart.length === 6 && /^[a-z0-9]+$/.test(lastPart)) {
return parts.slice(0, -1).join('_');
}
}
return uniqueId; // Return original if no suffix pattern found
};
// Define base node creation functions (non-agent nodes)
const baseNodeTypeDefinitions: Record = {
"Portfolio Input": {
createNode: (position: { x: number, y: number }): AppNode => ({
id: `portfolio-start-node_${generateUniqueIdSuffix()}`,
type: "portfolio-start-node",
position,
data: {
name: "Portfolio Input",
description: "Enter your portfolio including tickers, shares, and prices. Connect this node to Analysts to generate insights.",
status: "Idle",
},
}),
},
"Portfolio Manager": {
createNode: (position: { x: number, y: number }): AppNode => ({
id: `portfolio_manager_${generateUniqueIdSuffix()}`,
type: "portfolio-manager-node",
position,
data: {
name: "Portfolio Manager",
description: "Generates investment decisions based on input from Analysts.",
status: "Idle",
},
}),
},
"Stock Input": {
createNode: (position: { x: number, y: number }): AppNode => ({
id: `stock-analyzer-node_${generateUniqueIdSuffix()}`,
type: "stock-analyzer-node",
position,
data: {
name: "Stock Input",
description: "Enter individual stocks and connect this node to Analysts to generate insights.",
status: "Idle",
},
}),
},
};
/**
* Get all node type definitions, including agents fetched from the backend
*/
const getNodeTypeDefinitions = async (): Promise> => {
if (nodeTypeDefinitionsCache) {
return nodeTypeDefinitionsCache;
}
const agents = await getAgents();
// Create agent node definitions
const agentNodeDefinitions = agents.reduce((acc: Record, agent: Agent) => {
acc[agent.display_name] = {
createNode: (position: { x: number, y: number }): AppNode => ({
id: `${agent.key}_${generateUniqueIdSuffix()}`,
type: "agent-node",
position,
data: {
name: agent.display_name,
description: agent.investing_style || "",
status: "Idle",
},
}),
};
return acc;
}, {});
// Combine base and agent definitions
nodeTypeDefinitionsCache = {
...baseNodeTypeDefinitions,
...agentNodeDefinitions,
};
return nodeTypeDefinitionsCache;
};
export async function getNodeTypeDefinition(componentName: string): Promise {
const nodeTypeDefinitions = await getNodeTypeDefinitions();
return nodeTypeDefinitions[componentName] || null;
}
// Get the node ID that would be generated for a component
export async function getNodeIdForComponent(componentName: string): Promise {
const nodeTypeDefinition = await getNodeTypeDefinition(componentName);
if (!nodeTypeDefinition) {
return null;
}
// Extract ID by creating a temporary node (position doesn't matter for ID extraction)
const tempNode = nodeTypeDefinition.createNode({ x: 0, y: 0 });
return tempNode.id;
}
/**
* Clear the node type definitions cache - useful for testing or when you want to force a refresh
*/
export const clearNodeTypeDefinitionsCache = () => {
nodeTypeDefinitionsCache = null;
};
================================================
FILE: app/frontend/src/data/sidebar-components.ts
================================================
import {
BadgeDollarSign,
Bot,
Brain,
Calculator,
ChartLine,
ChartPie,
LucideIcon,
Network,
Play,
Zap
} from 'lucide-react';
import { Agent, getAgents } from './agents';
// Define component items by group
export interface ComponentItem {
name: string;
icon: LucideIcon;
}
export interface ComponentGroup {
name: string;
icon: LucideIcon;
iconColor: string;
items: ComponentItem[];
}
/**
* Get all component groups, including agents fetched from the backend
*/
export const getComponentGroups = async (): Promise => {
const agents = await getAgents();
return [
{
name: "Start Nodes",
icon: Play,
iconColor: "text-blue-500",
items: [
{ name: "Portfolio Input", icon: ChartPie },
{ name: "Stock Input", icon: ChartLine },
]
},
{
name: "Analysts",
icon: Bot,
iconColor: "text-red-500",
items: agents.map((agent: Agent) => ({
name: agent.display_name,
icon: Bot
}))
},
{
name: "Swarms",
icon: Network,
iconColor: "text-yellow-500",
items: [
{ name: "Data Wizards", icon: Calculator },
{ name: "Market Mavericks", icon: Zap },
{ name: "Value Investors", icon: BadgeDollarSign },
]
},
{
name: "End Nodes",
icon: Brain,
iconColor: "text-green-500",
items: [
{ name: "Portfolio Manager", icon: Brain },
// { name: "JSON Output", icon: FileJson },
// { name: "Investment Report", icon: FileText },
]
},
];
};
================================================
FILE: app/frontend/src/edges/index.ts
================================================
import type { EdgeTypes } from '@xyflow/react';
export const edgeTypes = {
// Add your custom edge types here!
} satisfies EdgeTypes;
================================================
FILE: app/frontend/src/hooks/use-component-groups.ts
================================================
import { ComponentGroup } from '@/data/sidebar-components';
import { useEffect, useMemo, useState } from 'react';
export function useComponentGroups(componentGroups: ComponentGroup[]) {
const [searchQuery, setSearchQuery] = useState('');
const [activeItem, setActiveItem] = useState('Chat Input');
const [openGroups, setOpenGroups] = useState([]); // Start with all groups collapsed
const [isSearching, setIsSearching] = useState(false);
// Filter groups and items based on search query
const filteredGroups = useMemo(() => {
if (!searchQuery) return componentGroups;
return componentGroups.map(group => {
// Filter items within the group
const filteredItems = group.items.filter(item =>
item.name.toLowerCase().includes(searchQuery.toLowerCase())
);
// Return group with filtered items
return {
...group,
items: filteredItems
};
}).filter(group => group.items.length > 0); // Only include groups with matching items
}, [componentGroups, searchQuery]);
// Handle search query changes
useEffect(() => {
if (searchQuery) {
setIsSearching(true);
// Open all groups that have matching items
setOpenGroups(filteredGroups.map(group => group.name));
} else if (isSearching) {
// Only reset groups when exiting search mode
setIsSearching(false);
}
}, [searchQuery, filteredGroups]);
// Handle accordion value changes
const handleAccordionChange = (value: string[]) => {
// Only update if we're not actively searching
if (!searchQuery) {
setOpenGroups(value);
} else {
// During search, we need to preserve expanded groups that have matches
const matchingGroups = filteredGroups.map(group => group.name);
// Keep all matching groups open while allowing manual toggling of others
const newValue = value.filter(group => matchingGroups.includes(group));
if (newValue.length < matchingGroups.length) {
// If user is closing a search result group, allow that
setOpenGroups(newValue);
} else {
// User is opening a new group during search
setOpenGroups(value);
}
}
};
return {
searchQuery,
setSearchQuery,
activeItem,
setActiveItem,
openGroups,
setOpenGroups,
isSearching,
filteredGroups,
handleAccordionChange
};
}
================================================
FILE: app/frontend/src/hooks/use-enhanced-flow-actions.ts
================================================
import { useFlowContext } from '@/contexts/flow-context';
import { useNodeContext } from '@/contexts/node-context';
import {
getNodeInternalState,
setNodeInternalState,
setCurrentFlowId as setNodeStateFlowId
} from '@/hooks/use-node-state';
import { flowService } from '@/services/flow-service';
import { Flow } from '@/types/flow';
import { useCallback } from 'react';
/**
* Enhanced flow actions that include complete state persistence
* (both use-node-state data and node context data)
*/
export function useEnhancedFlowActions() {
const { saveCurrentFlow, loadFlow, reactFlowInstance, currentFlowId } = useFlowContext();
const { exportNodeContextData } = useNodeContext();
// Enhanced save that includes node context data
const saveCurrentFlowWithCompleteState = useCallback(async (name?: string, description?: string): Promise => {
try {
// Get current nodes from React Flow
const currentNodes = reactFlowInstance.getNodes();
// Get node context data (runtime data: agent status, messages, output data)
const flowId = currentFlowId?.toString() || null;
const nodeContextData = exportNodeContextData(flowId);
// Enhance nodes with internal states
const nodesWithStates = currentNodes.map((node: any) => {
const internalState = getNodeInternalState(node.id);
return {
...node,
data: {
...node.data,
// Only add internal_state if there is actually state to save
...(internalState && Object.keys(internalState).length > 0 ? { internal_state: internalState } : {})
}
};
});
// Temporarily replace nodes in React Flow with enhanced nodes
reactFlowInstance.setNodes(nodesWithStates);
try {
// Use the basic save function
const savedFlow = await saveCurrentFlow(name, description);
if (savedFlow) {
// After basic save, update with node context data
const updatedFlow = await flowService.updateFlow(savedFlow.id, {
...savedFlow,
data: {
...savedFlow.data,
nodeContextData, // Add runtime data from node context
}
});
return updatedFlow;
}
return savedFlow;
} finally {
// Restore original nodes (without internal_state in React Flow)
reactFlowInstance.setNodes(currentNodes);
}
} catch (err) {
console.error('Failed to save flow with complete state:', err);
return null;
}
}, [reactFlowInstance, saveCurrentFlow, exportNodeContextData, currentFlowId]);
// Enhanced load that restores node context data
const loadFlowWithCompleteState = useCallback(async (flow: Flow) => {
try {
// First, set the flow ID for node state isolation
setNodeStateFlowId(flow.id.toString());
// DO NOT clear configuration state when loading flows - useNodeState handles flow isolation automatically
// DO NOT reset runtime data when loading flows - preserve all runtime state
// Runtime data should only be reset when explicitly starting a new run via the Play button
console.log(`[EnhancedFlowActions] Loading flow ${flow.id} (${flow.name}), preserving all state (configuration + runtime)`);
// Load the flow using the basic function (handles React Flow state)
await loadFlow(flow);
// Then restore internal states for each node (use-node-state data)
if (flow.nodes) {
flow.nodes.forEach((node: any) => {
if (node.data?.internal_state) {
setNodeInternalState(node.id, node.data.internal_state);
}
});
}
// NOTE: We intentionally do NOT restore nodeContextData here
// Runtime execution data (messages, analysis, agent status) should start fresh
// Only configuration data (tickers, model selections) is restored above
console.log('Flow loaded with complete state restoration:', flow.name);
} catch (error) {
console.error('Failed to load flow with complete state:', error);
throw error;
}
}, [loadFlow]);
return {
saveCurrentFlowWithCompleteState,
loadFlowWithCompleteState,
};
}
================================================
FILE: app/frontend/src/hooks/use-flow-connection.ts
================================================
import { useNodeContext } from '@/contexts/node-context';
import { api } from '@/services/api';
import { backtestApi } from '@/services/backtest-api';
import { BacktestRequest, HedgeFundRequest } from '@/services/types';
import { useCallback, useEffect, useRef, useState } from 'react';
// Connection state for a specific flow
export type FlowConnectionState = 'idle' | 'connecting' | 'connected' | 'error' | 'completed';
interface FlowConnectionInfo {
state: FlowConnectionState;
abortController: (() => void) | null;
startTime: number;
lastActivity: number;
error?: string;
}
// Global connection manager - tracks all active flow connections
class FlowConnectionManager {
private connections = new Map();
private listeners = new Set<() => void>();
// Get connection info for a flow
getConnection(flowId: string): FlowConnectionInfo {
return this.connections.get(flowId) || {
state: 'idle',
abortController: null,
startTime: 0,
lastActivity: 0,
};
}
// Set connection info for a flow
setConnection(flowId: string, info: Partial): void {
const existing = this.getConnection(flowId);
const updated = {
...existing,
...info,
lastActivity: Date.now(),
};
this.connections.set(flowId, updated);
this.notifyListeners();
}
// Remove connection for a flow
removeConnection(flowId: string): void {
const connection = this.connections.get(flowId);
if (connection?.abortController) {
connection.abortController();
}
this.connections.delete(flowId);
this.notifyListeners();
}
// Add listener for connection changes
addListener(listener: () => void): void {
this.listeners.add(listener);
}
// Remove listener
removeListener(listener: () => void): void {
this.listeners.delete(listener);
}
// Notify all listeners of changes
private notifyListeners(): void {
this.listeners.forEach(listener => listener());
}
}
// Global instance
export const flowConnectionManager = new FlowConnectionManager();
/**
* Hook for managing flow connections and execution
* @param flowId The ID of the flow to manage
* @returns Connection state and control functions
*/
export function useFlowConnection(flowId: string | null) {
const nodeContext = useNodeContext();
const [, forceUpdate] = useState({});
const listenerRef = useRef<() => void>();
// Force re-render when connections change
useEffect(() => {
const listener = () => forceUpdate({});
listenerRef.current = listener;
flowConnectionManager.addListener(listener);
return () => {
if (listenerRef.current) {
flowConnectionManager.removeListener(listenerRef.current);
}
};
}, []);
// Get current connection state
const connection = flowId ? flowConnectionManager.getConnection(flowId) : null;
const isConnecting = connection?.state === 'connecting';
const isConnected = connection?.state === 'connected';
const isError = connection?.state === 'error';
const isCompleted = connection?.state === 'completed';
// Check if any agents are currently processing
const isProcessing = flowId ? (() => {
const agentData = nodeContext.getAgentNodeDataForFlow(flowId);
return Object.values(agentData).some(agent => agent.status === 'IN_PROGRESS');
})() : false;
// Can run if we have a flow ID and we're not already running
const canRun = Boolean(flowId && !isConnecting && !isConnected && !isProcessing);
// Start a flow connection
const runFlow = useCallback((params: HedgeFundRequest) => {
if (!flowId || !canRun) return;
// Reset node states for this flow
nodeContext.resetAllNodes(flowId);
// Set connecting state
flowConnectionManager.setConnection(flowId, {
state: 'connecting',
startTime: Date.now(),
});
try {
// Start the API call
const abortController = api.runHedgeFund(params, nodeContext, flowId);
// Update connection with abort controller
flowConnectionManager.setConnection(flowId, {
state: 'connected',
abortController,
});
// TODO: We should enhance the API to notify us when the connection completes
// For now, we'll rely on the complete event from the SSE stream
} catch (error) {
console.error('Failed to start hedge fund run:', error);
flowConnectionManager.setConnection(flowId, {
state: 'error',
error: error instanceof Error ? error.message : 'Unknown error',
abortController: null,
});
}
}, [flowId, canRun, nodeContext]);
// Start a backtest connection
const runBacktest = useCallback((params: BacktestRequest) => {
if (!flowId || !canRun) return;
// Reset node states for this flow
nodeContext.resetAllNodes(flowId);
// Set connecting state
flowConnectionManager.setConnection(flowId, {
state: 'connecting',
startTime: Date.now(),
});
try {
// Start the backtest API call
const abortController = backtestApi.runBacktest(params, nodeContext, flowId);
// Update connection with abort controller
flowConnectionManager.setConnection(flowId, {
state: 'connected',
abortController,
});
// TODO: We should enhance the API to notify us when the connection completes
// For now, we'll rely on the complete event from the SSE stream
} catch (error) {
console.error('Failed to start backtest:', error);
flowConnectionManager.setConnection(flowId, {
state: 'error',
error: error instanceof Error ? error.message : 'Unknown error',
abortController: null,
});
}
}, [flowId, canRun, nodeContext]);
// Stop a flow connection
const stopFlow = useCallback(() => {
if (!flowId) return;
console.log(`[stopFlow] Stopping flow ${flowId}`);
const connection = flowConnectionManager.getConnection(flowId);
console.log(`[stopFlow] Current connection state:`, connection);
if (connection.abortController) {
console.log(`[stopFlow] Calling abort controller for flow ${flowId}`);
connection.abortController();
} else {
console.log(`[stopFlow] No abort controller found for flow ${flowId}`);
}
// Reset only node statuses when stopping, preserving all data (backtest results, messages, etc.)
nodeContext.resetNodeStatuses(flowId);
// Update connection state
flowConnectionManager.setConnection(flowId, {
state: 'idle',
abortController: null,
});
console.log(`[stopFlow] Flow ${flowId} stopped and reset to idle`);
}, [flowId, nodeContext]);
// Recover from stale states (called when loading a flow)
const recoverFlowState = useCallback(() => {
if (!flowId) return;
const connection = flowConnectionManager.getConnection(flowId);
// If we think we're connected but have no processing nodes, we're probably stale
if ((connection.state === 'connected' || connection.state === 'connecting') && !isProcessing) {
// Check if the connection is old (more than 5 minutes)
const isStale = Date.now() - connection.lastActivity > 5 * 60 * 1000;
if (isStale) {
console.log(`Recovering stale connection for flow ${flowId}`);
flowConnectionManager.setConnection(flowId, {
state: 'idle',
abortController: null,
});
}
}
}, [flowId, isProcessing]);
return {
// State
isConnecting,
isConnected,
isError,
isCompleted,
isProcessing,
canRun,
error: connection?.error,
// Actions
runFlow,
runBacktest,
stopFlow,
recoverFlowState,
};
}
// Utility hook to get connection state for any flow (for monitoring)
export function useFlowConnectionState(flowId: string | null) {
const [, forceUpdate] = useState({});
useEffect(() => {
if (!flowId) return;
const unsubscribe = flowConnectionManager.addListener(() => {
forceUpdate({});
});
return unsubscribe;
}, [flowId]);
return flowId ? flowConnectionManager.getConnection(flowId) : null;
}
================================================
FILE: app/frontend/src/hooks/use-flow-history.ts
================================================
import { Edge, Node, useReactFlow } from '@xyflow/react';
import { useCallback, useRef, useState } from 'react';
interface FlowSnapshot {
nodes: Node[];
edges: Edge[];
timestamp: number;
}
interface UseFlowHistoryOptions {
maxHistorySize?: number;
flowId?: number | null;
}
export function useFlowHistory({ maxHistorySize = 50, flowId }: UseFlowHistoryOptions = {}) {
const { getNodes, getEdges, setNodes, setEdges } = useReactFlow();
const [historyIndexes, setHistoryIndexes] = useState>({});
const histories = useRef>({});
const isUndoRedoAction = useRef(false);
// Get flow-specific history key
const getFlowKey = useCallback((id: number | null) => {
return id ? `flow-${id}` : 'new-flow';
}, []);
// Get current flow's history and index
const getCurrentFlowHistory = useCallback(() => {
const flowKey = getFlowKey(flowId ?? null);
if (!histories.current[flowKey]) {
histories.current[flowKey] = [];
}
return histories.current[flowKey];
}, [flowId, getFlowKey]);
const getCurrentHistoryIndex = useCallback(() => {
const flowKey = getFlowKey(flowId ?? null);
return historyIndexes[flowKey] ?? -1;
}, [flowId, getFlowKey, historyIndexes]);
const setCurrentHistoryIndex = useCallback((index: number) => {
const flowKey = getFlowKey(flowId ?? null);
setHistoryIndexes(prev => ({ ...prev, [flowKey]: index }));
}, [flowId, getFlowKey]);
// Create a snapshot of current state (excluding UI-only properties)
const createSnapshot = useCallback((): FlowSnapshot => {
// Strip UI-only properties from nodes (like selection state)
const cleanNodes = getNodes().map(node => {
const { selected, ...cleanNode } = node;
return cleanNode;
});
// Create clean copies
return {
nodes: JSON.parse(JSON.stringify(cleanNodes)),
edges: JSON.parse(JSON.stringify(getEdges())),
timestamp: Date.now(),
};
}, [getNodes, getEdges]);
// Check if two snapshots are meaningfully different (ignoring UI-only changes)
const snapshotsAreDifferent = useCallback((snapshot1: FlowSnapshot, snapshot2: FlowSnapshot): boolean => {
// Compare serialized versions to check for meaningful differences
const nodes1Str = JSON.stringify(snapshot1.nodes);
const nodes2Str = JSON.stringify(snapshot2.nodes);
const edges1Str = JSON.stringify(snapshot1.edges);
const edges2Str = JSON.stringify(snapshot2.edges);
return nodes1Str !== nodes2Str || edges1Str !== edges2Str;
}, []);
// Take a snapshot and add it to history
const takeSnapshot = useCallback(() => {
// Don't take snapshots during undo/redo operations
if (isUndoRedoAction.current) {
return;
}
const snapshot = createSnapshot();
const currentHistory = getCurrentFlowHistory();
const currentIndex = getCurrentHistoryIndex();
// Don't add duplicate snapshots (when only UI-only properties changed)
if (currentHistory.length > 0) {
const lastSnapshot = currentHistory[currentIndex];
if (lastSnapshot && !snapshotsAreDifferent(snapshot, lastSnapshot)) {
return; // Skip duplicate snapshot
}
}
const newHistory = [...currentHistory];
// If we're not at the end of history, remove future snapshots
if (currentIndex < newHistory.length - 1) {
newHistory.splice(currentIndex + 1);
}
// Add new snapshot
newHistory.push(snapshot);
// Update the flow's history
const flowKey = getFlowKey(flowId ?? null);
// Limit history size
if (newHistory.length > maxHistorySize) {
newHistory.shift();
setCurrentHistoryIndex(maxHistorySize - 1);
} else {
setCurrentHistoryIndex(currentIndex + 1);
}
histories.current[flowKey] = newHistory;
}, [createSnapshot, getCurrentFlowHistory, getCurrentHistoryIndex, maxHistorySize, snapshotsAreDifferent, getFlowKey, flowId, setCurrentHistoryIndex]);
// Restore a snapshot
const restoreSnapshot = useCallback((snapshot: FlowSnapshot) => {
isUndoRedoAction.current = true;
setNodes(snapshot.nodes);
setEdges(snapshot.edges);
// Reset flag after React has processed the state updates
setTimeout(() => {
isUndoRedoAction.current = false;
}, 0);
}, [setNodes, setEdges]);
// Undo last action
const undo = useCallback(() => {
const currentIndex = getCurrentHistoryIndex();
const currentHistory = getCurrentFlowHistory();
if (currentIndex > 0) {
const prevSnapshot = currentHistory[currentIndex - 1];
restoreSnapshot(prevSnapshot);
setCurrentHistoryIndex(currentIndex - 1);
}
}, [getCurrentHistoryIndex, getCurrentFlowHistory, restoreSnapshot, setCurrentHistoryIndex]);
// Redo next action
const redo = useCallback(() => {
const currentIndex = getCurrentHistoryIndex();
const currentHistory = getCurrentFlowHistory();
if (currentIndex < currentHistory.length - 1) {
const nextSnapshot = currentHistory[currentIndex + 1];
restoreSnapshot(nextSnapshot);
setCurrentHistoryIndex(currentIndex + 1);
}
}, [getCurrentHistoryIndex, getCurrentFlowHistory, restoreSnapshot, setCurrentHistoryIndex]);
// Check if undo is available
const canUndo = getCurrentHistoryIndex() > 0;
// Check if redo is available
const canRedo = getCurrentHistoryIndex() < getCurrentFlowHistory().length - 1;
// Clear history for current flow
const clearHistory = useCallback(() => {
const flowKey = getFlowKey(flowId ?? null);
histories.current[flowKey] = [];
setCurrentHistoryIndex(-1);
}, [getFlowKey, flowId, setCurrentHistoryIndex]);
return {
takeSnapshot,
undo,
redo,
canUndo,
canRedo,
clearHistory,
};
}
================================================
FILE: app/frontend/src/hooks/use-flow-management-tabs.ts
================================================
import { useFlowContext } from '@/contexts/flow-context';
import { useNodeContext } from '@/contexts/node-context';
import { useTabsContext } from '@/contexts/tabs-context';
import {
clearFlowNodeStates,
getNodeInternalState,
setNodeInternalState
} from '@/hooks/use-node-state';
import { useToastManager } from '@/hooks/use-toast-manager';
import { flowService } from '@/services/flow-service';
import { TabService } from '@/services/tab-service';
import { Flow } from '@/types/flow';
import { useCallback, useEffect, useState } from 'react';
export interface UseFlowManagementTabsReturn {
// State
flows: Flow[];
searchQuery: string;
isLoading: boolean;
openGroups: string[];
createDialogOpen: boolean;
// Computed values
filteredFlows: Flow[];
recentFlows: Flow[];
templateFlows: Flow[];
// Actions
setSearchQuery: (query: string) => void;
setOpenGroups: (groups: string[]) => void;
setCreateDialogOpen: (open: boolean) => void;
handleAccordionChange: (value: string[]) => void;
handleCreateNewFlow: () => void;
handleFlowCreated: (newFlow: Flow) => Promise;
handleSaveCurrentFlow: () => Promise;
handleOpenFlowInTab: (flow: Flow) => Promise;
handleDeleteFlow: (flow: Flow) => Promise;
handleRefresh: () => Promise;
// Internal functions (for testing/advanced use)
loadFlows: () => Promise;
createDefaultFlow: () => Promise;
}
export function useFlowManagementTabs(): UseFlowManagementTabsReturn {
// Get flow context, node context, tabs context, and toast manager
const { saveCurrentFlow, reactFlowInstance, currentFlowId } = useFlowContext();
const { exportNodeContextData } = useNodeContext();
const { openTab, isTabOpen, closeTab } = useTabsContext();
const { success, error } = useToastManager();
// State for flows
const [flows, setFlows] = useState([]);
const [searchQuery, setSearchQuery] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [openGroups, setOpenGroups] = useState(['recent-flows']);
const [createDialogOpen, setCreateDialogOpen] = useState(false);
// Enhanced save function that includes internal node states AND node context data
const saveCurrentFlowWithStates = useCallback(async (): Promise => {
try {
// Get current nodes from React Flow
const currentNodes = reactFlowInstance.getNodes();
// Get node context data (runtime data: agent status, messages, output data)
const flowId = currentFlowId?.toString() || null;
const nodeContextData = exportNodeContextData(flowId);
// Enhance nodes with internal states
const nodesWithStates = currentNodes.map((node: any) => {
const internalState = getNodeInternalState(node.id);
return {
...node,
data: {
...node.data,
// Only add internal_state if there is actually state to save
...(internalState && Object.keys(internalState).length > 0 ? { internal_state: internalState } : {})
}
};
});
// Temporarily replace nodes in React Flow with enhanced nodes
reactFlowInstance.setNodes(nodesWithStates);
try {
// Use the context's save function which handles currentFlowId properly
const savedFlow = await saveCurrentFlow();
if (savedFlow) {
// After basic save, update with node context data
const updatedFlow = await flowService.updateFlow(savedFlow.id, {
...savedFlow,
data: {
...savedFlow.data,
nodeContextData, // Add runtime data from node context
}
});
return updatedFlow;
}
return savedFlow;
} finally {
// Restore original nodes (without internal_state in React Flow)
reactFlowInstance.setNodes(currentNodes);
}
} catch (err) {
console.error('Failed to save flow with states:', err);
return null;
}
}, [reactFlowInstance, saveCurrentFlow, exportNodeContextData, currentFlowId]);
// Create default flow for new users
const createDefaultFlow = useCallback(async () => {
try {
// Get current React Flow state, fallback to empty arrays if nothing exists
const nodes = reactFlowInstance?.getNodes() || [];
const edges = reactFlowInstance?.getEdges() || [];
const viewport = reactFlowInstance?.getViewport() || { x: 0, y: 0, zoom: 1 };
const defaultFlow = await flowService.createDefaultFlow(nodes, edges, viewport);
setFlows([defaultFlow]);
// Open the default flow in a tab
const tabData = TabService.createFlowTab(defaultFlow);
openTab(tabData);
} catch (error) {
console.error('Failed to create default flow:', error);
}
}, [reactFlowInstance, openTab]);
// Load flows from API
const loadFlows = useCallback(async () => {
setIsLoading(true);
try {
const flowsData = await flowService.getFlows();
setFlows(flowsData);
// Don't automatically create or open tabs on startup
// Let users explicitly open tabs by clicking on flows
// Tabs will be restored from localStorage if they exist
} catch (error) {
console.error('Error loading flows:', error);
} finally {
setIsLoading(false);
}
}, []);
// Load flows on mount
useEffect(() => {
loadFlows();
}, [loadFlows]);
// Filter flows based on search query
const filteredFlows = flows.filter(flow =>
flow.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
flow.description?.toLowerCase().includes(searchQuery.toLowerCase()) ||
flow.tags?.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()))
);
// Sort flows by updated_at descending, then group them
const sortedFlows = [...filteredFlows].sort((a, b) => {
const dateA = new Date(a.updated_at || a.created_at);
const dateB = new Date(b.updated_at || b.created_at);
return dateB.getTime() - dateA.getTime();
});
// Group flows
const recentFlows = sortedFlows.filter(f => !f.is_template).slice(0, 10);
const templateFlows = sortedFlows.filter(f => f.is_template);
// Event handlers
const handleAccordionChange = useCallback((value: string[]) => {
setOpenGroups(value);
}, []);
const handleCreateNewFlow = useCallback(() => {
setCreateDialogOpen(true);
}, []);
const handleFlowCreated = useCallback(async (newFlow: Flow) => {
// Open the new flow in a tab
const tabData = TabService.createFlowTab(newFlow);
openTab(tabData);
// Remember it
localStorage.setItem('lastSelectedFlowId', newFlow.id.toString());
// Refresh the flows list to show the new flow
await loadFlows();
}, [openTab, loadFlows]);
const handleSaveCurrentFlow = useCallback(async () => {
try {
const savedFlow = await saveCurrentFlowWithStates();
if (savedFlow) {
// Remember the saved flow
localStorage.setItem('lastSelectedFlowId', savedFlow.id.toString());
// Refresh the flows list
await loadFlows();
success(`"${savedFlow.name}" saved!`, 'flow-save');
} else {
error('Failed to save flow', 'flow-save-error');
}
} catch (err) {
console.error('Failed to save flow:', err);
error('Failed to save flow', 'flow-save-error');
}
}, [saveCurrentFlowWithStates, loadFlows, success, error]);
const handleOpenFlowInTab = useCallback(async (flow: Flow) => {
try {
// Always fetch the full flow data including nodes, edges, and viewport
// This ensures we have the latest data from the backend
const fullFlow = await flowService.getFlow(flow.id);
// Create tab data with configuration restoration only
const createTabWithConfigRestore = (flowData: Flow) => {
const tabData = TabService.createFlowTab(flowData);
// Enhance the tab content to restore only configuration data when the tab is activated
return {
...tabData,
onActivate: () => {
// NOTE: We intentionally do NOT restore nodeContextData here
// Runtime execution data (messages, analysis, agent status) should start fresh
// Restore internal states for each node (use-node-state data - configuration only)
if (flowData.nodes) {
flowData.nodes.forEach((node: any) => {
if (node.data?.internal_state) {
setNodeInternalState(node.id, node.data.internal_state);
}
});
}
}
};
};
// Check if tab is already open
if (isTabOpen(flow.id.toString(), 'flow')) {
// Tab exists - update it with fresh data and focus it
const tabId = `flow-${flow.id}`;
const enhancedTabData = createTabWithConfigRestore(fullFlow);
// Update the existing tab with fresh data
openTab({
id: tabId,
type: enhancedTabData.type,
title: enhancedTabData.title,
content: enhancedTabData.content,
flow: enhancedTabData.flow,
metadata: enhancedTabData.metadata,
});
// Trigger the enhanced restoration
if (enhancedTabData.onActivate) {
enhancedTabData.onActivate();
}
} else {
// Create new tab with fresh data
const enhancedTabData = createTabWithConfigRestore(fullFlow);
openTab(enhancedTabData);
// Trigger the enhanced restoration for new tab
if (enhancedTabData.onActivate) {
enhancedTabData.onActivate();
}
}
// Remember the selected flow
localStorage.setItem('lastSelectedFlowId', fullFlow.id.toString());
} catch (err) {
console.error('Failed to open flow in tab:', err);
error('Failed to load flow data');
}
}, [isTabOpen, openTab, error]);
const handleRefresh = useCallback(async () => {
await loadFlows();
}, [loadFlows]);
const handleDeleteFlow = useCallback(async (flow: Flow) => {
try {
await flowService.deleteFlow(flow.id);
// Close the tab if it's open
const tabId = `flow-${flow.id}`;
closeTab(tabId);
// Clear node states for the deleted flow
clearFlowNodeStates(flow.id.toString());
// Remove from localStorage if it was the last selected
const lastSelectedFlowId = localStorage.getItem('lastSelectedFlowId');
if (lastSelectedFlowId === flow.id.toString()) {
localStorage.removeItem('lastSelectedFlowId');
}
// Refresh the flows list
await loadFlows();
} catch (error) {
console.error('Failed to delete flow:', error);
}
}, [loadFlows, closeTab]);
return {
// State
flows,
searchQuery,
isLoading,
openGroups,
createDialogOpen,
// Computed values
filteredFlows,
recentFlows,
templateFlows,
// Actions
setSearchQuery,
setOpenGroups,
setCreateDialogOpen,
handleAccordionChange,
handleCreateNewFlow,
handleFlowCreated,
handleSaveCurrentFlow,
handleOpenFlowInTab,
handleDeleteFlow,
handleRefresh,
// Internal functions
loadFlows,
createDefaultFlow,
};
}
================================================
FILE: app/frontend/src/hooks/use-flow-management.ts
================================================
import { useFlowContext } from '@/contexts/flow-context';
import { useNodeContext } from '@/contexts/node-context';
import {
clearFlowNodeStates,
getNodeInternalState,
setNodeInternalState,
setCurrentFlowId as setNodeStateFlowId
} from '@/hooks/use-node-state';
import { useToastManager } from '@/hooks/use-toast-manager';
import { flowService } from '@/services/flow-service';
import { Flow } from '@/types/flow';
import { useCallback, useEffect, useState } from 'react';
export interface UseFlowManagementReturn {
// State
flows: Flow[];
searchQuery: string;
isLoading: boolean;
openGroups: string[];
createDialogOpen: boolean;
// Computed values
filteredFlows: Flow[];
recentFlows: Flow[];
templateFlows: Flow[];
// Actions
setSearchQuery: (query: string) => void;
setOpenGroups: (groups: string[]) => void;
setCreateDialogOpen: (open: boolean) => void;
handleAccordionChange: (value: string[]) => void;
handleCreateNewFlow: () => void;
handleFlowCreated: (newFlow: Flow) => Promise;
handleSaveCurrentFlow: () => Promise;
handleLoadFlow: (flow: Flow) => Promise;
handleDeleteFlow: (flow: Flow) => Promise;
handleRefresh: () => Promise;
// Internal functions (for testing/advanced use)
loadFlows: () => Promise;
createDefaultFlow: () => Promise;
}
export function useFlowManagement(): UseFlowManagementReturn {
// Get flow context, node context, and toast manager
const { saveCurrentFlow, loadFlow, reactFlowInstance, currentFlowId } = useFlowContext();
const { exportNodeContextData } = useNodeContext();
const { success, error } = useToastManager();
// State for flows
const [flows, setFlows] = useState([]);
const [searchQuery, setSearchQuery] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [openGroups, setOpenGroups] = useState(['recent-flows']);
const [createDialogOpen, setCreateDialogOpen] = useState(false);
// Enhanced save function that includes internal node states AND node context data
const saveCurrentFlowWithStates = useCallback(async (): Promise => {
try {
// Get current nodes from React Flow
const currentNodes = reactFlowInstance.getNodes();
// Get node context data (runtime data: agent status, messages, output data)
const flowId = currentFlowId?.toString() || null;
const nodeContextData = exportNodeContextData(flowId);
// Enhance nodes with internal states
const nodesWithStates = currentNodes.map((node: any) => {
const internalState = getNodeInternalState(node.id);
return {
...node,
data: {
...node.data,
// Only add internal_state if there is actually state to save
...(internalState && Object.keys(internalState).length > 0 ? { internal_state: internalState } : {})
}
};
});
// Temporarily replace nodes in React Flow with enhanced nodes
reactFlowInstance.setNodes(nodesWithStates);
try {
// Use the context's save function which handles currentFlowId properly
const savedFlow = await saveCurrentFlow();
if (savedFlow) {
// After basic save, update with node context data
const updatedFlow = await flowService.updateFlow(savedFlow.id, {
...savedFlow,
data: {
...savedFlow.data,
nodeContextData, // Add runtime data from node context
}
});
return updatedFlow;
}
return savedFlow;
} finally {
// Restore original nodes (without internal_state in React Flow)
reactFlowInstance.setNodes(currentNodes);
}
} catch (err) {
console.error('Failed to save flow with states:', err);
return null;
}
}, [reactFlowInstance, saveCurrentFlow, exportNodeContextData, currentFlowId]);
// Enhanced load function that restores internal node states AND node context data
const loadFlowWithStates = useCallback(async (flow: Flow) => {
try {
// First, set the flow ID for node state isolation
setNodeStateFlowId(flow.id.toString());
// DO NOT clear configuration state when loading flows - useNodeState handles flow isolation automatically
// DO NOT reset runtime data when loading flows - preserve all runtime state
// Runtime data should only be reset when explicitly starting a new run via the Play button
console.log(`[FlowManagement] Loading flow ${flow.id} (${flow.name}), preserving all state (configuration + runtime)`);
// Load the flow using the context (this handles currentFlowId, currentFlowName, etc.)
await loadFlow(flow);
// Then restore internal states for each node (use-node-state data)
if (flow.nodes) {
flow.nodes.forEach((node: any) => {
if (node.data?.internal_state) {
setNodeInternalState(node.id, node.data.internal_state);
}
});
}
// NOTE: We intentionally do NOT restore nodeContextData here
// Runtime execution data (messages, analysis, agent status) should start fresh
// Only configuration data (tickers, model selections) is restored above
console.log('Flow loaded with complete state restoration:', flow.name);
} catch (error) {
console.error('Failed to load flow with states:', error);
throw error; // Re-throw to handle in calling function
}
}, [loadFlow]);
// Create default flow for new users
const createDefaultFlow = useCallback(async () => {
try {
console.log('Creating default flow for new user...');
// Get current React Flow state, fallback to empty arrays if nothing exists
const nodes = reactFlowInstance?.getNodes() || [];
const edges = reactFlowInstance?.getEdges() || [];
const viewport = reactFlowInstance?.getViewport() || { x: 0, y: 0, zoom: 1 };
const defaultFlow = await flowService.createDefaultFlow(nodes, edges, viewport);
console.log('Default flow created:', defaultFlow);
setFlows([defaultFlow]);
// Set the flow ID for node state isolation before loading
setNodeStateFlowId(defaultFlow.id.toString());
await loadFlowWithStates(defaultFlow);
console.log('Default flow loaded successfully');
} catch (error) {
console.error('Failed to create default flow:', error);
}
}, [reactFlowInstance, loadFlowWithStates]);
// Load flows from API
const loadFlows = useCallback(async () => {
setIsLoading(true);
try {
console.log('Loading flows from API...');
const flowsData = await flowService.getFlows();
console.log('Loaded flows:', flowsData);
setFlows(flowsData);
if (flowsData.length === 0) {
// Create default flow if user has no flows
console.log('No flows found, creating default flow...');
await createDefaultFlow();
} else {
// Try to restore the last selected flow from localStorage
const lastSelectedFlowId = localStorage.getItem('lastSelectedFlowId');
let flowToLoad = null;
if (lastSelectedFlowId) {
// Try to find the last selected flow
flowToLoad = flowsData.find(flow => flow.id === parseInt(lastSelectedFlowId));
if (flowToLoad) {
console.log('Restoring last selected flow:', flowToLoad.name);
}
}
// If no last selected flow or it doesn't exist anymore, use the most recent
if (!flowToLoad) {
flowToLoad = flowsData.reduce((latest, current) => {
const latestDate = new Date(latest.updated_at || latest.created_at);
const currentDate = new Date(current.updated_at || current.created_at);
return currentDate > latestDate ? current : latest;
});
console.log('Loading most recent flow:', flowToLoad.name);
}
// Fetch the full flow data before loading
const fullFlow = await flowService.getFlow(flowToLoad.id);
await loadFlowWithStates(fullFlow);
}
} catch (error) {
console.error('Error loading flows:', error);
} finally {
setIsLoading(false);
}
}, [createDefaultFlow, loadFlowWithStates]);
// Load flows on mount
useEffect(() => {
loadFlows();
}, [loadFlows]);
// Filter flows based on search query
const filteredFlows = flows.filter(flow =>
flow.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
flow.description?.toLowerCase().includes(searchQuery.toLowerCase()) ||
flow.tags?.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()))
);
// Sort flows by updated_at descending, then group them
const sortedFlows = [...filteredFlows].sort((a, b) => {
const dateA = new Date(a.updated_at || a.created_at);
const dateB = new Date(b.updated_at || b.created_at);
return dateB.getTime() - dateA.getTime();
});
// Group flows
const recentFlows = sortedFlows.filter(f => !f.is_template).slice(0, 10);
const templateFlows = sortedFlows.filter(f => f.is_template);
// Event handlers
const handleAccordionChange = useCallback((value: string[]) => {
setOpenGroups(value);
}, []);
const handleCreateNewFlow = useCallback(() => {
setCreateDialogOpen(true);
}, []);
const handleFlowCreated = useCallback(async (newFlow: Flow) => {
// Load the new flow and remember it
await loadFlowWithStates(newFlow);
localStorage.setItem('lastSelectedFlowId', newFlow.id.toString());
// Refresh the flows list to show the new flow
await loadFlows();
}, [loadFlowWithStates, loadFlows]);
const handleSaveCurrentFlow = useCallback(async () => {
try {
const savedFlow = await saveCurrentFlowWithStates();
if (savedFlow) {
// Remember the saved flow
localStorage.setItem('lastSelectedFlowId', savedFlow.id.toString());
// Refresh the flows list
await loadFlows();
success(`"${savedFlow.name}" saved!`, 'flow-save');
} else {
error('Failed to save flow', 'flow-save-error');
}
} catch (err) {
console.error('Failed to save flow:', err);
error('Failed to save flow', 'flow-save-error');
}
}, [saveCurrentFlowWithStates, loadFlows, success, error]);
const handleLoadFlow = useCallback(async (flow: Flow) => {
try {
// Fetch the full flow data including nodes, edges, and viewport
const fullFlow = await flowService.getFlow(flow.id);
await loadFlowWithStates(fullFlow);
// Remember the selected flow
localStorage.setItem('lastSelectedFlowId', flow.id.toString());
console.log('Flow loaded:', fullFlow.name);
} catch (error) {
console.error('Failed to load flow:', error);
}
}, [loadFlowWithStates]);
const handleRefresh = useCallback(async () => {
await loadFlows();
}, [loadFlows]);
const handleDeleteFlow = useCallback(async (flow: Flow) => {
try {
await flowService.deleteFlow(flow.id);
// Clear node states for the deleted flow
clearFlowNodeStates(flow.id.toString());
// Remove from localStorage if it was the last selected
const lastSelectedFlowId = localStorage.getItem('lastSelectedFlowId');
if (lastSelectedFlowId === flow.id.toString()) {
localStorage.removeItem('lastSelectedFlowId');
}
// Refresh the flows list
await loadFlows();
} catch (error) {
console.error('Failed to delete flow:', error);
}
}, [loadFlows]);
return {
// State
flows,
searchQuery,
isLoading,
openGroups,
createDialogOpen,
// Computed values
filteredFlows,
recentFlows,
templateFlows,
// Actions
setSearchQuery,
setOpenGroups,
setCreateDialogOpen,
handleAccordionChange,
handleCreateNewFlow,
handleFlowCreated,
handleSaveCurrentFlow,
handleLoadFlow,
handleDeleteFlow,
handleRefresh,
// Internal functions
loadFlows,
createDefaultFlow,
};
}
================================================
FILE: app/frontend/src/hooks/use-keyboard-shortcuts.ts
================================================
import { useEffect } from 'react';
interface KeyboardShortcut {
key: string;
ctrlKey?: boolean;
metaKey?: boolean;
shiftKey?: boolean;
altKey?: boolean;
callback: () => void;
preventDefault?: boolean;
}
interface UseKeyboardShortcutsProps {
shortcuts: KeyboardShortcut[];
}
export function useKeyboardShortcuts({ shortcuts }: UseKeyboardShortcutsProps) {
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
shortcuts.forEach(({ key, ctrlKey, metaKey, shiftKey, altKey, callback, preventDefault = true }) => {
const isCtrlMatch = ctrlKey ? event.ctrlKey : !event.ctrlKey;
const isMetaMatch = metaKey ? event.metaKey : !event.metaKey;
const isShiftMatch = shiftKey ? event.shiftKey : !event.shiftKey;
const isAltMatch = altKey ? event.altKey : !event.altKey;
const isKeyMatch = event.key.toLowerCase() === key.toLowerCase();
// For save shortcut, we want either Ctrl+S OR Cmd+S
const isSaveShortcut = key.toLowerCase() === 's' && (ctrlKey || metaKey);
const matchesSaveShortcut = isSaveShortcut && (event.ctrlKey || event.metaKey) && isKeyMatch;
// For shortcuts that should work with either Ctrl or Cmd
const isModifierShortcut = (ctrlKey || metaKey) && (event.ctrlKey || event.metaKey);
const matchesModifierShortcut = isModifierShortcut && isKeyMatch && isShiftMatch && isAltMatch;
if (matchesSaveShortcut || matchesModifierShortcut || (isKeyMatch && isCtrlMatch && isMetaMatch && isShiftMatch && isAltMatch)) {
if (preventDefault) {
event.preventDefault();
}
callback();
}
});
};
document.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
};
}, [shortcuts]);
}
// Convenience hook specifically for common shortcuts
export function useFlowKeyboardShortcuts(saveFlow: (showToast?: boolean) => void) {
const shortcuts: KeyboardShortcut[] = [
{
key: 's',
ctrlKey: true, // This will match either Ctrl+S or Cmd+S due to our logic above
metaKey: true,
callback: () => saveFlow(true),
preventDefault: true,
},
];
useKeyboardShortcuts({ shortcuts });
}
// Convenience hook for layout keyboard shortcuts
export function useLayoutKeyboardShortcuts(
toggleRightSidebar: () => void,
toggleLeftSidebar?: () => void,
fitView?: () => void,
undo?: () => void,
redo?: () => void,
toggleBottomPanel?: () => void,
openSettings?: () => void
) {
const shortcuts: KeyboardShortcut[] = [
{
key: 'i',
ctrlKey: true, // This will match either Ctrl+I or Cmd+I due to our logic above
metaKey: true,
callback: toggleRightSidebar,
preventDefault: true,
},
];
// Add left sidebar toggle if provided
if (toggleLeftSidebar) {
shortcuts.push({
key: 'b',
ctrlKey: true, // This will match either Ctrl+B or Cmd+B
metaKey: true,
callback: toggleLeftSidebar,
preventDefault: true,
});
}
// Add fit view shortcut if provided
if (fitView) {
shortcuts.push({
key: '0',
ctrlKey: true, // This will match either Ctrl+O or Cmd+O
metaKey: true,
callback: fitView,
preventDefault: true,
});
}
// Add undo shortcut if provided
if (undo) {
shortcuts.push({
key: 'z',
ctrlKey: true, // This will match either Ctrl+Z or Cmd+Z
metaKey: true,
callback: undo,
preventDefault: true,
});
}
// Add redo shortcut if provided
if (redo) {
shortcuts.push({
key: 'z',
ctrlKey: true, // This will match either Ctrl+Shift+Z or Cmd+Shift+Z
metaKey: true,
shiftKey: true,
callback: redo,
preventDefault: true,
});
}
// Add bottom panel toggle shortcut if provided
if (toggleBottomPanel) {
shortcuts.push({
key: 'j',
ctrlKey: true, // This will match either Ctrl+J or Cmd+J (like VSCode)
metaKey: true,
callback: toggleBottomPanel,
preventDefault: true,
});
}
// Add settings shortcut if provided
if (openSettings) {
shortcuts.push({
key: 'j',
ctrlKey: true, // This will match either Ctrl+Shift+J or Cmd+Shift+J
metaKey: true,
shiftKey: true,
callback: openSettings,
preventDefault: true,
});
// Add settings shortcut if provided
shortcuts.push({
key: ',',
ctrlKey: true, // This will match either Ctrl+, or Cmd+,
metaKey: true,
callback: openSettings,
preventDefault: true,
});
}
useKeyboardShortcuts({ shortcuts });
}
================================================
FILE: app/frontend/src/hooks/use-mobile.tsx
================================================
import * as React from "react"
const MOBILE_BREAKPOINT = 768
export function useIsMobile() {
const [isMobile, setIsMobile] = React.useState(undefined)
React.useEffect(() => {
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
const onChange = () => {
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
}
mql.addEventListener("change", onChange)
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
return () => mql.removeEventListener("change", onChange)
}, [])
return !!isMobile
}
================================================
FILE: app/frontend/src/hooks/use-node-state.ts
================================================
import { useCallback, useEffect, useState } from 'react';
// =============================================================================
// FLOW STATE MANAGER - Handles global state and flow isolation
// =============================================================================
class FlowStateManager {
private nodeStatesMap = new Map>();
private stateChangeListeners = new Set<() => void>();
private flowIdChangeListeners = new Set<() => void>();
private currentFlowId: string | null = null;
// Flow ID Management
setCurrentFlowId(flowId: string | null): void {
const oldFlowId = this.currentFlowId;
this.currentFlowId = flowId;
if (oldFlowId !== flowId) {
this.notifyFlowIdChange();
}
}
getCurrentFlowId(): string | null {
return this.currentFlowId;
}
// Key Generation
private createCompositeKey(nodeId: string): string {
return this.currentFlowId ? `${this.currentFlowId}:${nodeId}` : nodeId;
}
// State Access
getNodeState(nodeId: string, stateKey: string): any {
const compositeKey = this.createCompositeKey(nodeId);
const nodeState = this.nodeStatesMap.get(compositeKey);
return nodeState?.[stateKey];
}
setNodeState(nodeId: string, stateKey: string, value: any): void {
const compositeKey = this.createCompositeKey(nodeId);
if (!this.nodeStatesMap.has(compositeKey)) {
this.nodeStatesMap.set(compositeKey, {});
}
this.nodeStatesMap.get(compositeKey)![stateKey] = value;
this.notifyStateChange();
}
// Node Management
getNodeInternalState(nodeId: string): Record | undefined {
const compositeKey = this.createCompositeKey(nodeId);
return this.nodeStatesMap.get(compositeKey);
}
setNodeInternalState(nodeId: string, state: Record): void {
const compositeKey = this.createCompositeKey(nodeId);
this.nodeStatesMap.set(compositeKey, { ...state });
this.notifyStateChange();
}
clearNodeInternalState(nodeId: string): void {
const compositeKey = this.createCompositeKey(nodeId);
this.nodeStatesMap.delete(compositeKey);
this.notifyStateChange();
}
// Flow Management
getAllNodeStates(): Map> {
if (!this.currentFlowId) {
// Backward compatibility - return all states
return new Map(this.nodeStatesMap);
}
// Filter states for current flow and strip flow prefix
const currentFlowStates = new Map>();
const flowPrefix = `${this.currentFlowId}:`;
for (const [compositeKey, state] of this.nodeStatesMap.entries()) {
if (compositeKey.startsWith(flowPrefix)) {
const nodeId = compositeKey.substring(flowPrefix.length);
currentFlowStates.set(nodeId, state);
}
}
return currentFlowStates;
}
clearAllNodeStates(): void {
if (!this.currentFlowId) {
// Backward compatibility - clear all states
this.nodeStatesMap.clear();
} else {
// Clear only current flow's states
const flowPrefix = `${this.currentFlowId}:`;
const keysToDelete = Array.from(this.nodeStatesMap.keys())
.filter(key => key.startsWith(flowPrefix));
keysToDelete.forEach(key => this.nodeStatesMap.delete(key));
}
this.notifyStateChange();
}
clearFlowNodeStates(flowId: string): void {
const flowPrefix = `${flowId}:`;
const keysToDelete = Array.from(this.nodeStatesMap.keys())
.filter(key => key.startsWith(flowPrefix));
keysToDelete.forEach(key => this.nodeStatesMap.delete(key));
this.notifyStateChange();
}
// Listener Management
addStateChangeListener(listener: () => void): () => void {
this.stateChangeListeners.add(listener);
return () => this.stateChangeListeners.delete(listener);
}
addFlowIdChangeListener(listener: () => void): () => void {
this.flowIdChangeListeners.add(listener);
return () => this.flowIdChangeListeners.delete(listener);
}
private notifyStateChange(): void {
this.stateChangeListeners.forEach(listener => listener());
}
private notifyFlowIdChange(): void {
this.flowIdChangeListeners.forEach(listener => listener());
}
}
// Global instance
const flowStateManager = new FlowStateManager();
// =============================================================================
// PUBLIC API - Clean interface for external use
// =============================================================================
export interface UseNodeStateReturn {
0: T;
1: (value: T | ((prev: T) => T)) => void;
}
// Flow Management
export function setCurrentFlowId(flowId: string | null): void {
flowStateManager.setCurrentFlowId(flowId);
}
// Node State Management
export function getNodeInternalState(nodeId: string): Record | undefined {
return flowStateManager.getNodeInternalState(nodeId);
}
export function setNodeInternalState(nodeId: string, state: Record): void {
flowStateManager.setNodeInternalState(nodeId, state);
}
export function clearNodeInternalState(nodeId: string): void {
flowStateManager.clearNodeInternalState(nodeId);
}
// Flow State Management
export function getAllNodeStates(): Map> {
return flowStateManager.getAllNodeStates();
}
export function clearAllNodeStates(): void {
flowStateManager.clearAllNodeStates();
}
export function clearFlowNodeStates(flowId: string): void {
flowStateManager.clearFlowNodeStates(flowId);
}
export function addStateChangeListener(listener: () => void): () => void {
return flowStateManager.addStateChangeListener(listener);
}
// =============================================================================
// REACT HOOKS - Focused on React integration
// =============================================================================
/**
* Drop-in replacement for useState that automatically persists state across
* flow saves/loads and provides flow isolation.
*
* @param nodeId - The ID of the node (from NodeProps)
* @param stateKey - Unique key for this state value within the node
* @param defaultValue - Default value for the state
* @returns [value, setValue] tuple like useState
*/
export function useNodeState(
nodeId: string,
stateKey: string,
defaultValue: T
): [T, (value: T | ((prev: T) => T)) => void] {
// Initialize with stored value or default
const getStoredValue = useCallback((): T => {
const storedValue = flowStateManager.getNodeState(nodeId, stateKey);
return storedValue !== undefined ? storedValue : defaultValue;
}, [nodeId, stateKey, defaultValue]);
const [value, setValue] = useState(getStoredValue);
const [, forceUpdate] = useState({});
// Handle flow changes - reset to stored value for new flow
useEffect(() => {
const unsubscribe = flowStateManager.addFlowIdChangeListener(() => {
// Use setTimeout to defer the state update to avoid updating during render
setTimeout(() => {
const newValue = getStoredValue();
setValue(newValue);
forceUpdate({}); // Force re-render
}, 0);
});
return unsubscribe;
}, [getStoredValue]);
// Handle external state changes - update if this specific state changed
useEffect(() => {
const unsubscribe = flowStateManager.addStateChangeListener(() => {
const storedValue = flowStateManager.getNodeState(nodeId, stateKey);
if (storedValue !== undefined) {
// Use setTimeout to defer the state update to avoid updating during render
setTimeout(() => {
setValue(prevValue => {
if (prevValue !== storedValue) {
console.debug(`[useNodeState] Updated ${nodeId}.${stateKey}:`, storedValue);
return storedValue;
}
return prevValue;
});
}, 0);
}
});
return unsubscribe;
}, [nodeId, stateKey]);
// Persist value when it changes
const setValueAndPersist = useCallback((newValue: T | ((prev: T) => T)) => {
setValue(prevValue => {
const finalValue = typeof newValue === 'function'
? (newValue as (prev: T) => T)(prevValue)
: newValue;
flowStateManager.setNodeState(nodeId, stateKey, finalValue);
return finalValue;
});
}, [nodeId, stateKey]);
// Initialize stored state on mount or flow change
useEffect(() => {
const storedValue = flowStateManager.getNodeState(nodeId, stateKey);
if (storedValue === undefined) {
// Use setTimeout to defer the state update to avoid updating during render
setTimeout(() => {
flowStateManager.setNodeState(nodeId, stateKey, value);
}, 0);
}
}, [nodeId, stateKey, value]);
return [value, setValueAndPersist];
}
================================================
FILE: app/frontend/src/hooks/use-output-node-connection.ts
================================================
import { getConnectedEdges, useReactFlow } from '@xyflow/react';
import { useMemo } from 'react';
import { useFlowContext } from '@/contexts/flow-context';
import { useNodeContext } from '@/contexts/node-context';
/**
* Custom hook to determine output node connection state and processing status
* @param nodeId - The ID of the output node
* @returns Object containing connection state and processing status
*/
export function useOutputNodeConnection(nodeId: string) {
const { currentFlowId } = useFlowContext();
const { getAgentNodeDataForFlow, getOutputNodeDataForFlow } = useNodeContext();
const { getNodes, getEdges } = useReactFlow();
// Get data for the current flow
const flowId = currentFlowId?.toString() || null;
const agentNodeData = getAgentNodeDataForFlow(flowId);
const outputNodeData = getOutputNodeDataForFlow(flowId);
return useMemo(() => {
// Get all nodes and edges
const nodes = getNodes();
const edges = getEdges();
// Find edges connected to this output node
const connectedEdges = getConnectedEdges([{ id: nodeId }] as any, edges);
const connectedAgentIds = connectedEdges
.filter(edge => edge.target === nodeId)
.map(edge => edge.source)
.filter(sourceId => {
const sourceNode = nodes.find(n => n.id === sourceId);
return sourceNode?.type === 'agent-node';
});
// Check if any connected agents are running
const isAnyAgentRunning = connectedAgentIds.some(agentId =>
agentNodeData[agentId]?.status === 'IN_PROGRESS'
);
// Check if processing (any agent is running)
const isProcessing = isAnyAgentRunning;
// Check if output is available
const isOutputAvailable = outputNodeData !== null && outputNodeData !== undefined;
// Check if connected to any agents
const isConnected = connectedAgentIds.length > 0;
return {
isProcessing,
isAnyAgentRunning,
isOutputAvailable,
isConnected,
connectedAgentIds: new Set(connectedAgentIds),
};
}, [nodeId, agentNodeData, outputNodeData, getNodes, getEdges]);
}
================================================
FILE: app/frontend/src/hooks/use-resizable.ts
================================================
import { useEffect, useRef, useState } from 'react';
interface UseResizableOptions {
minWidth?: number;
maxWidth?: number;
defaultWidth?: number;
minHeight?: number;
maxHeight?: number;
defaultHeight?: number;
side?: 'left' | 'right' | 'bottom';
}
export function useResizable({
minWidth = 200,
maxWidth = 500,
defaultWidth = 250,
minHeight = 200,
maxHeight = 600,
defaultHeight = 300,
side = 'left'
}: UseResizableOptions = {}) {
const [width, setWidth] = useState(defaultWidth);
const [height, setHeight] = useState(defaultHeight);
const [isDragging, setIsDragging] = useState(false);
const elementRef = useRef(null);
// Add a ref for tracking dragging state - updates synchronously unlike state
const isDraggingRef = useRef(false);
// Handle manual resizing with mouse
const startResize = (e: React.MouseEvent) => {
e.preventDefault();
// Set both the ref (for immediate use in mousemove) and state (for rendering)
isDraggingRef.current = true;
setIsDragging(true);
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', stopResize);
};
const handleMouseMove = (e: MouseEvent) => {
// Use the ref value instead of state for checking
if (!isDraggingRef.current) return;
// Get element's position
const elementRect = elementRef.current?.getBoundingClientRect();
if (!elementRect) return;
if (side === 'bottom') {
// For bottom panel: dragging up decreases height
const newHeight = elementRect.bottom - e.clientY;
const clampedHeight = Math.max(minHeight, Math.min(maxHeight, newHeight));
setHeight(clampedHeight);
} else {
// For horizontal resizing (left/right sidebars)
let newWidth;
if (side === 'left') {
// For left sidebar: dragging right increases width
newWidth = e.clientX - elementRect.left;
} else {
// For right sidebar: dragging left decreases width
newWidth = elementRect.right - e.clientX;
}
// Calculate new width (limit between minWidth and maxWidth)
newWidth = Math.max(minWidth, Math.min(maxWidth, newWidth));
setWidth(newWidth);
}
};
const stopResize = () => {
// Update both ref and state
isDraggingRef.current = false;
setIsDragging(false);
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', stopResize);
};
// Clean up event listeners when component unmounts
useEffect(() => {
return () => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', stopResize);
};
}, []);
return {
width,
height,
isDragging,
elementRef,
startResize
};
}
================================================
FILE: app/frontend/src/hooks/use-toast-manager.ts
================================================
import { useCallback, useState } from 'react';
import { toast } from 'sonner';
type ToastType = 'success' | 'error' | 'info' | 'warning';
type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
interface ToastOptions {
duration?: number;
position?: ToastPosition;
preventDuplicates?: boolean;
}
interface ToastState {
[key: string]: boolean;
}
/**
* A generalized toast manager hook that handles duplicate prevention and provides
* convenience methods for different toast types.
*
* @example
* ```typescript
* const { success, error, info, warning } = useToastManager();
*
* // Basic usage
* success('Data saved!');
* error('Something went wrong');
*
* // With custom ID to prevent duplicates
* success('Flow saved!', 'flow-save');
*
* // With custom options
* info('Processing...', 'process', {
* duration: 5000,
* position: 'top-center'
* });
*
* // Disable duplicate prevention
* warning('Warning!', undefined, { preventDuplicates: false });
* ```
*/
export function useToastManager() {
const [visibleToasts, setVisibleToasts] = useState({});
const showToast = useCallback((
type: ToastType,
message: string,
toastId?: string,
options: ToastOptions = {}
) => {
const {
duration = 2000,
position = 'top-center',
preventDuplicates = true
} = options;
// Use message as ID if no toastId provided
const id = toastId || message;
// Check if we should prevent duplicates
if (preventDuplicates && visibleToasts[id]) {
return;
}
// Mark toast as visible
if (preventDuplicates) {
setVisibleToasts(prev => ({ ...prev, [id]: true }));
}
const onDismiss = () => {
if (preventDuplicates) {
setVisibleToasts(prev => ({ ...prev, [id]: false }));
}
};
const onAutoClose = () => {
if (preventDuplicates) {
setVisibleToasts(prev => ({ ...prev, [id]: false }));
}
};
// Show the appropriate toast type
switch (type) {
case 'success':
toast.success(message, {
duration,
position,
onDismiss,
onAutoClose,
});
break;
case 'error':
toast.error(message, {
duration,
position,
onDismiss,
onAutoClose,
});
break;
case 'info':
toast.info(message, {
duration,
position,
onDismiss,
onAutoClose,
});
break;
case 'warning':
toast.warning(message, {
duration,
position,
onDismiss,
onAutoClose,
});
break;
}
}, [visibleToasts]);
// Convenience methods for specific toast types
const success = useCallback((message: string, toastId?: string, options?: ToastOptions) => {
showToast('success', message, toastId, options);
}, [showToast]);
const error = useCallback((message: string, toastId?: string, options?: ToastOptions) => {
showToast('error', message, toastId, options);
}, [showToast]);
const info = useCallback((message: string, toastId?: string, options?: ToastOptions) => {
showToast('info', message, toastId, options);
}, [showToast]);
const warning = useCallback((message: string, toastId?: string, options?: ToastOptions) => {
showToast('warning', message, toastId, options);
}, [showToast]);
return {
showToast,
success,
error,
info,
warning,
visibleToasts,
};
}
================================================
FILE: app/frontend/src/index.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 94%;
--foreground: 0 0% 3.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 85%;
--node-border: 0 0% 88%;
--node-border-hover: 0 0% 75%;
--node-border-selected: 0 0% 10%;
--status-border: 0 0% 85%;
--input: 0 0% 89.8%;
--ring: 0 0% 3.9%;
--radius: 0.5rem;
--sidebar-background: 0 0% 98%;
--panel-bg: 0 0% 100%;
--node-bg: 0 0% 100%;
/* Hover colors for light theme */
--hover-background: rgb(156 163 175 / 0.3); /* gray-400/30 */
--hover-foreground: 0 0% 15%;
/* Active/selected colors for light theme */
--active-background: rgb(229 231 235 / 0.8); /* gray-200/80 */
--active-foreground: 0 0% 10%;
/* Ramp Grey Colors */
--ramp-grey-100: #f5f5f5;
--ramp-grey-200: #e6e6e6;
--ramp-grey-300: #d9d9d9;
--ramp-grey-400: #b3b3b3;
--ramp-grey-500: #757575;
--ramp-grey-600: #444444;
--ramp-grey-700: #383838;
--ramp-grey-800: #2c2c2c;
--ramp-grey-900: #1e1e1e;
--ramp-grey-1000: #111111;
/* Tab Colors - Light Theme */
--tab-active-text: #1a1a1a;
--tab-inactive-text: #666666;
--tab-hover-text: #1a1a1a;
--tab-background: #ffffff;
--tab-hover-background: #f0f0f0;
--tab-border: #e0e0e0;
--tab-accent: #007acc;
--tab-icon-active: #007acc;
--tab-icon-inactive: #666666;
--tab-close-hover: #e0e0e0;
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 25%;
--node-border: 0 0% 25%;
--node-border-hover: 0 0% 40%;
--node-border-selected: 0 0% 90%;
--status-border: 0 0% 25%;
--input: 0 0% 14.9%;
--ring: 0 0% 83.1%;
--panel-bg: 240 3% 11%;
--node-bg: 240 3% 11%;
--sidebar-background: 240 5.9% 16%;
/* Hover colors for dark theme */
--hover-background: rgb(55 65 81 / 0.5); /* gray-700/50 */
--hover-foreground: 0 0% 95%;
/* Active/selected colors for dark theme */
--active-background: rgb(55 65 81 / 0.8); /* gray-700/80 */
--active-foreground: 0 0% 98%;
/* Tab Colors - Dark Theme */
--tab-active-text: #cccccc;
--tab-inactive-text: #969696;
--tab-hover-text: #cccccc;
--tab-background: #1e1e1e;
--tab-hover-background: #1e1e1e;
--tab-border: #333333;
--tab-accent: #007acc;
--tab-icon-active: #007acc;
--tab-icon-inactive: #858585;
--tab-close-hover: #464647;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
}
@layer utilities {
.bg-node {
background-color: hsl(var(--node-bg));
}
.border-status {
border-color: hsl(var(--status-border));
}
.border-node {
border-color: hsl(var(--node-border));
}
.border-node-hover {
border-color: hsl(var(--node-border-hover));
}
.border-node-selected {
border-color: hsl(var(--node-border-selected));
}
.hover-bg {
@apply hover:bg-[var(--hover-background)];
}
.hover-text {
@apply hover:text-[hsl(var(--hover-foreground))];
}
.hover-item {
@apply hover:bg-[var(--hover-background)] hover:text-[hsl(var(--hover-foreground))];
}
.active-bg {
@apply bg-[var(--active-background)];
}
.active-text {
@apply text-[hsl(var(--active-foreground))];
}
.active-item {
@apply bg-[var(--active-background)] text-[hsl(var(--active-foreground))];
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
html,
body,
#root {
height: 100%;
margin: 0;
}
@font-face {
font-family: "geist";
font-style: normal;
font-weight: 100 900;
src: url(/fonts/geist.woff2) format("woff2");
}
@font-face {
font-family: "geist-mono";
font-style: normal;
font-weight: 100 900;
src: url(/fonts/geist-mono.woff2) format("woff2");
}
}
.skeleton {
* {
pointer-events: none !important;
}
*[class^="text-"] {
color: transparent;
@apply rounded-md bg-foreground/20 select-none animate-pulse;
}
.skeleton-bg {
@apply bg-foreground/10;
}
.skeleton-div {
@apply bg-foreground/20 animate-pulse;
}
}
.ProseMirror {
outline: none;
}
.cm-editor,
.cm-gutters {
@apply bg-background dark:bg-zinc-800 outline-none selection:bg-zinc-900 !important;
}
.ͼo.cm-focused>.cm-scroller>.cm-selectionLayer .cm-selectionBackground,
.ͼo.cm-selectionBackground,
.ͼo.cm-content::selection {
@apply bg-zinc-200 dark:bg-zinc-900 !important;
}
.cm-activeLine,
.cm-activeLineGutter {
@apply bg-transparent !important;
}
.cm-activeLine {
@apply rounded-r-sm !important;
}
.cm-lineNumbers {
@apply min-w-7;
}
.cm-foldGutter {
@apply min-w-3;
}
.cm-lineNumbers .cm-activeLineGutter {
@apply rounded-l-sm !important;
}
.suggestion-highlight {
@apply bg-blue-200 hover:bg-blue-300 dark:hover:bg-blue-400/50 dark:text-blue-50 dark:bg-blue-500/40;
}
/* Animated border for in-progress agent nodes */
.node-in-progress {
position: relative;
border: none !important;
}
.animated-border-container {
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
border-radius: 0.5rem;
overflow: hidden;
z-index: 0;
pointer-events: none;
}
.animated-border-container::after {
content: "";
position: absolute;
inset: 0;
border-radius: 0.5rem;
background: linear-gradient(90deg,
#2383F4, #5e61e7, #8F00FF, #7831d4, #2383F4
);
background-size: 200% 100%;
animation: gradientFlow 3s linear infinite;
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
padding: 3px;
}
@keyframes gradientFlow {
0% {
background-position: 0% 0%;
}
100% {
background-position: 200% 0%;
}
}
/* Gradient animation for in-progress elements */
.gradient-animation {
background: linear-gradient(90deg,
#2383F4, #5e61e7, #8F00FF, #7831d4, #2383F4
);
background-size: 200% 100%;
animation: gradientFlow 3s linear infinite;
}
/* Gradient text animation */
.gradient-text {
background: linear-gradient(90deg,
#2383F4, #5e61e7, #8F00FF, #7831d4, #2383F4
);
background-size: 200% 100%;
animation: gradientFlow 3s linear infinite;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
/* Remove white lines between ReactFlow Controls buttons */
.react-flow__controls .react-flow__controls-button {
border-right: none !important;
}
.react-flow__controls .react-flow__controls-button + .react-flow__controls-button {
border-left: none !important;
}
================================================
FILE: app/frontend/src/lib/utils.ts
================================================
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
// Platform detection utility
export function isMac(): boolean {
return typeof navigator !== 'undefined' && navigator.platform.toUpperCase().indexOf('MAC') >= 0;
}
// Keyboard shortcut formatting utility
export function formatKeyboardShortcut(key: string): string {
const modifierKey = isMac() ? '⌘' : 'Ctrl';
return `${modifierKey}${key.toUpperCase()}`;
}
// Provider color utility for consistent styling across components
export function getProviderColor(provider: string): string {
return 'bg-gray-600/20 text-primary border-gray-600/40';
// switch (provider.toLowerCase()) {
// case 'anthropic':
// return 'bg-orange-600/20 text-orange-300 border-orange-600/40';
// case 'google':
// return 'bg-green-600/20 text-green-300 border-green-600/40';
// case 'groq':
// return 'bg-red-600/20 text-red-300 border-red-600/40';
// case 'deepseek':
// return 'bg-blue-600/20 text-blue-300 border-blue-600/40';
// case 'openai':
// return 'bg-gray-900/60 text-gray-200 border-gray-700/60';
// case 'ollama':
// return 'bg-white/90 text-gray-800 border-gray-300';
// default:
// return 'bg-gray-600/20 text-gray-300 border-gray-600/40';
// }
}
================================================
FILE: app/frontend/src/main.tsx
================================================
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { NodeProvider } from './contexts/node-context';
import { ThemeProvider } from './providers/theme-provider';
import './index.css';
ReactDOM.createRoot(document.getElementById('root')!).render(
);
================================================
FILE: app/frontend/src/nodes/components/agent-node.tsx
================================================
import { type NodeProps } from '@xyflow/react';
import { Bot } from 'lucide-react';
import { useEffect, useState } from 'react';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
import { CardContent } from '@/components/ui/card';
import { ModelSelector } from '@/components/ui/llm-selector';
import { useFlowContext } from '@/contexts/flow-context';
import { useNodeContext } from '@/contexts/node-context';
import { getModels, LanguageModel } from '@/data/models';
import { useNodeState } from '@/hooks/use-node-state';
import { cn } from '@/lib/utils';
import { type AgentNode } from '../types';
import { getStatusColor } from '../utils';
import { AgentOutputDialog } from './agent-output-dialog';
import { NodeShell } from './node-shell';
export function AgentNode({
data,
selected,
id,
isConnectable,
}: NodeProps) {
const { currentFlowId } = useFlowContext();
const { getAgentNodeDataForFlow, setAgentModel, getAgentModel } = useNodeContext();
// Get agent node data for the current flow
const agentNodeData = getAgentNodeDataForFlow(currentFlowId?.toString() || null);
const nodeData = agentNodeData[id] || {
status: 'IDLE',
ticker: null,
message: '',
messages: [],
lastUpdated: 0
};
const status = nodeData.status;
const isInProgress = status === 'IN_PROGRESS';
const [isDialogOpen, setIsDialogOpen] = useState(false);
// Use persistent state hooks
const [availableModels, setAvailableModels] = useNodeState(id, 'availableModels', []);
const [selectedModel, setSelectedModel] = useNodeState(id, 'selectedModel', null);
// Load models on mount
useEffect(() => {
const loadModels = async () => {
try {
const models = await getModels();
setAvailableModels(models);
} catch (error) {
console.error('Failed to load models:', error);
// Keep empty array as fallback
}
};
loadModels();
}, [setAvailableModels]);
// Update the node context when the model changes
useEffect(() => {
const flowId = currentFlowId?.toString() || null;
const currentContextModel = getAgentModel(flowId, id);
if (selectedModel !== currentContextModel) {
setAgentModel(flowId, id, selectedModel);
}
}, [selectedModel, id, currentFlowId, setAgentModel, getAgentModel]);
const handleModelChange = (model: LanguageModel | null) => {
setSelectedModel(model);
};
const handleUseGlobalModel = () => {
setSelectedModel(null);
};
return (
Status
{status.toLowerCase().replace(/_/g, ' ')}
{nodeData.message && (
{nodeData.message !== "Done" && nodeData.message}
{nodeData.ticker && ({nodeData.ticker}) }
)}
Advanced
Model
{selectedModel && (
Reset to Auto
)}
);
}
================================================
FILE: app/frontend/src/nodes/components/agent-output-dialog.tsx
================================================
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
import { useNodeContext } from '@/contexts/node-context';
import { formatTimeFromTimestamp } from '@/utils/date-utils';
import { formatContent } from '@/utils/text-utils';
import { AlignJustify, Copy, Loader2 } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
interface AgentOutputDialogProps {
isOpen: boolean;
onOpenChange: (open: boolean) => void;
name: string;
nodeId: string;
flowId: string | null;
}
export function AgentOutputDialog({
isOpen,
onOpenChange,
name,
nodeId,
flowId
}: AgentOutputDialogProps) {
const { getAgentNodeDataForFlow } = useNodeContext();
// Use the passed flowId instead of getting it from flow context
const agentNodeData = getAgentNodeDataForFlow(flowId);
const nodeData = agentNodeData[nodeId] || {
status: 'IDLE',
ticker: null,
message: '',
messages: [],
lastUpdated: 0
};
const messages = nodeData.messages || [];
const nodeStatus = nodeData.status;
const [copySuccess, setCopySuccess] = useState(false);
const [selectedTicker, setSelectedTicker] = useState(null);
const initialFocusRef = useRef(null);
// Collect all analysis from all messages into a single analysis dictionary
const allAnalysis = messages
.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()) // Sort by timestamp
.reduce>((acc, msg) => {
// Add analysis from this message to our accumulated analysis
if (msg.analysis && Object.keys(msg.analysis).length > 0) {
// Filter out null values before adding to our accumulated decisions
const validDecisions = Object.entries(msg.analysis)
.filter(([_, value]) => value !== null && value !== undefined)
.reduce((obj, [key, value]) => {
obj[key] = value;
return obj;
}, {} as Record);
if (Object.keys(validDecisions).length > 0) {
// Combine with accumulated decisions, newer messages overwrite older ones for the same ticker
return { ...acc, ...validDecisions };
}
}
return acc;
}, {});
// Get all unique tickers that have decisions
const tickersWithDecisions = Object.keys(allAnalysis);
// Reset selected ticker when node changes
useEffect(() => {
setSelectedTicker(null);
}, [nodeId]);
// If no ticker is selected but we have decisions, select the first one
useEffect(() => {
if (tickersWithDecisions.length > 0 && (!selectedTicker || !tickersWithDecisions.includes(selectedTicker))) {
setSelectedTicker(tickersWithDecisions[0]);
}
}, [tickersWithDecisions, selectedTicker]);
// Get the selected decision text
const selectedDecision = selectedTicker && allAnalysis[selectedTicker] ? allAnalysis[selectedTicker] : null;
const copyToClipboard = () => {
if (selectedDecision) {
navigator.clipboard.writeText(selectedDecision)
.then(() => {
setCopySuccess(true);
setTimeout(() => setCopySuccess(false), 2000);
})
.catch(err => {
console.error('Failed to copy text: ', err);
});
}
};
return (
e.preventDefault()}
>
{name}
{/* Activity Log Section */}
Log
{messages.length > 0 ? (
{messages
.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()) // Sort newest first for log
.map((msg, idx) => (
{msg.ticker && [{msg.ticker}] }
{msg.message}
{formatTimeFromTimestamp(msg.timestamp)}
))}
) : (
No activity available
)}
{/* Analysis Section */}
Analysis
{/* Ticker selector */}
{tickersWithDecisions.length > 0 && (
Ticker:
setSelectedTicker(e.target.value)}
autoFocus={false}
>
{tickersWithDecisions.map((ticker) => (
{ticker}
))}
)}
{tickersWithDecisions.length > 0 ? (
{selectedTicker && (
Summary for {selectedTicker}
{selectedDecision && (
{copySuccess ? 'Copied!' : 'Copy'}
)}
)}
{selectedDecision ? (
(() => {
const { isJson, formattedContent } = formatContent(selectedDecision);
if (isJson) {
// Use react-syntax-highlighter for better JSON rendering
return (
{formattedContent as string}
);
} else {
// Display as regular text paragraphs
return (
(formattedContent as string[]).map((paragraph, idx) => (
{paragraph}
))
);
}
})()
) : nodeStatus === 'IN_PROGRESS' ? (
) : (
No analysis available for {selectedTicker}
)}
) : nodeStatus === 'IN_PROGRESS' ? (
) : nodeStatus === 'COMPLETE' ? (
Analysis completed with no results
) : nodeStatus === 'ERROR' ? (
Analysis failed
) : (
No analysis available
)}
);
}
================================================
FILE: app/frontend/src/nodes/components/investment-report-dialog.tsx
================================================
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from '@/components/ui/accordion';
import { Badge } from '@/components/ui/badge';
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card';
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table';
import { extractBaseAgentKey } from '@/data/node-mappings';
import { createAgentDisplayNames } from '@/utils/text-utils';
import { ArrowDown, ArrowUp, Minus } from 'lucide-react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
interface InvestmentReportDialogProps {
isOpen: boolean;
onOpenChange: (open: boolean) => void;
outputNodeData: any;
connectedAgentIds: Set;
}
type ActionType = 'long' | 'short' | 'hold';
export function InvestmentReportDialog({
isOpen,
onOpenChange,
outputNodeData,
connectedAgentIds,
}: InvestmentReportDialogProps) {
// Check if this is a backtest result and return early if it is
// Backtest results should be displayed in the backtest output tab, not in the investment report dialog
if (outputNodeData?.decisions?.backtest?.type === 'backtest_complete') {
return null;
}
// Return early if no output data
if (!outputNodeData || !outputNodeData.decisions) {
return null;
}
const getActionIcon = (action: ActionType) => {
switch (action) {
case 'long':
return
{signal}
);
};
const getConfidenceBadge = (confidence: number) => {
let variant = 'outline';
if (confidence >= 50) variant = 'success';
else if (confidence >= 0) variant = 'warning';
else variant = 'outline';
const rounded = Number(confidence.toFixed(1));
return (
{rounded}%
);
};
// Extract unique tickers from the data
const tickers = Object.keys(outputNodeData.decisions || {});
// Use the unique node IDs directly since they're now stored as keys in analyst_signals
const connectedUniqueAgentIds = Array.from(connectedAgentIds);
const agents = Object.keys(outputNodeData.analyst_signals || {})
.filter(agent =>
extractBaseAgentKey(agent) !== 'risk_management_agent' && connectedUniqueAgentIds.includes(agent)
);
const agentDisplayNames = createAgentDisplayNames(agents);
return (
Investment Report
{/* Summary Section */}
Summary
Recommended trading actions based on analyst signals
Ticker
Price
Action
Quantity
Confidence
{tickers.map(ticker => {
const decision = outputNodeData.decisions[ticker];
const currentPrice = outputNodeData.current_prices?.[ticker] || 'N/A';
return (
{ticker}
${typeof currentPrice === 'number' ? currentPrice.toFixed(2) : currentPrice}
{getActionIcon(decision.action as ActionType)}
{decision.action}
{decision.quantity}
{getConfidenceBadge(decision.confidence)}
);
})}
{/* Analyst Signals Section */}
Analyst Signals
{tickers.map(ticker => (
{ticker}
{getActionIcon(outputNodeData.decisions[ticker].action as ActionType)}
{outputNodeData.decisions[ticker].action} {outputNodeData.decisions[ticker].quantity} shares
{/* Agent Signals */}
{agents.map(agent => {
const signal = outputNodeData.analyst_signals[agent]?.[ticker];
if (!signal) return null;
return (