machinaos 0.0.1

package/client/src/config/antdTheme.ts

@@ -0,0 +1,186 @@
+import { ThemeConfig } from 'antd';
+import { solarized, lightColors, darkColors } from '../styles/theme';
+
+export const lightTheme: ThemeConfig = {
+  token: {
+    // Primary colors - using Solarized palette
+    colorPrimary: solarized.blue,
+    colorSuccess: lightColors.success,
+    colorWarning: solarized.yellow,
+    colorError: solarized.red,
+    colorInfo: solarized.cyan,
+
+    // Background colors
+    colorBgBase: lightColors.background,
+    colorBgContainer: lightColors.background,
+    colorBgElevated: lightColors.backgroundElevated,
+    colorBgLayout: lightColors.backgroundPanel,
+
+    // Text colors
+    colorText: lightColors.text,
+    colorTextSecondary: lightColors.textSecondary,
+    colorTextTertiary: lightColors.textMuted,
+
+    // Border colors
+    colorBorder: lightColors.border,
+    colorBorderSecondary: lightColors.backgroundAlt,
+
+    // Border and layout
+    borderRadius: 6,
+    borderRadiusLG: 8,
+    borderRadiusOuter: 4,
+
+    // Typography
+    fontSize: 14,
+    fontSizeLG: 16,
+    fontSizeSM: 12,
+    fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+
+    // Spacing
+    padding: 12,
+    paddingLG: 16,
+    paddingSM: 8,
+    paddingXS: 6,
+
+    // Component specific
+    controlHeight: 32,
+    controlHeightSM: 24,
+    controlHeightLG: 40,
+
+    // Box shadow
+    boxShadowSecondary: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+  },
+  components: {
+    Card: {
+      borderRadius: 6,
+      paddingLG: 12,
+    },
+    Collapse: {
+      borderRadius: 6,
+      headerBg: lightColors.backgroundPanel,
+    },
+    Button: {
+      borderRadius: 6,
+    },
+    Input: {
+      borderRadius: 6,
+    },
+    Select: {
+      borderRadius: 6,
+    },
+    Form: {
+      itemMarginBottom: 16,
+      verticalLabelPadding: '0 0 4px',
+    },
+    Typography: {
+      fontSize: 14,
+    },
+    Tag: {
+      borderRadius: 4,
+      fontSize: 11,
+    },
+    Badge: {
+      fontSize: 11,
+    },
+  },
+};
+
+export const darkTheme: ThemeConfig = {
+  token: {
+    // Primary colors - using Solarized palette
+    colorPrimary: solarized.blue,
+    colorSuccess: solarized.green,
+    colorWarning: solarized.yellow,
+    colorError: solarized.red,
+    colorInfo: solarized.cyan,
+
+    // Background colors - using Solarized dark
+    colorBgBase: darkColors.background,
+    colorBgContainer: darkColors.backgroundAlt,
+    colorBgElevated: darkColors.backgroundElevated,
+    colorBgLayout: darkColors.background,
+
+    // Text colors
+    colorText: darkColors.text,
+    colorTextSecondary: darkColors.textSecondary,
+    colorTextTertiary: darkColors.textMuted,
+
+    // Border colors
+    colorBorder: darkColors.border,
+    colorBorderSecondary: darkColors.borderHover,
+
+    // Border and layout
+    borderRadius: 6,
+    borderRadiusLG: 8,
+    borderRadiusOuter: 4,
+
+    // Typography
+    fontSize: 14,
+    fontSizeLG: 16,
+    fontSizeSM: 12,
+    fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+
+    // Spacing
+    padding: 12,
+    paddingLG: 16,
+    paddingSM: 8,
+    paddingXS: 6,
+
+    // Component specific
+    controlHeight: 32,
+    controlHeightSM: 24,
+    controlHeightLG: 40,
+
+    // Box shadow
+    boxShadowSecondary: '0 4px 12px 0 rgba(0, 0, 0, 0.4)',
+  },
+  components: {
+    Card: {
+      borderRadius: 6,
+      paddingLG: 12,
+      colorBgContainer: darkColors.backgroundAlt,
+    },
+    Collapse: {
+      borderRadius: 6,
+      headerBg: darkColors.backgroundAlt,
+      contentBg: darkColors.background,
+    },
+    Button: {
+      borderRadius: 6,
+    },
+    Input: {
+      borderRadius: 6,
+      colorBgContainer: darkColors.backgroundAlt,
+      colorBorder: darkColors.border,
+    },
+    Select: {
+      borderRadius: 6,
+      colorBgContainer: darkColors.backgroundAlt,
+      colorBorder: darkColors.border,
+    },
+    Form: {
+      itemMarginBottom: 16,
+      verticalLabelPadding: '0 0 4px',
+    },
+    Typography: {
+      fontSize: 14,
+    },
+    Tag: {
+      borderRadius: 4,
+      fontSize: 11,
+    },
+    Badge: {
+      fontSize: 11,
+    },
+    Modal: {
+      contentBg: darkColors.backgroundAlt,
+      headerBg: darkColors.backgroundAlt,
+    },
+    Tooltip: {
+      colorBgSpotlight: darkColors.backgroundElevated,
+    },
+  },
+};
+
+// Legacy export for backwards compatibility
+export const antdTheme = lightTheme;

