@pellux/goodvibes-agent 0.1.0

package/src/renderer/context-inspector.ts

@@ -0,0 +1,219 @@
+import { type Line } from '../types/grid.ts';
+import { ModalFactory } from './modal-factory.ts';
+import type { ConversationManager } from '../core/conversation';
+import { getOverlayContentBudget, getOverlaySurfaceMetrics, getStableOverlayContentRows } from './overlay-viewport.ts';
+
+// ─── ContextInspectorModal ────────────────────────────────────────────────────
+
+/**
+ * ContextInspectorModal — state for the context inspector overlay.
+ */
+export class ContextInspectorModal {
+  public active = false;
+
+  open(): void {
+    this.active = true;
+  }
+
+  close(): void {
+    this.active = false;
+  }
+}
+
+// ─── renderContextInspector ───────────────────────────────────────────────────
+
+/** Rough token estimate: 4 chars ≈ 1 token. */
+function estimateTokens(text: string): number {
+  return Math.ceil(text.length / 4);
+}
+
+/** Format a number with thousands separators. */
+function fmtN(n: number): string {
+  return n.toLocaleString();
+}
+
+/** Format a percentage as XX.X%. */
+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;
+  };
+
+  const entries: MsgEntry[] = [];
+  let totalTokens = 0;
+  let largeCount = 0;
+
+  for (const msg of messages) {
+    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 tokens = estimateTokens(text);
+    totalTokens += tokens;
+
+    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 });
+  }
+
+  // ── Identify large consumers (>10%) ───────────────────────────────────────
+
+  const largeThreshold = totalTokens * 0.10;
+  for (const e of entries) {
+    if (e.tokens > largeThreshold) largeCount++;
+  }
+
+  // ── 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 },
+  });
+
+  if (contextWindow > 0 && totalTokens / contextWindow >= 0.80) {
+    sections.push({
+      type: 'text',
+      content: 'WARNING: context is 80%+ full. Run /compact to free space.',
+      style: { fg: '#ff9900', bold: true },
+    });
+  }
+
+  sections.push({ type: 'separator' });
+
+  // Per-message list (up to 20 rows to keep modal manageable)
+  const maxVisibleRows = getOverlayContentBudget(viewportHeight, {
+    chromeRows: 7,
+    minContentRows: 6,
+    maxContentRows: 10,
+  });
+  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: '#ffcc00', bold: true } : {},
+    });
+  }
+
+  // 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 },
+    });
+  }
+
+  return ModalFactory.createModal({
+    title: 'Context Inspector',
+    width: metrics.boxWidth,
+    margin: metrics.margin,
+    targetContentRows,
+    sections,
+    hints: ['[*] >10% of context', '[Esc] Close'],
+  }, width);
+}

package/src/renderer/conversation-layout.ts

@@ -0,0 +1,67 @@
+import type { Line } from '../types/grid.ts';
+import { createEmptyLine } from '../types/grid.ts';
+import type { ConversationManager } from '../core/conversation';
+
+export interface ConversationViewportRequest {
+  readonly conversation: ConversationManager;
+  readonly width: number;
+  readonly viewportHeight: number;
+  readonly scrollTop: number;
+  readonly scrollLocked: boolean;
+  readonly overlayRows?: number;
+}
+
+export interface ConversationViewportResult {
+  readonly effectiveHeight: number;
+  readonly maxScroll: number;
+  readonly nextScrollTop: number;
+  readonly viewport: Line[];
+}
+
+export function buildConversationViewport(
+  request: ConversationViewportRequest,
+): ConversationViewportResult {
+  const overlayRows = request.overlayRows ?? 0;
+  const effectiveHeight = Math.max(0, request.viewportHeight - overlayRows);
+  const lineCount = request.conversation.history.getLineCount();
+  const maxScroll = Math.max(0, lineCount - effectiveHeight);
+  const nextScrollTop = request.scrollLocked
+    ? maxScroll
+    : Math.max(0, Math.min(request.scrollTop, maxScroll));
+  const viewport = request.conversation.history.getSnapshot(nextScrollTop, effectiveHeight, request.width);
+
+  return {
+    effectiveHeight,
+    maxScroll,
+    nextScrollTop,
+    viewport,
+  };
+}
+
+export function overlayViewportBottom(
+  viewport: readonly Line[],
+  overlay: readonly Line[],
+  width: number,
+  viewportHeight: number,
+  bottomInset: number = 0,
+): Line[] {
+  if (overlay.length === 0) return [...viewport];
+  const next = [...viewport];
+  const targetStart = Math.max(0, viewportHeight - bottomInset - overlay.length);
+  next.length = Math.min(next.length, targetStart);
+  while (next.length < targetStart) next.push(createEmptyLine(width));
+  next.push(...overlay);
+  return next;
+}
+
+export function replaceViewportWithOverlay(
+  overlay: readonly Line[],
+  width: number,
+  viewportHeight: number,
+): Line[] {
+  const next: Line[] = [];
+  const pad = Math.max(0, viewportHeight - overlay.length);
+  for (let i = 0; i < pad; i++) next.push(createEmptyLine(width));
+  next.push(...overlay);
+  return next;
+}

