@pellux/goodvibes-tui 2.0.21 → 2.1.0

package/src/renderer/context-status-hint.ts

@@ -31,18 +31,18 @@
  *   2. The window is one the provider vouched for, not the fallback constant.
  *      A model whose real window happens to equal the fallback is
  *      indistinguishable from "not resolved yet", and in that ambiguity
- *      staying quiet is the honest choice, the Tokens panel and /context
+ *      staying quiet is the honest choice, the Usage modal and /context
  *      still show the real numbers either way.
  * Neither guard touches 'compacting', which reports work that is provably
  * running rather than a prediction about headroom.
  */
 
 import { DEFAULT_CONTEXT_WINDOW } from '@pellux/goodvibes-sdk/platform/providers';
-import type { PanelSessionMaintenanceLevel } from '../panels/session-maintenance.ts';
+import type { ViewSessionMaintenanceLevel } from '../views/session-maintenance.ts';
 
 interface ContextStatusHintOptions {
   /** Maintenance level from evaluateSessionMaintenance. */
-  readonly level: PanelSessionMaintenanceLevel;
+  readonly level: ViewSessionMaintenanceLevel;
   /** Whether auto-compaction is active (threshold > 0 in config). */
   readonly autoCompactEnabled: boolean;
   /** Current usage percent 0–100. */
@@ -104,7 +104,7 @@ function buildContextStatusHint(options: ContextStatusHintOptions): string | nul
  */
 export function resolveContextStatusHint(input: {
   readonly evaluate: (args: { readonly currentTokens: number; readonly contextWindow: number }) => {
-    readonly level: PanelSessionMaintenanceLevel;
+    readonly level: ViewSessionMaintenanceLevel;
     readonly autoCompactEnabled: boolean;
     readonly usagePct: number;
   };

package/src/renderer/conversation-layout.ts

@@ -81,3 +81,23 @@ export function replaceViewportWithOverlay(
   next.push(...overlay);
   return next;
 }
+
+/**
+ * Center the non-blank rows of a viewport vertically (the home splash). A
+ * body that already fills the height is returned unchanged.
+ */
+export function centerViewportContent(viewport: readonly Line[], height: number, width: number): Line[] {
+  const isBlank = (line: Line): boolean => line.every((cell) => cell.char === ' ' || cell.char === '');
+  const first = viewport.findIndex((line) => !isBlank(line));
+  if (first < 0) return [...viewport];
+  let last = viewport.length - 1;
+  while (last > first && isBlank(viewport[last]!)) last--;
+  const body = viewport.slice(first, last + 1);
+  if (body.length >= height) return [...viewport];
+  const top = Math.floor((height - body.length) / 2);
+  const out: Line[] = [];
+  for (let i = 0; i < top; i++) out.push(createEmptyLine(width));
+  out.push(...body);
+  while (out.length < height) out.push(createEmptyLine(width));
+  return out;
+}

package/src/renderer/conversation-overlays.ts

@@ -20,6 +20,10 @@ import { renderBlockActionsMenu } from './block-actions-overlay.ts';
 import { renderAutocompleteOverlay } from './autocomplete-overlay.ts';
 import { renderOnboardingWizard } from './onboarding/onboarding-wizard.ts';
 import { overlayViewportBottom, replaceViewportWithOverlay } from './conversation-layout.ts';
+import type { SurfaceLayer } from './surface-kit.ts';
+import { layerToLines } from './surface-kit-extra.ts';
+import { renderToasts } from './surface-kit-parts.ts';
+import { getSharedToastCenter } from './toast-center.ts';
 
 export interface ConversationOverlayContext {
   readonly input: InputHandler;
@@ -31,44 +35,39 @@ export interface ConversationOverlayContext {
   readonly contextWindow?: number;
 }
 
+/** True while a modal covers the screen, so the composer-anchored popups stay hidden. */
+function modalOpen(input: InputHandler): boolean {
+  return input.modelPicker.active || input.settingsModal.active || input.configModal.active || input.mcpWorkspace.active
+    || input.sessionPickerModal.active || input.profilePickerModal.active || input.bookmarkModal.active
+    || input.blockActionsMenu.active || input.selectionModal.active || input.contextInspectorModal.active
+    || input.helpOverlayActive || input.shortcutsOverlayActive || input.surfaceModals.active;
+}
+
+/**
+ * The parts of the conversation area that are rows rather than modals:
+ * onboarding (which owns the whole viewport), the @ and slash popups anchored
+ * to the composer (never dimmed: you are still typing), and the search bars.
+ * Every modal is a layer instead, see buildConversationLayers.
+ */
 export function applyConversationOverlays(
   viewport: Line[],
   context: ConversationOverlayContext,
 ): Line[] {
-  const { input, conversation, commandRegistry, keybindingsManager, conversationWidth, viewportHeight, contextWindow } = context;
+  const { input, conversationWidth, viewportHeight } = context;
   let next = viewport;
   const bottomDockInset = 1 + (input.searchManager.active || input.historySearch.active ? 1 : 0);
-
-  // Overlay posture rule: workspaces (onboarding, model, settings, mcp, help,
-  // shortcuts) claim the full viewport and are mutually exclusive with docked
-  // pickers/modals. Once a fullscreen workspace claims the screen, no docked
-  // overlay is drawn on top of it, enforcing a single visible overlay even if
-  // stray state survives the handler's clearModalStack. The input layer keeps
-  // the modal stack to one entry; this is the renderer-side backstop.
-  let fullscreenClaimed = false;
+  const covered = modalOpen(input);
 
   if (input.onboardingWizard.active) {
-    const lines = renderOnboardingWizard(input.onboardingWizard, conversationWidth, viewportHeight);
-    next = replaceViewportWithOverlay(lines, conversationWidth, viewportHeight);
-    fullscreenClaimed = true;
+    const layer = renderOnboardingWizard(input.onboardingWizard, conversationWidth, viewportHeight);
+    next = replaceViewportWithOverlay(layerToLines(layer, conversationWidth, viewportHeight), conversationWidth, viewportHeight);
   }
 
-  if (!fullscreenClaimed && input.filePicker.active) {
+  if (!input.onboardingWizard.active && !covered && input.filePicker.active) {
     const lines = renderFilePickerOverlay(input.filePicker, conversationWidth, viewportHeight);
     next = overlayViewportBottom(next, lines, conversationWidth, viewportHeight, bottomDockInset);
   }
 
-  if (input.modelPicker.active) {
-    const lines = renderModelWorkspace(input.modelPicker, conversationWidth, viewportHeight);
-    next = replaceViewportWithOverlay(lines, conversationWidth, viewportHeight);
-    fullscreenClaimed = true;
-  }
-
-  if (!fullscreenClaimed && input.selectionModal.active) {
-    const lines = renderSelectionModalOverlay(input.selectionModal, conversationWidth, viewportHeight);
-    next = overlayViewportBottom(next, lines, conversationWidth, viewportHeight, bottomDockInset);
-  }
-
   if (input.searchManager.active) {
     next.push(...renderSearchOverlay(input.searchManager, conversationWidth));
   }
@@ -77,66 +76,7 @@ export function applyConversationOverlays(
     next.push(...renderHistorySearchOverlay(input.historySearch, conversationWidth));
   }
 
-  // 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.
-
-  if (!fullscreenClaimed && input.contextInspectorModal.active) {
-    const lines = renderContextInspector(conversation, conversationWidth, viewportHeight, contextWindow);
-    next = overlayViewportBottom(next, lines, conversationWidth, viewportHeight, bottomDockInset);
-  }
-
-  if (input.settingsModal.active) {
-    const lines = renderSettingsModal(input.settingsModal, conversationWidth, viewportHeight);
-    next = replaceViewportWithOverlay(lines, conversationWidth, viewportHeight);
-    fullscreenClaimed = true;
-  }
-
-  if (!fullscreenClaimed && input.configModal.active) {
-    const lines = renderConfigModal(input.configModal, conversationWidth, viewportHeight);
-    next = replaceViewportWithOverlay(lines, conversationWidth, viewportHeight);
-    fullscreenClaimed = true;
-  }
-
-  if (input.mcpWorkspace.active) {
-    const lines = renderMcpWorkspace(input.mcpWorkspace, conversationWidth, viewportHeight);
-    next = replaceViewportWithOverlay(lines, conversationWidth, viewportHeight);
-    fullscreenClaimed = true;
-  }
-
-  if (!fullscreenClaimed && input.sessionPickerModal.active) {
-    const lines = renderSessionPickerModal(input.sessionPickerModal, conversationWidth, viewportHeight);
-    next = overlayViewportBottom(next, lines, conversationWidth, viewportHeight, bottomDockInset);
-  }
-
-  if (!fullscreenClaimed && input.profilePickerModal.active) {
-    const lines = renderProfilePickerModal(input.profilePickerModal, conversationWidth, viewportHeight);
-    next = overlayViewportBottom(next, lines, conversationWidth, viewportHeight, bottomDockInset);
-  }
-
-  if (!fullscreenClaimed && input.bookmarkModal.active) {
-    const lines = renderBookmarkModal(input.bookmarkModal, conversationWidth, viewportHeight);
-    next = overlayViewportBottom(next, lines, conversationWidth, viewportHeight, bottomDockInset);
-  }
-
-  if (!fullscreenClaimed && input.blockActionsMenu.active) {
-    const lines = renderBlockActionsMenu(input.blockActionsMenu, conversationWidth, viewportHeight);
-    next = overlayViewportBottom(next, lines, conversationWidth, viewportHeight, bottomDockInset);
-  }
-
-  if (input.helpOverlayActive) {
-    const lines = renderHelpOverlay(conversationWidth, keybindingsManager, commandRegistry.getAll(), input.helpScrollOffset, viewportHeight);
-    next = replaceViewportWithOverlay(lines, conversationWidth, viewportHeight);
-    fullscreenClaimed = true;
-  }
-
-  if (input.shortcutsOverlayActive) {
-    const lines = renderShortcutsOverlay(conversationWidth, keybindingsManager, input.shortcutsScrollOffset, viewportHeight);
-    next = replaceViewportWithOverlay(lines, conversationWidth, viewportHeight);
-    fullscreenClaimed = true;
-  }
-
-  if (!fullscreenClaimed && input.commandMode && input.autocomplete?.isActive) {
+  if (!input.onboardingWizard.active && !covered && input.commandMode && input.autocomplete?.isActive) {
     const lines = renderAutocompleteOverlay(input.autocomplete, conversationWidth, viewportHeight);
     if (lines.length > 0) {
       next = overlayViewportBottom(next, lines, conversationWidth, viewportHeight, bottomDockInset);
@@ -145,3 +85,73 @@ export function applyConversationOverlays(
 
   return next;
 }
+
+export interface ConversationLayerContext {
+  readonly input: InputHandler;
+  readonly conversation: ConversationManager;
+  readonly commandRegistry: CommandRegistry;
+  readonly keybindingsManager: KeybindingsManager;
+  /** Full terminal size: modals are sized against the whole screen. */
+  readonly screenWidth: number;
+  readonly screenHeight: number;
+  readonly contextWindow?: number;
+  /** The permission dialog, when a request is waiting (drawn above the other modals). */
+  readonly permission?: SurfaceLayer | null;
+  /** Rows at the top of the screen held by the header (and the session chips row); toasts start below them. */
+  readonly headerRows?: number;
+  /** Rows at the bottom of the screen held by the footer (the throbber and its empty row while main works, the composer, the status line); toasts stay above them. */
+  readonly footerRows?: number;
+}
+
+type ModalEntry = readonly [name: string, active: boolean, render: () => SurfaceLayer | null];
+
+/**
+ * Modal surfaces drawn with the surface kit, as layers the compositor stamps
+ * over the dimmed screen (surface-compose.ts). Normally one modal is open;
+ * when one opens another (settings opening the model picker or a theme
+ * picker), both are drawn in the order they were opened (the input layer's
+ * modal stack), the newer on top, each dimming what is under it. Kit-host
+ * modals (command palette, confirm dialog), the permission dialog and toasts
+ * sit above all of them.
+ */
+export function buildConversationLayers(context: ConversationLayerContext): SurfaceLayer[] {
+  const { input, screenWidth: w, screenHeight: h } = context;
+  // Onboarding owns the screen; only the pickers it launches draw over it.
+  const onboarding = input.onboardingWizard.active;
+  const entries: ModalEntry[] = [
+    ['modelPicker', input.modelPicker.active, () => renderModelWorkspace(input.modelPicker, w, h)],
+    ['settings', input.settingsModal.active, () => renderSettingsModal(input.settingsModal, w, h)],
+    ['mcpWorkspace', input.mcpWorkspace.active, () => renderMcpWorkspace(input.mcpWorkspace, w, h)],
+    ['config', !onboarding && input.configModal.active, () => renderConfigModal(input.configModal, w, h)],
+    ['sessionPicker', !onboarding && input.sessionPickerModal.active, () => renderSessionPickerModal(input.sessionPickerModal, w, h)],
+    ['profilePicker', !onboarding && input.profilePickerModal.active, () => renderProfilePickerModal(input.profilePickerModal, w, h)],
+    ['bookmark', !onboarding && input.bookmarkModal.active, () => renderBookmarkModal(input.bookmarkModal, w, h)],
+    ['blockActions', !onboarding && input.blockActionsMenu.active, () => renderBlockActionsMenu(input.blockActionsMenu, w, h)],
+    ['contextInspector', !onboarding && input.contextInspectorModal.active,
+      () => renderContextInspector(context.conversation, w, h, context.contextWindow, input.contextInspectorModal)],
+    ['selection', input.selectionModal.active, () => renderSelectionModalOverlay(input.selectionModal, w, h)],
+    ['help', input.helpOverlayActive,
+      () => renderHelpOverlay(w, h, context.keybindingsManager, context.commandRegistry.getAll(), input.helpScrollOffset, input.overlayFilters.help)],
+    ['shortcuts', input.shortcutsOverlayActive,
+      () => renderShortcutsOverlay(w, h, context.keybindingsManager, input.shortcutsScrollOffset, input.overlayFilters.shortcuts)],
+  ];
+  const active = entries.filter(([, isActive]) => isActive);
+  // Opened order first (the modal stack), then any active modal the stack does not name.
+  const rank = (name: string): number => {
+    const index = input.modalStack.indexOf(name);
+    return index >= 0 ? index : input.modalStack.length + entries.findIndex(([n]) => n === name);
+  };
+  active.sort((a, b) => rank(a[0]) - rank(b[0]));
+  const layers: SurfaceLayer[] = [];
+  for (const [, , render] of active) {
+    const layer = render();
+    if (layer) layers.push(layer);
+  }
+  // Kit modals (command palette, confirm dialog, ...) stack on top of everything.
+  layers.push(...input.surfaceModals.render(w, h));
+  if (context.permission) layers.push(context.permission);
+  // Toasts sit above everything and are never dimmed, between the header and the footer.
+  const toasts = renderToasts(w, h, getSharedToastCenter().visible(), { top: context.headerRows ?? 1, bottom: h - (context.footerRows ?? 2) });
+  if (toasts) layers.push(toasts);
+  return layers;
+}

package/src/renderer/conversation-surface.ts

@@ -2,7 +2,13 @@ import { type Line, createEmptyLine, createStyledCell } from '@pellux/goodvibes-
 import { getDisplayWidth, wrapText } from '../utils/terminal-width.ts';
 import { LAYOUT } from './layout.ts';
 import { GLYPHS } from './ui-primitives.ts';
-import { foldPreviewText, treeBranchCol, treeContentCol } from '@pellux/goodvibes-terminal-shell';
+import { foldPreviewText } from '@pellux/goodvibes-terminal-shell';
+
+/** Column of a transcript event row's marker (the ● of a flush row). */
+const MARKER_COL = LAYOUT.LEFT_MARGIN - 1;
+/** Column where the row's segment run begins (segments carry their own leading blank). */
+const CONTENT_COL = MARKER_COL + 2;
+import { activeTokens } from './theme.ts';
 
 export interface ConversationSurfacePalette {
   readonly accent: string;
@@ -103,18 +109,11 @@ export function renderConversationFragment(
   content: string,
   width: number,
   palette: ConversationFragmentPalette,
-  indentCols = 0,
 ): Line[] {
-  // A tree fragment is a continuation of the row above it, so it starts at that
-  // row's content column, which puts its ` ▸ ` prefix glyph in exactly the same
-  // column as the parent row's own ` ▸ N lines ` badge. A flush fragment (a user
-  // message ghost box) keeps the box margin it has always used.
-  const indent = Math.max(0, indentCols);
-  const margin = indent > 0 ? treeContentCol(indent) : LAYOUT.USER_BOX_MARGIN;
+  // A fragment (a user message ghost box) keeps the box margin it has always used.
+  const margin = LAYOUT.USER_BOX_MARGIN;
   const prefixWidth = getDisplayWidth(palette.prefix);
-  // The indent is charged to the content budget rather than allowed to push the
-  // fragment past the right edge, a narrow terminal shrinks the preview text
-  // instead of silently truncating its tail.
+  // A narrow terminal shrinks the preview text instead of silently truncating its tail.
   const maxContentWidth = Math.max(1, width - margin - LAYOUT.USER_BOX_MARGIN - prefixWidth - 2);
   const wrapped = wrapText(content, maxContentWidth);
   const contentWidth = wrapped.length > 0 ? Math.max(...wrapped.map((line) => getDisplayWidth(line))) : 0;
@@ -193,19 +192,18 @@ export function renderConversationFoldedRow(
   tone: ConversationEventTone,
   details: readonly ConversationStatusSegment[],
   preview: string,
-  indentCols = 0,
 ): Line {
   // What is left of the row after the marker, the label and the badges.
   const usedCols = (tone.label ? getDisplayWidth(` ${tone.label} `) : 0)
     + details.reduce((sum, segment) => sum + getDisplayWidth(segment.text), 0);
-  const availCols = width - LAYOUT.RIGHT_MARGIN - treeContentCol(Math.max(0, indentCols)) - usedCols - 1;
+  const availCols = width - LAYOUT.RIGHT_MARGIN - CONTENT_COL - usedCols - 1;
   // Whether a preview renders at all, and its flattening, are the policy's call
   // (foldPreviewText returns null for "no preview"). Only the TRUNCATION is
   // ours: display width is a product-local rule the policy deliberately leaves
   // to the caller, and it must truncate, never wrap.
   const trimmed = foldPreviewText(preview, availCols);
   if (trimmed === null) {
-    return renderConversationEventLine(width, tone, details, indentCols);
+    return renderConversationEventLine(width, tone, details);
   }
   const text = getDisplayWidth(trimmed) > availCols
     ? `${trimmed.slice(0, Math.max(1, availCols - 1))}…`
@@ -213,12 +211,11 @@ export function renderConversationFoldedRow(
   return renderConversationEventLine(
     width,
     tone,
-    [...details, { text: `${text} `, fg: tone.detailFg ?? '244', dim: true }],
-    indentCols,
+    [...details, { text: `${text} `, fg: activeTokens().textFaint }],
   );
 }
 
-export function renderConversationStatusLine(
+function renderConversationStatusLine(
   width: number,
   segments: readonly ConversationStatusSegment[],
   options: {
@@ -226,29 +223,17 @@ export function renderConversationStatusLine(
     readonly markerFg?: string;
     readonly markerBg?: string;
     readonly bodyBg?: string;
-    /**
-     * Tree-branch indent in columns (see conversation-tree.ts). Shifts the
-     * marker and content columns together, so a branch row keeps the same
-     * marker→content relationship a flush row has. Callers pass an indent
-     * already clamped by treeIndentCols(), so this never eats the content
-     * budget below the guaranteed minimum.
-     */
-    readonly indentCols?: number;
   } = {},
 ): Line {
   const line = createEmptyLine(width);
-  const indent = Math.max(0, options.indentCols ?? 0);
-  // Both columns come from conversation-tree.ts so a flush row and a branch row
-  // sit on one grid: the marker where its depth's glyph belongs, the segment run
-  // two columns further right.
-  const markerCol = treeBranchCol(indent);
-  const startCol = treeContentCol(indent);
+  const markerCol = MARKER_COL;
+  const startCol = CONTENT_COL;
   const endCol = Math.max(startCol, width - LAYOUT.RIGHT_MARGIN);
   const marker = options.marker ?? '▌';
   const markerWidth = getDisplayWidth(marker);
   if (markerCol >= 0 && markerCol < width && markerWidth > 0) {
     const markerStyle = {
-      fg: options.markerFg ?? '#64748b',
+      fg: options.markerFg ?? activeTokens().textMuted,
       bg: options.markerBg ?? options.bodyBg ?? '',
       bold: true,
     };
@@ -277,12 +262,9 @@ export function renderConversationEventLine(
   width: number,
   tone: ConversationEventTone,
   details: readonly ConversationStatusSegment[] = [],
-  indentCols = 0,
 ): Line {
-  // An empty label is legitimate on a branch row: the tree already says what
-  // the row is (a result hanging under its call), so repeating "tool result"
-  // on every one of them is exactly the boilerplate this layout removes. The
-  // row then leads with its own first informative detail segment.
+  // An empty label is legitimate: the row then leads with its own first
+  // informative detail segment.
   const labelSegments = tone.label
     ? [{ text: ` ${tone.label} `, fg: tone.labelFg, bold: true }]
     : [];
@@ -298,7 +280,6 @@ export function renderConversationEventLine(
     {
       marker: tone.marker,
       markerFg: tone.markerFg,
-      indentCols,
     },
   );
 }

package/src/renderer/diff-tint.ts

@@ -0,0 +1,98 @@
+/**
+ * diff-tint.ts, row tints for a diff that stay visible on the fill they sit on.
+ *
+ * The theme's diff tokens (diffAddedBg, diffRemovedBg and their line-number
+ * variants) are tuned against the terminal background. A diff drawn inside a
+ * lighter element inset can land within a few color units of them: gruvbox
+ * light's added row is 7 units from its element fill, rosepine light's removed
+ * line-number tint 5. Those rows read as untinted.
+ *
+ * visibleTint keeps the theme's token whenever it is far enough from the fill.
+ * When it is not, it pushes the token further from the fill along the same
+ * direction (the same hue shift, just stronger), and when the token carries
+ * no usable direction it mixes the fill toward the diff's sign color instead.
+ */
+
+import { mixHex } from '@pellux/goodvibes-sdk/platform/presentation';
+import { activeDiffTones, activeTokens } from './theme.ts';
+
+/**
+ * Smallest Euclidean sRGB distance (0..441) between a diff row's tint and the
+ * fill under it. A flat fill change becomes noticeable side by side at about 8
+ * units; a full-width row has to read as tinted at a glance, from across the
+ * modal, so the floor is three times that. For reference, GitHub dark's own
+ * added-row tint sits about 20 units from its canvas and reads as faint.
+ */
+const MIN_DIFF_TINT_DISTANCE = 24;
+
+type Rgb = readonly [number, number, number];
+
+function parse(hex: string): Rgb | null {
+  const m = /^#([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return null;
+  const n = parseInt(m[1]!, 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+
+function toHex(c: Rgb): string {
+  return `#${c.map((v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0')).join('')}`;
+}
+
+/** Euclidean distance between two #rrggbb colors (0 when either does not parse). */
+function colorDistance(a: string, b: string): number {
+  const ca = parse(a);
+  const cb = parse(b);
+  if (!ca || !cb) return 0;
+  return Math.hypot(ca[0] - cb[0], ca[1] - cb[1], ca[2] - cb[2]);
+}
+
+/**
+ * `token` when it is at least `floor` from `fill`; otherwise the closest color
+ * that is, found first along the token's own direction from the fill, then by
+ * mixing the fill toward `tone` (the diff sign color). Colors that do not parse
+ * come back unchanged.
+ */
+function visibleTint(token: string, fill: string, tone: string, floor = MIN_DIFF_TINT_DISTANCE): string {
+  const t = parse(token);
+  const f = parse(fill);
+  if (!t || !f) return token;
+  const len = Math.hypot(t[0] - f[0], t[1] - f[1], t[2] - f[2]);
+  if (len >= floor) return token;
+  // Aim one unit past the floor so rounding to whole channels never lands short.
+  const target = floor + 1;
+  if (len >= 4) {
+    const k = target / len;
+    const pushed = toHex([f[0] + (t[0] - f[0]) * k, f[1] + (t[1] - f[1]) * k, f[2] + (t[2] - f[2]) * k]);
+    if (colorDistance(pushed, fill) >= floor) return pushed;
+  }
+  const full = colorDistance(tone, fill);
+  if (full <= 0) return token;
+  return mixHex(fill, tone, Math.min(1, target / full));
+}
+
+export interface DiffRowTints {
+  readonly addedRow: string;
+  readonly removedRow: string;
+  readonly addedGutter: string;
+  readonly removedGutter: string;
+}
+
+const tintCache = new Map<string, DiffRowTints>();
+
+/** The active theme's diff tints, each kept visible on `fill` (the inset the diff sits on). */
+export function diffRowTints(fill: string): DiffRowTints {
+  const t = activeTokens();
+  const tones = activeDiffTones();
+  const key = [fill, t.diffAddedBg, t.diffRemovedBg, t.diffAddedLineNumberBg, t.diffRemovedLineNumberBg, tones.add, tones.del].join('|');
+  const cached = tintCache.get(key);
+  if (cached) return cached;
+  const tints: DiffRowTints = {
+    addedRow: visibleTint(t.diffAddedBg, fill, tones.add),
+    removedRow: visibleTint(t.diffRemovedBg, fill, tones.del),
+    addedGutter: visibleTint(t.diffAddedLineNumberBg, fill, tones.add),
+    removedGutter: visibleTint(t.diffRemovedLineNumberBg, fill, tones.del),
+  };
+  if (tintCache.size > 64) tintCache.clear();
+  tintCache.set(key, tints);
+  return tints;
+}

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

@@ -1,101 +1,74 @@
-import { type Line } from '@pellux/goodvibes-sdk/platform/types';
-import { fitDisplay, getDisplayWidth, truncateDisplay } from '../utils/terminal-width.ts';
-import type { FilePickerModal } from '../input/file-picker.ts';
-import {
-  createOverlayBoxLayout,
-  createOverlayContentLine,
-  createOverlayFilledBorderLine,
-  DEFAULT_OVERLAY_PALETTE,
-  OVERLAY_GLYPHS,
-  putOverlayText,
-} from './overlay-box.ts';
-import { getOverlaySurfaceMetrics } from './overlay-viewport.ts';
-
 /**
- * Render the file picker modal as Line[] for overlay in the viewport.
- * Shows a bordered box with fuzzy-matched file results.
+ * renderFilePickerOverlay, the @ file popup.
+ *
+ * Anchored to the composer with no dimming, the same shape as the slash
+ * popup (┃ bar, surface fill, no frame, no hint rows). Its first row is the
+ * typed query ("@ query▏" and the match count), since the query lives in the
+ * picker rather than the composer. Fuzzy-matched letters of the file name are
+ * drawn in the brand color; the directory part is dimmer than the name, so
+ * the path dims toward the root.
  */
+
+import type { Line } from '@pellux/goodvibes-sdk/platform/types';
+import type { FilePickerModal } from '../input/file-picker.ts';
+import { activeTokens } from './theme.ts';
+import { renderPopup } from './surface-kit-parts.ts';
+import type { KitRow, KitSpan } from './surface-kit-list.ts';
+
+function popupRows(viewportHeight: number): number {
+  return Math.max(4, Math.min(12, Math.floor(viewportHeight * 0.5)));
+}
+
+/** Split a path into directory and name spans, marking the query's letters (in order) in the name. */
+function fileSpans(file: string, query: string, selected: boolean): KitSpan[] {
+  const t = activeTokens();
+  const trimmed = file.endsWith('/') ? file.slice(0, -1) : file;
+  const cut = trimmed.lastIndexOf('/') + 1;
+  const dir = file.slice(0, cut);
+  const name = file.slice(cut);
+  const spans: KitSpan[] = [];
+  if (dir) spans.push({ text: dir, fg: t.textFaint });
+  const wanted = [...query.toLowerCase()].filter((ch) => ch !== ' ');
+  let q = 0;
+  let run = '';
+  let runHit = false;
+  const flush = (): void => {
+    if (run) spans.push({ text: run, fg: runHit && !selected ? t.brand : t.text, bold: selected || runHit });
+    run = '';
+  };
+  for (const ch of name) {
+    const hit = q < wanted.length && ch.toLowerCase() === wanted[q];
+    if (hit) q++;
+    if (run && hit !== runHit) flush();
+    runHit = hit;
+    run += ch;
+  }
+  flush();
+  return spans;
+}
+
 export function renderFilePickerOverlay(
   picker: FilePickerModal,
   width: number,
   viewportHeight = 24,
 ): Line[] {
-  const lines: Line[] = [];
-  const metrics = getOverlaySurfaceMetrics(width, viewportHeight, {
-    chromeRows: 4,
-    maxWidth: 70,
-    minContentRows: 6,
-    maxContentRows: 10,
-  });
-  const layout = createOverlayBoxLayout(width, metrics.margin, metrics.boxWidth);
-  const contentW = layout.innerWidth;
-  const borderFg = DEFAULT_OVERLAY_PALETTE.borderFg;
-  const titleFg = DEFAULT_OVERLAY_PALETTE.titleFg;
-  const bodyFg = DEFAULT_OVERLAY_PALETTE.bodyFg;
-  const mutedFg = DEFAULT_OVERLAY_PALETTE.mutedFg;
-  const selectedBg = DEFAULT_OVERLAY_PALETTE.selectedBg;
-
-  // Title bar
-  const titleLine = createOverlayFilledBorderLine(width, layout, OVERLAY_GLYPHS.topLeft, OVERLAY_GLYPHS.horizontal, OVERLAY_GLYPHS.topRight, borderFg, DEFAULT_OVERLAY_PALETTE.titleBg);
-  putOverlayText(titleLine, layout.margin + 2, layout.width - 4, 'Select File', { fg: titleFg, bold: true });
-  lines.push(titleLine);
-
-  // Search input
-  const queryDisplay = picker.query || '';
-  const searchLine = createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.inputBg);
-  const searchPrefix = '@ ';
-  const queryText = fitDisplay(`${queryDisplay}${picker.searchFocused ? OVERLAY_GLYPHS.cursor : ''}`, Math.max(0, contentW - getDisplayWidth(searchPrefix)));
-  putOverlayText(searchLine, layout.margin + 2, getDisplayWidth(searchPrefix), searchPrefix, { fg: picker.searchFocused ? bodyFg : mutedFg });
-  putOverlayText(searchLine, layout.margin + 2 + getDisplayWidth(searchPrefix), contentW - getDisplayWidth(searchPrefix), queryText, { fg: picker.query.length > 0 || picker.searchFocused ? bodyFg : mutedFg });
-  lines.push(searchLine);
-
-  // Separator
-  lines.push(createOverlayFilledBorderLine(width, layout, OVERLAY_GLYPHS.teeLeft, OVERLAY_GLYPHS.horizontal, OVERLAY_GLYPHS.teeRight, borderFg, DEFAULT_OVERLAY_PALETTE.sectionBg));
-
-  // Results
+  const t = activeTokens();
+  const count = picker.results.length === 0 ? '' : `${picker.results.length} file${picker.results.length === 1 ? '' : 's'}`;
+  const header: KitRow = {
+    spans: [
+      { text: `@${picker.query}`, fg: t.text, bold: true },
+      { text: '▏', fg: t.brand },
+    ],
+    right: count || undefined,
+  };
+  const rows: KitRow[] = [];
   if (picker.results.length === 0) {
-      const noResults = createOverlayContentLine(width, layout, borderFg, DEFAULT_OVERLAY_PALETTE.bodyBg);
-    putOverlayText(noResults, layout.margin + 2, contentW, fitDisplay('No matching files', contentW), { fg: '244', dim: true });
-    lines.push(noResults);
+    rows.push({ label: picker.query ? 'No matching files' : 'Loading files…', muted: true });
   } else {
-    const maxVisible = metrics.contentRows;
-    let startIdx = 0;
-    if (picker.results.length > maxVisible) {
-      startIdx = Math.max(0, Math.min(
-        picker.selectedIndex - Math.floor(maxVisible / 2),
-        picker.results.length - maxVisible,
-      ));
-    }
-    const endIdx = Math.min(startIdx + maxVisible, picker.results.length);
-
-    for (let i = startIdx; i < endIdx; i++) {
-      const file = picker.results[i];
-      const isSelected = i === picker.selectedIndex;
-      const indicator = isSelected ? `${OVERLAY_GLYPHS.selected} ` : '  ';
-      const displayFile = getDisplayWidth(file) > contentW - 2
-        ? truncateDisplay(file, contentW - 2)
-        : file;
-      const line = createOverlayContentLine(width, layout, borderFg, isSelected ? selectedBg : DEFAULT_OVERLAY_PALETTE.bodyBg);
-      putOverlayText(
-        line,
-        layout.margin + 2,
-        contentW,
-        fitDisplay(indicator + fitDisplay(displayFile, contentW - 2), contentW),
-        {
-          fg: isSelected ? titleFg : file.endsWith('/') ? titleFg : bodyFg,
-          bg: isSelected ? selectedBg : DEFAULT_OVERLAY_PALETTE.bodyBg,
-          bold: isSelected,
-        },
-      );
-      lines.push(line);
-    }
+    picker.results.forEach((file, index) => {
+      const selected = index === picker.selectedIndex;
+      rows.push({ spans: fileSpans(file, picker.query, selected), selected });
+    });
   }
-
-  // Bottom border with hints
-  const hints = '[Up/Down] Navigate  [/] Search  [Enter] Select  [Esc] Cancel';
-  const bottomLine = createOverlayFilledBorderLine(width, layout, OVERLAY_GLYPHS.bottomLeft, OVERLAY_GLYPHS.horizontal, OVERLAY_GLYPHS.bottomRight, borderFg, DEFAULT_OVERLAY_PALETTE.sectionBg);
-  putOverlayText(bottomLine, layout.margin + 2, layout.width - 4, truncateDisplay(hints, layout.width - 4), { fg: mutedFg, dim: true });
-  lines.push(bottomLine);
-
-  return lines;
+  return renderPopup({ width, rows, header, maxRows: popupRows(viewportHeight), scrollOwner: picker }).lines;
 }