flock-core 0.5.0b28__py3-none-any.whl → 0.5.0b51__py3-none-any.whl

flock/frontend/src/components/filters/FilterPills.test.tsx

@@ -0,0 +1,173 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import FilterPills from './FilterPills';
+import { useFilterStore } from '../../store/filterStore';
+
+vi.mock('../../store/filterStore');
+
+describe('FilterPills', () => {
+  const mockRemoveFilter = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should not render anything when no filters are active', () => {
+    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
+      const state = {
+        correlationId: null,
+        timeRange: { preset: 'last10min' as const },
+        removeFilter: mockRemoveFilter,
+      };
+      return selector(state);
+    });
+
+    const { container } = render(<FilterPills />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should render filter pill for active correlation ID', () => {
+    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
+      const state = {
+        correlationId: 'test-123',
+        timeRange: { preset: 'last10min' as const },
+        removeFilter: mockRemoveFilter,
+      };
+      return selector(state);
+    });
+
+    render(<FilterPills />);
+    expect(screen.getByText('Correlation ID: test-123')).toBeInTheDocument();
+  });
+
+  it('should render filter pill for active time range', () => {
+    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
+      const state = {
+        correlationId: null,
+        timeRange: { preset: 'last5min' as const },
+        removeFilter: mockRemoveFilter,
+      };
+      return selector(state);
+    });
+
+    render(<FilterPills />);
+    expect(screen.getByText('Time: Last 5 min')).toBeInTheDocument();
+  });
+
+  it('should render multiple filter pills', () => {
+    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
+      const state = {
+        correlationId: 'test-123',
+        timeRange: { preset: 'last1hour' as const },
+        removeFilter: mockRemoveFilter,
+      };
+      return selector(state);
+    });
+
+    render(<FilterPills />);
+    expect(screen.getByText('Correlation ID: test-123')).toBeInTheDocument();
+    expect(screen.getByText('Time: Last hour')).toBeInTheDocument();
+  });
+
+  it('should render remove button for each pill', () => {
+    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
+      const state = {
+        correlationId: 'test-123',
+        timeRange: { preset: 'last10min' as const },
+        removeFilter: mockRemoveFilter,
+      };
+      return selector(state);
+    });
+
+    render(<FilterPills />);
+    const removeButton = screen.getByRole('button', { name: /remove.*correlation/i });
+    expect(removeButton).toBeInTheDocument();
+  });
+
+  it('should call removeFilter when remove button is clicked', () => {
+    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
+      const state = {
+        correlationId: 'test-123',
+        timeRange: { preset: 'last10min' as const },
+        removeFilter: mockRemoveFilter,
+      };
+      return selector(state);
+    });
+
+    render(<FilterPills />);
+    const removeButton = screen.getByRole('button', { name: /remove.*correlation/i });
+
+    fireEvent.click(removeButton);
+
+    expect(mockRemoveFilter).toHaveBeenCalledWith('correlationId');
+  });
+
+  it('should call removeFilter with correct type for time range', () => {
+    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
+      const state = {
+        correlationId: null,
+        timeRange: { preset: 'last5min' as const },
+        removeFilter: mockRemoveFilter,
+      };
+      return selector(state);
+    });
+
+    render(<FilterPills />);
+    const removeButton = screen.getByRole('button', { name: /remove.*time/i });
+
+    fireEvent.click(removeButton);
+
+    expect(mockRemoveFilter).toHaveBeenCalledWith('timeRange');
+  });
+
+  it('should display pills in a horizontal layout', () => {
+    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
+      const state = {
+        correlationId: 'test-123',
+        timeRange: { preset: 'last5min' as const },
+        removeFilter: mockRemoveFilter,
+      };
+      return selector(state);
+    });
+
+    render(<FilterPills />);
+    const container = screen.getByText('Correlation ID: test-123').closest('div')?.parentElement;
+
+    // Should have container class (hashed by CSS modules)
+    expect(container?.className).toMatch(/container/);
+  });
+
+  it('should render X icon in remove button', () => {
+    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
+      const state = {
+        correlationId: 'test-123',
+        timeRange: { preset: 'last10min' as const },
+        removeFilter: mockRemoveFilter,
+      };
+      return selector(state);
+    });
+
+    render(<FilterPills />);
+    const removeButton = screen.getByRole('button', { name: /remove.*correlation/i });
+
+    expect(removeButton).toHaveTextContent('×');
+  });
+
+  it('should handle custom time range label', () => {
+    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
+      const state = {
+        correlationId: null,
+        timeRange: {
+          preset: 'custom' as const,
+          start: new Date('2025-01-01T10:00:00').getTime(),
+          end: new Date('2025-01-01T12:00:00').getTime(),
+        },
+        removeFilter: mockRemoveFilter,
+      };
+      return selector(state);
+    });
+
+    render(<FilterPills />);
+    expect(screen.getByText(/Time:/)).toBeInTheDocument();
+  });
+});

