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

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

@@ -0,0 +1,298 @@
+/**
+ * Theme Selector Component
+ *
+ * Searchable dropdown for selecting from 300+ terminal themes.
+ * Shows color preview swatches and applies themes in real-time.
+ */
+
+import React, { useState, useEffect } from 'react';
+import { useSettingsStore } from '../../store/settingsStore';
+import { fetchThemeList, fetchTheme, POPULAR_THEMES } from '../../services/themeService';
+import { applyTheme, resetToDefaultTheme } from '../../services/themeApplicator';
+import { TerminalTheme } from '../../types/theme';
+
+const ThemeSelector: React.FC = () => {
+  const [themes, setThemes] = useState<string[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [previewTheme, setPreviewTheme] = useState<TerminalTheme | null>(null);
+
+  const currentTheme = useSettingsStore((state) => state.appearance.theme);
+  const setTheme = useSettingsStore((state) => state.setTheme);
+
+  // Load theme list on mount
+  useEffect(() => {
+    loadThemes();
+  }, []);
+
+  const loadThemes = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const themeList = await fetchThemeList();
+      setThemes(themeList);
+    } catch (err) {
+      setError('Failed to load themes. Backend may not be running.');
+      console.error('Theme loading error:', err);
+      // Fallback to popular themes if API fails
+      setThemes(POPULAR_THEMES);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleThemeSelect = async (themeName: string) => {
+    try {
+      setError(null);
+      // Handle default theme (doesn't need API fetch)
+      if (themeName === 'default') {
+        resetToDefaultTheme();
+        setTheme('default');
+        setPreviewTheme(null);
+        return;
+      }
+      const theme = await fetchTheme(themeName);
+      applyTheme(theme);
+      setTheme(themeName);
+      setPreviewTheme(null);
+    } catch (err) {
+      setError(`Failed to load theme "${themeName}"`);
+      console.error('Theme application error:', err);
+    }
+  };
+
+  const handleThemePreview = async (themeName: string) => {
+    try {
+      // Handle default theme (doesn't need API fetch)
+      if (themeName === 'default') {
+        resetToDefaultTheme();
+        setPreviewTheme(null);
+        return;
+      }
+      const theme = await fetchTheme(themeName);
+      setPreviewTheme(theme);
+      applyTheme(theme);
+    } catch (err) {
+      console.error('Theme preview error:', err);
+    }
+  };
+
+  const handleResetTheme = () => {
+    resetToDefaultTheme();
+    setTheme('default');
+    setPreviewTheme(null);
+  };
+
+  // Always include "default" theme at the beginning
+  const allThemes = ['default', ...themes];
+
+  const filteredThemes = allThemes.filter((theme) =>
+    theme.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const popularThemes = filteredThemes.filter((theme) => POPULAR_THEMES.includes(theme));
+  const defaultTheme = filteredThemes.includes('default') ? ['default'] : [];
+  const otherThemes = filteredThemes.filter((theme) => !POPULAR_THEMES.includes(theme) && theme !== 'default');
+
+  return (
+    <div>
+      <div className="settings-field">
+        <label htmlFor="theme-search" className="settings-label">
+          Search Themes
+        </label>
+        <input
+          id="theme-search"
+          type="text"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder="Search 300+ themes..."
+          className="settings-input"
+          disabled={loading}
+        />
+      </div>
+
+      {error && (
+        <div style={{
+          padding: 'var(--space-component-sm)',
+          background: 'var(--color-error-bg)',
+          color: 'var(--color-error-light)',
+          borderRadius: 'var(--radius-md)',
+          marginBottom: 'var(--space-component-md)',
+          fontSize: 'var(--font-size-caption)',
+        }}>
+          {error}
+        </div>
+      )}
+
+      {loading && (
+        <div style={{
+          padding: 'var(--space-component-md)',
+          textAlign: 'center',
+          color: 'var(--color-text-secondary)',
+        }}>
+          Loading themes...
+        </div>
+      )}
+
+      {!loading && (
+        <>
+          {/* Current Theme */}
+          <div className="settings-field">
+            <label className="settings-label">Current Theme</label>
+            <div style={{
+              padding: 'var(--space-component-sm)',
+              background: 'var(--color-bg-elevated)',
+              borderRadius: 'var(--radius-md)',
+              border: 'var(--border-default)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+            }}>
+              <span style={{ color: 'var(--color-text-primary)' }}>
+                {currentTheme === 'default' ? 'Default (Flock Flow)' : currentTheme}
+              </span>
+              {currentTheme !== 'default' && (
+                <button
+                  onClick={handleResetTheme}
+                  style={{
+                    padding: '4px 8px',
+                    background: 'transparent',
+                    border: 'var(--border-default)',
+                    borderRadius: 'var(--radius-sm)',
+                    color: 'var(--color-text-secondary)',
+                    fontSize: 'var(--font-size-caption)',
+                    cursor: 'pointer',
+                  }}
+                >
+                  Reset
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* Default Theme - Always first */}
+          {defaultTheme.length > 0 && (
+            <div className="settings-field">
+              <label className="settings-label">Built-in Theme</label>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--gap-xs)' }}>
+                <button
+                  onClick={() => handleThemeSelect('default')}
+                  onMouseEnter={() => handleThemePreview('default')}
+                  style={{
+                    padding: 'var(--space-component-sm)',
+                    background: currentTheme === 'default' ? 'var(--color-primary-500)' : 'var(--color-bg-elevated)',
+                    border: 'var(--border-default)',
+                    borderRadius: 'var(--radius-md)',
+                    color: currentTheme === 'default' ? 'white' : 'var(--color-text-primary)',
+                    fontSize: 'var(--font-size-body-sm)',
+                    cursor: 'pointer',
+                    textAlign: 'left',
+                    transition: 'var(--transition-all)',
+                  }}
+                >
+                  Default (Flock Flow)
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* Popular Themes */}
+          {popularThemes.length > 0 && (
+            <div className="settings-field">
+              <label className="settings-label">Popular Themes</label>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--gap-xs)' }}>
+                {popularThemes.map((theme) => (
+                  <button
+                    key={theme}
+                    onClick={() => handleThemeSelect(theme)}
+                    onMouseEnter={() => handleThemePreview(theme)}
+                    style={{
+                      padding: 'var(--space-component-sm)',
+                      background: currentTheme === theme ? 'var(--color-primary-500)' : 'var(--color-bg-elevated)',
+                      border: 'var(--border-default)',
+                      borderRadius: 'var(--radius-md)',
+                      color: currentTheme === theme ? 'white' : 'var(--color-text-primary)',
+                      fontSize: 'var(--font-size-body-sm)',
+                      cursor: 'pointer',
+                      textAlign: 'left',
+                      transition: 'var(--transition-all)',
+                    }}
+                  >
+                    {theme}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* All Other Themes */}
+          {otherThemes.length > 0 && (
+            <div className="settings-field">
+              <label className="settings-label">
+                All Themes ({otherThemes.length})
+              </label>
+              <div style={{
+                maxHeight: '300px',
+                overflowY: 'auto',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 'var(--gap-xs)',
+                padding: 'var(--space-component-xs)',
+                background: 'var(--color-bg-base)',
+                borderRadius: 'var(--radius-md)',
+              }}>
+                {otherThemes.map((theme) => (
+                  <button
+                    key={theme}
+                    onClick={() => handleThemeSelect(theme)}
+                    onMouseEnter={() => handleThemePreview(theme)}
+                    style={{
+                      padding: 'var(--space-component-sm)',
+                      background: currentTheme === theme ? 'var(--color-primary-500)' : 'var(--color-bg-elevated)',
+                      border: 'var(--border-default)',
+                      borderRadius: 'var(--radius-sm)',
+                      color: currentTheme === theme ? 'white' : 'var(--color-text-primary)',
+                      fontSize: 'var(--font-size-body-sm)',
+                      cursor: 'pointer',
+                      textAlign: 'left',
+                      transition: 'var(--transition-all)',
+                    }}
+                  >
+                    {theme}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {filteredThemes.length === 0 && !loading && (
+            <div style={{
+              padding: 'var(--space-component-md)',
+              textAlign: 'center',
+              color: 'var(--color-text-tertiary)',
+            }}>
+              No themes found matching "{searchQuery}"
+            </div>
+          )}
+        </>
+      )}
+
+      {previewTheme && (
+        <div style={{
+          padding: 'var(--space-component-sm)',
+          background: 'var(--color-bg-overlay)',
+          borderRadius: 'var(--radius-md)',
+          marginTop: 'var(--space-component-md)',
+          fontSize: 'var(--font-size-caption)',
+          color: 'var(--color-text-tertiary)',
+          textAlign: 'center',
+        }}>
+          Previewing: {previewTheme.name} (click to apply)
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ThemeSelector;

flock/frontend/src/hooks/useKeyboardShortcuts.ts

@@ -0,0 +1,148 @@
+import { useEffect } from 'react';
+import { useUIStore } from '../store/uiStore';
+import { useSettingsStore } from '../store/settingsStore';
+
+interface KeyboardShortcutConfig {
+  onToggleMode?: () => void;
+  onFocusFilter?: () => void;
+  onCloseWindows?: () => void;
+  onToggleHelp?: () => void;
+  onToggleAgentDetails?: () => void;
+}
+
+/**
+ * Custom hook for managing global keyboard shortcuts
+ *
+ * Shortcuts:
+ * - Ctrl+M (or Cmd+M): Toggle between Agent View and Blackboard View
+ * - Ctrl+F (or Cmd+F): Focus the filter input
+ * - Ctrl+, (or Cmd+,): Toggle Settings Panel
+ * - Ctrl+Shift+F: Toggle Filters Panel
+ * - Ctrl+Shift+P: Toggle Publish Panel
+ * - Ctrl+Shift+D: Toggle Agent Details
+ * - Ctrl+/ (or Cmd+/): Toggle Keyboard Shortcuts Help
+ * - Esc: Close all panels and detail windows
+ */
+export const useKeyboardShortcuts = (config: KeyboardShortcutConfig = {}) => {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Check for modifier key (Ctrl on Windows/Linux, Cmd on Mac)
+      const modifier = event.ctrlKey || event.metaKey;
+
+      // Ctrl+, or Cmd+,: Toggle Settings Panel
+      if (modifier && event.key === ',') {
+        event.preventDefault();
+        const showSettings = useSettingsStore.getState().ui.showSettings;
+        useSettingsStore.getState().setShowSettings(!showSettings);
+        return;
+      }
+
+      // Ctrl+Shift+F: Toggle Filters Panel
+      if (modifier && event.shiftKey && event.key === 'F') {
+        event.preventDefault();
+        const showFilters = useSettingsStore.getState().ui.showFilters;
+        useSettingsStore.getState().setShowFilters(!showFilters);
+        return;
+      }
+
+      // Ctrl+Shift+P: Toggle Publish/Controls Panel
+      if (modifier && event.shiftKey && event.key === 'P') {
+        event.preventDefault();
+        const showControls = useSettingsStore.getState().ui.showControls;
+        useSettingsStore.getState().setShowControls(!showControls);
+        return;
+      }
+
+      // Ctrl+Shift+D: Toggle Agent Details
+      if (modifier && event.shiftKey && event.key === 'D') {
+        event.preventDefault();
+        if (config.onToggleAgentDetails) {
+          config.onToggleAgentDetails();
+        }
+        return;
+      }
+
+      // Ctrl+/ or Cmd+/: Toggle Keyboard Shortcuts Help
+      if (modifier && event.key === '/') {
+        event.preventDefault();
+        if (config.onToggleHelp) {
+          config.onToggleHelp();
+        }
+        return;
+      }
+
+      // Ctrl+M or Cmd+M: Toggle mode
+      if (modifier && event.key === 'm') {
+        event.preventDefault();
+        if (config.onToggleMode) {
+          config.onToggleMode();
+        } else {
+          // Default behavior: toggle mode
+          const currentMode = useUIStore.getState().mode;
+          useUIStore.getState().setMode(currentMode === 'agent' ? 'blackboard' : 'agent');
+        }
+        return;
+      }
+
+      // Ctrl+F or Cmd+F: Focus filter (only if not in an input already)
+      if (modifier && event.key === 'f') {
+        const activeElement = document.activeElement;
+        const isInInput = activeElement?.tagName === 'INPUT' ||
+                         activeElement?.tagName === 'TEXTAREA';
+
+        if (!isInInput) {
+          event.preventDefault();
+          if (config.onFocusFilter) {
+            config.onFocusFilter();
+          } else {
+            // Default behavior: focus correlation ID filter
+            const filterInput = document.querySelector<HTMLInputElement>(
+              'input[placeholder*="correlation"], input[placeholder*="Correlation"]'
+            );
+            if (filterInput) {
+              filterInput.focus();
+              filterInput.select();
+            }
+          }
+        }
+        return;
+      }
+
+      // Esc: Close windows/dialogs/panels
+      if (event.key === 'Escape') {
+        if (config.onCloseWindows) {
+          config.onCloseWindows();
+        } else {
+          // Priority: Close panels first, then detail windows
+          const { showSettings, showFilters, showControls } = useSettingsStore.getState().ui;
+          const detailWindows = useUIStore.getState().detailWindows;
+
+          if (showSettings) {
+            event.preventDefault();
+            useSettingsStore.getState().setShowSettings(false);
+          } else if (showControls) {
+            event.preventDefault();
+            useSettingsStore.getState().setShowControls(false);
+          } else if (showFilters) {
+            event.preventDefault();
+            useSettingsStore.getState().setShowFilters(false);
+          } else if (detailWindows.size > 0) {
+            event.preventDefault();
+            // Close all detail windows
+            detailWindows.clear();
+            useUIStore.setState({ detailWindows: new Map() });
+          }
+        }
+        return;
+      }
+    };
+
+    // Add event listener
+    window.addEventListener('keydown', handleKeyDown);
+
+    // Cleanup
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [config]);
+};