@pellux/goodvibes-tui 0.18.20 → 0.19.0

package/src/panels/orchestration-panel.ts

@@ -1,7 +1,16 @@
+/**
+ * OrchestrationPanel — displays task graphs, node contracts, recursion guards,
+ * and WRFC-visible orchestration state.
+ *
+ * Migrated (Wave B2): extends ScrollableListPanel<OrchestrationGraphRecord>.
+ * Navigation (up/down/j/k) is handled by the base class.
+ */
+
 import type { Line } from '../types/grid.ts';
 import { createEmptyLine } from '../types/grid.ts';
-import { BasePanel } from './base-panel.ts';
+import { ScrollableListPanel } from './scrollable-list-panel.ts';
 import type { UiOrchestrationSnapshot, UiReadModel } from '../runtime/ui-read-models.ts';
+import type { OrchestrationGraphRecord } from '@pellux/goodvibes-sdk/platform/runtime/store/domains/orchestration';
 import {
   buildEmptyState,
   buildGuidanceLine,
@@ -10,11 +19,12 @@ import {
   buildPanelWorkspace,
   resolveScrollablePanelSection,
   DEFAULT_PANEL_PALETTE,
+  extendPalette,
+  type PanelPalette,
   type PanelWorkspaceSection,
 } from './polish.ts';
 
-const C = {
-  ...DEFAULT_PANEL_PALETTE,
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
   header: '#94a3b8',
   headerBg: '#1e293b',
   running: '#22c55e',
@@ -23,30 +33,22 @@ const C = {
   failed: '#ef4444',
   completed: '#a78bfa',
   selectBg: '#0f172a',
-} as const;
+} as const);
 
 function statusColor(status: string): string {
   switch (status) {
-    case 'ready':
-      return C.ready;
-    case 'running':
-      return C.running;
-    case 'blocked':
-      return C.blocked;
-    case 'failed':
-      return C.failed;
-    case 'completed':
-      return C.completed;
-    default:
-      return C.dim;
+    case 'ready':     return C.ready;
+    case 'running':   return C.running;
+    case 'blocked':   return C.blocked;
+    case 'failed':    return C.failed;
+    case 'completed': return C.completed;
+    default:          return C.dim;
   }
 }
 
