@pellux/goodvibes-tui 0.18.13 → 0.18.18

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;
+}
+

package/src/renderer/settings-modal-helpers.ts

@@ -0,0 +1,122 @@
+/**
+ * Pure formatting, label, and color helpers for renderSettingsModal.
+ * Extracted from settings-modal.ts to keep the renderer under the 800-line
+ * architecture cap. No layout logic lives here.
+ */
+
+import type { SettingEntry, McpEntry, SubscriptionEntry } from '../input/settings-modal.ts';
+import { SETTINGS_CATEGORIES } from '../input/settings-modal.ts';
+
+export function formatValue(entry: SettingEntry): string {
+  const val = entry.currentValue;
+  if (val === null || val === undefined) return '(unset)';
+  if (typeof val === 'boolean') return val ? 'true' : 'false';
+  if (typeof val === 'string' && val === '') return '(empty)';
+  return String(val);
+}
+
+export function valueColor(entry: SettingEntry): string {
+  if (!entry.isDefault) return '#00ffcc'; // cyan-green = modified
+  return '244';                            // dim = default
+}
+
+export function flagStateColor(state: string, killed: boolean): string {
+  if (killed) return '#ef4444'; // red
+  if (state === 'enabled') return '#00ffcc'; // cyan-green
+  return '244'; // dim
+}
+
+export function mcpTrustColor(mode: McpEntry['trustMode']): string {
+  switch (mode) {
+    case 'allow-all':
+      return '#ef4444';
+    case 'ask-on-risk':
+      return '#eab308';
+    case 'constrained':
+      return '#00ffcc';
+    case 'blocked':
+      return '244';
+    default:
+      return '244';
+  }
+}
+
+export function subscriptionStateColor(state: SubscriptionEntry['state']): string {
+  switch (state) {
+    case 'active':
+      return '#00ffcc';
+    case 'pending':
+      return '#eab308';
+    case 'available':
+      return '#38bdf8';
+    default:
+      return '244';
+  }
+}
+
+export function inferSubscriptionRouteReason(entry: SubscriptionEntry): string | undefined {
+  if (entry.routeReason?.trim()) return entry.routeReason;
+  if (entry.state === 'active' && entry.oauthConfigured) {
+    return 'ambient key override enabled for this provider.';
+  }
+  if (entry.state === 'pending' && entry.oauthConfigured) {
+    return 'oauth configuration present; ambient key override will apply after activation.';
+  }
+  return undefined;
+}
+
+export const CATEGORY_LABELS: Record<(typeof SETTINGS_CATEGORIES)[number], string> = {
+  display: 'Display',
+  ui: 'UI',
+  provider: 'Provider',
+  subscriptions: 'Subscriptions',
+  behavior: 'Behavior',
+  storage: 'Storage',
+  permissions: 'Permissions',
+  mcp: 'MCP',
+  sandbox: 'Sandbox',
+  danger: 'Danger',
+  tools: 'Tools',
+  flags: 'Flags',
+};
+
+export const SETTING_LABELS: Partial<Record<string, string>> = {
+  'ui.systemMessages': 'System Message Target',
+  'ui.operationalMessages': 'Operational Message Target',
+  'ui.wrfcMessages': 'WRFC Message Target',
+  'ui.voiceEnabled': 'Voice Surface',
+  'behavior.autoCompactThreshold': 'Auto-Compact %',
+  'behavior.staleContextWarnings': 'Context Warnings',
+  'behavior.returnContextMode': 'Return Context',
+  'behavior.guidanceMode': 'Guidance Mode',
+  'storage.secretPolicy': 'Secret Policy',
+  'sandbox.vmBackend': 'Sandbox Backend',
+  'sandbox.qemuBinary': 'QEMU Binary',
+  'sandbox.qemuImagePath': 'QEMU Image',
+  'sandbox.qemuExecWrapper': 'QEMU Wrapper',
+  'tools.llmProvider': 'Tool LLM Provider',
+  'tools.llmModel': 'Tool LLM Model',
+  'tools.autoHeal': 'Auto-Heal',
+  'tools.defaultTokenBudget': 'Default Token Budget',
+  'tools.hooksFile': 'Hooks File',
+  'helper.enabled': 'Helper Enabled',
+  'helper.globalProvider': 'Helper Provider',
+  'helper.globalModel': 'Helper Model',
+};
+
+export function getSettingLabel(entry: SettingEntry): string {
+  return SETTING_LABELS[entry.setting.key] ?? entry.setting.key.replace(/^[^.]+\./, '');
+}
+
+export function describeUiRouting(value: string): string {
+  switch (value) {
+    case 'panel':
+      return 'render in panels only';
+    case 'conversation':
+      return 'render inline in conversation';
+    case 'both':
+      return 'render in both conversation and panels';
+    default:
+      return value;
+  }
+}

