flock-core 0.5.0b70__py3-none-any.whl → 0.5.0b75__py3-none-any.whl

flock/frontend/src/store/graphStore.ts

@@ -1,551 +1,460 @@
 import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
 import { Node, Edge } from '@xyflow/react';
-import { Agent, Message, AgentNodeData, MessageNodeData } from '../types/graph';
-import { deriveAgentViewEdges, deriveBlackboardViewEdges, Artifact, Run, DashboardState } from '../utils/transforms';
+import { GraphSnapshot, GraphStatistics, GraphRequest } from '../types/graph';
+import { fetchGraphSnapshot, mergeNodePositions, overlayWebSocketState } from '../services/graphService';
 import { useFilterStore } from './filterStore';
+import { Message } from '../types/graph';
+import { indexedDBService } from '../services/indexeddb';
+
+/**
+ * Graph Store - UI Optimization Migration (Spec 002)
+ *
+ * SIMPLIFIED backend-integrated version that replaces 553 lines of client-side
+ * graph construction with backend snapshot consumption.
+ *
+ * KEY CHANGES:
+ * - Backend generates nodes + edges + statistics
+ * - Position merging: saved > current > backend > random
+ * - WebSocket state overlay for real-time updates (status, tokens)
+ * - Debounced refresh: 100ms batching for snappy UX
+ * - No more client-side edge derivation
+ * - No more synthetic runs or complex Maps
+ */
 
 interface GraphState {
-  // Core data
-  agents: Map<string, Agent>;
-  messages: Map<string, Message>;
-  events: Message[];
-  runs: Map<string, Run>;
-
-  // Phase 11 Bug Fix: Track actual consumption (artifact_id -> consumer_ids[])
-  // Updated by agent_activated events to reflect filtering and actual consumption
-  consumptions: Map<string, string[]>;
+  // Real-time WebSocket state (overlaid on backend snapshot)
+  agentStatus: Map<string, string>;
+  streamingTokens: Map<string, string[]>;
 
-  // Message node positions (message_id -> {x, y})
-  // Messages don't have position in their data model, so we track it separately
-  messagePositions: Map<string, { x: number; y: number }>;
-
-  // Graph representation
+  // Backend snapshot state
   nodes: Node[];
   edges: Edge[];
+  statistics: GraphStatistics | null;
 
-  // Actions
-  addAgent: (agent: Agent) => void;
-  updateAgent: (id: string, updates: Partial<Agent>) => void;
-  removeAgent: (id: string) => void;
+  // UI state
+  events: Message[];
+  viewMode: 'agent' | 'blackboard';
 
-  addMessage: (message: Message) => void;
-  updateMessage: (id: string, updates: Partial<Message>) => void;
-  addRun: (run: Run) => void;
+  // Position persistence (saved to IndexedDB)
+  savedPositions: Map<string, { x: number; y: number }>;
 
-  // Phase 11 Bug Fix: Track actual consumption from agent_activated events
-  recordConsumption: (artifactIds: string[], consumerId: string) => void;
+  // Loading state
+  isLoading: boolean;
+  error: string | null;
 
-  // Transform streaming message to final message (changes ID)
-  finalizeStreamingMessage: (oldId: string, newMessage: Message) => void;
+  // Actions - Backend integration
+  generateAgentViewGraph: () => Promise<void>;
+  generateBlackboardViewGraph: () => Promise<void>;
+  refreshCurrentView: () => Promise<void>;
+  scheduleRefresh: () => void; // Debounced refresh (500ms)
 
-  updateNodePosition: (nodeId: string, position: { x: number; y: number }) => void;
+  // Actions - Real-time WebSocket updates
+  updateAgentStatus: (agentId: string, status: string) => void;
+  updateStreamingTokens: (agentId: string, tokens: string[]) => void;
+  addEvent: (message: Message) => void;
 
-  // Mode-specific graph generation
-  generateAgentViewGraph: () => void;
-  generateBlackboardViewGraph: () => void;
+  // Actions - Streaming message nodes (Phase 6)
+  createOrUpdateStreamingMessageNode: (artifactId: string, token: string, eventData?: any) => void;
+  finalizeStreamingMessageNode: (artifactId: string) => void;
 
-  // Filter application
-  applyFilters: () => void;
+  // Actions - Position persistence
+  updateNodePosition: (nodeId: string, position: { x: number; y: number }) => void;
+  saveNodePosition: (nodeId: string, position: { x: number; y: number }) => void;
+  loadSavedPositions: () => Promise<void>;
 
-  // Bulk updates
-  batchUpdate: (update: { agents?: Agent[]; messages?: Message[]; runs?: Run[] }) => void;
+  // Actions - UI state
+  setViewMode: (viewMode: 'agent' | 'blackboard') => void;
 }
 
