@within-7/minto 0.1.7 → 0.3.0

package/dist/components/TodoChangeBlock.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/TodoChangeBlock.tsx"],
-  "sourcesContent": ["/**\n * TodoChangeBlock - Renders Todo changes in the conversation flow\n *\n * Displays:\n * - Tool call header \"\uD83D\uDD27 Updated task list\"\n * - Individual changes via TodoChangeLine\n * - Summary statistics (pending/in_progress/completed)\n *\n * When TodoWriteTool is called, this component shows what changed\n * in the conversation timeline, separate from the TodoPanel.\n */\n\nimport { Box, Text } from 'ink'\nimport React from 'react'\nimport type { TodoChange } from '@utils/todoChangeCalculator'\nimport type { TodoItem } from '@utils/todoStorage'\nimport { TodoChangeLine } from './TodoChangeLine'\nimport { getTheme } from '@utils/theme'\n\ninterface TodoChangeBlockProps {\n  /** List of changes to display */\n  changes: TodoChange[]\n  /** Current complete todo list (for statistics) */\n  todos: TodoItem[]\n  /** Indentation level (default: 1) */\n  indent?: number\n}\n\nexport function TodoChangeBlock({\n  changes,\n  todos,\n  indent = 1,\n}: TodoChangeBlockProps) {\n  const theme = getTheme()\n\n  // Calculate statistics\n  const stats = {\n    pending: todos.filter(t => t.status === 'pending').length,\n    inProgress: todos.filter(t => t.status === 'in_progress').length,\n    completed: todos.filter(t => t.status === 'completed').length,\n  }\n\n  return (\n    <Box flexDirection=\"column\" marginLeft={indent * 2}>\n      {/* Tool call header */}\n      <Box flexDirection=\"row\">\n        <Text color={theme.brand}>\uD83D\uDD27 </Text>\n        <Text>Updated task list</Text>\n      </Box>\n\n      {/* Changes display */}\n      {changes.length > 0 && (\n        <Box flexDirection=\"column\" marginLeft={2}>\n          {changes.map((change, idx) => (\n            <Box key={`${change.todoId}-${idx}`}>\n              <TodoChangeLine change={change} />\n            </Box>\n          ))}\n        </Box>\n      )}\n\n      {/* Summary statistics */}\n      <Box\n        flexDirection=\"row\"\n        marginLeft={2}\n        marginTop={changes.length > 0 ? 1 : 0}\n      >\n        <Text color={theme.dim}>\n          {stats.pending} pending \u00B7 {stats.inProgress} in progress \u00B7{' '}\n          {stats.completed} completed\n        </Text>\n      </Box>\n    </Box>\n  )\n}\n"],
-  "mappings": "AAYA,SAAS,KAAK,YAAY;AAC1B,OAAO,WAAW;AAGlB,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AAWlB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,SAAS;AACX,GAAyB;AACvB,QAAM,QAAQ,SAAS;AAGvB,QAAM,QAAQ;AAAA,IACZ,SAAS,MAAM,OAAO,OAAK,EAAE,WAAW,SAAS,EAAE;AAAA,IACnD,YAAY,MAAM,OAAO,OAAK,EAAE,WAAW,aAAa,EAAE;AAAA,IAC1D,WAAW,MAAM,OAAO,OAAK,EAAE,WAAW,WAAW,EAAE;AAAA,EACzD;AAEA,SACE,oCAAC,OAAI,eAAc,UAAS,YAAY,SAAS,KAE/C,oCAAC,OAAI,eAAc,SACjB,oCAAC,QAAK,OAAO,MAAM,SAAO,YAAG,GAC7B,oCAAC,YAAK,mBAAiB,CACzB,GAGC,QAAQ,SAAS,KAChB,oCAAC,OAAI,eAAc,UAAS,YAAY,KACrC,QAAQ,IAAI,CAAC,QAAQ,QACpB,oCAAC,OAAI,KAAK,GAAG,OAAO,MAAM,IAAI,GAAG,MAC/B,oCAAC,kBAAe,QAAgB,CAClC,CACD,CACH,GAIF;AAAA,IAAC;AAAA;AAAA,MACC,eAAc;AAAA,MACd,YAAY;AAAA,MACZ,WAAW,QAAQ,SAAS,IAAI,IAAI;AAAA;AAAA,IAEpC,oCAAC,QAAK,OAAO,MAAM,OAChB,MAAM,SAAQ,kBAAY,MAAM,YAAW,qBAAe,KAC1D,MAAM,WAAU,YACnB;AAAA,EACF,CACF;AAEJ;",
+  "sourcesContent": ["/**\n * TodoChangeBlock - Renders Todo changes in the conversation flow\n *\n * Displays:\n * - Tool call header \"\uD83D\uDD27 Updated task list\"\n * - Individual changes via TodoChangeLine\n * - Summary statistics (pending/in_progress/completed)\n *\n * When TodoWriteTool is called, this component shows what changed\n * in the conversation timeline, separate from the TodoPanel.\n */\n\nimport { Box, Text } from 'ink'\nimport React from 'react'\nimport type { TodoChange } from '@utils/todoChangeCalculator'\nimport type { TodoItem } from '@utils/todoStorage'\nimport { TodoChangeLine } from './TodoChangeLine'\nimport { getTheme } from '@utils/theme'\n\ninterface TodoChangeBlockProps {\n  /** List of changes to display */\n  changes: TodoChange[]\n  /** Current complete todo list (for statistics) */\n  todos: TodoItem[]\n  /** Indentation level (default: 1) */\n  indent?: number\n}\n\nexport function TodoChangeBlock({\n  changes,\n  todos,\n  indent = 1,\n}: TodoChangeBlockProps) {\n  const theme = getTheme()\n\n  // Calculate statistics\n  const stats = {\n    pending: todos.filter(t => t.status === 'pending').length,\n    inProgress: todos.filter(t => t.status === 'in_progress').length,\n    completed: todos.filter(t => t.status === 'completed').length,\n  }\n\n  return (\n    <Box flexDirection=\"column\" marginLeft={indent * 2}>\n      {/* Tool call header */}\n      <Box flexDirection=\"row\">\n        <Text color={theme.brand}>\uD83D\uDD27 </Text>\n        <Text>Updated task list</Text>\n      </Box>\n\n      {/* Changes display */}\n      {changes.length > 0 && (\n        <Box flexDirection=\"column\" marginLeft={2}>\n          {changes.map((change, idx) => (\n            <Box key={`${change.todoId}-${idx}`}>\n              <TodoChangeLine change={change} />\n            </Box>\n          ))}\n        </Box>\n      )}\n\n      {/* Summary statistics */}\n      <Box\n        flexDirection=\"row\"\n        marginLeft={2}\n        marginTop={changes.length > 0 ? 1 : 0}\n      >\n        <Text color={theme.dim}>\n          {stats.pending} pending \u00B7 {stats.inProgress} in progress \u00B7{' '}\n          {stats.completed} done\n        </Text>\n      </Box>\n    </Box>\n  )\n}\n"],
+  "mappings": "AAYA,SAAS,KAAK,YAAY;AAC1B,OAAO,WAAW;AAGlB,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AAWlB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,SAAS;AACX,GAAyB;AACvB,QAAM,QAAQ,SAAS;AAGvB,QAAM,QAAQ;AAAA,IACZ,SAAS,MAAM,OAAO,OAAK,EAAE,WAAW,SAAS,EAAE;AAAA,IACnD,YAAY,MAAM,OAAO,OAAK,EAAE,WAAW,aAAa,EAAE;AAAA,IAC1D,WAAW,MAAM,OAAO,OAAK,EAAE,WAAW,WAAW,EAAE;AAAA,EACzD;AAEA,SACE,oCAAC,OAAI,eAAc,UAAS,YAAY,SAAS,KAE/C,oCAAC,OAAI,eAAc,SACjB,oCAAC,QAAK,OAAO,MAAM,SAAO,YAAG,GAC7B,oCAAC,YAAK,mBAAiB,CACzB,GAGC,QAAQ,SAAS,KAChB,oCAAC,OAAI,eAAc,UAAS,YAAY,KACrC,QAAQ,IAAI,CAAC,QAAQ,QACpB,oCAAC,OAAI,KAAK,GAAG,OAAO,MAAM,IAAI,GAAG,MAC/B,oCAAC,kBAAe,QAAgB,CAClC,CACD,CACH,GAIF;AAAA,IAAC;AAAA;AAAA,MACC,eAAc;AAAA,MACd,YAAY;AAAA,MACZ,WAAW,QAAQ,SAAS,IAAI,IAAI;AAAA;AAAA,IAEpC,oCAAC,QAAK,OAAO,MAAM,OAChB,MAAM,SAAQ,kBAAY,MAAM,YAAW,qBAAe,KAC1D,MAAM,WAAU,OACnB;AAAA,EACF,CACF;AAEJ;",
   "names": []
 }

package/dist/components/TodoPanel.js

@@ -1,53 +1,162 @@
-import React, { useState, useEffect } from "react";
+import React, { useRef, useMemo, memo } from "react";
 import { Box, Text } from "ink";
 import { getTheme } from "../utils/theme.js";
 import { SYMBOLS, getTodoStatusSymbol } from "../constants/symbols.js";