package/src/renderer/settings-modal.ts

@@ -17,116 +17,17 @@ import { SETTINGS_CATEGORIES } from '../input/settings-modal.ts';
 import { fitDisplay, truncateDisplay } from '../utils/terminal-width.ts';
 import { getOverlaySurfaceMetrics, getStableOverlayContentRows } from './overlay-viewport.ts';
 import { getVisibleWindow } from './surface-layout.ts';
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function formatValue(entry: SettingEntry): string {
-  const val = entry.currentValue;
-  if (val === null || val === undefined) return '(unset)';
-  if (typeof val === 'boolean') return val ? 'true' : 'false';
-  if (typeof val === 'string' && val === '') return '(empty)';
-  return String(val);
-}
-
-function valueColor(entry: SettingEntry): string {
-  if (!entry.isDefault) return '#00ffcc'; // cyan-green = modified
-  return '244';                            // dim = default
-}
-
-function flagStateColor(state: string, killed: boolean): string {
-  if (killed) return '#ef4444'; // red
-  if (state === 'enabled') return '#00ffcc'; // cyan-green
-  return '244'; // dim
-}
-
-function mcpTrustColor(mode: McpEntry['trustMode']): string {
-  switch (mode) {
-    case 'allow-all':
-      return '#ef4444';
-    case 'ask-on-risk':
-      return '#eab308';
-    case 'constrained':
-      return '#00ffcc';
-    case 'blocked':
-      return '244';
-    default:
-      return '244';
-  }
-}
-
-function subscriptionStateColor(state: SubscriptionEntry['state']): string {
-  switch (state) {
-    case 'active':
-      return '#00ffcc';
-    case 'pending':
-      return '#eab308';
-    case 'available':
-      return '#38bdf8';
-    default:
-      return '244';
-  }
-}
-
-function inferSubscriptionRouteReason(entry: SubscriptionEntry): string | undefined {
-  if (entry.routeReason?.trim()) return entry.routeReason;
-  if (entry.state === 'active' && entry.oauthConfigured) {
-    return 'ambient key override enabled for this provider.';
-  }
-  if (entry.state === 'pending' && entry.oauthConfigured) {
-    return 'oauth configuration present; ambient key override will apply after activation.';
-  }
-  return undefined;
-}
-
-const CATEGORY_LABELS: Record<(typeof SETTINGS_CATEGORIES)[number], string> = {
-  display: 'Display',
-  ui: 'UI',
-  provider: 'Provider',
-  subscriptions: 'Subscriptions',
-  behavior: 'Behavior',
-  storage: 'Storage',
-  permissions: 'Permissions',
-  mcp: 'MCP',
-  sandbox: 'Sandbox',
-  danger: 'Danger',
-  tools: 'Tools',
-  flags: 'Flags',
-};
-
-const SETTING_LABELS: Partial<Record<string, string>> = {
-  'ui.systemMessages': 'System Message Target',
-  'ui.operationalMessages': 'Operational Message Target',
-  'ui.wrfcMessages': 'WRFC Message Target',
-  'ui.voiceEnabled': 'Voice Surface',
-  'behavior.autoCompactThreshold': 'Auto-Compact %',
-  'behavior.staleContextWarnings': 'Context Warnings',
-  'behavior.returnContextMode': 'Return Context',
-  'behavior.guidanceMode': 'Guidance Mode',
-  'storage.secretPolicy': 'Secret Policy',
-  'sandbox.vmBackend': 'Sandbox Backend',
-  'sandbox.qemuBinary': 'QEMU Binary',
-  'sandbox.qemuImagePath': 'QEMU Image',
-  'sandbox.qemuExecWrapper': 'QEMU Wrapper',
-};
-
-function getSettingLabel(entry: SettingEntry): string {
-  return SETTING_LABELS[entry.setting.key] ?? entry.setting.key.replace(/^[^.]+\./, '');
-}
-
-function describeUiRouting(value: string): string {
-  switch (value) {
-    case 'panel':
-      return 'render in panels only';
-    case 'conversation':
-      return 'render inline in conversation';
-    case 'both':
-      return 'render in both conversation and panels';
-    default:
-      return value;
-  }
-}
+import {
+  formatValue,
+  valueColor,
+  flagStateColor,
+  mcpTrustColor,
+  subscriptionStateColor,
+  inferSubscriptionRouteReason,
+  CATEGORY_LABELS,
+  getSettingLabel,
+  describeUiRouting,
+} from './settings-modal-helpers.ts';
 
 // ---------------------------------------------------------------------------
 // Renderer
