Sidebar
Session title, context usage, MCP servers, LSP state and version.
import { OpencodeSidebar } from "../components/opencode-sidebar";
import { OpencodeWindow } from "../components/opencode-window";
import { OPENCODE_DEMO_SESSION } from "../constants/opencode-demo";
export default function OpencodeSidebarExample() {
const session = OPENCODE_DEMO_SESSION;
return (
<div className="w-full p-6">
<OpencodeWindow className="h-120 max-w-xs">
<OpencodeSidebar
branch={session.branch}
className="flex-1"
cwd={session.cwd}
servers={session.servers}
spent={session.spent}
title={session.title}
tokens={session.tokens}
used={session.used}
version={session.version}
/>
</OpencodeWindow>
</div>
);
}
$ bunx --bun shadcn@latest add @notra/opencode-sidebarThe sidebar sits on its own panel and scrolls inside an OpencodeScrollArea with a square terminal scrollbar. The MCP list is a shadcn Collapsible that starts open. Each server’s dot is green when connected, orange when it failed and muted when disconnected. The working directory and version stick to the bottom. With branch, the path reads cwd:branch and the branch’s last segment is highlighted.
| Prop | Default | Description |
|---|---|---|
title |
New session |
The session title. |
tokens, used, spent |
0 tokens, 0% used, $0.00 spent |
The three Context lines. |
servers |
notra, github, linear | { name, status? } entries. status is Connected, Disconnected or Failed. |
mcpOpen, onMcpOpenChange |
Controls the MCP list. | |
lsp |
LSPs are disabled |
The LSP line. |
cwd |
~/acme/web |
The working directory. |
branch |
The git branch after the cwd. | |
version |
1.18.33 |
Shown after the product name. |
Used in
OpenCode
A recreation of an OpenCode terminal session with a transcript, the prompt and the sidebar.