mixdog 0.8.0 → 0.9.0

package/src/tui/components/QueuedCommands.jsx

@@ -1,7 +1,7 @@
 /**
  * components/QueuedCommands.jsx — queued steering prompts.
  *
- * Forked from Claude Code's PromptInputQueuedCommands: lines the user typed
+ * Queued steering prompts: lines the user typed
  * while a turn is busy wait here as dim rows, pinned just above the input box
  * (part of the input cluster) instead of polluting the transcript. Each queued
  * line is promoted to a real transcript user row only when it starts executing

package/src/tui/components/SlashCommandPalette.jsx

@@ -1,18 +1,19 @@
-/**
- * components/SlashCommandPalette.jsx — live slash command palette.
- *
- * This is intentionally display-only: PromptInput owns keyboard focus and
- * forwards arrow / enter / escape decisions to App, so the prompt caret stays
- * anchored while the palette updates above it.
- */
+/**
+ * components/SlashCommandPalette.jsx — live slash command palette.
+ *
+ * This is intentionally display-only: PromptInput owns keyboard focus and
+ * forwards arrow / enter / escape decisions to App, so the prompt caret stays
+ * anchored while the palette updates above it.
+ */
 import React from 'react';
 import { Box, Text } from 'ink';
 import stringWidth from 'string-width';
 import { theme } from '../theme.mjs';
-
+
 const MAX_VISIBLE = 8;
 const COMMAND_LABEL_WIDTH = 18;
 const SLASH_HELP = '↑/↓ select · ←/→ change · Enter run · Esc cancel';
+const SLASH_DESCRIPTION = 'Type to filter · Enter runs the highlighted command.';
 const ACRONYM_LABELS = new Map([
   ['mcp', 'MCP'],
 ]);
