@within-7/minto 0.4.0 → 0.4.2

package/dist/components/TaskCard.js

@@ -1,10 +1,10 @@
 import React, { useRef } from "react";
 import { Box, Text } from "ink";
 import { getTheme } from "../utils/theme.js";
-import { formatDuration } from "../utils/format.js";
+import { formatNumber, formatDuration } from "../utils/format.js";
 import { getAgentColor, SYMBOL_COLORS } from "../constants/colors.js";
 import { useUnifiedAnimation } from "../utils/animationManager.js";
-import { useAgentTokenStats, formatTokenCount } from "../hooks/useAgentTokenStats.js";
+import { useAgentTokenStats } from "../hooks/useAgentTokenStats.js";
 function TaskCard({
   subagent,
   isExpanded = false,
@@ -34,7 +34,7 @@ function TaskCard({
   const latestMessage = getLatestMessage(messages);
   const cardBgColor = isHighlighted ? theme.selectionBg : "#6A7B8E";
   const isCompleted = status === "completed" || status === "error";
-  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginY: 0 }, !isCompleted && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "row" }, /* @__PURE__ */ React.createElement(Text, { color }, statusIcon, " "), /* @__PURE__ */ React.createElement(Text, { bold: true }, taskName), /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, " \xB7 ", agentType)), /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", marginLeft: 2 }, /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, "\u251C\u2500 "), /* @__PURE__ */ React.createElement(Text, { color: statusColor }, statusText), /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, " \xB7 "), /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, metrics.toolUseCount, " tool", metrics.toolUseCount !== 1 ? "s" : ""), /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, " \xB7 "), /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, formatTokenCount(tokenCount), " tokens"), /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, " \xB7 "), /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, formatDuration(duration))), latestMessage && /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", marginLeft: 2 }, /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, "\u2514\u2500 "), /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, latestMessage)), messages.length > 0 && messages.map((msg, idx) => {
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginY: 0 }, !isCompleted && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "row" }, /* @__PURE__ */ React.createElement(Text, { color }, statusIcon, " "), /* @__PURE__ */ React.createElement(Text, { bold: true }, taskName), /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, " \xB7 ", agentType)), /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", marginLeft: 2 }, /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, "\u251C\u2500 "), /* @__PURE__ */ React.createElement(Text, { color: statusColor }, statusText), /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, " \xB7 "), /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, metrics.toolUseCount, " tool", metrics.toolUseCount !== 1 ? "s" : ""), /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, " \xB7 "), /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, formatNumber(tokenCount), " tokens"), /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, " \xB7 "), /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, formatDuration(duration))), latestMessage && /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", marginLeft: 2 }, /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, "\u2514\u2500 "), /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, latestMessage)), messages.length > 0 && messages.map((msg, idx) => {
     let content = "";
     let prefix = "\u2190 ";
     if (msg.type === "assistant") {
@@ -61,7 +61,7 @@ function TaskCard({
       return null;
     }
     return /* @__PURE__ */ React.createElement(Box, { key: idx, flexDirection: "row", marginLeft: 4 }, /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, prefix), /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, content.substring(0, 80), content.length > 80 ? "..." : ""));
-  }).filter(Boolean)), isCompleted && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "row" }, /* @__PURE__ */ React.createElement(Text, { color }, statusIcon, " "), /* @__PURE__ */ React.createElement(Text, { bold: true }, taskName), /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, " \xB7 ", agentType)), /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", marginLeft: 2 }, /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, "\u2514\u2500 "), /* @__PURE__ */ React.createElement(Text, { color: statusColor }, statusText), /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, " \xB7 "), /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, metrics.toolUseCount, " tool", metrics.toolUseCount !== 1 ? "s" : ""), /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, " \xB7 "), /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, formatTokenCount(tokenCount), " tokens"), /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, " \xB7 "), /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, formatDuration(duration)), /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, " (Ctrl+O to expand)")), isExpanded && messages.length > 0 && /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginLeft: 4, marginTop: 1 }, renderTaskOutputLog(subagent, theme, tools, verbose))), debug && /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: theme.info }, "[View Details]"), /* @__PURE__ */ React.createElement(Text, null, " "), isRunning && /* @__PURE__ */ React.createElement(Text, { color: SYMBOL_COLORS.error }, "[Cancel]")));
+  }).filter(Boolean)), isCompleted && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "row" }, /* @__PURE__ */ React.createElement(Text, { color }, statusIcon, " "), /* @__PURE__ */ React.createElement(Text, { bold: true }, taskName), /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, " \xB7 ", agentType)), /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", marginLeft: 2 }, /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, "\u2514\u2500 "), /* @__PURE__ */ React.createElement(Text, { color: statusColor }, statusText), /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, " \xB7 "), /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, metrics.toolUseCount, " tool", metrics.toolUseCount !== 1 ? "s" : ""), /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, " \xB7 "), /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, formatNumber(tokenCount), " tokens"), /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, " \xB7 "), /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, formatDuration(duration)), /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, " (Ctrl+O to expand)")), isExpanded && messages.length > 0 && /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginLeft: 4, marginTop: 1 }, renderTaskOutputLog(subagent, theme, tools, verbose))), debug && /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: theme.info }, "[View Details]"), /* @__PURE__ */ React.createElement(Text, null, " "), isRunning && /* @__PURE__ */ React.createElement(Text, { color: SYMBOL_COLORS.error }, "[Cancel]")));
 }
 function getStatusIcon(status, isRunning) {
   if (isRunning) {

package/dist/components/TaskCard.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/TaskCard.tsx"],
-  "sourcesContent": ["/**\n * TaskCard - Claude Code CLI \u98CE\u683C\u7684\u4EFB\u52A1\u5361\u7247\u7EC4\u4EF6\n *\n * \u6838\u5FC3\u7279\u6027\uFF1A\n * 1. **\u5361\u7247\u5F0F\u8BBE\u8BA1** - \u72EC\u7ACB\u7684\u89C6\u89C9\u5355\u5143\uFF0C\u4E0E\u4E3B\u5BF9\u8BDD\u6D41\u533A\u5206\n * 2. **\u72B6\u6001\u6E05\u6670** - \u901A\u8FC7\u56FE\u6807\u548C\u989C\u8272\u660E\u786E\u4F20\u8FBE\u4EFB\u52A1\u72B6\u6001\n * 3. **\u53EF\u6298\u53E0** - \u8BE6\u7EC6\u65E5\u5FD7\u53EF\u6298\u53E0\uFF0C\u8282\u7701\u7A7A\u95F4\n * 4. **\u8FDB\u5EA6\u53EF\u89C6\u5316** - \u663E\u793A\u4EFB\u52A1\u8FDB\u5EA6\u767E\u5206\u6BD4\u548C\u6307\u6807\n * 5. **\u5E76\u53D1\u53CB\u597D** - \u591A\u4E2A\u5361\u7247\u5E76\u5217\u663E\u793A\u4E0D\u6DF7\u4E71\n *\n * \u57FA\u4E8E Claude Code CLI \u7684 TaskCardBlock \u89C4\u8303\n * \u4F7F\u7528\u7EDF\u4E00\u52A8\u753B\u7BA1\u7406\u5668\u4EE3\u66FF setInterval\uFF0C\u51CF\u5C11\u5C4F\u5E55\u95EA\u70C1\n */\n\nimport React, { useRef } from 'react'\nimport { Box, Text } from 'ink'\nimport { getTheme } from '@utils/theme'\nimport { formatNumber, formatDuration } from '@utils/format'\nimport { getAgentColor, SYMBOL_COLORS } from '@constants/colors'\nimport type { SubagentState } from '@minto-types/subagent'\nimport type { Tool } from '@tool'\nimport { useUnifiedAnimation } from '@utils/animationManager'\nimport { useAgentTokenStats, formatTokenCount } from '@hooks/useAgentTokenStats'\n\ninterface TaskCardProps {\n  /** \u5B50\u4EFB\u52A1\u72B6\u6001 */\n  subagent: SubagentState\n\n  /** \u662F\u5426\u5C55\u5F00\u8BE6\u7EC6\u65E5\u5FD7 */\n  isExpanded?: boolean\n\n  /** \u662F\u5426\u9AD8\u4EAE\uFF08\u9700\u8981\u7528\u6237\u5173\u6CE8\uFF09 */\n  isHighlighted?: boolean\n\n  /** \u5DE5\u5177\u5217\u8868 */\n  tools?: Tool[]\n\n  /** \u662F\u5426\u663E\u793A\u8BE6\u7EC6\u4FE1\u606F */\n  verbose?: boolean\n\n  /** \u8C03\u8BD5\u6A21\u5F0F */\n  debug?: boolean\n\n  /** \u6298\u53E0/\u5C55\u5F00\u56DE\u8C03 */\n  onToggleExpand?: () => void\n}\n\n/**\n * TaskCard - \u5355\u4E2A\u5B50\u4EFB\u52A1\u7684\u52A8\u6001\u5C55\u793A\uFF08\u65E0\u8FB9\u6846\uFF09\n *\n * \u8FD0\u884C\u4E2D\u5E03\u5C40\uFF08\u81EA\u52A8\u5C55\u5F00\uFF09:\n * ```\n * \u280B Feature Implementation \u00B7 backend-architect\n *   \u251C\u2500 Running \u00B7 3 tools \u00B7 5.2k tokens \u00B7 12s\n *   \u2514\u2500 Analyzing code structure...\n *       \u2192 Tool call output message...\n *       \u2190 Assistant response...\n * ```\n *\n * \u5B8C\u6210\u540E\u5E03\u5C40\uFF08\u81EA\u52A8\u6298\u53E0\uFF09:\n * ```\n * \u2713 Feature Implementation \u00B7 backend-architect\n *   \u2514\u2500 Done \u00B7 5 tools \u00B7 8.3k tokens \u00B7 24s (Ctrl+O to expand)\n * ```\n *\n * \u5B8C\u6210\u540E\u5C55\u5F00\uFF08Ctrl+O\uFF09:\n * ```\n * \u2713 Feature Implementation \u00B7 backend-architect\n *   \u2514\u2500 Done \u00B7 5 tools \u00B7 8.3k tokens \u00B7 24s (Ctrl+O to expand)\n *       [\u8BE6\u7EC6\u7684\u6267\u884C\u8FC7\u7A0B\u65E5\u5FD7]\n * ```\n */\nexport function TaskCard({\n  subagent,\n  isExpanded = false,\n  isHighlighted = false,\n  tools = [],\n  verbose = false,\n  debug = false,\n  onToggleExpand,\n}: TaskCardProps): React.ReactNode {\n  const theme = getTheme()\n  const { metrics, taskName, status, messages, agentType, agentColor } =\n    subagent\n\n  // Get real-time token stats from unified TokenStatsManager\n  const tokenStats = useAgentTokenStats(subagent.id)\n  const tokenCount = tokenStats?.grandTotalTokens ?? 0\n\n  // \u83B7\u53D6 agent \u989C\u8272\n  const color = getAgentColor(agentColor, theme)\n\n  // \u5224\u65AD\u662F\u5426\u6B63\u5728\u8FD0\u884C\n  const isRunning =\n    status === 'initializing' || status === 'running' || status === 'queued'\n\n  // Use unified animation manager for periodic time updates\n  const startTimeRef = useRef(metrics.startTime)\n  const { elapsedTime } = useUnifiedAnimation({\n    enabled: isRunning,\n    startTime: startTimeRef.current,\n    spinnerFrameCount: 1,\n    componentId: `task-card-${subagent.id}`,\n  })\n\n  // \u8BA1\u7B97\u6301\u7EED\u65F6\u95F4\n  const duration = metrics.endTime\n    ? metrics.endTime - metrics.startTime\n    : Date.now() - metrics.startTime\n\n  // \u72B6\u6001\u56FE\u6807\u548C\u6587\u672C\n  const statusIcon = getStatusIcon(status, isRunning)\n  const statusText = getStatusText(status)\n  const statusColor = getStatusColor(status, theme)\n\n  // \u83B7\u53D6\u6700\u65B0\u7684\u72B6\u6001\u6D88\u606F\n  const latestMessage = getLatestMessage(messages)\n\n  // \u5361\u7247\u80CC\u666F\u8272\uFF08\u6839\u636E\u72B6\u6001\u548C\u9AD8\u4EAE\uFF09\n  const cardBgColor = isHighlighted\n    ? theme.selectionBg // #3C3C3C\n    : '#6A7B8E' // Task Card BG\n\n  // \u5224\u65AD\u662F\u5426\u5DF2\u5B8C\u6210\uFF08completed \u6216 error\uFF09\n  const isCompleted = status === 'completed' || status === 'error'\n\n  return (\n    <Box flexDirection=\"column\" marginY={0}>\n      {/* \u8FD0\u884C\u4E2D\uFF1A\u5C55\u5F00\u663E\u793A\u6240\u6709\u5185\u5BB9 */}\n      {!isCompleted && (\n        <>\n          {/* TaskHeader - \u4EFB\u52A1\u540D\u79F0\u548C Agent \u7C7B\u578B */}\n          <Box flexDirection=\"row\">\n            <Text color={color}>{statusIcon} </Text>\n            <Text bold>{taskName}</Text>\n            <Text color={theme.dimmedText}> \u00B7 {agentType}</Text>\n          </Box>\n\n          {/* TaskProgress - \u72B6\u6001\u548C\u6307\u6807 */}\n          <Box flexDirection=\"row\" marginLeft={2}>\n            <Text color={theme.dimmedText}>\u251C\u2500 </Text>\n            <Text color={statusColor}>{statusText}</Text>\n            <Text color={theme.mutedText}> \u00B7 </Text>\n            <Text color={theme.mutedText}>\n              {metrics.toolUseCount} tool{metrics.toolUseCount !== 1 ? 's' : ''}\n            </Text>\n            <Text color={theme.mutedText}> \u00B7 </Text>\n            <Text color={theme.mutedText}>\n              {formatTokenCount(tokenCount)} tokens\n            </Text>\n            <Text color={theme.mutedText}> \u00B7 </Text>\n            <Text color={theme.mutedText}>{formatDuration(duration)}</Text>\n          </Box>\n\n          {/* TaskStatusMessage - \u5F53\u524D\u6B63\u5728\u505A\u4EC0\u4E48 */}\n          {latestMessage && (\n            <Box flexDirection=\"row\" marginLeft={2}>\n              <Text color={theme.dimmedText}>\u2514\u2500 </Text>\n              <Text color={theme.dimmedText}>{latestMessage}</Text>\n            </Box>\n          )}\n\n          {/* Output messages - \u76F4\u63A5\u663E\u793A\u4E3A\u5B50\u5C42\u7EA7\uFF0C\u65E0 \"Output Log\" \u6807\u9898 */}\n          {messages.length > 0 &&\n            messages\n              .map((msg, idx) => {\n                // Extract text content based on message type\n                let content = ''\n                let prefix = '\u2190 '\n\n                if (msg.type === 'assistant') {\n                  prefix = '\u2192 '\n                  const blocks = msg.message.content\n                  content = blocks\n                    .filter((block: any) => block.type === 'text')\n                    .map((block: any) => block.text)\n                    .join(' ')\n                } else if (msg.type === 'user') {\n                  const msgParam = msg.message as any\n                  if (typeof msgParam.content === 'string') {\n                    content = msgParam.content\n                  } else if (Array.isArray(msgParam.content)) {\n                    content = msgParam.content\n                      .filter((block: any) => block.type === 'text')\n                      .map((block: any) => block.text)\n                      .join(' ')\n                  }\n                } else if (msg.type === 'progress') {\n                  prefix = '\u2699 '\n                  // Handle both AssistantMessage and StreamingProgressContent\n                  if (\n                    'type' in msg.content &&\n                    msg.content.type === 'streaming'\n                  ) {\n                    // StreamingProgressContent - show stdout/stderr preview\n                    content =\n                      msg.content.stdout ||\n                      msg.content.stderr ||\n                      '(streaming...)'\n                  } else if ('message' in msg.content) {\n                    // AssistantMessage\n                    const blocks = (msg.content as any).message.content\n                    content = blocks\n                      .filter((block: any) => block.type === 'text')\n                      .map((block: any) => block.text)\n                      .join(' ')\n                  }\n                }\n\n                if (!content || content.trim().length === 0) {\n                  return null\n                }\n\n                return (\n                  <Box key={idx} flexDirection=\"row\" marginLeft={4}>\n                    <Text color={theme.dimmedText}>{prefix}</Text>\n                    <Text color={theme.mutedText}>\n                      {content.substring(0, 80)}\n                      {content.length > 80 ? '...' : ''}\n                    </Text>\n                  </Box>\n                )\n              })\n              .filter(Boolean)}\n        </>\n      )}\n\n      {/* \u5DF2\u5B8C\u6210\uFF1A\u6298\u53E0\u6210\u4E00\u884C\uFF0C\u5E26\u5C55\u5F00\u63D0\u793A */}\n      {isCompleted && (\n        <>\n          <Box flexDirection=\"row\">\n            <Text color={color}>{statusIcon} </Text>\n            <Text bold>{taskName}</Text>\n            <Text color={theme.dimmedText}> \u00B7 {agentType}</Text>\n          </Box>\n\n          <Box flexDirection=\"row\" marginLeft={2}>\n            <Text color={theme.dimmedText}>\u2514\u2500 </Text>\n            <Text color={statusColor}>{statusText}</Text>\n            <Text color={theme.mutedText}> \u00B7 </Text>\n            <Text color={theme.mutedText}>\n              {metrics.toolUseCount} tool{metrics.toolUseCount !== 1 ? 's' : ''}\n            </Text>\n            <Text color={theme.mutedText}> \u00B7 </Text>\n            <Text color={theme.mutedText}>\n              {formatTokenCount(tokenCount)} tokens\n            </Text>\n            <Text color={theme.mutedText}> \u00B7 </Text>\n            <Text color={theme.mutedText}>{formatDuration(duration)}</Text>\n            <Text color={theme.dimmedText}> (Ctrl+O to expand)</Text>\n          </Box>\n\n          {/* \u5C55\u5F00\u65F6\u663E\u793A\u8BE6\u7EC6\u8FC7\u7A0B */}\n          {isExpanded && messages.length > 0 && (\n            <Box flexDirection=\"column\" marginLeft={4} marginTop={1}>\n              {renderTaskOutputLog(subagent, theme, tools, verbose)}\n            </Box>\n          )}\n        </>\n      )}\n\n      {/* TaskActionButtons - \u64CD\u4F5C\u6309\u94AE (\u672A\u6765\u6269\u5C55) */}\n      {debug && (\n        <Box flexDirection=\"row\" marginTop={1}>\n          <Text color={theme.info}>[View Details]</Text>\n          <Text> </Text>\n          {isRunning && <Text color={SYMBOL_COLORS.error}>[Cancel]</Text>}\n        </Box>\n      )}\n    </Box>\n  )\n}\n\n/**\n * \u83B7\u53D6\u72B6\u6001\u56FE\u6807\n */\nfunction getStatusIcon(\n  status: SubagentState['status'],\n  isRunning: boolean,\n): string {\n  if (isRunning) {\n    // \u4F7F\u7528 Spinner \u5B57\u7B26\u8F6E\u8F6C (\u7B80\u5316\u7248)\n    const spinnerFrames = ['\u280B', '\u2819', '\u2839', '\u2838', '\u283C', '\u2834', '\u2826', '\u2827', '\u2807', '\u280F']\n    const frame = Math.floor(Date.now() / 120) % spinnerFrames.length\n    return spinnerFrames[frame] || '\u280B'\n  }\n\n  switch (status) {\n    case 'completed':\n      return '\u2713'\n    case 'error':\n      return '\u2715'\n    case 'queued':\n      return '\u2026'\n    default:\n      return '\u25E6'\n  }\n}\n\n/**\n * \u83B7\u53D6\u72B6\u6001\u6587\u672C\n */\nfunction getStatusText(status: SubagentState['status']): string {\n  switch (status) {\n    case 'initializing':\n      return 'Initializing'\n    case 'queued':\n      return 'Queued'\n    case 'running':\n      return 'Running'\n    case 'completed':\n      return 'Done'\n    case 'error':\n      return 'Error'\n  }\n}\n\n/**\n * \u83B7\u53D6\u72B6\u6001\u989C\u8272 - \u4F7F\u7528 SYMBOL_COLORS \u4E0E Logo \u54C1\u724C\u914D\u8272\u4FDD\u6301\u4E00\u81F4\n */\nfunction getStatusColor(\n  status: SubagentState['status'],\n  theme: ReturnType<typeof getTheme>,\n): string {\n  switch (status) {\n    case 'initializing':\n    case 'queued':\n      return SYMBOL_COLORS.pending // \u7070\u8272 - \u7B49\u5F85\n    case 'running':\n      return SYMBOL_COLORS.running // \u7C89\u7D2B - \u8FDB\u884C\u4E2D\n    case 'completed':\n      return SYMBOL_COLORS.success // \u7D2B\u84DD - \u5B8C\u6210\n    case 'error':\n      return SYMBOL_COLORS.error // \u73CA\u745A\u7EA2 - \u9519\u8BEF\n  }\n}\n\n/**\n * \u83B7\u53D6\u6700\u65B0\u7684\u72B6\u6001\u6D88\u606F\n */\nfunction getLatestMessage(messages: SubagentState['messages']): string | null {\n  if (messages.length === 0) return null\n\n  // \u5012\u5E8F\u67E5\u627E\u6700\u65B0\u7684\u6587\u672C\u6D88\u606F\n  for (let i = messages.length - 1; i >= 0; i--) {\n    const msg = messages[i]\n    if (msg?.type === 'assistant' && msg.message?.content) {\n      for (const content of msg.message.content) {\n        if (content.type === 'text' && content.text.trim()) {\n          // \u622A\u53D6\u524D 60 \u4E2A\u5B57\u7B26\n          const text = content.text.trim()\n          return text.length > 60 ? text.substring(0, 60) + '...' : text\n        }\n        if (content.type === 'tool_use') {\n          return `Using ${content.name}...`\n        }\n      }\n    }\n  }\n\n  return null\n}\n\n/**\n * \u6E32\u67D3\u8BE6\u7EC6\u7684\u8F93\u51FA\u65E5\u5FD7\n */\nfunction renderTaskOutputLog(\n  subagent: SubagentState,\n  theme: ReturnType<typeof getTheme>,\n  tools: Tool[],\n  verbose: boolean,\n): React.ReactNode {\n  const { messages } = subagent\n\n  return (\n    <Box flexDirection=\"column\">\n      {messages.map((msg, idx) => {\n        if (msg.type === 'assistant') {\n          return msg.message.content.map((content, contentIdx) => {\n            if (content.type === 'tool_use') {\n              const tool = tools.find(t => t.name === content.name)\n              const toolName = tool?.userFacingName\n                ? typeof tool.userFacingName === 'function'\n                  ? tool.userFacingName()\n                  : tool.userFacingName\n                : content.name\n\n              return (\n                <Box key={`${idx}-${contentIdx}`} flexDirection=\"row\">\n                  <Text color={theme.info}>\uD83D\uDD27 {toolName}</Text>\n                </Box>\n              )\n            } else if (content.type === 'text' && content.text.trim()) {\n              const lines = content.text.trim().split('\\n')\n              return (\n                <Box key={`${idx}-${contentIdx}`} flexDirection=\"column\">\n                  {lines.map((line, lineIdx) => (\n                    <Text color={theme.secondaryText}>{line}</Text>\n                  ))}\n                </Box>\n              )\n            }\n            return null\n          })\n        } else if (msg.type === 'user') {\n          return msg.message.content.map((content, contentIdx) => {\n            if (content.type === 'tool_result') {\n              const resultContent = Array.isArray(content.content)\n                ? content.content.find(c => c.type === 'text')?.text\n                : typeof content.content === 'string'\n                  ? content.content\n                  : ''\n\n              if (resultContent && resultContent.trim()) {\n                const lines = resultContent.trim().split('\\n')\n                const preview =\n                  lines.length > 5\n                    ? lines.slice(0, 5).join('\\n') + '\\n...'\n                    : resultContent.trim()\n\n                return (\n                  <Box key={`${idx}-${contentIdx}`} flexDirection=\"column\">\n                    {preview.split('\\n').map((line, lineIdx) => (\n                      <Text color={theme.mutedText}>{line}</Text>\n                    ))}\n                  </Box>\n                )\n              }\n            }\n            return null\n          })\n        }\n        return null\n      })}\n    </Box>\n  )\n}\n\n/**\n * \u7D27\u51D1\u7248 TaskCard (\u7528\u4E8E\u7A7A\u95F4\u53D7\u9650\u7684\u573A\u666F)\n */\nexport function CompactTaskCard({\n  subagent,\n}: {\n  subagent: SubagentState\n}): React.ReactNode {\n  const theme = getTheme()\n  const { taskName, status, agentColor } = subagent\n\n  const color = getAgentColor(agentColor, theme)\n  const isRunning =\n    status === 'initializing' || status === 'running' || status === 'queued'\n  const statusIcon = getStatusIcon(status, isRunning)\n\n  return (\n    <Box flexDirection=\"row\">\n      <Text color={color}>\n        {statusIcon} {taskName}\n      </Text>\n      <Text color={theme.dimmedText}> \u00B7 {getStatusText(status)}</Text>\n    </Box>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * TaskCard - Claude Code CLI \u98CE\u683C\u7684\u4EFB\u52A1\u5361\u7247\u7EC4\u4EF6\n *\n * \u6838\u5FC3\u7279\u6027\uFF1A\n * 1. **\u5361\u7247\u5F0F\u8BBE\u8BA1** - \u72EC\u7ACB\u7684\u89C6\u89C9\u5355\u5143\uFF0C\u4E0E\u4E3B\u5BF9\u8BDD\u6D41\u533A\u5206\n * 2. **\u72B6\u6001\u6E05\u6670** - \u901A\u8FC7\u56FE\u6807\u548C\u989C\u8272\u660E\u786E\u4F20\u8FBE\u4EFB\u52A1\u72B6\u6001\n * 3. **\u53EF\u6298\u53E0** - \u8BE6\u7EC6\u65E5\u5FD7\u53EF\u6298\u53E0\uFF0C\u8282\u7701\u7A7A\u95F4\n * 4. **\u8FDB\u5EA6\u53EF\u89C6\u5316** - \u663E\u793A\u4EFB\u52A1\u8FDB\u5EA6\u767E\u5206\u6BD4\u548C\u6307\u6807\n * 5. **\u5E76\u53D1\u53CB\u597D** - \u591A\u4E2A\u5361\u7247\u5E76\u5217\u663E\u793A\u4E0D\u6DF7\u4E71\n *\n * \u57FA\u4E8E Claude Code CLI \u7684 TaskCardBlock \u89C4\u8303\n * \u4F7F\u7528\u7EDF\u4E00\u52A8\u753B\u7BA1\u7406\u5668\u4EE3\u66FF setInterval\uFF0C\u51CF\u5C11\u5C4F\u5E55\u95EA\u70C1\n */\n\nimport React, { useRef } from 'react'\nimport { Box, Text } from 'ink'\nimport { getTheme } from '@utils/theme'\nimport { formatNumber, formatDuration } from '@utils/format'\nimport { getAgentColor, SYMBOL_COLORS } from '@constants/colors'\nimport type { SubagentState } from '@minto-types/subagent'\nimport type { Tool } from '@tool'\nimport { useUnifiedAnimation } from '@utils/animationManager'\nimport { useAgentTokenStats } from '@hooks/useAgentTokenStats'\n\ninterface TaskCardProps {\n  /** \u5B50\u4EFB\u52A1\u72B6\u6001 */\n  subagent: SubagentState\n\n  /** \u662F\u5426\u5C55\u5F00\u8BE6\u7EC6\u65E5\u5FD7 */\n  isExpanded?: boolean\n\n  /** \u662F\u5426\u9AD8\u4EAE\uFF08\u9700\u8981\u7528\u6237\u5173\u6CE8\uFF09 */\n  isHighlighted?: boolean\n\n  /** \u5DE5\u5177\u5217\u8868 */\n  tools?: Tool[]\n\n  /** \u662F\u5426\u663E\u793A\u8BE6\u7EC6\u4FE1\u606F */\n  verbose?: boolean\n\n  /** \u8C03\u8BD5\u6A21\u5F0F */\n  debug?: boolean\n\n  /** \u6298\u53E0/\u5C55\u5F00\u56DE\u8C03 */\n  onToggleExpand?: () => void\n}\n\n/**\n * TaskCard - \u5355\u4E2A\u5B50\u4EFB\u52A1\u7684\u52A8\u6001\u5C55\u793A\uFF08\u65E0\u8FB9\u6846\uFF09\n *\n * \u8FD0\u884C\u4E2D\u5E03\u5C40\uFF08\u81EA\u52A8\u5C55\u5F00\uFF09:\n * ```\n * \u280B Feature Implementation \u00B7 backend-architect\n *   \u251C\u2500 Running \u00B7 3 tools \u00B7 5.2k tokens \u00B7 12s\n *   \u2514\u2500 Analyzing code structure...\n *       \u2192 Tool call output message...\n *       \u2190 Assistant response...\n * ```\n *\n * \u5B8C\u6210\u540E\u5E03\u5C40\uFF08\u81EA\u52A8\u6298\u53E0\uFF09:\n * ```\n * \u2713 Feature Implementation \u00B7 backend-architect\n *   \u2514\u2500 Done \u00B7 5 tools \u00B7 8.3k tokens \u00B7 24s (Ctrl+O to expand)\n * ```\n *\n * \u5B8C\u6210\u540E\u5C55\u5F00\uFF08Ctrl+O\uFF09:\n * ```\n * \u2713 Feature Implementation \u00B7 backend-architect\n *   \u2514\u2500 Done \u00B7 5 tools \u00B7 8.3k tokens \u00B7 24s (Ctrl+O to expand)\n *       [\u8BE6\u7EC6\u7684\u6267\u884C\u8FC7\u7A0B\u65E5\u5FD7]\n * ```\n */\nexport function TaskCard({\n  subagent,\n  isExpanded = false,\n  isHighlighted = false,\n  tools = [],\n  verbose = false,\n  debug = false,\n  onToggleExpand,\n}: TaskCardProps): React.ReactNode {\n  const theme = getTheme()\n  const { metrics, taskName, status, messages, agentType, agentColor } =\n    subagent\n\n  // Get real-time token stats from unified TokenStatsManager\n  const tokenStats = useAgentTokenStats(subagent.id)\n  const tokenCount = tokenStats?.grandTotalTokens ?? 0\n\n  // \u83B7\u53D6 agent \u989C\u8272\n  const color = getAgentColor(agentColor, theme)\n\n  // \u5224\u65AD\u662F\u5426\u6B63\u5728\u8FD0\u884C\n  const isRunning =\n    status === 'initializing' || status === 'running' || status === 'queued'\n\n  // Use unified animation manager for periodic time updates\n  const startTimeRef = useRef(metrics.startTime)\n  const { elapsedTime } = useUnifiedAnimation({\n    enabled: isRunning,\n    startTime: startTimeRef.current,\n    spinnerFrameCount: 1,\n    componentId: `task-card-${subagent.id}`,\n  })\n\n  // \u8BA1\u7B97\u6301\u7EED\u65F6\u95F4\n  const duration = metrics.endTime\n    ? metrics.endTime - metrics.startTime\n    : Date.now() - metrics.startTime\n\n  // \u72B6\u6001\u56FE\u6807\u548C\u6587\u672C\n  const statusIcon = getStatusIcon(status, isRunning)\n  const statusText = getStatusText(status)\n  const statusColor = getStatusColor(status, theme)\n\n  // \u83B7\u53D6\u6700\u65B0\u7684\u72B6\u6001\u6D88\u606F\n  const latestMessage = getLatestMessage(messages)\n\n  // \u5361\u7247\u80CC\u666F\u8272\uFF08\u6839\u636E\u72B6\u6001\u548C\u9AD8\u4EAE\uFF09\n  const cardBgColor = isHighlighted\n    ? theme.selectionBg // #3C3C3C\n    : '#6A7B8E' // Task Card BG\n\n  // \u5224\u65AD\u662F\u5426\u5DF2\u5B8C\u6210\uFF08completed \u6216 error\uFF09\n  const isCompleted = status === 'completed' || status === 'error'\n\n  return (\n    <Box flexDirection=\"column\" marginY={0}>\n      {/* \u8FD0\u884C\u4E2D\uFF1A\u5C55\u5F00\u663E\u793A\u6240\u6709\u5185\u5BB9 */}\n      {!isCompleted && (\n        <>\n          {/* TaskHeader - \u4EFB\u52A1\u540D\u79F0\u548C Agent \u7C7B\u578B */}\n          <Box flexDirection=\"row\">\n            <Text color={color}>{statusIcon} </Text>\n            <Text bold>{taskName}</Text>\n            <Text color={theme.dimmedText}> \u00B7 {agentType}</Text>\n          </Box>\n\n          {/* TaskProgress - \u72B6\u6001\u548C\u6307\u6807 */}\n          <Box flexDirection=\"row\" marginLeft={2}>\n            <Text color={theme.dimmedText}>\u251C\u2500 </Text>\n            <Text color={statusColor}>{statusText}</Text>\n            <Text color={theme.mutedText}> \u00B7 </Text>\n            <Text color={theme.mutedText}>\n              {metrics.toolUseCount} tool{metrics.toolUseCount !== 1 ? 's' : ''}\n            </Text>\n            <Text color={theme.mutedText}> \u00B7 </Text>\n            <Text color={theme.mutedText}>\n              {formatNumber(tokenCount)} tokens\n            </Text>\n            <Text color={theme.mutedText}> \u00B7 </Text>\n            <Text color={theme.mutedText}>{formatDuration(duration)}</Text>\n          </Box>\n\n          {/* TaskStatusMessage - \u5F53\u524D\u6B63\u5728\u505A\u4EC0\u4E48 */}\n          {latestMessage && (\n            <Box flexDirection=\"row\" marginLeft={2}>\n              <Text color={theme.dimmedText}>\u2514\u2500 </Text>\n              <Text color={theme.dimmedText}>{latestMessage}</Text>\n            </Box>\n          )}\n\n          {/* Output messages - \u76F4\u63A5\u663E\u793A\u4E3A\u5B50\u5C42\u7EA7\uFF0C\u65E0 \"Output Log\" \u6807\u9898 */}\n          {messages.length > 0 &&\n            messages\n              .map((msg, idx) => {\n                // Extract text content based on message type\n                let content = ''\n                let prefix = '\u2190 '\n\n                if (msg.type === 'assistant') {\n                  prefix = '\u2192 '\n                  const blocks = msg.message.content\n                  content = blocks\n                    .filter((block: any) => block.type === 'text')\n                    .map((block: any) => block.text)\n                    .join(' ')\n                } else if (msg.type === 'user') {\n                  const msgParam = msg.message as any\n                  if (typeof msgParam.content === 'string') {\n                    content = msgParam.content\n                  } else if (Array.isArray(msgParam.content)) {\n                    content = msgParam.content\n                      .filter((block: any) => block.type === 'text')\n                      .map((block: any) => block.text)\n                      .join(' ')\n                  }\n                } else if (msg.type === 'progress') {\n                  prefix = '\u2699 '\n                  // Handle both AssistantMessage and StreamingProgressContent\n                  if (\n                    'type' in msg.content &&\n                    msg.content.type === 'streaming'\n                  ) {\n                    // StreamingProgressContent - show stdout/stderr preview\n                    content =\n                      msg.content.stdout ||\n                      msg.content.stderr ||\n                      '(streaming...)'\n                  } else if ('message' in msg.content) {\n                    // AssistantMessage\n                    const blocks = (msg.content as any).message.content\n                    content = blocks\n                      .filter((block: any) => block.type === 'text')\n                      .map((block: any) => block.text)\n                      .join(' ')\n                  }\n                }\n\n                if (!content || content.trim().length === 0) {\n                  return null\n                }\n\n                return (\n                  <Box key={idx} flexDirection=\"row\" marginLeft={4}>\n                    <Text color={theme.dimmedText}>{prefix}</Text>\n                    <Text color={theme.mutedText}>\n                      {content.substring(0, 80)}\n                      {content.length > 80 ? '...' : ''}\n                    </Text>\n                  </Box>\n                )\n              })\n              .filter(Boolean)}\n        </>\n      )}\n\n      {/* \u5DF2\u5B8C\u6210\uFF1A\u6298\u53E0\u6210\u4E00\u884C\uFF0C\u5E26\u5C55\u5F00\u63D0\u793A */}\n      {isCompleted && (\n        <>\n          <Box flexDirection=\"row\">\n            <Text color={color}>{statusIcon} </Text>\n            <Text bold>{taskName}</Text>\n            <Text color={theme.dimmedText}> \u00B7 {agentType}</Text>\n          </Box>\n\n          <Box flexDirection=\"row\" marginLeft={2}>\n            <Text color={theme.dimmedText}>\u2514\u2500 </Text>\n            <Text color={statusColor}>{statusText}</Text>\n            <Text color={theme.mutedText}> \u00B7 </Text>\n            <Text color={theme.mutedText}>\n              {metrics.toolUseCount} tool{metrics.toolUseCount !== 1 ? 's' : ''}\n            </Text>\n            <Text color={theme.mutedText}> \u00B7 </Text>\n            <Text color={theme.mutedText}>\n              {formatNumber(tokenCount)} tokens\n            </Text>\n            <Text color={theme.mutedText}> \u00B7 </Text>\n            <Text color={theme.mutedText}>{formatDuration(duration)}</Text>\n            <Text color={theme.dimmedText}> (Ctrl+O to expand)</Text>\n          </Box>\n\n          {/* \u5C55\u5F00\u65F6\u663E\u793A\u8BE6\u7EC6\u8FC7\u7A0B */}\n          {isExpanded && messages.length > 0 && (\n            <Box flexDirection=\"column\" marginLeft={4} marginTop={1}>\n              {renderTaskOutputLog(subagent, theme, tools, verbose)}\n            </Box>\n          )}\n        </>\n      )}\n\n      {/* TaskActionButtons - \u64CD\u4F5C\u6309\u94AE (\u672A\u6765\u6269\u5C55) */}\n      {debug && (\n        <Box flexDirection=\"row\" marginTop={1}>\n          <Text color={theme.info}>[View Details]</Text>\n          <Text> </Text>\n          {isRunning && <Text color={SYMBOL_COLORS.error}>[Cancel]</Text>}\n        </Box>\n      )}\n    </Box>\n  )\n}\n\n/**\n * \u83B7\u53D6\u72B6\u6001\u56FE\u6807\n */\nfunction getStatusIcon(\n  status: SubagentState['status'],\n  isRunning: boolean,\n): string {\n  if (isRunning) {\n    // \u4F7F\u7528 Spinner \u5B57\u7B26\u8F6E\u8F6C (\u7B80\u5316\u7248)\n    const spinnerFrames = ['\u280B', '\u2819', '\u2839', '\u2838', '\u283C', '\u2834', '\u2826', '\u2827', '\u2807', '\u280F']\n    const frame = Math.floor(Date.now() / 120) % spinnerFrames.length\n    return spinnerFrames[frame] || '\u280B'\n  }\n\n  switch (status) {\n    case 'completed':\n      return '\u2713'\n    case 'error':\n      return '\u2715'\n    case 'queued':\n      return '\u2026'\n    default:\n      return '\u25E6'\n  }\n}\n\n/**\n * \u83B7\u53D6\u72B6\u6001\u6587\u672C\n */\nfunction getStatusText(status: SubagentState['status']): string {\n  switch (status) {\n    case 'initializing':\n      return 'Initializing'\n    case 'queued':\n      return 'Queued'\n    case 'running':\n      return 'Running'\n    case 'completed':\n      return 'Done'\n    case 'error':\n      return 'Error'\n  }\n}\n\n/**\n * \u83B7\u53D6\u72B6\u6001\u989C\u8272 - \u4F7F\u7528 SYMBOL_COLORS \u4E0E Logo \u54C1\u724C\u914D\u8272\u4FDD\u6301\u4E00\u81F4\n */\nfunction getStatusColor(\n  status: SubagentState['status'],\n  theme: ReturnType<typeof getTheme>,\n): string {\n  switch (status) {\n    case 'initializing':\n    case 'queued':\n      return SYMBOL_COLORS.pending // \u7070\u8272 - \u7B49\u5F85\n    case 'running':\n      return SYMBOL_COLORS.running // \u7C89\u7D2B - \u8FDB\u884C\u4E2D\n    case 'completed':\n      return SYMBOL_COLORS.success // \u7D2B\u84DD - \u5B8C\u6210\n    case 'error':\n      return SYMBOL_COLORS.error // \u73CA\u745A\u7EA2 - \u9519\u8BEF\n  }\n}\n\n/**\n * \u83B7\u53D6\u6700\u65B0\u7684\u72B6\u6001\u6D88\u606F\n */\nfunction getLatestMessage(messages: SubagentState['messages']): string | null {\n  if (messages.length === 0) return null\n\n  // \u5012\u5E8F\u67E5\u627E\u6700\u65B0\u7684\u6587\u672C\u6D88\u606F\n  for (let i = messages.length - 1; i >= 0; i--) {\n    const msg = messages[i]\n    if (msg?.type === 'assistant' && msg.message?.content) {\n      for (const content of msg.message.content) {\n        if (content.type === 'text' && content.text.trim()) {\n          // \u622A\u53D6\u524D 60 \u4E2A\u5B57\u7B26\n          const text = content.text.trim()\n          return text.length > 60 ? text.substring(0, 60) + '...' : text\n        }\n        if (content.type === 'tool_use') {\n          return `Using ${content.name}...`\n        }\n      }\n    }\n  }\n\n  return null\n}\n\n/**\n * \u6E32\u67D3\u8BE6\u7EC6\u7684\u8F93\u51FA\u65E5\u5FD7\n */\nfunction renderTaskOutputLog(\n  subagent: SubagentState,\n  theme: ReturnType<typeof getTheme>,\n  tools: Tool[],\n  verbose: boolean,\n): React.ReactNode {\n  const { messages } = subagent\n\n  return (\n    <Box flexDirection=\"column\">\n      {messages.map((msg, idx) => {\n        if (msg.type === 'assistant') {\n          return msg.message.content.map((content, contentIdx) => {\n            if (content.type === 'tool_use') {\n              const tool = tools.find(t => t.name === content.name)\n              const toolName = tool?.userFacingName\n                ? typeof tool.userFacingName === 'function'\n                  ? tool.userFacingName()\n                  : tool.userFacingName\n                : content.name\n\n              return (\n                <Box key={`${idx}-${contentIdx}`} flexDirection=\"row\">\n                  <Text color={theme.info}>\uD83D\uDD27 {toolName}</Text>\n                </Box>\n              )\n            } else if (content.type === 'text' && content.text.trim()) {\n              const lines = content.text.trim().split('\\n')\n              return (\n                <Box key={`${idx}-${contentIdx}`} flexDirection=\"column\">\n                  {lines.map((line, lineIdx) => (\n                    <Text color={theme.secondaryText}>{line}</Text>\n                  ))}\n                </Box>\n              )\n            }\n            return null\n          })\n        } else if (msg.type === 'user') {\n          return msg.message.content.map((content, contentIdx) => {\n            if (content.type === 'tool_result') {\n              const resultContent = Array.isArray(content.content)\n                ? content.content.find(c => c.type === 'text')?.text\n                : typeof content.content === 'string'\n                  ? content.content\n                  : ''\n\n              if (resultContent && resultContent.trim()) {\n                const lines = resultContent.trim().split('\\n')\n                const preview =\n                  lines.length > 5\n                    ? lines.slice(0, 5).join('\\n') + '\\n...'\n                    : resultContent.trim()\n\n                return (\n                  <Box key={`${idx}-${contentIdx}`} flexDirection=\"column\">\n                    {preview.split('\\n').map((line, lineIdx) => (\n                      <Text color={theme.mutedText}>{line}</Text>\n                    ))}\n                  </Box>\n                )\n              }\n            }\n            return null\n          })\n        }\n        return null\n      })}\n    </Box>\n  )\n}\n\n/**\n * \u7D27\u51D1\u7248 TaskCard (\u7528\u4E8E\u7A7A\u95F4\u53D7\u9650\u7684\u573A\u666F)\n */\nexport function CompactTaskCard({\n  subagent,\n}: {\n  subagent: SubagentState\n}): React.ReactNode {\n  const theme = getTheme()\n  const { taskName, status, agentColor } = subagent\n\n  const color = getAgentColor(agentColor, theme)\n  const isRunning =\n    status === 'initializing' || status === 'running' || status === 'queued'\n  const statusIcon = getStatusIcon(status, isRunning)\n\n  return (\n    <Box flexDirection=\"row\">\n      <Text color={color}>\n        {statusIcon} {taskName}\n      </Text>\n      <Text color={theme.dimmedText}> \u00B7 {getStatusText(status)}</Text>\n    </Box>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/TeamMemberPanel.js

@@ -0,0 +1,107 @@
+import { Box, Text } from "ink";
+import React, { useState, useMemo, useCallback } from "react";
+import { TabbedListView } from "./TabbedListView/TabbedListView.js";
+import { useTeamMembers } from "../hooks/useTeamMembers.js";
+import { getTheme } from "../utils/theme.js";
+const STATUS_ICONS = {
+  working: "\u25D0",
+  planning: "\u25D1",
+  idle: "\u25CB",
+  stopped: "\u25CC"
+};
+const STATUS_COLORS = {
+  working: "yellow",
+  planning: "cyan",
+  idle: "green",
+  stopped: "gray"
+};
+function mapStatusToListStatus(status) {
+  switch (status) {
+    case "working":
+      return "running";
+    case "planning":
+      return "running";
+    case "idle":
+      return "enabled";
+    case "stopped":
+      return "disabled";
+    default:
+      return "enabled";
+  }
+}
+function TeamMemberItem({
+  item,
+  isFocused
+}) {
+  const theme = getTheme();
+  const member = item.data;
+  if (!member) return null;
+  const icon = STATUS_ICONS[member.status] || "?";
+  const color = STATUS_COLORS[member.status] || "white";
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", gap: 1 }, /* @__PURE__ */ React.createElement(Text, { color: isFocused ? "cyan" : void 0 }, isFocused ? "\u25B8" : " "), /* @__PURE__ */ React.createElement(Text, { color }, icon), /* @__PURE__ */ React.createElement(Text, { bold: isFocused, color: isFocused ? "white" : void 0 }, member.name), /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, "(", member.agentType, ")"), member.currentTaskId ? /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, "#", member.currentTaskId) : null);
+}
+function TeamMemberPanel({ isVisible, onClose, onFocusAgent }) {
+  const { members, teamName, hasActiveTeam } = useTeamMembers();
+  const [activeTab, setActiveTab] = useState("all");
+  const tabs = useMemo(() => {
+    const working = members.filter(
+      (m) => m.status === "working" || m.status === "planning"
+    ).length;
+    const idle = members.filter((m) => m.status === "idle").length;
+    return [
+      { id: "all", label: "All", badge: members.length },
+      { id: "active", label: "Active", badge: working },
+      { id: "idle", label: "Idle", badge: idle }
+    ];
+  }, [members]);
+  const items = useMemo(() => {
+    const filtered = activeTab === "all" ? members : activeTab === "active" ? members.filter(
+      (m) => m.status === "working" || m.status === "planning"
+    ) : members.filter((m) => m.status === "idle" || m.status === "stopped");
+    return filtered.map((m) => ({
+      id: m.id,
+      label: m.name,
+      description: `${m.agentType} \u2022 ${m.status}`,
+      status: mapStatusToListStatus(m.status),
+      data: m
+    }));
+  }, [members, activeTab]);
+  const isTeamLeadMember = (id) => id === "team-lead" || id.startsWith("team-lead@");
+  const handleSelect = useCallback(
+    (item) => {
+      if (onFocusAgent) {
+        onFocusAgent(isTeamLeadMember(item.id) ? null : item.id);
+      }
+    },
+    [onFocusAgent]
+  );
+  if (!isVisible || !hasActiveTeam) return null;
+  return /* @__PURE__ */ React.createElement(
+    TabbedListView,
+    {
+      title: `Team: ${teamName}`,
+      tabs,
+      activeTab,
+      onTabChange: setActiveTab,
+      items,
+      showTabs: false,
+      searchEnabled: false,
+      onClose,
+      onSelect: handleSelect,
+      isActive: isVisible,
+      footerHint: "\u2191\u2193 Navigate \xB7 Enter Focus \xB7 Esc Close",
+      renderItem: (item, isFocused, isSelected) => /* @__PURE__ */ React.createElement(
+        TeamMemberItem,
+        {
+          item,
+          isFocused,
+          isSelected: isSelected ?? false
+        }
+      )
+    }
+  );
+}
+export {
+  TeamMemberPanel
+};
+//# sourceMappingURL=TeamMemberPanel.js.map

package/dist/components/TeamMemberPanel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/TeamMemberPanel.tsx"],
+  "sourcesContent": ["/**\n * TeamMemberPanel Component\n *\n * Displays active team members during an Agent Teams session.\n * Reuses the TabbedListView component for consistent UI.\n * Toggled with Shift+Up keybinding.\n *\n * Selecting a member (Enter) delegates to onFocusAgent callback\n * which switches the REPL to full-screen agent focus mode.\n */\n\nimport { Box, Text } from 'ink'\nimport React, { useState, useMemo, useCallback } from 'react'\nimport { TabbedListView } from './TabbedListView/TabbedListView'\nimport type { ListItem, TabDefinition } from './TabbedListView/types'\nimport { useTeamMembers, type TeamMemberInfo } from '@hooks/useTeamMembers'\nimport { getTheme } from '@utils/theme'\nimport type { TeammateStatus } from '@minto-types/agentTeams'\n\nconst STATUS_ICONS: Record<TeammateStatus, string> = {\n  working: '\\u25D0',\n  planning: '\\u25D1',\n  idle: '\\u25CB',\n  stopped: '\\u25CC',\n}\n\nconst STATUS_COLORS: Record<TeammateStatus, string> = {\n  working: 'yellow',\n  planning: 'cyan',\n  idle: 'green',\n  stopped: 'gray',\n}\n\nfunction mapStatusToListStatus(status: TeammateStatus): ListItem['status'] {\n  switch (status) {\n    case 'working':\n      return 'running'\n    case 'planning':\n      return 'running'\n    case 'idle':\n      return 'enabled'\n    case 'stopped':\n      return 'disabled'\n    default:\n      return 'enabled'\n  }\n}\n\nfunction TeamMemberItem({\n  item,\n  isFocused,\n}: {\n  item: ListItem\n  isFocused: boolean\n  isSelected: boolean\n}): React.ReactNode {\n  const theme = getTheme()\n  const member = item.data as TeamMemberInfo | undefined\n  if (!member) return null\n\n  const icon = STATUS_ICONS[member.status] || '?'\n  const color = STATUS_COLORS[member.status] || 'white'\n\n  return (\n    <Box flexDirection=\"row\" gap={1}>\n      {/* Cursor indicator for focused item */}\n      <Text color={isFocused ? 'cyan' : undefined}>\n        {isFocused ? '\u25B8' : ' '}\n      </Text>\n      <Text color={color}>{icon}</Text>\n      <Text bold={isFocused} color={isFocused ? 'white' : undefined}>\n        {member.name}\n      </Text>\n      <Text color={theme.secondaryText}>({member.agentType})</Text>\n      {member.currentTaskId ? (\n        <Text color={theme.secondaryText}>#{member.currentTaskId}</Text>\n      ) : null}\n    </Box>\n  )\n}\n\ntype Props = {\n  isVisible: boolean\n  onClose: () => void\n  onFocusAgent?: (agentId: string | null) => void\n}\n\nexport function TeamMemberPanel({ isVisible, onClose, onFocusAgent }: Props) {\n  const { members, teamName, hasActiveTeam } = useTeamMembers()\n  const [activeTab, setActiveTab] = useState('all')\n\n  const tabs: TabDefinition[] = useMemo(() => {\n    const working = members.filter(\n      m => m.status === 'working' || m.status === 'planning',\n    ).length\n    const idle = members.filter(m => m.status === 'idle').length\n    return [\n      { id: 'all', label: 'All', badge: members.length },\n      { id: 'active', label: 'Active', badge: working },\n      { id: 'idle', label: 'Idle', badge: idle },\n    ]\n  }, [members])\n\n  const items: ListItem[] = useMemo(() => {\n    const filtered =\n      activeTab === 'all'\n        ? members\n        : activeTab === 'active'\n          ? members.filter(\n              m => m.status === 'working' || m.status === 'planning',\n            )\n          : members.filter(m => m.status === 'idle' || m.status === 'stopped')\n\n    return filtered.map(m => ({\n      id: m.id,\n      label: m.name,\n      description: `${m.agentType} \\u2022 ${m.status}`,\n      status: mapStatusToListStatus(m.status),\n      data: m,\n    }))\n  }, [members, activeTab])\n\n  // Detect team-lead member by id pattern (registered as \"team-lead@<teamName>\")\n  const isTeamLeadMember = (id: string) =>\n    id === 'team-lead' || id.startsWith('team-lead@')\n\n  const handleSelect = useCallback(\n    (item: ListItem) => {\n      if (onFocusAgent) {\n        // Team-lead maps to null (return to main view), others pass the id\n        onFocusAgent(isTeamLeadMember(item.id) ? null : item.id)\n      }\n    },\n    [onFocusAgent],\n  )\n\n  if (!isVisible || !hasActiveTeam) return null\n\n  return (\n    <TabbedListView\n      title={`Team: ${teamName}`}\n      tabs={tabs}\n      activeTab={activeTab}\n      onTabChange={setActiveTab}\n      items={items}\n      showTabs={false}\n      searchEnabled={false}\n      onClose={onClose}\n      onSelect={handleSelect}\n      isActive={isVisible}\n      footerHint=\"\u2191\u2193 Navigate \u00B7 Enter Focus \u00B7 Esc Close\"\n      renderItem={(item, isFocused, isSelected) => (\n        <TeamMemberItem\n          item={item}\n          isFocused={isFocused}\n          isSelected={isSelected ?? false}\n        />\n      )}\n    />\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/ThinkingSelector.js

@@ -0,0 +1,84 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import figures from "figures";
+import { BRAND_GRADIENT, SEMANTIC_COLORS } from "../constants/colors.js";
+import { getGlobalConfig, saveGlobalConfig } from "../utils/config.js";
+import { t } from "../i18n/index.js";
+const OPTIONS = [
+  {
+    id: "enabled",
+    label: t("thinking.enabled"),
+    description: t("thinking.enabledDesc")
+  },
+  {
+    id: "disabled",
+    label: t("thinking.disabled"),
+    description: t("thinking.disabledDesc")
+  }
+];
+function ThinkingSelector({ onClose }) {
+  const config = getGlobalConfig();
+  const currentEnabled = !!config.thinking;
+  const initialIndex = currentEnabled ? 0 : 1;
+  const [selectedIndex, setSelectedIndex] = useState(initialIndex);
+  useInput((input, key) => {
+    if (key.escape) {
+      onClose();
+      return;
+    }
+    if (key.downArrow) {
+      setSelectedIndex((prev) => Math.min(prev + 1, OPTIONS.length - 1));
+      return;
+    }
+    if (key.upArrow) {
+      setSelectedIndex((prev) => Math.max(prev - 1, 0));
+      return;
+    }
+    const num = Number(input);
+    if (num >= 1 && num <= OPTIONS.length) {
+      const option = OPTIONS[num - 1];
+      const newThinking = option.id === "enabled";
+      saveGlobalConfig({ ...getGlobalConfig(), thinking: newThinking });
+      onClose();
+      return;
+    }
+    if (key.return) {
+      const selected = OPTIONS[selectedIndex];
+      const newThinking = selected.id === "enabled";
+      saveGlobalConfig({ ...getGlobalConfig(), thinking: newThinking });
+      onClose();
+      return;
+    }
+  });
+  return /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: BRAND_GRADIENT.START,
+      paddingX: 1,
+      paddingY: 1
+    },
+    /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, { bold: true, color: BRAND_GRADIENT.START }, t("thinking.title")), /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.secondary }, t("thinking.subtitle"))),
+    OPTIONS.map((option, index) => {
+      const isSelected = index === selectedIndex;
+      const isCurrent = option.id === "enabled" && currentEnabled || option.id === "disabled" && !currentEnabled;
+      return /* @__PURE__ */ React.createElement(Box, { key: option.id }, /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          color: isSelected ? BRAND_GRADIENT.START : void 0,
+          bold: isSelected
+        },
+        isSelected ? `${figures.pointer} ` : "  ",
+        index + 1,
+        ". ",
+        option.label
+      ), isCurrent && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.success }, " \u2714"), /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, " ", option.description));
+    }),
+    /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, t("rewind.enterToContinue"), " \xB7 ", t("rewind.escToExit")))
+  );
+}
+export {
+  ThinkingSelector
+};
+//# sourceMappingURL=ThinkingSelector.js.map

