{(localStorage.getItem('selected-provider') || 'claude') === 'cursor' ? (
)}
- {message.type === 'error' ? 'Error' : message.type === 'tool' ? 'Tool' : ((localStorage.getItem('selected-provider') || 'claude') === 'cursor' ? 'Cursor' : 'Claude')}
+ {message.type === 'error' ? 'Error' : message.type === 'tool' ? 'Tool' : ((localStorage.getItem('selected-provider') || 'claude') === 'cursor' ? 'Cursor' : (localStorage.getItem('selected-provider') || 'claude') === 'codex' ? 'Codex' : 'Claude')}
)}
@@ -1522,6 +1525,23 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
Read todo list
+ ) : message.isThinking ? (
+ /* Thinking messages - collapsible by default */
+
+
) : (
+
+ + + 💭 Thinking... +
+
+
+ {message.content}
+
+
+
{/* Thinking accordion for reasoning */}
@@ -1537,7 +1557,7 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
)}
-
+
{(() => {
const content = formatUsageLimitText(String(message.content || ''));
@@ -1708,6 +1728,9 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
const [claudeModel, setClaudeModel] = useState(() => {
return localStorage.getItem('claude-model') || 'sonnet';
});
+ const [codexModel, setCodexModel] = useState(() => {
+ return localStorage.getItem('codex-model') || 'gpt-5.2';
+ });
// Load permission mode for the current session
useEffect(() => {
if (selectedSession?.id) {
@@ -2112,24 +2135,29 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
}, []);
// Load session messages from API with pagination
- const loadSessionMessages = useCallback(async (projectName, sessionId, loadMore = false) => {
+ const loadSessionMessages = useCallback(async (projectName, sessionId, loadMore = false, provider = 'claude') => {
if (!projectName || !sessionId) return [];
-
+
const isInitialLoad = !loadMore;
if (isInitialLoad) {
setIsLoadingSessionMessages(true);
} else {
setIsLoadingMoreMessages(true);
}
-
+
try {
const currentOffset = loadMore ? messagesOffset : 0;
- const response = await api.sessionMessages(projectName, sessionId, MESSAGES_PER_PAGE, currentOffset);
+ const response = await api.sessionMessages(projectName, sessionId, MESSAGES_PER_PAGE, currentOffset, provider);
if (!response.ok) {
throw new Error('Failed to load session messages');
}
const data = await response.json();
-
+
+ // Extract token usage if present (Codex includes it in messages response)
+ if (isInitialLoad && data.tokenUsage) {
+ setTokenBudget(data.tokenUsage);
+ }
+
// Handle paginated response
if (data.hasMore !== undefined) {
setHasMoreMessages(data.hasMore);
@@ -2572,6 +2600,45 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
}
}
+ // Handle thinking messages (Codex reasoning)
+ else if (msg.type === 'thinking' && msg.message?.content) {
+ converted.push({
+ type: 'assistant',
+ content: unescapeWithMathProtection(msg.message.content),
+ timestamp: msg.timestamp || new Date().toISOString(),
+ isThinking: true
+ });
+ }
+
+ // Handle tool_use messages (Codex function calls)
+ else if (msg.type === 'tool_use' && msg.toolName) {
+ converted.push({
+ type: 'assistant',
+ content: '',
+ timestamp: msg.timestamp || new Date().toISOString(),
+ isToolUse: true,
+ toolName: msg.toolName,
+ toolInput: msg.toolInput || '',
+ toolCallId: msg.toolCallId
+ });
+ }
+
+ // Handle tool_result messages (Codex function outputs)
+ else if (msg.type === 'tool_result') {
+ // Find the matching tool_use by callId, or the last tool_use without a result
+ for (let i = converted.length - 1; i >= 0; i--) {
+ if (converted[i].isToolUse && !converted[i].toolResult) {
+ if (!msg.toolCallId || converted[i].toolCallId === msg.toolCallId) {
+ converted[i].toolResult = {
+ content: msg.output || '',
+ isError: false
+ };
+ break;
+ }
+ }
+ }
+ }
+
// Handle assistant messages
else if (msg.message?.role === 'assistant' && msg.message?.content) {
if (Array.isArray(msg.message.content)) {
@@ -2666,7 +2733,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
const previousScrollTop = container.scrollTop;
// Load more messages
- const moreMessages = await loadSessionMessages(selectedProject.name, selectedSession.id, true);
+ const moreMessages = await loadSessionMessages(selectedProject.name, selectedSession.id, true, selectedSession.__provider || 'claude');
if (moreMessages.length > 0) {
// Prepend new messages to the existing ones
@@ -2757,7 +2824,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
// Only load messages from API if this is a user-initiated session change
// For system-initiated changes, preserve existing messages and rely on WebSocket
if (!isSystemSessionChange) {
- const messages = await loadSessionMessages(selectedProject.name, selectedSession.id, false);
+ const messages = await loadSessionMessages(selectedProject.name, selectedSession.id, false, selectedSession.__provider || 'claude');
setSessionMessages(messages);
// convertedMessages will be automatically updated via useMemo
// Scroll will be handled by the main scroll useEffect after messages are rendered
@@ -2806,8 +2873,8 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
setSessionMessages([]);
setChatMessages(converted);
} else {
- // Reload Claude messages from API/JSONL
- const messages = await loadSessionMessages(selectedProject.name, selectedSession.id, false);
+ // Reload Claude/Codex messages from API/JSONL
+ const messages = await loadSessionMessages(selectedProject.name, selectedSession.id, false, selectedSession.__provider || 'claude');
setSessionMessages(messages);
// convertedMessages will be automatically updated via useMemo
@@ -2893,7 +2960,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
// Filter messages by session ID to prevent cross-session interference
// Skip filtering for global messages that apply to all sessions
- const globalMessageTypes = ['projects_updated', 'taskmaster-project-updated', 'session-created', 'claude-complete'];
+ const globalMessageTypes = ['projects_updated', 'taskmaster-project-updated', 'session-created', 'claude-complete', 'codex-complete'];
const isGlobalMessage = globalMessageTypes.includes(latestMessage.type);
// For new sessions (currentSessionId is null), allow messages through
@@ -2920,8 +2987,10 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
break;
case 'token-budget':
- // Token budget now fetched via API after message completion instead of WebSocket
- // This case is kept for compatibility but does nothing
+ // Use token budget from WebSocket for active sessions
+ if (latestMessage.data) {
+ setTokenBudget(latestMessage.data);
+ }
break;
case 'claude-response':
@@ -3314,23 +3383,6 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
setIsLoading(false);
setCanAbortSession(false);
setClaudeStatus(null);
-
- // Fetch updated token usage after message completes
- if (selectedProject && selectedSession?.id) {
- const fetchUpdatedTokenUsage = async () => {
- try {
- const url = `/api/projects/${selectedProject.name}/sessions/${selectedSession.id}/token-usage`;
- const response = await authenticatedFetch(url);
- if (response.ok) {
- const data = await response.json();
- setTokenBudget(data);
- }
- } catch (error) {
- console.error('Failed to fetch updated token usage:', error);
- }
- };
- fetchUpdatedTokenUsage();
- }
}
// Always mark the completed session as inactive and not processing
@@ -3358,7 +3410,154 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
safeLocalStorage.removeItem(`chat_messages_${selectedProject.name}`);
}
break;
-
+
+ case 'codex-response':
+ // Handle Codex SDK responses
+ const codexData = latestMessage.data;
+ if (codexData) {
+ // Handle item events
+ if (codexData.type === 'item') {
+ switch (codexData.itemType) {
+ case 'agent_message':
+ if (codexData.message?.content?.trim()) {
+ const content = decodeHtmlEntities(codexData.message.content);
+ setChatMessages(prev => [...prev, {
+ type: 'assistant',
+ content: content,
+ timestamp: new Date()
+ }]);
+ }
+ break;
+
+ case 'reasoning':
+ if (codexData.message?.content?.trim()) {
+ const content = decodeHtmlEntities(codexData.message.content);
+ setChatMessages(prev => [...prev, {
+ type: 'assistant',
+ content: content,
+ timestamp: new Date(),
+ isThinking: true
+ }]);
+ }
+ break;
+
+ case 'command_execution':
+ if (codexData.command) {
+ setChatMessages(prev => [...prev, {
+ type: 'assistant',
+ content: '',
+ timestamp: new Date(),
+ isToolUse: true,
+ toolName: 'Bash',
+ toolInput: codexData.command,
+ toolResult: codexData.output || null,
+ exitCode: codexData.exitCode
+ }]);
+ }
+ break;
+
+ case 'file_change':
+ if (codexData.changes?.length > 0) {
+ const changesList = codexData.changes.map(c => `${c.kind}: ${c.path}`).join('\n');
+ setChatMessages(prev => [...prev, {
+ type: 'assistant',
+ content: '',
+ timestamp: new Date(),
+ isToolUse: true,
+ toolName: 'FileChanges',
+ toolInput: changesList,
+ toolResult: `Status: ${codexData.status}`
+ }]);
+ }
+ break;
+
+ case 'mcp_tool_call':
+ setChatMessages(prev => [...prev, {
+ type: 'assistant',
+ content: '',
+ timestamp: new Date(),
+ isToolUse: true,
+ toolName: `${codexData.server}:${codexData.tool}`,
+ toolInput: JSON.stringify(codexData.arguments, null, 2),
+ toolResult: codexData.result ? JSON.stringify(codexData.result, null, 2) : (codexData.error?.message || null)
+ }]);
+ break;
+
+ case 'error':
+ if (codexData.message?.content) {
+ setChatMessages(prev => [...prev, {
+ type: 'error',
+ content: codexData.message.content,
+ timestamp: new Date()
+ }]);
+ }
+ break;
+
+ default:
+ console.log('[Codex] Unhandled item type:', codexData.itemType, codexData);
+ }
+ }
+
+ // Handle turn complete
+ if (codexData.type === 'turn_complete') {
+ // Turn completed, message stream done
+ setIsLoading(false);
+ }
+
+ // Handle turn failed
+ if (codexData.type === 'turn_failed') {
+ setIsLoading(false);
+ setChatMessages(prev => [...prev, {
+ type: 'error',
+ content: codexData.error?.message || 'Turn failed',
+ timestamp: new Date()
+ }]);
+ }
+ }
+ break;
+
+ case 'codex-complete':
+ // Handle Codex session completion
+ const codexCompletedSessionId = latestMessage.sessionId || currentSessionId || sessionStorage.getItem('pendingSessionId');
+
+ if (codexCompletedSessionId === currentSessionId || !currentSessionId) {
+ setIsLoading(false);
+ setCanAbortSession(false);
+ setClaudeStatus(null);
+ }
+
+ if (codexCompletedSessionId) {
+ if (onSessionInactive) {
+ onSessionInactive(codexCompletedSessionId);
+ }
+ if (onSessionNotProcessing) {
+ onSessionNotProcessing(codexCompletedSessionId);
+ }
+ }
+
+ const codexPendingSessionId = sessionStorage.getItem('pendingSessionId');
+ if (codexPendingSessionId && !currentSessionId) {
+ setCurrentSessionId(codexPendingSessionId);
+ sessionStorage.removeItem('pendingSessionId');
+ console.log('Codex session complete, ID set to:', codexPendingSessionId);
+ }
+
+ if (selectedProject) {
+ safeLocalStorage.removeItem(`chat_messages_${selectedProject.name}`);
+ }
+ break;
+
+ case 'codex-error':
+ // Handle Codex errors
+ setIsLoading(false);
+ setCanAbortSession(false);
+ setChatMessages(prev => [...prev, {
+ type: 'error',
+ content: latestMessage.error || 'An error occurred with Codex',
+ timestamp: new Date()
+ }]);
+ break;
+
case 'session-aborted': {
// Get session ID from message or fall back to current session
const abortedSessionId = latestMessage.sessionId || currentSessionId;
@@ -3609,21 +3808,26 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
}
}, [input]);
- // Load token usage when session changes (but don't poll to avoid conflicts with WebSocket)
+ // Load token usage when session changes for Claude sessions only
+ // (Codex token usage is included in messages response, Cursor doesn't support it)
useEffect(() => {
if (!selectedProject || !selectedSession?.id || selectedSession.id.startsWith('new-session-')) {
- // Reset for new/empty sessions
setTokenBudget(null);
return;
}
- // Fetch token usage once when session loads
+ const sessionProvider = selectedSession.__provider || 'claude';
+
+ // Skip for Codex (included in messages) and Cursor (not supported)
+ if (sessionProvider !== 'claude') {
+ return;
+ }
+
+ // Fetch token usage for Claude sessions
const fetchInitialTokenUsage = async () => {
try {
const url = `/api/projects/${selectedProject.name}/sessions/${selectedSession.id}/token-usage`;
-
const response = await authenticatedFetch(url);
-
if (response.ok) {
const data = await response.json();
setTokenBudget(data);
@@ -3636,7 +3840,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
};
fetchInitialTokenUsage();
- }, [selectedSession?.id, selectedProject?.path]);
+ }, [selectedSession?.id, selectedSession?.__provider, selectedProject?.path]);
const handleTranscript = useCallback((text) => {
if (text.trim()) {
@@ -3808,7 +4012,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
// Get tools settings from localStorage based on provider
const getToolsSettings = () => {
try {
- const settingsKey = provider === 'cursor' ? 'cursor-tools-settings' : 'claude-settings';
+ const settingsKey = provider === 'cursor' ? 'cursor-tools-settings' : provider === 'codex' ? 'codex-settings' : 'claude-settings';
const savedSettings = safeLocalStorage.getItem(settingsKey);
if (savedSettings) {
return JSON.parse(savedSettings);
@@ -3843,6 +4047,21 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
toolsSettings: toolsSettings
}
});
+ } else if (provider === 'codex') {
+ // Send Codex command
+ sendMessage({
+ type: 'codex-command',
+ command: input,
+ sessionId: effectiveSessionId,
+ options: {
+ cwd: selectedProject.fullPath || selectedProject.path,
+ projectPath: selectedProject.fullPath || selectedProject.path,
+ sessionId: effectiveSessionId,
+ resume: !!effectiveSessionId,
+ model: codexModel,
+ permissionMode: permissionMode === 'plan' ? 'default' : permissionMode
+ }
+ });
} else {
// Send Claude command (existing code)
sendMessage({
@@ -3876,7 +4095,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
if (selectedProject) {
safeLocalStorage.removeItem(`draft_input_${selectedProject.name}`);
}
- }, [input, isLoading, selectedProject, attachedImages, currentSessionId, selectedSession, provider, permissionMode, onSessionActive, cursorModel, claudeModel, sendMessage, setInput, setAttachedImages, setUploadingImages, setImageErrors, setIsTextareaExpanded, textareaRef, setChatMessages, setIsLoading, setCanAbortSession, setClaudeStatus, setIsUserScrolledUp, scrollToBottom]);
+ }, [input, isLoading, selectedProject, attachedImages, currentSessionId, selectedSession, provider, permissionMode, onSessionActive, cursorModel, claudeModel, codexModel, sendMessage, setInput, setAttachedImages, setUploadingImages, setImageErrors, setIsTextareaExpanded, textareaRef, setChatMessages, setIsLoading, setCanAbortSession, setClaudeStatus, setIsUserScrolledUp, scrollToBottom]);
// Store handleSubmit in ref so handleCustomCommand can access it
useEffect(() => {
@@ -3986,7 +4205,10 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
// Handle Tab key for mode switching (only when dropdowns are not showing)
if (e.key === 'Tab' && !showFileDropdown && !showCommandMenu) {
e.preventDefault();
- const modes = ['default', 'acceptEdits', 'bypassPermissions', 'plan'];
+ // Codex doesn't support plan mode
+ const modes = provider === 'codex'
+ ? ['default', 'acceptEdits', 'bypassPermissions']
+ : ['default', 'acceptEdits', 'bypassPermissions', 'plan'];
const currentIndex = modes.indexOf(permissionMode);
const nextIndex = (currentIndex + 1) % modes.length;
const newMode = modes[nextIndex];
@@ -4155,7 +4377,10 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
};
const handleModeSwitch = () => {
- const modes = ['default', 'acceptEdits', 'bypassPermissions', 'plan'];
+ // Codex doesn't support plan mode
+ const modes = provider === 'codex'
+ ? ['default', 'acceptEdits', 'bypassPermissions']
+ : ['default', 'acceptEdits', 'bypassPermissions', 'plan'];
const currentIndex = modes.indexOf(permissionMode);
const nextIndex = (currentIndex + 1) % modes.length;
const newMode = modes[nextIndex];
@@ -4273,8 +4498,40 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
)}
+
+ {/* Codex Button */}
+
-
+
{/* Model Selection - Always reserve space to prevent jumping */}
diff --git a/src/components/CodexLogo.jsx b/src/components/CodexLogo.jsx
new file mode 100644
index 0000000..91759dd
--- /dev/null
+++ b/src/components/CodexLogo.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { useTheme } from '../contexts/ThemeContext';
+
+const CodexLogo = ({ className = 'w-5 h-5' }) => {
+ const { isDarkMode } = useTheme();
+
+ return (
+ 
+ );
+};
+
+export default CodexLogo;
diff --git a/src/components/CursorLogo.jsx b/src/components/CursorLogo.jsx
index 18bda9d..1cac4d2 100644
--- a/src/components/CursorLogo.jsx
+++ b/src/components/CursorLogo.jsx
@@ -1,8 +1,15 @@
import React from 'react';
+import { useTheme } from '../contexts/ThemeContext';
const CursorLogo = ({ className = 'w-5 h-5' }) => {
+ const { isDarkMode } = useTheme();
+
return (
- 
+
);
};
diff --git a/src/components/LoginModal.jsx b/src/components/LoginModal.jsx
index 42b7fc2..633aaf9 100644
--- a/src/components/LoginModal.jsx
+++ b/src/components/LoginModal.jsx
@@ -2,12 +2,12 @@ import { X } from 'lucide-react';
import StandaloneShell from './StandaloneShell';
/**
- * Reusable login modal component for Claude and Cursor CLI authentication
+ * Reusable login modal component for Claude, Cursor, and Codex CLI authentication
*
* @param {Object} props
* @param {boolean} props.isOpen - Whether the modal is visible
* @param {Function} props.onClose - Callback when modal is closed
- * @param {'claude'|'cursor'} props.provider - Which CLI provider to authenticate with
+ * @param {'claude'|'cursor'|'codex'} props.provider - Which CLI provider to authenticate with
* @param {Object} props.project - Project object containing name and path information
* @param {Function} props.onComplete - Callback when login process completes (receives exitCode)
* @param {string} props.customCommand - Optional custom command to override defaults
@@ -30,6 +30,8 @@ function LoginModal({
return 'claude setup-token --dangerously-skip-permissions';
case 'cursor':
return 'cursor-agent login';
+ case 'codex':
+ return 'codex login';
default:
return 'claude setup-token --dangerously-skip-permissions';
}
@@ -41,6 +43,8 @@ function LoginModal({
return 'Claude CLI Login';
case 'cursor':
return 'Cursor CLI Login';
+ case 'codex':
+ return 'Codex CLI Login';
default:
return 'CLI Login';
}
diff --git a/src/components/Onboarding.jsx b/src/components/Onboarding.jsx
index 0943bbb..2247c73 100644
--- a/src/components/Onboarding.jsx
+++ b/src/components/Onboarding.jsx
@@ -1,7 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
import { ChevronRight, ChevronLeft, Check, GitBranch, User, Mail, LogIn, ExternalLink, Loader2 } from 'lucide-react';
import ClaudeLogo from './ClaudeLogo';
import CursorLogo from './CursorLogo';
+import CodexLogo from './CodexLogo';
import LoginModal from './LoginModal';
import { authenticatedFetch } from '../utils/api';
import { useAuth } from '../contexts/AuthContext';
@@ -13,10 +14,8 @@ const Onboarding = ({ onComplete }) => {
const [isSubmitting, setIsSubmitting] = useState(false);
const [error, setError] = useState('');
- // CLI authentication states
- const [showLoginModal, setShowLoginModal] = useState(false);
- const [loginProvider, setLoginProvider] = useState('');
- const [selectedProject, setSelectedProject] = useState({ name: 'default', fullPath: '' });
+ const [activeLoginProvider, setActiveLoginProvider] = useState(null);
+ const [selectedProject] = useState({ name: 'default', fullPath: '' });
const [claudeAuthStatus, setClaudeAuthStatus] = useState({
authenticated: false,
@@ -32,19 +31,21 @@ const Onboarding = ({ onComplete }) => {
error: null
});
+ const [codexAuthStatus, setCodexAuthStatus] = useState({
+ authenticated: false,
+ email: null,
+ loading: true,
+ error: null
+ });
+
const { user } = useAuth();
- // Load existing git config on mount
+ const prevActiveLoginProviderRef = useRef(undefined);
+
useEffect(() => {
loadGitConfig();
}, []);
- // Check authentication status on mount and when modal closes
- useEffect(() => {
- checkClaudeAuthStatus();
- checkCursorAuthStatus();
- }, []);
-
const loadGitConfig = async () => {
try {
const response = await authenticatedFetch('/api/user/git-config');
@@ -55,24 +56,22 @@ const Onboarding = ({ onComplete }) => {
}
} catch (error) {
console.error('Error loading git config:', error);
- // Silently fail - user can still enter config manually
}
};
- // Auto-check authentication status periodically when on CLI steps
useEffect(() => {
- if (currentStep === 1 || currentStep === 2) {
- const interval = setInterval(() => {
- if (currentStep === 1) {
- checkClaudeAuthStatus();
- } else if (currentStep === 2) {
- checkCursorAuthStatus();
- }
- }, 3000); // Check every 3 seconds
+ const prevProvider = prevActiveLoginProviderRef.current;
+ prevActiveLoginProviderRef.current = activeLoginProvider;
- return () => clearInterval(interval);
+ const isInitialMount = prevProvider === undefined;
+ const isModalClosing = prevProvider !== null && activeLoginProvider === null;
+
+ if (isInitialMount || isModalClosing) {
+ checkClaudeAuthStatus();
+ checkCursorAuthStatus();
+ checkCodexAuthStatus();
}
- }, [currentStep]);
+ }, [activeLoginProvider]);
const checkClaudeAuthStatus = async () => {
try {
@@ -134,22 +133,48 @@ const Onboarding = ({ onComplete }) => {
}
};
- const handleClaudeLogin = () => {
- setLoginProvider('claude');
- setShowLoginModal(true);
+ const checkCodexAuthStatus = async () => {
+ try {
+ const response = await authenticatedFetch('/api/cli/codex/status');
+ if (response.ok) {
+ const data = await response.json();
+ setCodexAuthStatus({
+ authenticated: data.authenticated,
+ email: data.email,
+ loading: false,
+ error: data.error || null
+ });
+ } else {
+ setCodexAuthStatus({
+ authenticated: false,
+ email: null,
+ loading: false,
+ error: 'Failed to check authentication status'
+ });
+ }
+ } catch (error) {
+ console.error('Error checking Codex auth status:', error);
+ setCodexAuthStatus({
+ authenticated: false,
+ email: null,
+ loading: false,
+ error: error.message
+ });
+ }
};
- const handleCursorLogin = () => {
- setLoginProvider('cursor');
- setShowLoginModal(true);
- };
+ const handleClaudeLogin = () => setActiveLoginProvider('claude');
+ const handleCursorLogin = () => setActiveLoginProvider('cursor');
+ const handleCodexLogin = () => setActiveLoginProvider('codex');
const handleLoginComplete = (exitCode) => {
if (exitCode === 0) {
- if (loginProvider === 'claude') {
+ if (activeLoginProvider === 'claude') {
checkClaudeAuthStatus();
- } else if (loginProvider === 'cursor') {
+ } else if (activeLoginProvider === 'cursor') {
checkCursorAuthStatus();
+ } else if (activeLoginProvider === 'codex') {
+ checkCodexAuthStatus();
}
}
};
@@ -194,7 +219,6 @@ const Onboarding = ({ onComplete }) => {
return;
}
- // Other steps: just move forward
setCurrentStep(currentStep + 1);
};
@@ -208,7 +232,6 @@ const Onboarding = ({ onComplete }) => {
setError('');
try {
- // Mark onboarding as complete
const response = await authenticatedFetch('/api/user/complete-onboarding', {
method: 'POST'
});
@@ -218,7 +241,6 @@ const Onboarding = ({ onComplete }) => {
throw new Error(data.error || 'Failed to complete onboarding');
}
- // Call the onComplete callback
if (onComplete) {
onComplete();
}
@@ -237,15 +259,9 @@ const Onboarding = ({ onComplete }) => {
required: true
},
{
- title: 'Claude Code CLI',
- description: 'Connect your Claude Code account',
- icon: () =>
+
-
-
-
- Claude Code CLI
+
+
- {/* Auth Status Card */}
- Connect Your AI Agents
- Connect your Claude account to enable AI-powered coding features + Login to one or more AI coding assistants. All are optional.
-
-
-
-
- {claudeAuthStatus.loading ? 'Checking...' :
- claudeAuthStatus.authenticated ? 'Connected' : 'Not Connected'}
-
+ {/* Agent Cards Grid */}
+
+ {/* Claude */}
+ setShowLoginModal(false)}
- provider={loginProvider}
+ isOpen={!!activeLoginProvider}
+ onClose={() => setActiveLoginProvider(null)}
+ provider={activeLoginProvider}
project={selectedProject}
- onLoginComplete={handleLoginComplete}
+ onComplete={handleLoginComplete}
/>
)}
diff --git a/src/components/Settings.jsx b/src/components/Settings.jsx
index 681fc22..a19abbe 100644
--- a/src/components/Settings.jsx
+++ b/src/components/Settings.jsx
@@ -6,13 +6,20 @@ import { X, Plus, Settings as SettingsIcon, Shield, AlertTriangle, Moon, Sun, Se
import { useTheme } from '../contexts/ThemeContext';
import ClaudeLogo from './ClaudeLogo';
import CursorLogo from './CursorLogo';
+import CodexLogo from './CodexLogo';
import CredentialsSettings from './CredentialsSettings';
import GitSettings from './GitSettings';
import TasksSettings from './TasksSettings';
import LoginModal from './LoginModal';
import { authenticatedFetch } from '../utils/api';
-function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
+// New settings components
+import AgentListItem from './settings/AgentListItem';
+import AccountContent from './settings/AccountContent';
+import PermissionsContent from './settings/PermissionsContent';
+import McpServersContent from './settings/McpServersContent';
+
+function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
const { isDarkMode, toggleDarkMode } = useTheme();
const [allowedTools, setAllowedTools] = useState([]);
const [disallowedTools, setDisallowedTools] = useState([]);
@@ -48,7 +55,8 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
const [mcpToolsLoading, setMcpToolsLoading] = useState({});
const [activeTab, setActiveTab] = useState(initialTab);
const [jsonValidationError, setJsonValidationError] = useState('');
- const [toolsProvider, setToolsProvider] = useState('claude'); // 'claude' or 'cursor'
+ const [selectedAgent, setSelectedAgent] = useState('claude'); // 'claude', 'cursor', or 'codex'
+ const [selectedCategory, setSelectedCategory] = useState('account'); // 'account', 'permissions', or 'mcp'
// Code Editor settings
const [codeEditorTheme, setCodeEditorTheme] = useState(() =>
@@ -75,6 +83,22 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
const [newCursorDisallowedCommand, setNewCursorDisallowedCommand] = useState('');
const [cursorMcpServers, setCursorMcpServers] = useState([]);
+ // Codex-specific states
+ const [codexMcpServers, setCodexMcpServers] = useState([]);
+ const [codexPermissionMode, setCodexPermissionMode] = useState('default');
+ const [showCodexMcpForm, setShowCodexMcpForm] = useState(false);
+ const [codexMcpFormData, setCodexMcpFormData] = useState({
+ name: '',
+ type: 'stdio',
+ config: {
+ command: '',
+ args: [],
+ env: {}
+ }
+ });
+ const [editingCodexMcpServer, setEditingCodexMcpServer] = useState(null);
+ const [codexMcpLoading, setCodexMcpLoading] = useState(false);
+
const [showLoginModal, setShowLoginModal] = useState(false);
const [loginProvider, setLoginProvider] = useState('');
const [selectedProject, setSelectedProject] = useState(null);
@@ -91,6 +115,12 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
loading: true,
error: null
});
+ const [codexAuthStatus, setCodexAuthStatus] = useState({
+ authenticated: false,
+ email: null,
+ loading: true,
+ error: null
+ });
// Common tool patterns for Claude
const commonTools = [
@@ -141,7 +171,43 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
console.error('Error fetching Cursor MCP servers:', error);
}
};
-
+
+ const fetchCodexMcpServers = async () => {
+ try {
+ const configResponse = await authenticatedFetch('/api/codex/mcp/config/read');
+
+ if (configResponse.ok) {
+ const configData = await configResponse.json();
+ if (configData.success && configData.servers) {
+ setCodexMcpServers(configData.servers);
+ return;
+ }
+ }
+
+ const cliResponse = await authenticatedFetch('/api/codex/mcp/cli/list');
+
+ if (cliResponse.ok) {
+ const cliData = await cliResponse.json();
+ if (cliData.success && cliData.servers) {
+ const servers = cliData.servers.map(server => ({
+ id: server.name,
+ name: server.name,
+ type: server.type || 'stdio',
+ scope: 'user',
+ config: {
+ command: server.command || '',
+ args: server.args || [],
+ env: server.env || {}
+ }
+ }));
+ setCodexMcpServers(servers);
+ }
+ }
+ } catch (error) {
+ console.error('Error fetching Codex MCP servers:', error);
+ }
+ };
+
// MCP API functions
const fetchMcpServers = async () => {
try {
@@ -303,11 +369,134 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
}
};
+ const saveCodexMcpServer = async (serverData) => {
+ try {
+ if (editingCodexMcpServer) {
+ await deleteCodexMcpServer(editingCodexMcpServer.id);
+ }
+
+ const response = await authenticatedFetch('/api/codex/mcp/cli/add', {
+ method: 'POST',
+ body: JSON.stringify({
+ name: serverData.name,
+ command: serverData.config?.command,
+ args: serverData.config?.args || [],
+ env: serverData.config?.env || {}
+ })
+ });
+
+ if (response.ok) {
+ const result = await response.json();
+ if (result.success) {
+ await fetchCodexMcpServers();
+ return true;
+ } else {
+ throw new Error(result.error || 'Failed to save Codex MCP server');
+ }
+ } else {
+ const error = await response.json();
+ throw new Error(error.error || 'Failed to save server');
+ }
+ } catch (error) {
+ console.error('Error saving Codex MCP server:', error);
+ throw error;
+ }
+ };
+
+ const deleteCodexMcpServer = async (serverId) => {
+ try {
+ const response = await authenticatedFetch(`/api/codex/mcp/cli/remove/${serverId}`, {
+ method: 'DELETE'
+ });
+
+ if (response.ok) {
+ const result = await response.json();
+ if (result.success) {
+ await fetchCodexMcpServers();
+ return true;
+ } else {
+ throw new Error(result.error || 'Failed to delete Codex MCP server');
+ }
+ } else {
+ const error = await response.json();
+ throw new Error(error.error || 'Failed to delete server');
+ }
+ } catch (error) {
+ console.error('Error deleting Codex MCP server:', error);
+ throw error;
+ }
+ };
+
+ const resetCodexMcpForm = () => {
+ setCodexMcpFormData({
+ name: '',
+ type: 'stdio',
+ config: {
+ command: '',
+ args: [],
+ env: {}
+ }
+ });
+ setEditingCodexMcpServer(null);
+ setShowCodexMcpForm(false);
+ };
+
+ const openCodexMcpForm = (server = null) => {
+ if (server) {
+ setEditingCodexMcpServer(server);
+ setCodexMcpFormData({
+ name: server.name,
+ type: server.type || 'stdio',
+ config: {
+ command: server.config?.command || '',
+ args: server.config?.args || [],
+ env: server.config?.env || {}
+ }
+ });
+ } else {
+ resetCodexMcpForm();
+ }
+ setShowCodexMcpForm(true);
+ };
+
+ const handleCodexMcpSubmit = async (e) => {
+ e.preventDefault();
+ setCodexMcpLoading(true);
+
+ try {
+ if (editingCodexMcpServer) {
+ // Delete old server first, then add new one
+ await deleteCodexMcpServer(editingCodexMcpServer.name);
+ }
+ await saveCodexMcpServer(codexMcpFormData);
+ resetCodexMcpForm();
+ setSaveStatus('success');
+ } catch (error) {
+ alert(`Error: ${error.message}`);
+ setSaveStatus('error');
+ } finally {
+ setCodexMcpLoading(false);
+ }
+ };
+
+ const handleCodexMcpDelete = async (serverName) => {
+ if (confirm('Are you sure you want to delete this MCP server?')) {
+ try {
+ await deleteCodexMcpServer(serverName);
+ setSaveStatus('success');
+ } catch (error) {
+ alert(`Error: ${error.message}`);
+ setSaveStatus('error');
+ }
+ }
+ };
+
useEffect(() => {
if (isOpen) {
loadSettings();
checkClaudeAuthStatus();
checkCursorAuthStatus();
+ checkCodexAuthStatus();
setActiveTab(initialTab);
}
}, [isOpen, initialTab]);
@@ -360,7 +549,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
// Load Cursor settings from localStorage
const savedCursorSettings = localStorage.getItem('cursor-tools-settings');
-
+
if (savedCursorSettings) {
const cursorSettings = JSON.parse(savedCursorSettings);
setCursorAllowedCommands(cursorSettings.allowedCommands || []);
@@ -373,11 +562,24 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
setCursorSkipPermissions(false);
}
+ // Load Codex settings from localStorage
+ const savedCodexSettings = localStorage.getItem('codex-settings');
+
+ if (savedCodexSettings) {
+ const codexSettings = JSON.parse(savedCodexSettings);
+ setCodexPermissionMode(codexSettings.permissionMode || 'default');
+ } else {
+ setCodexPermissionMode('default');
+ }
+
// Load MCP servers from API
await fetchMcpServers();
-
+
// Load Cursor MCP servers
await fetchCursorMcpServers();
+
+ // Load Codex MCP servers
+ await fetchCodexMcpServers();
} catch (error) {
console.error('Error loading tool settings:', error);
setAllowedTools([]);
@@ -448,6 +650,38 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
});
}
};
+
+ const checkCodexAuthStatus = async () => {
+ try {
+ const response = await authenticatedFetch('/api/cli/codex/status');
+
+ if (response.ok) {
+ const data = await response.json();
+ setCodexAuthStatus({
+ authenticated: data.authenticated,
+ email: data.email,
+ loading: false,
+ error: data.error || null
+ });
+ } else {
+ setCodexAuthStatus({
+ authenticated: false,
+ email: null,
+ loading: false,
+ error: 'Failed to check authentication status'
+ });
+ }
+ } catch (error) {
+ console.error('Error checking Codex auth status:', error);
+ setCodexAuthStatus({
+ authenticated: false,
+ email: null,
+ loading: false,
+ error: error.message
+ });
+ }
+ };
+
const handleClaudeLogin = () => {
setLoginProvider('claude');
setSelectedProject(projects?.[0] || { name: 'default', fullPath: process.cwd() });
@@ -460,6 +694,12 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
setShowLoginModal(true);
};
+ const handleCodexLogin = () => {
+ setLoginProvider('codex');
+ setSelectedProject(projects?.[0] || { name: 'default', fullPath: process.cwd() });
+ setShowLoginModal(true);
+ };
+
const handleLoginComplete = (exitCode) => {
if (exitCode === 0) {
setSaveStatus('success');
@@ -468,6 +708,8 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
checkClaudeAuthStatus();
} else if (loginProvider === 'cursor') {
checkCursorAuthStatus();
+ } else if (loginProvider === 'codex') {
+ checkCodexAuthStatus();
}
}
};
@@ -493,11 +735,18 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
skipPermissions: cursorSkipPermissions,
lastUpdated: new Date().toISOString()
};
-
+
+ // Save Codex settings
+ const codexSettings = {
+ permissionMode: codexPermissionMode,
+ lastUpdated: new Date().toISOString()
+ };
+
// Save to localStorage
localStorage.setItem('claude-settings', JSON.stringify(claudeSettings));
localStorage.setItem('cursor-tools-settings', JSON.stringify(cursorSettings));
-
+ localStorage.setItem('codex-settings', JSON.stringify(codexSettings));
+
setSaveStatus('success');
setTimeout(() => {
@@ -716,14 +965,14 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'tools' }) {
+
- {claudeAuthStatus.authenticated && claudeAuthStatus.email && (
-
+
- {claudeAuthStatus.authenticated && (
-
+
+ {!claudeAuthStatus.authenticated && !claudeAuthStatus.loading && (
+
+ )}
+
+
+
+
+ Claude Code
+ {claudeAuthStatus.authenticated &&
+
+ {claudeAuthStatus.loading ? 'Checking...' :
+ claudeAuthStatus.authenticated ? claudeAuthStatus.email || 'Connected' : 'Not connected'}
+
+ - Signed in as: {claudeAuthStatus.email} -
- )} - - {!claudeAuthStatus.authenticated && ( - <> -- Click the button below to authenticate with Claude Code CLI. A terminal will open with authentication instructions. -
- -
- Or manually run: claude auth login
-
-
- );
-
- case 2:
- return (
- {claudeAuthStatus.error}
+ {/* Cursor */} +
+
-
-
+
- )}
-
+
+ {!cursorAuthStatus.authenticated && !cursorAuthStatus.loading && (
+
+ )}
+
+
+
+
+ Cursor
+ {cursorAuthStatus.authenticated &&
+
+ {cursorAuthStatus.loading ? 'Checking...' :
+ cursorAuthStatus.authenticated ? cursorAuthStatus.email || 'Connected' : 'Not connected'}
+
+
-
- This step is optional. You can skip and configure it later in Settings.
-
-
- {/* Login Modal */}
- {showLoginModal && (
+ {activeLoginProvider && (
-
-
- {/* Auth Status Card */}
-
-
- Cursor CLI
-- Connect your Cursor account to enable AI-powered features -
-
-
-
- {cursorAuthStatus.authenticated && cursorAuthStatus.email && (
-
-
-
- {cursorAuthStatus.loading ? 'Checking...' :
- cursorAuthStatus.authenticated ? 'Connected' : 'Not Connected'}
-
-
- {cursorAuthStatus.authenticated && (
- - Signed in as: {cursorAuthStatus.email} -
- )} - - {!cursorAuthStatus.authenticated && ( - <> -- Click the button below to authenticate with Cursor CLI. A terminal will open with authentication instructions. -
- -
- Or manually run: cursor auth login
-
-
- {cursorAuthStatus.error}
+ {/* Codex */} +
+
+
- )}
+
+
+ {!codexAuthStatus.authenticated && !codexAuthStatus.loading && (
+
+ )}
+
+
+
+
+ OpenAI Codex
+ {codexAuthStatus.authenticated &&
+
+ {codexAuthStatus.loading ? 'Checking...' :
+ codexAuthStatus.authenticated ? codexAuthStatus.email || 'Connected' : 'Not connected'}
+
+
-
);
@@ -455,8 +453,7 @@ const Onboarding = ({ onComplete }) => {
case 0:
return gitName.trim() && gitEmail.trim() && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(gitEmail);
case 1:
- case 2:
- return true; // CLI steps are optional
+ return true;
default:
return false;
}
@@ -572,15 +569,13 @@ const Onboarding = ({ onComplete }) => {
This step is optional. You can skip and configure it later in Settings.
+
+
You can configure these later in Settings.