@pellux/goodvibes-tui 0.18.23 → 0.19.1

package/src/panels/memory-panel.ts

@@ -1,33 +1,27 @@
 /**
  * MemoryPanel — project memory substrate TUI panel.
+ *
+ * Migrated to SearchableListPanel<MemoryRecord> (Wave B1).
  */
 
 import type { Line } from '../types/grid.ts';
 import type { MemoryRegistry } from '@pellux/goodvibes-sdk/platform/state/memory-store';
 import type { MemoryRecord, MemoryClass } from '@pellux/goodvibes-sdk/platform/state/memory-store';
-import { BasePanel } from './base-panel.ts';
+import { SearchableListPanel } from './scrollable-list-panel.ts';
 import {
   buildBodyText,
-  buildEmptyState,
   buildGuidanceLine,
   buildKeyValueLine,
   buildPanelLine,
-  buildSearchInputLine,
-  buildPanelWorkspace,
-  resolveScrollablePanelSection,
+  extendPalette,
   DEFAULT_PANEL_PALETTE,
-  type PanelWorkspaceSection,
 } from './polish.ts';
 import {
   getPanelSearchFocusTransition,
-  isPanelSearchBackspace,
   isPanelSearchCancel,
-  isPanelSearchCommit,
-  isPanelSearchPrintable,
 } from './search-focus.ts';
 
-const C = {
-  ...DEFAULT_PANEL_PALETTE,
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
   header: '#94a3b8',
   headerBg: '#1e293b',
   decision: '#38bdf8',
@@ -42,7 +36,7 @@ const C = {
   selected: '#1e3a5f',
   searchBg: '#0f172a',
   searchFg: '#e2e8f0',
-} as const;
+});
 
 function fmtTime(ts: number): string {
   const d = new Date(ts);
@@ -63,13 +57,9 @@ function classColor(cls: MemoryClass): string {
   }
 }
 
