flock-core 0.5.0b55__py3-none-any.whl → 0.5.0b57__py3-none-any.whl

flock/frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flock-ui",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Flock Flow Real-Time Dashboard Frontend",
   "type": "module",
   "scripts": {

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

@@ -21,16 +21,20 @@ import { useUIStore } from '../../store/uiStore';
 import { useModuleStore } from '../../store/moduleStore';
 import { useSettingsStore } from '../../store/settingsStore';
 import { moduleRegistry } from '../modules/ModuleRegistry';
-import { applyDagreLayout } from '../../services/layout';
+import {
+  applyHierarchicalLayout,
+  applyCircularLayout,
+  applyGridLayout,
+  applyRandomLayout
+} from '../../services/layout';
 import { usePersistence } from '../../hooks/usePersistence';
 import { v4 as uuidv4 } from 'uuid';
 
 const GraphCanvas: React.FC = () => {
-  const { fitView, getIntersectingNodes } = useReactFlow();
+  const { fitView, getIntersectingNodes, screenToFlowPosition } = useReactFlow();
 
   const mode = useUIStore((state) => state.mode);
   const openDetailWindow = useUIStore((state) => state.openDetailWindow);
-  const layoutDirection = useSettingsStore((state) => state.advanced.layoutDirection);
   const nodes = useGraphStore((state) => state.nodes);
   const edges = useGraphStore((state) => state.edges);
   const agents = useGraphStore((state) => state.agents);
@@ -48,6 +52,7 @@ const GraphCanvas: React.FC = () => {
 
   const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
   const [showModuleSubmenu, setShowModuleSubmenu] = useState(false);
+  const [showLayoutSubmenu, setShowLayoutSubmenu] = useState(false);
 
   // Persistence hook - loads positions on mount and handles saves
   const { saveNodePosition } = usePersistence();
@@ -111,21 +116,52 @@ const GraphCanvas: React.FC = () => {
     [edges]
   );
 
-  // Auto-layout handler
-  const handleAutoLayout = useCallback(() => {
-    const nodeSpacing = useSettingsStore.getState().advanced.nodeSpacing;
-    const rankSpacing = useSettingsStore.getState().advanced.rankSpacing;
-    const layoutedNodes = applyDagreLayout(nodes, edges, layoutDirection || 'TB', nodeSpacing, rankSpacing);
+  // Generic layout handler
+  const applyLayout = useCallback((layoutType: string) => {
+    // Get the React Flow pane element to find its actual center
+    const pane = document.querySelector('.react-flow__pane');
+    let viewportCenter = { x: 0, y: 0 };
+
+    if (pane) {
+      const rect = pane.getBoundingClientRect();
+      // Convert screen center of the pane to flow coordinates
+      viewportCenter = screenToFlowPosition({
+        x: rect.left + rect.width / 2,
+        y: rect.top + rect.height / 2,
+      });
+    }
+
+    let result;
+    switch (layoutType) {
+      case 'hierarchical-vertical':
+        result = applyHierarchicalLayout(nodes, edges, { direction: 'TB', center: viewportCenter });
+        break;
+      case 'hierarchical-horizontal':
+        result = applyHierarchicalLayout(nodes, edges, { direction: 'LR', center: viewportCenter });
+        break;
+      case 'circular':
+        result = applyCircularLayout(nodes, edges, { center: viewportCenter });
+        break;
+      case 'grid':
+        result = applyGridLayout(nodes, edges, { center: viewportCenter });
+        break;
+      case 'random':
+        result = applyRandomLayout(nodes, edges, { center: viewportCenter });
+        break;
+      default:
+        result = applyHierarchicalLayout(nodes, edges, { direction: 'TB', center: viewportCenter });
+    }
 
     // Update nodes with new positions
-    layoutedNodes.forEach((node) => {
+    result.nodes.forEach((node) => {
       updateNodePosition(node.id, node.position);
     });
 
-    useGraphStore.setState({ nodes: layoutedNodes });
+    useGraphStore.setState({ nodes: result.nodes });
     setContextMenu(null);
     setShowModuleSubmenu(false);
-  }, [nodes, edges, layoutDirection, updateNodePosition]);
+    setShowLayoutSubmenu(false);
+  }, [nodes, edges, updateNodePosition, screenToFlowPosition]);
 
   // Auto-zoom handler
   const handleAutoZoom = useCallback(() => {
@@ -163,6 +199,7 @@ const GraphCanvas: React.FC = () => {
   const onPaneClick = useCallback(() => {
     setContextMenu(null);
     setShowModuleSubmenu(false);
+    setShowLayoutSubmenu(false);
   }, []);
 
   // Node drag handler - prevent overlaps with collision detection
@@ -270,29 +307,170 @@ const GraphCanvas: React.FC = () => {
             minWidth: 180,
           }}
         >
-          <button
-            onClick={handleAutoLayout}
-            style={{
-              display: 'block',
-              width: '100%',
-              padding: 'var(--spacing-2) var(--spacing-4)',
-              border: 'none',
-              background: 'transparent',
-              cursor: 'pointer',
-              textAlign: 'left',
-              fontSize: 'var(--font-size-body-sm)',
-              color: 'var(--color-text-primary)',
-              transition: 'var(--transition-colors)',
-            }}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.background = 'var(--color-bg-overlay)';
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.background = 'transparent';
-            }}
-          >
-            Auto Layout
-          </button>
+          <div style={{ position: 'relative' }}>
+            <button
+              onMouseEnter={() => setShowLayoutSubmenu(true)}
+              onMouseLeave={(e) => {
+                const relatedTarget = e.relatedTarget as HTMLElement;
+                if (!relatedTarget || !relatedTarget.closest('.layout-submenu')) {
+                  setShowLayoutSubmenu(false);
+                }
+              }}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                width: '100%',
+                padding: 'var(--spacing-2) var(--spacing-4)',
+                border: 'none',
+                background: showLayoutSubmenu ? 'var(--color-bg-overlay)' : 'transparent',
+                cursor: 'pointer',
+                textAlign: 'left',
+                fontSize: 'var(--font-size-body-sm)',
+                color: 'var(--color-text-primary)',
+                transition: 'var(--transition-colors)',
+              }}
+            >
+              <span>Auto Layout</span>
+              <span style={{ marginLeft: 'var(--spacing-2)' }}>▶</span>
+            </button>
+
+            {/* Layout Submenu */}
+            {showLayoutSubmenu && (
+              <div
+                className="layout-submenu"
+                onMouseEnter={() => setShowLayoutSubmenu(true)}
+                onMouseLeave={() => setShowLayoutSubmenu(false)}
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: '100%',
+                  background: 'var(--color-bg-surface)',
+                  border: 'var(--border-default)',
+                  borderRadius: 'var(--radius-md)',
+                  boxShadow: 'var(--shadow-lg)',
+                  zIndex: 1001,
+                  minWidth: 180,
+                }}
+              >
+                <button
+                  onClick={() => applyLayout('hierarchical-vertical')}
+                  style={{
+                    display: 'block',
+                    width: '100%',
+                    padding: 'var(--spacing-2) var(--spacing-4)',
+                    border: 'none',
+                    background: 'transparent',
+                    cursor: 'pointer',
+                    textAlign: 'left',
+                    fontSize: 'var(--font-size-body-sm)',
+                    color: 'var(--color-text-primary)',
+                    transition: 'var(--transition-colors)',
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.background = 'var(--color-bg-overlay)';
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background = 'transparent';
+                  }}
+                >
+                  Hierarchical (Vertical)
+                </button>
+                <button
+                  onClick={() => applyLayout('hierarchical-horizontal')}
+                  style={{
+                    display: 'block',
+                    width: '100%',
+                    padding: 'var(--spacing-2) var(--spacing-4)',
+                    border: 'none',
+                    background: 'transparent',
+                    cursor: 'pointer',
+                    textAlign: 'left',
+                    fontSize: 'var(--font-size-body-sm)',
+                    color: 'var(--color-text-primary)',
+                    transition: 'var(--transition-colors)',
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.background = 'var(--color-bg-overlay)';
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background = 'transparent';
+                  }}
+                >
+                  Hierarchical (Horizontal)
+                </button>
+                <button
+                  onClick={() => applyLayout('circular')}
+                  style={{
+                    display: 'block',
+                    width: '100%',
+                    padding: 'var(--spacing-2) var(--spacing-4)',
+                    border: 'none',
+                    background: 'transparent',
+                    cursor: 'pointer',
+                    textAlign: 'left',
+                    fontSize: 'var(--font-size-body-sm)',
+                    color: 'var(--color-text-primary)',
+                    transition: 'var(--transition-colors)',
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.background = 'var(--color-bg-overlay)';
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background = 'transparent';
+                  }}
+                >
+                  Circular
+                </button>
+                <button
+                  onClick={() => applyLayout('grid')}
+                  style={{
+                    display: 'block',
+                    width: '100%',
+                    padding: 'var(--spacing-2) var(--spacing-4)',
+                    border: 'none',
+                    background: 'transparent',
+                    cursor: 'pointer',
+                    textAlign: 'left',
+                    fontSize: 'var(--font-size-body-sm)',
+                    color: 'var(--color-text-primary)',
+                    transition: 'var(--transition-colors)',
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.background = 'var(--color-bg-overlay)';
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background = 'transparent';
+                  }}
+                >
+                  Grid
+                </button>
+                <button
+                  onClick={() => applyLayout('random')}
+                  style={{
+                    display: 'block',
+                    width: '100%',
+                    padding: 'var(--spacing-2) var(--spacing-4)',
+                    border: 'none',
+                    background: 'transparent',
+                    cursor: 'pointer',
+                    textAlign: 'left',
+                    fontSize: 'var(--font-size-body-sm)',
+                    color: 'var(--color-text-primary)',
+                    transition: 'var(--transition-colors)',
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.background = 'var(--color-bg-overlay)';
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background = 'transparent';
+                  }}
+                >
+                  Random
+                </button>
+              </div>
+            )}
+          </div>
 
           <button
             onClick={handleAutoZoom}

flock/frontend/src/services/layout.ts

@@ -15,6 +15,7 @@ export interface LayoutOptions {
   direction?: 'TB' | 'LR' | 'BT' | 'RL';
   nodeSpacing?: number;
   rankSpacing?: number;
+  center?: { x: number; y: number };  // Optional center point for layout
 }
 
 export interface LayoutResult {
@@ -30,10 +31,6 @@ const DEFAULT_NODE_HEIGHT = 80;
 const MESSAGE_NODE_WIDTH = 150;
 const MESSAGE_NODE_HEIGHT = 60;
 
-// Default spacing (increased by 50% for better label visibility)
-const DEFAULT_NODE_SPACING = 75;  // Was 50
-const DEFAULT_RANK_SPACING = 150; // Was 100
-
 /**
  * Get node dimensions based on node type
  */
@@ -59,8 +56,7 @@ export function applyHierarchicalLayout(
 ): LayoutResult {
   const {
     direction = 'TB',
-    nodeSpacing = DEFAULT_NODE_SPACING,
-    rankSpacing = DEFAULT_RANK_SPACING,
+    center,
   } = options;
 
   // Handle empty graph
@@ -68,6 +64,21 @@ export function applyHierarchicalLayout(
     return { nodes: [], edges, width: 0, height: 0 };
   }
 
+  // Calculate dynamic spacing based on actual node sizes
+  // This ensures 200px minimum clearance regardless of node dimensions
+  let maxWidth = 0;
+  let maxHeight = 0;
+
+  nodes.forEach((node) => {
+    const { width, height } = getNodeDimensions(node);
+    maxWidth = Math.max(maxWidth, width);
+    maxHeight = Math.max(maxHeight, height);
+  });
+
+  // Spacing = half of max node size + 200px minimum clearance
+  const nodeSpacing = options.nodeSpacing ?? (maxWidth / 2 + 200);
+  const rankSpacing = options.rankSpacing ?? (maxHeight / 2 + 200);
+
   // Create a new directed graph
   const graph = new dagre.graphlib.Graph();
 
@@ -97,6 +108,15 @@ export function applyHierarchicalLayout(
   // Run the layout algorithm
   dagre.layout(graph);
 
+  // Get graph dimensions first to calculate offset
+  const graphConfig = graph.graph();
+  const graphWidth = (graphConfig.width || 0) + 40; // Add margin
+  const graphHeight = (graphConfig.height || 0) + 40; // Add margin
+
+  // Calculate offset to center the layout around viewport center (or 0,0 if no center provided)
+  const offsetX = center ? center.x - graphWidth / 2 : 0;
+  const offsetY = center ? center.y - graphHeight / 2 : 0;
+
   // Extract positioned nodes
   const layoutedNodes = nodes.map((node) => {
     const nodeWithPosition = graph.node(node.id);
@@ -107,22 +127,211 @@ export function applyHierarchicalLayout(
     return {
       ...node,
       position: {
-        x: nodeWithPosition.x - width / 2,
-        y: nodeWithPosition.y - height / 2,
+        x: nodeWithPosition.x - width / 2 + offsetX,
+        y: nodeWithPosition.y - height / 2 + offsetY,
       },
     };
   });
 
-  // Get graph dimensions
-  const graphConfig = graph.graph();
-  const width = (graphConfig.width || 0) + 40; // Add margin
-  const height = (graphConfig.height || 0) + 40; // Add margin
+  return {
+    nodes: layoutedNodes,
+    edges,
+    width: graphWidth,
+    height: graphHeight,
+  };
+}
+
+/**
+ * Apply circular layout - nodes arranged in a circle
+ */
+export function applyCircularLayout(
+  nodes: Node[],
+  edges: Edge[],
+  options: LayoutOptions = {}
+): LayoutResult {
+  const { center } = options;
+
+  if (nodes.length === 0) {
+    return { nodes: [], edges, width: 0, height: 0 };
+  }
+
+  // Calculate radius based on number of nodes and their sizes
+  let maxWidth = 0;
+  let maxHeight = 0;
+  nodes.forEach((node) => {
+    const { width, height } = getNodeDimensions(node);
+    maxWidth = Math.max(maxWidth, width);
+    maxHeight = Math.max(maxHeight, height);
+  });
+
+  const minSpacing = 200; // 200px minimum clearance
+  const nodeSize = Math.max(maxWidth, maxHeight);
+  const circumference = nodes.length * (nodeSize + minSpacing);
+  const radius = circumference / (2 * Math.PI);
+
+  const centerX = center?.x ?? 0;
+  const centerY = center?.y ?? 0;
+
+  const layoutedNodes = nodes.map((node, index) => {
+    const angle = (2 * Math.PI * index) / nodes.length;
+    const { width, height } = getNodeDimensions(node);
+
+    return {
+      ...node,
+      position: {
+        x: centerX + radius * Math.cos(angle) - width / 2,
+        y: centerY + radius * Math.sin(angle) - height / 2,
+      },
+    };
+  });
+
+  const graphWidth = radius * 2 + maxWidth;
+  const graphHeight = radius * 2 + maxHeight;
+
+  return {
+    nodes: layoutedNodes,
+    edges,
+    width: graphWidth,
+    height: graphHeight,
+  };
+}
+
+/**
+ * Apply grid layout - nodes arranged in a grid
+ */
+export function applyGridLayout(
+  nodes: Node[],
+  edges: Edge[],
+  options: LayoutOptions = {}
+): LayoutResult {
+  const { center } = options;
+
+  if (nodes.length === 0) {
+    return { nodes: [], edges, width: 0, height: 0 };
+  }
+
+  // Calculate grid dimensions
+  const cols = Math.ceil(Math.sqrt(nodes.length));
+  const rows = Math.ceil(nodes.length / cols);
+
+  let maxWidth = 0;
+  let maxHeight = 0;
+  nodes.forEach((node) => {
+    const { width, height } = getNodeDimensions(node);
+    maxWidth = Math.max(maxWidth, width);
+    maxHeight = Math.max(maxHeight, height);
+  });
+
+  const minSpacing = 200;
+  const cellWidth = maxWidth + minSpacing;
+  const cellHeight = maxHeight + minSpacing;
+
+  const graphWidth = cols * cellWidth;
+  const graphHeight = rows * cellHeight;
+
+  const startX = center ? center.x - graphWidth / 2 : 0;
+  const startY = center ? center.y - graphHeight / 2 : 0;
+
+  const layoutedNodes = nodes.map((node, index) => {
+    const col = index % cols;
+    const row = Math.floor(index / cols);
+    const { width, height } = getNodeDimensions(node);
+
+    return {
+      ...node,
+      position: {
+        x: startX + col * cellWidth + (cellWidth - width) / 2,
+        y: startY + row * cellHeight + (cellHeight - height) / 2,
+      },
+    };
+  });
+
+  return {
+    nodes: layoutedNodes,
+    edges,
+    width: graphWidth,
+    height: graphHeight,
+  };
+}
+
+/**
+ * Apply random layout - nodes placed randomly with minimum spacing
+ */
+export function applyRandomLayout(
+  nodes: Node[],
+  edges: Edge[],
+  options: LayoutOptions = {}
+): LayoutResult {
+  const { center } = options;
+
+  if (nodes.length === 0) {
+    return { nodes: [], edges, width: 0, height: 0 };
+  }
+
+  let maxWidth = 0;
+  let maxHeight = 0;
+  nodes.forEach((node) => {
+    const { width, height } = getNodeDimensions(node);
+    maxWidth = Math.max(maxWidth, width);
+    maxHeight = Math.max(maxHeight, height);
+  });
+
+  const minSpacing = 200;
+  const spreadFactor = 1.5; // How much to spread nodes apart
+  const areaSize = Math.sqrt(nodes.length) * (maxWidth + maxHeight + minSpacing) * spreadFactor;
+
+  const centerX = center?.x ?? 0;
+  const centerY = center?.y ?? 0;
+
+  // Place nodes randomly, checking for collisions
+  const layoutedNodes: Node[] = [];
+  const maxAttempts = 100;
+
+  nodes.forEach((node) => {
+    const { width, height } = getNodeDimensions(node);
+    let placed = false;
+    let attempts = 0;
+
+    while (!placed && attempts < maxAttempts) {
+      const x = centerX + (Math.random() - 0.5) * areaSize - width / 2;
+      const y = centerY + (Math.random() - 0.5) * areaSize - height / 2;
+
+      // Check if this position collides with existing nodes
+      const collides = layoutedNodes.some((existingNode) => {
+        const exDims = getNodeDimensions(existingNode);
+        const dx = Math.abs(x - existingNode.position.x);
+        const dy = Math.abs(y - existingNode.position.y);
+        return dx < (width + exDims.width) / 2 + minSpacing &&
+               dy < (height + exDims.height) / 2 + minSpacing;
+      });
+
+      if (!collides) {
+        layoutedNodes.push({
+          ...node,
+          position: { x, y },
+        });
+        placed = true;
+      }
+      attempts++;
+    }
+
+    // If we couldn't place it without collision, just place it anyway
+    if (!placed) {
+      layoutedNodes.push({
+        ...node,
+        position: {
+          x: centerX + (Math.random() - 0.5) * areaSize - width / 2,
+          y: centerY + (Math.random() - 0.5) * areaSize - height / 2,
+        },
+      });
+    }
+  });
 
   return {
     nodes: layoutedNodes,
     edges,
-    width,
-    height,
+    width: areaSize,
+    height: areaSize,
   };
 }
 
@@ -135,12 +344,14 @@ export function applyDagreLayout(
   edges: Edge[],
   direction: 'TB' | 'LR' = 'TB',
   nodeSpacing?: number,
-  rankSpacing?: number
+  rankSpacing?: number,
+  center?: { x: number; y: number }
 ): Node[] {
   const result = applyHierarchicalLayout(nodes, edges, {
     direction,
     nodeSpacing,
-    rankSpacing
+    rankSpacing,
+    center
   });
   return result.nodes;
 }

flock/logging/telemetry_exporter/duckdb_exporter.py

@@ -88,12 +88,12 @@ class DuckDBSpanExporter(TelemetryExporter):
             with duckdb.connect(str(self.db_path)) as conn:
                 # Delete spans older than TTL
                 # Note: DuckDB doesn't support ? placeholders inside INTERVAL expressions
-                result = conn.execute(
-                    f"""
+                # Safe: ttl_days is guaranteed to be an int, no injection risk
+                query = f"""
                     DELETE FROM spans
                     WHERE created_at < CURRENT_TIMESTAMP - INTERVAL '{self.ttl_days} DAYS'
-                """
-                )
+                """  # nosec B608
+                result = conn.execute(query)
 
                 deleted_count = result.fetchall()[0][0] if result else 0