package/client/src/config/api.ts

@@ -0,0 +1,54 @@
+/**
+ * Centralized API Configuration
+ * Single source of truth for all backend service URLs
+ */
+
+interface ApiConfig {
+  readonly PYTHON_BASE_URL: string;
+  readonly WHATSAPP_BASE_URL: string;
+  readonly AUTH_ENABLED: boolean;
+}
+
+/**
+ * Get API configuration from environment variables with fallback defaults
+ */
+function getApiConfig(): ApiConfig {
+  const viteEnv = (import.meta as any).env || {};
+
+  // In production (non-localhost), use relative URLs (same origin)
+  const isProduction = typeof window !== 'undefined' &&
+    !window.location.hostname.includes('localhost') &&
+    !window.location.hostname.includes('127.0.0.1');
+
+  return {
+    // Python FastAPI backend (port 3010 in dev, same origin in prod)
+    PYTHON_BASE_URL: viteEnv.VITE_PYTHON_SERVICE_URL || (isProduction ? '' : 'http://localhost:3010'),
+
+    // WhatsApp Go service (port 3012) - typically not called directly from frontend
+    WHATSAPP_BASE_URL: viteEnv.VITE_WHATSAPP_SERVICE_URL || (isProduction ? '' : 'http://localhost:3012'),
+
+    // Authentication enabled (default true, set VITE_AUTH_ENABLED=false to disable)
+    AUTH_ENABLED: viteEnv.VITE_AUTH_ENABLED !== 'false',
+  };
+}
+
+/**
+ * API Configuration singleton
+ * Import this in services instead of hardcoding URLs
+ *
+ * @example
+ * import { API_CONFIG } from '../config/api';
+ * fetch(`${API_CONFIG.PYTHON_BASE_URL}/api/workflow/execute-node`);
+ */
+export const API_CONFIG = getApiConfig();
+
+/**
+ * Helper to build API endpoint URLs
+ */
+export const buildApiUrl = (path: string, baseUrl: string = API_CONFIG.PYTHON_BASE_URL): string => {
+  // Ensure path starts with /
+  const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+  // Remove trailing slash from baseUrl
+  const normalizedBase = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
+  return `${normalizedBase}${normalizedPath}`;
+};

package/client/src/contexts/AuthContext.tsx

