mixdog 0.9.2 → 0.9.4

package/src/tui/components/TranscriptItem.jsx

@@ -0,0 +1,105 @@
+/**
+ * TranscriptItem.jsx — per-item transcript renderer (Item) + the hook-denial
+ * tool card. Extracted verbatim from App.jsx.
+ */
+import React from 'react';
+import { Box, Text } from 'ink';
+import stringWidth from 'string-width';
+import stripAnsi from 'strip-ansi';
+import { theme, TURN_MARKER, RESULT_GUTTER } from '../theme.mjs';
+import { AssistantMessage, UserMessage, NoticeMessage } from './Message.jsx';
+import { ToolExecution } from './ToolExecution.jsx';
+import { StatusDone, TurnDone } from './TurnDone.jsx';
+import { ItemRightHintOverprint } from './ItemRightHintOverprint.jsx';
+import { formatToolSurface } from '../../runtime/shared/tool-surface.mjs';
+import {
+  formatHookDenialDetail,
+  isHookApprovalDenialToolItem,
+  shouldSuppressFullyFailedToolItem,
+  toolItemResultText,
+} from '../transcript-tool-failures.mjs';
+
+export function ToolHookDenialCard({ item, columns = 80 }) {
+  const { label, summary } = formatToolSurface(item.name, item.args);
+  const detail = formatHookDenialDetail(toolItemResultText(item));
+  const safeLabel = stripAnsi(String(label || '')).replace(/[\u0000-\u001F\u007F]/g, ' ').replace(/\s+/g, ' ').trim();
+  const safeSummary = stripAnsi(String(summary || '')).replace(/[\u0000-\u001F\u007F]/g, ' ').replace(/\s+/g, ' ').trim();
+  const safeDetail = stripAnsi(String(detail || '')).replace(/[\u0000-\u001F\u007F]/g, ' ').replace(/\s+/g, ' ').trim();
+  const summaryText = safeSummary ? ` (${safeSummary})` : '';
+  const rowWidth = Math.max(1, Number(columns || 80));
+  const detailWidth = Math.max(1, rowWidth - stringWidth(RESULT_GUTTER));
+  return (
+    <Box flexDirection="column" marginTop={1} width={rowWidth} overflow="hidden">
+      <Box flexDirection="row" width={rowWidth} overflow="hidden">
+        <Box flexShrink={0} minWidth={2}>
+          <Text color={theme.error}>{TURN_MARKER}</Text>
+        </Box>
+        <Box flexGrow={1} flexShrink={1} overflow="hidden" minWidth={0}>
+          <Text wrap="truncate">
+            <Text bold color={theme.text}>{safeLabel}</Text>
+            {summaryText ? <Text color={theme.text}>{summaryText}</Text> : null}
+            <Text color={theme.error}> · Denied</Text>
+          </Text>
+        </Box>
+      </Box>
+      {safeDetail ? (
+        <Box flexDirection="row" width={rowWidth} overflow="hidden">
+          <Box flexShrink={0} width={stringWidth(RESULT_GUTTER)}>
+            <Text color={theme.subtle}>{RESULT_GUTTER}</Text>
+          </Box>
+          <Box flexShrink={0} width={detailWidth} overflow="hidden">
+            <Text color={theme.error} wrap="truncate">{safeDetail}</Text>
+          </Box>
+        </Box>
+      ) : null}
+    </Box>
+  );
+}
+
+// `themeEpoch` is read but not used in the body: it is a memo-busting prop. The
+// active theme mutates `theme` in-place, so a switch must force every mounted
+// transcript row (which reads theme.* directly) to re-render. Threading the
+// epoch through Item → AssistantMessage/UserMessage/ToolExecution breaks
+// React.memo's shallow equality on a theme change without a broad refactor.
+export const Item = React.memo(function Item({ item, prevKind, columns, toolOutputExpanded, rightMessage = '', rightTone = 'info', rightMessageWidth = 24, themeEpoch = 0 }) {
+  const hintOnTurnDoneRow = item.kind === 'turndone' || item.kind === 'statusdone';
+  let node = null;
+  switch (item.kind) {
+    case 'user':
+      node = <UserMessage text={item.text} attached={prevKind === 'user'} columns={columns} themeEpoch={themeEpoch} />;
+      break;
+    case 'assistant':
+      node = <AssistantMessage text={item.text} streaming={item.streaming} columns={columns} themeEpoch={themeEpoch} assistantId={item.id} />;
+      break;
+    case 'tool': {
+      if (shouldSuppressFullyFailedToolItem(item)) return null;
+      if (isHookApprovalDenialToolItem(item)) {
+        node = <ToolHookDenialCard item={item} columns={columns} />;
+        break;
+      }
+      node = <ToolExecution name={item.name} args={item.args} result={item.result} rawResult={item.rawResult} isError={item.isError} errorCount={item.errorCount} expanded={toolOutputExpanded || item.expanded} columns={columns} attached={false} count={item.count} completedCount={item.completedCount} startedAt={item.startedAt} completedAt={item.completedAt} aggregate={item.aggregate} categories={item.categories} headerFinalized={item.headerFinalized} deferredDisplayReady={item.deferredDisplayReady} themeEpoch={themeEpoch} />;
+      break;
+    }
+    case 'notice':
+      node = <NoticeMessage text={item.text} tone={item.tone} columns={columns} />;
+      break;
+    case 'turndone':
+      node = <TurnDone elapsedMs={item.elapsedMs} status={item.status} outputTokens={item.outputTokens} thinkingElapsedMs={item.thinkingElapsedMs} verb={item.verb} rightMessage={rightMessage} rightTone={rightTone} rightMessageWidth={rightMessageWidth} />;
+      break;
+    case 'statusdone':
+      node = <StatusDone label={item.label} detail={item.detail} rightMessage={rightMessage} rightTone={rightTone} rightMessageWidth={rightMessageWidth} />;
+      break;
+    default:
+      return null;
+  }
+  if (!node || hintOnTurnDoneRow || !rightMessage) return node;
+  return (
+    <ItemRightHintOverprint
+      rightMessage={rightMessage}
+      rightTone={rightTone}
+      rightMessageWidth={rightMessageWidth}
+    >
+      {node}
+    </ItemRightHintOverprint>
+  );
+});