package/src/renderer/conversation-overlays.ts

@@ -0,0 +1,140 @@
+import type { Line } from '../types/grid.ts';
+import type { ConversationManager } from '../core/conversation';
+import type { CommandRegistry } from '../input/command-registry.ts';
+import type { InputHandler } from '../input/handler.ts';
+import type { KeybindingsManager } from '../input/keybindings.ts';
+import { renderFilePickerOverlay } from './file-picker-overlay.ts';
+import { renderModelWorkspace } from './model-workspace.ts';
+import { renderSelectionModalOverlay } from './selection-modal-overlay.ts';
+import { renderSearchOverlay } from './search-overlay.ts';
+import { renderHistorySearchOverlay } from './history-search-overlay.ts';
+import { renderProcessModal } from './process-modal.ts';
+import { renderAgentDetailModal } from './agent-detail-modal.ts';
+import { renderLiveTailModal } from './live-tail-modal.ts';
+import { renderContextInspector } from './context-inspector.ts';
+import { renderSettingsModal } from './settings-modal.ts';
+import { renderMcpWorkspace } from './mcp-workspace.ts';
+import { renderAgentWorkspace } from './agent-workspace.ts';
+import { renderSessionPickerModal } from './session-picker-modal.ts';
+import { renderProfilePickerModal } from './profile-picker-modal.ts';
+import { renderBookmarkModal } from './bookmark-modal.ts';
+import { renderHelpOverlay, renderShortcutsOverlay } from './help-overlay.ts';
+import { renderAutocompleteOverlay } from './autocomplete-overlay.ts';
+import { renderOnboardingWizard } from './onboarding/onboarding-wizard.ts';
+import { overlayViewportBottom, replaceViewportWithOverlay } from './conversation-layout.ts';
+
+export interface ConversationOverlayContext {
+  readonly input: InputHandler;
+  readonly conversation: ConversationManager;
+  readonly commandRegistry: CommandRegistry;
+  readonly keybindingsManager: KeybindingsManager;
+  readonly conversationWidth: number;
+  readonly viewportHeight: number;
+  readonly contextWindow?: number;
+}
+
+export function applyConversationOverlays(
+  viewport: Line[],
+  context: ConversationOverlayContext,
+): Line[] {
+  const { input, conversation, commandRegistry, keybindingsManager, conversationWidth, viewportHeight, contextWindow } = context;
+  let next = viewport;
+  const bottomDockInset = 1 + (input.searchManager.active || input.historySearch.active ? 1 : 0);
+
+  if (input.onboardingWizard.active) {
+    const lines = renderOnboardingWizard(input.onboardingWizard, conversationWidth, viewportHeight);
+    next = replaceViewportWithOverlay(lines, conversationWidth, viewportHeight);
+  }
+
+  if (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);
+  }
+
+  if (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));
+  }
+
+  if (input.historySearch.active) {
+    next.push(...renderHistorySearchOverlay(input.historySearch, conversationWidth));
+  }
+
+  if (input.processModal.active) {
+    const lines = renderProcessModal(input.processModal, conversationWidth, viewportHeight);
+    next = overlayViewportBottom(next, lines, conversationWidth, viewportHeight, bottomDockInset);
+  }
+
+  if (input.agentDetailModal.active) {
+    const lines = renderAgentDetailModal(input.agentDetailModal, conversationWidth);
+    next = overlayViewportBottom(next, lines, conversationWidth, viewportHeight, bottomDockInset);
+  }
+
+  if (input.liveTailModal.active) {
+    const lines = renderLiveTailModal(input.liveTailModal, conversationWidth, viewportHeight);
+    next = overlayViewportBottom(next, lines, conversationWidth, viewportHeight, bottomDockInset);
+  }
+
+  if (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);
+  }
+
+  if (input.mcpWorkspace.active) {
+    const lines = renderMcpWorkspace(input.mcpWorkspace, conversationWidth, viewportHeight);
+    next = replaceViewportWithOverlay(lines, conversationWidth, viewportHeight);
+  }
+
+  if (input.agentWorkspace.active) {
+    const lines = renderAgentWorkspace(input.agentWorkspace, conversationWidth, viewportHeight);
+    next = replaceViewportWithOverlay(lines, conversationWidth, viewportHeight);
+  }
+
+  if (input.sessionPickerModal.active) {
+    const lines = renderSessionPickerModal(input.sessionPickerModal, conversationWidth, viewportHeight);
+    next = overlayViewportBottom(next, lines, conversationWidth, viewportHeight, bottomDockInset);
+  }
+
+  if (input.profilePickerModal.active) {
+    const lines = renderProfilePickerModal(input.profilePickerModal, conversationWidth, viewportHeight);
+    next = overlayViewportBottom(next, lines, conversationWidth, viewportHeight, bottomDockInset);
+  }
+
+  if (input.bookmarkModal.active) {
+    const lines = renderBookmarkModal(input.bookmarkModal, 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);
+  }
+
+  if (input.shortcutsOverlayActive) {
+    const lines = renderShortcutsOverlay(conversationWidth, keybindingsManager, input.shortcutsScrollOffset, viewportHeight);
+    next = replaceViewportWithOverlay(lines, conversationWidth, viewportHeight);
+  }
+
+  if (input.commandMode && input.autocomplete?.isActive) {
+    const lines = renderAutocompleteOverlay(input.autocomplete, conversationWidth, viewportHeight);
+    if (lines.length > 0) {
+      next = overlayViewportBottom(next, lines, conversationWidth, viewportHeight, bottomDockInset);
+    }
+  }
+
+  return next;
+}

