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

flock/frontend/src/services/layout.ts

@@ -0,0 +1,357 @@
+import dagre from 'dagre';
+import { Node, Edge } from '@xyflow/react';
+
+/**
+ * Phase 4: Graph Visualization & Dual Views - Layout Service
+ *
+ * Provides Dagre-based hierarchical layout algorithm for automatic node positioning.
+ * Supports both vertical (TB) and horizontal (LR) layouts with configurable spacing.
+ *
+ * REQUIREMENT: Must complete <200ms for 10 nodes
+ * SPECIFICATION: docs/specs/003-real-time-dashboard/PLAN.md Phase 4
+ */
+
+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 {
+  nodes: Node[];
+  edges: Edge[];
+  width: number;
+  height: number;
+}
+
+// Default node dimensions
+const DEFAULT_NODE_WIDTH = 200;
+const DEFAULT_NODE_HEIGHT = 80;
+const MESSAGE_NODE_WIDTH = 150;
+const MESSAGE_NODE_HEIGHT = 60;
+
+/**
+ * Get node dimensions based on node type
+ */
+function getNodeDimensions(node: Node): { width: number; height: number } {
+  if (node.type === 'message') {
+    return { width: MESSAGE_NODE_WIDTH, height: MESSAGE_NODE_HEIGHT };
+  }
+  return { width: DEFAULT_NODE_WIDTH, height: DEFAULT_NODE_HEIGHT };
+}
+
+/**
+ * Apply hierarchical layout using Dagre algorithm
+ *
+ * @param nodes - Array of nodes to layout
+ * @param edges - Array of edges defining connections
+ * @param options - Layout configuration options
+ * @returns Layout result with positioned nodes and graph dimensions
+ */
+export function applyHierarchicalLayout(
+  nodes: Node[],
+  edges: Edge[],
+  options: LayoutOptions = {}
+): LayoutResult {
+  const {
+    direction = 'TB',
+    center,
+  } = options;
+
+  // Handle empty graph
+  if (nodes.length === 0) {
+    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();
+
+  // Set graph layout options
+  graph.setGraph({
+    rankdir: direction,
+    nodesep: nodeSpacing,
+    ranksep: rankSpacing,
+    marginx: 20,
+    marginy: 20,
+  });
+
+  // Default edge configuration
+  graph.setDefaultEdgeLabel(() => ({}));
+
+  // Add nodes to the graph with their dimensions
+  nodes.forEach((node) => {
+    const { width, height } = getNodeDimensions(node);
+    graph.setNode(node.id, { width, height });
+  });
+
+  // Add edges to the graph
+  edges.forEach((edge) => {
+    graph.setEdge(edge.source, edge.target);
+  });
+
+  // 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);
+
+    // Dagre positions nodes at their center, we need top-left corner
+    const { width, height } = getNodeDimensions(node);
+
+    return {
+      ...node,
+      position: {
+        x: nodeWithPosition.x - width / 2 + offsetX,
+        y: nodeWithPosition.y - height / 2 + offsetY,
+      },
+    };
+  });
+
+  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: areaSize,
+    height: areaSize,
+  };
+}
+
+/**
+ * Legacy function name for backwards compatibility
+ * Delegates to applyHierarchicalLayout
+ */
+export function applyDagreLayout(
+  nodes: Node[],
+  edges: Edge[],
+  direction: 'TB' | 'LR' = 'TB',
+  nodeSpacing?: number,
+  rankSpacing?: number,
+  center?: { x: number; y: number }
+): Node[] {
+  const result = applyHierarchicalLayout(nodes, edges, {
+    direction,
+    nodeSpacing,
+    rankSpacing,
+    center
+  });
+  return result.nodes;
+}

flock/frontend/src/services/themeApplicator.ts

