[FEATURE]: Compact one-line display for the sidebar Context block #53200

Activity

1. github-actions

   assigned

   kommander

   on Oct 4, 2026
2. github-actions commented on Oct 4, 2026

   

   github-actionsBot

   on Oct 4, 2026 – with GitHub Actions

   Contributor

   More actions

   This issue might be a duplicate of existing issues. Please check:

   • [FEATURE]: Remember, hide and reorder TUI sidebar sections #51535: requests persistent collapse state for TUI sidebar sections, overlapping the collapsible Context block and persisted toggle state proposed here.
   • [FEATURE]: Allow host-rendered sidebar sections to opt into compact spacing #26249: requests compact spacing for host-rendered sidebar sections, a related compact-sidebar presentation request.

   For keybind-related issues, please also check our pinned keybinds documentation: #4997
3. opencodejr commented on Oct 27, 2026

   

   opencodejrBot

   on Oct 27, 2026

   More actions

   Thanks for the detailed proposal! The request is an optional one-line layout for the sidebar Context block that uses shorter forms as the sidebar narrows, plus a ▼/▶ toggle and a palette command, with the choice remembered. Maintainers will consider it. I see you've already opened #54966 for it.

   Related issues:

   • [FEATURE]: Remember, hide and reorder TUI sidebar sections #51535: remember, hide and reorder all TUI sidebar sections
   • [FEATURE]: Compact sidebar MCP rows without status text #53321: compact sidebar MCP rows
   • [FEATURE]: Color context usage and cost by thresholds (sidebar and prompt footer) #53263: colour context usage and cost by thresholds

   Until then, you can get this now with a CLI plugin. The Context block is itself the built-in plugin opencode.sidebar.context, so you can turn it off and drop in a replacement. I've type-checked this plugin but haven't run it in a real TUI yet.

   1. Turn off the built-in block in ~/.config/opencode/cli.json:

   {
     "plugins": ["-opencode.sidebar.context"]
   }

   2. Save the plugin as ~/.config/opencode/plugins/sidebar-context-compact/tui.tsx:

   /** @jsxImportSource @opentui/solid */
   import { Plugin } from "@opencode/plugin/tui"
   import type { BoxRenderable } from "@opentui/core"
   import { createMemo, createSignal, Show } from "solid-js"
   
   const money = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })
   const whole = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 })
   const short = new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 0 })
   
   function SidebarContext(props: { context: Plugin.Context; sessionID: string }) {
     const ctx = props.context
     const theme = ctx.theme
     const [view, update] = ctx.storage.store("view", { initial: { compact: ctx.options.mode === "compact" } })
     const [width, setWidth] = createSignal(40)
     const session = createMemo(() => ctx.data.session.get(props.sessionID))
     const cost = createMemo(() => ctx.data.session.cost(props.sessionID))
     const usage = createMemo(() => {
       const boundary = session()?.revert?.messageID
       const messages: any[] = ctx.data.session.message.list(props.sessionID) ?? []
       const end = boundary ? messages.findIndex((m) => m.id === boundary) : -1
       const last = (end >= 0 ? messages.slice(0, end) : messages).findLast((m) => m.role === "assistant" && m.tokens)
       if (!last) return
       const t = last.tokens
       const tokens = t.input + t.output + t.reasoning + t.cache.read + t.cache.write
       if (tokens <= 0) return
       const model = ctx.data.location.model
         .list(session()?.location)
         ?.find((m) => m.providerID === last.model?.providerID && m.id === last.model?.id)
       return { tokens, percent: model?.limit.context ? Math.round((tokens / model.limit.context) * 100) : undefined }
     })
   
     // Pick the most detailed one-line form that fits the sidebar width.
     const line = createMemo(() => {
       const u = usage()
       const c = cost()
       const pct = u?.percent !== undefined
       const forms = [
         [u && `${u.tokens.toLocaleString()} tokens`, pct && `${u!.percent}% used`, c > 0 && `${money.format(c)} spent`],
         [u && u.tokens.toLocaleString(), pct && `${u!.percent}%`, c > 0 && money.format(c)],
         [u && short.format(u.tokens), pct && `${u!.percent}%`, c > 0 && whole.format(c)],
       ].map((parts) => parts.filter(Boolean).join(" · "))
       return forms.find((f) => f.length <= width()) ?? forms[forms.length - 1]
     })
   
     const toggle = () =>
       void update((draft) => {
         draft.compact = !draft.compact
       })
   
     ctx.keymap.layer(() => ({
       mode: "global",
       commands: [
         {
           id: "sidebar_context_toggle",
           title: view.compact ? "Expand sidebar context" : "Compact sidebar context",
           group: "Session",
           palette: true,
           run: toggle,
         },
       ],
     }))
   
     return (
       <Show when={usage() || cost() > 0}>
         <box
           onSizeChange={function (this: BoxRenderable) {
             setWidth(this.width)
           }}
         >
           <box flexDirection="row" gap={1} onMouseDown={toggle}>
             <text fg={theme.text.base}>{view.compact ? "▶" : "▼"}</text>
             <text fg={theme.text.base}>
               <b>Context</b>
             </text>
           </box>
           <Show
             when={!view.compact}
             fallback={
               <text fg={theme.text.muted} wrapMode="none" truncate>
                 {line()}
               </text>
             }
           >
             <Show when={usage()}>
               {(u) => (
                 <>
                   <text fg={theme.text.muted}>{u().tokens.toLocaleString()} tokens</text>
                   <Show when={u().percent !== undefined}>
                     <text fg={theme.text.muted}>{u().percent}% used</text>
                   </Show>
                 </>
               )}
             </Show>
             <Show when={cost() > 0}>
               <text fg={theme.text.muted}>{money.format(cost())} spent</text>
             </Show>
           </Show>
         </box>
       </Show>
     )
   }
   
   export default Plugin.define({
     id: "sidebar-context-compact",
     setup(context) {
       context.ui.slot({
         append: "sidebar.content",
         render: (props) => <SidebarContext context={context} sessionID={props.sessionID} />,
       })
     },
   })

   Clicking ▼/▶ Context switches between the layouts, and the choice is saved in plugin storage. The palette also gets Compact/Expand sidebar context, under the command ID sidebar_context_toggle, which you can bind in keybinds. To start in compact mode, load the plugin through the object form with "options": { "mode": "compact" }.