mixdog 0.9.0 → 0.9.2

package/src/tui/components/ConfirmBar.jsx

@@ -0,0 +1,47 @@
+/**
+ * components/ConfirmBar.jsx — horizontal text-button bar for onboarding steps.
+ *
+ * Pure render + helpers. Owns NO keyboard state: the parent Picker manages
+ * `focusedIndex` (0..n-1) and dispatches Enter to `onConfirm`. Kept side-effect
+ * free so it can be reused under any picker without stealing input focus.
+ *
+ * Props:
+ *   buttons:      [{ value, label }]  — button descriptors
+ *   focusedIndex: number              — highlighted button (-1 = none/list focus)
+ */
+import React from 'react';
+import { Box, Text } from 'ink';
+import { theme } from '../theme.mjs';
+
+/** Clamp a focus index into the valid button range, or -1 when list-focused. */
+export function clampConfirmFocus(index, count) {
+  const n = Math.max(0, Number(count) || 0);
+  if (n === 0) return -1;
+  const i = Number(index);
+  if (!Number.isFinite(i) || i < 0) return -1;
+  return Math.min(i, n - 1);
+}
+
+export function ConfirmBar({ buttons = [], focusedIndex = -1 }) {
+  const list = Array.isArray(buttons) ? buttons.filter(Boolean) : [];
+  if (list.length === 0) return null;
+  return (
+    <Box flexDirection="row" width="100%" justifyContent="flex-end">
+      {list.map((button, index) => {
+        const isFocused = index === focusedIndex;
+        return (
+          <Text key={button.value ?? index}>
+            {index > 0 ? <Text color={theme.subtle}>{'   '}</Text> : null}
+            <Text
+              color={isFocused ? theme.selectionText : theme.text}
+              backgroundColor={isFocused ? theme.selectionBackground : undefined}
+              bold={isFocused}
+            >
+              {` ${button.label} `}
+            </Text>
+          </Text>
+        );
+      })}
+    </Box>
+  );
+}

package/src/tui/components/ContextPanel.jsx

