@within-7/minto 0.1.7 → 0.3.0

package/dist/components/SensitiveFileWarning.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/SensitiveFileWarning.tsx"],
+  "sourcesContent": ["/**\n * SensitiveFileWarning Component\n *\n * Displays an informational warning when operating on files that may contain\n * sensitive information (API keys, credentials, private keys, etc.).\n *\n * This warning is INFORMATIONAL only - it does not block operations.\n * Designed to give non-technical users awareness without interrupting workflow.\n */\n\nimport { Box, Text } from 'ink'\nimport * as React from 'react'\nimport { basename } from 'path'\nimport { SEMANTIC_COLORS } from '../constants/colors'\nimport { getSensitiveFileReason } from '../utils/sensitiveFiles'\n\ninterface Props {\n  /** The path to the sensitive file */\n  filePath: string\n  /** The operation being performed on the file */\n  operation: 'read' | 'write' | 'delete'\n}\n\n/**\n * Maps operation types to human-readable Chinese text\n */\nconst operationText: Record<Props['operation'], string> = {\n  read: '\u8BFB\u53D6',\n  write: '\u4FEE\u6539',\n  delete: '\u5220\u9664',\n}\n\n/**\n * SensitiveFileWarning displays an informational warning box when\n * accessing files that may contain sensitive information.\n *\n * @example\n * ```tsx\n * <SensitiveFileWarning filePath=\"/path/to/.env\" operation=\"write\" />\n * ```\n */\nexport function SensitiveFileWarning({ filePath, operation }: Props) {\n  const fileName = basename(filePath)\n  const reason = getSensitiveFileReason(filePath)\n\n  return (\n    <Box\n      flexDirection=\"column\"\n      paddingX={1}\n      paddingY={1}\n      borderStyle=\"round\"\n      borderColor={SEMANTIC_COLORS.accent}\n    >\n      <Text bold color={SEMANTIC_COLORS.accent}>\n        \uD83D\uDD12 \u654F\u611F\u6587\u4EF6\u8B66\u544A\n      </Text>\n      <Text color={SEMANTIC_COLORS.secondary}>\n        \u6B63\u5728{operationText[operation]}\u654F\u611F\u6587\u4EF6: <Text bold>{fileName}</Text>\n      </Text>\n      <Text color={SEMANTIC_COLORS.muted}>\n        {reason || '\u6B64\u6587\u4EF6\u53EF\u80FD\u5305\u542B\u5BC6\u94A5\u3001\u51ED\u8BC1\u6216\u5176\u4ED6\u654F\u611F\u4FE1\u606F\u3002'}\n      </Text>\n    </Box>\n  )\n}\n"],
+  "mappings": "AAUA,SAAS,KAAK,YAAY;AAC1B,YAAY,WAAW;AACvB,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAChC,SAAS,8BAA8B;AAYvC,MAAM,gBAAoD;AAAA,EACxD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACV;AAWO,SAAS,qBAAqB,EAAE,UAAU,UAAU,GAAU;AACnE,QAAM,WAAW,SAAS,QAAQ;AAClC,QAAM,SAAS,uBAAuB,QAAQ;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAc;AAAA,MACd,UAAU;AAAA,MACV,UAAU;AAAA,MACV,aAAY;AAAA,MACZ,aAAa,gBAAgB;AAAA;AAAA,IAE7B,oCAAC,QAAK,MAAI,MAAC,OAAO,gBAAgB,UAAQ,gDAE1C;AAAA,IACA,oCAAC,QAAK,OAAO,gBAAgB,aAAW,gBACnC,cAAc,SAAS,GAAE,8BAAM,oCAAC,QAAK,MAAI,QAAE,QAAS,CACzD;AAAA,IACA,oCAAC,QAAK,OAAO,gBAAgB,SAC1B,UAAU,0HACb;AAAA,EACF;AAEJ;",
+  "names": []
+}

package/dist/components/Spinner.js

@@ -1,10 +1,54 @@
 import { Box, Text } from "ink";
 import * as React from "react";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useMemo } from "react";
 import { getTheme } from "../utils/theme.js";
 import { sample } from "lodash-es";
 import { getSessionState } from "../utils/sessionState.js";
+import { useUnifiedAnimation } from "../utils/animationManager.js";
+import { formatNumber, formatTokenUsage } from "../utils/format.js";
+import { BRAND_GRADIENT, SEMANTIC_COLORS } from "../constants/colors.js";
 const CHARACTERS = process.platform === "darwin" ? ["\xB7", "\u2722", "\u2733", "\u2217", "\u273B", "\u273D"] : ["\xB7", "\u2722", "*", "\u2217", "\u273B", "\u273D"];
+function createDefaultState() {
+  return { phase: "thinking" };
+}
+const streamingStates = /* @__PURE__ */ new Map([
+  ["__main__", createDefaultState()]
+]);
+const agentContextStack = ["__main__"];
+function getCurrentAgentContext() {
+  return agentContextStack[agentContextStack.length - 1] ?? "__main__";
+}
+function pushAgentContext(agentId) {
+  agentContextStack.push(agentId);
+  if (!streamingStates.has(agentId)) {
+    streamingStates.set(agentId, createDefaultState());
+  }
+}
+function popAgentContext() {
+  if (agentContextStack.length > 1) {
+    return agentContextStack.pop();
+  }
+  return void 0;
+}
+function setStreamingState(state, agentId) {
+  const targetId = agentId ?? getCurrentAgentContext();
+  const current = streamingStates.get(targetId) ?? createDefaultState();
+  streamingStates.set(targetId, { ...current, ...state });
+}
+function resetStreamingState(agentId) {
+  const targetId = agentId ?? getCurrentAgentContext();
+  streamingStates.set(targetId, createDefaultState());
+}
+function getStreamingState(agentId) {
+  const targetId = agentId ?? getCurrentAgentContext();
+  return streamingStates.get(targetId) ?? createDefaultState();
+}
+function getMainStreamingState() {
+  return streamingStates.get("__main__") ?? createDefaultState();
+}
+function cleanupAgentStreamingState(agentId) {
+  streamingStates.delete(agentId);
+}
 const MESSAGES = [
   "Accomplishing",
   "Actioning",
@@ -63,39 +107,109 @@ const MESSAGES = [
   "Vibing",
   "Working"
 ];
-function Spinner() {
+function Spinner({ isActive = true }) {
   const frames = [...CHARACTERS, ...[...CHARACTERS].reverse()];
-  const [frame, setFrame] = useState(0);
-  const [elapsedTime, setElapsedTime] = useState(0);
   const message = useRef(sample(MESSAGES));
   const startTime = useRef(Date.now());
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setFrame((f) => (f + 1) % frames.length);
-    }, 120);
-    return () => clearInterval(timer);
-  }, [frames.length]);
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setElapsedTime(Math.floor((Date.now() - startTime.current) / 1e3));
-    }, 1e3);
-    return () => clearInterval(timer);
-  }, []);
-  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", marginTop: 1 }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "nowrap", height: 1, width: 2 }, /* @__PURE__ */ React.createElement(Text, { color: getTheme().minto }, frames[frame])), /* @__PURE__ */ React.createElement(Text, { color: getTheme().minto }, message.current, "\u2026 "), /* @__PURE__ */ React.createElement(Text, { color: getTheme().secondaryText }, "(", elapsedTime, "s \xB7 ", /* @__PURE__ */ React.createElement(Text, { bold: true }, "esc"), " to interrupt)"), /* @__PURE__ */ React.createElement(Text, { color: getTheme().secondaryText }, "\xB7 ", getSessionState("currentError")));
+  const theme = getTheme();
+  const { spinnerFrame, elapsedTime } = useUnifiedAnimation({
+    enabled: isActive,
+    startTime: startTime.current,
+    spinnerFrameCount: frames.length,
+    componentId: "main-spinner"
+  });
+  const streamState = useMemo(() => getMainStreamingState(), [spinnerFrame]);
+  const getPhaseDisplay = () => {
+    switch (streamState.phase) {
+      case "deep_thinking": {
+        const elapsed = streamState.thinkingStartTime ? Math.floor((Date.now() - streamState.thinkingStartTime) / 1e3) : 0;
+        const charInfo = streamState.tokenCount ? `${formatNumber(streamState.tokenCount)} chars` : "";
+        if (streamState.thinkingMaxTokens && streamState.tokenCount) {
+          return `Deep thinking (${elapsed}s \xB7 ${charInfo} / ${formatNumber(streamState.thinkingMaxTokens)})`;
+        }
+        return `Deep thinking (${elapsed}s${charInfo ? " \xB7 " + charInfo : ""})`;
+      }
+      case "retrying":
+        return streamState.retryCount && streamState.maxRetries ? `Retrying (${streamState.retryCount}/${streamState.maxRetries})${streamState.errorName ? ` \xB7 ${streamState.errorName}` : ""}` : streamState.errorName ? `Retrying \xB7 ${streamState.errorName}` : "Retrying...";
+      case "permission":
+        return "Waiting for permission...";
+      case "compacting":
+        return "Compacting context...";
+      case "concurrent":
+        return streamState.concurrentCount ? `Running ${streamState.concurrentCount} concurrent tasks...` : "Running concurrent tasks...";
+      case "tool_use":
+        return streamState.toolName ? `Using ${streamState.toolName}` : "Executing tool";
+      case "generating":
+        return "Receiving";
+      case "waiting":
+        return "Waiting for response";
+      case "thinking":
+      default:
+        return message.current;
+    }
+  };
+  const phaseColors = {
+    thinking: BRAND_GRADIENT.MIDDLE,
+    // 粉紫 - 思考中
+    deep_thinking: BRAND_GRADIENT.START,
+    // 紫蓝 - 深度思考
+    generating: SEMANTIC_COLORS.success,
+    // 绿色 - 生成中
+    tool_use: SEMANTIC_COLORS.running,
+    // 粉紫 - 工具执行
+    waiting: SEMANTIC_COLORS.dim,
+    // 灰色 - 等待
+    retrying: SEMANTIC_COLORS.error,
+    // 红色 - 重试
+    permission: SEMANTIC_COLORS.info,
+    // 蓝色 - 权限
+    compacting: SEMANTIC_COLORS.info,
+    // 蓝色 - 压缩
+    concurrent: SEMANTIC_COLORS.success
+    // 绿色 - 并发
+  };
+  const getTokenDisplay = () => {
+    if (streamState.inputTokens || streamState.outputTokens) {
+      return formatTokenUsage(streamState.inputTokens, streamState.outputTokens);
+    }
+    if (streamState.receivedChars && streamState.receivedChars > 0) {
+      const approxOutputTokens = Math.round(streamState.receivedChars / 3);
+      if (streamState.sentChars && streamState.sentChars > 0) {
+        const approxInputTokens = Math.round(streamState.sentChars / 3);
+        return `\u2191 ~${formatNumber(approxInputTokens)} \xB7 \u2193 ~${formatNumber(approxOutputTokens)}`;
+      }
+      return `\u2193 ~${formatNumber(approxOutputTokens)}`;
+    }
+    return "";
+  };
+  const tokenUsage = getTokenDisplay();
+  const thinkingDuration = streamState.thinkingDurationMs ? Math.floor(streamState.thinkingDurationMs / 1e3) : null;
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", marginTop: 1 }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "nowrap", height: 1, width: 2 }, /* @__PURE__ */ React.createElement(Text, { color: phaseColors[streamState.phase] }, frames[spinnerFrame])), /* @__PURE__ */ React.createElement(Text, { color: phaseColors[streamState.phase] }, getPhaseDisplay(), "\u2026 "), /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "(", /* @__PURE__ */ React.createElement(Text, { bold: true }, "esc esc"), " to cancel \xB7 ", elapsedTime, "s", tokenUsage && /* @__PURE__ */ React.createElement(Text, null, " \xB7 ", tokenUsage), thinkingDuration !== null && thinkingDuration > 0 && /* @__PURE__ */ React.createElement(Text, null, " \xB7 thinking ", thinkingDuration, "s"), ")"), getSessionState("currentError") && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "\xB7 ", getSessionState("currentError")));
 }
