opencode-ui

Web companion for managing remote opencode instances. The interface mirrors the monospace aesthetic of The Monospace Web while exposing session history, live chat streaming, sharing controls, and permission handling from a browser.

Quick Start

npm install
./scripts/install-plugin.sh                # copy auto-registration plugin to ~/.opencode
./scripts/start-dashboard.sh                 # registry + UI

• This launches the catalog registry on http://127.0.0.1:4310 and Vite on http://localhost:4311.
• Start any opencode agent (opencode tui, bun run packages/opencode/src/index.ts serve, etc.). Every server automatically registers itself with the catalog.
• Open the UI: newly discovered instances appear in the left column; pick one to inspect sessions immediately—no manual configuration required.

All-in-one demo (registry + opencode server + UI)

./scripts/run-all.sh

The script starts the registry, a headless opencode server (http://127.0.0.1:3020), and the UI. Override ports/hosts via REGISTRY_HOST, REGISTRY_PORT, OPENCODE_PORT, UI_PORT, etc. Ensure the plugin is installed (./scripts/install-plugin.sh) so the server registers automatically.

Key Features

• Auto-discovery — a lightweight Bun registry tracks active opencode servers via heartbeat. The UI polls this catalog and switches between instances with a single click.
• Session management — browse, create, rename, delete, and refresh remote sessions; active state and sharing status are surfaced inline.
• Live chat timeline — streams assistant/user messages, tool calls, files, patches, and reasoning blocks with monospace styling and code highlighting.
• Composer — multiline prompt box with keyboard shortcut (⌘/Ctrl + Enter) and busy indicators while a session runs.
• Sharing controls — toggle public session sharing and copy the generated link with a single click.
• Permission handling — incoming permission requests render as actionable banners (allow once, always, or reject).

Build & Deploy

npm run build        # production bundle in dist/
npm run preview      # serve the production build locally

Set VITE_REGISTRY_URL to the deployed registry origin for production builds. Static hosting is supported; ensure the registry allows cross-origin requests from the UI.

Manual Test Checklist

1. Run ./scripts/start-dashboard.sh; confirm the registry and UI come up.
2. Launch an opencode instance (opencode tui or bun run … serve). Within a few seconds it should appear in the Instances list.
3. Select the instance, create a session, and verify an empty timeline loads.
4. Send a prompt and observe streaming assistant output plus busy state clearing on completion.
5. Toggle session sharing, copy the link, and unshare; ensure status chips update in both the session list and header banner.
6. Trigger a permission request (e.g., file read) and respond through the banner; confirm it disappears and the session resumes.
7. Start a second opencode instance; both agents should remain visible with independent session lists.

Notes

• Registration is optional. Disable it by clearing OPENCODE_REGISTRY_URL when launching opencode.
• Registry defaults: host 127.0.0.1, port 4310, heartbeat TTL 30s. Adjust via REGISTRY_HOST, REGISTRY_PORT, and REGISTRY_TTL.
• The UI currently renders the entire session history; very large sessions may benefit from pagination or virtualization in future iterations.