@@ -43,7 +44,7 @@ function queryMatchesAlias(command, query) {
 
 function commandDisplayLabel(command, query) {
   const usage = String(command?.usage || command?.name || '').replace(/^\/+/, '');
-  const aliasText = queryMatchesAlias(command, query) && Array.isArray(command?.aliasUsage) && command.aliasUsage.length > 0
+  const aliasText = command?.showAliasUsage !== false && queryMatchesAlias(command, query) && Array.isArray(command?.aliasUsage) && command.aliasUsage.length > 0
     ? ` (${command.aliasUsage.join(', ')})`
     : '';
   const label = ACRONYM_LABELS.get(usage.toLowerCase()) || (usage ? `${usage.charAt(0).toUpperCase()}${usage.slice(1)}` : usage);
@@ -62,20 +63,25 @@ export function SlashCommandPalette({ commands, selectedIndex = 0, title = 'Comm
   const blankRows = Math.max(0, MAX_VISIBLE - visible.length);
   const labelWidth = Math.max(12, Math.min(COMMAND_LABEL_WIDTH, Math.max(12, Math.floor(columns * 0.45))));
   const descriptionWidth = Math.max(0, columns - labelWidth - 12);
-
-  return (
-    <Box flexDirection="column" flexShrink={0} width="100%">
-      <Box
-        flexDirection="column"
-        borderStyle="round"
-        borderColor={theme.promptBorder}
-        paddingX={1}
-        width="100%"
-      >
-        <Box flexDirection="row" justifyContent="space-between" marginBottom={1}>
+  // Standard panel rhythm: title row, blank, description/hint row, blank, content.
+  const description = truncateText(SLASH_DESCRIPTION, Math.max(0, columns - 4));
+
+  return (
+    <Box flexDirection="column" flexShrink={0} width="100%">
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor={theme.promptBorder}
+        paddingX={1}
+        width="100%"
+      >
+        <Box flexDirection="row" justifyContent="space-between">
           <Text color={theme.panelTitle}>{title}</Text>
           <Text color={theme.subtle}>{SLASH_HELP}</Text>
         </Box>
+        <Text> </Text>
+        <Text color={theme.subtle}>{description || ' '}</Text>
+        <Text> </Text>
         {visible.map((item, index) => (
           <CommandRow
             key={item.name}
@@ -93,7 +99,7 @@ export function SlashCommandPalette({ commands, selectedIndex = 0, title = 'Comm
     </Box>
   );
 }
-
+
 const CommandRow = React.memo(function CommandRow({ command, isSelected, labelWidth, descriptionWidth, query }) {
   const label = truncateText(commandDisplayLabel(command, query), labelWidth);
   const description = truncateText(command.description, descriptionWidth);

package/src/tui/components/Spinner.jsx

@@ -1,23 +1,19 @@
 /**
- * components/Spinner.jsx — the "thinking" indicator (Claude Code shape).
+ * components/Spinner.jsx — the "thinking" indicator.
  *
- * Ported from Claude Code's SpinnerAnimationRow + SpinnerGlyph + GlimmerMessage:
- *   - frames = [...DEFAULT_CHARACTERS, ...reverse] so it sweeps forward then
- *     back (CC SpinnerGlyph SPINNER_FRAMES).
- *   - the glyph sits in a `width={2}` box (CC's <Box height={1} width={2}>).
- *   - verb… verb shimmer: traveling highlight in claudeShimmer with
- *     mode-aware glimmer speed (CC GlimmerMessage).
+ * Spinner row layout:
+ *   - frames sweep forward then back.
+ *   - the glyph sits in a `width={2}` box.
+ *   - verb… verb shimmer: traveling highlight with mode-aware glimmer speed.
  *   - stall detection with exponential smoothing: intensity fades in/out over
- *     2s (CC useStalledAnimation).
- *   - thinking shimmer: left-to-right "thinking" label after delay (CC
- *     ThinkingShimmerText, inlined from useAnimationFrame).
+ *     2s fade.
+ *   - thinking shimmer: left-to-right "thinking" label after delay.
  *   - progressive width gating: timer/tokens/thinking shown left→right only if
- *     they fit after the previous segments (CC SpinnerAnimationRow).
+ *     they fit after the previous segments.
  *   - token counter animation: smooth increment toward the current turn's
- *     output token count, shown Claude Code style as a single "<glyph> N
- *     tokens" segment (CC SpinnerAnimationRow + SpinnerModeGlyph). The glyph
+ *     output token count as a single "<glyph> N tokens" segment. The glyph
  *     is mode-driven: up while requesting, down otherwise. Input totals hidden.
- *   - elided duration formatting (CC formatDuration: "0:25" after 60s).
+ *   - elided duration formatting ("0:25" after 60s).
  *   - mode prop: 'responding' | 'thinking' | 'tool-use' | 'tool-input' |
  *     'requesting' | 'compacting' | 'resuming' (default 'responding').
  */
@@ -29,21 +25,21 @@ import { DOWN_ARROW, UP_ARROW } from '../figures.mjs';
 import { formatDuration } from '../time-format.mjs';
 
 const FRAME_MS = 130;
-// CC plays the frames forward, then in reverse — a smooth there-and-back sweep.
+// Play frames forward, then in reverse — a smooth there-and-back sweep.
 const FRAMES = [...SPINNER_FRAMES, ...[...SPINNER_FRAMES].reverse()];
 
 // Stall: response must grow within this window or the glyph reddens.
 const STALL_TIMEOUT_MS = 3000;
-const STALL_FADE_MS = 2000; // CC fades red over 2s
-// Claude Code hides elapsed/token meta on short turns unless verbose/teammates
+const STALL_FADE_MS = 2000; // fade red over 2s
+// Hide elapsed/token meta on short turns unless verbose/teammates
 // are active. Mixdog has no spinner verbose/teammate row here, so mirror the
 // default 30s threshold.
 const SHOW_TOKENS_AFTER_MS = 30_000;
-// Thinking shimmer starts after this delay (CC THINKING_DELAY_MS).
+// Thinking shimmer starts after this delay.
 const THINKING_DELAY_MS = 3000;
 
 // One-way shimmer. The tail runs past the final character before restarting.
-const GLIMMER_SPEED_MS = { requesting: 70, compacting: 120, resuming: 120, 'tool-use': 120, responding: 120, thinking: 120, 'tool-input': 120 };
+const GLIMMER_SPEED_MS = { requesting: 70, compacting: 120, 'auto-clear': 120, resuming: 120, 'tool-use': 120, responding: 120, thinking: 120, 'tool-input': 120 };
 const GLIMMER_TRAIL = 4;
 const THINKING_GLIMMER_SPEED_MS = 120;
 const THINKING_GLIMMER_TRAIL = 4;
@@ -54,6 +50,7 @@ const VERB_CHANGE_PROBABILITY = 0.65;
 const MODE_VERBS = {
   requesting: ['Requesting', 'Preparing', 'Routing'],
   compacting: ['Compacting conversation'],
+  'auto-clear': ['Auto-clearing conversation'],
   resuming: ['Resuming conversation'],
   thinking: ['Thinking', 'Reasoning', 'Mapping'],
   'tool-use': ['Using tools', 'Checking files', 'Running tools', 'Reading output'],
@@ -109,11 +106,19 @@ function renderShimmerText(text, head, trail, baseRgb, shimmerRgb, baseColor, ke
   );
 }
 
-const TEXT_RGB = parseRgb(theme.spinnerText) ?? parseRgb(theme.text);
-const SHIMMER_RGB = parseRgb(theme.spinnerShimmer) ?? parseRgb(theme.claudeShimmer);
-const SPINNER_GLYPH_RGB = parseRgb(theme.spinnerGlyph) ?? { r: 240, g: 240, b: 240 };
-const THINKING_INACTIVE = parseRgb(theme.thinkingBase) ?? parseRgb(theme.thinkingAccent) ?? { r: 153, g: 153, b: 153 };
-const THINKING_SHIMMER = parseRgb(theme.thinkingGlow) ?? { r: 255, g: 205, b: 175 };
+// Parsed RGB tuples are derived from the active theme. They are resolved per
+// render (cheap regex parse) so a live `/theme` switch — which mutates `theme`
+// in-place and re-renders the tree — picks up the new shimmer/glyph colors
+// instead of the colors captured at module load.
+function spinnerRgb() {
+  return {
+    TEXT_RGB: parseRgb(theme.spinnerText) ?? parseRgb(theme.text),
+    SHIMMER_RGB: parseRgb(theme.spinnerShimmer) ?? parseRgb(theme.claudeShimmer),
+    SPINNER_GLYPH_RGB: parseRgb(theme.spinnerGlyph) ?? { r: 240, g: 240, b: 240 },
+    THINKING_INACTIVE: parseRgb(theme.thinkingBase) ?? parseRgb(theme.thinkingAccent) ?? { r: 153, g: 153, b: 153 },
+    THINKING_SHIMMER: parseRgb(theme.thinkingGlow) ?? { r: 255, g: 205, b: 175 },
+  };
+}
 
 const compactNumberFormatter = new Intl.NumberFormat('en-US', {
   notation: 'compact',
@@ -147,8 +152,27 @@ function chooseNextVerb(mode, fallback, current) {
   return candidates[Math.floor(Math.random() * candidates.length)];
 }
 
+// Token-direction glyph by mode:
+// up while uploading the request, down while receiving a response, and no
+// glyph at all for non-streaming modes (compacting/resuming/auto-clear) where
+// the arrow direction would be meaningless.
+function tokenModeGlyph(mode) {
+  switch (mode) {
+    case 'tool-input':
+    case 'tool-use':
+    case 'responding':
+    case 'thinking':
+      return DOWN_ARROW;
+    case 'requesting':
+      return UP_ARROW;
+    default:
+      return '';
+  }
+}
+
 export function Spinner({ verb = 'Working', startedAt, outputTokens = 0, tokens = 0, thinking = false, thinkingActiveSince = 0, mode = 'responding', columns = 80, marginTop = 1 }) {
   useAnimation({ interval: FRAME_MS });
+  const { TEXT_RGB, SHIMMER_RGB, SPINNER_GLYPH_RGB, THINKING_INACTIVE, THINKING_SHIMMER } = spinnerRgb();
   const now = Date.now();
   const elapsedMs = startedAt ? Math.max(0, now - startedAt) : 0;
   const frame = Math.floor(elapsedMs / FRAME_MS);
@@ -158,7 +182,7 @@ export function Spinner({ verb = 'Working', startedAt, outputTokens = 0, tokens
   const displayVerbRef = useRef('');
   const displayVerbModeRef = useRef('');
   const nextVerbCheckRef = useRef(0);
-  // Stall smoothing refs (CC useStalledAnimation exponential fade)
+  // Stall smoothing refs (exponential fade)
   const stallSmoothRef = useRef(0);
   const lastStallTickRef = useRef(0);
 
@@ -173,7 +197,7 @@ export function Spinner({ verb = 'Working', startedAt, outputTokens = 0, tokens
 
   const stallMs = now - lastGrowRef.current;
   const isStalled = targetOutputTokens > 0 && stallMs > STALL_TIMEOUT_MS;
-  // Stall smoothing: exponential fade toward target (CC useStalledAnimation)
+  // Stall smoothing: exponential fade toward target
   const rawIntensity = isStalled
     ? Math.min(1, (stallMs - STALL_TIMEOUT_MS) / STALL_FADE_MS)
     : 0;
@@ -194,7 +218,7 @@ export function Spinner({ verb = 'Working', startedAt, outputTokens = 0, tokens
 
   const glyph = FRAMES[frame % FRAMES.length];
 
-  // Glyph color — interpolate toward red when stalled (CC SpinnerGlyph).
+  // Glyph color — interpolate toward red when stalled.
   const glyphColor = stalledIntensity > 0
     ? toRgbString(interpolateColor(
         SPINNER_GLYPH_RGB,
@@ -203,7 +227,7 @@ export function Spinner({ verb = 'Working', startedAt, outputTokens = 0, tokens
       ))
     : theme.spinnerGlyph;
 
-  // --- Verb shimmer (CC GlimmerMessage traveling highlight) ---
+  // --- Verb shimmer (traveling highlight) ---
   if (displayVerbModeRef.current !== mode || !displayVerbRef.current) {
     displayVerbModeRef.current = mode;
     displayVerbRef.current = stableModeVerb(mode, verb);
@@ -242,18 +266,20 @@ export function Spinner({ verb = 'Working', startedAt, outputTokens = 0, tokens
     return Math.round(ref.current);
   };
 
-  // Token counter animation — Claude Code shows a single "<glyph> N tokens"
-  // segment (SpinnerAnimationRow + SpinnerModeGlyph). N is the output/response
+  // Token counter animation — single "<glyph> N tokens" segment. N is the output/response
   // token count, smoothly incremented toward the current turn's value. The
   // glyph is mode-driven: up while requesting, down otherwise (responding,
   // thinking, tool-use, tool-input). Input token totals are not shown.
   const displayedOutputTokens = advanceCounter(displayedOutputRef, targetOutputTokens);
 
-  const tokenGlyph = mode === 'requesting' ? UP_ARROW : DOWN_ARROW;
-  const tokenText = displayedOutputTokens > 0 ? `${tokenGlyph} ${formatNumber(displayedOutputTokens)} tokens` : '';
+  const tokenGlyph = tokenModeGlyph(mode);
+  const tokenCountText = formatNumber(displayedOutputTokens);
+  const tokenText = displayedOutputTokens > 0
+    ? (tokenGlyph ? `${tokenGlyph} ${tokenCountText} tokens` : `${tokenCountText} tokens`)
+    : '';
   const tokenW = tokenText.length;
 
-  // Progressive width gating (CC SpinnerAnimationRow): show status parts
+  // Progressive width gating: show status parts
   // left→right, each only if it fits after the previous ones. Timer/tokens are
   // hidden for short turns by default; thinking status can still show alone.
   const avail = columns - messageLen - 5; // glyph(2) + ' (' + ')'
@@ -266,17 +292,20 @@ export function Spinner({ verb = 'Working', startedAt, outputTokens = 0, tokens
     ? 'thinking'
     : '';
   const thinkingStatusW = thinkingStatusText.length;
-  const wantsTimerAndTokens = elapsedMs > SHOW_TOKENS_AFTER_MS;
+  // Turn elapsed time is the headline metric here, not a thinking sub-stat, so
+  // it shows from 1s onward (formatDuration returns '' below 1s). Tokens keep
+  // Short-turn gate: tokens only appear once the turn runs long.
+  const wantsTokens = elapsedMs > SHOW_TOKENS_AFTER_MS;
 
-  // Claude Code gives thinking display priority for narrow widths, but renders
+  // Thinking display priority for narrow widths, but renders
   // it after timer/tokens in the final byline.
   const showThinkingStatus = Boolean(thinkingStatusText) && avail > thinkingStatusW;
   const usedAfterThinking = showThinkingStatus ? thinkingStatusW + SEP_WIDTH : 0;
-  const showTimer = wantsTimerAndTokens && Boolean(timerLabel) && avail > usedAfterThinking + timerW;
+  const showTimer = Boolean(timerLabel) && avail > usedAfterThinking + timerW;
   const usedAfterTimer = usedAfterThinking + (showTimer ? timerW + SEP_WIDTH : 0);
-  const showTokens = wantsTimerAndTokens && tokenText && avail > usedAfterTimer + tokenW;
+  const showTokens = wantsTokens && tokenText && avail > usedAfterTimer + tokenW;
 
-  // Build meta line segments — elapsed, tokens, thinking (Claude Code order).
+  // Build meta line segments — elapsed, tokens, thinking.
   const segments = [];
   if (showTimer) {
     segments.push(