-function SimpleSpinner() {
+function SimpleSpinner({
+  isActive = true,
+  label
+}) {
   const frames = [...CHARACTERS, ...[...CHARACTERS].reverse()];
-  const [frame, setFrame] = useState(0);
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setFrame((f) => (f + 1) % frames.length);
-    }, 120);
-    return () => clearInterval(timer);
-  }, [frames.length]);
-  return /* @__PURE__ */ React.createElement(Box, { flexWrap: "nowrap", height: 1, width: 2 }, /* @__PURE__ */ React.createElement(Text, { color: getTheme().minto }, frames[frame]));
+  const startTime = useRef(Date.now());
+  const { spinnerFrame } = useUnifiedAnimation({
+    enabled: isActive,
+    startTime: startTime.current,
+    spinnerFrameCount: frames.length,
+    componentId: "simple-spinner"
+  });
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "row" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "nowrap", height: 1, width: 2 }, /* @__PURE__ */ React.createElement(Text, { color: BRAND_GRADIENT.MIDDLE }, frames[spinnerFrame])), label && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, " ", label));
 }
 export {
   SimpleSpinner,
-  Spinner
+  Spinner,
+  cleanupAgentStreamingState,
+  getCurrentAgentContext,
+  getMainStreamingState,
+  getStreamingState,
+  popAgentContext,
+  pushAgentContext,
+  resetStreamingState,
+  setStreamingState
 };
 //# sourceMappingURL=Spinner.js.map

