@pellux/goodvibes-tui 2.0.20 → 2.1.0

package/src/renderer/overlay-viewport.ts

@@ -1,104 +0,0 @@
-import { getSurfaceContentRows } from './surface-layout.ts';
-
-export type OverlayWidthClass = 'narrow' | 'medium' | 'wide';
-
-export function getOverlayWidthClass(viewportWidth: number): OverlayWidthClass {
-  if (viewportWidth < 88) return 'narrow';
-  if (viewportWidth < 120) return 'medium';
-  return 'wide';
-}
-
-export interface OverlayViewportBudgetOptions {
-  readonly chromeRows: number;
-  readonly minContentRows?: number;
-  readonly maxContentRows?: number;
-  readonly targetRatio?: number;
-  readonly minTotalRows?: number;
-  readonly maxTotalRows?: number;
-}
-
-export function getOverlayContentBudget(
-  viewportHeight: number,
-  options: OverlayViewportBudgetOptions,
-): number {
-  const safeViewportHeight = Math.max(8, viewportHeight);
-  const defaultTargetTotalRows = Math.max(12, Math.min(Math.max(12, safeViewportHeight - 3), Math.round(safeViewportHeight * (options.targetRatio ?? 0.45))));
-  const minTotalRows = options.minTotalRows ?? 12;
-  const maxTotalRows = options.maxTotalRows ?? Math.max(minTotalRows, Math.min(22, safeViewportHeight - 2));
-  const targetTotalRows = Math.max(
-    minTotalRows,
-    Math.min(maxTotalRows, defaultTargetTotalRows),
-  );
-  return getSurfaceContentRows({
-    viewportHeight,
-    chromeRows: options.chromeRows,
-    minContentRows: options.minContentRows,
-    maxContentRows: options.maxContentRows,
-    targetRatio: 1,
-    minTotalRows: targetTotalRows,
-    maxTotalRows: targetTotalRows,
-  });
-}
-
-export function getOverlayMaxWidth(
-  terminalWidth: number,
-  margin: number,
-  requestedMaxWidth: number,
-): number {
-  const safeRequested = Math.max(24, requestedMaxWidth);
-  const reservedSideSpace = margin * 2;
-  const viewportBounded = Math.max(24, terminalWidth - reservedSideSpace);
-  return Math.min(safeRequested, viewportBounded);
-}
-
-export interface OverlaySurfaceMetricsOptions {
-  readonly margin?: number;
-  readonly maxWidth?: number;
-  readonly chromeRows: number;
-  readonly minContentRows?: number;
-  readonly maxContentRows?: number;
-  readonly targetRatio?: number;
-  readonly minTotalRows?: number;
-  readonly maxTotalRows?: number;
-}
-
-export interface OverlaySurfaceMetrics {
-  readonly margin: number;
-  readonly boxWidth: number;
-  readonly contentWidth: number;
-  readonly contentRows: number;
-}
-
-export function getStableOverlayContentRows(
-  contentRows: number,
-  minRows = 10,
-): number {
-  return Math.max(contentRows, minRows);
-}
-
-export function getOverlaySurfaceMetrics(
-  viewportWidth: number,
-  viewportHeight: number,
-  options: OverlaySurfaceMetricsOptions,
-): OverlaySurfaceMetrics {
-  // Keep overlays comfortably inset from shell panels and avoid wide, low-information modals.
-  const widthClass = getOverlayWidthClass(viewportWidth);
-  const margin = options.margin ?? (widthClass === 'wide' ? 6 : 4);
-  const defaultMaxWidth = widthClass === 'wide' ? 84 : widthClass === 'medium' ? 78 : 72;
-  const boxWidth = getOverlayMaxWidth(viewportWidth, margin, options.maxWidth ?? defaultMaxWidth);
-  const contentRows = getOverlayContentBudget(viewportHeight, {
-    chromeRows: options.chromeRows,
-    minContentRows: options.minContentRows ?? 8,
-    maxContentRows: options.maxContentRows ?? 14,
-    targetRatio: options.targetRatio ?? 0.45,
-    minTotalRows: options.minTotalRows,
-    maxTotalRows: options.maxTotalRows,
-  });
-
-  return {
-    margin,
-    boxWidth,
-    contentWidth: Math.max(1, boxWidth - 4),
-    contentRows,
-  };
-}