package/dist/components/ThinkingSelector.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/ThinkingSelector.tsx"],
+  "sourcesContent": ["/**\n * ThinkingSelector \u2014 Toggle thinking mode overlay\n *\n * Matches RewindPanel visual style (round border, brand colors).\n * Activated via Option+T (\u2325T).\n */\n\nimport React, { useState } from 'react'\nimport { Box, Text, useInput } from 'ink'\nimport figures from 'figures'\nimport { BRAND_GRADIENT, SEMANTIC_COLORS } from '@constants/colors'\nimport { getGlobalConfig, saveGlobalConfig } from '@utils/config'\nimport { t } from '@i18n'\n\ninterface Props {\n  onClose: () => void\n}\n\ninterface ThinkingOption {\n  id: 'enabled' | 'disabled'\n  label: string\n  description: string\n}\n\nconst OPTIONS: ThinkingOption[] = [\n  {\n    id: 'enabled',\n    label: t('thinking.enabled'),\n    description: t('thinking.enabledDesc'),\n  },\n  {\n    id: 'disabled',\n    label: t('thinking.disabled'),\n    description: t('thinking.disabledDesc'),\n  },\n]\n\nexport function ThinkingSelector({ onClose }: Props): React.ReactNode {\n  const config = getGlobalConfig()\n  const currentEnabled = !!config.thinking\n  const initialIndex = currentEnabled ? 0 : 1\n  const [selectedIndex, setSelectedIndex] = useState(initialIndex)\n\n  useInput((input, key) => {\n    if (key.escape) {\n      onClose()\n      return\n    }\n\n    if (key.downArrow) {\n      setSelectedIndex(prev => Math.min(prev + 1, OPTIONS.length - 1))\n      return\n    }\n\n    if (key.upArrow) {\n      setSelectedIndex(prev => Math.max(prev - 1, 0))\n      return\n    }\n\n    // Number keys 1-2\n    const num = Number(input)\n    if (num >= 1 && num <= OPTIONS.length) {\n      const option = OPTIONS[num - 1]\n      const newThinking = option.id === 'enabled'\n      saveGlobalConfig({ ...getGlobalConfig(), thinking: newThinking })\n      onClose()\n      return\n    }\n\n    if (key.return) {\n      const selected = OPTIONS[selectedIndex]\n      const newThinking = selected.id === 'enabled'\n      saveGlobalConfig({ ...getGlobalConfig(), thinking: newThinking })\n      onClose()\n      return\n    }\n  })\n\n  return (\n    <Box\n      flexDirection=\"column\"\n      borderStyle=\"round\"\n      borderColor={BRAND_GRADIENT.START}\n      paddingX={1}\n      paddingY={1}\n    >\n      {/* Header */}\n      <Box flexDirection=\"column\" marginBottom={1}>\n        <Text bold color={BRAND_GRADIENT.START}>\n          {t('thinking.title')}\n        </Text>\n        <Text color={SEMANTIC_COLORS.secondary}>{t('thinking.subtitle')}</Text>\n      </Box>\n\n      {/* Options */}\n      {OPTIONS.map((option, index) => {\n        const isSelected = index === selectedIndex\n        const isCurrent =\n          (option.id === 'enabled' && currentEnabled) ||\n          (option.id === 'disabled' && !currentEnabled)\n\n        return (\n          <Box key={option.id}>\n            <Text\n              color={isSelected ? BRAND_GRADIENT.START : undefined}\n              bold={isSelected}\n            >\n              {isSelected ? `${figures.pointer} ` : '  '}\n              {index + 1}. {option.label}\n            </Text>\n            {isCurrent && <Text color={SEMANTIC_COLORS.success}> \u2714</Text>}\n            <Text color={SEMANTIC_COLORS.dim}> {option.description}</Text>\n          </Box>\n        )\n      })}\n\n      {/* Footer */}\n      <Box marginTop={1}>\n        <Text color={SEMANTIC_COLORS.dim}>\n          {t('rewind.enterToContinue')} \u00B7 {t('rewind.escToExit')}\n        </Text>\n      </Box>\n    </Box>\n  )\n}\n"],
+  "mappings": "AAOA,OAAO,SAAS,gBAAgB;AAChC,SAAS,KAAK,MAAM,gBAAgB;AACpC,OAAO,aAAa;AACpB,SAAS,gBAAgB,uBAAuB;AAChD,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,SAAS;AAYlB,MAAM,UAA4B;AAAA,EAChC;AAAA,IACE,IAAI;AAAA,IACJ,OAAO,EAAE,kBAAkB;AAAA,IAC3B,aAAa,EAAE,sBAAsB;AAAA,EACvC;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO,EAAE,mBAAmB;AAAA,IAC5B,aAAa,EAAE,uBAAuB;AAAA,EACxC;AACF;AAEO,SAAS,iBAAiB,EAAE,QAAQ,GAA2B;AACpE,QAAM,SAAS,gBAAgB;AAC/B,QAAM,iBAAiB,CAAC,CAAC,OAAO;AAChC,QAAM,eAAe,iBAAiB,IAAI;AAC1C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,YAAY;AAE/D,WAAS,CAAC,OAAO,QAAQ;AACvB,QAAI,IAAI,QAAQ;AACd,cAAQ;AACR;AAAA,IACF;AAEA,QAAI,IAAI,WAAW;AACjB,uBAAiB,UAAQ,KAAK,IAAI,OAAO,GAAG,QAAQ,SAAS,CAAC,CAAC;AAC/D;AAAA,IACF;AAEA,QAAI,IAAI,SAAS;AACf,uBAAiB,UAAQ,KAAK,IAAI,OAAO,GAAG,CAAC,CAAC;AAC9C;AAAA,IACF;AAGA,UAAM,MAAM,OAAO,KAAK;AACxB,QAAI,OAAO,KAAK,OAAO,QAAQ,QAAQ;AACrC,YAAM,SAAS,QAAQ,MAAM,CAAC;AAC9B,YAAM,cAAc,OAAO,OAAO;AAClC,uBAAiB,EAAE,GAAG,gBAAgB,GAAG,UAAU,YAAY,CAAC;AAChE,cAAQ;AACR;AAAA,IACF;AAEA,QAAI,IAAI,QAAQ;AACd,YAAM,WAAW,QAAQ,aAAa;AACtC,YAAM,cAAc,SAAS,OAAO;AACpC,uBAAiB,EAAE,GAAG,gBAAgB,GAAG,UAAU,YAAY,CAAC;AAChE,cAAQ;AACR;AAAA,IACF;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAc;AAAA,MACd,aAAY;AAAA,MACZ,aAAa,eAAe;AAAA,MAC5B,UAAU;AAAA,MACV,UAAU;AAAA;AAAA,IAGV,oCAAC,OAAI,eAAc,UAAS,cAAc,KACxC,oCAAC,QAAK,MAAI,MAAC,OAAO,eAAe,SAC9B,EAAE,gBAAgB,CACrB,GACA,oCAAC,QAAK,OAAO,gBAAgB,aAAY,EAAE,mBAAmB,CAAE,CAClE;AAAA,IAGC,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,YAAM,aAAa,UAAU;AAC7B,YAAM,YACH,OAAO,OAAO,aAAa,kBAC3B,OAAO,OAAO,cAAc,CAAC;AAEhC,aACE,oCAAC,OAAI,KAAK,OAAO,MACf;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,aAAa,eAAe,QAAQ;AAAA,UAC3C,MAAM;AAAA;AAAA,QAEL,aAAa,GAAG,QAAQ,OAAO,MAAM;AAAA,QACrC,QAAQ;AAAA,QAAE;AAAA,QAAG,OAAO;AAAA,MACvB,GACC,aAAa,oCAAC,QAAK,OAAO,gBAAgB,WAAS,SAAE,GACtD,oCAAC,QAAK,OAAO,gBAAgB,OAAK,KAAE,OAAO,WAAY,CACzD;AAAA,IAEJ,CAAC;AAAA,IAGD,oCAAC,OAAI,WAAW,KACd,oCAAC,QAAK,OAAO,gBAAgB,OAC1B,EAAE,wBAAwB,GAAE,UAAI,EAAE,kBAAkB,CACvD,CACF;AAAA,EACF;AAEJ;",
+  "names": []
+}

