@pellux/goodvibes-tui 1.7.0 → 1.9.0

package/src/renderer/autocomplete-overlay.ts

@@ -81,12 +81,35 @@ export function renderAutocompleteOverlay(
   }
   const endIdx = Math.min(startIdx + maxVisible, total);
 
+  // UX-C 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.
+  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 });
+  }
+
   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);
 
-  for (let i = startIdx; i < endIdx; i++) {
+  for (const row of displayRows) {
+    if (row.type === 'separator') {
+      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 : '');
@@ -139,7 +162,10 @@ export function renderAutocompleteOverlay(
   }
 
   const footerLine = createOverlayContentLine(width, layout);
-  const hints = '[Tab] Complete  [Up/Down] Navigate  [Enter] Execute  [Esc] Cancel';
+  // UX-C 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';
   putText(
     footerLine,
     layout.margin + 2,

package/src/renderer/compositor.ts

@@ -5,11 +5,9 @@ import { getDisplayWidth } from '../utils/terminal-width.ts';
 import type { SearchManager } from '../input/search.ts';
 import { allowTerminalWrite } from '../runtime/terminal-output-guard.ts';
 import { probeTermCaps, type TermColorCaps } from './term-caps.ts';
-import { DARK_THEME } from './theme.ts';
+import { activeTheme } from './theme.ts';
 import { UI_TONES } from './ui-primitives.ts';
 
-const T = DARK_THEME;
-
 // Accent / dim colors for the panel focus border. The focused pane's left
 // border column is drawn in the accent tone; the unfocused pane stays dim.
 const PANEL_FOCUS_ACCENT = UI_TONES.state.active; // bright blue
@@ -252,6 +250,7 @@ export class Compositor {
 
       // Apply Search Match Highlighting Overlay (left side only)
       if (search && search.manager.active && search.manager.query.length > 0 && i >= offset) {
+        const T = activeTheme();
         const absoluteRow = search.scrollTop + (i - offset);
         const lineMatches = search.manager.getMatchesOnLine(absoluteRow);
         for (const match of lineMatches) {

package/src/renderer/config-modal.ts

@@ -1,10 +1,15 @@
 import type { Line } from '../types/grid.ts';
 import { ModalFactory, type ModalSection, type ModalTab } from './modal-factory.ts';
-import { resolveUiTones } from './theme.ts';
+import { getOverlayMaxWidth } from './overlay-viewport.ts';
+import { activeUiTones } from './theme.ts';
 import type { ConfigModal, ConfigModalRenderModel } from '../input/config-modal.ts';
 
-const TONES = resolveUiTones('dark');
-
+// Matches ModalFactory.createModal's own box-width computation (margin 4,
+// requested max width 76 — see renderConfigModalModel below) so the
+// wrap-clamp in ConfigModal.getRenderModel() measures against the SAME width
+// the list section will actually wrap at, at the current terminal size.
+const MODAL_MARGIN = 4;
+const MODAL_MAX_WIDTH = 76;
 /**
  * renderConfigModal — the single render path for every ConfigModalSurface.
  * Reads the host's frozen-structure-plus-live-values render model and maps it
@@ -17,12 +22,21 @@ 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);
-  const model = modal.getRenderModel();
+  // DEBT-5 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.
+  const boxW = Math.max(24, getOverlayMaxWidth(width, MODAL_MARGIN, MODAL_MAX_WIDTH));
+  const labelWrapWidth = Math.max(8, boxW - 4 - 2);
+  const model = modal.getRenderModel(labelWrapWidth);
   return renderConfigModalModel(model, width);
 }
 
 /** Pure model→Line[] mapping — the shared inner step of renderConfigModal. */
 function renderConfigModalModel(model: ConfigModalRenderModel, width: number): Line[] {
+  // Read the active-mode chrome tones per call (this render path is not on a
+  // hot loop; the modal renders once per keystroke).
+  const TONES = activeUiTones();
   const sections: ModalSection[] = [];
 
   if (model.degraded) {
@@ -69,7 +83,7 @@ function renderConfigModalModel(model: ConfigModalRenderModel, width: number): L
   return ModalFactory.createModal(
     {
       title: model.title,
-      width: 76,
+      width: MODAL_MAX_WIDTH,
       tabs,
       sections,
       targetContentRows,

package/src/renderer/footer-tips.ts

@@ -24,7 +24,11 @@ export function isAgentActive(composerStatus: string | undefined): boolean {
   return composerStatus !== undefined && ACTIVE_TURN_STATUSES.has(composerStatus);
 }
 
-const TIP_PANELS = 'Ctrl+P panels';
+// UX-C: 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.
+const TIP_PANELS = 'Ctrl+P toggle panels';
 // W6.2 e: F2 now opens the Fleet panel (the process modal was retired), so the
 // tip names 'fleet', not 'processes'.
 const TIP_PROCESSES = 'F2 fleet';

package/src/renderer/fullscreen-primitives.ts

@@ -2,30 +2,40 @@ import type { Line } from '../types/grid.ts';
 import { createEmptyLine, createStyledCell } from '../types/grid.ts';
 import { getDisplayWidth } from '../utils/terminal-width.ts';
 import { GLYPHS } from './ui-primitives.ts';
-import { resolveUiTones } from './theme.ts';
+import { activeUiTones, registerThemeRefresh } from './theme.ts';
 
-// FULLSCREEN_PALETTE is built from the mode-resolved chrome tones
-// (resolveUiTones) rather than the static UI_TONES constant — WO-001 single
-// read path. Mode is fixed to 'dark' until the terminal-bg-probe lands.
-const TONES = resolveUiTones('dark');
+// Built from the mode-resolved chrome tones (activeUiTones) and rebuilt IN PLACE
+// on a mode flip via the registered refresher (read by reference across the
+// fullscreen workspace surfaces — see theme.ts's active-mode runtime note).
+function buildFullscreenPalette(): Record<string, string> {
+  const t = activeUiTones();
+  return {
+    border: t.border,
+    title: t.accent.browser,
+    subtitle: t.accent.conversation,
+    text: t.fg.primary,
+    muted: t.fg.muted,
+    dim: t.border,
+    selectedBg: t.bg.selected,
+    categoryBg: t.bg.section,
+    contextBg: t.bg.surface,
+    controlsBg: t.bg.base,
+    footerBg: t.bg.footer,
+    good: t.state.good,
+    warn: t.state.warn,
+    bad: t.state.bad,
+    info: t.state.info,
+  };
+}
 
-export const FULLSCREEN_PALETTE = {
-  border: TONES.border,
-  title: TONES.accent.browser,
-  subtitle: TONES.accent.conversation,
-  text: TONES.fg.primary,
-  muted: TONES.fg.muted,
-  dim: TONES.border,
-  selectedBg: TONES.bg.selected,
-  categoryBg: TONES.bg.section,
-  contextBg: TONES.bg.surface,
-  controlsBg: TONES.bg.base,
-  footerBg: TONES.bg.footer,
-  good: TONES.state.good,
-  warn: TONES.state.warn,
-  bad: TONES.state.bad,
-  info: TONES.state.info,
-} as const;
+export const FULLSCREEN_PALETTE = buildFullscreenPalette() as {
+  readonly border: string; readonly title: string; readonly subtitle: string;
+  readonly text: string; readonly muted: string; readonly dim: string;
+  readonly selectedBg: string; readonly categoryBg: string; readonly contextBg: string;
+  readonly controlsBg: string; readonly footerBg: string; readonly good: string;
+  readonly warn: string; readonly bad: string; readonly info: string;
+};
+registerThemeRefresh(() => Object.assign(FULLSCREEN_PALETTE as Record<string, string>, buildFullscreenPalette()));
 
 export type FullscreenTextStyle = Partial<Omit<Line[number], 'char'>>;
 

package/src/renderer/git-status.ts

@@ -110,7 +110,9 @@ export class GitStatusProvider {
         statusResult.conflicted.length > 0 ||
         statusResult.not_added.length > 0;
       this.cache = {
-        branch: branchResult.current || '?',
+        // Empty `current` means an unborn HEAD — a repo with no commits yet.
+        // Show "new" instead of an unfriendly "?" for that first-run case. (5a)
+        branch: branchResult.current || 'new',
         dirty,
         ahead: statusResult.ahead ?? 0,
         behind: statusResult.behind ?? 0,

package/src/renderer/layout.ts

@@ -20,10 +20,6 @@ export const TOOL_STATUS = {
   TOOL_NAME_PAD: 8,
 } as const;
 
-export const COLORS = {
-  DIM_TEXT: UI_TONES.fg.dim,
-} as const;
-
 export const BORDERS = {
   THINKING: { char: '▌', color: UI_TONES.state.reasoning },
   ERROR:    { char: '▌', color: UI_TONES.state.bad },

package/src/renderer/markdown.ts

@@ -3,10 +3,11 @@ import { UIFactory } from './ui-factory.ts';
 import { renderCodeBlock } from './code-block.ts';
 import { getDisplayWidth } from '../utils/terminal-width.ts';
 import { LAYOUT } from './layout.ts';
-import { DARK_THEME } from './theme.ts';
+import { activeTheme } from './theme.ts';
 
-/** Module-level resolved token set (dark default; replace with resolveTheme(mode) when mode detection lands). */
-const T = DARK_THEME;
+// Transcript tokens are read live per render (const T = activeTheme() at the top
+// of each render function below) so a dark→light repaint re-resolves with no
+// module reload. See theme.ts's active-mode runtime note.
 
 export interface MarkdownRenderOptions {
   codeBlockLineNumbers?: boolean;
@@ -62,6 +63,7 @@ export function renderMarkdownTracked(
   width: number,
   options: MarkdownRenderOptions = {},
 ): { lines: ReturnType<typeof renderMarkdown>; codeBlocks: CodeBlockSpan[] } {
+  const T = activeTheme();
   const lines: ReturnType<typeof renderMarkdown> = [];
   const codeBlocks: CodeBlockSpan[] = [];
   const rawLines = text.split('\n');
@@ -236,6 +238,7 @@ function stripMarkdown(text: string): string {
  * truncates long content, and renders with proper styling.
  */
 function renderTable(rows: string[], width: number, indent: number): Line[] {
+  const T = activeTheme();
   const lines: Line[] = [];
 
   // Parse rows into cells, skip separator
@@ -542,6 +545,7 @@ function compositeInlineLine(
   prefixStyle: Partial<Cell>,
   textStartX: number
 ): Line[] {
+  const T = activeTheme();
   const lines: Line[] = [];
 
   // Flatten tokens to [char, style] pairs

package/src/renderer/modal-factory.ts

@@ -9,7 +9,7 @@ import {
 } from './overlay-box.ts';
 import { getOverlayMaxWidth } from './overlay-viewport.ts';
 import { GLYPHS } from './ui-primitives.ts';
-import { resolveUiTones } from './theme.ts';
+import { activeUiTones, registerThemeRefresh } from './theme.ts';
 import { HINT_SEPARATOR } from './hint-grammar.ts';
 
 // ── Helpers ──────────────────────────────────────────────────────────────────
@@ -92,25 +92,30 @@ export interface ModalConfig {
 
 // ── Defaults ─────────────────────────────────────────────────────────────────
 
-// DEFAULT_STYLE is built from the mode-resolved chrome tones (resolveUiTones)
-// rather than the static UI_TONES constant — WO-001 single read path. Mode is
-// fixed to 'dark' until the terminal-bg-probe lands.
-const TONES = resolveUiTones('dark');
-
-const DEFAULT_STYLE: Required<ModalStyle> = {
-  titleFg: TONES.fg.primary,
-  borderFg: TONES.fg.dim,
-  hintFg: TONES.fg.muted,
-  selectedFg: TONES.fg.primary,
-  selectedBg: TONES.bg.selected,
-  textFg: TONES.fg.primary,
-  accentFg: TONES.state.info,
-  titleRowFg: TONES.fg.secondary,
-  titleBg: TONES.bg.title,
-  sectionBg: TONES.bg.section,
-  inputBg: TONES.bg.input,
-  surfaceBg: TONES.bg.surface,
-};
+// DEFAULT_STYLE is built from the mode-resolved chrome tones (activeUiTones) and
+// rebuilt IN PLACE on a mode flip via the registered refresher. createModal reads
+// it per call via `{ ...DEFAULT_STYLE, ...config.style }`, so the in-place rebuild
+// reaches every modal — see theme.ts's active-mode runtime note.
+function buildDefaultModalStyle(): Required<ModalStyle> {
+  const t = activeUiTones();
+  return {
+    titleFg: t.fg.primary,
+    borderFg: t.fg.dim,
+    hintFg: t.fg.muted,
+    selectedFg: t.fg.primary,
+    selectedBg: t.bg.selected,
+    textFg: t.fg.primary,
+    accentFg: t.state.info,
+    titleRowFg: t.fg.secondary,
+    titleBg: t.bg.title,
+    sectionBg: t.bg.section,
+    inputBg: t.bg.input,
+    surfaceBg: t.bg.surface,
+  };
+}
+
+const DEFAULT_STYLE: Required<ModalStyle> = buildDefaultModalStyle();
+registerThemeRefresh(() => Object.assign(DEFAULT_STYLE, buildDefaultModalStyle()));
 
 // ── ModalFactory ─────────────────────────────────────────────────────────────
 

package/src/renderer/model-workspace.ts

@@ -189,7 +189,15 @@ function detailLines(picker: ModelPickerModal, width: number): string[] {
   } else {
     lines.push(`Context cap overrides the detected local-model context window for this selection.`);
   }
-  const filterText = `Search: ${picker.query || '(none)'} | Price: ${picker.categoryFilter} | Capability: ${picker.capabilityFilter} | Group: ${picker.groupBy} | Available only: ${picker.availableOnly ? 'yes' : 'no'}`;
+  // W3-T2: a visible cursor glyph on the query itself when search is focused —
+  // the only prior affordance was a footer-hint text swap ('/ search' vs.
+  // 'Typing filters search...'), buried at the end of a long hint line and
+  // easy to miss (confirmed via live tmux repro). This puts the "you are
+  // typing here" signal where the eye already is, on the Search: value.
+  const searchDisplay = picker.query.length > 0
+    ? `${picker.query}${picker.searchFocused ? GLYPHS.surface.cursor : ''}`
+    : (picker.searchFocused ? GLYPHS.surface.cursor : '(none)');
+  const filterText = `Search: ${searchDisplay} | Price: ${picker.categoryFilter} | Capability: ${picker.capabilityFilter} | Group: ${picker.groupBy} | Available only: ${picker.availableOnly ? 'yes' : 'no'}`;
   lines.push(filterText);
   return lines.flatMap((line) => wrapText(line, Math.max(1, width)));
 }
@@ -426,8 +434,15 @@ export function renderModelWorkspace(picker: ModelPickerModal, width: number, vi
 
   const footer = contentLine(safeWidth, PALETTE.footerBg);
   const targetHint = picker.focusPane === 'targets' ? 'Focus targets' : 'Focus list';
-  const searchHint = picker.searchFocused ? 'Typing filters search; Esc clears search' : '/ search';
-  const hints = `${targetHint} • Up/Down navigate • Left/Right pane • Enter select • ${searchHint} • Tab price • C caps • A available • B benchmark • G group • Esc close`;
+  // W3 Finding 2: while search is focused, every printable key (including
+  // c/a/b/g) types into the query — handler-picker-routes.ts guards those
+  // single-key shortcuts with `!searchFocused` (Up/Down blur search first).
+  // Advertising them here regardless of focus state was a footer that lied
+  // about what the keys currently do. Tab still cycles price in both states
+  // (its handler has no searchFocused guard), so it stays in both hint sets.
+  const hints = picker.searchFocused
+    ? `${targetHint} • Typing filters search; Esc clears search • Down: list shortcuts • Tab price • Esc close`
+    : `${targetHint} • Up/Down navigate • Left/Right pane • Enter select • / search • Tab price • C caps • A available • B benchmark • G group • Esc close`;
   writeText(footer, 2, safeWidth - 4, hints, { fg: PALETTE.muted, bg: PALETTE.footerBg });
   lines.push(footer);
   lines.push(borderLine(safeWidth, GLYPHS.frame.bottomLeft, GLYPHS.frame.horizontal, GLYPHS.frame.bottomRight));

package/src/renderer/overlay-box.ts

@@ -1,14 +1,9 @@
 import { createStyledCell, type Line } from '../types/grid.ts';
 import { getOverlayMaxWidth } from './overlay-viewport.ts';
 import { GLYPHS } from './ui-primitives.ts';
-import { resolveUiTones } from './theme.ts';
+import { activeUiTones, registerThemeRefresh } from './theme.ts';
 import { fillWidth, makeLine, writeText } from './fullscreen-primitives.ts';
 
-// DEFAULT_OVERLAY_PALETTE is built from the mode-resolved chrome tones
-// (resolveUiTones) rather than the static UI_TONES constant — WO-001 single
-// read path. Mode is fixed to 'dark' until the terminal-bg-probe lands.
-const TONES = resolveUiTones('dark');
-
 export interface OverlayBoxPalette {
   readonly borderFg: string;
   readonly titleFg: string;
@@ -21,17 +16,26 @@ export interface OverlayBoxPalette {
   readonly bodyBg: string;
 }
 
-export const DEFAULT_OVERLAY_PALETTE: Readonly<OverlayBoxPalette> = {
-  borderFg: TONES.fg.secondary,
-  titleFg: TONES.fg.primary,
-  bodyFg: TONES.fg.primary,
-  mutedFg: TONES.fg.dim,
-  selectedBg: TONES.bg.selected,
-  titleBg: TONES.bg.title,
-  sectionBg: TONES.bg.section,
-  inputBg: TONES.bg.input,
-  bodyBg: TONES.bg.surface,
-} as const;
+// Built from the mode-resolved chrome tones (activeUiTones) and rebuilt IN PLACE
+// on a mode flip via the registered refresher (60+ call sites read it by
+// reference — see theme.ts's active-mode runtime note).
+function buildOverlayPalette(): OverlayBoxPalette {
+  const t = activeUiTones();
+  return {
+    borderFg: t.fg.secondary,
+    titleFg: t.fg.primary,
+    bodyFg: t.fg.primary,
+    mutedFg: t.fg.dim,
+    selectedBg: t.bg.selected,
+    titleBg: t.bg.title,
+    sectionBg: t.bg.section,
+    inputBg: t.bg.input,
+    bodyBg: t.bg.surface,
+  };
+}
+
+export const DEFAULT_OVERLAY_PALETTE: Readonly<OverlayBoxPalette> = buildOverlayPalette();
+registerThemeRefresh(() => Object.assign(DEFAULT_OVERLAY_PALETTE as OverlayBoxPalette, buildOverlayPalette()));
 
 export interface OverlayBoxLayout {
   readonly margin: number;

package/src/renderer/process-indicator.ts

@@ -2,6 +2,7 @@ import { type Line } from '../types/grid.ts';
 import { UIFactory } from './ui-factory.ts';
 import { truncateDisplay } from '../utils/terminal-width.ts';
 import { GLYPHS, UI_TONES } from './ui-primitives.ts';
+import { activeUiTones } from './theme.ts';
 import { formatHints } from './hint-grammar.ts';
 
 /**
@@ -12,6 +13,16 @@ import { formatHints } from './hint-grammar.ts';
  * background exec processes are running. Includes an `[Enter] View` hint
  * (hint-grammar bracket form) when active.
  */
+/**
+ * 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.)
+ */
+function agentCountLabel(agentCount: number): string {
+  return `${agentCount} agent${agentCount !== 1 ? 's' : ''} active`;
+}
+
 export function renderProcessIndicator(
   width: number,
   agentCount: number,
@@ -47,7 +58,7 @@ export function renderProcessIndicator(
   // --- Focused state: always render before idle/active branches ---
   if (focused) {
     const parts: string[] = [];
-    if (agentCount > 0) parts.push(`${agentCount} agent${agentCount !== 1 ? 's' : ''}`);
+    if (agentCount > 0) parts.push(agentCountLabel(agentCount));
     if (toolCount > 0) parts.push(`${toolCount} tool${toolCount !== 1 ? 's' : ''} running`);
     const label = total === 0
       ? `No background processes  ${formatHints([{ key: 'Esc', verb: 'Back to input' }])}`
@@ -62,7 +73,7 @@ export function renderProcessIndicator(
   // Build the label: "bg: 2 agents | Turn 3 | write - src/foo.ts"
   const parts: string[] = [];
   if (agentCount > 0) {
-    parts.push(`${agentCount} agent${agentCount !== 1 ? 's' : ''}`);
+    parts.push(agentCountLabel(agentCount));
   }
   if (toolCount > 0) {
     parts.push(`${toolCount} tool${toolCount !== 1 ? 's' : ''} running`);
@@ -82,5 +93,5 @@ export function renderProcessIndicator(
     : '';
   const label = `${parts.join(` ${GLYPHS.navigation.pipeSeparator} `)}${progressSuffix}`;
   const hint = `  ${formatHints([{ key: 'Enter', verb: 'View' }])}`;
-  return renderPlainStatus(`${label}${hint}`, { fg: UI_TONES.accent.brand, bold: true });
+  return renderPlainStatus(`${label}${hint}`, { fg: activeUiTones().accent.brand, bold: true });
 }

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

@@ -189,7 +189,12 @@ export function renderSelectionModalOverlay(
 
   const footerLine = createOverlayContentLine(width, layout, BORDER_FG, DEFAULT_OVERLAY_PALETTE.sectionBg);
   const selectedItem = modal.getSelected();
-  const primaryVerb = selectedItem?.primaryAction === 'toggle'
+  // UX-C 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
+    ? `[Enter] ${modal.primaryVerbLabel}`
+    : selectedItem?.primaryAction === 'toggle'
     ? '[Enter] Toggle'
     : selectedItem?.primaryAction === 'edit'
     ? '[Enter] Edit'