package/dist/components/Spinner.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/Spinner.tsx"],
-  "sourcesContent": ["import { Box, Text } from 'ink'\nimport * as React from 'react'\nimport { useEffect, useRef, useState } from 'react'\nimport { getTheme } from '@utils/theme'\nimport { sample } from 'lodash-es'\nimport { getSessionState } from '@utils/sessionState'\n// NB: The third character in this string is an emoji that\n// renders on Windows consoles with a green background\nconst CHARACTERS =\n  process.platform === 'darwin'\n    ? ['\u00B7', '\u2722', '\u2733', '\u2217', '\u273B', '\u273D']\n    : ['\u00B7', '\u2722', '*', '\u2217', '\u273B', '\u273D']\n\nconst MESSAGES = [\n  'Accomplishing',\n  'Actioning',\n  'Actualizing',\n  'Baking',\n  'Brewing',\n  'Calculating',\n  'Cerebrating',\n  'Churning',\n  'Coding',\n  'Coalescing',\n  'Cogitating',\n  'Computing',\n  'Conjuring',\n  'Considering',\n  'Cooking',\n  'Crafting',\n  'Creating',\n  'Crunching',\n  'Deliberating',\n  'Determining',\n  'Doing',\n  'Effecting',\n  'Finagling',\n  'Forging',\n  'Forming',\n  'Generating',\n  'Hatching',\n  'Herding',\n  'Honking',\n  'Hustling',\n  'Ideating',\n  'Inferring',\n  'Manifesting',\n  'Marinating',\n  'Moseying',\n  'Mulling',\n  'Mustering',\n  'Musing',\n  'Noodling',\n  'Percolating',\n  'Pondering',\n  'Processing',\n  'Puttering',\n  'Reticulating',\n  'Ruminating',\n  'Schlepping',\n  'Shucking',\n  'Simmering',\n  'Smooshing',\n  'Spinning',\n  'Stewing',\n  'Synthesizing',\n  'Thinking',\n  'Transmuting',\n  'Vibing',\n  'Working',\n]\n\nexport function Spinner(): React.ReactNode {\n  const frames = [...CHARACTERS, ...[...CHARACTERS].reverse()]\n  const [frame, setFrame] = useState(0)\n  const [elapsedTime, setElapsedTime] = useState(0)\n  const message = useRef(sample(MESSAGES))\n  const startTime = useRef(Date.now())\n\n  useEffect(() => {\n    const timer = setInterval(() => {\n      setFrame(f => (f + 1) % frames.length)\n    }, 120)\n\n    return () => clearInterval(timer)\n  }, [frames.length])\n\n  useEffect(() => {\n    const timer = setInterval(() => {\n      setElapsedTime(Math.floor((Date.now() - startTime.current) / 1000))\n    }, 1000)\n\n    return () => clearInterval(timer)\n  }, [])\n\n  return (\n    <Box flexDirection=\"row\" marginTop={1}>\n      <Box flexWrap=\"nowrap\" height={1} width={2}>\n        <Text color={getTheme().minto}>{frames[frame]}</Text>\n      </Box>\n      <Text color={getTheme().minto}>{message.current}\u2026 </Text>\n      <Text color={getTheme().secondaryText}>\n        ({elapsedTime}s \u00B7 <Text bold>esc</Text> to interrupt)\n      </Text>\n      <Text color={getTheme().secondaryText}>\n        \u00B7 {getSessionState('currentError')}\n      </Text>\n    </Box>\n  )\n}\n\nexport function SimpleSpinner(): React.ReactNode {\n  const frames = [...CHARACTERS, ...[...CHARACTERS].reverse()]\n  const [frame, setFrame] = useState(0)\n\n  useEffect(() => {\n    const timer = setInterval(() => {\n      setFrame(f => (f + 1) % frames.length)\n    }, 120)\n\n    return () => clearInterval(timer)\n  }, [frames.length])\n\n  return (\n    <Box flexWrap=\"nowrap\" height={1} width={2}>\n      <Text color={getTheme().minto}>{frames[frame]}</Text>\n    </Box>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Box, Text } from 'ink'\nimport * as React from 'react'\nimport { useEffect, useRef, useState, useMemo } from 'react'\nimport { getTheme } from '@utils/theme'\nimport { sample } from 'lodash-es'\nimport { getSessionState, setSessionState } from '@utils/sessionState'\nimport { useUnifiedAnimation } from '@utils/animationManager'\nimport { formatNumber, formatTokenUsage } from '@utils/format'\nimport { BRAND_GRADIENT, SEMANTIC_COLORS } from '@constants/colors'\n\n// NB: The third character in this string is an emoji that\n// renders on Windows consoles with a green background\nconst CHARACTERS =\n  process.platform === 'darwin'\n    ? ['\u00B7', '\u2722', '\u2733', '\u2217', '\u273B', '\u273D']\n    : ['\u00B7', '\u2722', '*', '\u2217', '\u273B', '\u273D']\n\n// Streaming phases for better UX feedback\nexport type StreamingPhase =\n  | 'thinking' // Initial thinking phase\n  | 'generating' // Generating response content\n  | 'tool_use' // Executing a tool\n  | 'waiting' // Waiting for API response\n  | 'deep_thinking' // Extended thinking mode (Claude thinking blocks)\n  | 'retrying' // API retry in progress\n  | 'permission' // Waiting for user permission\n  | 'compacting' // Compacting conversation context\n  | 'concurrent' // Running concurrent tasks\n\n// Streaming state type definition\nexport interface StreamingStateData {\n  phase: StreamingPhase\n  toolName?: string\n  tokenCount?: number\n  chunkCount?: number\n  // New fields for enhanced feedback\n  retryCount?: number\n  maxRetries?: number\n  errorName?: string\n  concurrentCount?: number\n  thinkingMaxTokens?: number\n  // Token usage from API (real-time streaming)\n  inputTokens?: number\n  outputTokens?: number\n  // Character counts for approximate token estimation\n  sentChars?: number // Characters sent to API (input)\n  receivedChars?: number // Characters received from API (output)\n  // Thinking timing\n  thinkingStartTime?: number\n  thinkingDurationMs?: number\n}\n\n// Default state factory\nfunction createDefaultState(): StreamingStateData {\n  return { phase: 'thinking' }\n}\n\n// Store streaming state per agent (agentId -> state)\n// '__main__' is used for the main/root agent\nconst streamingStates: Map<string, StreamingStateData> = new Map([\n  ['__main__', createDefaultState()],\n])\n\n// Current active agent context (stack to support nesting)\nconst agentContextStack: string[] = ['__main__']\n\n/**\n * Get the current active agent ID\n */\nexport function getCurrentAgentContext(): string {\n  return agentContextStack[agentContextStack.length - 1] ?? '__main__'\n}\n\n/**\n * Push a new agent context (when entering a subagent)\n */\nexport function pushAgentContext(agentId: string): void {\n  agentContextStack.push(agentId)\n  if (!streamingStates.has(agentId)) {\n    streamingStates.set(agentId, createDefaultState())\n  }\n}\n\n/**\n * Pop the current agent context (when exiting a subagent)\n */\nexport function popAgentContext(): string | undefined {\n  if (agentContextStack.length > 1) {\n    return agentContextStack.pop()\n  }\n  return undefined\n}\n\n/**\n * Set streaming state for a specific agent (or current context if not specified)\n */\nexport function setStreamingState(\n  state: Partial<StreamingStateData>,\n  agentId?: string,\n): void {\n  const targetId = agentId ?? getCurrentAgentContext()\n  const current = streamingStates.get(targetId) ?? createDefaultState()\n  streamingStates.set(targetId, { ...current, ...state })\n}\n\n/**\n * Reset streaming state for a specific agent (or current context if not specified)\n */\nexport function resetStreamingState(agentId?: string): void {\n  const targetId = agentId ?? getCurrentAgentContext()\n  streamingStates.set(targetId, createDefaultState())\n}\n\n/**\n * Get streaming state for a specific agent (or current context if not specified)\n */\nexport function getStreamingState(agentId?: string): StreamingStateData {\n  const targetId = agentId ?? getCurrentAgentContext()\n  return streamingStates.get(targetId) ?? createDefaultState()\n}\n\n/**\n * Get streaming state for the main/root agent (used by main Spinner)\n */\nexport function getMainStreamingState(): StreamingStateData {\n  return streamingStates.get('__main__') ?? createDefaultState()\n}\n\n/**\n * Clean up streaming state for a completed agent\n */\nexport function cleanupAgentStreamingState(agentId: string): void {\n  streamingStates.delete(agentId)\n}\n\nconst MESSAGES = [\n  'Accomplishing',\n  'Actioning',\n  'Actualizing',\n  'Baking',\n  'Brewing',\n  'Calculating',\n  'Cerebrating',\n  'Churning',\n  'Coding',\n  'Coalescing',\n  'Cogitating',\n  'Computing',\n  'Conjuring',\n  'Considering',\n  'Cooking',\n  'Crafting',\n  'Creating',\n  'Crunching',\n  'Deliberating',\n  'Determining',\n  'Doing',\n  'Effecting',\n  'Finagling',\n  'Forging',\n  'Forming',\n  'Generating',\n  'Hatching',\n  'Herding',\n  'Honking',\n  'Hustling',\n  'Ideating',\n  'Inferring',\n  'Manifesting',\n  'Marinating',\n  'Moseying',\n  'Mulling',\n  'Mustering',\n  'Musing',\n  'Noodling',\n  'Percolating',\n  'Pondering',\n  'Processing',\n  'Puttering',\n  'Reticulating',\n  'Ruminating',\n  'Schlepping',\n  'Shucking',\n  'Simmering',\n  'Smooshing',\n  'Spinning',\n  'Stewing',\n  'Synthesizing',\n  'Thinking',\n  'Transmuting',\n  'Vibing',\n  'Working',\n]\n\ninterface SpinnerProps {\n  /** Whether the spinner should be active (animating) */\n  isActive?: boolean\n}\n\nexport function Spinner({ isActive = true }: SpinnerProps): React.ReactNode {\n  const frames = [...CHARACTERS, ...[...CHARACTERS].reverse()]\n  const message = useRef(sample(MESSAGES))\n  const startTime = useRef(Date.now())\n  const theme = getTheme()\n\n  // Use unified animation manager instead of separate setInterval timers\n  const { spinnerFrame, elapsedTime } = useUnifiedAnimation({\n    enabled: isActive,\n    startTime: startTime.current,\n    spinnerFrameCount: frames.length,\n    componentId: 'main-spinner',\n  })\n\n  // Get main streaming state on each render (updates when spinnerFrame changes)\n  // Use getMainStreamingState to avoid subagent interference\n  const streamState = useMemo(() => getMainStreamingState(), [spinnerFrame])\n\n  // Get phase-specific display\n  const getPhaseDisplay = () => {\n    switch (streamState.phase) {\n      case 'deep_thinking': {\n        // Show elapsed time and char count for thinking phase\n        const elapsed = streamState.thinkingStartTime\n          ? Math.floor((Date.now() - streamState.thinkingStartTime) / 1000)\n          : 0\n        const charInfo = streamState.tokenCount\n          ? `${formatNumber(streamState.tokenCount)} chars`\n          : ''\n\n        if (streamState.thinkingMaxTokens && streamState.tokenCount) {\n          return `Deep thinking (${elapsed}s \u00B7 ${charInfo} / ${formatNumber(streamState.thinkingMaxTokens)})`\n        }\n        return `Deep thinking (${elapsed}s${charInfo ? ' \u00B7 ' + charInfo : ''})`\n      }\n\n      case 'retrying':\n        return streamState.retryCount && streamState.maxRetries\n          ? `Retrying (${streamState.retryCount}/${streamState.maxRetries})${streamState.errorName ? ` \u00B7 ${streamState.errorName}` : ''}`\n          : streamState.errorName\n            ? `Retrying \u00B7 ${streamState.errorName}`\n            : 'Retrying...'\n\n      case 'permission':\n        return 'Waiting for permission...'\n\n      case 'compacting':\n        return 'Compacting context...'\n\n      case 'concurrent':\n        return streamState.concurrentCount\n          ? `Running ${streamState.concurrentCount} concurrent tasks...`\n          : 'Running concurrent tasks...'\n\n      case 'tool_use':\n        return streamState.toolName\n          ? `Using ${streamState.toolName}`\n          : 'Executing tool'\n\n      case 'generating':\n        return 'Receiving'\n\n      case 'waiting':\n        return 'Waiting for response'\n\n      case 'thinking':\n      default:\n        return message.current\n    }\n  }\n\n  // \u4F7F\u7528\u8BED\u4E49\u989C\u8272\u7CFB\u7EDF\uFF0C\u54C1\u724C\u8272\u7528\u4E8E\u601D\u8003\uFF0C\u72B6\u6001\u8272\u7528\u4E8E\u5404\u9636\u6BB5\n  const phaseColors: Record<StreamingPhase, string> = {\n    thinking: BRAND_GRADIENT.MIDDLE, // \u7C89\u7D2B - \u601D\u8003\u4E2D\n    deep_thinking: BRAND_GRADIENT.START, // \u7D2B\u84DD - \u6DF1\u5EA6\u601D\u8003\n    generating: SEMANTIC_COLORS.success, // \u7EFF\u8272 - \u751F\u6210\u4E2D\n    tool_use: SEMANTIC_COLORS.running, // \u7C89\u7D2B - \u5DE5\u5177\u6267\u884C\n    waiting: SEMANTIC_COLORS.dim, // \u7070\u8272 - \u7B49\u5F85\n    retrying: SEMANTIC_COLORS.error, // \u7EA2\u8272 - \u91CD\u8BD5\n    permission: SEMANTIC_COLORS.info, // \u84DD\u8272 - \u6743\u9650\n    compacting: SEMANTIC_COLORS.info, // \u84DD\u8272 - \u538B\u7F29\n    concurrent: SEMANTIC_COLORS.success, // \u7EFF\u8272 - \u5E76\u53D1\n  }\n\n  // Get token usage from streaming state (API values or approximate from chars)\n  const getTokenDisplay = () => {\n    // Prefer API-provided token counts - always show bidirectional if available\n    if (streamState.inputTokens || streamState.outputTokens) {\n      return formatTokenUsage(streamState.inputTokens, streamState.outputTokens)\n    }\n    // Fallback: approximate from received characters (~3 chars per token for mixed content)\n    if (streamState.receivedChars && streamState.receivedChars > 0) {\n      const approxOutputTokens = Math.round(streamState.receivedChars / 3)\n      // If we have sentChars, show both directions\n      if (streamState.sentChars && streamState.sentChars > 0) {\n        const approxInputTokens = Math.round(streamState.sentChars / 3)\n        return `\u2191 ~${formatNumber(approxInputTokens)} \u00B7 \u2193 ~${formatNumber(approxOutputTokens)}`\n      }\n      return `\u2193 ~${formatNumber(approxOutputTokens)}`\n    }\n    return ''\n  }\n\n  const tokenUsage = getTokenDisplay()\n\n  // Get thinking duration if available\n  const thinkingDuration = streamState.thinkingDurationMs\n    ? Math.floor(streamState.thinkingDurationMs / 1000)\n    : null\n\n  return (\n    <Box flexDirection=\"row\" marginTop={1}>\n      <Box flexWrap=\"nowrap\" height={1} width={2}>\n        <Text color={phaseColors[streamState.phase]}>\n          {frames[spinnerFrame]}\n        </Text>\n      </Box>\n      <Text color={phaseColors[streamState.phase]}>{getPhaseDisplay()}\u2026 </Text>\n      <Text color={SEMANTIC_COLORS.dim}>\n        (<Text bold>esc esc</Text> to cancel \u00B7 {elapsedTime}s\n        {tokenUsage && <Text> \u00B7 {tokenUsage}</Text>}\n        {thinkingDuration !== null && thinkingDuration > 0 && (\n          <Text> \u00B7 thinking {thinkingDuration}s</Text>\n        )}\n        )\n      </Text>\n      {getSessionState('currentError') && (\n        <Text color={SEMANTIC_COLORS.dim}>\n          \u00B7 {getSessionState('currentError')}\n        </Text>\n      )}\n    </Box>\n  )\n}\n\ninterface SimpleSpinnerProps {\n  /** Whether the spinner should be active (animating) */\n  isActive?: boolean\n  /** Optional label to display next to spinner */\n  label?: string\n}\n\nexport function SimpleSpinner({\n  isActive = true,\n  label,\n}: SimpleSpinnerProps): React.ReactNode {\n  const frames = [...CHARACTERS, ...[...CHARACTERS].reverse()]\n  const startTime = useRef(Date.now())\n\n  // Use unified animation manager\n  const { spinnerFrame } = useUnifiedAnimation({\n    enabled: isActive,\n    startTime: startTime.current,\n    spinnerFrameCount: frames.length,\n    componentId: 'simple-spinner',\n  })\n\n  return (\n    <Box flexDirection=\"row\">\n      <Box flexWrap=\"nowrap\" height={1} width={2}>\n        <Text color={BRAND_GRADIENT.MIDDLE}>{frames[spinnerFrame]}</Text>\n      </Box>\n      {label && <Text color={SEMANTIC_COLORS.dim}> {label}</Text>}\n    </Box>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/SpinnerSymbol.js

@@ -1,27 +1,25 @@
-import React, { useState, useEffect } from "react";
+import React, { useRef } from "react";
 import { Text } from "ink";
 import { SYMBOLS } from "../constants/symbols.js";
 import { getAgentColor } from "../constants/colors.js";
 import { getTheme } from "../utils/theme.js";
+import { useUnifiedAnimation } from "../utils/animationManager.js";
 function SpinnerSymbol({
   isRunning,
   color,
-  symbol = SYMBOLS.TASK_INDICATOR,
-  interval = 500
+  symbol = SYMBOLS.TASK_INDICATOR
 }) {
   const theme = getTheme();
   const baseColor = getAgentColor(color, theme);
-  const [isBright, setIsBright] = useState(true);
-  useEffect(() => {
-    if (!isRunning) {
-      setIsBright(true);
-      return;
-    }
-    const timer = setInterval(() => {
-      setIsBright((prev) => !prev);
-    }, interval);
-    return () => clearInterval(timer);
-  }, [isRunning, interval]);
+  const startTimeRef = useRef(Date.now());
+  const { dotVisible } = useUnifiedAnimation({
+    enabled: isRunning,
+    startTime: startTimeRef.current,
+    spinnerFrameCount: 2,
+    // Just for alternation
+    componentId: "spinner-symbol"
+  });
+  const isBright = isRunning ? dotVisible : true;
   const displayColor = isRunning && !isBright ? dimColor(baseColor) : baseColor;
   return /* @__PURE__ */ React.createElement(Text, { color: displayColor }, symbol);
 }
@@ -51,23 +49,19 @@ function getBlinkingSymbols() {
 }
 function SpinnerSymbolAlternative({
   isRunning,
-  color,
-  interval = 500
+  color
 }) {
   const theme = getTheme();
   const displayColor = getAgentColor(color, theme);
+  const startTimeRef = useRef(Date.now());
   const symbols = getBlinkingSymbols();
-  const [frameIndex, setFrameIndex] = useState(0);
-  useEffect(() => {
-    if (!isRunning) {
-      setFrameIndex(0);
-      return;
-    }
-    const timer = setInterval(() => {
-      setFrameIndex((prev) => (prev + 1) % symbols.length);
-    }, interval);
-    return () => clearInterval(timer);
-  }, [isRunning, interval, symbols.length]);
+  const { spinnerFrame } = useUnifiedAnimation({
+    enabled: isRunning,
+    startTime: startTimeRef.current,
+    spinnerFrameCount: symbols.length,
+    componentId: "spinner-symbol-alt"
+  });
+  const frameIndex = isRunning ? spinnerFrame : 0;
   return /* @__PURE__ */ React.createElement(Text, { color: displayColor }, symbols[frameIndex]);
 }
 export {

package/dist/components/SpinnerSymbol.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/SpinnerSymbol.tsx"],
-  "sourcesContent": ["import React, { useState, useEffect } from 'react'\nimport { Text } from 'ink'\nimport { SYMBOLS } from '@constants/symbols'\nimport { getAgentColor } from '@constants/colors'\nimport { getTheme } from '@utils/theme'\nimport type { AgentColor } from '@constants/colors'\n\ninterface SpinnerSymbolProps {\n  /** \u662F\u5426\u6B63\u5728\u8FD0\u884C\uFF08\u63A7\u5236\u95EA\u70C1\uFF09 */\n  isRunning: boolean\n  /** Agent \u989C\u8272 */\n  color?: AgentColor\n  /** \u81EA\u5B9A\u4E49\u7B26\u53F7\uFF08\u9ED8\u8BA4\u4F7F\u7528 TASK_INDICATOR \u23FA\uFF09 */\n  symbol?: string\n  /** \u95EA\u70C1\u95F4\u9694\uFF08\u6BEB\u79D2\uFF0C\u9ED8\u8BA4 500ms\uFF09 */\n  interval?: number\n}\n\n/**\n * \u95EA\u70C1\u7684\u4EFB\u52A1\u6307\u793A\u5668\u7EC4\u4EF6\n *\n * \u529F\u80FD\uFF1A\n * - \u4EFB\u52A1\u6267\u884C\u4E2D\uFF1A\u23FA \u7B26\u53F7\u4EE5\u6307\u5B9A\u989C\u8272\u95EA\u70C1\uFF08\u4EAE \u2192 \u6697\u4EA4\u66FF\uFF09\n * - \u4EFB\u52A1\u5B8C\u6210\u540E\uFF1A\u23FA \u7B26\u53F7\u505C\u6B62\u95EA\u70C1\uFF0C\u4FDD\u6301\u56FA\u5B9A\u989C\u8272\n * - \u652F\u6301\u81EA\u5B9A\u4E49\u989C\u8272\u548C\u95EA\u70C1\u9891\u7387\n *\n * \u5B9E\u73B0\u539F\u7406\uFF1A\n * \u4F7F\u7528 setInterval \u6BCF 500ms \u5207\u6362\u4E00\u6B21\u4E0D\u900F\u660E\u5EA6\uFF08\u901A\u8FC7\u989C\u8272\u4EAE\u5EA6\u8C03\u6574\u6A21\u62DF\uFF09\n */\nexport function SpinnerSymbol({\n  isRunning,\n  color,\n  symbol = SYMBOLS.TASK_INDICATOR,\n  interval = 500,\n}: SpinnerSymbolProps) {\n  const theme = getTheme()\n  const baseColor = getAgentColor(color, theme)\n\n  // \u95EA\u70C1\u72B6\u6001\uFF1Atrue = \u4EAE\uFF0Cfalse = \u6697\n  const [isBright, setIsBright] = useState(true)\n\n  useEffect(() => {\n    // \u53EA\u6709\u5728\u8FD0\u884C\u65F6\u624D\u95EA\u70C1\n    if (!isRunning) {\n      setIsBright(true) // \u505C\u6B62\u65F6\u4FDD\u6301\u4EAE\u72B6\u6001\n      return\n    }\n\n    // \u8BBE\u7F6E\u95EA\u70C1\u5B9A\u65F6\u5668\n    const timer = setInterval(() => {\n      setIsBright(prev => !prev)\n    }, interval)\n\n    // \u6E05\u7406\u5B9A\u65F6\u5668\n    return () => clearInterval(timer)\n  }, [isRunning, interval])\n\n  // \u6839\u636E\u95EA\u70C1\u72B6\u6001\u8C03\u6574\u989C\u8272\u4EAE\u5EA6\n  const displayColor = isRunning && !isBright ? dimColor(baseColor) : baseColor\n\n  return <Text color={displayColor}>{symbol}</Text>\n}\n\n/**\n * \u964D\u4F4E\u989C\u8272\u4EAE\u5EA6\uFF08\u6A21\u62DF\u6697\u72B6\u6001\uFF09\n *\n * @param color - Hex \u989C\u8272\u503C\uFF08\u5982 #FF5555\uFF09\n * @returns \u964D\u4F4E\u4EAE\u5EA6\u540E\u7684 Hex \u989C\u8272\u503C\n */\nfunction dimColor(color: string): string {\n  // \u79FB\u9664 # \u524D\u7F00\n  const hex = color.replace('#', '')\n\n  // \u8F6C\u6362\u4E3A RGB\n  const r = parseInt(hex.substring(0, 2), 16)\n  const g = parseInt(hex.substring(2, 4), 16)\n  const b = parseInt(hex.substring(4, 6), 16)\n\n  // \u964D\u4F4E\u4EAE\u5EA6\u5230 40%\n  const dimFactor = 0.4\n  const dimR = Math.floor(r * dimFactor)\n  const dimG = Math.floor(g * dimFactor)\n  const dimB = Math.floor(b * dimFactor)\n\n  // \u8F6C\u6362\u56DE Hex\n  const toHex = (n: number) => n.toString(16).padStart(2, '0')\n  return `#${toHex(dimR)}${toHex(dimG)}${toHex(dimB)}`\n}\n\n/**\n * \u83B7\u53D6\u95EA\u70C1\u5E27\u7B26\u53F7\uFF08\u5907\u9009\u65B9\u6848\uFF1A\u4F7F\u7528\u4E0D\u540C\u7B26\u53F7\u6A21\u62DF\u95EA\u70C1\uFF09\n *\n * \u5982\u679C\u7EC8\u7AEF\u4E0D\u652F\u6301\u989C\u8272\u8C03\u6574\uFF0C\u53EF\u4EE5\u4F7F\u7528\u4E0D\u540C\u7B26\u53F7\u4EA4\u66FF\u663E\u793A\n */\nexport function getBlinkingSymbols(): string[] {\n  return [\n    '\u23FA', // \u5B9E\u5FC3\u5706\n    '\u25C9', // \u5927\u5706\u70B9\n    '\u25CF', // \u4E2D\u5706\u70B9\n    '\u25CB', // \u7A7A\u5FC3\u5706\n  ]\n}\n\n/**\n * \u95EA\u70C1\u7684\u4EFB\u52A1\u6307\u793A\u5668\uFF08\u5907\u9009\u65B9\u6848\uFF1A\u7B26\u53F7\u4EA4\u66FF\uFF09\n *\n * \u4F7F\u7528\u4E0D\u540C\u7B26\u53F7\u6A21\u62DF\u95EA\u70C1\u6548\u679C\uFF0C\u9002\u7528\u4E8E\u4E0D\u652F\u6301\u989C\u8272\u8C03\u6574\u7684\u7EC8\u7AEF\n */\nexport function SpinnerSymbolAlternative({\n  isRunning,\n  color,\n  interval = 500,\n}: Omit<SpinnerSymbolProps, 'symbol'>) {\n  const theme = getTheme()\n  const displayColor = getAgentColor(color, theme)\n\n  const symbols = getBlinkingSymbols()\n  const [frameIndex, setFrameIndex] = useState(0)\n\n  useEffect(() => {\n    if (!isRunning) {\n      setFrameIndex(0) // \u505C\u6B62\u65F6\u4F7F\u7528\u7B2C\u4E00\u5E27\n      return\n    }\n\n    const timer = setInterval(() => {\n      setFrameIndex(prev => (prev + 1) % symbols.length)\n    }, interval)\n\n    return () => clearInterval(timer)\n  }, [isRunning, interval, symbols.length])\n\n  return <Text color={displayColor}>{symbols[frameIndex]}</Text>\n}\n"],
-  "mappings": "AAAA,OAAO,SAAS,UAAU,iBAAiB;AAC3C,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AAyBlB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,SAAS,QAAQ;AAAA,EACjB,WAAW;AACb,GAAuB;AACrB,QAAM,QAAQ,SAAS;AACvB,QAAM,YAAY,cAAc,OAAO,KAAK;AAG5C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,IAAI;AAE7C,YAAU,MAAM;AAEd,QAAI,CAAC,WAAW;AACd,kBAAY,IAAI;AAChB;AAAA,IACF;AAGA,UAAM,QAAQ,YAAY,MAAM;AAC9B,kBAAY,UAAQ,CAAC,IAAI;AAAA,IAC3B,GAAG,QAAQ;AAGX,WAAO,MAAM,cAAc,KAAK;AAAA,EAClC,GAAG,CAAC,WAAW,QAAQ,CAAC;AAGxB,QAAM,eAAe,aAAa,CAAC,WAAW,SAAS,SAAS,IAAI;AAEpE,SAAO,oCAAC,QAAK,OAAO,gBAAe,MAAO;AAC5C;AAQA,SAAS,SAAS,OAAuB;AAEvC,QAAM,MAAM,MAAM,QAAQ,KAAK,EAAE;AAGjC,QAAM,IAAI,SAAS,IAAI,UAAU,GAAG,CAAC,GAAG,EAAE;AAC1C,QAAM,IAAI,SAAS,IAAI,UAAU,GAAG,CAAC,GAAG,EAAE;AAC1C,QAAM,IAAI,SAAS,IAAI,UAAU,GAAG,CAAC,GAAG,EAAE;AAG1C,QAAM,YAAY;AAClB,QAAM,OAAO,KAAK,MAAM,IAAI,SAAS;AACrC,QAAM,OAAO,KAAK,MAAM,IAAI,SAAS;AACrC,QAAM,OAAO,KAAK,MAAM,IAAI,SAAS;AAGrC,QAAM,QAAQ,CAAC,MAAc,EAAE,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG;AAC3D,SAAO,IAAI,MAAM,IAAI,CAAC,GAAG,MAAM,IAAI,CAAC,GAAG,MAAM,IAAI,CAAC;AACpD;AAOO,SAAS,qBAA+B;AAC7C,SAAO;AAAA,IACL;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,EACF;AACF;AAOO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAAuC;AACrC,QAAM,QAAQ,SAAS;AACvB,QAAM,eAAe,cAAc,OAAO,KAAK;AAE/C,QAAM,UAAU,mBAAmB;AACnC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,CAAC;AAE9C,YAAU,MAAM;AACd,QAAI,CAAC,WAAW;AACd,oBAAc,CAAC;AACf;AAAA,IACF;AAEA,UAAM,QAAQ,YAAY,MAAM;AAC9B,oBAAc,WAAS,OAAO,KAAK,QAAQ,MAAM;AAAA,IACnD,GAAG,QAAQ;AAEX,WAAO,MAAM,cAAc,KAAK;AAAA,EAClC,GAAG,CAAC,WAAW,UAAU,QAAQ,MAAM,CAAC;AAExC,SAAO,oCAAC,QAAK,OAAO,gBAAe,QAAQ,UAAU,CAAE;AACzD;",
+  "sourcesContent": ["import React, { useRef, useMemo } from 'react'\nimport { Text } from 'ink'\nimport { SYMBOLS } from '@constants/symbols'\nimport { getAgentColor } from '@constants/colors'\nimport { getTheme } from '@utils/theme'\nimport { useUnifiedAnimation } from '@utils/animationManager'\nimport type { AgentColor } from '@constants/colors'\n\ninterface SpinnerSymbolProps {\n  /** \u662F\u5426\u6B63\u5728\u8FD0\u884C\uFF08\u63A7\u5236\u95EA\u70C1\uFF09 */\n  isRunning: boolean\n  /** Agent \u989C\u8272 */\n  color?: AgentColor\n  /** \u81EA\u5B9A\u4E49\u7B26\u53F7\uFF08\u9ED8\u8BA4\u4F7F\u7528 TASK_INDICATOR \u23FA\uFF09 */\n  symbol?: string\n  /** \u95EA\u70C1\u95F4\u9694\uFF08\u6BEB\u79D2\uFF0C\u9ED8\u8BA4 500ms\uFF09- \u4E0D\u518D\u4F7F\u7528\uFF0C\u4FDD\u7559\u7528\u4E8E\u5411\u540E\u517C\u5BB9 */\n  interval?: number\n}\n\n/**\n * \u95EA\u70C1\u7684\u4EFB\u52A1\u6307\u793A\u5668\u7EC4\u4EF6\n *\n * \u529F\u80FD\uFF1A\n * - \u4EFB\u52A1\u6267\u884C\u4E2D\uFF1A\u23FA \u7B26\u53F7\u4EE5\u6307\u5B9A\u989C\u8272\u95EA\u70C1\uFF08\u4EAE \u2192 \u6697\u4EA4\u66FF\uFF09\n * - \u4EFB\u52A1\u5B8C\u6210\u540E\uFF1A\u23FA \u7B26\u53F7\u505C\u6B62\u95EA\u70C1\uFF0C\u4FDD\u6301\u56FA\u5B9A\u989C\u8272\n * - \u652F\u6301\u81EA\u5B9A\u4E49\u989C\u8272\u548C\u95EA\u70C1\u9891\u7387\n *\n * \u5B9E\u73B0\u539F\u7406\uFF1A\n * \u4F7F\u7528\u7EDF\u4E00\u52A8\u753B\u7BA1\u7406\u5668\u4EE3\u66FF setInterval\uFF0C\u51CF\u5C11\u5C4F\u5E55\u95EA\u70C1\n */\nexport function SpinnerSymbol({\n  isRunning,\n  color,\n  symbol = SYMBOLS.TASK_INDICATOR,\n}: SpinnerSymbolProps) {\n  const theme = getTheme()\n  const baseColor = getAgentColor(color, theme)\n  const startTimeRef = useRef(Date.now())\n\n  // Use unified animation manager with 2 frames (bright/dim)\n  const { dotVisible } = useUnifiedAnimation({\n    enabled: isRunning,\n    startTime: startTimeRef.current,\n    spinnerFrameCount: 2, // Just for alternation\n    componentId: 'spinner-symbol',\n  })\n\n  // dotVisible alternates at 600ms, perfect for blink effect\n  const isBright = isRunning ? dotVisible : true\n\n  // \u6839\u636E\u95EA\u70C1\u72B6\u6001\u8C03\u6574\u989C\u8272\u4EAE\u5EA6\n  const displayColor = isRunning && !isBright ? dimColor(baseColor) : baseColor\n\n  return <Text color={displayColor}>{symbol}</Text>\n}\n\n/**\n * \u964D\u4F4E\u989C\u8272\u4EAE\u5EA6\uFF08\u6A21\u62DF\u6697\u72B6\u6001\uFF09\n *\n * @param color - Hex \u989C\u8272\u503C\uFF08\u5982 #FF5555\uFF09\n * @returns \u964D\u4F4E\u4EAE\u5EA6\u540E\u7684 Hex \u989C\u8272\u503C\n */\nfunction dimColor(color: string): string {\n  // \u79FB\u9664 # \u524D\u7F00\n  const hex = color.replace('#', '')\n\n  // \u8F6C\u6362\u4E3A RGB\n  const r = parseInt(hex.substring(0, 2), 16)\n  const g = parseInt(hex.substring(2, 4), 16)\n  const b = parseInt(hex.substring(4, 6), 16)\n\n  // \u964D\u4F4E\u4EAE\u5EA6\u5230 40%\n  const dimFactor = 0.4\n  const dimR = Math.floor(r * dimFactor)\n  const dimG = Math.floor(g * dimFactor)\n  const dimB = Math.floor(b * dimFactor)\n\n  // \u8F6C\u6362\u56DE Hex\n  const toHex = (n: number) => n.toString(16).padStart(2, '0')\n  return `#${toHex(dimR)}${toHex(dimG)}${toHex(dimB)}`\n}\n\n/**\n * \u83B7\u53D6\u95EA\u70C1\u5E27\u7B26\u53F7\uFF08\u5907\u9009\u65B9\u6848\uFF1A\u4F7F\u7528\u4E0D\u540C\u7B26\u53F7\u6A21\u62DF\u95EA\u70C1\uFF09\n *\n * \u5982\u679C\u7EC8\u7AEF\u4E0D\u652F\u6301\u989C\u8272\u8C03\u6574\uFF0C\u53EF\u4EE5\u4F7F\u7528\u4E0D\u540C\u7B26\u53F7\u4EA4\u66FF\u663E\u793A\n */\nexport function getBlinkingSymbols(): string[] {\n  return [\n    '\u23FA', // \u5B9E\u5FC3\u5706\n    '\u25C9', // \u5927\u5706\u70B9\n    '\u25CF', // \u4E2D\u5706\u70B9\n    '\u25CB', // \u7A7A\u5FC3\u5706\n  ]\n}\n\n/**\n * \u95EA\u70C1\u7684\u4EFB\u52A1\u6307\u793A\u5668\uFF08\u5907\u9009\u65B9\u6848\uFF1A\u7B26\u53F7\u4EA4\u66FF\uFF09\n *\n * \u4F7F\u7528\u4E0D\u540C\u7B26\u53F7\u6A21\u62DF\u95EA\u70C1\u6548\u679C\uFF0C\u9002\u7528\u4E8E\u4E0D\u652F\u6301\u989C\u8272\u8C03\u6574\u7684\u7EC8\u7AEF\n * \u4F7F\u7528\u7EDF\u4E00\u52A8\u753B\u7BA1\u7406\u5668\u4EE3\u66FF setInterval\n */\nexport function SpinnerSymbolAlternative({\n  isRunning,\n  color,\n}: Omit<SpinnerSymbolProps, 'symbol'>) {\n  const theme = getTheme()\n  const displayColor = getAgentColor(color, theme)\n  const startTimeRef = useRef(Date.now())\n\n  const symbols = getBlinkingSymbols()\n\n  // Use unified animation manager\n  const { spinnerFrame } = useUnifiedAnimation({\n    enabled: isRunning,\n    startTime: startTimeRef.current,\n    spinnerFrameCount: symbols.length,\n    componentId: 'spinner-symbol-alt',\n  })\n\n  const frameIndex = isRunning ? spinnerFrame : 0\n\n  return <Text color={displayColor}>{symbols[frameIndex]}</Text>\n}\n"],
+  "mappings": "AAAA,OAAO,SAAS,cAAuB;AACvC,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB,SAAS,2BAA2B;AAyB7B,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,SAAS,QAAQ;AACnB,GAAuB;AACrB,QAAM,QAAQ,SAAS;AACvB,QAAM,YAAY,cAAc,OAAO,KAAK;AAC5C,QAAM,eAAe,OAAO,KAAK,IAAI,CAAC;AAGtC,QAAM,EAAE,WAAW,IAAI,oBAAoB;AAAA,IACzC,SAAS;AAAA,IACT,WAAW,aAAa;AAAA,IACxB,mBAAmB;AAAA;AAAA,IACnB,aAAa;AAAA,EACf,CAAC;AAGD,QAAM,WAAW,YAAY,aAAa;AAG1C,QAAM,eAAe,aAAa,CAAC,WAAW,SAAS,SAAS,IAAI;AAEpE,SAAO,oCAAC,QAAK,OAAO,gBAAe,MAAO;AAC5C;AAQA,SAAS,SAAS,OAAuB;AAEvC,QAAM,MAAM,MAAM,QAAQ,KAAK,EAAE;AAGjC,QAAM,IAAI,SAAS,IAAI,UAAU,GAAG,CAAC,GAAG,EAAE;AAC1C,QAAM,IAAI,SAAS,IAAI,UAAU,GAAG,CAAC,GAAG,EAAE;AAC1C,QAAM,IAAI,SAAS,IAAI,UAAU,GAAG,CAAC,GAAG,EAAE;AAG1C,QAAM,YAAY;AAClB,QAAM,OAAO,KAAK,MAAM,IAAI,SAAS;AACrC,QAAM,OAAO,KAAK,MAAM,IAAI,SAAS;AACrC,QAAM,OAAO,KAAK,MAAM,IAAI,SAAS;AAGrC,QAAM,QAAQ,CAAC,MAAc,EAAE,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG;AAC3D,SAAO,IAAI,MAAM,IAAI,CAAC,GAAG,MAAM,IAAI,CAAC,GAAG,MAAM,IAAI,CAAC;AACpD;AAOO,SAAS,qBAA+B;AAC7C,SAAO;AAAA,IACL;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,EACF;AACF;AAQO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AACF,GAAuC;AACrC,QAAM,QAAQ,SAAS;AACvB,QAAM,eAAe,cAAc,OAAO,KAAK;AAC/C,QAAM,eAAe,OAAO,KAAK,IAAI,CAAC;AAEtC,QAAM,UAAU,mBAAmB;AAGnC,QAAM,EAAE,aAAa,IAAI,oBAAoB;AAAA,IAC3C,SAAS;AAAA,IACT,WAAW,aAAa;AAAA,IACxB,mBAAmB,QAAQ;AAAA,IAC3B,aAAa;AAAA,EACf,CAAC;AAED,QAAM,aAAa,YAAY,eAAe;AAE9C,SAAO,oCAAC,QAAK,OAAO,gBAAe,QAAQ,UAAU,CAAE;AACzD;",
   "names": []
 }

package/dist/components/StreamingBashOutput.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import { useState, useEffect, useRef } from "react";
 import { getTheme } from "../utils/theme.js";
 import { BackgroundShellManager } from "../utils/BackgroundShellManager.js";
+import { useUnifiedAnimation } from "../utils/animationManager.js";
 const MAX_SUMMARY_LINES = 5;
 const MAX_DETAIL_LINES = 50;
 function StreamingBashOutput({
@@ -13,11 +14,17 @@ function StreamingBashOutput({
 }) {
   const [outputLines, setOutputLines] = useState([]);
   const [hiddenLineCount, setHiddenLineCount] = useState(0);
-  const [elapsedTime, setElapsedTime] = useState(0);
   const [isComplete, setIsComplete] = useState(false);
   const [showDetail, setShowDetail] = useState(false);
-  const startTime = useRef(Date.now());
+  const startTimeRef = useRef(Date.now());
   const theme = getTheme();
+  const { elapsedTime } = useUnifiedAnimation({
+    enabled: !isComplete,
+    startTime: startTimeRef.current,
+    spinnerFrameCount: 1,
+    // Not used but required
+    componentId: `streaming-bash-${shellId}`
+  });
   useInput((input, key) => {
     if (key.ctrl && input === "b") {
       onMoveToBackground();
@@ -25,12 +32,6 @@ function StreamingBashOutput({
       setShowDetail((prev) => !prev);
     }
   });
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setElapsedTime(Math.floor((Date.now() - startTime.current) / 1e3));
-    }, 1e3);
-    return () => clearInterval(interval);
-  }, []);
   useEffect(() => {
     const manager = BackgroundShellManager.getInstance();
     const interval = setInterval(() => {

package/dist/components/StreamingBashOutput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/StreamingBashOutput.tsx"],
-  "sourcesContent": ["import { Box, Text, useInput } from 'ink'\nimport * as React from 'react'\nimport { useState, useEffect, useRef } from 'react'\nimport { getTheme } from '@utils/theme'\nimport { BackgroundShellManager } from '@utils/BackgroundShellManager'\n\ntype Props = {\n  shellId: string\n  command: string\n  onMoveToBackground: () => void\n  onComplete: (stdout: string, stderr: string, exitCode: number) => void\n}\n\nconst MAX_SUMMARY_LINES = 5 // Show only first few lines in summary mode\nconst MAX_DETAIL_LINES = 50 // Show more lines in detail mode\n\nexport function StreamingBashOutput({\n  shellId,\n  command,\n  onMoveToBackground,\n  onComplete,\n}: Props) {\n  const [outputLines, setOutputLines] = useState<string[]>([])\n  const [hiddenLineCount, setHiddenLineCount] = useState(0)\n  const [elapsedTime, setElapsedTime] = useState(0)\n  const [isComplete, setIsComplete] = useState(false)\n  const [showDetail, setShowDetail] = useState(false) // Ctrl+O toggle\n  const startTime = useRef(Date.now())\n  const theme = getTheme()\n\n  // Listen for keyboard shortcuts\n  useInput((input, key) => {\n    if (key.ctrl && input === 'b') {\n      onMoveToBackground()\n    } else if (key.ctrl && input === 'o') {\n      setShowDetail(prev => !prev)\n    }\n  })\n\n  // Update elapsed time\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setElapsedTime(Math.floor((Date.now() - startTime.current) / 1000))\n    }, 1000)\n\n    return () => clearInterval(interval)\n  }, [])\n\n  // Poll for output from background shell\n  useEffect(() => {\n    const manager = BackgroundShellManager.getInstance()\n\n    const interval = setInterval(() => {\n      const shell = manager.get(shellId)\n      if (!shell) return\n\n      // Get all output\n      const allLines = [...shell.stdout, ...shell.stderr].filter(\n        line => line.trim().length > 0,\n      )\n      setOutputLines(allLines)\n\n      // Calculate hidden lines based on current mode\n      const maxLines = showDetail ? MAX_DETAIL_LINES : MAX_SUMMARY_LINES\n      if (allLines.length > maxLines) {\n        setHiddenLineCount(allLines.length - maxLines)\n      } else {\n        setHiddenLineCount(0)\n      }\n\n      // Check if complete\n      if (shell.status !== 'running' && !isComplete) {\n        setIsComplete(true)\n        clearInterval(interval)\n\n        // Clean up the shell after getting final output\n        const stdout = shell.stdout.join('\\n')\n        const stderr = shell.stderr.join('\\n')\n        const exitCode = shell.exitCode ?? 0\n\n        // Remove from manager after a short delay\n        setTimeout(() => {\n          manager.remove(shellId)\n        }, 1000)\n\n        onComplete(stdout, stderr, exitCode)\n      }\n    }, 100)\n\n    return () => clearInterval(interval)\n  }, [shellId, isComplete, onComplete, showDetail])\n\n  const maxLines = showDetail ? MAX_DETAIL_LINES : MAX_SUMMARY_LINES\n  const visibleLines = outputLines.slice(0, maxLines) // Show first N lines, not last N\n\n  return (\n    <Box flexDirection=\"column\" marginTop={1}>\n      <Box>\n        <Text color={theme.bashBorder}>! </Text>\n        <Text>{command}</Text>\n      </Box>\n\n      {visibleLines.length > 0 && (\n        <Box flexDirection=\"column\" paddingLeft={2}>\n          <Text color={theme.secondaryText}>\u23BF </Text>\n          {visibleLines.map((line, index) => (\n            <Box key={index}>\n              <Text>{line}</Text>\n            </Box>\n          ))}\n        </Box>\n      )}\n\n      {hiddenLineCount > 0 && (\n        <Box paddingLeft={2}>\n          <Text color={theme.secondaryText}>\n            +{hiddenLineCount} more lines ({elapsedTime}s)\n          </Text>\n        </Box>\n      )}\n\n      {!isComplete && (\n        <Box paddingLeft={2} marginTop={1} flexDirection=\"row\" gap={1}>\n          <Text color={theme.secondaryText}>\n            ctrl+o {showDetail ? 'hide details' : 'show details'}\n          </Text>\n          <Text color={theme.secondaryText}>\u00B7</Text>\n          <Text color={theme.warning}>ctrl+b run in background</Text>\n        </Box>\n      )}\n    </Box>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Box, Text, useInput } from 'ink'\nimport * as React from 'react'\nimport { useState, useEffect, useRef } from 'react'\nimport { getTheme } from '@utils/theme'\nimport { BackgroundShellManager } from '@utils/BackgroundShellManager'\nimport { useUnifiedAnimation } from '@utils/animationManager'\n\ntype Props = {\n  shellId: string\n  command: string\n  onMoveToBackground: () => void\n  onComplete: (stdout: string, stderr: string, exitCode: number) => void\n}\n\nconst MAX_SUMMARY_LINES = 5 // Show only first few lines in summary mode\nconst MAX_DETAIL_LINES = 50 // Show more lines in detail mode\n\nexport function StreamingBashOutput({\n  shellId,\n  command,\n  onMoveToBackground,\n  onComplete,\n}: Props) {\n  const [outputLines, setOutputLines] = useState<string[]>([])\n  const [hiddenLineCount, setHiddenLineCount] = useState(0)\n  const [isComplete, setIsComplete] = useState(false)\n  const [showDetail, setShowDetail] = useState(false) // Ctrl+O toggle\n  const startTimeRef = useRef(Date.now())\n  const theme = getTheme()\n\n  // Use unified animation manager for elapsed time instead of setInterval\n  const { elapsedTime } = useUnifiedAnimation({\n    enabled: !isComplete,\n    startTime: startTimeRef.current,\n    spinnerFrameCount: 1, // Not used but required\n    componentId: `streaming-bash-${shellId}`,\n  })\n\n  // Listen for keyboard shortcuts\n  useInput((input, key) => {\n    if (key.ctrl && input === 'b') {\n      onMoveToBackground()\n    } else if (key.ctrl && input === 'o') {\n      setShowDetail(prev => !prev)\n    }\n  })\n\n  // Poll for output from background shell\n  useEffect(() => {\n    const manager = BackgroundShellManager.getInstance()\n\n    const interval = setInterval(() => {\n      const shell = manager.get(shellId)\n      if (!shell) return\n\n      // Get all output\n      const allLines = [...shell.stdout, ...shell.stderr].filter(\n        line => line.trim().length > 0,\n      )\n      setOutputLines(allLines)\n\n      // Calculate hidden lines based on current mode\n      const maxLines = showDetail ? MAX_DETAIL_LINES : MAX_SUMMARY_LINES\n      if (allLines.length > maxLines) {\n        setHiddenLineCount(allLines.length - maxLines)\n      } else {\n        setHiddenLineCount(0)\n      }\n\n      // Check if complete\n      if (shell.status !== 'running' && !isComplete) {\n        setIsComplete(true)\n        clearInterval(interval)\n\n        // Clean up the shell after getting final output\n        const stdout = shell.stdout.join('\\n')\n        const stderr = shell.stderr.join('\\n')\n        const exitCode = shell.exitCode ?? 0\n\n        // Remove from manager after a short delay\n        setTimeout(() => {\n          manager.remove(shellId)\n        }, 1000)\n\n        onComplete(stdout, stderr, exitCode)\n      }\n    }, 100)\n\n    return () => clearInterval(interval)\n  }, [shellId, isComplete, onComplete, showDetail])\n\n  const maxLines = showDetail ? MAX_DETAIL_LINES : MAX_SUMMARY_LINES\n  const visibleLines = outputLines.slice(0, maxLines) // Show first N lines, not last N\n\n  return (\n    <Box flexDirection=\"column\" marginTop={1}>\n      <Box>\n        <Text color={theme.bashBorder}>! </Text>\n        <Text>{command}</Text>\n      </Box>\n\n      {visibleLines.length > 0 && (\n        <Box flexDirection=\"column\" paddingLeft={2}>\n          <Text color={theme.secondaryText}>\u23BF </Text>\n          {visibleLines.map((line, index) => (\n            <Box key={index}>\n              <Text>{line}</Text>\n            </Box>\n          ))}\n        </Box>\n      )}\n\n      {hiddenLineCount > 0 && (\n        <Box paddingLeft={2}>\n          <Text color={theme.secondaryText}>\n            +{hiddenLineCount} more lines ({elapsedTime}s)\n          </Text>\n        </Box>\n      )}\n\n      {!isComplete && (\n        <Box paddingLeft={2} marginTop={1} flexDirection=\"row\" gap={1}>\n          <Text color={theme.secondaryText}>\n            ctrl+o {showDetail ? 'hide details' : 'show details'}\n          </Text>\n          <Text color={theme.secondaryText}>\u00B7</Text>\n          <Text color={theme.warning}>ctrl+b run in background</Text>\n        </Box>\n      )}\n    </Box>\n  )\n}\n"],
+  "mappings": "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",
   "names": ["maxLines"]
 }

package/dist/components/StructuredDiff.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import { getTheme } from "../utils/theme.js";
 import { useMemo } from "react";
 import { wrapText } from "../utils/format.js";
+import { SEMANTIC_COLORS } from "../constants/colors.js";
 function StructuredDiff({
   patch,
   dim,
@@ -54,9 +55,8 @@ function formatDiff(lines, startingLineNumber, width, dim, overrideTheme) {
           ), /* @__PURE__ */ React.createElement(
             Text,
             {
-              color: overrideTheme ? theme.text : void 0,
-              backgroundColor: dim ? theme.diff.addedDimmed : theme.diff.added,
-              dimColor: dim
+              color: dim ? SEMANTIC_COLORS.dim : overrideTheme ? theme.text : void 0,
+              backgroundColor: dim ? theme.diff.addedDimmed : theme.diff.added
             },
             line
           )));
@@ -70,9 +70,8 @@ function formatDiff(lines, startingLineNumber, width, dim, overrideTheme) {
           ), /* @__PURE__ */ React.createElement(
             Text,
             {
-              color: overrideTheme ? theme.text : void 0,
-              backgroundColor: dim ? theme.diff.removedDimmed : theme.diff.removed,
-              dimColor: dim
+              color: dim ? SEMANTIC_COLORS.dim : overrideTheme ? theme.text : void 0,
+              backgroundColor: dim ? theme.diff.removedDimmed : theme.diff.removed
             },
             line
           )));
@@ -86,8 +85,7 @@ function formatDiff(lines, startingLineNumber, width, dim, overrideTheme) {
           ), /* @__PURE__ */ React.createElement(
             Text,
             {
-              color: overrideTheme ? theme.text : void 0,
-              dimColor: dim
+              color: dim ? SEMANTIC_COLORS.dim : overrideTheme ? theme.text : void 0
             },
             line
           )));

package/dist/components/StructuredDiff.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/StructuredDiff.tsx"],
-  "sourcesContent": ["import { Box, Text } from 'ink'\nimport * as React from 'react'\nimport { Hunk } from 'diff'\nimport { getTheme, ThemeNames } from '@utils/theme'\nimport { useMemo } from 'react'\nimport { wrapText } from '@utils/format'\n\ntype Props = {\n  patch: Hunk\n  dim: boolean\n  width: number\n  overrideTheme?: ThemeNames // custom theme for previews\n  key?: React.Key\n}\n\nexport function StructuredDiff({\n  patch,\n  dim,\n  width,\n  overrideTheme,\n}: Props): React.ReactNode {\n  const diff = useMemo(\n    () => formatDiff(patch.lines, patch.oldStart, width, dim, overrideTheme),\n    [patch.lines, patch.oldStart, width, dim, overrideTheme],\n  )\n\n  return diff.map((_, i) => <Box key={i}>{_}</Box>)\n}\n\nfunction formatDiff(\n  lines: string[],\n  startingLineNumber: number,\n  width: number,\n  dim: boolean,\n  overrideTheme?: ThemeNames,\n): React.ReactNode[] {\n  const theme = getTheme(overrideTheme)\n\n  const ls = numberDiffLines(\n    lines.map(code => {\n      if (code.startsWith('+')) {\n        return {\n          code: ' ' + code.slice(1),\n          i: 0,\n          type: 'add',\n        }\n      }\n      if (code.startsWith('-')) {\n        return {\n          code: ' ' + code.slice(1),\n          i: 0,\n          type: 'remove',\n        }\n      }\n      return { code, i: 0, type: 'nochange' }\n    }),\n    startingLineNumber,\n  )\n\n  const maxLineNumber = Math.max(...ls.map(({ i }) => i))\n  const maxWidth = maxLineNumber.toString().length\n\n  return ls.flatMap(({ type, code, i }) => {\n    const wrappedLines = wrapText(code, width - maxWidth)\n    return wrappedLines.map((line, lineIndex) => {\n      const key = `${type}-${i}-${lineIndex}`\n      switch (type) {\n        case 'add':\n          return (\n            <React.Fragment key={key}>\n              <Text>\n                <LineNumber\n                  i={lineIndex === 0 ? i : undefined}\n                  width={maxWidth}\n                />\n                <Text\n                  color={overrideTheme ? theme.text : undefined}\n                  backgroundColor={\n                    dim ? theme.diff.addedDimmed : theme.diff.added\n                  }\n                  dimColor={dim}\n                >\n                  {line}\n                </Text>\n              </Text>\n            </React.Fragment>\n          )\n        case 'remove':\n          return (\n            <React.Fragment key={key}>\n              <Text>\n                <LineNumber\n                  i={lineIndex === 0 ? i : undefined}\n                  width={maxWidth}\n                />\n                <Text\n                  color={overrideTheme ? theme.text : undefined}\n                  backgroundColor={\n                    dim ? theme.diff.removedDimmed : theme.diff.removed\n                  }\n                  dimColor={dim}\n                >\n                  {line}\n                </Text>\n              </Text>\n            </React.Fragment>\n          )\n        case 'nochange':\n          return (\n            <React.Fragment key={key}>\n              <Text>\n                <LineNumber\n                  i={lineIndex === 0 ? i : undefined}\n                  width={maxWidth}\n                />\n                <Text\n                  color={overrideTheme ? theme.text : undefined}\n                  dimColor={dim}\n                >\n                  {line}\n                </Text>\n              </Text>\n            </React.Fragment>\n          )\n      }\n    })\n  })\n}\n\nfunction LineNumber({\n  i,\n  width,\n}: {\n  i: number | undefined\n  width: number\n}): React.ReactNode {\n  return (\n    <Text color={getTheme().secondaryText}>\n      {i !== undefined ? i.toString().padStart(width) : ' '.repeat(width)}{' '}\n    </Text>\n  )\n}\n\nfunction numberDiffLines(\n  diff: { code: string; type: string }[],\n  startLine: number,\n): { code: string; type: string; i: number }[] {\n  let i = startLine\n  const result: { code: string; type: string; i: number }[] = []\n  const queue = [...diff]\n\n  while (queue.length > 0) {\n    const { code, type } = queue.shift()!\n    const line = {\n      code: code,\n      type,\n      i,\n    }\n\n    // Update counters based on change type\n    switch (type) {\n      case 'nochange':\n        i++\n        result.push(line)\n        break\n      case 'add':\n        i++\n        result.push(line)\n        break\n      case 'remove': {\n        result.push(line)\n        let numRemoved = 0\n        while (queue[0]?.type === 'remove') {\n          i++\n          const { code, type } = queue.shift()!\n          const line = {\n            code: code,\n            type,\n            i,\n          }\n          result.push(line)\n          numRemoved++\n        }\n        i -= numRemoved\n        break\n      }\n    }\n  }\n\n  return result\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Box, Text } from 'ink'\nimport * as React from 'react'\nimport { Hunk } from 'diff'\nimport { getTheme, ThemeNames } from '@utils/theme'\nimport { useMemo } from 'react'\nimport { wrapText } from '@utils/format'\nimport { SEMANTIC_COLORS } from '@constants/colors'\n\ntype Props = {\n  patch: Hunk\n  dim: boolean\n  width: number\n  overrideTheme?: ThemeNames // custom theme for previews\n  key?: React.Key\n}\n\nexport function StructuredDiff({\n  patch,\n  dim,\n  width,\n  overrideTheme,\n}: Props): React.ReactNode {\n  const diff = useMemo(\n    () => formatDiff(patch.lines, patch.oldStart, width, dim, overrideTheme),\n    [patch.lines, patch.oldStart, width, dim, overrideTheme],\n  )\n\n  return diff.map((_, i) => <Box key={i}>{_}</Box>)\n}\n\nfunction formatDiff(\n  lines: string[],\n  startingLineNumber: number,\n  width: number,\n  dim: boolean,\n  overrideTheme?: ThemeNames,\n): React.ReactNode[] {\n  const theme = getTheme(overrideTheme)\n\n  const ls = numberDiffLines(\n    lines.map(code => {\n      if (code.startsWith('+')) {\n        return {\n          code: ' ' + code.slice(1),\n          i: 0,\n          type: 'add',\n        }\n      }\n      if (code.startsWith('-')) {\n        return {\n          code: ' ' + code.slice(1),\n          i: 0,\n          type: 'remove',\n        }\n      }\n      return { code, i: 0, type: 'nochange' }\n    }),\n    startingLineNumber,\n  )\n\n  const maxLineNumber = Math.max(...ls.map(({ i }) => i))\n  const maxWidth = maxLineNumber.toString().length\n\n  return ls.flatMap(({ type, code, i }) => {\n    const wrappedLines = wrapText(code, width - maxWidth)\n    return wrappedLines.map((line, lineIndex) => {\n      const key = `${type}-${i}-${lineIndex}`\n      switch (type) {\n        case 'add':\n          return (\n            <React.Fragment key={key}>\n              <Text>\n                <LineNumber\n                  i={lineIndex === 0 ? i : undefined}\n                  width={maxWidth}\n                />\n                <Text\n                  color={\n                    dim\n                      ? SEMANTIC_COLORS.dim\n                      : overrideTheme\n                        ? theme.text\n                        : undefined\n                  }\n                  backgroundColor={\n                    dim ? theme.diff.addedDimmed : theme.diff.added\n                  }\n                >\n                  {line}\n                </Text>\n              </Text>\n            </React.Fragment>\n          )\n        case 'remove':\n          return (\n            <React.Fragment key={key}>\n              <Text>\n                <LineNumber\n                  i={lineIndex === 0 ? i : undefined}\n                  width={maxWidth}\n                />\n                <Text\n                  color={\n                    dim\n                      ? SEMANTIC_COLORS.dim\n                      : overrideTheme\n                        ? theme.text\n                        : undefined\n                  }\n                  backgroundColor={\n                    dim ? theme.diff.removedDimmed : theme.diff.removed\n                  }\n                >\n                  {line}\n                </Text>\n              </Text>\n            </React.Fragment>\n          )\n        case 'nochange':\n          return (\n            <React.Fragment key={key}>\n              <Text>\n                <LineNumber\n                  i={lineIndex === 0 ? i : undefined}\n                  width={maxWidth}\n                />\n                <Text\n                  color={\n                    dim\n                      ? SEMANTIC_COLORS.dim\n                      : overrideTheme\n                        ? theme.text\n                        : undefined\n                  }\n                >\n                  {line}\n                </Text>\n              </Text>\n            </React.Fragment>\n          )\n      }\n    })\n  })\n}\n\nfunction LineNumber({\n  i,\n  width,\n}: {\n  i: number | undefined\n  width: number\n}): React.ReactNode {\n  return (\n    <Text color={getTheme().secondaryText}>\n      {i !== undefined ? i.toString().padStart(width) : ' '.repeat(width)}{' '}\n    </Text>\n  )\n}\n\nfunction numberDiffLines(\n  diff: { code: string; type: string }[],\n  startLine: number,\n): { code: string; type: string; i: number }[] {\n  let i = startLine\n  const result: { code: string; type: string; i: number }[] = []\n  const queue = [...diff]\n\n  while (queue.length > 0) {\n    const { code, type } = queue.shift()!\n    const line = {\n      code: code,\n      type,\n      i,\n    }\n\n    // Update counters based on change type\n    switch (type) {\n      case 'nochange':\n        i++\n        result.push(line)\n        break\n      case 'add':\n        i++\n        result.push(line)\n        break\n      case 'remove': {\n        result.push(line)\n        let numRemoved = 0\n        while (queue[0]?.type === 'remove') {\n          i++\n          const { code, type } = queue.shift()!\n          const line = {\n            code: code,\n            type,\n            i,\n          }\n          result.push(line)\n          numRemoved++\n        }\n        i -= numRemoved\n        break\n      }\n    }\n  }\n\n  return result\n}\n"],
+  "mappings": "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",
   "names": ["code", "type", "line"]
 }

