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

flock/frontend/src/store/moduleStore.test.ts

@@ -0,0 +1,253 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useModuleStore } from './moduleStore';
+import type { ModuleInstance } from '../types/modules';
+
+describe('moduleStore', () => {
+  beforeEach(() => {
+    // Reset store before each test
+    useModuleStore.setState({
+      instances: new Map(),
+    });
+  });
+
+  it('should have an empty Map as initial state', () => {
+    const instances = useModuleStore.getState().instances;
+    expect(instances.size).toBe(0);
+    expect(instances instanceof Map).toBe(true);
+  });
+
+  it('should add a new module instance', () => {
+    const module: ModuleInstance = {
+      id: 'module-1',
+      type: 'eventlog',
+      position: { x: 100, y: 100 },
+      size: { width: 600, height: 400 },
+      visible: true,
+    };
+
+    useModuleStore.getState().addModule(module);
+
+    const instances = useModuleStore.getState().instances;
+    expect(instances.size).toBe(1);
+    expect(instances.get('module-1')).toEqual(module);
+  });
+
+  it('should add multiple module instances', () => {
+    const module1: ModuleInstance = {
+      id: 'module-1',
+      type: 'eventlog',
+      position: { x: 100, y: 100 },
+      size: { width: 600, height: 400 },
+      visible: true,
+    };
+
+    const module2: ModuleInstance = {
+      id: 'module-2',
+      type: 'eventlog',
+      position: { x: 200, y: 200 },
+      size: { width: 600, height: 400 },
+      visible: true,
+    };
+
+    useModuleStore.getState().addModule(module1);
+    useModuleStore.getState().addModule(module2);
+
+    const instances = useModuleStore.getState().instances;
+    expect(instances.size).toBe(2);
+    expect(instances.get('module-1')).toEqual(module1);
+    expect(instances.get('module-2')).toEqual(module2);
+  });
+
+  it('should update module position', () => {
+    const module: ModuleInstance = {
+      id: 'module-1',
+      type: 'eventlog',
+      position: { x: 100, y: 100 },
+      size: { width: 600, height: 400 },
+      visible: true,
+    };
+
+    useModuleStore.getState().addModule(module);
+    useModuleStore.getState().updateModule('module-1', {
+      position: { x: 300, y: 300 },
+    });
+
+    const updated = useModuleStore.getState().instances.get('module-1');
+    expect(updated?.position).toEqual({ x: 300, y: 300 });
+    expect(updated?.size).toEqual({ width: 600, height: 400 }); // Other properties unchanged
+    expect(updated?.visible).toBe(true);
+  });
+
+  it('should update module size', () => {
+    const module: ModuleInstance = {
+      id: 'module-1',
+      type: 'eventlog',
+      position: { x: 100, y: 100 },
+      size: { width: 600, height: 400 },
+      visible: true,
+    };
+
+    useModuleStore.getState().addModule(module);
+    useModuleStore.getState().updateModule('module-1', {
+      size: { width: 800, height: 600 },
+    });
+
+    const updated = useModuleStore.getState().instances.get('module-1');
+    expect(updated?.size).toEqual({ width: 800, height: 600 });
+    expect(updated?.position).toEqual({ x: 100, y: 100 }); // Other properties unchanged
+  });
+
+  it('should update multiple module properties at once', () => {
+    const module: ModuleInstance = {
+      id: 'module-1',
+      type: 'eventlog',
+      position: { x: 100, y: 100 },
+      size: { width: 600, height: 400 },
+      visible: true,
+    };
+
+    useModuleStore.getState().addModule(module);
+    useModuleStore.getState().updateModule('module-1', {
+      position: { x: 300, y: 300 },
+      size: { width: 800, height: 600 },
+      visible: false,
+    });
+
+    const updated = useModuleStore.getState().instances.get('module-1');
+    expect(updated?.position).toEqual({ x: 300, y: 300 });
+    expect(updated?.size).toEqual({ width: 800, height: 600 });
+    expect(updated?.visible).toBe(false);
+  });
+
+  it('should toggle module visibility', () => {
+    const module: ModuleInstance = {
+      id: 'module-1',
+      type: 'eventlog',
+      position: { x: 100, y: 100 },
+      size: { width: 600, height: 400 },
+      visible: true,
+    };
+
+    useModuleStore.getState().addModule(module);
+
+    // Toggle visibility to false
+    useModuleStore.getState().toggleVisibility('module-1');
+    expect(useModuleStore.getState().instances.get('module-1')?.visible).toBe(false);
+
+    // Toggle visibility back to true
+    useModuleStore.getState().toggleVisibility('module-1');
+    expect(useModuleStore.getState().instances.get('module-1')?.visible).toBe(true);
+  });
+
+  it('should remove a module instance', () => {
+    const module1: ModuleInstance = {
+      id: 'module-1',
+      type: 'eventlog',
+      position: { x: 100, y: 100 },
+      size: { width: 600, height: 400 },
+      visible: true,
+    };
+
+    const module2: ModuleInstance = {
+      id: 'module-2',
+      type: 'eventlog',
+      position: { x: 200, y: 200 },
+      size: { width: 600, height: 400 },
+      visible: true,
+    };
+
+    useModuleStore.getState().addModule(module1);
+    useModuleStore.getState().addModule(module2);
+
+    expect(useModuleStore.getState().instances.size).toBe(2);
+
+    useModuleStore.getState().removeModule('module-1');
+
+    const instances = useModuleStore.getState().instances;
+    expect(instances.size).toBe(1);
+    expect(instances.get('module-1')).toBeUndefined();
+    expect(instances.get('module-2')).toEqual(module2);
+  });
+
+  it('should get all module instances', () => {
+    const module1: ModuleInstance = {
+      id: 'module-1',
+      type: 'eventlog',
+      position: { x: 100, y: 100 },
+      size: { width: 600, height: 400 },
+      visible: true,
+    };
+
+    const module2: ModuleInstance = {
+      id: 'module-2',
+      type: 'eventlog',
+      position: { x: 200, y: 200 },
+      size: { width: 600, height: 400 },
+      visible: false,
+    };
+
+    useModuleStore.getState().addModule(module1);
+    useModuleStore.getState().addModule(module2);
+
+    const instances = useModuleStore.getState().instances;
+    const allInstances = Array.from(instances.values());
+
+    expect(allInstances.length).toBe(2);
+    expect(allInstances).toContainEqual(module1);
+    expect(allInstances).toContainEqual(module2);
+  });
+
+  it('should handle updating non-existent module gracefully', () => {
+    useModuleStore.getState().updateModule('non-existent', {
+      position: { x: 100, y: 100 },
+    });
+
+    // Should not throw error and instances should remain empty
+    expect(useModuleStore.getState().instances.size).toBe(0);
+  });
+
+  it('should handle removing non-existent module gracefully', () => {
+    const module: ModuleInstance = {
+      id: 'module-1',
+      type: 'eventlog',
+      position: { x: 100, y: 100 },
+      size: { width: 600, height: 400 },
+      visible: true,
+    };
+
+    useModuleStore.getState().addModule(module);
+    useModuleStore.getState().removeModule('non-existent');
+
+    // Should not affect existing modules
+    expect(useModuleStore.getState().instances.size).toBe(1);
+    expect(useModuleStore.getState().instances.get('module-1')).toEqual(module);
+  });
+
+  it('should handle toggling visibility of non-existent module gracefully', () => {
+    useModuleStore.getState().toggleVisibility('non-existent');
+
+    // Should not throw error
+    expect(useModuleStore.getState().instances.size).toBe(0);
+  });
+
+  it('should maintain Map state immutability', () => {
+    const module: ModuleInstance = {
+      id: 'module-1',
+      type: 'eventlog',
+      position: { x: 100, y: 100 },
+      size: { width: 600, height: 400 },
+      visible: true,
+    };
+
+    useModuleStore.getState().addModule(module);
+    const instancesBefore = useModuleStore.getState().instances;
+
+    useModuleStore.getState().updateModule('module-1', {
+      position: { x: 200, y: 200 },
+    });
+    const instancesAfter = useModuleStore.getState().instances;
+
+    // New Map instance should be created (immutability)
+    expect(instancesBefore).not.toBe(instancesAfter);
+  });
+});

