machinaos 0.0.1

package/client/src/components/auth/ProtectedRoute.tsx

@@ -0,0 +1,59 @@
+/**
+ * Protected Route component.
+ * Wraps content that requires authentication.
+ * Shows LoginPage if user is not authenticated.
+ */
+
+import React from 'react';
+import { useAuth } from '../../contexts/AuthContext';
+import LoginPage from './LoginPage';
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+}
+
+const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
+  const { isAuthenticated, isLoading } = useAuth();
+
+  // Show loading spinner while checking auth
+  if (isLoading) {
+    return (
+      <div style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100vh',
+        backgroundColor: '#0d1117',
+        color: '#c9d1d9'
+      }}>
+        <div style={{ textAlign: 'center' }}>
+          <div style={{
+            width: 40,
+            height: 40,
+            border: '3px solid #30363d',
+            borderTopColor: '#bd93f9',
+            borderRadius: '50%',
+            animation: 'spin 1s linear infinite',
+            margin: '0 auto 16px'
+          }} />
+          <style>{`
+            @keyframes spin {
+              to { transform: rotate(360deg); }
+            }
+          `}</style>
+          <p>Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Show login page if not authenticated
+  if (!isAuthenticated) {
+    return <LoginPage />;
+  }
+
+  // Render protected content
+  return <>{children}</>;
+};
+
+export default ProtectedRoute;

package/client/src/components/base/BaseChatModelNode.tsx