-import { formatNumber } from "../utils/format.js";
-function TodoPanel({
+import { formatNumber, formatTokenUsage } from "../utils/format.js";
+import { sample } from "lodash-es";
+import { getMainStreamingState } from "./Spinner.js";
+import { getSessionState } from "../utils/sessionState.js";
+import { useUnifiedAnimation } from "../utils/animationManager.js";
+import {
+  SEMANTIC_COLORS,
+  BRAND_GRADIENT,
+  SYMBOL_COLORS
+} from "../constants/colors.js";
+import { getIndent } from "../constants/formatRules.js";
+const SHIMMER_COLORS = [
+  BRAND_GRADIENT.START,
+  // #667EEA purple-blue
+  "#8673D9",
+  // blend
+  BRAND_GRADIENT.MIDDLE,
+  // #B668C8 pink-purple
+  "#D560A0",
+  // blend
+  BRAND_GRADIENT.END,
+  // #F5576C coral
+  "#D560A0",
+  // blend back
+  BRAND_GRADIENT.MIDDLE,
+  // #B668C8
+  "#8673D9"
+  // blend back
+];
+function getShimmerColor(frame) {
+  return SHIMMER_COLORS[frame % SHIMMER_COLORS.length];
+}
+const SpinnerLine = memo(function SpinnerLine2({
+  currentTaskActiveForm,
+  todos,
+  shouldShowTodos,
+  fallbackMessage
+}) {
+  const theme = getTheme();
+  const startTimeRef = useRef(Date.now());
+  const { spinnerFrame, elapsedTime } = useUnifiedAnimation({
+    enabled: true,
+    startTime: startTimeRef.current,
+    spinnerFrameCount: SHIMMER_COLORS.length,
+    componentId: "todo-panel-spinner"
+  });
+  const streamState = useMemo(() => getMainStreamingState(), [spinnerFrame]);
+  const getCurrentTaskDisplay = () => {
+    if (currentTaskActiveForm) {
+      return currentTaskActiveForm;
+    }
+    const inProgressTodo = todos.find((t) => t.status === "in_progress");
+    if (inProgressTodo?.activeForm) {
+      return inProgressTodo.activeForm;
+    }
+    switch (streamState.phase) {
+      case "tool_use":
+        return streamState.toolName ? `Using ${streamState.toolName}` : "Executing tool";
+      case "generating":
+        return "Generating response";
+      case "waiting":
+        return "Waiting for response";
+      case "thinking":
+      default:
+        return fallbackMessage || "Thinking";
+    }
+  };
+  const formatTime = (seconds) => {
+    if (seconds < 60) return `${seconds}s`;
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return secs > 0 ? `${mins}m ${secs}s` : `${mins}m`;
+  };
+  const shimmerColor = getShimmerColor(spinnerFrame);
+  const spinnerIconFrame = spinnerFrame % SYMBOLS.THINKING_FRAMES.length;
+  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", flexWrap: "nowrap" }, /* @__PURE__ */ React.createElement(Text, { color: shimmerColor }, SYMBOLS.THINKING_FRAMES[spinnerIconFrame], " "), /* @__PURE__ */ React.createElement(Text, { color: shimmerColor, bold: true }, getCurrentTaskDisplay()), /* @__PURE__ */ React.createElement(Text, { color: shimmerColor }, "\u2026 "), /* @__PURE__ */ React.createElement(Text, { color: BRAND_GRADIENT.START }, "(", /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.secondary }, "esc esc"), " to cancel \xB7", " ", /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.secondary }, formatTime(elapsedTime)), tokenUsage && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.secondary }, " \xB7 ", tokenUsage), thinkingDuration !== null && thinkingDuration > 0 && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.secondary }, " ", "\xB7 thinking ", thinkingDuration, "s"), shouldShowTodos && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.secondary }, " ", "\xB7 ", /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.secondary }, "ctrl+t"), " to hide"), ")"), getSessionState("currentError") && /* @__PURE__ */ React.createElement(Text, { color: SYMBOL_COLORS.error }, " ", "\xB7 ", getSessionState("currentError")));
+});
+const SPINNER_MESSAGES = [
+  "Thinking",
+  "Processing",
+  "Working",
+  "Computing",
+  "Analyzing",
+  "Generating",
+  "Executing",
+  "Preparing"
+];
+const TodoPanel = memo(function TodoPanel2({
   todos,
   isVisible,
   currentTaskActiveForm,
-  elapsedTime = 0,
-  tokenCount = 0,
-  isLoading = true
+  elapsedTime: initialElapsedTime = 0,
+  isLoading = true,
+  showTodoList = true
 }) {
   const theme = getTheme();
-  const [frameIndex, setFrameIndex] = useState(0);
-  useEffect(() => {
-    if (!isLoading) {
-      return;
-    }
-    const timer = setInterval(() => {
-      setFrameIndex((i) => (i + 1) % SYMBOLS.THINKING_FRAMES.length);
-    }, 150);
-    return () => clearInterval(timer);
-  }, [isLoading]);
+  const fallbackMessage = useRef(sample(SPINNER_MESSAGES) || "Thinking");
+  const hasTodos = todos.length > 0;
   const hasIncompleteTasks = todos.some((t) => t.status !== "completed");
-  if (!isVisible || todos.length === 0 || !hasIncompleteTasks) {
+  const shouldShowTodos = hasTodos && hasIncompleteTasks && isVisible && showTodoList;
+  if (!isLoading) {
+    if (shouldShowTodos) {
+      return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginTop: 1 }, /* @__PURE__ */ React.createElement(Box, { flexDirection: "row" }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "\u25CB "), /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, hasIncompleteTasks ? `${todos.filter((t) => t.status !== "completed").length} tasks remaining` : "All done")), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, todos.map((todo, idx) => /* @__PURE__ */ React.createElement(React.Fragment, { key: `todo-${idx}-${todo.content.slice(0, 20)}` }, /* @__PURE__ */ React.createElement(
+        TodoItemClaudeStyle,
+        {
+          todo,
+          theme,
+          isFirst: idx === 0
+        }
+      )))));
+    }
     return null;
   }
-  const visibleTodos = todos;
-  const currentTask = currentTaskActiveForm || todos.find((t) => t.status === "in_progress")?.activeForm || "Executing tasks";
-  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginY: 1 }, /* @__PURE__ */ React.createElement(Box, { flexDirection: "row" }, /* @__PURE__ */ React.createElement(Box, { width: 2, flexShrink: 0 }, /* @__PURE__ */ React.createElement(Text, null, SYMBOLS.THINKING_FRAMES[frameIndex])), /* @__PURE__ */ React.createElement(Text, null, currentTask), /* @__PURE__ */ React.createElement(Text, null, "\u2026 "), /* @__PURE__ */ React.createElement(Text, { color: theme.dim }, "(esc to interrupt \xB7 ctrl+t to hide todos \xB7 ", elapsedTime, "s \xB7 \u2193", " ", formatNumber(tokenCount), " tokens)")), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, visibleTodos.map((todo, idx) => /* @__PURE__ */ React.createElement(React.Fragment, { key: `todo-${idx}-${todo.content.slice(0, 20)}` }, /* @__PURE__ */ React.createElement(
-    TodoItemClaudeStyle,
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginTop: 1 }, /* @__PURE__ */ React.createElement(
+    SpinnerLine,
     {
-      todo,
-      theme,
-      isFirst: idx === 0
+      currentTaskActiveForm,
+      todos,
+      shouldShowTodos,
+      fallbackMessage: fallbackMessage.current
     }
-  )))));
-}
-function TodoItemClaudeStyle({
+  ), shouldShowTodos && /* @__PURE__ */ React.createElement(TodoList, { todos, theme }));
+});
+const TodoList = memo(function TodoList2({ todos, theme }) {
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, todos.map((todo, idx) => /* @__PURE__ */ React.createElement(React.Fragment, { key: `todo-${idx}-${todo.content.slice(0, 20)}` }, /* @__PURE__ */ React.createElement(TodoItemClaudeStyle, { todo, theme, isFirst: idx === 0 }))));
+});
+const TodoItemClaudeStyle = memo(function TodoItemClaudeStyle2({
   todo,
   theme,
   isFirst
 }) {
   const isCompleted = todo.status === "completed";
+  const isInProgress = todo.status === "in_progress";
   const symbol = getTodoStatusSymbol(todo.status);
-  const color = isCompleted ? theme.dim : void 0;
-  const indent = isFirst ? "  \u23BF  " : "     ";
-  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "row" }, /* @__PURE__ */ React.createElement(Text, { color: theme.dim }, indent), /* @__PURE__ */ React.createElement(Text, { color }, symbol, " "), /* @__PURE__ */ React.createElement(Text, { color, strikethrough: isCompleted }, todo.content));
-}
+  const symbolColor = isCompleted ? SEMANTIC_COLORS.dim : isInProgress ? BRAND_GRADIENT.MIDDLE : BRAND_GRADIENT.START;
+  const textColor = isCompleted ? SEMANTIC_COLORS.dim : SEMANTIC_COLORS.secondary;
+  const indent = isFirst ? `${getIndent("L1")}${SYMBOLS.CHILD_OUTPUT}  ` : `${getIndent("L1")}   `;
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "row" }, /* @__PURE__ */ React.createElement(Text, { color: SYMBOL_COLORS.child }, indent), /* @__PURE__ */ React.createElement(Text, { color: symbolColor }, symbol, " "), /* @__PURE__ */ React.createElement(Text, { color: textColor, strikethrough: isCompleted }, todo.content));
+});
 export {
   TodoPanel
 };

