@pellux/goodvibes-tui 0.18.23 → 0.19.1

package/src/panels/system-messages-panel.ts

@@ -1,9 +1,12 @@
 /**
  * SystemMessagesPanel — displays operational system messages routed away
  * from the main conversation.
+ *
+ * Migrated (Wave B2): extends ScrollableListPanel<SystemMessageEntry>.
+ * Navigation (up/down/j/k/pageup/pagedown/g/G) is handled by the base class.
  */
 
-import { BasePanel } from './base-panel.ts';
+import { ScrollableListPanel } from './scrollable-list-panel.ts';
 import type { Line } from '../types/grid.ts';
 import type { ComponentHealthMonitor } from '../runtime/perf/panel-health-monitor.ts';
 import {
@@ -17,20 +20,21 @@ import {
   buildPanelWorkspace,
   resolvePrimaryScrollableSection,
   DEFAULT_PANEL_PALETTE,
+  extendPalette,
+  type PanelPalette,
   type PanelWorkspaceSection,
 } from './polish.ts';
 import { ConfigManager } from '@pellux/goodvibes-sdk/platform/config/manager';
 
 const MAX_MESSAGES = 500;
 
-const C = {
-  ...DEFAULT_PANEL_PALETTE,
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
   header: '#00ffff',
   headerBg: '#0f172a',
   high: '#fbbf24',
   low: '#9ca3af',
   ts: '#6b7280',
-} as const;
+} as const);
 
 export type SystemMessagePriority = 'high' | 'low';
 
@@ -48,10 +52,8 @@ function fmtTime(ts: number): string {
   return `${hh}:${mm}:${ss}`;
 }
 