package/dist/components/TitledDivider.js

@@ -0,0 +1,26 @@
+import { Box, Text } from "ink";
+import * as React from "react";
+import { useTerminalSize } from "../hooks/useTerminalSize.js";
+import { SEMANTIC_COLORS } from "../constants/colors.js";
+function TitledDivider({
+  title,
+  dividerChar = "\u2500",
+  titleColor = SEMANTIC_COLORS.secondary,
+  dividerColor = SEMANTIC_COLORS.dim,
+  width
+}) {
+  const { columns } = useTerminalSize();
+  const effectiveWidth = width ?? columns;
+  if (!title) {
+    return /* @__PURE__ */ React.createElement(Text, { color: dividerColor }, dividerChar.repeat(Math.max(0, effectiveWidth)));
+  }
+  const titleWithPadding = ` ${title} `;
+  const remaining = effectiveWidth - titleWithPadding.length;
+  const leftLen = Math.floor(remaining / 2);
+  const rightLen = remaining - leftLen;
+  return /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: dividerColor }, dividerChar.repeat(Math.max(0, leftLen))), /* @__PURE__ */ React.createElement(Text, { color: titleColor }, titleWithPadding), /* @__PURE__ */ React.createElement(Text, { color: dividerColor }, dividerChar.repeat(Math.max(0, rightLen))));
+}
+export {
+  TitledDivider
+};
+//# sourceMappingURL=TitledDivider.js.map

