@pellux/goodvibes-tui 0.18.20 → 0.18.23

package/src/panels/routes-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 { UiReadModel, UiRoutesSnapshot } 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 = {
@@ -30,11 +29,11 @@ function formatTime(value?: number): string {
   return new Date(value).toLocaleString();
 }
 
-export class RoutesPanel extends BasePanel {
+type RouteBinding = UiRoutesSnapshot['bindings'][number];
+
+export class RoutesPanel extends ScrollableListPanel<RouteBinding> {
   private readonly readModel?: UiReadModel<UiRoutesSnapshot>;
   private readonly unsub: (() => void) | null;
-  private selectedIndex = 0;
-  private scrollOffset = 0;
 
   public constructor(readModel?: UiReadModel<UiRoutesSnapshot>) {
     super('routes', 'Routes', 'R', 'monitoring');
@@ -46,29 +45,38 @@ export class RoutesPanel extends BasePanel {
     this.unsub?.();
   }
 
-  public handleInput(key: string): boolean {
-    const bindings = this.bindings();
-    if (bindings.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(bindings.length - 1, this.selectedIndex + 1);
-      this.markDirty();
-      return true;
-    }
-    return false;
+  protected override getPalette(): PanelPalette {
+    return C;
   }
 
-  private bindings() {
+  protected getItems(): readonly RouteBinding[] {
     if (!this.readModel) return [];
-    return [...this.readModel.getSnapshot().bindings];
+    return this.readModel.getSnapshot().bindings;
+  }
+
+  protected renderItem(binding: RouteBinding, _index: number, selected: boolean, width: number): Line {
+    const bg = selected ? C.selectBg : undefined;
+    return buildPanelLine(width, [
+      [' ', C.label, bg],
+      [binding.surfaceKind.padEnd(9), C.info, bg],
+      [` ${truncateDisplay(binding.title ?? binding.externalId, 22).padEnd(22)}`, C.value, bg],
+      [` ${truncateDisplay(binding.sessionId ?? binding.runId ?? 'unbound', 18).padEnd(18)}`, binding.sessionId ? C.ok : C.warn, bg],
+      [` ${truncateDisplay(formatTime(binding.lastSeenAt), Math.max(0, width - 54))}`, C.dim, bg],
+    ]);
+  }
+
+  protected override getEmptyStateMessage(): string {
+    return ' No route bindings recorded.';
+  }
+
+  protected override getEmptyStateActions(): Array<{ command: string; summary: string }> {
+    return [
+      { command: '/schedule list', summary: 'run jobs and triggers that create route bindings' },
+      { command: '/communication', summary: 'inspect routed communication once a surface is active' },
+    ];
   }
 
   public render(width: number, height: number): Line[] {
-    this.needsRender = false;
     const intro = 'External route bindings that preserve thread, session, and reply context across Slack, Discord, ntfy, webhook, web, and TUI surfaces.';
 
     if (!this.readModel) {
@@ -91,138 +99,78 @@ export class RoutesPanel extends BasePanel {
     }
 
     const snapshot = this.readModel.getSnapshot();
-    const bindings = this.bindings();
+    const bindings = this.getItems();
     const surfaceEntries = Object.entries(snapshot.bindingIdsBySurface)
       .filter(([, ids]) => ids.length > 0)
       .sort((a, b) => b[1].length - a[1].length || a[0].localeCompare(b[0]));
 
-    const summarySection: PanelWorkspaceSection = {
-      title: 'Posture',
-      lines: [
-        buildKeyValueLine(width, [
-          { label: 'bindings', value: String(snapshot.totalBindings), valueColor: snapshot.totalBindings > 0 ? C.info : C.dim },
-          { label: 'active', value: String(snapshot.activeBindingIds.length), valueColor: snapshot.activeBindingIds.length > 0 ? C.ok : C.dim },
-          { label: 'resolved', value: String(snapshot.totalResolved), valueColor: snapshot.totalResolved > 0 ? C.ok : C.dim },
-          { label: 'failures', value: String(snapshot.totalFailures), valueColor: snapshot.totalFailures > 0 ? C.error : C.dim },
-        ], C),
-        buildGuidanceLine(width, '/communication', 'inspect routed message flow and delivery behavior across bound surfaces', C),
-      ],
-    };
+    const headerLines: Line[] = [
+      buildKeyValueLine(width, [
+        { label: 'bindings', value: String(snapshot.totalBindings), valueColor: snapshot.totalBindings > 0 ? C.info : C.dim },
+        { label: 'active', value: String(snapshot.activeBindingIds.length), valueColor: snapshot.activeBindingIds.length > 0 ? C.ok : C.dim },
+        { label: 'resolved', value: String(snapshot.totalResolved), valueColor: snapshot.totalResolved > 0 ? C.ok : C.dim },
+        { label: 'failures', value: String(snapshot.totalFailures), valueColor: snapshot.totalFailures > 0 ? C.error : C.dim },
+      ], C),
+      buildGuidanceLine(width, '/communication', 'inspect routed message flow and delivery behavior across bound surfaces', C),
+    ];
 
     if (bindings.length === 0) {
-      const workspace = buildPanelWorkspace(width, height, {
+      return this.renderList(width, height, {
         title: 'Route Bindings',
-        intro,
-        sections: [
-          summarySection,
-          {
-            lines: buildEmptyState(
-              width,
-              ' No route bindings recorded.',
-              'Bindings appear when the daemon links an external surface, thread, or remote client to a shared session or automation run.',
-              [
-                { command: '/schedule list', summary: 'run jobs and triggers that create route bindings' },
-                { command: '/communication', summary: 'inspect routed communication once a surface is active' },
-              ],
-              C,
-            ),
-          },
-        ],
-        palette: C,
+        header: headerLines,
+        emptyMessage: ' No route bindings recorded.',
       });
-      while (workspace.length < height) workspace.push(createEmptyLine(width));
-      return workspace;
     }
 
-    this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, bindings.length - 1));
+    this.clampSelection();
     const selected = bindings[this.selectedIndex]!;
 
-    const surfaceSection: PanelWorkspaceSection = {
-      title: 'Surfaces',
-      lines: surfaceEntries.length > 0
-        ? surfaceEntries.slice(0, 6).map(([surface, ids]) => buildPanelLine(width, [
-            [' ', C.label],
-            [surface.padEnd(10), C.info],
-            [` ${String(ids.length)} binding(s)`, C.value],
-          ]))
-        : [buildPanelLine(width, [['  No surface counts recorded.', C.dim]])],
-    };
-
-    const detailSection: PanelWorkspaceSection = {
-      title: 'Selected Binding',
-      lines: [
-        buildPanelLine(width, [
-          ['  Binding: ', C.label],
-          [selected.id, C.value],
-          ['  Surface: ', C.label],
-          [selected.surfaceKind, C.info],
-        ]),
-        buildPanelLine(width, [
-          ['  External: ', C.label],
-          [truncateDisplay(selected.externalId, 28), C.value],
-          ['  Kind: ', C.label],
-          [selected.kind, C.dim],
-        ]),
-        buildPanelLine(width, [
-          ['  Session: ', C.label],
-          [selected.sessionId ?? 'n/a', C.value],
-          ['  Run: ', C.label],
-          [selected.runId ?? 'n/a', C.dim],
-        ]),
-        buildPanelLine(width, [
-          ['  Channel: ', C.label],
-          [selected.channelId ?? 'n/a', C.dim],
-          ['  Thread: ', C.label],
-          [selected.threadId ?? 'n/a', C.dim],
-        ]),
-        buildPanelLine(width, [
-          ['  Last seen: ', C.label],
-          [formatTime(selected.lastSeenAt), C.dim],
-        ]),
-      ],
-    };
-
-    const resolvedBindings = resolvePrimaryScrollableSection(width, height, {
-      intro,
-      footerLines: [buildPanelLine(width, [['  Up/Down move through route bindings', C.dim]])],
-      palette: C,
-      beforeSections: [summarySection],
-      section: {
-        title: 'Bindings',
-        scrollableLines: bindings.map((binding, absolute) => {
-          const bg = absolute === this.selectedIndex ? C.selectBg : undefined;
-          return buildPanelLine(width, [
-            [' ', C.label, bg],
-            [binding.surfaceKind.padEnd(9), C.info, bg],
-            [` ${truncateDisplay(binding.title ?? binding.externalId, 22).padEnd(22)}`, C.value, bg],
-            [` ${truncateDisplay(binding.sessionId ?? binding.runId ?? 'unbound', 18).padEnd(18)}`, binding.sessionId ? C.ok : C.warn, bg],
-            [` ${truncateDisplay(formatTime(binding.lastSeenAt), Math.max(0, width - 54))}`, C.dim, bg],
-          ]);
-        }),
-        selectedIndex: this.selectedIndex,
-        scrollOffset: this.scrollOffset,
-        guardRows: 1,
-        minRows: 5,
-        appendWindowSummary: { dimColor: C.dim },
-      },
-      afterSections: [detailSection, surfaceSection],
-    });
-    this.scrollOffset = resolvedBindings.scrollOffset;
-
-    const sections: PanelWorkspaceSection[] = [
-      summarySection,
-      resolvedBindings.section,
-      detailSection,
-      surfaceSection,
+    const footerLines: Line[] = [
+      buildPanelLine(width, [
+        ['  Binding: ', C.label],
+        [selected.id, C.value],
+        ['  Surface: ', C.label],
+        [selected.surfaceKind, C.info],
+      ]),
+      buildPanelLine(width, [
+        ['  External: ', C.label],
+        [truncateDisplay(selected.externalId, 28), C.value],
+        ['  Kind: ', C.label],
+        [selected.kind, C.dim],
+      ]),
+      buildPanelLine(width, [
+        ['  Session: ', C.label],
+        [selected.sessionId ?? 'n/a', C.value],
+        ['  Run: ', C.label],
+        [selected.runId ?? 'n/a', C.dim],
+      ]),
+      buildPanelLine(width, [
+        ['  Channel: ', C.label],
+        [selected.channelId ?? 'n/a', C.dim],
+        ['  Thread: ', C.label],
+        [selected.threadId ?? 'n/a', C.dim],
+      ]),
+      buildPanelLine(width, [
+        ['  Last seen: ', C.label],
+        [formatTime(selected.lastSeenAt), C.dim],
+      ]),
     ];
-    const lines = buildPanelWorkspace(width, height, {
+
+    if (surfaceEntries.length > 0) {
+      footerLines.push(
+        ...surfaceEntries.slice(0, 6).map(([surface, ids]) => buildPanelLine(width, [
+          [' ', C.label],
+          [surface.padEnd(10), C.info],
+          [` ${String(ids.length)} binding(s)`, C.value],
+        ])),
+      );
+    }
+    footerLines.push(buildPanelLine(width, [['  Up/Down move through route bindings', C.dim]]));
+
+    return this.renderList(width, height, {
       title: 'Route Bindings',
-      intro,
-      sections,
-      footerLines: [buildPanelLine(width, [['  Up/Down move through route bindings', C.dim]])],
-      palette: C,
+      header: headerLines,
+      footer: footerLines,
     });
-    while (lines.length < height) lines.push(createEmptyLine(width));
-    return lines.slice(0, height);
   }
 }

package/src/panels/scrollable-list-panel.ts

@@ -1,15 +1,17 @@
 import type { Line } from '../types/grid.ts';
-import { createEmptyLine } from '../types/grid.ts';
+import { createEmptyLine, createStyledCell } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
 import type { PanelCategory } from './types.ts';
 import type { ComponentHealthMonitor } from '../runtime/perf/panel-health-monitor.ts';
 import {
   buildEmptyState,
   buildPanelWorkspace,
+  buildSearchInputLine,
   DEFAULT_PANEL_PALETTE,
   resolveScrollablePanelSection,
   type PanelPalette,
 } from './polish.ts';
+import { GLYPHS } from '../renderer/ui-primitives.ts';
 import {
   isPanelSearchBackspace,
   isPanelSearchCancel,
@@ -47,6 +49,12 @@ export abstract class ScrollableListPanel<T> extends BasePanel {
   protected selectedIndex = 0;
   /** Tracks the first visible row index; kept in sync with resolveScrollablePanelSection. */
   protected scrollStart = 0;
+  /**
+   * When true, prepends a 2-column `▸ ` gutter on the selected row.
+   * Unselected rows get `  ` (two spaces) to maintain alignment.
+   * Opt-in; default false to avoid breaking existing panel layouts.
+   */
+  protected showSelectionGutter = false;
 
   constructor(
     id: string,
@@ -250,6 +258,23 @@ export abstract class ScrollableListPanel<T> extends BasePanel {
       this.renderItem(item, index, index === this.selectedIndex, width),
     );
 
+    // I5: prepend selection gutter when opted in
+    if (this.showSelectionGutter) {
+      const infoColor = this.getPalette().info ?? DEFAULT_PANEL_PALETTE.info;
+      const dimColor = this.getPalette().dim;
+      for (let i = 0; i < scrollableLines.length; i++) {
+        const line = scrollableLines[i]!;
+        const isSelected = i === this.selectedIndex;
+        // Shift all cells right by 2, drop the last 2 to preserve width
+        const shifted = line.slice(0, width - 2);
+        const gutterChar = isSelected ? GLYPHS.navigation.selected : ' ';
+        const gutterFg = isSelected ? infoColor : dimColor;
+        const g0 = createStyledCell(gutterChar, { fg: gutterFg, bold: isSelected });
+        const g1 = createStyledCell(' ', { fg: gutterFg });
+        scrollableLines[i] = [g0, g1, ...shifted] as Line;
+      }
+    }
+
     // Empty state
     if (scrollableLines.length === 0) {
       const emptyLines = buildEmptyState(
@@ -411,21 +436,27 @@ export abstract class SearchableListPanel<T> extends ScrollableListPanel<T> {
   }
 
   /**
-   * Build the search input `Line` suitable for use in a panel header.
+   * Build the filter input `Line` for use in a panel header section.
    *
-   * Import `buildSearchInputLine` from `./polish.ts` and call it with
-   * `this.searchQuery`. Convenience wrapper:
+   * Renders the filter label and current query with context-sensitive formatting:
    *
-   * ```ts
-   * import { buildSearchInputLine } from './polish.ts';
-   *
-   * private buildHeader(width: number): Line[] {
-   *   return [buildSearchInputLine(width, 'Filter', this.searchQuery, this.getPalette(), {})];
-   * }
-   * ```
+   * - **Focused** (`focused = true`): `[Filter] query_`  — active, bold, cursor visible
+   * - **Unfocused** (`focused = false`): `Filter: query`  — dim, no cursor
    *
-   * This method is intentionally left as a documentation reference rather
-   * than a concrete implementation to avoid coupling the base class to a
-   * specific label or search-input layout.
+   * @param width   Panel width in columns.
+   * @param label   Label text (default: `'Filter'`).
+   * @param focused Whether the filter input is currently active.
    */
+  protected buildFilterInputLine(width: number, label = 'Filter', focused: boolean): Line {
+    const palette = this.getPalette();
+    const formattedLabel = focused ? `[${label}] ` : `${label}: `;
+    const value = focused ? `${this.searchQuery}_` : this.searchQuery;
+    // Pass active:false when focused to prevent buildSearchInputLine from converting the
+    // trailing '_' cursor to the block-glyph (GLYPHS.surface.cursor). The focused visual
+    // affordance is provided by the '[Label] ' bracket format and explicit inputBg/info colors.
+    const opts = focused
+      ? { active: false, bg: palette.inputBg, valueColor: palette.info }
+      : { active: false };
+    return buildSearchInputLine(width, formattedLabel, value, palette, opts);
+  }
 }