flock/frontend/src/store/moduleStore.ts

@@ -0,0 +1,75 @@
+import { create } from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+import type { ModuleInstance } from '../types/modules';
+
+interface ModuleState {
+  // Module instances
+  instances: Map<string, ModuleInstance>;
+
+  // Actions
+  addModule: (module: ModuleInstance) => void;
+  updateModule: (id: string, updates: Partial<Omit<ModuleInstance, 'id' | 'type'>>) => void;
+  removeModule: (id: string) => void;
+  toggleVisibility: (id: string) => void;
+}
+
+export const useModuleStore = create<ModuleState>()(
+  devtools(
+    persist<ModuleState>(
+      (set) => ({
+        instances: new Map(),
+
+        addModule: (module: ModuleInstance) =>
+          set((state) => {
+            const instances = new Map(state.instances);
+            instances.set(module.id, module);
+            return { instances };
+          }),
+
+        updateModule: (id: string, updates: Partial<Omit<ModuleInstance, 'id' | 'type'>>) =>
+          set((state) => {
+            const instances = new Map(state.instances);
+            const existing = instances.get(id);
+            if (existing) {
+              instances.set(id, { ...existing, ...updates });
+            }
+            return { instances };
+          }),
+
+        removeModule: (id: string) =>
+          set((state) => {
+            const instances = new Map(state.instances);
+            instances.delete(id);
+            return { instances };
+          }),
+
+        toggleVisibility: (id: string) =>
+          set((state) => {
+            const instances = new Map(state.instances);
+            const existing = instances.get(id);
+            if (existing) {
+              instances.set(id, { ...existing, visible: !existing.visible });
+            }
+            return { instances };
+          }),
+      }),
+      {
+        name: 'flock-module-state',
+        partialize: (state) => ({
+          instances: Array.from(state.instances.entries()),
+        }) as any,
+        merge: (persistedState: any, currentState: any) => {
+          // Convert instances array back to Map
+          if (persistedState?.instances && Array.isArray(persistedState.instances)) {
+            persistedState.instances = new Map(persistedState.instances);
+          }
+          return {
+            ...currentState,
+            ...persistedState,
+          };
+        },
+      }
+    ),
+    { name: 'moduleStore' }
+  )
+);