package/src/renderer/panel-composite.ts

@@ -1,145 +0,0 @@
-import type { Line } from '@pellux/goodvibes-sdk/platform/types';
-import type { Panel } from '../panels/types.ts';
-import type { InputHandler } from '../input/handler.ts';
-import type { PanelManager } from '../panels/panel-manager.ts';
-import type { PanelCompositeData } from './compositor.ts';
-import { createSplitPaneLayout } from './layout-engine.ts';
-import { renderPanelWorkspaceBar } from './panel-workspace-bar.ts';
-
-/**
- * Per-panel render cache for dirty-flag skipping.
- *
- * Maintainability hazard, mid-render invalidation race:
- *
- * If an event listener (e.g. a runtime-bus subscriber) fires DURING a panel's
- * `render()` call and mutates state such that `needsRender = true`, the
- * trailing `panel.markRendered()` below will clobber that invalidation back
- * to `false`, causing the next frame to serve stale cached output until
- * something else invalidates the panel.
- *
- * In practice this is rare because `render()` is synchronous and short, and
- * runtime-bus listeners that mutate panel state typically run outside the
- * render pass. Panels that DO expect to mutate from within their own render
- * path (e.g. deferred lazy-load) should call `this.invalidate()` AFTER the
- * trailing work so the next frame picks it up.
- *
- * The fix (now applied): snapshot `needsRender` before calling `render()` and
- * only call `markRendered()` when no concurrent invalidation occurred during
- * the render pass, preserving any mid-render invalidation.
- */
-interface PanelRenderCache {
-  lines: Line[];
-  width: number;
-  height: number;
-}
-const panelRenderCache = new WeakMap<Panel, PanelRenderCache>();
-/**
- * Per-panel render-generation counter. Incremented whenever invalidate() fires
- * on the panel (tracked here externally since Panel does not expose a version).
- * We monkey-patch each panel the first time it enters renderPanel() by wrapping
- * its invalidate() to bump the counter stored in this map.
- *
- * Race-guard: snapshot the generation before render(), compare after. If it
- * changed, a mid-render invalidation occurred, leave needsRender=true.
- */
-const panelRenderGen = new WeakMap<Panel, { gen: number }>();
-
-function getRenderGenState(panel: Panel): { gen: number } {
-  let state = panelRenderGen.get(panel);
-  if (!state) {
-    state = { gen: 0 };
-    panelRenderGen.set(panel, state);
-    // Wrap invalidate() to bump generation counter.
-    const origInvalidate = panel.invalidate.bind(panel);
-    panel.invalidate = () => {
-      state!.gen++;
-      origInvalidate();
-    };
-  }
-  return state;
-}
-
-/** 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) {
-    return cached.lines;
-  }
-  // Snapshot render-generation counter BEFORE calling render(). If an event
-  // listener fires during render() and calls panel.invalidate(), the generation
-  // counter will be bumped. We compare after render to detect mid-render races.
-  const genState = getRenderGenState(panel);
-  const genBefore = genState.gen;
-  const lines = panel.render(width, height);
-  // Only call markRendered() when no mid-render invalidation occurred.
-  // If the generation changed during render(), a concurrent invalidate() fired,
-  // leave needsRender=true so the next frame re-renders with the new state.
-  if (genState.gen === genBefore) {
-    panel.markRendered();
-  }
-  // If gen changed, needsRender is already true (invalidate() set it); do not
-  // call markRendered(), the next frame will pick it up.
-  panelRenderCache.set(panel, { lines, width, height });
-  return lines;
-}
-
-export interface PanelCompositeBuildResult {
-  readonly panelData?: PanelCompositeData;
-  readonly panelWidth?: number;
-}
-
-export function buildPanelCompositeData(
-  panelManager: PanelManager,
-  input: InputHandler,
-  panelWidth: number,
-  panelHeight: number,
-): PanelCompositeBuildResult {
-  if (!panelManager.isVisible() || panelManager.getAllOpen().length === 0 || panelWidth <= 0) {
-    return {};
-  }
-
-  const topPane = panelManager.getTopPane();
-  const bottomPane = panelManager.getBottomPane();
-  const focusedPane = panelManager.getFocusedPane();
-  const workspaceTabs = panelManager.getWorkspaceTabs();
-  const verticalSplitRatio = panelManager.getVerticalSplitRatio();
-  const hasBottom = panelManager.isBottomPaneVisible() && bottomPane.panels.length > 0;
-  const workspaceBar = renderPanelWorkspaceBar(workspaceTabs, panelWidth, input.panelFocused);
-
-  let topContent: Line[];
-  let bottomContent: Line[] | undefined;
-
-  const topActivePanel = topPane.panels[topPane.activeIndex] ?? null;
-
-  if (hasBottom) {
-    // Single consolidated workspace bar (1 row) + h-separator (1 row); the rest
-    // splits between the two panes' content.
-    const paneLayout = createSplitPaneLayout(Math.max(0, panelHeight - 1), verticalSplitRatio, {
-      topTabRows: 0,
-      bottomTabRows: 0,
-    });
-    const topH = paneLayout.topContentRows;
-    const bottomH = paneLayout.bottomContentRows;
-    topContent = topActivePanel ? renderPanel(topActivePanel, panelWidth, topH) : [];
-
-    const bottomActivePanel = bottomPane.panels[bottomPane.activeIndex] ?? null;
-    bottomContent = bottomActivePanel ? renderPanel(bottomActivePanel, panelWidth, bottomH) : [];
-  } else {
-    const topH = Math.max(0, panelHeight - 1);
-    topContent = topActivePanel ? renderPanel(topActivePanel, panelWidth, topH) : [];
-  }
-
-  return {
-    panelData: {
-      workspaceBar,
-      topContent,
-      topFocused: input.panelFocused && focusedPane === 'top',
-      hasBottomPane: hasBottom,
-      bottomContent,
-      bottomFocused: input.panelFocused && focusedPane === 'bottom',
-      separator: true,
-      verticalSplitRatio,
-    },
-    panelWidth,
-  };
-}

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

@@ -1,54 +0,0 @@
-import type { Line } from '@pellux/goodvibes-sdk/platform/types';
-import type { WorkspaceTab } from '../panels/panel-manager.ts';
-import { renderTabStrip, type TabHitRegion } from './tab-strip.ts';
-import { UI_TONES } from './ui-primitives.ts';
-
-// Theme tokens (no raw hex), keeps the bar in sync with the shared palette.
-const ACTIVE_FG = UI_TONES.fg.primary;       // selected tab text
-const ACTIVE_BG = UI_TONES.bg.selected;      // selected tab fill (stronger contrast)
-const INACTIVE_FG = UI_TONES.fg.muted;       // unselected tabs
-const SEPARATOR_FG = UI_TONES.fg.dim;        // │ separators
-const LABEL_FG = UI_TONES.fg.secondary;      // PANELS prefix label
-const LABEL_BG = UI_TONES.bg.title;          // prefix label background when focused
-const FOCUS_ACCENT_FG = UI_TONES.state.active; // the one focused tab
-
-export function renderPanelWorkspaceBar(
-  tabs: readonly WorkspaceTab[],
-  width: number,
-  focused: boolean,
-  onLayout?: (regions: readonly TabHitRegion[]) => void,
-): Line {
-  return renderTabStrip({
-    width,
-    onLayout,
-    tabs: tabs.map((tab, i) => ({
-      // tab.active = selected in its own pane (drives highlighted background).
-      // tab.focused = has keyboard focus (drives brighter text / focus indicator).
-      // A tab can be active-but-not-focused (selected in the unfocused pane) or
-      // active-and-focused (selected in the focused pane).
-      //
-      // 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
-      // binding (tabs past nine have no Alt+N chord, so no index is shown).
-      label: `${tab.pane === 'bottom' ? '▼' : '▲'}${i < 9 ? ` ⌥${i + 1}` : ''} ${tab.icon} ${tab.name}${tab.focused ? ' ▸' : ''}`,
-      active: tab.active,
-    })),
-    prefixLabel: ' PANELS ',
-    suffixLabel: ` ${tabs.length} `,
-    style: {
-      activeFg: ACTIVE_FG,
-      activeBg: ACTIVE_BG,
-      activeBold: focused,
-      inactiveFg: INACTIVE_FG,
-      separatorFg: SEPARATOR_FG,
-      // Accent the PANELS chip when focused so it ties to the focus border.
-      labelFg: focused ? FOCUS_ACCENT_FG : LABEL_FG,
-      labelBg: focused ? LABEL_BG : '',
-      labelBold: focused,
-      overflowFg: SEPARATOR_FG,
-      trailingFg: INACTIVE_FG,
-    },
-  });
-}

package/src/renderer/process-indicator.ts

@@ -1,163 +0,0 @@
-import { type Line } from '@pellux/goodvibes-sdk/platform/types';
-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';
-import { voiceCaptureRowVisible, type VoiceCaptureIndicatorState } from '../core/voice-capture-status.ts';
-
-/**
- * renderProcessIndicator, shows a one-line summary of active background
- * processes below the input area.
- *
- * Dimmed when no processes are active, highlighted (cyan) when agents or
- * 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. (item 5d.)
- */
-function agentCountLabel(agentCount: number): string {
-  return `${agentCount} agent${agentCount !== 1 ? 's' : ''} active`;
-}
-
-export function renderProcessIndicator(
-  width: number,
-  agentCount: number,
-  toolCount: number,
-  focused: boolean = false,
-  agentProgress?: string,
-): Line[] {
-  const total = agentCount + toolCount;
-  const renderPlainStatus = (text: string, style: { fg: string; bold?: boolean; dim?: boolean }): Line[] => (
-    [UIFactory.stringToLine(`   ${text}`, width, style)]
-  );
-  const renderFocusedStatus = (text: string): Line[] => {
-    const bg = '#31506f';
-    const fg = '#eefaff';
-    const markerFg = UI_TONES.accent.browser;
-    const line = UIFactory.stringToLine(' '.repeat(width), width, { fg: '238' });
-    const prefix = `${GLYPHS.navigation.selected} `;
-    const body = truncateDisplay(text, Math.max(0, width - 8), '');
-    const highlighted = ` ${prefix}${body} `;
-    const startX = 2;
-    for (let i = 0; i < highlighted.length && startX + i < width - 2; i++) {
-      const ch = highlighted[i]!;
-      const isMarker = i < prefix.length + 1;
-      line[startX + i].char = ch;
-      line[startX + i].fg = isMarker ? markerFg : fg;
-      line[startX + i].bg = bg;
-      line[startX + i].bold = true;
-      line[startX + i].dim = false;
-    }
-    return [line];
-  };
-
-  // --- Focused state: always render before idle/active branches ---
-  if (focused) {
-    const parts: string[] = [];
-    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' }])}`
-      : `${parts.join(` ${GLYPHS.navigation.pipeSeparator} `)}  ${formatHints([{ key: 'Enter', verb: 'Open' }, { key: 'Esc', verb: 'Back to input' }])}`;
-    return renderFocusedStatus(label);
-  }
-
-  if (total === 0) {
-    return renderPlainStatus('No background processes', { fg: '238', dim: true });
-  }
-
-  // Build the label: "bg: 2 agents | Turn 3 | write - src/foo.ts"
-  const parts: string[] = [];
-  if (agentCount > 0) {
-    parts.push(agentCountLabel(agentCount));
-  }
-  if (toolCount > 0) {
-    parts.push(`${toolCount} tool${toolCount !== 1 ? 's' : ''} running`);
-  }
-  // Append the first running agent's progress (truncated to fit)
-  /**
-   * Number of columns reserved for the agent count label and hint text.
-   * Breakdown: "bg: N agents" prefix (~15 chars) + " | " separator (~3)
-   * + "  [Enter] View  " hint (~16) + padding (~9) ≈ 43 chars.
-   */
-  const PROGRESS_RESERVED_CHARS = 43;
-  const progressMaxLen = Math.max(0, width - PROGRESS_RESERVED_CHARS); // reserve space for count + hint
-  // Truncate by display width (not JS string length) so wide/CJK glyphs in the
-  // agent progress text don't overflow the reserved budget.
-  const progressSuffix = agentProgress && progressMaxLen > 10
-    ? ` | ${truncateDisplay(agentProgress, progressMaxLen, '...')}`
-    : '';
-  const label = `${parts.join(` ${GLYPHS.navigation.pipeSeparator} `)}${progressSuffix}`;
-  const hint = `  ${formatHints([{ key: 'Enter', verb: 'View' }])}`;
-  return renderPlainStatus(`${label}${hint}`, { fg: activeUiTones().accent.brand, bold: true });
-}
-
-/**
- * Sentence each capture state renders as. Written out per state rather than
- * assembled from fragments because these are the words that tell a user whether
- * their microphone is open, "listening" and "recording" mean different things
- * and a row that blurred them would be worse than no row.
- */
-const VOICE_CAPTURE_LABELS: Record<VoiceCaptureIndicatorState['kind'], string> = {
-  requesting: 'opening the microphone',
-  recording: 'recording: press the voice-input key again to stop',
-  transcribing: 'transcribing what you said',
-  'wake-listening': 'listening for the wake phrase',
-  'wake-capturing': 'wake heard: recording what follows',
-  'wake-restarting': 'capture stream ended: restarting',
-  'wake-latched': 'wake detection stopped',
-};
-
-/**
- * renderVoiceCaptureIndicator, the persistent row shown while a microphone is
- * open, below the input area beside the process indicator.
- *
- * It exists because a held-open capture device is otherwise invisible: wake
- * detection runs for as long as the feature is on, and nothing else on screen
- * would say so. `voice.wake.indicator` chooses between `statusline` (one dim
- * row), `banner` (a highlighted row that is hard to miss) and `off`; a
- * push-to-talk recording always renders, because the user pressed a key one
- * moment ago and is waiting on it.
- *
- * Returns no lines when nothing is captured, or when the wake rows are turned
- * off, the caller splices whatever comes back, so an empty array is "no row".
- */
-export function renderVoiceCaptureIndicator(
-  width: number,
-  state: VoiceCaptureIndicatorState | null,
-): Line[] {
-  if (!voiceCaptureRowVisible(state) || state === null) return [];
-  const tones = activeUiTones();
-  const marker = state.kind === 'wake-latched' ? GLYPHS.status.blocked : GLYPHS.status.active;
-  const device = state.deviceLabel !== null ? ` ${GLYPHS.navigation.pipeSeparator} ${state.deviceLabel}` : '';
-  const extra = state.detail !== undefined && state.detail.length > 0
-    ? ` ${GLYPHS.navigation.pipeSeparator} ${state.detail}`
-    : '';
-  const body = `${marker} Voice: ${VOICE_CAPTURE_LABELS[state.kind]}${device}${extra}`;
-  const isWakeRow = state.kind.startsWith('wake-');
-  const fg = state.kind === 'wake-latched' || state.kind === 'wake-restarting'
-    ? tones.chrome.warn
-    : tones.accent.control;
-
-  if (isWakeRow && state.indicator === 'banner') {
-    // The prominent variant: the row is filled to the terminal width on the
-    // footer background so it reads as a standing condition, not a passing note.
-    const line = UIFactory.stringToLine(' '.repeat(width), width, { fg: tones.chrome.faint });
-    const text = ` ${truncateDisplay(body, Math.max(0, width - 4), '…')} `;
-    for (let i = 0; i < text.length && 1 + i < width - 1; i++) {
-      const cell = line[1 + i]!;
-      cell.char = text[i]!;
-      cell.fg = fg;
-      cell.bg = tones.bg.footer;
-      cell.bold = true;
-      cell.dim = false;
-    }
-    return [line];
-  }
-  return [UIFactory.stringToLine(`   ${truncateDisplay(body, Math.max(0, width - 4), '…')}`, width, { fg, bold: true })];
-}