@@ -0,0 +1,140 @@
+/**
+ * Theme Applicator
+ *
+ * Applies terminal themes to dashboard UI by mapping 8-color palette
+ * to CSS custom properties.
+ *
+ * See: docs/specs/004-ui-improvements/THEME_MAPPING.md
+ */
+
+import { TerminalTheme } from '../types/theme';
+
+/**
+ * Convert hex color to rgba with alpha channel
+ */
+function hexToRgba(hex: string, alpha: number): string {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+/**
+ * Apply a theme to the dashboard by updating CSS variables
+ */
+export function applyTheme(theme: TerminalTheme): void {
+  const root = document.documentElement;
+  const { colors } = theme;
+
+  // Background Layers
+  root.style.setProperty('--color-bg-base', colors.primary.background);
+  root.style.setProperty('--color-bg-elevated', colors.selection.background);
+  root.style.setProperty('--color-bg-surface', colors.normal.black);
+  root.style.setProperty('--color-bg-overlay', colors.bright.black);
+  root.style.setProperty('--color-bg-float', hexToRgba(colors.normal.white, 0.1));
+
+  // Text Colors
+  root.style.setProperty('--color-text-primary', colors.primary.foreground);
+  root.style.setProperty('--color-text-secondary', colors.bright.white);
+  root.style.setProperty('--color-text-tertiary', colors.selection.text);
+  root.style.setProperty('--color-text-muted', colors.cursor.text);
+  root.style.setProperty('--color-text-on-primary', colors.selection.text);
+
+  // Brand & Accent Colors
+  root.style.setProperty('--color-primary-500', colors.normal.blue);
+  root.style.setProperty('--color-primary-400', colors.bright.blue);
+  root.style.setProperty('--color-primary-600', colors.normal.blue); // Slightly darker for hover
+  root.style.setProperty('--color-secondary-500', colors.normal.magenta);
+  root.style.setProperty('--color-secondary-400', colors.bright.magenta);
+  root.style.setProperty('--color-tertiary-500', colors.normal.cyan);
+
+  // Semantic Status Colors
+  root.style.setProperty('--color-success', colors.normal.green);
+  root.style.setProperty('--color-success-light', colors.bright.green);
+  root.style.setProperty('--color-error', colors.normal.red);
+  root.style.setProperty('--color-error-light', colors.bright.red);
+  root.style.setProperty('--color-warning', colors.normal.yellow);
+  root.style.setProperty('--color-warning-light', colors.bright.yellow);
+  root.style.setProperty('--color-info', colors.normal.cyan);
+  root.style.setProperty('--color-info-light', colors.bright.cyan);
+
+  // Graph-Specific Colors (can be overridden by user settings)
+  // Only set if user hasn't customized them
+  const currentIdleColor = root.style.getPropertyValue('--agent-idle-color');
+  if (!currentIdleColor || currentIdleColor === '#60a5fa') {
+    root.style.setProperty('--agent-idle-color', colors.normal.cyan);
+  }
+
+  const currentActiveColor = root.style.getPropertyValue('--agent-active-color');
+  if (!currentActiveColor || currentActiveColor === '#10b981') {
+    root.style.setProperty('--agent-active-color', colors.normal.green);
+  }
+
+  const currentErrorColor = root.style.getPropertyValue('--agent-error-color');
+  if (!currentErrorColor || currentErrorColor === '#ef4444') {
+    root.style.setProperty('--agent-error-color', colors.normal.red);
+  }
+
+  // Border & Divider Colors
+  root.style.setProperty('--color-border-default', colors.bright.black);
+  root.style.setProperty('--color-border-subtle', hexToRgba(colors.normal.white, 0.2));
+  root.style.setProperty('--color-border-strong', colors.cursor.cursor);
+  root.style.setProperty('--color-border-focus', colors.normal.blue);
+  root.style.setProperty('--color-border-error', colors.normal.red);
+
+  // Special Effect Colors
+  root.style.setProperty('--color-glass-bg', hexToRgba(colors.selection.background, 0.8));
+  root.style.setProperty('--color-glow-primary', colors.cursor.cursor);
+  root.style.setProperty('--shadow-glow-primary', `0 0 0 3px ${hexToRgba(colors.bright.blue, 0.5)}`);
+  root.style.setProperty('--shadow-glow-error', `0 0 0 3px ${hexToRgba(colors.bright.red, 0.5)}`);
+
+  // Edge colors
+  root.style.setProperty('--color-edge-default', colors.bright.black);
+  root.style.setProperty('--color-edge-message', colors.bright.yellow);
+  root.style.setProperty('--color-edge-active', colors.bright.blue);
+
+  // Node colors
+  root.style.setProperty('--color-node-message-border', colors.normal.magenta);
+
+  console.log(`[Theme] Applied theme: ${theme.name}`);
+}
+
+/**
+ * Reset to default theme (current design system colors)
+ */
+export function resetToDefaultTheme(): void {
+  const root = document.documentElement;
+
+  // Reset to original design system values
+  root.style.setProperty('--color-bg-base', '#0a0a0b');
+  root.style.setProperty('--color-bg-elevated', '#121214');
+  root.style.setProperty('--color-bg-surface', '#1a1a1e');
+  root.style.setProperty('--color-bg-overlay', '#232329');
+  root.style.setProperty('--color-bg-float', '#2a2a32');
+
+  root.style.setProperty('--color-text-primary', '#e5e7eb');
+  root.style.setProperty('--color-text-secondary', '#9ca3af');
+  root.style.setProperty('--color-text-tertiary', '#6b7280');
+
+  root.style.setProperty('--color-primary-500', '#6366f1');
+  root.style.setProperty('--color-primary-400', '#818cf8');
+  root.style.setProperty('--color-primary-600', '#4f46e5');
+
+  console.log('[Theme] Reset to default theme');
+}
+
+/**
+ * Get a preview swatch array for a theme (8 colors)
+ */
+export function getThemePreview(theme: TerminalTheme): string[] {
+  return [
+    theme.colors.normal.black,
+    theme.colors.normal.red,
+    theme.colors.normal.green,
+    theme.colors.normal.yellow,
+    theme.colors.normal.blue,
+    theme.colors.normal.magenta,
+    theme.colors.normal.cyan,
+    theme.colors.normal.white,
+  ];
+}

flock/frontend/src/services/themeService.ts

@@ -0,0 +1,77 @@
+/**
+ * Theme Service
+ *
+ * Fetches terminal themes from the backend API.
+ * Themes are loaded from TOML files in src/flock/themes/
+ */
+
+import { TerminalTheme, ThemeListResponse, ThemeDataResponse } from '../types/theme';
+
+const BASE_URL = import.meta.env.VITE_API_BASE_URL || '/api';
+
+/**
+ * Fetch list of available theme names
+ */
+export async function fetchThemeList(): Promise<string[]> {
+  try {
+    const response = await fetch(`${BASE_URL}/themes`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch themes: ${response.statusText}`);
+    }
+
+    const data: ThemeListResponse = await response.json();
+    return data.themes;
+  } catch (error) {
+    console.error('Error fetching theme list:', error);
+    throw error;
+  }
+}
+
+/**
+ * Fetch a specific theme by name
+ */
+export async function fetchTheme(themeName: string): Promise<TerminalTheme> {
+  try {
+    const response = await fetch(`${BASE_URL}/themes/${themeName}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch theme "${themeName}": ${response.statusText}`);
+    }
+
+    const data: ThemeDataResponse = await response.json();
+    return {
+      name: data.name,
+      colors: data.data.colors,
+    };
+  } catch (error) {
+    console.error(`Error fetching theme "${themeName}":`, error);
+    throw error;
+  }
+}
+
+/**
+ * Get popular/recommended themes
+ */
+export const POPULAR_THEMES = [
+  'dracula',
+  'nord',
+  'catppuccin-mocha',
+  'tokyonight',
+  'gruvboxdark',
+  'solarized-dark',
+  'github-dark',
+  'one-half-dark',
+  'monokai',
+  'material',
+];