@@ -0,0 +1,271 @@
+import React, { useState, useEffect } from 'react';
+import { Handle, Position, NodeProps } from 'reactflow';
+import { NodeData } from '../../types/NodeTypes';
+import { useAppStore } from '../../store/useAppStore';
+import { useWebSocket } from '../../contexts/WebSocketContext';
+import { useApiKeys } from '../../hooks/useApiKeys';
+import { useAppTheme } from '../../hooks/useAppTheme';
+
+interface BaseChatModelNodeProps extends NodeProps<NodeData> {
+  providerId: string;
+  displayName: string;
+  icon: string;
+  color: string;
+}
+
+const BaseChatModelNode: React.FC<BaseChatModelNodeProps> = ({
+  id,
+  type,
+  data,
+  isConnectable,
+  selected,
+  providerId,
+  displayName,
+  icon,
+  color
+}) => {
+  const theme = useAppTheme();
+  const { setSelectedNode } = useAppStore();
+  const [hasApiKey, setHasApiKey] = useState(false);
+  const [isConfigured, setIsConfigured] = useState(false);
+  const isDisabled = data?.disabled === true;
+
+  // Get node status from WebSocket context
+  const { getNodeStatus } = useWebSocket();
+  const { getStoredApiKey } = useApiKeys();
+  const nodeStatus = getNodeStatus(id);
+  const executionStatus = nodeStatus?.status || 'idle';
+
+  useEffect(() => {
+    const checkConfiguration = async () => {
+      try {
+        const apiKey = await getStoredApiKey(providerId);
+        const hasApiKeyStored = !!apiKey;
+        setHasApiKey(hasApiKeyStored);
+
+        const hasModel = data?.model && data.model.trim() !== '';
+        const configured = hasModel && hasApiKeyStored;
+
+        setIsConfigured(configured);
+      } catch (error) {
+        console.error(`[BaseChatModelNode] ${displayName} ${id}: Configuration check error:`, error);
+        setHasApiKey(false);
+        setIsConfigured(false);
+      }
+    };
+
+    checkConfiguration();
+  }, [data?.model, id, providerId, displayName, getStoredApiKey]);
+
+  const handleParametersClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setSelectedNode({ id, type, data, position: { x: 0, y: 0 } });
+  };
+
+  // Get status indicator color based on execution state
+  const getStatusIndicatorColor = () => {
+    switch (executionStatus) {
+      case 'executing':
+        return theme.dracula.cyan; // Executing
+      case 'success':
+        return theme.dracula.green; // Success
+      case 'error':
+        return theme.dracula.red; // Error
+      default:
+        // Idle - use configuration status
+        return isConfigured ? theme.dracula.green : hasApiKey ? theme.dracula.orange : theme.dracula.red;
+    }
+  };
+
+  const getStatusTitle = () => {
+    switch (executionStatus) {
+      case 'executing':
+        return 'Executing...';
+      case 'success':
+        return 'Execution successful';
+      case 'error':
+        return `Error: ${nodeStatus?.data?.error || 'Unknown error'}`;
+      default:
+        return isConfigured
+          ? 'Model configured and ready'
+          : hasApiKey
+            ? 'API key found, model needs configuration'
+            : 'API key required';
+    }
+  };
+
+  const isExecuting = executionStatus === 'executing';
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+        fontSize: theme.fontSize.xs,
+        cursor: 'pointer',
+      }}
+    >
+      {/* Main Circular Node */}
+      <div
+        style={{
+          position: 'relative',
+          width: theme.nodeSize.square,
+          height: theme.nodeSize.square,
+          borderRadius: '50%',
+          background: isConfigured ? color : theme.colors.textMuted,
+          border: `2px solid ${selected ? theme.colors.focus : isExecuting ? theme.dracula.cyan : isConfigured ? color : theme.dracula.red}`,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: 'white',
+          fontSize: type === 'aiAgent' ? theme.fontSize.lg : theme.nodeSize.squareIcon,
+          fontWeight: theme.fontWeight.semibold,
+          transition: theme.transitions.fast,
+          boxShadow: selected
+            ? `0 4px 12px ${theme.colors.focusRing}, 0 0 0 2px ${theme.colors.focusRing}`
+            : isExecuting
+              ? `0 4px 12px ${theme.dracula.cyan}66, 0 0 0 3px ${theme.dracula.cyan}4D`
+              : isConfigured
+                ? `0 2px 8px ${theme.colors.shadow}`
+                : `0 2px 8px ${theme.dracula.red}4D`,
+          animation: isExecuting ? 'pulse 1.5s ease-in-out infinite' : 'none',
+          opacity: isDisabled ? 0.5 : 1,
+        }}
+      >
+        {/* Disabled Overlay */}
+        {isDisabled && (
+          <div style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(128, 128, 128, 0.4)',
+            borderRadius: 'inherit',
+            zIndex: 35,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            pointerEvents: 'none',
+          }}>
+            <span style={{ fontSize: '20px', opacity: 0.8, color: theme.colors.textSecondary }}>||</span>
+          </div>
+        )}
+
+        {/* Provider Icon */}
+        {icon}
+
+        {/* Parameters Button */}
+        <button
+          onClick={handleParametersClick}
+          style={{
+            position: 'absolute',
+            top: '-8px',
+            right: '-8px',
+            width: theme.nodeSize.paramButton,
+            height: theme.nodeSize.paramButton,
+            borderRadius: '50%',
+            backgroundColor: theme.colors.backgroundAlt,
+            border: `1px solid ${theme.colors.border}`,
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: theme.fontSize.xs,
+            color: theme.colors.textSecondary,
+            fontWeight: '400',
+            transition: theme.transitions.fast,
+            zIndex: 30,
+            boxShadow: `0 1px 3px ${theme.colors.shadow}`
+          }}
+          title="Edit Model Parameters"
+        >
+          ⚙️
+        </button>
+
+        {/* Configuration/Execution Status Indicator */}
+        <div
+          style={{
+            position: 'absolute',
+            top: '-4px',
+            left: '-4px',
+            width: theme.nodeSize.statusIndicator,
+            height: theme.nodeSize.statusIndicator,
+            borderRadius: '50%',
+            backgroundColor: getStatusIndicatorColor(),
+            border: `2px solid ${theme.colors.background}`,
+            boxShadow: isExecuting
+              ? `0 0 8px ${theme.dracula.cyan}99`
+              : `0 1px 3px ${theme.colors.shadow}`,
+            zIndex: 30,
+            animation: isExecuting ? 'pulse 1s ease-in-out infinite' : 'none',
+          }}
+          title={getStatusTitle()}
+        />
+
+        {/* Diamond Output Handle */}
+        <Handle
+          id="output-model"
+          type="source"
+          position={Position.Top}
+          isConnectable={isConnectable}
+          style={{
+            position: 'absolute',
+            top: '-6px',
+            left: '50%',
+            transform: 'translateX(-50%) rotate(45deg)',
+            width: theme.nodeSize.statusIndicator,
+            height: theme.nodeSize.statusIndicator,
+            backgroundColor: isConfigured ? color : theme.colors.textMuted,
+            border: `2px solid ${theme.colors.background}`,
+            borderRadius: '0',
+            opacity: isConfigured ? 1 : 0.6,
+            zIndex: 20
+          }}
+          title={isConfigured ? 'Model Configuration Output - Connect to AI Agent' : 'Connect to AI Agent (configure API key and model before running)'}
+        />
+
+        {/* Diamond Input Handle for Prompt */}
+        <Handle
+          id="input-prompt"
+          type="target"
+          position={Position.Bottom}
+          isConnectable={isConnectable}
+          style={{
+            position: 'absolute',
+            bottom: '-6px',
+            left: '50%',
+            transform: 'translateX(-50%) rotate(45deg)',
+            width: theme.nodeSize.statusIndicator,
+            height: theme.nodeSize.statusIndicator,
+            backgroundColor: theme.colors.background,
+            border: `2px solid ${theme.colors.textMuted}`,
+            borderRadius: '0',
+            zIndex: 20
+          }}
+          title="Prompt Input (optional)"
+        />
+      </div>
+
+      {/* Model Name Below Circle */}
+      <div
+        style={{
+          marginTop: theme.spacing.sm,
+          fontSize: theme.fontSize.sm,
+          fontWeight: theme.fontWeight.medium,
+          color: theme.colors.text,
+          lineHeight: '1.2',
+          textAlign: 'center',
+          maxWidth: '120px'
+        }}
+      >
+        {data?.label || displayName}
+      </div>
+    </div>
+  );
+};
+
+export default BaseChatModelNode;

