flock-core 0.4.543__py3-none-any.whl → 0.5.0__py3-none-any.whl

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

@@ -0,0 +1,128 @@
+import React from 'react';
+import {
+  BaseEdge,
+  EdgeProps,
+  getBezierPath,
+  getStraightPath,
+  getSmoothStepPath,
+  getSimpleBezierPath,
+  EdgeLabelRenderer
+} from '@xyflow/react';
+import { useSettingsStore } from '../../store/settingsStore';
+
+/**
+ * Phase 4: Graph Visualization & Dual Views - MessageFlowEdge Component
+ *
+ * Custom edge for Agent View showing message flow between agents.
+ * Features:
+ * - Animated edge to show active message flow
+ * - Label with message type and count (e.g., "Movie (3)")
+ * - Arrow marker at target
+ *
+ * SPECIFICATION: docs/specs/003-real-time-dashboard/PLAN.md Phase 4
+ */
+
+export interface MessageFlowEdgeData {
+  messageType: string;
+  messageCount: number;
+  artifactIds: string[];
+  latestTimestamp: string;
+  labelOffset?: number; // Phase 11: Vertical offset to prevent label overlap
+}
+
+const MessageFlowEdge: React.FC<EdgeProps> = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  label,
+  style = {},
+  markerEnd,
+  data,
+}) => {
+  // Get edge settings from settings store
+  const edgeType = useSettingsStore((state) => state.graph.edgeType);
+  const edgeStrokeWidth = useSettingsStore((state) => state.graph.edgeStrokeWidth);
+  const edgeAnimation = useSettingsStore((state) => state.graph.edgeAnimation);
+  const showEdgeLabels = useSettingsStore((state) => state.graph.showEdgeLabels);
+
+  // Use appropriate path function based on settings
+  const getPath = () => {
+    const params = { sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition };
+    switch (edgeType) {
+      case 'straight':
+        return getStraightPath(params);
+      case 'smoothstep':
+        return getSmoothStepPath(params);
+      case 'simplebezier':
+        return getSimpleBezierPath(params);
+      case 'bezier':
+      default:
+        return getBezierPath(params);
+    }
+  };
+
+  const [edgePath, labelX, labelY] = getPath();
+
+  // Phase 11 Bug Fix: Apply label offset to prevent overlap when multiple edges exist
+  const edgeData = data as MessageFlowEdgeData | undefined;
+  const labelOffset = edgeData?.labelOffset || 0;
+
+  const [isHovered, setIsHovered] = React.useState(false);
+
+  return (
+    <>
+      <BaseEdge
+        id={id}
+        path={edgePath}
+        style={{
+          ...style,
+          stroke: 'var(--color-edge-message)',
+          strokeWidth: isHovered ? edgeStrokeWidth + 1 : edgeStrokeWidth,
+          animation: edgeAnimation ? 'dash 20s linear infinite' : 'none',
+          transition: 'var(--transition-all)',
+          filter: isHovered ? 'drop-shadow(0 0 4px var(--color-edge-message))' : 'none',
+        }}
+        markerEnd={markerEnd}
+      />
+      {label && showEdgeLabels && (
+        <EdgeLabelRenderer>
+          <div
+            style={{
+              position: 'absolute',
+              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY + labelOffset}px)`,
+              fontSize: 'var(--font-size-caption)',
+              fontWeight: 'var(--font-weight-medium)',
+              background: 'var(--color-edge-label-bg)',
+              color: 'var(--color-edge-label-text)',
+              padding: 'var(--spacing-1) var(--spacing-2)',
+              borderRadius: 'var(--radius-sm)',
+              border: 'var(--border-width-1) solid var(--color-edge-message)',
+              pointerEvents: 'all',
+              backdropFilter: 'blur(var(--blur-sm))',
+              boxShadow: 'var(--shadow-sm)',
+              transition: 'var(--transition-all)',
+            }}
+            className="nodrag nopan"
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+          >
+            {label}
+          </div>
+        </EdgeLabelRenderer>
+      )}
+      <style>{`
+        @keyframes dash {
+          to {
+            stroke-dashoffset: -100;
+          }
+        }
+      `}</style>
+    </>
+  );
+};
+
+export default MessageFlowEdge;

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

@@ -0,0 +1,64 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ReactFlowProvider } from '@xyflow/react';
+import MessageNode from './MessageNode';
+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 =>
+    ({
+      id: 'msg-1',
+      data,
+      selected,
+      type: 'message',
+      isConnectable: true,
+      dragging: false,
+      zIndex: 0,
+      selectable: true,
+      deletable: true,
+      draggable: true,
+    }) as unknown as NodeProps;
+
+  it('should render artifact type', () => {
+    const data: MessageNodeData = {
+      artifactType: 'Movie',
+      payloadPreview: '{"title": "Test Movie"}',
+      payload: { title: 'Test Movie' },
+      producedBy: 'movie',
+      consumedBy: ['tagline'],
+      timestamp: Date.now(),
+    };
+
+    render(
+      <ReactFlowProvider>
+        <MessageNode {...createNodeProps(data)} />
+      </ReactFlowProvider>
+    );
+    expect(screen.getByText('Movie')).toBeInTheDocument();
+  });
+
+  it('should render produced by', () => {
+    const data: MessageNodeData = {
+      artifactType: 'Movie',
+      payloadPreview: '{"title": "Test Movie"}',
+      payload: { title: 'Test Movie' },
+      producedBy: 'movie',
+      consumedBy: [],
+      timestamp: Date.now(),
+    };
+
+    render(
+      <ReactFlowProvider>
+        <MessageNode {...createNodeProps(data)} />
+      </ReactFlowProvider>
+    );
+    // Text is split across elements: <div>by: <span>movie</span></div>
+    // Use getByText with function matcher to find text across elements
+    expect(screen.getByText((_content, element) => {
+      return element?.textContent === 'by: movie';
+    })).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,129 @@
+import { memo } from 'react';
+import { NodeProps, Handle, Position } from '@xyflow/react';
+import JsonView from '@uiw/react-json-view';
+
+// 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;
+  const timestamp = nodeData.timestamp;
+  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' : ''}`}
+      style={{
+        padding: '12px',
+        border: `2px solid ${selected ? '#8b5cf6' : '#e2e8f0'}`,
+        borderRadius: '8px',
+        backgroundColor: '#fefce8',
+        minWidth: '300px',
+        maxWidth: '600px',
+        width: 'auto',
+        boxShadow: selected ? '0 4px 12px rgba(139,92,246,0.3)' : '0 2px 8px rgba(0,0,0,0.1)',
+        transition: 'all 0.2s ease',
+      }}
+    >
+      <Handle type="target" position={Position.Left} />
+      <Handle type="source" position={Position.Right} />
+
+      {/* Header */}
+      <div style={{
+        marginBottom: '10px',
+        paddingBottom: '8px',
+        borderBottom: '1px solid #e2e8f0'
+      }}>
+        <div style={{
+          fontWeight: 700,
+          fontSize: '14px',
+          marginBottom: '4px',
+          color: '#713f12',
+          fontFamily: 'monospace'
+        }}>
+          {artifactType}
+        </div>
+        <div style={{
+          fontSize: '10px',
+          color: '#a8a29e',
+          marginBottom: '4px',
+          fontFamily: 'monospace',
+          wordBreak: 'break-all'
+        }}>
+          id: {artifactId}
+        </div>
+        <div style={{
+          fontSize: '11px',
+          color: '#a8a29e',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center'
+        }}>
+          <div>by: <span style={{ color: '#78716c', fontWeight: 600 }}>{producedBy}</span></div>
+          <div>{new Date(timestamp).toLocaleTimeString()}</div>
+        </div>
+      </div>
+
+      {/* Content: Streaming text or JSON Payload */}
+      <div style={{
+        fontSize: '12px',
+        maxHeight: '600px',
+        overflowY: 'auto',
+        overflowX: 'auto',
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word'
+      }}>
+        {isStreaming ? (
+          /* Streaming: Show raw text with cursor */
+          <div style={{
+            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+            color: '#78716c',
+            lineHeight: '1.5'
+          }}>
+            {streamingText}
+            <span style={{
+              display: 'inline-block',
+              width: '8px',
+              height: '14px',
+              backgroundColor: '#8b5cf6',
+              marginLeft: '2px',
+              animation: 'blink 1s step-end infinite'
+            }} />
+            <style>{`
+              @keyframes blink {
+                0%, 50% { opacity: 1; }
+                51%, 100% { opacity: 0; }
+              }
+            `}</style>
+          </div>
+        ) : (
+          /* Complete: Show beautiful JSON */
+          <JsonView
+            value={payload}
+            collapsed={false}
+            displayDataTypes={false}
+            shortenTextAfterLength={0}
+            style={{
+              backgroundColor: 'transparent',
+              fontSize: '12px',
+              fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+              '--w-rjv-line-color': '#78716c',
+              '--w-rjv-key-string': '#713f12',
+              '--w-rjv-info-color': '#a8a29e',
+            } as React.CSSProperties}
+          />
+        )}
+      </div>
+    </div>
+  );
+});
+
+MessageNode.displayName = 'MessageNode';
+
+export default MessageNode;

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { MiniMap as ReactFlowMiniMap } from '@xyflow/react';
+
+/**
+ * Phase 4: Graph Visualization & Dual Views - MiniMap Component
+ *
+ * Wrapper around React Flow's MiniMap component for graph navigation.
+ * Features:
+ * - Positioned in bottom-right corner
+ * - Size: 150x100px
+ * - Color-coded nodes: agents (blue), messages (green)
+ *
+ * SPECIFICATION: docs/specs/003-real-time-dashboard/PLAN.md Phase 4
+ */
+
+const MiniMap: React.FC = () => {
+  // Color function for nodes in minimap - using design system colors
+  const nodeColor = (node: any) => {
+    switch (node.type) {
+      case 'agent':
+        return '#3b82f6'; // Blue for agents (var(--color-node-agent-border))
+      case 'message':
+        return '#f59e0b'; // Amber for messages (var(--color-node-message-border))
+      default:
+        return '#64748b'; // Gray for other nodes (var(--color-idle))
+    }
+  };
+
+  return (
+    <ReactFlowMiniMap
+      nodeColor={nodeColor}
+      style={{
+        width: 150,
+        height: 100,
+        backgroundColor: 'var(--color-bg-surface)',
+        border: 'var(--border-default)',
+        borderRadius: 'var(--radius-lg)',
+      }}
+      maskColor="rgba(10, 10, 11, 0.7)"
+      position="bottom-right"
+      pannable
+      zoomable
+    />
+  );
+};
+
+export default MiniMap;

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

