Skip to content

Conversation

@eisbaw
Copy link
Contributor

@eisbaw eisbaw commented Jul 17, 2025

🌐 Claudia Web Server Implementation

Add comprehensive web server functionality to Claudia, enabling Claude Code execution from mobile browsers while maintaining feature parity with the desktop Tauri app.

This makes it possible to use from a phone - something I find useful of Codex/Jules.

🎯 Objective

Enable users to access Claude Code from mobile devices via web browser, addressing the limitation of desktop-only access. This allows for:

  • Mobile development workflows
  • Remote access to Claude Code functionality
  • Browser-based Claude execution without desktop app installation
  • Cross-platform compatibility

🚀 Implementation Overview

Core Features

  • Axum web server with WebSocket support for real-time streaming
  • Dual-mode event system supporting both Tauri desktop and DOM web events
  • Session management with HashMap-based tracking of active WebSocket connections
  • Process spawning for actual Claude binary execution with stdout streaming
  • REST API mirroring all Tauri command functionality

📁 Key Components

Backend Implementation

web_server.rs

  • Main server with WebSocket handlers and REST endpoints
  • Real Claude binary execution with subprocess spawning
  • WebSocket message streaming for real-time output
  • Comprehensive session state management
  • CORS configuration for mobile browser access

Frontend Implementation

apiAdapter.ts

  • Environment detection and unified API layer
  • WebSocket client with automatic failover from Tauri to web mode
  • Event dispatching system compatible with existing UI components

ClaudeCodeSession.tsx

  • Enhanced with DOM event support for web mode
  • Session-scoped event handling
  • Seamless mode switching between desktop and web

🔧 Technical Details

Build & Deployment

  • Build system: just web command for integrated build and run
  • Binary detection: Bundled binary first, system PATH fallback
  • Message protocol: JSON-based WebSocket communication
  • Event handling: Session-scoped and generic event dispatching
  • Error handling: Comprehensive error propagation and UI feedback

Architecture

┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│   Mobile/Web    │    │   Axum Server    │    │  Claude Binary  │
│    Browser      │◄──►│   WebSocket      │◄──►│   Subprocess    │
│                 │    │   REST API       │    │                 │
└─────────────────┘    └──────────────────┘    └─────────────────┘

✅ Completed Features

  • Basic WebSocket streaming and session management
  • REST API endpoints for all core functionality
  • Event handling compatibility between Tauri and web modes
  • Error handling and WebSocket connection management
  • Process spawning and output streaming
  • Comprehensive debugging and tracing

🔄 Outstanding Work

  • Session-scoped event dispatching refinement for multi-user scenarios
  • Process cancellation implementation
  • Complete stderr handling implementation
  • Multi-session support per connection

🚀 Getting Started

Prerequisites

  • Rust toolchain
  • Node.js and npm/yarn
  • Tauri development environment

Building and Running

# Build and run web server
just web

# Development mode
cargo run --features web-server

# Build frontend assets
npm run build

Usage

  1. Desktop Mode: Use existing Tauri application
  2. Web Mode: Navigate to localhost in (mobile) browser
  3. Automatic Detection: Application detects environment and adapts accordingly

🛠️ Development Notes

Event System

The dual-mode event system supports both Tauri's native event handling and DOM events for web browsers:

// Automatic environment detection
const eventHandler = new EventHandler(isWebMode);
eventHandler.listen('claude-output', handleOutput);

Session Management

WebSocket connections are tracked per session with automatic cleanup:

// Session state management
struct SessionManager {
    sessions: HashMap<Uuid, WebSocketSession>,
    // ... other fields
}

@eisbaw
Copy link
Contributor Author

eisbaw commented Jul 17, 2025

Sessions, chat history, submitting prompts and getting responses work -- which is good enough for me, but there may be other rough corners.

@EricWvi
Copy link

EricWvi commented Sep 14, 2025

Hi, @123vivekr , could you take a look? This feature really matters for remote development. #260

@aymuos15
Copy link

Super excited for this 🥹

