opencode icon indicating copy to clipboard operation
opencode copied to clipboard

Plugin API for custom sidebar panels

Open z80dev opened this issue 1 month ago • 4 comments

Summary

Provide an API that allows plugins to register custom sections/panels in the sidebar.

Motivation

Currently, plugins can extend OpenCode with tools, hooks, agents, and MCP configs - but have no way to surface custom UI in the sidebar. The sidebar is entirely controlled by OpenCode internals (MCPs, context usage, todos, etc.).

For plugins like oh-my-opencode, there are several things we'd want to display:

  • Background agent task status (running/completed/failed)
  • Custom metrics or state tracked by hooks
  • Plugin-specific configuration status
  • Agent availability/health indicators

Implemented API

// In @opencode-ai/plugin

interface SidebarPanelItem {
  label: string
  value?: string
  status?: "success" | "warning" | "error" | "info"
}

interface SidebarPanel {
  id: string
  title: string
  items: SidebarPanelItem[] | (() => SidebarPanelItem[])
}

interface Hooks {
  // ... existing hooks
  sidebar?: SidebarPanel[] | (() => SidebarPanel[])
}

Usage Example

import { definePlugin } from "@opencode-ai/plugin"

export default definePlugin({
  name: "my-plugin",
  hooks: {
    sidebar: [
      {
        id: "status",
        title: "My Plugin Status",
        items: [
          { label: "Version", value: "1.0.0" },
          { label: "Status", value: "Active", status: "success" }
        ]
      }
    ]
  }
})

Dynamic Updates

Both sidebar and items can be functions for dynamic content. The sidebar polls every 5 seconds for updates:

hooks: {
  sidebar: () => [{
    id: "metrics",
    title: "Live Metrics",
    items: () => [
      { label: "Requests", value: String(requestCount) },
      { label: "Last Update", value: new Date().toLocaleTimeString() }
    ]
  }]
}

Implementation Details

  • Server endpoint: GET /plugin/sidebar returns aggregated panels from all plugins
  • UI: Plugin panels render in the sidebar with collapse/expand support
  • Polling: 5-second refresh interval with proper cleanup
  • Error isolation: Individual plugin failures are logged but don't affect others

z80dev avatar Dec 22 '25 17:12 z80dev

First-pass implementation available in #6389

z80dev avatar Dec 29 '25 19:12 z80dev

that would be pretty nice since I wanted to add a status section where I can see my codex or claude code quota but wasn't able to. Claude code has somewhat customizable status bar, so this issue would be pretty neat.

fatihdogmus avatar Jan 12 '26 06:01 fatihdogmus

this is a really solid addition. persistent sidebar panels are exactly whats been missing for things like quota visibility

i ran into this problem deeply while working on arctic (a focused fork of opencode for plan-based usage visibility). one thing that became clear is that quota tracking only stays accurate when the client owns the request flow

sidebar hooks make a clean UX possible, but if plugins have to infer usage or rely on extra agent/tool calls, things get noisy or inaccurate fast

still, this API unlocks a lot of previously impossible UI

mathisdev7 avatar Jan 12 '26 20:01 mathisdev7

Yes, please enable OpenCode plugins to display additional helpful information in the sidebar or elsewhere!

Without this functionality, some plugins that could display available quota for requests or other important status information can’t be used efficiently.

Example of a feature request in a plugin that was closed as impossible at the moment: https://github.com/NoeFabris/opencode-antigravity-auth/issues/152

art-shen avatar Jan 13 '26 11:01 art-shen