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

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

@@ -0,0 +1,116 @@
+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;
+  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 || '';
+
+  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: '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;

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

@@ -0,0 +1,407 @@
+/* ========================================
+   Dashboard Layout - Premium Dark Theme
+   Uses design system from frontend/src/styles/variables.css
+   ======================================== */
+
+/* Layout Container */
+.dashboard-layout {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-bg-base);
+  overflow: hidden;
+}
+
+/* ========================================
+   Header
+   ======================================== */
+
+.dashboard-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-layout-md);
+  padding: var(--space-component-md) var(--space-layout-sm);
+  background: var(--color-bg-surface);
+  border-bottom: var(--border-subtle);
+  box-shadow: var(--shadow-sm);
+  z-index: 100;
+}
+
+.dashboard-title {
+  margin: 0;
+  font-size: var(--font-size-h3);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  letter-spacing: var(--letter-spacing-tight);
+  white-space: nowrap;
+}
+
+/* ========================================
+   View Toggle - Premium Pill Design
+   ======================================== */
+
+.view-toggle-container {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-md);
+  flex: 1;
+  justify-content: center;
+}
+
+.view-toggle-label {
+  font-size: var(--font-size-body-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-tertiary);
+  letter-spacing: var(--letter-spacing-wide);
+  text-transform: uppercase;
+  font-size: var(--font-size-caption);
+}
+
+.view-toggle-group {
+  display: inline-flex;
+  background: var(--color-bg-elevated);
+  padding: var(--spacing-1);
+  border-radius: var(--radius-full);
+  border: var(--border-subtle);
+  box-shadow: var(--shadow-inner);
+  gap: var(--gap-xs);
+}
+
+.view-toggle-button {
+  position: relative;
+  padding: var(--space-component-sm) var(--space-component-lg);
+  background: transparent;
+  color: var(--color-text-tertiary);
+  border: none;
+  border-radius: var(--radius-full);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-body-sm);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: var(--transition-colors), var(--transition-transform);
+  white-space: nowrap;
+}
+
+.view-toggle-button:hover:not(.active) {
+  color: var(--color-text-secondary);
+  background: var(--color-bg-overlay);
+}
+
+.view-toggle-button.active {
+  background: var(--color-primary-500);
+  color: var(--color-text-on-primary);
+  box-shadow: var(--shadow-sm);
+}
+
+.view-toggle-button:active {
+  transform: scale(0.98);
+}
+
+.view-toggle-button:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-glow-primary);
+}
+
+/* ========================================
+   Dashboard Actions
+   ======================================== */
+
+.dashboard-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-md);
+}
+
+/* Icon Button - Subtle, Icon-based Clear Button */
+.icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: var(--spacing-2);
+  background: transparent;
+  color: var(--color-text-tertiary);
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: var(--transition-colors), var(--transition-transform);
+}
+
+.icon-button:hover {
+  background: var(--color-bg-overlay);
+  color: var(--color-text-secondary);
+}
+
+.icon-button:active {
+  transform: scale(0.95);
+}
+
+.icon-button:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-glow-primary);
+}
+
+.help-button:hover {
+  color: var(--color-primary-500);
+  background: var(--color-primary-50);
+}
+
+.help-button:focus-visible {
+  box-shadow: var(--shadow-glow-primary);
+}
+
+.clear-button:hover {
+  color: var(--color-error);
+  background: var(--color-error-bg);
+}
+
+.clear-button:focus-visible {
+  box-shadow: var(--shadow-glow-error);
+}
+
+/* Controls Toggle - Elegant Premium Button */
+.controls-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  padding: var(--space-component-sm) var(--space-component-md);
+  background: var(--color-bg-elevated);
+  color: var(--color-text-secondary);
+  border: var(--border-default);
+  border-radius: var(--radius-md);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-body-sm);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: var(--transition-colors), var(--transition-shadow), var(--transition-transform);
+  white-space: nowrap;
+}
+
+/* Primary variant - for important actions like Publish */
+.controls-toggle.primary {
+  background: var(--color-primary-500);
+  color: var(--color-text-on-primary);
+  border-color: var(--color-primary-500);
+  box-shadow: var(--shadow-md);
+  font-weight: var(--font-weight-semibold);
+}
+
+.controls-toggle.primary:hover {
+  background: var(--color-primary-600);
+  border-color: var(--color-primary-600);
+  box-shadow: var(--shadow-lg);
+}
+
+.controls-toggle.primary.active {
+  background: var(--color-primary-700);
+  border-color: var(--color-primary-700);
+}
+
+.controls-toggle:hover {
+  background: var(--color-bg-surface);
+  color: var(--color-text-primary);
+  border-color: var(--color-border-strong);
+  box-shadow: var(--shadow-sm);
+}
+
+.controls-toggle.active {
+  background: var(--color-success);
+  color: var(--color-text-on-primary);
+  border-color: var(--color-success);
+  box-shadow: var(--shadow-sm);
+}
+
+.controls-toggle.active:hover {
+  background: var(--color-success-dark);
+  border-color: var(--color-success-dark);
+}
+
+.controls-toggle:active {
+  transform: scale(0.98);
+}
+
+.controls-toggle:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-glow-primary);
+}
+
+.controls-toggle.active:focus-visible {
+  box-shadow: var(--shadow-glow-success);
+}
+
+.controls-toggle svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  transition: var(--transition-transform);
+}
+
+.controls-toggle.active svg {
+  transform: rotate(45deg);
+}
+
+/* ========================================
+   Main Content Area
+   ======================================== */
+
+.dashboard-main {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  position: relative;
+}
+
+.graph-container {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+/* ========================================
+   Controls Sidebar - Premium Glassmorphism
+   ======================================== */
+
+.controls-sidebar {
+  width: 400px;
+  background: var(--color-glass-bg);
+  backdrop-filter: blur(var(--blur-lg));
+  -webkit-backdrop-filter: blur(var(--blur-lg));
+  border-left: var(--border-subtle);
+  box-shadow: var(--shadow-lg);
+  overflow-y: auto;
+  animation: slideInRight var(--duration-slow) var(--ease-smooth);
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.controls-sidebar-inner {
+  padding: var(--space-layout-sm);
+}
+
+.controls-title {
+  margin: 0 0 var(--space-layout-sm) 0;
+  font-size: var(--font-size-h4);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+.control-section {
+  margin-bottom: var(--space-layout-md);
+}
+
+.control-section-title {
+  margin: 0 0 var(--space-component-md) 0;
+  font-size: var(--font-size-h5);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+}
+
+/* ========================================
+   Scrollbar Styling
+   ======================================== */
+
+.controls-sidebar::-webkit-scrollbar {
+  width: 8px;
+}
+
+.controls-sidebar::-webkit-scrollbar-track {
+  background: var(--color-bg-elevated);
+}
+
+.controls-sidebar::-webkit-scrollbar-thumb {
+  background: var(--color-border-default);
+  border-radius: var(--radius-full);
+  transition: var(--transition-colors);
+}
+
+.controls-sidebar::-webkit-scrollbar-thumb:hover {
+  background: var(--color-border-strong);
+}
+
+/* ========================================
+   Responsive Design
+   ======================================== */
+
+@media (max-width: 1024px) {
+  .dashboard-header {
+    flex-wrap: wrap;
+    gap: var(--gap-md);
+  }
+
+  .view-toggle-container {
+    order: 3;
+    width: 100%;
+    justify-content: center;
+  }
+
+  .controls-sidebar {
+    width: 320px;
+  }
+}
+
+@media (max-width: 768px) {
+  .dashboard-title {
+    font-size: var(--font-size-h4);
+  }
+
+  .view-toggle-button {
+    padding: var(--spacing-2) var(--spacing-4);
+    font-size: var(--font-size-caption);
+  }
+
+  .controls-toggle span {
+    display: none;
+  }
+
+  .controls-sidebar {
+    width: 280px;
+  }
+}
+
+/* ========================================
+   Accessibility - Reduced Motion
+   ======================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  .controls-sidebar {
+    animation: none;
+  }
+
+  .view-toggle-button,
+  .icon-button,
+  .controls-toggle {
+    transition: none;
+  }
+
+  .controls-toggle svg {
+    transition: none;
+  }
+}
+
+/* ========================================
+   Print Styles
+   ======================================== */
+
+@media print {
+  .dashboard-header,
+  .controls-sidebar {
+    display: none;
+  }
+
+  .dashboard-main {
+    flex: 1;
+  }
+}