@pellux/goodvibes-tui 0.18.20 → 0.18.23

package/src/panels/ops-control-panel.ts

@@ -12,15 +12,11 @@ import type { OpsEvent } from '@pellux/goodvibes-sdk/platform/runtime/events/ind
 import type { UiEventFeed } from '../runtime/ui-events.ts';
 import type { OpsAuditEntry } from '../runtime/diagnostics/panels/ops.ts';
 import { OpsPanel } from '../runtime/diagnostics/panels/ops.ts';
-import { BasePanel } from './base-panel.ts';
-import { createEmptyLine } from '../types/grid.ts';
+import { ScrollableListPanel } from './scrollable-list-panel.ts';
 import {
-  buildEmptyState,
   buildPanelLine,
-  buildPanelWorkspace,
-  resolveScrollablePanelSection,
   DEFAULT_PANEL_PALETTE,
-  type PanelWorkspaceSection,
+  type PanelPalette,
 } from './polish.ts';
 
 // ── Colour palette ──────────────────────────────────────────────────────────
@@ -74,10 +70,9 @@ function targetColor(kind: OpsAuditEntry['targetKind']): string {
 
 // ── OpsControlPanel ──────────────────────────────────────────────────────────
 
-export class OpsControlPanel extends BasePanel {
+export class OpsControlPanel extends ScrollableListPanel<OpsAuditEntry> {
   private readonly _opsPanel: OpsPanel;
   private _unsub: (() => void) | null = null;
-  private _scrollOffset = 0;
 
   public constructor(eventFeed: UiEventFeed<OpsEvent>) {
     super('ops-control', 'Ops Control', 'Q', 'agent');
@@ -87,13 +82,7 @@ export class OpsControlPanel extends BasePanel {
 
   public override onActivate(): void {
     super.onActivate();
-    this._scrollOffset = 0;
-  }
-
-  public handleInput(key: string): boolean {
-    if (key === 'up' || key === 'k') { this._scrollOffset = Math.max(0, this._scrollOffset - 1); return true; }
-    if (key === 'down' || key === 'j') { this._scrollOffset++; return true; }
-    return false;
+    this.selectedIndex = 0;
   }
 
   public override onDestroy(): void {
@@ -104,81 +93,57 @@ export class OpsControlPanel extends BasePanel {
     this._opsPanel.dispose();
   }
 
-  public render(width: number, height: number): Line[] {
-    this.needsRender = false;
-    const entries = this._opsPanel.getSnapshot();
-    const intro = 'Operator interventions, outcomes, and task or agent targets across the active control plane.';
-
-    if (entries.length === 0) {
-      const workspace = buildPanelWorkspace(width, height, {
-        title: 'Operator Control Plane',
-        intro,
-        sections: [{
-          lines: buildEmptyState(
-            width,
-            ' No operator interventions recorded.',
-            'Actions like pause, retry, cancel, move, and approval decisions will appear here once the operator starts intervening in runtime workflows.',
-            [{ command: '/cockpit', summary: 'open the cockpit and drive runtime interventions from the control rooms' }],
-            C,
-          ),
-        }],
-        palette: C,
-      });
-      while (workspace.length < height) workspace.push(createEmptyLine(width));
-      return workspace;
-    }
+  protected override getPalette(): PanelPalette {
+    return C;
+  }
+
+  protected getItems(): readonly OpsAuditEntry[] {
+    // Return reversed so newest entries appear at top
+    return [...this._opsPanel.getSnapshot()].reverse();
+  }
+
+  protected renderItem(entry: OpsAuditEntry, _index: number, _selected: boolean, width: number): Line {
+    const seqStr   = String(entry.seq).padStart(4, ' ');
+    const timeStr  = fmtTime(entry.ts);
+    const action   = entry.action.slice(0, 15).padEnd(15, ' ');
+    const kindTag  = entry.targetKind === 'task' ? 'T:' : 'A:';
+    // Truncation is intentional: TUI column width limits target ID display to 14 chars
+    const shortId  = entry.targetId.slice(-10);
+    const target   = (kindTag + shortId).slice(0, 14).padEnd(14, ' ');
+    const outLabel = outcomeLabel(entry.outcome);
+    const noteRaw  = (entry.note ?? entry.errorMessage ?? '').slice(0, Math.max(0, width - 63));
+
+    const segs: Array<[string, string, string?]> = [
+      [` ${seqStr} `, C.seq],
+      [`${timeStr} `, C.dim],
+      [`${action} `, C.value],
+      [`${target}  `, targetColor(entry.targetKind)],
+      [outLabel, outcomeColor(entry.outcome)],
+    ];
+    if (noteRaw) segs.push([` ${noteRaw}`, C.note]);
+    return buildPanelLine(width, segs);
+  }
+
+  protected override getEmptyStateMessage(): string {
+    return ' No operator interventions recorded.';
+  }
+
+  protected override getEmptyStateActions(): Array<{ command: string; summary: string }> {
+    return [{ command: '/cockpit', summary: 'open the cockpit and drive runtime interventions from the control rooms' }];
+  }
 
-    const reversed = [...entries].reverse();
-    const entryRows: Line[] = [
+  public render(width: number, height: number): Line[] {
+    const headerLines: Line[] = [
       buildPanelLine(width, [['  SEQ  TIME      ACTION          TARGET             OUT    NOTE', C.label]]),
     ];
-    for (const entry of reversed) {
-      const seqStr   = String(entry.seq).padStart(4, ' ');
-      const timeStr  = fmtTime(entry.ts);
-      const action   = entry.action.slice(0, 15).padEnd(15, ' ');
-      const kindTag  = entry.targetKind === 'task' ? 'T:' : 'A:';
-      // Truncation is intentional: TUI column width limits target ID display to 14 chars
-      const shortId  = entry.targetId.slice(-10);
-      const target   = (kindTag + shortId).slice(0, 14).padEnd(14, ' ');
-      const outLabel = outcomeLabel(entry.outcome);
-      const noteRaw  = (entry.note ?? entry.errorMessage ?? '').slice(0, Math.max(0, width - 63));
-
-      const segs: Array<[string, string, string?]> = [
-        [` ${seqStr} `, C.seq],
-        [`${timeStr} `, C.dim],
-        [`${action} `, C.value],
-        [`${target}  `, targetColor(entry.targetKind)],
-        [outLabel, outcomeColor(entry.outcome)],
-      ];
-      if (noteRaw) segs.push([` ${noteRaw}`, C.note]);
-      entryRows.push(buildPanelLine(width, segs));
-    }
-    const logSection = resolveScrollablePanelSection(width, height, {
-      intro,
-      footerLines: [buildPanelLine(width, [['  Up/Down scroll the intervention log', C.dim]])],
-      palette: C,
-      section: {
-        title: 'Audit Log',
-        scrollableLines: entryRows,
-        scrollOffset: this._scrollOffset,
-        minRows: 4,
-        appendWindowSummary: {
-          dimColor: C.label,
-          formatter: (window) => buildPanelLine(width, [[` [${window.start + 1}-${window.end}/${window.total}] Up/Down to scroll`.slice(0, width), C.label]]),
-        },
-      },
-    });
-    this._scrollOffset = logSection.scrollOffset;
+    const footerLines: Line[] = [
+      buildPanelLine(width, [['  Up/Down scroll the intervention log', C.dim]]),
+    ];
 
-    const sections: PanelWorkspaceSection[] = [logSection.section];
-    const lines = buildPanelWorkspace(width, height, {
+    return this.renderList(width, height, {
       title: 'Operator Control Plane',
-      intro,
-      sections,
-      footerLines: [buildPanelLine(width, [['  Up/Down scroll the intervention log', C.dim]])],
-      palette: C,
+      header: headerLines,
+      footer: footerLines,
     });
-    while (lines.length < height) lines.push(createEmptyLine(width));
-    return lines;
   }
 }

package/src/panels/panel-manager.ts

@@ -39,6 +39,9 @@ export class PanelManager {
   private _verticalSplitRatio: number = 0.5; // top gets 50% of panel height
   private _bottomPaneVisible: boolean = false;
 
+  // Cache for getWorkspaceTabs() — invalidated on every panel lifecycle event
+  private _cachedWorkspaceTabs: readonly WorkspaceTab[] | null = null;
+
   // -------------------------------------------------------------------------
   // Registration
   // -------------------------------------------------------------------------
@@ -79,6 +82,11 @@ export class PanelManager {
   // Panel lifecycle — operates on a specific pane (defaults to focused)
   // -------------------------------------------------------------------------
 
+  /** Invalidate the workspace tab cache. Call on every panel lifecycle mutation. */
+  private _invalidateWorkspaceTabs(): void {
+    this._cachedWorkspaceTabs = null;
+  }
+
   open(panelId: string, pane?: 'top' | 'bottom'): Panel {
     const existingPane = this._findPaneOf(panelId);
     if (existingPane) {
@@ -107,6 +115,7 @@ export class PanelManager {
       this._focusedPane = 'top';
     }
     panel.onActivate();
+    this._invalidateWorkspaceTabs();
     return panel;
   }
 
@@ -146,6 +155,7 @@ export class PanelManager {
       if (this.topPane.panels.length === 0 && this.bottomPane.panels.length === 0) {
         this._visible = false;
       }
+      this._invalidateWorkspaceTabs();
       return;
     }
   }
@@ -187,6 +197,7 @@ export class PanelManager {
     p.activeIndex = (p.activeIndex + 1) % p.panels.length;
     const newPanel = p.panels[p.activeIndex];
     if (newPanel) newPanel.onActivate();
+    this._invalidateWorkspaceTabs();
   }
 
   nextWorkspaceTab(): void {
@@ -216,6 +227,7 @@ export class PanelManager {
     p.activeIndex = index;
     const newPanel = p.panels[p.activeIndex];
     if (newPanel) newPanel.onActivate();
+    this._invalidateWorkspaceTabs();
   }
 
   activateById(panelId: string): void {
@@ -231,6 +243,7 @@ export class PanelManager {
   focusPane(pane: 'top' | 'bottom'): void {
     if (pane === 'bottom' && !this._bottomPaneVisible) return;
     this._focusedPane = pane;
+    this._invalidateWorkspaceTabs();
   }
 
   getFocusedPane(): 'top' | 'bottom' {
@@ -253,6 +266,7 @@ export class PanelManager {
   // -------------------------------------------------------------------------
 
   toggleBottomPane(): void {
+    this._invalidateWorkspaceTabs();
     if (this._bottomPaneVisible) {
       this._bottomPaneVisible = false;
       if (this._focusedPane === 'bottom') this._focusedPane = 'top';
@@ -329,7 +343,8 @@ export class PanelManager {
     return this._findPaneOf(panelId);
   }
 
-  getWorkspaceTabs(): WorkspaceTab[] {
+  getWorkspaceTabs(): readonly WorkspaceTab[] {
+    if (this._cachedWorkspaceTabs !== null) return this._cachedWorkspaceTabs;
     const focusedPanelId = this.getActivePanel()?.id;
     const topTabs = this.topPane.panels.map((panel) => ({
       id: panel.id,
@@ -347,7 +362,9 @@ export class PanelManager {
       active: panel.id === focusedPanelId,
       focused: panel.id === focusedPanelId,
     }));
-    return [...topTabs, ...bottomTabs];
+    const tabs = [...topTabs, ...bottomTabs] as WorkspaceTab[];
+    this._cachedWorkspaceTabs = tabs;
+    return tabs;
   }
 
   activateWorkspaceIndex(index: number): void {
@@ -357,6 +374,7 @@ export class PanelManager {
     this._focusedPane = tab.pane;
     if (tab.pane === 'bottom') this._bottomPaneVisible = true;
     this._activateByIdInPane(tab.id, tab.pane);
+    this._invalidateWorkspaceTabs();
   }
 
   // -------------------------------------------------------------------------
@@ -491,6 +509,7 @@ export class PanelManager {
       this._bottomPaneVisible = true;
     }
     this._focusedPane = dstPaneName;
+    this._invalidateWorkspaceTabs();
   }
 
   private _cycleWorkspaceTab(direction: 1 | -1): void {
@@ -533,6 +552,7 @@ export class PanelManager {
       p.activeIndex = index;
       const newPanel = p.panels[p.activeIndex];
       if (newPanel) newPanel.onActivate();
+      this._invalidateWorkspaceTabs();
     }
   }
 }

package/src/panels/plugins-panel.ts

@@ -1,14 +1,13 @@
 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 { PluginManagerObserver, PluginStatus } from '@pellux/goodvibes-sdk/platform/plugins/manager';
 import {
   buildEmptyState,
   buildPanelLine,
   buildPanelWorkspace,
   DEFAULT_PANEL_PALETTE,
-  resolvePrimaryScrollableSection,
-  type PanelWorkspaceSection,
+  type PanelPalette,
 } from './polish.ts';
 
 const C = {
@@ -47,11 +46,9 @@ function statusLabel(status: PluginStatus): string {
   return 'DISABLED';
 }
 
-export class PluginsPanel extends BasePanel {
+export class PluginsPanel extends ScrollableListPanel<PluginStatus> {
   private readonly manager: PluginManagerObserver;
   private readonly unsub: (() => void) | null;
-  private selectedIndex = 0;
-  private scrollOffset = 0;
 
   public constructor(manager: PluginManagerObserver) {
     super('plugins', 'Plugins', 'P', 'monitoring');
@@ -68,26 +65,39 @@ export class PluginsPanel extends BasePanel {
     this.unsub?.();
   }
 
-  public handleInput(key: string): boolean {
-    const plugins = this.manager.list();
-    if (plugins.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(plugins.length - 1, this.selectedIndex + 1);
-      this.markDirty();
-      return true;
-    }
-    return false;
+  protected override getPalette(): PanelPalette {
+    return C;
+  }
+
+  protected getItems(): readonly PluginStatus[] {
+    return this.manager.list();
+  }
+
+  protected renderItem(plugin: PluginStatus, _index: number, selected: boolean, width: number): Line {
+    const bg = selected ? C.selectBg : undefined;
+    return buildPanelLine(width, [
+      [' ', C.label, bg],
+      [plugin.name.padEnd(22), C.value, bg],
+      [` ${statusLabel(plugin).padEnd(11)}`, statusColor(plugin), bg],
+      [` ${plugin.trustTier.toUpperCase().padEnd(10)}`, trustColor(plugin.trustTier), bg],
+      [` ${plugin.version}`, C.dim, bg],
+    ]);
+  }
+
+  protected override getEmptyStateMessage(): string {
+    return ' No plugins discovered.';
+  }
+
+  protected override getEmptyStateActions(): Array<{ command: string; summary: string }> {
+    return [
+      { command: '/plugin list', summary: 'inspect plugin discovery paths and current registry state' },
+      { command: '/marketplace', summary: 'review curated ecosystem entries and provenance posture' },
+    ];
   }
 
   public render(width: number, height: number): Line[] {
-    this.needsRender = false;
     const intro = 'Plugin trust, capabilities, signatures, and quarantine posture for the active ecosystem surface.';
-    const plugins = this.manager.list();
+    const plugins = this.getItems();
 
     if (plugins.length === 0) {
       const workspace = buildPanelWorkspace(width, height, {
@@ -111,7 +121,7 @@ export class PluginsPanel extends BasePanel {
       return workspace;
     }
 
-    this.selectedIndex = Math.min(this.selectedIndex, plugins.length - 1);
+    this.clampSelection();
     const selected = plugins[this.selectedIndex]!;
     const selectedCaps = this.manager.capabilities(selected.name);
     const trustRecord = this.manager.getTrustRecord(selected.name);
@@ -157,45 +167,11 @@ export class PluginsPanel extends BasePanel {
     }
 
     detailLines.push(buildPanelLine(width, [['  Inspect trust and capability state here, then use /plugin to take action.', C.dim]]));
-    const detailSection: PanelWorkspaceSection = { title: 'Selected Plugin', lines: detailLines };
-    const resolvedPluginsSection = resolvePrimaryScrollableSection(width, height, {
-      intro,
-      footerLines: [buildPanelLine(width, [['  Up/Down move through discovered plugins', C.dim]])],
-      palette: C,
-      section: {
-        title: 'Plugins',
-        scrollableLines: plugins.map((plugin, absolute) => {
-          const bg = absolute === this.selectedIndex ? C.selectBg : undefined;
-          return buildPanelLine(width, [
-            [' ', C.label, bg],
-            [plugin.name.padEnd(22), C.value, bg],
-            [` ${statusLabel(plugin).padEnd(11)}`, statusColor(plugin), bg],
-            [` ${plugin.trustTier.toUpperCase().padEnd(10)}`, trustColor(plugin.trustTier), bg],
-            [` ${plugin.version}`, C.dim, bg],
-          ]);
-        }),
-        selectedIndex: this.selectedIndex,
-        scrollOffset: this.scrollOffset,
-        guardRows: 1,
-        minRows: 4,
-        appendWindowSummary: { dimColor: C.dim },
-      },
-      afterSections: [detailSection],
-    });
-    this.scrollOffset = resolvedPluginsSection.scrollOffset;
+    detailLines.push(buildPanelLine(width, [['  Up/Down move through discovered plugins', C.dim]]));
 
-    const sections: PanelWorkspaceSection[] = [
-      resolvedPluginsSection.section,
-      detailSection,
-    ];
-    const lines = buildPanelWorkspace(width, height, {
+    return this.renderList(width, height, {
       title: 'Plugin Control Room',
-      intro,
-      sections,
-      footerLines: [buildPanelLine(width, [['  Up/Down move through discovered plugins', C.dim]])],
-      palette: C,
+      footer: detailLines,
     });
-    while (lines.length < height) lines.push(createEmptyLine(width));
-    return lines.slice(0, height);
   }
 }