- {children}
-
- );
- }
-
- // Extract language from className (format: language-xxx)
- const match = /language-(\w+)/.exec(className || '');
- const language = match ? match[1] : 'text';
- const textToCopy = raw;
-
- const handleCopy = () => {
- const doSet = () => {
- setCopied(true);
- setTimeout(() => setCopied(false), 1500);
- };
- try {
- if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
- navigator.clipboard.writeText(textToCopy).then(doSet).catch(() => {
- // Fallback
- const ta = document.createElement('textarea');
- ta.value = textToCopy;
- ta.style.position = 'fixed';
- ta.style.opacity = '0';
- document.body.appendChild(ta);
- ta.select();
- try { document.execCommand('copy'); } catch {}
- document.body.removeChild(ta);
- doSet();
- });
- } else {
- const ta = document.createElement('textarea');
- ta.value = textToCopy;
- ta.style.position = 'fixed';
- ta.style.opacity = '0';
- document.body.appendChild(ta);
- ta.select();
- try { document.execCommand('copy'); } catch {}
- document.body.removeChild(ta);
- doSet();
- }
- } catch {}
- };
-
- // Code block with syntax highlighting
- return (
-
- {/* Language label */}
- {language && language !== 'text' && (
-
- {raw}
-
-
- );
- };
-
-// Common markdown components to ensure consistent rendering (tables, inline code, links, etc.)
-const markdownComponents = {
- code: CodeBlock,
- blockquote: ({ children }) => (
-
- {language}
-
- )}
-
- {/* Copy button */}
-
-
- {/* Syntax highlighted code */}
- - {children} -- ), - a: ({ href, children }) => ( - - {children} - - ), - p: ({ children }) =>
{children}
,
- // GFM tables
- table: ({ children }) => (
-
-
- {children}
-
-
- ),
- thead: ({ children }) => (
- {children}
- ),
- th: ({ children }) => (
-
- {message.type === 'user' ? (
- /* User message bubble on the right */
-
- );
-});
-
-// ImageAttachment component for displaying image previews
-const ImageAttachment = ({ file, onRemove, uploadProgress, error }) => {
- const [preview, setPreview] = useState(null);
-
- useEffect(() => {
- const url = URL.createObjectURL(file);
- setPreview(url);
- return () => URL.revokeObjectURL(url);
- }, [file]);
-
- return (
-
-
- ) : (
- /* Claude/Error/Tool messages on the left */
-
-
- {!isGrouped && (
-
- {message.content}
-
- {message.images && message.images.length > 0 && (
-
- {message.images.map((img, idx) => (
- 
window.open(img.data, '_blank')}
- />
- ))}
-
- )}
-
- {new Date(message.timestamp).toLocaleTimeString()}
-
-
- U
-
- )}
-
- {!isGrouped && (
-
- )}
-
- {message.type === 'error' ? (
-
- )}
-
-
- !
-
- ) : message.type === 'tool' ? (
-
- 🔧
-
- ) : (
-
- {(localStorage.getItem('selected-provider') || 'claude') === 'cursor' ? (
-
- )}
-
- {message.type === 'error' ? t('messageTypes.error') : message.type === 'tool' ? t('messageTypes.tool') : ((localStorage.getItem('selected-provider') || 'claude') === 'cursor' ? t('messageTypes.cursor') : (localStorage.getItem('selected-provider') || 'claude') === 'codex' ? t('messageTypes.codex') : t('messageTypes.claude'))}
-
-
-
- {message.isToolUse && !['Read', 'TodoWrite', 'TodoRead'].includes(message.toolName) ? (
- (() => {
- // Minimize Grep and Glob tools since they happen frequently
- const isSearchTool = ['Grep', 'Glob'].includes(message.toolName);
-
- if (isSearchTool) {
- return (
- <>
-
-
-
-
- );
- }
-
- // Full display for other tools
- return (
-
-
-
-
- {message.toolName}
- •
- {message.toolInput && (() => {
- try {
- const input = JSON.parse(message.toolInput);
- return (
-
- {input.pattern && {t('search.pattern')} {input.pattern}}
- {input.path && {t('search.in')} {input.path}}
-
- );
- } catch (e) {
- return null;
- }
- })()}
-
- {message.toolResult && (
-
- {t('tools.searchResults')}
-
-
- )}
-
- {/* Decorative gradient overlay */}
-
-
-
- );
- })()
- ) : message.isInteractivePrompt ? (
- // Special handling for interactive prompts
-
-
- {message.toolInput && message.toolName === 'Edit' && (() => {
- try {
- const input = JSON.parse(message.toolInput);
- if (input.file_path && input.old_string && input.new_string) {
- return (
-
-
- {onShowSettings && (
-
- )}
-
-
- {/* Subtle pulse animation */}
-
-
-
-
- {message.toolName}
-
-
- {message.toolId}
-
-
-
-
- );
- }
- } catch (e) {
- // Fall back to raw display if parsing fails
- }
- return (
- - - - View edit diff for - - -
-
-
-
-
- {showRawParameters && (
-
-
-
- Diff
-
-
-
- {createDiff(input.old_string, input.new_string).map((diffLine, i) => (
-
-
-
- {diffLine.type === 'removed' ? '-' : '+'}
-
-
- {diffLine.content}
-
-
- ))}
-
-
- )}
- - - View raw parameters -
-
- {message.toolInput}
-
-
-
- );
- })()}
- {message.toolInput && message.toolName !== 'Edit' && (() => {
- // Debug log to see what we're dealing with
-
- // Special handling for Write tool
- if (message.toolName === 'Write') {
- try {
- let input;
- // Handle both JSON string and already parsed object
- if (typeof message.toolInput === 'string') {
- input = JSON.parse(message.toolInput);
- } else {
- input = message.toolInput;
- }
-
-
- if (input.file_path && input.content !== undefined) {
- return (
- - - View input parameters -
-
- {message.toolInput}
-
-
-
- );
- }
- } catch (e) {
- // Fall back to regular display
- }
- }
-
- // Special handling for TodoWrite tool
- if (message.toolName === 'TodoWrite') {
- try {
- const input = JSON.parse(message.toolInput);
- if (input.todos && Array.isArray(input.todos)) {
- return (
- - - - 📄 - Creating new file: - - -
-
-
-
-
- {showRawParameters && (
-
-
-
- New File
-
-
-
- {createDiff('', input.content).map((diffLine, i) => (
-
-
-
- {diffLine.type === 'removed' ? '-' : '+'}
-
-
- {diffLine.content}
-
-
- ))}
-
-
- )}
- - - View raw parameters -
-
- {message.toolInput}
-
-
-
- );
- }
- } catch (e) {
- // Fall back to regular display
- }
- }
-
- // Special handling for Bash tool
- if (message.toolName === 'Bash') {
- try {
- const input = JSON.parse(message.toolInput);
- return (
- - - - ✓ - Updating Todo List - -
-
-
-
-
- )}
- - - View raw parameters -
-
- {message.toolInput}
-
-
-
- );
- } catch (e) {
- // Fall back to regular display
- }
- }
-
- // Special handling for Read tool
- if (message.toolName === 'Read') {
- try {
- const input = JSON.parse(message.toolInput);
- if (input.file_path) {
- const filename = input.file_path.split('/').pop();
-
- return (
-
- $
- {input.command}
-
- {input.description && (
-
- {input.description}
-
- )}
-
- Read{' '}
-
-
- );
- }
- } catch (e) {
- // Fall back to regular display
- }
- }
-
- // Special handling for exit_plan_mode tool
- if (message.toolName === 'exit_plan_mode') {
- try {
- const input = JSON.parse(message.toolInput);
- if (input.plan) {
- // Replace escaped newlines with actual newlines
- const planContent = input.plan.replace(/\\n/g, '\n');
- return (
-
-
- {planContent}
-
-
- );
- }
- } catch (e) {
- // Fall back to regular display
- }
- }
-
- // Regular tool input display for other tools
- return (
- - - 📋 View implementation plan -
-
-
- );
- })()}
-
- {/* Tool Result Section */}
- {message.toolResult && (() => {
- // Hide tool results for Edit/Write/Bash unless there's an error
- const shouldHideResult = !message.toolResult.isError &&
- (message.toolName === 'Edit' || message.toolName === 'Write' || message.toolName === 'ApplyPatch' || message.toolName === 'Bash');
-
- if (shouldHideResult) {
- return null;
- }
-
- return (
- - - View input parameters -
-
- {message.toolInput}
-
-
- {/* Decorative gradient overlay */}
-
-
-
- );
- })()}
-
-
-
-
-
-
-
- {message.toolResult.isError ? 'Tool Error' : 'Tool Result'}
-
-
- {(() => {
- const content = String(message.toolResult.content || '');
-
- // Special handling for TodoWrite/TodoRead results
- if ((message.toolName === 'TodoWrite' || message.toolName === 'TodoRead') &&
- (content.includes('Todos have been modified successfully') ||
- content.includes('Todo list') ||
- (content.startsWith('[') && content.includes('"content"') && content.includes('"status"')))) {
- try {
- // Try to parse if it looks like todo JSON data
- let todos = null;
- if (content.startsWith('[')) {
- todos = JSON.parse(content);
- } else if (content.includes('Todos have been modified successfully')) {
- // For TodoWrite success messages, we don't have the data in the result
- return (
-
- {content}
-
- );
- })()}
- {permissionSuggestion && (
-
-
-
- );
- }
-
- if (todos && Array.isArray(todos)) {
- return (
-
- Todo list has been updated successfully
-
-
-
- );
- }
- } catch (e) {
- // Fall through to regular handling
- }
- }
-
- // Special handling for exit_plan_mode tool results
- if (message.toolName === 'exit_plan_mode') {
- try {
- // The content should be JSON with a "plan" field
- const parsed = JSON.parse(content);
- if (parsed.plan) {
- // Replace escaped newlines with actual newlines
- const planContent = parsed.plan.replace(/\\n/g, '\n');
- return (
-
- Current Todo List
-
-
-
- {planContent}
-
-
- );
- }
- } catch (e) {
- // Fall through to regular handling
- }
- }
-
- // Special handling for Grep/Glob results with structured data
- if ((message.toolName === 'Grep' || message.toolName === 'Glob') && message.toolResult?.toolUseResult) {
- const toolData = message.toolResult.toolUseResult;
-
- // Handle files_with_matches mode or any tool result with filenames array
- if (toolData.filenames && Array.isArray(toolData.filenames) && toolData.filenames.length > 0) {
- return (
-
- Implementation Plan
-
-
-
- );
- }
- }
-
- // Special handling for interactive prompts
- if (content.includes('Do you want to proceed?') && message.toolName === 'Bash') {
- const lines = content.split('\n');
- const promptIndex = lines.findIndex(line => line.includes('Do you want to proceed?'));
- const beforePrompt = lines.slice(0, promptIndex).join('\n');
- const promptLines = lines.slice(promptIndex);
-
- // Extract the question and options
- const questionLine = promptLines.find(line => line.includes('Do you want to proceed?')) || '';
- const options = [];
-
- // Parse numbered options (1. Yes, 2. No, etc.)
- promptLines.forEach(line => {
- const optionMatch = line.match(/^\s*(\d+)\.\s+(.+)$/);
- if (optionMatch) {
- options.push({
- number: optionMatch[1],
- text: optionMatch[2].trim()
- });
- }
- });
-
- // Find which option was selected (usually indicated by "> 1" or similar)
- const selectedMatch = content.match(/>\s*(\d+)/);
- const selectedOption = selectedMatch ? selectedMatch[1] : null;
-
- return (
-
-
- Found {toolData.numFiles || toolData.filenames.length} {(toolData.numFiles === 1 || toolData.filenames.length === 1) ? 'file' : 'files'}
-
-
-
- {toolData.filenames.map((filePath, index) => {
- const fileName = filePath.split('/').pop();
- const dirPath = filePath.substring(0, filePath.lastIndexOf('/'));
-
- return (
-
- {
- if (onFileOpen) {
- onFileOpen(filePath);
- }
- }}
- className="group flex items-center gap-2 px-2 py-1.5 rounded hover:bg-green-100/50 dark:hover:bg-green-800/20 cursor-pointer transition-colors"
- >
-
-
- );
- })}
-
-
-
-
- {fileName}
-
-
- {dirPath}
-
-
- {beforePrompt && (
-
- );
- }
-
- const fileEditMatch = content.match(/The file (.+?) has been updated\./);
- if (fileEditMatch) {
- return (
-
-
- )}
- {beforePrompt}
-
-
-
-
-
-
-
-
-
- - Interactive Prompt -
-- {questionLine} -
- - {/* Option buttons */} -
- {options.map((option) => (
-
- ))}
-
-
- {selectedOption && (
-
-
- )}
- - ✓ Claude selected option {selectedOption} -
-- In the CLI, you would select this option interactively using arrow keys or by typing the number. -
-
-
- );
- }
-
- // Handle Write tool output for file creation
- const fileCreateMatch = content.match(/(?:The file|File) (.+?) has been (?:created|written)(?: successfully)?\.?/);
- if (fileCreateMatch) {
- return (
-
- File updated successfully
-
-
-
-
- );
- }
-
- // Special handling for Write tool - hide content if it's just the file content
- if (message.toolName === 'Write' && !message.toolResult.isError) {
- // For Write tool, the diff is already shown in the tool input section
- // So we just show a success message here
- return (
-
- File created successfully
-
-
-
-
- );
- }
-
- if (content.includes('cat -n') && content.includes('→')) {
- return (
-
-
- File written successfully
-
- - The file content is displayed in the diff view above -
-
-
- );
- }
-
- if (content.length > 300) {
- return (
- - - View file content -
-
-
-
- {content}
-
-
-
- {content}
-
-
- );
- }
-
- return (
- - - View full output ({content.length} chars) -
-
-
- )}
-
-
- {onShowSettings && (
-
- )}
-
-
- Adds {permissionSuggestion.entry} to Allowed Tools.
-
- {permissionGrantState === 'error' && (
-
- Unable to update permissions. Please try again.
-
- )}
- {(permissionSuggestion.isAllowed || permissionGrantState === 'granted') && (
-
- Permission saved. Retry the request to use the tool.
-
- )}
-
-
- ) : message.isToolUse && message.toolName === 'Read' ? (
- // Simple Read tool indicator
- (() => {
- try {
- const input = JSON.parse(message.toolInput);
- if (input.file_path) {
- const filename = input.file_path.split('/').pop();
- return (
-
-
-
-
-
-
-
- - Interactive Prompt -
- {(() => { - const lines = message.content.split('\n').filter(line => line.trim()); - const questionLine = lines.find(line => line.includes('?')) || lines[0] || ''; - const options = []; - - // Parse the menu options - lines.forEach(line => { - // Match lines like "❯ 1. Yes" or " 2. No" - const optionMatch = line.match(/[❯\s]*(\d+)\.\s+(.+)/); - if (optionMatch) { - const isSelected = line.includes('❯'); - options.push({ - number: optionMatch[1], - text: optionMatch[2].trim(), - isSelected - }); - } - }); - - return ( - <> -- {questionLine} -
- - {/* Option buttons */} -
- {options.map((option) => (
-
- ))}
-
-
-
-
-
- );
- })()}
- - ⏳ Waiting for your response in the CLI -
-- Please select an option in your terminal where Claude is running. -
-
-
- );
- }
- } catch (e) {
- return (
-
-
- Read
-
-
-
-
- );
- }
- })()
- ) : message.isToolUse && message.toolName === 'TodoWrite' ? (
- // Simple TodoWrite tool indicator with tasks
- (() => {
- try {
- const input = JSON.parse(message.toolInput);
- if (input.todos && Array.isArray(input.todos)) {
- return (
-
-
- Read file
-
-
-
- );
- }
- } catch (e) {
- return (
-
-
- Update todo list
-
-
-
- );
- }
- })()
- ) : message.isToolUse && message.toolName === 'TodoRead' ? (
- // Simple TodoRead tool indicator
-
-
- Update todo list
-
-
-
- ) : message.isThinking ? (
- /* Thinking messages - collapsible by default */
-
-
- Read todo list
-
-
-
- ) : (
-
-
- - - 💭 Thinking... -
-
-
- {message.content}
-
-
-
- {/* Thinking accordion for reasoning */}
- {showThinking && message.reasoning && (
-
- {content}
-
- ) : (
-
- )}
-
-
-
- )}
-
- {(() => {
- const content = formatUsageLimitText(String(message.content || ''));
-
- // Detect if content is pure JSON (starts with { or [)
- const trimmedContent = content.trim();
- if ((trimmedContent.startsWith('{') || trimmedContent.startsWith('[')) &&
- (trimmedContent.endsWith('}') || trimmedContent.endsWith(']'))) {
- try {
- const parsed = JSON.parse(trimmedContent);
- const formatted = JSON.stringify(parsed, null, 2);
-
- return (
- - 💭 Thinking... -
-
-
-
- {message.reasoning}
-
-
-
- );
- } catch (e) {
- // Not valid JSON, fall through to normal rendering
- }
- }
-
- // Normal rendering for non-JSON content
- return message.type === 'assistant' ? (
-
-
- JSON Response
-
-
-
-
-
- {formatted}
-
-
-
- {content}
-
- );
- })()}
-
- {new Date(message.timestamp).toLocaleTimeString()}
-
-
- 
- {uploadProgress !== undefined && uploadProgress < 100 && (
-
- );
-};
-
-// ChatInterface: Main chat component with Session Protection System integration
-//
-// Session Protection System prevents automatic project updates from interrupting active conversations:
-// - onSessionActive: Called when user sends message to mark session as protected
-// - onSessionInactive: Called when conversation completes/aborts to re-enable updates
-// - onReplaceTemporarySession: Called to replace temporary session ID with real WebSocket session ID
-//
-// This ensures uninterrupted chat experience by pausing sidebar refreshes during conversations.
-function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, latestMessage, onFileOpen, onInputFocusChange, onSessionActive, onSessionInactive, onSessionProcessing, onSessionNotProcessing, processingSessions, onReplaceTemporarySession, onNavigateToSession, onShowSettings, autoExpandTools, showRawParameters, showThinking, autoScrollToBottom, sendByCtrlEnter, externalMessageUpdate, onTaskClick, onShowAllTasks }) {
- const { tasksEnabled, isTaskMasterInstalled } = useTasksSettings();
- const { t } = useTranslation('chat');
- const [input, setInput] = useState(() => {
- if (typeof window !== 'undefined' && selectedProject) {
- return safeLocalStorage.getItem(`draft_input_${selectedProject.name}`) || '';
- }
- return '';
- });
- const [chatMessages, setChatMessages] = useState(() => {
- if (typeof window !== 'undefined' && selectedProject) {
- const saved = safeLocalStorage.getItem(`chat_messages_${selectedProject.name}`);
- return saved ? JSON.parse(saved) : [];
- }
- return [];
- });
- const [isLoading, setIsLoading] = useState(false);
- const [currentSessionId, setCurrentSessionId] = useState(selectedSession?.id || null);
- const [isInputFocused, setIsInputFocused] = useState(false);
- const [sessionMessages, setSessionMessages] = useState([]);
- const [isLoadingSessionMessages, setIsLoadingSessionMessages] = useState(false);
- const [isLoadingMoreMessages, setIsLoadingMoreMessages] = useState(false);
- const [messagesOffset, setMessagesOffset] = useState(0);
- const [hasMoreMessages, setHasMoreMessages] = useState(false);
- const [totalMessages, setTotalMessages] = useState(0);
- const MESSAGES_PER_PAGE = 20;
- const [isSystemSessionChange, setIsSystemSessionChange] = useState(false);
- const [permissionMode, setPermissionMode] = useState('default');
- // In-memory queue of tool permission prompts for the current UI view.
- // These are not persisted and do not survive a page refresh; introduced so
- // the UI can present pending approvals while the SDK waits.
- const [pendingPermissionRequests, setPendingPermissionRequests] = useState([]);
- const [attachedImages, setAttachedImages] = useState([]);
- const [uploadingImages, setUploadingImages] = useState(new Map());
- const [imageErrors, setImageErrors] = useState(new Map());
- const messagesEndRef = useRef(null);
- const textareaRef = useRef(null);
- const inputContainerRef = useRef(null);
- const inputHighlightRef = useRef(null);
- const scrollContainerRef = useRef(null);
- const isLoadingSessionRef = useRef(false); // Track session loading to prevent multiple scrolls
- const isLoadingMoreRef = useRef(false);
- const topLoadLockRef = useRef(false);
- const pendingScrollRestoreRef = useRef(null);
- // Streaming throttle buffers
- const streamBufferRef = useRef('');
- const streamTimerRef = useRef(null);
- // Track the session that this view expects when starting a brand‑new chat
- // (prevents background sessions from streaming into a different view).
- const pendingViewSessionRef = useRef(null);
- const commandQueryTimerRef = useRef(null);
- const [debouncedInput, setDebouncedInput] = useState('');
- const [showFileDropdown, setShowFileDropdown] = useState(false);
- const [fileList, setFileList] = useState([]);
- const [fileMentions, setFileMentions] = useState([]);
- const [filteredFiles, setFilteredFiles] = useState([]);
- const [selectedFileIndex, setSelectedFileIndex] = useState(-1);
- const [cursorPosition, setCursorPosition] = useState(0);
- const [atSymbolPosition, setAtSymbolPosition] = useState(-1);
- const [canAbortSession, setCanAbortSession] = useState(false);
- const [isUserScrolledUp, setIsUserScrolledUp] = useState(false);
- const scrollPositionRef = useRef({ height: 0, top: 0 });
- const [showCommandMenu, setShowCommandMenu] = useState(false);
- const [slashCommands, setSlashCommands] = useState([]);
- const [filteredCommands, setFilteredCommands] = useState([]);
- const [commandQuery, setCommandQuery] = useState('');
- const [isTextareaExpanded, setIsTextareaExpanded] = useState(false);
- const [tokenBudget, setTokenBudget] = useState(null);
- const [selectedCommandIndex, setSelectedCommandIndex] = useState(-1);
- const [slashPosition, setSlashPosition] = useState(-1);
- const [visibleMessageCount, setVisibleMessageCount] = useState(100);
- const [claudeStatus, setClaudeStatus] = useState(null);
- const [thinkingMode, setThinkingMode] = useState('none');
- const [provider, setProvider] = useState(() => {
- return localStorage.getItem('selected-provider') || 'claude';
- });
- const [cursorModel, setCursorModel] = useState(() => {
- return localStorage.getItem('cursor-model') || CURSOR_MODELS.DEFAULT;
- });
- const [claudeModel, setClaudeModel] = useState(() => {
- return localStorage.getItem('claude-model') || CLAUDE_MODELS.DEFAULT;
- });
- const [codexModel, setCodexModel] = useState(() => {
- return localStorage.getItem('codex-model') || CODEX_MODELS.DEFAULT;
- });
- // Track provider transitions so we only clear approvals when provider truly changes.
- // This does not sync with the backend; it just prevents UI prompts from disappearing.
- const lastProviderRef = useRef(provider);
-
- const resetStreamingState = useCallback(() => {
- if (streamTimerRef.current) {
- clearTimeout(streamTimerRef.current);
- streamTimerRef.current = null;
- }
- streamBufferRef.current = '';
- }, []);
- // Load permission mode for the current session
- useEffect(() => {
- if (selectedSession?.id) {
- const savedMode = localStorage.getItem(`permissionMode-${selectedSession.id}`);
- if (savedMode) {
- setPermissionMode(savedMode);
- } else {
- setPermissionMode('default');
- }
- }
- }, [selectedSession?.id]);
-
- // When selecting a session from Sidebar, auto-switch provider to match session's origin
- useEffect(() => {
- if (selectedSession && selectedSession.__provider && selectedSession.__provider !== provider) {
- setProvider(selectedSession.__provider);
- localStorage.setItem('selected-provider', selectedSession.__provider);
- }
- }, [selectedSession]);
-
- // Clear pending permission prompts when switching providers; filter when switching sessions.
- // This does not preserve prompts across provider changes; it exists to keep the
- // Claude approval flow intact while preventing prompts from a different provider.
- useEffect(() => {
- if (lastProviderRef.current !== provider) {
- setPendingPermissionRequests([]);
- lastProviderRef.current = provider;
- }
- }, [provider]);
-
- // When the selected session changes, drop prompts that belong to other sessions.
- // This does not attempt to migrate prompts across sessions; it only filters,
- // introduced so the UI does not show approvals for a session the user is no longer viewing.
- useEffect(() => {
- setPendingPermissionRequests(prev => prev.filter(req => !req.sessionId || req.sessionId === selectedSession?.id));
- }, [selectedSession?.id]);
-
- // Load Cursor default model from config
- useEffect(() => {
- if (provider === 'cursor') {
- authenticatedFetch('/api/cursor/config')
- .then(res => res.json())
- .then(data => {
- if (data.success && data.config?.model?.modelId) {
- // Use the model from config directly
- const modelId = data.config.model.modelId;
- if (!localStorage.getItem('cursor-model')) {
- setCursorModel(modelId);
- }
- }
- })
- .catch(err => console.error('Error loading Cursor config:', err));
- }
- }, [provider]);
-
- // Fetch slash commands on mount and when project changes
- useEffect(() => {
- const fetchCommands = async () => {
- if (!selectedProject) return;
-
- try {
- const response = await authenticatedFetch('/api/commands/list', {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify({
- projectPath: selectedProject.path
- })
- });
-
- if (!response.ok) {
- throw new Error('Failed to fetch commands');
- }
-
- const data = await response.json();
-
- // Combine built-in and custom commands
- const allCommands = [
- ...(data.builtIn || []).map(cmd => ({ ...cmd, type: 'built-in' })),
- ...(data.custom || []).map(cmd => ({ ...cmd, type: 'custom' }))
- ];
-
- setSlashCommands(allCommands);
-
- // Load command history from localStorage
- const historyKey = `command_history_${selectedProject.name}`;
- const history = safeLocalStorage.getItem(historyKey);
- if (history) {
- try {
- const parsedHistory = JSON.parse(history);
- // Sort commands by usage frequency
- const sortedCommands = allCommands.sort((a, b) => {
- const aCount = parsedHistory[a.name] || 0;
- const bCount = parsedHistory[b.name] || 0;
- return bCount - aCount;
- });
- setSlashCommands(sortedCommands);
- } catch (e) {
- console.error('Error parsing command history:', e);
- }
- }
- } catch (error) {
- console.error('Error fetching slash commands:', error);
- setSlashCommands([]);
- }
- };
-
- fetchCommands();
- }, [selectedProject]);
-
- // Create Fuse instance for fuzzy search
- const fuse = useMemo(() => {
- if (!slashCommands.length) return null;
-
- return new Fuse(slashCommands, {
- keys: [
- { name: 'name', weight: 2 },
- { name: 'description', weight: 1 }
- ],
- threshold: 0.4,
- includeScore: true,
- minMatchCharLength: 1
- });
- }, [slashCommands]);
-
- // Filter commands based on query
- useEffect(() => {
- if (!commandQuery) {
- setFilteredCommands(slashCommands);
- return;
- }
-
- if (!fuse) {
- setFilteredCommands([]);
- return;
- }
-
- const results = fuse.search(commandQuery);
- setFilteredCommands(results.map(result => result.item));
- }, [commandQuery, slashCommands, fuse]);
-
- // Calculate frequently used commands
- const frequentCommands = useMemo(() => {
- if (!selectedProject || slashCommands.length === 0) return [];
-
- const historyKey = `command_history_${selectedProject.name}`;
- const history = safeLocalStorage.getItem(historyKey);
-
- if (!history) return [];
-
- try {
- const parsedHistory = JSON.parse(history);
-
- // Sort commands by usage count
- const commandsWithUsage = slashCommands
- .map(cmd => ({
- ...cmd,
- usageCount: parsedHistory[cmd.name] || 0
- }))
- .filter(cmd => cmd.usageCount > 0)
- .sort((a, b) => b.usageCount - a.usageCount)
- .slice(0, 5); // Top 5 most used
-
- return commandsWithUsage;
- } catch (e) {
- console.error('Error parsing command history:', e);
- return [];
- }
- }, [selectedProject, slashCommands]);
-
- // Command selection callback with history tracking
- const handleCommandSelect = useCallback((command, index, isHover) => {
- if (!command || !selectedProject) return;
-
- // If hovering, just update the selected index
- if (isHover) {
- setSelectedCommandIndex(index);
- return;
- }
-
- // Update command history
- const historyKey = `command_history_${selectedProject.name}`;
- const history = safeLocalStorage.getItem(historyKey);
- let parsedHistory = {};
-
- try {
- parsedHistory = history ? JSON.parse(history) : {};
- } catch (e) {
- console.error('Error parsing command history:', e);
- }
-
- parsedHistory[command.name] = (parsedHistory[command.name] || 0) + 1;
- safeLocalStorage.setItem(historyKey, JSON.stringify(parsedHistory));
-
- // Execute the command
- executeCommand(command);
- }, [selectedProject]);
-
- // Execute a command
- const handleBuiltInCommand = useCallback((result) => {
- const { action, data } = result;
-
- switch (action) {
- case 'clear':
- // Clear conversation history
- setChatMessages([]);
- setSessionMessages([]);
- break;
-
- case 'help':
- // Show help content
- setChatMessages(prev => [...prev, {
- role: 'assistant',
- content: data.content,
- timestamp: Date.now()
- }]);
- break;
-
- case 'model':
- // Show model information
- setChatMessages(prev => [...prev, {
- role: 'assistant',
- content: `**Current Model**: ${data.current.model}\n\n**Available Models**:\n\nClaude: ${data.available.claude.join(', ')}\n\nCursor: ${data.available.cursor.join(', ')}`,
- timestamp: Date.now()
- }]);
- break;
-
- case 'cost': {
- const costMessage = `**Token Usage**: ${data.tokenUsage.used.toLocaleString()} / ${data.tokenUsage.total.toLocaleString()} (${data.tokenUsage.percentage}%)\n\n**Estimated Cost**:\n- Input: $${data.cost.input}\n- Output: $${data.cost.output}\n- **Total**: $${data.cost.total}\n\n**Model**: ${data.model}`;
- setChatMessages(prev => [...prev, { role: 'assistant', content: costMessage, timestamp: Date.now() }]);
- break;
- }
-
- case 'status': {
- const statusMessage = `**System Status**\n\n- Version: ${data.version}\n- Uptime: ${data.uptime}\n- Model: ${data.model}\n- Provider: ${data.provider}\n- Node.js: ${data.nodeVersion}\n- Platform: ${data.platform}`;
- setChatMessages(prev => [...prev, { role: 'assistant', content: statusMessage, timestamp: Date.now() }]);
- break;
- }
- case 'memory':
- // Show memory file info
- if (data.error) {
- setChatMessages(prev => [...prev, {
- role: 'assistant',
- content: `⚠️ ${data.message}`,
- timestamp: Date.now()
- }]);
- } else {
- setChatMessages(prev => [...prev, {
- role: 'assistant',
- content: `📝 ${data.message}\n\nPath: \`${data.path}\``,
- timestamp: Date.now()
- }]);
- // Optionally open file in editor
- if (data.exists && onFileOpen) {
- onFileOpen(data.path);
- }
- }
- break;
-
- case 'config':
- // Open settings
- if (onShowSettings) {
- onShowSettings();
- }
- break;
-
- case 'rewind':
- // Rewind conversation
- if (data.error) {
- setChatMessages(prev => [...prev, {
- role: 'assistant',
- content: `⚠️ ${data.message}`,
- timestamp: Date.now()
- }]);
- } else {
- // Remove last N messages
- setChatMessages(prev => prev.slice(0, -data.steps * 2)); // Remove user + assistant pairs
- setChatMessages(prev => [...prev, {
- role: 'assistant',
- content: `⏪ ${data.message}`,
- timestamp: Date.now()
- }]);
- }
- break;
-
- default:
- console.warn('Unknown built-in command action:', action);
- }
- }, [onFileOpen, onShowSettings]);
-
- // Ref to store handleSubmit so we can call it from handleCustomCommand
- const handleSubmitRef = useRef(null);
-
- // Handle custom command execution
- const handleCustomCommand = useCallback(async (result, args) => {
- const { content, hasBashCommands, hasFileIncludes } = result;
-
- // Show confirmation for bash commands
- if (hasBashCommands) {
- const confirmed = window.confirm(
- 'This command contains bash commands that will be executed. Do you want to proceed?'
- );
- if (!confirmed) {
- setChatMessages(prev => [...prev, {
- role: 'assistant',
- content: '❌ Command execution cancelled',
- timestamp: Date.now()
- }]);
- return;
- }
- }
-
- // Set the input to the command content
- setInput(content);
-
- // Wait for state to update, then directly call handleSubmit
- setTimeout(() => {
- if (handleSubmitRef.current) {
- // Create a fake event to pass to handleSubmit
- const fakeEvent = { preventDefault: () => {} };
- handleSubmitRef.current(fakeEvent);
- }
- }, 50);
- }, []);
- const executeCommand = useCallback(async (command) => {
- if (!command || !selectedProject) return;
-
- try {
- // Parse command and arguments from current input
- const commandMatch = input.match(new RegExp(`${command.name}\\s*(.*)`));
- const args = commandMatch && commandMatch[1]
- ? commandMatch[1].trim().split(/\s+/)
- : [];
-
- // Prepare context for command execution
- const context = {
- projectPath: selectedProject.path,
- projectName: selectedProject.name,
- sessionId: currentSessionId,
- provider,
- model: provider === 'cursor' ? cursorModel : claudeModel,
- tokenUsage: tokenBudget
- };
-
- // Call the execute endpoint
- const response = await authenticatedFetch('/api/commands/execute', {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify({
- commandName: command.name,
- commandPath: command.path,
- args,
- context
- })
- });
-
- if (!response.ok) {
- throw new Error('Failed to execute command');
- }
-
- const result = await response.json();
-
- // Handle built-in commands
- if (result.type === 'builtin') {
- handleBuiltInCommand(result);
- } else if (result.type === 'custom') {
- // Handle custom commands - inject as system message
- await handleCustomCommand(result, args);
- }
-
- // Clear the input after successful execution
- setInput('');
- setShowCommandMenu(false);
- setSlashPosition(-1);
- setCommandQuery('');
- setSelectedCommandIndex(-1);
-
- } catch (error) {
- console.error('Error executing command:', error);
- // Show error message to user
- setChatMessages(prev => [...prev, {
- role: 'assistant',
- content: `Error executing command: ${error.message}`,
- timestamp: Date.now()
- }]);
- }
- }, [input, selectedProject, currentSessionId, provider, cursorModel, tokenBudget]);
-
- // Handle built-in command actions
-
-
- // Memoized diff calculation to prevent recalculating on every render
- const createDiff = useMemo(() => {
- const cache = new Map();
- return (oldStr, newStr) => {
- const key = `${oldStr.length}-${newStr.length}-${oldStr.slice(0, 50)}`;
- if (cache.has(key)) {
- return cache.get(key);
- }
-
- const result = calculateDiff(oldStr, newStr);
- cache.set(key, result);
- if (cache.size > 100) {
- const firstKey = cache.keys().next().value;
- cache.delete(firstKey);
- }
- return result;
- };
- }, []);
-
- // Load session messages from API with pagination
- 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, 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);
- setTotalMessages(data.total);
- setMessagesOffset(currentOffset + (data.messages?.length || 0));
- return data.messages || [];
- } else {
- // Backward compatibility for non-paginated response
- const messages = data.messages || [];
- setHasMoreMessages(false);
- setTotalMessages(messages.length);
- return messages;
- }
- } catch (error) {
- console.error('Error loading session messages:', error);
- return [];
- } finally {
- if (isInitialLoad) {
- setIsLoadingSessionMessages(false);
- } else {
- setIsLoadingMoreMessages(false);
- }
- }
- }, [messagesOffset]);
-
- // Load Cursor session messages from SQLite via backend
- const loadCursorSessionMessages = useCallback(async (projectPath, sessionId) => {
- if (!projectPath || !sessionId) return [];
- setIsLoadingSessionMessages(true);
- try {
- const url = `/api/cursor/sessions/${encodeURIComponent(sessionId)}?projectPath=${encodeURIComponent(projectPath)}`;
- const res = await authenticatedFetch(url);
- if (!res.ok) return [];
- const data = await res.json();
- const blobs = data?.session?.messages || [];
- const converted = [];
- const toolUseMap = {}; // Map to store tool uses by ID for linking results
-
- // First pass: process all messages maintaining order
- for (let blobIdx = 0; blobIdx < blobs.length; blobIdx++) {
- const blob = blobs[blobIdx];
- const content = blob.content;
- let text = '';
- let role = 'assistant';
- let reasoningText = null; // Move to outer scope
- try {
- // Handle different Cursor message formats
- if (content?.role && content?.content) {
- // Direct format: {"role":"user","content":[{"type":"text","text":"..."}]}
- // Skip system messages
- if (content.role === 'system') {
- continue;
- }
-
- // Handle tool messages
- if (content.role === 'tool') {
- // Tool result format - find the matching tool use message and update it
- if (Array.isArray(content.content)) {
- for (const item of content.content) {
- if (item?.type === 'tool-result') {
- // Map ApplyPatch to Edit for consistency
- let toolName = item.toolName || 'Unknown Tool';
- if (toolName === 'ApplyPatch') {
- toolName = 'Edit';
- }
- const toolCallId = item.toolCallId || content.id;
- const result = item.result || '';
-
- // Store the tool result to be linked later
- if (toolUseMap[toolCallId]) {
- toolUseMap[toolCallId].toolResult = {
- content: result,
- isError: false
- };
- } else {
- // No matching tool use found, create a standalone result message
- converted.push({
- type: 'assistant',
- content: '',
- timestamp: new Date(Date.now() + blobIdx * 1000),
- blobId: blob.id,
- sequence: blob.sequence,
- rowid: blob.rowid,
- isToolUse: true,
- toolName: toolName,
- toolId: toolCallId,
- toolInput: null,
- toolResult: {
- content: result,
- isError: false
- }
- });
- }
- }
- }
- }
- continue; // Don't add tool messages as regular messages
- } else {
- // User or assistant messages
- role = content.role === 'user' ? 'user' : 'assistant';
-
- if (Array.isArray(content.content)) {
- // Extract text, reasoning, and tool calls from content array
- const textParts = [];
-
- for (const part of content.content) {
- if (part?.type === 'text' && part?.text) {
- textParts.push(decodeHtmlEntities(part.text));
- } else if (part?.type === 'reasoning' && part?.text) {
- // Handle reasoning type - will be displayed in a collapsible section
- reasoningText = decodeHtmlEntities(part.text);
- } else if (part?.type === 'tool-call') {
- // First, add any text/reasoning we've collected so far as a message
- if (textParts.length > 0 || reasoningText) {
- converted.push({
- type: role,
- content: textParts.join('\n'),
- reasoning: reasoningText,
- timestamp: new Date(Date.now() + blobIdx * 1000),
- blobId: blob.id,
- sequence: blob.sequence,
- rowid: blob.rowid
- });
- textParts.length = 0;
- reasoningText = null;
- }
-
- // Tool call in assistant message - format like Claude Code
- // Map ApplyPatch to Edit for consistency with Claude Code
- let toolName = part.toolName || 'Unknown Tool';
- if (toolName === 'ApplyPatch') {
- toolName = 'Edit';
- }
- const toolId = part.toolCallId || `tool_${blobIdx}`;
-
- // Create a tool use message with Claude Code format
- // Map Cursor args format to Claude Code format
- let toolInput = part.args;
-
- if (toolName === 'Edit' && part.args) {
- // ApplyPatch uses 'patch' format, convert to Edit format
- if (part.args.patch) {
- // Parse the patch to extract old and new content
- const patchLines = part.args.patch.split('\n');
- let oldLines = [];
- let newLines = [];
- let inPatch = false;
-
- for (const line of patchLines) {
- if (line.startsWith('@@')) {
- inPatch = true;
- } else if (inPatch) {
- if (line.startsWith('-')) {
- oldLines.push(line.substring(1));
- } else if (line.startsWith('+')) {
- newLines.push(line.substring(1));
- } else if (line.startsWith(' ')) {
- // Context line - add to both
- oldLines.push(line.substring(1));
- newLines.push(line.substring(1));
- }
- }
- }
-
- const filePath = part.args.file_path;
- const absolutePath = filePath && !filePath.startsWith('/')
- ? `${projectPath}/${filePath}`
- : filePath;
- toolInput = {
- file_path: absolutePath,
- old_string: oldLines.join('\n') || part.args.patch,
- new_string: newLines.join('\n') || part.args.patch
- };
- } else {
- // Direct edit format
- toolInput = part.args;
- }
- } else if (toolName === 'Read' && part.args) {
- // Map 'path' to 'file_path'
- // Convert relative path to absolute if needed
- const filePath = part.args.path || part.args.file_path;
- const absolutePath = filePath && !filePath.startsWith('/')
- ? `${projectPath}/${filePath}`
- : filePath;
- toolInput = {
- file_path: absolutePath
- };
- } else if (toolName === 'Write' && part.args) {
- // Map fields for Write tool
- const filePath = part.args.path || part.args.file_path;
- const absolutePath = filePath && !filePath.startsWith('/')
- ? `${projectPath}/${filePath}`
- : filePath;
- toolInput = {
- file_path: absolutePath,
- content: part.args.contents || part.args.content
- };
- }
-
- const toolMessage = {
- type: 'assistant',
- content: '',
- timestamp: new Date(Date.now() + blobIdx * 1000),
- blobId: blob.id,
- sequence: blob.sequence,
- rowid: blob.rowid,
- isToolUse: true,
- toolName: toolName,
- toolId: toolId,
- toolInput: toolInput ? JSON.stringify(toolInput) : null,
- toolResult: null // Will be filled when we get the tool result
- };
- converted.push(toolMessage);
- toolUseMap[toolId] = toolMessage; // Store for linking results
- } else if (part?.type === 'tool_use') {
- // Old format support
- if (textParts.length > 0 || reasoningText) {
- converted.push({
- type: role,
- content: textParts.join('\n'),
- reasoning: reasoningText,
- timestamp: new Date(Date.now() + blobIdx * 1000),
- blobId: blob.id,
- sequence: blob.sequence,
- rowid: blob.rowid
- });
- textParts.length = 0;
- reasoningText = null;
- }
-
- const toolName = part.name || 'Unknown Tool';
- const toolId = part.id || `tool_${blobIdx}`;
-
- const toolMessage = {
- type: 'assistant',
- content: '',
- timestamp: new Date(Date.now() + blobIdx * 1000),
- blobId: blob.id,
- sequence: blob.sequence,
- rowid: blob.rowid,
- isToolUse: true,
- toolName: toolName,
- toolId: toolId,
- toolInput: part.input ? JSON.stringify(part.input) : null,
- toolResult: null
- };
- converted.push(toolMessage);
- toolUseMap[toolId] = toolMessage;
- } else if (typeof part === 'string') {
- textParts.push(part);
- }
- }
-
- // Add any remaining text/reasoning
- if (textParts.length > 0) {
- text = textParts.join('\n');
- if (reasoningText && !text) {
- // Just reasoning, no text
- converted.push({
- type: role,
- content: '',
- reasoning: reasoningText,
- timestamp: new Date(Date.now() + blobIdx * 1000),
- blobId: blob.id,
- sequence: blob.sequence,
- rowid: blob.rowid
- });
- text = ''; // Clear to avoid duplicate
- }
- } else {
- text = '';
- }
- } else if (typeof content.content === 'string') {
- text = content.content;
- }
- }
- } else if (content?.message?.role && content?.message?.content) {
- // Nested message format
- if (content.message.role === 'system') {
- continue;
- }
- role = content.message.role === 'user' ? 'user' : 'assistant';
- if (Array.isArray(content.message.content)) {
- text = content.message.content
- .map(p => (typeof p === 'string' ? p : (p?.text || '')))
- .filter(Boolean)
- .join('\n');
- } else if (typeof content.message.content === 'string') {
- text = content.message.content;
- }
- }
- } catch (e) {
- console.log('Error parsing blob content:', e);
- }
- if (text && text.trim()) {
- const message = {
- type: role,
- content: text,
- timestamp: new Date(Date.now() + blobIdx * 1000),
- blobId: blob.id,
- sequence: blob.sequence,
- rowid: blob.rowid
- };
-
- // Add reasoning if we have it
- if (reasoningText) {
- message.reasoning = reasoningText;
- }
-
- converted.push(message);
- }
- }
-
- // Sort messages by sequence/rowid to maintain chronological order
- converted.sort((a, b) => {
- // First sort by sequence if available (clean 1,2,3... numbering)
- if (a.sequence !== undefined && b.sequence !== undefined) {
- return a.sequence - b.sequence;
- }
- // Then try rowid (original SQLite row IDs)
- if (a.rowid !== undefined && b.rowid !== undefined) {
- return a.rowid - b.rowid;
- }
- // Fallback to timestamp
- return new Date(a.timestamp) - new Date(b.timestamp);
- });
-
- return converted;
- } catch (e) {
- console.error('Error loading Cursor session messages:', e);
- return [];
- } finally {
- setIsLoadingSessionMessages(false);
- }
- }, []);
-
- // Actual diff calculation function
- const calculateDiff = (oldStr, newStr) => {
- const oldLines = oldStr.split('\n');
- const newLines = newStr.split('\n');
-
- // Simple diff algorithm - find common lines and differences
- const diffLines = [];
- let oldIndex = 0;
- let newIndex = 0;
-
- while (oldIndex < oldLines.length || newIndex < newLines.length) {
- const oldLine = oldLines[oldIndex];
- const newLine = newLines[newIndex];
-
- if (oldIndex >= oldLines.length) {
- // Only new lines remaining
- diffLines.push({ type: 'added', content: newLine, lineNum: newIndex + 1 });
- newIndex++;
- } else if (newIndex >= newLines.length) {
- // Only old lines remaining
- diffLines.push({ type: 'removed', content: oldLine, lineNum: oldIndex + 1 });
- oldIndex++;
- } else if (oldLine === newLine) {
- // Lines are the same - skip in diff view (or show as context)
- oldIndex++;
- newIndex++;
- } else {
- // Lines are different
- diffLines.push({ type: 'removed', content: oldLine, lineNum: oldIndex + 1 });
- diffLines.push({ type: 'added', content: newLine, lineNum: newIndex + 1 });
- oldIndex++;
- newIndex++;
- }
- }
-
- return diffLines;
- };
-
- const convertSessionMessages = (rawMessages) => {
- const converted = [];
- const toolResults = new Map(); // Map tool_use_id to tool result
-
- // First pass: collect all tool results
- for (const msg of rawMessages) {
- if (msg.message?.role === 'user' && Array.isArray(msg.message?.content)) {
- for (const part of msg.message.content) {
- if (part.type === 'tool_result') {
- toolResults.set(part.tool_use_id, {
- content: part.content,
- isError: part.is_error,
- timestamp: new Date(msg.timestamp || Date.now()),
- // Extract structured tool result data (e.g., for Grep, Glob)
- toolUseResult: msg.toolUseResult || null
- });
- }
- }
- }
- }
-
- // Second pass: process messages and attach tool results to tool uses
- for (const msg of rawMessages) {
- // Handle user messages
- if (msg.message?.role === 'user' && msg.message?.content) {
- let content = '';
- let messageType = 'user';
-
- if (Array.isArray(msg.message.content)) {
- // Handle array content, but skip tool results (they're attached to tool uses)
- const textParts = [];
-
- for (const part of msg.message.content) {
- if (part.type === 'text') {
- textParts.push(decodeHtmlEntities(part.text));
- }
- // Skip tool_result parts - they're handled in the first pass
- }
-
- content = textParts.join('\n');
- } else if (typeof msg.message.content === 'string') {
- content = decodeHtmlEntities(msg.message.content);
- } else {
- content = decodeHtmlEntities(String(msg.message.content));
- }
-
- // Skip command messages, system messages, and empty content
- const shouldSkip = !content ||
- content.startsWith('
-
- )}
- {error && (
- {uploadProgress}%
-
-
-
- )}
-
-
-
- );
- }
-
- return (
- <>
-
-
-
- Select a project to start chatting with Claude
-
- {/* Messages Area - Scrollable Middle Section */}
-
- {isLoadingSessionMessages && chatMessages.length === 0 ? (
-
-
-
- {/* Input Area - Fixed Bottom */}
-
-
- ) : chatMessages.length === 0 ? (
-
-
-
- {t('session.loading.sessionMessages')}
-
- {!selectedSession && !currentSessionId && (
-
- ) : (
- <>
- {/* Loading indicator for older messages */}
- {isLoadingMoreMessages && (
-
-
- )}
- {selectedSession && (
- {t('providerSelection.title')}
-- {t('providerSelection.description')} -
- -
- {/* Claude Button */}
-
-
- {/* Cursor Button */}
-
-
- {/* Codex Button */}
-
-
-
- {/* Model Selection - Always reserve space to prevent jumping */}
-
-
- {provider === 'claude' ? (
-
- ) : provider === 'codex' ? (
-
- ) : (
-
- )}
-
-
- - {provider === 'claude' - ? t('providerSelection.readyPrompt.claude', { model: claudeModel }) - : provider === 'cursor' - ? t('providerSelection.readyPrompt.cursor', { model: cursorModel }) - : provider === 'codex' - ? t('providerSelection.readyPrompt.codex', { model: codexModel }) - : t('providerSelection.readyPrompt.default') - } -
- - {/* Show NextTaskBanner when provider is selected and ready, only if TaskMaster is installed */} - {provider && tasksEnabled && isTaskMasterInstalled && ( -
- setInput('Start the next task')}
- onShowAllTasks={onShowAllTasks}
- />
-
- )}
-
-
- )}
- {t('session.continue.title')}
-- {t('session.continue.description')} -
- - {/* Show NextTaskBanner for existing sessions too, only if TaskMaster is installed */} - {tasksEnabled && isTaskMasterInstalled && ( -
- setInput('Start the next task')}
- onShowAllTasks={onShowAllTasks}
- />
-
- )}
-
-
- )}
-
- {/* Indicator showing there are more messages to load */}
- {hasMoreMessages && !isLoadingMoreMessages && (
-
-
-
- {t('session.loading.olderMessages')}
-
- {totalMessages > 0 && (
-
- {t('session.messages.showingOf', { shown: sessionMessages.length, total: totalMessages })} •
- {t('session.messages.scrollToLoad')}
-
- )}
-
- )}
-
- {/* Legacy message count indicator (for non-paginated view) */}
- {!hasMoreMessages && chatMessages.length > visibleMessageCount && (
-
- {t('session.messages.showingLast', { count: visibleMessageCount, total: chatMessages.length })} •
-
-
- )}
-
- {visibleMessages.map((message, index) => {
- const prevMessage = index > 0 ? visibleMessages[index - 1] : null;
-
- return (
-
-
- )}
-
-
-
-
-
-
-
- {(localStorage.getItem('selected-provider') || 'claude') === 'cursor' ? (
-
- {(localStorage.getItem('selected-provider') || 'claude') === 'cursor' ? 'Cursor' : (localStorage.getItem('selected-provider') || 'claude') === 'codex' ? 'Codex' : 'Claude'}
- {/* Abort button removed - functionality not yet implemented at backend */}
-
-
-
-
- ●
- ●
- ●
- Thinking...
-
-
-
-
- {/* Permission Mode Selector with scroll to bottom button - Above input, clickable for mobile */}
-
- {pendingPermissionRequests.length > 0 && (
- // Permission banner for tool approvals. This renders the input, allows
- // "allow once" or "allow & remember", and supports batching similar requests.
- // It does not persist permissions by itself; persistence is handled by
- // the existing localStorage-based settings helpers, introduced to surface
- // approvals before tool execution resumes.
-
-
-
- {pendingPermissionRequests.map((request) => {
- const rawInput = formatToolInputForDisplay(request.input);
- const permissionEntry = buildClaudeToolPermissionEntry(request.toolName, rawInput);
- const settings = getClaudeSettings();
- const alreadyAllowed = permissionEntry
- ? settings.allowedTools.includes(permissionEntry)
- : false;
- const rememberLabel = alreadyAllowed ? 'Allow (saved)' : 'Allow & remember';
- // Group pending prompts that resolve to the same allow rule so
- // a single "Allow & remember" can clear them in one click.
- // This does not attempt fuzzy matching; it only batches identical rules.
- const matchingRequestIds = permissionEntry
- ? pendingPermissionRequests
- .filter(item => buildClaudeToolPermissionEntry(item.toolName, formatToolInputForDisplay(item.input)) === permissionEntry)
- .map(item => item.requestId)
- : [request.requestId];
-
- return (
-
- )}
-
-
-
- );
- })}
-
-
-
- {rawInput && (
-
-
- {permissionEntry && (
-
- Permission required
-
-
- Tool: {request.toolName}
-
-
- Allow rule: {permissionEntry}
-
- )}
-
-
- )}
-
- - View tool input -
-
- {rawInput}
-
-
-
-
-
-
-
-
-
- {/* Thinking Mode Selector */}
- {
- provider === 'claude' && (
-
-
-