@123vivekr
Copy link
Member

Awesome! Before I go forward, can you look into the merge conflicts and update the PR?

@eisbaw
Copy link
Contributor Author

eisbaw commented Oct 3, 2025

Awesome! Before I go forward, can you look into the merge conflicts and update the PR?

Yep, hopefully this weekend.

eisbaw and others added 5 commits October 5, 2025 22:59
Add comprehensive web server functionality to Claudia, enabling Claude
Code execution from mobile browsers while maintaining feature parity
with the desktop Tauri app.

Enable users to access Claude Code from mobile devices via web browser,
addressing the limitation of desktop-only access. This allows for:
- Mobile development workflows
- Remote access to Claude Code functionality
- Browser-based Claude execution without desktop app installation
- Cross-platform compatibility

- **Axum web server** with WebSocket support for real-time streaming
- **Dual-mode event system** supporting both Tauri desktop and DOM web
  events
- **Session management** with HashMap-based tracking of active WebSocket
  connections
- **Process spawning** for actual Claude binary execution with stdout
  streaming
- **REST API** mirroring all Tauri command functionality

- `web_server.rs`: Main server w/ WebSocket handlers and REST endpoints
- Real Claude binary execution with subprocess spawning
- WebSocket message streaming for real-time output
- Comprehensive session state management
- CORS configuration for mobile browser access

- `apiAdapter.ts`: Environment detection and unified API layer
- `ClaudeCodeSession.tsx`: Enhanced with DOM event support for web mode
- WebSocket client with automatic failover from Tauri to web mode
- Event dispatching system compatible with existing UI components

- **Build system**: `just web` command for integrated build and run
- **Binary detection**: Bundled binary first, system PATH fallback
- **Message protocol**: JSON-based WebSocket communication
- **Event handling**: Session-scoped and generic event dispatching
- **Error handling**: Comprehensive error propagation and UI feedback

- ✅ Basic WebSocket streaming and session management
- ✅ REST API endpoints for all core functionality
- ✅ Event handling compatibility between Tauri and web modes
- ✅ Error handling and WebSocket connection management
- ✅ Process spawning and output streaming
- ✅ Comprehensive debugging and tracing

- Session-scoped event dispatching needs refinement for multi-user
  scenarios
- Process cancellation requires additional implementation
- stderr handling not yet fully implemented
- Limited to single concurrent session per connection

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>
- Remove unused tauriOpen import in ClaudeCodeSession
- Replace invoke() with apiCall() in api.ts for web compatibility
- Fix unused variable warnings

These changes ensure the frontend builds correctly with the new
web server mode while maintaining compatibility with Tauri desktop mode.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
- Pin image crate to 0.25.1 to avoid edition2024 requirement from moxcms
- Add missing installation_type field to ClaudeInstallation struct
- Update Cargo.lock with compatible dependencies

The moxcms-0.7.6 crate requires edition2024 which is not available in
stable Rust 1.82. Pinning the image crate to 0.25.1 avoids this
dependency while maintaining functionality.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
- Add /api/settings/claude/installations endpoint to web server
- Implement list_claude_installations handler
- Add 'just debug' command for troubleshooting Claude binary detection

This fixes the HTTP 404 error when accessing Claude Installation settings
in web mode. The debug command helps users verify their Claude installation
is detected correctly.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
- Rename binary from claudia-web to opcode-web in Cargo.toml
- Update all references in justfile (web commands)
- Update console output messages in web_server.rs and web_main.rs
- Update documentation in web_server.design.md

This completes the project rename from Claudia to Opcode.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
@eisbaw
Copy link
Contributor Author

eisbaw commented Oct 5, 2025

@123vivekr done. Give it a spin. I use nix, so I simply run nix-shell --run 'just web'.

@123vivekr
Copy link
Member

Wow, awesome! I'll check it out today

@123vivekr 123vivekr merged commit e3fff0d into winfunc:main Oct 10, 2025
@123vivekr
Copy link
Member

Looks good! Thanks a lot. Merged 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants