@pellux/goodvibes-tui 0.18.12 → 0.18.17

package/src/panels/memory-panel.ts

@@ -2,7 +2,7 @@
  * MemoryPanel — project memory substrate TUI panel.
  */
 
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+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';

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

@@ -7,13 +7,13 @@
  * Requires the `operator-control-plane` feature flag to be enabled.
  * Open via Ctrl+O keybind or `/ops view` command.
  */
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line } from '../types/grid.ts';
 import type { OpsEvent } from '@pellux/goodvibes-sdk/platform/runtime/events/index';
-import type { UiEventFeed } from '@pellux/goodvibes-sdk/platform/runtime/ui-events';
+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 '@pellux/goodvibes-sdk/platform/types/grid';
+import { createEmptyLine } from '../types/grid.ts';
 import {
   buildEmptyState,
   buildPanelLine,

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

@@ -8,10 +8,10 @@
  */
 
 import { BasePanel } from './base-panel.ts';
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line } from '../types/grid.ts';
 import type { PlannerDecision, ExecutionStrategy } from '@pellux/goodvibes-sdk/platform/core/adaptive-planner';
 import type { PlannerEvent } from '@pellux/goodvibes-sdk/platform/runtime/events/index';
-import type { UiEventFeed } from '@pellux/goodvibes-sdk/platform/runtime/ui-events';
+import type { UiEventFeed } from '../runtime/ui-events.ts';
 import type { OpsStrategyQuery } from '../runtime/ui-service-queries.ts';
 import {
   buildEmptyState,

package/src/panels/orchestration-panel.ts

@@ -1,5 +1,5 @@
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
-import { createEmptyLine } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line } from '../types/grid.ts';
+import { createEmptyLine } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
 import type { UiOrchestrationSnapshot, UiReadModel } from '../runtime/ui-read-models.ts';
 import {

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

@@ -12,12 +12,12 @@
  *
  * Open via /panel list.
  */
-import type { Line, Cell } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line, Cell } from '../types/grid.ts';
 import type { PanelCategory, PanelRegistration } from './types.ts';
 import { BasePanel } from './base-panel.ts';
 import type { PanelManager } from './panel-manager.ts';
