flock-core 0.5.0b65__py3-none-any.whl → 0.5.0b70__py3-none-any.whl

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

@@ -1,65 +1,141 @@
-import React from 'react';
-import { useFilterStore } from '../../store/filterStore';
+import React, { useMemo } from 'react';
+import { useFilterStore, formatTimeRange } from '../../store/filterStore';
+import { useSettingsStore } from '../../store/settingsStore';
 import styles from './FilterPills.module.css';
 
+const extractLabelParts = (label: string) => {
+  const match = label.match(/^([^:]+):(.*)$/);
+  const title = match?.[1]?.trim() ?? label.trim();
+  const value = match?.[2]?.trim() ?? '';
+
+  return { title, value };
+};
+
 const FilterPills: React.FC = () => {
-  // Select the actual state values for reactivity, then derive filters
+  const showFilters = useSettingsStore((state) => state.ui.showFilters);
+  const setShowFilters = useSettingsStore((state) => state.setShowFilters);
   const correlationId = useFilterStore((state) => state.correlationId);
   const timeRange = useFilterStore((state) => state.timeRange);
+  const selectedArtifactTypes = useFilterStore((state) => state.selectedArtifactTypes);
+  const selectedProducers = useFilterStore((state) => state.selectedProducers);
+  const selectedTags = useFilterStore((state) => state.selectedTags);
+  const selectedVisibility = useFilterStore((state) => state.selectedVisibility);
   const removeFilter = useFilterStore((state) => state.removeFilter);
 
-  // Derive active filters from state
-  const activeFilters: Array<{ type: 'correlationId' | 'timeRange'; value: any; label: string }> = [];
+  const activeFilters = useMemo(() => {
+    const filters = [];
+    if (correlationId) {
+      filters.push({
+        type: 'correlationId' as const,
+        value: correlationId,
+        label: `Correlation ID: ${correlationId}`,
+      });
+    }
 
-  if (correlationId) {
-    activeFilters.push({
-      type: 'correlationId',
-      value: correlationId,
-      label: `Correlation ID: ${correlationId}`,
+    filters.push({
+      type: 'timeRange' as const,
+      value: timeRange,
+      label: `Time: ${formatTimeRange(timeRange)}`,
     });
-  }
 
-  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';
-    };
+    selectedArtifactTypes.forEach((type) => {
+      filters.push({
+        type: 'artifactTypes' as const,
+        value: type,
+        label: `Type: ${type}`,
+      });
+    });
 
-    activeFilters.push({
-      type: 'timeRange',
-      value: timeRange,
-      label: `Time: ${formatTimeRange(timeRange)}`,
+    selectedProducers.forEach((producer) => {
+      filters.push({
+        type: 'producers' as const,
+        value: producer,
+        label: `Producer: ${producer}`,
+      });
     });
-  }
+
+    selectedTags.forEach((tag) => {
+      filters.push({
+        type: 'tags' as const,
+        value: tag,
+        label: `Tag: ${tag}`,
+      });
+    });
+
+    selectedVisibility.forEach((visibilityKind) => {
+      filters.push({
+        type: 'visibility' as const,
+        value: visibilityKind,
+        label: `Visibility: ${visibilityKind}`,
+      });
+    });
+
+    return filters;
+  }, [correlationId, timeRange, selectedArtifactTypes, selectedProducers, selectedTags, selectedVisibility]);
 
   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 className={styles.wrapper}>
+      <button
+        type="button"
+        onClick={() => setShowFilters(!showFilters)}
+        className={`${styles.toggleButton} ${showFilters ? styles.toggleButtonActive : ''}`}
+        title={`${showFilters ? 'Hide' : 'Show'} filter panel (Ctrl+Shift+F)`}
+        aria-pressed={showFilters}
+        aria-label={showFilters ? 'Hide filter panel' : 'Show filter panel'}
+      >
+        <span className={styles.toggleIcon} aria-hidden="true">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path
+              d="M2.667 2.667h10.666L9.333 7v4.667l-2.666 1.333V7L2.667 2.667z"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </span>
+        <span className={styles.toggleLabel}>Filter</span>
+      </button>
+      <div className={styles.container} role="list">
+        {activeFilters.map((filter, index) => {
+          const labelValue =
+            filter.type === 'timeRange' && typeof filter.value !== 'string'
+              ? `Time: ${formatTimeRange(filter.value)}`
+              : filter.label;
+
+          const { title, value } = extractLabelParts(labelValue);
+          const accessibleDescriptor = value ? `${title} ${value}` : title;
+
+          return (
+            <div
+              key={`${filter.type}-${String(filter.value)}-${index}`}
+              className={styles.pill}
+              data-filter-type={filter.type}
+              role="listitem"
+            >
+              <span className={styles.pillAccent} aria-hidden="true" />
+              <div className={styles.textGroup}>
+                <span className={styles.pillTitle}>{title}</span>
+                {value && <span className={styles.pillValue}>{value}</span>}
+              </div>
+              <button
+                onClick={() => removeFilter(filter)}
+                aria-label={`Remove ${accessibleDescriptor} filter`}
+                className={styles.removeButton}
+                type="button"
+              >
+                <span aria-hidden="true" className={styles.removeIcon}>
+                  ×
+                </span>
+              </button>
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 };

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import MultiSelect from '../settings/MultiSelect';
+import { useFilterStore } from '../../store/filterStore';
+
+const ProducerFilter: React.FC = () => {
+  const options = useFilterStore((state) => state.availableProducers);
+  const selected = useFilterStore((state) => state.selectedProducers);
+  const setProducers = useFilterStore((state) => state.setProducers);
+
+  return (
+    <MultiSelect
+      options={options}
+      selected={selected}
+      onChange={setProducers}
+      placeholder={options.length ? 'Select producers…' : 'No producers'}
+      disabled={options.length === 0}
+    />
+  );
+};
+
+export default ProducerFilter;

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

@@ -0,0 +1,60 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs);
+}
+
+.controlsRow {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  flex-wrap: wrap;
+}
+
+.select {
+  min-width: 180px;
+  padding: var(--spacing-1) var(--spacing-2);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border-subtle);
+  background: rgba(0, 0, 0, 0.35);
+  color: var(--color-text-primary);
+}
+
+.saveButton,
+.applyButton,
+.deleteButton {
+  padding: var(--spacing-1) var(--spacing-3);
+  border-radius: var(--radius-sm);
+  border: none;
+  font-size: var(--font-size-body-xs);
+  cursor: pointer;
+  transition: background-color var(--duration-fast) ease;
+}
+
+.saveButton {
+  background: var(--color-info);
+  color: var(--color-text-on-primary);
+}
+
+.applyButton {
+  background: var(--color-success);
+  color: var(--color-text-on-primary);
+}
+
+.deleteButton {
+  background: var(--color-error);
+  color: var(--color-text-on-primary);
+}
+
+.saveButton:disabled,
+.applyButton:disabled,
+.deleteButton:disabled,
+.select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.error {
+  font-size: var(--font-size-body-xs);
+  color: var(--color-error);
+}

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

@@ -0,0 +1,158 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import SavedFiltersControl from './SavedFiltersControl';
+import { useFilterStore } from '../../store/filterStore';
+import { indexedDBService } from '../../services/indexeddb';
+import type { SavedFilterMeta, FilterSnapshot } from '../../types/filters';
+
+vi.mock('../../store/filterStore');
+vi.mock('../../services/indexeddb', () => ({
+  indexedDBService: {
+    initialize: vi.fn(),
+    getAllFilterPresets: vi.fn(),
+    saveFilterPreset: vi.fn(),
+    deleteFilterPreset: vi.fn(),
+  },
+}));
+
+const baseSnapshot: FilterSnapshot = {
+  correlationId: null,
+  timeRange: { preset: 'last10min' },
+  artifactTypes: [],
+  producers: [],
+  tags: [],
+  visibility: [],
+};
+
+const createMockState = (overrides: Record<string, unknown> = {}) => ({
+  savedFilters: [] as SavedFilterMeta[],
+  setSavedFilters: vi.fn(),
+  addSavedFilter: vi.fn(),
+  removeSavedFilter: vi.fn(),
+  getFilterSnapshot: vi.fn(() => baseSnapshot),
+  applyFilterSnapshot: vi.fn(),
+  getActiveFilters: () => [],
+  ...overrides,
+});
+
+type MockFilterState = ReturnType<typeof createMockState>;
+
+let state: MockFilterState;
+type MockedFn = ReturnType<typeof vi.fn>;
+const mockedUseFilterStore = useFilterStore as unknown as MockedFn;
+
+const getIndexedDBMocks = () => indexedDBService as unknown as {
+  initialize: ReturnType<typeof vi.fn>;
+  getAllFilterPresets: ReturnType<typeof vi.fn>;
+  saveFilterPreset: ReturnType<typeof vi.fn>;
+  deleteFilterPreset: ReturnType<typeof vi.fn>;
+};
+
+describe('SavedFiltersControl', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    state = createMockState();
+    mockedUseFilterStore.mockReset();
+    mockedUseFilterStore.mockImplementation((selector: any) => selector(state as any));
+
+    const indexedDb = getIndexedDBMocks();
+    indexedDb.initialize.mockResolvedValue(undefined);
+    indexedDb.getAllFilterPresets.mockResolvedValue([]);
+    indexedDb.saveFilterPreset.mockResolvedValue(undefined);
+    indexedDb.deleteFilterPreset.mockResolvedValue(undefined);
+  });
+
+  it('loads saved presets on mount', async () => {
+    const presets: SavedFilterMeta[] = [
+      {
+        filter_id: 'preset-1',
+        name: 'Recent Ops',
+        created_at: Date.now(),
+        filters: baseSnapshot,
+      },
+    ];
+
+    const indexedDb = getIndexedDBMocks();
+    indexedDb.getAllFilterPresets.mockResolvedValueOnce(presets);
+
+    render(<SavedFiltersControl />);
+
+    await waitFor(() => {
+      expect(state.setSavedFilters).toHaveBeenCalledWith(presets);
+    });
+  });
+
+  it('saves current snapshot when Save Current is clicked', async () => {
+    const indexedDb = getIndexedDBMocks();
+    indexedDb.getAllFilterPresets.mockResolvedValueOnce([]);
+
+    const promptSpy = vi.spyOn(window, 'prompt').mockReturnValue('My Filters');
+    const uuidSpy = vi.spyOn(globalThis.crypto, 'randomUUID').mockReturnValue('123e4567-e89b-12d3-a456-426614174000');
+
+    render(<SavedFiltersControl />);
+
+    const saveButton = await screen.findByRole('button', { name: /save current/i });
+    fireEvent.click(saveButton);
+
+    await waitFor(() => {
+      expect(indexedDb.saveFilterPreset).toHaveBeenCalledTimes(1);
+      expect(state.addSavedFilter).toHaveBeenCalledTimes(1);
+    });
+
+    const savedRecord = indexedDb.saveFilterPreset.mock.calls[0]?.[0];
+    expect(savedRecord).toBeDefined();
+    if (savedRecord) {
+      expect(savedRecord.filter_id).toBe('123e4567-e89b-12d3-a456-426614174000');
+      expect(savedRecord.name).toBe('My Filters');
+      expect(savedRecord.filters).toEqual(baseSnapshot);
+    }
+
+    promptSpy.mockRestore();
+    uuidSpy.mockRestore();
+  });
+
+  it('applies selected preset when Apply is clicked', async () => {
+    const preset: SavedFilterMeta = {
+      filter_id: 'preset-apply',
+      name: 'Important',
+      created_at: Date.now(),
+      filters: { ...baseSnapshot, artifactTypes: ['Plan'] },
+    };
+    state = createMockState({ savedFilters: [preset] });
+    mockedUseFilterStore.mockImplementation((selector: any) => selector(state as any));
+
+    const indexedDb = getIndexedDBMocks();
+    indexedDb.getAllFilterPresets.mockResolvedValueOnce([preset]);
+
+    render(<SavedFiltersControl />);
+
+    const applyButton = await screen.findByRole('button', { name: /apply/i });
+    fireEvent.click(applyButton);
+
+    expect(state.applyFilterSnapshot).toHaveBeenCalledWith(preset.filters);
+  });
+
+  it('deletes preset and updates store when Delete is clicked', async () => {
+    const preset: SavedFilterMeta = {
+      filter_id: 'preset-delete',
+      name: 'Old preset',
+      created_at: Date.now(),
+      filters: baseSnapshot,
+    };
+    state = createMockState({ savedFilters: [preset] });
+    mockedUseFilterStore.mockImplementation((selector: any) => selector(state as any));
+
+    const indexedDb = getIndexedDBMocks();
+    indexedDb.getAllFilterPresets.mockResolvedValueOnce([preset]);
+
+    render(<SavedFiltersControl />);
+
+    const deleteButton = await screen.findByRole('button', { name: /delete/i });
+    fireEvent.click(deleteButton);
+
+    await waitFor(() => {
+      expect(indexedDb.deleteFilterPreset).toHaveBeenCalledWith('preset-delete');
+      expect(state.removeSavedFilter).toHaveBeenCalledWith('preset-delete');
+    });
+  });
+});

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

