SuperCharged-Claude-Code-Upgrade

feat: Implement CodeMirror 6 file editor with tab support

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>

uroma · 2026-01-21 08:49:01 +00:00

b765c537fc

Fix multiple critical bugs: continueSessionInChat, projects link, mode buttons

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>

uroma · 2026-01-21 07:03:04 +00:00

a0fd70418f

Add comprehensive mobile responsive design for all IDE views

- Add mobile navigation menu with hamburger toggle
- Add slide-out chat sidebar for mobile (chat.z.ai style)
- Optimize chat view for mobile with:
  - Collapsible sidebar with overlay
  - Touch-friendly input controls (44px min)
  - Responsive message bubbles
  - Hidden scrollbars for cleaner UI
  - Proper font sizing and spacing
- Add mobile responsive styles for:
  - Sessions view (stacked layout)
  - Projects view (single column grid)
  - Dashboard view (single column)
  - Files view (vertical sidebar)
  - Terminal view (compact tabs)
- Add extra small device support (480px breakpoint)
- Add touch-friendly target sizing for touch devices

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

uroma · 2026-01-20 20:04:42 +00:00

c244e118f3

Fix: Add project parameter parsing to enable chat in project context

When accessing the IDE with ?project= URL parameter, the project context
was not being initialized, causing auto-session creation to fail and
chat to show "Please start or attach to a session first" error.

Changes:
- Added currentProjectName global variable
- Parse project parameter from URL on page load
- Set window.currentProjectDir for chat-functions.js auto-session logic
- Extract project name from path for display

Fixes chat not responding when navigating from landing page or projects view.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

uroma · 2026-01-20 19:57:24 +00:00

ed622ecbe2

feat: OpenCode-style session management implementation

uroma · 2026-01-20 16:26:03 +00:00

94f1725675

feat: Implement CLI session-based Full Stack mode

Replaces WebContainer-based approach with simpler Claude Code CLI session
shell command execution. This eliminates COOP/COEP header requirements
and reduces bundle size by ~350KB.

Changes:
- Added executeShellCommand() to ClaudeService for spawning bash processes
- Added /claude/api/shell-command API endpoint for executing commands
- Updated Full Stack mode (chat-functions.js) to use CLI sessions
- Simplified terminal mode by removing WebContainer dependencies

Benefits:
- No SharedArrayBuffer/COOP/COEP issues
- Uses existing Claude Code infrastructure
- Faster startup, more reliable execution
- Better error handling and output capture

Fixes:
- Terminal creation failure in Full Stack mode
- WebContainer SharedArrayBuffer serialization errors

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

uroma · 2026-01-20 16:09:09 +00:00

9b9ff5456d

fix: remove process.env.HOME from browser code

process.env.HOME is a Node.js environment variable that doesn't exist
in browser JavaScript, causing attach to fail.

Changed to hardcoded '/home/uroma' path for session creation.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

uroma · 2026-01-20 05:59:22 +00:00

6894c8bed4

fix: auto-create session when attaching terminal

The attach button was failing with "Invalid session" error when:
- No active session exists (chatSessionId is null)
- The stored session ID no longer exists in Claude service

Changes:
- Auto-create new session when no active session exists
- Detect "Session not found" error and create new session
- Recursively retry attach after creating new session
- Update global session IDs and UI elements
- Better error messages and user feedback

The attach button now works seamlessly without requiring users to
manually create a session first.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

uroma · 2026-01-20 05:57:59 +00:00

6f8c7cdefb

feat: make Terminal Debug Panel collapsible

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>

uroma · 2026-01-20 05:56:07 +00:00

17703a430e

feat: implement HTTP polling to bypass WebSocket issue

The WebSocket closes immediately with code 1006 due to nginx/proxy
issues. This implementation completely bypasses WebSocket for
terminal output by using HTTP polling instead.

Architecture:
- Server buffers PTY output in memory (outputBuffer array)
- Frontend polls every 100ms via GET /terminals/:id/output?since=N
- Output entries have monotonically increasing index
- Old output is automatically cleaned up after 5 minutes
- Commands sent via HTTP POST (already implemented)

Changes:
- terminal-service.js: Added bufferOutput(), getTerminalOutput()
- terminal.js: Added startPolling(), stopPolling(), sendTerminalResize()
- server.js: Added GET /terminals/:id/output and POST /terminals/:id/resize
- No WebSocket needed for output display (keeps legacy compatibility)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

uroma · 2026-01-19 20:48:00 +00:00

64f1ffb484

fix: remove debug panel close button to keep it always visible

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>

uroma · 2026-01-19 20:26:27 +00:00

9f35b68ea2

fix: terminal command execution via HTTP POST workaround

The WebSocket send mechanism fails with close code 1006 when client
tries to send data to server. Server never receives the message,
indicating a network/proxy layer issue that couldn't be fixed through
code changes or nginx configuration.

Solution: Bypass WebSocket send entirely by using HTTP POST to send
commands directly to the PTY.

Changes:
- Added sendTerminalInput() method to terminal-service.js that writes
  directly to PTY, bypassing WebSocket
- Added POST endpoint /claude/api/terminals/:id/input to server.js
- Modified launchCommand() in terminal.js to use fetch() with HTTP
  POST instead of WebSocket.send()

The WebSocket receive direction still works (server→client for output
display), only send direction (client→server for commands) is bypassed.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

uroma · 2026-01-19 19:52:36 +00:00

815f7095fd

test: change command to simple echo for debugging

Changed from 'claude --dangerously-skip-permissions\n' to 'echo "WebSocket test"\n'
to test if the WebSocket closure issue is related to the command itself.