-import type { PanelHealthMonitor } from '@pellux/goodvibes-sdk/platform/runtime/perf/panel-health-monitor';
-import { createEmptyLine } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { ComponentHealthMonitor } from '../runtime/perf/panel-health-monitor.ts';
+import { createEmptyLine } from '../types/grid.ts';
 import {
   buildEmptyState,
   buildKeyValueLine,
@@ -30,7 +30,7 @@ import {
   resolvePrimaryScrollableSection,
   type PanelWorkspaceSection,
 } from './polish.ts';
-import { truncateDisplay } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+import { truncateDisplay } from '../utils/terminal-width.ts';
 import { wrapWithHangingIndent } from '../renderer/text-layout.ts';
 import {
   getPanelSearchFocusTransition,
@@ -112,9 +112,9 @@ export class PanelListPanel extends BasePanel {
 
   public constructor(
     private readonly panelManager: PanelManager,
-    panelHealthMonitor?: PanelHealthMonitor,
+    componentHealthMonitor?: ComponentHealthMonitor,
   ) {
-    super('panel-list', 'Panel List', 'L', 'session', panelHealthMonitor);
+    super('panel-list', 'Panel List', 'L', 'session', componentHealthMonitor);
   }
 
   public override onActivate(): void {

package/src/panels/plan-dashboard-panel.ts

@@ -1,4 +1,4 @@
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line } from '../types/grid.ts';
 import type { ExecutionPlan, PlanItem, PlanItemStatus } from '@pellux/goodvibes-sdk/platform/core/execution-plan';
 import { BasePanel } from './base-panel.ts';
 import type { PlanDashboardQuery } from '../runtime/ui-service-queries.ts';

package/src/panels/plugins-panel.ts

@@ -1,5 +1,5 @@
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
-import { createEmptyLine } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line } from '../types/grid.ts';
+import { createEmptyLine } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
 import type { PluginManagerObserver, PluginStatus } from '@pellux/goodvibes-sdk/platform/plugins/manager';
 import {

package/src/panels/policy-panel.ts

@@ -1,5 +1,5 @@
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
-import { createEmptyLine } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line } from '../types/grid.ts';
+import { createEmptyLine } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
 import type { PolicyRuntimeState } from '@pellux/goodvibes-sdk/platform/runtime/permissions/policy-runtime';
 import type { PolicyPanelSnapshot } from '../runtime/diagnostics/panels/policy.ts';

package/src/panels/polish.ts

@@ -1,6 +1,6 @@
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
-import { createEmptyLine, createStyledCell } from '@pellux/goodvibes-sdk/platform/types/grid';
-import { getDisplayWidth, wrapText } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+import type { Line } from '../types/grid.ts';
+import { createEmptyLine, createStyledCell } from '../types/grid.ts';
+import { getDisplayWidth, wrapText } from '../utils/terminal-width.ts';
 import { getSurfaceContentRows, getTrackedVisibleWindow, getVisibleWindow, type VisibleWindow } from '../renderer/surface-layout.ts';
 import { GLYPHS, UI_TONES } from '../renderer/ui-primitives.ts';
 

package/src/panels/provider-account-snapshot.ts

@@ -1,4 +1,4 @@
-import { listBuiltinSubscriptionProviders } from '../config/subscription-providers.ts';
+import { listBuiltinSubscriptionProviders } from '@pellux/goodvibes-sdk/platform/config/subscription-providers';
 import type {
   ProviderAccountInspectionQuery,
 } from '../runtime/ui-service-queries.ts';

package/src/panels/provider-accounts-panel.ts

@@ -1,6 +1,6 @@
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
-import { createEmptyLine } from '@pellux/goodvibes-sdk/platform/types/grid';
-import { BasePanel } from './base-panel.ts';
+import type { Line } from '../types/grid.ts';
+import { createEmptyLine } from '../types/grid.ts';
+import { ScrollableListPanel } from './scrollable-list-panel.ts';
 import {
   buildDetailBlock,
   buildEmptyState,
@@ -29,11 +29,9 @@ const C = {
   selectBg: '#1e293b',
 } as const;
 
-export class ProviderAccountsPanel extends BasePanel {
+export class ProviderAccountsPanel extends ScrollableListPanel<ProviderAccountRecord> {
   private records: ProviderAccountRecord[] = [];
   private loading = false;
-  private selectedIndex = 0;
-  private scrollOffset = 0;
   private readonly providerAccounts: ProviderAccountSnapshotQuery;
 
   public constructor(deps: ProviderAccountsPanelDeps) {
@@ -47,22 +45,26 @@ export class ProviderAccountsPanel extends BasePanel {
     if (!this.loading) void this.refresh();
   }
 
+  protected getItems(): readonly ProviderAccountRecord[] {
+    return this.records;
+  }
+
+  protected renderItem(item: ProviderAccountRecord, _index: number, selected: boolean, width: number): Line {
+    return buildPanelListRow(width, [
+      { text: item.providerId.padEnd(16), fg: item.active ? C.good : C.value },
+      { text: ` ${item.activeRoute.padEnd(14)}`, fg: item.activeRoute === 'subscription' ? C.info : item.activeRoute === 'api-key' ? C.warn : item.activeRoute === 'service-oauth' ? C.value : C.dim },
+      { text: ` models=${String(item.modelCount).padEnd(4)}`, fg: C.dim },
+      { text: ` ${item.authFreshness.padEnd(10)}`, fg: item.authFreshness === 'expired' ? C.bad : item.authFreshness === 'expiring' || item.authFreshness === 'pending' ? C.warn : C.dim },
+      { text: ` issues=${String(item.issues.length).padEnd(2)}`, fg: item.issues.length > 0 ? C.bad : C.good },
+    ], C, { selected });
+  }
+
   public handleInput(key: string): boolean {
     if (key === 'r') {
       void this.refresh();
       return true;
     }
-    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(Math.max(0, this.records.length - 1), this.selectedIndex + 1);
-      this.markDirty();
-      return true;
-    }
-    return false;
+    return super.handleInput(key);
   }
 
   private async refresh(): Promise<void> {
@@ -70,7 +72,7 @@ export class ProviderAccountsPanel extends BasePanel {
     this.markDirty();
     const snapshot = await this.buildSnapshot();
     this.records = [...snapshot.providers];
-    this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, this.records.length - 1));
+    this.clampSelection();
     this.loading = false;
     this.markDirty();
   }
@@ -177,15 +179,9 @@ export class ProviderAccountsPanel extends BasePanel {
     }
     const postureSection: PanelWorkspaceSection = { lines: buildSummaryBlock(width, 'Provider posture', postureLines, C) };
     const detailsSection: PanelWorkspaceSection = { lines: buildDetailBlock(width, 'Selected provider', detailRows, C) };
-    const rawProviderLines: Line[] = this.records.map((record, absolute) => {
-      return buildPanelListRow(width, [
-        { text: record.providerId.padEnd(16), fg: record.active ? C.good : C.value },
-        { text: ` ${record.activeRoute.padEnd(14)}`, fg: record.activeRoute === 'subscription' ? C.info : record.activeRoute === 'api-key' ? C.warn : record.activeRoute === 'service-oauth' ? C.value : C.dim },
-        { text: ` models=${String(record.modelCount).padEnd(4)}`, fg: C.dim },
-        { text: ` ${record.authFreshness.padEnd(10)}`, fg: record.authFreshness === 'expired' ? C.bad : record.authFreshness === 'expiring' || record.authFreshness === 'pending' ? C.warn : C.dim },
-        { text: ` issues=${String(record.issues.length).padEnd(2)}`, fg: record.issues.length > 0 ? C.bad : C.good },
-      ], C, { selected: absolute === this.selectedIndex });
-    });
+    const rawProviderLines: Line[] = this.records.map((record, absolute) =>
+      this.renderItem(record, absolute, absolute === this.selectedIndex, width),
+    );
     const resolvedProvidersSection = resolvePrimaryScrollableSection(width, height, {
       intro,
       footerLines,
@@ -195,14 +191,14 @@ export class ProviderAccountsPanel extends BasePanel {
         title: 'Providers',
         scrollableLines: rawProviderLines,
         selectedIndex: this.selectedIndex,
-        scrollOffset: this.scrollOffset,
+        scrollOffset: this.scrollStart,
         guardRows: 1,
         minRows: 4,
         appendWindowSummary: { dimColor: C.dim },
       },
       afterSections: [detailsSection],
     });
-    this.scrollOffset = resolvedProvidersSection.scrollOffset;
+    this.scrollStart = resolvedProvidersSection.scrollOffset;
     const sections: PanelWorkspaceSection[] = [
       postureSection,
       resolvedProvidersSection.section,

package/src/panels/provider-health-panel.ts

@@ -1,9 +1,9 @@
 import type { ConfigManager } from '@pellux/goodvibes-sdk/platform/config/manager';
 import { BasePanel } from './base-panel.ts';
-import { createEmptyLine, createStyledCell, type Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import { createEmptyLine, createStyledCell, type Line } from '../types/grid.ts';
 import type { ProviderAuthRouteDescriptor } from '@pellux/goodvibes-sdk/platform/providers/interface';
 import type { ProviderEvent, TurnEvent } from '@pellux/goodvibes-sdk/platform/runtime/events/index';
-import type { UiEventFeed } from '@pellux/goodvibes-sdk/platform/runtime/ui-events';
+import type { UiEventFeed } from '../runtime/ui-events.ts';
 import {
   type ProviderRuntimeInspectionQuery,
 } from '../runtime/ui-service-queries.ts';

package/src/panels/provider-stats-panel.ts

@@ -1,7 +1,7 @@
 import { BasePanel } from './base-panel.ts';
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line } from '../types/grid.ts';
 import type { ProviderEvent, TurnEvent } from '@pellux/goodvibes-sdk/platform/runtime/events/index';
-import type { UiEventFeed } from '@pellux/goodvibes-sdk/platform/runtime/ui-events';
+import type { UiEventFeed } from '../runtime/ui-events.ts';
 import type { UiProvidersSnapshot, UiReadModel } from '../runtime/ui-read-models.ts';
 import {
   buildEmptyState,
@@ -11,7 +11,7 @@ import {
   DEFAULT_PANEL_PALETTE,
   type PanelWorkspaceSection,
 } from './polish.ts';
-import { truncateDisplay } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+import { truncateDisplay } from '../utils/terminal-width.ts';
 
 // ---------------------------------------------------------------------------
 // Constants

package/src/panels/qr-panel.ts

@@ -0,0 +1,182 @@
+import type { Line } from '../types/grid.ts';
+import { createEmptyLine } from '../types/grid.ts';
+import { BasePanel } from './base-panel.ts';
+import {
+  buildPanelLine,
+  DEFAULT_PANEL_PALETTE,
+} from './polish.ts';
+import { renderQrMatrix, generateQrMatrix } from '../renderer/qr-renderer.ts';
+import { encodeConnectionPayload } from '@pellux/goodvibes-sdk/platform/pairing/index';
+
+const C = {
+  ...DEFAULT_PANEL_PALETTE,
+  url: '#38bdf8',
+  token: '#a78bfa',
+  hint: '#64748b',
+  qrFg: '#000000',
+  qrBg: '#ffffff',
+} as const;
+
+/**
+ * Connection info passed to the QR panel.
+ * Populated at construction; updated when the token is regenerated.
+ */
+export interface QrPanelConnectionInfo {
+  /** Full connection URL (e.g. http://192.168.1.x:3141) */
+  readonly url: string;
+  /** Auth token */
+  readonly token: string;
+  /** Username associated with the companion session */
+  readonly username: string;
+  /** Bootstrap password for companion authentication */
+  readonly password?: string;
+  /** SDK/surface version (defaults to '0.0.0' if omitted) */
+  readonly version?: string;
+  /** Surface identifier (defaults to 'tui' if omitted) */
+  readonly surface?: string;
+}
+
+/**
+ * Callback used by the panel to regenerate the companion token.
+ * Returns updated connection info.
+ */
+export type RegenerateTokenFn = () => QrPanelConnectionInfo;
+
+/**
+ * Callback used by the panel to copy text to the clipboard.
+ */
+export type CopyToClipboardFn = (text: string) => void;
+
+/**
+ * QrPanel - displays a QR code for companion app pairing.
+ *
+ * Shows connection URL, truncated token, and username above the QR code.
+ * Supports `r` to regenerate the token and `c` to copy the token.
+ *
+ * QR matrix generation uses the SDK's `generateQrMatrix` via `encodeConnectionPayload`.
+ */
+export class QrPanel extends BasePanel {
+  private connectionInfo: QrPanelConnectionInfo;
+  private readonly regenerateToken: RegenerateTokenFn | undefined;
+  private readonly copyToClipboard: CopyToClipboardFn | undefined;
+  private lastStatus = '';
+
+  public constructor(
+    connectionInfo: QrPanelConnectionInfo,
+    regenerateToken?: RegenerateTokenFn,
+    copyToClipboard?: CopyToClipboardFn,
+  ) {
+    super('qr-code', 'QR Code', 'Q', 'session');
+    this.connectionInfo = connectionInfo;
+    this.regenerateToken = regenerateToken;
+    this.copyToClipboard = copyToClipboard;
+  }
+
+  public handleInput(key: string): boolean {
+    if (key === 'r') {
+      if (this.regenerateToken) {
+        this.connectionInfo = this.regenerateToken();
+        this.lastStatus = 'Token regenerated.';
+      } else {
+        this.lastStatus = 'Regeneration not available.';
+      }
+      this.markDirty();
+      return true;
+    }
+    if (key === 'c') {
+      if (this.copyToClipboard) {
+        this.copyToClipboard(this.connectionInfo.token);
+        this.lastStatus = 'Token copied to clipboard.';
+      } else {
+        this.lastStatus = 'Clipboard not available.';
+      }
+      this.markDirty();
+      return true;
+    }
+    return false;
+  }
+
+  public render(width: number, height: number): Line[] {
+    this.needsRender = false;
+    const lines: Line[] = [];
+
+    const { url, token, username, password } = this.connectionInfo;
+
+    // ── Connection info header ─────────────────────────────────────────────
+    lines.push(createEmptyLine(width));
+    lines.push(
+      buildPanelLine(width, [
+        [' URL      ', C.label],
+        [url.slice(0, Math.max(0, width - 12)), C.url],
+      ]),
+    );
+    lines.push(
+      buildPanelLine(width, [
+        [' Token    ', C.label],
+        [token, C.token],
+      ]),
+    );
+    lines.push(
+      buildPanelLine(width, [
+        [' Username ', C.label],
+        [username.slice(0, Math.max(0, width - 12)), C.value],
+      ]),
+    );
+    if (password !== undefined) {
+      lines.push(
+        buildPanelLine(width, [
+          [' Password ', C.label],
+          [password, C.value],
+        ]),
+      );
+    }
+    lines.push(createEmptyLine(width));
+
+    // ── QR code ────────────────────────────────────────────────────────────
+    const payload = encodeConnectionPayload({
+      url: this.connectionInfo.url,
+      token: this.connectionInfo.token,
+      username: this.connectionInfo.username,
+      ...(this.connectionInfo.password !== undefined ? { password: this.connectionInfo.password } : {}),
+      version: this.connectionInfo.version ?? '0.0.0',
+      surface: this.connectionInfo.surface ?? 'tui',
+    });
+    const matrix = generateQrMatrix(payload);
+    const qrLines = renderQrMatrix(matrix.modules, width, { fg: C.qrFg, bg: C.qrBg });
+    for (const qrLine of qrLines) {
+      lines.push(qrLine);
+    }
+
+    lines.push(createEmptyLine(width));
+
+    // ── Status message (ephemeral) ─────────────────────────────────────────
+    if (this.lastStatus) {
+      lines.push(
+        buildPanelLine(width, [
+          [` ${this.lastStatus} `, C.hint],
+        ]),
+      );
+    }
+
+    // ── Hints ──────────────────────────────────────────────────────────────
+    const hintsLine = buildPanelLine(width, [
+      [' r ', C.hint],
+      ['regenerate  ', C.dim],
+      [' c ', C.hint],
+      ['copy token', C.dim],
+    ]);
+
+    // Push hints at the bottom if we have room, otherwise append after QR
+    const remaining = height - lines.length;
+    if (remaining > 2) {
+      // Fill with empty lines to push hints toward bottom
+      const fillCount = Math.max(0, remaining - 2);
+      for (let i = 0; i < fillCount; i++) {
+        lines.push(createEmptyLine(width));
+      }
+    }
+    lines.push(hintsLine);
+
+    return lines;
+  }
+}

package/src/panels/remote-panel.ts

@@ -1,5 +1,5 @@
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
-import { createEmptyLine } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line } from '../types/grid.ts';
+import { createEmptyLine } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
 import type { UiReadModel, UiRemoteSnapshot } from '../runtime/ui-read-models.ts';
 import {
@@ -14,7 +14,7 @@ import {
   resolvePrimaryScrollableSection,
   type PanelWorkspaceSection,
 } from './polish.ts';
-import { truncateDisplay } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+import { truncateDisplay } from '../utils/terminal-width.ts';
 import { getTrackedVisibleWindow } from '../renderer/surface-layout.ts';
 
 const C = {

package/src/panels/routes-panel.ts

@@ -1,8 +1,8 @@
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
-import { createEmptyLine } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line } from '../types/grid.ts';
+import { createEmptyLine } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
 import type { UiReadModel, UiRoutesSnapshot } from '../runtime/ui-read-models.ts';
-import { truncateDisplay } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+import { truncateDisplay } from '../utils/terminal-width.ts';
 import {
   buildEmptyState,
   buildGuidanceLine,

package/src/panels/sandbox-panel.ts

@@ -1,5 +1,5 @@
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
-import { createEmptyLine } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line } from '../types/grid.ts';
+import { createEmptyLine } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
 import { ConfigManager } from '@pellux/goodvibes-sdk/platform/config/manager';
 import { buildSandboxReview, listSandboxPresets, listSandboxProfiles } from '@pellux/goodvibes-sdk/platform/runtime/sandbox/manager';

package/src/panels/schedule-panel.ts

@@ -1,5 +1,5 @@
 import { BasePanel } from './base-panel.ts';
-import { type Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import { type Line } from '../types/grid.ts';
 import type { AutomationManager } from '@pellux/goodvibes-sdk/platform/automation/index';
 import type { AutomationJob } from '@pellux/goodvibes-sdk/platform/automation/jobs';
 import type { AutomationRun } from '@pellux/goodvibes-sdk/platform/automation/runs';