ClawCodeGUI

ClawCodeGUI is a desktop GUI project for the Claw Code runtime experience.

The goal of this repository is to build a clean, modern, cross-platform desktop client inspired by Codex, Claude Code, and OpenCode, while keeping the runtime side modular enough to plug into the existing Rust session and tool execution stack.

Status

This repository now includes the first Electron desktop scaffold:

• Electron main process
• secure preload bridge
• React renderer with a three-column desktop layout
• mock runtime session flow for UI validation
• packaging config for macOS, Windows, and Linux

The current desktop build is a UI-first foundation, not the final runtime-integrated product yet. The renderer contract is already shaped so we can later swap the mock bridge for the Rust server crate without redesigning the UI.

Product Direction

ClawCodeGUI is intended to feel like a real agent coding workbench rather than a thin chat wrapper.

Core design goals:

• cross-platform desktop support for macOS and Windows first
• elegant, restrained UI for long working sessions
• visible tool activity, session state, and runtime status
• strong keyboard-first workflow
• clean separation between desktop shell and runtime execution

Architecture

The current direction is:

Electron
├── main process          # windows, menus, preload wiring, runtime lifecycle
├── preload bridge        # safe API boundary for the renderer
└── React renderer        # sessions, conversation UI, context panels, settings

Rust
├── claw-cli              # CLI experience
├── runtime               # session logic, tools, permissions, context
└── server                # local service / SSE layer for desktop integration

Short version:

• Electron owns the desktop shell
• React owns the user interface
• Rust remains the long-term runtime backend

Repository Layout

.
├── desktop/                        # Electron desktop app
│   ├── electron/
│   │   ├── main.ts                 # BrowserWindow, IPC, app menu
│   │   ├── preload.ts              # secure bridge exposed to renderer
│   │   └── runtime.ts              # current mock runtime adapter
│   ├── renderer/
│   │   ├── App.tsx                 # main desktop workbench UI
│   │   ├── main.tsx                # renderer entry
│   │   └── styles.css              # graphite desktop theme
│   ├── shared/
│   │   └── contracts.ts            # renderer/runtime shared types
│   ├── package.json
│   ├── tsconfig.json
│   ├── tsconfig.electron.json
│   ├── vite.config.ts
│   └── electron-builder.yml
├── docs/
│   └── electron-ui-plan.md         # desktop UI architecture and rollout plan
├── rust/                           # Rust runtime and CLI workspace
├── src/                            # Python-side workspace from earlier porting work
├── tests/
└── README.md

Desktop Quickstart

The Electron app lives under desktop/.

Install dependencies:

cd desktop
npm install

Run the desktop app in development:

npm run dev

Build the renderer and Electron process code:

npm run build

Notes:

• the desktop MVP now uses the Rust CLI as its execution bridge
• prompts are executed through claw-cli JSON mode with persistent session files
• slash commands are routed through claw --resume <session>
• the machine running the GUI needs cargo available in PATH
• Electron may need its binary payload installed if npm install was interrupted

Current UI Scope

The first desktop scaffold already includes:

• session sidebar
• main conversation timeline
• right-side context panel
• prompt execution through the Rust CLI
• slash command execution for resumed sessions
• top status controls
• bottom runtime status bar

This gives us a concrete visual and structural baseline for the actual product rather than starting from a blank Electron window.

Desktop Preview

The screenshots below are taken from the packaged Electron desktop build on macOS arm64.

Full Workbench

The current shell is organized around a three-column desktop layout:

• left rail for session switching
• center pane for the conversation transcript and prompt composer
• right rail for runtime status, supported behaviors, and backend roadmap

Session Sidebar

The session rail keeps the interaction model simple:

• every desktop conversation is stored as a persistent session file
• the active session card surfaces the working directory and last update time
• the footer explains where the desktop-managed session data lives

Conversation Workbench

The center pane is the main operator surface:

• transcript cards separate system, user, assistant, and tool messages
• the composer supports both natural-language prompts and slash commands
• runtime chips at the top show message count and execution state at a glance

Context Panel

The right-side context column is intended to keep operational details visible without cluttering the transcript:

• runtime detail calls out whether the Rust CLI bridge is ready or degraded
• supported-today notes explain what already works in the desktop shell
• the backend-upgrade panel keeps the next integration steps explicit for contributors

For a fuller walkthrough of the desktop layout and what each panel is responsible for, see docs/desktop-ui-tour.md.

Rust Integration Plan

The long-term plan is to attach the GUI to the Rust runtime instead of keeping session logic in the Electron process.

Recommended path:

1. extend rust/crates/server into a stable desktop-facing local service
2. expose session, streaming, permission, and tool events with a structured protocol
3. update the Electron main process to launch and supervise the Rust backend
4. switch the renderer transport from mock IPC to HTTP/SSE while preserving the same event contract

Design References

This GUI is intentionally influenced by:

• Codex
• Claude Code
• OpenCode

The target feel is:

• high-signal
• low-noise
• terminal-aware but not terminal-bound
• suitable for serious development work

Documents

Important project docs:

• UI plan: docs/electron-ui-plan.md
• desktop UI tour: docs/desktop-ui-tour.md
• desktop package manifest: desktop/package.json
• main desktop UI: desktop/renderer/App.tsx
• main process entry: desktop/electron/main.ts

Roadmap

Short-term:

• wire the renderer to the Rust server transport
• add real session persistence
• add permission request UI
• add file diff and tool event inspection

Mid-term:

• add command palette
• add settings and model management
• add workspace switching
• add packaged releases for macOS and Windows

Long-term:

• multi-session workflows
• richer Git integration
• plugin and skill visibility
• production-grade desktop runtime supervision

Contributing

The project is still in an early shaping phase, so the most useful contributions right now are:

• UI structure improvements
• Electron app hardening
• Rust server integration work
• event protocol design
• packaging and platform validation

If you want to contribute, start by reading the UI plan and the desktop scaffold files.

Disclaimer

This repository is for the GUI workbench layer around a Claw Code style runtime experience.

• it is not an official upstream GUI
• it is not presented as an endorsed client by the original authors
• the current desktop shell is an independent implementation effort