@pellux/goodvibes-tui 0.18.20 → 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

@@ -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 { listHookPointContracts } from '@pellux/goodvibes-sdk/platform/hooks/index';
 import type { HookDispatcher } from '@pellux/goodvibes-sdk/platform/hooks/dispatcher';
 import type { HookPointContract } from '@pellux/goodvibes-sdk/platform/hooks/contracts';
@@ -10,12 +9,9 @@ import type { HookChain, HookDefinition } from '@pellux/goodvibes-sdk/platform/h
 import type { HookWorkbench } from '@pellux/goodvibes-sdk/platform/hooks/workbench';
 import { truncateDisplay } from '../utils/terminal-width.ts';
 import {
-  buildEmptyState,
   buildPanelLine,
-  buildPanelWorkspace,
+  buildStatusPill,
   DEFAULT_PANEL_PALETTE,
-  resolvePrimaryScrollableSection,
-  type PanelWorkspaceSection,
 } from './polish.ts';
 
 const C = {
@@ -59,9 +55,9 @@ function createDefaultDataSource(
   };
 }
 
-export class HooksPanel extends BasePanel {
-  private selectedIndex = 0;
-  private scrollOffset = 0;
+type HookEntry = { pattern: string; hook: HookDefinition };
+
+export class HooksPanel extends ScrollableListPanel<HookEntry> {
   private readonly dataSource: HooksPanelDataSource;
 
   public constructor(
@@ -71,34 +67,46 @@ export class HooksPanel extends BasePanel {
     dataSource: HooksPanelDataSource = createDefaultDataSource(hookDispatcher, hookWorkbench, hookActivityTracker),
   ) {
     super('hooks', 'Hooks', 'H', 'monitoring');
+    this.showSelectionGutter = true; // I5: non-color selection affordance
     this.dataSource = dataSource;
   }
 
+  protected override getPalette() { return C; }
+  protected override getEmptyStateMessage() { return ' No hooks are currently registered.'; }
+  protected override getEmptyStateActions() {
+    return [
+      { command: '/hooks', summary: 'review hook contracts and managed authoring actions' },
+      { command: '/settings', summary: 'review hook/runtime behavior in the settings surface' },
+    ];
+  }
+
+  protected getItems(): readonly HookEntry[] {
+    return this.dataSource.listHooks();
+  }
+
+  protected renderItem(entry: HookEntry, index: number, selected: boolean, width: number): Line {
+    const bg = selected ? C.selectBg : undefined;
+    return buildPanelLine(width, [
+      [' ', C.label, bg],
+      [truncateDisplay(entry.hook.name ?? '(unnamed)', 20).padEnd(20), C.value, bg],
+      [` ${truncateDisplay(entry.pattern, 28).padEnd(28)}`, C.info, bg],
+      ...buildStatusPill(entry.hook.enabled === false ? 'warn' : 'good', ` ${(entry.hook.enabled === false ? 'DISABLED' : 'ENABLED').padEnd(8)}`, { bg }),
+      [` ${entry.hook.type}`, C.dim, bg],
+    ]);
+  }
+
   public handleInput(key: string): boolean {
-    const entries = this.dataSource.listHooks();
     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 = 'Hook contracts, active registrations, managed authoring, recent runtime activity, and simulation matches.';
-    const contracts = this.dataSource.listContracts();
+    this.clampSelection();
     const hooks = this.dataSource.listHooks();
+    const contracts = this.dataSource.listContracts();
     const chains = this.dataSource.listChains();
     const recentActivity = this.dataSource.listRecentActivity(3);
     const workbench = this.dataSource.getWorkbench();
@@ -106,93 +114,48 @@ export class HooksPanel extends BasePanel {
     const managedChains = workbench.listManagedChains();
     const recentAuthoring = workbench.listRecentActions(3);
     const lastSimulation = workbench.getLastSimulation();
+    const intro = 'Hook contracts, active registrations, managed authoring, recent runtime activity, and simulation matches.';
 
-    if (hooks.length === 0) {
-      const emptyLines = [
-        ...buildEmptyState(
-          width,
-          ' No hooks are currently registered.',
-          'Configure hooks.json or register hooks programmatically, then use this workspace to review contracts, activity, and managed authoring state.',
-          [
-            { command: '/hooks', summary: 'review hook contracts and managed authoring actions' },
-            { command: '/settings', summary: 'review hook/runtime behavior in the settings surface' },
-          ],
-          C,
-        ),
-        buildPanelLine(width, [
-          ['  Contracts: ', C.label],
-          [String(contracts.length), C.value],
-          ['  Chains: ', C.label],
-          [String(chains.length), C.value],
-          ['  Managed: ', C.label],
-          [String(managedHooks.length), C.info],
-        ]),
-        buildPanelLine(width, [
-          ['  Hooks file: ', C.label],
-          [truncateDisplay(workbench.getHooksFilePath(), Math.max(0, width - 15)), C.dim],
-        ]),
-      ];
-      if (recentAuthoring.length > 0) {
-        emptyLines.push(buildPanelLine(width, [
-          ['  Authoring: ', C.label],
-          [truncateDisplay(`${recentAuthoring[0]!.kind} ${recentAuthoring[0]!.target}`, Math.max(0, width - 14)), C.info],
-        ]));
-      }
-      if (lastSimulation) {
-        emptyLines.push(buildPanelLine(width, [
-          ['  Last Simulation: ', C.label],
-          [truncateDisplay(lastSimulation.eventPath, Math.max(0, width - 20)), C.value],
-        ]));
-      }
-      const workspace = buildPanelWorkspace(width, height, {
-        title: 'Hooks Control Room',
-        intro,
-        sections: [{ lines: emptyLines }],
-        palette: C,
-      });
-      while (workspace.length < height) workspace.push(createEmptyLine(width));
-      return workspace;
-    }
+    const selected = hooks[this.selectedIndex];
+    const contract = selected ? contracts.find((c) => c.pattern === selected.pattern) : undefined;
 
-    this.selectedIndex = Math.min(this.selectedIndex, hooks.length - 1);
-    const selected = hooks[this.selectedIndex]!;
-    const contract = contracts.find((candidate) => candidate.pattern === selected.pattern);
-    const detailLines: Line[] = [
-      buildPanelLine(width, [
+    const detailLines: Line[] = [];
+    if (selected) {
+      detailLines.push(buildPanelLine(width, [
         ['  Hook: ', C.label],
         [selected.hook.name ?? '(unnamed)', C.value],
         ['  Type: ', C.label],
         [selected.hook.type, C.info],
         ['  Match: ', C.label],
         [selected.hook.matcher ?? selected.hook.match, C.value],
-      ]),
-      buildPanelLine(width, [
+      ]));
+      detailLines.push(buildPanelLine(width, [
         ['  Pattern: ', C.label],
         [truncateDisplay(selected.pattern, Math.max(0, width - 12)), C.value],
-      ]),
-    ];
-    if (contract) {
+      ]));
+      if (contract) {
+        detailLines.push(buildPanelLine(width, [
+          ['  Contract: ', C.label],
+          [`${contract.authority} / ${contract.executionMode}`, C.info],
+          ['  Policy: ', C.label],
+          [contract.failurePolicy, C.value],
+        ]));
+        detailLines.push(buildPanelLine(width, [
+          ['  Capabilities: ', C.label],
+          [`deny=${contract.canDeny ? 'yes' : 'no'} mutate=${contract.canMutateInput ? 'yes' : 'no'} inject=${contract.canInjectContext ? 'yes' : 'no'}`, C.dim],
+        ]));
+      } else {
+        detailLines.push(buildPanelLine(width, [['  Contract: No exact contract registered for this pattern.', C.warn]]));
+      }
       detailLines.push(buildPanelLine(width, [
-        ['  Contract: ', C.label],
-        [`${contract.authority} / ${contract.executionMode}`, C.info],
-        ['  Policy: ', C.label],
-        [contract.failurePolicy, C.value],
+        ['  Summary: ', C.label],
+        [`hooks=${hooks.length} chains=${chains.length} contracts=${contracts.length} managed=${managedHooks.length}/${managedChains.length}`, C.dim],
       ]));
       detailLines.push(buildPanelLine(width, [
-        ['  Capabilities: ', C.label],
-        [`deny=${contract.canDeny ? 'yes' : 'no'} mutate=${contract.canMutateInput ? 'yes' : 'no'} inject=${contract.canInjectContext ? 'yes' : 'no'}`, C.dim],
+        ['  Hooks file: ', C.label],
+        [truncateDisplay(workbench.getHooksFilePath(), Math.max(0, width - 15)), C.dim],
       ]));
-    } else {
-      detailLines.push(buildPanelLine(width, [['  Contract: No exact contract registered for this pattern.', C.warn]]));
     }
-    detailLines.push(buildPanelLine(width, [
-      ['  Summary: ', C.label],
-      [`hooks=${hooks.length} chains=${chains.length} contracts=${contracts.length} managed=${managedHooks.length}/${managedChains.length}`, C.dim],
-    ]));
-    detailLines.push(buildPanelLine(width, [
-      ['  Hooks file: ', C.label],
-      [truncateDisplay(workbench.getHooksFilePath(), Math.max(0, width - 15)), C.dim],
-    ]));
 
     const activityLines: Line[] = recentActivity.length === 0
       ? [buildPanelLine(width, [['  No hook activity recorded yet.', C.empty]])]
@@ -226,49 +189,51 @@ export class HooksPanel extends BasePanel {
         [`hooks=${lastSimulation.matchedHooks.length} chains=${lastSimulation.matchedChains.length}`, C.dim],
       ]));
     }
-    const selectedSection: PanelWorkspaceSection = { title: 'Selected Hook', lines: detailLines };
-    const activitySection: PanelWorkspaceSection = { title: 'Recent Activity', lines: activityLines };
-    const authoringSection: PanelWorkspaceSection = { title: 'Authoring', lines: authoringLines };
-    const resolvedHooksSection = resolvePrimaryScrollableSection(width, height, {
-      intro,
-      footerLines: [buildPanelLine(width, [['  Up/Down move  r refresh  /hooks for full contract listing', C.dim]])],
-      palette: C,
-      section: {
-        title: 'Hooks',
-        scrollableLines: hooks.map((entry, absolute) => {
-          const bg = absolute === this.selectedIndex ? C.selectBg : undefined;
-          return buildPanelLine(width, [
-            [' ', 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],
-            [` ${entry.hook.type}`, C.dim, bg],
-          ]);
-        }),
-        selectedIndex: this.selectedIndex,
-        scrollOffset: this.scrollOffset,
-        guardRows: 1,
-        minRows: 4,
-        appendWindowSummary: { dimColor: C.dim },
-      },
-      afterSections: [selectedSection, activitySection, authoringSection],
-    });
-    this.scrollOffset = resolvedHooksSection.scrollOffset;
 
-    const sections: PanelWorkspaceSection[] = [
-      resolvedHooksSection.section,
-      selectedSection,
-      activitySection,
-      authoringSection,
-    ];
-    const lines = buildPanelWorkspace(width, height, {
+    // Empty state: show extra context lines (hooks file, contracts, authoring) before base empty state
+    if (hooks.length === 0) {
+      const extraHeader: Line[] = [
+        buildPanelLine(width, [
+          ['  Contracts: ', C.label],
+          [String(contracts.length), C.value],
+          ['  Chains: ', C.label],
+          [String(chains.length), C.value],
+          ['  Managed: ', C.label],
+          [String(managedHooks.length), C.info],
+        ]),
+        buildPanelLine(width, [
+          ['  Hooks file: ', C.label],
+          [truncateDisplay(workbench.getHooksFilePath(), Math.max(0, width - 15)), C.dim],
+        ]),
+      ];
+      if (recentAuthoring.length > 0) {
+        extraHeader.push(buildPanelLine(width, [
+          ['  Authoring: ', C.label],
+          [truncateDisplay(`${recentAuthoring[0]!.kind} ${recentAuthoring[0]!.target}`, Math.max(0, width - 14)), C.info],
+        ]));
+      }
+      if (lastSimulation) {
+        extraHeader.push(buildPanelLine(width, [
+          ['  Last Simulation: ', C.label],
+          [truncateDisplay(lastSimulation.eventPath, Math.max(0, width - 20)), C.value],
+        ]));
+      }
+      return this.renderList(width, height, {
+        title: 'Hooks Control Room',
+        header: extraHeader,
+      });
+    }
+
+    return this.renderList(width, height, {
       title: 'Hooks Control Room',
-      intro,
-      sections,
-      footerLines: [buildPanelLine(width, [['  Up/Down move  r refresh  /hooks for full contract listing', C.dim]])],
-      palette: C,
+      footer: [
+        ...detailLines,
+        buildPanelLine(width, [['  Recent Activity', C.label]]),
+        ...activityLines,
+        buildPanelLine(width, [['  Authoring', C.label]]),
+        ...authoringLines,
+        buildPanelLine(width, [['  Up/Down move  r refresh  /hooks for full contract listing', C.dim]]),
+      ],
     });
-    while (lines.length < height) lines.push(createEmptyLine(width));
-    return lines.slice(0, height);
   }
 }

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

@@ -1,6 +1,6 @@
 import type { Line } from '../types/grid.ts';
 import type { ForensicsRegistry } from '@pellux/goodvibes-sdk/platform/runtime/forensics/registry';
-import { BasePanel } from './base-panel.ts';
+import { ScrollableListPanel } from './scrollable-list-panel.ts';
 import {
   buildBodyText,
   buildEmptyState,
@@ -8,10 +8,11 @@ import {
   buildKeyValueLine,
   buildPanelLine,
   buildPanelWorkspace,
-  resolveScrollablePanelSection,
+  buildStatusPill,
   DEFAULT_PANEL_PALETTE,
-  type PanelWorkspaceSection,
+  type PanelPalette,
 } from './polish.ts';
+import type { FailureReport } from '@pellux/goodvibes-sdk/platform/runtime/forensics/types';
 
 const C = {
   ...DEFAULT_PANEL_PALETTE,
@@ -34,14 +35,13 @@ function classificationColor(value: string): string {
   }
 }
 
-export class IncidentReviewPanel extends BasePanel {
+export class IncidentReviewPanel extends ScrollableListPanel<FailureReport> {
   private readonly registry?: ForensicsRegistry;
   private readonly unsub: (() => void) | null;
-  private selectedIndex = 0;
-  private scrollOffset = 0;
 
   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;
   }
@@ -50,34 +50,36 @@ export class IncidentReviewPanel extends BasePanel {
     this.unsub?.();
   }
 
-  public handleInput(key: string): boolean {
-    const reports = this.registry?.getAll() ?? [];
-    if (reports.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(reports.length - 1, this.selectedIndex + 1);
-      this.markDirty();
-      return true;
-    }
-    if (key === 'home') {
-      this.selectedIndex = 0;
-      this.markDirty();
-      return true;
-    }
-    if (key === 'end') {
-      this.selectedIndex = reports.length - 1;
-      this.markDirty();
-      return true;
-    }
-    return false;
+  protected override getPalette(): PanelPalette {
+    return C;
+  }
+
+  protected getItems(): readonly FailureReport[] {
+    return this.registry?.getAll() ?? [];
+  }
+
+  protected renderItem(report: FailureReport, index: number, selected: boolean, width: number): Line {
+    const bg = selected ? C.selectBg : undefined;
+    return buildPanelLine(width, [
+      [' ', C.label, bg],
+      [report.id.slice(0, 8).padEnd(9), C.dim, bg],
+      [report.classification.padEnd(20), classificationColor(report.classification), bg],
+      [report.summary.slice(0, Math.max(0, width - 31)), C.value, bg],
+    ]);
+  }
+
+  protected override getEmptyStateMessage(): string {
+    return ' No incidents recorded yet.';
+  }
+
+  protected override getEmptyStateActions(): Array<{ command: string; summary: string }> {
+    return [
+      { command: '/incident latest', summary: 'inspect the latest report once one exists' },
+      { command: '/recall capture incident latest', summary: 'promote incident evidence into project knowledge' },
+    ];
   }
 
   public render(width: number, height: number): Line[] {
-    this.needsRender = false;
     const intro = 'Failure bundles, replay mismatches, permission fallout, and exportable review evidence.';
 
     if (!this.registry) {
@@ -100,32 +102,16 @@ export class IncidentReviewPanel extends BasePanel {
       });
     }
 
-    const reports = this.registry.getAll();
+    const reports = this.getItems();
     if (reports.length === 0) {
-      return buildPanelWorkspace(width, height, {
-        title: 'Incident Review Workspace',
-        intro,
-        sections: [{
-          lines: buildEmptyState(
-            width,
-            ' No incidents recorded yet.',
-            'The incident workspace fills automatically when failures produce forensics reports, replay mismatches, or policy-linked fallout.',
-            [
-              { command: '/incident latest', summary: 'inspect the latest report once one exists' },
-              { command: '/recall capture incident latest', summary: 'promote incident evidence into project knowledge' },
-            ],
-            C,
-          ),
-        }],
-        palette: C,
-      });
+      return this.renderList(width, height, { title: 'Incident Review Workspace' });
     }
 
-    this.selectedIndex = Math.min(this.selectedIndex, reports.length - 1);
+    this.clampSelection();
     const selected = reports[this.selectedIndex]!;
     const bundle = this.registry.buildBundle(selected.id);
 
-    const summaryLines = [
+    const headerLines: Line[] = [
       buildKeyValueLine(width, [
         { label: 'incidents', value: String(reports.length), valueColor: C.value },
         { label: 'selected', value: `${this.selectedIndex + 1}/${reports.length}`, valueColor: C.info },
@@ -134,38 +120,38 @@ export class IncidentReviewPanel extends BasePanel {
       buildPanelLine(width, [['  Up/Down move  Home/End jump  selected incident drives the action rail below', C.dim]]),
     ];
 
-    const selectedLines: Line[] = [];
+    const footerLines: Line[] = [];
     if (bundle) {
-      selectedLines.push(buildKeyValueLine(width, [
+      footerLines.push(buildKeyValueLine(width, [
         { label: 'id', value: selected.id, valueColor: C.dim },
         { label: 'trace', value: selected.traceId, valueColor: C.dim },
       ], C));
-      selectedLines.push(...buildBodyText(width, `Root cause: ${bundle.evidence.rootCause ?? 'n/a'}`, C, C.value));
-      selectedLines.push(buildKeyValueLine(width, [
+      footerLines.push(...buildBodyText(width, `Root cause: ${bundle.evidence.rootCause ?? 'n/a'}`, C, C.value));
+      footerLines.push(buildKeyValueLine(width, [
         { label: 'Permissions denied', value: String(bundle.evidence.deniedPermissionCount), valueColor: bundle.evidence.deniedPermissionCount > 0 ? C.warn : C.dim },
         { label: 'Budget breaches', value: String(bundle.evidence.budgetBreachCount), valueColor: bundle.evidence.budgetBreachCount > 0 ? C.warn : C.dim },
         { label: 'Replay mismatches', value: String(bundle.replay.mismatchCount), valueColor: bundle.replay.mismatchCount > 0 ? C.bad : C.dim },
       ], C));
-      selectedLines.push(buildPanelLine(width, [
+      footerLines.push(buildPanelLine(width, [
         ['  Related IDs: ', C.label],
         [`turn=${bundle.evidence.relatedIds.turnId ?? 'n/a'} task=${bundle.evidence.relatedIds.taskId ?? 'n/a'} agent=${bundle.evidence.relatedIds.agentId ?? 'n/a'}`.slice(0, Math.max(0, width - 14)), C.info],
       ]));
       if (bundle.evidence.slowPhases.length > 0) {
-        selectedLines.push(buildPanelLine(width, [
+        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);
       if (rootCause) {
-        selectedLines.push(buildPanelLine(width, [
+        footerLines.push(buildPanelLine(width, [
           ['  Root event: ', C.label],
           [`${rootCause.sourceEventType} - ${rootCause.description}`.slice(0, Math.max(0, width - 14)), C.dim],
         ]));
       }
       const denied = selected.permissionEvidence.find((entry) => entry.approved === false);
       if (denied) {
-        selectedLines.push(buildPanelLine(width, [
+        footerLines.push(buildPanelLine(width, [
           ['  Permission: ', C.label],
           [`${denied.tool} denied${denied.riskLevel ? ` (${denied.riskLevel})` : ''}${denied.summary ? ` - ${denied.summary}` : ''}`.slice(0, Math.max(0, width - 14)), C.warn],
         ]));
@@ -180,68 +166,32 @@ export class IncidentReviewPanel extends BasePanel {
         const replayDetail = ownerBreakdown.length > 0
           ? `Replay link: ${mismatch.kind}${mismatch.ownerDomain ? `/${mismatch.ownerDomain}` : ''} - ${mismatch.description}  Replay owners: ${ownerBreakdown}`
           : `Replay link: ${mismatch.kind}${mismatch.ownerDomain ? `/${mismatch.ownerDomain}` : ''} - ${mismatch.description}`;
-        selectedLines.push(buildPanelLine(width, [
+        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)
-        .filter(([, count]) => count > 0)
-        .slice(0, 3)
-        .map(([domain, count]) => `${domain}:${count}`)
-        .join(', ');
+          .filter(([, count]) => count > 0)
+          .slice(0, 3)
+          .map(([domain, count]) => `${domain}:${count}`)
+          .join(', ');
         if (ownerBreakdown.length > 0) {
-          selectedLines.push(buildPanelLine(width, [
+          footerLines.push(buildPanelLine(width, [
             ['  Replay owners: ', C.label],
             [ownerBreakdown.slice(0, Math.max(0, width - 17)), C.info],
           ]));
         }
       }
     }
+    footerLines.push(buildPanelLine(width, [['  Action Rail', C.label]]));
+    footerLines.push(buildPanelLine(width, [[`  /incident latest   /incident export ${selected.id}   /recall capture incident ${selected.id}`, C.info]]));
+    footerLines.push(buildGuidanceLine(width, '/security', 'open the broader trust and incident posture control room', C));
 
-    const actionLines = [
-      buildPanelLine(width, [[`  /incident latest   /incident export ${selected.id}   /recall capture incident ${selected.id}`, C.info]]),
-    ];
-
-    const summarySection: PanelWorkspaceSection = { title: 'Summary', lines: summaryLines };
-    const actionSection: PanelWorkspaceSection = { title: 'Action Rail', lines: actionLines };
-    const selectedIncidentSection: PanelWorkspaceSection = { title: 'Selected Incident', lines: selectedLines };
-    const incidentsSection = resolveScrollablePanelSection(width, height, {
-      intro,
-      palette: C,
-      beforeSections: [summarySection],
-      section: {
-        title: 'Incidents',
-        scrollableLines: reports.map((report, globalIndex) => {
-          const bg = globalIndex === this.selectedIndex ? C.selectBg : undefined;
-          return buildPanelLine(width, [
-            [' ', C.label, bg],
-            [report.id.slice(0, 8).padEnd(9), C.dim, bg],
-            [report.classification.padEnd(20), classificationColor(report.classification), bg],
-            [report.summary.slice(0, Math.max(0, width - 31)), C.value, bg],
-          ]);
-        }),
-        selectedIndex: this.selectedIndex,
-        scrollOffset: this.scrollOffset,
-        minRows: 4,
-        appendWindowSummary: { dimColor: C.dim },
-      },
-      afterSections: [actionSection, selectedIncidentSection],
-    });
-    this.scrollOffset = incidentsSection.scrollOffset;
-
-    const sections: PanelWorkspaceSection[] = [
-      summarySection,
-      incidentsSection.section,
-      actionSection,
-      selectedIncidentSection,
-    ];
-
-    return buildPanelWorkspace(width, height, {
+    return this.renderList(width, height, {
       title: 'Incident Review Workspace',
-      intro,
-      sections,
-      palette: C,
+      header: headerLines,
+      footer: footerLines,
     });
   }
 }