package/src/tui/components/UsagePanel.jsx

@@ -108,6 +108,12 @@ function windowValue(w) {
   const limitCredits = Number(w?.limitCredits);
   const usedPct = Number(w?.usedPct);
   const prefix = estimated ? 'est ' : '';
+  // Percent first: windows that carry usedPct (OAuth quotas, OpenCode Go
+  // console) all render as "5H 17%" so provider rows stay uniform; dollar
+  // remaining is the fallback for billing-style windows without a percent.
+  if (hasFiniteNumber(w?.usedPct)) {
+    return { text: `${prefix}${Math.round(usedPct)}%`, color: estimated ? theme.warning : pctColor(usedPct) };
+  }
   if (hasFiniteNumber(w?.remainingUsd)) {
     return { text: `${prefix}${money(remainingUsd)}`, color: estimated ? theme.warning : remainingUsdColor(remainingUsd) };
   }
@@ -123,9 +129,6 @@ function windowValue(w) {
   if (hasFiniteNumber(w?.usedCredits) && hasFiniteNumber(w?.limitCredits)) {
     return { text: `${prefix}${compactNumber(usedCredits)}/${compactNumber(limitCredits)}`, color: estimated ? theme.warning : creditsColor(w) };
   }
-  if (hasFiniteNumber(w?.usedPct)) {
-    return { text: `${prefix}${Math.round(usedPct)}%`, color: estimated ? theme.warning : pctColor(usedPct) };
-  }
   return { text: '', color: theme.subtle };
 }
 
@@ -171,7 +174,15 @@ function rowStatusParts(row, columns = 80, statusWidth = 0) {
   const showCredit = hasCredit && (columns >= 80 || windows.length === 0);
   if (windows.length || showCredit) {
     const maxWindows = windows.length ? maxStatusWindows(columns, statusWidth, showCredit) : 0;
-    const visibleWindows = windows.slice(0, maxWindows);
+    let visibleWindows = windows.slice(0, maxWindows);
+    if (windows.length > maxWindows && maxWindows > 0) {
+      // Don't let an actively-used window (e.g. monthly at 17%) get cut in
+      // favor of idle 0% windows; keep the top-usage windows in list order.
+      const ranked = [...windows]
+        .sort((a, b) => (Number(b?.usedPct) || 0) - (Number(a?.usedPct) || 0))
+        .slice(0, maxWindows);
+      visibleWindows = windows.filter((w) => ranked.includes(w));
+    }
     for (const window of visibleWindows) {
       pushStatusSeparator(parts);
       parts.push(...windowSegmentParts(window));
@@ -186,6 +197,9 @@ function rowStatusParts(row, columns = 80, statusWidth = 0) {
     case 'checking':
       return [{ text: 'checking...', color: theme.inactive }];
     case 'hidden':
+      // Provider balance can't be accurately refreshed (no/failed balance
+      // API): show an explicit "-" placeholder instead of a blank cell.
+      return [{ text: row?.primary || '-', color: theme.inactive }];
     case 'missing':
     case 'local':
     case 'error':

package/src/tui/components/prompt-input/edit-helpers.mjs

@@ -0,0 +1,72 @@
+/**
+ * components/prompt-input/edit-helpers.mjs — pure prompt-editor helpers (no
+ * React): hint styling, insert/draft-compare, pasted-text normalization, and
+ * modified-Enter (kitty / modifyOtherKeys) sequence recognition. Extracted
+ * verbatim from PromptInput.jsx — behavior unchanged.
+ */
+import { theme } from '../../theme.mjs';
+import { replaceSelection } from '../../input-editing.mjs';
+
+export function hintStyle(tone) {
+  if (tone === 'error') return { textColor: theme.error };
+  if (tone === 'warn' || tone === 'cancel') return { textColor: theme.warning };
+  if (tone === 'plain') return { textColor: theme.subtle };
+  return { textColor: theme.inactive };
+}
+
+export function insertText(draft, input) {
+  if (!input) return draft;
+  return replaceSelection(draft, input);
+}
+
+export function normalizePastedText(text) {
+  return String(text ?? '').replace(/\r\n?/g, '\n');
+}
+
+export function singleTrailingLineBreakPrefix(text) {
+  const normalized = normalizePastedText(text);
+  if (!normalized.endsWith('\n')) return null;
+  const prefix = normalized.slice(0, -1);
+  return prefix.includes('\n') ? null : prefix;
+}
+
+export function draftStateEqual(a, b) {
+  return (
+    a.value === b.value
+    && a.cursor === b.cursor
+    && a.selectionAnchor === b.selectionAnchor
+  );
+}
+
+// Recognize a MODIFIED Enter delivered via the kitty keyboard protocol
+// (\x1b[13;<mod>u) or modifyOtherKeys (\x1b[27;<mod>;13~). The xterm modifier
+// param is (1 + bitmask) where the bitmask bits are shift=1, alt=2, ctrl=4. We
+// treat Ctrl+Enter AND Shift+Enter (the two common "insert newline" chords) as a
+// newline, so we match when the shift OR ctrl bit is set. Ctrl+J is handled
+// separately as the protocol-independent fallback.
+const MODIFIED_ENTER_SHIFT_OR_CTRL = 1 | 4;
+
+export function isModifiedEnterSequence(input) {
+  const text = String(input ?? '');
+  const body = text.startsWith('\x1b[') ? text.slice(2) : text.startsWith('[') ? text.slice(1) : '';
+  if (!body) return false;
+  const kitty = /^13;(\d+)(?::\d+)?(?:;[\d:]+)?u$/.exec(body);
+  if (kitty) return ((Number(kitty[1]) - 1) & MODIFIED_ENTER_SHIFT_OR_CTRL) !== 0;
+  const modifyOtherKeys = /^27;(\d+);13~$/.exec(body);
+  return Boolean(modifyOtherKeys && (((Number(modifyOtherKeys[1]) - 1) & MODIFIED_ENTER_SHIFT_OR_CTRL) !== 0));
+}
+
+// Recognize ANY modified Enter (any modifier bitmask, e.g. Alt+Enter \x1b[13;3u
+// / \x1b[27;3;13~). Used to CONSUME modified-Enter sequences we don't map to a
+// newline (Alt-only, etc.) so they aren't typed into the prompt as raw CSI text
+// under modifyOtherKeys. Plain Enter (mod param = 1, bitmask 0) is intentionally
+// NOT matched, so it still submits.
+export function isAnyModifiedEnterSequence(input) {
+  const text = String(input ?? '');
+  const body = text.startsWith('\x1b[') ? text.slice(2) : text.startsWith('[') ? text.slice(1) : '';
+  if (!body) return false;
+  const kitty = /^13;(\d+)(?::\d+)?(?:;[\d:]+)?u$/.exec(body);
+  if (kitty) return (Number(kitty[1]) - 1) !== 0;
+  const modifyOtherKeys = /^27;(\d+);13~$/.exec(body);
+  return Boolean(modifyOtherKeys && ((Number(modifyOtherKeys[1]) - 1) !== 0));
+}

package/src/tui/components/prompt-input/voice-indicator.mjs

@@ -0,0 +1,39 @@
+/**
+ * components/prompt-input/voice-indicator.mjs — voice-indicator glyph frames,
+ * timing constants, and frame-selection helper for the prompt box right edge.
+ * Pure (no React). Extracted verbatim from PromptInput.jsx — behavior unchanged.
+ */
+
+// Monotone voice indicator glyphs — right end of the prompt box. All frames
+// are 1-cell-wide (no emoji, no string-width special-casing needed). Modes:
+//   'off'          — voice disabled and no install in flight: renders nothing,
+//                    zero reserved columns.
+//   'installing'   — voice-runtime download in progress (progressHint active):
+//                    braille spinner only.
+//   'idle'         — voice enabled, recorder idle: a STATIC ○ glyph. No
+//                    animation — an animated idle reads as "something is
+//                    running" when nothing is, and the old pulse frames
+//                    (◎ ◍ ◉ ◍) rendered as tofu/odd-width glyphs in common
+//                    Windows Terminal fonts (◍ U+25CD especially).
+//   'recording'    — steady ● + a braille spinner riding next to it (2 cells).
+//   'transcribing' — braille spinner only (recording just stopped, awaiting
+//                    the whisper-server round-trip).
+// A single ~120ms interval drives the braille cycle, and it only exists
+// while an ANIMATED mode is active (installing/recording/transcribing) —
+// 'idle' and 'off' need no timer at all.
+export const VOICE_BRAILLE_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧'];
+export const VOICE_IDLE_GLYPH = '○';
+export const VOICE_TICK_MS = 120;
+
+// Resolve the indicator glyph text for a given mode + animation tick. Returns
+// '' (rendered as null / zero reserved columns) when the indicator is hidden.
+export function voiceIndicatorTextFor(mode, tick) {
+  const voiceBrailleFrame = VOICE_BRAILLE_FRAMES[tick % VOICE_BRAILLE_FRAMES.length];
+  return mode === 'installing' || mode === 'transcribing'
+    ? voiceBrailleFrame
+    : mode === 'recording'
+      ? `●${voiceBrailleFrame}`
+      : mode === 'idle'
+        ? VOICE_IDLE_GLYPH
+        : '';
+}

package/src/tui/components/tool-execution/ResultBody.jsx

@@ -0,0 +1,56 @@
+/**
+ * components/tool-execution/ResultBody.jsx — the multi-line result body under
+ * the ⎿ gutter (COLLAPSED fitted summary or EXPANDED raw). Extracted verbatim
+ * from ToolExecution.jsx — behavior unchanged.
+ */
+import React from 'react';
+import { Box, Text } from 'ink';
+import { theme, RESULT_GUTTER, RESULT_GUTTER_CONT } from '../../theme.mjs';
+import { formatExpandedResult, wrapExpandedResultLines } from '../tool-output-format.mjs';
+import { deltaTextParts, fitResultLine } from './text-format.mjs';
+
+export function renderDeltaText(text) {
+  return deltaTextParts(text).map((part, index) => (
+    part.color ? <Text key={index} color={part.color}>{part.text}</Text> : part.text
+  ));
+}
+
+// Shared multi-line result body: `└` on the first row, `│` continuation rail on
+// every following row, body text in one flex column so wrapping stays aligned
+// under the head gutter.
+//
+// Two render paths:
+//   - COLLAPSED (raw=false): a single fitted summary line, diff(+/-) colored via
+//     renderDeltaText.
+//   - EXPANDED (raw=true): formatExpandedResult then wrapExpandedResultLines so
+//     each physical row fits the body width before render (rail rows stay 1:1;
+//     ink does not re-wrap). Physical row mount cap: MIXDOG_TUI_TOOL_OUTPUT_MAX_RENDER_LINES
+//     (default 600; 0 disables). Shell/script bodies keep the newest tail when capped.
+export function ResultBody({ lines, rawText, pathArg = '', isShell = false, columns, color, raw }) {
+  const renderLines = raw
+    ? wrapExpandedResultLines(
+      formatExpandedResult(rawText, { pathArg, isShell }),
+      columns,
+      { isShell },
+    )
+    : (lines || []);
+  if (!renderLines || renderLines.length === 0) return null;
+  return (
+    <Box flexDirection="row">
+      <Box flexShrink={0} flexDirection="column">
+        {renderLines.map((_, i) => (
+          <Text key={i} color={theme.subtle}>{i === 0 ? RESULT_GUTTER : RESULT_GUTTER_CONT}</Text>
+        ))}
+      </Box>
+      <Box flexDirection="column" flexShrink={1} flexGrow={1}>
+        {renderLines.map((line, i) => (
+          <Text key={i} color={raw ? undefined : color} wrap="truncate">
+            {raw
+              ? (line || ' ')
+              : renderDeltaText(fitResultLine(line || ' ', columns))}
+          </Text>
+        ))}
+      </Box>
+    </Box>
+  );
+}