flock/frontend/src/store/settingsStore.ts

@@ -0,0 +1,188 @@
+/**
+ * Settings Store
+ *
+ * Manages all user preferences and customization settings.
+ * Persisted to localStorage for cross-session persistence.
+ */
+
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export interface SettingsState {
+  version: string; // For future migrations
+
+  ui: {
+    showFilters: boolean;
+    showControls: boolean;
+    showSettings: boolean;
+  };
+
+  graph: {
+    edgeType: 'smoothstep' | 'bezier' | 'straight' | 'simplebezier';
+    edgeStrokeWidth: number;
+    edgeAnimation: boolean;
+    showEdgeLabels: boolean;
+  };
+
+  appearance: {
+    agentIdleColor: string;
+    agentActiveColor: string;
+    agentErrorColor: string;
+    nodeShadow: 'none' | 'small' | 'medium' | 'large';
+    showStatusPulse: boolean;
+    compactNodeView: boolean;
+    theme: string;
+  };
+
+  advanced: {
+    layoutDirection: 'TB' | 'LR';
+    nodeSpacing: number;
+    rankSpacing: number;
+    debugMode: boolean;
+    performanceMode: boolean;
+  };
+
+  // UI Actions
+  setShowFilters: (show: boolean) => void;
+  setShowControls: (show: boolean) => void;
+  setShowSettings: (show: boolean) => void;
+
+  // Graph Actions
+  setEdgeType: (edgeType: SettingsState['graph']['edgeType']) => void;
+  setEdgeStrokeWidth: (width: number) => void;
+  setEdgeAnimation: (enabled: boolean) => void;
+  setShowEdgeLabels: (show: boolean) => void;
+
+  // Appearance Actions
+  setTheme: (theme: string) => void;
+  setAgentIdleColor: (color: string) => void;
+  setAgentActiveColor: (color: string) => void;
+  setAgentErrorColor: (color: string) => void;
+  setNodeShadow: (shadow: SettingsState['appearance']['nodeShadow']) => void;
+  setShowStatusPulse: (show: boolean) => void;
+  setCompactNodeView: (compact: boolean) => void;
+
+  // Advanced Actions
+  setLayoutDirection: (direction: SettingsState['advanced']['layoutDirection']) => void;
+  setNodeSpacing: (spacing: number) => void;
+  setRankSpacing: (spacing: number) => void;
+  setDebugMode: (enabled: boolean) => void;
+  setPerformanceMode: (enabled: boolean) => void;
+
+  // Utility Actions
+  resetToDefaults: () => void;
+}
+
+const DEFAULT_SETTINGS: Omit<SettingsState, keyof ReturnType<typeof createActions>> = {
+  version: '1.0.0',
+
+  ui: {
+    showFilters: false, // Hidden by default
+    showControls: true, // Shown by default
+    showSettings: false, // Hidden by default
+  },
+
+  graph: {
+    edgeType: 'bezier',
+    edgeStrokeWidth: 3,
+    edgeAnimation: true,
+    showEdgeLabels: true,
+  },
+
+  appearance: {
+    agentIdleColor: '#60a5fa', // Blue
+    agentActiveColor: '#10b981', // Green
+    agentErrorColor: '#ef4444', // Red
+    nodeShadow: 'medium',
+    showStatusPulse: true,
+    compactNodeView: false,
+    theme: 'default',
+  },
+
+  advanced: {
+    layoutDirection: 'LR',
+    nodeSpacing: 75,       // Horizontal spacing between nodes
+    rankSpacing: 150,      // Vertical spacing between ranks
+    debugMode: false,
+    performanceMode: false,
+  },
+};
+
+const createActions = (set: any) => ({
+  // UI Actions
+  setShowFilters: (show: boolean) =>
+    set((state: SettingsState) => ({ ui: { ...state.ui, showFilters: show } })),
+
+  setShowControls: (show: boolean) =>
+    set((state: SettingsState) => ({ ui: { ...state.ui, showControls: show } })),
+
+  setShowSettings: (show: boolean) =>
+    set((state: SettingsState) => ({ ui: { ...state.ui, showSettings: show } })),
+
+  // Graph Actions
+  setEdgeType: (edgeType: SettingsState['graph']['edgeType']) =>
+    set((state: SettingsState) => ({ graph: { ...state.graph, edgeType } })),
+
+  setEdgeStrokeWidth: (width: number) =>
+    set((state: SettingsState) => ({ graph: { ...state.graph, edgeStrokeWidth: width } })),
+
+  setEdgeAnimation: (enabled: boolean) =>
+    set((state: SettingsState) => ({ graph: { ...state.graph, edgeAnimation: enabled } })),
+
+  setShowEdgeLabels: (show: boolean) =>
+    set((state: SettingsState) => ({ graph: { ...state.graph, showEdgeLabels: show } })),
+
+  // Appearance Actions
+  setTheme: (theme: string) =>
+    set((state: SettingsState) => ({ appearance: { ...state.appearance, theme } })),
+
+  setAgentIdleColor: (color: string) =>
+    set((state: SettingsState) => ({ appearance: { ...state.appearance, agentIdleColor: color } })),
+
+  setAgentActiveColor: (color: string) =>
+    set((state: SettingsState) => ({ appearance: { ...state.appearance, agentActiveColor: color } })),
+
+  setAgentErrorColor: (color: string) =>
+    set((state: SettingsState) => ({ appearance: { ...state.appearance, agentErrorColor: color } })),
+
+  setNodeShadow: (shadow: SettingsState['appearance']['nodeShadow']) =>
+    set((state: SettingsState) => ({ appearance: { ...state.appearance, nodeShadow: shadow } })),
+
+  setShowStatusPulse: (show: boolean) =>
+    set((state: SettingsState) => ({ appearance: { ...state.appearance, showStatusPulse: show } })),
+
+  setCompactNodeView: (compact: boolean) =>
+    set((state: SettingsState) => ({ appearance: { ...state.appearance, compactNodeView: compact } })),
+
+  // Advanced Actions
+  setLayoutDirection: (direction: SettingsState['advanced']['layoutDirection']) =>
+    set((state: SettingsState) => ({ advanced: { ...state.advanced, layoutDirection: direction } })),
+
+  setNodeSpacing: (spacing: number) =>
+    set((state: SettingsState) => ({ advanced: { ...state.advanced, nodeSpacing: spacing } })),
+
+  setRankSpacing: (spacing: number) =>
+    set((state: SettingsState) => ({ advanced: { ...state.advanced, rankSpacing: spacing } })),
+
+  setDebugMode: (enabled: boolean) =>
+    set((state: SettingsState) => ({ advanced: { ...state.advanced, debugMode: enabled } })),
+
+  setPerformanceMode: (enabled: boolean) =>
+    set((state: SettingsState) => ({ advanced: { ...state.advanced, performanceMode: enabled } })),
+
+  // Utility Actions
+  resetToDefaults: () => set(DEFAULT_SETTINGS),
+});
+
+export const useSettingsStore = create<SettingsState>()(
+  persist(
+    (set) => ({
+      ...DEFAULT_SETTINGS,
+      ...createActions(set),
+    }),
+    {
+      name: 'flock-flow-settings',
+      version: 1,
+    }
+  )
+);

