Files
openchamber/packages/web
nerdosaurusandBohdan Triapitsyn d9b9b56599 Diagram editor pr (#1432)
* feat: add draw.io diagram editor integration

Embed draw.io editor via react-drawio (MIT, zero deps) for inline
editing of .drawio files. Changes auto-save to disk. Includes
inline editor in FilesView with Visual/Source toggle, dark mode
support, template picker for new files, and chat file attachment
integration.

* fix: debounce diagram autosave to prevent reload loop

* fix: ignore watcher-triggered xml prop changes to prevent reload loop

* fix: remove auto-save-to-disk, add manual save button for diagrams

Autosave writes triggered file watcher cascade that reloaded the
draw.io iframe and reset zoom. Replaced with explicit Save button
in the toolbar (floppy disk icon). Editor XML is stable on mount
and ignores watcher-triggered prop changes.

* fix: remove auto-save write from DiagramView, add save button

* fix: hide draw.io save/exit buttons in editor

* fix: also hide save-and-exit button

* fix: brighten save button styling, add saved confirmation

* fix: remove autoSaveStatus toggle on diagram save to prevent toolbar collapse

* fix: add local save confirmation state for diagram button

* fix: remount drawio iframe on theme change, persisting XML across mounts

* fix: clear persisted xml on mount to prevent leaking between files

* fix: initialize dark mode synchronously, preserve edits across theme remount

* fix: auto-focus drawio iframe on mount/theme-change for keyboard shortcuts

* fix: add diagram i18n keys to Traditional Chinese locale

* fix: restore upstream HMR host and LAN address support

* fix: load sub-agent sessions on bootstrap for sidebar visibility

Two-phase session load: first fetch root sessions (for accurate
sessionTotal), then fetch all sessions and include child sessions
(sub-agent delegations). This ensures sub-agent sessions appear
in the sidebar immediately instead of relying on the async global
session store.

* remove opencode-drawio from PR branch

* fix: atomic file writes to prevent concurrent read/write truncation

Three-layer defense against the O_TRUNC race:

1. Write side (server): replace direct writeFile with write-to-temp-
   then-rename. fs.rename is atomic on POSIX.

2. Read side (server): retry up to 3 times with 50ms backoff when
   readFile returns empty but stat reported non-zero size.

3. FilesView client: refuse to save empty draftContent when the
   original fileContent was non-empty.

* fix(dev): clean up orphaned OpenCode processes on Ctrl+C

* fix: allow empty file saves, log warning instead of blocking

Replaces the hard block on saving empty content with a console.warn.
The atomic write + read retry on the server side handle the O_TRUNC
race properly. The previous guard caused a UX regression by silently
preventing users from clearing a file and saving.

* fix: remove time window from sub-agent fallback for live tasks

While a task tool is active, the fallback now matches any session
with the correct parentID regardless of creation time. This allows
late-appearing child sessions to be found when the OpenCode server
is slow or the SSE event pipeline is delayed. The time window is
still applied once the task tool has completed, as a final sanity
check.

* fix: three diagram editor bugs from Greptile review

1. stableXmlRef now resets when xml prop changes — switching
   between .drawio files renders the correct content.

2. Focus effect only runs on mount, not on isDark changes —
   theme toggle no longer steals keyboard focus 600ms later.

3. saveDiagram updates xml state after writing — dirty-check
   guard works correctly for subsequent saves.

* fix: route session.created SSE events to correct directory

Three-layer fix for sub-agent sessions not appearing in sidebar and
inline chat:

1. protocol.js: parseSseEventEnvelope now extracts directory from
   properties.info.directory (where session.created/updated events
   carry it) in addition to properties.directory. WS frames relayed
   to the browser now carry the real directory instead of 'global',
   so child sessions routed to the correct directory store.

2. event-pipeline.ts: same fallback in resolveEventDirectory for
   defense-in-depth when SSE events bypass the WS relay.

3. resolveFallbackTaskSessionId.ts: time window lower bound now
   allows 2s grace before taskStartTime to accommodate server timing
   jitter (child session creation timestamps consistently precede the
   tool's recorded start by ~6-9ms), fixing the 'Open subtask'
   button not rendering in OpenChamber's inline chat.

* fix: sub-agent sidebar visibility, file zeroing guard, inline badge fallback

- Sync watchdog: periodic child session discovery poll (every 15s) detects
  sessions created by other OpenCode instances, triggers parent materialization
- protocol.js: parseSseEventEnvelope extracts directory from
  properties.info.directory for session.created/updated events
- event-pipeline.ts: same fallback in resolveEventDirectory for defense-in-depth
- resolveFallbackTaskSessionId: don't require taskStartTime (cross-OpenCode);
  pick most recent child when multiple idle candidates exist
- readTaskSessionIdFromOutput: parse <task id="ses_xxx"> format from output
- FilesView: reinstate empty-draft guard (block save when draftContent='' but
  fileContent had content) to prevent file zeroing on tab switch

* Fix diagram autosave reload loop

* Highlight drawio files as XML

* Use diff-compatible highlighting for drawio files

* Restore drawio file icon mapping

* Stabilize drawio source preview toggle

---------

Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>
2026-06-08 18:50:56 +03:00
..
2026-06-08 18:50:56 +03:00
2025-12-07 19:32:53 +02:00
2026-06-05 20:42:29 +03:00

@openchamber/web

GitHub stars GitHub release Discord

Run OpenCode in your browser. Install the CLI, open localhost:3000, done. Works on desktop browsers, tablets, and phones as a PWA.

Full project overview, screenshots, and all features: github.com/btriapitsyn/openchamber

Install

curl -fsSL https://raw.githubusercontent.com/btriapitsyn/openchamber/main/scripts/install.sh | bash

Or install manually: bun add -g @openchamber/web (or npm, pnpm, yarn).

Prerequisites: OpenCode CLI installed, Node.js 20+.

Usage

openchamber                          # Start on port 3000
openchamber --port 8080              # Custom port
openchamber --lan --port 3000        # Listen on LAN (0.0.0.0)
openchamber --ui-password secret     # Password-protect UI
openchamber startup enable           # Start at login as a native service
OPENCHAMBER_UI_PASSWORD=secret openchamber startup enable # Save service password env
openchamber startup status           # Show startup service status
openchamber startup disable          # Remove startup service
openchamber tunnel help              # Tunnel lifecycle commands
openchamber tunnel providers         # Show provider capabilities
openchamber tunnel profile add --provider cloudflare --mode managed-remote --name prod-main --hostname app.example.com --token <token>
openchamber tunnel start --profile prod-main
openchamber tunnel start --provider cloudflare --mode quick --qr
openchamber tunnel start --provider cloudflare --mode managed-local --config ~/.cloudflared/config.yml
openchamber tunnel status --all      # Show tunnel state across instances
openchamber tunnel stop --port 3000  # Stop tunnel only (server stays running)
openchamber connect-url --port 3000  # Add this server to OpenChamber Desktop
openchamber connect-url --server http://host:3000 --qr
openchamber connect-url --port 3000 --qr
openchamber logs                     # Follow latest instance logs
OPENCODE_PORT=4096 OPENCODE_SKIP_START=true openchamber                    # Connect to external OpenCode server
OPENCODE_HOST=https://myhost:4096 OPENCODE_SKIP_START=true openchamber  # Connect via custom host/HTTPS
openchamber stop                     # Stop server
openchamber update                   # Update to latest version

startup enable snapshots your current environment into the native service so startup behaves like you launched openchamber from the same shell. This preserves provider tokens, PATH, SSH agent settings, and other CLI auth/config env vars. Use --no-env-snapshot for a minimal service env.

Tunnel behavior notes

  • One active tunnel per running OpenChamber instance (port).
  • Starting a different tunnel mode/provider on the same instance replaces the active tunnel.
  • Replacing or stopping a tunnel revokes existing connect links and invalidates remote tunnel sessions.
  • Connect links are one-time tokens; generating a new link revokes the previous unused link.

Connect other OpenChamber apps

Use connect-url when a web/API server should be added to OpenChamber Desktop or another OpenChamber app. If no server is running on the selected port, OpenChamber starts one first.

openchamber connect-url --port 3000
openchamber connect-url --port 3000 --qr
openchamber connect-url --port 3000 --json
openchamber connect-url --port 3000 --name "Workstation"
openchamber connect-url --port 3000 --lan --server http://workstation.local:3000 --qr

Headless/API-only server for Desktop

Use this on a remote machine when you want OpenChamber running as a web/API server, then connect to it from OpenChamber Desktop on another machine:

openchamber connect-url --port 3000 --api-only --lan --server http://workstation.local:3000 --qr --ui-password your-password

--api-only starts API routes without serving browser UI assets. --lan binds the server so other machines can reach it. --server is the address saved into the Desktop connection link. --ui-password protects browser access if UI routes are enabled elsewhere; the generated client token is what Desktop uses for API access.

This creates a remote client token and prints an openchamber://connect?... link. The link contains the server URL, token, label, and payload version. In OpenChamber Desktop, paste it in Settings -> Remote Instances -> Direct Instances -> Import Link to add that server as an Instance.

If the server was started with --lan or --host 0.0.0.0, connect-url automatically advertises a detected LAN IP instead of 127.0.0.1. Use --server <url> when you want to advertise a specific DNS name, Tailscale address, reverse proxy URL, or HTTPS endpoint.

If you are exposing the server beyond localhost, start it with a password:

openchamber serve --lan --port 3000 --ui-password your-password

Generating a client token does not automatically password-protect the hosted browser UI. --ui-password protects browser access; the client token lets another OpenChamber app connect to this server.

Connect to external OpenCode server
OPENCODE_PORT=4096 OPENCODE_SKIP_START=true openchamber
OPENCODE_HOST=https://myhost:4096 OPENCODE_SKIP_START=true openchamber
Variable Description
OPENCODE_HOST Full base URL of external server (overrides OPENCODE_PORT)
OPENCODE_PORT Port of external server
OPENCODE_SKIP_START Skip starting embedded OpenCode server
OPENCHAMBER_OPENCODE_HOSTNAME Bind hostname for managed OpenCode server (default: 127.0.0.1, use 0.0.0.0 for LAN/remote access — trusted networks only)
OPENCHAMBER_HOST Bind hostname for the OpenChamber web server (default: 127.0.0.1; use 0.0.0.0 for LAN/remote access — trusted networks only)
OPENCHAMBER_VERBOSE_REQUEST_LOGS Set to true to log every HTTP request; disabled by default to keep user logs small
OPENCHAMBER_SKIP_API_COMPRESSION Set to true to disable gzip compression for /api/* responses
OPENCHAMBER_COMPRESS_API Set to true to force /api/* compression, or false to disable it. Desktop runtime disables API compression by default to reduce local sidecar CPU use
Bind managed OpenCode to LAN / Tailscale
OPENCHAMBER_OPENCODE_HOSTNAME=0.0.0.0 openchamber --port 3000

Security note: binding to 0.0.0.0 exposes the server on all network interfaces — use only on trusted networks and protect with firewall rules or --ui-password.

Optional env vars:

environment:
  UI_PASSWORD: your_secure_password
  OPENCHAMBER_TUNNEL_MODE: quick # quick | managed-remote | managed-local
  OPENCHAMBER_TUNNEL_PROVIDER: cloudflare

For managed-remote mode, also set:

environment:
  OPENCHAMBER_TUNNEL_MODE: managed-remote
  OPENCHAMBER_TUNNEL_HOSTNAME: app.example.com
  OPENCHAMBER_TUNNEL_TOKEN: <token>

For managed-local mode, you can set:

environment:
  OPENCHAMBER_TUNNEL_MODE: managed-local
  OPENCHAMBER_TUNNEL_CONFIG: /home/openchamber/.cloudflared/config.yml

Managed-local path note: OPENCHAMBER_TUNNEL_CONFIG must use a container path under /home/openchamber/.... If the config file references credentials-file, ensure that JSON path is also mounted and reachable inside the container.

Data directory: mount data/ for persistent storage. Ensure permissions:

mkdir -p data/openchamber data/opencode/share data/opencode/config data/ssh
chown -R 1000:1000 data/
Background & daemon mode
openchamber             # Runs in background by default
openchamber stop        # Stop background server
systemd service (VPN / LAN access)

Use --foreground to keep the CLI process alive so systemd (or any other process manager) can track and restart it. Combine with OPENCODE_HOST to connect to an OpenCode instance running as a separate service.

~/.config/systemd/user/opencode.service

[Unit]
Description=OpenCode Server

[Service]
Type=simple
ExecStart=opencode serve --port 4095
Environment="PATH=/home/linuxbrew/.linuxbrew/bin:/home/linuxbrew/.linuxbrew/sbin:/home/YOU/.local/bin:/home/YOU/.npm-global/bin:/usr/local/bin:/usr/bin:/bin"
Environment=SSH_AUTH_SOCK=%t/ssh-agent.socket
Restart=on-failure
RestartSec=5

[Install]
WantedBy=default.target

Why set PATH and SSH_AUTH_SOCK? systemd user services start with a minimal environment — no shell profile is sourced. Without an explicit PATH, OpenCode won't find tools installed via Homebrew, npm, or ~/.local/bin. Without SSH_AUTH_SOCK, git operations over SSH (push, pull, clone) will fail. %t expands to $XDG_RUNTIME_DIR (e.g. /run/user/1000), where most SSH agents write their socket.

~/.config/systemd/user/openchamber.service

[Unit]
Description=OpenChamber Web Server
After=opencode.service

[Service]
Type=simple
ExecStart=openchamber serve --port 3000 --host 0.0.0.0 --ui-password your-password --foreground
Environment="OPENCODE_HOST=http://localhost:4095"
Environment="OPENCODE_SKIP_START=true"
Restart=on-failure
RestartSec=5

[Install]
WantedBy=default.target
systemctl --user daemon-reload
systemctl --user enable --now opencode openchamber

--host 0.0.0.0 is required to listen on all interfaces (the default is 127.0.0.1). Use --host <ip> or OPENCHAMBER_HOST=<ip> to bind to a specific interface instead.

What makes the web version special

  • Remote access - Cloudflare tunnel with QR onboarding. Scan from your phone, start coding.

  • Mobile-first PWA - optimized chat controls, keyboard-safe layouts, drag-to-reorder projects

  • Background notifications - know when your agent finishes, even from another tab

  • Self-update - update and restart from the UI, server settings stay intact

  • Cross-tab tracking - session activity stays in sync across browser tabs

  • Cloudflare tunnel access with quick, managed-remote, and managed-local modes

  • One-scan onboarding with tunnel QR + password URL helpers

  • Mobile-first experience: optimized chat controls, keyboard-safe layouts, and attachment-friendly UI

  • Background notifications plus reliable cross-tab session activity tracking

  • Built-in self-update + restart flow that keeps your server settings intact

License

MIT