feat(providers): implement secure API key storage and provider management

Add complete provider configuration system with the following features:

- Secure API key storage using Electron's safeStorage encryption
- Provider CRUD operations with IPC handlers
- Lazy-loaded electron-store for ESM compatibility
- Provider settings UI component with add/edit/delete functionality
- API key masking for display (shows first/last 4 chars)
- Basic API key format validation per provider type
- Default provider selection
- Provider enable/disable toggle

New files:
- electron/utils/secure-storage.ts: Encrypted key storage and provider config
- src/stores/providers.ts: Zustand store for provider state
- src/components/settings/ProvidersSettings.tsx: Provider management UI

src/components/settings/ProvidersSettings.tsx

@@ -0,0 +1,441 @@
+/**
+ * Providers Settings Component
+ * Manage AI provider configurations and API keys
+ */
+import { useState, useEffect } from 'react';
+import { 
+  Plus, 
+  Trash2, 
+  Edit, 
+  Eye, 
+  EyeOff, 
+  Check, 
+  X, 
+  Loader2,
+  Star,
+  Key,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import { Switch } from '@/components/ui/switch';
+import { useProviderStore, type ProviderWithKeyInfo } from '@/stores/providers';
+import { cn } from '@/lib/utils';
+import { toast } from 'sonner';
+
+// Provider type definitions
+const providerTypes = [
+  { id: 'anthropic', name: 'Anthropic', icon: '🤖', placeholder: 'sk-ant-api03-...' },
+  { id: 'openai', name: 'OpenAI', icon: '💚', placeholder: 'sk-proj-...' },
+  { id: 'google', name: 'Google', icon: '🔷', placeholder: 'AIza...' },
+  { id: 'ollama', name: 'Ollama', icon: '🦙', placeholder: 'Not required' },
+  { id: 'custom', name: 'Custom', icon: '⚙️', placeholder: 'API key...' },
+];
+
+export function ProvidersSettings() {
+  const { 
+    providers, 
+    defaultProviderId, 
+    loading, 
+    fetchProviders, 
+    addProvider,
+    updateProvider,
+    deleteProvider,
+    setApiKey,
+    setDefaultProvider,
+    validateApiKey,
+  } = useProviderStore();
+  
+  const [showAddDialog, setShowAddDialog] = useState(false);
+  const [editingProvider, setEditingProvider] = useState<string | null>(null);
+  
+  // Fetch providers on mount
+  useEffect(() => {
+    fetchProviders();
+  }, [fetchProviders]);
+  
+  const handleAddProvider = async (type: string, name: string, apiKey: string) => {
+    try {
+      await addProvider({
+        id: `${type}-${Date.now()}`,
+        type: type as 'anthropic' | 'openai' | 'google' | 'ollama' | 'custom',
+        name,
+        enabled: true,
+      }, apiKey || undefined);
+      
+      setShowAddDialog(false);
+      toast.success('Provider added successfully');
+    } catch (error) {
+      toast.error(`Failed to add provider: ${error}`);
+    }
+  };
+  
+  const handleDeleteProvider = async (providerId: string) => {
+    try {
+      await deleteProvider(providerId);
+      toast.success('Provider deleted');
+    } catch (error) {
+      toast.error(`Failed to delete provider: ${error}`);
+    }
+  };
+  
+  const handleSetDefault = async (providerId: string) => {
+    try {
+      await setDefaultProvider(providerId);
+      toast.success('Default provider updated');
+    } catch (error) {
+      toast.error(`Failed to set default: ${error}`);
+    }
+  };
+  
+  const handleToggleEnabled = async (provider: ProviderWithKeyInfo) => {
+    try {
+      await updateProvider(provider.id, { enabled: !provider.enabled });
+    } catch (error) {
+      toast.error(`Failed to update provider: ${error}`);
+    }
+  };
+  
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-medium">AI Providers</h3>
+          <p className="text-sm text-muted-foreground">
+            Configure your AI model providers and API keys
+          </p>
+        </div>
+        <Button onClick={() => setShowAddDialog(true)}>
+          <Plus className="h-4 w-4 mr-2" />
+          Add Provider
+        </Button>
+      </div>
+      
+      {loading ? (
+        <div className="flex items-center justify-center py-8">
+          <Loader2 className="h-6 w-6 animate-spin" />
+        </div>
+      ) : providers.length === 0 ? (
+        <Card>
+          <CardContent className="flex flex-col items-center justify-center py-12">
+            <Key className="h-12 w-12 text-muted-foreground mb-4" />
+            <h3 className="text-lg font-medium mb-2">No providers configured</h3>
+            <p className="text-muted-foreground text-center mb-4">
+              Add an AI provider to start using ClawX
+            </p>
+            <Button onClick={() => setShowAddDialog(true)}>
+              <Plus className="h-4 w-4 mr-2" />
+              Add Your First Provider
+            </Button>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="space-y-4">
+          {providers.map((provider) => (
+            <ProviderCard
+              key={provider.id}
+              provider={provider}
+              isDefault={provider.id === defaultProviderId}
+              isEditing={editingProvider === provider.id}
+              onEdit={() => setEditingProvider(provider.id)}
+              onCancelEdit={() => setEditingProvider(null)}
+              onDelete={() => handleDeleteProvider(provider.id)}
+              onSetDefault={() => handleSetDefault(provider.id)}
+              onToggleEnabled={() => handleToggleEnabled(provider)}
+              onUpdateKey={async (key) => {
+                await setApiKey(provider.id, key);
+                setEditingProvider(null);
+              }}
+              onValidateKey={(key) => validateApiKey(provider.id, key)}
+            />
+          ))}
+        </div>
+      )}
+      
+      {/* Add Provider Dialog */}
+      {showAddDialog && (
+        <AddProviderDialog
+          onClose={() => setShowAddDialog(false)}
+          onAdd={handleAddProvider}
+        />
+      )}
+    </div>
+  );
+}
+
+interface ProviderCardProps {
+  provider: ProviderWithKeyInfo;
+  isDefault: boolean;
+  isEditing: boolean;
+  onEdit: () => void;
+  onCancelEdit: () => void;
+  onDelete: () => void;
+  onSetDefault: () => void;
+  onToggleEnabled: () => void;
+  onUpdateKey: (key: string) => Promise<void>;
+  onValidateKey: (key: string) => Promise<{ valid: boolean; error?: string }>;
+}
+
+function ProviderCard({
+  provider,
+  isDefault,
+  isEditing,
+  onEdit,
+  onCancelEdit,
+  onDelete,
+  onSetDefault,
+  onToggleEnabled,
+  onUpdateKey,
+  onValidateKey,
+}: ProviderCardProps) {
+  const [newKey, setNewKey] = useState('');
+  const [showKey, setShowKey] = useState(false);
+  const [validating, setValidating] = useState(false);
+  const [saving, setSaving] = useState(false);
+  
+  const typeInfo = providerTypes.find((t) => t.id === provider.type);
+  
+  const handleSaveKey = async () => {
+    if (!newKey) return;
+    
+    setValidating(true);
+    const result = await onValidateKey(newKey);
+    setValidating(false);
+    
+    if (!result.valid) {
+      toast.error(result.error || 'Invalid API key');
+      return;
+    }
+    
+    setSaving(true);
+    try {
+      await onUpdateKey(newKey);
+      setNewKey('');
+      toast.success('API key updated');
+    } catch (error) {
+      toast.error(`Failed to save key: ${error}`);
+    } finally {
+      setSaving(false);
+    }
+  };
+  
+  return (
+    <Card className={cn(isDefault && 'ring-2 ring-primary')}>
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between">
+          <div className="flex items-center gap-3">
+            <span className="text-2xl">{typeInfo?.icon || '⚙️'}</span>
+            <div>
+              <div className="flex items-center gap-2">
+                <CardTitle className="text-lg">{provider.name}</CardTitle>
+                {isDefault && (
+                  <Badge variant="default" className="text-xs">Default</Badge>
+                )}
+              </div>
+              <CardDescription className="capitalize">{provider.type}</CardDescription>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <Switch
+              checked={provider.enabled}
+              onCheckedChange={onToggleEnabled}
+            />
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {isEditing ? (
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label>API Key</Label>
+              <div className="flex gap-2">
+                <div className="relative flex-1">
+                  <Input
+                    type={showKey ? 'text' : 'password'}
+                    placeholder={typeInfo?.placeholder}
+                    value={newKey}
+                    onChange={(e) => setNewKey(e.target.value)}
+                    className="pr-10"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowKey(!showKey)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                  >
+                    {showKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                  </button>
+                </div>
+                <Button 
+                  variant="outline" 
+                  onClick={handleSaveKey}
+                  disabled={!newKey || validating || saving}
+                >
+                  {validating || saving ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <Check className="h-4 w-4" />
+                  )}
+                </Button>
+                <Button variant="ghost" onClick={onCancelEdit}>
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Key className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-mono">
+                {provider.hasKey ? provider.keyMasked : 'No API key set'}
+              </span>
+              {provider.hasKey && (
+                <Badge variant="secondary" className="text-xs">Configured</Badge>
+              )}
+            </div>
+            <div className="flex gap-1">
+              {!isDefault && (
+                <Button variant="ghost" size="icon" onClick={onSetDefault} title="Set as default">
+                  <Star className="h-4 w-4" />
+                </Button>
+              )}
+              <Button variant="ghost" size="icon" onClick={onEdit} title="Edit API key">
+                <Edit className="h-4 w-4" />
+              </Button>
+              <Button variant="ghost" size="icon" onClick={onDelete} title="Delete provider">
+                <Trash2 className="h-4 w-4 text-destructive" />
+              </Button>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+interface AddProviderDialogProps {
+  onClose: () => void;
+  onAdd: (type: string, name: string, apiKey: string) => Promise<void>;
+}
+
+function AddProviderDialog({ onClose, onAdd }: AddProviderDialogProps) {
+  const [selectedType, setSelectedType] = useState<string | null>(null);
+  const [name, setName] = useState('');
+  const [apiKey, setApiKey] = useState('');
+  const [showKey, setShowKey] = useState(false);
+  const [saving, setSaving] = useState(false);
+  
+  const typeInfo = providerTypes.find((t) => t.id === selectedType);
+  
+  const handleAdd = async () => {
+    if (!selectedType) return;
+    
+    setSaving(true);
+    try {
+      await onAdd(selectedType, name || typeInfo?.name || selectedType, apiKey);
+    } finally {
+      setSaving(false);
+    }
+  };
+  
+  return (
+    <div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Add AI Provider</CardTitle>
+          <CardDescription>
+            Configure a new AI model provider
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {!selectedType ? (
+            <div className="grid grid-cols-2 gap-3">
+              {providerTypes.map((type) => (
+                <button
+                  key={type.id}
+                  onClick={() => {
+                    setSelectedType(type.id);
+                    setName(type.name);
+                  }}
+                  className="p-4 rounded-lg border hover:bg-accent transition-colors text-center"
+                >
+                  <span className="text-2xl">{type.icon}</span>
+                  <p className="font-medium mt-2">{type.name}</p>
+                </button>
+              ))}
+            </div>
+          ) : (
+            <div className="space-y-4">
+              <div className="flex items-center gap-3 p-3 rounded-lg bg-muted">
+                <span className="text-2xl">{typeInfo?.icon}</span>
+                <div>
+                  <p className="font-medium">{typeInfo?.name}</p>
+                  <button 
+                    onClick={() => setSelectedType(null)}
+                    className="text-sm text-muted-foreground hover:text-foreground"
+                  >
+                    Change provider
+                  </button>
+                </div>
+              </div>
+              
+              <div className="space-y-2">
+                <Label htmlFor="name">Display Name</Label>
+                <Input
+                  id="name"
+                  placeholder={typeInfo?.name}
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                />
+              </div>
+              
+              <div className="space-y-2">
+                <Label htmlFor="apiKey">API Key</Label>
+                <div className="relative">
+                  <Input
+                    id="apiKey"
+                    type={showKey ? 'text' : 'password'}
+                    placeholder={typeInfo?.placeholder}
+                    value={apiKey}
+                    onChange={(e) => setApiKey(e.target.value)}
+                    className="pr-10"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowKey(!showKey)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                  >
+                    {showKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                  </button>
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  Your API key will be securely encrypted and stored locally.
+                </p>
+              </div>
+            </div>
+          )}
+          
+          <Separator />
+          
+          <div className="flex justify-end gap-2">
+            <Button variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button 
+              onClick={handleAdd} 
+              disabled={!selectedType || saving}
+            >
+              {saving ? (
+                <Loader2 className="h-4 w-4 animate-spin mr-2" />
+              ) : null}
+              Add Provider
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/pages/Settings/index.tsx

@@ -11,6 +11,7 @@ import {
   Loader2,
   Terminal,
   ExternalLink,
+  Key,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@@ -20,6 +21,7 @@ import { Separator } from '@/components/ui/separator';
 import { Badge } from '@/components/ui/badge';
 import { useSettingsStore } from '@/stores/settings';
 import { useGatewayStore } from '@/stores/gateway';
+import { ProvidersSettings } from '@/components/settings/ProvidersSettings';
 
 export function Settings() {
   const {
@@ -109,6 +111,20 @@ export function Settings() {
         </CardContent>
       </Card>
       
+      {/* AI Providers */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Key className="h-5 w-5" />
+            AI Providers
+          </CardTitle>
+          <CardDescription>Configure your AI model providers and API keys</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ProvidersSettings />
+        </CardContent>
+      </Card>
+      
       {/* Gateway */}
       <Card>
         <CardHeader>

src/stores/providers.ts

@@ -0,0 +1,198 @@
+/**
+ * Provider State Store
+ * Manages AI provider configurations
+ */
+import { create } from 'zustand';
+
+/**
+ * Provider configuration
+ */
+export interface ProviderConfig {
+  id: string;
+  name: string;
+  type: 'anthropic' | 'openai' | 'google' | 'ollama' | 'custom';
+  baseUrl?: string;
+  model?: string;
+  enabled: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+/**
+ * Provider with key info (for display)
+ */
+export interface ProviderWithKeyInfo extends ProviderConfig {
+  hasKey: boolean;
+  keyMasked: string | null;
+}
+
+interface ProviderState {
+  providers: ProviderWithKeyInfo[];
+  defaultProviderId: string | null;
+  loading: boolean;
+  error: string | null;
+  
+  // Actions
+  fetchProviders: () => Promise<void>;
+  addProvider: (config: Omit<ProviderConfig, 'createdAt' | 'updatedAt'>, apiKey?: string) => Promise<void>;
+  updateProvider: (providerId: string, updates: Partial<ProviderConfig>, apiKey?: string) => Promise<void>;
+  deleteProvider: (providerId: string) => Promise<void>;
+  setApiKey: (providerId: string, apiKey: string) => Promise<void>;
+  deleteApiKey: (providerId: string) => Promise<void>;
+  setDefaultProvider: (providerId: string) => Promise<void>;
+  validateApiKey: (providerId: string, apiKey: string) => Promise<{ valid: boolean; error?: string }>;
+  getApiKey: (providerId: string) => Promise<string | null>;
+}
+
+export const useProviderStore = create<ProviderState>((set, get) => ({
+  providers: [],
+  defaultProviderId: null,
+  loading: false,
+  error: null,
+  
+  fetchProviders: async () => {
+    set({ loading: true, error: null });
+    
+    try {
+      const providers = await window.electron.ipcRenderer.invoke('provider:list') as ProviderWithKeyInfo[];
+      const defaultId = await window.electron.ipcRenderer.invoke('provider:getDefault') as string | null;
+      
+      set({ 
+        providers, 
+        defaultProviderId: defaultId,
+        loading: false 
+      });
+    } catch (error) {
+      set({ error: String(error), loading: false });
+    }
+  },
+  
+  addProvider: async (config, apiKey) => {
+    try {
+      const fullConfig: ProviderConfig = {
+        ...config,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+      };
+      
+      const result = await window.electron.ipcRenderer.invoke('provider:save', fullConfig, apiKey) as { success: boolean; error?: string };
+      
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to save provider');
+      }
+      
+      // Refresh the list
+      await get().fetchProviders();
+    } catch (error) {
+      console.error('Failed to add provider:', error);
+      throw error;
+    }
+  },
+  
+  updateProvider: async (providerId, updates, apiKey) => {
+    try {
+      const existing = get().providers.find((p) => p.id === providerId);
+      if (!existing) {
+        throw new Error('Provider not found');
+      }
+      
+      const updatedConfig: ProviderConfig = {
+        ...existing,
+        ...updates,
+        updatedAt: new Date().toISOString(),
+      };
+      
+      const result = await window.electron.ipcRenderer.invoke('provider:save', updatedConfig, apiKey) as { success: boolean; error?: string };
+      
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to update provider');
+      }
+      
+      // Refresh the list
+      await get().fetchProviders();
+    } catch (error) {
+      console.error('Failed to update provider:', error);
+      throw error;
+    }
+  },
+  
+  deleteProvider: async (providerId) => {
+    try {
+      const result = await window.electron.ipcRenderer.invoke('provider:delete', providerId) as { success: boolean; error?: string };
+      
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to delete provider');
+      }
+      
+      // Refresh the list
+      await get().fetchProviders();
+    } catch (error) {
+      console.error('Failed to delete provider:', error);
+      throw error;
+    }
+  },
+  
+  setApiKey: async (providerId, apiKey) => {
+    try {
+      const result = await window.electron.ipcRenderer.invoke('provider:setApiKey', providerId, apiKey) as { success: boolean; error?: string };
+      
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to set API key');
+      }
+      
+      // Refresh the list
+      await get().fetchProviders();
+    } catch (error) {
+      console.error('Failed to set API key:', error);
+      throw error;
+    }
+  },
+  
+  deleteApiKey: async (providerId) => {
+    try {
+      const result = await window.electron.ipcRenderer.invoke('provider:deleteApiKey', providerId) as { success: boolean; error?: string };
+      
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to delete API key');
+      }
+      
+      // Refresh the list
+      await get().fetchProviders();
+    } catch (error) {
+      console.error('Failed to delete API key:', error);
+      throw error;
+    }
+  },
+  
+  setDefaultProvider: async (providerId) => {
+    try {
+      const result = await window.electron.ipcRenderer.invoke('provider:setDefault', providerId) as { success: boolean; error?: string };
+      
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to set default provider');
+      }
+      
+      set({ defaultProviderId: providerId });
+    } catch (error) {
+      console.error('Failed to set default provider:', error);
+      throw error;
+    }
+  },
+  
+  validateApiKey: async (providerId, apiKey) => {
+    try {
+      const result = await window.electron.ipcRenderer.invoke('provider:validateKey', providerId, apiKey) as { valid: boolean; error?: string };
+      return result;
+    } catch (error) {
+      return { valid: false, error: String(error) };
+    }
+  },
+  
+  getApiKey: async (providerId) => {
+    try {
+      return await window.electron.ipcRenderer.invoke('provider:getApiKey', providerId) as string | null;
+    } catch {
+      return null;
+    }
+  },
+}));