flock/frontend/src/components/filters/FilterPills.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { useFilterStore } from '../../store/filterStore';
+import styles from './FilterPills.module.css';
+
+const FilterPills: React.FC = () => {
+  // Select the actual state values for reactivity, then derive filters
+  const correlationId = useFilterStore((state) => state.correlationId);
+  const timeRange = useFilterStore((state) => state.timeRange);
+  const removeFilter = useFilterStore((state) => state.removeFilter);
+
+  // Derive active filters from state
+  const activeFilters: Array<{ type: 'correlationId' | 'timeRange'; value: any; label: string }> = [];
+
+  if (correlationId) {
+    activeFilters.push({
+      type: 'correlationId',
+      value: correlationId,
+      label: `Correlation ID: ${correlationId}`,
+    });
+  }
+
+  if (timeRange.preset !== 'last10min') {
+    const formatTimeRange = (range: typeof timeRange): string => {
+      if (range.preset === 'last5min') return 'Last 5 min';
+      if (range.preset === 'last10min') return 'Last 10 min';
+      if (range.preset === 'last1hour') return 'Last hour';
+      if (range.preset === 'custom' && range.start && range.end) {
+        const startDate = new Date(range.start).toLocaleString();
+        const endDate = new Date(range.end).toLocaleString();
+        return `${startDate} - ${endDate}`;
+      }
+      return 'Unknown';
+    };
+
+    activeFilters.push({
+      type: 'timeRange',
+      value: timeRange,
+      label: `Time: ${formatTimeRange(timeRange)}`,
+    });
+  }
+
+  if (activeFilters.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={styles.container}>
+      {activeFilters.map((filter, index) => (
+        <div
+          key={filter.type}
+          className={`${styles.pill} ${index === 1 ? styles.pillSecondary : ''}`}
+        >
+          <span className={styles.pillLabel}>{filter.label}</span>
+          <button
+            onClick={() => removeFilter(filter.type)}
+            aria-label={`Remove ${filter.type} filter`}
+            className={styles.removeButton}
+          >
+            ×
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default FilterPills;

flock/frontend/src/components/filters/TimeRangeFilter.module.css

@@ -0,0 +1,91 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.presetButtons {
+  display: flex;
+  gap: var(--spacing-2);
+  align-items: center;
+}
+
+.presetButton {
+  padding: var(--spacing-2) var(--spacing-4);
+  background-color: var(--color-bg-surface);
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-size: var(--font-size-body-sm);
+  font-weight: var(--font-weight-medium);
+  font-family: var(--font-family-sans);
+  transition: var(--transition-colors);
+  white-space: nowrap;
+}
+
+.presetButton:hover {
+  background-color: var(--color-bg-overlay);
+  border-color: var(--color-border-strong);
+}
+
+.presetButton.active {
+  background-color: var(--color-primary-600);
+  color: var(--color-text-on-primary);
+  border-color: var(--color-primary-600);
+}
+
+.presetButton.active:hover {
+  background-color: var(--color-primary-700);
+  border-color: var(--color-primary-700);
+}
+
+.customRange {
+  display: flex;
+  gap: var(--spacing-3);
+  align-items: center;
+  padding: var(--spacing-2);
+  background-color: var(--color-bg-surface);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border-subtle);
+}
+
+.dateInputGroup {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.dateLabel {
+  font-size: var(--font-size-caption);
+  color: var(--color-text-tertiary);
+  font-weight: var(--font-weight-medium);
+}
+
+.dateInput {
+  padding: var(--spacing-1-5) var(--spacing-2);
+  background-color: var(--color-bg-elevated);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-body-sm);
+  font-family: var(--font-family-sans);
+  color: var(--color-text-primary);
+  outline: none;
+  transition: var(--transition-colors), box-shadow var(--duration-normal) var(--ease-smooth);
+}
+
+.dateInput:focus {
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-glow-primary);
+}
+
+/* Custom styling for date input calendar icon */
+.dateInput::-webkit-calendar-picker-indicator {
+  cursor: pointer;
+  filter: invert(0.7);
+  transition: var(--transition-opacity);
+}
+
+.dateInput::-webkit-calendar-picker-indicator:hover {
+  filter: invert(1);
+}

flock/frontend/src/components/filters/TimeRangeFilter.test.tsx

@@ -0,0 +1,154 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import TimeRangeFilter from './TimeRangeFilter';
+import { useFilterStore } from '../../store/filterStore';
+
+vi.mock('../../store/filterStore');
+
+describe('TimeRangeFilter', () => {
+  const mockSetTimeRange = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
+      const state = {
+        timeRange: { preset: 'last10min' },
+        setTimeRange: mockSetTimeRange,
+      };
+      return selector(state);
+    });
+  });
+
+  it('should render time range filter with presets', () => {
+    render(<TimeRangeFilter />);
+    expect(screen.getByText(/Last 5 min/i)).toBeInTheDocument();
+    expect(screen.getByText(/Last 10 min/i)).toBeInTheDocument();
+    expect(screen.getByText(/Last hour/i)).toBeInTheDocument();
+    expect(screen.getByText(/Custom/i)).toBeInTheDocument();
+  });
+
+  it('should highlight selected preset', () => {
+    render(<TimeRangeFilter />);
+    const last10MinButton = screen.getByText(/Last 10 min/i);
+
+    // Should have active class for selected preset (hashed by CSS modules)
+    expect(last10MinButton.className).toMatch(/active/);
+  });
+
+  it('should call setTimeRange when preset is selected', () => {
+    render(<TimeRangeFilter />);
+    const last5MinButton = screen.getByText(/Last 5 min/i);
+
+    fireEvent.click(last5MinButton);
+
+    expect(mockSetTimeRange).toHaveBeenCalledWith({ preset: 'last5min' });
+  });
+
+  it('should show custom date inputs when Custom is selected', () => {
+    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
+      const state = {
+        timeRange: { preset: 'custom', start: Date.now() - 3600000, end: Date.now() },
+        setTimeRange: mockSetTimeRange,
+      };
+      return selector(state);
+    });
+
+    render(<TimeRangeFilter />);
+
+    expect(screen.getByLabelText(/Start/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/End/i)).toBeInTheDocument();
+  });
+
+  it('should not show custom date inputs when preset is not custom', () => {
+    render(<TimeRangeFilter />);
+
+    expect(screen.queryByLabelText(/Start/i)).not.toBeInTheDocument();
+    expect(screen.queryByLabelText(/End/i)).not.toBeInTheDocument();
+  });
+
+  it('should call setTimeRange with custom range when dates are changed', () => {
+    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
+      const state = {
+        timeRange: { preset: 'custom', start: Date.now() - 3600000, end: Date.now() },
+        setTimeRange: mockSetTimeRange,
+      };
+      return selector(state);
+    });
+
+    render(<TimeRangeFilter />);
+
+    const startInput = screen.getByLabelText(/Start/i) as HTMLInputElement;
+
+    // Create datetime-local format
+    const startDate = new Date(Date.now() - 7200000);
+    const startValue = startDate.toISOString().slice(0, 16);
+
+    fireEvent.change(startInput, { target: { value: startValue } });
+
+    expect(mockSetTimeRange).toHaveBeenCalledWith({
+      preset: 'custom',
+      start: expect.any(Number),
+      end: expect.any(Number),
+    });
+  });
+
+  it('should display current custom range values in inputs', () => {
+    const now = Date.now();
+    const start = now - 3600000;
+    const end = now;
+
+    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
+      const state = {
+        timeRange: { preset: 'custom', start, end },
+        setTimeRange: mockSetTimeRange,
+      };
+      return selector(state);
+    });
+
+    render(<TimeRangeFilter />);
+
+    const startInput = screen.getByLabelText(/Start/i) as HTMLInputElement;
+    const endInput = screen.getByLabelText(/End/i) as HTMLInputElement;
+
+    // Should have values set
+    expect(startInput.value).toBeTruthy();
+    expect(endInput.value).toBeTruthy();
+  });
+
+  it('should switch to custom preset when clicking Custom button', () => {
+    render(<TimeRangeFilter />);
+    const customButton = screen.getByText(/Custom/i);
+
+    fireEvent.click(customButton);
+
+    expect(mockSetTimeRange).toHaveBeenCalledWith({
+      preset: 'custom',
+      start: expect.any(Number),
+      end: expect.any(Number),
+    });
+  });
+
+  it('should apply consistent styling to all preset buttons', () => {
+    render(<TimeRangeFilter />);
+    const buttons = [
+      screen.getByText(/Last 5 min/i),
+      screen.getByText(/Last 10 min/i),
+      screen.getByText(/Last hour/i),
+      screen.getByText(/Custom/i),
+    ];
+
+    buttons.forEach((button) => {
+      // All buttons should have the presetButton class (hashed by CSS modules)
+      expect(button.className).toMatch(/presetButton/);
+    });
+  });
+
+  it('should handle last1hour preset correctly', () => {
+    render(<TimeRangeFilter />);
+    const lastHourButton = screen.getByText(/Last hour/i);
+
+    fireEvent.click(lastHourButton);
+
+    expect(mockSetTimeRange).toHaveBeenCalledWith({ preset: 'last1hour' });
+  });
+});

