@pellux/goodvibes-tui 0.18.20 → 0.19.0

package/src/panels/memory-panel.ts

@@ -1,33 +1,27 @@
 /**
  * MemoryPanel — project memory substrate TUI panel.
+ *
+ * Migrated to SearchableListPanel<MemoryRecord> (Wave B1).
  */
 
 import type { Line } from '../types/grid.ts';
 import type { MemoryRegistry } from '@pellux/goodvibes-sdk/platform/state/memory-store';
 import type { MemoryRecord, MemoryClass } from '@pellux/goodvibes-sdk/platform/state/memory-store';
-import { BasePanel } from './base-panel.ts';
+import { SearchableListPanel } from './scrollable-list-panel.ts';
 import {
   buildBodyText,
-  buildEmptyState,
   buildGuidanceLine,
   buildKeyValueLine,
   buildPanelLine,
-  buildSearchInputLine,
-  buildPanelWorkspace,
-  resolveScrollablePanelSection,
+  extendPalette,
   DEFAULT_PANEL_PALETTE,
-  type PanelWorkspaceSection,
 } from './polish.ts';
 import {
   getPanelSearchFocusTransition,
-  isPanelSearchBackspace,
   isPanelSearchCancel,
-  isPanelSearchCommit,
-  isPanelSearchPrintable,
 } from './search-focus.ts';
 
-const C = {
-  ...DEFAULT_PANEL_PALETTE,
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
   header: '#94a3b8',
   headerBg: '#1e293b',
   decision: '#38bdf8',
@@ -42,7 +36,7 @@ const C = {
   selected: '#1e3a5f',
   searchBg: '#0f172a',
   searchFg: '#e2e8f0',
-} as const;
+});
 
 function fmtTime(ts: number): string {
   const d = new Date(ts);
@@ -63,13 +57,9 @@ function classColor(cls: MemoryClass): string {
   }
 }
 
