@pellux/goodvibes-tui 0.18.19 → 0.18.23

package/src/panels/communication-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 { UiCommunicationSnapshot, UiReadModel } from '../runtime/ui-read-models.ts';
 import { truncateDisplay } from '../utils/terminal-width.ts';
 import {
@@ -11,10 +10,9 @@ import {
   buildPanelLine,
   buildPanelWorkspace,
   DEFAULT_PANEL_PALETTE,
-  resolvePrimaryScrollableSection,
-  type PanelWorkspaceSection,
+  type PanelPalette,
 } from './polish.ts';
-import { getTrackedVisibleWindow } from '../renderer/surface-layout.ts';
+import { createEmptyLine } from '../types/grid.ts';
 
 const C = {
   ...DEFAULT_PANEL_PALETTE,
@@ -26,11 +24,11 @@ const C = {
   selectBg: '#0f172a',
 } as const;
 
-export class CommunicationPanel extends BasePanel {
+type CommunicationRecord = UiCommunicationSnapshot['records'][number];
+
+export class CommunicationPanel extends ScrollableListPanel<CommunicationRecord> {
   private readonly readModel?: UiReadModel<UiCommunicationSnapshot>;
   private readonly unsub: (() => void) | null;
-  private selectedIndex = 0;
-  private scrollOffset = 0;
 
   public constructor(readModel?: UiReadModel<UiCommunicationSnapshot>) {
     super('communication', 'Communication', 'Y', 'monitoring');
@@ -42,31 +40,40 @@ export class CommunicationPanel extends BasePanel {
     this.unsub?.();
   }
 
-  public handleInput(key: string): boolean {
-    const records = this.records();
-    if (records.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(records.length - 1, this.selectedIndex + 1);
-      this.markDirty();
-      return true;
-    }
-    return false;
+  protected override getPalette(): PanelPalette {
+    return C;
   }
 
-  private records() {
+  protected getItems(): readonly CommunicationRecord[] {
     if (!this.readModel) return [];
-    return [...this.readModel.getSnapshot().records];
+    return this.readModel.getSnapshot().records;
+  }
+
+  protected renderItem(record: CommunicationRecord, index: number, selected: boolean, width: number): Line {
+    const bg = selected ? C.selectBg : undefined;
+    const color = record.status === 'blocked' ? C.error : record.status === 'delivered' ? C.ok : C.info;
+    return buildPanelLine(width, [
+      [' ', C.label, bg],
+      [record.status.padEnd(10), color, bg],
+      [` ${record.kind.padEnd(10)}`, C.info, bg],
+      [` ${truncateDisplay(`${record.fromId} -> ${record.toId}`, 28).padEnd(28)}`, C.value, bg],
+      [` ${truncateDisplay(record.content, Math.max(0, width - 53))}`, C.dim, bg],
+    ]);
+  }
+
+  protected override getEmptyStateMessage(): string {
+    return ' No structured communication recorded yet.';
+  }
+
+  protected override getEmptyStateActions(): Array<{ command: string; summary: string }> {
+    return [
+      { command: '/orchestration', summary: 'review graphs and recursive agent activity' },
+      { command: '/communication', summary: 'reopen this workspace once the runtime emits message traffic' },
+    ];
   }
 
   public render(width: number, height: number): Line[] {
-    this.needsRender = false;
     const intro = 'Structured agent communication, routing policy outcomes, and delivery status across orchestration trees.';
-    const footerLines = [buildPanelLine(width, [['  Up/Down move through messages', C.dim]])];
 
     if (!this.readModel) {
       const workspace = buildPanelWorkspace(width, height, {
@@ -88,104 +95,58 @@ export class CommunicationPanel extends BasePanel {
     }
 
     const snapshot = this.readModel.getSnapshot();
-    const records = this.records();
+    const records = this.getItems();
+
+    const postureLines: Line[] = [
+      buildPanelLine(width, [['  Communication posture', C.label]]),
+      buildKeyValueLine(width, [
+        { label: 'sent', value: String(snapshot.totalSent), valueColor: snapshot.totalSent > 0 ? C.info : C.dim },
+        { label: 'delivered', value: String(snapshot.totalDelivered), valueColor: snapshot.totalDelivered > 0 ? C.ok : C.dim },
+        { label: 'blocked', value: String(snapshot.totalBlocked), valueColor: snapshot.totalBlocked > 0 ? C.error : C.dim },
+      ], C),
+      buildGuidanceLine(width, '/orchestration', 'inspect recursive routing, message handoff, and blocked broadcast posture', C),
+    ];
 
     if (records.length === 0) {
-      const workspace = buildPanelWorkspace(width, height, {
+      return this.renderList(width, height, {
         title: 'Communication Control Room',
-        intro,
-        sections: [{
-          title: 'Communication posture',
-          lines: [
-            buildKeyValueLine(width, [
-              { label: 'sent', value: String(snapshot.totalSent), valueColor: snapshot.totalSent > 0 ? C.info : C.dim },
-              { label: 'delivered', value: String(snapshot.totalDelivered), valueColor: snapshot.totalDelivered > 0 ? C.ok : C.dim },
-              { label: 'blocked', value: String(snapshot.totalBlocked), valueColor: snapshot.totalBlocked > 0 ? C.error : C.dim },
-            ], C),
-            buildGuidanceLine(width, '/communication', 'review structured message flow, delivery posture, and blocked routing decisions', C),
-            ...buildEmptyState(
-              width,
-              ' No structured communication recorded yet.',
-              'Messages, escalations, findings, and handoffs will appear here once orchestration starts routing them through the communication policy.',
-              [
-                { command: '/orchestration', summary: 'review graphs and recursive agent activity' },
-                { command: '/communication', summary: 'reopen this workspace once the runtime emits message traffic' },
-              ],
-              C,
-            ),
-          ],
-        }],
-        palette: C,
+        header: postureLines,
       });
-      while (workspace.length < height) workspace.push(createEmptyLine(width));
-      return workspace;
     }
 
-    this.selectedIndex = Math.min(this.selectedIndex, records.length - 1);
-    const postureLines: Line[] = [
+    this.clampSelection();
+    const selected = records[this.selectedIndex];
+
+    // Update posture with selected info
+    const postureWithSelected: Line[] = [
+      buildPanelLine(width, [['  Communication posture', C.label]]),
       buildKeyValueLine(width, [
         { label: 'sent', value: String(snapshot.totalSent), valueColor: snapshot.totalSent > 0 ? C.info : C.dim },
         { label: 'delivered', value: String(snapshot.totalDelivered), valueColor: snapshot.totalDelivered > 0 ? C.ok : C.dim },
         { label: 'blocked', value: String(snapshot.totalBlocked), valueColor: snapshot.totalBlocked > 0 ? C.error : C.dim },
-        { label: 'selected', value: `${records[this.selectedIndex]?.fromId ?? 'n/a'} -> ${records[this.selectedIndex]?.toId ?? 'n/a'}`, valueColor: C.value },
+        { label: 'selected', value: `${selected?.fromId ?? 'n/a'} -> ${selected?.toId ?? 'n/a'}`, valueColor: C.value },
       ], C),
       buildGuidanceLine(width, '/orchestration', 'inspect recursive routing, message handoff, and blocked broadcast posture', C),
     ];
 
-    const selected = records[this.selectedIndex]!;
-    const detailLines: Line[] = [
-      buildPanelLine(width, [['  Route: ', C.label], [`${selected.scope} / ${selected.kind}`, C.value], ['  Status: ', C.label], [selected.status, selected.status === 'blocked' ? C.error : C.ok]]),
-      buildPanelLine(width, [['  From: ', C.label], [selected.fromId, C.value], ['  To: ', C.label], [selected.toId, C.value]]),
-      buildPanelLine(width, [['  Roles: ', C.label], [`${selected.fromRole ?? 'unknown'} -> ${selected.toRole ?? 'unknown'}`, C.dim]]),
-    ];
-    if (selected.reason) {
-      detailLines.push(buildPanelLine(width, [['  Reason: ', C.label], [truncateDisplay(selected.reason, Math.max(0, width - 11)), C.warn]]));
+    const footerLines: Line[] = [];
+    if (selected) {
+      footerLines.push(
+        buildPanelLine(width, [['  Route: ', C.label], [`${selected.scope} / ${selected.kind}`, C.value], ['  Status: ', C.label], [selected.status, selected.status === 'blocked' ? C.error : C.ok]]),
+        buildPanelLine(width, [['  From: ', C.label], [selected.fromId, C.value], ['  To: ', C.label], [selected.toId, C.value]]),
+        buildPanelLine(width, [['  Roles: ', C.label], [`${selected.fromRole ?? 'unknown'} -> ${selected.toRole ?? 'unknown'}`, C.dim]]),
+      );
+      if (selected.reason) {
+        footerLines.push(buildPanelLine(width, [['  Reason: ', C.label], [truncateDisplay(selected.reason, Math.max(0, width - 11)), C.warn]]));
+      }
+      footerLines.push(...buildBodyText(width, ` Content: ${selected.content}`, C));
     }
-    detailLines.push(...buildBodyText(width, ` Content: ${selected.content}`, C));
-    const postureSection: PanelWorkspaceSection = { title: 'Communication posture', lines: postureLines };
-    const detailSection: PanelWorkspaceSection = { title: 'Selected Message', lines: detailLines };
-    const rawOverviewLines: Line[] = records.map((record, absolute) => {
-      const bg = absolute === this.selectedIndex ? C.selectBg : undefined;
-      const color = record.status === 'blocked' ? C.error : record.status === 'delivered' ? C.ok : C.info;
-      return buildPanelLine(width, [
-        [' ', C.label, bg],
-        [record.status.padEnd(10), color, bg],
-        [` ${record.kind.padEnd(10)}`, C.info, bg],
-        [` ${truncateDisplay(`${record.fromId} -> ${record.toId}`, 28).padEnd(28)}`, C.value, bg],
-        [` ${truncateDisplay(record.content, Math.max(0, width - 53))}`, C.dim, bg],
-      ]);
-    });
-    const resolvedMessagesSection = resolvePrimaryScrollableSection(width, height, {
-      intro,
-      footerLines,
-      palette: C,
-      beforeSections: [postureSection],
-      section: {
-        title: 'Recent Messages',
-        scrollableLines: rawOverviewLines,
-        selectedIndex: this.selectedIndex,
-        scrollOffset: this.scrollOffset,
-        guardRows: 1,
-        minRows: 4,
-        appendWindowSummary: { dimColor: C.dim },
-      },
-      afterSections: [detailSection],
-    });
-    this.scrollOffset = resolvedMessagesSection.scrollOffset;
+    footerLines.push(buildPanelLine(width, [['  Up/Down move through messages', C.dim]]));
 
-    const sections: PanelWorkspaceSection[] = [
-      postureSection,
-      resolvedMessagesSection.section,
-      detailSection,
-    ];
-    const lines = buildPanelWorkspace(width, height, {
+    return this.renderList(width, height, {
       title: 'Communication Control Room',
-      intro,
-      sections,
-      footerLines,
-      palette: C,
+      header: postureWithSelected,
+      footer: footerLines,
     });
-    while (lines.length < height) lines.push(createEmptyLine(width));
-    return lines.slice(0, height);
   }
 }

package/src/panels/confirm-state.ts

@@ -0,0 +1,61 @@
+// ---------------------------------------------------------------------------
+// useConfirmState<T> — reusable inline y/n confirmation helper
+//
+// Pattern (chosen over ConfirmableListPanel base class):
+//   - Composable: any panel holds a ConfirmState field, not a new base class
+//   - Identical y/n UX everywhere: y confirms, n/Esc cancels, any other key
+//     is absorbed (does nothing) while confirm is active
+//   - Render: caller calls renderConfirmLines(width, state) to get the two
+//     lines that replace the normal content area when confirming
+// ---------------------------------------------------------------------------
+
+import type { Line } from '../types/grid.ts';
+import { buildPanelLine } from './polish.ts';
+import { DEFAULT_PANEL_PALETTE } from './polish.ts';
+
+export interface ConfirmState<T = string> {
+  /** The subject of the confirmation (e.g. item name or id). */
+  readonly subject: T;
+  /** Human-readable label for the item being destroyed. */
+  readonly label: string;
+}
+
+/**
+ * Call this from a panel's handleInput() BEFORE any other key handling.
+ *
+ * Returns:
+ *   - `'confirmed'` — user pressed y; caller must execute the action and
+ *     clear state (set confirm to null)
+ *   - `'cancelled'` — user pressed n or Esc; caller must clear state
+ *   - `'absorbed'`  — any other key while confirm is active; caller returns true
+ *   - `'inactive'`  — no confirm pending; caller continues normal dispatch
+ */
+export function handleConfirmInput<T = string>(
+  confirm: ConfirmState<T> | null,
+  key: string,
+): 'confirmed' | 'cancelled' | 'absorbed' | 'inactive' {
+  if (!confirm) return 'inactive';
+  if (key === 'y') return 'confirmed';
+  if (key === 'n' || key === 'escape') return 'cancelled';
+  return 'absorbed';
+}
+
+/**
+ * Build the two confirmation lines to show in place of the normal list body.
+ * Callers embed these lines in a workspace section titled 'Confirmation'.
+ */
+export function renderConfirmLines<T = string>(width: number, state: ConfirmState<T>): Line[] {
+  const palette = DEFAULT_PANEL_PALETTE;
+  return [
+    buildPanelLine(width, [[
+      ` Delete "${state.label}"?`,
+      palette.warn,
+    ]]),
+    buildPanelLine(width, [
+      [' y', palette.info],
+      ['  confirm delete', palette.dim],
+      ['   n / Esc', palette.info],
+      ['  cancel', palette.dim],
+    ]),
+  ];
+}

package/src/panels/control-plane-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 { UiControlPlaneSnapshot, UiReadModel } from '../runtime/ui-read-models.ts';
 import { truncateDisplay } from '../utils/terminal-width.ts';
 import {
@@ -10,8 +10,7 @@ import {
   buildPanelLine,
   buildPanelWorkspace,
   DEFAULT_PANEL_PALETTE,
-  resolvePrimaryScrollableSection,
-  type PanelWorkspaceSection,
+  type PanelPalette,
 } from './polish.ts';
 
 const C = {
@@ -37,10 +36,10 @@ function connectionColor(state: string): string {
   return C.dim;
 }
 
-export class ControlPlanePanel extends BasePanel {
+type ControlPlaneClient = UiControlPlaneSnapshot['clients'][number];
+
+export class ControlPlanePanel extends ScrollableListPanel<ControlPlaneClient> {
   private readonly unsub: (() => void) | null;
-  private selectedIndex = 0;
-  private scrollOffset = 0;
 
   public constructor(private readonly readModel?: UiReadModel<UiControlPlaneSnapshot>) {
     super('control-plane', 'Control Plane', 'C', 'monitoring');
@@ -51,29 +50,38 @@ export class ControlPlanePanel extends BasePanel {
     this.unsub?.();
   }
 
-  public handleInput(key: string): boolean {
-    const clients = this.clients();
-    if (clients.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(clients.length - 1, this.selectedIndex + 1);
-      this.markDirty();
-      return true;
-    }
-    return false;
+  protected override getPalette(): PanelPalette {
+    return C;
   }
 
-  private clients() {
+  protected getItems(): readonly ControlPlaneClient[] {
     if (!this.readModel) return [];
-    return [...this.readModel.getSnapshot().clients];
+    return this.readModel.getSnapshot().clients;
+  }
+
+  protected renderItem(client: ControlPlaneClient, _index: number, selected: boolean, width: number): Line {
+    const bg = selected ? C.selectBg : undefined;
+    return buildPanelLine(width, [
+      [' ', C.label, bg],
+      [client.kind.padEnd(10), C.info, bg],
+      [` ${truncateDisplay(client.label, 20).padEnd(20)}`, C.value, bg],
+      [` ${client.transport.padEnd(12)}`, C.dim, bg],
+      [` ${truncateDisplay(formatTime(client.lastSeenAt), Math.max(0, width - 46))}`, C.dim, bg],
+    ]);
+  }
+
+  protected override getEmptyStateMessage(): string {
+    return ' No control-plane activity recorded.';
+  }
+
+  protected override getEmptyStateActions(): Array<{ command: string; summary: string }> {
+    return [
+      { command: '/cockpit', summary: 'watch operator posture from the terminal' },
+      { command: '/schedule list', summary: 'run automation that creates surface and daemon traffic' },
+    ];
   }
 
   public render(width: number, height: number): Line[] {
-    this.needsRender = false;
     const intro = 'Shared daemon control plane state, live clients, approval pressure, and recent omnichannel session posture.';
 
     if (!this.readModel) {
@@ -99,168 +107,104 @@ export class ControlPlanePanel extends BasePanel {
     const approvals = snapshot.approvals;
     const sessions = snapshot.sessions;
     const recentEvents = snapshot.recentEvents;
-    const clients = this.clients();
-
-    const summarySection: PanelWorkspaceSection = {
-      title: 'Posture',
-      lines: [
-        buildKeyValueLine(width, [
-          { label: 'state', value: snapshot.connectionState, valueColor: connectionColor(snapshot.connectionState) },
-          { label: 'clients', value: String(snapshot.activeClientIds.length), valueColor: snapshot.activeClientIds.length > 0 ? C.ok : C.dim },
-          { label: 'requests', value: String(snapshot.requestCount), valueColor: snapshot.requestCount > 0 ? C.info : C.dim },
-          { label: 'errors', value: String(snapshot.errorCount), valueColor: snapshot.errorCount > 0 ? C.error : C.dim },
-        ], C),
-        buildKeyValueLine(width, [
-          { label: 'host', value: `${snapshot.host}:${snapshot.port}`, valueColor: C.value },
-          { label: 'approvals', value: String(approvals.filter((entry) => entry.status === 'pending').length), valueColor: approvals.some((entry) => entry.status === 'pending') ? C.warn : C.dim },
-          { label: 'sessions', value: String(sessions.length), valueColor: sessions.length > 0 ? C.info : C.dim },
-          { label: 'events', value: String(recentEvents.length), valueColor: recentEvents.length > 0 ? C.info : C.dim },
-        ], C),
-        buildGuidanceLine(width, '/cockpit', 'use the web operator surface or daemon APIs for direct interventions while this panel tracks overall posture', C),
-      ],
-    };
+    const clients = this.getItems();
+
+    const headerLines: Line[] = [
+      buildKeyValueLine(width, [
+        { label: 'state', value: snapshot.connectionState, valueColor: connectionColor(snapshot.connectionState) },
+        { label: 'clients', value: String(snapshot.activeClientIds.length), valueColor: snapshot.activeClientIds.length > 0 ? C.ok : C.dim },
+        { label: 'requests', value: String(snapshot.requestCount), valueColor: snapshot.requestCount > 0 ? C.info : C.dim },
+        { label: 'errors', value: String(snapshot.errorCount), valueColor: snapshot.errorCount > 0 ? C.error : C.dim },
+      ], C),
+      buildKeyValueLine(width, [
+        { label: 'host', value: `${snapshot.host}:${snapshot.port}`, valueColor: C.value },
+        { label: 'approvals', value: String(approvals.filter((entry) => entry.status === 'pending').length), valueColor: approvals.some((entry) => entry.status === 'pending') ? C.warn : C.dim },
+        { label: 'sessions', value: String(sessions.length), valueColor: sessions.length > 0 ? C.info : C.dim },
+        { label: 'events', value: String(recentEvents.length), valueColor: recentEvents.length > 0 ? C.info : C.dim },
+      ], C),
+      buildGuidanceLine(width, '/cockpit', 'use the web operator surface or daemon APIs for direct interventions while this panel tracks overall posture', C),
+    ];
 
     if (clients.length === 0 && approvals.length === 0 && sessions.length === 0) {
-      const workspace = buildPanelWorkspace(width, height, {
+      return this.renderList(width, height, {
         title: 'Control Plane',
-        intro,
-        sections: [
-          summarySection,
-          {
-            lines: buildEmptyState(
-              width,
-              ' No control-plane activity recorded.',
-              'Start the daemon, connect a surface, or trigger an approval to populate this operator panel.',
-              [
-                { command: '/cockpit', summary: 'watch operator posture from the terminal' },
-                { command: '/schedule list', summary: 'run automation that creates surface and daemon traffic' },
-              ],
-              C,
-            ),
-          },
-        ],
-        palette: C,
+        header: headerLines,
+        emptyMessage: ' No control-plane activity recorded.',
       });
-      while (workspace.length < height) workspace.push(createEmptyLine(width));
-      return workspace;
     }
 
-    this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, clients.length - 1));
+    this.clampSelection();
     const selected = clients[this.selectedIndex];
 
-    const detailSection: PanelWorkspaceSection = selected
-      ? {
-          title: 'Selected Client',
-          lines: [
-            buildPanelLine(width, [
-              ['  Client: ', C.label],
-              [selected.label, C.value],
-              ['  Kind: ', C.label],
-              [selected.kind, C.info],
-            ]),
-            buildPanelLine(width, [
-              ['  Transport: ', C.label],
-              [selected.transport, C.value],
-              ['  Connected: ', C.label],
-              [selected.connected ? 'yes' : 'no', selected.connected ? C.ok : C.warn],
-            ]),
-            buildPanelLine(width, [
-              ['  Route: ', C.label],
-              [selected.routeId ?? 'n/a', C.dim],
-              ['  Session: ', C.label],
-              [selected.sessionId ?? 'n/a', C.dim],
-            ]),
-            buildPanelLine(width, [
-              ['  Last seen: ', C.label],
-              [formatTime(selected.lastSeenAt), C.dim],
-              ['  Remote: ', C.label],
-              [truncateDisplay(selected.remoteAddress ?? 'n/a', Math.max(0, width - 36)), C.dim],
-            ]),
-          ],
-        }
-      : {
-          title: 'Selected Client',
-          lines: [buildPanelLine(width, [['  No connected client selected.', C.dim]])],
-        };
-
-    const approvalsSection: PanelWorkspaceSection = {
-      title: 'Approvals',
-      lines: approvals.length > 0
-        ? approvals.slice(0, 6).map((approval) => buildPanelLine(width, [
-            [' ', C.label],
-            [approval.status.padEnd(10), approval.status === 'pending' ? C.warn : approval.status === 'approved' ? C.ok : approval.status === 'denied' ? C.error : C.dim],
-            [` ${truncateDisplay(approval.request.tool, 16).padEnd(16)}`, C.value],
-            [` ${truncateDisplay(approval.sessionId ?? approval.id, Math.max(0, width - 30))}`, C.dim],
-          ]))
-        : [buildPanelLine(width, [['  No recent approvals.', C.dim]])],
-    };
+    const footerLines: Line[] = [];
+    if (selected) {
+      footerLines.push(
+        buildPanelLine(width, [
+          ['  Client: ', C.label],
+          [selected.label, C.value],
+          ['  Kind: ', C.label],
+          [selected.kind, C.info],
+        ]),
+        buildPanelLine(width, [
+          ['  Transport: ', C.label],
+          [selected.transport, C.value],
+          ['  Connected: ', C.label],
+          [selected.connected ? 'yes' : 'no', selected.connected ? C.ok : C.warn],
+        ]),
+        buildPanelLine(width, [
+          ['  Route: ', C.label],
+          [selected.routeId ?? 'n/a', C.dim],
+          ['  Session: ', C.label],
+          [selected.sessionId ?? 'n/a', C.dim],
+        ]),
+        buildPanelLine(width, [
+          ['  Last seen: ', C.label],
+          [formatTime(selected.lastSeenAt), C.dim],
+          ['  Remote: ', C.label],
+          [truncateDisplay(selected.remoteAddress ?? 'n/a', Math.max(0, width - 36)), C.dim],
+        ]),
+      );
+    } else {
+      footerLines.push(buildPanelLine(width, [['  No connected client selected.', C.dim]]));
+    }
 
-    const sessionsSection: PanelWorkspaceSection = {
-      title: 'Sessions',
-      lines: sessions.length > 0
-        ? sessions.slice(0, 6).map((session) => buildPanelLine(width, [
-            [' ', C.label],
-            [session.status.padEnd(10), session.status === 'active' ? C.ok : C.dim],
-            [` ${truncateDisplay(session.title, 20).padEnd(20)}`, C.value],
-            [` ${truncateDisplay(session.activeAgentId ?? session.id, Math.max(0, width - 34))}`, C.dim],
-          ]))
-        : [buildPanelLine(width, [['  No shared sessions recorded.', C.dim]])],
-    };
+    if (approvals.length > 0) {
+      footerLines.push(
+        ...approvals.slice(0, 6).map((approval) => buildPanelLine(width, [
+          [' ', C.label],
+          [approval.status.padEnd(10), approval.status === 'pending' ? C.warn : approval.status === 'approved' ? C.ok : approval.status === 'denied' ? C.error : C.dim],
+          [` ${truncateDisplay(approval.request.tool, 16).padEnd(16)}`, C.value],
+          [` ${truncateDisplay(approval.sessionId ?? approval.id, Math.max(0, width - 30))}`, C.dim],
+        ])),
+      );
+    }
 
-    const eventsSection: PanelWorkspaceSection = {
-      title: 'Recent Events',
-      lines: recentEvents.length > 0
-        ? recentEvents.slice(0, 6).map((event) => buildPanelLine(width, [
-            [' ', C.label],
-            [truncateDisplay(event.event, 16).padEnd(16), C.info],
-            [` ${truncateDisplay(typeof event.payload === 'string' ? event.payload : JSON.stringify(event.payload) ?? '', Math.max(0, width - 19))}`, C.dim],
-          ]))
-        : [buildPanelLine(width, [['  No recent control-plane events.', C.dim]])],
-    };
+    if (sessions.length > 0) {
+      footerLines.push(
+        ...sessions.slice(0, 6).map((session) => buildPanelLine(width, [
+          [' ', C.label],
+          [session.status.padEnd(10), session.status === 'active' ? C.ok : C.dim],
+          [` ${truncateDisplay(session.title, 20).padEnd(20)}`, C.value],
+          [` ${truncateDisplay(session.activeAgentId ?? session.id, Math.max(0, width - 34))}`, C.dim],
+        ])),
+      );
+    }
 
-    const resolvedClients = resolvePrimaryScrollableSection(width, height, {
-      intro,
-      footerLines: [buildPanelLine(width, [['  Up/Down move through connected clients', C.dim]])],
-      palette: C,
-      beforeSections: [summarySection],
-      section: {
-        title: 'Clients',
-        scrollableLines: clients.map((client, absolute) => {
-          const bg = absolute === this.selectedIndex ? C.selectBg : undefined;
-          return buildPanelLine(width, [
-            [' ', C.label, bg],
-            [client.kind.padEnd(10), C.info, bg],
-            [` ${truncateDisplay(client.label, 20).padEnd(20)}`, C.value, bg],
-            [` ${client.transport.padEnd(12)}`, C.dim, bg],
-            [` ${truncateDisplay(formatTime(client.lastSeenAt), Math.max(0, width - 46))}`, C.dim, bg],
-          ]);
-        }),
-        selectedIndex: this.selectedIndex,
-        scrollOffset: this.scrollOffset,
-        guardRows: 1,
-        minRows: 4,
-        appendWindowSummary: { dimColor: C.dim },
-      },
-      afterSections: [detailSection, approvalsSection, sessionsSection, eventsSection],
-    });
-    this.scrollOffset = resolvedClients.scrollOffset;
+    if (recentEvents.length > 0) {
+      footerLines.push(
+        ...recentEvents.slice(0, 6).map((event) => buildPanelLine(width, [
+          [' ', C.label],
+          [truncateDisplay(event.event, 16).padEnd(16), C.info],
+          [` ${truncateDisplay(typeof event.payload === 'string' ? event.payload : JSON.stringify(event.payload) ?? '', Math.max(0, width - 19))}`, C.dim],
+        ])),
+      );
+    }
+    footerLines.push(buildPanelLine(width, [['  Up/Down move through connected clients', C.dim]]));
 
-    const sections: PanelWorkspaceSection[] = [
-      summarySection,
-      resolvedClients.section,
-      detailSection,
-      approvalsSection,
-      sessionsSection,
-      eventsSection,
-    ];
-    const lines = buildPanelWorkspace(width, height, {
+    return this.renderList(width, height, {
       title: 'Control Plane',
-      intro,
-      sections,
-      footerLines: [buildPanelLine(width, [['  Up/Down move through connected clients', C.dim]])],
-      palette: C,
+      header: headerLines,
+      footer: footerLines,
     });
-    while (lines.length < height) lines.push(createEmptyLine(width));
-    return lines.slice(0, height);
   }
 }