@full-self-developing/fsd 1.0.0

package/client/src/components/Sidebar.jsx

@@ -0,0 +1,318 @@
+import React, { useState } from 'react';
+import { 
+    FolderOpen, 
+    PanelLeftClose,
+    PanelLeftOpen,
+    Plus,
+    X,
+    MessageSquare,
+    RefreshCcw,
+    ChevronDown,
+    ChevronRight,
+    Settings,
+    Sparkles,
+    Trash2,
+    RotateCcw
+} from 'lucide-react';
+import { useSettings } from '../context/SettingsContext';
+import ConfirmationModal from './ConfirmationModal';
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export default function Sidebar({
+    isSidebarOpen,
+    toggleSidebar,
+    activeTab,
+    onSwitchTab,
+    onNewSession,
+    onOpenProject,
+    projectPath,
+    onCloseProject,
+    engine,
+    setEngine,
+    models,
+    sessions,
+    trashSessions = [],
+    isLoadingSessions,
+    activeSessionId,
+    onSelectSession,
+    onDeleteSession,
+    onRestoreSession,
+    rpmActive,
+    rpdActive,
+    serverConnected,
+    proxyEnabled,
+    mcpToolsCount
+}) {
+    const { settings } = useSettings();
+    const [isHistoryOpen, setIsHistoryOpen] = useState(true);
+    const [isTrashOpen, setIsTrashOpen] = useState(false);
+    const [confirmDeleteId, setConfirmDeleteId] = useState(null);
+    
+    const displayModel = settings?.ai?.model || 'AI Model';
+
+    if (!isSidebarOpen) {
+        return (
+            <div className="flex h-full w-16 shrink-0 flex-col items-center border-r border-gray-200 bg-[#f9f8f6] pt-5 dark:bg-zinc-900 dark:border-white/10 transition-all">
+                <button 
+                    type="button"
+                    className="flex h-8 w-8 items-center justify-center rounded-md text-gray-500 hover:bg-[#ecece5] hover:text-gray-900 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-white" 
+                    onClick={toggleSidebar} 
+                    title="Expand Sidebar"
+                    aria-label="Expand Sidebar"
+                >
+                    <PanelLeftOpen className="size-5" />
+                </button>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex h-full w-72 shrink-0 flex-col transition-all border-r border-gray-200 bg-[#f9f8f6] dark:bg-zinc-900 dark:border-white/10">
+            {/* TOP FIXED SECTION */}
+            <div className="flex shrink-0 flex-col px-3 pb-2">
+                <div className="flex h-14 shrink-0 items-center justify-between px-2 mt-1">
+                    <div className="flex items-center gap-x-2 text-gray-900 dark:text-white">
+                        <span className="text-[22px] font-serif tracking-tight font-medium">FSD</span>
+                    </div>
+                    <div className="flex items-center gap-x-1">
+                        <button 
+                            type="button"
+                            className="flex h-8 w-8 items-center justify-center rounded-md text-gray-500 hover:bg-[#ecece5] hover:text-gray-900 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-white" 
+                            onClick={toggleSidebar} 
+                            title="Collapse Sidebar"
+                            aria-label="Collapse Sidebar"
+                        >
+                            <PanelLeftClose className="size-5" />
+                        </button>
+                    </div>
+                </div>
+
+                <ul role="list" className="flex flex-col gap-y-0.5 mt-2">
+                    <li className="relative group">
+                        <button 
+                            type="button"
+                            className={classNames(
+                                activeTab === 'chat' ? 'bg-[#ecece5] text-gray-900 dark:bg-white/10 dark:text-white pr-8' : 'text-gray-800 hover:bg-[#ecece5] dark:text-gray-300 dark:hover:bg-white/10 dark:hover:text-white',
+                                'flex w-full items-center gap-x-2.5 rounded-md py-1.5 px-2 text-[14px] font-normal text-left'
+                            )}
+                            onClick={() => onSwitchTab('chat')}
+                        >
+                            <MessageSquare className={classNames(
+                                activeTab === 'chat' ? 'text-gray-900 dark:text-white' : 'text-gray-600 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white',
+                                'size-[18px] shrink-0'
+                            )} />
+                            Chat
+                        </button>
+                        {activeTab === 'chat' && (
+                            <button 
+                                type="button"
+                                aria-label="New Chat"
+                                title="New Chat"
+                                className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 hover:bg-black/5 dark:hover:bg-white/20 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white cursor-pointer z-10"
+                                onClick={(e) => { e.stopPropagation(); onNewSession(); }}
+                            >
+                                <Plus className="size-[16px]" />
+                            </button>
+                        )}
+                    </li>
+                    <li>
+                        <button 
+                            type="button"
+                            className={classNames(
+                                activeTab === 'loop' ? 'bg-[#ecece5] text-gray-900 dark:bg-white/10 dark:text-white' : 'text-gray-800 hover:bg-[#ecece5] dark:text-gray-300 dark:hover:bg-white/10 dark:hover:text-white',
+                                'group flex w-full items-center gap-x-2.5 rounded-md py-1.5 px-2 text-[14px] font-normal'
+                            )}
+                            onClick={() => onSwitchTab('loop')}
+                        >
+                            <RefreshCcw className={classNames(
+                                activeTab === 'loop' ? 'text-gray-900 dark:text-white' : 'text-gray-600 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white',
+                                'size-[18px] shrink-0'
+                            )} />
+                            FSD
+                        </button>
+                    </li>
+                </ul>
+            </div>
+
+            {/* MIDDLE SCROLLABLE SECTION (History) */}
+            <div className="flex min-h-0 flex-1 flex-col px-3 overflow-y-auto">
+                {activeTab !== 'loop' && (
+                    <div className="flex flex-col flex-1">
+                        <button 
+                            type="button"
+                            className="flex items-center gap-x-1 text-[11px] font-medium text-gray-500 dark:text-gray-400 px-2 py-1 mb-1 hover:text-gray-700 dark:hover:text-gray-200 text-left w-full"
+                            onClick={() => setIsHistoryOpen(!isHistoryOpen)}
+                            aria-label="Toggle chat history list"
+                        >
+                            {isHistoryOpen ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />}
+                            History
+                        </button>
+                        
+                        {isHistoryOpen && (
+                            <ul role="list" className="flex-1 space-y-0.5 pb-4">
+                                {isLoadingSessions ? (
+                                    <div className="space-y-3.5 px-2 animate-pulse mt-2">
+                                        {[1, 2, 3].map(n => (
+                                            <div key={n} className="h-4.5 bg-gray-200 dark:bg-zinc-800/60 rounded w-11/12"></div>
+                                        ))}
+                                    </div>
+                                ) : sessions.length === 0 ? (
+                                    <li className="px-2 pt-2 text-center text-[13px] italic text-gray-400 dark:text-gray-500">No active sessions</li>
+                                ) : (
+                                    sessions.map(s => {
+                                        const isCurrent = activeSessionId === s.id;
+                                        return (
+                                            <li key={s.id} className="relative group">
+                                                <button
+                                                    type="button"
+                                                    className={classNames(
+                                                        isCurrent ? 'bg-[#ecece5] text-gray-900 dark:bg-white/10 dark:text-white' : 'text-gray-800 hover:bg-[#ecece5] dark:text-gray-300 dark:hover:bg-white/10 dark:hover:text-white',
+                                                        'flex w-full items-center justify-between gap-x-2 rounded-md py-1.5 px-2 text-[14px] font-normal transition-colors text-left pr-8'
+                                                    )}
+                                                    onClick={() => onSelectSession(s.id)}
+                                                >
+                                                    <span className="truncate">{s.title}</span>
+                                                </button>
+                                                <button 
+                                                    type="button"
+                                                    aria-label={`Delete chat session ${s.title}`}
+                                                    className={classNames(
+                                                        isCurrent ? 'block' : 'hidden group-hover:block',
+                                                        'absolute right-1 top-1/2 -translate-y-1/2 rounded p-1 hover:bg-black/5 dark:hover:bg-white/20 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white cursor-pointer z-10'
+                                                    )}
+                                                    onClick={(e) => { e.stopPropagation(); setConfirmDeleteId(s.id); }}
+                                                >
+                                                    <X className="size-3.5" />
+                                                </button>
+                                            </li>
+                                        );
+                                    })
+                                )}
+                            </ul>
+                        )}
+                        
+                        {/* TRASH SECTION */}
+                        <div className="mt-4 border-t border-gray-200 dark:border-white/5 pt-3">
+                            <button 
+                                type="button"
+                                className="flex items-center gap-x-1 text-[11px] font-medium text-gray-500 dark:text-gray-400 px-2 py-1 mb-1 hover:text-gray-700 dark:hover:text-gray-200 text-left w-full cursor-pointer"
+                                onClick={() => setIsTrashOpen(!isTrashOpen)}
+                                aria-label="Toggle trash sessions list"
+                            >
+                                {isTrashOpen ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />}
+                                <Trash2 className="size-3 mr-1" /> Trash ({trashSessions.length})
+                            </button>
+                            
+                            {isTrashOpen && (
+                                <ul role="list" className="space-y-0.5 pb-2">
+                                    {trashSessions.length === 0 ? (
+                                        <li className="px-2 pt-1 text-center text-[12px] italic text-gray-405 dark:text-gray-500">Trash is empty</li>
+                                    ) : (
+                                        trashSessions.map(s => (
+                                            <li key={s.id} className="relative group">
+                                                <div className="flex w-full items-center justify-between gap-x-2 rounded-md py-1.5 px-2 text-[13px] text-gray-500 dark:text-gray-400 text-left pr-8 select-none">
+                                                    <span className="truncate" title={s.title}>{s.title}</span>
+                                                </div>
+                                                <button 
+                                                    type="button"
+                                                    aria-label={`Restore chat session ${s.title}`}
+                                                    title="Restore Session"
+                                                    className="absolute right-1 top-1/2 -translate-y-1/2 rounded p-1 hover:bg-black/5 dark:hover:bg-white/20 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white cursor-pointer z-10"
+                                                    onClick={(e) => { e.stopPropagation(); onRestoreSession(s.id); }}
+                                                >
+                                                    <RotateCcw className="size-3.5" />
+                                                </button>
+                                            </li>
+                                        ))
+                                    )}
+                                </ul>
+                            )}
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            {/* BOTTOM FIXED SECTION */}
+            <div className="flex shrink-0 flex-col px-3 pt-4 pb-4 border-t border-gray-200 dark:border-white/10 bg-[#f9f8f6] dark:bg-zinc-900">
+                <ul role="list" className="flex flex-col gap-y-0.5">
+                    <li className="relative group">
+                        <button 
+                            type="button"
+                            className={classNames(
+                                projectPath ? 'bg-[#ecece5] text-gray-900 dark:bg-white/10 dark:text-white pr-8' : 'text-gray-800 hover:bg-[#ecece5] dark:text-gray-300 dark:hover:bg-white/10 dark:hover:text-white',
+                                'flex w-full items-center gap-x-2.5 rounded-md py-1.5 px-2 text-[14px] font-normal text-left'
+                            )}
+                            onClick={onOpenProject}
+                        >
+                            <FolderOpen aria-hidden="true" className={classNames(
+                                projectPath ? 'text-gray-900 dark:text-white' : 'text-gray-600 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white',
+                                'size-[18px] shrink-0'
+                            )} />
+                            <span className="truncate flex-1">
+                                {projectPath ? projectPath : 'Open Project'}
+                            </span>
+                        </button>
+                        {projectPath && (
+                            <button 
+                                type="button"
+                                aria-label="Close project"
+                                className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 hover:bg-black/5 dark:hover:bg-white/20 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white cursor-pointer z-10"
+                                onClick={(e) => { e.stopPropagation(); onCloseProject(); }}
+                            >
+                                <X className="size-4 shrink-0" />
+                            </button>
+                        )}
+                    </li>
+                    
+                    <li>
+                        <button 
+                            type="button"
+                            className="group flex w-full items-center gap-x-2.5 rounded-md py-1.5 px-2 text-[14px] font-normal text-gray-800 hover:bg-[#ecece5] dark:text-gray-300 dark:hover:bg-white/10 dark:hover:text-white transition-colors"
+                            onClick={() => onSwitchTab('settings', 'ai')}
+                        >
+                            <Sparkles aria-hidden="true" className="size-[18px] shrink-0 text-gray-600 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
+                            <span className="truncate flex-1 text-left" title={displayModel}>
+                                {displayModel}
+                            </span>
+                        </button>
+                    </li>
+
+                    <li>
+                        <button 
+                            type="button"
+                            className={classNames(
+                                activeTab === 'settings' ? 'bg-[#ecece5] text-gray-900 dark:bg-white/10 dark:text-white' : 'text-gray-800 hover:bg-[#ecece5] dark:text-gray-300 dark:hover:bg-white/10 dark:hover:text-white',
+                                'group flex w-full items-center gap-x-2.5 rounded-md py-1.5 px-2 text-[14px] font-normal'
+                            )}
+                            onClick={() => onSwitchTab('settings')}
+                        >
+                            <Settings aria-hidden="true" className={classNames(
+                                activeTab === 'settings' ? 'text-gray-900 dark:text-white' : 'text-gray-600 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white',
+                                'size-[18px] shrink-0'
+                            )} />
+                            Setting
+                        </button>
+                    </li>
+                </ul>
+            </div>
+            
+            <ConfirmationModal
+                isOpen={confirmDeleteId !== null}
+                title="Delete Chat Session"
+                message="Are you sure you want to delete this chat session? This will remove all message history for this session permanently."
+                confirmText="Delete"
+                cancelText="Cancel"
+                onConfirm={() => {
+                    onDeleteSession(confirmDeleteId);
+                    setConfirmDeleteId(null);
+                }}
+                onCancel={() => setConfirmDeleteId(null)}
+                isDestructive={true}
+            />
+        </div>
+    );
+}
+

package/client/src/context/SettingsContext.jsx

@@ -0,0 +1,353 @@
+import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import i18n from '../i18n';
+import { apiFetch } from '../api';
+import { toast } from 'react-toastify';
+
+const SettingsContext = createContext(null);
+
+export const SettingsProvider = ({ children }) => {
+  const [settings, setSettingsState] = useState(() => {
+    // Initial load of ALL settings from localStorage to prevent flickering
+    try {
+      const stored = localStorage.getItem('fsd_all_settings');
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        
+        // Ensure cookie matches the localStorage theme
+        if (parsed.ui?.theme) {
+          const isDark = parsed.ui.theme === 'Dark' || (parsed.ui.theme === 'System' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+          document.cookie = `theme=${isDark ? 'dark' : 'light'}; path=/; max-age=31536000`;
+        }
+        
+        return parsed;
+      }
+    } catch (e) {
+      console.error('Failed to parse local settings', e);
+    }
+    
+    const themeMatch = document.cookie.match(/(?:^|; )theme=([^;]*)/);
+    const initialUi = { theme: 'Light', language: 'English' };
+    if (themeMatch) {
+      initialUi.theme = themeMatch[1] === 'dark' ? 'Dark' : 'Light';
+    }
+    
+    return {
+      ai: { model: 'Loading...' },
+      ui: initialUi,
+      fsd: {},
+      memory: {},
+      safety: {},
+      advanced: {}
+    };
+  });
+
+  const [engine, setEngineState] = useState(() => {
+    try {
+      const stored = localStorage.getItem('fsd_all_settings');
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        if (parsed.ai?.executionMode === 'Local CLI Driver' || parsed.ai?.provider === 'gemini-cli') {
+          return 'gemini-cli';
+        }
+      }
+    } catch (e) {}
+    return 'openrouter';
+  });
+  const [models, setModels] = useState([]);
+  const [skills, setSkills] = useState([]);
+  const [serverConnected, setServerConnected] = useState(false);
+  const [workspaceConnected, setWorkspaceConnected] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  const applyUiSettings = useCallback((uiSettings) => {
+    const theme = uiSettings.theme || 'Light';
+    
+    const applyTheme = (isDark) => {
+      if (isDark) {
+        document.documentElement.classList.add('dark');
+        document.documentElement.setAttribute('data-theme', 'dark');
+        document.cookie = "theme=dark; path=/; max-age=31536000";
+      } else {
+        document.documentElement.classList.remove('dark');
+        document.documentElement.setAttribute('data-theme', 'light');
+        document.cookie = "theme=light; path=/; max-age=31536000";
+      }
+    };
+
+    if (theme === 'Dark') {
+      applyTheme(true);
+    } else if (theme === 'Light') {
+      applyTheme(false);
+    } else {
+      // System
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      applyTheme(prefersDark);
+    }
+
+    // Apply language
+    const langMap = {
+      'English': 'en',
+      '中文 (简体)': 'zh',
+      '日本語': 'ja',
+      '한국어': 'ko',
+      'Español': 'es'
+    };
+    if (i18n && uiSettings.language) {
+      i18n.changeLanguage(langMap[uiSettings.language] || 'en');
+    }
+  }, []);
+
+  // Sync theme/language from state to DOM
+  useEffect(() => {
+    applyUiSettings(settings.ui);
+  }, [settings.ui, applyUiSettings]);
+
+  // Load configuration from backend
+  const fetchSettingsAndEngine = useCallback(async () => {
+    try {
+      const data = await apiFetch('/api/settings');
+      const statusData = await apiFetch('/api/engine/status');
+      
+      const backendSettings = data.settings || {};
+      const currentEngine = statusData.currentEngine || 'openrouter';
+      
+      setEngineState(currentEngine);
+      setServerConnected(true);
+      
+      // Load models list
+      const modelsData = await apiFetch('/api/engine/models');
+      setModels(modelsData.models || []);
+
+      // Load skills
+      try {
+        const toolsData = await apiFetch('/api/engine/tools');
+        setSkills(toolsData.skills || []);
+        setWorkspaceConnected(!!toolsData.workspacePath);
+      } catch (e) {
+        console.error('Failed to load skills', e);
+      }
+
+      // Get latest local settings as fallback
+      let localSettings = {};
+      try {
+        const stored = localStorage.getItem('fsd_all_settings');
+        if (stored) {
+          localSettings = JSON.parse(stored);
+        }
+      } catch (e) {}
+
+      const mergedSettings = {
+        ...localSettings,
+        ...backendSettings
+      };
+      
+      // Update localStorage with merged settings
+      localStorage.setItem('fsd_all_settings', JSON.stringify(mergedSettings));
+
+      setSettingsState(mergedSettings);
+      setLoading(false);
+    } catch (e) {
+      console.error('Failed to load settings from backend', e);
+      setServerConnected(false);
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchSettingsAndEngine();
+  }, [fetchSettingsAndEngine]);
+
+  // Heartbeat to monitor server status
+  useEffect(() => {
+    const checkServer = async () => {
+      try {
+        await apiFetch('/api/heartbeat', { method: 'POST' });
+        setServerConnected(true);
+      } catch (e) {
+        setServerConnected(false);
+      }
+    };
+    const interval = setInterval(checkServer, 5000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const getEngineForSettings = (newSettings) => {
+    const ai = newSettings.ai || {};
+    return ai.executionMode === 'Local CLI Driver' || ai.provider === 'gemini-cli'
+      ? 'gemini-cli'
+      : 'openrouter';
+  };
+
+  const notifySettingsSaved = () => {
+    toast.success('Settings saved', {
+      toastId: 'settings-saved',
+      position: 'bottom-right',
+      autoClose: 1600
+    });
+  };
+
+  const saveSettingsToBackend = async (newSettings) => {
+    try {
+      await apiFetch('/api/engine/config', {
+        method: 'PUT',
+        body: JSON.stringify({
+          engine: getEngineForSettings(newSettings),
+          model: newSettings.ai?.model,
+          settings: newSettings
+        })
+      });
+      
+      // Sync engine state and model list
+      const statusData = await apiFetch('/api/engine/status');
+      setEngineState(statusData.currentEngine || 'openrouter');
+      
+      const modelsData = await apiFetch('/api/engine/models');
+      setModels(modelsData.models || []);
+      setServerConnected(true);
+      notifySettingsSaved();
+    } catch (e) {
+      console.error('Failed to save settings to backend', e);
+      setServerConnected(false);
+      toast.error('Failed to save settings', {
+        toastId: 'settings-save-failed',
+        position: 'bottom-right',
+        autoClose: 2200
+      });
+    }
+  };
+
+  const updateSetting = useCallback((category, key, value) => {
+    setSettingsState(prev => {
+      const updated = {
+        ...prev,
+        [category]: {
+          ...prev[category],
+          [key]: value
+        }
+      };
+
+      if (category === 'ui') {
+        localStorage.setItem('fsd_all_settings', JSON.stringify(updated));
+        applyUiSettings(updated.ui);
+      }
+      
+      saveSettingsToBackend(updated);
+      return updated;
+    });
+  }, [applyUiSettings]);
+
+  const updateSettingsBatch = useCallback((newSettings) => {
+    setSettingsState(newSettings);
+    localStorage.setItem('fsd_all_settings', JSON.stringify(newSettings));
+    applyUiSettings(newSettings.ui);
+    saveSettingsToBackend(newSettings);
+  }, [applyUiSettings]);
+
+  const setEngine = useCallback(async (newEngine) => {
+    try {
+      setEngineState(newEngine);
+      await apiFetch('/api/engine/switch', {
+        method: 'POST',
+        body: JSON.stringify({ engine: newEngine })
+      });
+      
+      // Update executionMode / provider settings to match new engine
+      setSettingsState(prev => {
+        const updated = {
+          ...prev,
+          ai: {
+            ...prev.ai,
+            executionMode: newEngine === 'gemini-cli' ? 'Local CLI Driver' : 'HTTP API',
+            provider: newEngine === 'gemini-cli' ? 'gemini-cli' : 'OpenRouter'
+          }
+        };
+        saveSettingsToBackend(updated);
+        return updated;
+      });
+
+      // Reload models
+      const modelsData = await apiFetch('/api/engine/models');
+      setModels(modelsData.models || []);
+      setServerConnected(true);
+    } catch (e) {
+      console.error('Failed to switch engine on backend', e);
+      setServerConnected(false);
+    }
+  }, []);
+
+  const refreshModels = useCallback(async () => {
+    try {
+      const modelsData = await apiFetch('/api/engine/models');
+      setModels(modelsData.models || []);
+      setServerConnected(true);
+    } catch (e) {
+      console.error('Failed to refresh models from backend', e);
+      setServerConnected(false);
+    }
+  }, []);
+
+  const toggleSkill = useCallback(async (skillId, enabled) => {
+    try {
+      await apiFetch('/api/engine/skills/toggle', {
+        method: 'POST',
+        body: JSON.stringify({ skillId, enabled })
+      });
+      // Refresh skills
+      const toolsData = await apiFetch('/api/engine/tools');
+      setSkills(toolsData.skills || []);
+    } catch (e) {
+      console.error('Failed to toggle skill', e);
+      toast.error('Failed to toggle skill');
+    }
+  }, []);
+
+  const createSkill = useCallback(async (name, description) => {
+    try {
+      const result = await apiFetch('/api/engine/skills/create', {
+        method: 'POST',
+        body: JSON.stringify({ name, description })
+      });
+      
+      if (result.success) {
+        toast.success('Skill created successfully');
+        // Refresh skills
+        const toolsData = await apiFetch('/api/engine/tools');
+        setSkills(toolsData.skills || []);
+        return true;
+      }
+      return false;
+    } catch (e) {
+      console.error('Failed to create skill', e);
+      toast.error(`Failed to create skill: ${e.message}`);
+      return false;
+    }
+  }, []);
+
+  return (
+    <SettingsContext.Provider value={{ 
+      settings, 
+      engine, 
+      models, 
+      skills,
+      serverConnected, 
+      workspaceConnected,
+      loading,
+      updateSetting, 
+      updateSettingsBatch, 
+      setEngine, 
+      refreshModels,
+      toggleSkill,
+      createSkill
+    }}>
+      {children}
+    </SettingsContext.Provider>
+  );
+};
+
+export const useSettings = () => {
+  const context = useContext(SettingsContext);
+  if (!context) {
+    throw new Error('useSettings must be used within a SettingsProvider');
+  }
+  return context;
+};