-export class MemoryPanel extends BasePanel {
+export class MemoryPanel extends SearchableListPanel<MemoryRecord> {
   private registry: MemoryRegistry;
-  private records: MemoryRecord[] = [];
-  private selectedIdx = 0;
-  private scrollOffset = 0;
-  private searchMode = false;
-  private searchQuery = '';
+  private filterFocused = false;
   private unsubscribe?: () => void;
 
   constructor(registry: MemoryRegistry) {
@@ -79,9 +69,11 @@ export class MemoryPanel extends BasePanel {
 
   onActivate(): void {
     super.onActivate();
-    this.reload();
+    this.searchQuery = '';
+    this.invalidateFilter();
+    this.filterFocused = false;
     this.unsubscribe = this.registry.subscribe(() => {
-      this.reload();
+      this.invalidateFilter();
       this.markDirty();
     });
   }
@@ -95,134 +87,112 @@ export class MemoryPanel extends BasePanel {
     this.unsubscribe = undefined;
   }
 
-  private reload(): void {
-    const filter = this.searchQuery.trim()
-      ? { query: this.searchQuery.trim(), limit: 100 }
-      : { limit: 100 };
-    this.records = this.registry.search(filter);
-    this.selectedIdx = Math.min(this.selectedIdx, Math.max(0, this.records.length - 1));
+  // ---------------------------------------------------------------------------
+  // SearchableListPanel implementation
+  // ---------------------------------------------------------------------------
+
+  protected getAllItems(): readonly MemoryRecord[] {
+    return this.registry.search({ limit: 100 });
   }
 
-  handleInput(key: string): boolean {
-    if (this.searchMode) return this.handleSearchInput(key);
+  protected matchesSearch(record: MemoryRecord, query: string): boolean {
+    const q = query.trim().toLowerCase();
+    if (!q) return true;
+    const haystack = [
+      record.summary,
+      record.detail ?? '',
+      record.cls,
+      record.scope,
+      record.tags.join(' '),
+    ].join(' ').toLowerCase();
+    return haystack.includes(q);
+  }
 
-    const transition = getPanelSearchFocusTransition(key, { selectedIndex: this.selectedIdx, itemCount: this.records.length });
-    if (transition === 'focus-search') {
-      this.searchMode = true;
-      this.markDirty();
-      return true;
-    }
+  protected renderItem(record: MemoryRecord, index: number, selected: boolean, width: number): Line {
+    const bg = selected ? C.selected : undefined;
+    return buildPanelLine(width, [
+      ['  ', C.label, bg],
+      [`[${record.scope.slice(0, 1).toUpperCase()}/${record.cls.slice(0, 3).toUpperCase()}] `, classColor(record.cls), bg],
+      [record.id.slice(-8), C.dim, bg],
+      ['  ', C.label, bg],
+      [fmtTime(record.createdAt), C.dim, bg],
+      ['  ', C.label, bg],
+      [record.summary.slice(0, Math.max(0, width - 33)), C.value, bg],
+    ]);
+  }
 
-    switch (key) {
-      case 'ArrowUp':
-      case 'k':
-        if (this.selectedIdx > 0) {
-          this.selectedIdx--;
-          this.markDirty();
-        }
-        return true;
-      case 'ArrowDown':
-      case 'j':
-        if (this.selectedIdx < this.records.length - 1) {
-          this.selectedIdx++;
-          this.markDirty();
-        }
-        return true;
-      case 'Escape':
-        if (this.searchQuery) {
-          this.searchQuery = '';
-          this.reload();
-          this.markDirty();
-        }
-        return true;
-      case 'r':
-        this.reload();
+  protected override getPalette() { return C; }
+  protected override getEmptyStateMessage() {
+    return this.searchQuery
+      ? ` No records matching "${this.searchQuery}"`
+      : ' No memory records. Use /recall add <class> <summary> to create one.';
+  }
+  protected override getEmptyStateActions() {
+    return [
+      { command: '/recall add fact <summary>', summary: 'capture a durable fact directly' },
+      { command: '/recall capture incident latest', summary: 'promote the latest incident into memory' },
+    ];
+  }
+
+  handleInput(key: string): boolean {
+    // Filter-focus mode: typing goes into the search query
+    if (this.filterFocused) {
+      const items = this.getItems();
+      const transition = getPanelSearchFocusTransition(key, { selectedIndex: this.selectedIndex, itemCount: items.length });
+      if (transition === 'focus-list') {
+        this.filterFocused = false;
         this.markDirty();
         return true;
+      }
+      if (isPanelSearchCancel(key)) {
+        this.filterFocused = false;
+        return super.handleInput(key);
+      }
+      return super.handleInput(key);
     }
-    return false;
-  }
 
-  private handleSearchInput(key: string): boolean {
-    const transition = getPanelSearchFocusTransition(key, { selectedIndex: this.selectedIdx, itemCount: this.records.length });
-    if (transition === 'focus-list') {
-      this.searchMode = false;
-      this.selectedIdx = 0;
-      this.markDirty();
-      return true;
-    }
-    if (isPanelSearchCommit(key) || isPanelSearchCancel(key)) {
-      this.searchMode = false;
-      this.reload();
-      this.markDirty();
-      return true;
-    }
-    if (isPanelSearchBackspace(key)) {
-      this.searchQuery = this.searchQuery.slice(0, -1);
+    const items = this.getItems();
+    const transition = getPanelSearchFocusTransition(key, { selectedIndex: this.selectedIndex, itemCount: items.length });
+    if (transition === 'focus-search') {
+      this.filterFocused = true;
       this.markDirty();
       return true;
     }
-    if (isPanelSearchPrintable(key)) {
-      this.searchQuery += key;
+
+    if (key === 'r') {
+      this.invalidateFilter();
       this.markDirty();
       return true;
     }
-    return false;
+
+    return super.handleInput(key);
   }
 
   render(width: number, height: number): Line[] {
+    this.clampSelection();
     const intro = 'Durable project memory across decisions, constraints, incidents, patterns, risks, runbooks, and related provenance.';
 
-    if (!this.records.length && !this.searchQuery) {
-      this.reload();
-    }
-
-    if (!this.records.length) {
-      const message = this.searchQuery
-        ? `No records matching "${this.searchQuery}"`
-        : 'No memory records. Use /recall add <class> <summary> to create one.';
-      return buildPanelWorkspace(width, height, {
-        title: 'Memory',
-        intro,
-        sections: [{
-          lines: buildEmptyState(
-            width,
-            ` ${message}`,
-            'Memory becomes useful once durable facts, incidents, and decisions are promoted into the project substrate.',
-            [
-              { command: '/recall add fact <summary>', summary: 'capture a durable fact directly' },
-              { command: '/recall capture incident latest', summary: 'promote the latest incident into memory' },
-            ],
-            C,
-          ),
-        }],
-        footerLines: [
-          buildPanelLine(width, [['  / search  j/k or Up/Down move  r reload', C.dim]]),
-        ],
-        palette: C,
-      });
-    }
-
+    const records = this.getItems();
     const byClass = new Map<MemoryClass, number>();
-    for (const record of this.records) {
+    for (const record of records) {
       byClass.set(record.cls, (byClass.get(record.cls) ?? 0) + 1);
     }
 
-    const summaryLines = [
+    const filterLine = this.buildFilterInputLine(width, 'Filter', this.filterFocused);
+
+    const summaryLines: Line[] = [
       buildKeyValueLine(width, [
-        { label: 'records', value: String(this.records.length), valueColor: C.value },
+        { label: 'records', value: String(records.length), valueColor: C.value },
         { label: 'facts', value: String(byClass.get('fact') ?? 0), valueColor: C.fact },
         { label: 'decisions', value: String(byClass.get('decision') ?? 0), valueColor: C.decision },
         { label: 'incidents', value: String(byClass.get('incident') ?? 0), valueColor: C.incident },
         { label: 'runbooks', value: String(byClass.get('runbook') ?? 0), valueColor: C.runbook },
       ], C),
-      ...(this.searchMode || this.searchQuery
-        ? [buildSearchInputLine(width, '', `${this.searchMode ? '/ ' : '~ '}${this.searchQuery}${this.searchMode ? '_' : ''}`, C, { active: this.searchMode, bg: C.searchBg, valueColor: C.searchFg })]
-        : []),
+      filterLine,
       buildGuidanceLine(width, '/recall review', 'review durable knowledge and queue posture from the command surface', C),
     ];
 
-    const selected = this.records[this.selectedIdx];
+    const selected = records[this.selectedIndex];
     const selectedLines: Line[] = [];
     if (selected) {
       selectedLines.push(buildKeyValueLine(width, [
@@ -243,51 +213,13 @@ export class MemoryPanel extends BasePanel {
       }
     }
 
-    const summarySection: PanelWorkspaceSection = { title: 'Summary', lines: summaryLines };
-    const selectedSection: PanelWorkspaceSection = selectedLines.length > 0 ? { title: 'Selected', lines: selectedLines } : { title: 'Selected', lines: [] };
-    const recordsSection = resolveScrollablePanelSection(width, height, {
-      intro,
-      footerLines: [
-        buildPanelLine(width, [['  / search  j/k or Up/Down move  r reload  Esc clear search', C.dim]]),
-      ],
-      palette: C,
-      beforeSections: [summarySection],
-      section: {
-        title: 'Records',
-        scrollableLines: this.records.map((record, globalIndex) => {
-          const bg = globalIndex === this.selectedIdx ? C.selected : undefined;
-          return buildPanelLine(width, [
-            ['  ', C.label, bg],
-            [`[${record.scope.slice(0, 1).toUpperCase()}/${record.cls.slice(0, 3).toUpperCase()}] `, classColor(record.cls), bg],
-            [record.id.slice(-8), C.dim, bg],
-            ['  ', C.label, bg],
-            [fmtTime(record.createdAt), C.dim, bg],
-            ['  ', C.label, bg],
-            [record.summary.slice(0, Math.max(0, width - 33)), C.value, bg],
-          ]);
-        }),
-        selectedIndex: this.selectedIdx,
-        scrollOffset: this.scrollOffset,
-        minRows: 4,
-        appendWindowSummary: { dimColor: C.dim },
-      },
-      afterSections: selectedLines.length > 0 ? [selectedSection] : [],
-    });
-    this.scrollOffset = recordsSection.scrollOffset;
-    const sections: PanelWorkspaceSection[] = [
-      summarySection,
-      recordsSection.section,
-    ];
-    if (selectedLines.length > 0) sections.push(selectedSection);
-
-    return buildPanelWorkspace(width, height, {
+    return this.renderList(width, height, {
       title: 'Memory',
-      intro,
-      sections,
-      footerLines: [
+      header: summaryLines,
+      footer: [
+        ...selectedLines,
         buildPanelLine(width, [['  / search  j/k or Up/Down move  r reload  Esc clear search', C.dim]]),
       ],
-      palette: C,
     });
   }
 }

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,26 +70,20 @@ 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');
+    this.showSelectionGutter = true; // I5: non-color selection affordance
     this._opsPanel = new OpsPanel(eventFeed);
     this._unsub = this._opsPanel.subscribe(() => this.markDirty());
   }
 
   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 +94,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;
   }
 }