package/dist/components/TodoPanel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/TodoPanel.tsx"],
-  "sourcesContent": ["import React, { useState, useEffect } from 'react'\nimport { Box, Text } from 'ink'\nimport { TodoItem } from './TodoItem'\nimport { getTheme } from '@utils/theme'\nimport { SYMBOLS, getTodoStatusSymbol } from '@constants/symbols'\nimport { formatNumber } from '@utils/format'\nimport type { TodoItem as TodoItemType } from '@utils/todoStorage'\n\ninterface TodoPanelProps {\n  /** TODO \u5217\u8868 */\n  todos: TodoItemType[]\n  /** \u662F\u5426\u663E\u793A\u9762\u677F\uFF08\u7531 Ctrl+T \u63A7\u5236\uFF09 */\n  isVisible: boolean\n  /** \u5F53\u524D\u4E3B\u4EFB\u52A1\u7684 activeForm\uFF08\u8FDB\u884C\u4E2D\u7684\u4EFB\u52A1\u63CF\u8FF0\uFF09 */\n  currentTaskActiveForm?: string\n  /** \u8FD0\u884C\u65F6\u95F4\uFF08\u79D2\uFF09 */\n  elapsedTime?: number\n  /** Token \u8BA1\u6570 */\n  tokenCount?: number\n  /** \u662F\u5426\u6B63\u5728\u52A0\u8F7D\uFF08\u63A7\u5236\u52A8\u753B\uFF09 */\n  isLoading?: boolean\n}\n\n/**\n * TODO \u9762\u677F\u7EC4\u4EF6 - Claude Code CLI \u98CE\u683C\n *\n * \u89C6\u89C9\u683C\u5F0F\uFF1A\n * ```\n * \u273D \u4F18\u5316\u5E76\u884C\u4EFB\u52A1\u8FDB\u5EA6\u5C55\u793A\u2026 (esc to interrupt \u00B7 ctrl+t to hide todos \u00B7 252s \u00B7 \u2193 5.8k tokens)\n *   \u23BF  \u2612 \u5DF2\u5B8C\u6210\u4EFB\u52A1 (\u7070\u8272 + \u5220\u9664\u7EBF)\n *      \u2610 \u5F85\u5B8C\u6210\u4EFB\u52A1\n * ```\n */\nexport function TodoPanel({\n  todos,\n  isVisible,\n  currentTaskActiveForm,\n  elapsedTime = 0,\n  tokenCount = 0,\n  isLoading = true,\n}: TodoPanelProps) {\n  const theme = getTheme()\n\n  // Claude Code \u98CE\u683C\uFF1A\u52A8\u6001\u52A8\u753B\u7B26\u53F7 (6\u5E27\u5FAA\u73AF)\n  const [frameIndex, setFrameIndex] = useState(0)\n  useEffect(() => {\n    // \u53EA\u5728 isLoading \u4E3A true \u65F6\u8FD0\u884C\u52A8\u753B\n    if (!isLoading) {\n      return\n    }\n\n    const timer = setInterval(() => {\n      setFrameIndex(i => (i + 1) % SYMBOLS.THINKING_FRAMES.length)\n    }, 150)\n    return () => clearInterval(timer)\n  }, [isLoading])\n\n  // Claude Code \u98CE\u683C\uFF1A\u6240\u6709\u4EFB\u52A1\u5B8C\u6210\u540E\u9690\u85CF\u9762\u677F\n  const hasIncompleteTasks = todos.some(t => t.status !== 'completed')\n\n  // \u5982\u679C\u4E0D\u53EF\u89C1\u3001\u6CA1\u6709 TODO\u3001\u6216\u6240\u6709\u4EFB\u52A1\u90FD\u5DF2\u5B8C\u6210\uFF0C\u4E0D\u6E32\u67D3\n  if (!isVisible || todos.length === 0 || !hasIncompleteTasks) {\n    return null\n  }\n\n  // Claude Code \u98CE\u683C\uFF1A\u663E\u793A\u6240\u6709 TODO\uFF08\u5305\u62EC\u5DF2\u5B8C\u6210\u7684\uFF09\n  const visibleTodos = todos\n\n  // \u83B7\u53D6\u5F53\u524D\u8FDB\u884C\u4E2D\u7684\u4EFB\u52A1\u63CF\u8FF0\n  const currentTask =\n    currentTaskActiveForm ||\n    todos.find(t => t.status === 'in_progress')?.activeForm ||\n    'Executing tasks'\n\n  return (\n    <Box flexDirection=\"column\" marginY={1}>\n      {/* \u7B2C\u4E00\u884C\uFF1A\u52A8\u753B + \u5F53\u524D\u4EFB\u52A1 + \u7EDF\u8BA1\u4FE1\u606F */}\n      <Box flexDirection=\"row\">\n        {/* \u52A8\u753B\u7B26\u53F7 - \u4F7F\u7528\u56FA\u5B9A\u5BBD\u5EA6\u907F\u514D\u6296\u52A8 */}\n        <Box width={2} flexShrink={0}>\n          <Text>{SYMBOLS.THINKING_FRAMES[frameIndex]}</Text>\n        </Box>\n\n        {/* \u5F53\u524D\u4EFB\u52A1\u63CF\u8FF0 */}\n        <Text>{currentTask}</Text>\n\n        {/* \u7701\u7565\u7B26\u53F7 */}\n        <Text>\u2026 </Text>\n\n        {/* \u7EDF\u8BA1\u4FE1\u606F\u548C\u63D0\u793A */}\n        <Text color={theme.dim}>\n          (esc to interrupt \u00B7 ctrl+t to hide todos \u00B7 {elapsedTime}s \u00B7 \u2193{' '}\n          {formatNumber(tokenCount)} tokens)\n        </Text>\n      </Box>\n\n      {/* TODO \u5217\u8868 */}\n      <Box flexDirection=\"column\">\n        {visibleTodos.map((todo, idx) => (\n          <React.Fragment key={`todo-${idx}-${todo.content.slice(0, 20)}`}>\n            <TodoItemClaudeStyle\n              todo={todo}\n              theme={theme}\n              isFirst={idx === 0}\n            />\n          </React.Fragment>\n        ))}\n      </Box>\n    </Box>\n  )\n}\n\n/**\n * Claude Code \u98CE\u683C\u7684 TODO \u9879\n *\n * \u683C\u5F0F\uFF1A\n * ```\n *   \u23BF  \u2612 \u5DF2\u5B8C\u6210\u4EFB\u52A1 (\u7070\u8272 + \u5220\u9664\u7EBF)\n *      \u2610 \u5F85\u5B8C\u6210\u4EFB\u52A1\n * ```\n */\ninterface TodoItemClaudeStyleProps {\n  todo: TodoItemType\n  theme: ReturnType<typeof getTheme>\n  isFirst: boolean\n}\n\nfunction TodoItemClaudeStyle({\n  todo,\n  theme,\n  isFirst,\n}: TodoItemClaudeStyleProps) {\n  const isCompleted = todo.status === 'completed'\n\n  // \u7B26\u53F7\uFF1A\u2610 \u672A\u5B8C\u6210 / \u2612 \u5DF2\u5B8C\u6210\n  const symbol = getTodoStatusSymbol(todo.status)\n\n  // \u989C\u8272\uFF1A\u5DF2\u5B8C\u6210\u7528\u7070\u8272\uFF0C\u5176\u4ED6\u6B63\u5E38\n  const color = isCompleted ? theme.dim : undefined\n\n  // \u7F29\u8FDB\uFF1A\u7B2C\u4E00\u4E2A\u7528 \"  \u23BF  \"\uFF0C\u5176\u4ED6\u7528 \"     \" (5\u4E2A\u7A7A\u683C\u5BF9\u9F50)\n  const indent = isFirst ? '  \u23BF  ' : '     '\n\n  return (\n    <Box flexDirection=\"row\">\n      {/* \u7F29\u8FDB */}\n      <Text color={theme.dim}>{indent}</Text>\n\n      {/* \u72B6\u6001\u7B26\u53F7 */}\n      <Text color={color}>{symbol} </Text>\n\n      {/* \u4EFB\u52A1\u63CF\u8FF0 */}\n      <Text color={color} strikethrough={isCompleted}>\n        {todo.content}\n      </Text>\n    </Box>\n  )\n}\n"],
-  "mappings": "AAAA,OAAO,SAAS,UAAU,iBAAiB;AAC3C,SAAS,KAAK,YAAY;AAE1B,SAAS,gBAAgB;AACzB,SAAS,SAAS,2BAA2B;AAC7C,SAAS,oBAAoB;AA4BtB,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,aAAa;AAAA,EACb,YAAY;AACd,GAAmB;AACjB,QAAM,QAAQ,SAAS;AAGvB,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,CAAC;AAC9C,YAAU,MAAM;AAEd,QAAI,CAAC,WAAW;AACd;AAAA,IACF;AAEA,UAAM,QAAQ,YAAY,MAAM;AAC9B,oBAAc,QAAM,IAAI,KAAK,QAAQ,gBAAgB,MAAM;AAAA,IAC7D,GAAG,GAAG;AACN,WAAO,MAAM,cAAc,KAAK;AAAA,EAClC,GAAG,CAAC,SAAS,CAAC;AAGd,QAAM,qBAAqB,MAAM,KAAK,OAAK,EAAE,WAAW,WAAW;AAGnE,MAAI,CAAC,aAAa,MAAM,WAAW,KAAK,CAAC,oBAAoB;AAC3D,WAAO;AAAA,EACT;AAGA,QAAM,eAAe;AAGrB,QAAM,cACJ,yBACA,MAAM,KAAK,OAAK,EAAE,WAAW,aAAa,GAAG,cAC7C;AAEF,SACE,oCAAC,OAAI,eAAc,UAAS,SAAS,KAEnC,oCAAC,OAAI,eAAc,SAEjB,oCAAC,OAAI,OAAO,GAAG,YAAY,KACzB,oCAAC,YAAM,QAAQ,gBAAgB,UAAU,CAAE,CAC7C,GAGA,oCAAC,YAAM,WAAY,GAGnB,oCAAC,YAAK,SAAE,GAGR,oCAAC,QAAK,OAAO,MAAM,OAAK,qDACsB,aAAY,iBAAM,KAC7D,aAAa,UAAU,GAAE,UAC5B,CACF,GAGA,oCAAC,OAAI,eAAc,YAChB,aAAa,IAAI,CAAC,MAAM,QACvB,oCAAC,MAAM,UAAN,EAAe,KAAK,QAAQ,GAAG,IAAI,KAAK,QAAQ,MAAM,GAAG,EAAE,CAAC,MAC3D;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAS,QAAQ;AAAA;AAAA,EACnB,CACF,CACD,CACH,CACF;AAEJ;AAiBA,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,GAA6B;AAC3B,QAAM,cAAc,KAAK,WAAW;AAGpC,QAAM,SAAS,oBAAoB,KAAK,MAAM;AAG9C,QAAM,QAAQ,cAAc,MAAM,MAAM;AAGxC,QAAM,SAAS,UAAU,eAAU;AAEnC,SACE,oCAAC,OAAI,eAAc,SAEjB,oCAAC,QAAK,OAAO,MAAM,OAAM,MAAO,GAGhC,oCAAC,QAAK,SAAe,QAAO,GAAC,GAG7B,oCAAC,QAAK,OAAc,eAAe,eAChC,KAAK,OACR,CACF;AAEJ;",
-  "names": []
+  "sourcesContent": ["import React, { useRef, useMemo, memo } from 'react'\nimport { Box, Text } from 'ink'\nimport { getTheme } from '@utils/theme'\nimport { SYMBOLS, getTodoStatusSymbol } from '@constants/symbols'\nimport { formatNumber, formatTokenUsage } from '@utils/format'\nimport type { TodoItem as TodoItemType } from '@utils/todoStorage'\nimport { sample } from 'lodash-es'\nimport { getMainStreamingState } from './Spinner'\nimport { getSessionState } from '@utils/sessionState'\nimport { useUnifiedAnimation } from '@utils/animationManager'\nimport {\n  SEMANTIC_COLORS,\n  BRAND_GRADIENT,\n  SYMBOL_COLORS,\n} from '@constants/colors'\nimport { getIndent } from '@constants/formatRules'\n\n/**\n * Isolated Spinner component to prevent animation updates from re-rendering the entire panel\n * This component handles all animation state internally\n */\ninterface SpinnerLineProps {\n  currentTaskActiveForm?: string\n  todos: TodoItemType[]\n  shouldShowTodos: boolean\n  fallbackMessage: string\n}\n\n/**\n * Shimmer effect colors - creates a light sweep animation across text\n * Uses brand gradient colors cycling through: purple-blue \u2192 pink-purple \u2192 coral \u2192 pink-purple \u2192 purple-blue\n */\nconst SHIMMER_COLORS = [\n  BRAND_GRADIENT.START, // #667EEA purple-blue\n  '#8673D9', // blend\n  BRAND_GRADIENT.MIDDLE, // #B668C8 pink-purple\n  '#D560A0', // blend\n  BRAND_GRADIENT.END, // #F5576C coral\n  '#D560A0', // blend back\n  BRAND_GRADIENT.MIDDLE, // #B668C8\n  '#8673D9', // blend back\n] as const\n\n/**\n * Get shimmer color based on animation frame\n * Creates a smooth color transition effect\n */\nfunction getShimmerColor(frame: number): string {\n  return SHIMMER_COLORS[frame % SHIMMER_COLORS.length]!\n}\n\nconst SpinnerLine = memo(function SpinnerLine({\n  currentTaskActiveForm,\n  todos,\n  shouldShowTodos,\n  fallbackMessage,\n}: SpinnerLineProps) {\n  const theme = getTheme()\n  const startTimeRef = useRef(Date.now())\n\n  // Animation state is isolated in this component\n  // Use 8 frames for shimmer effect (matching SHIMMER_COLORS length)\n  const { spinnerFrame, elapsedTime } = useUnifiedAnimation({\n    enabled: true,\n    startTime: startTimeRef.current,\n    spinnerFrameCount: SHIMMER_COLORS.length,\n    componentId: 'todo-panel-spinner',\n  })\n\n  // Get streaming state - only updates when this component re-renders\n  // Use main streaming state to avoid subagent interference\n  const streamState = useMemo(() => getMainStreamingState(), [spinnerFrame])\n\n  // Get current task display\n  const getCurrentTaskDisplay = (): string => {\n    if (currentTaskActiveForm) {\n      return currentTaskActiveForm\n    }\n    const inProgressTodo = todos.find(t => t.status === 'in_progress')\n    if (inProgressTodo?.activeForm) {\n      return inProgressTodo.activeForm\n    }\n    switch (streamState.phase) {\n      case 'tool_use':\n        return streamState.toolName\n          ? `Using ${streamState.toolName}`\n          : 'Executing tool'\n      case 'generating':\n        return 'Generating response'\n      case 'waiting':\n        return 'Waiting for response'\n      case 'thinking':\n      default:\n        return fallbackMessage || 'Thinking'\n    }\n  }\n\n  // Format time display\n  const formatTime = (seconds: number): string => {\n    if (seconds < 60) return `${seconds}s`\n    const mins = Math.floor(seconds / 60)\n    const secs = seconds % 60\n    return secs > 0 ? `${mins}m ${secs}s` : `${mins}m`\n  }\n\n  // Get shimmer color for the main text (light sweep effect)\n  const shimmerColor = getShimmerColor(spinnerFrame)\n\n  // Spinner icon uses thinking frames\n  const spinnerIconFrame = spinnerFrame % SYMBOLS.THINKING_FRAMES.length\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    // Only show output approximation since we don't have input char count in this path\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\" flexWrap=\"nowrap\">\n      {/* Spinner icon with shimmer effect */}\n      <Text color={shimmerColor}>\n        {SYMBOLS.THINKING_FRAMES[spinnerIconFrame]}{' '}\n      </Text>\n      {/* Main task description with shimmer effect */}\n      <Text color={shimmerColor} bold>\n        {getCurrentTaskDisplay()}\n      </Text>\n      <Text color={shimmerColor}>\u2026 </Text>\n      {/* Meta info with brand gradient accent */}\n      <Text color={BRAND_GRADIENT.START}>\n        (<Text color={SEMANTIC_COLORS.secondary}>esc esc</Text> to cancel \u00B7{' '}\n        <Text color={SEMANTIC_COLORS.secondary}>{formatTime(elapsedTime)}</Text>\n        {tokenUsage && (\n          <Text color={SEMANTIC_COLORS.secondary}> \u00B7 {tokenUsage}</Text>\n        )}\n        {thinkingDuration !== null && thinkingDuration > 0 && (\n          <Text color={SEMANTIC_COLORS.secondary}>\n            {' '}\n            \u00B7 thinking {thinkingDuration}s\n          </Text>\n        )}\n        {shouldShowTodos && (\n          <Text color={SEMANTIC_COLORS.secondary}>\n            {' '}\n            \u00B7 <Text color={SEMANTIC_COLORS.secondary}>ctrl+t</Text> to hide\n          </Text>\n        )}\n        )\n      </Text>\n      {getSessionState('currentError') && (\n        <Text color={SYMBOL_COLORS.error}>\n          {' '}\n          \u00B7 {getSessionState('currentError')}\n        </Text>\n      )}\n    </Box>\n  )\n})\n\n// Spinner messages for fallback when no todos\nconst SPINNER_MESSAGES = [\n  'Thinking',\n  'Processing',\n  'Working',\n  'Computing',\n  'Analyzing',\n  'Generating',\n  'Executing',\n  'Preparing',\n]\n\ninterface TodoPanelProps {\n  /** TODO \u5217\u8868 */\n  todos: TodoItemType[]\n  /** \u662F\u5426\u663E\u793A\u9762\u677F\uFF08\u7531 Ctrl+T \u63A7\u5236\uFF09 */\n  isVisible: boolean\n  /** \u5F53\u524D\u4E3B\u4EFB\u52A1\u7684 activeForm\uFF08\u8FDB\u884C\u4E2D\u7684\u4EFB\u52A1\u63CF\u8FF0\uFF09 */\n  currentTaskActiveForm?: string\n  /** \u8FD0\u884C\u65F6\u95F4\uFF08\u79D2\uFF09 */\n  elapsedTime?: number\n  /** \u662F\u5426\u6B63\u5728\u52A0\u8F7D\uFF08\u63A7\u5236\u52A8\u753B\uFF09 */\n  isLoading?: boolean\n  /** \u662F\u5426\u663E\u793A\u4EFB\u52A1\u5217\u8868\u8BE6\u60C5 */\n  showTodoList?: boolean\n}\n\n/**\n * \u7EDF\u4E00\u7684 Spinner + TODO \u9762\u677F\u7EC4\u4EF6 - Claude Code CLI \u98CE\u683C\n *\n * \u5F53\u6709 TODO \u65F6\u663E\u793A\uFF1A\n * ```\n * \u273D Fixing async tool description bug\u2026 (esc to interrupt \u00B7 ctrl+t to hide todos \u00B7 2m 52s \u00B7 \u2191 5.1k tokens)\n *   \u23BF  \u2610 Phase 1.1: Fix async tool description bug\n *      \u2610 Phase 1.2: Add memory safety fixes\n * ```\n *\n * \u65E0 TODO \u65F6\u663E\u793A\u666E\u901A Spinner\uFF1A\n * ```\n * \u273D Thinking\u2026 (3s \u00B7 esc to interrupt)\n * ```\n *\n * Performance optimization: Animation is isolated in SpinnerLine component\n * to prevent the entire panel from re-rendering on each animation frame.\n */\nexport const TodoPanel = memo(function TodoPanel({\n  todos,\n  isVisible,\n  currentTaskActiveForm,\n  elapsedTime: initialElapsedTime = 0,\n  isLoading = true,\n  showTodoList = true,\n}: TodoPanelProps) {\n  const theme = getTheme()\n  const fallbackMessage = useRef(sample(SPINNER_MESSAGES) || 'Thinking')\n\n  // \u5224\u65AD\u662F\u5426\u6709\u5F85\u529E\u4E8B\u9879\n  const hasTodos = todos.length > 0\n  const hasIncompleteTasks = todos.some(t => t.status !== 'completed')\n  const shouldShowTodos =\n    hasTodos && hasIncompleteTasks && isVisible && showTodoList\n\n  // \u5982\u679C\u4E0D\u5728\u52A0\u8F7D\u72B6\u6001\uFF0C\u53EA\u663E\u793A todo \u5217\u8868\uFF08\u5982\u679C\u6709\u672A\u5B8C\u6210\u4EFB\u52A1\uFF09\n  if (!isLoading) {\n    // \u5373\u4F7F\u4E0D\u5728\u52A0\u8F7D\u4E2D\uFF0C\u5982\u679C\u6709\u672A\u5B8C\u6210\u7684\u4EFB\u52A1\u4E5F\u663E\u793A\u5217\u8868\n    if (shouldShowTodos) {\n      return (\n        <Box flexDirection=\"column\" marginTop={1}>\n          {/* \u9759\u6001\u6807\u9898 - \u663E\u793A\u8FD8\u6709\u672A\u5B8C\u6210\u4EFB\u52A1 */}\n          <Box flexDirection=\"row\">\n            <Text color={SEMANTIC_COLORS.dim}>\u25CB </Text>\n            <Text color={SEMANTIC_COLORS.dim}>\n              {hasIncompleteTasks\n                ? `${todos.filter(t => t.status !== 'completed').length} tasks remaining`\n                : 'All done'}\n            </Text>\n          </Box>\n          {/* TODO \u5217\u8868 */}\n          <Box flexDirection=\"column\">\n            {todos.map((todo, idx) => (\n              <React.Fragment key={`todo-${idx}-${todo.content.slice(0, 20)}`}>\n                <TodoItemClaudeStyle\n                  todo={todo}\n                  theme={theme}\n                  isFirst={idx === 0}\n                />\n              </React.Fragment>\n            ))}\n          </Box>\n        </Box>\n      )\n    }\n    return null\n  }\n\n  return (\n    <Box flexDirection=\"column\" marginTop={1}>\n      {/* \u7B2C\u4E00\u884C\uFF1A\u52A8\u753B + \u5F53\u524D\u4EFB\u52A1 + \u7EDF\u8BA1\u4FE1\u606F - \u9694\u79BB\u5728 SpinnerLine \u7EC4\u4EF6\u4E2D */}\n      <SpinnerLine\n        currentTaskActiveForm={currentTaskActiveForm}\n        todos={todos}\n        shouldShowTodos={shouldShowTodos}\n        fallbackMessage={fallbackMessage.current}\n      />\n\n      {/* TODO \u5217\u8868 - \u4EC5\u5F53\u53EF\u89C1\u4E14\u6709\u672A\u5B8C\u6210\u4EFB\u52A1\u65F6\u663E\u793A */}\n      {shouldShowTodos && <TodoList todos={todos} theme={theme} />}\n    </Box>\n  )\n})\n\n/**\n * Memoized TODO list to prevent re-rendering when only the spinner updates\n */\ninterface TodoListProps {\n  todos: TodoItemType[]\n  theme: ReturnType<typeof getTheme>\n}\n\nconst TodoList = memo(function TodoList({ todos, theme }: TodoListProps) {\n  return (\n    <Box flexDirection=\"column\">\n      {todos.map((todo, idx) => (\n        <React.Fragment key={`todo-${idx}-${todo.content.slice(0, 20)}`}>\n          <TodoItemClaudeStyle todo={todo} theme={theme} isFirst={idx === 0} />\n        </React.Fragment>\n      ))}\n    </Box>\n  )\n})\n\n/**\n * Claude Code \u98CE\u683C\u7684 TODO \u9879\n *\n * \u683C\u5F0F\uFF1A\n * ```\n *   \u23BF  \u2612 \u5DF2\u5B8C\u6210\u4EFB\u52A1 (\u7070\u8272 + \u5220\u9664\u7EBF)\n *      \u2610 \u5F85\u5B8C\u6210\u4EFB\u52A1\n * ```\n */\ninterface TodoItemClaudeStyleProps {\n  todo: TodoItemType\n  theme: ReturnType<typeof getTheme>\n  isFirst: boolean\n}\n\n/**\n * Memoized TODO item component with brand-consistent colors\n */\nconst TodoItemClaudeStyle = memo(function TodoItemClaudeStyle({\n  todo,\n  theme,\n  isFirst,\n}: TodoItemClaudeStyleProps) {\n  const isCompleted = todo.status === 'completed'\n  const isInProgress = todo.status === 'in_progress'\n\n  // \u7B26\u53F7\uFF1A\u2610 \u672A\u5B8C\u6210 / \u2612 \u5DF2\u5B8C\u6210\n  const symbol = getTodoStatusSymbol(todo.status)\n\n  // \u4F7F\u7528\u54C1\u724C\u914D\u8272\uFF1A\n  // - \u5DF2\u5B8C\u6210\uFF1Adim \u7070\u8272\n  // - \u8FDB\u884C\u4E2D\uFF1A\u54C1\u724C\u4E2D\u95F4\u8272\uFF08\u7C89\u7D2B\uFF09\n  // - \u5F85\u5904\u7406\uFF1A\u54C1\u724C\u8D77\u59CB\u8272\uFF08\u7D2B\u84DD\uFF09\n  const symbolColor = isCompleted\n    ? SEMANTIC_COLORS.dim\n    : isInProgress\n      ? BRAND_GRADIENT.MIDDLE\n      : BRAND_GRADIENT.START\n\n  const textColor = isCompleted\n    ? SEMANTIC_COLORS.dim\n    : SEMANTIC_COLORS.secondary\n\n  // \u4F7F\u7528 REPL \u89C4\u8303\u5B9A\u4E49\u7684\u7ED3\u6784\u7B26\u53F7\uFF1A\u7B2C\u4E00\u4E2A\u7528 \"  \u23BF  \"\uFF0C\u5176\u4ED6\u7528\u7F29\u8FDB\u5BF9\u9F50\n  const indent = isFirst\n    ? `${getIndent('L1')}${SYMBOLS.CHILD_OUTPUT}  `\n    : `${getIndent('L1')}   `\n\n  return (\n    <Box flexDirection=\"row\">\n      {/* \u7F29\u8FDB - \u4F7F\u7528\u54C1\u724C\u8272 */}\n      <Text color={SYMBOL_COLORS.child}>{indent}</Text>\n\n      {/* \u72B6\u6001\u7B26\u53F7 - \u4F7F\u7528\u54C1\u724C\u914D\u8272 */}\n      <Text color={symbolColor}>{symbol} </Text>\n\n      {/* \u4EFB\u52A1\u63CF\u8FF0 */}\n      <Text color={textColor} strikethrough={isCompleted}>\n        {todo.content}\n      </Text>\n    </Box>\n  )\n})\n"],
+  "mappings": "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",
+  "names": ["SpinnerLine", "TodoPanel", "TodoList", "TodoItemClaudeStyle"]
 }

