machinaos 0.0.1

package/client/src/components/APIKeyValidator.tsx

@@ -0,0 +1,118 @@
+import React, { useEffect } from 'react';
+import { Input, Button, Space, Tag, Tooltip } from 'antd';
+import { CheckCircleOutlined, CloseCircleOutlined, LoadingOutlined, DeleteOutlined } from '@ant-design/icons';
+import { useApiKeyValidation } from '../hooks/useApiKeyValidation';
+
+interface APIKeyValidatorProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  validationConfig: {
+    provider?: string;
+    showValidateButton?: boolean;
+  };
+  onValidationSuccess?: (models: string[]) => void;
+  isDragOver?: boolean;
+  onDragOver?: (e: React.DragEvent) => void;
+  onDragLeave?: (e: React.DragEvent) => void;
+  onDrop?: (e: React.DragEvent) => void;
+}
+
+const APIKeyValidator: React.FC<APIKeyValidatorProps> = ({
+  value,
+  onChange,
+  placeholder,
+  validationConfig,
+  onValidationSuccess,
+  isDragOver = false,
+  onDragOver,
+  onDragLeave,
+  onDrop
+}) => {
+  const { status, hasStoredKey, validate, clear, getStoredKey, isValidating, isValid } = useApiKeyValidation({
+    provider: validationConfig.provider,
+    onSuccess: onValidationSuccess
+  });
+
+  // Auto-load stored key on mount
+  useEffect(() => {
+    if (hasStoredKey && !value) {
+      getStoredKey().then(storedKey => {
+        if (storedKey) onChange(storedKey);
+      });
+    }
+  }, [hasStoredKey, value, onChange, getStoredKey]);
+
+  const handleValidate = () => validate(value);
+
+  const handleClear = async () => {
+    await clear();
+    onChange('');
+  };
+
+  const getStatusIcon = () => {
+    if (isValidating) return <LoadingOutlined />;
+    if (isValid) return <CheckCircleOutlined style={{ color: '#52c41a' }} />;
+    if (status === 'invalid') return <CloseCircleOutlined style={{ color: '#ff4d4f' }} />;
+    return null;
+  };
+
+  const getStatusTag = () => {
+    if (hasStoredKey && isValid) {
+      return (
+        <Tag color="success" icon={<CheckCircleOutlined />}>
+          Validated
+        </Tag>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <Space direction="vertical" style={{ width: '100%' }} size="small">
+      <Space.Compact style={{ width: '100%' }}>
+        <Input.Password
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder || 'Enter API key...'}
+          onDragOver={onDragOver}
+          onDragLeave={onDragLeave}
+          onDrop={onDrop}
+          suffix={getStatusIcon()}
+          status={status === 'invalid' ? 'error' : undefined}
+          style={{
+            fontFamily: 'monospace',
+            borderColor: isDragOver ? '#1890ff' : undefined,
+            backgroundColor: isDragOver ? '#e6f7ff' : undefined
+          }}
+        />
+
+        {validationConfig.showValidateButton && (
+          <Button
+            type={isValid ? 'primary' : 'default'}
+            loading={isValidating}
+            disabled={!value?.trim() || isValidating}
+            onClick={handleValidate}
+          >
+            {isValidating ? 'Validating' : isValid ? 'Valid' : 'Validate'}
+          </Button>
+        )}
+
+        {hasStoredKey && (
+          <Tooltip title="Clear stored API key">
+            <Button
+              icon={<DeleteOutlined />}
+              onClick={handleClear}
+              type="text"
+              size="small"
+            />
+          </Tooltip>
+        )}
+      </Space.Compact>
+
+      {getStatusTag()}
+    </Space>
+  );
+};
+
+export default APIKeyValidator;

package/client/src/components/ClaudeChatModelNode.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { NodeProps } from 'reactflow';
+import { NodeData } from '../types/NodeTypes';
+import BaseChatModelNode from './base/BaseChatModelNode';
+
+const ClaudeChatModelNode: React.FC<NodeProps<NodeData>> = (props) => {
+  return (
+    <BaseChatModelNode
+      {...props}
+      providerId="anthropic"
+      displayName="Claude"
+      icon="🧠"
+      color="#FF6B35"
+    />
+  );
+};
+
+export default ClaudeChatModelNode;

package/client/src/components/ConditionalEdge.tsx

@@ -0,0 +1,189 @@
+/**
+ * ConditionalEdge - Custom React Flow edge with condition label display
+ *
+ * Renders edges with visual indicators for conditional branching:
+ * - Displays condition label as a badge on the edge
+ * - Different styling for conditional vs unconditional edges
+ * - Click-to-edit condition support
+ */
+import React, { useState, useCallback, memo } from 'react';
+import {
+  EdgeProps,
+  getSmoothStepPath,
+  EdgeLabelRenderer,
+  BaseEdge,
+} from 'reactflow';
+import { useAppTheme } from '../hooks/useAppTheme';
+import { ConditionalEdgeData, formatConditionLabel } from '../types/EdgeCondition';
+import EdgeConditionEditor from './EdgeConditionEditor';
+
+interface ConditionalEdgeProps extends EdgeProps<ConditionalEdgeData> {
+  /** Callback when condition is updated */
+  onConditionUpdate?: (
+    edgeId: string,
+    condition: ConditionalEdgeData['condition'],
+    label: string | undefined
+  ) => void;
+}
+
+const ConditionalEdge: React.FC<ConditionalEdgeProps> = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style = {},
+  markerEnd,
+  data,
+  selected,
+  onConditionUpdate,
+}) => {
+  const theme = useAppTheme();
+  const [isEditorOpen, setIsEditorOpen] = useState(false);
+
+  // Calculate edge path
+  const [edgePath, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    borderRadius: 10,
+  });
+
+  const hasCondition = !!data?.condition;
+  const displayLabel = data?.label || (hasCondition && data?.condition ? formatConditionLabel(data.condition) : null);
+
+  const handleLabelClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsEditorOpen(true);
+  }, []);
+
+  const handleEditorClose = useCallback(() => {
+    setIsEditorOpen(false);
+  }, []);
+
+  const handleConditionSave = useCallback(
+    (condition: ConditionalEdgeData['condition'], label: string | undefined) => {
+      if (onConditionUpdate) {
+        onConditionUpdate(id, condition, label);
+      }
+    },
+    [id, onConditionUpdate]
+  );
+
+  // Label badge style
+  const labelBadgeStyle: React.CSSProperties = {
+    position: 'absolute',
+    transform: 'translate(-50%, -50%)',
+    pointerEvents: 'all',
+    cursor: 'pointer',
+    padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
+    borderRadius: theme.borderRadius.sm,
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.medium,
+    fontFamily: 'system-ui, sans-serif',
+    backgroundColor: hasCondition
+      ? `${theme.dracula.cyan}20`
+      : theme.colors.backgroundPanel,
+    border: `1px solid ${hasCondition ? `${theme.dracula.cyan}60` : theme.colors.border}`,
+    color: hasCondition ? theme.dracula.cyan : theme.colors.textSecondary,
+    whiteSpace: 'nowrap',
+    maxWidth: '150px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    boxShadow: selected ? `0 0 6px ${theme.dracula.purple}` : 'none',
+    transition: theme.transitions.fast,
+  };
+
+  // Add condition button (shown when no condition)
+  const addButtonStyle: React.CSSProperties = {
+    position: 'absolute',
+    transform: 'translate(-50%, -50%)',
+    pointerEvents: 'all',
+    cursor: 'pointer',
+    width: '20px',
+    height: '20px',
+    borderRadius: '50%',
+    backgroundColor: theme.colors.backgroundPanel,
+    border: `1px dashed ${theme.colors.border}`,
+    color: theme.colors.textMuted,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '14px',
+    opacity: selected ? 1 : 0,
+    transition: theme.transitions.fast,
+  };
+
+  return (
+    <>
+      <BaseEdge
+        id={id}
+        path={edgePath}
+        markerEnd={markerEnd}
+        style={{
+          ...style,
+          stroke: hasCondition ? theme.dracula.cyan : undefined,
+          strokeWidth: hasCondition ? 2 : undefined,
+          strokeDasharray: hasCondition ? '5 3' : undefined,
+        }}
+      />
+
+      <EdgeLabelRenderer>
+        {/* Condition label or add button */}
+        {displayLabel ? (
+          <div
+            style={{
+              ...labelBadgeStyle,
+              left: labelX,
+              top: labelY,
+            }}
+            onClick={handleLabelClick}
+            title={`Click to edit condition: ${displayLabel}`}
+          >
+            <span style={{ marginRight: '4px' }}>
+              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M16 3h5v5"/>
+                <path d="M8 3H3v5"/>
+                <path d="M21 3l-7 7"/>
+                <path d="M3 3l7 7"/>
+                <path d="M3 21l7-7"/>
+                <path d="M21 21l-7-7"/>
+                <path d="M16 21h5v-5"/>
+                <path d="M8 21H3v-5"/>
+              </svg>
+            </span>
+            {displayLabel}
+          </div>
+        ) : (
+          <div
+            style={{
+              ...addButtonStyle,
+              left: labelX,
+              top: labelY,
+            }}
+            onClick={handleLabelClick}
+            title="Click to add condition"
+          >
+            +
+          </div>
+        )}
+      </EdgeLabelRenderer>
+
+      {/* Condition Editor Modal */}
+      <EdgeConditionEditor
+        isOpen={isEditorOpen}
+        onClose={handleEditorClose}
+        condition={data?.condition}
+        label={data?.label}
+        onSave={handleConditionSave}
+      />
+    </>
+  );
+};
+
+export default memo(ConditionalEdge);