-export class OrchestrationPanel extends BasePanel {
+export class OrchestrationPanel extends ScrollableListPanel<OrchestrationGraphRecord> {
   private readonly readModel?: UiReadModel<UiOrchestrationSnapshot>;
   private readonly unsub: (() => void) | null;
-  private selectedIndex = 0;
-  private scrollOffset = 0;
 
   public constructor(readModel?: UiReadModel<UiOrchestrationSnapshot>) {
     super('orchestration', 'Orchestration', 'Q', 'monitoring');
@@ -58,32 +60,52 @@ export class OrchestrationPanel extends BasePanel {
     this.unsub?.();
   }
 
-  public handleInput(key: string): boolean {
-    const graphs = this._graphs();
-    if (graphs.length === 0) return false;
-    if (key === 'up' || key === 'k') {
-      this.selectedIndex = Math.max(0, this.selectedIndex - 1);
-      this.markDirty();
-      return true;
-    }
-    if (key === 'down' || key === 'j') {
-      this.selectedIndex = Math.min(graphs.length - 1, this.selectedIndex + 1);
-      this.markDirty();
-      return true;
-    }
-    return false;
-  }
+  // ---------------------------------------------------------------------------
+  // ScrollableListPanel contract
+  // ---------------------------------------------------------------------------
 
-  private _graphs() {
+  protected getItems(): readonly OrchestrationGraphRecord[] {
     if (!this.readModel) return [];
     return [...this.readModel.getSnapshot().graphs].sort((a, b) => b.createdAt - a.createdAt);
   }
 
+  protected renderItem(
+    graph: OrchestrationGraphRecord,
+    index: number,
+    selected: boolean,
+    width: number,
+  ): Line {
+    const bg = selected ? C.selectBg : undefined;
+    return buildPanelLine(width, [
+      [' ', C.label, bg],
+      [graph.status.padEnd(10), statusColor(graph.status), bg],
+      [` ${graph.mode.padEnd(17)}`, C.value, bg],
+      [` ${graph.id.slice(0, 8)} `, C.dim, bg],
+      [graph.title.slice(0, Math.max(0, width - 39)), C.value, bg],
+    ]);
+  }
+
+  protected override getPalette(): PanelPalette {
+    return C;
+  }
+
+  protected override getEmptyStateMessage(): string {
+    return ' No orchestration graphs recorded yet.';
+  }
+
+  // ---------------------------------------------------------------------------
+  // Input — base class handles all navigation (up/down/j/k/pageup/pagedown/g/G)
+  // ---------------------------------------------------------------------------
+
+  // ---------------------------------------------------------------------------
+  // Render — multi-section layout (posture + scrollable graphs + detail + nodes)
+  // ---------------------------------------------------------------------------
+
   public render(width: number, height: number): Line[] {
-    this.needsRender = false;
     const intro = 'Task graphs, node contracts, recursion guards, and WRFC-visible orchestration state.';
 
     if (!this.readModel) {
+      this.needsRender = false;
       const workspace = buildPanelWorkspace(width, height, {
         title: 'Orchestration Control Room',
         intro,
@@ -103,7 +125,7 @@ export class OrchestrationPanel extends BasePanel {
     }
 
     const snapshot = this.readModel.getSnapshot();
-    const graphs = this._graphs();
+    const graphs = this.getItems();
     const postureLines = [
       buildKeyValueLine(width, [
         { label: 'graphs', value: String(snapshot.totalGraphs), valueColor: snapshot.totalGraphs > 0 ? C.value : C.dim },
@@ -115,6 +137,7 @@ export class OrchestrationPanel extends BasePanel {
       buildGuidanceLine(width, '/orchestration', 'inspect recursive execution posture, graph health, and node contract flow', C),
     ];
     if (graphs.length === 0) {
+      this.needsRender = false;
       const workspace = buildPanelWorkspace(width, height, {
         title: 'Orchestration Control Room',
         intro,
@@ -124,7 +147,7 @@ export class OrchestrationPanel extends BasePanel {
             ...postureLines,
             ...buildEmptyState(
               width,
-              ' No orchestration graphs recorded yet.',
+              this.getEmptyStateMessage(),
               'Graphs, nodes, child contracts, and recursion guard trips will appear here as orchestration starts.',
               [
                 { command: '/tasks', summary: 'create or inspect task flows that feed orchestration graphs' },
@@ -140,7 +163,7 @@ export class OrchestrationPanel extends BasePanel {
       return workspace;
     }
 
-    this.selectedIndex = Math.min(this.selectedIndex, graphs.length - 1);
+    this.clampSelection();
     const selected = graphs[this.selectedIndex]!;
     const detailLines: Line[] = [
       buildPanelLine(width, [
@@ -208,6 +231,10 @@ export class OrchestrationPanel extends BasePanel {
           ]);
         });
 
+    const scrollableLines: Line[] = graphs.map((graph, index) =>
+      this.renderItem(graph, index, index === this.selectedIndex, width),
+    );
+
     const postureSection: PanelWorkspaceSection = { title: 'Orchestration posture', lines: postureLines };
     const selectedGraphSection: PanelWorkspaceSection = { title: 'Selected Graph', lines: detailLines };
     const nodesSection: PanelWorkspaceSection = { title: 'Nodes', lines: nodeLines };
@@ -217,24 +244,15 @@ export class OrchestrationPanel extends BasePanel {
       beforeSections: [postureSection],
       section: {
         title: 'Graphs',
-        scrollableLines: graphs.map((graph, absolute) => {
-          const bg = absolute === this.selectedIndex ? C.selectBg : undefined;
-          return buildPanelLine(width, [
-            [' ', C.label, bg],
-            [graph.status.padEnd(10), statusColor(graph.status), bg],
-            [` ${graph.mode.padEnd(17)}`, C.value, bg],
-            [` ${graph.id.slice(0, 8)} `, C.dim, bg],
-            [graph.title.slice(0, Math.max(0, width - 39)), C.value, bg],
-          ]);
-        }),
+        scrollableLines,
         selectedIndex: this.selectedIndex,
-        scrollOffset: this.scrollOffset,
+        scrollOffset: this.scrollStart,
         minRows: 4,
         appendWindowSummary: { dimColor: C.dim },
       },
       afterSections: [selectedGraphSection, nodesSection],
     });
-    this.scrollOffset = graphsSection.scrollOffset;
+    this.scrollStart = graphsSection.scrollOffset;
 
     const sections: PanelWorkspaceSection[] = [
       postureSection,
@@ -242,6 +260,7 @@ export class OrchestrationPanel extends BasePanel {
       selectedGraphSection,
       nodesSection,
     ];
+    this.needsRender = false;
     const lines = buildPanelWorkspace(width, height, {
       title: 'Orchestration Control Room',
       intro,

package/src/panels/panel-list-panel.ts

@@ -39,6 +39,7 @@ import {
   isPanelSearchCommit,
   isPanelSearchPrintable,
 } from './search-focus.ts';
+import { logger } from '@pellux/goodvibes-sdk/platform/utils/logger';
 
 // ── Colour palette ────────────────────────────────────────────────────────────
 const C = {
@@ -163,7 +164,7 @@ export class PanelListPanel extends BasePanel {
           try {
             this.panelManager.open(selectedPanel.reg.id);
           } catch (err) {
-            console.debug('[panel-list] failed to open panel:', err);
+            logger.warn(`[panel-list] failed to open panel: ${err}`);
           }
         }
         this.markDirty();
@@ -205,7 +206,7 @@ export class PanelListPanel extends BasePanel {
         try {
           this.panelManager.open(selectedPanel.reg.id);
         } catch (err) {
-          console.debug('[panel-list] failed to open panel:', err);
+          logger.warn(`[panel-list] failed to open panel: ${err}`);
         }
         this.markDirty();
       }
@@ -221,7 +222,7 @@ export class PanelListPanel extends BasePanel {
           pm.open(selectedPanel.reg.id, pane);
           pm.show();
         } catch (err) {
-          console.debug('[panel-list] failed to place panel:', err);
+          logger.warn(`[panel-list] failed to place panel: ${err}`);
         }
         this.markDirty();
       }
@@ -234,7 +235,7 @@ export class PanelListPanel extends BasePanel {
         try {
           this.panelManager.moveToOtherPane(selectedPanel.reg.id);
         } catch (err) {
-          console.debug('[panel-list] failed to move panel:', err);
+          logger.warn(`[panel-list] failed to move panel: ${err}`);
         }
         this.markDirty();
       }

package/src/panels/panel-manager.ts

@@ -39,6 +39,9 @@ export class PanelManager {
   private _verticalSplitRatio: number = 0.5; // top gets 50% of panel height
   private _bottomPaneVisible: boolean = false;
 
+  // Cache for getWorkspaceTabs() — invalidated on every panel lifecycle event
+  private _cachedWorkspaceTabs: readonly WorkspaceTab[] | null = null;
+
   // -------------------------------------------------------------------------
   // Registration
   // -------------------------------------------------------------------------
@@ -79,6 +82,11 @@ export class PanelManager {
   // Panel lifecycle — operates on a specific pane (defaults to focused)
   // -------------------------------------------------------------------------
 
+  /** Invalidate the workspace tab cache. Call on every panel lifecycle mutation. */
+  private _invalidateWorkspaceTabs(): void {
+    this._cachedWorkspaceTabs = null;
+  }
+
   open(panelId: string, pane?: 'top' | 'bottom'): Panel {
     const existingPane = this._findPaneOf(panelId);
     if (existingPane) {
@@ -107,6 +115,7 @@ export class PanelManager {
       this._focusedPane = 'top';
     }
     panel.onActivate();
+    this._invalidateWorkspaceTabs();
     return panel;
   }
 
@@ -146,6 +155,7 @@ export class PanelManager {
       if (this.topPane.panels.length === 0 && this.bottomPane.panels.length === 0) {
         this._visible = false;
       }
+      this._invalidateWorkspaceTabs();
       return;
     }
   }
@@ -187,6 +197,7 @@ export class PanelManager {
     p.activeIndex = (p.activeIndex + 1) % p.panels.length;
     const newPanel = p.panels[p.activeIndex];
     if (newPanel) newPanel.onActivate();
+    this._invalidateWorkspaceTabs();
   }
 
   nextWorkspaceTab(): void {
@@ -205,6 +216,7 @@ export class PanelManager {
     p.activeIndex = (p.activeIndex - 1 + p.panels.length) % p.panels.length;
     const newPanel = p.panels[p.activeIndex];
     if (newPanel) newPanel.onActivate();
+    this._invalidateWorkspaceTabs();
   }
 
   activateByIndex(index: number): void {
@@ -216,6 +228,7 @@ export class PanelManager {
     p.activeIndex = index;
     const newPanel = p.panels[p.activeIndex];
     if (newPanel) newPanel.onActivate();
+    this._invalidateWorkspaceTabs();
   }
 
   activateById(panelId: string): void {
@@ -231,6 +244,7 @@ export class PanelManager {
   focusPane(pane: 'top' | 'bottom'): void {
     if (pane === 'bottom' && !this._bottomPaneVisible) return;
     this._focusedPane = pane;
+    this._invalidateWorkspaceTabs();
   }
 
   getFocusedPane(): 'top' | 'bottom' {
@@ -246,6 +260,7 @@ export class PanelManager {
   togglePaneFocus(): void {
     if (!this._bottomPaneVisible || this.bottomPane.panels.length === 0) return;
     this._focusedPane = this._focusedPane === 'top' ? 'bottom' : 'top';
+    this._invalidateWorkspaceTabs();
   }
 
   // -------------------------------------------------------------------------
@@ -253,6 +268,7 @@ export class PanelManager {
   // -------------------------------------------------------------------------
 
   toggleBottomPane(): void {
+    this._invalidateWorkspaceTabs();
     if (this._bottomPaneVisible) {
       this._bottomPaneVisible = false;
       if (this._focusedPane === 'bottom') this._focusedPane = 'top';
@@ -329,7 +345,8 @@ export class PanelManager {
     return this._findPaneOf(panelId);
   }
 
-  getWorkspaceTabs(): WorkspaceTab[] {
+  getWorkspaceTabs(): readonly WorkspaceTab[] {
+    if (this._cachedWorkspaceTabs !== null) return this._cachedWorkspaceTabs;
     const focusedPanelId = this.getActivePanel()?.id;
     const topTabs = this.topPane.panels.map((panel) => ({
       id: panel.id,
@@ -347,7 +364,9 @@ export class PanelManager {
       active: panel.id === focusedPanelId,
       focused: panel.id === focusedPanelId,
     }));
-    return [...topTabs, ...bottomTabs];
+    const tabs = [...topTabs, ...bottomTabs] as WorkspaceTab[];
+    this._cachedWorkspaceTabs = tabs;
+    return tabs;
   }
 
   activateWorkspaceIndex(index: number): void {
@@ -357,6 +376,7 @@ export class PanelManager {
     this._focusedPane = tab.pane;
     if (tab.pane === 'bottom') this._bottomPaneVisible = true;
     this._activateByIdInPane(tab.id, tab.pane);
+    this._invalidateWorkspaceTabs();
   }
 
   // -------------------------------------------------------------------------
@@ -439,6 +459,7 @@ export class PanelManager {
     this._focusedPane = 'top';
     this._bottomPaneVisible = false;
     this._visible = false;
+    this._invalidateWorkspaceTabs();
   }
 
   // -------------------------------------------------------------------------
@@ -491,6 +512,7 @@ export class PanelManager {
       this._bottomPaneVisible = true;
     }
     this._focusedPane = dstPaneName;
+    this._invalidateWorkspaceTabs();
   }
 
   private _cycleWorkspaceTab(direction: 1 | -1): void {
@@ -533,6 +555,7 @@ export class PanelManager {
       p.activeIndex = index;
       const newPanel = p.panels[p.activeIndex];
       if (newPanel) newPanel.onActivate();
+      this._invalidateWorkspaceTabs();
     }
   }
 }

package/src/panels/plan-dashboard-panel.ts

@@ -80,6 +80,7 @@ export class PlanDashboardPanel extends BasePanel {
   // --------------------------------------------------------------------------
 
   render(width: number, height: number): Line[] {
+    return this.trackedRender(() => {
     const plan = this.planManager.getActive();
     if (!plan) {
       return buildPanelWorkspace(width, height, {
@@ -100,6 +101,7 @@ export class PlanDashboardPanel extends BasePanel {
       });
     }
     return this.renderPlan(plan, width, height);
+    });
   }
 
   // --------------------------------------------------------------------------

package/src/panels/plugins-panel.ts

@@ -1,14 +1,13 @@
 import type { Line } from '../types/grid.ts';
 import { createEmptyLine } from '../types/grid.ts';
-import { BasePanel } from './base-panel.ts';
+import { ScrollableListPanel } from './scrollable-list-panel.ts';
 import type { PluginManagerObserver, PluginStatus } from '@pellux/goodvibes-sdk/platform/plugins/manager';
 import {
   buildEmptyState,
   buildPanelLine,
   buildPanelWorkspace,
   DEFAULT_PANEL_PALETTE,
-  resolvePrimaryScrollableSection,
-  type PanelWorkspaceSection,
+  type PanelPalette,
 } from './polish.ts';
 
 const C = {
@@ -47,14 +46,13 @@ function statusLabel(status: PluginStatus): string {
   return 'DISABLED';
 }
 
-export class PluginsPanel extends BasePanel {
+export class PluginsPanel extends ScrollableListPanel<PluginStatus> {
   private readonly manager: PluginManagerObserver;
   private readonly unsub: (() => void) | null;
-  private selectedIndex = 0;
-  private scrollOffset = 0;
 
   public constructor(manager: PluginManagerObserver) {
     super('plugins', 'Plugins', 'P', 'monitoring');
+    this.showSelectionGutter = true; // I5: non-color selection affordance
     this.manager = manager;
     this.unsub = manager.subscribe(() => this.markDirty());
   }
@@ -68,26 +66,39 @@ export class PluginsPanel extends BasePanel {
     this.unsub?.();
   }
 
-  public handleInput(key: string): boolean {
-    const plugins = this.manager.list();
-    if (plugins.length === 0) return false;
-    if (key === 'up' || key === 'k') {
-      this.selectedIndex = Math.max(0, this.selectedIndex - 1);
-      this.markDirty();
-      return true;
-    }
-    if (key === 'down' || key === 'j') {
-      this.selectedIndex = Math.min(plugins.length - 1, this.selectedIndex + 1);
-      this.markDirty();
-      return true;
-    }
-    return false;
+  protected override getPalette(): PanelPalette {
+    return C;
+  }
+
+  protected getItems(): readonly PluginStatus[] {
+    return this.manager.list();
+  }
+
+  protected renderItem(plugin: PluginStatus, _index: number, selected: boolean, width: number): Line {
+    const bg = selected ? C.selectBg : undefined;
+    return buildPanelLine(width, [
+      [' ', C.label, bg],
+      [plugin.name.padEnd(22), C.value, bg],
+      [` ${statusLabel(plugin).padEnd(11)}`, statusColor(plugin), bg],
+      [` ${plugin.trustTier.toUpperCase().padEnd(10)}`, trustColor(plugin.trustTier), bg],
+      [` ${plugin.version}`, C.dim, bg],
+    ]);
+  }
+
+  protected override getEmptyStateMessage(): string {
+    return ' No plugins discovered.';
+  }
+
+  protected override getEmptyStateActions(): Array<{ command: string; summary: string }> {
+    return [
+      { command: '/plugin list', summary: 'inspect plugin discovery paths and current registry state' },
+      { command: '/marketplace', summary: 'review curated ecosystem entries and provenance posture' },
+    ];
   }
 
   public render(width: number, height: number): Line[] {
-    this.needsRender = false;
     const intro = 'Plugin trust, capabilities, signatures, and quarantine posture for the active ecosystem surface.';
-    const plugins = this.manager.list();
+    const plugins = this.getItems();
 
     if (plugins.length === 0) {
       const workspace = buildPanelWorkspace(width, height, {
@@ -111,7 +122,7 @@ export class PluginsPanel extends BasePanel {
       return workspace;
     }
 
-    this.selectedIndex = Math.min(this.selectedIndex, plugins.length - 1);
+    this.clampSelection();
     const selected = plugins[this.selectedIndex]!;
     const selectedCaps = this.manager.capabilities(selected.name);
     const trustRecord = this.manager.getTrustRecord(selected.name);
@@ -157,45 +168,11 @@ export class PluginsPanel extends BasePanel {
     }
 
     detailLines.push(buildPanelLine(width, [['  Inspect trust and capability state here, then use /plugin to take action.', C.dim]]));
-    const detailSection: PanelWorkspaceSection = { title: 'Selected Plugin', lines: detailLines };
-    const resolvedPluginsSection = resolvePrimaryScrollableSection(width, height, {
-      intro,
-      footerLines: [buildPanelLine(width, [['  Up/Down move through discovered plugins', C.dim]])],
-      palette: C,
-      section: {
-        title: 'Plugins',
-        scrollableLines: plugins.map((plugin, absolute) => {
-          const bg = absolute === this.selectedIndex ? C.selectBg : undefined;
-          return buildPanelLine(width, [
-            [' ', C.label, bg],
-            [plugin.name.padEnd(22), C.value, bg],
-            [` ${statusLabel(plugin).padEnd(11)}`, statusColor(plugin), bg],
-            [` ${plugin.trustTier.toUpperCase().padEnd(10)}`, trustColor(plugin.trustTier), bg],
-            [` ${plugin.version}`, C.dim, bg],
-          ]);
-        }),
-        selectedIndex: this.selectedIndex,
-        scrollOffset: this.scrollOffset,
-        guardRows: 1,
-        minRows: 4,
-        appendWindowSummary: { dimColor: C.dim },
-      },
-      afterSections: [detailSection],
-    });
-    this.scrollOffset = resolvedPluginsSection.scrollOffset;
+    detailLines.push(buildPanelLine(width, [['  Up/Down move through discovered plugins', C.dim]]));
 
-    const sections: PanelWorkspaceSection[] = [
-      resolvedPluginsSection.section,
-      detailSection,
-    ];
-    const lines = buildPanelWorkspace(width, height, {
+    return this.renderList(width, height, {
       title: 'Plugin Control Room',
-      intro,
-      sections,
-      footerLines: [buildPanelLine(width, [['  Up/Down move through discovered plugins', C.dim]])],
-      palette: C,
+      footer: detailLines,
     });
-    while (lines.length < height) lines.push(createEmptyLine(width));
-    return lines.slice(0, height);
   }
 }

package/src/panels/polish.ts

@@ -3,6 +3,7 @@ import { createEmptyLine, createStyledCell } from '../types/grid.ts';
 import { getDisplayWidth, wrapText } from '../utils/terminal-width.ts';
 import { getSurfaceContentRows, getTrackedVisibleWindow, getVisibleWindow, type VisibleWindow } from '../renderer/surface-layout.ts';
 import { GLYPHS, UI_TONES } from '../renderer/ui-primitives.ts';
+import { type StatusState, STATE_GLYPHS } from '../renderer/status-glyphs.ts';
 
 export interface PanelPalette {
   readonly label: string;
@@ -42,13 +43,36 @@ export const DEFAULT_PANEL_PALETTE: Readonly<Required<PanelPalette>> = {
   selectBg: UI_TONES.bg.selected,
 } as const;
 
+/**
+ * Extend the base panel palette with domain-specific colors.
+ *
+ * Convention: raw hex colors may only live inside a palette constant declared
+ * at the top of a panel file, not inline in render calls.
+ *
+ * @example
+ * ```ts
+ * const C = extendPalette(DEFAULT_PANEL_PALETTE, {
+ *   decision: '#38bdf8',
+ *   incident: '#ef4444',
+ * });
+ * ```
+ */
+export function extendPalette<T extends Record<string, string>>(
+  base: typeof DEFAULT_PANEL_PALETTE,
+  extras: T,
+): typeof DEFAULT_PANEL_PALETTE & T {
+  return { ...base, ...extras };
+}
+
 export function buildPanelLine(
   width: number,
-  segments: Array<[string, string, string?]>,
+  segments: Array<StyledPanelSegment | [string, string, string?]>,
 ): Line {
   return buildStyledPanelLine(
     width,
-    segments.map(([text, fg, bg]) => ({ text, fg, bg })),
+    segments.map((seg) =>
+      Array.isArray(seg) ? { text: seg[0], fg: seg[1], bg: seg[2] } : seg,
+    ),
   );
 }
 
@@ -256,6 +280,31 @@ export function buildSearchInputLine(
   ], { fillBg: bg });
 }
 
+/**
+ * Build a status pill segment (glyph + label) for use in buildPanelLine.
+ *
+ * Returns StyledPanelSegment[] — spread directly into a buildPanelLine segments
+ * array:
+ *   buildPanelLine(width, [['  count ', C.label], ...buildStatusPill('bad', '3')])
+ *
+ * Convention: raw hex colors may only live inside a palette constant declared at
+ * the top of a panel file; buildStatusPill derives its color from the palette.
+ */
+export function buildStatusPill(
+  state: StatusState,
+  label: string,
+  opts?: { glyph?: string; bg?: string; count?: number },
+): StyledPanelSegment[] {
+  const glyph = opts?.glyph ?? STATE_GLYPHS[state];
+  const color = state === 'good' ? DEFAULT_PANEL_PALETTE.good
+    : state === 'warn' ? DEFAULT_PANEL_PALETTE.warn
+    : state === 'bad'  ? DEFAULT_PANEL_PALETTE.bad
+    : DEFAULT_PANEL_PALETTE.info;
+  const bg = opts?.bg;
+  const text = opts?.count !== undefined ? `${glyph} ${label} (${opts.count})` : `${glyph} ${label}`;
+  return [{ text, fg: color, bg }];
+}
+
 export function buildStatPill(
   label: string,
   value: string,

package/src/panels/provider-accounts-panel.ts

@@ -36,6 +36,7 @@ export class ProviderAccountsPanel extends ScrollableListPanel<ProviderAccountRe
 
   public constructor(deps: ProviderAccountsPanelDeps) {
     super('accounts', 'Accounts', 'Q', 'monitoring');
+    this.showSelectionGutter = true; // I5: non-color selection affordance
     this.providerAccounts = deps.providerAccounts;
     void this.refresh();
   }