flock-core 0.5.0b28__py3-none-any.whl → 0.5.0b51__py3-none-any.whl

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

@@ -0,0 +1,220 @@
+import React, { useEffect, useRef, useState, useMemo } from 'react';
+import { useStreamStore, StreamingOutputData } from '../../store/streamStore';
+import { getWebSocketClient } from '../../services/websocket';
+
+interface LiveOutputTabProps {
+  nodeId: string;
+  nodeType: 'agent' | 'message';
+}
+
+// Stable empty array to avoid re-renders
+const EMPTY_OUTPUTS: StreamingOutputData[] = [];
+
+const LiveOutputTab: React.FC<LiveOutputTabProps> = ({ nodeId, nodeType }) => {
+  const [autoScroll, setAutoScroll] = useState(true);
+  const [isLoadingHistory, setIsLoadingHistory] = useState(false);
+  // Use direct Map access to avoid infinite re-renders
+  const outputs = useStreamStore((state) => state.outputs.get(nodeId) ?? EMPTY_OUTPUTS);
+  const addOutput = useStreamStore((state) => state.addOutput);
+
+  // Fetch historical streaming output on mount
+  useEffect(() => {
+    if (nodeType !== 'agent') return;
+
+    const fetchHistory = async () => {
+      setIsLoadingHistory(true);
+      try {
+        const response = await fetch(`/api/streaming-history/${nodeId}`);
+        if (response.ok) {
+          const data = await response.json();
+          // Load historical events into the store
+          if (data.events && Array.isArray(data.events)) {
+            data.events.forEach((event: StreamingOutputData) => {
+              addOutput(nodeId, event);
+            });
+          }
+        }
+      } catch (error) {
+        console.error(`Failed to fetch streaming history for ${nodeId}:`, error);
+      } finally {
+        setIsLoadingHistory(false);
+      }
+    };
+
+    fetchHistory();
+  }, [nodeId, nodeType, addOutput]);
+
+  // Subscribe to WebSocket streaming_output events
+  useEffect(() => {
+    if (nodeType !== 'agent') return;
+
+    const wsClient = getWebSocketClient();
+
+    const handleStreamingOutput = (data: StreamingOutputData) => {
+      // Filter by agent name (nodeId is the agent name)
+      if (data.agent_name === nodeId) {
+        addOutput(nodeId, data);
+      }
+    };
+
+    wsClient.on('streaming_output', handleStreamingOutput);
+
+    return () => {
+      wsClient.off('streaming_output', handleStreamingOutput);
+    };
+  }, [nodeId, nodeType, addOutput]);
+
+  // Concatenate all llm_tokens into continuous text, logs/stdout/stderr on separate lines
+  const displayContent = useMemo(() => {
+    let text = '';
+    for (const output of outputs) {
+      if (output.output_type === 'llm_token') {
+        // Append tokens inline without line breaks
+        text += output.content;
+      } else {
+        // Add line break before log/stdout/stderr if previous content doesn't end with one
+        if (text && !text.endsWith('\n')) text += '\n';
+        text += output.content;
+        text += '\n'
+      }
+    }
+    return text;
+  }, [outputs]);
+
+  const containerEndRef = useRef<HTMLDivElement>(null);
+
+  // Auto-scroll to bottom when new output arrives
+  useEffect(() => {
+    if (autoScroll && containerEndRef.current) {
+      containerEndRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [displayContent, autoScroll]);
+
+  const hasFinalOutput = outputs.some((o) => o.is_final);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        background: 'var(--color-bg-elevated)',
+      }}
+    >
+      {/* Auto-scroll toggle */}
+      <div
+        style={{
+          padding: 'var(--space-component-sm) var(--space-component-md)',
+          background: 'var(--color-bg-surface)',
+          borderBottom: 'var(--border-width-1) solid var(--color-border-subtle)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <span
+          style={{
+            color: 'var(--color-text-tertiary)',
+            fontSize: 'var(--font-size-caption)',
+            fontWeight: 'var(--font-weight-medium)',
+            fontFamily: 'var(--font-family-sans)',
+          }}
+        >
+          {outputs.length} {outputs.length === 1 ? 'event' : 'events'}
+        </span>
+        <label
+          style={{
+            color: 'var(--color-text-tertiary)',
+            fontSize: 'var(--font-size-caption)',
+            fontFamily: 'var(--font-family-sans)',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 'var(--gap-sm)',
+            cursor: 'pointer',
+            userSelect: 'none',
+          }}
+        >
+          <input
+            type="checkbox"
+            checked={autoScroll}
+            onChange={(e) => setAutoScroll(e.target.checked)}
+            style={{ cursor: 'pointer', accentColor: 'var(--color-primary-500)' }}
+          />
+          Auto-scroll
+        </label>
+      </div>
+
+      {/* Output display */}
+      <div
+        data-testid={`live-output-${nodeId}`}
+        style={{
+          flex: 1,
+          overflow: 'auto',
+          position: 'relative',
+          padding: 'var(--spacing-2)',
+        }}
+      >
+        {isLoadingHistory ? (
+          <div
+            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 history...
+          </div>
+        ) : outputs.length === 0 ? (
+          <div
+            data-testid="empty-output"
+            style={{
+              padding: 'var(--space-layout-md)',
+              color: 'var(--color-text-muted)',
+              fontSize: 'var(--font-size-body-sm)',
+              fontFamily: 'var(--font-family-sans)',
+              textAlign: 'center',
+            }}
+          >
+            Idle - no output
+          </div>
+        ) : (
+          <>
+            <pre
+              style={{
+                margin: 0,
+                color: 'var(--color-tertiary-400)',
+                fontFamily: 'var(--font-family-mono)',
+                fontSize: 'var(--font-size-caption)',
+                whiteSpace: 'pre-wrap',
+                wordBreak: 'break-word',
+                lineHeight: 'var(--line-height-relaxed)',
+              }}
+            >
+              {displayContent}
+            </pre>
+            {hasFinalOutput && (
+              <div
+                data-testid="final-marker"
+                style={{
+                  color: 'var(--color-text-muted)',
+                  fontSize: 'var(--font-size-caption)',
+                  fontFamily: 'var(--font-family-mono)',
+                  padding: 'var(--spacing-2) 0',
+                  borderTop: 'var(--border-width-1) solid var(--color-border-subtle)',
+                  marginTop: 'var(--spacing-2)',
+                }}
+              >
+                --- End of output ---
+              </div>
+            )}
+            <div ref={containerEndRef} />
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default LiveOutputTab;

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

@@ -0,0 +1,299 @@
+import React, { useMemo, useState } from 'react';
+import { useGraphStore } from '../../store/graphStore';
+
+interface MessageHistoryTabProps {
+  nodeId: string;
+  nodeType: 'agent' | 'message';
+}
+
+interface MessageHistoryEntry {
+  id: string;
+  type: string;
+  direction: 'consumed' | 'published';
+  payload: any;
+  timestamp: number;
+  correlationId: string;
+}
+
+const MessageHistoryTab: React.FC<MessageHistoryTabProps> = ({ nodeId, nodeType }) => {
+  const messages = useGraphStore((state) => state.messages);
+  const agents = useGraphStore((state) => state.agents);
+  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
+
+  // Build message history based on node type
+  const messageHistory = useMemo(() => {
+    const history: MessageHistoryEntry[] = [];
+
+    if (nodeType === 'agent') {
+      const agent = agents.get(nodeId);
+      if (!agent) return history;
+
+      // Get all messages
+      messages.forEach((message) => {
+        // Check if this agent consumed this message
+        const isConsumed = agent.subscriptions.includes(message.type);
+
+        // Check if this agent published this message
+        const isPublished = message.producedBy === nodeId;
+
+        if (isConsumed) {
+          history.push({
+            id: message.id,
+            type: message.type,
+            direction: 'consumed',
+            payload: message.payload,
+            timestamp: message.timestamp,
+            correlationId: message.correlationId,
+          });
+        }
+
+        if (isPublished) {
+          history.push({
+            id: `${message.id}-published`,
+            type: message.type,
+            direction: 'published',
+            payload: message.payload,
+            timestamp: message.timestamp,
+            correlationId: message.correlationId,
+          });
+        }
+      });
+    } else if (nodeType === 'message') {
+      // For message nodes, just show that single message
+      const message = messages.get(nodeId);
+      if (message) {
+        history.push({
+          id: message.id,
+          type: message.type,
+          direction: 'published',
+          payload: message.payload,
+          timestamp: message.timestamp,
+          correlationId: message.correlationId,
+        });
+      }
+    }
+
+    // Sort by timestamp (most recent first)
+    return history.sort((a, b) => b.timestamp - a.timestamp);
+  }, [nodeId, nodeType, messages, agents]);
+
+  const formatTimestamp = (timestamp: number) => {
+    return new Date(timestamp).toLocaleString();
+  };
+
+  const formatPayload = (payload: any) => {
+    try {
+      return JSON.stringify(payload, null, 2);
+    } catch {
+      return String(payload);
+    }
+  };
+
+  const toggleRowExpansion = (id: string) => {
+    setExpandedRows((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  return (
+    <div
+      data-testid={`message-history-${nodeId}`}
+      style={{
+        height: '100%',
+        overflow: 'auto',
+        background: 'var(--color-bg-elevated)',
+        color: 'var(--color-text-primary)',
+      }}
+    >
+      {messageHistory.length === 0 ? (
+        <div
+          data-testid="empty-messages"
+          style={{
+            padding: 'var(--space-layout-md)',
+            color: 'var(--color-text-muted)',
+            fontSize: 'var(--font-size-body-sm)',
+            fontFamily: 'var(--font-family-sans)',
+            textAlign: 'center',
+          }}
+        >
+          No messages yet
+        </div>
+      ) : (
+        <table
+          data-testid="message-table"
+          style={{
+            width: '100%',
+            borderCollapse: 'collapse',
+            fontSize: 'var(--font-size-caption)',
+            fontFamily: 'var(--font-family-sans)',
+          }}
+        >
+          <thead>
+            <tr
+              style={{
+                background: 'var(--color-bg-surface)',
+                borderBottom: 'var(--border-width-1) solid var(--color-border-subtle)',
+                position: 'sticky',
+                top: 0,
+                zIndex: 1,
+              }}
+            >
+              <th
+                style={{
+                  padding: 'var(--space-component-sm) var(--space-component-md)',
+                  textAlign: 'left',
+                  fontWeight: 'var(--font-weight-semibold)',
+                  color: 'var(--color-text-secondary)',
+                }}
+              >
+                Time
+              </th>
+              <th
+                style={{
+                  padding: 'var(--space-component-sm) var(--space-component-md)',
+                  textAlign: 'left',
+                  fontWeight: 'var(--font-weight-semibold)',
+                  color: 'var(--color-text-secondary)',
+                }}
+              >
+                Direction
+              </th>
+              <th
+                style={{
+                  padding: 'var(--space-component-sm) var(--space-component-md)',
+                  textAlign: 'left',
+                  fontWeight: 'var(--font-weight-semibold)',
+                  color: 'var(--color-text-secondary)',
+                }}
+              >
+                Type
+              </th>
+              <th
+                style={{
+                  padding: 'var(--space-component-sm) var(--space-component-md)',
+                  textAlign: 'left',
+                  fontWeight: 'var(--font-weight-semibold)',
+                  color: 'var(--color-text-secondary)',
+                }}
+              >
+                Correlation ID
+              </th>
+              <th
+                style={{
+                  padding: 'var(--space-component-sm) var(--space-component-md)',
+                  textAlign: 'left',
+                  fontWeight: 'var(--font-weight-semibold)',
+                  color: 'var(--color-text-secondary)',
+                }}
+              >
+                Payload
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {messageHistory.map((msg) => {
+              const isExpanded = expandedRows.has(msg.id);
+              return (
+                <React.Fragment key={msg.id}>
+                  <tr
+                    data-testid={`message-row-${msg.id}`}
+                    style={{
+                      borderBottom: 'var(--border-width-1) solid var(--color-border-subtle)',
+                      cursor: 'pointer',
+                      transition: 'var(--transition-colors)',
+                    }}
+                    onClick={() => toggleRowExpansion(msg.id)}
+                    onMouseEnter={(e) => {
+                      e.currentTarget.style.background = 'var(--color-bg-surface)';
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.background = 'transparent';
+                    }}
+                  >
+                    <td
+                      data-testid={`msg-time-${msg.id}`}
+                      style={{
+                        padding: 'var(--space-component-sm) var(--space-component-md)',
+                        whiteSpace: 'nowrap',
+                        color: 'var(--color-text-tertiary)',
+                      }}
+                    >
+                      {formatTimestamp(msg.timestamp)}
+                    </td>
+                    <td
+                      data-testid={`msg-direction-${msg.id}`}
+                      style={{
+                        padding: 'var(--space-component-sm) var(--space-component-md)',
+                        color:
+                          msg.direction === 'consumed'
+                            ? 'var(--color-tertiary-400)'
+                            : 'var(--color-success-light)',
+                        fontWeight: 'var(--font-weight-semibold)',
+                      }}
+                    >
+                      {msg.direction === 'consumed' ? '↓ Consumed' : '↑ Published'}
+                    </td>
+                    <td
+                      data-testid={`msg-type-${msg.id}`}
+                      style={{
+                        padding: 'var(--space-component-sm) var(--space-component-md)',
+                        fontFamily: 'var(--font-family-mono)',
+                        color: 'var(--color-text-primary)',
+                      }}
+                    >
+                      {msg.type}
+                    </td>
+                    <td
+                      data-testid={`msg-correlation-${msg.id}`}
+                      style={{
+                        padding: 'var(--space-component-sm) var(--space-component-md)',
+                        fontFamily: 'var(--font-family-mono)',
+                        fontSize: 'var(--font-size-overline)',
+                        color: 'var(--color-text-muted)',
+                      }}
+                    >
+                      {msg.correlationId}
+                    </td>
+                    <td
+                      data-testid={`msg-payload-${msg.id}`}
+                      style={{
+                        padding: 'var(--space-component-sm) var(--space-component-md)',
+                        maxWidth: '300px',
+                      }}
+                    >
+                      <pre
+                        style={{
+                          fontSize: 'var(--font-size-overline)',
+                          fontFamily: 'var(--font-family-mono)',
+                          maxHeight: isExpanded ? 'none' : '60px',
+                          overflow: isExpanded ? 'visible' : 'hidden',
+                          textOverflow: 'ellipsis',
+                          margin: 0,
+                          whiteSpace: isExpanded ? 'pre-wrap' : 'nowrap',
+                          color: 'var(--color-text-secondary)',
+                          background: 'var(--color-bg-base)',
+                          padding: 'var(--spacing-1)',
+                          borderRadius: 'var(--radius-sm)',
+                        }}
+                      >
+                        {formatPayload(msg.payload)}
+                      </pre>
+                    </td>
+                  </tr>
+                </React.Fragment>
+              );
+            })}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+};
+
+export default MessageHistoryTab;