package/client/src/components/CredentialsModal.tsx

@@ -0,0 +1,306 @@
+/**
+ * CredentialsModal - Modern categorized credentials management panel
+ * Uses Ant Design Collapse + List for compact, modern UI
+ */
+
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { Input, Button, message, Collapse, List, Tag, Space, Tooltip } from 'antd';
+import {
+  CheckCircleOutlined,
+  DeleteOutlined,
+  SafetyOutlined,
+  SearchOutlined,
+  EyeOutlined,
+  EyeInvisibleOutlined,
+} from '@ant-design/icons';
+import Modal from './ui/Modal';
+import { useApiKeys } from '../hooks/useApiKeys';
+import { useAppTheme } from '../hooks/useAppTheme';
+import {
+  OpenAIIcon, ClaudeIcon, GeminiIcon, GroqIcon, OpenRouterIcon, CerebrasIcon,
+} from './icons/AIProviderIcons';
+
+// ============================================================================
+// TYPES & DATA
+// ============================================================================
+
+interface CredentialItem {
+  id: string;
+  name: string;
+  placeholder: string;
+  color: string;
+  desc: string;
+  Icon?: React.FC<{ size?: number }>;
+}
+
+interface Category {
+  key: string;
+  label: string;
+  items: CredentialItem[];
+}
+
+const CATEGORIES: Category[] = [
+  {
+    key: 'ai',
+    label: 'AI Providers',
+    items: [
+      { id: 'openai', name: 'OpenAI', placeholder: 'sk-...', color: '#10a37f', desc: 'GPT-4o, GPT-4, GPT-3.5', Icon: OpenAIIcon },
+      { id: 'anthropic', name: 'Anthropic', placeholder: 'sk-ant-...', color: '#d97706', desc: 'Claude 3.5 Sonnet, Opus', Icon: ClaudeIcon },
+      { id: 'gemini', name: 'Gemini', placeholder: 'AIza...', color: '#4285f4', desc: 'Gemini 1.5 Pro, Flash', Icon: GeminiIcon },
+      { id: 'groq', name: 'Groq', placeholder: 'gsk_...', color: '#F55036', desc: 'Llama, Mixtral - Ultra-fast', Icon: GroqIcon },
+      { id: 'cerebras', name: 'Cerebras', placeholder: 'csk-...', color: '#FF6600', desc: 'Llama, Qwen - Ultra-fast', Icon: CerebrasIcon },
+      { id: 'openrouter', name: 'OpenRouter', placeholder: 'sk-or-...', color: '#6366f1', desc: 'Unified API - 100+ models', Icon: OpenRouterIcon },
+    ],
+  },
+  {
+    key: 'services',
+    label: 'Services',
+    items: [
+      { id: 'google_maps', name: 'Google Maps', placeholder: 'AIza...', color: '#34a853', desc: 'Geocoding, Places API' },
+      { id: 'android_remote', name: 'Android Remote', placeholder: 'your-api-key...', color: '#3ddc84', desc: 'WebSocket device control' },
+    ],
+  },
+];
+
+// ============================================================================
+// MAIN COMPONENT
+// ============================================================================
+
+interface Props {
+  visible: boolean;
+  onClose: () => void;
+}
+
+const CredentialsModal: React.FC<Props> = ({ visible, onClose }) => {
+  const theme = useAppTheme();
+  const { validateApiKey, saveApiKey, getStoredApiKey, hasStoredKey, removeApiKey, validateGoogleMapsKey } = useApiKeys();
+
+  const [validKeys, setValidKeys] = useState<Record<string, boolean>>({});
+  const [loading, setLoading] = useState<Record<string, boolean>>({});
+  const [models, setModels] = useState<Record<string, string[]>>({});
+  const [keys, setKeys] = useState<Record<string, string>>({});
+  const [expanded, setExpanded] = useState<string | null>(null);
+  const [search, setSearch] = useState('');
+  const [showKey, setShowKey] = useState<Record<string, boolean>>({});
+
+  // Load stored keys
+  const loadKeys = useCallback(async () => {
+    const allItems = CATEGORIES.flatMap(c => c.items);
+    const newKeys: Record<string, string> = {};
+    const newValid: Record<string, boolean> = {};
+
+    for (const item of allItems) {
+      if (await hasStoredKey(item.id)) {
+        const key = await getStoredApiKey(item.id);
+        if (key) {
+          newKeys[item.id] = key;
+          newValid[item.id] = true;
+        }
+      }
+    }
+    setKeys(newKeys);
+    setValidKeys(newValid);
+  }, [hasStoredKey, getStoredApiKey]);
+
+  useEffect(() => {
+    if (visible) {
+      loadKeys();
+      setExpanded(null);
+      setSearch('');
+    }
+  }, [visible, loadKeys]);
+
+  const handleValidate = async (id: string) => {
+    const key = keys[id];
+    if (!key?.trim()) return message.warning('Enter an API key first');
+
+    setLoading(l => ({ ...l, [id]: true }));
+    const result = id === 'google_maps'
+      ? await validateGoogleMapsKey(key)
+      : id === 'android_remote'
+        ? await saveApiKey(id, key)
+        : await validateApiKey(id, key);
+    setLoading(l => ({ ...l, [id]: false }));
+
+    if (result.isValid) {
+      setValidKeys(v => ({ ...v, [id]: true }));
+      if (result.models) setModels(m => ({ ...m, [id]: result.models! }));
+      message.success('Key saved and validated');
+    } else {
+      message.error(result.error || 'Invalid key');
+    }
+  };
+
+  const handleRemove = async (id: string) => {
+    await removeApiKey(id);
+    setKeys(k => ({ ...k, [id]: '' }));
+    setValidKeys(v => ({ ...v, [id]: false }));
+    setModels(m => ({ ...m, [id]: [] }));
+    message.success('Key removed');
+  };
+
+  // Filter by search
+  const filteredCategories = useMemo(() => {
+    if (!search.trim()) return CATEGORIES;
+    const q = search.toLowerCase();
+    return CATEGORIES.map(cat => ({
+      ...cat,
+      items: cat.items.filter(i => i.name.toLowerCase().includes(q) || i.desc.toLowerCase().includes(q)),
+    })).filter(cat => cat.items.length > 0);
+  }, [search]);
+
+  // Count configured per category
+  const getCount = (items: typeof CATEGORIES[0]['items']) =>
+    items.filter(i => validKeys[i.id]).length;
+
+  return (
+    <Modal isOpen={visible} onClose={onClose} title="API Credentials" maxWidth="95vw" maxHeight="95vh">
+      <div style={{ padding: 20 }}>
+        {/* Info banner */}
+        <div style={{
+          display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16,
+          padding: 12, borderRadius: 8,
+          backgroundColor: `${theme.dracula.green}10`,
+          border: `1px solid ${theme.dracula.green}30`,
+        }}>
+          <SafetyOutlined style={{ color: theme.dracula.green }} />
+          <span style={{ fontSize: 13, color: theme.colors.textSecondary }}>
+            Keys are stored securely and used automatically by AI nodes.
+          </span>
+        </div>
+
+        {/* Search */}
+        <Input
+          placeholder="Search credentials..."
+          prefix={<SearchOutlined style={{ color: theme.colors.textMuted }} />}
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          allowClear
+          style={{ marginBottom: 16 }}
+        />
+
+        {/* Categories */}
+        <Collapse
+          defaultActiveKey={['ai', 'services']}
+          ghost
+          style={{ background: 'transparent' }}
+          items={filteredCategories.map(cat => ({
+            key: cat.key,
+            label: (
+              <Space>
+                <span style={{ fontWeight: 600, textTransform: 'uppercase', fontSize: 11, letterSpacing: '0.05em' }}>
+                  {cat.label}
+                </span>
+                <Tag color={getCount(cat.items) === cat.items.length ? 'success' : 'default'}>
+                  {getCount(cat.items)}/{cat.items.length}
+                </Tag>
+              </Space>
+            ),
+            children: (
+              <List
+                dataSource={cat.items}
+                renderItem={item => {
+                  const isExpanded = expanded === item.id;
+                  const isValid = validKeys[item.id];
+                  const Icon = item.Icon;
+
+                  return (
+                    <List.Item
+                      style={{
+                        cursor: 'pointer',
+                        padding: '12px 8px',
+                        borderRadius: 8,
+                        marginBottom: 4,
+                        backgroundColor: isExpanded ? theme.colors.backgroundAlt : 'transparent',
+                        flexDirection: 'column',
+                        alignItems: 'stretch',
+                      }}
+                      onClick={() => setExpanded(isExpanded ? null : item.id)}
+                    >
+                      {/* Row header */}
+                      <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+                        <div style={{
+                          width: 32, height: 32, borderRadius: 6, marginRight: 12,
+                          backgroundColor: `${item.color}15`,
+                          display: 'flex', alignItems: 'center', justifyContent: 'center',
+                        }}>
+                          {Icon ? <Icon size={18} /> : <span>{item.id === 'google_maps' ? '📍' : '📱'}</span>}
+                        </div>
+                        <div style={{ flex: 1 }}>
+                          <div style={{ fontWeight: 500, fontSize: 14 }}>{item.name}</div>
+                          <div style={{ fontSize: 12, color: theme.colors.textMuted }}>{item.desc}</div>
+                        </div>
+                        {isValid && (
+                          <Tag icon={<CheckCircleOutlined />} color="success">Valid</Tag>
+                        )}
+                      </div>
+
+                      {/* Expanded content */}
+                      {isExpanded && (
+                        <div style={{ marginTop: 12, paddingTop: 12, borderTop: `1px solid ${theme.colors.border}` }}
+                          onClick={e => e.stopPropagation()}
+                        >
+                          <Space.Compact style={{ width: '100%', marginBottom: 8 }}>
+                            <Input
+                              type={showKey[item.id] ? 'text' : 'password'}
+                              value={keys[item.id] || ''}
+                              onChange={e => {
+                                setKeys(k => ({ ...k, [item.id]: e.target.value }));
+                                setValidKeys(v => ({ ...v, [item.id]: false }));
+                              }}
+                              placeholder={item.placeholder}
+                              style={{ fontFamily: 'monospace', fontSize: 13 }}
+                              suffix={
+                                <Tooltip title={showKey[item.id] ? 'Hide' : 'Show'}>
+                                  <span
+                                    onClick={() => setShowKey(s => ({ ...s, [item.id]: !s[item.id] }))}
+                                    style={{ cursor: 'pointer', color: theme.colors.textMuted }}
+                                  >
+                                    {showKey[item.id] ? <EyeInvisibleOutlined /> : <EyeOutlined />}
+                                  </span>
+                                </Tooltip>
+                              }
+                            />
+                            <Button
+                              loading={loading[item.id]}
+                              onClick={() => handleValidate(item.id)}
+                              type={isValid ? 'primary' : 'default'}
+                              style={isValid ? { backgroundColor: theme.dracula.green, borderColor: theme.dracula.green } : {}}
+                            >
+                              {isValid ? 'Valid' : 'Validate'}
+                            </Button>
+                          </Space.Compact>
+
+                          {models[item.id]?.length > 0 && (
+                            <div style={{ fontSize: 12, color: theme.colors.textMuted, marginBottom: 8 }}>
+                              Models: {models[item.id].slice(0, 4).join(', ')}{models[item.id].length > 4 && ` +${models[item.id].length - 4}`}
+                            </div>
+                          )}
+
+                          {isValid && (
+                            <Button size="small" danger icon={<DeleteOutlined />} onClick={() => handleRemove(item.id)}>
+                              Remove
+                            </Button>
+                          )}
+                        </div>
+                      )}
+                    </List.Item>
+                  );
+                }}
+              />
+            ),
+          }))}
+        />
+
+        {/* Footer */}
+        <div style={{ marginTop: 20, textAlign: 'right' }}>
+          <Button type="primary" onClick={onClose} style={{ backgroundColor: theme.dracula.green, borderColor: theme.dracula.green }}>
+            Done
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default CredentialsModal;