@pellux/goodvibes-tui 0.18.20 → 0.19.0

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

@@ -1,18 +1,16 @@
 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 { McpRegistry } from '@pellux/goodvibes-sdk/platform/mcp/registry';
 import type { McpDecisionRecord } from '@pellux/goodvibes-sdk/platform/runtime/mcp/types';
+
+type McpServerSecurityEntry = ReturnType<McpRegistry['listServerSecurity']>[number];
 import { truncateDisplay } from '../utils/terminal-width.ts';
 import {
-  buildEmptyState,
   buildGuidanceLine,
   buildKeyValueLine,
   buildPanelLine,
-  buildPanelWorkspace,
+  buildStatusPill,
   DEFAULT_PANEL_PALETTE,
-  resolvePrimaryScrollableSection,
-  type PanelWorkspaceSection,
 } from './polish.ts';
 
 const C = {
@@ -60,93 +58,102 @@ function decisionColor(decision: McpDecisionRecord): string {
   return decision.incoherent ? C.warn : C.ok;
 }
 
-export class McpPanel extends BasePanel {
+export class McpPanel extends ScrollableListPanel<McpServerSecurityEntry> {
   private readonly registry: McpRegistry;
-  private selectedIndex = 0;
-  private scrollOffset = 0;
 
   public constructor(registry: McpRegistry) {
     super('mcp', 'MCP', 'Z', 'monitoring');
+    this.showSelectionGutter = true; // I5: non-color selection affordance
     this.registry = registry;
   }
 
+  protected override getPalette() { return C; }
+  protected override getEmptyStateMessage() { return ' No MCP servers configured or connected.'; }
+  protected override getEmptyStateActions() {
+    return [
+      { command: '/mcp', summary: 'list server state and security posture' },
+      { command: '/settings', summary: 'open the MCP settings category for trust and scope controls' },
+    ];
+  }
+
+  protected getItems(): readonly McpServerSecurityEntry[] {
+    return this.registry.listServerSecurity();
+  }
+
+  protected renderItem(entry: McpServerSecurityEntry, index: number, selected: boolean, width: number): Line {
+    const bg = selected ? C.selectBg : undefined;
+    return buildPanelLine(width, [
+      [' ', C.label, bg],
+      [entry.name.padEnd(20), C.value, 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],
+    ]);
+  }
+
   public handleInput(key: string): boolean {
-    const entries = this.registry.listServerSecurity();
     if (key === 'r') {
       this.markDirty();
       return true;
     }
-    if (entries.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(entries.length - 1, this.selectedIndex + 1);
-      this.markDirty();
-      return true;
-    }
-    return false;
+    return super.handleInput(key);
   }
 
   public render(width: number, height: number): Line[] {
-    this.needsRender = false;
-    const intro = 'Trust, quarantine, scope, and recent security decisions for configured MCP servers.';
+    this.clampSelection();
     const entries = this.registry.listServerSecurity();
+    const intro = 'Trust, quarantine, scope, and recent security decisions for configured MCP servers.';
 
-    if (entries.length === 0) {
-      const workspace = buildPanelWorkspace(width, height, {
-        title: 'MCP Control Room',
-        intro,
-        sections: [{
-          lines: buildEmptyState(
-            width,
-            ' No MCP servers configured or connected.',
-            'Add MCP servers, inspect trust posture, and review risk-scoped policies here once the registry is populated.',
-            [
-              { command: '/mcp', summary: 'list server state and security posture' },
-              { command: '/settings', summary: 'open the MCP settings category for trust and scope controls' },
-            ],
-            C,
-          ),
-        }],
-        palette: C,
-      });
-      while (workspace.length < height) workspace.push(createEmptyLine(width));
-      return workspace;
-    }
-
-    this.selectedIndex = Math.min(this.selectedIndex, entries.length - 1);
-    const selected = entries[this.selectedIndex]!;
-    const sandboxBinding = this.registry.listServerSandboxBindings().find((entry) => entry.name === selected.name);
-    const connected = entries.filter((entry) => entry.connected).length;
-    const quarantined = entries.filter((entry) => entry.schemaFreshness === 'quarantined').length;
+    const connected = entries.filter((e) => e.connected).length;
+    const quarantined = entries.filter((e) => e.schemaFreshness === 'quarantined').length;
     const disconnected = entries.length - connected;
-    const staleSchemas = entries.filter((entry) => entry.schemaFreshness !== 'fresh').length;
-    const detailLines: Line[] = [
-      buildPanelLine(width, [
+    const staleSchemas = entries.filter((e) => e.schemaFreshness !== 'fresh').length;
+
+    const headerLines: Line[] = [
+      buildPanelLine(width, [['  MCP posture', C.label]]),
+      buildKeyValueLine(width, [
+        { label: 'servers', value: String(entries.length), valueColor: C.value },
+        { label: 'connected', value: String(connected), valueColor: connected > 0 ? C.ok : C.dim },
+        { label: 'disconnected', value: String(disconnected), valueColor: disconnected > 0 ? C.warn : C.dim },
+        { label: 'stale schema', value: String(staleSchemas), valueColor: staleSchemas > 0 ? C.warn : C.dim },
+        { label: 'quarantined', value: String(quarantined), valueColor: quarantined > 0 ? C.error : C.dim },
+      ], C),
+      buildGuidanceLine(width, '/mcp review', 'inspect trust, freshness, and quarantine posture for configured servers', C),
+      buildGuidanceLine(width, '/mcp repair', 'review reconnect, auth, import, and startup remediation guidance', C),
+    ];
+
+    const selected = entries[this.selectedIndex];
+    const detailLines: Line[] = [];
+    const repairLines: Line[] = [];
+
+    if (selected) {
+      const sandboxBinding = this.registry.listServerSandboxBindings().find((e) => e.name === selected.name);
+      const decisions = this.registry.listRecentSecurityDecisions?.(24) ?? [];
+      const selectedDecision = decisions.find((d) => d.serverName === selected.name);
+
+      detailLines.push(buildPanelLine(width, [
         ['  Server: ', C.label],
         [selected.name, C.value],
         ['  Trust: ', C.label],
         [selected.trustMode, modeColor(selected.trustMode)],
         ['  Role: ', C.label],
         [selected.role, C.info],
-      ]),
-      buildPanelLine(width, [
+      ]));
+      detailLines.push(buildPanelLine(width, [
         ['  Schema: ', C.label],
         [selected.schemaFreshness, freshnessColor(selected.schemaFreshness)],
         ['  Approved by: ', C.label],
         [truncateDisplay(selected.quarantineApprovedBy ?? 'n/a', Math.max(0, width - 31)), selected.quarantineApprovedBy ? C.info : C.dim],
-      ]),
-      buildPanelLine(width, [
+      ]));
+      detailLines.push(buildPanelLine(width, [
         ['  Scope: ', C.label],
         [truncateDisplay(
           `paths ${selected.allowedPaths.length > 0 ? selected.allowedPaths.join(', ') : 'unbounded'}  hosts ${selected.allowedHosts.length > 0 ? selected.allowedHosts.join(', ') : 'unbounded'}`,
           Math.max(0, width - 10),
         ), (selected.allowedPaths.length > 0 || selected.allowedHosts.length > 0) ? C.value : C.dim],
-      ]),
-      buildPanelLine(width, [
+      ]));
+      detailLines.push(buildPanelLine(width, [
         ['  Sandbox: ', C.label],
         [truncateDisplay(
           sandboxBinding?.sessionId
@@ -154,107 +161,55 @@ export class McpPanel extends BasePanel {
             : 'not isolated',
           Math.max(0, width - 13),
         ), sandboxBinding?.sessionId ? C.info : C.dim],
-      ]),
-    ];
-    if (selected.schemaFreshness === 'quarantined') {
-      detailLines.push(buildPanelLine(width, [
-        ['  Quarantine: ', C.label],
-        [truncateDisplay(`${selected.quarantineReason ?? 'unknown'}${selected.quarantineDetail ? ` - ${selected.quarantineDetail}` : ''}`, Math.max(0, width - 15)), C.error],
       ]));
-    }
+      if (selected.schemaFreshness === 'quarantined') {
+        detailLines.push(buildPanelLine(width, [
+          ['  Quarantine: ', C.label],
+          [truncateDisplay(`${selected.quarantineReason ?? 'unknown'}${selected.quarantineDetail ? ` - ${selected.quarantineDetail}` : ''}`, Math.max(0, width - 15)), C.error],
+        ]));
+      }
+      if (selectedDecision) {
+        const summary = `${selectedDecision.serverName}:${selectedDecision.toolName} ${selectedDecision.verdict.toUpperCase()} ${selectedDecision.capability}${selectedDecision.incoherent ? ' incoherent' : ''}`;
+        detailLines.push(buildPanelLine(width, [
+          ['  Recent: ', C.label],
+          [truncateDisplay(summary, Math.max(0, width - 10)), decisionColor(selectedDecision)],
+        ]));
+      }
 
-    const decisions = this.registry.listRecentSecurityDecisions?.(24) ?? [];
-    const selectedDecision = decisions.find((decision) => decision.serverName === selected.name);
-    if (selectedDecision) {
-      const summary = `${selectedDecision.serverName}:${selectedDecision.toolName} ${selectedDecision.verdict.toUpperCase()} ${selectedDecision.capability}${selectedDecision.incoherent ? ' incoherent' : ''}`;
-      detailLines.push(buildPanelLine(width, [
-        ['  Recent: ', C.label],
-        [truncateDisplay(summary, Math.max(0, width - 10)), decisionColor(selectedDecision)],
-      ]));
-    }
-    const decisionLines: Line[] = decisions.length === 0
-      ? [buildPanelLine(width, [['  No MCP decisions recorded yet.', C.dim]])]
-      : decisions.map((decision) => {
-          const summary = `${decision.serverName}:${decision.toolName} ${decision.verdict.toUpperCase()} ${decision.capability}${decision.incoherent ? ' incoherent' : ''}`;
-          return buildPanelLine(width, [
-            ['  ', C.label],
-            [truncateDisplay(summary, Math.max(0, width - 2)), decisionColor(decision)],
-          ]);
-        });
+      if (!selected.connected) {
+        repairLines.push(buildPanelLine(width, [['  /mcp repair', C.warn], ['  review reconnect and startup posture for this server', C.dim]]));
+      }
+      if (selected.schemaFreshness !== 'fresh') {
+        repairLines.push(buildPanelLine(width, [['  /mcp review', C.warn], ['  inspect schema freshness, quarantine, and trust posture', C.dim]]));
+      }
+      if (sandboxBinding?.sessionId) {
+        repairLines.push(buildPanelLine(width, [['  /sandbox review', C.info], ['  verify the bound MCP isolation session and startup status', C.dim]]));
+      }
+      if (repairLines.length === 0) {
+        repairLines.push(buildPanelLine(width, [['  No immediate MCP repair actions suggested for the selected server.', C.dim]]));
+      }
 
-    const repairLines: Line[] = [];
-    if (!selected.connected) {
-      repairLines.push(buildPanelLine(width, [['  /mcp repair', C.warn], ['  review reconnect and startup posture for this server', C.dim]]));
-    }
-    if (selected.schemaFreshness !== 'fresh') {
-      repairLines.push(buildPanelLine(width, [['  /mcp review', C.warn], ['  inspect schema freshness, quarantine, and trust posture', C.dim]]));
-    }
-    if (sandboxBinding?.sessionId) {
-      repairLines.push(buildPanelLine(width, [['  /sandbox review', C.info], ['  verify the bound MCP isolation session and startup status', C.dim]]));
+      const allDecisions = this.registry.listRecentSecurityDecisions?.(24) ?? [];
+      const decisionLines: Line[] = allDecisions.length === 0
+        ? [buildPanelLine(width, [['  No MCP decisions recorded yet.', C.dim]])]
+        : allDecisions.map((decision) => {
+            const summary = `${decision.serverName}:${decision.toolName} ${decision.verdict.toUpperCase()} ${decision.capability}${decision.incoherent ? ' incoherent' : ''}`;
+            return buildPanelLine(width, [
+              ['  ', C.label],
+              [truncateDisplay(summary, Math.max(0, width - 2)), decisionColor(decision)],
+            ]);
+          });
+      detailLines.push(...repairLines);
+      detailLines.push(...decisionLines);
     }
-    if (repairLines.length === 0) {
-      repairLines.push(buildPanelLine(width, [['  No immediate MCP repair actions suggested for the selected server.', C.dim]]));
-    }
-    const postureSection: PanelWorkspaceSection = {
-      title: 'MCP posture',
-      lines: [
-        buildKeyValueLine(width, [
-          { label: 'servers', value: String(entries.length), valueColor: C.value },
-          { label: 'connected', value: String(connected), valueColor: connected > 0 ? C.ok : C.dim },
-          { label: 'disconnected', value: String(disconnected), valueColor: disconnected > 0 ? C.warn : C.dim },
-          { label: 'stale schema', value: String(staleSchemas), valueColor: staleSchemas > 0 ? C.warn : C.dim },
-          { label: 'quarantined', value: String(quarantined), valueColor: quarantined > 0 ? C.error : C.dim },
-        ], C),
-        buildGuidanceLine(width, '/mcp review', 'inspect trust, freshness, and quarantine posture for configured servers', C),
-        buildGuidanceLine(width, '/mcp repair', 'review reconnect, auth, import, and startup remediation guidance', C),
-      ],
-    };
-    const selectedSection: PanelWorkspaceSection = { title: 'Selected Server', lines: detailLines };
-    const repairSection: PanelWorkspaceSection = { title: 'Repair', lines: repairLines };
-    const decisionsSection: PanelWorkspaceSection = { title: 'Recent Decisions', lines: decisionLines };
-    const resolvedServersSection = resolvePrimaryScrollableSection(width, height, {
-      intro,
-      footerLines: [buildPanelLine(width, [['  Up/Down move  r refresh', C.dim]])],
-      palette: C,
-      beforeSections: [postureSection],
-      section: {
-        title: 'Servers',
-        scrollableLines: entries.map((entry, absolute) => {
-          const bg = absolute === this.selectedIndex ? C.selectBg : undefined;
-          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],
-            [` ${entry.trustMode.padEnd(12)}`, modeColor(entry.trustMode), bg],
-            [` ${entry.role.padEnd(10)}`, C.info, bg],
-            [` ${entry.schemaFreshness}`, freshnessColor(entry.schemaFreshness), bg],
-          ]);
-        }),
-        selectedIndex: this.selectedIndex,
-        scrollOffset: this.scrollOffset,
-        guardRows: 1,
-        minRows: 4,
-        appendWindowSummary: { dimColor: C.dim },
-      },
-      afterSections: [selectedSection, repairSection, decisionsSection],
-    });
-    this.scrollOffset = resolvedServersSection.scrollOffset;
 
-    const sections: PanelWorkspaceSection[] = [
-      postureSection,
-      resolvedServersSection.section,
-      selectedSection,
-      repairSection,
-      decisionsSection,
-    ];
-    const lines = buildPanelWorkspace(width, height, {
+    return this.renderList(width, height, {
       title: 'MCP Control Room',
-      intro,
-      sections,
-      footerLines: [buildPanelLine(width, [['  Up/Down move  r refresh', C.dim]])],
-      palette: C,
+      header: headerLines,
+      footer: [
+        ...detailLines,
+        buildPanelLine(width, [['  Up/Down move  r refresh', C.dim]]),
+      ],
     });
-    while (lines.length < height) lines.push(createEmptyLine(width));
-    return lines.slice(0, height);
   }
 }