flock/frontend/src/store/streamStore.ts

@@ -0,0 +1,68 @@
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+
+export interface StreamingOutputData {
+  agent_name: string;
+  run_id: string;
+  output_type: 'llm_token' | 'log' | 'stdout' | 'stderr';
+  content: string;
+  sequence: number;
+  is_final: boolean;
+  timestamp?: string;
+}
+
+interface StreamState {
+  // Map<agent_name, StreamingOutputData[]>
+  outputs: Map<string, StreamingOutputData[]>;
+
+  // Actions
+  addOutput: (agentName: string, output: StreamingOutputData) => void;
+  clearOutputs: (agentName: string) => void;
+  getOutputs: (agentName: string) => StreamingOutputData[];
+}
+
+export const useStreamStore = create<StreamState>()(
+  devtools(
+    (set, get) => ({
+      outputs: new Map(),
+
+      addOutput: (agentName, output) =>
+        set((state) => {
+          const outputs = new Map(state.outputs);
+          const existing = outputs.get(agentName) || [];
+
+          // Check if this exact event already exists (by sequence number and run_id)
+          // to prevent duplicates when loading history
+          // const isDuplicate = existing.some(
+          //   (e) => e.run_id === output.run_id && e.sequence === output.sequence
+          // );
+
+          // if (isDuplicate) {
+          //   return state; // Skip duplicate
+          // }
+
+          // Just append - display events exactly as they arrive from backend
+          const updated = [...existing, output];
+
+          // Keep only last 1000 outputs per agent to prevent memory issues
+          // const trimmed = updated.slice(-1000);
+
+          outputs.set(agentName, updated);
+          return { outputs };
+        }),
+
+      clearOutputs: (agentName) =>
+        set((state) => {
+          const outputs = new Map(state.outputs);
+          outputs.delete(agentName);
+          return { outputs };
+        }),
+
+      getOutputs: (agentName) => {
+        const outputs = get().outputs.get(agentName) || [];
+        return outputs;
+      },
+    }),
+    { name: 'streamStore' }
+  )
+);

