Nguyễn Ngô ThượngandBohdan Triapitsyn d0e4dc2704 feat(mcp): add MCP Config Manager UI (#473)
* feat(session-folders): drag-to-folder DnD, sort by activity, and UX improvements

- Add DraggableSessionRow wrapping each session row so the whole row is
  draggable; stopPropagation prevents outer group-reorder DnD from firing
- Add DroppableFolderWrapper + SessionFolderDndScope (inner DndContext
  scoped per group) with closestCenter collision detection
- DragOverlay matches exact width/height of dragged row so cursor stays
  aligned
- Folder header highlights (ring + primary colour) when a session hovers
  over it during drag
- + button on folder header opens a dropdown: 'New session' / 'New folder'
- + button on each folder row creates a session scoped to that folder
- Empty folders are no longer auto-deleted (removed .filter(sessionIds.length>0)
  from addSessionToFolder / removeSessionFromFolder / cleanupSessions)
- Sessions inside a folder are sorted by most-recent activity (same
  compareSessionsByPinnedAndTime logic used everywhere else)
- Sort comparator now takes sessionAttentionStates so lastUserMessageAt /
  lastStatusChangeAt is used when newer than session.time.updated; all
  sort call-sites and their useMemo/useCallback deps updated accordingly
- Remove foldersMap from cleanup effect deps to prevent cascade re-renders
  when folders change; read current value via getState() instead

* fix(session-folders): new session is placed into the correct folder

sendMessage() was calling useSessionManagementStore.createSession()
directly, bypassing the targetFolderId logic in useSessionStore.createSession.

Fix: read targetFolderId from draft at the top of the draft branch in
sendMessage, then call addSessionToFolder immediately after the session
is created and before the draft is closed. Also propagate targetFolderId
through openNewSessionDraft options and NewSessionDraftState type.

* feat(session-folders): add sub-folder support (one level deep)

- SessionFolder gains optional parentId field for hierarchy
- createFolder accepts parentId to create sub-folders
- deleteFolder cascades to remove all child sub-folders
- SessionFolderItem renders sub-folders before sessions in body;
  new sub-folder button (RiFolderAddLine) visible at depth 0 only
- renderOneFolderItem in SessionSidebar builds the tree recursively;
  sub-folders are indented via depth prop (ml-3 on root's children)
- Persist/hydrate parentId correctly from localStorage

* feat(session): add delete confirm dialogs and improve subtitle UX

- Add confirmation dialogs before deleting sessions or folders
- Show relative time (e.g., '2h ago', '35min ago') for recent sessions
- Replace +/- diff numbers with file change count (e.g., '3 files changed')
- New folders use default name without forcing rename
- Cleaner, less cluttered session list UI

* fix(session-folders): skip folder cleanup while sessions are loading

Prevents race condition on reload where cleanupSessions() runs before
the server returns the full session list, causing folder-session
assignments to be incorrectly wiped from localStorage.

* feat(mcp): add MCP Config Manager UI

- Backend: CRUD lib (mcp.js) + 5 REST routes (GET/POST/PATCH/DELETE /api/config/mcp/:name)
- Frontend: Zustand store (useMcpConfigStore), McpSidebar with status dots, McpPage with redesigned UX
  - Textarea command editor: paste full shell commands, auto-split into args, one-arg-per-line view
  - Compact env editor: wide value column, show/hide toggle, paste .env format support
  - Header card: name, type badge, enabled toggle, connect/disconnect button
- Navigation: 'mcp' added to sidebar sections in SettingsView
- TypeScript: all packages pass type-check clean

* fix(mcp): remove constant truthiness lint error in McpPage

Replace '(isNewServer || true) &&' with unconditional render — type
selector should always be visible so the user can switch between
stdio and remote without recreating the server.

* fix: add MCP server management to VS Code backend

- Implement CRUD operations for MCP servers via bridge API
- Support local and remote MCP server configurations with validation
- Add VS Code webview endpoints for MCP server management

* feat: add project-level MCP server configuration

---------

Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>
2026-02-22 23:22:33 +02:00
2025-12-07 19:32:53 +02:00
2025-12-07 19:32:53 +02:00
2026-02-21 01:30:35 +02:00
2025-12-07 19:32:53 +02:00
2025-12-07 19:32:53 +02:00
2025-12-07 19:32:53 +02:00
2025-12-07 19:32:53 +02:00
2025-12-07 19:32:53 +02:00
2025-12-07 19:32:53 +02:00
2025-12-07 19:32:53 +02:00

OpenChamber

GitHub stars GitHub forks GitHub release Created with OpenCode Ask Zread Discord Support the project

Web and desktop interface for the OpenCode AI coding agent. Works alongside the OpenCode TUI.

The OpenCode team is actively working on their own desktop app. I still decided to release this project as a fan-made alternative.

It was entirely built with OpenCode tool - first with the TUI version, then with the first usable version of OpenChamber, which I then used to build the rest.

The whole project was built entirely with AI coding agents under my supervision. It started as a hobby project and proof of concept that AI agents can create genuinely usable software.

OpenChamber Chat

More screenshots

Tool Output Settings Web Version Diff View VS Code Extension

PWA Chat PWA Terminal

Why use OpenChamber?

  • Cross-device continuity: Start in TUI, continue on tablet/phone, return to terminal - same session
  • Remote access: Use OpenCode from anywhere via browser
  • Familiarity: A visual alternative for developers who prefer GUI workflows

Features

Core (all app versions)

  • Branchable chat timeline with /undo, /redo, and one-click forks from earlier turns
  • Smart tool UIs for diffs, file operations, permissions, and long-running task progress
  • Voice mode with speech input and read-aloud responses for hands-free workflows
  • Multi-agent runs from one prompt with isolated worktrees for safe side-by-side comparisons
  • Git workflows in-app: identities, commits, PR creation, checks, and merge actions
  • GitHub-native workflows: start sessions from issues and pull requests with context already attached
  • Plan/Build mode with a dedicated plan view for drafting and iterating implementation steps
  • Inline comment drafts on diffs, files, and plans that can be sent back to the agent
  • Context visibility tools (token/cost breakdowns, raw message inspection, and activity summaries)
  • Integrated terminal with per-directory sessions and stable performance on heavy output
  • Built-in skills catalog and local skill management for reusable automation workflows

Web / PWA

  • Cloudflare Quick Tunnel for instant remote access (--try-cf-tunnel)
  • 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

Desktop (macOS)

  • Native macOS menu integration with polished app actions and deep-link handling
  • Multi-window support for parallel project/session workflows
  • "Open In" shortcuts for Finder, Terminal, and your preferred editor
  • Fast switching between local and remote instances
  • Workspace-first startup flow with directory picker and steadier window restore behavior

VS Code Extension

  • Editor-native workflow: open files directly from tool output and keep sessions beside your code
  • Agent Manager for parallel multi-model runs from a single prompt
  • Right-click actions to add context, explain selections, and improve code in-place
  • In-extension settings, responsive layout, and theme mapping that matches your editor
  • Hardened runtime lifecycle and health checks for faster startup and fewer stuck reconnect states

Custom Themes

Create your own color schemes by dropping JSON files into ~/.config/openchamber/themes/. Hot reload supported — no restart needed.

Read the Guide: Custom Themes

Installation

VS Code Extension

Install from VS Code Marketplace / Open VSX Registry or search "OpenChamber" in Extensions.

CLI (Web Server)

# Quick install (auto-detects your package manager)
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
openchamber                          # Start on port 3000
openchamber --port 8080              # Custom port
openchamber --daemon                 # Background mode
openchamber --ui-password secret     # Password-protect UI
openchamber --try-cf-tunnel          # Create a Cloudflare Quick Tunnel for remote access
openchamber --try-cf-tunnel --tunnel-qr              # Show QR code for easy mobile access
openchamber --try-cf-tunnel --tunnel-password-url   # Include password in URL for auto-login
OPENCODE_PORT=4096 OPENCODE_SKIP_START=true openchamber  # Connect to external OpenCode server
openchamber stop                     # Stop server
openchamber update                   # Update to latest version

Desktop App (macOS)

Download from Releases.

Prerequisites

See CONTRIBUTING.md for guidelines.

Tech Stack

Frontend

React TypeScript Vite Tailwind CSS

State & UI

Zustand Radix UI

Backend & Desktop

Express Tauri OpenCode SDK

Acknowledgments

Independent project, not affiliated with OpenCode team.

Special thanks to:

  • OpenCode - For the excellent API and extensible architecture.
  • Flexoki - Beautiful color scheme by Steph Ango.
  • Pierre - Fast, beautiful diff viewer with syntax highlighting.
  • Tauri - Desktop application framework.
  • Ghossty-web - for a great implementeation of a Ghostty web renderer.
  • David Hill - who inspired me to release this without overthinking.
  • My wife, who created a beautiful firework animation for the app while testing it for the first time.

License

MIT

S
Description
No description provided
Readme MIT
82 MiB
Languages
TypeScript 74.8%
JavaScript 19.8%
MDX 4.7%
CSS 0.4%
HTML 0.1%
Other 0.1%