@pellux/goodvibes-tui 0.18.12 → 0.18.17

package/src/renderer/overlay-box.ts

@@ -1,5 +1,5 @@
-import { createEmptyLine, createStyledCell, type Line } from '@pellux/goodvibes-sdk/platform/types/grid';
-import { getDisplayWidth } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+import { createEmptyLine, createStyledCell, type Line } from '../types/grid.ts';
+import { getDisplayWidth } from '../utils/terminal-width.ts';
 import { getOverlayMaxWidth } from './overlay-viewport.ts';
 import { GLYPHS, UI_TONES } from './ui-primitives.ts';
 

package/src/renderer/panel-composite.ts

@@ -1,4 +1,4 @@
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line } from '../types/grid.ts';
 import type { InputHandler } from '../input/handler.ts';
 import type { PanelManager } from '../panels/panel-manager.ts';
 import type { PanelCompositeData } from './compositor.ts';

package/src/renderer/panel-picker-overlay.ts

@@ -1,5 +1,5 @@
-import { type Line } from '@pellux/goodvibes-sdk/platform/types/grid';
-import { fitDisplay, getDisplayWidth, truncateDisplay } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+import { type Line } from '../types/grid.ts';
+import { fitDisplay, getDisplayWidth, truncateDisplay } from '../utils/terminal-width.ts';
 import type { PanelPicker } from '../panels/panel-picker.ts';
 import { CATEGORY_LABELS, CATEGORY_ORDER } from '../panels/panel-picker.ts';
 import type { PanelCategory, PanelRegistration } from '../panels/types.ts';

package/src/renderer/panel-tab-bar.ts

@@ -1,4 +1,4 @@
-import { type Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import { type Line } from '../types/grid.ts';
 import type { Panel } from '../panels/types.ts';
 import { renderTabStrip } from './tab-strip.ts';
 

package/src/renderer/panel-workspace-bar.ts

@@ -1,4 +1,4 @@
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line } from '../types/grid.ts';
 import type { WorkspaceTab } from '../panels/panel-manager.ts';
 import { renderTabStrip } from './tab-strip.ts';
 

package/src/renderer/process-indicator.ts

@@ -1,6 +1,6 @@
-import { type Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import { type Line } from '../types/grid.ts';
 import { UIFactory } from './ui-factory.ts';
-import { getDisplayWidth } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+import { getDisplayWidth } from '../utils/terminal-width.ts';
 import { GLYPHS } from './ui-primitives.ts';
 
 /** Truncate a string to fit within maxWidth display columns. */

package/src/renderer/process-modal.ts

@@ -1,4 +1,4 @@
-import { type Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import { type Line } from '../types/grid.ts';
 import { ModalFactory } from './modal-factory.ts';
 import { formatDuration } from './modal-utils.ts';
 import type { ProcessManager } from '@pellux/goodvibes-sdk/platform/tools/shared/process-manager';

package/src/renderer/profile-picker-modal.ts

@@ -7,11 +7,11 @@
  * Footer hints: [Up/Down] Navigate  [Enter] Load  [d] Arm/Delete  [s] Save current  [Esc] Close
  */
 
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line } from '../types/grid.ts';
 import { ModalFactory } from './modal-factory.ts';
 import type { ProfilePickerModal } from '../input/profile-picker-modal.ts';
 import { formatTimestamp } from './modal-utils.ts';
-import { fitDisplay } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+import { fitDisplay } from '../utils/terminal-width.ts';
 import { getOverlaySurfaceMetrics, getStableOverlayContentRows } from './overlay-viewport.ts';
 
 // ---------------------------------------------------------------------------

package/src/renderer/progress.ts

@@ -1,6 +1,6 @@
-import { type Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import { type Line } from '../types/grid.ts';
 import { UIFactory } from './ui-factory.ts';
-import { getDisplayWidth } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+import { getDisplayWidth } from '../utils/terminal-width.ts';
 
 // Rich spinner frames (used by progress indicators)
 export const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];

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/search-overlay.ts

@@ -1,5 +1,5 @@
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
-import { fitDisplay, getDisplayWidth, truncateDisplay } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+import type { Line } from '../types/grid.ts';
+import { fitDisplay, getDisplayWidth, truncateDisplay } from '../utils/terminal-width.ts';
 import type { SearchManager } from '../input/search.ts';
 import { createBottomBarLine, writeBottomBarText } from './bottom-bar.ts';
 

package/src/renderer/selection-modal-overlay.ts

@@ -1,5 +1,5 @@
-import { type Line } from '@pellux/goodvibes-sdk/platform/types/grid';
-import { fitDisplay, getDisplayWidth, truncateDisplay } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+import { type Line } from '../types/grid.ts';
+import { fitDisplay, getDisplayWidth, truncateDisplay } from '../utils/terminal-width.ts';
 import type { SelectionModal } from '../input/selection-modal.ts';
 import {
   createOverlayBoxLayout,

package/src/renderer/session-picker-modal.ts

@@ -7,11 +7,11 @@
  * Footer hints: [Enter] Load  [d] Delete  [Esc] Close
  */
 
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line } from '../types/grid.ts';
 import { ModalFactory } from './modal-factory.ts';
 import type { SessionPickerModal } from '../input/session-picker-modal.ts';
 import { formatTimestamp } from './modal-utils.ts';
-import { fitDisplay } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+import { fitDisplay } from '../utils/terminal-width.ts';
 import { getOverlaySurfaceMetrics, getStableOverlayContentRows } from './overlay-viewport.ts';
 
 // ---------------------------------------------------------------------------

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

@@ -10,123 +10,24 @@
  *   - Footer hints: [Tab] Category  [↑↓] Navigate  [Enter] Edit/Toggle  [Esc] Close
  */
 
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line } from '../types/grid.ts';
 import { ModalFactory } from './modal-factory.ts';
 import type { SettingsModal, SettingEntry, FlagEntry, McpEntry, SubscriptionEntry } from '../input/settings-modal.ts';
 import { SETTINGS_CATEGORIES } from '../input/settings-modal.ts';
-import { fitDisplay, truncateDisplay } from '@pellux/goodvibes-sdk/platform/utils/terminal-width';
+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/renderer/shell-surface.ts

@@ -1,4 +1,4 @@
-import type { Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import type { Line } from '../types/grid.ts';
 import { renderProcessIndicator } from './process-indicator.ts';
 import { UIFactory } from './ui-factory.ts';
 

package/src/renderer/system-message.ts

@@ -1,4 +1,4 @@
-import { type Line } from '@pellux/goodvibes-sdk/platform/types/grid';
+import { type Line } from '../types/grid.ts';
 import { BORDERS, COLORS } from './layout.ts';
 import { renderConversationNotice } from './conversation-surface.ts';