mixdog 0.8.1 → 0.9.0

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>
+  );
+});