@@ -47,7 +47,7 @@ function percent(value, total) {
 
 function percentLabel(value, total) {
   const pct = percent(value, total);
-  if (pct === null) return 'n/a';
+  if (pct === null) return 'N/A';
   return `${pct > 0 && pct < 1 ? pct.toFixed(1) : Math.round(pct)}%`;
 }
 
@@ -185,8 +185,10 @@ function ContextUsageView({ detail, columns }) {
   ]);
   const apiLine = metricValue([
     `last ctx ${formatTokens(lastApi.contextTokens)}`,
-    `in/out ${formatTokens(lastApi.inputTokens)}/${formatTokens(lastApi.outputTokens)}`,
-    `cache ${cache.hitRate || 'n/a'}`,
+    `uncached/out ${formatTokens(lastApi.inputTokens)}/${formatTokens(lastApi.outputTokens)}`,
+    lastApi.rawInputTokens && lastApi.rawInputTokens !== lastApi.inputTokens ? `raw in ${formatTokens(lastApi.rawInputTokens)}` : '',
+    cache.writeTokens ? `write ${formatTokens(cache.writeTokens)}` : '',
+    `cache ${cache.hitRate || 'N/A'}`,
   ]);
   const categories = [
     { label: 'Messages', tokens: semanticTokens(semantic, ['chat', 'assistant']), meta: '' },

package/src/tui/components/ItemRightHintOverprint.jsx

@@ -0,0 +1,54 @@
+/**
+ * Overprint a truncated right-side hint on the last row of a transcript item
+ * without reserving an extra layout row (negative margin pulls the hint band up).
+ */
+import React from 'react';
+import { Box, Text } from 'ink';
+import { theme } from '../theme.mjs';
+
+function hintColor(tone) {
+  if (tone === 'error') return theme.error;
+  if (tone === 'warn' || tone === 'cancel') return theme.warning;
+  if (tone === 'plain') return theme.subtle;
+  return theme.inactive;
+}
+
+function cleanRightMessage(value) {
+  return String(value || '').replace(/\s+/g, ' ').trim();
+}
+
+export function ItemRightHintOverprint({
+  children,
+  rightMessage = '',
+  rightTone = 'info',
+  rightMessageWidth = 24,
+}) {
+  const rightText = cleanRightMessage(rightMessage);
+  if (!rightText) return children;
+  const rightWidth = Math.max(1, Number(rightMessageWidth) || 24);
+  return (
+    <Box flexDirection="column" width="100%" flexShrink={0}>
+      {children}
+      <Box
+        height={1}
+        marginTop={-1}
+        flexDirection="row"
+        width="100%"
+        flexShrink={0}
+        overflow="hidden"
+      >
+        <Box flexGrow={1} flexShrink={1} overflow="hidden" />
+        <Box
+          flexShrink={0}
+          width={rightWidth}
+          marginLeft={1}
+          marginRight={1}
+          justifyContent="flex-end"
+          overflow="hidden"
+        >
+          <Text color={hintColor(rightTone)} wrap="truncate">{rightText}</Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/Markdown.jsx

@@ -12,19 +12,28 @@
  * Syntax highlighting is omitted, but token cache + streaming-split are
  * kept so partial markdown does not repaint stable text on every delta.
  */
-import React, { useRef } from 'react';
+import React from 'react';
 import { Box, Text } from 'ink';
-import { marked } from 'marked';
 import {
-  configureMarked,
-  hasMarkdownSyntax,
   renderTokenAnsiSegments,
 } from '../markdown/render-ansi.mjs';
-import { trimPartialClosingFences } from '../markdown/stream-fence.mjs';
+import { resolveStreamingMarkdownParts } from '../markdown/streaming-markdown.mjs';
 import { AnsiText } from './AnsiText.jsx';
 import { MarkdownTable } from './MarkdownTable.jsx';
 import { theme } from '../theme.mjs';
 
+export {
+  balanceStreamingMarkdown,
+  resolveStreamingMarkdownParts,
+  resetStreamingMarkdownStablePrefix,
+  resetAllStreamingMarkdownStablePrefixes,
+  streamingLayoutText,
+} from '../markdown/streaming-markdown.mjs';
+export {
+  measureMarkdownRenderedRows,
+  measureStreamingMarkdownRenderedRows,
+} from '../markdown/measure-rendered-rows.mjs';
+
 function renderMarkdownElements(content, trimPartialFences = false, tableWidth) {
   // `tableWidth` is the App's body/content width; it doubles as the hr fill
   // width. Fall back to 80 when not provided so an hr still spans a sane rule.
@@ -50,60 +59,6 @@ function renderMarkdownElements(content, trimPartialFences = false, tableWidth)
   return result;
 }
 
-function hasOpenFence(text) {
-  let ticks = 0;
-  let tildes = 0;
-  for (const line of String(text ?? '').split('\n')) {
-    if (/^\s*```/.test(line)) ticks += 1;
-    if (/^\s*~~~/.test(line)) tildes += 1;
-  }
-  return ticks % 2 === 1 || tildes % 2 === 1;
-}
-
-function hasOpenInlineCode(text) {
-  let count = 0;
-  const value = String(text ?? '');
-  for (let i = 0; i < value.length; i++) {
-    const ch = value[i];
-    if (ch === '\\') {
-      i += 1;
-      continue;
-    }
-    if (ch !== '`') continue;
-    let run = 1;
-    while (value[i + run] === '`') run += 1;
-    if (run === 1) count += 1;
-    i += run - 1;
-  }
-  return count % 2 === 1;
-}
-
-function hasUnclosedDelimiter(text, marker) {
-  let count = 0;
-  const value = String(text ?? '');
-  for (let i = 0; i < value.length; i++) {
-    if (value[i] === '\\') {
-      i += 1;
-      continue;
-    }
-    if (value.startsWith(marker, i)) {
-      count += 1;
-      i += marker.length - 1;
-    }
-  }
-  return count % 2 === 1;
-}
-
-function balanceStreamingMarkdown(text) {
-  const value = String(text ?? '');
-  if (!value || hasOpenFence(value)) return value;
-  if (hasOpenInlineCode(value)) return `${value}\``;
-  let rendered = value;
-  if (hasUnclosedDelimiter(rendered, '**')) rendered += '**';
-  if (hasUnclosedDelimiter(rendered, '__')) rendered += '__';
-  return rendered;
-}
-
 export function Markdown({ children, themeEpoch = 0, trimPartialFences = false, columns }) {
   const elements = React.useMemo(() => {
     try {
@@ -124,48 +79,17 @@ export function Markdown({ children, themeEpoch = 0, trimPartialFences = false,
   );
 }
 
-export function StreamingMarkdown({ children, themeEpoch = 0, columns }) {
-  const stablePrefixRef = useRef('');
-  const text = String(children ?? '');
-
-  if (!hasMarkdownSyntax(text)) {
-    stablePrefixRef.current = '';
-    return <Markdown themeEpoch={themeEpoch} columns={columns}>{text}</Markdown>;
-  }
-
-  if (!text.startsWith(stablePrefixRef.current)) {
-    stablePrefixRef.current = '';
+export function StreamingMarkdown({ children, themeEpoch = 0, columns, streamKey }) {
+  const parts = resolveStreamingMarkdownParts(children, streamKey);
+  if (parts.plain) {
+    return <Markdown themeEpoch={themeEpoch} columns={columns}>{parts.unstableForRender}</Markdown>;
   }
-
-  let stablePrefix = stablePrefixRef.current;
-  try {
-    configureMarked();
-    const boundary = stablePrefix.length;
-    // Lex the still-streaming suffix and trim any partial closing fence so an
-    // open code block does not grow-then-shrink as the final backtick(s)
-    // stream in. Operates on a fresh lex so the shared tokenCache is untouched.
-    const tokens = marked.lexer(text.substring(boundary));
-    trimPartialClosingFences(tokens);
-    let lastContentIdx = tokens.length - 1;
-    while (lastContentIdx >= 0 && tokens[lastContentIdx]?.type === 'space') lastContentIdx--;
-    let advance = 0;
-    for (let i = 0; i < lastContentIdx; i++) {
-      advance += tokens[i]?.raw?.length ?? 0;
-    }
-    if (advance > 0) {
-      stablePrefixRef.current = text.substring(0, boundary + advance);
-      stablePrefix = stablePrefixRef.current;
-    }
-  } catch {
-    stablePrefix = '';
-    stablePrefixRef.current = '';
-  }
-
-  const unstableSuffix = text.substring(stablePrefix.length);
   return (
     <Box flexDirection="column" gap={1}>
-      {stablePrefix ? <Markdown themeEpoch={themeEpoch} columns={columns}>{stablePrefix}</Markdown> : null}
-      {unstableSuffix ? <Markdown themeEpoch={themeEpoch} columns={columns} trimPartialFences>{balanceStreamingMarkdown(unstableSuffix)}</Markdown> : null}
+      {parts.stablePrefix ? <Markdown themeEpoch={themeEpoch} columns={columns}>{parts.stablePrefix}</Markdown> : null}
+      {parts.unstableSuffix
+        ? <Markdown themeEpoch={themeEpoch} columns={columns} trimPartialFences>{parts.unstableForRender}</Markdown>
+        : null}
     </Box>
   );
 }

package/src/tui/components/Message.jsx

@@ -13,18 +13,22 @@
  * not under the dot (2-wide gutter alignment).
  */
 import React from 'react';
-import { Box, Text, useAnimation } from 'ink';
+import { Box, Text } from 'ink';
 import { theme, TURN_MARKER } from '../theme.mjs';
-import { Markdown, StreamingMarkdown } from './Markdown.jsx';
+import { Markdown, StreamingMarkdown, resetStreamingMarkdownStablePrefix } from './Markdown.jsx';
 import { assistantBodyWidth } from '../markdown/table-layout.mjs';
-import { THEREFORE } from '../figures.mjs';
-import { formatDuration } from '../time-format.mjs';
 
 // `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 }) {
+export const AssistantMessage = React.memo(function AssistantMessage({
+  text,
+  streaming = false,
+  columns = 80,
+  themeEpoch = 0,
+  assistantId,
+}) {
   // 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
@@ -34,6 +38,10 @@ export const AssistantMessage = React.memo(function AssistantMessage({ text, str
   // 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.
+  React.useEffect(() => {
+    if (!streaming && assistantId) resetStreamingMarkdownStablePrefix(assistantId);
+  }, [streaming, assistantId]);
+
   const bodyWidth = assistantBodyWidth(columns);
   return (
     <Box flexDirection="row" marginTop={1}>
@@ -42,7 +50,7 @@ export const AssistantMessage = React.memo(function AssistantMessage({ text, str
       </Box>
       <Box flexDirection="column" flexShrink={0} width={bodyWidth}>
         {streaming
-          ? <StreamingMarkdown themeEpoch={themeEpoch} columns={bodyWidth}>{text}</StreamingMarkdown>
+          ? <StreamingMarkdown themeEpoch={themeEpoch} columns={bodyWidth} streamKey={assistantId}>{text}</StreamingMarkdown>
           : <Markdown themeEpoch={themeEpoch} columns={bodyWidth}>{text}</Markdown>}
       </Box>
     </Box>
@@ -68,35 +76,6 @@ export const UserMessage = React.memo(function UserMessage({ text, attached = fa
   );
 });
 
-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;

package/src/tui/components/Picker.jsx

@@ -17,12 +17,14 @@ import React, { useState, useCallback, useEffect } from 'react';
 import { Box, Text, useInput } from 'ink';
 import stringWidth from 'string-width';
 import { theme } from '../theme.mjs';
+import { ConfirmBar, clampConfirmFocus } from './ConfirmBar.jsx';
 
 /** 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';
+const CONFIRM_HELP = '↑/↓ Select · ←/→ Back/Next · Enter Choose · Esc Skip';
 
 function truncateText(value, width) {
   const text = String(value || '');
@@ -92,6 +94,10 @@ export function Picker({
   indexMode = 'auto',
   fillHeight = false,
   visibleCount = MAX_VISIBLE,
+  // Onboarding confirm bar: { buttons:[{value,label}], onConfirm(button,index) }.
+  // When present, ←/→ and Tab drive button focus (mutually exclusive with
+  // onLeft/onRight), and Enter fires onConfirm while a button is focused.
+  confirmBar = null,
   // 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.
@@ -99,6 +105,14 @@ export function Picker({
 }) {
   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))));
+  const confirmButtons = Array.isArray(confirmBar?.buttons) ? confirmBar.buttons.filter(Boolean) : [];
+  const hasConfirm = confirmButtons.length > 0;
+  // -1 = list focus; 0..n-1 = confirm-bar button focus.
+  const [confirmFocus, setConfirmFocus] = useState(-1);
+  useEffect(() => {
+    // Reset to list focus whenever the bar identity/shape changes (step switch).
+    setConfirmFocus(-1);
+  }, [confirmButtons.length, confirmBar]);
 
   useEffect(() => {
     setSelectedIndex((i) => Math.min(Math.max(0, i), Math.max(0, items.length - 1)));
@@ -122,13 +136,24 @@ export function Picker({
   const footerLines = normalizeFooterLines(activeFooter, columns);
   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);
+  const confirmReserveRows = hasConfirm ? 2 : 0;
+  const effectiveVisibleLimit = Math.max(1, visibleLimit - footerReserveRows - confirmReserveRows);
+  const helpText = help || (hasConfirm ? CONFIRM_HELP : (onLeft || onRight || onTab ? ADJUST_HELP : SELECT_HELP));
 
   useInput(
     useCallback(
       (input, key) => {
         if (key.upArrow) {
+          // Single vertical loop over [list items...] + [confirm buttons...].
+          if (hasConfirm) {
+            const last = items.length - 1;
+            if (confirmFocus > 0) { setConfirmFocus((f) => f - 1); return; }
+            if (confirmFocus === 0) { setConfirmFocus(-1); setSelectedIndex(Math.max(0, last)); return; }
+            // list focus: first row ↑ → last confirm button.
+            if (items.length === 0 || selectedIndex === 0) { setConfirmFocus(confirmButtons.length - 1); return; }
+            setSelectedIndex((i) => i - 1);
+            return;
+          }
           setSelectedIndex((i) => {
             const total = items.length;
             return total > 0 ? (i - 1 + total) % total : 0;
@@ -136,6 +161,19 @@ export function Picker({
           return;
         }
         if (key.downArrow) {
+          if (hasConfirm) {
+            const last = items.length - 1;
+            const lastBtn = confirmButtons.length - 1;
+            if (confirmFocus >= 0) {
+              if (confirmFocus < lastBtn) { setConfirmFocus((f) => f + 1); return; }
+              // last button ↓ → first list row.
+              setConfirmFocus(-1); setSelectedIndex(0); return;
+            }
+            // list focus: last row ↓ → first confirm button.
+            if (items.length === 0 || selectedIndex === last) { setConfirmFocus(0); return; }
+            setSelectedIndex((i) => i + 1);
+            return;
+          }
           setSelectedIndex((i) => {
             const total = items.length;
             return total > 0 ? (i + 1) % total : 0;
@@ -159,18 +197,35 @@ export function Picker({
           return;
         }
         if (key.leftArrow) {
+          if (hasConfirm) {
+            setConfirmFocus((f) => (f <= 0 ? -1 : f - 1));
+            return;
+          }
           if (onLeft) onLeft(items[selectedIndex], selectedIndex);
           return;
         }
         if (key.rightArrow) {
+          if (hasConfirm) {
+            setConfirmFocus((f) => (f < 0 ? 0 : Math.min(confirmButtons.length - 1, f + 1)));
+            return;
+          }
           if (onRight) onRight(items[selectedIndex], selectedIndex);
           return;
         }
         if (key.tab || input === '\t') {
+          if (hasConfirm) {
+            setConfirmFocus((f) => (f < 0 ? 0 : (f + 1 > confirmButtons.length - 1 ? -1 : f + 1)));
+            return;
+          }
           if (onTab) onTab(items[selectedIndex], selectedIndex);
           return;
         }
         if (key.return) {
+          if (hasConfirm && confirmFocus >= 0) {
+            const button = confirmButtons[confirmFocus];
+            if (button && confirmBar?.onConfirm) confirmBar.onConfirm(button, confirmFocus);
+            return;
+          }
           const selected = items[selectedIndex];
           if (selected && onSelect) onSelect(selected.value, selected);
           return;
@@ -187,7 +242,7 @@ export function Picker({
           return;
         }
       },
-      [items, selectedIndex, onSelect, onCancel, onLeft, onRight, onTab, onKey, effectiveVisibleLimit],
+      [items, selectedIndex, onSelect, onCancel, onLeft, onRight, onTab, onKey, effectiveVisibleLimit, hasConfirm, confirmFocus, confirmButtons, confirmBar],
     ),
   );
 
@@ -214,6 +269,13 @@ export function Picker({
           <Text color={theme.text}>{emptyLine || ' '}</Text>
           <Text> </Text>
           <Text color={theme.inactive}>(empty)</Text>
+          {hasConfirm ? (
+            <>
+              <Box flexGrow={1} />
+              <Text> </Text>
+              <ConfirmBar buttons={confirmButtons} focusedIndex={clampConfirmFocus(confirmFocus, confirmButtons.length)} />
+            </>
+          ) : null}
         </Box>
       </Box>
     );
@@ -270,7 +332,7 @@ export function Picker({
         <Text> </Text>
         {visible.map((item, i) => {
           const idx = start + i;
-          const isSelected = idx === selectedIndex;
+          const isSelected = idx === selectedIndex && confirmFocus < 0;
           return (
             <ItemRow
               key={item.value}
@@ -305,12 +367,21 @@ export function Picker({
             ))}
           </>
         ) : null}
+        {hasConfirm ? (
+          <>
+            {footerLines.length > 0 ? null : <Box flexGrow={1} />}
+            <Text> </Text>
+            <ConfirmBar buttons={confirmButtons} focusedIndex={clampConfirmFocus(confirmFocus, confirmButtons.length)} />
+          </>
+        ) : null}
       </Box>
     </Box>
   );
 }
 
 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 rowText = isSelected ? theme.selectionText : theme.text;
+  const rowIndexColor = isSelected ? theme.selectionText : theme.subtle;
   const rawSuffix = String(labelSuffix || '');
   const suffix = rawSuffix ? truncateText(rawSuffix, labelWidth) : '';
   const suffixGap = suffix && stringWidth(suffix) < labelWidth ? ' ' : '';
@@ -323,22 +394,26 @@ const ItemRow = React.memo(function ItemRow({ indexText, indexWidth, marker, mar
   const parts = Array.isArray(metaParts) ? metaParts : null;
 
   return (
-    <Box flexDirection="row" width="100%" backgroundColor={isSelected ? theme.userMessageBackground : undefined}>
+    <Box flexDirection="row" width="100%" backgroundColor={isSelected ? theme.selectionBackground : undefined}>
       {indexWidth > 0 ? (
-        <Text color={theme.subtle}>
+        <Text color={rowIndexColor}>
           {padCells(indexText, indexWidth)}{' '}
         </Text>
       ) : null}
       {markerWidth > 0 ? (
-        <Text color={marker ? (markerColor || theme.success) : theme.text}>
+        <Text color={isSelected ? theme.selectionText : (marker ? (markerColor || theme.success) : rowText)}>
           {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>
+      <Text color={rowText}>{displayLabel}</Text>
+      {suffix ? (
+        <Text color={isSelected ? theme.selectionText : (labelSuffixColor || theme.success)}>
+          {suffixGap}{suffix}
+        </Text>
+      ) : null}
+      <Text color={rowText}>{labelPadding}</Text>
       {showMeta ? (
-        <Text color={theme.text}>
+        <Text color={rowText}>
           {'  '}
           {parts
             ? padCells(parts.map((part) => padCells(truncateText(part?.text || '', Number(part?.width) || 1), Number(part?.width) || 1)).join('  '), metaWidth)
@@ -346,7 +421,7 @@ const ItemRow = React.memo(function ItemRow({ indexText, indexWidth, marker, mar
         </Text>
       ) : null}
       {displayDescription ? (
-        <Text color={theme.text}>
+        <Text color={rowText}>
           {'  '}
           {displayDescription}
         </Text>