@pellux/goodvibes-tui 2.0.21 → 2.1.1

package/src/renderer/config-modal.ts

@@ -1,95 +1,199 @@
-import type { Line } from '@pellux/goodvibes-sdk/platform/types';
-import { ModalFactory, type ModalSection, type ModalTab } from './modal-factory.ts';
-import { getOverlayMaxWidth } from './overlay-viewport.ts';
-import { activeUiTones } from './theme.ts';
-import type { ConfigModal, ConfigModalRenderModel } from '../input/config-modal.ts';
-
-// 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
- * onto ModalFactory.createModal (the same renderer settings-modal uses), so the
- * chrome, tab strip, list, and footer are one dialect across all migrated
- * surfaces. Pure: takes the modal's render model, returns Line[].
+ * renderConfigModal, the single render path for every ConfigModalSurface
+ * (hooks, plugins, marketplace, skills, security, policy, knowledge, memory,
+ * work plan, keybindings, pairing, planning, local auth, services, providers,
+ * remote, sandbox, settings sync, devices, subscription, provider health).
+ *
+ * Drawn with the modal surface kit: soft caps, ✦ title with the esc keycap,
+ * tabs (the active one carries the gradient), the always-live search row,
+ * the surface's posture lines, kit rows (group headers where the surface has
+ * sections, the selected row as the gradient), then status and notes, and the
+ * keycap hint row. Reads the host's frozen-structure-plus-live-values render
+ * model, so live ticks repaint values without moving rows.
  */
