flock-core 0.5.0b50__py3-none-any.whl → 0.5.0b52__py3-none-any.whl

flock/frontend/src/store/moduleStore.ts

@@ -0,0 +1,57 @@
+import { create } from 'zustand';
+import { devtools } 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(
+    (set) => ({
+      instances: new Map(),
+
+      addModule: (module) =>
+        set((state) => {
+          const instances = new Map(state.instances);
+          instances.set(module.id, module);
+          return { instances };
+        }),
+
+      updateModule: (id, updates) =>
+        set((state) => {
+          const instances = new Map(state.instances);
+          const existing = instances.get(id);
+          if (existing) {
+            instances.set(id, { ...existing, ...updates });
+          }
+          return { instances };
+        }),
+
+      removeModule: (id) =>
+        set((state) => {
+          const instances = new Map(state.instances);
+          instances.delete(id);
+          return { instances };
+        }),
+
+      toggleVisibility: (id) =>
+        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: '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);
+  });
+});

flock/frontend/src/store/uiStore.ts

@@ -0,0 +1,110 @@
+import { create } from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+
+export type VisualizationMode = 'agent' | 'blackboard';
+
+interface DetailWindow {
+  nodeId: string;
+  position: { x: number; y: number };
+  size: { width: number; height: number };
+  activeTab: 'liveOutput' | 'messageHistory' | 'runStatus';
+}
+
+interface UIState {
+  // Visualization mode
+  mode: VisualizationMode;
+  setMode: (mode: VisualizationMode) => void;
+
+  // Node selection
+  selectedNodeIds: Set<string>;
+  selectNode: (nodeId: string) => void;
+  deselectNode: (nodeId: string) => void;
+  clearSelection: () => void;
+
+  // Detail windows
+  detailWindows: Map<string, DetailWindow>;
+  openDetailWindow: (nodeId: string) => void;
+  closeDetailWindow: (nodeId: string) => void;
+  updateDetailWindow: (nodeId: string, updates: Partial<DetailWindow>) => void;
+
+  // Layout preferences
+  layoutDirection: 'TB' | 'LR';
+  setLayoutDirection: (direction: 'TB' | 'LR') => void;
+  autoLayoutEnabled: boolean;
+  setAutoLayoutEnabled: (enabled: boolean) => void;
+
+  // Preferences
+  defaultTab: 'liveOutput' | 'messageHistory' | 'runStatus';
+  setDefaultTab: (tab: 'liveOutput' | 'messageHistory' | 'runStatus') => void;
+}
+
+export const useUIStore = create<UIState>()(
+  devtools(
+    persist(
+      (set) => ({
+        mode: 'agent',
+        setMode: (mode) => set({ mode }),
+
+        selectedNodeIds: new Set(),
+        selectNode: (nodeId) =>
+          set((state) => ({
+            selectedNodeIds: new Set(state.selectedNodeIds).add(nodeId),
+          })),
+        deselectNode: (nodeId) =>
+          set((state) => {
+            const ids = new Set(state.selectedNodeIds);
+            ids.delete(nodeId);
+            return { selectedNodeIds: ids };
+          }),
+        clearSelection: () => set({ selectedNodeIds: new Set() }),
+
+        detailWindows: new Map(),
+        openDetailWindow: (nodeId) =>
+          set((state) => {
+            const windows = new Map(state.detailWindows);
+            if (!windows.has(nodeId)) {
+              windows.set(nodeId, {
+                nodeId,
+                position: { x: 100 + windows.size * 20, y: 100 + windows.size * 20 },
+                size: { width: 600, height: 400 },
+                activeTab: state.defaultTab,
+              });
+            }
+            return { detailWindows: windows };
+          }),
+        closeDetailWindow: (nodeId) =>
+          set((state) => {
+            const windows = new Map(state.detailWindows);
+            windows.delete(nodeId);
+            return { detailWindows: windows };
+          }),
+        updateDetailWindow: (nodeId, updates) =>
+          set((state) => {
+            const windows = new Map(state.detailWindows);
+            const existing = windows.get(nodeId);
+            if (existing) {
+              windows.set(nodeId, { ...existing, ...updates });
+            }
+            return { detailWindows: windows };
+          }),
+
+        layoutDirection: 'TB',
+        setLayoutDirection: (direction) => set({ layoutDirection: direction }),
+        autoLayoutEnabled: true,
+        setAutoLayoutEnabled: (enabled) => set({ autoLayoutEnabled: enabled }),
+
+        defaultTab: 'liveOutput',
+        setDefaultTab: (tab) => set({ defaultTab: tab }),
+      }),
+      {
+        name: 'ui-storage',
+        partialize: (state) => ({
+          defaultTab: state.defaultTab,
+          layoutDirection: state.layoutDirection,
+          autoLayoutEnabled: state.autoLayoutEnabled,
+        }),
+      }
+    ),
+    { name: 'uiStore' }
+  )
+);

flock/frontend/src/store/wsStore.ts

@@ -0,0 +1,34 @@
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+
+export type ConnectionStatus = 'connecting' | 'connected' | 'disconnected' | 'reconnecting';
+
+interface WSState {
+  // Connection state
+  status: ConnectionStatus;
+  lastError: string | null;
+  reconnectAttempts: number;
+
+  // Actions
+  setStatus: (status: ConnectionStatus) => void;
+  setError: (error: string | null) => void;
+  incrementAttempts: () => void;
+  resetAttempts: () => void;
+}
+
+export const useWSStore = create<WSState>()(
+  devtools(
+    (set) => ({
+      status: 'disconnected',
+      lastError: null,
+      reconnectAttempts: 0,
+
+      setStatus: (status) => set({ status }),
+      setError: (error) => set({ lastError: error }),
+      incrementAttempts: () =>
+        set((state) => ({ reconnectAttempts: state.reconnectAttempts + 1 })),
+      resetAttempts: () => set({ reconnectAttempts: 0 }),
+    }),
+    { name: 'wsStore' }
+  )
+);

flock/frontend/src/styles/index.css

@@ -0,0 +1,15 @@
+/* Import design system variables */
+@import './variables.css';
+
+/* Import themed scrollbar styles */
+@import './scrollbar.css';
+
+/* Animations */
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}

flock/frontend/src/styles/scrollbar.css

@@ -0,0 +1,47 @@
+/* ========================================
+   Themed Scrollbars
+   ========================================
+   Global scrollbar styling that uses theme CSS variables
+   for consistent appearance across all scrollable areas
+   ======================================== */
+
+/* Webkit browsers (Chrome, Safari, Edge) */
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--color-bg-base);
+  border-radius: var(--radius-sm, 4px);
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--color-bg-overlay);
+  border-radius: var(--radius-sm, 4px);
+  border: 2px solid var(--color-bg-base);
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--color-border-default);
+}
+
+*::-webkit-scrollbar-thumb:active {
+  background: var(--color-border-strong);
+}
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-bg-overlay) var(--color-bg-base);
+}
+
+/* Ensure scrollbars are visible in detail windows and other components */
+div[style*="overflow: auto"],
+div[style*="overflow-y: auto"],
+div[style*="overflow-x: auto"],
+.settings-content,
+.publish-content {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-bg-overlay) var(--color-bg-base);
+}