This will help determine if:
1. The issue is with the command length/format
2. The issue is with WebSocket data transmission in general
3. The PTY is handling the command correctly

uroma · 2026-01-19 19:39:14 +00:00

990ea80edd

fix: remove stabilization delay and fitAddon.fit() call

The WebSocket was closing exactly 100ms after switchToTerminal completed,
which correlated with the setTimeout(fitAddon.fit(), 100) call.

Hypothesis: The fitAddon.fit() call or the 100ms delay is causing
the WebSocket to close through an unknown mechanism (possibly triggering
browser GC, event loop blocking, or some resource cleanup).

Changes:
- Removed 100ms stabilization delay in launchCommand
- Disabled fitAddon.fit() call in switchToTerminal

This should prevent the WebSocket closure and allow commands to be sent.

uroma · 2026-01-19 19:30:57 +00:00

6621d3b9ec

fix: await switchToTerminal to prevent race condition

The issue was that switchToTerminal() was not being awaited, so
launchCommand() was called while switchToTerminal() was still
executing. This caused a race condition where the WebSocket
closed before the command could be sent.

By awaiting switchToTerminal(), we ensure the terminal is fully
switched before attempting to send any commands.

uroma · 2026-01-19 19:28:21 +00:00

7df381ff41

debug: add switchToTerminal logging and fitAddon error handling

- Log when switchToTerminal is called and if terminal is in map
- Log fitAddon.fit() execution with error handling
- Log when switchToTerminal completes

This will help identify if switchToTerminal is causing the WebSocket closure

uroma · 2026-01-19 19:27:19 +00:00

ae697ff2f4

debug: add WebSocket stability delay and enhanced checks

- Added 100ms delay before sending command to ensure WebSocket stability
- Added detailed WebSocket state logging (CONNECTING, OPEN, CLOSING, CLOSED)
- Added bufferedAmount check to wait for pending sends
- Wrapped ws.send() in try-catch for better error reporting
- Split terminal and ws existence checks for clearer debugging

uroma · 2026-01-19 19:16:03 +00:00

8730641efd

debug: add visual debug panel and comprehensive logging

- 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.

uroma · 2026-01-19 19:12:18 +00:00

a7d2f37219

debug: add comprehensive logging for terminal command flow

Phase 1 of systematic debugging: Gather evidence

Added detailed logging to trace the complete command flow:
- launchCommand: Shows when called, terminalId, command, WebSocket state
- waitForTerminalReady: Shows waiting period and ready state
- handleTerminalMessage: Shows all messages from backend with details
- WebSocket message content logged before sending

Also fixed duplicate 'ready' message (removed line 113-116).

Now when user creates "Claude Code CLI" terminal, console will show:
1. launchCommand called with terminalId and command
2. Waiting for terminal ready
3. Ready message received (or timeout)
4. Command sent to WebSocket
5. All backend messages logged

This will reveal exactly where the flow breaks.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

uroma · 2026-01-19 19:03:27 +00:00

2c7037b9b7

fix: wait for PTY ready state before sending commands

Implement proper ready-state handshake to fix command execution timing.

Root Cause:
WebSocket connection was opening immediately, but the backend PTY
(pseudo-terminal) wasn't ready to receive input yet. Commands sent
too early were lost, causing claude --dangerously-skip-permissions to
never execute.

Broken Flow:
1. WebSocket opens → connectTerminal() resolves immediately
2. Command sent → PTY not ready, command lost
3. Terminal shows cursor but Claude CLI never starts

Fixed Flow:
1. WebSocket opens → Wait for 'ready' message from backend
2. Backend sends 'ready' → PTY is now initialized
3. Command sent → PTY receives it successfully
4. Claude CLI starts

Changes:
- Add 'ready' flag to terminal state (default false)
- connectTerminal() now waits for 'ready' message before resolving
- Add waitForTerminalReady() helper with 5s timeout
- launchCommand() checks ready state before sending
- Enhanced error handling and console logging

Resolves: "terminal does not show or execute claude cli"

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

uroma · 2026-01-19 18:49:48 +00:00

7043427658

fix: initialize xterm.js before connecting WebSocket

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>

uroma · 2026-01-19 18:43:20 +00:00

8c448315c1

fix: wait for WebSocket connection before sending command

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>

uroma · 2026-01-19 18:38:14 +00:00

f57b01c82b

fix: don't set session mode for standalone Claude CLI

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>

uroma · 2026-01-19 18:26:34 +00:00

3fac4efce3

feat: add terminal type selection in directory picker

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>

uroma · 2026-01-19 18:22:11 +00:00

9e289cb0a1

fix: render simple table rows instead of project sections

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>

uroma · 2026-01-19 17:57:14 +00:00

df10f31f6c

fix: add credentials to fetch calls for authenticated API requests

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>

uroma · 2026-01-19 17:43:39 +00:00

e869eaff9c

feat: add session context menu for project reassignment

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>

uroma · 2026-01-19 17:09:59 +00:00

06843e5300

feat: group sessions by project on landing page

- 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>

uroma · 2026-01-19 17:07:45 +00:00

0e413d4309

feat: add projects page JavaScript functionality

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>

uroma · 2026-01-19 17:05:16 +00:00

155bfeefdf

feat: add projects page styles

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>

uroma · 2026-01-19 17:03:25 +00:00

51c1a2e1ec

Initial commit: Obsidian Web Interface for Claude Code

- 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>

uroma · 2026-01-19 16:29:44 +00:00

0dd2083556

31 Commits