package/src/renderer/conversation-surface.ts

@@ -0,0 +1,260 @@
+import { type Line, createEmptyLine, createStyledCell } from '../types/grid.ts';
+import { getDisplayWidth, truncateDisplay, wrapText } from '../utils/terminal-width.ts';
+import { LAYOUT } from './layout.ts';
+import { GLYPHS } from './ui-primitives.ts';
+
+export interface ConversationSurfacePalette {
+  readonly accent: string;
+  readonly text: string;
+  readonly dim?: boolean;
+  readonly bodyBg?: string;
+  readonly italic?: boolean;
+}
+
+export interface ConversationFragmentPalette {
+  readonly prefix: string;
+  readonly prefixFg: string;
+  readonly text: string;
+  readonly bodyBg: string;
+  readonly dim?: boolean;
+  readonly italic?: boolean;
+  readonly strikethrough?: boolean;
+}
+
+export interface ConversationStatusSegment {
+  readonly text: string;
+  readonly fg: string;
+  readonly bold?: boolean;
+  readonly dim?: boolean;
+  readonly italic?: boolean;
+}
+
+export interface ConversationEventTone {
+  readonly marker: string;
+  readonly markerFg: string;
+  readonly label: string;
+  readonly labelFg: string;
+  readonly detailFg?: string;
+}
+
+function writeText(
+  line: Line,
+  startCol: number,
+  endColExclusive: number,
+  text: string,
+  fg: string,
+  options: { readonly bg?: string; readonly bold?: boolean; readonly dim?: boolean; readonly italic?: boolean; readonly strikethrough?: boolean } = {},
+): void {
+  let col = startCol;
+  for (const ch of text) {
+    const w = getDisplayWidth(ch);
+    if (w <= 0) continue;
+    if (col + w > endColExclusive) break;
+    line[col] = createStyledCell(ch, {
+      fg,
+      bg: options.bg ?? '',
+      bold: options.bold ?? false,
+      dim: options.dim ?? false,
+      italic: options.italic ?? false,
+      strikethrough: options.strikethrough ?? false,
+    });
+    if (w > 1 && col + 1 < endColExclusive) {
+      line[col + 1] = createStyledCell('', {
+        fg,
+        bg: options.bg ?? '',
+        bold: options.bold ?? false,
+        dim: options.dim ?? false,
+        italic: options.italic ?? false,
+        strikethrough: options.strikethrough ?? false,
+      });
+    }
+    col += w;
+  }
+}
+
+export function renderConversationNotice(
+  content: string,
+  width: number,
+  palette: ConversationSurfacePalette,
+  marker = '▌',
+): Line[] {
+  const borderCol = LAYOUT.LEFT_MARGIN - 1;
+  const textStartCol = LAYOUT.LEFT_MARGIN + 1;
+  const textWidth = Math.max(1, width - textStartCol - LAYOUT.RIGHT_MARGIN);
+  const wrapped = wrapText(content, textWidth);
+  const lines: Line[] = [];
+
+  for (const text of wrapped) {
+    const line = createEmptyLine(width);
+    line[borderCol] = createStyledCell(marker, { fg: palette.accent, bg: palette.bodyBg ?? '' });
+    writeText(line, textStartCol, width - LAYOUT.RIGHT_MARGIN, text, palette.text, {
+      bg: palette.bodyBg,
+      dim: palette.dim ?? false,
+      italic: palette.italic ?? false,
+    });
+    lines.push(line);
+  }
+
+  return lines;
+}
+
+export function renderConversationFragment(
+  content: string,
+  width: number,
+  palette: ConversationFragmentPalette,
+): Line[] {
+  const margin = LAYOUT.USER_BOX_MARGIN;
+  const prefixWidth = getDisplayWidth(palette.prefix);
+  const maxContentWidth = Math.max(1, width - (margin * 2) - prefixWidth - 2);
+  const wrapped = wrapText(content, maxContentWidth);
+  const contentWidth = wrapped.length > 0 ? Math.max(...wrapped.map((line) => getDisplayWidth(line))) : 0;
+  const fragmentWidth = Math.max(prefixWidth + 2, prefixWidth + contentWidth + 2);
+  const startCol = margin;
+  const lines: Line[] = [];
+
+  const createFilledLine = (): Line => {
+    const line = createEmptyLine(width);
+    for (let x = 0; x < fragmentWidth && startCol + x < width; x++) {
+      line[startCol + x] = createStyledCell(' ', {
+        fg: palette.text,
+        bg: palette.bodyBg,
+        dim: palette.dim ?? false,
+        italic: palette.italic ?? false,
+        strikethrough: palette.strikethrough ?? false,
+      });
+    }
+    return line;
+  };
+
+  const topLine = createEmptyLine(width);
+  const bottomLine = createEmptyLine(width);
+  for (let x = 0; x < fragmentWidth && startCol + x < width; x++) {
+    topLine[startCol + x] = createStyledCell(GLYPHS.surface.top, {
+      fg: palette.bodyBg,
+      bg: '',
+      dim: palette.dim ?? false,
+      italic: palette.italic ?? false,
+    });
+    bottomLine[startCol + x] = createStyledCell(GLYPHS.surface.bottom, {
+      fg: palette.bodyBg,
+      bg: '',
+      dim: palette.dim ?? false,
+      italic: palette.italic ?? false,
+    });
+  }
+  lines.push(topLine);
+  for (let index = 0; index < wrapped.length; index++) {
+    const line = createFilledLine();
+    const prefix = index === 0 ? palette.prefix : ' '.repeat(prefixWidth);
+    writeText(line, startCol, startCol + prefixWidth, prefix, palette.prefixFg, {
+      bg: palette.bodyBg,
+      dim: palette.dim ?? false,
+      italic: palette.italic ?? false,
+    });
+    writeText(line, startCol + prefixWidth, startCol + fragmentWidth - 1, wrapped[index] ?? '', palette.text, {
+      bg: palette.bodyBg,
+      dim: palette.dim ?? false,
+      italic: palette.italic ?? false,
+      strikethrough: palette.strikethrough ?? false,
+    });
+    lines.push(line);
+  }
+  lines.push(bottomLine);
+  return lines;
+}
+
+export function renderConversationCollapsedFragment(
+  content: string,
+  width: number,
+  options: {
+    readonly prefix?: string;
+    readonly prefixFg?: string;
+    readonly text?: string;
+    readonly bodyBg?: string;
+    readonly dim?: boolean;
+    readonly italic?: boolean;
+  } = {},
+): Line[] {
+  return renderConversationFragment(content, width, {
+    prefix: options.prefix ?? ` ${GLYPHS.navigation.selected} `,
+    prefixFg: options.prefixFg ?? '#38bdf8',
+    text: options.text ?? '244',
+    bodyBg: options.bodyBg ?? '#1a1a1a',
+    dim: options.dim ?? true,
+    italic: options.italic ?? false,
+  });
+}
+
+export function renderConversationKeyValueRow(
+  width: number,
+  left: string,
+  right: string,
+  palette: {
+    readonly leftFg: string;
+    readonly rightFg: string;
+    readonly dimFg?: string;
+    readonly bg?: string;
+  },
+): Line {
+  const line = createEmptyLine(width);
+  const leftText = truncateDisplay(left, Math.max(1, width - LAYOUT.RIGHT_MARGIN - 8));
+  const rightWidth = getDisplayWidth(right);
+  const rightStart = Math.max(LAYOUT.LEFT_MARGIN + 1, width - LAYOUT.RIGHT_MARGIN - rightWidth);
+  writeText(line, LAYOUT.LEFT_MARGIN, rightStart - 1, leftText, palette.leftFg, { bg: palette.bg });
+  writeText(line, rightStart, width - LAYOUT.RIGHT_MARGIN, right, palette.rightFg, { bg: palette.bg, dim: palette.dimFg === palette.rightFg });
+  return line;
+}
+
+export function renderConversationStatusLine(
+  width: number,
+  segments: readonly ConversationStatusSegment[],
+  options: {
+    readonly marker?: string;
+    readonly markerFg?: string;
+    readonly markerBg?: string;
+    readonly bodyBg?: string;
+  } = {},
+): Line {
+  const line = createEmptyLine(width);
+  const markerCol = LAYOUT.LEFT_MARGIN - 1;
+  const startCol = LAYOUT.LEFT_MARGIN + 1;
+  const endCol = Math.max(startCol, width - LAYOUT.RIGHT_MARGIN);
+  line[markerCol] = createStyledCell(options.marker ?? '▌', {
+    fg: options.markerFg ?? '#64748b',
+    bg: options.markerBg ?? options.bodyBg ?? '',
+    bold: true,
+  });
+  let col = startCol;
+  for (const segment of segments) {
+    if (col >= endCol) break;
+    writeText(line, col, endCol, segment.text, segment.fg, {
+      bg: options.bodyBg,
+      bold: segment.bold ?? false,
+      dim: segment.dim ?? false,
+      italic: segment.italic ?? false,
+    });
+    col += getDisplayWidth(segment.text);
+  }
+  return line;
+}
+
+export function renderConversationEventLine(
+  width: number,
+  tone: ConversationEventTone,
+  details: readonly ConversationStatusSegment[] = [],
+): Line {
+  return renderConversationStatusLine(
+    width,
+    [
+      { text: ` ${tone.label} `, fg: tone.labelFg, bold: true },
+      ...details.map((segment) => ({
+        ...segment,
+        fg: segment.fg || tone.detailFg || tone.labelFg,
+      })),
+    ],
+    {
+      marker: tone.marker,
+      markerFg: tone.markerFg,
+    },
+  );
+}