principles-disciple 1.8.0 → 1.8.2

package/ui/src/components/WorkspaceConfig.tsx

@@ -0,0 +1,146 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { api } from '../api';
+import { useI18n } from '../i18n/ui';
+import { CollapsiblePanel } from '../charts';
+import { Loading } from './Loading';
+
+export function WorkspaceConfig() {
+  const { t } = useI18n();
+  const [wsData, setWsData] = useState<{
+    configs: Array<{ workspaceName: string; enabled: boolean; displayName: string | null; syncEnabled: boolean }>;
+    workspaces: Array<{ name: string; path: string; lastSync: string | null; config: null | { workspaceName: string; enabled: boolean; displayName: string | null; syncEnabled: boolean } }>;
+  } | null>(null);
+  const [error, setError] = useState('');
+  const [saving, setSaving] = useState<string | null>(null);
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [newWsName, setNewWsName] = useState('');
+  const [newWsPath, setNewWsPath] = useState('');
+  const [adding, setAdding] = useState(false);
+
+  const loadConfigs = useCallback(async () => {
+    try {
+      const result = await api.getWorkspaceConfigs();
+      setWsData(result);
+      setError('');
+    } catch (err) {
+      setError(String(err));
+    }
+  }, []);
+
+  useEffect(() => {
+    loadConfigs();
+  }, [loadConfigs]);
+
+  const handleToggle = async (workspaceName: string, field: 'enabled' | 'syncEnabled', currentValue: boolean) => {
+    setSaving(workspaceName);
+    try {
+      await api.updateWorkspaceConfig(workspaceName, { [field]: !currentValue });
+      await loadConfigs();
+    } catch (err) {
+      setError(String(err));
+    } finally {
+      setSaving(null);
+    }
+  };
+
+  const handleAddWorkspace = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newWsName.trim() || !newWsPath.trim()) return;
+    setAdding(true);
+    setError('');
+    try {
+      await api.addCustomWorkspace(newWsName.trim(), newWsPath.trim());
+      setNewWsName('');
+      setNewWsPath('');
+      setShowAddForm(false);
+      await loadConfigs();
+    } catch (err) {
+      setError(String(err));
+    } finally {
+      setAdding(false);
+    }
+  };
+
+  if (error) return <div className="panel error">{error}</div>;
+  if (!wsData) return <Loading />;
+
+  return (
+    <CollapsiblePanel
+      title="Workspace Configuration"
+      badge={<span className="badge">{(wsData.configs ?? []).filter(c => c.enabled && c.syncEnabled).length} / {wsData.workspaces?.length ?? 0} enabled</span>}
+      defaultCollapsed={true}
+    >
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 'var(--space-4)' }}>
+        <button className="button-secondary" onClick={() => setShowAddForm(!showAddForm)}>
+          {showAddForm ? t('workspace.cancel') : '+ ' + t('workspace.addWorkspace')}
+        </button>
+      </div>
+
+      {showAddForm && (
+        <form className="add-workspace-form" onSubmit={handleAddWorkspace} style={{ marginBottom: 'var(--space-4)', padding: 'var(--space-3)', background: 'var(--bg-sunken)', borderRadius: 'var(--radius-md)', border: '1px solid var(--border)' }}>
+          <div style={{ display: 'flex', gap: 'var(--space-3)', alignItems: 'flex-end' }}>
+            <div style={{ flex: 1 }}>
+              <label style={{ display: 'block', fontSize: '12px', marginBottom: '4px', color: 'var(--text-secondary)' }}>{t('workspace.workspaceName')}</label>
+              <input
+                type="text"
+                value={newWsName}
+                onChange={(e) => setNewWsName(e.target.value)}
+                placeholder={t('workspace.placeholder.name')}
+                style={{ width: '100%', padding: 'var(--space-2)', fontSize: '13px', border: '1px solid var(--border)', borderRadius: 'var(--radius-sm)' }}
+              />
+            </div>
+            <div style={{ flex: 2 }}>
+              <label style={{ display: 'block', fontSize: '12px', marginBottom: '4px', color: 'var(--text-secondary)' }}>{t('workspace.path')}</label>
+              <input
+                type="text"
+                value={newWsPath}
+                onChange={(e) => setNewWsPath(e.target.value)}
+                placeholder={t('workspace.placeholder.path')}
+                style={{ width: '100%', padding: 'var(--space-2)', fontSize: '13px', border: '1px solid var(--border)', borderRadius: 'var(--radius-sm)' }}
+              />
+            </div>
+            <button type="submit" className="button-primary" disabled={adding || !newWsName.trim() || !newWsPath.trim()}>
+              {adding ? t('workspace.adding') : t('workspace.addWorkspace')}
+            </button>
+          </div>
+        </form>
+      )}
+
+      <div className="stack">
+        {(wsData.workspaces ?? []).map((ws) => {
+          const config = ws.config ?? { workspaceName: ws.name, enabled: true, displayName: ws.name, syncEnabled: true };
+          const isSaving = saving === ws.name;
+          return (
+            <div className="row-card" key={ws.name}>
+              <div>
+                <strong>{ws.name}</strong>
+                <span>{ws.path}</span>
+              </div>
+              <div style={{ display: 'flex', gap: 'var(--space-3)', alignItems: 'center' }}>
+                <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)', cursor: 'pointer' }}>
+                  <input
+                    type="checkbox"
+                    checked={config.enabled}
+                    onChange={() => handleToggle(ws.name, 'enabled', config.enabled)}
+                    disabled={isSaving}
+                  />
+                  <span style={{ fontSize: '13px' }}>{t('workspace.include')}</span>
+                </label>
+                <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)', cursor: 'pointer' }}>
+                  <input
+                    type="checkbox"
+                    checked={config.syncEnabled}
+                    onChange={() => handleToggle(ws.name, 'syncEnabled', config.syncEnabled)}
+                    disabled={isSaving || !config.enabled}
+                  />
+                  <span style={{ fontSize: '13px' }}>{t('workspace.sync')}</span>
+                </label>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </CollapsiblePanel>
+  );
+}
+