@@ -0,0 +1,159 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { indexedDBService } from '../../services/indexeddb';
+import { useFilterStore } from '../../store/filterStore';
+import styles from './SavedFiltersControl.module.css';
+
+const SavedFiltersControl: React.FC = () => {
+  const savedFilters = useFilterStore((state) => state.savedFilters);
+  const setSavedFilters = useFilterStore((state) => state.setSavedFilters);
+  const addSavedFilter = useFilterStore((state) => state.addSavedFilter);
+  const removeSavedFilter = useFilterStore((state) => state.removeSavedFilter);
+  const getFilterSnapshot = useFilterStore((state) => state.getFilterSnapshot);
+  const applyFilterSnapshot = useFilterStore((state) => state.applyFilterSnapshot);
+
+  const [selectedId, setSelectedId] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const renderCountRef = useRef(0);
+  renderCountRef.current += 1;
+  if (import.meta.env.DEV) {
+    console.debug('[SavedFilters] render', {
+      renderCount: renderCountRef.current,
+      savedCount: savedFilters.length,
+      loading,
+      selectedId
+    });
+  }
+
+  useEffect(() => {
+    let mounted = true;
+    (async () => {
+      try {
+        if (import.meta.env.DEV) {
+          console.debug('[SavedFilters] initializing IndexedDB');
+        }
+        await indexedDBService.initialize();
+        const presets = await indexedDBService.getAllFilterPresets();
+        if (import.meta.env.DEV) {
+          console.debug('[SavedFilters] loaded presets', { count: presets.length });
+        }
+        if (!mounted) return;
+        setSavedFilters(presets);
+        if (presets.length > 0) {
+          setSelectedId(presets[0]?.filter_id ?? '');
+        } else {
+          setSelectedId('');
+        }
+        setError(null);
+      } catch (err) {
+        console.error('[SavedFilters] Failed to load presets', err);
+        if (mounted) {
+          setError('Unable to load saved presets');
+        }
+      } finally {
+        if (mounted) {
+          setLoading(false);
+        }
+      }
+    })();
+    return () => {
+      mounted = false;
+    };
+  }, [setSavedFilters]);
+
+  const handleSavePreset = async () => {
+    const name = window.prompt('Save current filters as preset. Enter a name:');
+    if (!name || !name.trim()) {
+      return;
+    }
+
+    try {
+      const record = {
+        filter_id: typeof crypto !== 'undefined' && crypto.randomUUID ? crypto.randomUUID() : `filter-${Date.now()}`,
+        name: name.trim(),
+        created_at: Date.now(),
+        filters: getFilterSnapshot(),
+      };
+      await indexedDBService.saveFilterPreset(record);
+      addSavedFilter(record);
+      setSelectedId(record.filter_id);
+      setError(null);
+    } catch (err) {
+      console.error('[SavedFilters] Failed to save preset', err);
+      setError('Failed to save preset');
+    }
+  };
+
+  const handleApplyPreset = () => {
+    if (!selectedId) return;
+    const preset = savedFilters.find((filter) => filter.filter_id === selectedId);
+    if (!preset) return;
+    applyFilterSnapshot(preset.filters);
+  };
+
+  const handleDeletePreset = async () => {
+    if (!selectedId) return;
+    try {
+      await indexedDBService.deleteFilterPreset(selectedId);
+      removeSavedFilter(selectedId);
+      const remaining = savedFilters.filter((filter) => filter.filter_id !== selectedId);
+      setSelectedId(remaining[0]?.filter_id ?? '');
+      setError(null);
+    } catch (err) {
+      console.error('[SavedFilters] Failed to delete preset', err);
+      setError('Failed to delete preset');
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.controlsRow}>
+        <button
+          type="button"
+          className={styles.saveButton}
+          onClick={handleSavePreset}
+          disabled={loading}
+        >
+          Save Current
+        </button>
+
+        <select
+          className={styles.select}
+          value={selectedId}
+          onChange={(event) => setSelectedId(event.target.value)}
+          disabled={loading || savedFilters.length === 0}
+          aria-label="Saved filter presets"
+        >
+          {savedFilters.length === 0 && <option value="">No presets</option>}
+          {savedFilters.map((preset) => (
+            <option key={preset.filter_id} value={preset.filter_id}>
+              {preset.name}
+            </option>
+          ))}
+        </select>
+
+        <button
+          type="button"
+          className={styles.applyButton}
+          onClick={handleApplyPreset}
+          disabled={!selectedId}
+        >
+          Apply
+        </button>
+
+        <button
+          type="button"
+          className={styles.deleteButton}
+          onClick={handleDeletePreset}
+          disabled={!selectedId}
+        >
+          Delete
+        </button>
+      </div>
+      {error && <div className={styles.error}>{error}</div>}
+    </div>
+  );
+};
+
+export default SavedFiltersControl;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import MultiSelect from '../settings/MultiSelect';
+import { useFilterStore } from '../../store/filterStore';
+
+const TagFilter: React.FC = () => {
+  const options = useFilterStore((state) => state.availableTags);
+  const selected = useFilterStore((state) => state.selectedTags);
+  const setTags = useFilterStore((state) => state.setTags);
+
+  return (
+    <MultiSelect
+      options={options}
+      selected={selected}
+      onChange={setTags}
+      placeholder={options.length ? 'Select tags…' : 'No tags available'}
+      disabled={options.length === 0}
+    />
+  );
+};
+
+export default TagFilter;

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

