jcode UI

A web UI for jcode — connect to your jcode server and get a desktop-grade coding agent experience in the browser.

Built with Svelte 5 + TypeScript + Vite.

Features

• Real-time chat — streaming text, reasoning display, tool call visualization
• Session management — list, resume, rename, split, clear sessions
• Model control — switch models, cycle, refresh model list
• Device pairing — authenticate with jcode pair pairing code
• Desktop notifications — browser notifications for server events
• PWA ready — installable, service worker for background notifications
• Multi-project — sessions grouped by working directory

Prerequisites

• A running jcode server with the WebSocket gateway enabled:

# ~/.jcode/config.toml
[gateway]
enabled = true

Quick Start

# Install dependencies
pnpm install

# Start dev server
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm preview

Open http://localhost:5173 in your browser. On first connect:

1. Run jcode pair in your terminal
2. Enter the 6-digit pairing code in the web UI
3. Start coding!

Architecture

┌─────────────────┐     WebSocket (WS)      ┌──────────────┐
│   jcode UI      │  ◄──────────────────►   │  jcode Server│
│  (Browser)      │    JSON protocol         │  (Port 7643) │
│                 │                          │              │
│  Svelte 5 SPA   │  POST /pair             │  Gateway     │
│  + Vite         │  GET /health            │  + Agent     │
└─────────────────┘                          └──────────────┘

The web UI communicates with jcode's WebSocket gateway using the same newline-delimited JSON protocol as the TUI client. No server-side hosting needed — the app connects directly to your local jcode daemon.

Protocol Reference

The app implements the jcode protocol:

• Requests: subscribe, message, cancel, get_history, resume_session, cycle_model, set_model, rename_session, split, clear, reload, etc.
• Events: text_delta, reasoning_delta, tool_start/exec/done, history, session, error, notification, swarm_status, available_models_updated, etc.

Development

pnpm dev        # Dev server with HMR
pnpm build      # Production build
pnpm preview    # Preview production build
pnpm check      # Svelte type checking

License

MIT