mixdog 0.7.18 → 0.8.0

package/src/tui/components/MarkdownTable.jsx

@@ -0,0 +1,204 @@
+/**
+ * components/MarkdownTable.jsx — GFM table → ink Box layout.
+ *
+ * Ported from Claude Code (refs/claude-code/src/components/MarkdownTable.tsx),
+ * adapted for this CLI:
+ *   - <Ansi> → <Text> (ink 7 has no <Ansi>; <Text> passes ANSI escapes through).
+ *   - useTerminalSize() → ink useStdout().stdout.columns.
+ *   - stringWidth / wrapAnsi from the npm packages (same libs CC vendors).
+ *   - formatCell uses our format-token.formatToken (no highlight arg).
+ *
+ * The width-fitting algorithm (ideal vs min widths, proportional shrink, hard
+ * wrap, vertical fallback for narrow terminals) is preserved verbatim.
+ */
+import React from 'react';
+import { Text, useStdout } from 'ink';
+import stripAnsi from 'strip-ansi';
+import stringWidth from 'string-width';
+import wrapAnsi from 'wrap-ansi';
+import { formatToken, padAligned } from '../markdown/format-token.mjs';
+
+const SAFETY_MARGIN = 4;
+const MIN_COLUMN_WIDTH = 3;
+const MAX_ROW_LINES = 4;
+const ANSI_BOLD_START = '\x1b[1m';
+const ANSI_BOLD_END = '\x1b[22m';
+
+/** Wrap text to width, ANSI-aware, returning lines (CC wrapText). */
+function wrapText(text, width, options) {
+  if (width <= 0) return [text];
+  const trimmedText = String(text).trimEnd();
+  const wrapped = wrapAnsi(trimmedText, width, {
+    hard: options?.hard ?? false,
+    trim: false,
+    wordWrap: true,
+  });
+  const lines = wrapped.split('\n').filter((line) => line.length > 0);
+  return lines.length > 0 ? lines : [''];
+}
+
+export function MarkdownTable({ token, forceWidth }) {
+  // App owns resize reflow and there is no <Static> transcript anymore, so table
+  // width can follow the current terminal width without duplicating scrollback.
+  const actualTerminalWidth = useStdout()?.stdout?.columns ?? 80;
+  const terminalWidth = forceWidth ?? actualTerminalWidth;
+
+  const formatCell = (tokens) => tokens?.map((t) => formatToken(t)).join('') ?? '';
+  const getPlainText = (tokens) => stripAnsi(formatCell(tokens));
+
+  const getMinWidth = (tokens) => {
+    const text = getPlainText(tokens);
+    const words = text.split(/\s+/).filter((w) => w.length > 0);
+    if (words.length === 0) return MIN_COLUMN_WIDTH;
+    return Math.max(...words.map((w) => stringWidth(w)), MIN_COLUMN_WIDTH);
+  };
+  const getIdealWidth = (tokens) =>
+    Math.max(stringWidth(getPlainText(tokens)), MIN_COLUMN_WIDTH);
+
+  // Step 1: min (longest word) and ideal (full content) widths per column.
+  const minWidths = token.header.map((header, colIndex) => {
+    let maxMinWidth = getMinWidth(header.tokens);
+    for (const row of token.rows) maxMinWidth = Math.max(maxMinWidth, getMinWidth(row[colIndex]?.tokens));
+    return maxMinWidth;
+  });
+  const idealWidths = token.header.map((header, colIndex) => {
+    let maxIdeal = getIdealWidth(header.tokens);
+    for (const row of token.rows) maxIdeal = Math.max(maxIdeal, getIdealWidth(row[colIndex]?.tokens));
+    return maxIdeal;
+  });
+
+  // Step 2: available space.
+  const numCols = token.header.length;
+  const borderOverhead = 1 + numCols * 3;
+  const availableWidth = Math.max(terminalWidth - borderOverhead - SAFETY_MARGIN, numCols * MIN_COLUMN_WIDTH);
+
+  // Step 3: fit column widths into available space.
+  const totalMin = minWidths.reduce((s, w) => s + w, 0);
+  const totalIdeal = idealWidths.reduce((s, w) => s + w, 0);
+  let needsHardWrap = false;
+  let columnWidths;
+  if (totalIdeal <= availableWidth) {
+    columnWidths = idealWidths;
+  } else if (totalMin <= availableWidth) {
+    const extraSpace = availableWidth - totalMin;
+    const overflows = idealWidths.map((ideal, i) => ideal - minWidths[i]);
+    const totalOverflow = overflows.reduce((s, o) => s + o, 0);
+    columnWidths = minWidths.map((min, i) => {
+      if (totalOverflow === 0) return min;
+      return min + Math.floor((overflows[i] / totalOverflow) * extraSpace);
+    });
+  } else {
+    needsHardWrap = true;
+    const scaleFactor = availableWidth / totalMin;
+    columnWidths = minWidths.map((w) => Math.max(Math.floor(w * scaleFactor), MIN_COLUMN_WIDTH));
+  }
+
+  // Step 4: max row lines → decide vertical fallback.
+  const calculateMaxRowLines = () => {
+    let maxLines = 1;
+    for (let i = 0; i < token.header.length; i++) {
+      const wrapped = wrapText(formatCell(token.header[i].tokens), columnWidths[i], { hard: needsHardWrap });
+      maxLines = Math.max(maxLines, wrapped.length);
+    }
+    for (const row of token.rows) {
+      for (let i = 0; i < row.length; i++) {
+        const wrapped = wrapText(formatCell(row[i]?.tokens), columnWidths[i], { hard: needsHardWrap });
+        maxLines = Math.max(maxLines, wrapped.length);
+      }
+    }
+    return maxLines;
+  };
+  const useVerticalFormat = calculateMaxRowLines() > MAX_ROW_LINES;
+
+  const renderRowLines = (cells, isHeader) => {
+    const cellLines = cells.map((cell, colIndex) =>
+      wrapText(formatCell(cell.tokens), columnWidths[colIndex], { hard: needsHardWrap }),
+    );
+    const maxLines = Math.max(...cellLines.map((l) => l.length), 1);
+    const verticalOffsets = cellLines.map((l) => Math.floor((maxLines - l.length) / 2));
+    const result = [];
+    for (let lineIdx = 0; lineIdx < maxLines; lineIdx++) {
+      let line = '│';
+      for (let colIndex = 0; colIndex < cells.length; colIndex++) {
+        const lines = cellLines[colIndex];
+        const offset = verticalOffsets[colIndex];
+        const contentLineIdx = lineIdx - offset;
+        const lineText = contentLineIdx >= 0 && contentLineIdx < lines.length ? lines[contentLineIdx] : '';
+        const width = columnWidths[colIndex];
+        const align = isHeader ? 'center' : token.align?.[colIndex] ?? 'left';
+        line += ' ' + padAligned(lineText, stringWidth(lineText), width, align) + ' │';
+      }
+      result.push(line);
+    }
+    return result;
+  };
+
+  const renderBorderLine = (type) => {
+    const [left, mid, cross, right] = {
+      top: ['┌', '─', '┬', '┐'],
+      middle: ['├', '─', '┼', '┤'],
+      bottom: ['└', '─', '┴', '┘'],
+    }[type];
+    let line = left;
+    columnWidths.forEach((width, colIndex) => {
+      line += mid.repeat(width + 2);
+      line += colIndex < columnWidths.length - 1 ? cross : right;
+    });
+    return line;
+  };
+
+  const renderVerticalFormat = () => {
+    const lines = [];
+    const headers = token.header.map((h) => getPlainText(h.tokens));
+    const separatorWidth = Math.min(terminalWidth - 1, 40);
+    const separator = '─'.repeat(separatorWidth);
+    const wrapIndent = '  ';
+    token.rows.forEach((row, rowIndex) => {
+      if (rowIndex > 0) lines.push(separator);
+      row.forEach((cell, colIndex) => {
+        const label = headers[colIndex] || `Column ${colIndex + 1}`;
+        const rawValue = formatCell(cell.tokens).trimEnd();
+        const value = rawValue.replace(/\n+/g, ' ').replace(/\s+/g, ' ').trim();
+        const firstLineWidth = terminalWidth - stringWidth(label) - 3;
+        const subsequentLineWidth = terminalWidth - wrapIndent.length - 1;
+        const firstPassLines = wrapText(value, Math.max(firstLineWidth, 10));
+        const firstLine = firstPassLines[0] || '';
+        let wrappedValue;
+        if (firstPassLines.length <= 1 || subsequentLineWidth <= firstLineWidth) {
+          wrappedValue = firstPassLines;
+        } else {
+          const remainingText = firstPassLines.slice(1).map((l) => l.trim()).join(' ');
+          wrappedValue = [firstLine, ...wrapText(remainingText, subsequentLineWidth)];
+        }
+        lines.push(`${ANSI_BOLD_START}${label}:${ANSI_BOLD_END} ${wrappedValue[0] || ''}`);
+        for (let i = 1; i < wrappedValue.length; i++) {
+          if (!wrappedValue[i].trim()) continue;
+          lines.push(`${wrapIndent}${wrappedValue[i]}`);
+        }
+      });
+    });
+    return lines.join('\n');
+  };
+
+  if (useVerticalFormat) {
+    return <Text>{renderVerticalFormat()}</Text>;
+  }
+
+  const tableLines = [];
+  tableLines.push(renderBorderLine('top'));
+  tableLines.push(...renderRowLines(token.header, true));
+  tableLines.push(renderBorderLine('middle'));
+  token.rows.forEach((row, rowIndex) => {
+    tableLines.push(...renderRowLines(row, false));
+    if (rowIndex < token.rows.length - 1) tableLines.push(renderBorderLine('middle'));
+  });
+  tableLines.push(renderBorderLine('bottom'));
+
+  // Safety: if any line would overflow (resize race), fall back to vertical.
+  const maxLineWidth = Math.max(...tableLines.map((l) => stringWidth(stripAnsi(l))));
+  if (maxLineWidth > terminalWidth - SAFETY_MARGIN) {
+    return <Text>{renderVerticalFormat()}</Text>;
+  }
+
+  return <Text>{tableLines.join('\n')}</Text>;
+}

