@pellux/goodvibes-tui 1.16.1 → 1.17.0

package/src/renderer/autocomplete-overlay.ts

@@ -1,5 +1,6 @@
 import { type Line } from '../types/grid.ts';
 import { fitDisplay, getDisplayWidth, truncateDisplay } from '../utils/terminal-width.ts';
+import { wrapWithHangingIndent } from './text-layout.ts';
 import type { AutocompleteEngine } from '../input/autocomplete.ts';
 import {
   createOverlayBorderLine,
@@ -29,6 +30,14 @@ function putText(line: Line, startX: number, maxWidth: number, text: string, sty
 
 /**
  * Render the slash command autocomplete dropdown as Line[] for overlay in the viewport.
+ *
+ * A row's description renders inline only when it genuinely fits beside the
+ * command name; otherwise the FULL description wraps onto its own line(s)
+ * below the command name, with no line cap — descriptive text is never
+ * clipped (same fix as selection-modal-overlay.ts's modal rule). Item
+ * visibility is row-budget aware (a wrapped description can cost more than
+ * one physical row), always showing the selected item in full and falling
+ * back to the existing position counter rather than losing text.
  */
 export function renderAutocompleteOverlay(
   autocomplete: AutocompleteEngine,
@@ -39,12 +48,15 @@ export function renderAutocompleteOverlay(
   if (!state.active || state.results.length === 0) return [];
 
   const lines: Line[] = [];
+  const chromeRows = 4;
   const metrics = getOverlaySurfaceMetrics(width, viewportHeight, {
     margin: 2,
     maxWidth: 88,
-    chromeRows: 4,
+    chromeRows,
     minContentRows: 6,
-    maxContentRows: 10,
+    // Rows grow with wrapped descriptions (never clipped) rather than
+    // staying pinned at a small constant — still bounded by the viewport.
+    maxContentRows: Math.max(10, viewportHeight - chromeRows - 4),
   });
   const layout = createOverlayBoxLayout(width, metrics.margin, metrics.boxWidth);
 
@@ -68,88 +80,129 @@ export function renderAutocompleteOverlay(
 
   const results = state.results;
   const total = results.length;
-  const maxVisible = metrics.contentRows;
-  let startIdx = 0;
-  if (total > maxVisible) {
-    startIdx = Math.max(
-      0,
-      Math.min(
-        state.selectedIndex - Math.floor(maxVisible / 2),
-        total - maxVisible,
-      ),
-    );
-  }
-  const endIdx = Math.min(startIdx + maxVisible, total);
+  const rowBudget = Math.max(1, metrics.contentRows);
+
+  const indicatorWidth = 2;
+  const maxCommandWidth = Math.min(18, Math.max(10, Math.floor(layout.innerWidth * 0.28)));
+  const gapWidth = 2;
+  const descWidth = Math.max(0, layout.innerWidth - indicatorWidth - maxCommandWidth - gapWidth);
+  const wrapWidth = Math.max(8, layout.innerWidth - indicatorWidth);
 
-  // UX-C palette curation (item 4): on a bare '/' (query === ''), the results
+  // palette curation (item 4): on a bare '/' (query === ''), the results
   // list is "common tier" (score 2) followed by "alphabetical rest" (score
   // 1) — see CommandRegistry.fuzzyMatch. commonCount marks that boundary;
-  // draw a one-row separator there when it falls inside the visible window,
-  // consuming one of the maxVisible slots so the box height never changes.
+  // a one-row separator draws there when it falls inside the visible window.
   const hasCommonSeparator = state.query === '' && state.commonCount > 0 && state.commonCount < total;
-  type DisplayRow = { type: 'item'; index: number } | { type: 'separator' };
-  const displayRows: DisplayRow[] = [];
-  for (let i = startIdx; i < endIdx && displayRows.length < maxVisible; i++) {
-    if (hasCommonSeparator && i === state.commonCount) {
-      displayRows.push({ type: 'separator' });
-      if (displayRows.length >= maxVisible) break;
-    }
-    displayRows.push({ type: 'item', index: i });
+
+  function descriptionFitsInline(description: string): boolean {
+    return descWidth >= 12 && getDisplayWidth(description) <= descWidth;
   }
 
-  const indicatorWidth = 2;
-  const maxCommandWidth = Math.min(18, Math.max(10, Math.floor(layout.innerWidth * 0.28)));
-  const gapWidth = 2;
-  const descWidth = Math.max(0, layout.innerWidth - indicatorWidth - maxCommandWidth - gapWidth);
+  /** Physical rows a result occupies: 1 for the command-name row, plus one more per wrapped description line when it doesn't fit inline, plus 1 more when the common/rest separator sits immediately before it. */
+  function rowCostFor(index: number): number {
+    const { command } = results[index];
+    const rows = descriptionFitsInline(command.description)
+      ? 1
+      : 1 + wrapWithHangingIndent(command.description, wrapWidth, '').length;
+    const separatorCost = hasCommonSeparator && index === state.commonCount ? 1 : 0;
+    return rows + separatorCost;
+  }
 
-  for (const row of displayRows) {
-    if (row.type === 'separator') {
+  // Row-budget-aware windowing (mirrors selection-modal-overlay.ts's fix): a
+  // window of results is chosen by their REAL rendered height rather than
+  // assuming one row per item, always including the selected item in full,
+  // growing outward (roughly centered) until the budget is spent.
+  const selectedIdx = Math.max(0, Math.min(state.selectedIndex, total - 1));
+  let startIdx = selectedIdx;
+  let endIdx = selectedIdx + 1;
+  let usedRows = rowCostFor(selectedIdx);
+  let growBefore = true;
+  while (startIdx > 0 || endIdx < total) {
+    const canGrowBefore = growBefore && startIdx > 0;
+    const canGrowAfter = !growBefore && endIdx < total;
+    if (canGrowBefore) {
+      const cost = rowCostFor(startIdx - 1);
+      if (usedRows + cost > rowBudget) break;
+      startIdx -= 1;
+      usedRows += cost;
+    } else if (canGrowAfter) {
+      const cost = rowCostFor(endIdx);
+      if (usedRows + cost > rowBudget) break;
+      endIdx += 1;
+      usedRows += cost;
+    } else if (startIdx > 0) {
+      const cost = rowCostFor(startIdx - 1);
+      if (usedRows + cost > rowBudget) break;
+      startIdx -= 1;
+      usedRows += cost;
+    } else if (endIdx < total) {
+      const cost = rowCostFor(endIdx);
+      if (usedRows + cost > rowBudget) break;
+      endIdx += 1;
+      usedRows += cost;
+    } else {
+      break;
+    }
+    growBefore = !growBefore;
+  }
+
+  for (let i = startIdx; i < endIdx; i++) {
+    if (hasCommonSeparator && i === state.commonCount) {
       const sepLine = createOverlayContentLine(width, layout);
       putText(sepLine, layout.margin + 2, layout.innerWidth, '─'.repeat(layout.innerWidth), { fg: BORDER_FG, dim: true });
       lines.push(sepLine);
-      continue;
     }
-    const i = row.index;
+
     const { command } = results[i];
     const isSelected = i === state.selectedIndex;
-    const line = createOverlayContentLine(width, layout, BORDER_FG, isSelected ? SELECTED_BG : '');
+    const bg = isSelected ? SELECTED_BG : '';
     const indicator = isSelected ? '▸ ' : '  ';
     const commandText = fitDisplay(
       truncateDisplay(`/${command.name}`, maxCommandWidth),
       maxCommandWidth,
     );
-    const descriptionText = fitDisplay(
-      truncateDisplay(command.description, descWidth),
-      descWidth,
-    );
+
+    const line = createOverlayContentLine(width, layout, BORDER_FG, bg);
     let x = layout.margin + 2;
     putText(line, x, indicatorWidth, indicator, {
       fg: isSelected ? TITLE_FG : MUTED_FG,
-      bg: isSelected ? SELECTED_BG : '',
+      bg,
       bold: isSelected,
     });
     x += indicatorWidth;
     putText(line, x, maxCommandWidth, commandText, {
       fg: isSelected ? TITLE_FG : BODY_FG,
-      bg: isSelected ? SELECTED_BG : '',
+      bg,
       bold: isSelected,
     });
     x += maxCommandWidth;
-    putText(line, x, gapWidth, '  ', {
-      fg: BODY_FG,
-      bg: isSelected ? SELECTED_BG : '',
-    });
-    x += gapWidth;
-    putText(line, x, descWidth, descriptionText, {
-      fg: isSelected ? BODY_FG : MUTED_FG,
-      bg: isSelected ? SELECTED_BG : '',
-      bold: false,
-    });
-    lines.push(line);
+
+    if (descriptionFitsInline(command.description)) {
+      putText(line, x, gapWidth, '  ', { fg: BODY_FG, bg });
+      x += gapWidth;
+      putText(line, x, descWidth, fitDisplay(command.description, descWidth), {
+        fg: isSelected ? BODY_FG : MUTED_FG,
+        bg,
+        bold: false,
+      });
+      lines.push(line);
+    } else {
+      // Doesn't fit beside the command name — wrap the FULL description onto
+      // its own line(s) below at the full row width, rather than clipping it.
+      lines.push(line);
+      for (const wrapped of wrapWithHangingIndent(command.description, wrapWidth, '')) {
+        const descLine = createOverlayContentLine(width, layout, BORDER_FG, bg);
+        putText(descLine, layout.margin + 2 + indicatorWidth, wrapWidth, fitDisplay(wrapped, wrapWidth), {
+          fg: isSelected ? BODY_FG : MUTED_FG,
+          bg,
+        });
+        lines.push(descLine);
+      }
+    }
   }
 
-  if (total > maxVisible) {
-      const scrollLine = createOverlayContentLine(width, layout);
+  if (startIdx > 0 || endIdx < total) {
+    const scrollLine = createOverlayContentLine(width, layout);
     const scrollText = `${state.selectedIndex + 1}/${total}`;
     putText(
       scrollLine,
@@ -162,7 +215,7 @@ export function renderAutocompleteOverlay(
   }
 
   const footerLine = createOverlayContentLine(width, layout);
-  // UX-C vocab unification: "Run"/"Close" match the /help selection modal's
+  // vocab unification: "Run"/"Close" match the /help selection modal's
   // hint bar (selection-modal-overlay.ts) — both surfaces execute a command
   // on Enter, so they now say so the same way.
   const hints = '[Tab] Complete  [Up/Down] Navigate  [Enter] Run  [Esc] Close';

package/src/renderer/code-block.ts

@@ -11,11 +11,11 @@ import { UI_TONES } from './ui-primitives.ts';
  * property/comment) are pinned to the same values as the tree-sitter
  * Vaporwave palette in syntax-highlighter.ts's TOKEN_STYLES map, so a code
  * block that starts on the regex fallback and gets replaced by the async
- * tree-sitter parse doesn't visibly shift color mid-stream (WO-207c).
+ * tree-sitter parse doesn't visibly shift color mid-stream.
  * `accent` and `bg` are chrome (the language-label header bar and the body
  * background), not syntax tokens, and keep their original VS Code Dark+
  * values — folded here from two separate literals (one in the header, one
- * duplicated on the footer line) into a single named source (WO-207b).
+ * duplicated on the footer line) into a single named source.
  */
 const FALLBACK_THEME = {
   string: '#00ff88',

package/src/renderer/compaction-history-modal.ts

@@ -17,7 +17,7 @@ import type { CompactionQualityScore } from './compaction-quality.ts';
 // ─── formatCompactionEvent ────────────────────────────────────────────────────
 
 /**
- * Exported for direct unit testing (W5.4/B28) — the grade suffix is a pure
+ * Exported for direct unit testing () — the grade suffix is a pure
  * function of the event and an optional score, independent of whichever
  * runtime lookup (getCompactionQualityScore) supplies that score.
  */

package/src/renderer/compaction-preview.ts

@@ -47,7 +47,7 @@ export interface CompactionAfterOptions {
   /** Number of session memories that survived compaction. */
   readonly pinnedMemoryCount: number;
   /**
-   * Out-of-band quality-score grade for this run (W5.4/B28). Omitted or null
+   * Out-of-band quality-score grade for this run (). Omitted or null
    * when no score was computed (e.g. the small-window compaction path, which
    * has no CompactionEvent to key a score by) — no line is rendered then.
    */

package/src/renderer/compaction-quality.ts

@@ -1,7 +1,7 @@
 /**
  * Compaction quality-score bridging.
  *
- * Reality check (wo803): the SDK's `computeQualityScore()`
+ * Reality check: the SDK's `computeQualityScore()`
  * (platform/runtime/compaction/quality-score.ts) is only ever called from a
  * SEPARATE pipeline, `CompactionManager` (platform/runtime/compaction/manager.ts).
  * The TUI's actual `/compact` path never instantiates `CompactionManager` — it

package/src/renderer/compositor.ts

@@ -95,7 +95,7 @@ export class Compositor {
 
   public composite(params: CompositeRequest): void {
     const { width, height, header, viewport, footer, selection, search, panel, panelWidth } = params;
-    // R3: Reuse back-buffer instead of allocating each frame
+    // Reuse back-buffer instead of allocating each frame
     if (!this.backBuffer) {
       this.backBuffer = new TerminalBuffer(width, height);
     } else {
@@ -284,7 +284,7 @@ export class Compositor {
     });
 
     // 4. Diff and Render
-    // R3: Diff against front-buffer (last-rendered), then swap front/back — no clone() needed
+    // Diff against front-buffer (last-rendered), then swap front/back — no clone() needed
     const diff = this.diffEngine.diff(this.frontBuffer, newBuffer);
     if (diff) {
       allowTerminalWrite(() => this.stdout.write(diff));

package/src/renderer/config-modal.ts

@@ -22,7 +22,7 @@ export function renderConfigModal(modal: ConfigModal, width: number, height: num
   // rather than overflowing (posture header + separator + chrome ≈ 8 rows).
   const visible = Math.max(3, Math.min(16, height - 8));
   modal.setViewportRows(visible);
-  // DEBT-5 item 2: the list section wraps a row label at (contentW - 2),
+  // item 2: the list section wraps a row label at (contentW - 2),
   // where contentW = boxW - 4 (see ModalFactory._renderListSection). Compute
   // that exact column here so getRenderModel's wrap-clamp measures against
   // reality instead of a fixed guess.

package/src/renderer/conversation-overlays.ts

@@ -76,7 +76,7 @@ export function applyConversationOverlays(
     next.push(...renderHistorySearchOverlay(input.historySearch, conversationWidth));
   }
 
-  // W6.1 retirement: the process, agent-detail, and live-tail modal overlays
+  // retirement: the process, agent-detail, and live-tail modal overlays
   // were removed with those modals — F2 now opens the Fleet panel, which
   // subsumes the live process tree.
 

package/src/renderer/footer-tips.ts

@@ -2,7 +2,7 @@
  * footer-tips.ts — the persistent discoverability hint shown in the shell
  * footer's tip slot.
  *
- * WO-151: instead of a single frozen "/help for commands" line, the footer
+ * instead of a single frozen "/help for commands" line, the footer
  * surfaces a rotating set of the highest-value affordances (panels, process
  * monitor, help, quit). Rotation is *contextual, not timed*: when an agent turn
  * is actively running, the process-monitor tip is promoted to the front so the
@@ -24,7 +24,7 @@ export function isAgentActive(composerStatus: string | undefined): boolean {
   return composerStatus !== undefined && ACTIVE_TURN_STATUSES.has(composerStatus);
 }
 
-// UX-C: Ctrl+P is a TOGGLE (open+focus when nothing is open or unfocused,
+// Ctrl+P is a TOGGLE (open+focus when nothing is open or unfocused,
 // hide when the workspace already has focus — see openPanelPicker in
 // shell/ui-openers.ts). The bare noun 'panels' undersold that; naming the verb
 // keeps the tip honest about what the chord actually does.
@@ -33,7 +33,7 @@ const TIP_PANELS = 'Ctrl+P toggle panels';
 // tip names 'fleet', not 'processes'.
 const TIP_PROCESSES = 'F2 fleet';
 const TIP_HELP = '? help';
-// W6.2 f: an empty-composer Ctrl+C does NOT quit on the first press — it arms a
+// f: an empty-composer Ctrl+C does NOT quit on the first press — it arms a
 // ~1s "press again to exit" confirm, and only a SECOND Ctrl+C within that window
 // exits (an intentional accidental-exit guard). The old 'Ctrl+C quit' tip
 // implied a single press quits, so two presses seconds apart appeared to do

package/src/renderer/hint-grammar.ts

@@ -1,7 +1,7 @@
 /**
  * hint-grammar.ts — the single hint-bar grammar for every overlay footer.
  *
- * WO-151: one grammar across the model picker, settings modal, help/shortcuts
+ * one grammar across the model picker, settings modal, help/shortcuts
  * overlays, and ModalFactory variants so footers stop drifting into three
  * different dialects (verbless brackets, prose sentences, ad-hoc separators).
  *

package/src/renderer/modal-factory.ts

@@ -195,7 +195,7 @@ export class ModalFactory {
     }
 
     // Footer / hint bar. Hint segments join with the shared middle-dot grammar
-    // separator (WO-151) so every modal footer reads as one dialect.
+    // separator so every modal footer reads as one dialect.
     const hintStr = config.hints
       ? config.hints.join(HINT_SEPARATOR)
       : (config.footer ?? '');

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

@@ -2,7 +2,7 @@
  * Number of fixed chrome lines in the model-picker overlay (title + search + divider + detail×2 + footer).
  * Used by callers to compute maxVisible item rows.
  *
- * WO-206: this file used to also hold `renderModelPickerOverlay`, the
+ * this file used to also hold `renderModelPickerOverlay`, the
  * overlay-style model-picker renderer. It was superseded by
  * `renderModelWorkspace` (model-workspace.ts) — conversation-overlays.ts
  * routes `input.modelPicker.active` there, not here — and had no remaining

package/src/renderer/model-workspace.ts

@@ -395,9 +395,14 @@ export function renderModelWorkspace(picker: ModelPickerModal, width: number, vi
   const bodyRows = safeHeight - 3 - footerRows;
   const maxDetailRows = Math.max(3, bodyRows - 2);
   const minDetailRows = Math.min(6, maxDetailRows);
-  const detailRows = clamp(Math.round(bodyRows * 0.32), minDetailRows, maxDetailRows);
+  const details = detailLines(picker, contentW - 2);
+  // Never drop detail lines (the modal rule: UI-authored descriptive text is
+  // always shown in full). Size the detail band to the ACTUAL content,
+  // growing past the old fixed proportional default up to maxDetailRows —
+  // the ceiling that keeps at least a header row and one list row available —
+  // rather than silently slicing off whatever didn't fit a 32% guess.
+  const detailRows = clamp(Math.max(details.length, Math.round(bodyRows * 0.32)), minDetailRows, maxDetailRows);
   const listRows = Math.max(1, bodyRows - detailRows - 1);
-  const details = detailLines(picker, contentW - 2).slice(0, detailRows);
 
   for (let row = 0; row < bodyRows; row += 1) {
     const inDetail = row < detailRows;

package/src/renderer/panel-composite.ts

@@ -7,7 +7,7 @@ import { createSplitPaneLayout } from './layout-engine.ts';
 import { renderPanelWorkspaceBar } from './panel-workspace-bar.ts';
 
 /**
- * R2: Per-panel render cache for dirty-flag skipping.
+ * Per-panel render cache for dirty-flag skipping.
  *
  * Maintainability hazard — mid-render invalidation race:
  *
@@ -59,7 +59,7 @@ function getRenderGenState(panel: Panel): { gen: number } {
   return state;
 }
 
-/** R2: Render a panel, skipping if nothing changed. Returns cached lines on a skip. */
+/** Render a panel, skipping if nothing changed. Returns cached lines on a skip. */
 export function renderPanel(panel: Panel, width: number, height: number): Line[] {
   const cached = panelRenderCache.get(panel);
   if (cached && !panel.needsRender && cached.width === width && cached.height === height) {

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

@@ -27,7 +27,7 @@ export function renderPanelWorkspaceBar(
       // A tab can be active-but-not-focused (selected in the unfocused pane) or
       // active-and-focused (selected in the focused pane).
       //
-      // A14: the pane marker uses ▲/▼ (top/bottom pane). The old '^'/'v'
+      // The pane marker uses ▲/▼ (top/bottom pane). The old '^'/'v'
       // prefixes read as a Ctrl caret (^) implying a non-existent Ctrl+<tab>
       // hotkey. The REAL per-tab jump key is Alt+N (panel-tab-1..9), rendered
       // here as ⌥N for the first nine tabs so the shown affordance matches the

package/src/renderer/process-indicator.ts

@@ -17,7 +17,7 @@ import { formatHints } from './hint-grammar.ts';
  * Agent-count label. The footer counts only ACTIVE agents, while the fleet
  * lists every node (running, terminal, chains, watchers). Label the count
  * "active" so it is never misread as a grand total — the [Enter] View hint
- * opens the fleet for the full picture. (UX-B item 5d.)
+ * opens the fleet for the full picture. (item 5d.)
  */
 function agentCountLabel(agentCount: number): string {
   return `${agentCount} agent${agentCount !== 1 ? 's' : ''} active`;

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

@@ -267,7 +267,7 @@ export function renderSelectionModalOverlay(
 
   const footerLine = createOverlayContentLine(width, layout, BORDER_FG, DEFAULT_OVERLAY_PALETTE.sectionBg);
   const selectedItem = modal.getSelected();
-  // UX-C vocab unification: a caller-supplied primaryVerbLabel (e.g. /help's
+  // vocab unification: a caller-supplied primaryVerbLabel (e.g. /help's
   // "Run", matching the slash-command palette) wins over the generic
   // per-primaryAction default.
   const primaryVerb = modal.primaryVerbLabel

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

@@ -42,7 +42,7 @@ function isClosedStatus(status: string): boolean {
 }
 
 /**
- * D-TUI/#A2: closed sessions carry an optional, honest reason for WHY they
+ * Closed sessions carry an optional, honest reason for WHY they
  * closed under `metadata.closeReason` (SDK's `SharedSessionCloseReason`,
  * 'closeReason' key — see `@pellux/goodvibes-sdk` platform/control-plane
  * session-broker-sessions.ts's `readSessionCloseReason`). `metadata` is an
@@ -58,7 +58,7 @@ function readCloseReason(record: SharedSessionRecord): string | undefined {
 /**
  * A GC sweep closing an idle session ('idle-reaped') auto-reopens on the next
  * heartbeat — it is NOT the same event as a deliberate user/surface close, so
- * it must never render under the same "closed" badge (W4/#A2). Tolerant of
+ * it must never render under the same "closed" badge. Tolerant of
  * records without the field (pre-feature builds, or a deliberate close).
  */
 function isReapedRecord(record: SharedSessionRecord): boolean {

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

@@ -11,7 +11,7 @@ import { UI_TONES } from './ui-primitives.ts';
 
 /**
  * "Modified / active" accent for settings rows — cyan-green, no UI_TONES
- * role matches it (WO-207b: preserved byte-exact as a named constant).
+ * role matches it (preserved byte-exact as a named constant).
  */
 const SETTINGS_ACCENT = '#00ffcc';
 
@@ -31,6 +31,14 @@ export function formatValue(entry: SettingEntry): string {
   // Array-backed settings (e.g. worktree.setup.commands) display as a
   // comma-separated list, matching how they're edited (see worktree-setup-config.ts).
   if (Array.isArray(val)) return val.length > 0 ? val.join(', ') : '(empty)';
+  // Object-backed settings (e.g. pricing.modelPrices) display their JSON when
+  // short, or an honest entry count — never the useless "[object Object]".
+  if (typeof val === 'object') {
+    const keys = Object.keys(val as Record<string, unknown>);
+    if (keys.length === 0) return '(none set)';
+    const json = JSON.stringify(val);
+    return json.length <= 64 ? json : `${keys.length} entr${keys.length === 1 ? 'y' : 'ies'} (Enter to edit as JSON)`;
+  }
   return String(val);
 }
 
@@ -57,6 +65,8 @@ export const CATEGORY_LABELS: Record<(typeof SETTINGS_CATEGORIES)[number], strin
   display: 'Display',
   ui: 'UI',
   provider: 'Provider',
+  pricing: 'Pricing',
+  update: 'Updates',
   subscriptions: 'Subscriptions',
   behavior: 'Behavior',
   storage: 'Storage',
@@ -87,7 +97,6 @@ export const CATEGORY_LABELS: Record<(typeof SETTINGS_CATEGORIES)[number], strin
   release: 'Release',
   danger: 'Danger',
   tools: 'Tools',
-  flags: 'Advanced Features',
   network: 'Network',
   relay: 'Relay',
   learning: 'Learning',
@@ -171,9 +180,9 @@ const SETTING_LABELS: Partial<Record<string, string>> = {
 };
 
 export function getSettingLabel(entry: SettingEntry): string {
-  // Feature-unit toggle headers carry the flag's human name, not the raw
-  // `featureFlags.<id>` key tail.
-  if (entry.flag) return entry.flag.flag.name;
+  // Feature-unit headers carry the feature's human name, not the raw
+  // enablement-key tail.
+  if (entry.flag) return entry.flag.feature.name;
   return SETTING_LABELS[entry.setting.key] ?? entry.setting.key.replace(/^[^.]+\./, '');
 }