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

flock/frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "flock-ui",
-  "version": "0.1.3",
+  "version": "0.1.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "flock-ui",
-      "version": "0.1.3",
+      "version": "0.1.7",
       "license": "ISC",
       "dependencies": {
         "@types/dagre": "^0.7.53",
@@ -147,7 +147,6 @@
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
@@ -356,7 +355,6 @@
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
       "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -507,7 +505,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -554,7 +551,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1507,7 +1503,8 @@
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -1638,7 +1635,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.0.tgz",
       "integrity": "sha512-1LOH8xovvsKsCBq1wnT4ntDUdCJKmnEakhsuoUSy6ExlHCkGP2hqnatagYTgFk6oeL0VU31u7SNjunPN+GchtA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1649,7 +1645,6 @@
       "integrity": "sha512-brtBs0MnE9SMx7px208g39lRmC5uHZs96caOJfTjFcYSLHNamvaSMfJNagChVNkup2SdtOxKX1FDBkRSJe1ZAg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -1845,7 +1840,6 @@
       "integrity": "sha512-hGISOaP18plkzbWEcP/QvtRW1xDXF2+96HbEX6byqQhAUbiS5oH6/9JwW+QsQCIYON2bI6QZBF+2PvOmrRZ9wA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vitest/utils": "3.2.4",
         "fflate": "^0.8.2",
@@ -1963,6 +1957,7 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -2066,7 +2061,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.9",
         "caniuse-lite": "^1.0.30001746",
@@ -2295,7 +2289,6 @@
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "license": "ISC",
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -2418,7 +2411,8 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
@@ -2840,7 +2834,6 @@
       "integrity": "sha512-lIHeR1qlIRrIN5VMccd8tI2Sgw6ieYXSVktcSHaNe3Z5nE/tcPQYQWOq00wxMvYOsz+73eAkNenVvmPC6bba9A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@asamuzakjp/dom-selector": "^6.5.4",
         "cssstyle": "^5.3.0",
@@ -2942,6 +2935,7 @@
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -3186,7 +3180,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -3214,7 +3207,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -3230,6 +3222,7 @@
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -3281,7 +3274,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
       "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3291,7 +3283,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
       "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -3318,7 +3309,8 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/react-refresh": {
       "version": "0.17.0",
@@ -3907,7 +3899,6 @@
       "integrity": "sha512-4nVGliEpxmhCL8DslSAUdxlB6+SMrhB0a1v5ijlh1xB1nEPuy1mxaHxysVucLHuWryAxLWg6a5ei+U4TLn/rFg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -4006,7 +3997,6 @@
       "integrity": "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/chai": "^5.2.2",
         "@vitest/expect": "3.2.4",

flock/frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flock-ui",
-  "version": "0.1.4",
+  "version": "0.1.7",
   "description": "Flock Flow Real-Time Dashboard Frontend",
   "type": "module",
   "scripts": {

flock/frontend/src/App.tsx

@@ -5,9 +5,12 @@ import { measureRenderTime } from './utils/performance';
 import { initializeWebSocket } from './services/websocket';
 import { registerModules } from './components/modules/registerModules';
 import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts';
-import { fetchRegisteredAgents } from './services/api';
+import { fetchRegisteredAgents, fetchArtifactSummary, fetchArtifacts } from './services/api';
 import { useGraphStore } from './store/graphStore';
 import { useUIStore } from './store/uiStore';
+import { useFilterStore } from './store/filterStore';
+import { mapArtifactToMessage } from './utils/artifacts';
+import { indexedDBService } from './services/indexeddb';
 
 // Register modules once at module load time
 registerModules();
@@ -30,10 +33,59 @@ const App: React.FC = () => {
       }
     });
 
-    // Initialize WebSocket connection
-    const wsUrl = import.meta.env.VITE_WS_URL || 'ws://localhost:8000/ws';
-    const wsClient = initializeWebSocket(wsUrl);
-    wsClient.connect();
+    const loadHistoricalData = async () => {
+      try {
+        await indexedDBService.initialize();
+
+        const filterStore = useFilterStore.getState();
+        const graphStore = useGraphStore.getState();
+        const uiStore = useUIStore.getState();
+
+        const summary = await fetchArtifactSummary();
+        filterStore.setSummary(summary);
+        filterStore.updateAvailableFacets({
+          artifactTypes: Object.keys(summary.by_type),
+          producers: Object.keys(summary.by_producer),
+          tags: Object.keys(summary.tag_counts),
+          visibilities: Object.keys(summary.by_visibility),
+        });
+
+        const artifactResponse = await fetchArtifacts({ limit: 200, embedMeta: true });
+        const messages = artifactResponse.items.map(mapArtifactToMessage);
+        if (messages.length > 0) {
+          graphStore.batchUpdate({ messages });
+          if (uiStore.mode === 'blackboard') {
+            graphStore.generateBlackboardViewGraph();
+          } else {
+            graphStore.generateAgentViewGraph();
+          }
+          graphStore.applyFilters();
+
+          const correlationMetadata = new Map<string, { correlation_id: string; first_seen: number; artifact_count: number; run_count: number }>();
+          artifactResponse.items.forEach((item) => {
+            if (!item.correlation_id) return;
+            const timestamp = new Date(item.created_at).getTime();
+            const existing = correlationMetadata.get(item.correlation_id);
+            if (existing) {
+              existing.artifact_count += 1;
+              existing.first_seen = Math.min(existing.first_seen, timestamp);
+            } else {
+              correlationMetadata.set(item.correlation_id, {
+                correlation_id: item.correlation_id,
+                first_seen: timestamp,
+                artifact_count: 1,
+                run_count: 0,
+              });
+            }
+          });
+          if (correlationMetadata.size > 0) {
+            filterStore.updateAvailableCorrelationIds(Array.from(correlationMetadata.values()));
+          }
+        }
+      } catch (error) {
+        console.error('[App] Failed to load historical artifacts:', error);
+      }
+    };
 
     // Load registered agents from orchestrator
     // This pre-populates the graph with all agent nodes before any events occur
@@ -61,10 +113,26 @@ const App: React.FC = () => {
       }
     };
 