package/dist/components/TokenCounter.js

@@ -0,0 +1,74 @@
+import { Box, Text } from "ink";
+import * as React from "react";
+import { useRef, useMemo } from "react";
+import { getTheme } from "../utils/theme.js";
+import { getTotalCost, getTotalAPIDuration } from "../cost-tracker.js";
+import { useUnifiedAnimation } from "../utils/animationManager.js";
+function TokenCounter({
+  mode = "compact",
+  showCost = true,
+  isActive = true
+}) {
+  const theme = getTheme();
+  const startTimeRef = useRef(Date.now());
+  const { elapsedTime } = useUnifiedAnimation({
+    enabled: isActive,
+    startTime: startTimeRef.current,
+    spinnerFrameCount: 1,
+    componentId: "token-counter"
+  });
+  const stats = useMemo(
+    () => ({
+      totalCost: getTotalCost(),
+      apiDuration: getTotalAPIDuration()
+    }),
+    [elapsedTime]
+  );
+  const formatCost = (cost) => {
+    if (cost < 0.01) {
+      return `$${(cost * 100).toFixed(2)}\xA2`;
+    }
+    return `$${cost.toFixed(2)}`;
+  };
+  const formatDuration = (ms) => {
+    if (ms < 1e3) {
+      return `${ms}ms`;
+    }
+    return `${(ms / 1e3).toFixed(1)}s`;
+  };
+  if (mode === "minimal") {
+    return /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, formatCost(stats.totalCost));
+  }
+  if (mode === "compact") {
+    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", gap: 1 }, /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, "\u{1F4CA}"), showCost && stats.totalCost > 0 && /* @__PURE__ */ React.createElement(Text, { color: theme.warning }, formatCost(stats.totalCost)), stats.apiDuration > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, "\xB7"), /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, formatDuration(stats.apiDuration))));
+  }
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", gap: 1 }, /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, "\u{1F4CA} Cost Summary:")), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginLeft: 2 }, showCost && /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", gap: 1 }, /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, "Total Cost:"), /* @__PURE__ */ React.createElement(Text, { color: theme.warning }, formatCost(stats.totalCost))), stats.apiDuration > 0 && /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", gap: 1 }, /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, "API Duration:"), /* @__PURE__ */ React.createElement(Text, { color: theme.text }, formatDuration(stats.apiDuration)))));
+}
+function TokenBadge({
+  inputTokens,
+  outputTokens
+}) {
+  const theme = getTheme();
+  const total = inputTokens + outputTokens;
+  const format = (n) => {
+    if (n >= 1e3) {
+      return `${(n / 1e3).toFixed(1)}k`;
+    }
+    return n.toString();
+  };
+  return /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, format(total), " tokens");
+}
+function CostBadge() {
+  const theme = getTheme();
+  const cost = getTotalCost();
+  if (cost < 1e-3) {
+    return /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, "$0.00");
+  }
+  return /* @__PURE__ */ React.createElement(Text, { color: theme.warning }, "$", cost.toFixed(2));
+}
+export {
+  CostBadge,
+  TokenBadge,
+  TokenCounter
+};
+//# sourceMappingURL=TokenCounter.js.map

