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

flock/frontend/src/components/graph/GraphCanvas.tsx

@@ -17,6 +17,7 @@ import MessageFlowEdge from './MessageFlowEdge';
 import TransformEdge from './TransformEdge';
 import MiniMap from './MiniMap';
 import { useGraphStore } from '../../store/graphStore';
+import { useFilterStore } from '../../store/filterStore';
 import { useUIStore } from '../../store/uiStore';
 import { useModuleStore } from '../../store/moduleStore';
 import { useSettingsStore } from '../../store/settingsStore';
@@ -44,6 +45,14 @@ const GraphCanvas: React.FC = () => {
   const generateBlackboardViewGraph = useGraphStore((state) => state.generateBlackboardViewGraph);
   const updateNodePosition = useGraphStore((state) => state.updateNodePosition);
   const addModule = useModuleStore((state) => state.addModule);
+  const applyFilters = useGraphStore((state) => state.applyFilters);
+
+  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);
 
   // Graph settings from settings store
   const edgeType = useSettingsStore((state) => state.graph.edgeType);
@@ -93,6 +102,21 @@ const GraphCanvas: React.FC = () => {
     }
   }, [edgeType, edgeStrokeWidth, edgeAnimation, mode, generateAgentViewGraph, generateBlackboardViewGraph]);
 
