@pellux/goodvibes-tui 0.18.20 → 0.19.0

package/src/panels/security-panel.ts

@@ -1,6 +1,5 @@
 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 { TokenAuditResult } from '@pellux/goodvibes-sdk/platform/security/token-audit';
 import type { UiReadModel, UiSecuritySnapshot } from '../runtime/ui-read-models.ts';
 import {
@@ -8,10 +7,10 @@ import {
   buildGuidanceLine,
   buildPanelLine,
   buildPanelWorkspace,
-  resolveScrollablePanelSection,
+  buildStatusPill,
   DEFAULT_PANEL_PALETTE,
-  type PanelWorkspaceSection,
 } from './polish.ts';
+import { createEmptyLine } from '../types/grid.ts';
 
 const C = {
   ...DEFAULT_PANEL_PALETTE,
@@ -58,12 +57,12 @@ function severityColor(severity: 'low' | 'medium' | 'high' | 'critical'): string
   }
 }
 
-export class SecurityPanel extends BasePanel {
-  private selectedIndex = 0;
+export class SecurityPanel extends ScrollableListPanel<TokenAuditResult> {
   private readonly unsub: (() => void) | null;
 
   public constructor(private readonly readModel: UiReadModel<UiSecuritySnapshot>) {
     super('security', 'Security', 'U', 'monitoring');
+    this.showSelectionGutter = true; // I5: non-color selection affordance
     this.unsub = this.readModel.subscribe(() => this.markDirty());
   }
 
@@ -71,28 +70,41 @@ export class SecurityPanel extends BasePanel {
     this.unsub?.();
   }
 
+  protected override getPalette() { return C; }
+  protected override getEmptyStateMessage() { return ' No API tokens are registered with the security auditor yet.'; }
+  protected override getEmptyStateActions() {
+    return [
+      { command: '/storage review', summary: 'inspect secure secret storage and environment overrides' },
+      { command: '/policy preflight', summary: 'run a live preflight posture review' },
+      { command: '/mcp trust', summary: 'inspect active MCP trust and quarantine posture' },
+    ];
+  }
+
+  protected getItems(): readonly TokenAuditResult[] {
+    return this.readModel.getSnapshot().audit.results;
+  }
+
+  protected renderItem(result: TokenAuditResult, index: number, selected: boolean, width: number): Line {
+    const bg = selected ? C.selectBg : undefined;
+    return buildPanelLine(width, [
+      [' ', C.label, bg],
+      [result.label.padEnd(22), C.value, bg],
+      [` ${result.tokenId.padEnd(12)}`, C.info, bg],
+      [` ${result.scope.policyId.padEnd(10)}`, C.label, bg],
+      [` ${resultSummary(result).slice(0, Math.max(0, width - 49))}`, resultColor(result), bg],
+    ]);
+  }
+
   public handleInput(key: string): boolean {
-    const snapshot = this.readModel.getSnapshot();
     if (key === 'r') {
       this.markDirty();
       return true;
     }
-    if (snapshot.audit.results.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(snapshot.audit.results.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;
+    this.clampSelection();
     const snapshot = this.readModel.getSnapshot();
     const view = snapshot.audit;
     const preflightStatus = snapshot.policy.preflightStatus;
@@ -105,9 +117,8 @@ export class SecurityPanel extends BasePanel {
     const quarantinedPlugins = snapshot.quarantinedPlugins;
     const untrustedPlugins = snapshot.untrustedPlugins;
     const attackPathReview = snapshot.attackPathReview;
-    const footerLines = [
-      buildGuidanceLine(width, '/policy preflight', 'run a proactive policy review before risky work starts', C),
-    ] as const;
+    const intro = 'Token audit, policy posture, MCP attack-path review, plugin trust, and incident pressure.';
+    const footerLine = buildGuidanceLine(width, '/policy preflight', 'run a proactive policy review before risky work starts', C);
 
     const governanceLines: Line[] = [
       buildPanelLine(width, [
@@ -116,214 +127,169 @@ export class SecurityPanel extends BasePanel {
         ['  tokens ', C.label],
         [String(view.totalTokens), C.value],
         ['  blocked ', C.label],
-        [String(view.blocked.length), view.blocked.length > 0 ? C.error : C.ok],
+        ...buildStatusPill(view.blocked.length > 0 ? 'bad' : 'good', String(view.blocked.length)),
         ['  scope violations ', C.label],
-        [String(view.scopeViolations.length), view.scopeViolations.length > 0 ? C.error : C.ok],
+        ...buildStatusPill(view.scopeViolations.length > 0 ? 'bad' : 'good', String(view.scopeViolations.length)),
         ['  overdue ', C.label],
-        [String(view.rotationOverdue.length), view.rotationOverdue.length > 0 ? C.error : C.ok],
+        ...buildStatusPill(view.rotationOverdue.length > 0 ? 'bad' : 'good', String(view.rotationOverdue.length)),
         ['  warnings ', C.label],
-        [String(view.rotationWarnings.length), view.rotationWarnings.length > 0 ? C.warn : C.ok],
+        ...buildStatusPill(view.rotationWarnings.length > 0 ? 'warn' : 'good', String(view.rotationWarnings.length)),
       ]),
       buildPanelLine(width, [
         [' preflight ', C.label],
-        [preflightStatus.toUpperCase(), preflightStatus === 'block' ? C.error : preflightStatus === 'warn' ? C.warn : preflightStatus === 'pass' ? C.ok : C.dim],
+        ...buildStatusPill(preflightStatus === 'block' ? 'bad' : preflightStatus === 'warn' ? 'warn' : preflightStatus === 'pass' ? 'good' : 'info', preflightStatus.toUpperCase()),
         ['  issues ', C.label],
-        [String(preflightIssueCount), preflightIssueCount > 0 ? C.warn : C.ok],
+        ...buildStatusPill(preflightIssueCount > 0 ? 'warn' : 'good', String(preflightIssueCount)),
         ['  lint ', C.label],
-        [String(lintFindingCount), lintFindingCount > 0 ? C.warn : C.ok],
+        ...buildStatusPill(lintFindingCount > 0 ? 'warn' : 'good', String(lintFindingCount)),
         ['  denied permissions ', C.label],
-        [String(snapshot.deniedPermissions), snapshot.deniedPermissions > 0 ? C.warn : C.ok],
+        ...buildStatusPill(snapshot.deniedPermissions > 0 ? 'warn' : 'good', String(snapshot.deniedPermissions)),
       ]),
-    ];
-
-    const threatLines: Line[] = [
       buildPanelLine(width, [
         [' quarantined MCP ', C.label],
-        [String(quarantinedMcp.length), quarantinedMcp.length > 0 ? C.error : C.ok],
+        ...buildStatusPill(quarantinedMcp.length > 0 ? 'bad' : 'good', String(quarantinedMcp.length)),
         ['  elevated MCP ', C.label],
-        [String(elevatedMcp.length), elevatedMcp.length > 0 ? C.warn : C.ok],
+        ...buildStatusPill(elevatedMcp.length > 0 ? 'warn' : 'good', String(elevatedMcp.length)),
         ['  quarantined plugins ', C.label],
-        [String(quarantinedPlugins.length), quarantinedPlugins.length > 0 ? C.error : C.ok],
+        ...buildStatusPill(quarantinedPlugins.length > 0 ? 'bad' : 'good', String(quarantinedPlugins.length)),
         ['  untrusted plugins ', C.label],
-        [String(untrustedPlugins.length), untrustedPlugins.length > 0 ? C.warn : C.ok],
+        ...buildStatusPill(untrustedPlugins.length > 0 ? 'warn' : 'good', String(untrustedPlugins.length)),
       ]),
       buildPanelLine(width, [
         ['  incidents ', C.label],
-        [String(incidents.length), incidents.length > 0 ? C.warn : C.ok],
+        ...buildStatusPill(incidents.length > 0 ? 'warn' : 'good', String(incidents.length)),
       ]),
     ];
 
     const attackPathLines: Line[] = [
       buildPanelLine(width, [
         ['  attack paths ', C.label],
-        [String(attackPathReview.criticalFindings), attackPathReview.criticalFindings > 0 ? C.error : C.ok],
+        ...buildStatusPill(attackPathReview.criticalFindings > 0 ? 'bad' : 'good', String(attackPathReview.criticalFindings)),
         [' critical ', C.label],
-        [String(attackPathReview.incoherentFindings), attackPathReview.incoherentFindings > 0 ? C.warn : C.ok],
+        ...buildStatusPill(attackPathReview.incoherentFindings > 0 ? 'warn' : 'good', String(attackPathReview.incoherentFindings)),
         [' review ', C.label],
         [attackPathReview.summary.slice(0, Math.max(0, width - 36)), C.dim],
       ]),
     ];
 
+    // Empty state: no token results yet — show governance + threat posture before base empty state
     if (view.results.length === 0) {
-      const emptyLines = [
+      const emptyStateLines = [
         ...governanceLines,
-        ...threatLines,
         ...buildEmptyState(
           width,
-          ' No API tokens are registered with the security auditor yet.',
+          this.getEmptyStateMessage(),
           'The security control room can already review policy, MCP, plugin, and incident posture, but token-specific scope and rotation audit data has not been registered.',
-          [
-            { command: '/storage review', summary: 'inspect secure secret storage and environment overrides' },
-            { command: '/policy preflight', summary: 'run a live preflight posture review' },
-            { command: '/mcp trust', summary: 'inspect active MCP trust and quarantine posture' },
-          ],
+          this.getEmptyStateActions(),
           C,
         ),
       ];
       if (quarantinedMcp.length > 0) {
-        emptyLines.push(buildPanelLine(width, [[' MCP quarantine still active despite no registered tokens.', C.warn]]));
+        emptyStateLines.push(buildPanelLine(width, [[' MCP quarantine still active despite no registered tokens.', C.warn]]));
       }
       const workspace = buildPanelWorkspace(width, height, {
         title: 'Security Control Room',
-        intro: 'Token audit, policy posture, MCP attack-path review, plugin trust, and incident pressure.',
+        intro,
         sections: [
-          { title: 'Governance', lines: emptyLines },
+          { title: 'Governance', lines: emptyStateLines },
           { title: 'Attack Paths', lines: attackPathLines },
         ],
-        footerLines,
+        footerLines: [footerLine],
         palette: C,
       });
       while (workspace.length < height) workspace.push(createEmptyLine(width));
       return workspace.slice(0, height);
     }
 
-    this.selectedIndex = Math.min(this.selectedIndex, view.results.length - 1);
-    const selected = view.results[this.selectedIndex]!;
-    const tokenRows: Line[] = [];
-    for (let index = 0; index < view.results.length; index++) {
-      const result = view.results[index]!;
-      const bg = index === this.selectedIndex ? C.selectBg : undefined;
-      tokenRows.push(buildPanelLine(width, [
-        [' ', C.label, bg],
-        [result.label.padEnd(22), C.value, bg],
-        [` ${result.tokenId.padEnd(12)}`, C.info, bg],
-        [` ${result.scope.policyId.padEnd(10)}`, C.label, bg],
-        [` ${resultSummary(result).slice(0, Math.max(0, width - 49))}`, resultColor(result), bg],
-      ]));
+    if (attackPathReview.findings.length > 0) {
+      attackPathLines.push(buildPanelLine(width, [[' MCP attack-path review', C.label]]));
+      for (const finding of attackPathReview.findings.slice(0, 3)) {
+        attackPathLines.push(buildPanelLine(width, [[
+          `  ${finding.severity.toUpperCase()} ${finding.serverName}: ${finding.route}`.slice(0, width),
+          severityColor(finding.severity),
+        ]]));
+        attackPathLines.push(buildPanelLine(width, [[
+          `    ${finding.reason}`.slice(0, width),
+          C.dim,
+        ]]));
+        attackPathLines.push(buildPanelLine(width, [[
+          `    evidence: ${finding.evidence.join(' | ')}`.slice(0, width),
+          C.dim,
+        ]]));
+      }
     }
 
-    const detailLines: Line[] = [
-      buildPanelLine(width, [
+    const selected = view.results[this.selectedIndex];
+    const detailLines: Line[] = [];
+    if (selected) {
+      detailLines.push(buildPanelLine(width, [
         ['  Token: ', C.label],
         [selected.label, C.value],
         ['  Policy: ', C.label],
         [selected.scope.policyId, C.info],
         ['  Blocked: ', C.label],
         [selected.blocked ? 'yes' : 'no', selected.blocked ? C.error : C.ok],
-      ]),
-      buildPanelLine(width, [
+      ]));
+      detailLines.push(buildPanelLine(width, [
         ['  Scope: ', C.label],
         [selected.scope.outcome, selected.scope.outcome === 'violation' ? C.error : C.ok],
         ['  Excess: ', C.label],
         [(selected.scope.excessScopes.length > 0 ? selected.scope.excessScopes.join(', ') : 'none').slice(0, Math.max(0, width - 27)), selected.scope.excessScopes.length > 0 ? C.error : C.dim],
-      ]),
-      buildPanelLine(width, [
+      ]));
+      detailLines.push(buildPanelLine(width, [
         ['  Rotation: ', C.label],
         [selected.rotation.outcome, selected.rotation.outcome === 'ok' ? C.ok : selected.rotation.outcome === 'warning' ? C.warn : C.error],
         ['  Due: ', C.label],
         [new Date(selected.rotation.dueAt).toISOString(), C.value],
         ['  Age(d): ', C.label],
         [String(Math.floor(selected.rotation.ageMs / (24 * 60 * 60 * 1000))), C.value],
-      ]),
-      buildPanelLine(width, [[
+      ]));
+      detailLines.push(buildPanelLine(width, [[
         `Last audit: ${view.lastAuditAt ? new Date(view.lastAuditAt).toISOString() : 'never'}  Press r to refresh.`,
         C.dim,
-      ]]),
-    ];
-
-    if (preflightStatus !== 'n/a') {
-      detailLines.push(buildPanelLine(width, [[
-        `Policy preflight: ${preflightStatus} (${preflightIssueCount} issue${preflightIssueCount === 1 ? '' : 's'})`.slice(0, width),
-        preflightStatus === 'block' ? C.error : preflightStatus === 'warn' ? C.warn : C.dim,
-      ]]));
-    }
-    if (quarantinedMcp.length > 0) {
-      const server = quarantinedMcp[0]!;
-      detailLines.push(buildPanelLine(width, [[
-        `MCP quarantine: ${server.name} ${server.quarantineReason ?? 'unknown'}${server.quarantineDetail ? ` - ${server.quarantineDetail}` : ''}`.slice(0, width),
-        C.error,
-      ]]));
-    }
-    if (quarantinedPlugins.length > 0) {
-      const plugin = quarantinedPlugins[0]!;
-      detailLines.push(buildPanelLine(width, [[
-        `Plugin quarantine: ${plugin.name} (${plugin.trustTier})`.slice(0, width),
-        C.error,
-      ]]));
-    } else if (untrustedPlugins.length > 0) {
-      const plugin = untrustedPlugins[0]!;
-      detailLines.push(buildPanelLine(width, [[
-        `Plugin trust warning: ${plugin.name} remains untrusted.`.slice(0, width),
-        C.warn,
       ]]));
-    }
-    if (latestIncident) {
-      detailLines.push(buildPanelLine(width, [[
-        `Latest incident: ${latestIncident.classification} - ${latestIncident.summary}`.slice(0, width),
-        C.warn,
-      ]]));
-    }
-    if (attackPathReview.findings.length > 0) {
-      attackPathLines.push(buildPanelLine(width, [[' MCP attack-path review', C.label]]));
-      for (const finding of attackPathReview.findings.slice(0, 3)) {
-        attackPathLines.push(buildPanelLine(width, [[
-          `  ${finding.severity.toUpperCase()} ${finding.serverName}: ${finding.route}`.slice(0, width),
-          severityColor(finding.severity),
+      if (preflightStatus !== 'n/a') {
+        detailLines.push(buildPanelLine(width, [[
+          `Policy preflight: ${preflightStatus} (${preflightIssueCount} issue${preflightIssueCount === 1 ? '' : 's'})`.slice(0, width),
+          preflightStatus === 'block' ? C.error : preflightStatus === 'warn' ? C.warn : C.dim,
         ]]));
-        attackPathLines.push(buildPanelLine(width, [[
-          `    ${finding.reason}`.slice(0, width),
-          C.dim,
+      }
+      if (quarantinedMcp.length > 0) {
+        const server = quarantinedMcp[0]!;
+        detailLines.push(buildPanelLine(width, [[
+          `MCP quarantine: ${server.name} ${server.quarantineReason ?? 'unknown'}${server.quarantineDetail ? ` - ${server.quarantineDetail}` : ''}`.slice(0, width),
+          C.error,
         ]]));
-        attackPathLines.push(buildPanelLine(width, [[
-          `    evidence: ${finding.evidence.join(' | ')}`.slice(0, width),
-          C.dim,
+      }
+      if (quarantinedPlugins.length > 0) {
+        const plugin = quarantinedPlugins[0]!;
+        detailLines.push(buildPanelLine(width, [[
+          `Plugin quarantine: ${plugin.name} (${plugin.trustTier})`.slice(0, width),
+          C.error,
+        ]]));
+      } else if (untrustedPlugins.length > 0) {
+        const plugin = untrustedPlugins[0]!;
+        detailLines.push(buildPanelLine(width, [[
+          `Plugin trust warning: ${plugin.name} remains untrusted.`.slice(0, width),
+          C.warn,
+        ]]));
+      }
+      if (latestIncident) {
+        detailLines.push(buildPanelLine(width, [[
+          `Latest incident: ${latestIncident.classification} - ${latestIncident.summary}`.slice(0, width),
+          C.warn,
         ]]));
       }
     }
 
-    const governanceSection: PanelWorkspaceSection = { title: 'Governance', lines: governanceLines };
-    const trustSection: PanelWorkspaceSection = { title: 'Policy And Trust', lines: threatLines };
-    const selectedSection: PanelWorkspaceSection = { title: 'Selected Token', lines: detailLines };
-    const attackPathSection: PanelWorkspaceSection = { title: 'Attack Paths', lines: attackPathLines };
-    const tokenAuditSection = resolveScrollablePanelSection(width, height, {
-      intro: 'Token audit, policy posture, MCP attack-path review, plugin trust, and incident pressure.',
-      footerLines,
-      palette: C,
-      beforeSections: [governanceSection, trustSection],
-      section: {
-        title: 'Token Audit',
-        scrollableLines: tokenRows,
-        selectedIndex: this.selectedIndex,
-        scrollOffset: this.selectedIndex,
-        minRows: 1,
-      },
-      afterSections: [selectedSection, attackPathSection],
-    });
-
-    const lines = buildPanelWorkspace(width, height, {
+    return this.renderList(width, height, {
       title: 'Security Control Room',
-      intro: 'Token audit, policy posture, MCP attack-path review, plugin trust, and incident pressure.',
-      sections: [
-        governanceSection,
-        trustSection,
-        tokenAuditSection.section,
-        selectedSection,
-        attackPathSection,
-      ] satisfies readonly PanelWorkspaceSection[],
-      footerLines,
-      palette: C,
+      header: governanceLines,
+      footer: [
+        ...detailLines,
+        ...attackPathLines,
+        footerLine,
+      ],
     });
-    while (lines.length < height) lines.push(createEmptyLine(width));
-    return lines.slice(0, height);
   }
 }

package/src/panels/services-panel.ts

@@ -1,6 +1,6 @@
 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 ServiceConfig,
   type ServiceInspection,
@@ -11,9 +11,8 @@ import {
   buildEmptyState,
   buildPanelLine,
   buildPanelWorkspace,
+  buildStatusPill,
   DEFAULT_PANEL_PALETTE,
-  resolvePrimaryScrollableSection,
-  type PanelWorkspaceSection,
 } from './polish.ts';
 
 const C = {
@@ -54,7 +53,6 @@ function statusColor(entry: ServicePanelEntry): string {
 
 function authSummary(config: ServiceConfig, manager: SubscriptionAccessQuery): string {
   const provider = config.providerId ?? config.name;
-  const hasActiveSubscription = manager.get(provider) != null;
   const hasOverride = manager.getAccessToken(provider) != null;
   switch (config.authType) {
     case 'bearer':
@@ -66,16 +64,14 @@ function authSummary(config: ServiceConfig, manager: SubscriptionAccessQuery): s
         ? 'oauth-override'
         : config.apiKeyHeader ? `api-key:${config.apiKeyHeader}` : 'api-key';
     case 'oauth':
-      return hasActiveSubscription ? 'oauth(active)' : 'oauth';
+      return manager.get(provider) != null ? 'oauth(active)' : 'oauth';
   }
 }
 
-export class ServicesPanel extends BasePanel {
+export class ServicesPanel extends ScrollableListPanel<ServicePanelEntry> {
   private readonly registry: ServiceInspectionQuery;
   private readonly subscriptionManager: SubscriptionAccessQuery;
   private entries: ServicePanelEntry[] = [];
-  private selectedIndex = 0;
-  private scrollOffset = 0;
   private loading = false;
 
   public constructor(
@@ -83,6 +79,7 @@ export class ServicesPanel extends BasePanel {
     subscriptionManager: SubscriptionAccessQuery,
   ) {
     super('services', 'Services', 'V', 'monitoring');
+    this.showSelectionGutter = true; // I5: non-color selection affordance
     this.registry = registry;
     this.subscriptionManager = subscriptionManager;
     void this.refresh();
@@ -95,27 +92,40 @@ export class ServicesPanel extends BasePanel {
     }
   }
 
+  protected override getPalette() { return C; }
+  protected override getEmptyStateMessage() { return ' No services configured.'; }
+  protected override getEmptyStateActions() {
+    return [
+      { command: '/services auth-review', summary: 'inspect service auth posture and registry config' },
+      { command: '/subscription', summary: 'review provider login state and override posture' },
+    ];
+  }
+
+  protected getItems(): readonly ServicePanelEntry[] {
+    return this.entries;
+  }
+
+  protected renderItem(entry: ServicePanelEntry, index: number, selected: boolean, width: number): Line {
+    const bg = selected ? C.selectBg : undefined;
+    return buildPanelLine(width, [
+      [' ', C.label, bg],
+      [entry.name.padEnd(16), C.value, bg],
+      [` ${statusLabel(entry).padEnd(12)}`, statusColor(entry), bg],
+      [` ${authSummary(entry.inspection.config, this.subscriptionManager).padEnd(18)}`, C.info, bg],
+      [` ${entry.inspection.config.baseUrl ?? '(no baseUrl)'}`, C.dim, bg],
+    ]);
+  }
+
   public handleInput(key: string): boolean {
     if (key === 'r') {
       void this.refresh();
       return true;
     }
-    if (this.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(this.entries.length - 1, this.selectedIndex + 1);
-      this.markDirty();
-      return true;
-    }
     if (key === 't') {
       void this.testSelected();
       return true;
     }
-    return false;
+    return super.handleInput(key);
   }
 
   private async refresh(): Promise<void> {
@@ -152,7 +162,7 @@ export class ServicesPanel extends BasePanel {
   }
 
   public render(width: number, height: number): Line[] {
-    this.needsRender = false;
+    this.clampSelection();
     const intro = 'Credential posture, subscription overrides, and live connection checks for configured services.';
 
     if (this.loading && this.entries.length === 0) {
@@ -166,106 +176,54 @@ export class ServicesPanel extends BasePanel {
       return lines;
     }
 
-    if (this.entries.length === 0) {
-      const workspace = buildPanelWorkspace(width, height, {
-        title: 'Service Control Room',
-        intro,
-        sections: [{
-          lines: buildEmptyState(
-            width,
-            ' No services configured.',
-            'Add entries to .goodvibes/tui/services.json and store secrets before using service-backed product flows.',
-            [
-              { command: '/services auth-review', summary: 'inspect service auth posture and registry config' },
-              { command: '/subscription', summary: 'review provider login state and override posture' },
-            ],
-            C,
-          ),
-        }],
-        palette: C,
-      });
-      while (workspace.length < height) workspace.push(createEmptyLine(width));
-      return workspace;
-    }
-
-    const selected = this.entries[this.selectedIndex]!;
-    const inspect = selected.inspection;
-    const detailLines: Line[] = [
-      buildPanelLine(width, [
+    const selected = this.entries[this.selectedIndex];
+    const detailLines: Line[] = [];
+    if (selected) {
+      const inspect = selected.inspection;
+      detailLines.push(buildPanelLine(width, [
         ['  Service: ', C.label],
         [selected.name, C.value],
         ['  State: ', C.label],
         [statusLabel(selected), statusColor(selected)],
         ['  Auth: ', C.label],
         [authSummary(inspect.config, this.subscriptionManager), C.info],
-      ]),
-      buildPanelLine(width, [
+      ]));
+      detailLines.push(buildPanelLine(width, [
         ['  Primary credential: ', C.label],
-        [inspect.hasPrimaryCredential ? 'present' : 'missing', inspect.hasPrimaryCredential ? C.ok : C.error],
+        ...buildStatusPill(inspect.hasPrimaryCredential ? 'good' : 'bad', inspect.hasPrimaryCredential ? 'present' : 'missing'),
         ['  Webhook URL: ', C.label],
-        [inspect.hasWebhookUrl ? 'present' : 'missing', inspect.hasWebhookUrl ? C.ok : C.dim],
+        ...buildStatusPill(inspect.hasWebhookUrl ? 'good' : 'info', inspect.hasWebhookUrl ? 'present' : 'missing'),
         ['  Signing secret: ', C.label],
-        [inspect.hasSigningSecret ? 'present' : 'missing', inspect.hasSigningSecret ? C.ok : C.dim],
-      ]),
-    ];
-    if (selected.lastTest) {
-      detailLines.push(buildPanelLine(width, [
-        ['  Last test: ', C.label],
-        [selected.lastTest.ok ? 'ok' : 'failed', selected.lastTest.ok ? C.ok : C.error],
-        ['  Status: ', C.label],
-        [selected.lastTest.status != null ? String(selected.lastTest.status) : 'n/a', C.value],
-        ['  URL: ', C.label],
-        [(selected.lastTest.testedUrl ?? 'n/a').slice(0, Math.max(0, width - 34)), C.dim],
+        ...buildStatusPill(inspect.hasSigningSecret ? 'good' : 'info', inspect.hasSigningSecret ? 'present' : 'missing'),
       ]));
-      if (selected.lastTest.error) {
+      if (selected.lastTest) {
         detailLines.push(buildPanelLine(width, [
-          ['  Error: ', C.label],
-          [selected.lastTest.error.slice(0, Math.max(0, width - 10)), C.error],
+          ['  Last test: ', C.label],
+          ...buildStatusPill(selected.lastTest.ok ? 'good' : 'bad', selected.lastTest.ok ? 'ok' : 'failed'),
+          ['  Status: ', C.label],
+          [selected.lastTest.status != null ? String(selected.lastTest.status) : 'n/a', C.value],
+          ['  URL: ', C.label],
+          [(selected.lastTest.testedUrl ?? 'n/a').slice(0, Math.max(0, width - 34)), C.dim],
         ]));
+        if (selected.lastTest.error) {
+          detailLines.push(buildPanelLine(width, [
+            ['  Error: ', C.label],
+            [selected.lastTest.error.slice(0, Math.max(0, width - 10)), C.error],
+          ]));
+        }
+      } else {
+        detailLines.push(buildPanelLine(width, [['  Press t to test the selected service or r to refresh credential status.', C.dim]]));
       }
-    } else {
-      detailLines.push(buildPanelLine(width, [['  Press t to test the selected service or r to refresh credential status.', C.dim]]));
+      detailLines.push(buildPanelLine(width, [['  Services resolve credentials through hierarchy-aware secure storage, plaintext fallback policy, and project-local config.', C.dim]]));
     }
-    detailLines.push(buildPanelLine(width, [['  Services resolve credentials through hierarchy-aware secure storage, plaintext fallback policy, and project-local config.', C.dim]]));
-    const detailSection: PanelWorkspaceSection = { title: 'Details', lines: detailLines };
-    const resolvedServicesSection = resolvePrimaryScrollableSection(width, height, {
-      intro,
-      footerLines: [buildPanelLine(width, [['  Up/Down move  t test selected service  r refresh inspections', C.dim]])],
-      palette: C,
-      section: {
-        title: 'Services',
-        scrollableLines: this.entries.map((entry, absolute) => {
-          const bg = absolute === this.selectedIndex ? C.selectBg : undefined;
-          return buildPanelLine(width, [
-            [' ', C.label, bg],
-            [entry.name.padEnd(16), C.value, bg],
-            [` ${statusLabel(entry).padEnd(12)}`, statusColor(entry), bg],
-            [` ${authSummary(entry.inspection.config, this.subscriptionManager).padEnd(18)}`, C.info, bg],
-            [` ${entry.inspection.config.baseUrl ?? '(no baseUrl)'}`, C.dim, bg],
-          ]);
-        }),
-        selectedIndex: this.selectedIndex,
-        scrollOffset: this.scrollOffset,
-        guardRows: 1,
-        minRows: 4,
-        appendWindowSummary: { dimColor: C.dim },
-      },
-      afterSections: [detailSection],
-    });
-    this.scrollOffset = resolvedServicesSection.scrollOffset;
 
-    const sections: PanelWorkspaceSection[] = [
-      resolvedServicesSection.section,
-      detailSection,
-    ];
-    const lines = buildPanelWorkspace(width, height, {
+    return this.renderList(width, height, {
       title: 'Service Control Room',
-      intro,
-      sections,
-      footerLines: [buildPanelLine(width, [['  Up/Down move  t test selected service  r refresh inspections', C.dim]])],
-      palette: C,
+      footer: [
+        ...detailLines,
+        buildPanelLine(width, [['  Up/Down move  t test selected service  r refresh inspections', C.dim]]),
+      ],
+      emptyMessage: intro,
     });
-    while (lines.length < height) lines.push(createEmptyLine(width));
-    return lines.slice(0, height);
   }
 }