@@ -161,6 +62,7 @@ export function renderSettingsModal(
   const isSubscriptionsTab = SETTINGS_CATEGORIES[modal.categoryIndex] === 'subscriptions';
   const isFlagsTab = SETTINGS_CATEGORIES[modal.categoryIndex] === 'flags';
   const isUiTab = SETTINGS_CATEGORIES[modal.categoryIndex] === 'ui';
+  const isToolsTab = SETTINGS_CATEGORIES[modal.categoryIndex] === 'tools';
   let persistentHelpers: import('./modal-factory.ts').ModalHelperRow[] | undefined;
   sections.push({
     type: 'text',
@@ -174,7 +76,9 @@ export function renderSettingsModal(
             ? 'Control shell presentation, including where operational and WRFC updates render across conversation and panels.'
           : isFlagsTab
             ? 'Feature flags control staged or experimental behavior. Some changes may require restart.'
-            : 'Browse and adjust operator-facing runtime settings by category.',
+            : isToolsTab
+              ? 'Configure tool LLM routing and helper model. Provider and model fields are optional — empty means use the active provider.'
+              : 'Browse and adjust operator-facing runtime settings by category.',
     style: { fg: '246', dim: true },
   });
 
@@ -529,6 +433,138 @@ export function renderSettingsModal(
     );
   }
 
+  // ── Tools tab ─────────────────────────────────────────────────
+  if (isToolsTab) {
+    const toolsItems = modal.currentItems; // includes helper.* entries routed into tools group
+
+    if (toolsItems.length === 0) {
+      sections.push({
+        type: 'text',
+        content: '(no tool or helper settings available)',
+        style: { fg: '240', dim: true },
+      });
+    } else {
+      const labelW = Math.floor(contentW * 0.38);
+      const valW = Math.floor(contentW * 0.30);
+      const srcW = Math.max(0, contentW - labelW - valW - 4);
+
+      sections.push({
+        type: 'text',
+        content: `${fitDisplay('Setting', labelW)}  ${fitDisplay('Value', valW)}  Source`,
+        style: { fg: '240', dim: true },
+      });
+      sections.push({ type: 'separator' });
+
+      const window = getVisibleWindow(toolsItems.length, modal.selectedIndex, maxVisibleRows);
+      const visibleItems = toolsItems.slice(window.start, window.end);
+
+      // Render each entry as an individual text row so section headers can interleave.
+      // Section headers are emitted when the key prefix changes (tools.* vs helper.*).
+      let lastGroupPrefix = '';
+      for (let i = 0; i < visibleItems.length; i++) {
+        const entry = visibleItems[i]!;
+        const isSelected = window.start + i === modal.selectedIndex;
+        const isEditing = isSelected && modal.editingMode;
+        const prefix = entry.setting.key.split('.')[0]!;
+
+        // Emit a section header when the group prefix changes
+        if (prefix !== lastGroupPrefix) {
+          lastGroupPrefix = prefix;
+          const sectionLabel = prefix === 'helper' ? '── Helper Model ──' : '── Tool LLM ──';
+          sections.push({
+            type: 'text',
+            content: fitDisplay(sectionLabel, contentW),
+            style: { fg: '243', dim: true },
+          });
+        }
+
+        const label = getSettingLabel(entry);
+        const labelStr = fitDisplay(label, labelW);
+
+        let valueStr: string;
+        if (entry.setting.type === 'boolean') {
+          const boolVal = Boolean(entry.currentValue);
+          valueStr = isEditing ? `${modal.editBuffer}\u2588` : (boolVal ? '[on]' : '[off]');
+        } else if (isEditing) {
+          valueStr = `${modal.editBuffer}\u2588`;
+        } else {
+          valueStr = formatValue(entry);
+        }
+
+        const valStr = fitDisplay(valueStr, valW);
+        const sourceText = entry.effectiveSource ?? 'default';
+        const srcStr = fitDisplay(sourceText, srcW);
+        const rowLabel = `${labelStr}  ${valStr}  ${srcStr}`;
+
+        // Render as a single-item list so the ModalFactory applies selection highlight
+        sections.push({
+          type: 'list',
+          items: [{
+            label: rowLabel,
+            selected: isSelected,
+            style: isSelected ? undefined : { fg: valueColor(entry) },
+          }],
+        });
+      }
+
+      if (toolsItems.length > maxVisibleRows) {
+        sections.push({
+          type: 'text',
+          content: `[${window.start + 1}-${window.end} of ${toolsItems.length}]`,
+          style: { fg: '244', dim: true },
+        });
+      }
+
+      // Description of selected entry
+      const selected = modal.getSelected();
+      if (selected) {
+        sections.push({ type: 'separator' });
+        sections.push({
+          type: 'text',
+          content: truncateDisplay(selected.setting.description, contentW),
+          style: { fg: '246', dim: true },
+        });
+        if (selected.setting.type === 'boolean') {
+          sections.push({
+            type: 'text',
+            content: truncateDisplay(`Currently ${Boolean(selected.currentValue) ? 'enabled' : 'disabled'}. Press Enter or Space to toggle.`, contentW),
+            style: { fg: '#38bdf8', dim: true },
+          });
+        } else {
+          const emptyNote = selected.currentValue === '' || selected.currentValue === null || selected.currentValue === undefined
+            ? ' (empty = use active provider default)'
+            : '';
+          sections.push({
+            type: 'text',
+            content: truncateDisplay(`Current: ${formatValue(selected)}${emptyNote}`, contentW),
+            style: { fg: '#38bdf8', dim: true },
+          });
+        }
+      }
+    }
+
+    const hints = modal.editingMode
+      ? ['[Enter] Confirm', '[Esc] Cancel']
+      : ['[Tab] Category', '[\u2191\u2193] Navigate', '[Enter] Toggle / Edit', '[Esc] Close'];
+
+    return ModalFactory.createModal(
+      {
+        title: 'Settings',
+        width: boxW,
+        margin: boxMargin,
+        targetContentRows,
+        tabs: SETTINGS_CATEGORIES.map((category, index) => ({
+          label: CATEGORY_LABELS[category],
+          active: index === modal.categoryIndex,
+        })),
+        sections,
+        hints,
+        helpers: persistentHelpers,
+      },
+      width,
+    );
+  }
+
   // ── Settings list ────────────────────────────────────────────
   const items = modal.currentItems;
 

package/src/runtime/bootstrap-command-context.ts

@@ -82,7 +82,7 @@ export type CreateBootstrapCommandContextOptions = {
   providerApi?: ProviderApi;
   subscriptionManager?: import('@pellux/goodvibes-sdk/platform/config/subscriptions').SubscriptionManager;
   secretsManager?: import('../config/secrets.ts').SecretsManager;
-  serviceRegistry?: import('../config/service-registry.ts').ServiceRegistry;
+  serviceRegistry?: import('@pellux/goodvibes-sdk/platform/config/service-registry').ServiceRegistry;
   localUserAuthManager?: import('@pellux/goodvibes-sdk/platform/security/user-auth').UserAuthManager;
   tokenAuditor?: import('@pellux/goodvibes-sdk/platform/security/token-audit').ApiTokenAuditor;
   replayEngine?: import('@pellux/goodvibes-sdk/platform/core/deterministic-replay').DeterministicReplayEngine;

package/src/runtime/bootstrap-command-parts.ts

@@ -92,7 +92,7 @@ export interface BootstrapCommandSectionOptions {
   readonly benchmarkStore?: import('@pellux/goodvibes-sdk/platform/providers/model-benchmarks').BenchmarkStore;
   readonly subscriptionManager?: import('@pellux/goodvibes-sdk/platform/config/subscriptions').SubscriptionManager;
   readonly secretsManager?: import('../config/secrets.ts').SecretsManager;
-  readonly serviceRegistry?: import('../config/service-registry.ts').ServiceRegistry;
+  readonly serviceRegistry?: import('@pellux/goodvibes-sdk/platform/config/service-registry').ServiceRegistry;
   readonly localUserAuthManager?: import('@pellux/goodvibes-sdk/platform/security/user-auth').UserAuthManager;
   readonly tokenAuditor?: import('@pellux/goodvibes-sdk/platform/security/token-audit').ApiTokenAuditor;
   readonly replayEngine?: import('@pellux/goodvibes-sdk/platform/core/deterministic-replay').DeterministicReplayEngine;
@@ -182,25 +182,41 @@ export function createBootstrapCommandActions(
     clearScreen: () => unwiredShellAction('clearScreen'),
     activatePlan,
     requestPermission: (request) => requestPermission(request),
-    completeModelSelection: ({ model, effort, contextCap }) => {
+    completeModelSelection: ({ model, effort, contextCap, target }) => {
       if (!model) return;
       const def = model;
       const key = def.registryKey ?? `${def.provider}:${def.id}`;
+      const resolvedTarget = target ?? 'main';
       try {
-        if (contextCap != null && contextCap > 0) {
-          providerRegistry.setModelContextCap(key, contextCap);
+        if (resolvedTarget === 'helper') {
+          // Write to helper config keys and enable the helper
+          configManager.set('helper.globalProvider', def.provider);
+          configManager.set('helper.globalModel', key);
+          configManager.set('helper.enabled', true);
+          conversation.log(`Helper model set to: ${def.displayName} (${def.provider})`, { fg: '135' });
+        } else if (resolvedTarget === 'tool') {
+          // Write to tool LLM config keys and enable the tool LLM
+          configManager.set('tools.llmProvider', def.provider);
+          configManager.set('tools.llmModel', key);
+          configManager.setDynamic('tools.llmEnabled' as never, true);
+          conversation.log(`Tool LLM set to: ${def.displayName} (${def.provider})`, { fg: '135' });
+        } else {
+          // Default: main provider/model
+          if (contextCap != null && contextCap > 0) {
+            providerRegistry.setModelContextCap(key, contextCap);
+          }
+          providerRegistry.setCurrentModel(key);
+          runtime.model = key;
+          runtime.provider = def.provider;
+          runtime.reasoningEffort = effort as 'instant' | 'low' | 'medium' | 'high';
+          configManager.set('provider.model', key);
+          configManager.set('provider.provider', def.provider);
+          configManager.set('provider.reasoningEffort', effort as 'instant' | 'low' | 'medium' | 'high');
+          const ctxNote = contextCap != null && contextCap > 0
+            ? `, context cap: ${contextCap.toLocaleString()}`
+            : '';
+          conversation.log(`Switched to model: ${def.displayName} (${def.provider}), effort: ${effort}${ctxNote}`, { fg: '135' });
         }
-        providerRegistry.setCurrentModel(key);
-        runtime.model = key;
-        runtime.provider = def.provider;
-        runtime.reasoningEffort = effort as 'instant' | 'low' | 'medium' | 'high';
-        configManager.set('provider.model', key);
-        configManager.set('provider.provider', def.provider);
-        configManager.set('provider.reasoningEffort', effort as 'instant' | 'low' | 'medium' | 'high');
-        const ctxNote = contextCap != null && contextCap > 0
-          ? `, context cap: ${contextCap.toLocaleString()}`
-          : '';
-        conversation.log(`Switched to model: ${def.displayName} (${def.provider}), effort: ${effort}${ctxNote}`, { fg: '135' });
       } catch (e) {
         conversation.log(`Error switching model: ${summarizeError(e)}`, { fg: '#ef4444' });
       }

package/src/runtime/bootstrap-core.ts

@@ -226,8 +226,30 @@ export async function initializeBootstrapCore(
   });
 
   const renderRequestRef = { value: (): void => {} };
+  // R1: Coalescing render scheduler — collapses N same-microtask requestRender() calls into 1.
+  // Also enforces a 16ms minimum interval to cap at ~60fps during streaming.
+  let renderScheduled = false;
+  let lastRenderTime = 0;
+  const RENDER_INTERVAL_MS = 16;
   const requestRender = (): void => {
-    renderRequestRef.value();
+    if (renderScheduled) return;
+    renderScheduled = true;
+    setImmediate(() => {
+      renderScheduled = false;
+      const now = Date.now();
+      const elapsed = now - lastRenderTime;
+      if (elapsed < RENDER_INTERVAL_MS) {
+        // Too soon — debounce to the tail of the current 16ms window
+        const delay = RENDER_INTERVAL_MS - elapsed;
+        setTimeout(() => {
+          lastRenderTime = Date.now();
+          renderRequestRef.value();
+        }, delay);
+      } else {
+        lastRenderTime = now;
+        renderRequestRef.value();
+      }
+    });
   };
   const permissionPromptRef = {
     requestPermission: (async () => ({ approved: false, remember: false })) as PermissionRequestHandler,

package/src/runtime/bootstrap.ts

@@ -35,6 +35,7 @@ import {
 import { startBackgroundProviderRegistration } from '@pellux/goodvibes-sdk/platform/runtime/bootstrap-background';
 import { restoreSavedModel } from '@pellux/goodvibes-sdk/platform/runtime/bootstrap-helpers';
 import { startExternalServices, type ExternalServicesHandle } from '@pellux/goodvibes-sdk/platform/runtime/bootstrap-services';
+import { getOrCreateCompanionToken } from '@pellux/goodvibes-sdk/platform/pairing/companion-token';
 import type { UiRuntimeServices } from './ui-services.ts';
 import { createDeferredStartupCoordinator } from '@pellux/goodvibes-sdk/platform/runtime/deferred-startup';
 import { initializeBootstrapCore } from './bootstrap-core.ts';
@@ -320,11 +321,15 @@ export async function bootstrapRuntime(
   deferredStartup.schedule({
     label: 'external-services',
     run: async () => {
+      // Register the persistent companion-pairing token as the daemon's shared
+      // bearer, so tokens scanned from the /qrcode panel's QR actually
+      // authenticate against the embedded daemon this surface starts.
+      const companionTokenRecord = getOrCreateCompanionToken('tui');
       externalServicesPromise = startExternalServices(
         configManager,
         runtimeBus,
         hookDispatcher,
-        {},
+        { sharedDaemonToken: companionTokenRecord.token },
         services,
       );
       externalServices = await externalServicesPromise;

package/src/runtime/diagnostics/panels/index.ts

@@ -3,13 +3,13 @@
  *
  * Import from this module to access the individual diagnostic panel providers.
  */
-export { ToolCallsPanel } from './tool-calls.ts';
-export { AgentsPanel } from './agents.ts';
-export { TasksPanel } from './tasks.ts';
-export { EventsPanel } from './events.ts';
+export { ToolCallsPanel } from '@pellux/goodvibes-sdk/platform/runtime/diagnostics/panels/tool-calls';
+export { AgentsPanel } from '@pellux/goodvibes-sdk/platform/runtime/diagnostics/panels/agents';
+export { TasksPanel } from '@pellux/goodvibes-sdk/platform/runtime/diagnostics/panels/tasks';
+export { EventsPanel } from '@pellux/goodvibes-sdk/platform/runtime/diagnostics/panels/events';
 export { StateInspectorPanel } from '@pellux/goodvibes-sdk/platform/runtime/diagnostics/panels/state-inspector';
 export type { InspectableDomain } from '@pellux/goodvibes-sdk/platform/runtime/diagnostics/panels/state-inspector';
-export { HealthPanel } from './health.ts';
+export { HealthPanel } from '@pellux/goodvibes-sdk/platform/runtime/diagnostics/panels/health';
 export { DivergencePanel } from '@pellux/goodvibes-sdk/platform/runtime/diagnostics/panels/divergence';
 export { ReplayPanel } from '@pellux/goodvibes-sdk/platform/runtime/diagnostics/panels/replay';
 export { PolicyPanel } from './policy.ts';