@pellux/goodvibes-tui 0.18.13 → 0.18.17

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

@@ -0,0 +1,407 @@
+import type { Line } from '../types/grid.ts';
+import { createEmptyLine } 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,
+  DEFAULT_PANEL_PALETTE,
+  resolveScrollablePanelSection,
+  type PanelPalette,
+} from './polish.ts';
+import {
+  isPanelSearchBackspace,
+  isPanelSearchCancel,
+  isPanelSearchPrintable,
+} from './search-focus.ts';
+
+// ---------------------------------------------------------------------------
+// ScrollableListPanel<T>
+// ---------------------------------------------------------------------------
+
+/**
+ * Base class for all list-based panels that require scroll/cursor navigation.
+ *
+ * Subclasses implement:
+ *   - `getItems()` — the ordered list of items to display
+ *   - `renderItem(item, index, selected, width)` — one `Line` per item
+ *
+ * Optionally override:
+ *   - `getEmptyStateMessage()` / `getEmptyStateActions()` — empty-state copy
+ *   - `onSelect(item)` — called when the user presses Enter
+ *   - `onAction(item, action)` — for secondary key bindings
+ *   - `getPalette()` — colour palette (defaults to `DEFAULT_PANEL_PALETTE`)
+ *   - `getPageSize()` — rows per page-up/page-down (default 10)
+ *
+ * `renderList()` produces the full `Line[]` output that a trivial panel's
+ * `render()` can return directly:
+ *
+ * ```ts
+ * render(width: number, height: number): Line[] {
+ *   return this.renderList(width, height, { header: this.buildHeader(width) });
+ * }
+ * ```
+ */
+export abstract class ScrollableListPanel<T> extends BasePanel {
+  protected selectedIndex = 0;
+  /** Tracks the first visible row index; kept in sync with resolveScrollablePanelSection. */
+  protected scrollStart = 0;
+
+  constructor(
+    id: string,
+    name: string,
+    icon: string,
+    category: PanelCategory,
+    componentHealthMonitor?: ComponentHealthMonitor,
+  ) {
+    super(id, name, icon, category, componentHealthMonitor);
+  }
+
+  // -------------------------------------------------------------------------
+  // Abstract — subclasses must implement
+  // -------------------------------------------------------------------------
+
+  /** Return the full ordered list of items to display. */
+  protected abstract getItems(): readonly T[];
+
+  /** Render a single item as one terminal `Line`. */
+  protected abstract renderItem(
+    item: T,
+    index: number,
+    selected: boolean,
+    width: number,
+  ): Line;
+
+  // -------------------------------------------------------------------------
+  // Optional overrides
+  // -------------------------------------------------------------------------
+
+  /** Short label shown in the empty-state title. */
+  protected getEmptyStateMessage(): string {
+    return 'No items';
+  }
+
+  /** Suggested actions shown in the empty state. */
+  protected getEmptyStateActions(): Array<{ command: string; summary: string }> {
+    return [];
+  }
+
+  /** Called when the user presses Enter on the selected item. */
+  protected onSelect(_item: T): void {}
+
+  /** Called for secondary key bindings (e.g. 'd' for delete). */
+  protected onAction(_item: T, _action: string): void {}
+
+  /** Colour palette used by `renderList()`. */
+  protected getPalette(): PanelPalette {
+    return DEFAULT_PANEL_PALETTE;
+  }
+
+  /**
+   * Rows to jump on pageup / pagedown.
+   * Override in `render()` to pass the actual visible row count:
+   *
+   * ```ts
+   * this._pageSize = Math.max(1, visibleRows - 2);
+   * ```
+   */
+  protected getPageSize(): number {
+    return 10;
+  }
+
+  // -------------------------------------------------------------------------
+  // Navigation — consistent across ALL panels
+  // -------------------------------------------------------------------------
+
+  handleInput(key: string): boolean {
+    const items = this.getItems();
+    const total = items.length;
+
+    switch (key) {
+      case 'up':
+      case 'k':
+        if (total === 0) return false;
+        this.selectedIndex = Math.max(0, this.selectedIndex - 1);
+        this.needsRender = true;
+        return true;
+
+      case 'down':
+      case 'j':
+        if (total === 0) return false;
+        this.selectedIndex = Math.min(total - 1, this.selectedIndex + 1);
+        this.needsRender = true;
+        return true;
+
+      case 'pageup':
+        if (total === 0) return false;
+        this.selectedIndex = Math.max(0, this.selectedIndex - this.getPageSize());
+        this.needsRender = true;
+        return true;
+
+      case 'pagedown':
+        if (total === 0) return false;
+        this.selectedIndex = Math.min(total - 1, this.selectedIndex + this.getPageSize());
+        this.needsRender = true;
+        return true;
+
+      case 'home':
+      case 'g':
+        if (total === 0) return false;
+        this.selectedIndex = 0;
+        this.needsRender = true;
+        return true;
+
+      case 'end':
+      case 'G':
+        if (total === 0) return false;
+        this.selectedIndex = total - 1;
+        this.needsRender = true;
+        return true;
+
+      case 'return':
+      case 'enter': {
+        if (total === 0) return false;
+        const item = items[this.selectedIndex];
+        if (item !== undefined) this.onSelect(item);
+        return true;
+      }
+
+      default:
+        return false;
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Scroll state helpers
+  // -------------------------------------------------------------------------
+
+  /**
+   * Clamp `selectedIndex` to the current item count.
+   * Must be called after any data refresh that may shrink the list.
+   */
+  protected clampSelection(): void {
+    const total = this.getItems().length;
+    if (total === 0) {
+      this.selectedIndex = 0;
+    } else {
+      this.selectedIndex = Math.min(this.selectedIndex, total - 1);
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Render helper — the main convenience entry point
+  // -------------------------------------------------------------------------
+
+  /**
+   * Render the full panel including optional header/footer and an empty state.
+   *
+   * Uses `resolveScrollablePanelSection` + `buildPanelWorkspace` internally,
+   * keeping `scrollStart` in sync after each call.
+   *
+   * @param width  Panel width in columns.
+   * @param height Panel height in rows.
+   * @param options.header  Lines prepended as the first workspace section.
+   * @param options.footer  Lines appended as the last workspace section.
+   * @param options.emptyMessage  Override for the empty-state title text.
+   * @param options.title  Workspace title (defaults to `this.name`).
+   */
+  protected renderList(
+    width: number,
+    height: number,
+    options: {
+      readonly header?: readonly Line[];
+      readonly footer?: readonly Line[];
+      readonly emptyMessage?: string;
+      readonly title?: string;
+    } = {},
+  ): Line[] {
+    this.needsRender = false;
+    const palette = this.getPalette();
+    const items = this.getItems();
+    const title = options.title ?? this.name;
+
+    // Build all item lines (pre-render for resolveScrollablePanelSection)
+    const scrollableLines: Line[] = items.map((item, index) =>
+      this.renderItem(item, index, index === this.selectedIndex, width),
+    );
+
+    // Empty state
+    if (scrollableLines.length === 0) {
+      const emptyLines = buildEmptyState(
+        width,
+        options.emptyMessage ?? this.getEmptyStateMessage(),
+        '',
+        this.getEmptyStateActions(),
+        palette,
+      );
+      const lines = buildPanelWorkspace(width, height, {
+        title,
+        sections: [
+          ...(options.header ? [{ lines: options.header as Line[] }] : []),
+          { lines: emptyLines },
+          ...(options.footer ? [{ lines: options.footer as Line[] }] : []),
+        ],
+        palette,
+      });
+      while (lines.length < height) lines.push(createEmptyLine(width));
+      return lines.slice(0, height);
+    }
+
+    // Resolve scrollable section (updates scrollStart)
+    const beforeSections = options.header ? [{ lines: options.header as Line[] }] : [];
+    const afterSections = options.footer ? [{ lines: options.footer as Line[] }] : [];
+
+    const resolved = resolveScrollablePanelSection(width, height, {
+      palette,
+      beforeSections,
+      afterSections,
+      section: {
+        scrollableLines,
+        selectedIndex: this.selectedIndex,
+        scrollOffset: this.scrollStart,
+        guardRows: 1,
+        appendWindowSummary: scrollableLines.length > 5 ? { dimColor: palette.dim } : undefined,
+      },
+    });
+    this.scrollStart = resolved.scrollOffset;
+
+    const sections = [
+      ...beforeSections,
+      resolved.section,
+      ...afterSections,
+    ];
+
+    const lines = buildPanelWorkspace(width, height, {
+      title,
+      sections,
+      palette,
+    });
+    while (lines.length < height) lines.push(createEmptyLine(width));
+    return lines.slice(0, height);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// SearchableListPanel<T>
+// ---------------------------------------------------------------------------
+
+/**
+ * Extends `ScrollableListPanel<T>` with inline search/filter support.
+ *
+ * Subclasses implement:
+ *   - `getAllItems()` — the full (unfiltered) item list
+ *   - `matchesSearch(item, query)` — case-insensitive filter predicate
+ *
+ * `getItems()` is implemented here and returns filtered results. Do NOT
+ * override `getItems()` in subclasses — override `getAllItems()` instead.
+ *
+ * Search state:
+ *   - Printable characters append to `searchQuery`.
+ *   - Backspace/Delete removes the last character.
+ *   - Escape clears the query.
+ *   - Navigation keys (up/down/etc.) are forwarded to the parent.
+ *
+ * Render the search input line by calling `buildSearchInput(width)` from
+ * your panel's header builder.
+ */
+export abstract class SearchableListPanel<T> extends ScrollableListPanel<T> {
+  protected searchQuery = '';
+
+  private _filteredItems: readonly T[] = [];
+  private _filterDirty = true;
+
+  // -------------------------------------------------------------------------
+  // Abstract — subclasses must implement
+  // -------------------------------------------------------------------------
+
+  /** Return the full unfiltered item list. */
+  protected abstract getAllItems(): readonly T[];
+
+  /** Return true if `item` matches the search `query`. */
+  protected abstract matchesSearch(item: T, query: string): boolean;
+
+  // -------------------------------------------------------------------------
+  // getItems — returns filtered list (do NOT override in subclasses)
+  // -------------------------------------------------------------------------
+
+  protected getItems(): readonly T[] {
+    if (this._filterDirty) {
+      const all = this.getAllItems();
+      this._filteredItems = this.searchQuery
+        ? all.filter((item) => this.matchesSearch(item, this.searchQuery))
+        : all;
+      this._filterDirty = false;
+      // Clamp after filter to keep selection in bounds
+      this.clampSelection();
+    }
+    return this._filteredItems;
+  }
+
+  /**
+   * Mark the filter cache as stale.
+   * Call this whenever `getAllItems()` returns new data.
+   */
+  protected invalidateFilter(): void {
+    this._filterDirty = true;
+    this.needsRender = true;
+  }
+
+  // -------------------------------------------------------------------------
+  // Input — search first, navigation second
+  // -------------------------------------------------------------------------
+
+  handleInput(key: string): boolean {
+    // Backspace: trim query
+    if (isPanelSearchBackspace(key)) {
+      if (this.searchQuery.length > 0) {
+        this.searchQuery = this.searchQuery.slice(0, -1);
+        this._filterDirty = true;
+        this.needsRender = true;
+        return true;
+      }
+      return false;
+    }
+
+    // Escape: clear query
+    if (isPanelSearchCancel(key)) {
+      if (this.searchQuery.length > 0) {
+        this.searchQuery = '';
+        this._filterDirty = true;
+        this.needsRender = true;
+        return true;
+      }
+      return false;
+    }
+
+    // Printable characters: append to query
+    if (isPanelSearchPrintable(key)) {
+      this.searchQuery += key;
+      this._filterDirty = true;
+      this.needsRender = true;
+      return true;
+    }
+
+    // Navigation and Enter: delegate to parent
+    return super.handleInput(key);
+  }
+
+  /**
+   * Build the search input `Line` suitable for use in a panel header.
+   *
+   * Import `buildSearchInputLine` from `./polish.ts` and call it with
+   * `this.searchQuery`. Convenience wrapper:
+   *
+   * ```ts
+   * import { buildSearchInputLine } from './polish.ts';
+   *
+   * private buildHeader(width: number): Line[] {
+   *   return [buildSearchInputLine(width, 'Filter', this.searchQuery, this.getPalette(), {})];
+   * }
+   * ```
+   *
+   * 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.
+   */
+}

package/src/panels/services-panel.ts

@@ -5,7 +5,7 @@ import {
   type ServiceConfig,
   type ServiceInspection,
   type ServiceConnectionTestResult,
-} from '../config/service-registry.ts';
+} from '@pellux/goodvibes-sdk/platform/config/service-registry';
 import type { ServiceInspectionQuery, SubscriptionAccessQuery } from '../runtime/ui-service-queries.ts';
 import {
   buildEmptyState,

package/src/panels/subscription-panel.ts

@@ -2,7 +2,7 @@ import type { Line } from '../types/grid.ts';
 import { createEmptyLine } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
 import type { ProviderSubscription, PendingSubscriptionLogin } from '@pellux/goodvibes-sdk/platform/config/subscriptions';
-import { listBuiltinSubscriptionProviders } from '../config/subscription-providers.ts';
+import { listBuiltinSubscriptionProviders } from '@pellux/goodvibes-sdk/platform/config/subscription-providers';
 import type { ServiceInspectionQuery, SubscriptionAccessQuery } from '../runtime/ui-service-queries.ts';
 import {
   buildDetailBlock,

package/src/panels/worktree-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 { buildKeyValueLine, buildPanelLine, buildPanelWorkspace, DEFAULT_PANEL_PALETTE, resolvePrimaryScrollableSection, type PanelWorkspaceSection } from './polish.ts';
 import { summarizeWorktreeOwnership, type WorktreeRegistry, type WorktreeStatusRecord } from '@pellux/goodvibes-sdk/platform/runtime/worktree/registry';
 
@@ -22,10 +22,8 @@ function stateColor(state: WorktreeStatusRecord['state']): string {
   }
 }
 
-export class WorktreePanel extends BasePanel {
+export class WorktreePanel extends ScrollableListPanel<WorktreeStatusRecord> {
   private rows: WorktreeStatusRecord[] = [];
-  private selectedIndex = 0;
-  private scrollOffset = 0;
   private loading = false;
   private readonly worktreeRegistry: WorktreeRegistry;
 
@@ -45,18 +43,21 @@ export class WorktreePanel extends BasePanel {
       void this.refresh();
       return true;
     }
-    if (this.rows.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(this.rows.length - 1, this.selectedIndex + 1);
-      this.markDirty();
-      return true;
-    }
-    return false;
+    return super.handleInput(key);
+  }
+
+  protected getItems(): readonly WorktreeStatusRecord[] {
+    return this.rows;
+  }
+
+  protected renderItem(row: WorktreeStatusRecord, index: number, _selected: boolean, width: number): Line {
+    const bg = index === this.selectedIndex ? C.headerBg : undefined;
+    return buildPanelLine(width, [
+      [` ${row.kind}`.padEnd(14), C.info, bg],
+      [` ${row.state}`.padEnd(16), stateColor(row.state), bg],
+      [` ${row.branch}`.padEnd(24), C.value, bg],
+      [` ${row.path}`.slice(0, Math.max(0, width - 56)), C.dim, bg],
+    ]);
   }
 
   private async refresh(): Promise<void> {
@@ -64,7 +65,7 @@ export class WorktreePanel extends BasePanel {
     this.markDirty();
     try {
       this.rows = await this.worktreeRegistry.list();
-      this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, this.rows.length - 1));
+      this.clampSelection();
     } finally {
       this.loading = false;
       this.markDirty();
@@ -155,14 +156,14 @@ export class WorktreePanel extends BasePanel {
             ]);
           }),
           selectedIndex: this.selectedIndex,
-          scrollOffset: this.scrollOffset,
+          scrollOffset: this.scrollStart,
           guardRows: 1,
           minRows: 4,
           appendWindowSummary: { dimColor: C.dim },
         },
         afterSections: [detailSection],
       });
-      this.scrollOffset = resolvedWorktreesSection.scrollOffset;
+      this.scrollStart = resolvedWorktreesSection.scrollOffset;
       sections.push(resolvedWorktreesSection.section);
       sections.push(detailSection);
     }

package/src/renderer/qr-renderer.ts

@@ -0,0 +1,117 @@
+import type { Line } from '../types/grid.ts';
+import { createEmptyLine, createStyledCell } from '../types/grid.ts';
+import { getDisplayWidth } from '../utils/terminal-width.ts';
+import { generateQrMatrix } from '@pellux/goodvibes-sdk/platform/pairing/qr-generator';
+
+export { generateQrMatrix };
+
+/**
+ * Render a QR boolean matrix to terminal Lines using Unicode half-block characters.
+ *
+ * Two matrix rows map to one terminal row:
+ *   top=dark, bottom=dark  → '█'  (FULL BLOCK)
+ *   top=dark, bottom=light → '▀'  (UPPER HALF BLOCK)
+ *   top=light, bottom=dark → '▄'  (LOWER HALF BLOCK)
+ *   top=light, bottom=light → ' ' (SPACE)
+ *
+ * @param modules - 2D boolean matrix where true = dark module
+ * @param width   - Terminal width available for centering
+ * @param options - Optional fg/bg overrides
+ */
+export function renderQrMatrix(
+  modules: readonly boolean[][],
+  width: number,
+  options?: { fg?: string; bg?: string },
+): Line[] {
+  const fg = options?.fg ?? '#000000';
+  const bg = options?.bg ?? '#ffffff';
+
+  const rows = modules.length;
+  const cols = modules[0]?.length ?? 0;
+  if (rows === 0 || cols === 0) return [];
+
+  // Each terminal row covers two matrix rows
+  const terminalRows = Math.ceil(rows / 2);
+  // Left-align with a single-cell indent. Visually aligns with the text above
+  // the QR when rendered with half-block characters; bumping higher
+  // mis-registers the finder patterns by a visible unit.
+  const leftPad = 1;
+
+  const lines: Line[] = [];
+
+  // Prepend a single-row top quiet band of bg so the QR's first module row
+  // does not butt up against whatever chrome precedes it. Combined with the
+  // leftPad=1 on the horizontal axis, this keeps the finder-pattern square
+  // margin consistent on both axes.
+  {
+    const topBand = createEmptyLine(width);
+    const endCol = Math.min(leftPad + cols + 1, width);
+    for (let col = 0; col < endCol; col++) {
+      topBand[col] = createStyledCell(' ', { fg, bg });
+    }
+    lines.push(topBand);
+  }
+
+  for (let termRow = 0; termRow < terminalRows; termRow++) {
+    const matrixRowTop = termRow * 2;
+    const matrixRowBot = termRow * 2 + 1;
+    const topRow = modules[matrixRowTop];
+    const botRow = matrixRowBot < rows ? modules[matrixRowBot] : null;
+
+    const line = createEmptyLine(width);
+
+    // Fill leading padding with bg
+    for (let col = 0; col < leftPad && col < width; col++) {
+      line[col] = createStyledCell(' ', { fg, bg });
+    }
+
+    // Render QR columns
+    for (let col = 0; col < cols; col++) {
+      const termCol = leftPad + col;
+      if (termCol >= width) break;
+
+      const topDark = topRow ? (topRow[col] ?? false) : false;
+      const botDark = botRow ? (botRow[col] ?? false) : false;
+
+      let char: string;
+      let cellFg: string;
+      let cellBg: string;
+
+      if (topDark && botDark) {
+        char = '█';
+        cellFg = fg;
+        cellBg = bg;
+      } else if (topDark && !botDark) {
+        char = '▀';
+        cellFg = fg;
+        cellBg = bg;
+      } else if (!topDark && botDark) {
+        char = '▄';
+        cellFg = fg;
+        cellBg = bg;
+      } else {
+        char = ' ';
+        cellFg = fg;
+        cellBg = bg;
+      }
+
+      // Some terminals may not render block chars at full width — guard
+      const charWidth = getDisplayWidth(char);
+      if (charWidth <= 0) {
+        line[termCol] = createStyledCell(' ', { fg: cellFg, bg: cellBg });
+      } else {
+        line[termCol] = createStyledCell(char, { fg: cellFg, bg: cellBg });
+      }
+    }
+
+    // Fill trailing with bg up to end of QR block
+    for (let col = leftPad + cols; col < leftPad + cols + 1 && col < width; col++) {
+      line[col] = createStyledCell(' ', { fg, bg });
+    }
+
+    lines.push(line);
+  }
+
+  return lines;
+}
+