@pellux/goodvibes-tui 0.18.13 → 0.18.18

package/src/panels/agent-logs-panel.ts

@@ -1,7 +1,7 @@
 import { readFileSync, existsSync, watch, type FSWatcher } from 'fs';
 import type { Line } from '../types/grid.ts';
 import { createEmptyLine, createStyledCell } from '../types/grid.ts';
-import { BasePanel } from './base-panel.ts';
+import { ScrollableListPanel } from './scrollable-list-panel.ts';
 import type { AgentManager, AgentRecord } from '@pellux/goodvibes-sdk/platform/tools/agent/index';
 import type { AgentEvent } from '@pellux/goodvibes-sdk/platform/runtime/events/index';
 import type { UiEventFeed } from '../runtime/ui-events.ts';
@@ -38,7 +38,7 @@ export interface AgentLogsPanelDeps {
 // AgentLogsPanel
 // ---------------------------------------------------------------------------
 
-export class AgentLogsPanel extends BasePanel {
+export class AgentLogsPanel extends ScrollableListPanel<LogEntry> {
   // ── Agent state ─────────────────────────────────────────────────────────
   private agents: AgentRecord[] = [];
   private selectedAgentIndex = 0;
@@ -47,7 +47,6 @@ export class AgentLogsPanel extends BasePanel {
   private allEntries: LogEntry[] = []; // raw parsed JSONL for selected agent
   private filteredEntries: LogEntry[] = []; // after filter applied
   private lastFileSize = 0;
-  private scrollOffset = 0;
 
   // ── Modes ────────────────────────────────────────────────────────────────
   private autoFollow = true;
@@ -68,6 +67,16 @@ export class AgentLogsPanel extends BasePanel {
     this._subscribeEvents();
   }
 
+  // ── ScrollableListPanel<LogEntry> contract ────────────────────────────────
+
+  protected getItems(): readonly LogEntry[] {
+    return this.filteredEntries;
+  }
+
+  protected renderItem(entry: LogEntry, _index: number, _selected: boolean, width: number): Line {
+    return this._renderEntry(entry, width);
+  }
+
   // ── Lifecycle ─────────────────────────────────────────────────────────────
 
   override onActivate(): void {
@@ -100,7 +109,7 @@ export class AgentLogsPanel extends BasePanel {
         this._cycleFilter();
         return true;
       case 'g': // g — jump to top
-        this.scrollOffset = 0;
+        this.selectedIndex = 0;
         this.autoFollow = false;
         this.markDirty();
         return true;
@@ -109,19 +118,8 @@ export class AgentLogsPanel extends BasePanel {
         this._clampScroll();
         this.markDirty();
         return true;
-      case 'k': // k / up
-      case '\x1b[A':
-        this.autoFollow = false;
-        this.scrollOffset = Math.max(0, this.scrollOffset - 1);
-        this.markDirty();
-        return true;
-      case 'j': // j / down
-      case '\x1b[B':
-        this.scrollOffset++;
-        this.markDirty();
-        return true;
       default:
-        return false;
+        return super.handleInput(key);
     }
   }
 
@@ -205,7 +203,7 @@ export class AgentLogsPanel extends BasePanel {
 
     const focusIndex = this.autoFollow
       ? Math.max(0, this.filteredEntries.length - 1)
-      : Math.min(this.scrollOffset, Math.max(0, this.filteredEntries.length - 1));
+      : Math.min(this.selectedIndex, Math.max(0, this.filteredEntries.length - 1));
     const summarySection = { title: 'Summary', lines: summaryLines } as const;
     const agentsSection = { title: 'Agents', lines: [selectorLine] } as const;
     const logStreamSection = resolveScrollablePanelSection(width, height, {
@@ -217,11 +215,11 @@ export class AgentLogsPanel extends BasePanel {
         title: 'Log Stream',
         scrollableLines: this.filteredEntries.map((entry) => this._renderEntry(entry, width)),
         selectedIndex: focusIndex,
-        scrollOffset: this.scrollOffset,
+        scrollOffset: this.scrollStart,
         minRows: 8,
       },
     });
-    this.scrollOffset = logStreamSection.scrollOffset;
+    this.scrollStart = logStreamSection.scrollOffset;
 
     return buildPanelWorkspace(width, height, {
       title: ' Agents',
@@ -273,7 +271,7 @@ export class AgentLogsPanel extends BasePanel {
       this.allEntries = parseAgentJsonl(content);
       this._applyFilter();
       if (this.autoFollow) {
-        this.scrollOffset = Math.max(0, this.filteredEntries.length - 1);
+        this.selectedIndex = Math.max(0, this.filteredEntries.length - 1);
       }
       this.markDirty();
     } catch {
@@ -373,7 +371,8 @@ export class AgentLogsPanel extends BasePanel {
     this.allEntries = [];
     this.filteredEntries = [];
     this.lastFileSize = 0;
-    this.scrollOffset = 0;
+    this.selectedIndex = 0;
+    this.scrollStart = 0;
     this.autoFollow = true;
     const agent = this._selectedAgent();
     if (agent) {
@@ -406,7 +405,7 @@ export class AgentLogsPanel extends BasePanel {
       this.allEntries = parseAgentJsonl(content);
       this._applyFilter();
       if (this.autoFollow) {
-        this.scrollOffset = Math.max(0, this.filteredEntries.length - 1);
+        this.selectedIndex = Math.max(0, this.filteredEntries.length - 1);
       }
     } catch {
       this.allEntries = [];
@@ -438,7 +437,7 @@ export class AgentLogsPanel extends BasePanel {
     this.filter = FILTER_CYCLE[(idx + 1) % FILTER_CYCLE.length]!;
     this._applyFilter();
     if (this.autoFollow) {
-      this.scrollOffset = Math.max(0, this.filteredEntries.length - 1);
+      this.selectedIndex = Math.max(0, this.filteredEntries.length - 1);
     }
     this.markDirty();
   }
@@ -449,7 +448,7 @@ export class AgentLogsPanel extends BasePanel {
   }
 
   private _clampScroll(): void {
-    this.scrollOffset = Math.min(this.scrollOffset, Math.max(0, this.filteredEntries.length - 1));
+    this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, this.filteredEntries.length - 1));
   }
 
   // ── Private: rendering helpers ─────────────────────────────────────────────

package/src/panels/base-panel.ts

@@ -40,6 +40,12 @@ export abstract class BasePanel implements Panel {
 
   abstract render(width: number, height: number): Line[];
 
+  /** R2: Mark this panel dirty — it will be re-rendered on the next compositor frame. */
+  public invalidate(): void { this.needsRender = true; }
+
+  /** R2: Called by the compositor after a successful render to clear the dirty flag. */
+  public markRendered(): void { this.needsRender = false; }
+
   protected markDirty(): void { this.needsRender = true; }
 
   /**

package/src/panels/builtin/session.ts

@@ -1,12 +1,78 @@
+import { networkInterfaces } from 'node:os';
+import { readFileSync } from 'node:fs';
 import type { PanelManager } from '../panel-manager.ts';
 import { SessionBrowserPanel } from '../session-browser-panel.ts';
+import { QrPanel } from '../qr-panel.ts';
 import { DocsPanel } from '../docs-panel.ts';
 import { PanelListPanel } from '../panel-list-panel.ts';
 import { TokenBudgetPanel } from '../token-budget-panel.ts';
 import type { ResolvedBuiltinPanelDeps } from './shared.ts';
 import { requireUiServices } from './shared.ts';
+import {
+  getOrCreateCompanionToken,
+  regenerateCompanionToken,
+  buildCompanionConnectionInfo,
+} from '@pellux/goodvibes-sdk/platform/pairing/index';
+import { copyToClipboard } from '../../utils/clipboard.ts';
+
+function getLocalNetworkIp(): string {
+  const nets = networkInterfaces();
+  for (const name of Object.keys(nets)) {
+    for (const net of nets[name] ?? []) {
+      if (net.family === 'IPv4' && !net.internal) {
+        return net.address;
+      }
+    }
+  }
+  return 'localhost';
+}
+
+function readBootstrapPassword(credentialPath: string): string | undefined {
+  try {
+    const content = readFileSync(credentialPath, 'utf-8');
+    for (const line of content.split('\n')) {
+      if (line.startsWith('password=')) {
+        return line.slice('password='.length).trim();
+      }
+    }
+  } catch {
+    // credential file may not exist yet
+  }
+  return undefined;
+}
 
 export function registerSessionPanels(manager: PanelManager, deps: ResolvedBuiltinPanelDeps): void {
+  manager.registerType({
+    id: 'qr-code',
+    name: 'QR Code',
+    icon: 'Q',
+    category: 'session',
+    description: 'QR code for companion app pairing — scan to connect a mobile or desktop companion',
+    factory: () => {
+      const tokenRecord = getOrCreateCompanionToken('tui');
+      const daemonPort = deps.configManager.get('controlPlane.port');
+      const daemonHost = String(process.env['GOODVIBES_DAEMON_HOST'] ?? getLocalNetworkIp());
+      const daemonUrl = `http://${daemonHost}:${daemonPort}`;
+      const bootstrapPassword = readBootstrapPassword(deps.localUserAuthManager.getBootstrapCredentialPath());
+      const connectionInfo = buildCompanionConnectionInfo({
+        daemonUrl,
+        token: tokenRecord.token,
+        password: bootstrapPassword,
+        surface: 'tui',
+      });
+      const regenerate = (): typeof connectionInfo => {
+        const newRecord = regenerateCompanionToken('tui');
+        return buildCompanionConnectionInfo({
+          daemonUrl,
+          token: newRecord.token,
+          password: bootstrapPassword,
+          surface: 'tui',
+        });
+      };
+      return new QrPanel(connectionInfo, regenerate, copyToClipboard);
+    },
+  });
+
   manager.registerType({
     id: 'sessions',
     name: 'Sessions',

package/src/panels/builtin/shared.ts

@@ -1,5 +1,5 @@
 import type { ConfigManager } from '@pellux/goodvibes-sdk/platform/config/manager';
-import type { ServiceRegistry } from '../../config/service-registry.ts';
+import type { ServiceRegistry } from '@pellux/goodvibes-sdk/platform/config/service-registry';
 import type { ToolRegistry } from '@pellux/goodvibes-sdk/platform/tools/registry';
 import type { ProviderRegistry } from '@pellux/goodvibes-sdk/platform/providers/registry';
 import type { Orchestrator } from '../../core/orchestrator';

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 '../types/grid.ts';
 import { createEmptyLine } from '../types/grid.ts';
-import { BasePanel } from './base-panel.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/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;
+  }
+}