package/dist/components/SubagentBlock.js

@@ -5,6 +5,7 @@ import { getTodoStatusSymbol } from "../constants/symbols.js";
 import { AgentThinkingBlock } from "./AgentThinkingBlock.js";
 import { ToolExecutionBlock } from "./ToolExecutionBlock.js";
 import { AgentResponseBlock } from "./AgentResponseBlock.js";
+import { useAgentTokenStats, formatTokenCount } from "../hooks/useAgentTokenStats.js";
 function SubagentBlock({
   subagent,
   indent = 0,
@@ -13,6 +14,7 @@ function SubagentBlock({
   const theme = getTheme();
   const [expanded, setExpanded] = useState(isExpanded);
   const marginLeft = indent * 2;
+  const tokenStats = useAgentTokenStats(subagent.id);
   const todos = extractSubagentTodos(subagent);
   const thinking = extractThinkingMessage(subagent);
   const toolExecutions = extractToolExecutions(subagent);
@@ -20,7 +22,7 @@ function SubagentBlock({
   const duration = subagent.metrics.endTime ? ((subagent.metrics.endTime - subagent.metrics.startTime) / 1e3).toFixed(
     1
   ) : "...";
-  const tokenCount = subagent.metrics.tokenCount || 0;
+  const tokenCount = tokenStats?.grandTotalTokens ?? 0;
   const statusIndicator = getStatusIndicator(subagent.status);
   const statusColor = getStatusColor(subagent.status, theme);
   return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginLeft, marginTop: 1 }, /* @__PURE__ */ React.createElement(Box, { flexDirection: "row" }, /* @__PURE__ */ React.createElement(Text, { color: theme.brand }, "\u{1F916} "), /* @__PURE__ */ React.createElement(Text, null, "Launching subagent: ", /* @__PURE__ */ React.createElement(Text, { bold: true }, subagent.agentType))), /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", marginLeft: 2 }, /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, "\u251C\u2500 "), /* @__PURE__ */ React.createElement(Text, null, "Task: ", subagent.taskName)), expanded && /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginLeft: 2 }, /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, "\u2502"), todos && todos.length > 0 && /* @__PURE__ */ React.createElement(SubagentTodosSection, { todos, theme }), thinking && /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginLeft: 1 }, /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, "\u2502 "), /* @__PURE__ */ React.createElement(
@@ -38,7 +40,7 @@ function SubagentBlock({
       indent: 0,
       isSubagent: true
     }
-  )), /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, "\u2502")), /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", marginLeft: 2 }, /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, "\u2514\u2500 "), /* @__PURE__ */ React.createElement(Text, { color: statusColor }, statusIndicator, " ", getStatusLabel(subagent.status)), subagent.status === "completed" && /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, " ", "(", duration, "s, ", tokenCount, " tokens)")), !expanded && /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", marginLeft: 4 }, /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, "Press ", /* @__PURE__ */ React.createElement(Text, { bold: true }, "Ctrl+O"), " to expand details")));
+  )), /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, "\u2502")), /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", marginLeft: 2 }, /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, "\u2514\u2500 "), /* @__PURE__ */ React.createElement(Text, { color: statusColor }, statusIndicator, " ", getStatusLabel(subagent.status)), subagent.status === "completed" && /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, " ", "(", duration, "s, ", formatTokenCount(tokenCount), " tokens)")), !expanded && /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", marginLeft: 4 }, /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, "Press ", /* @__PURE__ */ React.createElement(Text, { bold: true }, "Ctrl+O"), " to expand details")));
 }
 function SubagentTodosSection({
   todos,
@@ -146,7 +148,7 @@ function getStatusLabel(status) {
     case "running":
       return "Running...";
     case "completed":
-      return "Completed";
+      return "Done";
     case "error":
       return "Error";
   }