mixdog 0.8.0 → 0.9.0

package/src/tui/components/MarkdownTable.jsx

@@ -1,11 +1,10 @@
 /**
  * components/MarkdownTable.jsx — GFM table → ink Box layout.
  *
- * Ported from Claude Code (refs/claude-code/src/components/MarkdownTable.tsx),
- * adapted for this CLI:
+ * GFM table layout for ink:
  *   - <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).
+ *   - stringWidth / wrapAnsi from npm packages.
  *   - formatCell uses our format-token.formatToken (no highlight arg).
  *
  * The width-fitting algorithm (ideal vs min widths, proportional shrink, hard
@@ -13,29 +12,7 @@
  */
 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 : [''];
-}
+import { buildTableRender } from '../markdown/table-layout.mjs';
 
 export function MarkdownTable({ token, forceWidth }) {
   // App owns resize reflow and there is no <Static> transcript anymore, so table
@@ -43,162 +20,10 @@ export function MarkdownTable({ token, forceWidth }) {
   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>;
+  // The entire layout (column fit, vertical fallback, bordered box, overflow
+  // re-fallback) lives in the pure markdown/table-layout.mjs module so the
+  // renderer and the App.jsx row-height estimator share one source of truth and
+  // can never drift. The component just draws the lines it returns verbatim.
+  const { lines } = buildTableRender(token, terminalWidth);
+  return <Text>{lines.join('\n')}</Text>;
 }

package/src/tui/components/Message.jsx

@@ -1,42 +1,59 @@
 /**
  * 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
+ * Transcript message rows:
+ *   - Assistant: `● <markdown>` where the dot is `BLACK_CIRCLE`
+ *     in the `text` color (not the orange title accent), 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
+ *   - User: text on a `userMessageBackground` background with
+ *     `paddingRight={1}` (no prompt glyph — the bg distinguishes 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).
+ * not under the dot (2-wide gutter alignment).
  */
 import React from 'react';
 import { Box, Text, useAnimation } from 'ink';
 import { theme, TURN_MARKER } from '../theme.mjs';
 import { Markdown, StreamingMarkdown } from './Markdown.jsx';
+import { assistantBodyWidth } from '../markdown/table-layout.mjs';
 import { THEREFORE } from '../figures.mjs';
 import { formatDuration } from '../time-format.mjs';
 
-export const AssistantMessage = React.memo(function AssistantMessage({ text, streaming = false }) {
+// `themeEpoch` is a memo-busting prop (threaded from App): the active theme
+// mutates `theme` in-place, so a /theme switch must re-render this memoized row
+// and recompute its markdown colors. It is forwarded into Markdown so the
+// token/AnsiText caches include it as a dep.
+export const AssistantMessage = React.memo(function AssistantMessage({ text, streaming = false, columns = 80, themeEpoch = 0 }) {
+  // The body column needs an EXPLICIT numeric width. Without it, ink/Yoga
+  // measures the wrapped markdown body before the row's available width is
+  // resolved and caches its height as a single row — so a multi-line assistant
+  // message renders only its LAST wrapped line (the head lines are clipped) and
+  // streaming height jitters as the measure flips. Reserve the 2-col gutter
+  // (BLACK CIRCLE in minWidth={2}) plus one right-edge safety cell. Letting an
+  // assistant line reach the terminal's last column can auto-wrap/scroll on
+  // Windows Terminal/conhost and make the next redraw appear to lose leading
+  // CJK characters even though the backing transcript is intact.
+  const bodyWidth = assistantBodyWidth(columns);
   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 flexDirection="column" flexShrink={0} width={bodyWidth}>
+        {streaming
+          ? <StreamingMarkdown themeEpoch={themeEpoch} columns={bodyWidth}>{text}</StreamingMarkdown>
+          : <Markdown themeEpoch={themeEpoch} columns={bodyWidth}>{text}</Markdown>}
       </Box>
     </Box>
   );
 });
 
-export const UserMessage = React.memo(function UserMessage({ text, attached = false, columns }) {
+export const UserMessage = React.memo(function UserMessage({ text, attached = false, columns, themeEpoch = 0 }) {
   // `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
+  // The background band fills the row edge-to-edge (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.

package/src/tui/components/Picker.jsx

@@ -1,23 +1,23 @@
-/**
- * components/Picker.jsx — selectable list picker for slash commands.
- *
- * Renders a bordered, scrollable list of items with up/down navigation,
+/**
+ * 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:
+ * 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;
@@ -78,6 +78,8 @@ export function Picker({
   onLeft,
   onRight,
   onTab,
+  onKey,
+  onHighlight,
   title,
   description = '',
   footer = '',
@@ -85,10 +87,15 @@ export function Picker({
   columns = 80,
   labelWidth: labelWidthOverride = null,
   metaWidth: metaWidthOverride = null,
+  footerGapRows = 1,
   initialIndex = 0,
   indexMode = 'auto',
   fillHeight = false,
   visibleCount = MAX_VISIBLE,
+  // Memo-busting epoch: ItemRow is React.memo and reads theme.* directly, so a
+  // live /theme switch (or picker preview) must re-render every row. Threading
+  // the epoch into each ItemRow breaks its shallow-equality on a theme change.
+  themeEpoch = 0,
 }) {
   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))));
@@ -101,9 +108,20 @@ export function Picker({
     setSelectedIndex(Math.max(0, Math.min(Number(initialIndex) || 0, Math.max(0, items.length - 1))));
   }, [initialIndex, items.length]);
 
+  // Live-preview hook: notify the owner whenever the highlighted row changes
+  // (arrow keys, paging, initial mount). The /theme picker uses this to apply a
+  // non-persisted palette preview as the selection moves. Kept side-effect-free
+  // for pickers that do not pass onHighlight.
+  useEffect(() => {
+    if (typeof onHighlight !== 'function') return;
+    const item = items[selectedIndex];
+    if (item) onHighlight(item.value, item, selectedIndex);
+  }, [onHighlight, items, selectedIndex]);
+
   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 footerGap = footerLines.length > 0 ? Math.max(0, Math.floor(Number(footerGapRows) || 0)) : 0;
+  const footerReserveRows = footerLines.length > 0 ? footerLines.length + footerGap : 0;
   const effectiveVisibleLimit = Math.max(1, visibleLimit - footerReserveRows);
   const helpText = help || (onLeft || onRight || onTab ? ADJUST_HELP : SELECT_HELP);
 
@@ -157,18 +175,25 @@ export function Picker({
           if (selected && onSelect) onSelect(selected.value, selected);
           return;
         }
-        if (key.escape) {
-          onCancel();
-          return;
-        }
-      },
-      [items, selectedIndex, onSelect, onCancel, onLeft, onRight, onTab, effectiveVisibleLimit],
+        if (key.escape) {
+          onCancel();
+          return;
+        }
+        if (key.ctrl && (input === 'c' || input === 'C')) {
+          return;
+        }
+        if (onKey) {
+          onKey(input, key, items[selectedIndex], selectedIndex);
+          return;
+        }
+      },
+      [items, selectedIndex, onSelect, onCancel, onLeft, onRight, onTab, onKey, effectiveVisibleLimit],
     ),
   );
-
-  // Clamp selected index when items change length.
+
+  // Clamp selected index when items change length.
   if (items.length === 0) {
-    const emptyDescription = truncateText(description, Math.max(0, columns - 4));
+    const emptyLine = truncateText(String(description || '').replace(/\s+/g, ' ').trim(), Math.max(0, columns - 4));
     return (
       <Box flexDirection="column" flexShrink={0} height={fillHeight ? '100%' : undefined}>
         <Box
@@ -179,27 +204,21 @@ export function Picker({
           height={fillHeight ? '100%' : undefined}
           width="100%"
         >
-          <Box flexDirection="row" justifyContent="space-between" marginBottom={0}>
+          <Box flexDirection="row" justifyContent="space-between">
             <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>
-            </>
-          )}
+          {/* Standard rhythm: title, blank, description/hint (blank if none),
+              blank, then the (empty) content row. */}
+          <Text> </Text>
+          <Text color={theme.text}>{emptyLine || ' '}</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);
@@ -220,10 +239,17 @@ export function Picker({
   // 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 hasMarker = items.some((item) => item.marker || item.checked === true || item.checked === false);
+  const markerWidth = hasMarker ? 2 : 0;
+  const hasMeta = metaWidthOverride != null || items.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));
+  const descriptionWidth = Math.max(0, columns - indexOffset - markerWidth - labelWidth - (hasMeta ? metaWidth + 14 : 12));
+  // Standard panel rhythm: title row, blank, description/hint row, blank,
+  // content. Description newlines are collapsed and width-truncated to a single
+  // line so a multi-line description (e.g. ToolApproval) cannot push the title
+  // off the top. The slot is always reserved so panel chrome is a constant 6
+  // rows (title + blank + desc + blank + 2 border), matching PICKER_CHROME_ROWS.
+  const panelDescription = truncateText(String(description || '').replace(/\s+/g, ' ').trim(), Math.max(0, columns - 4));
 
   return (
     <Box flexDirection="column" flexShrink={0} width="100%" height={fillHeight ? '100%' : undefined}>
@@ -235,26 +261,27 @@ export function Picker({
         width="100%"
         height={fillHeight ? '100%' : undefined}
       >
-        <Box flexDirection="row" justifyContent="space-between" marginBottom={panelDescription ? 0 : 1}>
+        <Box flexDirection="row" justifyContent="space-between">
           <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}
+        <Text> </Text>
+        <Text color={theme.text}>{panelDescription || ' '}</Text>
+        <Text> </Text>
         {visible.map((item, i) => {
-          const idx = start + i;
-          const isSelected = idx === selectedIndex;
-          return (
-            <ItemRow
+          const idx = start + i;
+          const isSelected = idx === selectedIndex;
+          return (
+            <ItemRow
               key={item.value}
               indexText={showIndex ? `${idx + 1}.` : ''}
               indexWidth={indexWidth}
+              marker={item.marker || (item.checked === true ? '✓' : item.checked === false ? ' ' : '')}
+              markerColor={item.markerColor}
+              markerWidth={markerWidth}
               label={item.label}
+              labelSuffix={item.labelSuffix}
+              labelSuffixColor={item.labelSuffixColor}
               meta={item.meta || item.modelProfile || ''}
               metaParts={item.metaParts}
               description={item.description}
@@ -263,6 +290,7 @@ export function Picker({
               descriptionWidth={descriptionWidth}
               showMeta={hasMeta}
               isSelected={isSelected}
+              themeEpoch={themeEpoch}
             />
           );
         })}
@@ -282,8 +310,14 @@ export function Picker({
   );
 }
 
-const ItemRow = React.memo(function ItemRow({ indexText, indexWidth, label, meta, metaParts, description, labelWidth, metaWidth, descriptionWidth, showMeta, isSelected }) {
-  const displayLabel = truncateText(label, labelWidth);
+const ItemRow = React.memo(function ItemRow({ indexText, indexWidth, marker, markerColor, markerWidth, label, labelSuffix, labelSuffixColor, meta, metaParts, description, labelWidth, metaWidth, descriptionWidth, showMeta, isSelected, themeEpoch = 0 }) {
+  const rawSuffix = String(labelSuffix || '');
+  const suffix = rawSuffix ? truncateText(rawSuffix, labelWidth) : '';
+  const suffixGap = suffix && stringWidth(suffix) < labelWidth ? ' ' : '';
+  const suffixWidth = suffix ? stringWidth(suffixGap) + stringWidth(suffix) : 0;
+  const displayMarker = truncateText(marker, markerWidth);
+  const displayLabel = truncateText(label, Math.max(0, labelWidth - suffixWidth));
+  const labelPadding = ' '.repeat(Math.max(0, labelWidth - stringWidth(displayLabel) - suffixWidth));
   const displayMeta = truncateText(meta, metaWidth);
   const displayDescription = truncateText(description, descriptionWidth);
   const parts = Array.isArray(metaParts) ? metaParts : null;
@@ -295,9 +329,14 @@ const ItemRow = React.memo(function ItemRow({ indexText, indexWidth, label, meta
           {padCells(indexText, indexWidth)}{' '}
         </Text>
       ) : null}
-      <Text color={theme.text}>
-        {padCells(displayLabel, labelWidth)}
-      </Text>
+      {markerWidth > 0 ? (
+        <Text color={marker ? (markerColor || theme.success) : theme.text}>
+          {padCells(displayMarker, markerWidth)}
+        </Text>
+      ) : null}
+      <Text color={theme.text}>{displayLabel}</Text>
+      {suffix ? <Text color={labelSuffixColor || theme.success}>{suffixGap}{suffix}</Text> : null}
+      <Text color={theme.text}>{labelPadding}</Text>
       {showMeta ? (
         <Text color={theme.text}>
           {'  '}
@@ -312,6 +351,6 @@ const ItemRow = React.memo(function ItemRow({ indexText, indexWidth, label, meta
           {displayDescription}
         </Text>
       ) : null}
-    </Box>
-  );
-});
+    </Box>
+  );
+});