flock/frontend/src/store/uiStore.test.ts

@@ -0,0 +1,54 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useUIStore } from './uiStore';
+
+describe('uiStore', () => {
+  beforeEach(() => {
+    // Reset store before each test
+    useUIStore.setState({
+      mode: 'agent',
+      selectedNodeIds: new Set(),
+      detailWindows: new Map(),
+      defaultTab: 'liveOutput',
+    });
+  });
+
+  it('should set mode to blackboard', () => {
+    useUIStore.getState().setMode('blackboard');
+    expect(useUIStore.getState().mode).toBe('blackboard');
+  });
+
+  it('should select and deselect nodes', () => {
+    useUIStore.getState().selectNode('node-1');
+    useUIStore.getState().selectNode('node-2');
+
+    let selectedIds = useUIStore.getState().selectedNodeIds;
+    expect(selectedIds.size).toBe(2);
+    expect(selectedIds.has('node-1')).toBe(true);
+    expect(selectedIds.has('node-2')).toBe(true);
+
+    useUIStore.getState().deselectNode('node-1');
+    selectedIds = useUIStore.getState().selectedNodeIds;
+    expect(selectedIds.size).toBe(1);
+    expect(selectedIds.has('node-1')).toBe(false);
+  });
+
+  it('should clear selection', () => {
+    useUIStore.getState().selectNode('node-1');
+    useUIStore.getState().selectNode('node-2');
+    useUIStore.getState().clearSelection();
+
+    expect(useUIStore.getState().selectedNodeIds.size).toBe(0);
+  });
+
+  it('should open and close detail windows', () => {
+    useUIStore.getState().openDetailWindow('node-1');
+
+    let windows = useUIStore.getState().detailWindows;
+    expect(windows.size).toBe(1);
+    expect(windows.get('node-1')?.nodeId).toBe('node-1');
+
+    useUIStore.getState().closeDetailWindow('node-1');
+    windows = useUIStore.getState().detailWindows;
+    expect(windows.size).toBe(0);
+  });
+});