@pellux/goodvibes-tui 0.18.4

package/src/panels/security-panel.ts

@@ -0,0 +1,329 @@
+import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import { createEmptyLine } from '@pellux/goodvibes-sdk/platform/types/grid';
+import { BasePanel } from './base-panel.ts';
+import type { TokenAuditResult } from '@pellux/goodvibes-sdk/platform/security/token-audit';
+import type { UiReadModel, UiSecuritySnapshot } from '../runtime/ui-read-models.ts';
+import {
+  buildEmptyState,
+  buildGuidanceLine,
+  buildPanelLine,
+  buildPanelWorkspace,
+  resolveScrollablePanelSection,
+  DEFAULT_PANEL_PALETTE,
+  type PanelWorkspaceSection,
+} from './polish.ts';
+
+const C = {
+  ...DEFAULT_PANEL_PALETTE,
+  header: '#94a3b8',
+  headerBg: '#1e293b',
+  dim: '#475569',
+  ok: '#22c55e',
+  warn: '#eab308',
+  error: '#ef4444',
+  selectBg: '#0f172a',
+} as const;
+
+function managedColor(managed: boolean): string {
+  return managed ? C.warn : C.info;
+}
+
+function resultColor(result: TokenAuditResult): string {
+  if (result.blocked) return C.error;
+  if (result.scope.outcome === 'violation') return C.error;
+  if (result.rotation.outcome === 'overdue') return C.error;
+  if (result.rotation.outcome === 'warning') return C.warn;
+  return C.ok;
+}
+
+function resultSummary(result: TokenAuditResult): string {
+  const parts: string[] = [];
+  if (result.scope.outcome === 'violation') parts.push(`scope:${result.scope.excessScopes.join(',')}`);
+  if (result.rotation.outcome === 'warning') parts.push('rotation warning');
+  if (result.rotation.outcome === 'overdue') parts.push('rotation overdue');
+  if (result.blocked) parts.push('blocked');
+  return parts.length > 0 ? parts.join(' | ') : 'in policy';
+}
+
+function severityColor(severity: 'low' | 'medium' | 'high' | 'critical'): string {
+  switch (severity) {
+    case 'critical':
+    case 'high':
+      return C.error;
+    case 'medium':
+      return C.warn;
+    case 'low':
+    default:
+      return C.ok;
+  }
+}
+
+export class SecurityPanel extends BasePanel {
+  private selectedIndex = 0;
+  private readonly unsub: (() => void) | null;
+
+  public constructor(private readonly readModel: UiReadModel<UiSecuritySnapshot>) {
+    super('security', 'Security', 'U', 'monitoring');
+    this.unsub = this.readModel.subscribe(() => this.markDirty());
+  }
+
+  public override onDestroy(): void {
+    this.unsub?.();
+  }
+
+  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;
+  }
+
+  public render(width: number, height: number): Line[] {
+    this.needsRender = false;
+    const snapshot = this.readModel.getSnapshot();
+    const view = snapshot.audit;
+    const preflightStatus = snapshot.policy.preflightStatus;
+    const preflightIssueCount = snapshot.policy.preflightIssueCount;
+    const lintFindingCount = snapshot.policy.lintFindingCount;
+    const quarantinedMcp = snapshot.mcpServers.filter((server) => server.schemaFreshness === 'quarantined');
+    const elevatedMcp = snapshot.mcpServers.filter((server) => server.trustMode === 'allow-all');
+    const incidents = snapshot.incidents;
+    const latestIncident = snapshot.latestIncident;
+    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 governanceLines: Line[] = [
+      buildPanelLine(width, [
+        [' mode ', C.label],
+        [view.managed ? 'MANAGED' : 'ADVISORY', managedColor(view.managed)],
+        ['  tokens ', C.label],
+        [String(view.totalTokens), C.value],
+        ['  blocked ', C.label],
+        [String(view.blocked.length), view.blocked.length > 0 ? C.error : C.ok],
+        ['  scope violations ', C.label],
+        [String(view.scopeViolations.length), view.scopeViolations.length > 0 ? C.error : C.ok],
+        ['  overdue ', C.label],
+        [String(view.rotationOverdue.length), view.rotationOverdue.length > 0 ? C.error : C.ok],
+        ['  warnings ', C.label],
+        [String(view.rotationWarnings.length), view.rotationWarnings.length > 0 ? C.warn : C.ok],
+      ]),
+      buildPanelLine(width, [
+        [' preflight ', C.label],
+        [preflightStatus.toUpperCase(), preflightStatus === 'block' ? C.error : preflightStatus === 'warn' ? C.warn : preflightStatus === 'pass' ? C.ok : C.dim],
+        ['  issues ', C.label],
+        [String(preflightIssueCount), preflightIssueCount > 0 ? C.warn : C.ok],
+        ['  lint ', C.label],
+        [String(lintFindingCount), lintFindingCount > 0 ? C.warn : C.ok],
+        ['  denied permissions ', C.label],
+        [String(snapshot.deniedPermissions), snapshot.deniedPermissions > 0 ? C.warn : C.ok],
+      ]),
+    ];
+
+    const threatLines: Line[] = [
+      buildPanelLine(width, [
+        [' quarantined MCP ', C.label],
+        [String(quarantinedMcp.length), quarantinedMcp.length > 0 ? C.error : C.ok],
+        ['  elevated MCP ', C.label],
+        [String(elevatedMcp.length), elevatedMcp.length > 0 ? C.warn : C.ok],
+        ['  quarantined plugins ', C.label],
+        [String(quarantinedPlugins.length), quarantinedPlugins.length > 0 ? C.error : C.ok],
+        ['  untrusted plugins ', C.label],
+        [String(untrustedPlugins.length), untrustedPlugins.length > 0 ? C.warn : C.ok],
+      ]),
+      buildPanelLine(width, [
+        ['  incidents ', C.label],
+        [String(incidents.length), incidents.length > 0 ? C.warn : C.ok],
+      ]),
+    ];
+
+    const attackPathLines: Line[] = [
+      buildPanelLine(width, [
+        ['  attack paths ', C.label],
+        [String(attackPathReview.criticalFindings), attackPathReview.criticalFindings > 0 ? C.error : C.ok],
+        [' critical ', C.label],
+        [String(attackPathReview.incoherentFindings), attackPathReview.incoherentFindings > 0 ? C.warn : C.ok],
+        [' review ', C.label],
+        [attackPathReview.summary.slice(0, Math.max(0, width - 36)), C.dim],
+      ]),
+    ];
+
+    if (view.results.length === 0) {
+      const emptyLines = [
+        ...governanceLines,
+        ...threatLines,
+        ...buildEmptyState(
+          width,
+          ' No API tokens are registered with the security auditor yet.',
+          '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' },
+          ],
+          C,
+        ),
+      ];
+      if (quarantinedMcp.length > 0) {
+        emptyLines.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.',
+        sections: [
+          { title: 'Governance', lines: emptyLines },
+          { title: 'Attack Paths', lines: attackPathLines },
+        ],
+        footerLines,
+        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],
+      ]));
+    }
+
+    const detailLines: Line[] = [
+      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, [
+        ['  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, [
+        ['  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, [[
+        `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),
+        ]]));
+        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 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, {
+      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,
+    });
+    while (lines.length < height) lines.push(createEmptyLine(width));
+    return lines.slice(0, height);
+  }
+}

package/src/panels/services-panel.ts

@@ -0,0 +1,271 @@
+import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import { createEmptyLine } from '@pellux/goodvibes-sdk/platform/types/grid';
+import { BasePanel } from './base-panel.ts';
+import {
+  type ServiceConfig,
+  type ServiceInspection,
+  type ServiceConnectionTestResult,
+} from '../config/service-registry.ts';
+import type { ServiceInspectionQuery, SubscriptionAccessQuery } from '../runtime/ui-service-queries.ts';
+import {
+  buildEmptyState,
+  buildPanelLine,
+  buildPanelWorkspace,
+  DEFAULT_PANEL_PALETTE,
+  resolvePrimaryScrollableSection,
+  type PanelWorkspaceSection,
+} from './polish.ts';
+
+const C = {
+  ...DEFAULT_PANEL_PALETTE,
+  header: '#94a3b8',
+  headerBg: '#1e293b',
+  label: '#64748b',
+  value: '#e2e8f0',
+  dim: '#475569',
+  ok: '#22c55e',
+  warn: '#eab308',
+  error: '#ef4444',
+  info: '#38bdf8',
+  selectBg: '#0f172a',
+  empty: '#334155',
+} as const;
+
+interface ServicePanelEntry {
+  readonly name: string;
+  readonly inspection: ServiceInspection;
+  readonly lastTest?: ServiceConnectionTestResult;
+}
+
+function statusLabel(entry: ServicePanelEntry): string {
+  if (!entry.inspection.hasPrimaryCredential) return 'UNCONFIGURED';
+  if (entry.lastTest?.ok) return 'HEALTHY';
+  if (entry.lastTest && !entry.lastTest.ok) return 'ERROR';
+  return 'CONFIGURED';
+}
+
+function statusColor(entry: ServicePanelEntry): string {
+  const label = statusLabel(entry);
+  if (label === 'HEALTHY') return C.ok;
+  if (label === 'ERROR') return C.error;
+  if (label === 'CONFIGURED') return C.warn;
+  return C.dim;
+}
+
+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':
+      return hasOverride ? 'bearer+subscription' : 'bearer';
+    case 'basic':
+      return 'basic';
+    case 'api-key':
+      return hasOverride
+        ? 'oauth-override'
+        : config.apiKeyHeader ? `api-key:${config.apiKeyHeader}` : 'api-key';
+    case 'oauth':
+      return hasActiveSubscription ? 'oauth(active)' : 'oauth';
+  }
+}
+
+export class ServicesPanel extends BasePanel {
+  private readonly registry: ServiceInspectionQuery;
+  private readonly subscriptionManager: SubscriptionAccessQuery;
+  private entries: ServicePanelEntry[] = [];
+  private selectedIndex = 0;
+  private scrollOffset = 0;
+  private loading = false;
+
+  public constructor(
+    registry: ServiceInspectionQuery,
+    subscriptionManager: SubscriptionAccessQuery,
+  ) {
+    super('services', 'Services', 'V', 'monitoring');
+    this.registry = registry;
+    this.subscriptionManager = subscriptionManager;
+    void this.refresh();
+  }
+
+  public override onActivate(): void {
+    super.onActivate();
+    if (this.entries.length === 0 && !this.loading) {
+      void this.refresh();
+    }
+  }
+
+  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;
+  }
+
+  private async refresh(): Promise<void> {
+    this.loading = true;
+    this.markDirty();
+    const configs = this.registry.getAll();
+    const names = Object.keys(configs).sort((a, b) => a.localeCompare(b));
+    const inspections = await Promise.all(
+      names.map(async (name) => ({
+        name,
+        inspection: (await this.registry.inspect(name))!,
+      })),
+    );
+    const previousTests = new Map(this.entries.map((entry) => [entry.name, entry.lastTest] as const));
+    this.entries = inspections.map((entry) => ({
+      ...entry,
+      ...(previousTests.get(entry.name) ? { lastTest: previousTests.get(entry.name) } : {}),
+    }));
+    this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, this.entries.length - 1));
+    this.loading = false;
+    this.markDirty();
+  }
+
+  private async testSelected(): Promise<void> {
+    const selected = this.entries[this.selectedIndex];
+    if (!selected) return;
+    const result = await this.registry.testConnection(selected.name);
+    this.entries = this.entries.map((entry) => (
+      entry.name === selected.name
+        ? { ...entry, lastTest: result }
+        : entry
+    ));
+    this.markDirty();
+  }
+
+  public render(width: number, height: number): Line[] {
+    this.needsRender = false;
+    const intro = 'Credential posture, subscription overrides, and live connection checks for configured services.';
+
+    if (this.loading && this.entries.length === 0) {
+      const lines = buildPanelWorkspace(width, height, {
+        title: 'Service Control Room',
+        intro,
+        sections: [{ lines: [buildPanelLine(width, [[' Loading configured services...', C.info]])] }],
+        palette: C,
+      });
+      while (lines.length < height) lines.push(createEmptyLine(width));
+      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, [
+        ['  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, [
+        ['  Primary credential: ', C.label],
+        [inspect.hasPrimaryCredential ? 'present' : 'missing', inspect.hasPrimaryCredential ? C.ok : C.error],
+        ['  Webhook URL: ', C.label],
+        [inspect.hasWebhookUrl ? 'present' : 'missing', inspect.hasWebhookUrl ? C.ok : C.dim],
+        ['  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],
+      ]));
+      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]]));
+    }
+    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, {
+      title: 'Service Control Room',
+      intro,
+      sections,
+      footerLines: [buildPanelLine(width, [['  Up/Down move  t test selected service  r refresh inspections', C.dim]])],
+      palette: C,
+    });
+    while (lines.length < height) lines.push(createEmptyLine(width));
+    return lines.slice(0, height);
+  }
+}