flock/frontend/src/components/filters/TimeRangeFilter.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { useFilterStore } from '../../store/filterStore';
+import { TimeRangePreset } from '../../types/filters';
+import styles from './TimeRangeFilter.module.css';
+
+const TimeRangeFilter: React.FC = () => {
+  const timeRange = useFilterStore((state) => state.timeRange);
+  const setTimeRange = useFilterStore((state) => state.setTimeRange);
+
+  const handlePresetClick = (preset: TimeRangePreset) => {
+    if (preset === 'custom') {
+      // Initialize custom range with last hour
+      const end = Date.now();
+      const start = end - 3600000; // 1 hour ago
+      setTimeRange({ preset: 'custom', start, end });
+    } else {
+      setTimeRange({ preset });
+    }
+  };
+
+  const handleStartChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const start = new Date(e.target.value).getTime();
+    setTimeRange({
+      preset: 'custom',
+      start,
+      end: timeRange.end || Date.now(),
+    });
+  };
+
+  const handleEndChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const end = new Date(e.target.value).getTime();
+    setTimeRange({
+      preset: 'custom',
+      start: timeRange.start || Date.now() - 3600000,
+      end,
+    });
+  };
+
+  const formatDateTimeLocal = (timestamp: number): string => {
+    return new Date(timestamp).toISOString().slice(0, 16);
+  };
+
+  const presets: { preset: TimeRangePreset; label: string }[] = [
+    { preset: 'last5min', label: 'Last 5 min' },
+    { preset: 'last10min', label: 'Last 10 min' },
+    { preset: 'last1hour', label: 'Last hour' },
+    { preset: 'custom', label: 'Custom' },
+  ];
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.presetButtons}>
+        {presets.map(({ preset, label }) => (
+          <button
+            key={preset}
+            onClick={() => handlePresetClick(preset)}
+            className={`${styles.presetButton} ${timeRange.preset === preset ? styles.active : ''}`}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+
+      {timeRange.preset === 'custom' && (
+        <div className={styles.customRange}>
+          <div className={styles.dateInputGroup}>
+            <label
+              htmlFor="start-time"
+              className={styles.dateLabel}
+            >
+              Start
+            </label>
+            <input
+              id="start-time"
+              type="datetime-local"
+              value={
+                timeRange.start ? formatDateTimeLocal(timeRange.start) : ''
+              }
+              onChange={handleStartChange}
+              className={styles.dateInput}
+            />
+          </div>
+
+          <div className={styles.dateInputGroup}>
+            <label
+              htmlFor="end-time"
+              className={styles.dateLabel}
+            >
+              End
+            </label>
+            <input
+              id="end-time"
+              type="datetime-local"
+              value={timeRange.end ? formatDateTimeLocal(timeRange.end) : ''}
+              onChange={handleEndChange}
+              className={styles.dateInput}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TimeRangeFilter;

flock/frontend/src/components/graph/AgentNode.test.tsx

@@ -0,0 +1,75 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ReactFlowProvider } from '@xyflow/react';
+import AgentNode from './AgentNode';
+import { AgentNodeData } from '../../types/graph';
+import { NodeProps } from '@xyflow/react';
+
+describe('AgentNode', () => {
+  const createNodeProps = (data: AgentNodeData, selected = false): NodeProps =>
+    ({
+      id: 'test-agent',
+      data,
+      selected,
+      type: 'agent',
+      isConnectable: true,
+      dragging: false,
+      zIndex: 0,
+      selectable: true,
+      deletable: true,
+      draggable: true,
+    }) as unknown as NodeProps;
+
+  it('should render agent name', () => {
+    const data: AgentNodeData = {
+      name: 'test-agent',
+      status: 'idle',
+      subscriptions: ['Movie'],
+      sentCount: 5,
+      recvCount: 3,
+    };
+
+    render(
+      <ReactFlowProvider>
+        <AgentNode {...createNodeProps(data)} />
+      </ReactFlowProvider>
+    );
+    expect(screen.getByText('test-agent')).toBeInTheDocument();
+  });
+
+  it('should render subscriptions', () => {
+    const data: AgentNodeData = {
+      name: 'test-agent',
+      status: 'idle',
+      subscriptions: ['Movie', 'Tagline'],
+      sentCount: 5,
+      recvCount: 3,
+    };
+
+    render(
+      <ReactFlowProvider>
+        <AgentNode {...createNodeProps(data)} />
+      </ReactFlowProvider>
+    );
+    expect(screen.getByText('Movie')).toBeInTheDocument();
+    expect(screen.getByText('Tagline')).toBeInTheDocument();
+  });
+
+  it('should render sent and received counts', () => {
+    const data: AgentNodeData = {
+      name: 'test-agent',
+      status: 'idle',
+      subscriptions: [],
+      sentCount: 5,
+      recvCount: 3,
+    };
+
+    render(
+      <ReactFlowProvider>
+        <AgentNode {...createNodeProps(data)} />
+      </ReactFlowProvider>
+    );
+    expect(screen.getByText(/↑ 5/)).toBeInTheDocument();
+    expect(screen.getByText(/↓ 3/)).toBeInTheDocument();
+  });
+});