Skip to content

ctx.panels

Tab chrome — leading icon, whole-tab highlight, trailing indicator, and host-owned Activity — for a dock panel tab of any DockPanelKind (RFC 0046): the bundled Chat transcript, a web viewer, a third-party panel. Mirrors ctx.editors and ctx.terminals, which offer the same verbs scoped to their own kind — a panel tab is a first-class third citizen for this chrome, not a special case you work around.

ts
ctx.panels: PanelService

Target id is the panel's own dockview id — the same string a "panel/tab" context-menu hit or a "panel" toolbar hit carries as panelId (see registerContextMenuItem and registerToolbarItem), so an extension already handling one of those needs no translation to adorn the same tab.

Finding a panel to adorn

If you're starting from a workspace rather than from a menu invocation, read Workspace.panels and use each record's panelId:

ts
for (const panel of ws.panels) {
  if (panel.kindId !== "silo.agents-chat-panel") continue;
  ctx.panels.setIndicator(panel.panelId, { id: "acme.watching", icon: "Eye" });
}

panelId is not DockPanelRecord.idid is the record's persisted identity, panelId is the live tab's. Read panelId; don't build it out of the record's other fields. Its format is host-owned and can change.

A transient panel (one whose kind didn't declare persistence: "recorded") has no record and so is absent from Workspace.panels, but it can still be adorned by id if you learn its id another way — e.g. from a "panel/tab" menu invocation.

Example

ts
ctx.subscriptions.push(
  ctx.panels.bindHighlight({
    id: "acme.follow-up",
    provide: (panelId) =>
      acmeStore.isFlagged(panelId) ? { color: "warn" } : null,
  }),
);

ctx.panels.invalidateTabAdornments();

Methods

On ctx.panels — full verb family documented in Tab adornments.

MethodWhat it does
setActivity / clearActivity / flashActivity / bindActivityHost-owned Activity (ADR 0030)
setIndicator / clearIndicator / flashIndicator / bindIndicatorTrailing static Phosphor indicators
setHighlight / clearHighlight / bindHighlightWhole-tab tinted highlight
setIcon / clearIcon / bindIconLeading ReactNode icons
invalidateTabAdornmentsRe-query binders

See also