package/dist/components/TokenCounter.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/TokenCounter.tsx"],
+  "sourcesContent": ["/**\n * TokenCounter - Real-time cost and duration display component\n *\n * Displays current session cost and API duration:\n *\n * \uD83D\uDCCA $0.42 \u00B7 15.3s\n *\n * Features:\n * - Real-time updates from cost tracker\n * - Compact and verbose display modes\n * - Cost and API duration display\n * - Uses unified animation manager to reduce screen flickering\n */\n\nimport { Box, Text } from 'ink'\nimport * as React from 'react'\nimport { useState, useRef, useMemo } from 'react'\nimport { getTheme } from '@utils/theme'\nimport { getTotalCost, getTotalAPIDuration } from '@costTracker'\nimport { useUnifiedAnimation } from '@utils/animationManager'\n\nexport interface TokenCounterProps {\n  /** Display mode */\n  mode?: 'compact' | 'verbose' | 'minimal'\n  /** Show cost estimate */\n  showCost?: boolean\n  /** Update interval in ms (default: 1000) - no longer used, kept for API compat */\n  updateInterval?: number\n  /** Whether the counter should be active (updating) */\n  isActive?: boolean\n}\n\ninterface TokenStats {\n  totalCost: number\n  apiDuration: number\n}\n\n/**\n * TokenCounter - Real-time cost and duration display\n *\n * Usage:\n * ```tsx\n * // Compact display\n * <TokenCounter mode=\"compact\" />\n *\n * // Full stats\n * <TokenCounter mode=\"verbose\" />\n *\n * // Minimal (just cost)\n * <TokenCounter mode=\"minimal\" />\n * ```\n */\nexport function TokenCounter({\n  mode = 'compact',\n  showCost = true,\n  isActive = true,\n}: TokenCounterProps): React.ReactElement {\n  const theme = getTheme()\n  const startTimeRef = useRef(Date.now())\n\n  // Use unified animation manager for periodic updates\n  const { elapsedTime } = useUnifiedAnimation({\n    enabled: isActive,\n    startTime: startTimeRef.current,\n    spinnerFrameCount: 1,\n    componentId: 'token-counter',\n  })\n\n  // Get stats on each render (triggered by elapsedTime change)\n  const stats = useMemo<TokenStats>(\n    () => ({\n      totalCost: getTotalCost(),\n      apiDuration: getTotalAPIDuration(),\n    }),\n    [elapsedTime],\n  )\n\n  // Format cost\n  const formatCost = (cost: number): string => {\n    if (cost < 0.01) {\n      return `$${(cost * 100).toFixed(2)}\u00A2`\n    }\n    return `$${cost.toFixed(2)}`\n  }\n\n  // Format duration\n  const formatDuration = (ms: number): string => {\n    if (ms < 1000) {\n      return `${ms}ms`\n    }\n    return `${(ms / 1000).toFixed(1)}s`\n  }\n\n  if (mode === 'minimal') {\n    return (\n      <Text color={theme.secondaryText}>{formatCost(stats.totalCost)}</Text>\n    )\n  }\n\n  if (mode === 'compact') {\n    return (\n      <Box flexDirection=\"row\" gap={1}>\n        <Text color={theme.secondaryText}>\uD83D\uDCCA</Text>\n        {showCost && stats.totalCost > 0 && (\n          <Text color={theme.warning}>{formatCost(stats.totalCost)}</Text>\n        )}\n        {stats.apiDuration > 0 && (\n          <>\n            <Text color={theme.secondaryText}>\u00B7</Text>\n            <Text color={theme.secondaryText}>\n              {formatDuration(stats.apiDuration)}\n            </Text>\n          </>\n        )}\n      </Box>\n    )\n  }\n\n  // Verbose mode\n  return (\n    <Box flexDirection=\"column\">\n      <Box flexDirection=\"row\" gap={1}>\n        <Text color={theme.secondaryText}>\uD83D\uDCCA Cost Summary:</Text>\n      </Box>\n      <Box flexDirection=\"column\" marginLeft={2}>\n        {showCost && (\n          <Box flexDirection=\"row\" gap={1}>\n            <Text color={theme.dimmedText}>Total Cost:</Text>\n            <Text color={theme.warning}>{formatCost(stats.totalCost)}</Text>\n          </Box>\n        )}\n        {stats.apiDuration > 0 && (\n          <Box flexDirection=\"row\" gap={1}>\n            <Text color={theme.dimmedText}>API Duration:</Text>\n            <Text color={theme.text}>{formatDuration(stats.apiDuration)}</Text>\n          </Box>\n        )}\n      </Box>\n    </Box>\n  )\n}\n\n/**\n * Inline token badge for status bars\n */\nexport function TokenBadge({\n  inputTokens,\n  outputTokens,\n}: {\n  inputTokens: number\n  outputTokens: number\n}): React.ReactElement {\n  const theme = getTheme()\n  const total = inputTokens + outputTokens\n\n  // Format with K suffix\n  const format = (n: number): string => {\n    if (n >= 1000) {\n      return `${(n / 1000).toFixed(1)}k`\n    }\n    return n.toString()\n  }\n\n  return <Text color={theme.secondaryText}>{format(total)} tokens</Text>\n}\n\n/**\n * Cost badge for status bars\n */\nexport function CostBadge(): React.ReactElement {\n  const theme = getTheme()\n  const cost = getTotalCost()\n\n  if (cost < 0.001) {\n    return <Text color={theme.dimmedText}>$0.00</Text>\n  }\n\n  return <Text color={theme.warning}>${cost.toFixed(2)}</Text>\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/TokenWarning.js

@@ -10,7 +10,8 @@ function TokenWarning({ tokenUsage }) {
     return null;
   }
   const isError = tokenUsage >= ERROR_THRESHOLD;
-  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "row" }, /* @__PURE__ */ React.createElement(Text, { color: isError ? theme.error : theme.warning }, "Context low (", Math.max(0, 100 - Math.round(tokenUsage / MAX_TOKENS * 100)), "% remaining) \xB7 Run /compact to compact & continue"));
+  const emoji = isError ? "\u{1F534}" : "\u26A0\uFE0F";
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "row" }, /* @__PURE__ */ React.createElement(Text, { color: isError ? theme.error : theme.warning }, emoji, " Context low (", Math.max(0, 100 - Math.round(tokenUsage / MAX_TOKENS * 100)), "% remaining) \xB7 Run /compact to compact & continue"));
 }
 export {
   TokenWarning,

package/dist/components/TokenWarning.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/TokenWarning.tsx"],
-  "sourcesContent": ["import { Box, Text } from 'ink'\nimport * as React from 'react'\nimport { getTheme } from '@utils/theme'\n\ntype Props = {\n  tokenUsage: number\n}\n\nconst MAX_TOKENS = 190_000\nexport const WARNING_THRESHOLD = MAX_TOKENS * 0.6\nconst ERROR_THRESHOLD = MAX_TOKENS * 0.8\n\nexport function TokenWarning({ tokenUsage }: Props): React.ReactNode {\n  const theme = getTheme()\n\n  if (tokenUsage < WARNING_THRESHOLD) {\n    return null\n  }\n\n  const isError = tokenUsage >= ERROR_THRESHOLD\n\n  return (\n    <Box flexDirection=\"row\">\n      <Text color={isError ? theme.error : theme.warning}>\n        Context low (\n        {Math.max(0, 100 - Math.round((tokenUsage / MAX_TOKENS) * 100))}%\n        remaining) &middot; Run /compact to compact & continue\n      </Text>\n    </Box>\n  )\n}\n"],
-  "mappings": "AAAA,SAAS,KAAK,YAAY;AAC1B,YAAY,WAAW;AACvB,SAAS,gBAAgB;AAMzB,MAAM,aAAa;AACZ,MAAM,oBAAoB,aAAa;AAC9C,MAAM,kBAAkB,aAAa;AAE9B,SAAS,aAAa,EAAE,WAAW,GAA2B;AACnE,QAAM,QAAQ,SAAS;AAEvB,MAAI,aAAa,mBAAmB;AAClC,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,cAAc;AAE9B,SACE,oCAAC,OAAI,eAAc,SACjB,oCAAC,QAAK,OAAO,UAAU,MAAM,QAAQ,MAAM,WAAS,iBAEjD,KAAK,IAAI,GAAG,MAAM,KAAK,MAAO,aAAa,aAAc,GAAG,CAAC,GAAE,sDAElE,CACF;AAEJ;",
+  "sourcesContent": ["import { Box, Text } from 'ink'\nimport * as React from 'react'\nimport { getTheme } from '@utils/theme'\n\ntype Props = {\n  tokenUsage: number\n}\n\nconst MAX_TOKENS = 190_000\nexport const WARNING_THRESHOLD = MAX_TOKENS * 0.6\nconst ERROR_THRESHOLD = MAX_TOKENS * 0.8\n\nexport function TokenWarning({ tokenUsage }: Props): React.ReactNode {\n  const theme = getTheme()\n\n  if (tokenUsage < WARNING_THRESHOLD) {\n    return null\n  }\n\n  const isError = tokenUsage >= ERROR_THRESHOLD\n\n  const emoji = isError ? '\uD83D\uDD34' : '\u26A0\uFE0F'\n\n  return (\n    <Box flexDirection=\"row\">\n      <Text color={isError ? theme.error : theme.warning}>\n        {emoji} Context low (\n        {Math.max(0, 100 - Math.round((tokenUsage / MAX_TOKENS) * 100))}%\n        remaining) \u00B7 Run /compact to compact & continue\n      </Text>\n    </Box>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,KAAK,YAAY;AAC1B,YAAY,WAAW;AACvB,SAAS,gBAAgB;AAMzB,MAAM,aAAa;AACZ,MAAM,oBAAoB,aAAa;AAC9C,MAAM,kBAAkB,aAAa;AAE9B,SAAS,aAAa,EAAE,WAAW,GAA2B;AACnE,QAAM,QAAQ,SAAS;AAEvB,MAAI,aAAa,mBAAmB;AAClC,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,cAAc;AAE9B,QAAM,QAAQ,UAAU,cAAO;AAE/B,SACE,oCAAC,OAAI,eAAc,SACjB,oCAAC,QAAK,OAAO,UAAU,MAAM,QAAQ,MAAM,WACxC,OAAM,kBACN,KAAK,IAAI,GAAG,MAAM,KAAK,MAAO,aAAa,aAAc,GAAG,CAAC,GAAE,sDAElE,CACF;AAEJ;",
   "names": []
 }

package/dist/components/ToolUseLoader.js

@@ -1,8 +1,8 @@
 import { Box, Text } from "ink";
 import React from "react";
 import { useInterval } from "../hooks/useInterval.js";
-import { getTheme } from "../utils/theme.js";
 import { BLACK_CIRCLE } from "../constants/figures.js";
+import { SYMBOL_COLORS } from "../constants/colors.js";
 function ToolUseLoader({
   isError,
   isUnresolved,
@@ -15,7 +15,7 @@ function ToolUseLoader({
     }
     setIsVisible((_) => !_);
   }, 600);
-  const color = isUnresolved ? getTheme().secondaryText : isError ? getTheme().error : getTheme().success;
+  const color = isUnresolved ? SYMBOL_COLORS.running : isError ? SYMBOL_COLORS.error : SYMBOL_COLORS.success;
   return /* @__PURE__ */ React.createElement(Box, { minWidth: 2 }, /* @__PURE__ */ React.createElement(Text, { color }, isVisible ? BLACK_CIRCLE : "  "));
 }
 export {

package/dist/components/ToolUseLoader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/ToolUseLoader.tsx"],
-  "sourcesContent": ["import { Box, Text } from 'ink'\nimport React from 'react'\nimport { useInterval } from '@hooks/useInterval'\nimport { getTheme } from '@utils/theme'\nimport { BLACK_CIRCLE } from '@constants/figures'\n\ntype Props = {\n  isError: boolean\n  isUnresolved: boolean\n  shouldAnimate: boolean\n}\n\nexport function ToolUseLoader({\n  isError,\n  isUnresolved,\n  shouldAnimate,\n}: Props): React.ReactNode {\n  const [isVisible, setIsVisible] = React.useState(true)\n\n  useInterval(() => {\n    if (!shouldAnimate) {\n      return\n    }\n    // To avoid flickering when the tool use confirm is visible, we set the loader to be visible\n    // when the tool use confirm is visible.\n    setIsVisible(_ => !_)\n  }, 600)\n\n  const color = isUnresolved\n    ? getTheme().secondaryText\n    : isError\n      ? getTheme().error\n      : getTheme().success\n\n  return (\n    <Box minWidth={2}>\n      <Text color={color}>{isVisible ? BLACK_CIRCLE : '  '}</Text>\n    </Box>\n  )\n}\n"],
-  "mappings": "AAAA,SAAS,KAAK,YAAY;AAC1B,OAAO,WAAW;AAClB,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAQtB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,IAAI;AAErD,cAAY,MAAM;AAChB,QAAI,CAAC,eAAe;AAClB;AAAA,IACF;AAGA,iBAAa,OAAK,CAAC,CAAC;AAAA,EACtB,GAAG,GAAG;AAEN,QAAM,QAAQ,eACV,SAAS,EAAE,gBACX,UACE,SAAS,EAAE,QACX,SAAS,EAAE;AAEjB,SACE,oCAAC,OAAI,UAAU,KACb,oCAAC,QAAK,SAAe,YAAY,eAAe,IAAK,CACvD;AAEJ;",
+  "sourcesContent": ["import { Box, Text } from 'ink'\nimport React from 'react'\nimport { useInterval } from '@hooks/useInterval'\nimport { BLACK_CIRCLE } from '@constants/figures'\nimport { SYMBOL_COLORS } from '@constants/colors'\n\ntype Props = {\n  isError: boolean\n  isUnresolved: boolean\n  shouldAnimate: boolean\n}\n\nexport function ToolUseLoader({\n  isError,\n  isUnresolved,\n  shouldAnimate,\n}: Props): React.ReactNode {\n  const [isVisible, setIsVisible] = React.useState(true)\n\n  useInterval(() => {\n    if (!shouldAnimate) {\n      return\n    }\n    // To avoid flickering when the tool use confirm is visible, we set the loader to be visible\n    // when the tool use confirm is visible.\n    setIsVisible(_ => !_)\n  }, 600)\n\n  // \u4F7F\u7528 SYMBOL_COLORS \u4E0E Logo \u54C1\u724C\u914D\u8272\u4FDD\u6301\u4E00\u81F4\n  const color = isUnresolved\n    ? SYMBOL_COLORS.running\n    : isError\n      ? SYMBOL_COLORS.error\n      : SYMBOL_COLORS.success\n\n  return (\n    <Box minWidth={2}>\n      <Text color={color}>{isVisible ? BLACK_CIRCLE : '  '}</Text>\n    </Box>\n  )\n}\n"],
+  "mappings": "AAAA,SAAS,KAAK,YAAY;AAC1B,OAAO,WAAW;AAClB,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAQvB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,IAAI;AAErD,cAAY,MAAM;AAChB,QAAI,CAAC,eAAe;AAClB;AAAA,IACF;AAGA,iBAAa,OAAK,CAAC,CAAC;AAAA,EACtB,GAAG,GAAG;AAGN,QAAM,QAAQ,eACV,cAAc,UACd,UACE,cAAc,QACd,cAAc;AAEpB,SACE,oCAAC,OAAI,UAAU,KACb,oCAAC,QAAK,SAAe,YAAY,eAAe,IAAK,CACvD;AAEJ;",
   "names": []
 }

package/dist/components/TreeConnector.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { SYMBOLS } from "../constants/symbols.js";
+import { SEMANTIC_COLORS } from "../constants/colors.js";
+function TreeConnector({
+  isLast,
+  variant = "default"
+}) {
+  const branch = isLast ? `${SYMBOLS.TREE_LAST} ` : `${SYMBOLS.TREE_BRANCH} `;
+  if (variant === "compact") {
+    return /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, isLast ? "\u2514 " : "\u251C ");
+  }
+  return /* @__PURE__ */ React.createElement(Box, { minWidth: 3 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, branch));
+}
+function TreeContinuation({
+  parentIsLast,
+  width = 3
+}) {
+  const line = parentIsLast ? `${SYMBOLS.TREE_SPACE} ` : `${SYMBOLS.TREE_VERTICAL}  `;
+  return /* @__PURE__ */ React.createElement(Box, { minWidth: width }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, line));
+}
+export {
+  TreeConnector,
+  TreeContinuation
+};
+//# sourceMappingURL=TreeConnector.js.map