package/client/src/components/icons/AIProviderIcons.tsx

@@ -0,0 +1,50 @@
+// AI Provider Icons - Using @lobehub/icons for official brand logos
+import React from 'react';
+import { OpenAI, Claude, Gemini, Groq, OpenRouter, Cerebras } from '@lobehub/icons';
+
+// Icon size constant for consistency
+const ICON_SIZE = 28;
+
+// Export icon components with consistent sizing
+// Each provider has different available variants - use Avatar for consistency
+export const OpenAIIcon: React.FC<{ size?: number }> = ({ size = ICON_SIZE }) => (
+  <OpenAI.Avatar size={size} />
+);
+
+export const ClaudeIcon: React.FC<{ size?: number }> = ({ size = ICON_SIZE }) => (
+  <Claude.Color size={size} />
+);
+
+export const GeminiIcon: React.FC<{ size?: number }> = ({ size = ICON_SIZE }) => (
+  <Gemini.Color size={size} />
+);
+
+// Groq uses Avatar variant (no Color variant available)
+export const GroqIcon: React.FC<{ size?: number }> = ({ size = ICON_SIZE }) => (
+  <Groq.Avatar size={size} />
+);
+
+// OpenRouter uses Avatar variant (no Color variant available)
+export const OpenRouterIcon: React.FC<{ size?: number }> = ({ size = ICON_SIZE }) => (
+  <OpenRouter.Avatar size={size} />
+);
+
+// Cerebras uses Color variant
+export const CerebrasIcon: React.FC<{ size?: number }> = ({ size = ICON_SIZE }) => (
+  <Cerebras.Color size={size} />
+);
+
+// Map provider IDs to their icon components
+export const AI_PROVIDER_ICONS: Record<string, React.FC<{ size?: number }>> = {
+  openai: OpenAIIcon,
+  anthropic: ClaudeIcon,
+  gemini: GeminiIcon,
+  groq: GroqIcon,
+  openrouter: OpenRouterIcon,
+  cerebras: CerebrasIcon,
+};
+
+// Get icon component by provider ID
+export const getAIProviderIcon = (providerId: string): React.FC<{ size?: number }> | null => {
+  return AI_PROVIDER_ICONS[providerId] || null;
+};

