flock-core 0.5.0b56__py3-none-any.whl → 0.5.0b58__py3-none-any.whl

flock/dashboard/websocket.py

@@ -103,9 +103,9 @@ class WebSocketManager:
         # Store streaming output events for history (always, even if no clients)
         if isinstance(event, StreamingOutputEvent):
             self._streaming_history[event.agent_name].append(event)
-            logger.debug(
-                f"Stored streaming event for {event.agent_name}, history size: {len(self._streaming_history[event.agent_name])}"
-            )
+            # logger.debug(
+            #     f"Stored streaming event for {event.agent_name}, history size: {len(self._streaming_history[event.agent_name])}"
+            # )
 
         # If no clients, still log but don't broadcast
         if not self.clients:
@@ -115,11 +115,11 @@ class WebSocketManager:
             return
 
         # Log broadcast attempt
-        logger.debug(f"Broadcasting {type(event).__name__} to {len(self.clients)} client(s)")
+        # logger.debug(f"Broadcasting {type(event).__name__} to {len(self.clients)} client(s)")
 
         # Serialize event to JSON using Pydantic's model_dump_json
         message = event.model_dump_json()
-        logger.debug(f"Event JSON: {message[:200]}...")  # Log first 200 chars
+        # logger.debug(f"Event JSON: {message[:200]}...")  # Log first 200 chars
 
         # Broadcast to all clients concurrently
         # Use return_exceptions=True to handle client failures gracefully

