Skip to content
Notra logoNotra UI
Esc
↑↓navigate↵open⌘Jpreview
On this page

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

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