+  // Apply filters whenever filter store state changes
+  useEffect(() => {
+    applyFilters();
+  }, [
+    applyFilters,
+    correlationId,
+    timeRange.preset,
+    timeRange.start,
+    timeRange.end,
+    selectedArtifactTypes.join('|'),
+    selectedProducers.join('|'),
+    selectedTags.join('|'),
+    selectedVisibility.join('|'),
+  ]);
+
   const onNodesChange = useCallback(
     (changes: NodeChange[]) => {
       const updatedNodes = applyNodeChanges(changes, nodes);

flock/frontend/src/components/layout/DashboardLayout.css

@@ -29,6 +29,19 @@
   z-index: 100;
 }
 
+.filter-pills-bar {
+  position: relative;
+  padding: var(--spacing-1-5) var(--space-layout-md);
+  background: color-mix(in srgb, var(--color-bg-overlay) 65%, transparent);
+  border-bottom: var(--border-subtle);
+  backdrop-filter: blur(var(--blur-sm));
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--gap-md);
+  z-index: 90;
+}
+
 .dashboard-title {
   margin: 0;
   font-size: var(--font-size-h3);

flock/frontend/src/components/layout/DashboardLayout.tsx

@@ -2,7 +2,8 @@ import React, { useState } from 'react';
 import { ReactFlowProvider } from '@xyflow/react';
 import GraphCanvas from '../graph/GraphCanvas';
 import DetailWindowContainer from '../details/DetailWindowContainer';
-import FilterBar from '../filters/FilterBar';
+import FilterFlyout from '../filters/FilterFlyout';
+import FilterPills from '../filters/FilterPills';
 import PublishControl from '../controls/PublishControl';
 import ModuleWindow from '../modules/ModuleWindow';
 import SettingsPanel from '../settings/SettingsPanel';
@@ -169,27 +170,6 @@ const DashboardLayout: React.FC = () => {
             <span>Agent Details</span>
           </button>
 
-          {/* Filter */}
-          <button
-            type="button"
-            onClick={() => setShowFilters(!showFilters)}
-            className={`controls-toggle ${showFilters ? 'active' : ''}`}
-            title={`${showFilters ? 'Hide' : 'Show'} filter panel (Ctrl+Shift+F)`}
-            aria-pressed={showFilters ? 'true' : 'false'}
-            aria-label={showFilters ? 'Filters shown' : 'Filters hidden'}
-          >
-            <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>Filter</span>
-          </button>
-
           {/* Settings */}
           <button
             type="button"
@@ -261,8 +241,12 @@ const DashboardLayout: React.FC = () => {
         </div>
       </header>
 
-      {/* Filter Bar - Collapsible */}
-      {showFilters && <FilterBar />}
+      <div className="filter-pills-bar">
+        <FilterPills />
+      </div>
+
+      {/* Filter Flyout */}
+      {showFilters && <FilterFlyout onClose={() => setShowFilters(false)} />}
 
       {/* Main Content */}
       <div className="dashboard-main">

flock/frontend/src/components/modules/HistoricalArtifactsModule.module.css

@@ -0,0 +1,288 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-layout-sm);
+  height: 100%;
+  padding: var(--space-layout-sm);
+  background: var(--color-bg-surface);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-sm);
+}
+
+.metrics {
+  display: flex;
+  gap: var(--gap-lg);
+  flex-wrap: wrap;
+}
+
+.metricLabel {
+  display: block;
+  font-size: var(--font-size-overline);
+  color: var(--color-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wider);
+}
+
+.metricValue {
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+.actions {
+  display: flex;
+  gap: var(--gap-sm);
+}
+
+.actions button {
+  padding: var(--spacing-1) var(--spacing-3);
+  border-radius: var(--radius-sm);
+  border: none;
+  cursor: pointer;
+  background: rgba(99, 102, 241, 0.25);
+  color: var(--color-text-primary);
+  transition: background-color var(--duration-fast) ease;
+}
+
+.actions button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.actions button:hover:not(:disabled) {
+  background: rgba(99, 102, 241, 0.45);
+}
+
+.tableContainer {
+  display: flex;
+  flex-direction: column;
+  background: rgba(15, 23, 42, 0.6);
+  border: 1px solid rgba(148, 163, 184, 0.1);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  flex: 2 1 0;
+  min-height: 0;
+}
+
+.contentArea {
+  display: flex;
+  gap: var(--space-layout-sm);
+  flex: 1;
+  min-height: 0;
+}
+
+.detailPanel {
+  flex: 1 1 0;
+  background: rgba(15, 23, 42, 0.5);
+  border: 1px solid rgba(148, 163, 184, 0.15);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+  max-height: 100%;
+  overflow-y: auto;
+}
+
+.headerRow,
+.dataRow {
+  display: grid;
+  grid-template-columns: 200px 140px 160px 180px 160px 120px 100px;
+  gap: var(--gap-sm);
+  padding: var(--spacing-2) var(--spacing-3);
+  font-size: var(--font-size-body-xs);
+  align-items: center;
+}
+
+.headerRow {
+  background: rgba(148, 163, 184, 0.1);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wide);
+}
+
+.dataRow {
+  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
+}
+
+.virtualViewport {
+  overflow-y: auto;
+}
+
+.dataRowStripe {
+  background: rgba(148, 163, 184, 0.05);
+}
+
+.dataRow {
+  cursor: pointer;
+  transition: background-color var(--duration-fast) ease;
+}
+
+.dataRow:focus-visible {
+  outline: 2px solid var(--color-primary-400);
+  outline-offset: 2px;
+}
+
+.dataRowSelected {
+  background: rgba(99, 102, 241, 0.25);
+  border-left: 3px solid var(--color-primary-400);
+}
+
+.dataRowSelected span {
+  color: var(--color-text-primary);
+}
+
+.emptyState,
+.loading,
+.error {
+  padding: var(--spacing-4);
+  text-align: center;
+  color: var(--color-text-secondary);
+}
+
+.error {
+  color: var(--color-error);
+}
+
+.retentionBanner {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs);
+  background: rgba(148, 163, 184, 0.08);
+  border: 1px solid rgba(148, 163, 184, 0.15);
+  border-radius: var(--radius-sm);
+  padding: var(--spacing-2) var(--spacing-3);
+  font-size: var(--font-size-body-xs);
+  color: var(--color-text-secondary);
+}
+
+.retentionBanner strong {
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-semibold);
+}
+
+@media (max-width: 1280px) {
+  .contentArea {
+    flex-direction: column;
+  }
+
+  .detailPanel {
+    max-height: none;
+  }
+}
+
+.detailHeader {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--gap-sm);
+}
+
+.detailHeader h3 {
+  margin: 0;
+  font-size: var(--font-size-body-lg);
+  color: var(--color-text-primary);
+}
+
+.detailHeader p {
+  margin: 0;
+  font-size: var(--font-size-body-xs);
+  color: var(--color-text-secondary);
+}
+
+.detailHeader button {
+  padding: var(--spacing-1) var(--spacing-3);
+  border-radius: var(--radius-sm);
+  border: none;
+  cursor: pointer;
+  background: rgba(99, 102, 241, 0.2);
+  color: var(--color-primary-50);
+  font-size: var(--font-size-body-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wide);
+}
+
+.detailHeader button:hover {
+  background: rgba(99, 102, 241, 0.35);
+}
+
+.detailSection {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+}
+
+.detailSection h4 {
+  margin: 0;
+  font-size: var(--font-size-body-sm);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wide);
+}
+
+.detailList {
+  display: grid;
+  grid-template-columns: minmax(110px, 0.45fr) 1fr;
+  gap: var(--gap-xs) var(--gap-sm);
+  font-size: var(--font-size-body-xs);
+}
+
+.detailList dt {
+  color: var(--color-text-tertiary);
+  font-weight: var(--font-weight-semibold);
+}
+
+.detailList dd {
+  margin: 0;
+  color: var(--color-text-primary);
+  word-break: break-word;
+}
+
+.consumptionList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs);
+}
+
+.consumptionList li {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: var(--spacing-2);
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: var(--radius-sm);
+  background: rgba(30, 41, 59, 0.55);
+}
+
+.consumerName {
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+.runBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
+  padding: 2px 6px;
+  border-radius: var(--radius-xs);
+  font-size: var(--font-size-caption);
+  background: rgba(99, 102, 241, 0.25);
+  color: var(--color-primary-100);
+  margin-top: 2px;
+}
+
+.emptyDetail,
+.emptyConsumption {
+  font-size: var(--font-size-body-sm);
+  color: var(--color-text-secondary);
+  margin: 0;
+}