@@ -6,6 +6,7 @@
 
 .presetButtons {
   display: flex;
+  flex-wrap: wrap;
   gap: var(--spacing-2);
   align-items: center;
 }
@@ -40,6 +41,29 @@
   border-color: var(--color-primary-700);
 }
 
+.presetButtonAll {
+  background: rgba(194, 65, 244, 0.15); /* secondary tint */
+  color: var(--color-secondary-200);
+  border-color: var(--color-secondary-500);
+}
+
+.presetButtonAll:hover {
+  background: rgba(194, 65, 244, 0.25);
+  border-color: var(--color-secondary-400);
+  color: var(--color-secondary-100);
+}
+
+.presetButtonAll.active {
+  background: var(--color-secondary-500);
+  border-color: var(--color-secondary-300);
+  color: var(--color-text-on-primary);
+}
+
+.presetButtonAll.active:hover {
+  background: var(--color-secondary-400);
+  border-color: var(--color-secondary-200);
+}
+
 .customRange {
   display: flex;
   gap: var(--spacing-3);

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

@@ -41,6 +41,7 @@ const TimeRangeFilter: React.FC = () => {
   };
 
   const presets: { preset: TimeRangePreset; label: string }[] = [
+    { preset: 'all', label: 'All' },
     { preset: 'last5min', label: 'Last 5 min' },
     { preset: 'last10min', label: 'Last 10 min' },
     { preset: 'last1hour', label: 'Last hour' },
@@ -54,7 +55,11 @@ const TimeRangeFilter: React.FC = () => {
           <button
             key={preset}
             onClick={() => handlePresetClick(preset)}
-            className={`${styles.presetButton} ${timeRange.preset === preset ? styles.active : ''}`}
+            className={[
+              styles.presetButton,
+              preset === 'all' ? styles.presetButtonAll : '',
+              timeRange.preset === preset ? styles.active : '',
+            ].filter(Boolean).join(' ')}
           >
             {label}
           </button>

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import MultiSelect from '../settings/MultiSelect';
+import { useFilterStore } from '../../store/filterStore';
+
+const VisibilityFilter: React.FC = () => {
+  const options = useFilterStore((state) => state.availableVisibility);
+  const selected = useFilterStore((state) => state.selectedVisibility);
+  const setVisibility = useFilterStore((state) => state.setVisibility);
+
+  return (
+    <MultiSelect
+      options={options}
+      selected={selected}
+      onChange={setVisibility}
+      placeholder={options.length ? 'Select visibility…' : 'No visibility options'}
+      disabled={options.length === 0}
+    />
+  );
+};
+
+export default VisibilityFilter;