-    loadInitialAgents();
+    const wsUrl = import.meta.env.VITE_WS_URL || 'ws://localhost:8000/ws';
+    const wsClient = initializeWebSocket(wsUrl);
+    let cancelled = false;
+
+    const bootstrap = async () => {
+      await loadHistoricalData();
+      await loadInitialAgents();
+
+      if (!cancelled) {
+        wsClient.connect();
+      }
+    };
+
+    bootstrap().catch((error) => {
+      console.error('[App] Bootstrap failed:', error);
+    });
 
     // Cleanup on unmount
     return () => {
+      cancelled = true;
       wsClient.disconnect();
     };
   }, []);

flock/frontend/src/__tests__/e2e/critical-scenarios.test.tsx

@@ -404,18 +404,17 @@ describe('Critical E2E Scenarios (Frontend)', () => {
         artifact_count: 1,
         run_count: 1,
       }));
+      // Reset filters and generate graph with all events (use fresh state)
+      useFilterStore.getState().clearFilters();
       useFilterStore.getState().updateAvailableCorrelationIds(metadata);
 
-      // Generate graph with all events (use fresh state)
       await act(async () => {
         useGraphStore.getState().generateBlackboardViewGraph();
       });
 
-      // Wait for nodes to be generated
+      // Ensure messages were recorded
       await waitFor(() => {
-        const nodes = useGraphStore.getState().nodes;
-        const visibleNodes = nodes.filter((n) => !n.hidden);
-        expect(visibleNodes.length).toBe(3);
+        expect(useGraphStore.getState().messages.size).toBe(3);
       }, { timeout: 5000 });
 
       // Apply correlation ID filter (use fresh state)

flock/frontend/src/__tests__/integration/filtering-e2e.test.tsx

@@ -329,9 +329,13 @@ describe('Filtering Integration E2E', () => {
 
       const state = useGraphStore.getState();
       const visibleNodes = state.nodes.filter((n) => !n.hidden);
-      // Only agent-1 should be visible
-      expect(visibleNodes).toHaveLength(1);
-      expect(visibleNodes[0]?.id).toBe('agent-1');
+
+      // Agent nodes remain visible but metrics reflect filtered artifacts
+      expect(visibleNodes).toHaveLength(2);
+      const agent1Node = visibleNodes.find((n) => n.id === 'agent-1');
+      const agent2Node = visibleNodes.find((n) => n.id === 'agent-2');
+      expect(agent1Node).toBeDefined();
+      expect(agent2Node).toBeDefined();
     });
   });
 

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

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

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

