flock-core 0.4.543__py3-none-any.whl → 0.5.0__py3-none-any.whl

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

@@ -0,0 +1,110 @@
+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: 'all', label: 'All' },
+    { 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,
+              preset === 'all' ? styles.presetButtonAll : '',
+              timeRange.preset === preset ? styles.active : '',
+            ].filter(Boolean).join(' ')}
+          >
+            {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/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;

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

@@ -0,0 +1,77 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ReactFlowProvider } from '@xyflow/react';
+import AgentNode from './AgentNode';
+import { NodeProps } from '@xyflow/react';
+
+// UI Optimization Migration (Phase 4.1 - Spec 002): AgentNodeData removed, use Record<string, any>
+type AgentNodeData = Record<string, any>;
+
+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();
+  });
+});

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

@@ -0,0 +1,324 @@
+import { memo, useState, useEffect, useRef } from 'react';
+import { NodeProps, Handle, Position } from '@xyflow/react';
+import { useUIStore } from '../../store/uiStore';
+import { useSettingsStore } from '../../store/settingsStore';
+
+// UI Optimization Migration (Phase 4.1 - Spec 002): Backend GraphNode.data is Record<string, any>
+// Agent-specific properties populated by backend snapshot
+const AgentNode = memo(({ data, selected }: NodeProps) => {
+  const nodeData = data as Record<string, any>;
+  const name = nodeData.name;
+  const status = nodeData.status;
+  const sentCount = nodeData.sentCount;
+  const recvCount = nodeData.recvCount;
+  const subscriptions = nodeData.subscriptions || [];
+  const outputTypes = nodeData.outputTypes || [];
+  const receivedByType = nodeData.receivedByType || {};
+  const sentByType = nodeData.sentByType || {};
+  const streamingTokens = nodeData.streamingTokens || [];
+
+  // Merge known types with actual counts - show all types even with 0 count
+  // Start with actual counts, then add known types that haven't happened yet
+  const displayReceivedByType: Record<string, number> = { ...receivedByType };
+  subscriptions.forEach((type: string) => {
+    if (!(type in displayReceivedByType)) {
+      displayReceivedByType[type] = 0;
+    }
+  });
+
+  const displaySentByType: Record<string, number> = { ...sentByType };
+  outputTypes.forEach((type: string) => {
+    if (!(type in displaySentByType)) {
+      displaySentByType[type] = 0;
+    }
+  });
+
+  // Track which types just changed for flash animation
+  const [flashingKeys, setFlashingKeys] = useState<Set<string>>(new Set());
+  const prevCounts = useRef<Record<string, number>>({});
+
+  // Detect changes and trigger flash
+  useEffect(() => {
+    // Check only actual received/sent counts for flashing (not predicted types)
+    const allCounts = { ...receivedByType, ...sentByType };
+    const changedKeys = new Set<string>();
+
+    Object.entries(allCounts).forEach(([key, count]) => {
+      const numCount = count as number;
+      if (prevCounts.current[key] !== undefined && prevCounts.current[key] !== numCount) {
+        changedKeys.add(key);
+      }
+      prevCounts.current[key] = numCount;
+    });
+
+    if (changedKeys.size > 0) {
+      setFlashingKeys(changedKeys);
+      const timer = setTimeout(() => setFlashingKeys(new Set()), 500);
+      return () => clearTimeout(timer);
+    }
+  }, [receivedByType, sentByType]);
+
+  const handleDoubleClick = () => {
+    useUIStore.getState().openDetailWindow(name);
+  };
+
+  // Appearance settings from settings store
+  const agentIdleColor = useSettingsStore((state) => state.appearance.agentIdleColor);
+  const agentActiveColor = useSettingsStore((state) => state.appearance.agentActiveColor);
+  const agentErrorColor = useSettingsStore((state) => state.appearance.agentErrorColor);
+  const nodeShadow = useSettingsStore((state) => state.appearance.nodeShadow);
+  const showStatusPulse = useSettingsStore((state) => state.appearance.showStatusPulse);
+  const compactNodeView = useSettingsStore((state) => state.appearance.compactNodeView);
+
+  // Status styling: customizable colors from settings
+  const getStatusStyle = () => {
+    if (status === 'running') {
+      return {
+        indicatorColor: agentActiveColor,
+        borderColor: agentActiveColor,
+        borderWidth: '3px', // Thick border for active
+      };
+    } else if (status === 'error') {
+      return {
+        indicatorColor: agentErrorColor,
+        borderColor: agentErrorColor,
+        borderWidth: '2px',
+      };
+    } else {
+      // idle
+      return {
+        indicatorColor: agentIdleColor,
+        borderColor: agentIdleColor,
+        borderWidth: '2px',
+      };
+    }
+  };
+
+  const statusStyle = getStatusStyle();
+
+  // Shadow mapping
+  const shadowMap = {
+    none: 'none',
+    small: 'var(--shadow-sm)',
+    medium: 'var(--shadow-md)',
+    large: 'var(--shadow-lg)',
+  };
+
+  const baseShadow = shadowMap[nodeShadow];
+  const selectedShadow = selected ? 'var(--shadow-lg), var(--shadow-glow-primary)' : baseShadow;
+
+  return (
+    <div
+      className={`agent-node ${selected ? 'selected' : ''}`}
+      onDoubleClick={handleDoubleClick}
+      style={{
+        padding: compactNodeView ? 'var(--space-component-sm)' : 'var(--space-component-md)',
+        border: `${statusStyle.borderWidth} solid ${statusStyle.borderColor}`,
+        borderRadius: 'var(--radius-lg)',
+        backgroundColor: 'var(--color-bg-surface)',
+        minWidth: compactNodeView ? '160px' : '200px',
+        maxWidth: '300px',
+        boxShadow: selectedShadow,
+        cursor: 'pointer',
+        transition: 'var(--transition-all)',
+      }}
+    >
+      <Handle type="target" position={Position.Left} />
+      <Handle type="source" position={Position.Right} />
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--spacing-2)' }}>
+        <span style={{
+          fontWeight: 600,
+          fontSize: compactNodeView ? '14px' : '16px',
+          color: 'var(--color-text-primary)',
+          lineHeight: 1.4,
+        }}>{name}</span>
+        <span
+          style={{
+            width: compactNodeView ? '12px' : '14px',
+            height: compactNodeView ? '12px' : '14px',
+            borderRadius: '50%',
+            backgroundColor: statusStyle.indicatorColor,
+            display: 'inline-block',
+            flexShrink: 0,
+            marginLeft: 'var(--spacing-2)',
+            animation: (status === 'running' && showStatusPulse) ? 'pulse 2s infinite' : 'none',
+          }}
+          title={status}
+        />
+      </div>
+      {!compactNodeView && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+          {/* Per-type input breakdown */}
+          {Object.entries(displayReceivedByType).map(([type, count]) => {
+            const isFlashing = flashingKeys.has(type);
+            return (
+              <div
+                key={`in-${type}`}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 'var(--spacing-2)',
+                  padding: '6px 10px',
+                  background: isFlashing ? 'var(--color-info-bg)' : 'rgba(59, 130, 246, 0.08)',
+                  borderLeft: '3px solid var(--color-info)',
+                  borderRadius: 'var(--radius-md)',
+                  transition: 'var(--transition-all)',
+                  boxShadow: isFlashing ? 'var(--shadow-glow-primary)' : 'var(--shadow-xs)',
+                }}
+              >
+                <div style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  width: '20px',
+                  height: '20px',
+                  borderRadius: 'var(--radius-sm)',
+                  background: 'var(--color-info-bg)',
+                  color: 'var(--color-info-light)',
+                  fontSize: '12px',
+                  fontWeight: 700,
+                }}>
+                  ↓
+                </div>
+                <div style={{
+                  minWidth: '24px',
+                  height: '24px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  borderRadius: 'var(--radius-full)',
+                  background: isFlashing ? 'var(--color-info)' : 'var(--color-info-bg)',
+                  color: isFlashing ? 'var(--color-text-on-primary)' : 'var(--color-info-light)',
+                  fontSize: '12px',
+                  fontWeight: 700,
+                  padding: '0 var(--spacing-2)',
+                  transition: 'var(--transition-all)',
+                }}>
+                  {count}
+                </div>
+                <div style={{
+                  flex: 1,
+                  fontSize: '11px',
+                  fontFamily: 'var(--font-family-mono)',
+                  color: 'var(--color-text-secondary)',
+                  fontWeight: 500,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}>
+                  {type}
+                </div>
+              </div>
+            );
+          })}
+          {/* Per-type output breakdown */}
+          {Object.entries(displaySentByType).map(([type, count]) => {
+            const isFlashing = flashingKeys.has(type);
+            return (
+              <div
+                key={`out-${type}`}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 'var(--spacing-2)',
+                  padding: '6px 10px',
+                  background: isFlashing ? 'var(--color-success-bg)' : 'rgba(16, 185, 129, 0.08)',
+                  borderLeft: '3px solid var(--color-success)',
+                  borderRadius: 'var(--radius-md)',
+                  transition: 'var(--transition-all)',
+                  boxShadow: isFlashing ? 'var(--shadow-glow-success)' : 'var(--shadow-xs)',
+                }}
+              >
+                <div style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  width: '20px',
+                  height: '20px',
+                  borderRadius: 'var(--radius-sm)',
+                  background: 'var(--color-success-bg)',
+                  color: 'var(--color-success-light)',
+                  fontSize: '12px',
+                  fontWeight: 700,
+                }}>
+                  ↑
+                </div>
+                <div style={{
+                  minWidth: '24px',
+                  height: '24px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  borderRadius: 'var(--radius-full)',
+                  background: isFlashing ? 'var(--color-success)' : 'var(--color-success-bg)',
+                  color: isFlashing ? 'var(--color-text-on-primary)' : 'var(--color-success-light)',
+                  fontSize: '12px',
+                  fontWeight: 700,
+                  padding: '0 var(--spacing-2)',
+                  transition: 'var(--transition-all)',
+                }}>
+                  {count}
+                </div>
+                <div style={{
+                  flex: 1,
+                  fontSize: '11px',
+                  fontFamily: 'var(--font-family-mono)',
+                  color: 'var(--color-text-secondary)',
+                  fontWeight: 500,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}>
+                  {type}
+                </div>
+              </div>
+            );
+          })}
+          {/* Fallback to totals if no per-type data yet */}
+          {Object.keys(displayReceivedByType).length === 0 && Object.keys(displaySentByType).length === 0 && (
+            <div style={{ fontSize: '11px', color: 'var(--color-text-tertiary)', opacity: 0.6 }}>
+              <span>↓ {recvCount} in</span>
+              <span style={{ marginLeft: 'var(--spacing-2)' }}>↑ {sentCount} out</span>
+            </div>
+          )}
+          {/* News ticker for streaming tokens */}
+          {streamingTokens.length > 0 && (
+            <div style={{
+              padding: '4px 8px',
+              background: 'rgba(250, 204, 21, 0.08)',
+              borderLeft: '2px solid var(--color-warning)',
+              borderRadius: 'var(--radius-sm)',
+              overflow: 'hidden',
+              minWidth: 0,
+              display: 'flex',
+              justifyContent: 'center',
+            }}>
+              <div style={{
+                width: '200px',
+                fontSize: '10px',
+                fontFamily: 'var(--font-family-mono)',
+                color: 'var(--color-warning-light)',
+                fontWeight: 500,
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}>
+                {streamingTokens.join('')}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+      {compactNodeView && (
+        <div style={{ display: 'flex', gap: 'var(--spacing-4)', fontSize: '11px', color: 'var(--color-text-tertiary)' }}>
+          <span title="Received">↓ {recvCount} <span style={{ fontSize: '10px', opacity: 0.7 }}>in</span></span>
+          <span title="Sent">↑ {sentCount} <span style={{ fontSize: '10px', opacity: 0.7 }}>out</span></span>
+        </div>
+      )}
+    </div>
+  );
+});
+
+AgentNode.displayName = 'AgentNode';
+
+export default AgentNode;