package/ui/src/components/index.ts

@@ -0,0 +1,5 @@
+export { Loading } from './Loading';
+export { ErrorState } from './ErrorState';
+export { ProtectedRoute } from './ProtectedRoute';
+export { Shell } from './Shell';
+export { WorkspaceConfig } from './WorkspaceConfig';

package/ui/src/context/auth.tsx

@@ -0,0 +1,80 @@
+import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import { getGatewayToken, setGatewayToken, clearGatewayToken } from '../api';
+import { api } from '../api';
+
+interface AuthContextType {
+  isAuthenticated: boolean;
+  token: string | null;
+  login: (token: string) => Promise<boolean>;
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextType | null>(null);
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within AuthProvider');
+  }
+  return context;
+}
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [token, setTokenState] = useState<string | null>(() => getGatewayToken());
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [isChecking, setIsChecking] = useState(true);
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      const savedToken = getGatewayToken();
+      if (savedToken) {
+        try {
+          await api.getOverview();
+          setIsAuthenticated(true);
+        } catch {
+          setIsAuthenticated(false);
+        }
+      }
+      setIsChecking(false);
+    };
+    checkAuth();
+  }, []);
+
+  const login = useCallback(async (newToken: string): Promise<boolean> => {
+    setGatewayToken(newToken);
+    setTokenState(newToken);
+    try {
+      await api.getOverview();
+      setIsAuthenticated(true);
+      return true;
+    } catch {
+      clearGatewayToken();
+      setTokenState(null);
+      setIsAuthenticated(false);
+      return false;
+    }
+  }, []);
+
+  const logout = useCallback(() => {
+    clearGatewayToken();
+    setTokenState(null);
+    setIsAuthenticated(false);
+  }, []);
+
+  if (isChecking) {
+    return (
+      <div className="auth-checking">
+        <div className="auth-checking-content">
+          <div className="spinner"></div>
+          <span>Checking authentication...</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <AuthContext.Provider value={{ isAuthenticated, token, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}

package/ui/src/context/theme.tsx

@@ -0,0 +1,66 @@
+import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
+
+type Theme = 'light' | 'dark';
+
+interface ThemeContextType {
+  theme: Theme;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | null>(null);
+
+const THEME_STORAGE_KEY = 'pd-theme';
+
+function getSystemPreference(): Theme {
+  if (typeof window === 'undefined') return 'light';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+function getStoredTheme(): Theme | null {
+  try {
+    const stored = localStorage.getItem(THEME_STORAGE_KEY);
+    if (stored === 'light' || stored === 'dark') return stored;
+  } catch { /* ignore */ }
+  return null;
+}
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setTheme] = useState<Theme>(() => getStoredTheme() ?? getSystemPreference());
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.setAttribute('data-theme', theme);
+    try {
+      localStorage.setItem(THEME_STORAGE_KEY, theme);
+    } catch { /* ignore */ }
+  }, [theme]);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = (e: MediaQueryListEvent) => {
+      if (!getStoredTheme()) {
+        setTheme(e.matches ? 'dark' : 'light');
+      }
+    };
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
+  const toggleTheme = useCallback(() => {
+    setTheme(prev => prev === 'light' ? 'dark' : 'light');
+  }, []);
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within ThemeProvider');
+  }
+  return context;
+}

package/ui/src/hooks/useAutoRefresh.ts

@@ -0,0 +1,39 @@
+import { useEffect, useRef, useState, useCallback } from 'react';
+
+interface UseAutoRefreshOptions {
+  intervalMs: number;
+  enabled?: boolean;
+}
+
+export function useAutoRefresh(refreshFn: () => void | Promise<void>, options: UseAutoRefreshOptions) {
+  const { intervalMs, enabled = true } = options;
+  const [lastRefresh, setLastRefresh] = useState<Date>(new Date());
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const refreshFnRef = useRef(refreshFn);
+
+  useEffect(() => {
+    refreshFnRef.current = refreshFn;
+  }, [refreshFn]);
+
+  const refresh = useCallback(async () => {
+    setIsRefreshing(true);
+    try {
+      await refreshFnRef.current();
+      setLastRefresh(new Date());
+    } finally {
+      setIsRefreshing(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    const timer = setInterval(() => {
+      refresh();
+    }, intervalMs);
+
+    return () => clearInterval(timer);
+  }, [intervalMs, enabled, refresh]);
+
+  return { lastRefresh, isRefreshing, refresh };
+}