@@ -0,0 +1,221 @@
+/**
+ * Authentication Context for user session management.
+ *
+ * Provides:
+ * - Login/logout/register functions
+ * - Current user state
+ * - Authentication status
+ * - Auth mode (single-owner vs multi-user)
+ */
+
+import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import { API_CONFIG } from '../config/api';
+
+export interface User {
+  id: number;
+  email: string;
+  display_name: string;
+  is_owner: boolean;
+}
+
+export interface AuthStatus {
+  auth_mode: 'single' | 'multi';
+  authenticated: boolean;
+  user: User | null;
+  can_register: boolean;
+}
+
+interface AuthContextType {
+  user: User | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  authMode: 'single' | 'multi';
+  canRegister: boolean;
+  error: string | null;
+  login: (email: string, password: string) => Promise<boolean>;
+  register: (email: string, password: string, displayName: string) => Promise<boolean>;
+  logout: () => Promise<void>;
+  checkAuth: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+const getApiBase = () => `${API_CONFIG.PYTHON_BASE_URL}/api/auth`;
+
+export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  // When auth is disabled, bypass authentication entirely
+  const authEnabled = API_CONFIG.AUTH_ENABLED;
+
+  const [user, setUser] = useState<User | null>(authEnabled ? null : { id: 0, email: 'anonymous', display_name: 'Anonymous', is_owner: true });
+  const [isLoading, setIsLoading] = useState(authEnabled);
+  const [authMode, setAuthMode] = useState<'single' | 'multi'>('single');
+  const [canRegister, setCanRegister] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const checkAuth = useCallback(async (retryCount = 0): Promise<void> => {
+    // Skip auth check if auth is disabled
+    if (!authEnabled) {
+      setIsLoading(false);
+      return;
+    }
+    const maxRetries = 5;
+    const baseDelay = 1000; // 1 second
+
+    try {
+      const response = await fetch(`${getApiBase()}/status`, {
+        credentials: 'include'
+      });
+      const data: AuthStatus = await response.json();
+
+      setAuthMode(data.auth_mode);
+      setCanRegister(data.can_register);
+
+      if (data.authenticated && data.user) {
+        setUser(data.user);
+      } else {
+        setUser(null);
+      }
+      setError(null);
+      setIsLoading(false);
+    } catch (err) {
+      console.error(`Failed to check auth status (attempt ${retryCount + 1}/${maxRetries + 1}):`, err);
+
+      // Retry with exponential backoff if server not ready
+      if (retryCount < maxRetries) {
+        const delay = baseDelay * Math.pow(2, retryCount);
+        console.log(`Retrying in ${delay}ms...`);
+        setTimeout(() => checkAuth(retryCount + 1), delay);
+      } else {
+        setUser(null);
+        setError('Failed to connect to server');
+        setIsLoading(false);
+      }
+    }
+  }, [authEnabled]);
+
+  // Check auth status on mount
+  useEffect(() => {
+    checkAuth();
+  }, [checkAuth]);
+
+  const login = useCallback(async (email: string, password: string): Promise<boolean> => {
+    setError(null);
+    setIsLoading(true);
+
+    try {
+      const response = await fetch(`${getApiBase()}/login`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ email, password })
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        setError(data.detail || 'Login failed');
+        setIsLoading(false);
+        return false;
+      }
+
+      if (data.success && data.user) {
+        setUser(data.user);
+        setIsLoading(false);
+        return true;
+      }
+
+      setError('Login failed');
+      setIsLoading(false);
+      return false;
+    } catch (err) {
+      console.error('Login error:', err);
+      setError('Failed to connect to server');
+      setIsLoading(false);
+      return false;
+    }
+  }, []);
+
+  const register = useCallback(async (
+    email: string,
+    password: string,
+    displayName: string
+  ): Promise<boolean> => {
+    setError(null);
+    setIsLoading(true);
+
+    try {
+      const response = await fetch(`${getApiBase()}/register`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ email, password, display_name: displayName })
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        setError(data.detail || 'Registration failed');
+        setIsLoading(false);
+        return false;
+      }
+
+      if (data.success && data.user) {
+        setUser(data.user);
+        setCanRegister(false); // After successful registration in single-owner mode
+        setIsLoading(false);
+        return true;
+      }
+
+      setError('Registration failed');
+      setIsLoading(false);
+      return false;
+    } catch (err) {
+      console.error('Register error:', err);
+      setError('Failed to connect to server');
+      setIsLoading(false);
+      return false;
+    }
+  }, []);
+
+  const logout = useCallback(async () => {
+    try {
+      await fetch(`${getApiBase()}/logout`, {
+        method: 'POST',
+        credentials: 'include'
+      });
+    } catch (err) {
+      console.error('Logout error:', err);
+    } finally {
+      setUser(null);
+      // Re-check auth status to update canRegister
+      await checkAuth();
+    }
+  }, [checkAuth]);
+
+  const value: AuthContextType = {
+    user,
+    isAuthenticated: user !== null,
+    isLoading,
+    authMode,
+    canRegister,
+    error,
+    login,
+    register,
+    logout,
+    checkAuth
+  };
+
+  return (
+    <AuthContext.Provider value={value}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = (): AuthContextType => {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};

package/client/src/contexts/ThemeContext.tsx

@@ -0,0 +1,42 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+interface ThemeContextType {
+  isDarkMode: boolean;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [isDarkMode, setIsDarkMode] = useState(() => {
+    const saved = localStorage.getItem('darkMode');
+    return saved === null ? true : saved === 'true';
+  });
+
+  useEffect(() => {
+    localStorage.setItem('darkMode', isDarkMode.toString());
+    if (isDarkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, [isDarkMode]);
+
+  const toggleTheme = () => {
+    setIsDarkMode(prev => !prev);
+  };
+
+  return (
+    <ThemeContext.Provider value={{ isDarkMode, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};