mirror of
https://github.com/siteboon/claudecodeui.git
synced 2025-12-12 13:19:43 +00:00
fefcc0f338
Add global settings integration and persistent user preferences for the code editor. Settings are now stored in localStorage and persist across sessions. Changes: - Add theme, word wrap, minimap, line numbers, and font size settings - Load editor preferences from localStorage on initialization - Expose global openSettings function for cross-component access - Add settingsInitialTab state to control which settings tab opens - Pass initialTab prop to Settings component for navigation This improves UX by remembering user preferences and allows other components to open settings to specific tabs programmatically.
2240 lines
103 KiB
JavaScript
2240 lines
103 KiB
JavaScript
import { useState, useEffect } from 'react';
|
|
import { Button } from './ui/button';
|
|
import { Input } from './ui/input';
|
|
import { Badge } from './ui/badge';
|
|
import { X, Plus, Settings as SettingsIcon, Shield, AlertTriangle, Moon, Sun, Server, Edit3, Trash2, Globe, Terminal, Zap, FolderOpen, LogIn, Key } from 'lucide-react';
|
|
import { useTheme } from '../contexts/ThemeContext';
|
|
import { useTasksSettings } from '../contexts/TasksSettingsContext';
|
|
import StandaloneShell from './StandaloneShell';
|
|
import ClaudeLogo from './ClaudeLogo';
|
|
import CursorLogo from './CursorLogo';
|
|
import CredentialsSettings from './CredentialsSettings';
|
|
|
|
function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
|
|
const { isDarkMode, toggleDarkMode } = useTheme();
|
|
const {
|
|
tasksEnabled,
|
|
setTasksEnabled,
|
|
isTaskMasterInstalled,
|
|
isTaskMasterReady,
|
|
installationStatus,
|
|
isCheckingInstallation
|
|
} = useTasksSettings();
|
|
const [allowedTools, setAllowedTools] = useState([]);
|
|
const [disallowedTools, setDisallowedTools] = useState([]);
|
|
const [newAllowedTool, setNewAllowedTool] = useState('');
|
|
const [newDisallowedTool, setNewDisallowedTool] = useState('');
|
|
const [skipPermissions, setSkipPermissions] = useState(false);
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
const [saveStatus, setSaveStatus] = useState(null);
|
|
const [projectSortOrder, setProjectSortOrder] = useState('name');
|
|
|
|
const [mcpServers, setMcpServers] = useState([]);
|
|
const [showMcpForm, setShowMcpForm] = useState(false);
|
|
const [editingMcpServer, setEditingMcpServer] = useState(null);
|
|
const [mcpFormData, setMcpFormData] = useState({
|
|
name: '',
|
|
type: 'stdio',
|
|
scope: 'user',
|
|
projectPath: '', // For local scope
|
|
config: {
|
|
command: '',
|
|
args: [],
|
|
env: {},
|
|
url: '',
|
|
headers: {},
|
|
timeout: 30000
|
|
},
|
|
jsonInput: '', // For JSON import
|
|
importMode: 'form' // 'form' or 'json'
|
|
});
|
|
const [mcpLoading, setMcpLoading] = useState(false);
|
|
const [mcpTestResults, setMcpTestResults] = useState({});
|
|
const [mcpServerTools, setMcpServerTools] = useState({});
|
|
const [mcpToolsLoading, setMcpToolsLoading] = useState({});
|
|
const [activeTab, setActiveTab] = useState(initialTab);
|
|
const [jsonValidationError, setJsonValidationError] = useState('');
|
|
const [toolsProvider, setToolsProvider] = useState('claude'); // 'claude' or 'cursor'
|
|
|
|
// Code Editor settings
|
|
const [codeEditorTheme, setCodeEditorTheme] = useState(() =>
|
|
localStorage.getItem('codeEditorTheme') || 'dark'
|
|
);
|
|
const [codeEditorWordWrap, setCodeEditorWordWrap] = useState(() =>
|
|
localStorage.getItem('codeEditorWordWrap') === 'true'
|
|
);
|
|
const [codeEditorShowMinimap, setCodeEditorShowMinimap] = useState(() =>
|
|
localStorage.getItem('codeEditorShowMinimap') !== 'false' // Default true
|
|
);
|
|
const [codeEditorLineNumbers, setCodeEditorLineNumbers] = useState(() =>
|
|
localStorage.getItem('codeEditorLineNumbers') !== 'false' // Default true
|
|
);
|
|
const [codeEditorFontSize, setCodeEditorFontSize] = useState(() =>
|
|
localStorage.getItem('codeEditorFontSize') || '14'
|
|
);
|
|
|
|
// Cursor-specific states
|
|
const [cursorAllowedCommands, setCursorAllowedCommands] = useState([]);
|
|
const [cursorDisallowedCommands, setCursorDisallowedCommands] = useState([]);
|
|
const [cursorSkipPermissions, setCursorSkipPermissions] = useState(false);
|
|
const [newCursorCommand, setNewCursorCommand] = useState('');
|
|
const [newCursorDisallowedCommand, setNewCursorDisallowedCommand] = useState('');
|
|
const [cursorMcpServers, setCursorMcpServers] = useState([]);
|
|
|
|
// Login modal states
|
|
const [showLoginModal, setShowLoginModal] = useState(false);
|
|
const [loginProvider, setLoginProvider] = useState(''); // 'claude' or 'cursor'
|
|
const [selectedProject, setSelectedProject] = useState(null);
|
|
// Common tool patterns for Claude
|
|
const commonTools = [
|
|
'Bash(git log:*)',
|
|
'Bash(git diff:*)',
|
|
'Bash(git status:*)',
|
|
'Write',
|
|
'Read',
|
|
'Edit',
|
|
'Glob',
|
|
'Grep',
|
|
'MultiEdit',
|
|
'Task',
|
|
'TodoWrite',
|
|
'TodoRead',
|
|
'WebFetch',
|
|
'WebSearch'
|
|
];
|
|
|
|
// Common shell commands for Cursor
|
|
const commonCursorCommands = [
|
|
'Shell(ls)',
|
|
'Shell(mkdir)',
|
|
'Shell(cd)',
|
|
'Shell(cat)',
|
|
'Shell(echo)',
|
|
'Shell(git status)',
|
|
'Shell(git diff)',
|
|
'Shell(git log)',
|
|
'Shell(npm install)',
|
|
'Shell(npm run)',
|
|
'Shell(python)',
|
|
'Shell(node)'
|
|
];
|
|
|
|
// Fetch Cursor MCP servers
|
|
const fetchCursorMcpServers = async () => {
|
|
try {
|
|
const token = localStorage.getItem('auth-token');
|
|
const response = await fetch('/api/cursor/mcp', {
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setCursorMcpServers(data.servers || []);
|
|
} else {
|
|
console.error('Failed to fetch Cursor MCP servers');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching Cursor MCP servers:', error);
|
|
}
|
|
};
|
|
|
|
// MCP API functions
|
|
const fetchMcpServers = async () => {
|
|
try {
|
|
const token = localStorage.getItem('auth-token');
|
|
|
|
// Try to read directly from config files for complete details
|
|
const configResponse = await fetch('/api/mcp/config/read', {
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
|
|
if (configResponse.ok) {
|
|
const configData = await configResponse.json();
|
|
if (configData.success && configData.servers) {
|
|
setMcpServers(configData.servers);
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Fallback to Claude CLI
|
|
const cliResponse = await fetch('/api/mcp/cli/list', {
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
|
|
if (cliResponse.ok) {
|
|
const cliData = await cliResponse.json();
|
|
if (cliData.success && cliData.servers) {
|
|
// Convert CLI format to our format
|
|
const servers = cliData.servers.map(server => ({
|
|
id: server.name,
|
|
name: server.name,
|
|
type: server.type,
|
|
scope: 'user',
|
|
config: {
|
|
command: server.command || '',
|
|
args: server.args || [],
|
|
env: server.env || {},
|
|
url: server.url || '',
|
|
headers: server.headers || {},
|
|
timeout: 30000
|
|
},
|
|
created: new Date().toISOString(),
|
|
updated: new Date().toISOString()
|
|
}));
|
|
setMcpServers(servers);
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Final fallback to direct config reading
|
|
const response = await fetch('/api/mcp/servers?scope=user', {
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setMcpServers(data.servers || []);
|
|
} else {
|
|
console.error('Failed to fetch MCP servers');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching MCP servers:', error);
|
|
}
|
|
};
|
|
|
|
const saveMcpServer = async (serverData) => {
|
|
try {
|
|
const token = localStorage.getItem('auth-token');
|
|
|
|
if (editingMcpServer) {
|
|
// For editing, remove old server and add new one
|
|
await deleteMcpServer(editingMcpServer.id, 'user');
|
|
}
|
|
|
|
// Use Claude CLI to add the server
|
|
const response = await fetch('/api/mcp/cli/add', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
name: serverData.name,
|
|
type: serverData.type,
|
|
scope: serverData.scope,
|
|
projectPath: serverData.projectPath,
|
|
command: serverData.config?.command,
|
|
args: serverData.config?.args || [],
|
|
url: serverData.config?.url,
|
|
headers: serverData.config?.headers || {},
|
|
env: serverData.config?.env || {}
|
|
})
|
|
});
|
|
|
|
if (response.ok) {
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
await fetchMcpServers(); // Refresh the list
|
|
return true;
|
|
} else {
|
|
throw new Error(result.error || 'Failed to save server via Claude CLI');
|
|
}
|
|
} else {
|
|
const error = await response.json();
|
|
throw new Error(error.error || 'Failed to save server');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error saving MCP server:', error);
|
|
throw error;
|
|
}
|
|
};
|
|
|
|
const deleteMcpServer = async (serverId, scope = 'user') => {
|
|
try {
|
|
const token = localStorage.getItem('auth-token');
|
|
|
|
// Use Claude CLI to remove the server with proper scope
|
|
const response = await fetch(`/api/mcp/cli/remove/${serverId}?scope=${scope}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
await fetchMcpServers(); // Refresh the list
|
|
return true;
|
|
} else {
|
|
throw new Error(result.error || 'Failed to delete server via Claude CLI');
|
|
}
|
|
} else {
|
|
const error = await response.json();
|
|
throw new Error(error.error || 'Failed to delete server');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error deleting MCP server:', error);
|
|
throw error;
|
|
}
|
|
};
|
|
|
|
const testMcpServer = async (serverId, scope = 'user') => {
|
|
try {
|
|
const token = localStorage.getItem('auth-token');
|
|
const response = await fetch(`/api/mcp/servers/${serverId}/test?scope=${scope}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
return data.testResult;
|
|
} else {
|
|
const error = await response.json();
|
|
throw new Error(error.error || 'Failed to test server');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error testing MCP server:', error);
|
|
throw error;
|
|
}
|
|
};
|
|
|
|
|
|
const discoverMcpTools = async (serverId, scope = 'user') => {
|
|
try {
|
|
const token = localStorage.getItem('auth-token');
|
|
const response = await fetch(`/api/mcp/servers/${serverId}/tools?scope=${scope}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
return data.toolsResult;
|
|
} else {
|
|
const error = await response.json();
|
|
throw new Error(error.error || 'Failed to discover tools');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error discovering MCP tools:', error);
|
|
throw error;
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
loadSettings();
|
|
// Set the active tab when the modal opens
|
|
setActiveTab(initialTab);
|
|
}
|
|
}, [isOpen, initialTab]);
|
|
|
|
// Persist code editor settings to localStorage
|
|
useEffect(() => {
|
|
localStorage.setItem('codeEditorTheme', codeEditorTheme);
|
|
window.dispatchEvent(new Event('codeEditorSettingsChanged'));
|
|
}, [codeEditorTheme]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('codeEditorWordWrap', codeEditorWordWrap.toString());
|
|
window.dispatchEvent(new Event('codeEditorSettingsChanged'));
|
|
}, [codeEditorWordWrap]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('codeEditorShowMinimap', codeEditorShowMinimap.toString());
|
|
window.dispatchEvent(new Event('codeEditorSettingsChanged'));
|
|
}, [codeEditorShowMinimap]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('codeEditorLineNumbers', codeEditorLineNumbers.toString());
|
|
window.dispatchEvent(new Event('codeEditorSettingsChanged'));
|
|
}, [codeEditorLineNumbers]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('codeEditorFontSize', codeEditorFontSize);
|
|
window.dispatchEvent(new Event('codeEditorSettingsChanged'));
|
|
}, [codeEditorFontSize]);
|
|
|
|
const loadSettings = async () => {
|
|
try {
|
|
|
|
// Load Claude settings from localStorage
|
|
const savedSettings = localStorage.getItem('claude-settings');
|
|
|
|
if (savedSettings) {
|
|
const settings = JSON.parse(savedSettings);
|
|
setAllowedTools(settings.allowedTools || []);
|
|
setDisallowedTools(settings.disallowedTools || []);
|
|
setSkipPermissions(settings.skipPermissions || false);
|
|
setProjectSortOrder(settings.projectSortOrder || 'name');
|
|
} else {
|
|
// Set defaults
|
|
setAllowedTools([]);
|
|
setDisallowedTools([]);
|
|
setSkipPermissions(false);
|
|
setProjectSortOrder('name');
|
|
}
|
|
|
|
// Load Cursor settings from localStorage
|
|
const savedCursorSettings = localStorage.getItem('cursor-tools-settings');
|
|
|
|
if (savedCursorSettings) {
|
|
const cursorSettings = JSON.parse(savedCursorSettings);
|
|
setCursorAllowedCommands(cursorSettings.allowedCommands || []);
|
|
setCursorDisallowedCommands(cursorSettings.disallowedCommands || []);
|
|
setCursorSkipPermissions(cursorSettings.skipPermissions || false);
|
|
} else {
|
|
// Set Cursor defaults
|
|
setCursorAllowedCommands([]);
|
|
setCursorDisallowedCommands([]);
|
|
setCursorSkipPermissions(false);
|
|
}
|
|
|
|
// Load MCP servers from API
|
|
await fetchMcpServers();
|
|
|
|
// Load Cursor MCP servers
|
|
await fetchCursorMcpServers();
|
|
} catch (error) {
|
|
console.error('Error loading tool settings:', error);
|
|
// Set defaults on error
|
|
setAllowedTools([]);
|
|
setDisallowedTools([]);
|
|
setSkipPermissions(false);
|
|
setProjectSortOrder('name');
|
|
}
|
|
};
|
|
|
|
// Login handlers
|
|
const handleClaudeLogin = () => {
|
|
setLoginProvider('claude');
|
|
setSelectedProject(projects?.[0] || { name: 'default', fullPath: process.cwd() });
|
|
setShowLoginModal(true);
|
|
};
|
|
|
|
const handleCursorLogin = () => {
|
|
setLoginProvider('cursor');
|
|
setSelectedProject(projects?.[0] || { name: 'default', fullPath: process.cwd() });
|
|
setShowLoginModal(true);
|
|
};
|
|
|
|
const handleLoginComplete = (exitCode) => {
|
|
if (exitCode === 0) {
|
|
// Login successful - could show a success message here
|
|
}
|
|
setShowLoginModal(false);
|
|
};
|
|
|
|
const saveSettings = () => {
|
|
setIsSaving(true);
|
|
setSaveStatus(null);
|
|
|
|
try {
|
|
// Save Claude settings
|
|
const claudeSettings = {
|
|
allowedTools,
|
|
disallowedTools,
|
|
skipPermissions,
|
|
projectSortOrder,
|
|
lastUpdated: new Date().toISOString()
|
|
};
|
|
|
|
// Save Cursor settings
|
|
const cursorSettings = {
|
|
allowedCommands: cursorAllowedCommands,
|
|
disallowedCommands: cursorDisallowedCommands,
|
|
skipPermissions: cursorSkipPermissions,
|
|
lastUpdated: new Date().toISOString()
|
|
};
|
|
|
|
// Save to localStorage
|
|
localStorage.setItem('claude-settings', JSON.stringify(claudeSettings));
|
|
localStorage.setItem('cursor-tools-settings', JSON.stringify(cursorSettings));
|
|
|
|
setSaveStatus('success');
|
|
|
|
setTimeout(() => {
|
|
onClose();
|
|
}, 1000);
|
|
} catch (error) {
|
|
console.error('Error saving tool settings:', error);
|
|
setSaveStatus('error');
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
const addAllowedTool = (tool) => {
|
|
if (tool && !allowedTools.includes(tool)) {
|
|
setAllowedTools([...allowedTools, tool]);
|
|
setNewAllowedTool('');
|
|
}
|
|
};
|
|
|
|
const removeAllowedTool = (tool) => {
|
|
setAllowedTools(allowedTools.filter(t => t !== tool));
|
|
};
|
|
|
|
const addDisallowedTool = (tool) => {
|
|
if (tool && !disallowedTools.includes(tool)) {
|
|
setDisallowedTools([...disallowedTools, tool]);
|
|
setNewDisallowedTool('');
|
|
}
|
|
};
|
|
|
|
const removeDisallowedTool = (tool) => {
|
|
setDisallowedTools(disallowedTools.filter(t => t !== tool));
|
|
};
|
|
|
|
// MCP form handling functions
|
|
const resetMcpForm = () => {
|
|
setMcpFormData({
|
|
name: '',
|
|
type: 'stdio',
|
|
scope: 'user', // Default to user scope
|
|
projectPath: '',
|
|
config: {
|
|
command: '',
|
|
args: [],
|
|
env: {},
|
|
url: '',
|
|
headers: {},
|
|
timeout: 30000
|
|
},
|
|
jsonInput: '',
|
|
importMode: 'form'
|
|
});
|
|
setEditingMcpServer(null);
|
|
setShowMcpForm(false);
|
|
setJsonValidationError('');
|
|
};
|
|
|
|
const openMcpForm = (server = null) => {
|
|
if (server) {
|
|
setEditingMcpServer(server);
|
|
setMcpFormData({
|
|
name: server.name,
|
|
type: server.type,
|
|
scope: server.scope,
|
|
projectPath: server.projectPath || '',
|
|
config: { ...server.config },
|
|
raw: server.raw, // Store raw config for display
|
|
importMode: 'form', // Always use form mode when editing
|
|
jsonInput: ''
|
|
});
|
|
} else {
|
|
resetMcpForm();
|
|
}
|
|
setShowMcpForm(true);
|
|
};
|
|
|
|
const handleMcpSubmit = async (e) => {
|
|
e.preventDefault();
|
|
|
|
setMcpLoading(true);
|
|
|
|
try {
|
|
if (mcpFormData.importMode === 'json') {
|
|
// Use JSON import endpoint
|
|
const token = localStorage.getItem('auth-token');
|
|
const response = await fetch('/api/mcp/cli/add-json', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
name: mcpFormData.name,
|
|
jsonConfig: mcpFormData.jsonInput,
|
|
scope: mcpFormData.scope,
|
|
projectPath: mcpFormData.projectPath
|
|
})
|
|
});
|
|
|
|
if (response.ok) {
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
await fetchMcpServers(); // Refresh the list
|
|
resetMcpForm();
|
|
setSaveStatus('success');
|
|
} else {
|
|
throw new Error(result.error || 'Failed to add server via JSON');
|
|
}
|
|
} else {
|
|
const error = await response.json();
|
|
throw new Error(error.error || 'Failed to add server');
|
|
}
|
|
} else {
|
|
// Use regular form-based save
|
|
await saveMcpServer(mcpFormData);
|
|
resetMcpForm();
|
|
setSaveStatus('success');
|
|
}
|
|
} catch (error) {
|
|
alert(`Error: ${error.message}`);
|
|
setSaveStatus('error');
|
|
} finally {
|
|
setMcpLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleMcpDelete = async (serverId, scope) => {
|
|
if (confirm('Are you sure you want to delete this MCP server?')) {
|
|
try {
|
|
await deleteMcpServer(serverId, scope);
|
|
setSaveStatus('success');
|
|
} catch (error) {
|
|
alert(`Error: ${error.message}`);
|
|
setSaveStatus('error');
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleMcpTest = async (serverId, scope) => {
|
|
try {
|
|
setMcpTestResults({ ...mcpTestResults, [serverId]: { loading: true } });
|
|
const result = await testMcpServer(serverId, scope);
|
|
setMcpTestResults({ ...mcpTestResults, [serverId]: result });
|
|
} catch (error) {
|
|
setMcpTestResults({
|
|
...mcpTestResults,
|
|
[serverId]: {
|
|
success: false,
|
|
message: error.message,
|
|
details: []
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleMcpToolsDiscovery = async (serverId, scope) => {
|
|
try {
|
|
setMcpToolsLoading({ ...mcpToolsLoading, [serverId]: true });
|
|
const result = await discoverMcpTools(serverId, scope);
|
|
setMcpServerTools({ ...mcpServerTools, [serverId]: result });
|
|
} catch (error) {
|
|
setMcpServerTools({
|
|
...mcpServerTools,
|
|
[serverId]: {
|
|
success: false,
|
|
tools: [],
|
|
resources: [],
|
|
prompts: []
|
|
}
|
|
});
|
|
} finally {
|
|
setMcpToolsLoading({ ...mcpToolsLoading, [serverId]: false });
|
|
}
|
|
};
|
|
|
|
const updateMcpConfig = (key, value) => {
|
|
setMcpFormData(prev => ({
|
|
...prev,
|
|
config: {
|
|
...prev.config,
|
|
[key]: value
|
|
}
|
|
}));
|
|
};
|
|
|
|
|
|
const getTransportIcon = (type) => {
|
|
switch (type) {
|
|
case 'stdio': return <Terminal className="w-4 h-4" />;
|
|
case 'sse': return <Zap className="w-4 h-4" />;
|
|
case 'http': return <Globe className="w-4 h-4" />;
|
|
default: return <Server className="w-4 h-4" />;
|
|
}
|
|
};
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="modal-backdrop fixed inset-0 flex items-center justify-center z-[9999] md:p-4 bg-background/95">
|
|
<div className="bg-background border border-border md:rounded-lg shadow-xl w-full md:max-w-4xl h-full md:h-[90vh] flex flex-col">
|
|
<div className="flex items-center justify-between p-4 md:p-6 border-b border-border flex-shrink-0">
|
|
<div className="flex items-center gap-3">
|
|
<SettingsIcon className="w-5 h-5 md:w-6 md:h-6 text-blue-600" />
|
|
<h2 className="text-lg md:text-xl font-semibold text-foreground">
|
|
Settings
|
|
</h2>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={onClose}
|
|
className="text-muted-foreground hover:text-foreground touch-manipulation"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto">
|
|
{/* Tab Navigation */}
|
|
<div className="border-b border-border">
|
|
<div className="flex px-4 md:px-6">
|
|
<button
|
|
onClick={() => setActiveTab('tools')}
|
|
className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
|
|
activeTab === 'tools'
|
|
? 'border-blue-600 text-blue-600 dark:text-blue-400'
|
|
: 'border-transparent text-muted-foreground hover:text-foreground'
|
|
}`}
|
|
>
|
|
Tools
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('appearance')}
|
|
className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
|
|
activeTab === 'appearance'
|
|
? 'border-blue-600 text-blue-600 dark:text-blue-400'
|
|
: 'border-transparent text-muted-foreground hover:text-foreground'
|
|
}`}
|
|
>
|
|
Appearance
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('tasks')}
|
|
className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
|
|
activeTab === 'tasks'
|
|
? 'border-blue-600 text-blue-600 dark:text-blue-400'
|
|
: 'border-transparent text-muted-foreground hover:text-foreground'
|
|
}`}
|
|
>
|
|
Tasks
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('api')}
|
|
className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
|
|
activeTab === 'api'
|
|
? 'border-blue-600 text-blue-600 dark:text-blue-400'
|
|
: 'border-transparent text-muted-foreground hover:text-foreground'
|
|
}`}
|
|
>
|
|
<Key className="w-4 h-4 inline mr-2" />
|
|
API & Tokens
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-4 md:p-6 space-y-6 md:space-y-8 pb-safe-area-inset-bottom">
|
|
|
|
{/* Appearance Tab */}
|
|
{activeTab === 'appearance' && (
|
|
<div className="space-y-6 md:space-y-8">
|
|
{activeTab === 'appearance' && (
|
|
<div className="space-y-6 md:space-y-8">
|
|
{/* Theme Settings */}
|
|
<div className="space-y-4">
|
|
<div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<div className="font-medium text-foreground">
|
|
Dark Mode
|
|
</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
Toggle between light and dark themes
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={toggleDarkMode}
|
|
className="relative inline-flex h-8 w-14 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
|
|
role="switch"
|
|
aria-checked={isDarkMode}
|
|
aria-label="Toggle dark mode"
|
|
>
|
|
<span className="sr-only">Toggle dark mode</span>
|
|
<span
|
|
className={`${
|
|
isDarkMode ? 'translate-x-7' : 'translate-x-1'
|
|
} inline-block h-6 w-6 transform rounded-full bg-white shadow-lg transition-transform duration-200 flex items-center justify-center`}
|
|
>
|
|
{isDarkMode ? (
|
|
<Moon className="w-3.5 h-3.5 text-gray-700" />
|
|
) : (
|
|
<Sun className="w-3.5 h-3.5 text-yellow-500" />
|
|
)}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Project Sorting */}
|
|
<div className="space-y-4">
|
|
<div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<div className="font-medium text-foreground">
|
|
Project Sorting
|
|
</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
How projects are ordered in the sidebar
|
|
</div>
|
|
</div>
|
|
<select
|
|
value={projectSortOrder}
|
|
onChange={(e) => setProjectSortOrder(e.target.value)}
|
|
className="text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2 w-32"
|
|
>
|
|
<option value="name">Alphabetical</option>
|
|
<option value="date">Recent Activity</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Code Editor Settings */}
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-semibold text-foreground">Code Editor</h3>
|
|
|
|
{/* Editor Theme */}
|
|
<div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<div className="font-medium text-foreground">
|
|
Editor Theme
|
|
</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
Default theme for the code editor
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => setCodeEditorTheme(codeEditorTheme === 'dark' ? 'light' : 'dark')}
|
|
className="relative inline-flex h-8 w-14 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
|
|
role="switch"
|
|
aria-checked={codeEditorTheme === 'dark'}
|
|
aria-label="Toggle editor theme"
|
|
>
|
|
<span className="sr-only">Toggle editor theme</span>
|
|
<span
|
|
className={`${
|
|
codeEditorTheme === 'dark' ? 'translate-x-7' : 'translate-x-1'
|
|
} inline-block h-6 w-6 transform rounded-full bg-white shadow-lg transition-transform duration-200 flex items-center justify-center`}
|
|
>
|
|
{codeEditorTheme === 'dark' ? (
|
|
<Moon className="w-3.5 h-3.5 text-gray-700" />
|
|
) : (
|
|
<Sun className="w-3.5 h-3.5 text-yellow-500" />
|
|
)}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Word Wrap */}
|
|
<div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<div className="font-medium text-foreground">
|
|
Word Wrap
|
|
</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
Enable word wrapping by default in the editor
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => setCodeEditorWordWrap(!codeEditorWordWrap)}
|
|
className="relative inline-flex h-8 w-14 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
|
|
role="switch"
|
|
aria-checked={codeEditorWordWrap}
|
|
aria-label="Toggle word wrap"
|
|
>
|
|
<span className="sr-only">Toggle word wrap</span>
|
|
<span
|
|
className={`${
|
|
codeEditorWordWrap ? 'translate-x-7' : 'translate-x-1'
|
|
} inline-block h-6 w-6 transform rounded-full bg-white shadow-lg transition-transform duration-200`}
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Show Minimap */}
|
|
<div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<div className="font-medium text-foreground">
|
|
Show Minimap
|
|
</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
Display a minimap for easier navigation in diff view
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => setCodeEditorShowMinimap(!codeEditorShowMinimap)}
|
|
className="relative inline-flex h-8 w-14 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
|
|
role="switch"
|
|
aria-checked={codeEditorShowMinimap}
|
|
aria-label="Toggle minimap"
|
|
>
|
|
<span className="sr-only">Toggle minimap</span>
|
|
<span
|
|
className={`${
|
|
codeEditorShowMinimap ? 'translate-x-7' : 'translate-x-1'
|
|
} inline-block h-6 w-6 transform rounded-full bg-white shadow-lg transition-transform duration-200`}
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Show Line Numbers */}
|
|
<div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<div className="font-medium text-foreground">
|
|
Show Line Numbers
|
|
</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
Display line numbers in the editor
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => setCodeEditorLineNumbers(!codeEditorLineNumbers)}
|
|
className="relative inline-flex h-8 w-14 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
|
|
role="switch"
|
|
aria-checked={codeEditorLineNumbers}
|
|
aria-label="Toggle line numbers"
|
|
>
|
|
<span className="sr-only">Toggle line numbers</span>
|
|
<span
|
|
className={`${
|
|
codeEditorLineNumbers ? 'translate-x-7' : 'translate-x-1'
|
|
} inline-block h-6 w-6 transform rounded-full bg-white shadow-lg transition-transform duration-200`}
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Font Size */}
|
|
<div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<div className="font-medium text-foreground">
|
|
Font Size
|
|
</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
Editor font size in pixels
|
|
</div>
|
|
</div>
|
|
<select
|
|
value={codeEditorFontSize}
|
|
onChange={(e) => setCodeEditorFontSize(e.target.value)}
|
|
className="text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2 w-24"
|
|
>
|
|
<option value="10">10px</option>
|
|
<option value="11">11px</option>
|
|
<option value="12">12px</option>
|
|
<option value="13">13px</option>
|
|
<option value="14">14px</option>
|
|
<option value="15">15px</option>
|
|
<option value="16">16px</option>
|
|
<option value="18">18px</option>
|
|
<option value="20">20px</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
)}
|
|
|
|
{/* Tools Tab */}
|
|
{activeTab === 'tools' && (
|
|
<div className="space-y-6 md:space-y-8">
|
|
|
|
{/* Provider Tabs */}
|
|
<div className="border-b border-gray-300 dark:border-gray-600">
|
|
<div className="flex gap-4">
|
|
<button
|
|
onClick={() => setToolsProvider('claude')}
|
|
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
|
|
toolsProvider === 'claude'
|
|
? 'border-blue-600 text-blue-600 dark:text-blue-400'
|
|
: 'border-transparent text-muted-foreground hover:text-foreground'
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<ClaudeLogo className="w-4 h-4" />
|
|
<span>Claude</span>
|
|
</div>
|
|
</button>
|
|
<button
|
|
onClick={() => setToolsProvider('cursor')}
|
|
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
|
|
toolsProvider === 'cursor'
|
|
? 'border-purple-600 text-purple-600 dark:text-purple-400'
|
|
: 'border-transparent text-muted-foreground hover:text-foreground'
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<CursorLogo className="w-4 h-4" />
|
|
<span>Cursor</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Claude Content */}
|
|
{toolsProvider === 'claude' && (
|
|
<div className="space-y-6 md:space-y-8">
|
|
|
|
{/* Skip Permissions */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-3">
|
|
<AlertTriangle className="w-5 h-5 text-orange-500" />
|
|
<h3 className="text-lg font-medium text-foreground">
|
|
Permission Settings
|
|
</h3>
|
|
</div>
|
|
<div className="bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg p-4">
|
|
<label className="flex items-center gap-3">
|
|
<input
|
|
type="checkbox"
|
|
checked={skipPermissions}
|
|
onChange={(e) => setSkipPermissions(e.target.checked)}
|
|
className="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:ring-2 checked:bg-blue-600 dark:checked:bg-blue-600"
|
|
/>
|
|
<div>
|
|
<div className="font-medium text-orange-900 dark:text-orange-100">
|
|
Skip permission prompts (use with caution)
|
|
</div>
|
|
<div className="text-sm text-orange-700 dark:text-orange-300">
|
|
Equivalent to --dangerously-skip-permissions flag
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Claude Login */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-3">
|
|
<LogIn className="w-5 h-5 text-blue-500" />
|
|
<h3 className="text-lg font-medium text-foreground">
|
|
Authentication
|
|
</h3>
|
|
</div>
|
|
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<div className="font-medium text-blue-900 dark:text-blue-100">
|
|
Claude CLI Login
|
|
</div>
|
|
<div className="text-sm text-blue-700 dark:text-blue-300">
|
|
Sign in to your Claude account to enable AI features
|
|
</div>
|
|
</div>
|
|
<Button
|
|
onClick={handleClaudeLogin}
|
|
className="bg-blue-600 hover:bg-blue-700 text-white"
|
|
size="sm"
|
|
>
|
|
<LogIn className="w-4 h-4 mr-2" />
|
|
Login
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Allowed Tools */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-3">
|
|
<Shield className="w-5 h-5 text-green-500" />
|
|
<h3 className="text-lg font-medium text-foreground">
|
|
Allowed Tools
|
|
</h3>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
Tools that are automatically allowed without prompting for permission
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-2">
|
|
<Input
|
|
value={newAllowedTool}
|
|
onChange={(e) => setNewAllowedTool(e.target.value)}
|
|
placeholder='e.g., "Bash(git log:*)" or "Write"'
|
|
onKeyPress={(e) => {
|
|
if (e.key === 'Enter') {
|
|
addAllowedTool(newAllowedTool);
|
|
}
|
|
}}
|
|
className="flex-1 h-10 touch-manipulation"
|
|
style={{ fontSize: '16px' }}
|
|
/>
|
|
<Button
|
|
onClick={() => addAllowedTool(newAllowedTool)}
|
|
disabled={!newAllowedTool}
|
|
size="sm"
|
|
className="h-10 px-4 touch-manipulation"
|
|
>
|
|
<Plus className="w-4 h-4 mr-2 sm:mr-0" />
|
|
<span className="sm:hidden">Add Tool</span>
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Common tools quick add */}
|
|
<div className="space-y-2">
|
|
<p className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Quick add common tools:
|
|
</p>
|
|
<div className="grid grid-cols-2 sm:flex sm:flex-wrap gap-2">
|
|
{commonTools.map(tool => (
|
|
<Button
|
|
key={tool}
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => addAllowedTool(tool)}
|
|
disabled={allowedTools.includes(tool)}
|
|
className="text-xs h-8 touch-manipulation truncate"
|
|
>
|
|
{tool}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
{allowedTools.map(tool => (
|
|
<div key={tool} className="flex items-center justify-between bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-3">
|
|
<span className="font-mono text-sm text-green-800 dark:text-green-200">
|
|
{tool}
|
|
</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => removeAllowedTool(tool)}
|
|
className="text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
{allowedTools.length === 0 && (
|
|
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
|
|
No allowed tools configured
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Disallowed Tools */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-3">
|
|
<AlertTriangle className="w-5 h-5 text-red-500" />
|
|
<h3 className="text-lg font-medium text-foreground">
|
|
Disallowed Tools
|
|
</h3>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
Tools that are automatically blocked without prompting for permission
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-2">
|
|
<Input
|
|
value={newDisallowedTool}
|
|
onChange={(e) => setNewDisallowedTool(e.target.value)}
|
|
placeholder='e.g., "Bash(rm:*)" or "Write"'
|
|
onKeyPress={(e) => {
|
|
if (e.key === 'Enter') {
|
|
addDisallowedTool(newDisallowedTool);
|
|
}
|
|
}}
|
|
className="flex-1 h-10 touch-manipulation"
|
|
style={{ fontSize: '16px' }}
|
|
/>
|
|
<Button
|
|
onClick={() => addDisallowedTool(newDisallowedTool)}
|
|
disabled={!newDisallowedTool}
|
|
size="sm"
|
|
className="h-10 px-4 touch-manipulation"
|
|
>
|
|
<Plus className="w-4 h-4 mr-2 sm:mr-0" />
|
|
<span className="sm:hidden">Add Tool</span>
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
{disallowedTools.map(tool => (
|
|
<div key={tool} className="flex items-center justify-between bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-3">
|
|
<span className="font-mono text-sm text-red-800 dark:text-red-200">
|
|
{tool}
|
|
</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => removeDisallowedTool(tool)}
|
|
className="text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
{disallowedTools.length === 0 && (
|
|
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
|
|
No disallowed tools configured
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Help Section */}
|
|
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
|
|
<h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">
|
|
Tool Pattern Examples:
|
|
</h4>
|
|
<ul className="text-sm text-blue-800 dark:text-blue-200 space-y-1">
|
|
<li><code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">"Bash(git log:*)"</code> - Allow all git log commands</li>
|
|
<li><code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">"Bash(git diff:*)"</code> - Allow all git diff commands</li>
|
|
<li><code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">"Write"</code> - Allow all Write tool usage</li>
|
|
<li><code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">"Read"</code> - Allow all Read tool usage</li>
|
|
<li><code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">"Bash(rm:*)"</code> - Block all rm commands (dangerous)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* MCP Server Management */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-3">
|
|
<Server className="w-5 h-5 text-purple-500" />
|
|
<h3 className="text-lg font-medium text-foreground">
|
|
MCP Servers
|
|
</h3>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<p className="text-sm text-muted-foreground">
|
|
Model Context Protocol servers provide additional tools and data sources to Claude
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex justify-between items-center">
|
|
<Button
|
|
onClick={() => openMcpForm()}
|
|
className="bg-purple-600 hover:bg-purple-700 text-white"
|
|
size="sm"
|
|
>
|
|
<Plus className="w-4 h-4 mr-2" />
|
|
Add MCP Server
|
|
</Button>
|
|
</div>
|
|
|
|
{/* MCP Servers List */}
|
|
<div className="space-y-2">
|
|
{mcpServers.map(server => (
|
|
<div key={server.id} className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
{getTransportIcon(server.type)}
|
|
<span className="font-medium text-foreground">{server.name}</span>
|
|
<Badge variant="outline" className="text-xs">
|
|
{server.type}
|
|
</Badge>
|
|
<Badge variant="outline" className="text-xs">
|
|
{server.scope === 'local' ? '📁 local' : server.scope === 'user' ? '👤 user' : server.scope}
|
|
</Badge>
|
|
{server.projectPath && (
|
|
<Badge variant="outline" className="text-xs bg-purple-50 dark:bg-purple-900/20" title={server.projectPath}>
|
|
{server.projectPath.split('/').pop()}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
|
|
<div className="text-sm text-muted-foreground space-y-1">
|
|
{server.type === 'stdio' && server.config.command && (
|
|
<div>Command: <code className="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">{server.config.command}</code></div>
|
|
)}
|
|
{(server.type === 'sse' || server.type === 'http') && server.config.url && (
|
|
<div>URL: <code className="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">{server.config.url}</code></div>
|
|
)}
|
|
{server.config.args && server.config.args.length > 0 && (
|
|
<div>Args: <code className="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">{server.config.args.join(' ')}</code></div>
|
|
)}
|
|
{server.config.env && Object.keys(server.config.env).length > 0 && (
|
|
<div>Environment: <code className="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">{Object.entries(server.config.env).map(([k, v]) => `${k}=${v}`).join(', ')}</code></div>
|
|
)}
|
|
{server.raw && (
|
|
<details className="mt-2">
|
|
<summary className="cursor-pointer text-xs text-muted-foreground hover:text-foreground">View full config</summary>
|
|
<pre className="mt-1 text-xs bg-gray-100 dark:bg-gray-800 p-2 rounded overflow-x-auto">
|
|
{JSON.stringify(server.raw, null, 2)}
|
|
</pre>
|
|
</details>
|
|
)}
|
|
</div>
|
|
|
|
{/* Test Results */}
|
|
{mcpTestResults[server.id] && (
|
|
<div className={`mt-2 p-2 rounded text-xs ${
|
|
mcpTestResults[server.id].success
|
|
? 'bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200'
|
|
: 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200'
|
|
}`}>
|
|
<div className="font-medium">{mcpTestResults[server.id].message}</div>
|
|
{mcpTestResults[server.id].details && mcpTestResults[server.id].details.length > 0 && (
|
|
<ul className="mt-1 space-y-0.5">
|
|
{mcpTestResults[server.id].details.map((detail, i) => (
|
|
<li key={i}>• {detail}</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Tools Discovery Results */}
|
|
{mcpServerTools[server.id] && (
|
|
<div className="mt-2 p-2 rounded text-xs bg-blue-50 dark:bg-blue-900/20 text-blue-800 dark:text-blue-200 border border-blue-200 dark:border-blue-800">
|
|
<div className="font-medium mb-2">Available Tools & Resources</div>
|
|
|
|
{mcpServerTools[server.id].tools && mcpServerTools[server.id].tools.length > 0 && (
|
|
<div className="mb-2">
|
|
<div className="font-medium text-xs mb-1">Tools ({mcpServerTools[server.id].tools.length}):</div>
|
|
<ul className="space-y-0.5">
|
|
{mcpServerTools[server.id].tools.map((tool, i) => (
|
|
<li key={i} className="flex items-start gap-1">
|
|
<span className="text-blue-400 mt-0.5">•</span>
|
|
<div>
|
|
<code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">{tool.name}</code>
|
|
{tool.description && tool.description !== 'No description provided' && (
|
|
<span className="ml-1 text-xs opacity-75">- {tool.description}</span>
|
|
)}
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{mcpServerTools[server.id].resources && mcpServerTools[server.id].resources.length > 0 && (
|
|
<div className="mb-2">
|
|
<div className="font-medium text-xs mb-1">Resources ({mcpServerTools[server.id].resources.length}):</div>
|
|
<ul className="space-y-0.5">
|
|
{mcpServerTools[server.id].resources.map((resource, i) => (
|
|
<li key={i} className="flex items-start gap-1">
|
|
<span className="text-blue-400 mt-0.5">•</span>
|
|
<div>
|
|
<code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">{resource.name}</code>
|
|
{resource.description && resource.description !== 'No description provided' && (
|
|
<span className="ml-1 text-xs opacity-75">- {resource.description}</span>
|
|
)}
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{mcpServerTools[server.id].prompts && mcpServerTools[server.id].prompts.length > 0 && (
|
|
<div>
|
|
<div className="font-medium text-xs mb-1">Prompts ({mcpServerTools[server.id].prompts.length}):</div>
|
|
<ul className="space-y-0.5">
|
|
{mcpServerTools[server.id].prompts.map((prompt, i) => (
|
|
<li key={i} className="flex items-start gap-1">
|
|
<span className="text-blue-400 mt-0.5">•</span>
|
|
<div>
|
|
<code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">{prompt.name}</code>
|
|
{prompt.description && prompt.description !== 'No description provided' && (
|
|
<span className="ml-1 text-xs opacity-75">- {prompt.description}</span>
|
|
)}
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{(!mcpServerTools[server.id].tools || mcpServerTools[server.id].tools.length === 0) &&
|
|
(!mcpServerTools[server.id].resources || mcpServerTools[server.id].resources.length === 0) &&
|
|
(!mcpServerTools[server.id].prompts || mcpServerTools[server.id].prompts.length === 0) && (
|
|
<div className="text-xs opacity-75">No tools, resources, or prompts discovered</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 ml-4">
|
|
<Button
|
|
onClick={() => openMcpForm(server)}
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-gray-600 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
|
|
title="Edit server"
|
|
>
|
|
<Edit3 className="w-4 h-4" />
|
|
</Button>
|
|
<Button
|
|
onClick={() => handleMcpDelete(server.id, server.scope)}
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
|
|
title="Delete server"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{mcpServers.length === 0 && (
|
|
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
|
|
No MCP servers configured
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* MCP Server Form Modal */}
|
|
{showMcpForm && (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[110] p-4">
|
|
<div className="bg-background border border-border rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto">
|
|
<div className="flex items-center justify-between p-4 border-b border-border">
|
|
<h3 className="text-lg font-medium text-foreground">
|
|
{editingMcpServer ? 'Edit MCP Server' : 'Add MCP Server'}
|
|
</h3>
|
|
<Button variant="ghost" size="sm" onClick={resetMcpForm}>
|
|
<X className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
<form onSubmit={handleMcpSubmit} className="p-4 space-y-4">
|
|
|
|
{!editingMcpServer && (
|
|
<div className="flex gap-2 mb-4">
|
|
<button
|
|
type="button"
|
|
onClick={() => setMcpFormData(prev => ({...prev, importMode: 'form'}))}
|
|
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
|
|
mcpFormData.importMode === 'form'
|
|
? 'bg-blue-600 text-white'
|
|
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
|
|
}`}
|
|
>
|
|
Form Input
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setMcpFormData(prev => ({...prev, importMode: 'json'}))}
|
|
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
|
|
mcpFormData.importMode === 'json'
|
|
? 'bg-blue-600 text-white'
|
|
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
|
|
}`}
|
|
>
|
|
JSON Import
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Show current scope when editing */}
|
|
{mcpFormData.importMode === 'form' && editingMcpServer && (
|
|
<div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-3">
|
|
<label className="block text-sm font-medium text-foreground mb-2">
|
|
Scope
|
|
</label>
|
|
<div className="flex items-center gap-2">
|
|
{mcpFormData.scope === 'user' ? <Globe className="w-4 h-4" /> : <FolderOpen className="w-4 h-4" />}
|
|
<span className="text-sm">
|
|
{mcpFormData.scope === 'user' ? 'User (Global)' : 'Project (Local)'}
|
|
</span>
|
|
{mcpFormData.scope === 'local' && mcpFormData.projectPath && (
|
|
<span className="text-xs text-muted-foreground">
|
|
- {mcpFormData.projectPath}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-xs text-muted-foreground mt-2">
|
|
Scope cannot be changed when editing an existing server
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Scope Selection - Moved to top, disabled when editing */}
|
|
{mcpFormData.importMode === 'form' && !editingMcpServer && (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground mb-2">
|
|
Scope *
|
|
</label>
|
|
<div className="flex gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setMcpFormData(prev => ({...prev, scope: 'user', projectPath: ''}))}
|
|
className={`flex-1 px-4 py-2 rounded-lg font-medium transition-colors ${
|
|
mcpFormData.scope === 'user'
|
|
? 'bg-blue-600 text-white'
|
|
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-center gap-2">
|
|
<Globe className="w-4 h-4" />
|
|
<span>User (Global)</span>
|
|
</div>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setMcpFormData(prev => ({...prev, scope: 'local'}))}
|
|
className={`flex-1 px-4 py-2 rounded-lg font-medium transition-colors ${
|
|
mcpFormData.scope === 'local'
|
|
? 'bg-blue-600 text-white'
|
|
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-center gap-2">
|
|
<FolderOpen className="w-4 h-4" />
|
|
<span>Project (Local)</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground mt-2">
|
|
{mcpFormData.scope === 'user'
|
|
? 'User scope: Available across all projects on your machine'
|
|
: 'Local scope: Only available in the selected project'
|
|
}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Project Selection for Local Scope */}
|
|
{mcpFormData.scope === 'local' && !editingMcpServer && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground mb-2">
|
|
Project *
|
|
</label>
|
|
<select
|
|
value={mcpFormData.projectPath}
|
|
onChange={(e) => setMcpFormData(prev => ({...prev, projectPath: e.target.value}))}
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500"
|
|
required={mcpFormData.scope === 'local'}
|
|
>
|
|
<option value="">Select a project...</option>
|
|
{projects.map(project => (
|
|
<option key={project.name} value={project.path || project.fullPath}>
|
|
{project.displayName || project.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{mcpFormData.projectPath && (
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
Path: {mcpFormData.projectPath}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Basic Info */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className={mcpFormData.importMode === 'json' ? 'md:col-span-2' : ''}>
|
|
<label className="block text-sm font-medium text-foreground mb-2">
|
|
Server Name *
|
|
</label>
|
|
<Input
|
|
value={mcpFormData.name}
|
|
onChange={(e) => {
|
|
setMcpFormData(prev => ({...prev, name: e.target.value}));
|
|
}}
|
|
placeholder="my-server"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
{mcpFormData.importMode === 'form' && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground mb-2">
|
|
Transport Type *
|
|
</label>
|
|
<select
|
|
value={mcpFormData.type}
|
|
onChange={(e) => {
|
|
setMcpFormData(prev => ({...prev, type: e.target.value}));
|
|
}}
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500"
|
|
>
|
|
<option value="stdio">stdio</option>
|
|
<option value="sse">SSE</option>
|
|
<option value="http">HTTP</option>
|
|
</select>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
|
|
{/* Show raw configuration details when editing */}
|
|
{editingMcpServer && mcpFormData.raw && mcpFormData.importMode === 'form' && (
|
|
<div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
|
<h4 className="text-sm font-medium text-foreground mb-2">
|
|
Configuration Details (from {editingMcpServer.scope === 'global' ? '~/.claude.json' : 'project config'})
|
|
</h4>
|
|
<pre className="text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto">
|
|
{JSON.stringify(mcpFormData.raw, null, 2)}
|
|
</pre>
|
|
</div>
|
|
)}
|
|
|
|
{/* JSON Import Mode */}
|
|
{mcpFormData.importMode === 'json' && (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground mb-2">
|
|
JSON Configuration *
|
|
</label>
|
|
<textarea
|
|
value={mcpFormData.jsonInput}
|
|
onChange={(e) => {
|
|
setMcpFormData(prev => ({...prev, jsonInput: e.target.value}));
|
|
// Validate JSON as user types
|
|
try {
|
|
if (e.target.value.trim()) {
|
|
const parsed = JSON.parse(e.target.value);
|
|
// Basic validation
|
|
if (!parsed.type) {
|
|
setJsonValidationError('Missing required field: type');
|
|
} else if (parsed.type === 'stdio' && !parsed.command) {
|
|
setJsonValidationError('stdio type requires a command field');
|
|
} else if ((parsed.type === 'http' || parsed.type === 'sse') && !parsed.url) {
|
|
setJsonValidationError(`${parsed.type} type requires a url field`);
|
|
} else {
|
|
setJsonValidationError('');
|
|
}
|
|
}
|
|
} catch (err) {
|
|
if (e.target.value.trim()) {
|
|
setJsonValidationError('Invalid JSON format');
|
|
} else {
|
|
setJsonValidationError('');
|
|
}
|
|
}
|
|
}}
|
|
className={`w-full px-3 py-2 border ${jsonValidationError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500 font-mono text-sm`}
|
|
rows="8"
|
|
placeholder={'{\n "type": "stdio",\n "command": "/path/to/server",\n "args": ["--api-key", "abc123"],\n "env": {\n "CACHE_DIR": "/tmp"\n }\n}'}
|
|
required
|
|
/>
|
|
{jsonValidationError && (
|
|
<p className="text-xs text-red-500 mt-1">{jsonValidationError}</p>
|
|
)}
|
|
<p className="text-xs text-muted-foreground mt-2">
|
|
Paste your MCP server configuration in JSON format. Example formats:
|
|
<br />• stdio: {`{"type":"stdio","command":"npx","args":["@upstash/context7-mcp"]}`}
|
|
<br />• http/sse: {`{"type":"http","url":"https://api.example.com/mcp"}`}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Transport-specific Config - Only show in form mode */}
|
|
{mcpFormData.importMode === 'form' && mcpFormData.type === 'stdio' && (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground mb-2">
|
|
Command *
|
|
</label>
|
|
<Input
|
|
value={mcpFormData.config.command}
|
|
onChange={(e) => updateMcpConfig('command', e.target.value)}
|
|
placeholder="/path/to/mcp-server"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground mb-2">
|
|
Arguments (one per line)
|
|
</label>
|
|
<textarea
|
|
value={Array.isArray(mcpFormData.config.args) ? mcpFormData.config.args.join('\n') : ''}
|
|
onChange={(e) => updateMcpConfig('args', e.target.value.split('\n').filter(arg => arg.trim()))}
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500"
|
|
rows="3"
|
|
placeholder="--api-key abc123"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{mcpFormData.importMode === 'form' && (mcpFormData.type === 'sse' || mcpFormData.type === 'http') && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground mb-2">
|
|
URL *
|
|
</label>
|
|
<Input
|
|
value={mcpFormData.config.url}
|
|
onChange={(e) => updateMcpConfig('url', e.target.value)}
|
|
placeholder="https://api.example.com/mcp"
|
|
type="url"
|
|
required
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Environment Variables - Only show in form mode */}
|
|
{mcpFormData.importMode === 'form' && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground mb-2">
|
|
Environment Variables (KEY=value, one per line)
|
|
</label>
|
|
<textarea
|
|
value={Object.entries(mcpFormData.config.env || {}).map(([k, v]) => `${k}=${v}`).join('\n')}
|
|
onChange={(e) => {
|
|
const env = {};
|
|
e.target.value.split('\n').forEach(line => {
|
|
const [key, ...valueParts] = line.split('=');
|
|
if (key && key.trim()) {
|
|
env[key.trim()] = valueParts.join('=').trim();
|
|
}
|
|
});
|
|
updateMcpConfig('env', env);
|
|
}}
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500"
|
|
rows="3"
|
|
placeholder="API_KEY=your-key DEBUG=true"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{mcpFormData.importMode === 'form' && (mcpFormData.type === 'sse' || mcpFormData.type === 'http') && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground mb-2">
|
|
Headers (KEY=value, one per line)
|
|
</label>
|
|
<textarea
|
|
value={Object.entries(mcpFormData.config.headers || {}).map(([k, v]) => `${k}=${v}`).join('\n')}
|
|
onChange={(e) => {
|
|
const headers = {};
|
|
e.target.value.split('\n').forEach(line => {
|
|
const [key, ...valueParts] = line.split('=');
|
|
if (key && key.trim()) {
|
|
headers[key.trim()] = valueParts.join('=').trim();
|
|
}
|
|
});
|
|
updateMcpConfig('headers', headers);
|
|
}}
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500"
|
|
rows="3"
|
|
placeholder="Authorization=Bearer token X-API-Key=your-key"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
|
|
<div className="flex justify-end gap-2 pt-4">
|
|
<Button type="button" variant="outline" onClick={resetMcpForm}>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
disabled={mcpLoading}
|
|
className="bg-purple-600 hover:bg-purple-700 disabled:opacity-50"
|
|
>
|
|
{mcpLoading ? 'Saving...' : (editingMcpServer ? 'Update Server' : 'Add Server')}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Cursor Content */}
|
|
{toolsProvider === 'cursor' && (
|
|
<div className="space-y-6 md:space-y-8">
|
|
|
|
{/* Skip Permissions for Cursor */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-3">
|
|
<AlertTriangle className="w-5 h-5 text-orange-500" />
|
|
<h3 className="text-lg font-medium text-foreground">
|
|
Cursor Permission Settings
|
|
</h3>
|
|
</div>
|
|
<div className="bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg p-4">
|
|
<label className="flex items-center gap-3">
|
|
<input
|
|
type="checkbox"
|
|
checked={cursorSkipPermissions}
|
|
onChange={(e) => setCursorSkipPermissions(e.target.checked)}
|
|
className="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:ring-2 checked:bg-blue-600 dark:checked:bg-blue-600"
|
|
/>
|
|
<div>
|
|
<div className="font-medium text-orange-900 dark:text-orange-100">
|
|
Skip permission prompts (use with caution)
|
|
</div>
|
|
<div className="text-sm text-orange-700 dark:text-orange-300">
|
|
Equivalent to -f flag in Cursor CLI
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Cursor Login */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-3">
|
|
<LogIn className="w-5 h-5 text-purple-500" />
|
|
<h3 className="text-lg font-medium text-foreground">
|
|
Authentication
|
|
</h3>
|
|
</div>
|
|
<div className="bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<div className="font-medium text-purple-900 dark:text-purple-100">
|
|
Cursor CLI Login
|
|
</div>
|
|
<div className="text-sm text-purple-700 dark:text-purple-300">
|
|
Sign in to your Cursor account to enable AI features
|
|
</div>
|
|
</div>
|
|
<Button
|
|
onClick={handleCursorLogin}
|
|
className="bg-purple-600 hover:bg-purple-700 text-white"
|
|
size="sm"
|
|
>
|
|
<LogIn className="w-4 h-4 mr-2" />
|
|
Login
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Allowed Shell Commands */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-3">
|
|
<Shield className="w-5 h-5 text-green-500" />
|
|
<h3 className="text-lg font-medium text-foreground">
|
|
Allowed Shell Commands
|
|
</h3>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
Shell commands that are automatically allowed without prompting for permission
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-2">
|
|
<Input
|
|
value={newCursorCommand}
|
|
onChange={(e) => setNewCursorCommand(e.target.value)}
|
|
placeholder='e.g., "Shell(ls)" or "Shell(git status)"'
|
|
onKeyPress={(e) => {
|
|
if (e.key === 'Enter') {
|
|
if (newCursorCommand && !cursorAllowedCommands.includes(newCursorCommand)) {
|
|
setCursorAllowedCommands([...cursorAllowedCommands, newCursorCommand]);
|
|
setNewCursorCommand('');
|
|
}
|
|
}
|
|
}}
|
|
className="flex-1 h-10 touch-manipulation"
|
|
style={{ fontSize: '16px' }}
|
|
/>
|
|
<Button
|
|
onClick={() => {
|
|
if (newCursorCommand && !cursorAllowedCommands.includes(newCursorCommand)) {
|
|
setCursorAllowedCommands([...cursorAllowedCommands, newCursorCommand]);
|
|
setNewCursorCommand('');
|
|
}
|
|
}}
|
|
disabled={!newCursorCommand}
|
|
size="sm"
|
|
className="h-10 px-4 touch-manipulation"
|
|
>
|
|
<Plus className="w-4 h-4 mr-2 sm:mr-0" />
|
|
<span className="sm:hidden">Add Command</span>
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Common commands quick add */}
|
|
<div className="space-y-2">
|
|
<p className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Quick add common commands:
|
|
</p>
|
|
<div className="grid grid-cols-2 sm:flex sm:flex-wrap gap-2">
|
|
{commonCursorCommands.map(cmd => (
|
|
<Button
|
|
key={cmd}
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => {
|
|
if (!cursorAllowedCommands.includes(cmd)) {
|
|
setCursorAllowedCommands([...cursorAllowedCommands, cmd]);
|
|
}
|
|
}}
|
|
disabled={cursorAllowedCommands.includes(cmd)}
|
|
className="text-xs h-8 touch-manipulation truncate"
|
|
>
|
|
{cmd}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
{cursorAllowedCommands.map(cmd => (
|
|
<div key={cmd} className="flex items-center justify-between bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-3">
|
|
<span className="font-mono text-sm text-green-800 dark:text-green-200">
|
|
{cmd}
|
|
</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setCursorAllowedCommands(cursorAllowedCommands.filter(c => c !== cmd))}
|
|
className="text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
{cursorAllowedCommands.length === 0 && (
|
|
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
|
|
No allowed shell commands configured
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Disallowed Shell Commands */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-3">
|
|
<Shield className="w-5 h-5 text-red-500" />
|
|
<h3 className="text-lg font-medium text-foreground">
|
|
Disallowed Shell Commands
|
|
</h3>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
Shell commands that should always be denied
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-2">
|
|
<Input
|
|
value={newCursorDisallowedCommand}
|
|
onChange={(e) => setNewCursorDisallowedCommand(e.target.value)}
|
|
placeholder='e.g., "Shell(rm -rf)" or "Shell(sudo)"'
|
|
onKeyPress={(e) => {
|
|
if (e.key === 'Enter') {
|
|
if (newCursorDisallowedCommand && !cursorDisallowedCommands.includes(newCursorDisallowedCommand)) {
|
|
setCursorDisallowedCommands([...cursorDisallowedCommands, newCursorDisallowedCommand]);
|
|
setNewCursorDisallowedCommand('');
|
|
}
|
|
}
|
|
}}
|
|
className="flex-1 h-10 touch-manipulation"
|
|
style={{ fontSize: '16px' }}
|
|
/>
|
|
<Button
|
|
onClick={() => {
|
|
if (newCursorDisallowedCommand && !cursorDisallowedCommands.includes(newCursorDisallowedCommand)) {
|
|
setCursorDisallowedCommands([...cursorDisallowedCommands, newCursorDisallowedCommand]);
|
|
setNewCursorDisallowedCommand('');
|
|
}
|
|
}}
|
|
disabled={!newCursorDisallowedCommand}
|
|
size="sm"
|
|
className="h-10 px-4 touch-manipulation"
|
|
>
|
|
<Plus className="w-4 h-4 mr-2 sm:mr-0" />
|
|
<span className="sm:hidden">Add Command</span>
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
{cursorDisallowedCommands.map(cmd => (
|
|
<div key={cmd} className="flex items-center justify-between bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-3">
|
|
<span className="font-mono text-sm text-red-800 dark:text-red-200">
|
|
{cmd}
|
|
</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setCursorDisallowedCommands(cursorDisallowedCommands.filter(c => c !== cmd))}
|
|
className="text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
{cursorDisallowedCommands.length === 0 && (
|
|
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
|
|
No disallowed shell commands configured
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Help Section */}
|
|
<div className="bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg p-4">
|
|
<h4 className="font-medium text-purple-900 dark:text-purple-100 mb-2">
|
|
Cursor Shell Command Examples:
|
|
</h4>
|
|
<ul className="text-sm text-purple-800 dark:text-purple-200 space-y-1">
|
|
<li><code className="bg-purple-100 dark:bg-purple-800 px-1 rounded">"Shell(ls)"</code> - Allow ls command</li>
|
|
<li><code className="bg-purple-100 dark:bg-purple-800 px-1 rounded">"Shell(git status)"</code> - Allow git status command</li>
|
|
<li><code className="bg-purple-100 dark:bg-purple-800 px-1 rounded">"Shell(mkdir)"</code> - Allow mkdir command</li>
|
|
<li><code className="bg-purple-100 dark:bg-purple-800 px-1 rounded">"-f"</code> flag - Skip all permission prompts (dangerous)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Tasks Tab */}
|
|
{activeTab === 'tasks' && (
|
|
<div className="space-y-6 md:space-y-8">
|
|
{/* Installation Status Check */}
|
|
{isCheckingInstallation ? (
|
|
<div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="animate-spin w-5 h-5 border-2 border-blue-600 border-t-transparent rounded-full"></div>
|
|
<span className="text-sm text-muted-foreground">Checking TaskMaster installation...</span>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* TaskMaster Not Installed Warning */}
|
|
{!isTaskMasterInstalled && (
|
|
<div className="bg-orange-50 dark:bg-orange-950/50 border border-orange-200 dark:border-orange-800 rounded-lg p-4">
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-8 h-8 bg-orange-100 dark:bg-orange-900 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<svg className="w-4 h-4 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
|
</svg>
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="font-medium text-orange-900 dark:text-orange-100 mb-2">
|
|
TaskMaster AI CLI Not Installed
|
|
</div>
|
|
<div className="text-sm text-orange-800 dark:text-orange-200 space-y-3">
|
|
<p>TaskMaster CLI is required to use task management features. Install it to get started:</p>
|
|
|
|
<div className="bg-orange-100 dark:bg-orange-900/50 rounded-lg p-3 font-mono text-sm">
|
|
<code>npm install -g task-master-ai</code>
|
|
<a
|
|
href="https://github.com/eyaltoledano/claude-task-master"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium"
|
|
>
|
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd" />
|
|
</svg>
|
|
View on GitHub
|
|
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<p className="font-medium">After installation:</p>
|
|
<ol className="list-decimal list-inside space-y-1 text-xs">
|
|
<li>Restart this application</li>
|
|
<li>TaskMaster features will automatically become available</li>
|
|
<li>Use <code className="bg-orange-100 dark:bg-orange-800 px-1 rounded">task-master init</code> in your project directory</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* TaskMaster Settings */}
|
|
<div className="space-y-4">
|
|
<div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<div className="font-medium text-foreground">
|
|
Enable TaskMaster Integration
|
|
</div>
|
|
<div className="text-sm text-muted-foreground mt-1">
|
|
Show TaskMaster tasks, banners, and sidebar indicators across the interface
|
|
</div>
|
|
{!isTaskMasterInstalled && (
|
|
<div className="text-xs text-orange-600 dark:text-orange-400 mt-1">
|
|
TaskMaster CLI must be installed first
|
|
</div>
|
|
)}
|
|
</div>
|
|
<label className="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={tasksEnabled}
|
|
onChange={(e) => setTasksEnabled(e.target.checked)}
|
|
disabled={!isTaskMasterInstalled}
|
|
className="sr-only peer"
|
|
/>
|
|
<div className={`w-11 h-6 ${!isTaskMasterInstalled ? 'bg-gray-300 dark:bg-gray-600' : 'bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800'} rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600`}></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
{/* TaskMaster Information */}
|
|
<div className="bg-blue-50 dark:bg-blue-950/50 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<Zap className="w-4 h-4 text-blue-600 dark:text-blue-400" />
|
|
</div>
|
|
<div>
|
|
<div className="font-medium text-blue-900 dark:text-blue-100 mb-2">
|
|
🎯 About TaskMaster AI
|
|
</div>
|
|
<div className="text-sm text-blue-800 dark:text-blue-200 space-y-2">
|
|
<p><strong>AI-Powered Task Management:</strong> Break complex projects into manageable subtasks with AI assistance</p>
|
|
<p><strong>PRD:</strong> Generate structured tasks from Product Requirements Documents</p>
|
|
<p><strong>Dependency Tracking:</strong> Understand task relationships and execution order</p>
|
|
<p><strong>Progress Visualization:</strong> Kanban boards, and detailed task views</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* GitHub Link and Resources */}
|
|
<div className="mt-4 pt-4 border-t border-blue-200 dark:border-blue-700">
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-6 h-6 bg-blue-100 dark:bg-blue-800 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<svg className="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clipRule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="font-medium text-blue-900 dark:text-blue-100 mb-2">
|
|
📚 Learn More & Tutorial
|
|
</div>
|
|
<div className="text-sm text-blue-800 dark:text-blue-200 space-y-2">
|
|
<p>TaskMaster AI (aka <strong>claude-task-master</strong> ) is an advanced AI-powered task management system built for developers.</p>
|
|
<div className="flex flex-col gap-2">
|
|
<a
|
|
href="https://github.com/eyaltoledano/claude-task-master"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium"
|
|
>
|
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd" />
|
|
</svg>
|
|
View on GitHub
|
|
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
|
</svg>
|
|
</a>
|
|
<p className="text-xs text-blue-700 dark:text-blue-300">
|
|
Find documentation, setup guides, and examples for advanced TaskMaster workflows
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* API & Tokens Tab */}
|
|
{activeTab === 'api' && (
|
|
<div className="space-y-6 md:space-y-8">
|
|
<CredentialsSettings />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between p-4 md:p-6 border-t border-border flex-shrink-0 gap-3 pb-safe-area-inset-bottom">
|
|
<div className="flex items-center justify-center sm:justify-start gap-2 order-2 sm:order-1">
|
|
{saveStatus === 'success' && (
|
|
<div className="text-green-600 dark:text-green-400 text-sm flex items-center gap-1">
|
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
|
</svg>
|
|
Settings saved successfully!
|
|
</div>
|
|
)}
|
|
{saveStatus === 'error' && (
|
|
<div className="text-red-600 dark:text-red-400 text-sm flex items-center gap-1">
|
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
|
|
</svg>
|
|
Failed to save settings
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-3 order-1 sm:order-2">
|
|
<Button
|
|
variant="outline"
|
|
onClick={onClose}
|
|
disabled={isSaving}
|
|
className="flex-1 sm:flex-none h-10 touch-manipulation"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
onClick={saveSettings}
|
|
disabled={isSaving}
|
|
className="flex-1 sm:flex-none h-10 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 touch-manipulation"
|
|
>
|
|
{isSaving ? (
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-4 h-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
|
|
Saving...
|
|
</div>
|
|
) : (
|
|
'Save Settings'
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Login Modal */}
|
|
{showLoginModal && (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 max-md:items-stretch max-md:justify-stretch">
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-4xl h-3/4 flex flex-col md:max-w-4xl md:h-3/4 md:rounded-lg md:m-4 max-md:max-w-none max-md:h-full max-md:rounded-none max-md:m-0">
|
|
<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
|
{loginProvider === 'claude' ? 'Claude CLI Login' : 'Cursor CLI Login'}
|
|
</h3>
|
|
<button
|
|
onClick={() => setShowLoginModal(false)}
|
|
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
|
>
|
|
<X className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
<div className="flex-1 overflow-hidden">
|
|
<StandaloneShell
|
|
project={selectedProject}
|
|
command={loginProvider === 'claude' ? 'claude /login' : 'cursor-agent login'}
|
|
onComplete={handleLoginComplete}
|
|
showHeader={false}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Settings;
|