package/dist/components/TitledDivider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/TitledDivider.tsx"],
+  "sourcesContent": ["/**\n * TitledDivider Component\n *\n * Renders a horizontal divider line with an optional centered title.\n * Used for transcript mode indicators (Ctrl+E show/hide previous messages).\n *\n * Example output:\n *   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 ctrl+e to show 10 previous messages \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n */\n\nimport { Box, Text } from 'ink'\nimport * as React from 'react'\nimport { useTerminalSize } from '@hooks/useTerminalSize'\nimport { SEMANTIC_COLORS } from '@constants/colors'\n\ninterface TitledDividerProps {\n  title?: string\n  dividerChar?: string\n  titleColor?: string\n  dividerColor?: string\n  width?: number\n}\n\nexport function TitledDivider({\n  title,\n  dividerChar = '\u2500',\n  titleColor = SEMANTIC_COLORS.secondary,\n  dividerColor = SEMANTIC_COLORS.dim,\n  width,\n}: TitledDividerProps): React.ReactNode {\n  const { columns } = useTerminalSize()\n  const effectiveWidth = width ?? columns\n\n  if (!title) {\n    return (\n      <Text color={dividerColor}>\n        {dividerChar.repeat(Math.max(0, effectiveWidth))}\n      </Text>\n    )\n  }\n\n  const titleWithPadding = ` ${title} `\n  const remaining = effectiveWidth - titleWithPadding.length\n  const leftLen = Math.floor(remaining / 2)\n  const rightLen = remaining - leftLen\n\n  return (\n    <Box>\n      <Text color={dividerColor}>\n        {dividerChar.repeat(Math.max(0, leftLen))}\n      </Text>\n      <Text color={titleColor}>{titleWithPadding}</Text>\n      <Text color={dividerColor}>\n        {dividerChar.repeat(Math.max(0, rightLen))}\n      </Text>\n    </Box>\n  )\n}\n"],
+  "mappings": "AAUA,SAAS,KAAK,YAAY;AAC1B,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAUzB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,cAAc;AAAA,EACd,aAAa,gBAAgB;AAAA,EAC7B,eAAe,gBAAgB;AAAA,EAC/B;AACF,GAAwC;AACtC,QAAM,EAAE,QAAQ,IAAI,gBAAgB;AACpC,QAAM,iBAAiB,SAAS;AAEhC,MAAI,CAAC,OAAO;AACV,WACE,oCAAC,QAAK,OAAO,gBACV,YAAY,OAAO,KAAK,IAAI,GAAG,cAAc,CAAC,CACjD;AAAA,EAEJ;AAEA,QAAM,mBAAmB,IAAI,KAAK;AAClC,QAAM,YAAY,iBAAiB,iBAAiB;AACpD,QAAM,UAAU,KAAK,MAAM,YAAY,CAAC;AACxC,QAAM,WAAW,YAAY;AAE7B,SACE,oCAAC,WACC,oCAAC,QAAK,OAAO,gBACV,YAAY,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,CAC1C,GACA,oCAAC,QAAK,OAAO,cAAa,gBAAiB,GAC3C,oCAAC,QAAK,OAAO,gBACV,YAAY,OAAO,KAAK,IAAI,GAAG,QAAQ,CAAC,CAC3C,CACF;AAEJ;",
+  "names": []
+}

