Code Desktop

Opta Code Desktop is a visual Vite + React application that provides a graphical interface for monitoring daemon activity, managing sessions, and controlling the daemon lifecycle.

What is Code Desktop?

While the Opta CLI is a terminal-native experience, Code Desktop offers the same daemon interaction through a visual interface. It connects to the Opta daemon via WebSocket and HTTP, presenting session history as a timeline, tool calls as collapsible cards, and streaming model responses with live token counters.

Code Desktop is designed for developers who want a persistent, always-visible window showing what the daemon is doing. Keep it open alongside your editor to watch sessions unfold in real time, review past conversations, or export session data.

Architecture

Code Desktop is a pure Vite + React web application served from the browser. It does not use Electron or Tauri -- it is a standard single-page application that communicates with the daemon over localhost.

Code Desktop (Vite + React)
    |
    |  HTTP REST   → session management, daemon control
    |  WebSocket   → real-time event streaming
    v
Opta Daemon  127.0.0.1:9999
    |
    |  Proxied inference requests
    v
Opta LMX  192.168.188.11:1234

The app uses two client packages for daemon communication:

• @opta/daemon-client -- HTTP client for REST operations (create sessions, list sessions, submit turns)
• @opta/protocol-shared -- TypeScript types for the v3 protocol contract

These packages are referenced via TypeScript path aliases, not npm dependencies, allowing development without a separate build step.

Key Features

• Workspace Rail -- a sidebar listing all daemon sessions with search and filtering
• Timeline View -- chronological display of turns within a session, including user messages, model responses, and tool calls
• Streaming Indicators -- live token counters and progress indicators during active inference
• Turn Statistics -- token count, generation speed (tok/s), elapsed time, and tool call count for each completed turn
• Tool Cards -- collapsible panels showing tool name, arguments, and results for each tool invocation
• Session Export -- export conversations as JSON or Markdown for archival or sharing
• Daemon Panel -- start, stop, restart the daemon and view real-time logs
• Chat / Do Mode Toggle -- switch between interactive chat and autonomous do mode from the composer

Connection Model

Code Desktop connects to the daemon on 127.0.0.1:9999 by default. Authentication uses a Bearer token read from the daemon's state.json file. For WebSocket connections, the token is passed as a query parameter.

The WebSocket connection includes automatic reconnection with exponential backoff. If the daemon restarts, Code Desktop detects the disconnection and reconnects automatically, resuming event streaming from the last received sequence number.

Design System

Code Desktop uses the canonical Opta design tokens defined in opta.css. The visual system includes:

• OLED-optimized dark theme (#09090b background)
• Glass panels (.glass, .glass-subtle, .glass-strong) with purple gradient approach
• Lucide React for all icons
• Violet accent color (--opta-primary: #8b5cf6)
• Framer Motion spring physics for animations