-export function renderConfigModal(modal: ConfigModal, width: number, height: number): Line[] {
-  // Size the visible row window to the available height so the list scrolls
-  // rather than overflowing (posture header + separator + chrome ≈ 8 rows).
-  const visible = Math.max(3, Math.min(16, height - 8));
-  modal.setViewportRows(visible);
-  // 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);
+
+import { activeTokens } from './theme.ts';
+import {
+  beginModal,
+  clipText,
+  finishModal,
+  modalGeometry,
+  searchRow,
+  scrollCountText,
+  MODAL_PAD_X,
+  type KitHint,
+  type ModalFrame,
+  type SurfaceLayer,
+} from './surface-kit.ts';
+import { drawRow, measureRow, type KitRow } from './surface-kit-list.ts';
+import {
+  drawTabRows,
+  drawTextBlock,
+  kitHintsFromStrings,
+  tabRowCount,
+  textBlockHeight,
+  type TextLine,
+} from './surface-kit-extra.ts';
+import type { ConfigModal, ConfigModalRenderModel, ConfigModalRenderRow } from '../input/config-modal.ts';
+
+function kitRowFor(row: ConfigModalRenderRow): KitRow {
+  const label = row.label.replace(/\n/g, ' ');
+  if (row.header) return { header: label };
+  return {
+    label,
+    selected: row.selected,
+    labelFg: row.style?.fg,
+    bold: row.style?.bold === true,
+    muted: row.stale,
+  };
+}
+
+interface Layout {
+  readonly hints: KitHint[];
+  readonly topLines: TextLine[];
+  readonly bottomLines: TextLine[];
+}
+
+function layoutFor(model: ConfigModalRenderModel): Layout {
+  const t = activeTokens();
+  const base: KitHint[] = [['↑↓', 'move']];
+  if (model.tabs.length > 1) base.push(['←→', 'tab']);
+  const { hints, notes } = kitHintsFromStrings(model.hints, base);
+  const topLines: TextLine[] = [];
+  if (model.degraded) topLines.push({ text: `⚠ ${model.degraded}`, style: { fg: t.warning, bold: true } });
+  for (const line of model.header) topLines.push({ text: line, style: { fg: t.textMuted } });
+  const bottomLines: TextLine[] = notes.map((text) => ({ text, style: { fg: t.textFaint } }));
+  if (model.status) bottomLines.push({ text: model.status, style: { fg: model.confirmPending ? t.warning : t.accent, bold: model.confirmPending } });
+  return { hints, topLines, bottomLines };
 }
 
-/** 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[] = [];
+/**
+ * Render the open config modal as a SurfaceLayer in screen coordinates.
+ * Also tells the host how many list rows fit (setViewportRows) so its
+ * row windowing matches what is drawn.
+ */
+export function renderConfigModal(modal: ConfigModal, screenWidth: number, screenHeight: number): SurfaceLayer {
+  const t = activeTokens();
+  const geometry = modalGeometry(screenWidth, screenHeight);
+  const textWidth = Math.max(1, geometry.w - 2 * MODAL_PAD_X);
+
+  // First pass: header, status and hints decide how many rows the list gets.
+  const first = modal.getRenderModel(textWidth);
+  const firstLayout = layoutFor(first);
+  const f0 = beginModal(screenWidth, screenHeight, { title: first.title || 'Settings', hints: firstLayout.hints });
+  const firstCompact = compactionFor(first, firstLayout, f0);
+  modal.setViewportRows(Math.max(3, listCapacity(first, firstLayout, f0, firstCompact)));
 
-  if (model.degraded) {
-    sections.push({ type: 'text', content: `⚠ ${model.degraded}`, style: { fg: TONES.state.warn, bold: true } });
-    sections.push({ type: 'separator' });
+  const model = modal.getRenderModel(textWidth);
+  const layout = layoutFor(model);
+  const f = beginModal(screenWidth, screenHeight, { title: model.title || 'Settings', hints: layout.hints });
+  const compact = compactionFor(model, layout, f);
+  const { canvas, l, r } = f;
+  const gap = compact.tight ? 0 : 1;
+
+  let y = f.top;
+  if (model.tabs.length > 1) {
+    const active = Math.max(0, model.tabs.findIndex((tab) => tab.active));
+    y += drawTabRows(canvas, l, y, model.tabs.map((tab) => tab.label), active, r) + gap;
   }
+  const activeTab = model.tabs.find((tab) => tab.active);
+  const placeholder = `Filter ${(activeTab?.label ?? 'rows').toLowerCase()}`;
+  const count = model.search.total === 0
+    ? ''
+    : model.search.query.length > 0
+      ? `${model.search.matched} of ${model.search.total}`
+      : `${model.search.total} ${model.search.total === 1 ? 'item' : 'items'}`;
+  searchRow(f, y, model.search.query, placeholder, count || undefined);
+  y += 1 + gap;
 
-  for (const line of model.header) {
-    sections.push({ type: 'text', content: line, style: { fg: TONES.fg.secondary } });
+  if (layout.topLines.length > 0 && !compact.dropTop) {
+    y = drawTextBlock(canvas, l, y, r - l + 1, layout.topLines, f.bottom) + 1;
   }
-  if (model.header.length > 0) sections.push({ type: 'separator' });
 
+  const bottomRows = bottomRowsFor(layout, r - l + 1);
+  const listBottom = f.bottom - bottomRows;
+  if (bottomRows > 0) drawTextBlock(canvas, l, listBottom + 2, r - l + 1, layout.bottomLines, f.bottom);
+
+  let cutLines = 0;
   if (model.rows.length === 0) {
-    sections.push({ type: 'text', content: model.emptyText ?? 'Nothing to show.', style: { fg: TONES.fg.muted, dim: true } });
+    drawTextBlock(canvas, l, y, r - l + 1, [{ text: model.emptyText ?? 'Nothing to show.', style: { fg: t.textMuted } }], listBottom);
   } else {
-    sections.push({
-      type: 'list',
-      items: model.rows.map((row) => ({
-        label: row.label,
-        selected: row.selected,
-        style: row.stale
-          ? { fg: TONES.fg.muted, dim: true }
-          : row.style,
-      })),
-    });
+    cutLines = drawRows(model, canvas, y, listBottom, l, r);
+  }
+
+  const above = model.scroll.offset;
+  const below = Math.max(0, model.scroll.total - model.scroll.offset - model.rows.length);
+  // A single row taller than the list is cut at its bottom; say so honestly.
+  const cut = cutLines > 0 ? `${cutLines} more ${cutLines === 1 ? 'line' : 'lines'} ↓` : '';
+  f.hintRight = [scrollCountText(above, below), cut].filter(Boolean).join(' · ');
+  return finishModal(f);
+}
+
+/** How the body gives way on short screens: posture lines go first, then the blank rows under tabs and search. */
+interface Compaction {
+  readonly dropTop: boolean;
+  readonly tight: boolean;
+}
+
+const MIN_LIST_ROWS = 3;
+
+function compactionFor(model: ConfigModalRenderModel, layout: Layout, f: ModalFrame): Compaction {
+  const steps: Compaction[] = [
+    { dropTop: false, tight: false },
+    { dropTop: true, tight: false },
+    { dropTop: true, tight: true },
+  ];
+  for (const step of steps) {
+    if (listCapacity(model, layout, f, step) >= MIN_LIST_ROWS) return step;
   }
+  return steps[steps.length - 1]!;
+}
+
+function listCapacity(model: ConfigModalRenderModel, layout: Layout, f: ModalFrame, compact: Compaction): number {
+  const width = f.r - f.l + 1;
+  const gap = compact.tight ? 0 : 1;
+  let y = f.top;
+  if (model.tabs.length > 1) y += tabRowCount(model.tabs.map((tab) => tab.label), f.l, f.r) + gap;
+  y += 1 + gap;
+  if (layout.topLines.length > 0 && !compact.dropTop) y += textBlockHeight(layout.topLines, width) + 1;
+  return f.bottom - y + 1 - bottomRowsFor(layout, width);
+}
 
-  const tabs: ModalTab[] | undefined = model.tabs.length > 1
-    ? model.tabs.map((t) => ({ label: t.label, active: t.active }))
-    : undefined;
-
-  // Keep the content region a stable height so live-value ticks never change
-  // the box size: frozen header + separator + the fixed visible-row window.
-  const targetContentRows =
-    (model.degraded ? 2 : 0) +
-    model.header.length +
-    (model.header.length > 0 ? 1 : 0) +
-    model.scroll.visible;
-
-  const helpers = model.status
-    ? [{ content: model.status, accent: true }]
-    : undefined;
-
-  return ModalFactory.createModal(
-    {
-      title: model.title,
-      width: MODAL_MAX_WIDTH,
-      tabs,
-      sections,
-      targetContentRows,
-      helpers,
-      hints: [...model.hints],
-    },
-    width,
-  );
+/** Rows kept under the list for notes and status (plus the blank row above them). */
+function bottomRowsFor(layout: Layout, width: number): number {
+  return layout.bottomLines.length > 0 ? textBlockHeight(layout.bottomLines, width) + 1 : 0;
 }
+
+function drawRows(
+  model: ConfigModalRenderModel,
+  canvas: ReturnType<typeof beginModal>['canvas'],
+  top: number,
+  bottom: number,
+  l: number,
+  r: number,
+): number {
+  const rows = model.rows.map(kitRowFor);
+  let cut = 0;
+  const capacity = Math.max(1, bottom - top + 1);
+  const needed = rows.reduce((n, row, k) => n + measureRow(row, l, r) + (k > 0 && row.header !== undefined ? 1 : 0), 0);
+  const gaps = needed <= capacity;
+  let y = top;
+  model.rows.forEach((source, k) => {
+    if (y > bottom) return;
+    const row = rows[k]!;
+    if (gaps && k > 0 && row.header !== undefined) y++;
+    if (y > bottom) return;
+    if (source.style?.bg) {
+      // Preformatted rows with their own background (the pairing QR code)
+      // are drawn cell for cell: wrapping would break the pattern.
+      canvas.put(l, y, clipText(source.label, r - l + 1), { fg: source.style.fg, bg: source.style.bg });
+      y++;
+      return;
+    }
+    const used = drawRow(canvas, y, row, l, r, bottom);
+    cut += measureRow(row, l, r) - used;
+    y += used;
+  });
+  return cut;
+}
+

package/src/renderer/confirm-dialog.ts

@@ -0,0 +1,50 @@
+/**
+ * renderConfirmDialog, a small centered dialog on the kit surface:
+ *
+ *   ✦ Delete session?                                     esc
+ *
+ *   This removes "test" and its 3 messages from this project.
+ *   It cannot be undone.
+ *
+ *                                        Cancel    Delete
+ *
+ * Content-sized and centered, over the dimmed screen. The confirming button
+ * carries the dialog's tone (red for destructive actions); the safe choice is
+ * on the left. The chosen button is filled, the other sits on the element fill.
+ */
+
+import type { ConfirmView } from '../input/confirm-dialog-types.ts';
+import { activeTokens } from './theme.ts';
+import { beginModal, finishModal, modalInnerWidth, standardModalWidth, wrapLines, type SurfaceLayer } from './surface-kit.ts';
+import { buttonWidth } from './surface-kit-parts.ts';
+
+/** Preferred width of a confirm dialog. */
+const CONFIRM_WIDTH = 64;
+
+export function renderConfirmDialog(dialog: ConfirmView, screenWidth: number, screenHeight: number): SurfaceLayer {
+  const t = activeTokens();
+  const { title, body, confirmLabel, tone } = dialog.options;
+  const cancelLabel = dialog.options.cancelLabel ?? 'Cancel';
+  const width = Math.min(CONFIRM_WIDTH, standardModalWidth(screenWidth));
+  const lines = body.split('\n').flatMap((para) => (para.trim() === '' ? [''] : wrapLines(para, modalInnerWidth(width))));
+  // Fill rows: padding, title, blank, body, blank, buttons, empty last row.
+  const f = beginModal(screenWidth, screenHeight, { title, width, height: lines.length + 6, center: true });
+  let y = f.top;
+  for (const line of lines) {
+    if (y > f.bottom - 2) break;
+    f.canvas.put(f.l, y++, line, { fg: t.textMuted });
+  }
+  const toneBg = tone === 'danger' ? t.error : tone === 'warning' ? t.warning : t.brand;
+  const confirmW = buttonWidth(confirmLabel);
+  const cancelW = buttonWidth(cancelLabel);
+  const by = f.bottom;
+  const confirmX = f.r - confirmW + 1;
+  const cancelX = confirmX - 2 - cancelW;
+  f.canvas.put(cancelX, by, ` ${cancelLabel} `, dialog.chosen === 0
+    ? { fg: t.selectedListItemText, bg: t.textMuted, bold: true }
+    : { fg: t.textMuted, bg: t.border });
+  f.canvas.put(confirmX, by, ` ${confirmLabel} `, dialog.chosen === 1
+    ? { fg: t.selectedListItemText, bg: toneBg, bold: true }
+    : { fg: toneBg, bg: t.border, bold: true });
+  return finishModal(f);
+}

package/src/renderer/context-inspector.ts

@@ -1,24 +1,42 @@
-import { type Line } from '@pellux/goodvibes-sdk/platform/types';
-import { ModalFactory } from './modal-factory.ts';
 import type { ConversationManager } from '../core/conversation';
-import { getOverlayContentBudget, getOverlaySurfaceMetrics, getStableOverlayContentRows } from './overlay-viewport.ts';
 import { estimateTokens } from '@pellux/goodvibes-sdk/platform/core';
-import { UI_TONES } from './ui-primitives.ts';
+import { activeTokens } from './theme.ts';
+import {
+  beginModal,
+  finishModal,
+  scrollCountText,
+  type KitHint,
+  type SurfaceLayer,
+} from './surface-kit.ts';
+import { drawList, measureRow, type KitRow } from './surface-kit-list.ts';
+import { drawTextBlock, modalHeightFor, modalTextWidth, textBlockHeight, type TextLine } from './surface-kit-extra.ts';
 
 // ─── ContextInspectorModal ────────────────────────────────────────────────────
 
 /**
- * ContextInspectorModal, state for the context inspector overlay.
+ * ContextInspectorModal, state for the context inspector overlay. The list
+ * opens on the newest messages; ↑ scrolls back toward older ones.
  */
 export class ContextInspectorModal {
   public active = false;
+  /** Rows scrolled back from the newest message (0 = the newest are in view). */
+  public scrollBack = 0;
+  /** The furthest the list can scroll back, recorded by the renderer. */
+  public maxScrollBack = 0;
 
   open(): void {
     this.active = true;
+    this.scrollBack = 0;
   }
 
   close(): void {
     this.active = false;
+    this.scrollBack = 0;
+  }
+
+  /** Positive scrolls back toward older messages, negative toward the newest. */
+  scrollBy(delta: number): void {
+    this.scrollBack = Math.max(0, Math.min(this.maxScrollBack, this.scrollBack + delta));
   }
 }
 
@@ -34,179 +52,123 @@ function fmtPct(ratio: number): string {
   return `${(ratio * 100).toFixed(1)}%`;
 }
 
-/**
- * Render the context inspector as Line[] for overlay in the viewport.
- *
- * Lists each message with role, estimated token count, and percentage of total
- * context. Highlights large consumers (>10%). Shows total vs context window
- * capacity and suggests compaction targets.
- *
- * @param conversation  The conversation manager to inspect.
- * @param width         Terminal width.
- * @param _height       Terminal height (reserved for future scrolling).
- * @param contextWindow Optional context window size for capacity display.
- */
-export function renderContextInspector(
-  conversation: ConversationManager,
-  width: number,
-  viewportHeight = 24,
-  contextWindow = 0,
-): Line[] {
-  const messages = conversation.getMessagesForLLM();
-  const metrics = getOverlaySurfaceMetrics(width, viewportHeight, {
-    margin: 1,
-    maxWidth: 78,
-    chromeRows: 7,
-    minContentRows: 6,
-    maxContentRows: 10,
-  });
-  const targetContentRows = getStableOverlayContentRows(metrics.contentRows, 8);
-
-  if (messages.length === 0) {
-    return ModalFactory.createModal({
-      title: 'Context Inspector',
-      width: metrics.boxWidth,
-      margin: metrics.margin,
-      targetContentRows,
-      sections: [
-        { type: 'text', content: 'No messages in conversation yet.' },
-      ],
-      hints: ['[Esc] Close'],
-    }, width);
-  }
-
-  // ── Token accounting ──────────────────────────────────────────────────────
-
-  type MsgEntry = {
-    role: string;
-    tokens: number;
-    label: string;
-  };
+interface MsgEntry {
+  readonly tokens: number;
+  readonly label: string;
+}
 
+function messageEntries(conversation: ConversationManager): { entries: MsgEntry[]; total: number } {
   const entries: MsgEntry[] = [];
-  let totalTokens = 0;
-
-  for (const msg of messages) {
+  let total = 0;
+  for (const msg of conversation.getMessagesForLLM()) {
     const role = msg.role;
     let text = '';
     if (typeof msg.content === 'string') {
       text = msg.content;
     } else if (Array.isArray(msg.content)) {
-      // ContentPart[]
       text = (msg.content as Array<{ type: string; text?: string }>)
         .filter((p) => p.type === 'text')
         .map((p) => p.text ?? '')
         .join('');
     }
     // Include tool call text for assistant messages
-    if (role === 'assistant' && (msg as { toolCalls?: Array<{ name: string; arguments: unknown }> }).toolCalls) {
-      const tcs = (msg as { toolCalls?: Array<{ name: string; arguments: unknown }> }).toolCalls!;
-      for (const tc of tcs) {
-        text += tc.name + JSON.stringify(tc.arguments);
-      }
+    const toolCalls = (msg as { toolCalls?: Array<{ name: string; arguments: unknown }> }).toolCalls;
+    if (role === 'assistant' && toolCalls) {
+      for (const tc of toolCalls) text += tc.name + JSON.stringify(tc.arguments);
     }
     const tokens = estimateTokens(text);
-    totalTokens += tokens;
-
+    total += tokens;
+    // A one-line excerpt identifies the message; the inspector is about its
+    // token cost, not its content.
+    const excerpt = (limit: number): string => `${text.slice(0, limit).replace(/\s+/g, ' ')}${text.length > limit ? '…' : ''}`;
     let label: string;
-    if (role === 'user') {
-      label = `user: ${text.slice(0, 40).replace(/\n/g, ' ')}${text.length > 40 ? '...' : ''}`;
-    } else if (role === 'assistant') {
-      label = `assistant: ${text.slice(0, 36).replace(/\n/g, ' ')}${text.length > 36 ? '...' : ''}`;
-    } else if (role === 'tool') {
-      const toolMsg = msg as { callId?: string };
-      label = `tool-result (${(toolMsg.callId ?? '').slice(0, 12)})`;
-    } else {
-      label = role;
-    }
-
-    entries.push({ role, tokens, label });
+    if (role === 'user') label = `user: ${excerpt(60)}`;
+    else if (role === 'assistant') label = `assistant: ${excerpt(56)}`;
+    else if (role === 'tool') label = `tool result ${((msg as { callId?: string }).callId ?? '').slice(0, 12)}`;
+    else label = role;
+    entries.push({ tokens, label });
   }
+  return { entries, total };
+}
 
-  // ── Identify large consumers (>10%) ───────────────────────────────────────
-
-  const largeThreshold = totalTokens * 0.10;
-
-  // ── Build sections ────────────────────────────────────────────────────────
-
-  const sections: import('./modal-factory.ts').ModalSection[] = [];
-
-  // Summary header
-  const capacityStr = contextWindow > 0
-    ? `  |  Capacity: ${fmtN(totalTokens)} / ${fmtN(contextWindow)} (${fmtPct(totalTokens / contextWindow)})`
-    : '';
-  sections.push({
-    type: 'text',
-    content: `Total: ~${fmtN(totalTokens)} tokens (${messages.length} messages)${capacityStr}`,
-    style: { bold: true },
-  });
+/**
+ * Render the context inspector as a SurfaceLayer in screen coordinates.
+ *
+ * Lists each message with its estimated token count and share of the total
+ * (right-aligned), marks large consumers (>10%) with an amber ●, shows the
+ * total against the context window, and suggests compaction targets.
+ */
+export function renderContextInspector(
+  conversation: ConversationManager,
+  screenWidth: number,
+  screenHeight = 24,
+  contextWindow = 0,
+  modal?: ContextInspectorModal,
+): SurfaceLayer {
+  const t = activeTokens();
+  const { entries, total } = messageEntries(conversation);
+
+  if (entries.length === 0) {
+    const lines: TextLine[] = [{ text: 'No messages in conversation yet.', style: { fg: t.textMuted } }];
+    const width = modalTextWidth(screenWidth, screenHeight);
+    const height = modalHeightFor(screenWidth, screenHeight, {}, textBlockHeight(lines, width));
+    const f = beginModal(screenWidth, screenHeight, { title: 'Context inspector', height, center: true });
+    drawTextBlock(f.canvas, f.l, f.top, f.r - f.l + 1, lines, f.bottom);
+    return finishModal(f);
+  }
 
-  if (contextWindow > 0 && totalTokens / contextWindow >= 0.80) {
-    sections.push({
-      type: 'text',
-      content: 'WARNING: context is 80%+ full. Run /compact to free space.',
-      style: { fg: UI_TONES.state.warn, bold: true },
-    });
+  const largeThreshold = total * 0.10;
+  const large = entries.filter((e) => e.tokens > largeThreshold);
+  const capacity = contextWindow > 0 ? ` · ${fmtN(total)} of ${fmtN(contextWindow)} (${fmtPct(total / contextWindow)})` : '';
+  const topLines: TextLine[] = [
+    { text: `Total ~${fmtN(total)} tokens in ${entries.length} message${entries.length === 1 ? '' : 's'}${capacity}`, style: { fg: t.text, bold: true } },
+  ];
+  if (contextWindow > 0 && total / contextWindow >= 0.80) {
+    topLines.push({ text: 'Context is 80% full or more. Run /compact to free space.', style: { fg: t.warning, bold: true } });
+  }
+  const bottomLines: TextLine[] = [];
+  if (large.length > 0) {
+    const share = fmtPct(large.reduce((s, e) => s + e.tokens, 0) / total);
+    bottomLines.push({ text: `● ${large.length} message${large.length > 1 ? 's use' : ' uses'} ${share} of context (each over 10%).`, style: { fg: t.accent } });
+    bottomLines.push({ text: 'Run /compact to summarise and reduce context size.', style: { fg: t.textFaint } });
   }
 
-  sections.push({ type: 'separator' });
+  const hints: KitHint[] = [['↑↓', 'scroll']];
+  const f = beginModal(screenWidth, screenHeight, { title: 'Context inspector', hints });
+  const width = f.r - f.l + 1;
+  let top = drawTextBlock(f.canvas, f.l, f.top, width, topLines, f.bottom) + 1;
+  const bottomRows = bottomLines.length > 0 ? textBlockHeight(bottomLines, width) + 1 : 0;
+  const listBottom = f.bottom - bottomRows;
+  if (bottomRows > 0) drawTextBlock(f.canvas, f.l, listBottom + 2, width, bottomLines, f.bottom);
 
-  // Per-message list (up to 20 rows to keep modal manageable)
-  const maxVisibleRows = getOverlayContentBudget(viewportHeight, {
-    chromeRows: 7,
-    minContentRows: 6,
-    maxContentRows: 10,
+  const rows: KitRow[] = entries.map((e) => {
+    const isLarge = e.tokens > largeThreshold;
+    return {
+      label: e.label,
+      right: `${fmtPct(total > 0 ? e.tokens / total : 0)} · ~${fmtN(e.tokens)}`,
+      mark: isLarge ? '●' : undefined,
+      markFg: t.warning,
+      labelFg: isLarge ? t.warning : undefined,
+      bold: isLarge,
+    };
   });
-  const display = entries.slice(-maxVisibleRows);
-  const startOffset = entries.length - display.length;
-  if (startOffset > 0) {
-    sections.push({
-      type: 'text',
-      content: `(${startOffset} older messages not shown)`,
-      style: { dim: true },
-    });
-  }
 
-  for (let i = 0; i < display.length; i++) {
-    const e = display[i];
-    const pct = totalTokens > 0 ? e.tokens / totalTokens : 0;
-    const pctStr = fmtPct(pct).padStart(6);
-    const tokStr = `~${fmtN(e.tokens)}`.padStart(8);
-    const isLarge = e.tokens > largeThreshold;
-    const marker = isLarge ? '* ' : '  ';
-    const line = `${marker}${pctStr}  ${tokStr}  ${e.label}`;
-    sections.push({
-      type: 'text',
-      content: line,
-      style: isLarge ? { fg: UI_TONES.state.warn, bold: true } : {},
-    });
+  // Open on the newest messages: find the first row of the tail that fits,
+  // then step back by the modal's scroll position.
+  const listCapacity = Math.max(1, listBottom - top + 1);
+  let tailStart = rows.length;
+  let used = 0;
+  while (tailStart > 0 && used + measureRow(rows[tailStart - 1]!, f.l, f.r) <= listCapacity) {
+    tailStart--;
+    used += measureRow(rows[tailStart]!, f.l, f.r);
   }
-
-  // Compaction suggestions
-  const largeMsgs = entries.filter((e) => e.tokens > largeThreshold);
-  if (largeMsgs.length > 0) {
-    sections.push({ type: 'separator' });
-    const largePct = fmtPct(
-      largeMsgs.reduce((s, e) => s + e.tokens, 0) / totalTokens,
-    );
-    sections.push({
-      type: 'text',
-      content: `Compaction hint: ${largeMsgs.length} message${largeMsgs.length > 1 ? 's' : ''} use ${largePct} of context.`,
-      style: { fg: '#00ffcc' },
-    });
-    sections.push({
-      type: 'text',
-      content: 'Run /compact to summarise and reduce context size.',
-      style: { dim: true },
-    });
+  if (modal) {
+    modal.maxScrollBack = tailStart;
+    modal.scrollBack = Math.min(modal.scrollBack, tailStart);
   }
-
-  return ModalFactory.createModal({
-    title: 'Context Inspector',
-    width: metrics.boxWidth,
-    margin: metrics.margin,
-    targetContentRows,
-    sections,
-    hints: ['[*] >10% of context', '[Esc] Close'],
-  }, width);
+  const scrollStart = Math.max(0, tailStart - (modal?.scrollBack ?? 0));
+  if (top > listBottom) top = listBottom;
+  const res = drawList(f.canvas, { rows, top, bottom: listBottom, x0: f.l, x1: f.r, scrollStart });
+  f.hintRight = scrollCountText(res.above, res.below);
+  return finishModal(f);
 }