-export class SystemMessagesPanel extends BasePanel {
+export class SystemMessagesPanel extends ScrollableListPanel<SystemMessageEntry> {
   private _messages: SystemMessageEntry[] = [];
-  private _lastVisibleIdx = 0;
-  private _scrollOffset = 0;
   private readonly configManager: ConfigManager;
 
   constructor(configManager: ConfigManager, componentHealthMonitor?: ComponentHealthMonitor) {
@@ -59,14 +61,55 @@ export class SystemMessagesPanel extends BasePanel {
     this.configManager = configManager;
   }
 
+  // ---------------------------------------------------------------------------
+  // ScrollableListPanel contract
+  // ---------------------------------------------------------------------------
+
+  protected getItems(): readonly SystemMessageEntry[] {
+    return this._messages;
+  }
+
+  protected renderItem(
+    entry: SystemMessageEntry,
+    index: number,
+    selected: boolean,
+    width: number,
+  ): Line {
+    const preview = entry.text.replace(/\s+/g, ' ').trim();
+    return buildPanelListRow(width, [
+      { text: `${fmtTime(entry.ts)}  `, fg: C.ts },
+      {
+        text: `${entry.priority === 'high' ? 'HIGH' : 'LOW '.padEnd(4)}  `,
+        fg: entry.priority === 'high' ? C.high : C.low,
+        bold: entry.priority === 'high',
+      },
+      { text: preview, fg: C.value },
+    ], C, {
+      selected,
+      marker: entry.priority === 'high' ? '!' : '\u00b7',
+    });
+  }
+
+  protected override getPalette(): PanelPalette {
+    return C;
+  }
+
+  protected override getEmptyStateMessage(): string {
+    return ' No system messages yet.';
+  }
+
+  // ---------------------------------------------------------------------------
+  // Public API
+  // ---------------------------------------------------------------------------
+
   push(text: string, priority: SystemMessagePriority): void {
     this._messages.push({ ts: Date.now(), text, priority });
     if (this._messages.length > MAX_MESSAGES) {
       this._messages.shift();
-      if (this._lastVisibleIdx > 0) this._lastVisibleIdx--;
+      if (this.selectedIndex > 0) this.selectedIndex--;
     }
-    this._lastVisibleIdx = Math.max(0, this._messages.length - 1);
-    this._scrollOffset = Math.max(0, this._messages.length - 1);
+    // Auto-follow: jump to latest message
+    this.selectedIndex = Math.max(0, this._messages.length - 1);
     this.markDirty();
   }
 
@@ -78,147 +121,110 @@ export class SystemMessagesPanel extends BasePanel {
     return this._messages;
   }
 
-  handleInput(key: string): boolean {
-    const prev = this._lastVisibleIdx;
-    switch (key) {
-      case 'j':
-      case '\x1b[B':
-        this._lastVisibleIdx = Math.min(this._lastVisibleIdx + 1, Math.max(0, this._messages.length - 1));
-        break;
-      case 'k':
-      case '\x1b[A':
-        this._lastVisibleIdx = Math.max(this._lastVisibleIdx - 1, 0);
-        break;
-      case '\x1b[6~':
-        this._lastVisibleIdx = Math.min(this._lastVisibleIdx + 20, Math.max(0, this._messages.length - 1));
-        break;
-      case '\x1b[5~':
-        this._lastVisibleIdx = Math.max(this._lastVisibleIdx - 20, 0);
-        break;
-      case 'g':
-        this._lastVisibleIdx = 0;
-        break;
-      case 'G':
-        this._lastVisibleIdx = Math.max(0, this._messages.length - 1);
-        break;
-      default:
-        return false;
-    }
-    if (this._lastVisibleIdx !== prev) this.markDirty();
-    return true;
-  }
-
-  override render(width: number, height: number): Line[] {
-    if (!this.canRenderNow()) {
-      return Array.from({ length: height }, () => buildPanelLine(width, [['', C.dim]]));
-    }
+  // ---------------------------------------------------------------------------
+  // Input — base class handles all navigation; nothing custom here
+  // ---------------------------------------------------------------------------
 
-    const start = Date.now();
-    const intro = 'Operational system traffic routed out of the main conversation to reduce noise and keep runtime status reviewable.';
+  // ---------------------------------------------------------------------------
+  // Render — multi-section layout (posture + list + detail)
+  // ---------------------------------------------------------------------------
 
-    if (this._messages.length === 0) {
+  override render(width: number, height: number): Line[] {
+    return this.trackedRender(() => {
+      const intro = 'Operational system traffic routed out of the main conversation to reduce noise and keep runtime status reviewable.';
+
+      if (this._messages.length === 0) {
+        this.needsRender = false;
+        const lines = buildPanelWorkspace(width, height, {
+          title: 'System Messages',
+          intro,
+          sections: [{
+            lines: buildEmptyState(
+              width,
+              this.getEmptyStateMessage(),
+              'Model switches, scan notices, provider/system state, and other operational updates will appear here once the runtime starts emitting them.',
+              [
+                { command: '/help', summary: 'review command and workflow surfaces' },
+                { command: '/cockpit', summary: 'open the unified runtime control room' },
+              ],
+              C,
+            ),
+          }],
+          footerLines: [
+            buildPanelLine(width, [['  j/k or Up/Down scroll  g/G jump  low-priority system traffic lands here by default', C.dim]]),
+          ],
+          palette: C,
+        });
+        return lines;
+      }
+
+      const highCount = this._messages.filter((entry) => entry.priority === 'high').length;
+      const lowCount = this._messages.length - highCount;
+      this.selectedIndex = Math.min(this.selectedIndex, this._messages.length - 1);
+      const ui = this.configManager.getRaw().ui;
+      const postureLines = [
+        buildKeyValueLine(width, [
+          { label: 'messages', value: String(this._messages.length), valueColor: C.value },
+          { label: 'high', value: String(highCount), valueColor: highCount > 0 ? C.high : C.dim },
+          { label: 'low', value: String(lowCount), valueColor: lowCount > 0 ? C.low : C.dim },
+        ], C),
+        buildKeyValueLine(width, [
+          { label: 'system route', value: ui.systemMessages, valueColor: C.info },
+          { label: 'ops route', value: ui.operationalMessages, valueColor: C.info },
+          { label: 'wrfc route', value: ui.wrfcMessages, valueColor: C.info },
+        ], C),
+        buildGuidanceLine(width, '/settings', 'adjust where operational and WRFC messages render across panels and conversation', C),
+      ];
+
+      const selected = this._messages[this.selectedIndex]!;
+      const messageRows: Line[] = this._messages.map((entry, index) =>
+        this.renderItem(entry, index, index === this.selectedIndex, width),
+      );
+
+      const postureSection: PanelWorkspaceSection = { lines: buildSummaryBlock(width, 'System posture', postureLines, C) };
+      const detailSection: PanelWorkspaceSection = {
+        title: 'Selected Message',
+        lines: [
+          buildPanelLine(width, [
+            [' Time ', C.label],
+            [fmtTime(selected.ts), C.value],
+            ['   Priority ', C.label],
+            [selected.priority, selected.priority === 'high' ? C.high : C.low],
+          ]),
+          ...buildBodyText(width, selected.text, C, C.value),
+        ],
+      };
+      const messagesSection = resolvePrimaryScrollableSection(width, height, {
+        intro,
+        palette: C,
+        beforeSections: [postureSection],
+        section: {
+          title: 'Timeline',
+          scrollableLines: messageRows,
+          selectedIndex: this.selectedIndex,
+          scrollOffset: this.scrollStart,
+          minRows: 4,
+          appendWindowSummary: { dimColor: C.ts },
+        },
+        afterSections: [detailSection],
+      });
+      this.scrollStart = messagesSection.scrollOffset;
+      const sections: PanelWorkspaceSection[] = [
+        postureSection,
+        messagesSection.section,
+        detailSection,
+      ];
+      this.needsRender = false;
       const lines = buildPanelWorkspace(width, height, {
         title: 'System Messages',
         intro,
-        sections: [{
-          lines: buildEmptyState(
-            width,
-            ' No system messages yet.',
-            'Model switches, scan notices, provider/system state, and other operational updates will appear here once the runtime starts emitting them.',
-            [
-              { command: '/help', summary: 'review command and workflow surfaces' },
-              { command: '/cockpit', summary: 'open the unified runtime control room' },
-            ],
-            C,
-          ),
-        }],
+        sections,
         footerLines: [
-          buildPanelLine(width, [['  j/k or Up/Down scroll  g/G jump  low-priority system traffic lands here by default', C.dim]]),
+          buildPanelLine(width, [['  j/k or Up/Down scroll  PgUp/PgDn page  g/G jump', C.dim]]),
         ],
         palette: C,
       });
-      this.reportRenderDuration(Date.now() - start);
       return lines;
-    }
-
-    const highCount = this._messages.filter((entry) => entry.priority === 'high').length;
-    const lowCount = this._messages.length - highCount;
-    this._lastVisibleIdx = Math.min(this._lastVisibleIdx, this._messages.length - 1);
-    const ui = this.configManager.getRaw().ui;
-    const postureLines = [
-      buildKeyValueLine(width, [
-        { label: 'messages', value: String(this._messages.length), valueColor: C.value },
-        { label: 'high', value: String(highCount), valueColor: highCount > 0 ? C.high : C.dim },
-        { label: 'low', value: String(lowCount), valueColor: lowCount > 0 ? C.low : C.dim },
-      ], C),
-      buildKeyValueLine(width, [
-        { label: 'system route', value: ui.systemMessages, valueColor: C.info },
-        { label: 'ops route', value: ui.operationalMessages, valueColor: C.info },
-        { label: 'wrfc route', value: ui.wrfcMessages, valueColor: C.info },
-      ], C),
-      buildGuidanceLine(width, '/settings', 'adjust where operational and WRFC messages render across panels and conversation', C),
-    ];
-
-    const selected = this._messages[this._lastVisibleIdx]!;
-    const messageRows: Line[] = this._messages.map((entry, index) => {
-      const preview = entry.text.replace(/\s+/g, ' ').trim();
-      return buildPanelListRow(width, [
-        { text: `${fmtTime(entry.ts)}  `, fg: C.ts },
-        {
-          text: `${entry.priority === 'high' ? 'HIGH' : 'LOW '.padEnd(4)}  `,
-          fg: entry.priority === 'high' ? C.high : C.low,
-          bold: entry.priority === 'high',
-        },
-        { text: preview, fg: C.value },
-      ], C, {
-        selected: index === this._lastVisibleIdx,
-        marker: entry.priority === 'high' ? '!' : '·',
-      });
-    });
-
-    const postureSection: PanelWorkspaceSection = { lines: buildSummaryBlock(width, 'System posture', postureLines, C) };
-    const detailSection: PanelWorkspaceSection = {
-      title: 'Selected Message',
-      lines: [
-        buildPanelLine(width, [
-          [' Time ', C.label],
-          [fmtTime(selected.ts), C.value],
-          ['   Priority ', C.label],
-          [selected.priority, selected.priority === 'high' ? C.high : C.low],
-        ]),
-        ...buildBodyText(width, selected.text, C, C.value),
-      ],
-    };
-    const messagesSection = resolvePrimaryScrollableSection(width, height, {
-      intro,
-      palette: C,
-      beforeSections: [postureSection],
-      section: {
-        title: 'Timeline',
-        scrollableLines: messageRows,
-        selectedIndex: this._lastVisibleIdx,
-        scrollOffset: this._scrollOffset,
-        minRows: 4,
-        appendWindowSummary: { dimColor: C.ts },
-      },
-      afterSections: [detailSection],
-    });
-    this._scrollOffset = messagesSection.scrollOffset;
-    const sections: PanelWorkspaceSection[] = [
-      postureSection,
-      messagesSection.section,
-      detailSection,
-    ];
-    const lines = buildPanelWorkspace(width, height, {
-      title: 'System Messages',
-      intro,
-      sections,
-      footerLines: [
-        buildPanelLine(width, [['  j/k or Up/Down scroll  PgUp/PgDn page  g/G jump', C.dim]]),
-      ],
-      palette: C,
     });
-    this.reportRenderDuration(Date.now() - start);
-    return lines;
   }
 }

package/src/panels/tasks-panel.ts

@@ -156,6 +156,7 @@ export class TasksPanel extends ScrollableListPanel<RuntimeTask> {
     worktrees?: UiReadModel<UiWorktreeSnapshot>,
   ) {
     super('tasks', 'Tasks', 'J', 'monitoring');
+    this.showSelectionGutter = true; // I5: non-color selection affordance
     this.readModel = readModel;
     this.worktrees = worktrees;
     this.unsubscribers = [

package/src/panels/token-budget-panel.ts

@@ -199,6 +199,7 @@ export class TokenBudgetPanel extends BasePanel {
   // ---------------------------------------------------------------------------
 
   override render(width: number, height: number): Line[] {
+    return this.trackedRender(() => {
     const sections: PanelWorkspaceSection[] = [];
 
     if (this.contextWindow > 0) {
@@ -258,6 +259,7 @@ export class TokenBudgetPanel extends BasePanel {
       sections,
       palette: DEFAULT_PANEL_PALETTE,
     });
+    });
   }
 
   private renderMaintenance(width: number): Line[] {

package/src/panels/watchers-panel.ts

@@ -58,6 +58,7 @@ export class WatchersPanel extends ScrollableListPanel<WatcherEntry> {
 
   public constructor(readModel?: UiReadModel<UiWatchersSnapshot>) {
     super('watchers', 'Watchers', 'W', 'monitoring');
+    this.showSelectionGutter = true; // I5: non-color selection affordance
     this.readModel = readModel;
     this.unsub = readModel ? readModel.subscribe(() => this.markDirty()) : null;
   }

package/src/panels/worktree-panel.ts

@@ -29,6 +29,7 @@ export class WorktreePanel extends ScrollableListPanel<WorktreeStatusRecord> {
 
   public constructor(worktreeRegistry: WorktreeRegistry) {
     super('worktrees', 'Worktrees', 'W', 'monitoring');
+    this.showSelectionGutter = true; // I5: non-color selection affordance
     this.worktreeRegistry = worktreeRegistry;
     void this.refresh();
   }

package/src/panels/wrfc-panel.ts

@@ -170,6 +170,7 @@ export class WrfcPanel extends BasePanel {
   // Render
   // -------------------------------------------------------------------------
   render(width: number, height: number): Line[] {
+    return this.trackedRender(() => {
     const activeCount  = this.chains.filter(c => !['passed', 'failed'].includes(c.state)).length;
     const passedCount  = this.chains.filter(c => c.state === 'passed').length;
     const failedCount  = this.chains.filter(c => c.state === 'failed').length;
@@ -275,6 +276,7 @@ export class WrfcPanel extends BasePanel {
       ],
       palette: DEFAULT_PANEL_PALETTE,
     });
+    });
   }
 
   // -------------------------------------------------------------------------

package/src/renderer/agent-detail-modal.ts

@@ -53,11 +53,11 @@ export class AgentDetailModal {
     this.active = true;
     this.logEntries = [];
     this.logTotal = 0;
-    this.loadLog().catch(() => {});
+    this.loadLog().catch((err) => { logger.debug('agent detail log load failed', { err }); });
     // Auto-refresh log every 500ms while modal is open
     if (this.refreshTimer) clearInterval(this.refreshTimer);
     this.refreshTimer = setInterval(() => {
-      this.loadLog().then(() => this.onRefresh?.()).catch(() => {});
+      this.loadLog().then(() => this.onRefresh?.()).catch((err) => { logger.debug('agent detail log refresh tick failed', { err }); });
     }, 500);
   }
 

package/src/renderer/ansi-sanitize.ts

@@ -0,0 +1,76 @@
+/**
+ * ANSI sanitizer for untrusted content entering the renderer.
+ *
+ * The TUI grid renders content character-by-character via writeStyledText,
+ * which already drops zero-width characters (including ESC \x1b) by checking
+ * display width. However, that is incidental protection — not a contract.
+ * This module provides explicit, intentional sanitization.
+ *
+ * Strategy:
+ * - STRIP all non-SGR escape sequences (cursor moves, OSC, BEL, alt-screen,
+ *   DECSET/private mode, and any other CSI/ESC sequences).
+ * - PRESERVE SGR color/style codes (\x1b[<params>m) — used legitimately by
+ *   the TUI's own colorized output paths.
+ * - STRIP bare BEL (\x07) characters.
+ *
+ * Safe SGR pattern: \x1b[ followed by digits/semicolons, ending in 'm'.
+ * Everything else that starts with \x1b is dangerous and stripped.
+ */
+
+// Matches safe SGR sequences: ESC [ <digits/semicolons> m
+const SGR_PATTERN = /\x1b\[([0-9;]*)m/g;
+
+// Matches ALL CSI sequences: ESC [ ... <final byte 0x40-0x7E>
+const CSI_SEQUENCE = /\x1b\[[\x20-\x3f]*[\x40-\x7e]/g;
+
+// Matches OSC sequences: ESC ] ... (ESC \ or BEL)
+const OSC_SEQUENCE = /\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)/g;
+
+// Matches other ESC sequences (ESC + single character that is not '[' or ']')
+const ESC_OTHER = /\x1b[^\[\]]/g;
+
+// Matches standalone BEL
+const BEL = /\x07/g;
+
+/**
+ * Strip dangerous ANSI escape sequences from untrusted content.
+ *
+ * Preserves SGR color codes (\x1b[<n>m). Removes:
+ * - Cursor movement CSI sequences (\x1b[<n>A/B/C/D, \x1b[H, etc.)
+ * - OSC sequences (\x1b]...\x07 or \x1b]...\x1b\\)
+ * - Alt-screen and DECSET private mode (\x1b[?...h/l)
+ * - Any other CSI or ESC sequences
+ * - Bare BEL (\x07)
+ *
+ * @param input - Raw string that may contain ANSI escape sequences
+ * @returns Sanitized string safe for grid rendering
+ */
+export function stripDangerousAnsi(input: string): string {
+  // Step 1: Extract and preserve SGR sequences by replacing them with placeholders,
+  // then strip all other escape sequences, then restore SGR sequences.
+  // This approach avoids complex negative lookahead regexes.
+
+  // Collect SGR sequences and replace with unique markers
+  const sgrTokens: string[] = [];
+  const withPlaceholders = input.replace(SGR_PATTERN, (match) => {
+    const idx = sgrTokens.length;
+    sgrTokens.push(match);
+    return `\x00SGR${idx}\x00`;
+  });
+
+  // Strip all remaining dangerous sequences
+  let sanitized = withPlaceholders
+    .replace(CSI_SEQUENCE, '')   // removes cursor moves, alt-screen, DECSET, etc.
+    .replace(OSC_SEQUENCE, '')   // removes OSC
+    .replace(ESC_OTHER, '')      // removes remaining ESC+char sequences
+    .replace(/\x1b/g, '')        // removes any leftover bare ESC
+    .replace(BEL, '');           // removes BEL
+
+  // Restore SGR sequences from placeholders
+  sanitized = sanitized.replace(/\x00SGR(\d+)\x00/g, (_match, idxStr) => {
+    const idx = parseInt(idxStr, 10);
+    return sgrTokens[idx] ?? '';
+  });
+
+  return sanitized;
+}

package/src/renderer/buffer.ts

@@ -17,7 +17,18 @@ export class TerminalBuffer {
 
   public setCell(x: number, y: number, cell: Partial<Cell>): void {
     if (y >= 0 && y < this.height && x >= 0 && x < this.width) {
-      this.cells[y][x] = { ...this.cells[y][x], ...cell };
+      // No-op guard: skip the dirty mark and allocation if every field in `cell`
+      // already matches the current cell value (idempotent write).
+      const current = this.cells[y][x]!;
+      let changed = false;
+      for (const k in cell) {
+        if ((cell as unknown as Record<string, unknown>)[k] !== (current as unknown as Record<string, unknown>)[k]) {
+          changed = true;
+          break;
+        }
+      }
+      if (!changed) return;
+      this.cells[y][x] = { ...current, ...cell };
       this.dirtyRows[y] = true;
     }
   }

package/src/renderer/help-overlay.ts

@@ -10,6 +10,7 @@ import type { SlashCommand } from '../input/command-registry.ts';
 import type { KeybindingsManager } from '../input/keybindings.ts';
 import { getOverlaySurfaceMetrics } from './overlay-viewport.ts';
 import { getVisibleWindow } from './surface-layout.ts';
+import { logger } from '@pellux/goodvibes-sdk/platform/utils/logger';
 
 function toModalSections(rows: readonly string[]): import('./modal-factory.ts').ModalSection[] {
   return rows.map((row) => {
@@ -93,9 +94,19 @@ export function renderHelpOverlay(
   }
 
   const quickStartRows: string[] = [];
-  for (const [name, argHint, desc] of FEATURED_COMMANDS) {
-    if (!hasCommand(name)) continue; // omit if not in live registry
-    quickStartRows.push(featuredRow(name, argHint, desc));
+  try {
+    for (const [name, argHint, desc] of FEATURED_COMMANDS) {
+      if (!hasCommand(name)) continue; // omit if not in live registry
+      quickStartRows.push(featuredRow(name, argHint, desc));
+    }
+  } catch (err) {
+    // A plugin command getter threw during registry traversal. Fall back to an
+    // unfiltered quick-start list so /help remains reachable.
+    logger.warn(`[help-overlay] registry traversal error during command filter; using unfiltered list: ${err}`);
+    quickStartRows.length = 0;
+    for (const [name, argHint, desc] of FEATURED_COMMANDS) {
+      quickStartRows.push(featuredRow(name, argHint, desc));
+    }
   }
 
   const commandRows: string[] = [];

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

@@ -294,12 +294,19 @@ export function renderModelPickerOverlay(
         const isSelected = selectableIdx === picker.selectedIndex;
         const indicator = isSelected ? `${OVERLAY_GLYPHS.selected} ` : '  ';
         const checkmark = item.isConfigured ? '✓ ' : '  ';
-        const labelW = contentW - 2 - 2; // indicator(2) + checkmark(2)
+        // configuredVia badge: right-aligned short label (env/sub/anon)
+        const viaBadge = item.configuredVia === 'env' ? ' [env]'
+          : item.configuredVia === 'secrets' ? ' [key]'
+          : item.configuredVia === 'subscription' ? ' [sub]'
+          : item.configuredVia === 'anonymous' ? ' [anon]'
+          : '';
+        const badgeW = viaBadge.length;
+        const labelW = contentW - 2 - 2 - badgeW; // indicator(2) + checkmark(2) + badge
         const labelStr = item.label.length > labelW
           ? item.label.slice(0, labelW - 3) + '...'
           : item.label.padEnd(labelW);
         const row = createOverlayContentLine(width, layout, borderFg, isSelected ? selectedBg : DEFAULT_OVERLAY_PALETTE.bodyBg);
-        const rowText = indicator + checkmark + labelStr;
+        const rowText = indicator + checkmark + labelStr + viaBadge;
         putRowText(row, layout.margin + 2, contentW, fitDisplay(truncateDisplay(rowText, contentW), contentW), isSelected ? titleFg : bodyFg, isSelected ? selectedBg : DEFAULT_OVERLAY_PALETTE.bodyBg, isSelected);
         lines.push(row);
       }

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

@@ -78,6 +78,7 @@ export const CATEGORY_LABELS: Record<(typeof SETTINGS_CATEGORIES)[number], strin
   danger: 'Danger',
   tools: 'Tools',
   flags: 'Flags',
+  network: 'Network',
 };
 
 export const SETTING_LABELS: Partial<Record<string, string>> = {
@@ -102,6 +103,32 @@ export const SETTING_LABELS: Partial<Record<string, string>> = {
   'helper.enabled': 'Helper Enabled',
   'helper.globalProvider': 'Helper Provider',
   'helper.globalModel': 'Helper Model',
+  // Control Plane
+  'controlPlane.enabled': 'CP Enabled',
+  'controlPlane.hostMode': 'CP Host Mode',
+  'controlPlane.host': 'CP Host',
+  'controlPlane.port': 'CP Port',
+  'controlPlane.baseUrl': 'CP Base URL',
+  'controlPlane.streamMode': 'CP Stream Mode',
+  'controlPlane.allowRemote': 'CP Allow Remote',
+  'controlPlane.trustProxy': 'CP Trust Proxy',
+  'controlPlane.tls.mode': 'CP TLS Mode',
+  'controlPlane.tls.certFile': 'CP TLS Cert',
+  'controlPlane.tls.keyFile': 'CP TLS Key',
+  // HTTP Listener
+  'httpListener.hostMode': 'HTTP Host Mode',
+  'httpListener.host': 'HTTP Host',
+  'httpListener.port': 'HTTP Port',
+  'httpListener.trustProxy': 'HTTP Trust Proxy',
+  'httpListener.tls.mode': 'HTTP TLS Mode',
+  'httpListener.tls.certFile': 'HTTP TLS Cert',
+  // Web Server
+  'web.enabled': 'Web Enabled',
+  'web.hostMode': 'Web Host Mode',
+  'web.host': 'Web Host',
+  'web.port': 'Web Port',
+  'web.publicBaseUrl': 'Web Public Base URL',
+  'web.staticAssetsDir': 'Web Static Assets Dir',
 };
 
 export function getSettingLabel(entry: SettingEntry): string {

package/src/renderer/settings-modal.ts

@@ -63,6 +63,7 @@ export function renderSettingsModal(
   const isFlagsTab = SETTINGS_CATEGORIES[modal.categoryIndex] === 'flags';
   const isUiTab = SETTINGS_CATEGORIES[modal.categoryIndex] === 'ui';
   const isToolsTab = SETTINGS_CATEGORIES[modal.categoryIndex] === 'tools';
+  const isNetworkTab = SETTINGS_CATEGORIES[modal.categoryIndex] === 'network';
   let persistentHelpers: import('./modal-factory.ts').ModalHelperRow[] | undefined;
   sections.push({
     type: 'text',
@@ -78,12 +79,28 @@ export function renderSettingsModal(
             ? 'Feature flags control staged or experimental behavior. Some changes may require restart.'
             : 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.',
+              : isNetworkTab
+                ? 'Configure control-plane and HTTP-listener binding. hostMode local/network use preset hosts; custom enables the host field. Changes trigger auto-restart.'
+                : 'Browse and adjust operator-facing runtime settings by category.',
     style: { fg: '246', dim: true },
   });
 
   sections.push({ type: 'separator' });
 
+  // ── Network tab restart notice ─────────────────────────────────
+  if (isNetworkTab && modal.lastSaveTriggeredRestart !== null) {
+    const restartTarget = modal.lastSaveTriggeredRestart === 'control-plane'
+      ? 'control-plane server'
+      : modal.lastSaveTriggeredRestart === 'http-listener'
+        ? 'HTTP listener'
+        : 'web server';
+    sections.push({
+      type: 'text',
+      content: truncateDisplay(`Restarting ${restartTarget}… server will reconnect momentarily.`, contentW),
+      style: { fg: '#38bdf8' },
+    });
+  }
+
   // ── Flags tab ──────────────────────────────────────────────────
   if (isFlagsTab) {
     const flagEntries: FlagEntry[] = modal.flagEntries;