@@ -0,0 +1,123 @@
+import React from 'react';
+import {
+  BaseEdge,
+  EdgeProps,
+  getBezierPath,
+  getStraightPath,
+  getSmoothStepPath,
+  getSimpleBezierPath,
+  EdgeLabelRenderer
+} from '@xyflow/react';
+import { useSettingsStore } from '../../store/settingsStore';
+
+/**
+ * Phase 4: Graph Visualization & Dual Views - TransformEdge Component
+ *
+ * Custom edge for Blackboard View showing transformation between artifacts.
+ * Features:
+ * - Dashed line style to indicate transformation
+ * - Label with agent name
+ * - Arrow marker at target
+ *
+ * SPECIFICATION: docs/specs/003-real-time-dashboard/PLAN.md Phase 4
+ */
+
+export interface TransformEdgeData {
+  transformerAgent: string;
+  runId: string;
+  durationMs?: number;
+  labelOffset?: number; // Phase 11: Vertical offset to prevent label overlap
+}
+
+const TransformEdge: React.FC<EdgeProps> = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  label,
+  style = {},
+  markerEnd,
+  data,
+  selected,
+}) => {
+  // Get edge settings from settings store
+  const edgeType = useSettingsStore((state) => state.graph.edgeType);
+  const edgeStrokeWidth = useSettingsStore((state) => state.graph.edgeStrokeWidth);
+  const showEdgeLabels = useSettingsStore((state) => state.graph.showEdgeLabels);
+
+  // Use appropriate path function based on settings
+  const getPath = () => {
+    const params = { sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition };
+    switch (edgeType) {
+      case 'straight':
+        return getStraightPath(params);
+      case 'smoothstep':
+        return getSmoothStepPath(params);
+      case 'simplebezier':
+        return getSimpleBezierPath(params);
+      case 'bezier':
+      default:
+        return getBezierPath(params);
+    }
+  };
+
+  const [edgePath, labelX, labelY] = getPath();
+
+  // Phase 11 Bug Fix: Apply label offset to prevent overlap when multiple edges exist
+  const edgeData = data as TransformEdgeData | undefined;
+  const labelOffset = edgeData?.labelOffset || 0;
+
+  const [isHovered, setIsHovered] = React.useState(false);
+
+  // Determine edge color based on state
+  const edgeColor = selected || isHovered ? 'var(--color-edge-active)' : 'var(--color-edge-default)';
+
+  return (
+    <>
+      <BaseEdge
+        id={id}
+        path={edgePath}
+        style={{
+          ...style,
+          stroke: edgeColor,
+          strokeWidth: isHovered || selected ? edgeStrokeWidth + 1 : edgeStrokeWidth,
+          strokeDasharray: '5,5',
+          transition: 'var(--transition-all)',
+          filter: isHovered || selected ? `drop-shadow(0 0 4px ${edgeColor})` : 'none',
+        }}
+        markerEnd={markerEnd}
+      />
+      {label && showEdgeLabels && (
+        <EdgeLabelRenderer>
+          <div
+            style={{
+              position: 'absolute',
+              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY + labelOffset}px)`,
+              fontSize: 'var(--font-size-caption)',
+              fontWeight: 'var(--font-weight-medium)',
+              background: 'var(--color-edge-label-bg)',
+              color: 'var(--color-edge-label-text)',
+              padding: 'var(--spacing-1) var(--spacing-2)',
+              borderRadius: 'var(--radius-sm)',
+              border: `var(--border-width-1) solid ${edgeColor}`,
+              pointerEvents: 'all',
+              backdropFilter: 'blur(var(--blur-sm))',
+              boxShadow: 'var(--shadow-sm)',
+              transition: 'var(--transition-all)',
+            }}
+            className="nodrag nopan"
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+          >
+            {label}
+          </div>
+        </EdgeLabelRenderer>
+      )}
+    </>
+  );
+};
+
+export default TransformEdge;