flock-core 0.5.0b71__py3-none-any.whl → 0.5.1__py3-none-any.whl

flock/frontend/src/components/details/RunStatusTab.tsx

@@ -1,5 +1,4 @@
-import React, { useMemo } from 'react';
-import { useGraphStore } from '../../store/graphStore';
+import React, { useEffect, useState } from 'react';
 
 interface RunStatusTabProps {
   nodeId: string;
@@ -20,48 +19,57 @@ interface RunStatusEntry {
   errorMessage?: string;
 }
 
-const RunStatusTab: React.FC<RunStatusTabProps> = ({ nodeId, nodeType }) => {
-  const runs = useGraphStore((state) => state.runs);
+const RunStatusTab: React.FC<RunStatusTabProps> = ({ nodeId, nodeType: _nodeType }) => {
+  const [runHistory, setRunHistory] = useState<RunStatusEntry[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
-  // Build run history for this agent
-  const runHistory = useMemo(() => {
-    const history: RunStatusEntry[] = [];
-
-    if (nodeType !== 'agent') {
-      return history;
-    }
+  // Phase 4.1 Feature Gap Fix: Fetch agent run history from backend API
+  useEffect(() => {
+    const fetchRunHistory = async () => {
+      if (_nodeType !== 'agent') {
+        setRunHistory([]);
+        setIsLoading(false);
+        return;
+      }
 
-    runs.forEach((run) => {
-      // Filter runs for this agent
-      if (run.agent_name === nodeId) {
-        const startTime = run.started_at ? new Date(run.started_at).getTime() : Date.now();
-        const endTime = run.completed_at ? new Date(run.completed_at).getTime() : Date.now();
+      setIsLoading(true);
+      setError(null);
 
-        // Map status
-        let status: 'idle' | 'processing' | 'error' = 'idle';
-        if (run.status === 'active') {
-          status = 'processing';
-        } else if (run.status === 'error') {
-          status = 'error';
-        } else {
-          status = 'idle';
+      try {
+        const response = await fetch(`/api/agents/${nodeId}/runs`);
+        if (!response.ok) {
+          throw new Error(`Failed to fetch run history: ${response.statusText}`);
         }
 
-        history.push({
+        const data = await response.json();
+
+        // Convert API response to RunStatusEntry format
+        const history = data.runs.map((run: any) => ({
           runId: run.run_id,
-          startTime,
-          endTime,
-          duration: run.duration_ms || 0,
-          status,
-          metrics: run.metrics || {},
-          errorMessage: run.error_message || undefined,
-        });
+          startTime: new Date(run.start_time).getTime(),
+          endTime: new Date(run.end_time).getTime(),
+          duration: run.duration_ms,
+          status: run.status === 'completed' ? 'idle' : run.status === 'active' ? 'processing' : 'error',
+          metrics: {
+            tokensUsed: run.metrics?.tokens_used,
+            costUsd: run.metrics?.cost_usd,
+            artifactsProduced: run.metrics?.artifacts_produced,
+          },
+          errorMessage: run.error_message,
+        }));
+
+        setRunHistory(history);
+      } catch (err) {
+        console.error('Failed to fetch run history:', err);
+        setError(err instanceof Error ? err.message : 'Unknown error');
+      } finally {
+        setIsLoading(false);
       }
-    });
+    };
 
-    // Sort by start time (most recent first)
-    return history.sort((a, b) => b.startTime - a.startTime);
-  }, [nodeId, nodeType, runs]);
+    fetchRunHistory();
+  }, [nodeId, _nodeType]);
 
   const formatTimestamp = (timestamp: number) => {
     return new Date(timestamp).toLocaleString();
@@ -113,7 +121,33 @@ const RunStatusTab: React.FC<RunStatusTabProps> = ({ nodeId, nodeType }) => {
         color: 'var(--color-text-primary)',
       }}
     >
-      {runHistory.length === 0 ? (
+      {isLoading ? (
+        <div
+          data-testid="loading-runs"
+          style={{
+            padding: 'var(--space-layout-md)',
+            color: 'var(--color-text-muted)',
+            fontSize: 'var(--font-size-body-sm)',
+            fontFamily: 'var(--font-family-sans)',
+            textAlign: 'center',
+          }}
+        >
+          Loading run history...
+        </div>
+      ) : error ? (
+        <div
+          data-testid="error-runs"
+          style={{
+            padding: 'var(--space-layout-md)',
+            color: 'var(--color-error-light)',
+            fontSize: 'var(--font-size-body-sm)',
+            fontFamily: 'var(--font-family-sans)',
+            textAlign: 'center',
+          }}
+        >
+          Error: {error}
+        </div>
+      ) : runHistory.length === 0 ? (
         <div
           data-testid="empty-runs"
           style={{
@@ -124,7 +158,14 @@ const RunStatusTab: React.FC<RunStatusTabProps> = ({ nodeId, nodeType }) => {
             textAlign: 'center',
           }}
         >
-          No previous runs
+          <div style={{ marginBottom: 'var(--space-component-sm)' }}>
+            🚧 Run tracking coming soon!
+          </div>
+          <div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--color-text-tertiary)' }}>
+            This feature will track individual agent executions with timing and metrics.
+            <br />
+            For now, check the Message History tab to see consumed and published messages.
+          </div>
         </div>
       ) : (
         <table

flock/frontend/src/components/graph/AgentNode.test.tsx

@@ -2,9 +2,11 @@ import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { ReactFlowProvider } from '@xyflow/react';
 import AgentNode from './AgentNode';
-import { AgentNodeData } from '../../types/graph';
 import { NodeProps } from '@xyflow/react';
 
+// UI Optimization Migration (Phase 4.1 - Spec 002): AgentNodeData removed, use Record<string, any>
+type AgentNodeData = Record<string, any>;
+
 describe('AgentNode', () => {
   const createNodeProps = (data: AgentNodeData, selected = false): NodeProps =>
     ({

flock/frontend/src/components/graph/AgentNode.tsx

@@ -1,11 +1,12 @@
 import { memo, useState, useEffect, useRef } from 'react';
 import { NodeProps, Handle, Position } from '@xyflow/react';
-import { AgentNodeData } from '../../types/graph';
 import { useUIStore } from '../../store/uiStore';
 import { useSettingsStore } from '../../store/settingsStore';
 
+// UI Optimization Migration (Phase 4.1 - Spec 002): Backend GraphNode.data is Record<string, any>
+// Agent-specific properties populated by backend snapshot
 const AgentNode = memo(({ data, selected }: NodeProps) => {
-  const nodeData = data as AgentNodeData;
+  const nodeData = data as Record<string, any>;
   const name = nodeData.name;
   const status = nodeData.status;
   const sentCount = nodeData.sentCount;
@@ -19,14 +20,14 @@ const AgentNode = memo(({ data, selected }: NodeProps) => {
   // Merge known types with actual counts - show all types even with 0 count
   // Start with actual counts, then add known types that haven't happened yet
   const displayReceivedByType: Record<string, number> = { ...receivedByType };
-  subscriptions.forEach(type => {
+  subscriptions.forEach((type: string) => {
     if (!(type in displayReceivedByType)) {
       displayReceivedByType[type] = 0;
     }
   });
 
   const displaySentByType: Record<string, number> = { ...sentByType };
-  outputTypes.forEach(type => {
+  outputTypes.forEach((type: string) => {
     if (!(type in displaySentByType)) {
       displaySentByType[type] = 0;
     }
@@ -43,10 +44,11 @@ const AgentNode = memo(({ data, selected }: NodeProps) => {
     const changedKeys = new Set<string>();
 
     Object.entries(allCounts).forEach(([key, count]) => {
-      if (prevCounts.current[key] !== undefined && prevCounts.current[key] !== count) {
+      const numCount = count as number;
+      if (prevCounts.current[key] !== undefined && prevCounts.current[key] !== numCount) {
         changedKeys.add(key);
       }
-      prevCounts.current[key] = count;
+      prevCounts.current[key] = numCount;
     });
 
     if (changedKeys.size > 0) {

flock/frontend/src/components/graph/GraphCanvas.tsx

@@ -38,14 +38,12 @@ const GraphCanvas: React.FC = () => {
   const openDetailWindow = useUIStore((state) => state.openDetailWindow);
   const nodes = useGraphStore((state) => state.nodes);
   const edges = useGraphStore((state) => state.edges);
-  const agents = useGraphStore((state) => state.agents);
-  const messages = useGraphStore((state) => state.messages);
-  const runs = useGraphStore((state) => state.runs);
   const generateAgentViewGraph = useGraphStore((state) => state.generateAgentViewGraph);
   const generateBlackboardViewGraph = useGraphStore((state) => state.generateBlackboardViewGraph);
-  const updateNodePosition = useGraphStore((state) => state.updateNodePosition);
+  const updateNodePosition = useGraphStore ((state) => state.updateNodePosition);
   const addModule = useModuleStore((state) => state.addModule);
-  const applyFilters = useGraphStore((state) => state.applyFilters);
+  // UI Optimization Migration (Phase 4 - Spec 002): Use filterStore.applyFilters (backend-driven)
+  const applyFilters = useFilterStore((state) => state.applyFilters);
 
   const correlationId = useFilterStore((state) => state.correlationId);
   const timeRange = useFilterStore((state) => state.timeRange);
@@ -84,23 +82,30 @@ const GraphCanvas: React.FC = () => {
     []
   );
 
-  // Generate graph when mode changes OR when agents/messages/runs change
+  // UI Optimization Migration (Phase 4.1 - Spec 002): Generate graph when mode changes
+  // Backend snapshot includes ALL latest data, no need to watch OLD agents/messages/runs Maps
+  // Note: generateAgentViewGraph and generateBlackboardViewGraph are stable zustand functions
+  // DO NOT add them to dependencies or it will cause infinite loop when nodes update
   useEffect(() => {
     if (mode === 'agent') {
       generateAgentViewGraph();
     } else {
       generateBlackboardViewGraph();
     }
-  }, [mode, agents, messages, runs, generateAgentViewGraph, generateBlackboardViewGraph]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mode]);
 
   // Regenerate graph when edge settings change to apply new edge styles
+  // Note: generateAgentViewGraph and generateBlackboardViewGraph are stable zustand functions
+  // DO NOT add them to dependencies or it will cause infinite loop when nodes update
   useEffect(() => {
     if (mode === 'agent') {
       generateAgentViewGraph();
     } else {
       generateBlackboardViewGraph();
     }
-  }, [edgeType, edgeStrokeWidth, edgeAnimation, mode, generateAgentViewGraph, generateBlackboardViewGraph]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [edgeType, edgeStrokeWidth, edgeAnimation, mode]);
 
   // Apply filters whenever filter store state changes
   useEffect(() => {

flock/frontend/src/components/graph/MessageNode.test.tsx

@@ -2,9 +2,11 @@ import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { ReactFlowProvider } from '@xyflow/react';
 import MessageNode from './MessageNode';
-import { MessageNodeData } from '../../types/graph';
 import { NodeProps } from '@xyflow/react';
 
+// UI Optimization Migration (Phase 4.1 - Spec 002): MessageNodeData removed, use Record<string, any>
+type MessageNodeData = Record<string, any>;
+
 describe('MessageNode', () => {
   const createNodeProps = (data: MessageNodeData, selected = false): NodeProps =>
     ({

flock/frontend/src/components/graph/MessageNode.tsx

@@ -1,10 +1,11 @@
 import { memo } from 'react';
 import { NodeProps, Handle, Position } from '@xyflow/react';
 import JsonView from '@uiw/react-json-view';
-import { MessageNodeData } from '../../types/graph';
 
-const MessageNode = memo(({ data, selected }: NodeProps) => {
-  const nodeData = data as MessageNodeData;
+// UI Optimization Migration (Phase 4.1 - Spec 002): Backend GraphNode.data is Record<string, any>
+// Message/artifact-specific properties populated by backend snapshot
+const MessageNode = memo(({ id, data, selected }: NodeProps) => {
+  const nodeData = data as Record<string, any>;
   const artifactType = nodeData.artifactType;
   const payload = nodeData.payload;
   const producedBy = nodeData.producedBy;
@@ -12,6 +13,9 @@ const MessageNode = memo(({ data, selected }: NodeProps) => {
   const isStreaming = nodeData.isStreaming || false;
   const streamingText = nodeData.streamingText || '';
 
+  // Phase 6: Show artifact ID for debugging/verification
+  const artifactId = id; // Node ID is the artifact ID
+
   return (
     <div
       className={`message-node ${selected ? 'selected' : ''}`}
@@ -45,6 +49,15 @@ const MessageNode = memo(({ data, selected }: NodeProps) => {
         }}>
           {artifactType}
         </div>
+        <div style={{
+          fontSize: '10px',
+          color: '#a8a29e',
+          marginBottom: '4px',
+          fontFamily: 'monospace',
+          wordBreak: 'break-all'
+        }}>
+          id: {artifactId}
+        </div>
         <div style={{
           fontSize: '11px',
           color: '#a8a29e',

flock/frontend/src/components/layout/DashboardLayout.tsx

@@ -40,7 +40,6 @@ const DashboardLayout: React.FC = () => {
 
   const handleToggleAgentDetails = () => {
     const detailWindows = useUIStore.getState().detailWindows;
-    const agents = useGraphStore.getState().agents;
 
     // Check if any detail windows are open
     if (detailWindows.size > 0) {
@@ -49,9 +48,13 @@ const DashboardLayout: React.FC = () => {
         useUIStore.getState().closeDetailWindow(nodeId);
       });
     } else {
+      // UI Optimization Migration (Phase 4.1): Read agent nodes from state.nodes
+      const nodes = useGraphStore.getState().nodes;
+      const agentNodes = nodes.filter((node) => node.type === 'agent');
+
       // Open detail windows for all agents
-      agents.forEach((agent) => {
-        useUIStore.getState().openDetailWindow(agent.id);
+      agentNodes.forEach((node) => {
+        useUIStore.getState().openDetailWindow(node.id);
       });
     }
   };
@@ -63,15 +66,15 @@ const DashboardLayout: React.FC = () => {
   });
 
   const handleClearStore = () => {
-    if (confirm('Clear all dashboard data? This will remove all agents, messages, and session data.')) {
-      // Clear graph store
+    if (confirm('Clear all dashboard data? This will remove all graph data and session data.')) {
+      // UI Optimization Migration (Phase 4.1): Clear NEW Phase 2 state only
       useGraphStore.setState({
-        agents: new Map(),
-        messages: new Map(),
         events: [],
-        runs: new Map(),
         nodes: [],
-        edges: []
+        edges: [],
+        statistics: null,
+        agentStatus: new Map(),
+        streamingTokens: new Map(),
       });
 
       // Clear UI store

flock/frontend/src/components/modules/HistoricalArtifactsModule.tsx

@@ -1,9 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { fetchArtifactSummary, fetchArtifacts, type ArtifactListItem, type ArtifactQueryOptions } from '../../services/api';
-import { mapArtifactToMessage } from '../../utils/artifacts';
 import { useFilterStore } from '../../store/filterStore';
-import { useGraphStore } from '../../store/graphStore';
-import { useUIStore } from '../../store/uiStore';
 import type { ModuleContext } from './ModuleRegistry';
 import JsonAttributeRenderer from './JsonAttributeRenderer';
 import styles from './HistoricalArtifactsModule.module.css';
@@ -147,17 +144,10 @@ const HistoricalArtifactsModule: React.FC<HistoricalArtifactsModuleProps> = ({ c
 
         mergeCorrelationMetadata(response.items);
 
-        if (response.items.length > 0) {
-          const graphStore = useGraphStore.getState();
-          graphStore.batchUpdate({ messages: response.items.map(mapArtifactToMessage) });
-          const uiState = useUIStore.getState();
-          if (uiState.mode === 'agent') {
-            graphStore.generateAgentViewGraph();
-          } else {
-            graphStore.generateBlackboardViewGraph();
-          }
-          graphStore.applyFilters();
-        }
+        // UI Optimization Migration (Phase 2/4 - Spec 002): Backend-driven architecture
+        // Graph updates happen automatically via GraphCanvas useEffect when filters change
+        // This module only manages the artifact table view, not the graph
+        // No need to manually trigger graph updates here
 
         const summaryResponse = await fetchArtifactSummary({
           ...queryOptions,

flock/frontend/src/components/modules/ModuleRegistry.ts

@@ -1,10 +1,12 @@
 import React from 'react';
-import type { Agent, Message } from '../../types/graph';
+import type { Message } from '../../types/graph';
 import type { TimeRange, ArtifactSummary } from '../../types/filters';
 
+// UI Optimization Migration (Phase 4.1 - Spec 002): ModuleContext uses OLD Phase 1 architecture
+// TODO: Update module system to use GraphNode[] instead of Maps
 export interface ModuleContext {
-  // Data access
-  agents: Map<string, Agent>;
+  // Data access (DEPRECATED - Phase 1 architecture, use events array instead)
+  agents: Map<string, any>; // OLD: was Map<string, Agent>
   messages: Map<string, Message>;
   events: Message[];
 

flock/frontend/src/hooks/useModules.ts

@@ -6,10 +6,15 @@
  * Calls module onMount/onUnmount lifecycle hooks when instances change.
  *
  * SPECIFICATION: docs/specs/003-real-time-dashboard/FRONTEND_ARCHITECTURE.md Section 7.4
- * - Build ModuleContext from store data (agents, messages, events, filters)
+ * - Build ModuleContext from store data (events, filters)
  * - Call module onMount lifecycle hooks when instances added
  * - Call module onUnmount lifecycle hooks when instances removed
  * - Provide publish and invoke actions in context
+ *
+ * UI Optimization Migration (Phase 4.1 - Spec 002):
+ * - agents/messages Maps are DEPRECATED (Phase 1 architecture)
+ * - Modules should use events array instead
+ * - Empty Maps provided for backward compatibility
  */
 
 import { useEffect, useMemo, useRef } from 'react';
@@ -34,9 +39,11 @@ import { moduleRegistry, type ModuleContext } from '../components/modules/Module
 export function useModules() {
   // Subscribe to store state
   const instances = useModuleStore((state) => state.instances);
-  const agents = useGraphStore((state) => state.agents);
-  const messages = useGraphStore((state) => state.messages);
   const events = useGraphStore((state) => state.events);
+
+  // UI Optimization Migration (Phase 4.1): Provide empty Maps for deprecated fields
+  const agents = useMemo(() => new Map(), []);
+  const messages = useMemo(() => new Map(), []);
   const correlationId = useFilterStore((state) => state.correlationId);
   const timeRange = useFilterStore((state) => state.timeRange);
   const artifactTypes = useFilterStore((state) => state.selectedArtifactTypes);
@@ -72,7 +79,8 @@ export function useModules() {
         console.log('[Module Context] Invoke agent:', agentName, 'with inputs:', inputs);
       },
     }),
-    [agents, messages, events, correlationId, timeRange, artifactTypes, producers, tags, visibility, summary]
+    // Note: agents and messages are stable empty Maps, so excluded from deps
+    [events, correlationId, timeRange, artifactTypes, producers, tags, visibility, summary]
   );
 
   /**

flock/frontend/src/hooks/usePersistence.ts

@@ -57,7 +57,6 @@ function debounce<T extends (...args: any[]) => void>(
  */
 export function usePersistence() {
   const mode = useUIStore((state) => state.mode);
-  const updateNodePosition = useGraphStore((state) => state.updateNodePosition);
 
   // Use ref to maintain debounced function identity across renders
   const debouncedSaveRef = useRef<((nodeId: string, mode: VisualizationMode, position: Position) => void) | null>(null);
@@ -92,6 +91,8 @@ export function usePersistence() {
 
   /**
    * Load node positions from IndexedDB for current mode
+   * Note: Deliberately excludes updateNodePosition from dependencies to prevent infinite loops
+   * The function is stable from zustand, so we can safely use it without re-creating the callback
    */
   const loadNodePositions = useCallback(async (currentMode: VisualizationMode) => {
     try {
@@ -104,15 +105,16 @@ export function usePersistence() {
       }
 
       // Apply loaded positions to graph store
+      // Use graphStore directly to avoid dependency on updateNodePosition selector
       layouts.forEach((layout) => {
-        updateNodePosition(layout.node_id, { x: layout.x, y: layout.y });
+        useGraphStore.getState().updateNodePosition(layout.node_id, { x: layout.x, y: layout.y });
       });
 
       console.log(`[usePersistence] Loaded ${layouts.length} node positions for ${currentMode} view`);
     } catch (error) {
       console.error(`[usePersistence] Failed to load node positions for ${currentMode} view:`, error);
     }
-  }, [updateNodePosition]);
+  }, []); // Empty deps - function is now stable!
 
   /**
    * Load positions on mount and when mode changes

flock/frontend/src/services/api.ts

@@ -171,25 +171,9 @@ export async function fetchAgents(): Promise<Agent[]> {
   }
 }
 
-/**
- * Fetch registered agents and transform to graph store format
- * Returns agents with 'idle' status ready for initial display
- */
-export async function fetchRegisteredAgents(): Promise<import('../types/graph').Agent[]> {
-  const agents = await fetchAgents();
-  return agents.map(agent => ({
-    id: agent.name,
-    name: agent.name,
-    status: 'idle' as const,
-    subscriptions: agent.subscriptions || [],
-    outputTypes: agent.output_types || [],
-    lastActive: Date.now(),
-    sentCount: 0,
-    recvCount: 0,
-    receivedByType: {},
-    sentByType: {},
-  }));
-}
+// UI Optimization Migration (Phase 4.1 - Spec 002): Removed fetchRegisteredAgents()
+// OLD Phase 1 function that transformed API agents to graph store format
+// Backend now provides agent data directly in GraphSnapshot
 
 /**
  * Publish an artifact to the orchestrator