Files
openchamber/packages/web
Erman HAVUÇandBohdan Triapitsyn e1977bbe63 feat(ui): collapsible thinking blocks with merged per-turn view and user toggle (#1273)
* feat: add collapsible reasoning traces with animated labels

* feat(ui): redesign reasoning blocks with merged collapsible Thought view

- Replace per-part reasoning blocks with a single merged block per turn
  (VSCode Copilot pattern), controlled by new `groupReasoningBlocks` store flag
- `ReasoningTimelineBlock` redesigned: chevron toggle, summary preview on
  collapsed header, 'Thinking'/'Justification' label when expanded, BusyDots
  while streaming, auto-scroll to bottom during live streaming
- Short texts (< 120 chars) render inline without a toggle
- Summary now strips markdown and truncates at a word boundary with ellipsis
- New `MergedReasoningPart` component merges all reasoning parts for a message
  into one block at the position of the first reasoning part
- `defaultExpanded` prop lets callers override initial expand state
- Remove `.thinking-dot` CSS animation (replaced by BusyDots component)
- Fix reasoning markdown font-size: use `--text-markdown` instead of `--text-meta`

* refactor(ui): scope working phrases inside useAssistantStatus and simplify reasoning status

- Move WORKING_PHRASES array and getRandomWorkingPhrase() inside the hook
  so they are no longer exported (were only consumed by ReasoningPart which
  no longer needs them)
- Change the 'reasoning' activity status text from a random working phrase
  to the deterministic string 'thinking' — matches the new UI label

* test(ui): expand ReasoningPart tests for new collapsible and summary behavior

- Update baseline test to use text long enough to trigger the collapsible
  path (short texts now render inline) and assert on the correct aria markup
- Add test for 'Justification' label when pre-expanded via defaultExpanded
- Add test for 'Thinking' label for the thinking variant when expanded
- Add test verifying summary is a word-boundary-truncated excerpt ending with
  an ellipsis character

* i18n: rename 'Reasoning Traces' to 'Thinking Blocks' and add thought key

- Rename settings label from 'Show Reasoning Traces' → 'Show Thinking Blocks'
  across all supported locales (en, es, ko, pl, pt-BR, uk, zh-CN)
- Add `chat.reasoningTrace.thought` key to all locales (used by merged
  reasoning block header in completed state)

* feat(ui): add collapsibleThinkingBlocks setting with full persistence wiring

- New boolean store field `collapsibleThinkingBlocks` (default true) with
  `setCollapsibleThinkingBlocks` action; persisted to localStorage
- Threaded through DesktopSettings, SettingsPayload (API types), desktop
  persistence (sanitize + apply), web appearance persistence, appearance
  auto-save watcher, and server-side settings-helpers sanitize/format
- Server defaults to true when the field is absent in formatSettingsResponse
- MessageBody reads the flag: false → render reasoning as plain AssistantTextPart;
  true → existing collapsible/merged block path

* feat(settings): expose Collapsible Reasoning Blocks toggle in visual settings

Add a checkbox under the 'Show Thinking Blocks' row (visible only when
showReasoningTraces is enabled) that toggles the collapsibleThinkingBlocks
preference. Follows the existing toggle pattern: div role=button, keyboard
handler for Enter/Space, Checkbox primitive, aria-pressed attribute.

* i18n: revert showReasoningTraces label rename and add collapsibleThinkingBlocks strings

- Revert 'Show Reasoning Traces' → 'Show Thinking Blocks' rename (the
  collapsibleThinkingBlocks toggle is now a separate control, so the parent
  label stays as 'Reasoning Traces' for clarity)
- Add `collapsibleThinkingBlocks` / `collapsibleThinkingBlocksAria` strings
  across all seven supported locales (en, es, ko, pl, pt-BR, uk, zh-CN)

* test(server): add settings-helpers coverage for collapsibleThinkingBlocks

- Verify sanitizeSettingsUpdate accepts boolean true/false and rejects
  non-boolean values (string, number)
- Verify formatSettingsResponse forwards the value correctly for both true
  and false, and defaults to true when the field is absent

* fix(ui): respect defaultExpanded prop and remove dead alwaysShowActions from ReasoningTimelineBlock

The useEffect on [isStreaming] was firing on mount and immediately calling
setIsExpanded(false) (since isStreaming is false for completed blocks),
overriding any defaultExpanded={true} passed by callers. The fix uses a
prevIsStreamingRef so the effect only collapses the block on a true→false
transition and is a no-op on initial mount.

Also removes alwaysShowActions from ReasoningTimelineBlockProps — the new
header design always shows the chevron, making the prop obsolete. The prop
was already absent from the component destructuring (a dead type entry) and
was silently ignored at runtime. Removed it from ReasoningPartProps,
MergedReasoningPartProps, and the two call-sites in MessageBody as well.

* chore: remove unused reasoningpresentation module and test

* fix(ui): polish collapsible reasoning block UI

---------

Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>
2026-05-16 17:20:16 +03:00
..
2025-12-07 19:32:53 +02:00
2026-05-15 23:18:55 +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 --ui-password secret     # Password-protect UI
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 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

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 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