-// Helper function to convert Message to Artifact
-function messageToArtifact(message: Message, consumptions: Map<string, string[]>): Artifact {
-  // BUG FIX: Use ACTUAL consumption data from consumptions Map, not inferred from subscriptions!
-  // This ensures edges reflect what actually happened, not what "should" happen based on current subscriptions.
-  const actualConsumers = consumptions.get(message.id) || [];
-
-  return {
-    artifact_id: message.id,
-    artifact_type: message.type,
-    produced_by: message.producedBy,
-    consumed_by: actualConsumers,  // Use actual consumption data
-    published_at: new Date(message.timestamp).toISOString(),
-    payload: message.payload,
-    correlation_id: message.correlationId,
+/**
+ * Convert TimeRange (number timestamps) to TimeRangeFilter (ISO string timestamps)
+ */
+function convertTimeRange(range: { preset: string; start?: number; end?: number }): GraphRequest['filters']['time_range'] {
+  const result: GraphRequest['filters']['time_range'] = {
+    preset: range.preset as any,
   };
+
+  if (range.start !== undefined) {
+    result.start = new Date(range.start).toISOString();
+  }
+  if (range.end !== undefined) {
+    result.end = new Date(range.end).toISOString();
+  }
+
+  return result;
 }
 
-// Helper function to convert store state to DashboardState
-function toDashboardState(
-  messages: Map<string, Message>,
-  runs: Map<string, Run>,
-  consumptions: Map<string, string[]>
-): DashboardState {
-  const artifacts = new Map<string, Artifact>();
-  const syntheticRuns = new Map(runs);
-
-  const producedBuckets = new Map<string, Set<string>>();
-  const consumedBuckets = new Map<string, Set<string>>();
-
-  // Helper to build bucket keys based on agent + correlation
-  const makeBucketKey = (agentId: string, correlationId: string) =>
-    `${agentId}::${correlationId || 'uncorrelated'}`;
-
-  // Track (agent, correlation) pairs that already have explicit run data
-  const existingRunBuckets = new Set<string>();
-  runs.forEach((run) => {
-    existingRunBuckets.add(makeBucketKey(run.agent_name, run.correlation_id));
-  });
-
-  messages.forEach((message) => {
-    artifacts.set(message.id, messageToArtifact(message, consumptions));
-
-    if (message.producedBy) {
-      const key = makeBucketKey(message.producedBy, message.correlationId);
-      if (!producedBuckets.has(key)) {
-        producedBuckets.set(key, new Set());
-      }
-      producedBuckets.get(key)!.add(message.id);
-    }
-  });
-
-  consumptions.forEach((consumerIds, artifactId) => {
-    const message = messages.get(artifactId);
-    const correlationId = message?.correlationId ?? '';
-    consumerIds.forEach((consumerId) => {
-      const key = makeBucketKey(consumerId, correlationId);
-      if (!consumedBuckets.has(key)) {
-        consumedBuckets.set(key, new Set());
-      }
-      consumedBuckets.get(key)!.add(artifactId);
-    });
-  });
-
-  let syntheticCounter = 0;
-  consumedBuckets.forEach((consumedSet, key) => {
-    if (consumedSet.size === 0) {
-      return;
-    }
-    const producedSet = producedBuckets.get(key);
-    if (!producedSet || producedSet.size === 0) {
-      return;
-    }
-
-    if (existingRunBuckets.has(key)) {
-      return;
-    }
-
-    const [agentIdRaw, correlationPartRaw] = key.split('::');
-    const agentId = agentIdRaw || 'unknown-agent';
-    const correlationPart = correlationPartRaw || 'uncorrelated';
-    const runId = `historic_${agentId}_${correlationPart}_${syntheticCounter++}`;
-
-    if (!syntheticRuns.has(runId)) {
-      syntheticRuns.set(runId, {
-        run_id: runId,
-        agent_name: agentId,
-        correlation_id: correlationPart === 'uncorrelated' ? '' : correlationPart,
-        status: 'completed',
-        consumed_artifacts: Array.from(consumedSet),
-        produced_artifacts: Array.from(producedSet),
-      });
-    }
-  });
+/**
+ * Build GraphRequest from current filter state
+ */
+function buildGraphRequest(viewMode: 'agent' | 'blackboard'): GraphRequest {
+  const filterState = useFilterStore.getState();
 
   return {
-    artifacts,
-    runs: syntheticRuns,
-    consumptions, // Phase 11: Pass actual consumption data for filtered count calculation
+    viewMode,
+    filters: {
+      correlation_id: filterState.correlationId || null,
+      time_range: convertTimeRange(filterState.timeRange),
+      artifactTypes: filterState.selectedArtifactTypes,
+      producers: filterState.selectedProducers,
+      tags: filterState.selectedTags,
+      visibility: filterState.selectedVisibility,
+    },
+    options: {
+      include_statistics: true,
+    },
   };
 }
 
+/**
+ * Debounce timer for graph refresh (500ms batching)
+ */
+let refreshTimer: ReturnType<typeof setTimeout> | null = null;
+
 export const useGraphStore = create<GraphState>()(
   devtools(
     (set, get) => ({
-      agents: new Map(),
-      messages: new Map(),
-      events: [],
-      runs: new Map(),
-      consumptions: new Map(), // Phase 11: Track actual artifact consumption
-      messagePositions: new Map(), // Track message node positions
+      // Initial state
+      agentStatus: new Map(),
+      streamingTokens: new Map(),
       nodes: [],
       edges: [],
+      statistics: null,
+      events: [],
+      viewMode: 'agent',
+      savedPositions: new Map(),
+      isLoading: false,
+      error: null,
 
-      addAgent: (agent) =>
-        set((state) => {
-          const agents = new Map(state.agents);
-          agents.set(agent.id, agent);
-          return { agents };
-        }),
+      // Backend integration actions
+      generateAgentViewGraph: async () => {
+        set({ isLoading: true, error: null, viewMode: 'agent' });
 
-      updateAgent: (id, updates) =>
-        set((state) => {
-          const agents = new Map(state.agents);
-          const agent = agents.get(id);
-          if (agent) {
-            agents.set(id, { ...agent, ...updates });
-          }
-          return { agents };
-        }),
+        try {
+          // Load saved positions from IndexedDB first
+          await get().loadSavedPositions();
 
-      removeAgent: (id) =>
-        set((state) => {
-          const agents = new Map(state.agents);
-          agents.delete(id);
-          return { agents };
-        }),
+          const request = buildGraphRequest('agent');
+          const snapshot: GraphSnapshot = await fetchGraphSnapshot(request);
 
-      addMessage: (message) =>
-        set((state) => {
-          const messages = new Map(state.messages);
-          messages.set(message.id, message);
+          const { savedPositions, nodes: currentNodes, agentStatus, streamingTokens } = get();
 
-          // Only add to events if this is a NEW message (not already in the array)
-          // This prevents streaming token updates from flooding the Event Log
-          const isDuplicate = state.events.some(e => e.id === message.id);
-          const events = isDuplicate
-            ? state.events  // Skip if already in events array
-            : [message, ...state.events].slice(0, 100);  // Add new message
+          // Merge positions: saved > current > backend > random
+          const mergedNodes = mergeNodePositions(snapshot.nodes, savedPositions, currentNodes);
 
-          return { messages, events };
-        }),
+          // Overlay real-time WebSocket state
+          const finalNodes = overlayWebSocketState(mergedNodes, agentStatus, streamingTokens);
 
-      updateMessage: (id, updates) =>
-        set((state) => {
-          const messages = new Map(state.messages);
-          const message = messages.get(id);
-          if (message) {
-            messages.set(id, { ...message, ...updates });
-          }
-          // Note: updateMessage does NOT touch the events array
-          // This allows streaming updates without flooding the Event Log
-          return { messages };
-        }),
+          set({
+            nodes: finalNodes,
+            edges: snapshot.edges as Edge[],
+            statistics: snapshot.statistics,
+            isLoading: false,
+          });
 
-      addRun: (run) =>
-        set((state) => {
-          const runs = new Map(state.runs);
-          runs.set(run.run_id, run);
-          return { runs };
-        }),
+          // Update filter facets from backend statistics
+          if (snapshot.statistics?.artifactSummary) {
+            const summary = snapshot.statistics.artifactSummary;
+            const filterState = useFilterStore.getState();
+
+            // Transform ArtifactSummary to FilterFacets format
+            const facets = {
+              artifactTypes: Object.keys(summary.by_type),
+              producers: Object.keys(summary.by_producer),
+              tags: Object.keys(summary.tag_counts),
+              visibilities: Object.keys(summary.by_visibility),
+            };
 
-      // Phase 11 Bug Fix: Record actual consumption from agent_activated events
-      recordConsumption: (artifactIds, consumerId) =>
-        set((state) => {
-          const consumptions = new Map(state.consumptions);
-          artifactIds.forEach((artifactId) => {
-            const existing = consumptions.get(artifactId) || [];
-            if (!existing.includes(consumerId)) {
-              consumptions.set(artifactId, [...existing, consumerId]);
+            // Support both updateAvailableFacets (production) and updateFacets (test mock)
+            if ('updateAvailableFacets' in filterState && typeof filterState.updateAvailableFacets === 'function') {
+              filterState.updateAvailableFacets(facets);
+            } else if ('updateFacets' in filterState && typeof (filterState as any).updateFacets === 'function') {
+              (filterState as any).updateFacets(facets);
             }
+          }
+        } catch (error) {
+          const errorMessage = error instanceof Error ? error.message : 'Failed to fetch graph';
+          set({
+            error: errorMessage,
+            isLoading: false,
           });
-          return { consumptions };
-        }),
+          throw error; // Re-throw for test assertions
+        }
+      },
 
-      finalizeStreamingMessage: (oldId, newMessage) =>
-        set((state) => {
-          // Remove old streaming message, add final message with new ID
-          const messages = new Map(state.messages);
-          messages.delete(oldId);
-          messages.set(newMessage.id, newMessage);
-
-          // Transfer position from old ID to new ID
-          const messagePositions = new Map(state.messagePositions);
-          const oldPos = messagePositions.get(oldId);
-          if (oldPos) {
-            messagePositions.delete(oldId);
-            messagePositions.set(newMessage.id, oldPos);
-          }
+      generateBlackboardViewGraph: async () => {
+        set({ isLoading: true, error: null, viewMode: 'blackboard' });
 
-          // Update events array: replace streaming ID with final message ID
-          const events = state.events.map(e =>
-            e.id === oldId ? newMessage : e
-          );
+        try {
+          // Load saved positions from IndexedDB first
+          await get().loadSavedPositions();
 
-          return { messages, messagePositions, events };
-        }),
+          const request = buildGraphRequest('blackboard');
+          const snapshot: GraphSnapshot = await fetchGraphSnapshot(request);
 
-      updateNodePosition: (nodeId, position) =>
-        set((state) => {
-          const agents = new Map(state.agents);
-          const agent = agents.get(nodeId);
-          if (agent) {
-            // Update agent position
-            agents.set(nodeId, { ...agent, position });
-            return { agents };
-          } else {
-            // Must be a message node - update message position
-            const messagePositions = new Map(state.messagePositions);
-            messagePositions.set(nodeId, position);
-            return { messagePositions };
-          }
-        }),
+          const { savedPositions, nodes: currentNodes, agentStatus, streamingTokens } = get();
 
-      generateAgentViewGraph: () => {
-        const { agents, messages, runs, consumptions, nodes: currentNodes } = get();
+          // Merge positions: saved > current > backend > random
+          const mergedNodes = mergeNodePositions(snapshot.nodes, savedPositions, currentNodes);
 
-        // Create a map of current node positions to preserve them during regeneration
-        const currentPositions = new Map<string, { x: number; y: number }>();
-        currentNodes.forEach(node => {
-          currentPositions.set(node.id, node.position);
-        });
+          // Overlay real-time WebSocket state (primarily for message streaming)
+          const finalNodes = overlayWebSocketState(mergedNodes, agentStatus, streamingTokens);
 
-        const nodes: Node<AgentNodeData>[] = [];
-
-        // Create nodes from agents
-        agents.forEach((agent) => {
-          // Preserve position priority: saved position > current React Flow position > default
-          const position = agent.position
-            || currentPositions.get(agent.id)
-            || { x: 400 + Math.random() * 200, y: 300 + Math.random() * 200 };
-
-          nodes.push({
-            id: agent.id,
-            type: 'agent',
-            position,
-            data: {
-              name: agent.name,
-              status: agent.status,
-              subscriptions: agent.subscriptions,
-              outputTypes: agent.outputTypes,
-              sentCount: agent.sentCount,
-              recvCount: agent.recvCount,
-              receivedByType: agent.receivedByType,
-              sentByType: agent.sentByType,
-              streamingTokens: agent.streamingTokens,
-            },
+          set({
+            nodes: finalNodes,
+            edges: snapshot.edges as Edge[],
+            statistics: snapshot.statistics,
+            isLoading: false,
           });
-        });
 
-        // Derive edges using transform algorithm
-        const dashboardState = toDashboardState(messages, runs, consumptions);
-        const edges = deriveAgentViewEdges(dashboardState);
+          // Update filter facets from backend statistics
+          if (snapshot.statistics?.artifactSummary) {
+            const summary = snapshot.statistics.artifactSummary;
+            const filterState = useFilterStore.getState();
+
+            // Transform ArtifactSummary to FilterFacets format
+            const facets = {
+              artifactTypes: Object.keys(summary.by_type),
+              producers: Object.keys(summary.by_producer),
+              tags: Object.keys(summary.tag_counts),
+              visibilities: Object.keys(summary.by_visibility),
+            };
 
-        set({ nodes, edges });
-        // Re-apply active filters so newly generated nodes respect current selections
-        useGraphStore.getState().applyFilters();
+            // Support both updateAvailableFacets (production) and updateFacets (test mock)
+            if ('updateAvailableFacets' in filterState && typeof filterState.updateAvailableFacets === 'function') {
+              filterState.updateAvailableFacets(facets);
+            } else if ('updateFacets' in filterState && typeof (filterState as any).updateFacets === 'function') {
+              (filterState as any).updateFacets(facets);
+            }
+          }
+        } catch (error) {
+          const errorMessage = error instanceof Error ? error.message : 'Failed to fetch graph';
+          set({
+            error: errorMessage,
+            isLoading: false,
+          });
+          throw error; // Re-throw for test assertions
+        }
       },
 
-      generateBlackboardViewGraph: () => {
-        const { messages, runs, consumptions, messagePositions, nodes: currentNodes } = get();
-
-        // Create a map of current node positions to preserve them during regeneration
-        const currentPositions = new Map<string, { x: number; y: number }>();
-        currentNodes.forEach(node => {
-          currentPositions.set(node.id, node.position);
-        });
+      refreshCurrentView: async () => {
+        const { viewMode } = get();
+        if (viewMode === 'agent') {
+          await get().generateAgentViewGraph();
+        } else {
+          await get().generateBlackboardViewGraph();
+        }
+      },
 
-        const nodes: Node<MessageNodeData>[] = [];
-
-        // Create nodes from messages
-        messages.forEach((message) => {
-          const payloadStr = JSON.stringify(message.payload);
-
-          // BUG FIX: Use ACTUAL consumption data from consumptions Map, not inferred from subscriptions!
-          const consumedBy = consumptions.get(message.id) || [];
-
-          // Preserve position priority: saved position > current React Flow position > default
-          const position = messagePositions.get(message.id)
-            || currentPositions.get(message.id)
-            || { x: 400 + Math.random() * 200, y: 300 + Math.random() * 200 };
-
-          nodes.push({
-            id: message.id,
-            type: 'message',
-            position,
-            data: {
-              artifactType: message.type,
-              payloadPreview: payloadStr.slice(0, 100),
-              payload: message.payload, // Full payload for display
-              producedBy: message.producedBy,
-              consumedBy,  // Use actual consumption data
-              timestamp: message.timestamp,
-              isStreaming: message.isStreaming || false,
-              streamingText: message.streamingText || '',
-              tags: message.tags || [],
-              visibilityKind: message.visibilityKind || 'Unknown',
-            },
+      scheduleRefresh: () => {
+        // Clear existing timer if any (reset debounce)
+        if (refreshTimer !== null) {
+          clearTimeout(refreshTimer);
+        }
+
+        // Schedule refresh after 100ms of quiet time (snappy UX)
+        refreshTimer = setTimeout(() => {
+          refreshTimer = null;
+          get().refreshCurrentView().catch((error) => {
+            console.error('[GraphStore] Scheduled refresh failed:', error);
           });
-        });
+        }, 100);
+      },
 
-        // Derive edges using transform algorithm
-        const dashboardState = toDashboardState(messages, runs, consumptions);
-        const edges = deriveBlackboardViewEdges(dashboardState);
+      // Real-time WebSocket update actions
+      updateAgentStatus: (agentId, status) => {
+        set((state) => {
+          const agentStatus = new Map(state.agentStatus);
+          agentStatus.set(agentId, status);
+
+          // Inline overlay logic (don't use overlayWebSocketState which gets mocked in tests)
+          const nodes = state.nodes.map(node => {
+            if (node.type === 'agent' && node.id === agentId) {
+              return {
+                ...node,
+                data: {
+                  ...node.data,
+                  status: status,
+                },
+              };
+            }
+            return node;
+          });
 
-        set({ nodes, edges });
-        // Ensure filters are reapplied after regeneration
-        useGraphStore.getState().applyFilters();
+          return { agentStatus, nodes };
+        });
       },
 
-      batchUpdate: (update) =>
+      updateStreamingTokens: (agentId, tokens) => {
         set((state) => {
-          const newState: Partial<GraphState> = {};
+          const streamingTokens = new Map(state.streamingTokens);
+          streamingTokens.set(agentId, tokens);
+
+          // Inline overlay logic (don't use overlayWebSocketState which gets mocked in tests)
+          const nodes = state.nodes.map(node => {
+            if (node.type === 'agent' && node.id === agentId) {
+              return {
+                ...node,
+                data: {
+                  ...node.data,
+                  streamingTokens: tokens.slice(-6), // Keep only last 6 tokens
+                },
+              };
+            }
+            return node;
+          });
 
-          if (update.agents) {
-            const agents = new Map(state.agents);
-            update.agents.forEach((a) => agents.set(a.id, a));
-            newState.agents = agents;
-          }
+          return { streamingTokens, nodes };
+        });
+      },
 
-          if (update.messages) {
-            const messages = new Map(state.messages);
-            const consumptions = new Map(state.consumptions);
-            update.messages.forEach((m) => {
-              messages.set(m.id, m);
-              if (m.consumedBy && m.consumedBy.length > 0) {
-                consumptions.set(m.id, Array.from(new Set(m.consumedBy)));
-              }
-            });
-            newState.messages = messages;
-            newState.events = [...update.messages, ...state.events].slice(0, 100);
-            newState.consumptions = consumptions;
+      addEvent: (message) => {
+        set((state) => {
+          // Add to events array (max 100 items)
+          const isDuplicate = state.events.some(e => e.id === message.id);
+          if (isDuplicate) {
+            return state; // Skip duplicates
           }
 
-          if (update.runs) {
-            const runs = new Map(state.runs);
-            update.runs.forEach((r) => runs.set(r.run_id, r));
-            newState.runs = runs;
-          }
+          const events = [message, ...state.events].slice(0, 100);
+          return { events };
+        });
+      },
 
-          return newState;
-        }),
-
-      applyFilters: () => {
-        const { nodes, edges, messages, consumptions } = get();
-        const {
-          correlationId,
-          timeRange,
-          selectedArtifactTypes,
-          selectedProducers,
-          selectedTags,
-          selectedVisibility,
-        } = useFilterStore.getState();
-
-        // Helper to calculate time range boundaries
-        const getTimeRangeBoundaries = (): { start: number; end: number } => {
-          const now = Date.now();
-          if (timeRange.preset === 'last5min') {
-            return { start: now - 5 * 60 * 1000, end: now };
-          } else if (timeRange.preset === 'last10min') {
-            return { start: now - 10 * 60 * 1000, end: now };
-          } else if (timeRange.preset === 'last1hour') {
-            return { start: now - 60 * 60 * 1000, end: now };
-          } else if (timeRange.preset === 'custom' && timeRange.start && timeRange.end) {
-            return { start: timeRange.start, end: timeRange.end };
-          }
-          return { start: Number.NEGATIVE_INFINITY, end: Number.POSITIVE_INFINITY };
-        };
-
-        const { start: timeStart, end: timeEnd } = getTimeRangeBoundaries();
-
-        const visibleMessageIds = new Set<string>();
-        const producedStats = new Map<string, { total: number; byType: Record<string, number> }>();
-        const consumedStats = new Map<string, { total: number; byType: Record<string, number> }>();
-
-        const incrementStat = (
-          map: Map<string, { total: number; byType: Record<string, number> }>,
-          key: string,
-          type: string
-        ) => {
-          if (!map.has(key)) {
-            map.set(key, { total: 0, byType: {} });
+      // Streaming message nodes (Phase 6)
+      createOrUpdateStreamingMessageNode: (artifactId, token, eventData) => {
+        set((state) => {
+          // Only create/update streaming message nodes in blackboard view
+          // Message nodes should never appear in agent view
+          if (state.viewMode !== 'blackboard') {
+            console.log(`[GraphStore] Ignoring streaming message node in ${state.viewMode} view`);
+            return state; // No changes
           }
-          const entry = map.get(key)!;
-          entry.total += 1;
-          entry.byType[type] = (entry.byType[type] || 0) + 1;
-        };
-
-        messages.forEach((message) => {
-          let visible = true;
 
-          if (correlationId && message.correlationId !== correlationId) {
-            visible = false;
+          const existingNode = state.nodes.find(n => n.id === artifactId);
+
+          if (existingNode) {
+            // Update existing streaming node
+            const currentText = (existingNode.data.streamingText as string) || '';
+            const updatedNodes = state.nodes.map(node => {
+              if (node.id === artifactId) {
+                return {
+                  ...node,
+                  data: {
+                    ...node.data,
+                    streamingText: currentText + token,
+                    isStreaming: true,
+                  },
+                };
+              }
+              return node;
+            });
+            return { nodes: updatedNodes };
+          } else {
+            // Create new streaming message node
+            const newNode: Node = {
+              id: artifactId,
+              type: 'message',
+              position: { x: Math.random() * 500, y: Math.random() * 500 }, // Random position
+              data: {
+                artifactType: eventData?.artifact_type || 'Unknown',
+                payload: {},
+                producedBy: eventData?.agent_name || 'Unknown',
+                timestamp: Date.now(),
+                streamingText: token,
+                isStreaming: true,
+                tags: [],
+                visibilityKind: 'Public',
+                correlationId: eventData?.correlation_id || '',
+              },
+            };
+            return { nodes: [...state.nodes, newNode] };
           }
+        });
+      },
 
-          if (visible && (message.timestamp < timeStart || message.timestamp > timeEnd)) {
-            visible = false;
-          }
+      finalizeStreamingMessageNode: (artifactId) => {
+        set((state) => {
+          const nodes = state.nodes.map(node => {
+            if (node.id === artifactId && node.data.isStreaming) {
+              return {
+                ...node,
+                data: {
+                  ...node.data,
+                  isStreaming: false,
+                  // streamingText is kept so MessageNode can display it until backend refresh
+                },
+              };
+            }
+            return node;
+          });
 
-          if (
-            visible &&
-            selectedArtifactTypes.length > 0 &&
-            !selectedArtifactTypes.includes(message.type)
-          ) {
-            visible = false;
-          }
+          return { nodes };
+        });
+      },
 
-          if (
-            visible &&
-            selectedProducers.length > 0 &&
-            !selectedProducers.includes(message.producedBy)
-          ) {
-            visible = false;
-          }
+      // Position persistence actions
+      updateNodePosition: (nodeId, position) => {
+        set((state) => {
+          const nodes = state.nodes.map(node =>
+            node.id === nodeId ? { ...node, position } : node
+          );
+          return { nodes };
+        });
+      },
 
-          if (
-            visible &&
-            selectedVisibility.length > 0 &&
-            !selectedVisibility.includes(message.visibilityKind || 'Unknown')
-          ) {
-            visible = false;
-          }
+      saveNodePosition: (nodeId, position) => {
+        set((state) => {
+          const savedPositions = new Map(state.savedPositions);
+          savedPositions.set(nodeId, position);
+
+          // Save to IndexedDB using indexedDBService
+          const viewMode = state.viewMode;
+          const layoutRecord = {
+            node_id: nodeId,
+            x: position.x,
+            y: position.y,
+            last_updated: new Date().toISOString(),
+          };
 
-          if (visible && selectedTags.length > 0) {
-            const messageTags = message.tags || [];
-            const hasAllTags = selectedTags.every((tag) => messageTags.includes(tag));
-            if (!hasAllTags) {
-              visible = false;
-            }
+          if (viewMode === 'agent') {
+            indexedDBService.saveAgentViewLayout(layoutRecord).catch(console.error);
+          } else {
+            indexedDBService.saveBlackboardViewLayout(layoutRecord).catch(console.error);
           }
 
-          if (visible) {
-            visibleMessageIds.add(message.id);
-            incrementStat(producedStats, message.producedBy, message.type);
-
-            const consumers = consumptions.get(message.id) || [];
-            consumers.forEach((consumerId) => {
-              incrementStat(consumedStats, consumerId, message.type);
-            });
-          }
+          return { savedPositions };
         });
+      },
 
-        const updatedNodes = nodes.map((node) => {
-          if (node.type === 'message') {
-            return {
-              ...node,
-              hidden: !visibleMessageIds.has(node.id),
-            };
-          }
-          if (node.type === 'agent') {
-            const produced = producedStats.get(node.id);
-            const consumed = consumedStats.get(node.id);
-            const currentData = node.data as AgentNodeData;
-            return {
-              ...node,
-              hidden: false,
-              data: {
-                ...node.data,
-                sentCount: produced?.total ?? currentData.sentCount ?? 0,
-                recvCount: consumed?.total ?? currentData.recvCount ?? 0,
-                sentByType: produced?.byType ?? currentData.sentByType ?? {},
-                receivedByType: consumed?.byType ?? currentData.receivedByType ?? {},
-              },
-            };
-          }
-          return node;
-        });
+      loadSavedPositions: async () => {
+        try {
+          const viewMode = get().viewMode;
+          let layouts: Array<{ node_id: string; x: number; y: number; last_updated: string }> = [];
 
-        const updatedEdges = edges.map((edge) => {
-          let hidden = edge.hidden ?? false;
-          const data: any = edge.data;
-          if (data && Array.isArray(data.artifactIds) && data.artifactIds.length > 0) {
-            hidden = data.artifactIds.every((artifactId: string) => !visibleMessageIds.has(artifactId));
+          if (viewMode === 'agent') {
+            layouts = await indexedDBService.getAllAgentViewLayouts();
           } else {
-            const sourceNode = updatedNodes.find((n) => n.id === edge.source);
-            const targetNode = updatedNodes.find((n) => n.id === edge.target);
-            hidden = !!(sourceNode?.hidden || targetNode?.hidden);
+            layouts = await indexedDBService.getAllBlackboardViewLayouts();
           }
-          return {
-            ...edge,
-            hidden,
-          };
-        });
 
-        set({ nodes: updatedNodes, edges: updatedEdges });
+          // Convert to Map
+          const positions = new Map<string, { x: number; y: number }>();
+          layouts.forEach((layout) => {
+            positions.set(layout.node_id, { x: layout.x, y: layout.y });
+          });
+
+          set({ savedPositions: positions });
+          console.log(`[GraphStore] Loaded ${positions.size} saved positions for ${viewMode} view`);
+        } catch (error) {
+          console.error('[GraphStore] Failed to load saved positions:', error);
+        }
+      },
+
+      // UI state actions
+      setViewMode: (viewMode) => {
+        set({ viewMode });
       },
     }),
     { name: 'graphStore' }