-export class MemoryPanel extends BasePanel {
+export class MemoryPanel extends SearchableListPanel<MemoryRecord> {
   private registry: MemoryRegistry;
-  private records: MemoryRecord[] = [];
-  private selectedIdx = 0;
-  private scrollOffset = 0;
-  private searchMode = false;
-  private searchQuery = '';
+  private filterFocused = false;
   private unsubscribe?: () => void;
 
   constructor(registry: MemoryRegistry) {
@@ -79,9 +69,11 @@ export class MemoryPanel extends BasePanel {
 
   onActivate(): void {
     super.onActivate();
-    this.reload();
+    this.searchQuery = '';
+    this.invalidateFilter();
+    this.filterFocused = false;
     this.unsubscribe = this.registry.subscribe(() => {
-      this.reload();
+      this.invalidateFilter();
       this.markDirty();
     });
   }
@@ -95,134 +87,112 @@ export class MemoryPanel extends BasePanel {
     this.unsubscribe = undefined;
   }
 
-  private reload(): void {
-    const filter = this.searchQuery.trim()
-      ? { query: this.searchQuery.trim(), limit: 100 }
-      : { limit: 100 };
-    this.records = this.registry.search(filter);
-    this.selectedIdx = Math.min(this.selectedIdx, Math.max(0, this.records.length - 1));
+  // ---------------------------------------------------------------------------
+  // SearchableListPanel implementation
+  // ---------------------------------------------------------------------------
+
+  protected getAllItems(): readonly MemoryRecord[] {
+    return this.registry.search({ limit: 100 });
   }
 
-  handleInput(key: string): boolean {
-    if (this.searchMode) return this.handleSearchInput(key);
+  protected matchesSearch(record: MemoryRecord, query: string): boolean {
+    const q = query.trim().toLowerCase();
+    if (!q) return true;
+    const haystack = [
+      record.summary,
+      record.detail ?? '',
+      record.cls,
+      record.scope,
+      record.tags.join(' '),
+    ].join(' ').toLowerCase();
+    return haystack.includes(q);
+  }
 
-    const transition = getPanelSearchFocusTransition(key, { selectedIndex: this.selectedIdx, itemCount: this.records.length });
-    if (transition === 'focus-search') {
-      this.searchMode = true;
-      this.markDirty();
-      return true;
-    }
+  protected renderItem(record: MemoryRecord, index: number, selected: boolean, width: number): Line {
+    const bg = selected ? C.selected : undefined;
+    return buildPanelLine(width, [
+      ['  ', C.label, bg],
+      [`[${record.scope.slice(0, 1).toUpperCase()}/${record.cls.slice(0, 3).toUpperCase()}] `, classColor(record.cls), bg],
+      [record.id.slice(-8), C.dim, bg],
+      ['  ', C.label, bg],
+      [fmtTime(record.createdAt), C.dim, bg],
+      ['  ', C.label, bg],
+      [record.summary.slice(0, Math.max(0, width - 33)), C.value, bg],
+    ]);
+  }
 
-    switch (key) {
-      case 'ArrowUp':
-      case 'k':
-        if (this.selectedIdx > 0) {
-          this.selectedIdx--;
-          this.markDirty();
-        }
-        return true;
-      case 'ArrowDown':
-      case 'j':
-        if (this.selectedIdx < this.records.length - 1) {
-          this.selectedIdx++;
-          this.markDirty();
-        }
-        return true;
-      case 'Escape':
-        if (this.searchQuery) {
-          this.searchQuery = '';
-          this.reload();
-          this.markDirty();
-        }
-        return true;
-      case 'r':
-        this.reload();
+  protected override getPalette() { return C; }
+  protected override getEmptyStateMessage() {
+    return this.searchQuery
+      ? ` No records matching "${this.searchQuery}"`
+      : ' No memory records. Use /recall add <class> <summary> to create one.';
+  }
+  protected override getEmptyStateActions() {
+    return [
+      { command: '/recall add fact <summary>', summary: 'capture a durable fact directly' },
+      { command: '/recall capture incident latest', summary: 'promote the latest incident into memory' },
+    ];
+  }
+
+  handleInput(key: string): boolean {
+    // Filter-focus mode: typing goes into the search query
+    if (this.filterFocused) {
+      const items = this.getItems();
+      const transition = getPanelSearchFocusTransition(key, { selectedIndex: this.selectedIndex, itemCount: items.length });
+      if (transition === 'focus-list') {
+        this.filterFocused = false;
         this.markDirty();
         return true;
+      }
+      if (isPanelSearchCancel(key)) {
+        this.filterFocused = false;
+        return super.handleInput(key);
+      }
+      return super.handleInput(key);
     }
-    return false;
-  }
 
-  private handleSearchInput(key: string): boolean {
-    const transition = getPanelSearchFocusTransition(key, { selectedIndex: this.selectedIdx, itemCount: this.records.length });
-    if (transition === 'focus-list') {
-      this.searchMode = false;
-      this.selectedIdx = 0;
-      this.markDirty();
-      return true;
-    }
-    if (isPanelSearchCommit(key) || isPanelSearchCancel(key)) {
-      this.searchMode = false;
-      this.reload();
-      this.markDirty();
-      return true;
-    }
-    if (isPanelSearchBackspace(key)) {
-      this.searchQuery = this.searchQuery.slice(0, -1);
+    const items = this.getItems();
+    const transition = getPanelSearchFocusTransition(key, { selectedIndex: this.selectedIndex, itemCount: items.length });
+    if (transition === 'focus-search') {
+      this.filterFocused = true;
       this.markDirty();
       return true;
     }
-    if (isPanelSearchPrintable(key)) {
-      this.searchQuery += key;
+
+    if (key === 'r') {
+      this.invalidateFilter();
       this.markDirty();
       return true;
     }
-    return false;
+
+    return super.handleInput(key);
   }
 
   render(width: number, height: number): Line[] {
+    this.clampSelection();
     const intro = 'Durable project memory across decisions, constraints, incidents, patterns, risks, runbooks, and related provenance.';
 
-    if (!this.records.length && !this.searchQuery) {
-      this.reload();
-    }
-
-    if (!this.records.length) {
-      const message = this.searchQuery
-        ? `No records matching "${this.searchQuery}"`
-        : 'No memory records. Use /recall add <class> <summary> to create one.';
-      return buildPanelWorkspace(width, height, {
-        title: 'Memory',
-        intro,
-        sections: [{
-          lines: buildEmptyState(
-            width,
-            ` ${message}`,
-            'Memory becomes useful once durable facts, incidents, and decisions are promoted into the project substrate.',
-            [
-              { command: '/recall add fact <summary>', summary: 'capture a durable fact directly' },
-              { command: '/recall capture incident latest', summary: 'promote the latest incident into memory' },
-            ],
-            C,
-          ),
-        }],
-        footerLines: [
-          buildPanelLine(width, [['  / search  j/k or Up/Down move  r reload', C.dim]]),
-        ],
-        palette: C,
-      });
-    }
-
+    const records = this.getItems();
     const byClass = new Map<MemoryClass, number>();
-    for (const record of this.records) {
+    for (const record of records) {
       byClass.set(record.cls, (byClass.get(record.cls) ?? 0) + 1);
     }
 
-    const summaryLines = [
+    const filterLine = this.buildFilterInputLine(width, 'Filter', this.filterFocused);
+
+    const summaryLines: Line[] = [
       buildKeyValueLine(width, [
-        { label: 'records', value: String(this.records.length), valueColor: C.value },
+        { label: 'records', value: String(records.length), valueColor: C.value },
         { label: 'facts', value: String(byClass.get('fact') ?? 0), valueColor: C.fact },
         { label: 'decisions', value: String(byClass.get('decision') ?? 0), valueColor: C.decision },
         { label: 'incidents', value: String(byClass.get('incident') ?? 0), valueColor: C.incident },
         { label: 'runbooks', value: String(byClass.get('runbook') ?? 0), valueColor: C.runbook },
       ], C),
-      ...(this.searchMode || this.searchQuery
-        ? [buildSearchInputLine(width, '', `${this.searchMode ? '/ ' : '~ '}${this.searchQuery}${this.searchMode ? '_' : ''}`, C, { active: this.searchMode, bg: C.searchBg, valueColor: C.searchFg })]
-        : []),
+      filterLine,
       buildGuidanceLine(width, '/recall review', 'review durable knowledge and queue posture from the command surface', C),
     ];
 
-    const selected = this.records[this.selectedIdx];
+    const selected = records[this.selectedIndex];
     const selectedLines: Line[] = [];
     if (selected) {
       selectedLines.push(buildKeyValueLine(width, [
@@ -243,51 +213,13 @@ export class MemoryPanel extends BasePanel {
       }
     }
 
-    const summarySection: PanelWorkspaceSection = { title: 'Summary', lines: summaryLines };
-    const selectedSection: PanelWorkspaceSection = selectedLines.length > 0 ? { title: 'Selected', lines: selectedLines } : { title: 'Selected', lines: [] };
-    const recordsSection = resolveScrollablePanelSection(width, height, {
-      intro,
-      footerLines: [
-        buildPanelLine(width, [['  / search  j/k or Up/Down move  r reload  Esc clear search', C.dim]]),
-      ],
-      palette: C,
-      beforeSections: [summarySection],
-      section: {
-        title: 'Records',
-        scrollableLines: this.records.map((record, globalIndex) => {
-          const bg = globalIndex === this.selectedIdx ? C.selected : undefined;
-          return buildPanelLine(width, [
-            ['  ', C.label, bg],
-            [`[${record.scope.slice(0, 1).toUpperCase()}/${record.cls.slice(0, 3).toUpperCase()}] `, classColor(record.cls), bg],
-            [record.id.slice(-8), C.dim, bg],
-            ['  ', C.label, bg],
-            [fmtTime(record.createdAt), C.dim, bg],
-            ['  ', C.label, bg],
-            [record.summary.slice(0, Math.max(0, width - 33)), C.value, bg],
-          ]);
-        }),
-        selectedIndex: this.selectedIdx,
-        scrollOffset: this.scrollOffset,
-        minRows: 4,
-        appendWindowSummary: { dimColor: C.dim },
-      },
-      afterSections: selectedLines.length > 0 ? [selectedSection] : [],
-    });
-    this.scrollOffset = recordsSection.scrollOffset;
-    const sections: PanelWorkspaceSection[] = [
-      summarySection,
-      recordsSection.section,
-    ];
-    if (selectedLines.length > 0) sections.push(selectedSection);
-
-    return buildPanelWorkspace(width, height, {
+    return this.renderList(width, height, {
       title: 'Memory',
-      intro,
-      sections,
-      footerLines: [
+      header: summaryLines,
+      footer: [
+        ...selectedLines,
         buildPanelLine(width, [['  / search  j/k or Up/Down move  r reload  Esc clear search', C.dim]]),
       ],
-      palette: C,
     });
   }
 }

package/src/panels/ops-control-panel.ts

@@ -76,6 +76,7 @@ export class OpsControlPanel extends ScrollableListPanel<OpsAuditEntry> {
 
   public constructor(eventFeed: UiEventFeed<OpsEvent>) {
     super('ops-control', 'Ops Control', 'Q', 'agent');
+    this.showSelectionGutter = true; // I5: non-color selection affordance
     this._opsPanel = new OpsPanel(eventFeed);
     this._unsub = this._opsPanel.subscribe(() => this.markDirty());
   }

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

@@ -216,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 {
@@ -259,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();
   }
 
   // -------------------------------------------------------------------------
@@ -457,6 +459,7 @@ export class PanelManager {
     this._focusedPane = 'top';
     this._bottomPaneVisible = false;
     this._visible = false;
+    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

@@ -52,6 +52,7 @@ export class PluginsPanel extends ScrollableListPanel<PluginStatus> {
 
   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());
   }