package/dist/components/TreeConnector.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/TreeConnector.tsx"],
+  "sourcesContent": ["/**\n * Tree Connector Component\n *\n * Renders tree-style connection lines for hierarchical display.\n * Uses REPL \u663E\u793A\u89C4\u8303\u5B9A\u4E49\u7684\u7ED3\u6784\u7B26\u53F7\n */\n\nimport React from 'react'\nimport { Box, Text } from 'ink'\nimport { SYMBOLS } from '@constants/symbols'\nimport { SEMANTIC_COLORS } from '@constants/colors'\n\ninterface Props {\n  /** Whether this is the last child in the parent */\n  isLast: boolean\n  /** Connector style variant */\n  variant?: 'default' | 'compact'\n}\n\nexport function TreeConnector({\n  isLast,\n  variant = 'default',\n}: Props): React.ReactNode {\n  // \u4F7F\u7528 REPL \u89C4\u8303\u5B9A\u4E49\u7684\u7ED3\u6784\u7B26\u53F7\n  const branch = isLast ? `${SYMBOLS.TREE_LAST} ` : `${SYMBOLS.TREE_BRANCH} `\n\n  if (variant === 'compact') {\n    return <Text color={SEMANTIC_COLORS.dim}>{isLast ? '\u2514 ' : '\u251C '}</Text>\n  }\n\n  return (\n    <Box minWidth={3}>\n      <Text color={SEMANTIC_COLORS.dim}>{branch}</Text>\n    </Box>\n  )\n}\n\n/**\n * Continuation line for nested content under a tree item\n * \u4F7F\u7528 REPL \u89C4\u8303\u5B9A\u4E49\u7684\u5782\u76F4\u8FDE\u63A5\u7B26\u53F7\n */\ninterface ContinuationProps {\n  /** Whether parent was the last child */\n  parentIsLast: boolean\n  /** Width of the continuation line area */\n  width?: number\n}\n\nexport function TreeContinuation({\n  parentIsLast,\n  width = 3,\n}: ContinuationProps): React.ReactNode {\n  // \u6700\u540E\u4E00\u9879\u540E\u4F7F\u7528\u7A7A\u767D\uFF0C\u975E\u6700\u540E\u9879\u4F7F\u7528\u5782\u76F4\u7EBF\n  const line = parentIsLast\n    ? `${SYMBOLS.TREE_SPACE} `\n    : `${SYMBOLS.TREE_VERTICAL}  `\n\n  return (\n    <Box minWidth={width}>\n      <Text color={SEMANTIC_COLORS.dim}>{line}</Text>\n    </Box>\n  )\n}\n"],
+  "mappings": "AAOA,OAAO,WAAW;AAClB,SAAS,KAAK,YAAY;AAC1B,SAAS,eAAe;AACxB,SAAS,uBAAuB;AASzB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,UAAU;AACZ,GAA2B;AAEzB,QAAM,SAAS,SAAS,GAAG,QAAQ,SAAS,MAAM,GAAG,QAAQ,WAAW;AAExE,MAAI,YAAY,WAAW;AACzB,WAAO,oCAAC,QAAK,OAAO,gBAAgB,OAAM,SAAS,YAAO,SAAK;AAAA,EACjE;AAEA,SACE,oCAAC,OAAI,UAAU,KACb,oCAAC,QAAK,OAAO,gBAAgB,OAAM,MAAO,CAC5C;AAEJ;AAaO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,QAAQ;AACV,GAAuC;AAErC,QAAM,OAAO,eACT,GAAG,QAAQ,UAAU,MACrB,GAAG,QAAQ,aAAa;AAE5B,SACE,oCAAC,OAAI,UAAU,SACb,oCAAC,QAAK,OAAO,gBAAgB,OAAM,IAAK,CAC1C;AAEJ;",
+  "names": []
+}