@@ -0,0 +1,104 @@
+.panel {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 420px;
+  background: var(--color-glass-bg);
+  backdrop-filter: blur(var(--blur-lg));
+  border-right: var(--border-default);
+  box-shadow: var(--shadow-2xl);
+  z-index: 1100;
+  animation: slideInLeft var(--duration-slow) var(--ease-smooth);
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-component-sm);
+  padding: var(--space-layout-md);
+  border-bottom: var(--border-subtle);
+}
+
+.title {
+  margin: 0;
+  font-size: var(--font-size-h3);
+  color: var(--color-text-primary);
+}
+
+.subtitle {
+  margin: 0;
+  font-size: var(--font-size-body-xs);
+  color: var(--color-text-tertiary);
+}
+
+.closeButton {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-md);
+  border: none;
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-size: 22px;
+  cursor: pointer;
+  transition: var(--transition-all);
+}
+
+.closeButton:hover {
+  background: var(--color-bg-overlay);
+  color: var(--color-text-primary);
+}
+
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-layout-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-layout-md);
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-component-sm);
+}
+
+.sectionLabel {
+  margin: 0;
+  font-size: var(--font-size-body-xs);
+  letter-spacing: var(--letter-spacing-wide);
+  color: var(--color-text-tertiary);
+  text-transform: uppercase;
+}
+
+.separator {
+  width: 100%;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.25), transparent);
+  margin: var(--space-component-md) 0;
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-40px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@media (max-width: 960px) {
+  .panel {
+    width: 100%;
+  }
+
+  .panel {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import CorrelationIDFilter from './CorrelationIDFilter';
+import TimeRangeFilter from './TimeRangeFilter';
+import ArtifactTypeFilter from './ArtifactTypeFilter';
+import ProducerFilter from './ProducerFilter';
+import TagFilter from './TagFilter';
+import VisibilityFilter from './VisibilityFilter';
+import SavedFiltersControl from './SavedFiltersControl';
+import styles from './FilterFlyout.module.css';
+
+interface FilterFlyoutProps {
+  onClose: () => void;
+}
+
+const FilterFlyout: React.FC<FilterFlyoutProps> = ({ onClose }) => {
+  return (
+    <aside className={styles.panel} role="dialog" aria-label="Filters">
+      <header className={styles.header}>
+        <div>
+          <h2 className={styles.title}>Filters</h2>
+          <p className={styles.subtitle}>Slice historical data without losing your place.</p>
+        </div>
+        <button type="button" className={styles.closeButton} onClick={onClose} aria-label="Close filters">
+          ×
+        </button>
+      </header>
+
+      <div className={styles.content}>
+        <section className={styles.section}>
+          <h3 className={styles.sectionLabel}>Presets</h3>
+          <SavedFiltersControl />
+        </section>
+
+        <div className={styles.separator} role="presentation" />
+
+        <section className={styles.section}>
+          <h3 className={styles.sectionLabel}>Correlation</h3>
+          <CorrelationIDFilter />
+        </section>
+
+        <div className={styles.separator} role="presentation" />
+
+        <section className={styles.section}>
+          <h3 className={styles.sectionLabel}>Time Range</h3>
+          <TimeRangeFilter />
+        </section>
+
+        <div className={styles.separator} role="presentation" />
+
+        <section className={styles.section}>
+          <h3 className={styles.sectionLabel}>Artifact Types</h3>
+          <ArtifactTypeFilter />
+        </section>
+
+        <div className={styles.separator} role="presentation" />
+
+        <section className={styles.section}>
+          <h3 className={styles.sectionLabel}>Producers</h3>
+          <ProducerFilter />
+        </section>
+
+        <div className={styles.separator} role="presentation" />
+
+        <section className={styles.section}>
+          <h3 className={styles.sectionLabel}>Tags</h3>
+          <TagFilter />
+        </section>
+
+        <div className={styles.separator} role="presentation" />
+
+        <section className={styles.section}>
+          <h3 className={styles.sectionLabel}>Visibility</h3>
+          <VisibilityFilter />
+        </section>
+      </div>
+    </aside>
+  );
+};
+
+export default FilterFlyout;