flock/frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "flock-ui",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "flock-ui",
-      "version": "0.1.2",
+      "version": "0.1.3",
       "license": "ISC",
       "dependencies": {
         "@types/dagre": "^0.7.53",

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_core-0.5.0b56.dist-info → flock_core-0.5.0b58.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: flock-core
-Version: 0.5.0b56
+Version: 0.5.0b58
 Summary: Add your description here
 Author-email: Andre Ratzenberger <andre.ratzenberger@whiteduck.de>
 License-File: LICENSE
@@ -62,7 +62,8 @@ prompt = """You are an expert code reviewer. When you receive code, you should..
 
 # 500-line prompt that breaks when models update
 
-# How do I know that there isn't an even better prompt (you don't) -> proof of 'best possible performane' impossible
+# How do I know that there isn't an even better prompt (you don't)
+# -> proof of 'best possible performane' impossible
 ```
 
 **🧪 Testing Nightmares**
@@ -88,7 +89,8 @@ workflow.add_edge("agent_b", "agent_c")
 **🧠 God object anti-pattern:**
 ```python
 # One orchestrator needs domain knowledge of 20+ agents to route correctly
-# Orchestrator 'guesses' next agent based on a natural language description. Hardly fit for critical systems.
+# Orchestrator 'guesses' next agent based on a natural language description.
+# Hardly fit for critical systems.
 ```
 
 These aren't framework limitations, they're **architectural choices** that don't scale.
@@ -105,8 +107,51 @@ Flock takes a different path, combining two proven patterns:
 
 **Traditional approach:**
 ```python
-prompt = "Analyze this bug report and return JSON with severity, category, hypothesis..."
-result = llm.invoke(prompt)  # Hope it works
+prompt = """You are an expert software engineer and bug analyst. Your task is to analyze bug reports and provide structured diagnostic information.
+
+INSTRUCTIONS:
+1. Read the bug report carefully
+2. Determine the severity level (must be exactly one of: Critical, High, Medium, Low)
+3. Classify the bug category (e.g., "performance", "security", "UI", "data corruption")
+4. Formulate a root cause hypothesis (minimum 50 characters)
+5. Assign a confidence score between 0.0 and 1.0
+
+OUTPUT FORMAT:
+You MUST return valid JSON with this exact structure:
+{
+  "severity": "string (Critical|High|Medium|Low)",
+  "category": "string",
+  "root_cause_hypothesis": "string (minimum 50 characters)",
+  "confidence_score": "number (0.0 to 1.0)"
+}
+
+VALIDATION RULES:
+- severity: Must be exactly one of: Critical, High, Medium, Low (case-sensitive)
+- category: Must be a single word or short phrase describing the bug type
+- root_cause_hypothesis: Must be at least 50 characters long and explain the likely cause
+- confidence_score: Must be a decimal number between 0.0 and 1.0 inclusive
+
+EXAMPLES:
+Input: "App crashes when user clicks submit button"
+Output: {"severity": "Critical", "category": "crash", "root_cause_hypothesis": "Null pointer exception in form validation logic when required fields are empty", "confidence_score": 0.85}
+
+Input: "Login button has wrong color"
+Output: {"severity": "Low", "category": "UI", "root_cause_hypothesis": "CSS class override not applied correctly in the theme configuration", "confidence_score": 0.9}
+
+IMPORTANT:
+- Do NOT include any explanatory text before or after the JSON
+- Do NOT use markdown code blocks (no ```json```)
+- Do NOT add comments in the JSON
+- Ensure the JSON is valid and parseable
+- If you cannot determine something, use your best judgment
+- Never return null values
+
+Now analyze this bug report:
+{bug_report_text}"""
+
+result = llm.invoke(prompt)  # 500-line prompt that breaks when models update
+# Then parse and hope it's valid JSON
+data = json.loads(result.content)  # Crashes in production 🔥
 ```
 
 **The Flock way:**
@@ -405,7 +450,11 @@ The dashboard provides comprehensive real-time visibility into your agent system
 - **Interactive Graph:**
   - Drag nodes, zoom, pan, and explore topology
   - Double-click nodes to open detail windows
-  - Right-click for context menu and modules
+  - Right-click for context menu with auto-layout options:
+    - **5 Layout Algorithms**: Hierarchical (Vertical/Horizontal), Circular, Grid, and Random
+    - **Smart Spacing**: Dynamic 200px minimum clearance based on node dimensions
+    - **Viewport Centering**: Layouts always center around current viewport
+  - Add modules dynamically from context menu
 
 - **Advanced Filtering:**
   - Correlation ID tracking for workflow tracing

{flock_core-0.5.0b56.dist-info → flock_core-0.5.0b58.dist-info}/RECORD

@@ -18,13 +18,13 @@ flock/dashboard/collector.py,sha256=dF8uddDMpOSdxGkhDSAvRNNaABo-TfOceipf1SQmLSU,
 flock/dashboard/events.py,sha256=ujdmRJK-GQubrv43qfQ73dnrTj7g39VzBkWfmskJ0j8,5234
 flock/dashboard/launcher.py,sha256=zXWVpyLNxCIu6fJ2L2j2sJ4oDWTvkxhT4FWz7K6eooM,8122
 flock/dashboard/service.py,sha256=5QGPT2xSbMx6Zd9_GSKJ8QtxOnBucx9BZAQhpWyUfgw,32097
-flock/dashboard/websocket.py,sha256=gGJPNLy4OR-0eTKJQ3oFmZVjCq-ulMNrKJVFCFcprhU,9003
+flock/dashboard/websocket.py,sha256=RdJ7fhjNYJR8WHJ19wWdf9GEQtuKE14NmUpqm-QsLnA,9013
 flock/engines/__init__.py,sha256=waNyObJ8PKCLFZL3WUFynxSK-V47m559P3Px-vl_OSc,124
 flock/engines/dspy_engine.py,sha256=Q2gPYLW_f8f-JuBYOMtjtoCZH8Fc447zWF8cHpJl4ew,34538
 flock/frontend/README.md,sha256=OFdOItV8FGifmUDb694rV2xLC0vl1HlR5KBEtYv5AB0,25054
 flock/frontend/index.html,sha256=BFg1VR_YVAJ_MGN16xa7sT6wTGwtFYUhfJhGuKv89VM,312
-flock/frontend/package-lock.json,sha256=5c-ZQHqHYZ2CHlsyHOBss-tncxplSuHO3mddWt_-jJM,150998
-flock/frontend/package.json,sha256=MXt8jZodw6cysyJF-Hb50L_5AoMCEma5F80YGCp8fC4,1258
+flock/frontend/package-lock.json,sha256=F-KmPhq6IbHXzxtmHL0S7dt6DGs4fWrOkrfKeXaSx6U,150998
+flock/frontend/package.json,sha256=X5mMewghkW5K03Y4CI6unF2GIGbV0QoS-kZ04RNtQ3k,1258
 flock/frontend/tsconfig.json,sha256=B9p9jXohg_jrCZAq5_yIHvznpeXHiHQkwUZrVE2oMRA,705
 flock/frontend/tsconfig.node.json,sha256=u5_YWSqeNkZBRBIZ8Q2E2q6bospcyF23mO-taRO7glc,233
 flock/frontend/vite.config.ts,sha256=OQOr6Hl75iW7EvEm2_GXFdicYWthgdLhp4lz3d7RkJA,566
@@ -71,7 +71,7 @@ flock/frontend/src/components/filters/TimeRangeFilter.test.tsx,sha256=4vkGYNecXc
 flock/frontend/src/components/filters/TimeRangeFilter.tsx,sha256=xwTPRl-NbSEvSrX4krvLPb40GvCjdoUp-FqRbVZBzbU,3148
 flock/frontend/src/components/graph/AgentNode.test.tsx,sha256=Wd3AGe1E9GJ26wyRU1AUakki9AQ9euYsKx5lhi1xAfg,1966
 flock/frontend/src/components/graph/AgentNode.tsx,sha256=JOSMiR_YXq6MgME2DfhqHldS_4zZEPySEIEM6t4fg48,12447
-flock/frontend/src/components/graph/GraphCanvas.tsx,sha256=KDnxl3QQNLeIshgIXHyH0A73VOoyAhbboBax09cLjtI,13747
+flock/frontend/src/components/graph/GraphCanvas.tsx,sha256=vMLbZie9Isnlr2pflQTRGLgME8a8Q8zXRg4qLGW7Vw4,20809
 flock/frontend/src/components/graph/MessageFlowEdge.tsx,sha256=OWYmmlS5P9yIxfCddEleEd27MA-djMd_3fcQmyT22r4,3914
 flock/frontend/src/components/graph/MessageNode.test.tsx,sha256=S0vmtk2r4HGm8844Pb65syim-ZsCqvia24CECGgq5SY,1828
 flock/frontend/src/components/graph/MessageNode.tsx,sha256=axwYof1z3UtLO0QDPfTKnZX6w_TNFlZvVJsun1aDD_k,3645
@@ -108,7 +108,7 @@ flock/frontend/src/services/api.ts,sha256=hGkImiimpSOX9xjmX5flI1Ug6YVh7EbRr7l0rq
 flock/frontend/src/services/indexeddb.test.ts,sha256=lY1JzyKRd4Kaw135JlO7njy5rpaAsRRXLM8SwYxDhAc,27452
 flock/frontend/src/services/indexeddb.ts,sha256=Eadllc6tPh09RhJPjCd6MO0tdh8PWX5Hoxy8HX9HQS0,26915
 flock/frontend/src/services/layout.test.ts,sha256=-KwUxWCum_Rsyc5NIpk99UB3prfAkMO5ksJULhjOiwA,16174
-flock/frontend/src/services/layout.ts,sha256=hfGZdR-qFnrb1sSVw63mV4XGSgvkHo0ONjsyptflaa0,3665
+flock/frontend/src/services/layout.ts,sha256=5WzlOv7OBlQXiUxrv4l1JwaAfHbUK1C99JOT0fQCNRY,9503
 flock/frontend/src/services/themeApplicator.ts,sha256=utRFw-45e1IEOrI6lHkB_E_-5kc2kFKbN-veAUdXiOM,5802
 flock/frontend/src/services/themeService.ts,sha256=ltDAE30KzzVFDQJGm8awN0Go-l16NgTWYOxlvgxvx0E,1743
 flock/frontend/src/services/websocket.test.ts,sha256=Ix5dQI3lzKJPyFPcTs5yXxu8ZZoJ05f1CWgcQEpCOtg,17062
@@ -508,8 +508,8 @@ flock/themes/zenburned.toml,sha256=UEmquBbcAO3Zj652XKUwCsNoC2iQSlIh-q5c6DH-7Kc,1
 flock/themes/zenwritten-dark.toml,sha256=-dgaUfg1iCr5Dv4UEeHv_cN4GrPUCWAiHSxWK20X1kI,1663
 flock/themes/zenwritten-light.toml,sha256=G1iEheCPfBNsMTGaVpEVpDzYBHA_T-MV27rolUYolmE,1666
 flock/utility/output_utility_component.py,sha256=yVHhlIIIoYKziI5UyT_zvQb4G-NsxCTgLwA1wXXTTj4,9047
-flock_core-0.5.0b56.dist-info/METADATA,sha256=BU-uf938Ij4swNJlk6MSpyTrgisSL4fECmkH6wDQgd8,32490
-flock_core-0.5.0b56.dist-info/WHEEL,sha256=qtCwoSJWgHk21S1Kb4ihdzI2rlJ1ZKaIurTj_ngOhyQ,87
-flock_core-0.5.0b56.dist-info/entry_points.txt,sha256=UQdPmtHd97gSA_IdLt9MOd-1rrf_WO-qsQeIiHWVrp4,42
-flock_core-0.5.0b56.dist-info/licenses/LICENSE,sha256=U3IZuTbC0yLj7huwJdldLBipSOHF4cPf6cUOodFiaBE,1072
-flock_core-0.5.0b56.dist-info/RECORD,,
+flock_core-0.5.0b58.dist-info/METADATA,sha256=1frs-b0VPrAk3XwsqCa6pG03VeE0cDID7WtFsMeeezQ,34719
+flock_core-0.5.0b58.dist-info/WHEEL,sha256=qtCwoSJWgHk21S1Kb4ihdzI2rlJ1ZKaIurTj_ngOhyQ,87
+flock_core-0.5.0b58.dist-info/entry_points.txt,sha256=UQdPmtHd97gSA_IdLt9MOd-1rrf_WO-qsQeIiHWVrp4,42
+flock_core-0.5.0b58.dist-info/licenses/LICENSE,sha256=U3IZuTbC0yLj7huwJdldLBipSOHF4cPf6cUOodFiaBE,1072
+flock_core-0.5.0b58.dist-info/RECORD,,