package/dist/components/TrustDialog.js

@@ -10,6 +10,7 @@ import { PRODUCT_NAME } from "../constants/product.js";
 import { useExitOnCtrlCD } from "../hooks/useExitOnCtrlCD.js";
 import { homedir } from "os";
 import { getCwd } from "../utils/state.js";
+import { SEMANTIC_COLORS } from "../constants/colors.js";
 function TrustDialog({ onDone }) {
   const theme = getTheme();
   React.useEffect(() => {
@@ -63,7 +64,7 @@ function TrustDialog({ onDone }) {
         onChange: (value) => onChange(value)
       }
     )
-  ), /* @__PURE__ */ React.createElement(Box, { marginLeft: 3 }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, exitState.pending ? /* @__PURE__ */ React.createElement(React.Fragment, null, "Press ", exitState.keyName, " again to exit") : /* @__PURE__ */ React.createElement(React.Fragment, null, "Enter to confirm \xB7 Esc to exit"))));
+  ), /* @__PURE__ */ React.createElement(Box, { marginLeft: 3 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, exitState.pending ? /* @__PURE__ */ React.createElement(React.Fragment, null, "Press ", exitState.keyName, " again to exit") : /* @__PURE__ */ React.createElement(React.Fragment, null, "Enter to confirm \xB7 Esc to exit"))));
 }
 export {
   TrustDialog

package/dist/components/TrustDialog.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/TrustDialog.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { Box, Text, useInput } from 'ink'\nimport { getTheme } from '@utils/theme'\nimport { Select } from './CustomSelect/select'\nimport {\n  saveCurrentProjectConfig,\n  getCurrentProjectConfig,\n} from '@utils/config'\nimport { PRODUCT_NAME } from '@constants/product'\nimport { useExitOnCtrlCD } from '@hooks/useExitOnCtrlCD'\nimport { homedir } from 'os'\nimport { getCwd } from '@utils/state'\nimport Link from './Link'\n\ntype Props = {\n  onDone(): void\n}\n\nexport function TrustDialog({ onDone }: Props): React.ReactNode {\n  const theme = getTheme()\n  React.useEffect(() => {}, [])\n\n  function onChange(value: 'yes' | 'no') {\n    const config = getCurrentProjectConfig()\n    switch (value) {\n      case 'yes': {\n        const isHomeDir = homedir() === getCwd()\n\n        if (!isHomeDir) {\n          saveCurrentProjectConfig({\n            ...config,\n            hasTrustDialogAccepted: true,\n          })\n        }\n        onDone()\n        break\n      }\n      case 'no': {\n        process.exit(1)\n        break\n      }\n    }\n  }\n\n  const exitState = useExitOnCtrlCD(() => process.exit(0))\n\n  useInput((_input, key) => {\n    if (key.escape) {\n      process.exit(0)\n      return\n    }\n  })\n\n  return (\n    <>\n      <Box\n        flexDirection=\"column\"\n        gap={1}\n        padding={1}\n        borderStyle=\"round\"\n        borderColor={theme.warning}\n      >\n        <Text bold color={theme.warning}>\n          Do you trust the files in this folder?\n        </Text>\n        <Text bold>{process.cwd()}</Text>\n\n        <Box flexDirection=\"column\" gap={1}>\n          <Text>\n            {PRODUCT_NAME} may read files in this folder. Reading untrusted\n            files may lead to {PRODUCT_NAME} to behave in an unexpected ways.\n          </Text>\n          <Text>\n            With your permission {PRODUCT_NAME} may execute files in this\n            folder. Executing untrusted code is unsafe.\n          </Text>\n        </Box>\n\n        <Select\n          options={[\n            { label: 'Yes, proceed', value: 'yes' },\n            { label: 'No, exit', value: 'no' },\n          ]}\n          onChange={value => onChange(value as 'yes' | 'no')}\n        />\n      </Box>\n      <Box marginLeft={3}>\n        <Text dimColor>\n          {exitState.pending ? (\n            <>Press {exitState.keyName} again to exit</>\n          ) : (\n            <>Enter to confirm \u00B7 Esc to exit</>\n          )}\n        </Text>\n      </Box>\n    </>\n  )\n}\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,KAAK,MAAM,gBAAgB;AACpC,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,eAAe;AACxB,SAAS,cAAc;AAOhB,SAAS,YAAY,EAAE,OAAO,GAA2B;AAC9D,QAAM,QAAQ,SAAS;AACvB,QAAM,UAAU,MAAM;AAAA,EAAC,GAAG,CAAC,CAAC;AAE5B,WAAS,SAAS,OAAqB;AACrC,UAAM,SAAS,wBAAwB;AACvC,YAAQ,OAAO;AAAA,MACb,KAAK,OAAO;AACV,cAAM,YAAY,QAAQ,MAAM,OAAO;AAEvC,YAAI,CAAC,WAAW;AACd,mCAAyB;AAAA,YACvB,GAAG;AAAA,YACH,wBAAwB;AAAA,UAC1B,CAAC;AAAA,QACH;AACA,eAAO;AACP;AAAA,MACF;AAAA,MACA,KAAK,MAAM;AACT,gBAAQ,KAAK,CAAC;AACd;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,YAAY,gBAAgB,MAAM,QAAQ,KAAK,CAAC,CAAC;AAEvD,WAAS,CAAC,QAAQ,QAAQ;AACxB,QAAI,IAAI,QAAQ;AACd,cAAQ,KAAK,CAAC;AACd;AAAA,IACF;AAAA,EACF,CAAC;AAED,SACE,0DACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAc;AAAA,MACd,KAAK;AAAA,MACL,SAAS;AAAA,MACT,aAAY;AAAA,MACZ,aAAa,MAAM;AAAA;AAAA,IAEnB,oCAAC,QAAK,MAAI,MAAC,OAAO,MAAM,WAAS,wCAEjC;AAAA,IACA,oCAAC,QAAK,MAAI,QAAE,QAAQ,IAAI,CAAE;AAAA,IAE1B,oCAAC,OAAI,eAAc,UAAS,KAAK,KAC/B,oCAAC,YACE,cAAa,wEACK,cAAa,mCAClC,GACA,oCAAC,YAAK,yBACkB,cAAa,wEAErC,CACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,UACP,EAAE,OAAO,gBAAgB,OAAO,MAAM;AAAA,UACtC,EAAE,OAAO,YAAY,OAAO,KAAK;AAAA,QACnC;AAAA,QACA,UAAU,WAAS,SAAS,KAAqB;AAAA;AAAA,IACnD;AAAA,EACF,GACA,oCAAC,OAAI,YAAY,KACf,oCAAC,QAAK,UAAQ,QACX,UAAU,UACT,0DAAE,UAAO,UAAU,SAAQ,gBAAc,IAEzC,0DAAE,mCAA8B,CAEpC,CACF,CACF;AAEJ;",
+  "sourcesContent": ["import React from 'react'\nimport { Box, Text, useInput } from 'ink'\nimport { getTheme } from '@utils/theme'\nimport { Select } from './CustomSelect/select'\nimport {\n  saveCurrentProjectConfig,\n  getCurrentProjectConfig,\n} from '@utils/config'\nimport { PRODUCT_NAME } from '@constants/product'\nimport { useExitOnCtrlCD } from '@hooks/useExitOnCtrlCD'\nimport { homedir } from 'os'\nimport { getCwd } from '@utils/state'\nimport Link from './Link'\nimport { SEMANTIC_COLORS } from '@constants/colors'\n\ntype Props = {\n  onDone(): void\n}\n\nexport function TrustDialog({ onDone }: Props): React.ReactNode {\n  const theme = getTheme()\n  React.useEffect(() => {}, [])\n\n  function onChange(value: 'yes' | 'no') {\n    const config = getCurrentProjectConfig()\n    switch (value) {\n      case 'yes': {\n        const isHomeDir = homedir() === getCwd()\n\n        if (!isHomeDir) {\n          saveCurrentProjectConfig({\n            ...config,\n            hasTrustDialogAccepted: true,\n          })\n        }\n        onDone()\n        break\n      }\n      case 'no': {\n        process.exit(1)\n        break\n      }\n    }\n  }\n\n  const exitState = useExitOnCtrlCD(() => process.exit(0))\n\n  useInput((_input, key) => {\n    if (key.escape) {\n      process.exit(0)\n      return\n    }\n  })\n\n  return (\n    <>\n      <Box\n        flexDirection=\"column\"\n        gap={1}\n        padding={1}\n        borderStyle=\"round\"\n        borderColor={theme.warning}\n      >\n        <Text bold color={theme.warning}>\n          Do you trust the files in this folder?\n        </Text>\n        <Text bold>{process.cwd()}</Text>\n\n        <Box flexDirection=\"column\" gap={1}>\n          <Text>\n            {PRODUCT_NAME} may read files in this folder. Reading untrusted\n            files may lead to {PRODUCT_NAME} to behave in an unexpected ways.\n          </Text>\n          <Text>\n            With your permission {PRODUCT_NAME} may execute files in this\n            folder. Executing untrusted code is unsafe.\n          </Text>\n        </Box>\n\n        <Select\n          options={[\n            { label: 'Yes, proceed', value: 'yes' },\n            { label: 'No, exit', value: 'no' },\n          ]}\n          onChange={value => onChange(value as 'yes' | 'no')}\n        />\n      </Box>\n      <Box marginLeft={3}>\n        <Text color={SEMANTIC_COLORS.dim}>\n          {exitState.pending ? (\n            <>Press {exitState.keyName} again to exit</>\n          ) : (\n            <>Enter to confirm \u00B7 Esc to exit</>\n          )}\n        </Text>\n      </Box>\n    </>\n  )\n}\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,KAAK,MAAM,gBAAgB;AACpC,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,eAAe;AACxB,SAAS,cAAc;AAEvB,SAAS,uBAAuB;AAMzB,SAAS,YAAY,EAAE,OAAO,GAA2B;AAC9D,QAAM,QAAQ,SAAS;AACvB,QAAM,UAAU,MAAM;AAAA,EAAC,GAAG,CAAC,CAAC;AAE5B,WAAS,SAAS,OAAqB;AACrC,UAAM,SAAS,wBAAwB;AACvC,YAAQ,OAAO;AAAA,MACb,KAAK,OAAO;AACV,cAAM,YAAY,QAAQ,MAAM,OAAO;AAEvC,YAAI,CAAC,WAAW;AACd,mCAAyB;AAAA,YACvB,GAAG;AAAA,YACH,wBAAwB;AAAA,UAC1B,CAAC;AAAA,QACH;AACA,eAAO;AACP;AAAA,MACF;AAAA,MACA,KAAK,MAAM;AACT,gBAAQ,KAAK,CAAC;AACd;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,YAAY,gBAAgB,MAAM,QAAQ,KAAK,CAAC,CAAC;AAEvD,WAAS,CAAC,QAAQ,QAAQ;AACxB,QAAI,IAAI,QAAQ;AACd,cAAQ,KAAK,CAAC;AACd;AAAA,IACF;AAAA,EACF,CAAC;AAED,SACE,0DACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAc;AAAA,MACd,KAAK;AAAA,MACL,SAAS;AAAA,MACT,aAAY;AAAA,MACZ,aAAa,MAAM;AAAA;AAAA,IAEnB,oCAAC,QAAK,MAAI,MAAC,OAAO,MAAM,WAAS,wCAEjC;AAAA,IACA,oCAAC,QAAK,MAAI,QAAE,QAAQ,IAAI,CAAE;AAAA,IAE1B,oCAAC,OAAI,eAAc,UAAS,KAAK,KAC/B,oCAAC,YACE,cAAa,wEACK,cAAa,mCAClC,GACA,oCAAC,YAAK,yBACkB,cAAa,wEAErC,CACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,UACP,EAAE,OAAO,gBAAgB,OAAO,MAAM;AAAA,UACtC,EAAE,OAAO,YAAY,OAAO,KAAK;AAAA,QACnC;AAAA,QACA,UAAU,WAAS,SAAS,KAAqB;AAAA;AAAA,IACnD;AAAA,EACF,GACA,oCAAC,OAAI,YAAY,KACf,oCAAC,QAAK,OAAO,gBAAgB,OAC1B,UAAU,UACT,0DAAE,UAAO,UAAU,SAAQ,gBAAc,IAEzC,0DAAE,mCAA8B,CAEpC,CACF,CACF;AAEJ;",
   "names": []
 }

package/dist/components/TurnCompletionIndicator.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { formatDuration } from "../utils/format.js";
+import { getTheme } from "../utils/theme.js";
+function TurnCompletionIndicator({
+  durationMs,
+  isVisible
+}) {
+  if (!isVisible || durationMs === null || durationMs < 1e3) {
+    return null;
+  }
+  const theme = getTheme();
+  return /* @__PURE__ */ React.createElement(Box, { marginTop: 1, marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, "\u273B Cogitated for ", formatDuration(durationMs)));
+}
+export {
+  TurnCompletionIndicator
+};
+//# sourceMappingURL=TurnCompletionIndicator.js.map

package/dist/components/TurnCompletionIndicator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/TurnCompletionIndicator.tsx"],
+  "sourcesContent": ["/**\n * Turn Completion Indicator\n *\n * Displays \"\u273B Cogitated for Xm Ys\" after an AI turn completes,\n * similar to Claude Code's turn duration display.\n */\n\nimport React from 'react'\nimport { Box, Text } from 'ink'\nimport { formatDuration } from '@utils/format'\nimport { getTheme } from '@utils/theme'\n\ninterface Props {\n  /** Duration of the completed turn in milliseconds */\n  durationMs: number | null\n  /** Whether to show the indicator */\n  isVisible: boolean\n}\n\n/**\n * Shows a completion indicator with elapsed time after an AI turn finishes.\n * Uses \"Cogitated\" as a more engaging word than \"Worked\" or \"Processed\".\n */\nexport function TurnCompletionIndicator({\n  durationMs,\n  isVisible,\n}: Props): React.ReactNode {\n  if (!isVisible || durationMs === null || durationMs < 1000) {\n    // Don't show for very short turns (< 1s)\n    return null\n  }\n\n  const theme = getTheme()\n\n  return (\n    <Box marginTop={1} marginBottom={1}>\n      <Text color={theme.secondaryText}>\n        \u273B Cogitated for {formatDuration(durationMs)}\n      </Text>\n    </Box>\n  )\n}\n"],
+  "mappings": "AAOA,OAAO,WAAW;AAClB,SAAS,KAAK,YAAY;AAC1B,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AAalB,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AACF,GAA2B;AACzB,MAAI,CAAC,aAAa,eAAe,QAAQ,aAAa,KAAM;AAE1D,WAAO;AAAA,EACT;AAEA,QAAM,QAAQ,SAAS;AAEvB,SACE,oCAAC,OAAI,WAAW,GAAG,cAAc,KAC/B,oCAAC,QAAK,OAAO,MAAM,iBAAe,yBACf,eAAe,UAAU,CAC5C,CACF;AAEJ;",
+  "names": []
+}

package/dist/components/binary-feedback/BinaryFeedbackView.js

@@ -7,6 +7,7 @@ import { Select } from "../CustomSelect/select.js";
 import { BinaryFeedbackOption } from "./BinaryFeedbackOption.js";
 import { useExitOnCtrlCD } from "../../hooks/useExitOnCtrlCD.js";
 import { PRODUCT_NAME } from "../../constants/product.js";
+import { SEMANTIC_COLORS } from "../../constants/colors.js";
 const HELP_URL = "https://go/cli-feedback";
 function getOptions() {
   return [
@@ -127,7 +128,7 @@ function BinaryFeedbackView({
         onChange: onChoose
       }
     ))
-  ), exitState.pending ? /* @__PURE__ */ React.createElement(Box, { marginLeft: 3 }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, "Press ", exitState.keyName, " again to exit")) : (
+  ), exitState.pending ? /* @__PURE__ */ React.createElement(Box, { marginLeft: 3 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "Press ", exitState.keyName, " again to exit")) : (
     // Render a blank line so that the UI doesn't reflow when the exit message is shown
     /* @__PURE__ */ React.createElement(Text, null, " ")
   ));