Implement Phase 1 of the file editor & chat UI redesign:
- CodeMirror 6 integration with syntax highlighting
- Multi-file tab support with dirty state tracking
- Custom dark theme matching GitHub's color scheme
- Keyboard shortcuts (Ctrl+S to save, Ctrl+W to close tab)
- Mobile-responsive design with proper touch targets
- Fallback to basic textarea if CodeMirror fails to load
Technical details:
- Import map for ESM modules from node_modules
- Language support for JS, Python, HTML, CSS, JSON, Markdown
- Auto-initialization on DOM ready
- Global window.fileEditor instance for integration
- Serve node_modules at /claude/node_modules for import map
Files added:
- public/claude-ide/components/file-editor.js (main component)
- public/claude-ide/components/file-editor.css (responsive styles)
Files modified:
- public/claude-ide/index.html (import map, script tags)
- public/claude-ide/ide.js (updated loadFile function)
- server.js (serve node_modules for CodeMirror)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Bug fixes:
- Add missing showLoadingOverlay/hideLoadingOverlay functions to ide.js
(previously only existed in sessions-landing.js, causing continueSessionInChat to fail)
- Add loading overlay CSS styles to main style.css
- Fix Projects button URL: /projects -> /claude/ide?view=projects
- Add ?view= URL parameter handling in ide.js initialization
- Add missing Native mode button to chat view (now has 3 modes: Chat, Native, Terminal)
These fixes resolve:
1. "Continue in Chat" button not working in sessions view
2. Projects button in landing page nav taking to wrong URL
3. Missing "Native" mode button (user referred to as "Full Stack mode")
4. Loading overlay not displaying in IDE
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add collapse/expand functionality to debug panel with:
- Toggle button with arrow icon (▼/▶)
- Smooth CSS transitions (0.3s ease-in-out)
- localStorage persistence for collapsed state
- Hover effects for better UX (header background, button invert)
- Accessible with aria-label
- Click anywhere on header to toggle
The panel remembers its collapsed state across page refreshes.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
The close button would hide the debug panel with display: none,
making it impossible to see debug messages without reloading.
Also includes HTTP POST workaround changes for terminal command
execution that bypass the WebSocket send issue.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Added debug panel in terminal view that shows all terminal activity
- Added debugLog() method to TerminalManager for consistent logging
- Updated connectTerminal, handleTerminalMessage, launchCommand, createTerminal, initializeXTerm with detailed logging
- Enhanced backend logging for WebSocket messages and close codes
- Logs now show both to console and visual debug panel
This should help diagnose the terminal command execution issue without
requiring browser console access.
- Full IDE with terminal integration using xterm.js
- Session management with local and web sessions
- HTML preview functionality
- Multi-terminal support with session picker
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
·