Critical fix for completely broken terminal (blinking cursor, no input).
Root Cause:
The WebSocket was being connected before xterm.js was initialized,
causing the WebSocket reference to be lost because this.terminals
map didn't have the entry yet.
Broken Flow:
1. createTerminalUI() - Creates DOM elements only
2. connectTerminal() - Tries to store ws in terminal, but terminal = null
3. WebSocket reference lost immediately
4. No input/output possible
Fixed Flow:
1. createTerminalUI() - Creates DOM elements
2. initializeXTerm() - Creates xterm.js instance AND stores in map
3. connectTerminal() - Now finds terminal in map, stores ws successfully
4. switchToTerminal() - Terminal works!
Changes:
- Add explicit initializeXTerm() call before connectTerminal()
- Add error checking in connectTerminal() to verify terminal exists
- Add comments enforcing ordering requirements
Resolves: "All I see is blinging | and nothing else, no claude cli,
no commands, i cant type in anything. terminal is not woring."
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Make connectTerminal() return a Promise that resolves when the
WebSocket connection is established, ensuring commands are sent
only after the terminal is ready.
Root cause:
- connectTerminal() created WebSocket but returned immediately
- 500ms delay wasn't reliable - WebSocket might not be open yet
- Command was sent before connection was ready, causing it to fail silently
Fix:
- Wrap WebSocket creation in Promise
- Resolve Promise in ws.onopen callback
- Reject on ws.onerror
- Remove unnecessary 500ms delay
Now when "Claude Code CLI" terminal type is selected:
1. WebSocket connection is established
2. We wait for connection to be ready
3. Command is sent immediately
4. claude --dangerously-skip-permissions launches reliably
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
When launching Claude Code CLI with --dangerously-skip-permissions,
don't set the terminal mode to 'session' since we're not attaching
to an existing session. Keep it in 'mixed' mode instead.
The "Invalid session" error occurred because:
1. We launched claude --dangerously-skip-permissions without a session
2. Then set mode to 'session' which expects a valid session attachment
3. The CLI or backend rejected this as invalid
Fix: Remove the setMode call when using claude-cli terminal type.
Let the CLI create and manage its own session internally.
Resolves: "Invalid session" error when selecting Claude Code CLI
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add CSS styling for the terminal type dropdown that was already
implemented in the JavaScript but wasn't visible due to missing styles.
The dropdown allows users to choose between:
- Standard Shell (bash/zsh) - default
- Claude Code CLI - runs claude --dangerously-skip-permissions
When Claude Code CLI is selected:
- Session picker is skipped (not needed)
- Terminal automatically launches with claude --dangerously-skip-permissions
- Mode is automatically set to 'session'
Changes:
- Add .terminal-type-selection, .terminal-type-select styles to terminal.css
- Match existing modal styling (background, borders, focus states)
- JavaScript was already implemented from previous work
Resolves: "Claude Code CLI still not appears under terminal > new terminal"
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fix table alignment issue on landing page by rendering simple table
rows instead of collapsible project sections inside the tbody.
Changes:
- Simplify renderSessionsGroupedByProject() to render table rows directly
- Add table-layout: fixed to .projects-table for proper column widths
- Sort sessions by last activity (newest first)
The previous implementation was rendering div elements (project sections)
inside the table tbody, which broke the table layout. Table elements
only accept tr elements as direct children.
Resolves "things don't align" issue on projects table.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fix "Failed to load on projects" error by including credentials in all
fetch calls to /api/* endpoints. The session cookie must be sent with
requests for requireAuth middleware to authenticate users.
Changes:
- projects.js: Add credentials: 'include' to all 6 API fetch calls
(loadProjects, saveProject, deleteProject, loadDeletedProjects,
restoreProject, permanentDeleteProject)
- sessions-landing.js: Add credentials to 3 API fetch calls
(loadSessionsAndProjects, moveSessionToProject, context menu
suggestions)
Resolves issue where projects page showed "Failed to load projects"
error on https://www.rommark.dev/claude
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Add GET /projects route in server.js with authentication check
- Serve projects.html when authenticated, redirect to login otherwise
- Add navigation header to both landing page and projects page
- Include Sessions, Projects navigation links with active state styling
- Add logout button to navigation header
- Style navigation with dark theme matching existing design
- Make navigation responsive for mobile devices
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implemented smart suggestions UI with visual indicators for moving sessions between projects.
Features:
- Right-click context menu on session rows
- Fetches smart project suggestions from API
- Displays top 3 suggestions with match scores and reasons
- Visual indicators: 🎯 (90+), 📂 (50-89), 💡 (10-49)
- "Open in IDE" option for quick navigation
- "Show All Projects" modal for full project list
- "Move to Unassigned" to remove project association
- Smooth animations and hover effects
- Click outside to close menu
- Responsive design for mobile devices
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Add loadSessionsAndProjects() to fetch sessions and projects in parallel
- Store projects in window.projectsMap for quick lookup
- Group sessions by projectId, separating assigned and unassigned
- Render collapsible project sections with icon, name, and session count
- Add toggleProjectSection() to collapse/expand sections (▼/▶)
- Display project badges on sessions when assigned to a project
- Unassigned sessions shown in separate section at bottom
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implement complete JavaScript functionality for the projects management page:
- State management for projects array and current editing project
- loadProjects() - Fetch projects from /api/projects
- renderProjects(filter) - Render project cards with search/filter support
- setupEventListeners() - Wire up all interactive elements
- openProject(projectId) - Navigate to sessions page for selected project
- openProjectModal(project) - Open modal for create/edit operations
- closeProjectModal() - Close modal and reset form
- handleProjectSubmit(e) - Validate and save project data
- showProjectMenu(projectId, event) - Display context menu
- deleteProject(projectId) - Soft delete with confirmation
- openRecycleBinModal() - Display deleted projects
- restoreProject(projectId) - Restore from recycle bin
- permanentDeleteProject(projectId) - Delete forever with confirmation
- escapeHtml(text) - XSS prevention for user-generated content
- formatDate(dateString) - Human-readable relative timestamps
- showToast(message, type) - Toast notifications with animations
Features:
- Async/await for all API calls
- Comprehensive error handling
- Real-time search filtering
- Context menu for project actions
- Responsive modal system
- Toast notifications for user feedback
- Keyboard shortcuts (Escape to close)
- Click outside to close menus/modals
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add comprehensive CSS styles for the projects management page including:
- Page layout with responsive header
- Projects grid with auto-fill layout (300px min cards)
- Project cards with hover effects and stats
- Modal styles for create/edit and recycle bin
- Form elements with proper styling
- Button styles (primary/secondary)
- Context menu for card actions
- Recycle bin items with restore/delete actions
- Empty state styling
- Responsive design for mobile devices
- Scrollbar styling
Uses CSS variables from existing style.css for consistency.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- 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>
·