package/src/tui/components/Message.jsx

@@ -0,0 +1,103 @@
+/**
+ * components/Message.jsx — transcript message rows.
+ *
+ * Ported from Claude Code:
+ *   - AssistantTextMessage.tsx: `● <markdown>` where the dot is `BLACK_CIRCLE`
+ *     in the `text` color (white, NOT claude-orange), in a 2-wide gutter, and
+ *     the markdown sits in a column box beside it (flexDirection row).
+ *   - UserPromptMessage.tsx: text on a `userMessageBackground` background with
+ *     `paddingRight={1}` (no prompt glyph — CC uses the bg to distinguish input
+ *     from assistant/tool rows).
+ *
+ * The dot uses `minWidth={2}` so wrapped markdown lines align under the text,
+ * not under the dot (CC's NoSelect minWidth={2} behavior).
+ */
+import React from 'react';
+import { Box, Text, useAnimation } from 'ink';
+import { theme, TURN_MARKER } from '../theme.mjs';
+import { Markdown, StreamingMarkdown } from './Markdown.jsx';
+import { THEREFORE } from '../figures.mjs';
+import { formatDuration } from '../time-format.mjs';
+
+export const AssistantMessage = React.memo(function AssistantMessage({ text, streaming = false }) {
+  return (
+    <Box flexDirection="row" marginTop={1}>
+      <Box flexShrink={0} minWidth={2}>
+        <Text color={theme.text}>{TURN_MARKER}</Text>
+      </Box>
+      <Box flexDirection="column" flexGrow={1}>
+        {streaming ? <StreamingMarkdown>{text}</StreamingMarkdown> : <Markdown>{text}</Markdown>}
+      </Box>
+    </Box>
+  );
+});
+
+export const UserMessage = React.memo(function UserMessage({ text, attached = false, columns }) {
+  // `attached` = the previous transcript row is also a user message (consecutive
+  // steering prompts). Those stack flush together; a user message that follows
+  // an assistant/tool row gets a one-row gap above it.
+  // The background band fills the row edge-to-edge (CC's user bubble reads as a
+  // full-width band, not a text-hugging tag). An explicit numeric width is more
+  // robust than "100%" here — it guarantees the band even if a parent's width
+  // context is ambiguous. paddingLeft aligns the body under the 2-col gutter.
+  // Stop one cell short of the right edge: writing the terminal's last column
+  // makes Windows Terminal/conhost auto-wrap, which drifts the alt-screen frame
+  // and stacks stale gray bands on re-render. One narrower cell is invisible.
+  const bandColumns = Math.max(1, columns - 1);
+  return (
+    <Box flexDirection="column" width={bandColumns} marginTop={attached ? 0 : 1} backgroundColor={theme.userMessageBackground} paddingLeft={2} paddingRight={1}>
+      <Text color={theme.text} wrap="wrap">{text}</Text>
+    </Box>
+  );
+});
+
+function formatThinkingElapsed(ms) {
+  const label = formatDuration(ms);
+  if (!label) return '';
+  const totalSec = Math.floor(Math.max(0, Number(ms || 0)) / 1000);
+  if (totalSec < 60) return label;
+  const m = Math.floor(totalSec / 60);
+  const s = totalSec % 60;
+  return `${m}:${String(s).padStart(2, '0')}`;
+}
+
+export function ThinkingMessage({ text, elapsedMs = 0, activeSince = 0 }) {
+  useAnimation({ interval: 250 });
+  const liveElapsedMs = Number(elapsedMs || 0) + (activeSince ? Math.max(0, Date.now() - activeSince) : 0);
+  const elapsed = formatThinkingElapsed(liveElapsedMs);
+  return (
+    <Box flexDirection="column" marginTop={1} gap={1} width="100%">
+      <Text>
+        <Text color={theme.spinnerGlyph}>{THEREFORE} </Text>
+        <Text color={theme.thinkingAccent}>{`Thinking${elapsed ? ` ${elapsed}` : ''}…`}</Text>
+      </Text>
+      {text ? (
+        <Box paddingLeft={2}>
+          <Text color={theme.thinkingText} italic>{text}</Text>
+        </Box>
+      ) : null}
+    </Box>
+  );
+}
+
+export function NoticeMessage({ text, tone, columns = 80 }) {
+  const accentColor = tone === 'error' ? theme.error : tone === 'warn' ? theme.warning : theme.inactive;
+  const bodyColor = tone === 'info' || tone === 'plain' ? theme.inactive : theme.statusText;
+  const prefix = tone === 'plain' || tone === 'error' ? '' : '·';
+  const iconWidth = prefix ? 2 : 0;
+  const paddingLeft = 2;
+  const rowWidth = Math.max(1, columns - 1);
+  const bodyWidth = Math.max(1, rowWidth - paddingLeft - iconWidth);
+  return (
+    <Box marginTop={1} paddingLeft={paddingLeft} flexDirection="row" width={rowWidth}>
+      {prefix ? (
+        <Box flexShrink={0} width={iconWidth}>
+          <Text color={accentColor}>{prefix}</Text>
+        </Box>
+      ) : null}
+      <Box flexDirection="column" width={bodyWidth} flexShrink={0}>
+        <Text color={bodyColor} wrap="wrap">{text}</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/Picker.jsx

@@ -0,0 +1,317 @@
+/**
+ * components/Picker.jsx — selectable list picker for slash commands.
+ *
+ * Renders a bordered, scrollable list of items with up/down navigation,
+ * Enter confirms and Escape backs out. Used by /model and /resume to let the
+ * user pick from available presets or saved sessions.
+ *
+ * Keyboard:
+ *   ↑ / ↓      — move selection (wraps at ends)
+ *   ← / →      — optional picker-specific adjustment
+ *   Tab         — optional picker-specific toggle
+ *   Enter       — choose/apply the selected row
+ *   Escape      — back/cancel
+ *   Ctrl+C      — handled globally for selection copy
+ */
+import React, { useState, useCallback, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+import stringWidth from 'string-width';
+import { theme } from '../theme.mjs';
+
+/** Max items visible at once before scrolling kicks in. */
+const MAX_VISIBLE = 8;
+const DEFAULT_LABEL_WIDTH = 28;
+const SELECT_HELP = '↑/↓ Select · Enter Choose · Esc Back';
+const ADJUST_HELP = '↑/↓ Select · ←/→ Adjust · Enter Choose · Esc Back';
+
+function truncateText(value, width) {
+  const text = String(value || '');
+  if (!(width > 0)) return '';
+  if (stringWidth(text) <= width) return text;
+  if (width <= 1) return '…'.repeat(Math.max(0, width));
+  let out = '';
+  for (const ch of text) {
+    if (stringWidth(`${out}${ch}…`) > width) break;
+    out += ch;
+  }
+  return `${out}…`;
+}
+
+function padCells(value, width) {
+  const text = String(value || '');
+  const gap = Math.max(0, width - stringWidth(text));
+  return `${text}${' '.repeat(gap)}`;
+}
+
+function clampLabelWidth(value, columns) {
+  const maxWidth = Math.max(12, Math.floor(columns * 0.45));
+  return Math.max(1, Math.min(Number(value) || DEFAULT_LABEL_WIDTH, maxWidth));
+}
+
+function clampMetaWidth(value, columns, labelWidth) {
+  const available = Math.max(0, columns - labelWidth - 16);
+  const requested = Number(value) || 24;
+  return Math.max(0, Math.min(requested, available));
+}
+
+function normalizeFooterLines(activeFooter, columns) {
+  const rawLines = Array.isArray(activeFooter)
+    ? activeFooter
+    : (activeFooter ? [activeFooter] : []);
+  return rawLines.map((line) => {
+    const isObject = line && typeof line === 'object';
+    const glyph = isObject ? String(line.glyph || '') : '';
+    const color = isObject ? line.color || theme.panelTitle : theme.text;
+    const text = isObject ? String(line.text || '') : String(line || '');
+    return {
+      glyph,
+      color,
+      text: truncateText(text, Math.max(0, columns - (glyph ? 7 : 4))),
+    };
+  }).filter((line) => line.glyph || line.text);
+}
+
+export function Picker({
+  items,
+  onSelect,
+  onCancel,
+  onLeft,
+  onRight,
+  onTab,
+  title,
+  description = '',
+  footer = '',
+  help,
+  columns = 80,
+  labelWidth: labelWidthOverride = null,
+  metaWidth: metaWidthOverride = null,
+  initialIndex = 0,
+  indexMode = 'auto',
+  fillHeight = false,
+  visibleCount = MAX_VISIBLE,
+}) {
+  const visibleLimit = Math.max(1, Math.floor(Number(visibleCount) || MAX_VISIBLE));
+  const [selectedIndex, setSelectedIndex] = useState(() => Math.max(0, Math.min(Number(initialIndex) || 0, Math.max(0, items.length - 1))));
+
+  useEffect(() => {
+    setSelectedIndex((i) => Math.min(Math.max(0, i), Math.max(0, items.length - 1)));
+  }, [items.length]);
+
+  useEffect(() => {
+    setSelectedIndex(Math.max(0, Math.min(Number(initialIndex) || 0, Math.max(0, items.length - 1))));
+  }, [initialIndex, items.length]);
+
+  const activeFooter = typeof footer === 'function' ? footer(items[selectedIndex], selectedIndex) : footer;
+  const footerLines = normalizeFooterLines(activeFooter, columns);
+  const footerReserveRows = footerLines.length > 0 ? footerLines.length + 1 : 0;
+  const effectiveVisibleLimit = Math.max(1, visibleLimit - footerReserveRows);
+  const helpText = help || (onLeft || onRight || onTab ? ADJUST_HELP : SELECT_HELP);
+
+  useInput(
+    useCallback(
+      (input, key) => {
+        if (key.upArrow) {
+          setSelectedIndex((i) => {
+            const total = items.length;
+            return total > 0 ? (i - 1 + total) % total : 0;
+          });
+          return;
+        }
+        if (key.downArrow) {
+          setSelectedIndex((i) => {
+            const total = items.length;
+            return total > 0 ? (i + 1) % total : 0;
+          });
+          return;
+        }
+        if (key.pageUp) {
+          setSelectedIndex((i) => Math.max(0, i - effectiveVisibleLimit));
+          return;
+        }
+        if (key.pageDown) {
+          setSelectedIndex((i) => Math.min(items.length - 1, i + effectiveVisibleLimit));
+          return;
+        }
+        if (key.home) {
+          setSelectedIndex(0);
+          return;
+        }
+        if (key.end) {
+          setSelectedIndex(items.length - 1);
+          return;
+        }
+        if (key.leftArrow) {
+          if (onLeft) onLeft(items[selectedIndex], selectedIndex);
+          return;
+        }
+        if (key.rightArrow) {
+          if (onRight) onRight(items[selectedIndex], selectedIndex);
+          return;
+        }
+        if (key.tab || input === '\t') {
+          if (onTab) onTab(items[selectedIndex], selectedIndex);
+          return;
+        }
+        if (key.return) {
+          const selected = items[selectedIndex];
+          if (selected && onSelect) onSelect(selected.value, selected);
+          return;
+        }
+        if (key.escape) {
+          onCancel();
+          return;
+        }
+      },
+      [items, selectedIndex, onSelect, onCancel, onLeft, onRight, onTab, effectiveVisibleLimit],
+    ),
+  );
+
+  // Clamp selected index when items change length.
+  if (items.length === 0) {
+    const emptyDescription = truncateText(description, Math.max(0, columns - 4));
+    return (
+      <Box flexDirection="column" flexShrink={0} height={fillHeight ? '100%' : undefined}>
+        <Box
+          flexDirection="column"
+          borderStyle="round"
+          borderColor={theme.promptBorder}
+          paddingX={1}
+          height={fillHeight ? '100%' : undefined}
+          width="100%"
+        >
+          <Box flexDirection="row" justifyContent="space-between" marginBottom={0}>
+            <Text color={theme.panelTitle}>{title || 'Picker'}</Text>
+            <Text color={theme.subtle}>{helpText}</Text>
+          </Box>
+          {emptyDescription ? (
+            <>
+              <Text> </Text>
+              <Text color={theme.text}>{emptyDescription}</Text>
+              <Text> </Text>
+            </>
+          ) : (
+            <>
+              <Text> </Text>
+              <Text color={theme.inactive}>(empty)</Text>
+            </>
+          )}
+        </Box>
+      </Box>
+    );
+  }
+
+  // Scroll window centered on the selected item.
+  const total = items.length;
+  const half = Math.floor(effectiveVisibleLimit / 2);
+  let start = Math.max(0, selectedIndex - half);
+  let end = Math.min(total, start + effectiveVisibleLimit);
+  if (end - start < effectiveVisibleLimit && start > 0) {
+    start = Math.max(0, end - effectiveVisibleLimit);
+  }
+  const visible = items.slice(start, end);
+  const showIndex = indexMode === 'always'
+    ? total > 0
+    : indexMode === 'never'
+      ? false
+      : total > effectiveVisibleLimit;
+  const indexWidth = showIndex ? stringWidth(`${total}.`) : 0;
+  const indexOffset = showIndex ? indexWidth + 1 : 0;
+
+  // Keep the label column fixed across menus. Per-picker overrides are still
+  // allowed for intentionally compact surfaces such as providers/resume.
+  const labelWidth = clampLabelWidth(labelWidthOverride ?? DEFAULT_LABEL_WIDTH, columns);
+  const hasMeta = metaWidthOverride != null || visible.some((item) => item.meta || item.modelProfile || item.metaParts);
+  const metaWidth = hasMeta ? clampMetaWidth(metaWidthOverride, columns, labelWidth) : 0;
+  const descriptionWidth = Math.max(0, columns - indexOffset - labelWidth - (hasMeta ? metaWidth + 14 : 12));
+  const panelDescription = truncateText(description, Math.max(0, columns - 4));
+
+  return (
+    <Box flexDirection="column" flexShrink={0} width="100%" height={fillHeight ? '100%' : undefined}>
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor={theme.promptBorder}
+        paddingX={1}
+        width="100%"
+        height={fillHeight ? '100%' : undefined}
+      >
+        <Box flexDirection="row" justifyContent="space-between" marginBottom={panelDescription ? 0 : 1}>
+          <Text color={theme.panelTitle}>{title}</Text>
+          <Text color={theme.subtle}>{helpText}</Text>
+        </Box>
+        {panelDescription ? (
+          <>
+            <Text> </Text>
+            <Text color={theme.text}>{panelDescription}</Text>
+            <Text> </Text>
+          </>
+        ) : null}
+        {visible.map((item, i) => {
+          const idx = start + i;
+          const isSelected = idx === selectedIndex;
+          return (
+            <ItemRow
+              key={item.value}
+              indexText={showIndex ? `${idx + 1}.` : ''}
+              indexWidth={indexWidth}
+              label={item.label}
+              meta={item.meta || item.modelProfile || ''}
+              metaParts={item.metaParts}
+              description={item.description}
+              labelWidth={labelWidth}
+              metaWidth={metaWidth}
+              descriptionWidth={descriptionWidth}
+              showMeta={hasMeta}
+              isSelected={isSelected}
+            />
+          );
+        })}
+        {footerLines.length > 0 ? (
+          <>
+            <Box flexGrow={1} />
+            {footerLines.map((line, index) => (
+              <Text key={`footer-${index}`}>
+                {line.glyph ? <Text color={line.color}>{line.glyph} </Text> : null}
+                <Text color={theme.text}>{line.text}</Text>
+              </Text>
+            ))}
+          </>
+        ) : null}
+      </Box>
+    </Box>
+  );
+}
+
+const ItemRow = React.memo(function ItemRow({ indexText, indexWidth, label, meta, metaParts, description, labelWidth, metaWidth, descriptionWidth, showMeta, isSelected }) {
+  const displayLabel = truncateText(label, labelWidth);
+  const displayMeta = truncateText(meta, metaWidth);
+  const displayDescription = truncateText(description, descriptionWidth);
+  const parts = Array.isArray(metaParts) ? metaParts : null;
+
+  return (
+    <Box flexDirection="row" width="100%" backgroundColor={isSelected ? theme.userMessageBackground : undefined}>
+      {indexWidth > 0 ? (
+        <Text color={theme.subtle}>
+          {padCells(indexText, indexWidth)}{' '}
+        </Text>
+      ) : null}
+      <Text color={theme.text}>
+        {padCells(displayLabel, labelWidth)}
+      </Text>
+      {showMeta ? (
+        <Text color={theme.text}>
+          {'  '}
+          {parts
+            ? padCells(parts.map((part) => padCells(truncateText(part?.text || '', Number(part?.width) || 1), Number(part?.width) || 1)).join('  '), metaWidth)
+            : padCells(displayMeta, metaWidth)}
+        </Text>
+      ) : null}
+      {displayDescription ? (
+        <Text color={theme.text}>
+          {'  '}
+          {displayDescription}
+        </Text>
+      ) : null}
+    </Box>
+  );
+});