package/dist/components/TodoPanel.js

@@ -2,9 +2,9 @@ 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, formatTokenUsage } from "../utils/format.js";
+import { getTokenDisplay } from "../utils/tokenProgress.js";
 import { sample } from "lodash-es";
-import { getMainStreamingState } from "../utils/streamingState.js";
+import { getMainStreamingState, getStreamingState } from "../utils/streamingState.js";
 import { getSessionState } from "../utils/sessionState.js";
 import { useUnifiedAnimation } from "../utils/animationManager.js";
 import {
@@ -39,17 +39,30 @@ const SpinnerLine = memo(function SpinnerLine2({
   currentTaskActiveForm,
   todos,
   shouldShowTodos,
-  fallbackMessage
+  fallbackMessage,
+  focusedAgentId
 }) {
   const theme = getTheme();
-  const startTimeRef = useRef(Date.now());
-  const { spinnerFrame, elapsedTime } = useUnifiedAnimation({
+  const fallbackStartRef = useRef(Date.now());
+  const tickRef = useRef(0);
+  const { spinnerFrame, dataTick } = useUnifiedAnimation({
     enabled: true,
-    startTime: startTimeRef.current,
+    // startTime is updated below after reading streaming state
+    startTime: fallbackStartRef.current,
     spinnerFrameCount: SHIMMER_COLORS.length,
     componentId: "todo-panel-spinner"
   });
-  const streamState = useMemo(() => getMainStreamingState(), [spinnerFrame]);
+  tickRef.current = spinnerFrame;
+  const latestStreamState = useMemo(
+    () => focusedAgentId ? getStreamingState(focusedAgentId) : getMainStreamingState(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [focusedAgentId, dataTick]
+  );
+  const startTime = latestStreamState.turnStartedAt ?? fallbackStartRef.current;
+  const correctedElapsed = Math.max(
+    0,
+    Math.floor((Date.now() - startTime) / 1e3)
+  );
   const getCurrentTaskDisplay = () => {
     if (currentTaskActiveForm) {
       return currentTaskActiveForm;
@@ -58,9 +71,9 @@ const SpinnerLine = memo(function SpinnerLine2({
     if (inProgressTodo?.activeForm) {
       return inProgressTodo.activeForm;
     }
-    switch (streamState.phase) {
+    switch (latestStreamState.phase) {
       case "tool_use":
-        return streamState.toolName ? `Using ${streamState.toolName}` : "Executing tool";
+        return latestStreamState.toolName ? `Using ${latestStreamState.toolName}` : "Executing tool";
       case "generating":
         return "Generating response";
       case "waiting":
@@ -78,23 +91,9 @@ const SpinnerLine = memo(function SpinnerLine2({
   };
   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 { formatted: tokenUsage } = getTokenDisplay(focusedAgentId);
+  const thinkingDuration = latestStreamState.thinkingDurationMs ? Math.floor(latestStreamState.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"), " to cancel \xB7", " ", /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.secondary }, formatTime(correctedElapsed)), tokenUsage && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.secondary }, " \xB7 ", tokenUsage), latestStreamState.phase === "thinking" && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.secondary }, " \xB7 thinking"), 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",
@@ -112,7 +111,8 @@ const TodoPanel = memo(function TodoPanel2({
   currentTaskActiveForm,
   elapsedTime: initialElapsedTime = 0,
   isLoading = true,
-  showTodoList = true
+  showTodoList = true,
+  focusedAgentId
 }) {
   const theme = getTheme();
   const fallbackMessage = useRef(sample(SPINNER_MESSAGES) || "Thinking");
@@ -123,7 +123,7 @@ const TodoPanel = memo(function TodoPanel2({
     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 ? t("ui.todo.tasksRemaining", {
         count: todos.filter((todo) => todo.status !== "completed").length
-      }) : t("ui.todo.allDone"))), /* @__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(
+      }) : t("ui.todo.allDone"))), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, todos.map((todo, idx) => /* @__PURE__ */ React.createElement(React.Fragment, { key: todo.id }, /* @__PURE__ */ React.createElement(
         TodoItemClaudeStyle,
         {
           todo,
@@ -140,12 +140,13 @@ const TodoPanel = memo(function TodoPanel2({
       currentTaskActiveForm,
       todos,
       shouldShowTodos,
-      fallbackMessage: fallbackMessage.current
+      fallbackMessage: fallbackMessage.current,
+      focusedAgentId
     }
   ), 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 }))));
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, todos.map((todo, idx) => /* @__PURE__ */ React.createElement(React.Fragment, { key: todo.id }, /* @__PURE__ */ React.createElement(TodoItemClaudeStyle, { todo, theme, isFirst: idx === 0 }))));
 });
 const TodoItemClaudeStyle = memo(function TodoItemClaudeStyle2({
   todo,