package/src/renderer/tab-strip.ts

@@ -1,222 +0,0 @@
-import type { Line } from '@pellux/goodvibes-sdk/platform/types';
-import { getDisplayWidth } from '../utils/terminal-width.ts';
-import { buildStyledPanelLine, type StyledPanelSegment } from '../panels/polish.ts';
-
-export interface TabStripItem {
-  readonly label: string;
-  readonly active?: boolean;
-}
-
-export interface TabStripStyle {
-  readonly activeFg: string;
-  readonly activeBg?: string;
-  readonly activeBold?: boolean;
-  readonly inactiveFg: string;
-  readonly inactiveBg?: string;
-  readonly separatorFg: string;
-  readonly labelFg?: string;
-  readonly labelBg?: string;
-  readonly labelBold?: boolean;
-  readonly overflowFg?: string;
-  readonly trailingFg?: string;
-}
-
-/** Absolute column range a rendered tab occupies, for click hit-testing. */
-export interface TabHitRegion {
-  /** Index into the original `tabs` array. */
-  readonly index: number;
-  /** First column (inclusive) the tab occupies on the line. */
-  readonly startCol: number;
-  /** Last column (exclusive) the tab occupies on the line. */
-  readonly endCol: number;
-}
-
-export interface TabStripConfig {
-  readonly width: number;
-  readonly tabs: readonly TabStripItem[];
-  readonly style: TabStripStyle;
-  readonly prefixLabel?: string;
-  readonly suffixLabel?: string;
-  /** Right-side overflow glyph (more tabs after the window). Default '›'. */
-  readonly overflowIndicator?: string;
-  /** Left-side overflow glyph (more tabs before the window). Default '‹'. */
-  readonly overflowIndicatorLeft?: string;
-  /**
-   * Optional callback invoked with the absolute column ranges of each rendered
-   * tab. Used by the compositor to hit-test mouse clicks onto tabs. Additive,
-   * the function still returns a `Line` so existing callers are unaffected.
-   */
-  readonly onLayout?: (regions: readonly TabHitRegion[]) => void;
-}
-
-const SEPARATOR = '│';
-
-interface WindowResult {
-  segments: StyledPanelSegment[];
-  /** Per-tab column ranges relative to the start of the tab block. */
-  regions: Array<{ index: number; startCol: number; endCol: number }>;
-  overflowLeft: boolean;
-  overflowRight: boolean;
-}
-
-/**
- * Build the visible tab segments, windowed so the ACTIVE tab is always shown.
- *
- * Tabs are laid out left-to-right, but when they don't all fit we keep a
- * contiguous window that contains the active tab and grow it outward (biased
- * toward following tabs) until the budget is exhausted. Left/right overflow is
- * reported so the caller can render `‹`/`›` indicators.
- */
-function makeSegments(
-  tabs: readonly TabStripItem[],
-  style: TabStripStyle,
-  maxWidth: number,
-  indicatorWidth: number,
-): WindowResult {
-  const empty: WindowResult = { segments: [], regions: [], overflowLeft: false, overflowRight: false };
-  if (tabs.length === 0 || maxWidth <= 0) return empty;
-
-  const sepWidth = getDisplayWidth(SEPARATOR);
-  // Per-tab entry width: leading separator + (bracketed if active) label + trailing space.
-  const labelText = (tab: TabStripItem) => (tab.active ? `[${tab.label}]` : tab.label);
-  const entryWidths = tabs.map((tab) => sepWidth + getDisplayWidth(labelText(tab)) + 1);
-
-  const activeIndex = Math.max(0, tabs.findIndex((t) => t.active));
-  const n = tabs.length;
-  const closing = sepWidth; // trailing │ after the last visible tab
-  const totalAll = entryWidths.reduce((a, b) => a + b, 0) + closing;
-
-  let start = activeIndex;
-  let end = activeIndex; // inclusive
-  let used = entryWidths[activeIndex] + closing;
-
-  if (totalAll <= maxWidth) {
-    // Everything fits, show all tabs, no windowing.
-    start = 0;
-    end = n - 1;
-  } else {
-    // Need windowing. Reserve room for indicators on whichever side still has
-    // hidden tabs; the reserve is recomputed each step so reaching an edge
-    // frees its indicator column.
-    const budget = maxWidth;
-    let leftDone = start === 0;
-    let rightDone = end === n - 1;
-    let preferRight = true;
-
-    const fits = (extra: number, nextStart: number, nextEnd: number) => {
-      const leftRes = nextStart > 0 ? indicatorWidth : 0;
-      const rightRes = nextEnd < n - 1 ? indicatorWidth : 0;
-      return used + extra + leftRes + rightRes <= budget;
-    };
-
-    while (!leftDone || !rightDone) {
-      const goRight = !rightDone && (preferRight || leftDone);
-      if (goRight) {
-        const ne = end + 1;
-        if (fits(entryWidths[ne], start, ne)) {
-          end = ne;
-          used += entryWidths[ne];
-          if (end === n - 1) rightDone = true;
-          preferRight = false;
-        } else {
-          rightDone = true;
-        }
-      } else if (!leftDone) {
-        const ns = start - 1;
-        if (fits(entryWidths[ns], ns, end)) {
-          start = ns;
-          used += entryWidths[ns];
-          if (start === 0) leftDone = true;
-          preferRight = true;
-        } else {
-          leftDone = true;
-        }
-      } else {
-        break;
-      }
-    }
-  }
-
-  const segments: StyledPanelSegment[] = [];
-  const regions: Array<{ index: number; startCol: number; endCol: number }> = [];
-  let col = 0;
-  for (let i = start; i <= end; i++) {
-    const tab = tabs[i];
-    const text = labelText(tab);
-    const entryStart = col;
-    segments.push({ text: SEPARATOR, fg: style.separatorFg });
-    segments.push({
-      text: `${text} `,
-      fg: tab.active ? style.activeFg : style.inactiveFg,
-      bg: tab.active ? style.activeBg : style.inactiveBg,
-      bold: tab.active ? (style.activeBold ?? false) : false,
-    });
-    col += entryWidths[i];
-    regions.push({ index: i, startCol: entryStart, endCol: col });
-  }
-  // Closing separator.
-  segments.push({ text: SEPARATOR, fg: style.separatorFg });
-
-  return {
-    segments,
-    regions,
-    overflowLeft: start > 0,
-    overflowRight: end < n - 1,
-  };
-}
-
-export function renderTabStrip(config: TabStripConfig): Line {
-  const {
-    width,
-    tabs,
-    style,
-    prefixLabel,
-    suffixLabel,
-    overflowIndicator = '›',
-    overflowIndicatorLeft = '‹',
-    onLayout,
-  } = config;
-
-  const prefixWidth = prefixLabel ? getDisplayWidth(prefixLabel) + 1 : 0;
-  const reservedSuffixWidth = suffixLabel ? getDisplayWidth(suffixLabel) : 0;
-  const indicatorWidth = Math.max(
-    getDisplayWidth(overflowIndicator),
-    getDisplayWidth(overflowIndicatorLeft),
-  );
-  const maxTabWidth = Math.max(0, width - prefixWidth - reservedSuffixWidth);
-
-  const baseSegments: StyledPanelSegment[] = [];
-  if (prefixLabel) {
-    baseSegments.push({
-      text: prefixLabel,
-      fg: style.labelFg ?? style.inactiveFg,
-      bg: style.labelBg,
-      bold: style.labelBold ?? false,
-    });
-    baseSegments.push({ text: ' ', fg: style.separatorFg });
-  }
-
-  const { segments: tabSegments, regions, overflowLeft, overflowRight } =
-    makeSegments(tabs, style, maxTabWidth, indicatorWidth);
-
-  const leftSegments: StyledPanelSegment[] = [];
-  if (overflowLeft) {
-    leftSegments.push({ text: overflowIndicatorLeft, fg: style.overflowFg ?? style.separatorFg });
-  }
-
-  const suffixSegments: StyledPanelSegment[] = [];
-  if (overflowRight) {
-    suffixSegments.push({ text: overflowIndicator, fg: style.overflowFg ?? style.separatorFg });
-  }
-  if (suffixLabel) {
-    suffixSegments.push({ text: suffixLabel, fg: style.trailingFg ?? style.inactiveFg });
-  }
-
-  // Report absolute hit regions: prefix + optional left indicator, then tabs.
-  if (onLayout) {
-    const offset = prefixWidth + (overflowLeft ? getDisplayWidth(overflowIndicatorLeft) : 0);
-    onLayout(regions.map((r) => ({ index: r.index, startCol: offset + r.startCol, endCol: offset + r.endCol })));
-  }
-
-  return buildStyledPanelLine(width, [...baseSegments, ...leftSegments, ...tabSegments, ...suffixSegments]);
-}