package/client/src/components/maps/GoogleMapsPicker.tsx

@@ -0,0 +1,137 @@
+import React, { useEffect, useRef } from 'react';
+import { loadGoogleMaps } from '../../utils/googleMapsLoader';
+import { useAppTheme } from '../../hooks/useAppTheme';
+
+interface GoogleMapsPickerProps {
+  lat: number;
+  lng: number;
+  onLocationClick: (lat: number, lng: number) => void;
+  apiKey?: string;
+  zoom?: number;
+  mapTypeId?: string;
+  height?: string;
+  width?: string;
+}
+
+const GoogleMapsPicker: React.FC<GoogleMapsPickerProps> = ({
+  lat,
+  lng,
+  onLocationClick,
+  apiKey,
+  zoom = 13,
+  mapTypeId = 'ROADMAP',
+  height = '100%',
+  width = '100%'
+}) => {
+  const theme = useAppTheme();
+  const mapRef = useRef<HTMLDivElement>(null);
+  const mapInstanceRef = useRef<google.maps.Map | null>(null);
+  const markerRef = useRef<google.maps.Marker | null>(null);
+
+  useEffect(() => {
+    if (!mapRef.current || !apiKey) return;
+
+    // Load Google Maps API using centralized loader
+    const loadAndInitialize = async () => {
+      try {
+        await loadGoogleMaps({
+          apiKey,
+          libraries: ['geometry']
+        });
+        initializeMap();
+      } catch (error) {
+        console.error('Failed to load Google Maps API:', error);
+      }
+    };
+
+    loadAndInitialize();
+
+    function initializeMap() {
+      if (!mapRef.current || !window.google?.maps) return;
+
+      const mapOptions: google.maps.MapOptions = {
+        center: { lat, lng },
+        zoom,
+        mapTypeId: window.google.maps.MapTypeId[mapTypeId as keyof typeof google.maps.MapTypeId] || google.maps.MapTypeId.ROADMAP,
+        clickableIcons: false,
+        disableDefaultUI: false,
+        zoomControl: true,
+        mapTypeControl: true,
+        streetViewControl: true,
+        fullscreenControl: true
+      };
+
+      mapInstanceRef.current = new google.maps.Map(mapRef.current, mapOptions);
+
+      // Create marker
+      markerRef.current = new google.maps.Marker({
+        position: { lat, lng },
+        map: mapInstanceRef.current,
+        draggable: true,
+        title: 'Selected Location - Click or drag to change'
+      });
+
+      // Add click listeners
+      mapInstanceRef.current.addListener('click', (e: google.maps.MapMouseEvent) => {
+        if (e.latLng) {
+          const newLat = e.latLng.lat();
+          const newLng = e.latLng.lng();
+          onLocationClick(newLat, newLng);
+        }
+      });
+
+      // Add marker drag listener
+      markerRef.current.addListener('dragend', (e: google.maps.MapMouseEvent) => {
+        if (e.latLng) {
+          const newLat = e.latLng.lat();
+          const newLng = e.latLng.lng();
+          onLocationClick(newLat, newLng);
+        }
+      });
+    }
+  }, [apiKey, lat, lng, zoom, mapTypeId]);
+
+  // Update marker position when coordinates change
+  useEffect(() => {
+    if (markerRef.current && mapInstanceRef.current) {
+      const newPosition = { lat, lng };
+      markerRef.current.setPosition(newPosition);
+      mapInstanceRef.current.setCenter(newPosition);
+    }
+  }, [lat, lng]);
+
+  if (!apiKey) {
+    return (
+      <div style={{
+        height,
+        width,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: theme.colors.backgroundAlt,
+        color: theme.colors.textSecondary,
+        fontSize: theme.fontSize.sm,
+        textAlign: 'center',
+        padding: theme.spacing.lg,
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.borderRadius.sm
+      }}>
+        Google Maps API key required for map display
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={mapRef}
+      style={{
+        height,
+        width,
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.borderRadius.sm
+      }}
+    />
+  );
+};
+
+export default GoogleMapsPicker;

package/client/src/components/maps/MapsPreviewPanel.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import GoogleMapsPicker from './GoogleMapsPicker';
+import { useAppTheme } from '../../hooks/useAppTheme';
+
+interface MapsPreviewPanelProps {
+  lat: number;
+  lng: number;
+  zoom?: number;
+  mapTypeId?: string;
+  apiKey?: string;
+  onLocationClick: (lat: number, lng: number) => void;
+  title?: string;
+  description?: string;
+}
+
+const MapsPreviewPanel: React.FC<MapsPreviewPanelProps> = ({
+  lat,
+  lng,
+  zoom = 13,
+  mapTypeId = 'ROADMAP',
+  apiKey,
+  onLocationClick,
+  title = 'Maps Preview',
+  description = 'Interactive map based on current parameters'
+}) => {
+  const theme = useAppTheme();
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: theme.colors.backgroundPanel
+      }}>
+      {/* Maps Header */}
+      <div style={{
+        padding: theme.spacing.lg,
+        borderBottom: `1px solid ${theme.colors.border}`,
+        backgroundColor: theme.colors.backgroundAlt,
+        flexShrink: 0
+      }}>
+        <h3 style={{
+          margin: 0,
+          fontSize: theme.fontSize.lg,
+          fontWeight: theme.fontWeight.semibold,
+          color: theme.colors.text,
+          display: 'flex',
+          alignItems: 'center',
+          gap: theme.spacing.sm
+        }}>
+          {title}
+        </h3>
+        <p style={{
+          margin: `${theme.spacing.xs} 0 0 0`,
+          fontSize: theme.fontSize.sm,
+          color: theme.colors.textSecondary
+        }}>
+          {description}
+        </p>
+      </div>
+
+      {/* Maps Content */}
+      <div style={{
+        flex: 1,
+        padding: theme.spacing.md,
+        display: 'flex',
+        flexDirection: 'column'
+      }}>
+        <GoogleMapsPicker
+          lat={lat}
+          lng={lng}
+          onLocationClick={onLocationClick}
+          apiKey={apiKey}
+          zoom={zoom}
+          mapTypeId={mapTypeId}
+          height="100%"
+          width="100%"
+        />
+      </div>
+
+      {/* Coordinates Display */}
+      <div style={{
+        padding: theme.spacing.md,
+        borderTop: `1px solid ${theme.colors.border}`,
+        backgroundColor: theme.colors.backgroundAlt,
+        fontSize: theme.fontSize.xs,
+        color: theme.colors.textSecondary,
+        fontFamily: 'monospace',
+        flexShrink: 0
+      }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <span>Lat: {lat.toFixed(6)}</span>
+          <span>Lng: {lng.toFixed(6)}</span>
+        </div>
+        <div style={{
+          marginTop: theme.spacing.xs,
+          textAlign: 'center',
+          fontSize: theme.fontSize.xs,
+          opacity: 0.7
+        }}>
+          Click or drag marker to update coordinates
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MapsPreviewPanel;

package/client/src/components/maps/index.ts

@@ -0,0 +1,26 @@
+// Maps Components
+export { default as GoogleMapsPicker } from './GoogleMapsPicker';
+export { default as MapsPreviewPanel } from './MapsPreviewPanel';
+
+// Re-export types for convenience
+export interface GoogleMapsPickerProps {
+  lat: number;
+  lng: number;
+  onLocationClick: (lat: number, lng: number) => void;
+  apiKey?: string;
+  zoom?: number;
+  mapTypeId?: string;
+  height?: string;
+  width?: string;
+}
+
+export interface MapsPreviewPanelProps {
+  lat: number;
+  lng: number;
+  zoom?: number;
+  mapTypeId?: string;
+  apiKey?: string;
+  onLocationClick: (lat: number, lng: number) => void;
+  title?: string;
+  description?: string;
+}