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

flock/frontend/src/components/settings/AdvancedSettings.tsx

@@ -0,0 +1,175 @@
+/**
+ * Advanced Settings Tab
+ *
+ * Power-user settings:
+ * - Layout direction (top-bottom vs left-right) for manual layout
+ * - Node and rank spacing for manual layout algorithm
+ * - Debug mode (show node IDs, verbose logging)
+ * - Performance mode (disable animations/effects)
+ */
+
+import React, { useEffect, useState } from 'react';
+import { useSettingsStore } from '../../store/settingsStore';
+
+const AdvancedSettings: React.FC = () => {
+  const layoutDirection = useSettingsStore((state) => state.advanced.layoutDirection);
+  const nodeSpacing = useSettingsStore((state) => state.advanced.nodeSpacing);
+  const rankSpacing = useSettingsStore((state) => state.advanced.rankSpacing);
+  const debugMode = useSettingsStore((state) => state.advanced.debugMode);
+  const performanceMode = useSettingsStore((state) => state.advanced.performanceMode);
+
+  const setLayoutDirection = useSettingsStore((state) => state.setLayoutDirection);
+  const setNodeSpacing = useSettingsStore((state) => state.setNodeSpacing);
+  const setRankSpacing = useSettingsStore((state) => state.setRankSpacing);
+  const setDebugMode = useSettingsStore((state) => state.setDebugMode);
+  const setPerformanceMode = useSettingsStore((state) => state.setPerformanceMode);
+
+  // Version information state
+  const [backendVersion, setBackendVersion] = useState<string>('Loading...');
+  const dashboardVersion = '0.1.1'; // From package.json
+
+  // Fetch version information from backend
+  useEffect(() => {
+    const fetchVersion = async () => {
+      try {
+        const response = await fetch('/api/version');
+        if (response.ok) {
+          const data = await response.json();
+          setBackendVersion(data.backend_version || 'Unknown');
+        } else {
+          setBackendVersion('Error fetching version');
+        }
+      } catch (error) {
+        console.error('Failed to fetch version:', error);
+        setBackendVersion('Error fetching version');
+      }
+    };
+
+    fetchVersion();
+  }, []);
+
+  return (
+    <div>
+      <div className="settings-section">
+        <h3 className="settings-section-title">Graph Layout</h3>
+
+        <div className="settings-field">
+          <label htmlFor="layout-direction" className="settings-label">
+            Layout Direction
+          </label>
+          <p className="settings-description">
+            Direction for manual layout algorithm (right-click → Auto Layout)
+          </p>
+          <select
+            id="layout-direction"
+            value={layoutDirection}
+            onChange={(e) => setLayoutDirection(e.target.value as typeof layoutDirection)}
+            className="settings-select"
+          >
+            <option value="LR">Left to Right (Default)</option>
+            <option value="TB">Top to Bottom</option>
+          </select>
+        </div>
+
+        <div className="settings-field">
+          <label htmlFor="node-spacing" className="settings-label">
+            Node Spacing: {nodeSpacing}px
+          </label>
+          <p className="settings-description">
+            Horizontal space between nodes when using manual layout (affects edge label visibility)
+          </p>
+          <input
+            id="node-spacing"
+            type="range"
+            min="25"
+            max="150"
+            step="5"
+            value={nodeSpacing}
+            onChange={(e) => setNodeSpacing(parseFloat(e.target.value))}
+            className="settings-input"
+          />
+        </div>
+
+        <div className="settings-field">
+          <label htmlFor="rank-spacing" className="settings-label">
+            Rank Spacing: {rankSpacing}px
+          </label>
+          <p className="settings-description">
+            Vertical space between graph layers when using manual layout
+          </p>
+          <input
+            id="rank-spacing"
+            type="range"
+            min="50"
+            max="300"
+            step="10"
+            value={rankSpacing}
+            onChange={(e) => setRankSpacing(parseFloat(e.target.value))}
+            className="settings-input"
+          />
+        </div>
+      </div>
+
+      <div className="settings-section">
+        <h3 className="settings-section-title">Developer Options</h3>
+
+        <div className="settings-field">
+          <div className="settings-checkbox-wrapper">
+            <input
+              id="debug-mode"
+              type="checkbox"
+              checked={debugMode}
+              onChange={(e) => setDebugMode(e.target.checked)}
+              className="settings-checkbox"
+            />
+            <label htmlFor="debug-mode" className="settings-checkbox-label">
+              Debug mode
+            </label>
+          </div>
+          <p className="settings-description">
+            Show node IDs, detailed message counts, and verbose console logging
+          </p>
+        </div>
+
+        <div className="settings-field">
+          <div className="settings-checkbox-wrapper">
+            <input
+              id="performance-mode"
+              type="checkbox"
+              checked={performanceMode}
+              onChange={(e) => setPerformanceMode(e.target.checked)}
+              className="settings-checkbox"
+            />
+            <label htmlFor="performance-mode" className="settings-checkbox-label">
+              Performance mode
+            </label>
+          </div>
+          <p className="settings-description">
+            Disable animations, shadows, and blur effects for better performance
+          </p>
+        </div>
+      </div>
+
+      <div className="settings-section">
+        <h3 className="settings-section-title">Information</h3>
+
+        <div className="settings-field">
+          <p className="settings-description" style={{ marginBottom: 'var(--spacing-2)' }}>
+            <strong>Dashboard Version:</strong> {dashboardVersion}
+          </p>
+          <p className="settings-description" style={{ marginBottom: 'var(--spacing-2)' }}>
+            <strong>Backend Version:</strong> {backendVersion}
+          </p>
+          <p className="settings-description" style={{ marginBottom: 'var(--spacing-2)' }}>
+            <strong>React Flow Version:</strong> 12.8.6
+          </p>
+          <p className="settings-description">
+            <strong>Local Storage Used:</strong> {localStorage.length} keys
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AdvancedSettings;

flock/frontend/src/components/settings/AppearanceSettings.tsx

@@ -0,0 +1,185 @@
+/**
+ * Appearance Settings Tab
+ *
+ * Visual customization options:
+ * - Theme selection (300+ terminal themes)
+ * - Agent node colors (idle, active, error)
+ * - Node shadow intensity
+ * - Status pulse animation
+ * - Compact view mode
+ */
+
+import React from 'react';
+import { useSettingsStore } from '../../store/settingsStore';
+import ThemeSelector from './ThemeSelector';
+
+const AppearanceSettings: React.FC = () => {
+  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);
+
+  const setAgentIdleColor = useSettingsStore((state) => state.setAgentIdleColor);
+  const setAgentActiveColor = useSettingsStore((state) => state.setAgentActiveColor);
+  const setAgentErrorColor = useSettingsStore((state) => state.setAgentErrorColor);
+  const setNodeShadow = useSettingsStore((state) => state.setNodeShadow);
+  const setShowStatusPulse = useSettingsStore((state) => state.setShowStatusPulse);
+  const setCompactNodeView = useSettingsStore((state) => state.setCompactNodeView);
+
+  return (
+    <div>
+      <div className="settings-section">
+        <h3 className="settings-section-title">Theme</h3>
+
+        <p className="settings-description" style={{ marginBottom: 'var(--space-component-md)' }}>
+          Choose from 300+ terminal color themes. Themes are loaded from the backend and applied in real-time.
+        </p>
+
+        <ThemeSelector />
+      </div>
+
+      <div className="settings-section">
+        <h3 className="settings-section-title">Agent Colors</h3>
+
+        <div className="settings-field">
+          <label htmlFor="idle-color" className="settings-label">
+            Idle Agent Color
+          </label>
+          <p className="settings-description">
+            Border and indicator color for idle agents
+          </p>
+          <div style={{ display: 'flex', gap: 'var(--gap-sm)', alignItems: 'center' }}>
+            <input
+              id="idle-color"
+              type="color"
+              value={agentIdleColor}
+              onChange={(e) => setAgentIdleColor(e.target.value)}
+              style={{ width: '60px', height: '36px', cursor: 'pointer' }}
+            />
+            <input
+              type="text"
+              value={agentIdleColor}
+              onChange={(e) => setAgentIdleColor(e.target.value)}
+              className="settings-input"
+              placeholder="#60a5fa"
+            />
+          </div>
+        </div>
+
+        <div className="settings-field">
+          <label htmlFor="active-color" className="settings-label">
+            Active Agent Color
+          </label>
+          <p className="settings-description">
+            Border and indicator color for running agents (thick border)
+          </p>
+          <div style={{ display: 'flex', gap: 'var(--gap-sm)', alignItems: 'center' }}>
+            <input
+              id="active-color"
+              type="color"
+              value={agentActiveColor}
+              onChange={(e) => setAgentActiveColor(e.target.value)}
+              style={{ width: '60px', height: '36px', cursor: 'pointer' }}
+            />
+            <input
+              type="text"
+              value={agentActiveColor}
+              onChange={(e) => setAgentActiveColor(e.target.value)}
+              className="settings-input"
+              placeholder="#10b981"
+            />
+          </div>
+        </div>
+
+        <div className="settings-field">
+          <label htmlFor="error-color" className="settings-label">
+            Error Agent Color
+          </label>
+          <p className="settings-description">
+            Border and indicator color for agents in error state
+          </p>
+          <div style={{ display: 'flex', gap: 'var(--gap-sm)', alignItems: 'center' }}>
+            <input
+              id="error-color"
+              type="color"
+              value={agentErrorColor}
+              onChange={(e) => setAgentErrorColor(e.target.value)}
+              style={{ width: '60px', height: '36px', cursor: 'pointer' }}
+            />
+            <input
+              type="text"
+              value={agentErrorColor}
+              onChange={(e) => setAgentErrorColor(e.target.value)}
+              className="settings-input"
+              placeholder="#ef4444"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="settings-section">
+        <h3 className="settings-section-title">Node Appearance</h3>
+
+        <div className="settings-field">
+          <label htmlFor="node-shadow" className="settings-label">
+            Node Shadow
+          </label>
+          <p className="settings-description">
+            Shadow intensity for node elevation effect
+          </p>
+          <select
+            id="node-shadow"
+            value={nodeShadow}
+            onChange={(e) => setNodeShadow(e.target.value as typeof nodeShadow)}
+            className="settings-select"
+          >
+            <option value="none">None</option>
+            <option value="small">Small</option>
+            <option value="medium">Medium (Default)</option>
+            <option value="large">Large</option>
+          </select>
+        </div>
+
+        <div className="settings-field">
+          <div className="settings-checkbox-wrapper">
+            <input
+              id="status-pulse"
+              type="checkbox"
+              checked={showStatusPulse}
+              onChange={(e) => setShowStatusPulse(e.target.checked)}
+              className="settings-checkbox"
+            />
+            <label htmlFor="status-pulse" className="settings-checkbox-label">
+              Show status pulse animation
+            </label>
+          </div>
+          <p className="settings-description">
+            Animate status indicator for running agents
+          </p>
+        </div>
+
+        <div className="settings-field">
+          <div className="settings-checkbox-wrapper">
+            <input
+              id="compact-view"
+              type="checkbox"
+              checked={compactNodeView}
+              onChange={(e) => setCompactNodeView(e.target.checked)}
+              className="settings-checkbox"
+            />
+            <label htmlFor="compact-view" className="settings-checkbox-label">
+              Compact node view
+            </label>
+          </div>
+          <p className="settings-description">
+            Reduce node size and spacing (useful for large graphs)
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AppearanceSettings;

flock/frontend/src/components/settings/GraphSettings.tsx

@@ -0,0 +1,110 @@
+/**
+ * Graph Settings Tab
+ *
+ * Customization options for graph visualization:
+ * - Edge type (bezier, straight, smoothstep)
+ * - Edge stroke width
+ * - Edge animation
+ * - Edge labels visibility
+ */
+
+import React from 'react';
+import { useSettingsStore } from '../../store/settingsStore';
+
+const GraphSettings: React.FC = () => {
+  const edgeType = useSettingsStore((state) => state.graph.edgeType);
+  const edgeStrokeWidth = useSettingsStore((state) => state.graph.edgeStrokeWidth);
+  const edgeAnimation = useSettingsStore((state) => state.graph.edgeAnimation);
+  const showEdgeLabels = useSettingsStore((state) => state.graph.showEdgeLabels);
+
+  const setEdgeType = useSettingsStore((state) => state.setEdgeType);
+  const setEdgeStrokeWidth = useSettingsStore((state) => state.setEdgeStrokeWidth);
+  const setEdgeAnimation = useSettingsStore((state) => state.setEdgeAnimation);
+  const setShowEdgeLabels = useSettingsStore((state) => state.setShowEdgeLabels);
+
+  return (
+    <div>
+      <div className="settings-section">
+        <h3 className="settings-section-title">Edge Appearance</h3>
+
+        <div className="settings-field">
+          <label htmlFor="edge-type" className="settings-label">
+            Edge Type
+          </label>
+          <p className="settings-description">
+            Choose how connections between nodes are drawn
+          </p>
+          <select
+            id="edge-type"
+            value={edgeType}
+            onChange={(e) => setEdgeType(e.target.value as typeof edgeType)}
+            className="settings-select"
+          >
+            <option value="bezier">Bezier (Curved) - Default</option>
+            <option value="smoothstep">Smooth Step</option>
+            <option value="straight">Straight (90° Angles)</option>
+            <option value="simplebezier">Simple Bezier</option>
+          </select>
+        </div>
+
+        <div className="settings-field">
+          <label htmlFor="edge-width" className="settings-label">
+            Edge Stroke Width: {edgeStrokeWidth}px
+          </label>
+          <input
+            id="edge-width"
+            type="range"
+            min="1"
+            max="5"
+            step="0.5"
+            value={edgeStrokeWidth}
+            onChange={(e) => setEdgeStrokeWidth(parseFloat(e.target.value))}
+            className="settings-input"
+          />
+        </div>
+      </div>
+
+      <div className="settings-section">
+        <h3 className="settings-section-title">Edge Behavior</h3>
+
+        <div className="settings-field">
+          <div className="settings-checkbox-wrapper">
+            <input
+              id="edge-animation"
+              type="checkbox"
+              checked={edgeAnimation}
+              onChange={(e) => setEdgeAnimation(e.target.checked)}
+              className="settings-checkbox"
+            />
+            <label htmlFor="edge-animation" className="settings-checkbox-label">
+              Enable edge animation
+            </label>
+          </div>
+          <p className="settings-description">
+            Animate message flow along edges (may impact performance)
+          </p>
+        </div>
+
+        <div className="settings-field">
+          <div className="settings-checkbox-wrapper">
+            <input
+              id="edge-labels"
+              type="checkbox"
+              checked={showEdgeLabels}
+              onChange={(e) => setShowEdgeLabels(e.target.checked)}
+              className="settings-checkbox"
+            />
+            <label htmlFor="edge-labels" className="settings-checkbox-label">
+              Show edge labels
+            </label>
+          </div>
+          <p className="settings-description">
+            Display correlation IDs and other metadata on edges
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GraphSettings;