https://github.com/silentspike/noaide
Browser-based real-time IDE for AI coding agents (Claude Code, Gemini CLI, Codex)
https://github.com/silentspike/noaide
claude-code ide rust solidjs webtransport
Last synced: 2 months ago
JSON representation
Browser-based real-time IDE for AI coding agents (Claude Code, Gemini CLI, Codex)
- Host: GitHub
- URL: https://github.com/silentspike/noaide
- Owner: silentspike
- License: mit
- Created: 2026-02-20T17:21:01.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-04-24T14:32:09.000Z (2 months ago)
- Last Synced: 2026-04-24T14:37:32.276Z (2 months ago)
- Topics: claude-code, ide, rust, solidjs, webtransport
- Language: Rust
- Size: 2.46 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 37
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Audit: audit.toml
- Codeowners: .github/CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
README
```
$$\ $$\
\__| $$ |
$$$$$$$\ $$$$$$\ $$\ $$$$$$\ $$$$$$\ $$$$$$\
$$ __$$\ $$ __$$\ $$ |$$ __$$\ $$ __$$\ $$ __$$\
$$ | $$ |$$ / $$ |$$ |$$ / $$ |$$$$$$$$ |$$$$$$$$ |
$$ | $$ |$$ | $$ |$$ |$$ | $$ |$$ ____|$$ ____|
$$ | $$ |\$$$$$$ |$$ |\$$$$$$ |\$$$$$$$\ \$$$$$$$\
\__| \__| \______/ \__| \______/ \_______| \_______|
```
**Browser-based real-time IDE for AI coding agents**
See everything your AI writes. Control every session. Catch every API call.
Requires your AI coding agent running in the background. Not included — you know who's watching. 👀
The Truman Show × Westworld × The Sims — fully under your control.
[](https://github.com/silentspike/noaide/actions/workflows/ci.yml)
[](LICENSE)
[](#project-status)
[](https://www.rust-lang.org/)
[](https://www.solidjs.com/)
[](#tech-stack)
> **Pre-Alpha** — The application builds and runs with a functional backend and frontend.
> Active development in progress. Not production-ready. See [Project Status](#project-status) for details.
---
## The Problem
AI coding agents like [Claude Code](https://docs.anthropic.com/en/docs/claude-code), [Gemini CLI](https://github.com/google-gemini/gemini-cli), and [Codex](https://github.com/openai/codex) generate rich conversation logs (JSONL) containing system prompts, hidden instructions, thinking blocks, tool calls, and results. Their terminal UIs show roughly **60% of this data** — the rest is suppressed.
noaide makes 100% visible.
## What It Does
### Full JSONL Transparency
Every message rendered — including `system-reminder`,
thinking blocks, and content marked "don't display."
Compressed messages shown as ghost messages at 30%
opacity. Nothing hidden, nothing filtered.
### Real-time File Watching
eBPF kernel-level file monitoring with **PID attribution**:
know exactly which process (you or Claude) wrote each
change. Sub-millisecond event detection. inotify fallback
when eBPF is unavailable.
### Session Control
Spawn managed sessions (full PTY control) or attach to
existing ones (tmux send-keys). Bidirectional — not just
a viewer. Breathing orb shows AI state in real-time.
### Conflict Resolution
When you and Claude edit the same file simultaneously:
yellow banner, OT buffer holds your changes, 3-way merge
after Claude finishes, auto Merge View on conflict.
### API Network Inspector
Transparent reverse proxy for Anthropic API calls.
Full request/response bodies, timing waterfall, token
usage — all in a browser Network tab. API keys
automatically redacted.
### Multi-Agent Teams
Force-directed topology graph showing agent hierarchies.
Animated message bubbles on edges. Swimlane timeline
for parallel agent activity. Gantt charts with per-agent
time tracking.
### 120 Hz Rendering
SolidJS fine-grained reactivity (no Virtual DOM). Virtual
scroller renders ~25 DOM nodes regardless of message count.
WASM workers for JSONL parsing and Markdown rendering.
Spring-physics animations.
### Mobile Access
Responsive layout with bottom tab bar and swipe navigation.
WebTransport QUIC with connection migration (WiFi to
cellular seamless handoff). Voice input via Web Speech API.
## Gallery
> Screenshots captured from a local development build against seeded
> E2E fixture sessions. Shots are representative, not marketing
> renders — the real UI looks like this when you run it.
Three-panel overview. Sessions sidebar (left), Chat
(center) with token budget and tabs, Files explorer (right).
Breathing orbs mark session state.
Live chat rendering. User and assistant messages
from the seeded Claude demo session. Each message shows
timestamp, role, and a Copy action; hidden content and
system-reminders render in the same stream.
Welcome screen. First-launch overlay
summarizing the four headline capabilities. Dismiss with
Get Started or press ? for the
keyboard shortcut sheet.
## UI Layout
```
Session Chat / Editor / Network / Teams Files
Sidebar (tabbed center panel) & Tools
┌─────────┬──────────────────────────────────────┬────────────────┐
│ │ │ │
│ ● Sess │ user │ project/ │
│ Proj │ > Fix the auth bug in login.ts │ ├── src/ │
│ 4.5 │ │ │ ├── ... │
│ 12m │ assistant ◉ 4.5 │ │ └── ... │
│ │ I'll fix the authentication bug. │ ├── tests/ │
│ ○ Sess │ Let me read the file first. │ └── ... │
│ Proj │ │ │
│ 4.5 │ ┌─ Read login.ts ──────────────┐ │ ────────────── │
│ 1h │ │ export function login() { │ │ │
│ │ │ const token = getToken(); │ │ Token Budget │
│ ◌ Arch │ │ ... │ │ ████████░░░ │
│ Proj │ └──────────────────────────────┘ │ 45k / 200k │
│ │ │ │
│ │ ┌─ Edit login.ts ──────────────┐ │ Model │
│ │ │ - const token = getToken(); │ │ claude-4.5 │
│ │ │ + const token = await │ │ │
│ │ │ + getToken(credentials); │ │ Cost │
│ │ └──────────────────────────────┘ │ $0.42 │
│ │ │ │
│ │ ┌─ system-reminder ────────────┐ │ │
│ [+ New │ │ SessionStart hook success │ │ │
│ Session]│ └──────────────────────────────┘ │ │
│ │ │ │
│ │ ▌ ◉ │ │
├─────────┴──────────────────────────────────────┴────────────────┤
│ [Chat] [Files] [Network] [Teams] [Tasks] [Settings] Cmd+K │
└─────────────────────────────────────────────────────────────────┘
```
Three resizable panels. Left: session list with breathing orbs. Center: tabbed views (chat, editor,
network, teams). Right: file tree, token budget, model info. Bottom bar for quick navigation and
command palette.
## Architecture
```
┌─────────────────────────────────────────────────┐
│ Browser (SolidJS + WASM) │
│ │
│ Chat ─── Editor ─── Network ─── Teams ─── Gantt│
│ │ │ │ │ │ │
│ └─────────┴──────────┴──────────┴─────────┘ │
│ │ │
│ WebTransport Client (codec.ts) │
└──────────────────────┬──────────────────────────┘
│
HTTP/3 QUIC │ TLS 1.3
0-RTT │ Multiplexed
Zstd ~70% │ Adaptive Quality
│
┌──────────────────────┴──────────────────────────┐
│ Rust Server (tokio + io_uring) │
│ │
│ ┌────────────┐ ┌────────────┐ ┌───────────┐ │
│ │eBPF Watcher│ │JSONL Parser│ │PTY Session│ │
│ │ PID attrib.│ │ streaming │ │ mgr + tmux│ │
│ └─────┬──────┘ └─────┬──────┘ └─────┬─────┘ │
│ │ │ │ │
│ └───────────────┼───────────────┘ │
│ │ │
│ ┌─────────┴─────────┐ │
│ │ Zenoh Event Bus │ │
│ │ SHM (~1us) │ │
│ └─────────┬─────────┘ │
│ │ │
│ ┌──────────────┼──────────────┐ │
│ │ │ │ │
│ ┌────┴────┐ ┌─────┴─────┐ ┌────┴─────┐ │
│ │hecs ECS │ │ Limbo DB │ │API Proxy │ │
│ │ SoA │ │ io_uring │ │ redaction│ │
│ │ state │ │ FTS5 │ │ logging │ │
│ └─────────┘ └───────────┘ └──────────┘ │
└─────────────────────────────────────────────────┘
Data flow: File Change ──▸ Watcher ──▸ Parser ──▸ ECS ──▸ Bus ──▸ Transport ──▸ Browser
Input flow: Browser ──▸ WebTransport ──▸ Session Manager ──▸ PTY stdin / tmux send-keys
Proxy flow: Claude Code ──▸ ANTHROPIC_BASE_URL ──▸ Proxy ──▸ api.anthropic.com
```
## Tech Stack
LayerChoiceRationale
BackendRust + tokio + io_uringZero-cost abstractions, memory safety, async I/O
FrontendSolidJS + Vite 6Fine-grained reactivity without Virtual DOM overhead
TransportWebTransport (HTTP/3, QUIC)0-RTT reconnect, multiplexed streams, connection migration. Requires a Chromium-based browser. Production deployment is documented in ADR-001.
Statehecs ECS (struct-of-arrays)Cache-friendly iteration over 100+ concurrent entities
DatabaseLimbo (async SQLite, io_uring)FTS5 full-text search, JSONL remains source of truth
File WatcheBPF via ayaKernel-level PID attribution for conflict detection
Event BusZenoh + shared memory~1us inter-component latency, zero-copy IPC
EditorCodeMirror 6500 KB (vs Monaco 5 MB), built-in MergeView
Wire FormatFlatBuffers + MessagePack + ZstdZero-copy hot path, flexible cold path, ~70% compression
WASMjsonl-parser, markdown, compressOff-main-thread heavy computation via Web Workers
ThemeCatppuccin Mocha14 harmonious dark colors, community standard
Architectural decisions are documented as [11 ADRs in llms.txt](llms.txt). Each records the context, decision, alternatives considered, and trade-offs accepted.
## Performance — Design Goals
These are the target numbers the architecture is designed around.
The `criterion` suite under `server/benches/` covers two hot paths
(JSONL `parse_line` and ECS-cache `component_to_api_json`) and runs
nightly — fetch the latest measurements from the **`benchmark-results-*`**
artefact on the most recent
[Nightly run](https://github.com/silentspike/noaide/actions/workflows/nightly.yml).
End-to-end latency benchmarks (Playwright traces for the file event
→ browser path, FPS at 1000+ messages) are still on the roadmap;
treat any bar without a matching bench as a design goal, not a
measurement.
```
File event to browser ████████████████████████████░░ < 50ms p99
Message fetch (cached) ██████████████████████████████ < 5ms
Rendering (1000+ msgs) ██████████████████████████████ 120 Hz
Server RSS (10 sessions) █████████████░░░░░░░░░░░░░░░░░ < 200 MB
Browser memory ████████████████░░░░░░░░░░░░░░ < 500 MB
JSONL parse rate ██████████████████████████████ > 10k lines/s
Zenoh SHM latency ██████████████████████████████ ~1 us
API proxy overhead ██████████████████████████████ < 5 ms
Zstd bandwidth reduction █████████████████████░░░░░░░░░ ~70%
```
## Prerequisites
| Dependency | Version | Notes |
|------------|---------|-------|
| Rust | 1.87+ | nightly required for io_uring features |
| Node.js | 22+ | with npm |
| wasm-pack | 0.13+ | for WASM module compilation |
| mkcert | latest | local TLS certificates for WebTransport |
| flatc | latest | FlatBuffers schema compiler |
| Linux kernel | 5.19+ | eBPF and io_uring support |
Optional: eBPF capabilities
For eBPF file watching (recommended), the kernel needs `CONFIG_BPF=y` and `CONFIG_BPF_SYSCALL=y`, and the process needs `CAP_BPF` + `CAP_PERFMON` (or `CAP_SYS_ADMIN` on kernels < 5.8). Without these, noaide falls back to inotify automatically.
Verify: `grep CONFIG_BPF /boot/config-$(uname -r)`
## Quick Start
```bash
# Clone
git clone https://github.com/silentspike/noaide.git && cd noaide
# First-run: generate local TLS certificates (needed for WebTransport)
just certs # or: make certs
# Start the backend in Docker
just dev # or: make dev (=> docker compose up)
# Start the frontend dev server in a second terminal (HMR)
just dev-front # or: make dev-front (=> cd frontend && pnpm dev)
# Open in browser
# http://localhost:9999/noaide/
```
Alternative: native (no Docker) workflow
```bash
# Generate certificates
just certs
# Build the WASM modules
just wasm
# Run the backend natively
just dev-backend-native
# Run the frontend natively in a second terminal
just dev-front-native
```
All recipes are in [`justfile`](justfile); a `Makefile` mirror exists
for users without `just`.
All available tasks
Run `just` (or `just -l`) to list every recipe. The most common ones:
| Task | Description |
|------|-------------|
| `just dev` | Start the backend via `docker compose up` |
| `just dev-front` | Start the frontend dev server (HMR) |
| `just test` | `cargo test --workspace` + `pnpm test` |
| `just test-e2e` | Playwright smoke suite |
| `just fmt` / `just lint` | Formatters and linters |
| `just audit` | `cargo audit` + `pnpm audit --audit-level=high` |
| `just bench` | `cargo bench` — performance design goals |
| `just wasm` | Build all three WASM modules |
| `just certs` | Generate local TLS certificates |
| `just demo` | Start everything + seed fixtures + open browser |
## Configuration
Environment variables
| Variable | Default | Description |
|----------|---------|-------------|
| `NOAIDE_PORT` | `4433` | WebTransport/QUIC port |
| `NOAIDE_HTTP_PORT` | `8080` | HTTP port (health endpoint, API proxy) |
| `NOAIDE_DB_PATH` | `./data/noaide/ide.db` | Limbo database path |
| `NOAIDE_WATCH_PATHS` | `~/.claude/` | Directories to watch for JSONL changes |
| `NOAIDE_TLS_CERT` | `./certs/cert.pem` | TLS certificate path |
| `NOAIDE_TLS_KEY` | `./certs/key.pem` | TLS private key path |
| `NOAIDE_LOG_LEVEL` | `info` | Log verbosity (trace/debug/info/warn/error) |
Feature flags
| Flag | Default | Description |
|------|---------|-------------|
| `ENABLE_EBPF` | `true` | eBPF file watching (false = inotify fallback) |
| `ENABLE_SHM` | `true` | Zenoh shared memory (false = TCP transport) |
| `ENABLE_WASM_PARSER` | `true` | WASM JSONL parser (false = JavaScript fallback) |
| `ENABLE_API_PROXY` | `true` | Anthropic API proxy and Network tab |
| `ENABLE_PROFILER` | `false` | Performance profiler panel |
| `ENABLE_AUDIO` | `false` | UI notification sounds |
## Development
```bash
# ── Backend ──────────────────────────────────
cargo build # dev build
cargo test # unit + integration tests
cargo clippy -- -D warnings # lint
cargo bench # performance benchmarks
# ── Frontend ─────────────────────────────────
cd frontend
pnpm dev # Vite dev server with HMR
pnpm build # production build
pnpm lint # ESLint
# ── WASM ─────────────────────────────────────
wasm-pack build wasm/jsonl-parser --target web
wasm-pack build wasm/markdown --target web
wasm-pack build wasm/compress --target web
# ── FlatBuffers ──────────────────────────────
flatc --rust --ts -o generated/ schemas/messages.fbs
```
See [CONTRIBUTING.md](CONTRIBUTING.md) for branch conventions, commit style, and PR process.
See [TESTING.md](TESTING.md) for the full test gate matrix and benchmark commands.
## Features
Each row points to the primary module that implements it, so the
description is easy to cross-check against the code.
| Feature | Source | Description |
|---------|--------|-------------|
| **Message Cache** | [`server/src/cache/mod.rs`](server/src/cache/mod.rs) | ECS-backed in-memory cache with incremental JSONL parsing. Designed for <5 ms cached responses (see [Performance — Design Goals](#performance--design-goals)). |
| **Pagination** | [`server/src/cache/mod.rs`](server/src/cache/mod.rs) + [`VirtualScroller.tsx`](frontend/src/components/chat/VirtualScroller.tsx) | Infinite scroll with scroll-anchor preservation. Loads 200 messages at a time. |
| **Thinking Blocks** | [`components/chat/ThinkingBlock.tsx`](frontend/src/components/chat/ThinkingBlock.tsx) | Animated collapse/expand with measured `scrollHeight`. Token count estimate. |
| **Session Pinning** | [`stores/session.ts`](frontend/src/stores/session.ts) + [`components/sessions/SessionList.tsx`](frontend/src/components/sessions/SessionList.tsx) | Star sessions, sorted pinned-first. Persisted in localStorage. |
| **Profiler Metrics** | [`components/profiler/ProfilerPanel.tsx`](frontend/src/components/profiler/ProfilerPanel.tsx) | Real-time FPS, heap usage, events/sec, render time, DOM nodes, transport RTT. |
| **Command Palette** | [`components/shared/CommandPalette.tsx`](frontend/src/components/shared/CommandPalette.tsx) | Cmd+K with scope prefixes (`>` commands, `#` sessions, `@` tabs). Fuzzy matching with highlights. |
| **Session Search** | [`components/chat/SearchBar.tsx`](frontend/src/components/chat/SearchBar.tsx) | Cmd+F in-chat search with match counter and prev/next navigation. |
| **Notifications** | [`lib/notifications.ts`](frontend/src/lib/notifications.ts) | Toasts, Browser Notification API, optional Web Audio cues (gated by `ENABLE_AUDIO`). |
| **Cost Dashboard** | [`components/cost/CostDashboard.tsx`](frontend/src/components/cost/CostDashboard.tsx) | Per-model token breakdown, cost bars, session ranking, input/output/cache ratios. |
| **Export** | [`lib/export.ts`](frontend/src/lib/export.ts) + [`components/shared/ExportDialog.tsx`](frontend/src/components/shared/ExportDialog.tsx) | Markdown, JSON, or HTML export with configurable options. Mobile Web Share API support. |
| **Session Stats API** | [`server/src/main.rs`](server/src/main.rs) | HTTP endpoint with token counts, model breakdown, duration. |
| **Subagent Tree** | [`components/teams/SubagentTree.tsx`](frontend/src/components/teams/SubagentTree.tsx) | Tree visualization of `agentId`/`parentUuid` hierarchies in the Teams panel. |
### Keyboard Shortcuts
| Shortcut | Action |
|----------|--------|
| `Cmd/Ctrl + K` | Open command palette |
| `Cmd/Ctrl + F` | Search in chat |
| `Cmd/Ctrl + 1-8` | Switch tabs (Chat, Network, Teams, Gallery, Tasks, Git, Cost, Settings) |
| `Escape` | Close overlay / search |
| `Tab` (in palette) | Cycle scope prefixes |
## Project Status
noaide is in active pre-alpha development. The application compiles, runs, and provides a functional UI for monitoring AI coding sessions.
```
Sprint 1 ── Foundation ██████████████ Complete
ECS state, Limbo DB, JSONL parser,
eBPF watcher, session manager
Sprint 2 ── Streaming Pipeline ██████████████ Complete
Zenoh event bus, WebTransport,
SolidJS shell, WASM modules
Sprint 3 ── Frontend ██████████████ Complete
Chat panel, editor, sessions,
API proxy, tools, teams, tasks
Sprint 4 ── Integration ██████████████ Complete
Mobile layout, performance
tuning, command palette, polish
RC2 ── Cache + UX Polish ██████████████ Complete
Message cache, pagination, cost
dashboard, export, search, profiler
```
Backend modules (see CI for current test count)
- ECS state engine with session, message, file, task, agent components
- Incremental JSONL parser with byte-offset caching
- eBPF file watcher with inotify fallback
- PTY session manager (spawn + tmux attach)
- Zenoh event bus with shared memory
- WebTransport server with adaptive quality tiers
- API proxy with automatic key redaction
- Git integration (branches, staging, commits, blame)
- Multi-LLM support (Claude, Gemini, Codex)
- Whisper voice-to-text sidecar integration
## Multi-LLM Support
noaide supports multiple AI coding agents out of the box:
| Agent | Status | Notes |
|-------|--------|-------|
| **Claude Code** | Supported | Full JSONL support, PTY + tmux session control, API proxy |
| **Gemini CLI** | Supported | JSON conversation parsing, PTY session management |
| **OpenAI Codex** | Supported | JSONL parsing, image injection, managed sessions |
The JSONL parser and session manager use pluggable format adapters. Core UI components (chat panel, editor, network tab) are agent-agnostic.
## Operating an Agent
These four short sections describe the supervisor experience. For the
full contract between the supervisor, the agent, and noaide, see
[AGENTS.md](AGENTS.md).
### Agent Operating Model
noaide watches agents — it does not run them. The agent (Claude Code,
Gemini CLI, Codex) is a separate process. noaide reads its JSONL log,
watches the filesystem with eBPF, hosts its PTY, and proxies its API
calls. See [AGENTS.md §1](AGENTS.md#1-operating-model).
### Supervision Boundaries
The supervisor controls session lifecycle, keyboard/text input, tool
approval, the API proxy gate (auto vs. manual), and file-edit locks
during 3-way merges. noaide enforces an API whitelist, redacts secrets,
and never spawns shells for PTY input. See
[AGENTS.md §2](AGENTS.md#2-supervision-boundaries).
### Evidence and Audit Loop
Every event crossing a component boundary is wrapped in an envelope
carrying a Lamport clock, source, PID, and session ID. JSONL is the
source of truth; the Limbo DB and ECS world are regeneratable caches.
Network, file, and git activity are rendered in place so they can be
correlated with the conversation. See
[AGENTS.md §3](AGENTS.md#3-evidence-and-audit-loop).
### Agent Contract
Agents integrate by (1) writing JSONL as they run, (2) honouring the
configured base-URL override when the supervisor enables the proxy, and
(3) accepting PTY or tmux send-keys input. See
[AGENTS.md §4](AGENTS.md#4-agent-contract) for per-agent integration
paths.
## Documentation
| Document | Scope |
|----------|-------|
| [AGENTS.md](AGENTS.md) | Contract between supervisor, agent, and noaide |
| [docs/architecture.md](docs/architecture.md) | Components, data flows, wire format, threading model |
| [docs/api.md](docs/api.md) | HTTP endpoint reference for the control plane |
| [docs/agent-operating-model.md](docs/agent-operating-model.md) | How noaide watches agents (JSONL, PTY, filesystem) |
| [docs/supervision-boundaries.md](docs/supervision-boundaries.md) | Control surfaces and what noaide does vs. does not enforce |
| [docs/security-deep-dive.md](docs/security-deep-dive.md) | Threat model, redaction rules, eBPF trust model, header rationale |
| [docs/evidence-loop-details.md](docs/evidence-loop-details.md) | EventEnvelope, Lamport clock, persistence layers, audit-log NDJSON schema |
| [docs/component-reference.md](docs/component-reference.md) | Per-module reference: what each crate/module owns, what it publishes, where its config lives |
| [docs/deployment-guide.md](docs/deployment-guide.md) | Operator guide: Docker compose, systemd, TLS, browser support |
| [docs/adr/001-production-deployment.md](docs/adr/001-production-deployment.md) | ADR-001: production deployment is single-process container, Chromium-only |
| [CONTRIBUTING.md](CONTRIBUTING.md) | Branch flow, commit discipline, PR checklist |
| [SECURITY.md](SECURITY.md) | Security controls in place and on the roadmap |
| [TESTING.md](TESTING.md) | Test gate matrix |
| [llms.txt](llms.txt) | 11 ADRs behind the architecture decisions |
## Security
API keys (`sk-ant-*`, `Bearer *`) are automatically redacted in all logs and UI via regex. The API proxy only forwards to `api.anthropic.com` (whitelist). All transport uses TLS 1.3 via QUIC. See [SECURITY.md](SECURITY.md) for vulnerability reporting.
## License
[MIT](LICENSE)
---
Built with Rust, SolidJS, and too many late nights reading JSONL files.