@pellux/goodvibes-tui 0.18.23 → 0.19.0

package/src/panels/git-panel.ts

@@ -103,7 +103,7 @@ export class GitPanel extends BasePanel {
   /** Scroll offset for both main view and diff view. */
   private scrollOffset = 0;
 
-  private refreshTimer: ReturnType<typeof setInterval> | null = null;
+  private refreshTimerId: ReturnType<typeof setInterval> | null = null;
   private loading = true;
   private error: string | null = null;
 
@@ -119,20 +119,21 @@ export class GitPanel extends BasePanel {
   override onActivate(): void {
     super.onActivate();
     void this.refresh();
-    this.refreshTimer = setInterval(() => {
+    this.refreshTimerId = this.registerTimer(setInterval(() => {
       void this.refresh();
-    }, 5_000);
+    }, 5_000));
   }
 
   override onDeactivate(): void {
-    if (this.refreshTimer !== null) {
-      clearInterval(this.refreshTimer);
-      this.refreshTimer = null;
+    if (this.refreshTimerId !== null) {
+      this.clearTimer(this.refreshTimerId);
+      this.refreshTimerId = null;
     }
   }
 
   override onDestroy(): void {
     this.onDeactivate();
+    super.onDestroy();
   }
 
   // ---------------------------------------------------------------------------
@@ -326,18 +327,16 @@ export class GitPanel extends BasePanel {
     const item = this.items[this.selectedIndex];
     if (!item || item.kind !== 'file') return;
 
-    // I3: show base-class spinner while awaiting diff
-    this.startLoading('Loading diff...');
-    this.markDirty();
+    // I3: withLoading guarantees spinner is cleared even if diffFile throws
     try {
-      const git = new GitService(this.workingDirectory);
-      const raw = await git.diffFile(item.entry.path, item.entry.staged);
-      this.stopLoading();
+      const raw = await this.withLoading('Loading diff…', async () => {
+        const git = new GitService(this.workingDirectory);
+        return git.diffFile(item.entry.path, item.entry.staged);
+      });
       this.expandedDiff = raw ? raw.split('\n') : ['(no diff available)'];
       this.scrollOffset = 0;
       this.markDirty();
     } catch (err) {
-      this.stopLoading();
       this.expandedDiff = [`Error: ${summarizeError(err)}`];
       this.scrollOffset = 0;
       this.markDirty();

package/src/panels/hooks-panel.ts

@@ -10,6 +10,7 @@ import type { HookWorkbench } from '@pellux/goodvibes-sdk/platform/hooks/workben
 import { truncateDisplay } from '../utils/terminal-width.ts';
 import {
   buildPanelLine,
+  buildStatusPill,
   DEFAULT_PANEL_PALETTE,
 } from './polish.ts';
 
@@ -66,6 +67,7 @@ export class HooksPanel extends ScrollableListPanel<HookEntry> {
     dataSource: HooksPanelDataSource = createDefaultDataSource(hookDispatcher, hookWorkbench, hookActivityTracker),
   ) {
     super('hooks', 'Hooks', 'H', 'monitoring');
+    this.showSelectionGutter = true; // I5: non-color selection affordance
     this.dataSource = dataSource;
   }
 
@@ -88,7 +90,7 @@ export class HooksPanel extends ScrollableListPanel<HookEntry> {
       [' ', C.label, bg],
       [truncateDisplay(entry.hook.name ?? '(unnamed)', 20).padEnd(20), C.value, bg],
       [` ${truncateDisplay(entry.pattern, 28).padEnd(28)}`, C.info, bg],
-      [` ${(entry.hook.enabled === false ? 'DISABLED' : 'ENABLED').padEnd(8)}`, entry.hook.enabled === false ? C.warn : C.ok, bg],
+      ...buildStatusPill(entry.hook.enabled === false ? 'warn' : 'good', ` ${(entry.hook.enabled === false ? 'DISABLED' : 'ENABLED').padEnd(8)}`, { bg }),
       [` ${entry.hook.type}`, C.dim, bg],
     ]);
   }

package/src/panels/incident-review-panel.ts

@@ -8,6 +8,7 @@ import {
   buildKeyValueLine,
   buildPanelLine,
   buildPanelWorkspace,
+  buildStatusPill,
   DEFAULT_PANEL_PALETTE,
   type PanelPalette,
 } from './polish.ts';
@@ -40,6 +41,7 @@ export class IncidentReviewPanel extends ScrollableListPanel<FailureReport> {
 
   public constructor(registry?: ForensicsRegistry) {
     super('incident', 'Incident Review', 'N', 'monitoring');
+    this.showSelectionGutter = true; // I5: non-color selection affordance
     this.registry = registry;
     this.unsub = registry ? registry.subscribe(() => this.markDirty()) : null;
   }
@@ -137,7 +139,7 @@ export class IncidentReviewPanel extends ScrollableListPanel<FailureReport> {
       if (bundle.evidence.slowPhases.length > 0) {
         footerLines.push(buildPanelLine(width, [
           ['  Slow phases: ', C.label],
-          [bundle.evidence.slowPhases.join(', ').slice(0, Math.max(0, width - 15)), C.warn],
+          ...buildStatusPill('warn', bundle.evidence.slowPhases.join(', ').slice(0, Math.max(0, width - 15))),
         ]));
       }
       const rootCause = selected.causalChain.find((entry) => entry.isRootCause);
@@ -166,7 +168,7 @@ export class IncidentReviewPanel extends ScrollableListPanel<FailureReport> {
           : `Replay link: ${mismatch.kind}${mismatch.ownerDomain ? `/${mismatch.ownerDomain}` : ''} - ${mismatch.description}`;
         footerLines.push(buildPanelLine(width, [
           ['  ', C.label],
-          [replayDetail.slice(0, Math.max(0, width - 2)), C.bad],
+          ...buildStatusPill('bad', replayDetail.slice(0, Math.max(0, width - 2))),
         ]));
       } else {
         const ownerBreakdown = Object.entries(bundle.replay.mismatchBreakdown.byOwnerDomain)

package/src/panels/knowledge-panel.ts

@@ -1,5 +1,5 @@
 import type { Line } from '../types/grid.ts';
-import { BasePanel } from './base-panel.ts';
+import { ScrollableListPanel } from './scrollable-list-panel.ts';
 import { type ConfirmState, handleConfirmInput, renderConfirmLines } from './confirm-state.ts';
 import type { MemoryClass, MemoryRecord, MemoryRegistry, MemoryReviewState } from '@pellux/goodvibes-sdk/platform/state/memory-store';
 import {
@@ -9,9 +9,7 @@ import {
   buildKeyValueLine,
   buildPanelLine,
   buildPanelWorkspace,
-  resolveScrollablePanelSection,
   DEFAULT_PANEL_PALETTE,
-  type PanelWorkspaceSection,
 } from './polish.ts';
 
 function summarize(records: MemoryRecord[], cls: MemoryClass): MemoryRecord[] {
@@ -42,11 +40,9 @@ function formatConfidence(confidence: number): string {
   return `${confidence.toString().padStart(3, ' ')}%`;
 }
 
-export class KnowledgePanel extends BasePanel {
+export class KnowledgePanel extends ScrollableListPanel<MemoryRecord> {
   private readonly registry: MemoryRegistry;
   private unsubscribe?: () => void;
-  private selectedIndex = 0;
-  private scrollOffset = 0;
   private records: MemoryRecord[] = [];
   // I1: confirm for destructive review-state mutations
   private confirm: ConfirmState<{ id: string; action: 'stale' | 'contradicted' }> | null = null;
@@ -74,6 +70,38 @@ export class KnowledgePanel extends BasePanel {
     this.unsubscribe = undefined;
   }
 
+  // ---------------------------------------------------------------------------
+  // ScrollableListPanel implementation
+  // ---------------------------------------------------------------------------
+
+  protected getItems(): readonly MemoryRecord[] {
+    return this.records;
+  }
+
+  protected renderItem(record: MemoryRecord, index: number, selected: boolean, width: number): Line {
+    const bg = selected ? C.selectBg : undefined;
+    return buildPanelLine(width, [
+      ['  ', C.label, bg],
+      [record.reviewState.padEnd(13), reviewStateColor(record.reviewState), bg],
+      [` ${formatConfidence(record.confidence)} `, C.value, bg],
+      [record.summary.slice(0, Math.max(0, width - 26)), C.value, bg],
+    ]);
+  }
+
+  protected override getPalette() { return C; }
+  protected override getEmptyStateMessage() { return 'No durable project knowledge'; }
+  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 project memory' },
+      { command: '/recall capture policy', summary: 'store the current policy posture as durable evidence' },
+    ];
+  }
+
+  // ---------------------------------------------------------------------------
+  // Input
+  // ---------------------------------------------------------------------------
+
   public handleInput(key: string): boolean {
     // I1: y/n confirm for stale/contradict
     if (this.confirm) {
@@ -116,25 +144,13 @@ export class KnowledgePanel extends BasePanel {
       if (result === 'absorbed') return true;
     }
 
-    // I2: auto-clear error on next keypress
-    if (this.lastError) this.clearError();
-
-    if (this.records.length === 0) return false;
-    if (key === 'ArrowUp' || key === 'k') {
-      this.selectedIndex = Math.max(0, this.selectedIndex - 1);
-      this.markDirty();
-      return true;
-    }
-    if (key === 'ArrowDown' || key === 'j') {
-      this.selectedIndex = Math.min(this.records.length - 1, this.selectedIndex + 1);
-      this.markDirty();
-      return true;
-    }
+    // I2: auto-clear error on next keypress (inherited via super.handleInput)
+    if (this.records.length === 0) return super.handleInput(key);
 
     const selected = this.records[this.selectedIndex];
-    if (!selected) return false;
 
-    if (key === 'Enter' || key === 'r') {
+    if (key === 'Enter' || key === 'return' || key === 'r') {
+      if (!selected) return false;
       this.registry.review(selected.id, {
         state: 'reviewed',
         confidence: Math.max(selected.confidence, 85),
@@ -145,18 +161,21 @@ export class KnowledgePanel extends BasePanel {
       return true;
     }
     if (key === 's') {
+      if (!selected) return false;
       // I1: prompt confirm before marking stale
       this.confirm = { subject: { id: selected.id, action: 'stale' }, label: selected.summary.slice(0, 40) };
       this.markDirty();
       return true;
     }
     if (key === 'c') {
+      if (!selected) return false;
       // I1: prompt confirm before marking contradicted
       this.confirm = { subject: { id: selected.id, action: 'contradicted' }, label: selected.summary.slice(0, 40) };
       this.markDirty();
       return true;
     }
     if (key === 'f') {
+      if (!selected) return false;
       this.registry.review(selected.id, {
         state: 'fresh',
         confidence: Math.max(selected.confidence, 60),
@@ -167,17 +186,20 @@ export class KnowledgePanel extends BasePanel {
       return true;
     }
 
-    return false;
+    // Normalize arrow keys to base class format
+    if (key === 'ArrowUp') return super.handleInput('up');
+    if (key === 'ArrowDown') return super.handleInput('down');
+    return super.handleInput(key);
   }
 
   private refresh(): void {
     const queue = this.registry.reviewQueue(24);
     this.records = queue.length > 0 ? queue : this.registry.search({ limit: 24 });
-    this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, this.records.length - 1));
+    this.clampSelection();
   }
 
   public render(width: number, height: number): Line[] {
-    this.needsRender = false;
+    this.clampSelection();
 
     // I1: show confirm dialog in place of normal content
     if (this.confirm) {
@@ -196,26 +218,9 @@ export class KnowledgePanel extends BasePanel {
     const records = this.registry.search({ limit: 200 });
 
     if (records.length === 0) {
-      return buildPanelWorkspace(width, height, {
+      return this.renderList(width, height, {
         title: 'Knowledge Control Room',
-        intro,
-        sections: [{
-          lines: buildEmptyState(
-            width,
-            ' No durable project knowledge has been recorded yet.',
-            'The knowledge system is empty. It becomes useful once session, incident, task, and operator evidence are promoted into durable records.',
-            [
-              { command: '/recall add fact <summary>', summary: 'capture a durable fact directly' },
-              { command: '/recall capture incident latest', summary: 'promote the latest incident into project memory' },
-              { command: '/recall capture policy', summary: 'store the current policy posture as durable evidence' },
-            ],
-            C,
-          ),
-        }],
-        footerLines: [
-          buildPanelLine(width, [[' Review keys: Up/Down move  r/Enter review  s stale  c contradicted  f fresh', C.dim]]),
-        ],
-        palette: C,
+        footer: [buildPanelLine(width, [[' Review keys: Up/Down move  r/Enter review  s stale  c contradicted  f fresh', C.dim]])],
       });
     }
 
@@ -252,7 +257,7 @@ export class KnowledgePanel extends BasePanel {
         ['  fresh ', C.label], [String(byReview.get('fresh') ?? 0), C.info],
         ['  stale ', C.label], [String(byReview.get('stale') ?? 0), C.warn],
         ['  contradicted ', C.label], [String(byReview.get('contradicted') ?? 0), C.bad],
-        ['  review queue ', C.label], [String(queue.length), queue.length > 0 ? C.warn : C.good],
+        ['  Review Queue ', C.label], [String(queue.length), queue.length > 0 ? C.warn : C.good],
       ]),
       buildPanelLine(width, [
         [' session ', C.label], [String(byScope.get('session') ?? 0), C.info],
@@ -285,93 +290,56 @@ export class KnowledgePanel extends BasePanel {
       }
     }
 
-    const selected = this.records[this.selectedIndex];
+    const selectedRecord = this.records[this.selectedIndex];
     const selectedLines: Line[] = [];
-    if (selected) {
+    if (selectedRecord) {
+      selectedLines.push(buildPanelLine(width, [['  Selected', C.label]]));
       selectedLines.push(buildKeyValueLine(width, [
-        { label: 'Class', value: selected.cls, valueColor: C.value },
-        { label: 'Scope', value: selected.scope, valueColor: C.info },
-        { label: 'Review', value: selected.reviewState, valueColor: reviewStateColor(selected.reviewState) },
-        { label: 'Confidence', value: formatConfidence(selected.confidence), valueColor: C.value },
+        { label: 'Class', value: selectedRecord.cls, valueColor: C.value },
+        { label: 'Scope', value: selectedRecord.scope, valueColor: C.info },
+        { label: 'Review', value: selectedRecord.reviewState, valueColor: reviewStateColor(selectedRecord.reviewState) },
+        { label: 'Confidence', value: formatConfidence(selectedRecord.confidence), valueColor: C.value },
       ], C));
-      selectedLines.push(...buildBodyText(width, `Summary: ${selected.summary}`, C, C.value));
-      if (selected.detail) selectedLines.push(...buildBodyText(width, `Detail: ${selected.detail}`, C, C.dim));
-      if (selected.provenance.length) {
+      selectedLines.push(...buildBodyText(width, `Summary: ${selectedRecord.summary}`, C, C.value));
+      if (selectedRecord.detail) selectedLines.push(...buildBodyText(width, `Detail: ${selectedRecord.detail}`, C, C.dim));
+      if (selectedRecord.provenance.length) {
         selectedLines.push(...buildBodyText(
           width,
-          `Provenance: ${selected.provenance.map((p) => `${p.kind}:${p.ref}`).join(', ')}`,
+          `Provenance: ${selectedRecord.provenance.map((p) => `${p.kind}:${p.ref}`).join(', ')}`,
           C,
           C.dim,
         ));
       }
-      if (selected.staleReason) {
+      if (selectedRecord.staleReason) {
         selectedLines.push(...buildBodyText(
           width,
-          `Stale reason: ${selected.staleReason}`,
+          `Stale reason: ${selectedRecord.staleReason}`,
           C,
-          selected.reviewState === 'contradicted' ? C.bad : C.warn,
+          selectedRecord.reviewState === 'contradicted' ? C.bad : C.warn,
         ));
       }
-      if (selected.reviewedAt) {
+      if (selectedRecord.reviewedAt) {
         selectedLines.push(buildPanelLine(width, [
           ['  Reviewed: ', C.label],
-          [new Date(selected.reviewedAt).toLocaleString(), C.dim],
+          [new Date(selectedRecord.reviewedAt).toLocaleString(), C.dim],
         ]));
-        if (selected.reviewedBy) {
+        if (selectedRecord.reviewedBy) {
           selectedLines.push(buildPanelLine(width, [
             ['  Reviewer: ', C.label],
-            [selected.reviewedBy, C.dim],
+            [selectedRecord.reviewedBy, C.dim],
           ]));
         }
       }
     }
 
-    const footerLines = [
-      buildPanelLine(width, [['  Up/Down move  r/Enter reviewed  s stale  c contradicted  f fresh', C.dim]]),
-    ];
-    const classesSection: PanelWorkspaceSection = { title: 'Classes', lines: classLines };
-    const reviewStateSection: PanelWorkspaceSection = { title: 'Review State', lines: reviewLines };
-    const selectedSection: PanelWorkspaceSection = selectedLines.length > 0 ? { title: 'Selected', lines: selectedLines } : { title: 'Selected', lines: [] };
-    const recentSection: PanelWorkspaceSection = { title: 'Recent Risks / Runbooks / Architecture Notes', lines: recentSummaryLines };
-    const queueSection = resolveScrollablePanelSection(width, height, {
-      intro,
-      footerLines,
-      palette: C,
-      beforeSections: [classesSection, reviewStateSection],
-      section: {
-        title: 'Review Queue',
-        scrollableLines: this.records.map((record, globalIndex) => {
-          const bg = globalIndex === this.selectedIndex ? C.selectBg : undefined;
-          return buildPanelLine(width, [
-            ['  ', C.label, bg],
-            [record.reviewState.padEnd(13), reviewStateColor(record.reviewState), bg],
-            [` ${formatConfidence(record.confidence)} `, C.value, bg],
-            [record.summary.slice(0, Math.max(0, width - 26)), C.value, bg],
-          ]);
-        }),
-        selectedIndex: this.selectedIndex,
-        scrollOffset: this.scrollOffset,
-        minRows: 4,
-        appendWindowSummary: { dimColor: C.dim },
-      },
-      afterSections: selectedLines.length > 0 ? [selectedSection, recentSection] : [recentSection],
-    });
-    this.scrollOffset = queueSection.scrollOffset;
-
-    const sections: PanelWorkspaceSection[] = [
-      classesSection,
-      reviewStateSection,
-      queueSection.section,
-    ];
-    if (selectedLines.length > 0) sections.push(selectedSection);
-    sections.push(recentSection);
-
-    return buildPanelWorkspace(width, height, {
+    return this.renderList(width, height, {
       title: 'Knowledge Control Room',
-      intro,
-      sections,
-      footerLines,
-      palette: C,
+      header: [...classLines, ...reviewLines],
+      footer: [
+        ...(selectedLines.length > 0 ? selectedLines : []),
+        ...recentSummaryLines,
+        buildPanelLine(width, [['  Up/Down move  r/Enter reviewed  s stale  c contradicted  f fresh', C.dim]]),
+      ],
     });
   }
 }

package/src/panels/local-auth-panel.ts

@@ -33,6 +33,7 @@ export class LocalAuthPanel extends ScrollableListPanel<LocalAuthUser> {
 
   public constructor(authManager: LocalAuthInspectionQuery) {
     super('local-auth', 'Local Auth', 'U', 'monitoring');
+    this.showSelectionGutter = true; // I5: non-color selection affordance
     this.authManager = authManager;
   }
 

package/src/panels/marketplace-panel.ts

@@ -1,12 +1,11 @@
 import type { Line } from '../types/grid.ts';
-import { BasePanel } from './base-panel.ts';
+import { ScrollableListPanel } from './scrollable-list-panel.ts';
 import {
   buildEmptyState,
   buildGuidanceLine,
   buildKeyValueLine,
   buildPanelLine,
   buildPanelWorkspace,
-  resolveScrollablePanelSection,
   DEFAULT_PANEL_PALETTE,
   type PanelWorkspaceSection,
 } from './polish.ts';
@@ -36,10 +35,8 @@ function statusColor(installed: boolean): string {
   return installed ? C.good : C.dim;
 }
 
-export class MarketplacePanel extends BasePanel {
+export class MarketplacePanel extends ScrollableListPanel<MarketplaceRow> {
   private rows: MarketplaceRow[] = [];
-  private selectedIndex = 0;
-  private scrollOffset = 0;
   private readonly unsub: (() => void) | null;
 
   public constructor(
@@ -59,26 +56,45 @@ export class MarketplacePanel extends BasePanel {
     this.refresh();
   }
 
-  public handleInput(key: string): boolean {
-    if (this.rows.length === 0) return false;
-    if (key === 'ArrowUp' || key === 'k') {
-      this.selectedIndex = Math.max(0, this.selectedIndex - 1);
-      this.markDirty();
-      return true;
-    }
-    if (key === 'ArrowDown' || key === 'j') {
-      this.selectedIndex = Math.min(this.rows.length - 1, this.selectedIndex + 1);
-      this.markDirty();
-      return true;
-    }
-    return false;
+  // ---------------------------------------------------------------------------
+  // ScrollableListPanel implementation
+  // ---------------------------------------------------------------------------
+
+  protected getItems(): readonly MarketplaceRow[] {
+    return this.rows;
+  }
+
+  protected renderItem(row: MarketplaceRow, index: number, selected: boolean, width: number): Line {
+    const bg = selected ? C.selectBg : undefined;
+    const provenance = row.entry.provenance ?? 'local';
+    return buildPanelLine(width, [
+      ['  ', C.label, bg],
+      [row.kind.padEnd(11), C.info, bg],
+      [row.entry.name.slice(0, 20).padEnd(20), C.value, bg],
+      [` ${provenance.slice(0, 16).padEnd(16)}`, provenance === 'local' ? C.dim : C.info, bg],
+      [` ${(row.installed ? 'INSTALLED' : 'CURATED').padEnd(9)} `, statusColor(row.installed), bg],
+      [` ${row.entry.version ?? 'n/a'}`, C.dim, bg],
+    ]);
+  }
+
+  protected override getPalette() { return C; }
+  protected override getEmptyStateMessage() {
+    return this.ecosystemPaths
+      ? ' No curated marketplace entries found yet.'
+      : ' Marketplace catalog paths are not wired into this panel yet.';
+  }
+  protected override getEmptyStateActions() {
+    return [
+      { command: '/marketplace bundle import <path>', summary: 'import a curated marketplace bundle' },
+      { command: '/marketplace catalog review', summary: 'inspect the current local catalog posture' },
+      { command: '/marketplace publish <kind> <path>', summary: 'publish local ecosystem entries back into the curated catalog' },
+    ];
   }
 
   private refresh(): void {
     if (!this.ecosystemPaths) {
       this.rows = [];
-      this.selectedIndex = 0;
-      this.scrollOffset = 0;
+      this.clampSelection();
       return;
     }
     try {
@@ -93,7 +109,7 @@ export class MarketplacePanel extends BasePanel {
         ...loadEcosystemCatalog('policy-pack', this.ecosystemPaths).map((entry) => ({ kind: 'policy-pack' as const, entry, installed: installedPolicyPacks.has(entry.id) })),
       ];
       this.rows = rows.sort((a, b) => a.entry.name.localeCompare(b.entry.name));
-      this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, this.rows.length - 1));
+      this.clampSelection();
       // I2: clear any previous catalog load error on successful refresh
       this.clearError();
     } catch (e) {
@@ -103,7 +119,7 @@ export class MarketplacePanel extends BasePanel {
   }
 
   public render(width: number, height: number): Line[] {
-    this.needsRender = false;
+    this.clampSelection();
     this.refresh();
 
     const intro = 'Curated local-first ecosystem with provenance, compatibility, rollback history, and receipt-aware lifecycle review.';
@@ -159,22 +175,22 @@ export class MarketplacePanel extends BasePanel {
       ? startupIssues.slice(0, 4).map((issue) => buildPanelLine(width, [['  ', C.label], [issue.slice(0, Math.max(0, width - 2)), C.warn]]))
       : [buildPanelLine(width, [['  No startup or lifecycle issues are currently pushing marketplace repair recommendations.', C.dim]])];
 
-    const selected = this.rows[this.selectedIndex];
+    const selectedRow = this.rows[this.selectedIndex];
     const selectedLines: Line[] = [];
-    if (selected) {
-      const review = reviewEcosystemCatalogEntry(selected.entry, this.ecosystemPaths!);
+    if (selectedRow) {
+      const review = reviewEcosystemCatalogEntry(selectedRow.entry, this.ecosystemPaths!);
       selectedLines.push(buildPanelLine(width, [
         ['  Provenance: ', C.label],
-        [(selected.entry.provenance ?? '(none)').slice(0, Math.max(0, width - 15)), selected.entry.provenance ? C.info : C.dim],
+        [(selectedRow.entry.provenance ?? '(none)').slice(0, Math.max(0, width - 15)), selectedRow.entry.provenance ? C.info : C.dim],
       ]));
       selectedLines.push(buildPanelLine(width, [
         ['  Source: ', C.label],
-        [selected.entry.source.slice(0, Math.max(0, width - 11)), C.value],
+        [selectedRow.entry.source.slice(0, Math.max(0, width - 11)), C.value],
       ]));
       selectedLines.push(buildKeyValueLine(width, [
         { label: 'Compatibility', value: review.compatibility.status, valueColor: review.compatibility.status === 'compatible' ? C.good : C.warn },
         { label: 'Risk', value: review.riskLevel, valueColor: review.riskLevel === 'low' ? C.good : C.warn },
-        { label: 'State', value: selected.installed ? 'installed' : 'curated', valueColor: statusColor(selected.installed) },
+        { label: 'State', value: selectedRow.installed ? 'installed' : 'curated', valueColor: statusColor(selectedRow.installed) },
       ], C));
       selectedLines.push(buildGuidanceLine(width, '/marketplace review <id>', 'inspect full compatibility and receipt detail for the selected entry', C));
     }
@@ -182,49 +198,15 @@ export class MarketplacePanel extends BasePanel {
     const postureSection: PanelWorkspaceSection = { title: 'Marketplace posture', lines: postureLines };
     const startupIssuesSection: PanelWorkspaceSection = { title: 'Startup Issues', lines: startupIssueLines };
     const recommendationsSection: PanelWorkspaceSection = { title: 'Recommendations', lines: recommendationLines };
-    const selectedSection: PanelWorkspaceSection = { title: 'Selected', lines: selectedLines };
-    const catalogSection = resolveScrollablePanelSection(width, height, {
-      intro,
-      palette: C,
-      beforeSections: [postureSection, startupIssuesSection, recommendationsSection],
-      section: {
-        title: 'Catalog',
-        scrollableLines: this.rows.map((row, globalIndex) => {
-          const bg = globalIndex === this.selectedIndex ? C.selectBg : undefined;
-          const provenance = row.entry.provenance ?? 'local';
-          return buildPanelLine(width, [
-            ['  ', C.label, bg],
-            [row.kind.padEnd(11), C.info, bg],
-            [row.entry.name.slice(0, 20).padEnd(20), C.value, bg],
-            [` ${provenance.slice(0, 16).padEnd(16)}`, provenance === 'local' ? C.dim : C.info, bg],
-            [` ${(row.installed ? 'INSTALLED' : 'CURATED').padEnd(9)} `, statusColor(row.installed), bg],
-            [` ${row.entry.version ?? 'n/a'}`, C.dim, bg],
-          ]);
-        }),
-        selectedIndex: this.selectedIndex,
-        scrollOffset: this.scrollOffset,
-        minRows: 4,
-        appendWindowSummary: { dimColor: C.dim },
-      },
-      afterSections: selectedLines.length > 0 && height >= 20 ? [selectedSection] : [],
-    });
-    this.scrollOffset = catalogSection.scrollOffset;
-
-    const sections: PanelWorkspaceSection[] = [
-      postureSection,
-      startupIssuesSection,
-      recommendationsSection,
-      catalogSection.section,
-    ];
-    if (selectedLines.length > 0 && height >= 20) {
-      sections.push(selectedSection);
-    }
 
-    return buildPanelWorkspace(width, height, {
+    return this.renderList(width, height, {
       title: 'Marketplace Control Room',
-      intro,
-      sections,
-      palette: C,
+      header: [
+        ...postureLines,
+        ...startupIssueLines,
+        ...recommendationLines,
+      ],
+      footer: selectedLines.length > 0 && height >= 20 ? selectedLines : [],
     });
   }
 }

package/src/panels/mcp-panel.ts

@@ -9,6 +9,7 @@ import {
   buildGuidanceLine,
   buildKeyValueLine,
   buildPanelLine,
+  buildStatusPill,
   DEFAULT_PANEL_PALETTE,
 } from './polish.ts';
 
@@ -62,6 +63,7 @@ export class McpPanel extends ScrollableListPanel<McpServerSecurityEntry> {
 
   public constructor(registry: McpRegistry) {
     super('mcp', 'MCP', 'Z', 'monitoring');
+    this.showSelectionGutter = true; // I5: non-color selection affordance
     this.registry = registry;
   }
 
@@ -83,7 +85,7 @@ export class McpPanel extends ScrollableListPanel<McpServerSecurityEntry> {
     return buildPanelLine(width, [
       [' ', C.label, bg],
       [entry.name.padEnd(20), C.value, bg],
-      [` ${(entry.connected ? 'CONNECTED' : 'DISCONNECTED').padEnd(13)}`, entry.connected ? C.ok : C.error, bg],
+      ...buildStatusPill(entry.connected ? 'good' : 'bad', ` ${(entry.connected ? 'CONNECTED' : 'DISCONNECTED').padEnd(13)}`, { bg }),
       [` ${entry.trustMode.padEnd(12)}`, modeColor(entry.trustMode), bg],
       [` ${entry.role.padEnd(10)}`, C.info, bg],
       [` ${entry.schemaFreshness}`, freshnessColor(entry.schemaFreshness), bg],