@within-7/minto 0.4.0 → 0.4.2

package/dist/components/RewindPanel.js

@@ -0,0 +1,272 @@
+import { Box, Text, useInput } from "ink";
+import * as React from "react";
+import { useMemo, useState } from "react";
+import figures from "figures";
+import { basename } from "path";
+import { BRAND_GRADIENT, SEMANTIC_COLORS } from "../constants/colors.js";
+import { t } from "../i18n/index.js";
+const FILE_TOOLS = /* @__PURE__ */ new Set(["Write", "Edit", "MultiEdit", "NotebookEdit"]);
+function extractFileChangesForTurn(messages, fromIndex, toIndex) {
+  const files = /* @__PURE__ */ new Set();
+  for (let i = fromIndex; i < toIndex; i++) {
+    const msg = messages[i];
+    if (!msg || msg.type !== "assistant") continue;
+    const content = msg.message.content;
+    if (!Array.isArray(content)) continue;
+    for (const block of content) {
+      if (block.type !== "tool_use") continue;
+      if (!FILE_TOOLS.has(block.name)) continue;
+      const input = block.input;
+      const filePath = input?.file_path ?? input?.notebook_path;
+      if (typeof filePath === "string") {
+        files.add(basename(filePath));
+      }
+    }
+  }
+  return Array.from(files);
+}
+function stripXmlForDisplay(raw) {
+  if (raw.includes("<command-name>") || raw.includes("<command-message>")) {
+    const cmdMatch = raw.match(/<command-message>([\s\S]*?)<\/command-message>/);
+    const argsMatch = raw.match(/<command-args>([\s\S]*?)<\/command-args>/);
+    const cmd = cmdMatch?.[1]?.trim() ?? "";
+    const args = argsMatch?.[1]?.trim() ?? "";
+    return cmd ? `/${cmd}${args ? " " + args : ""}` : "";
+  }
+  return raw.replace(/<system-reminder>[\s\S]*?<\/system-reminder>\s*/g, "").replace(/<local-command-caveat>[\s\S]*?<\/local-command-caveat>\s*/g, "").replace(/<local-command-stdout>[\s\S]*?<\/local-command-stdout>\s*/g, "").replace(/<task-notification>[\s\S]*?<\/task-notification>\s*/g, "").replace(/<user-guidance>\n?([\s\S]*?)\n?<\/user-guidance>/g, "$1").replace(/<team-message\s+[^>]*>([\s\S]*?)<\/team-message>/g, "").replace(/<bash-input>[\s\S]*?<\/bash-input>\s*/g, "").replace(/<koding-input>[\s\S]*?<\/koding-input>\s*/g, "").replace(
+    /<available-deferred-tools>[\s\S]*?<\/available-deferred-tools>\s*/g,
+    ""
+  ).replace(/<command-name>[\s\S]*?<\/command-name>\s*/g, "").replace(/<command-message>[\s\S]*?<\/command-message>\s*/g, "").replace(/<command-args>[\s\S]*?<\/command-args>\s*/g, "").trim();
+}
+function getUserText(msg) {
+  const content = msg.message.content;
+  if (typeof content === "string") return stripXmlForDisplay(content);
+  if (Array.isArray(content)) {
+    for (const block of content) {
+      if (block.type === "text") return stripXmlForDisplay(block.text);
+    }
+  }
+  return "";
+}
+function getRewindPoints(messages) {
+  const points = [];
+  const userIndices = [];
+  for (let i = 0; i < messages.length; i++) {
+    const msg = messages[i];
+    if (msg?.type === "user" && !(Array.isArray(msg.message.content) && msg.message.content[0]?.type === "tool_result")) {
+      userIndices.push(i);
+    }
+  }
+  for (let i = 0; i < userIndices.length; i++) {
+    const idx = userIndices[i];
+    const msg = messages[idx];
+    const nextIdx = i + 1 < userIndices.length ? userIndices[i + 1] : messages.length;
+    points.push({
+      userMessage: msg,
+      messageIndex: idx,
+      userText: getUserText(msg),
+      changedFiles: extractFileChangesForTurn(messages, idx, nextIdx)
+    });
+  }
+  return points;
+}
+const MAX_VISIBLE = 8;
+const MAX_TEXT_LENGTH = 120;
+function RewindPanel({
+  messages,
+  onAction,
+  onEscape
+}) {
+  const rewindPoints = useMemo(() => getRewindPoints(messages), [messages]);
+  const [phase, setPhase] = useState(
+    "message_select"
+  );
+  const totalItems = rewindPoints.length + 1;
+  const [selectedIndex, setSelectedIndex] = useState(rewindPoints.length);
+  const [actionIndex, setActionIndex] = useState(0);
+  const [selectedPoint, setSelectedPoint] = useState(null);
+  useInput((input, key) => {
+    if (phase === "message_select") {
+      if (key.escape) {
+        onEscape();
+        return;
+      }
+      if (key.upArrow) {
+        setSelectedIndex((prev) => Math.max(0, prev - 1));
+        return;
+      }
+      if (key.downArrow) {
+        setSelectedIndex((prev) => Math.min(totalItems - 1, prev + 1));
+        return;
+      }
+      if (key.return) {
+        if (selectedIndex >= rewindPoints.length) {
+          onEscape();
+          return;
+        }
+        const point = rewindPoints[selectedIndex];
+        if (point) {
+          setSelectedPoint(point);
+          setPhase("action_select");
+          setActionIndex(0);
+        }
+        return;
+      }
+    } else if (phase === "action_select") {
+      if (key.escape) {
+        setPhase("message_select");
+        return;
+      }
+      if (key.upArrow) {
+        setActionIndex((prev) => Math.max(0, prev - 1));
+        return;
+      }
+      if (key.downArrow) {
+        setActionIndex((prev) => Math.min(4, prev + 1));
+        return;
+      }
+      if (key.return && selectedPoint) {
+        const actions = [
+          "restore_code_and_conversation",
+          "restore_conversation",
+          "restore_code",
+          "summarize_from_here",
+          "never_mind"
+        ];
+        onAction(actions[actionIndex], selectedPoint);
+        return;
+      }
+      const num = Number(input);
+      if (num >= 1 && num <= 5 && selectedPoint) {
+        const actions = [
+          "restore_code_and_conversation",
+          "restore_conversation",
+          "restore_code",
+          "summarize_from_here",
+          "never_mind"
+        ];
+        onAction(actions[num - 1], selectedPoint);
+        return;
+      }
+    }
+  });
+  if (phase === "message_select") {
+    const firstVisible = Math.max(
+      0,
+      Math.min(
+        selectedIndex - Math.floor(MAX_VISIBLE / 2),
+        totalItems - MAX_VISIBLE
+      )
+    );
+    const lastVisible = Math.min(totalItems, firstVisible + MAX_VISIBLE);
+    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("rewind.title")), /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.secondary }, t("rewind.selectMessage"))),
+      Array.from({ length: lastVisible - firstVisible }, (_, i) => {
+        const itemIndex = firstVisible + i;
+        const isSelected = itemIndex === selectedIndex;
+        const isCurrent = itemIndex >= rewindPoints.length;
+        if (isCurrent) {
+          return /* @__PURE__ */ React.createElement(Box, { key: "current", marginBottom: 0 }, /* @__PURE__ */ React.createElement(
+            Text,
+            {
+              color: isSelected ? BRAND_GRADIENT.START : SEMANTIC_COLORS.dim,
+              bold: isSelected
+            },
+            isSelected ? `${figures.pointer} ` : "  "
+          ), /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim, italic: true }, t("dialog.current")));
+        }
+        const point = rewindPoints[itemIndex];
+        if (!point) return null;
+        const displayText = point.userText.replace(/\n/g, " ").slice(0, MAX_TEXT_LENGTH);
+        const truncated = point.userText.length > MAX_TEXT_LENGTH ? displayText + "\u2026" : displayText;
+        return /* @__PURE__ */ React.createElement(
+          Box,
+          {
+            key: point.userMessage.uuid,
+            flexDirection: "column",
+            marginBottom: 0
+          },
+          /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
+            Text,
+            {
+              color: isSelected ? BRAND_GRADIENT.START : void 0,
+              bold: isSelected
+            },
+            isSelected ? `${figures.pointer} ` : "  "
+          ), /* @__PURE__ */ React.createElement(
+            Text,
+            {
+              color: isSelected ? BRAND_GRADIENT.START : void 0,
+              wrap: "truncate"
+            },
+            truncated || t("dialog.emptyMessage")
+          )),
+          /* @__PURE__ */ React.createElement(Box, { marginLeft: 3 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, point.changedFiles.length === 0 ? t("rewind.noCodeChanges") : point.changedFiles.join(", ")))
+        );
+      }),
+      firstVisible > 0 && /* @__PURE__ */ React.createElement(Box, { marginLeft: 2 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, figures.arrowUp, " ", t("rewind.moreAbove"))),
+      lastVisible < totalItems && /* @__PURE__ */ React.createElement(Box, { marginLeft: 2 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, figures.arrowDown, " ", t("rewind.moreBelow"))),
+      /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, t("rewind.enterToContinue"), " \xB7 ", t("rewind.escToExit")))
+    );
+  }
+  if (!selectedPoint) return null;
+  const confirmText = selectedPoint.userText.replace(/\n/g, " ").slice(0, 100);
+  const confirmDisplay = selectedPoint.userText.length > 100 ? confirmText + "\u2026" : confirmText;
+  const actionLabels = [
+    t("rewind.action.restoreCodeAndConversation"),
+    t("rewind.action.restoreConversation"),
+    t("rewind.action.restoreCode"),
+    t("rewind.action.summarizeFromHere"),
+    t("rewind.action.neverMind")
+  ];
+  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("rewind.title")), /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.secondary }, t("rewind.confirmRestore"))),
+    /* @__PURE__ */ React.createElement(Box, { marginBottom: 1, marginLeft: 1 }, /* @__PURE__ */ React.createElement(
+      Box,
+      {
+        borderStyle: "single",
+        borderColor: SEMANTIC_COLORS.dim,
+        borderLeft: true,
+        borderRight: false,
+        borderTop: false,
+        borderBottom: false,
+        paddingLeft: 1
+      },
+      /* @__PURE__ */ React.createElement(Text, null, confirmDisplay)
+    )),
+    /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginBottom: 1, marginLeft: 1 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.secondary }, t("rewind.conversationWillBeForked")), selectedPoint.changedFiles.length > 0 ? /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.secondary }, t("rewind.codeWillBeRestored"), " ", selectedPoint.changedFiles.join(", "), ".") : /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, t("rewind.noCodeChanges"))),
+    actionLabels.map((label, i) => /* @__PURE__ */ React.createElement(Box, { key: i }, /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        color: i === actionIndex ? BRAND_GRADIENT.START : void 0,
+        bold: i === actionIndex
+      },
+      i === actionIndex ? `${figures.pointer} ` : "  ",
+      i + 1,
+      ". ",
+      label
+    ))),
+    /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.error }, t("rewind.bashWarning")))
+  );
+}
+export {
+  RewindPanel,
+  getRewindPoints
+};
+//# sourceMappingURL=RewindPanel.js.map

package/dist/components/RewindPanel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/RewindPanel.tsx"],
+  "sourcesContent": ["/**\n * RewindPanel \u2014 CC-compatible Rewind/Checkpoint UI\n *\n * Two-phase overlay:\n *   1. Message Select: scrollable list of user prompts with file change summaries\n *   2. Action Select: 5 options (restore code+convo, convo only, code only, summarize, cancel)\n *\n * Activation: Double-Esc or /rewind command\n * Boundaries: Only shows messages since last /clear or /compact (naturally enforced\n *             because those operations truncate the messages array).\n */\n\nimport { Box, Text, useInput } from 'ink'\nimport * as React from 'react'\nimport { useMemo, useState } from 'react'\nimport figures from 'figures'\nimport { basename } from 'path'\nimport { BRAND_GRADIENT, SEMANTIC_COLORS } from '@constants/colors'\nimport { t } from '@i18n'\nimport type { Message, UserMessage } from '@query'\n\n// \u2500\u2500 Types \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nexport interface RewindPoint {\n  /** The original user message */\n  userMessage: UserMessage\n  /** Index in the messages array */\n  messageIndex: number\n  /** Plain text of the user prompt (for display) */\n  userText: string\n  /** File paths modified in this turn (basename only) */\n  changedFiles: string[]\n}\n\nexport type RewindAction =\n  | 'restore_code_and_conversation'\n  | 'restore_conversation'\n  | 'restore_code'\n  | 'summarize_from_here'\n  | 'never_mind'\n\ninterface Props {\n  messages: Message[]\n  onAction: (action: RewindAction, point: RewindPoint) => void\n  onEscape: () => void\n}\n\n// \u2500\u2500 Utilities \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n/** Tool names that modify files on disk */\nconst FILE_TOOLS = new Set(['Write', 'Edit', 'MultiEdit', 'NotebookEdit'])\n\n/**\n * Extract file paths changed between two message indices.\n * Scans assistant messages for file-modifying tool_use blocks.\n */\nfunction extractFileChangesForTurn(\n  messages: Message[],\n  fromIndex: number,\n  toIndex: number,\n): string[] {\n  const files = new Set<string>()\n\n  for (let i = fromIndex; i < toIndex; i++) {\n    const msg = messages[i]\n    if (!msg || msg.type !== 'assistant') continue\n\n    const content = msg.message.content\n    if (!Array.isArray(content)) continue\n\n    for (const block of content) {\n      if (block.type !== 'tool_use') continue\n      if (!FILE_TOOLS.has(block.name)) continue\n\n      const input = block.input as Record<string, unknown>\n      const filePath = (input?.file_path ?? input?.notebook_path) as\n        | string\n        | undefined\n      if (typeof filePath === 'string') {\n        files.add(basename(filePath))\n      }\n    }\n  }\n\n  return Array.from(files)\n}\n\n/** Strip XML tags to extract display-friendly text, mirroring REPL rendering */\nfunction stripXmlForDisplay(raw: string): string {\n  // Command messages \u2192 show as \"/<command> <args>\"\n  if (raw.includes('<command-name>') || raw.includes('<command-message>')) {\n    const cmdMatch = raw.match(/<command-message>([\\s\\S]*?)<\\/command-message>/)\n    const argsMatch = raw.match(/<command-args>([\\s\\S]*?)<\\/command-args>/)\n    const cmd = cmdMatch?.[1]?.trim() ?? ''\n    const args = argsMatch?.[1]?.trim() ?? ''\n    return cmd ? `/${cmd}${args ? ' ' + args : ''}` : ''\n  }\n\n  // Strip all known system/protocol XML tags, keep remaining plain text\n  return raw\n    .replace(/<system-reminder>[\\s\\S]*?<\\/system-reminder>\\s*/g, '')\n    .replace(/<local-command-caveat>[\\s\\S]*?<\\/local-command-caveat>\\s*/g, '')\n    .replace(/<local-command-stdout>[\\s\\S]*?<\\/local-command-stdout>\\s*/g, '')\n    .replace(/<task-notification>[\\s\\S]*?<\\/task-notification>\\s*/g, '')\n    .replace(/<user-guidance>\\n?([\\s\\S]*?)\\n?<\\/user-guidance>/g, '$1')\n    .replace(/<team-message\\s+[^>]*>([\\s\\S]*?)<\\/team-message>/g, '')\n    .replace(/<bash-input>[\\s\\S]*?<\\/bash-input>\\s*/g, '')\n    .replace(/<koding-input>[\\s\\S]*?<\\/koding-input>\\s*/g, '')\n    .replace(\n      /<available-deferred-tools>[\\s\\S]*?<\\/available-deferred-tools>\\s*/g,\n      '',\n    )\n    .replace(/<command-name>[\\s\\S]*?<\\/command-name>\\s*/g, '')\n    .replace(/<command-message>[\\s\\S]*?<\\/command-message>\\s*/g, '')\n    .replace(/<command-args>[\\s\\S]*?<\\/command-args>\\s*/g, '')\n    .trim()\n}\n\n/** Extract plain text from a user message */\nfunction getUserText(msg: UserMessage): string {\n  const content = msg.message.content\n  if (typeof content === 'string') return stripXmlForDisplay(content)\n  if (Array.isArray(content)) {\n    for (const block of content) {\n      if (block.type === 'text') return stripXmlForDisplay(block.text)\n    }\n  }\n  return ''\n}\n\n/**\n * Build rewind points from the messages array.\n * Each point is a user prompt (excluding tool results) with its\n * associated file changes extracted from the following assistant turn.\n */\nexport function getRewindPoints(messages: Message[]): RewindPoint[] {\n  const points: RewindPoint[] = []\n\n  // Collect indices of user messages (skip tool_result messages)\n  const userIndices: number[] = []\n  for (let i = 0; i < messages.length; i++) {\n    const msg = messages[i]\n    if (\n      msg?.type === 'user' &&\n      !(\n        Array.isArray(msg.message.content) &&\n        msg.message.content[0]?.type === 'tool_result'\n      )\n    ) {\n      userIndices.push(i)\n    }\n  }\n\n  for (let i = 0; i < userIndices.length; i++) {\n    const idx = userIndices[i]!\n    const msg = messages[idx] as UserMessage\n    const nextIdx =\n      i + 1 < userIndices.length ? userIndices[i + 1]! : messages.length\n\n    points.push({\n      userMessage: msg,\n      messageIndex: idx,\n      userText: getUserText(msg),\n      changedFiles: extractFileChangesForTurn(messages, idx, nextIdx),\n    })\n  }\n\n  return points\n}\n\n// \u2500\u2500 Constants \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst MAX_VISIBLE = 8\nconst MAX_TEXT_LENGTH = 120\n\n// \u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nexport function RewindPanel({\n  messages,\n  onAction,\n  onEscape,\n}: Props): React.ReactNode {\n  const rewindPoints = useMemo(() => getRewindPoints(messages), [messages])\n\n  const [phase, setPhase] = useState<'message_select' | 'action_select'>(\n    'message_select',\n  )\n  // Total items = rewindPoints + 1 (current). Default selection: (current)\n  const totalItems = rewindPoints.length + 1\n  const [selectedIndex, setSelectedIndex] = useState(rewindPoints.length)\n  const [actionIndex, setActionIndex] = useState(0)\n  const [selectedPoint, setSelectedPoint] = useState<RewindPoint | null>(null)\n\n  useInput((input, key) => {\n    if (phase === 'message_select') {\n      if (key.escape) {\n        onEscape()\n        return\n      }\n      if (key.upArrow) {\n        setSelectedIndex(prev => Math.max(0, prev - 1))\n        return\n      }\n      if (key.downArrow) {\n        setSelectedIndex(prev => Math.min(totalItems - 1, prev + 1))\n        return\n      }\n      if (key.return) {\n        // (current) = do nothing\n        if (selectedIndex >= rewindPoints.length) {\n          onEscape()\n          return\n        }\n        const point = rewindPoints[selectedIndex]\n        if (point) {\n          setSelectedPoint(point)\n          setPhase('action_select')\n          setActionIndex(0)\n        }\n        return\n      }\n    } else if (phase === 'action_select') {\n      if (key.escape) {\n        setPhase('message_select')\n        return\n      }\n      if (key.upArrow) {\n        setActionIndex(prev => Math.max(0, prev - 1))\n        return\n      }\n      if (key.downArrow) {\n        setActionIndex(prev => Math.min(4, prev + 1))\n        return\n      }\n      if (key.return && selectedPoint) {\n        const actions: RewindAction[] = [\n          'restore_code_and_conversation',\n          'restore_conversation',\n          'restore_code',\n          'summarize_from_here',\n          'never_mind',\n        ]\n        onAction(actions[actionIndex]!, selectedPoint)\n        return\n      }\n      // Number keys 1-5\n      const num = Number(input)\n      if (num >= 1 && num <= 5 && selectedPoint) {\n        const actions: RewindAction[] = [\n          'restore_code_and_conversation',\n          'restore_conversation',\n          'restore_code',\n          'summarize_from_here',\n          'never_mind',\n        ]\n        onAction(actions[num - 1]!, selectedPoint)\n        return\n      }\n    }\n  })\n\n  // \u2500\u2500 Phase 1: Message Select \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n  if (phase === 'message_select') {\n    const firstVisible = Math.max(\n      0,\n      Math.min(\n        selectedIndex - Math.floor(MAX_VISIBLE / 2),\n        totalItems - MAX_VISIBLE,\n      ),\n    )\n    const lastVisible = Math.min(totalItems, firstVisible + MAX_VISIBLE)\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('rewind.title')}\n          </Text>\n          <Text color={SEMANTIC_COLORS.secondary}>\n            {t('rewind.selectMessage')}\n          </Text>\n        </Box>\n\n        {/* Message list */}\n        {Array.from({ length: lastVisible - firstVisible }, (_, i) => {\n          const itemIndex = firstVisible + i\n          const isSelected = itemIndex === selectedIndex\n          const isCurrent = itemIndex >= rewindPoints.length\n\n          if (isCurrent) {\n            return (\n              <Box key=\"current\" marginBottom={0}>\n                <Text\n                  color={\n                    isSelected ? BRAND_GRADIENT.START : SEMANTIC_COLORS.dim\n                  }\n                  bold={isSelected}\n                >\n                  {isSelected ? `${figures.pointer} ` : '  '}\n                </Text>\n                <Text color={SEMANTIC_COLORS.dim} italic>\n                  {t('dialog.current')}\n                </Text>\n              </Box>\n            )\n          }\n\n          const point = rewindPoints[itemIndex]\n          if (!point) return null\n\n          const displayText = point.userText\n            .replace(/\\n/g, ' ')\n            .slice(0, MAX_TEXT_LENGTH)\n          const truncated =\n            point.userText.length > MAX_TEXT_LENGTH\n              ? displayText + '\u2026'\n              : displayText\n\n          return (\n            <Box\n              key={point.userMessage.uuid}\n              flexDirection=\"column\"\n              marginBottom={0}\n            >\n              <Box>\n                <Text\n                  color={isSelected ? BRAND_GRADIENT.START : undefined}\n                  bold={isSelected}\n                >\n                  {isSelected ? `${figures.pointer} ` : '  '}\n                </Text>\n                <Text\n                  color={isSelected ? BRAND_GRADIENT.START : undefined}\n                  wrap=\"truncate\"\n                >\n                  {truncated || t('dialog.emptyMessage')}\n                </Text>\n              </Box>\n              <Box marginLeft={3}>\n                <Text color={SEMANTIC_COLORS.dim}>\n                  {point.changedFiles.length === 0\n                    ? t('rewind.noCodeChanges')\n                    : point.changedFiles.join(', ')}\n                </Text>\n              </Box>\n            </Box>\n          )\n        })}\n\n        {/* Scroll indicators */}\n        {firstVisible > 0 && (\n          <Box marginLeft={2}>\n            <Text color={SEMANTIC_COLORS.dim}>\n              {figures.arrowUp} {t('rewind.moreAbove')}\n            </Text>\n          </Box>\n        )}\n        {lastVisible < totalItems && (\n          <Box marginLeft={2}>\n            <Text color={SEMANTIC_COLORS.dim}>\n              {figures.arrowDown} {t('rewind.moreBelow')}\n            </Text>\n          </Box>\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\n  // \u2500\u2500 Phase 2: Action Select \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n  if (!selectedPoint) return null\n\n  const confirmText = selectedPoint.userText.replace(/\\n/g, ' ').slice(0, 100)\n  const confirmDisplay =\n    selectedPoint.userText.length > 100 ? confirmText + '\u2026' : confirmText\n\n  const actionLabels = [\n    t('rewind.action.restoreCodeAndConversation'),\n    t('rewind.action.restoreConversation'),\n    t('rewind.action.restoreCode'),\n    t('rewind.action.summarizeFromHere'),\n    t('rewind.action.neverMind'),\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('rewind.title')}\n        </Text>\n        <Text color={SEMANTIC_COLORS.secondary}>\n          {t('rewind.confirmRestore')}\n        </Text>\n      </Box>\n\n      {/* Selected message preview (quoted) */}\n      <Box marginBottom={1} marginLeft={1}>\n        <Box\n          borderStyle=\"single\"\n          borderColor={SEMANTIC_COLORS.dim}\n          borderLeft={true}\n          borderRight={false}\n          borderTop={false}\n          borderBottom={false}\n          paddingLeft={1}\n        >\n          <Text>{confirmDisplay}</Text>\n        </Box>\n      </Box>\n\n      {/* Change summary */}\n      <Box flexDirection=\"column\" marginBottom={1} marginLeft={1}>\n        <Text color={SEMANTIC_COLORS.secondary}>\n          {t('rewind.conversationWillBeForked')}\n        </Text>\n        {selectedPoint.changedFiles.length > 0 ? (\n          <Text color={SEMANTIC_COLORS.secondary}>\n            {t('rewind.codeWillBeRestored')}{' '}\n            {selectedPoint.changedFiles.join(', ')}.\n          </Text>\n        ) : (\n          <Text color={SEMANTIC_COLORS.dim}>{t('rewind.noCodeChanges')}</Text>\n        )}\n      </Box>\n\n      {/* 5 action options */}\n      {actionLabels.map((label, i) => (\n        <Box key={i}>\n          <Text\n            color={i === actionIndex ? BRAND_GRADIENT.START : undefined}\n            bold={i === actionIndex}\n          >\n            {i === actionIndex ? `${figures.pointer} ` : '  '}\n            {i + 1}. {label}\n          </Text>\n        </Box>\n      ))}\n\n      {/* Warning footer */}\n      <Box marginTop={1}>\n        <Text color={SEMANTIC_COLORS.error}>{t('rewind.bashWarning')}</Text>\n      </Box>\n    </Box>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/Spinner.js

@@ -5,7 +5,8 @@ import { getTheme } from "../utils/theme.js";
 import { sample } from "lodash-es";
 import { getSessionState } from "../utils/sessionState.js";
 import { useUnifiedAnimation } from "../utils/animationManager.js";
-import { formatNumber, formatTokenUsage } from "../utils/format.js";
+import { formatNumber } from "../utils/format.js";
+import { getTokenDisplay } from "../utils/tokenProgress.js";
 import { BRAND_GRADIENT, SEMANTIC_COLORS } from "../constants/colors.js";
 import {
   getCurrentAgentContext,
@@ -82,13 +83,13 @@ function Spinner({ isActive = true }) {
   const message = useRef(sample(MESSAGES));
   const startTime = useRef(Date.now());
   const theme = getTheme();
-  const { spinnerFrame, elapsedTime } = useUnifiedAnimation({
+  const { spinnerFrame, elapsedTime, dataTick } = useUnifiedAnimation({
     enabled: isActive,
     startTime: startTime.current,
     spinnerFrameCount: frames.length,
     componentId: "main-spinner"
   });
-  const streamState = useMemo(() => getMainStreamingState2(), [spinnerFrame]);
+  const streamState = useMemo(() => getMainStreamingState2(), [dataTick]);
   const getPhaseDisplay = () => {
     switch (streamState.phase) {
       case "deep_thinking": {
@@ -99,8 +100,10 @@ function Spinner({ isActive = true }) {
         }
         return `Deep thinking (${elapsed}s${charInfo ? " \xB7 " + charInfo : ""})`;
       }
-      case "retrying":
-        return streamState.retryCount && streamState.maxRetries ? `Retrying (${streamState.retryCount}/${streamState.maxRetries})${streamState.errorName ? ` \xB7 ${streamState.errorName}` : ""}` : streamState.errorName ? `Retrying \xB7 ${streamState.errorName}` : "Retrying...";
+      case "retrying": {
+        const delayInfo = streamState.retryDelayMs ? ` \xB7 next in ${Math.ceil(streamState.retryDelayMs / 1e3)}s` : "";
+        return streamState.retryCount && streamState.maxRetries ? `Retrying (${streamState.retryCount}/${streamState.maxRetries})${streamState.errorName ? ` \xB7 ${streamState.errorName}` : ""}${delayInfo}` : streamState.errorName ? `Retrying \xB7 ${streamState.errorName}${delayInfo}` : `Retrying...${delayInfo}`;
+      }
       case "permission":
         return "Waiting for permission...";
       case "compacting":
@@ -138,23 +141,9 @@ function Spinner({ isActive = true }) {
     concurrent: SEMANTIC_COLORS.success
     // 绿色 - 并发
   };
-  const getTokenDisplay = () => {
-    if (streamState.inputTokens || streamState.outputTokens) {
-      return formatTokenUsage(streamState.inputTokens, streamState.outputTokens);
-    }
-    if (streamState.receivedChars && streamState.receivedChars > 0) {
-      const approxOutputTokens = Math.round(streamState.receivedChars / 3);
-      if (streamState.sentChars && streamState.sentChars > 0) {
-        const approxInputTokens = Math.round(streamState.sentChars / 3);
-        return `\u2191 ~${formatNumber(approxInputTokens)} \xB7 \u2193 ~${formatNumber(approxOutputTokens)}`;
-      }
-      return `\u2193 ~${formatNumber(approxOutputTokens)}`;
-    }
-    return "";
-  };
-  const tokenUsage = getTokenDisplay();
+  const { formatted: tokenUsage } = getTokenDisplay();
   const thinkingDuration = streamState.thinkingDurationMs ? Math.floor(streamState.thinkingDurationMs / 1e3) : null;
-  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", marginTop: 1 }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "nowrap", height: 1, width: 2 }, /* @__PURE__ */ React.createElement(Text, { color: phaseColors[streamState.phase] }, frames[spinnerFrame])), /* @__PURE__ */ React.createElement(Text, { color: phaseColors[streamState.phase] }, getPhaseDisplay(), "\u2026 "), /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "(", /* @__PURE__ */ React.createElement(Text, { bold: true }, "esc esc"), " to cancel \xB7 ", elapsedTime, "s", tokenUsage && /* @__PURE__ */ React.createElement(Text, null, " \xB7 ", tokenUsage), thinkingDuration !== null && thinkingDuration > 0 && /* @__PURE__ */ React.createElement(Text, null, " \xB7 thinking ", thinkingDuration, "s"), ")"), getSessionState("currentError") && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "\xB7 ", getSessionState("currentError")));
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", marginTop: 1 }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "nowrap", height: 1, width: 2 }, /* @__PURE__ */ React.createElement(Text, { color: phaseColors[streamState.phase] }, frames[spinnerFrame])), /* @__PURE__ */ React.createElement(Text, { color: phaseColors[streamState.phase] }, getPhaseDisplay(), "\u2026 "), /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "(", /* @__PURE__ */ React.createElement(Text, { bold: true }, "esc"), " to cancel \xB7 ", elapsedTime, "s", tokenUsage && /* @__PURE__ */ React.createElement(Text, null, " \xB7 ", tokenUsage), streamState.phase === "thinking" && /* @__PURE__ */ React.createElement(Text, null, " \xB7 thinking"), thinkingDuration !== null && thinkingDuration > 0 && /* @__PURE__ */ React.createElement(Text, null, " \xB7 thinking ", thinkingDuration, "s"), ")"), getSessionState("currentError") && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "\xB7 ", getSessionState("currentError")));
 }
 function SimpleSpinner({
   isActive = true,

package/dist/components/Spinner.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/Spinner.tsx"],
-  "sourcesContent": ["import { Box, Text } from 'ink'\nimport * as React from 'react'\nimport { useRef, useMemo } from 'react'\nimport { getTheme } from '@utils/theme'\nimport { sample } from 'lodash-es'\nimport { getSessionState } from '@utils/sessionState'\nimport { useUnifiedAnimation } from '@utils/animationManager'\nimport { formatNumber, formatTokenUsage } from '@utils/format'\nimport { BRAND_GRADIENT, SEMANTIC_COLORS } from '@constants/colors'\n\n// Re-export streaming state from canonical location for backward compatibility\nexport {\n  type StreamingPhase,\n  type StreamingStateData,\n  getCurrentAgentContext,\n  pushAgentContext,\n  popAgentContext,\n  setStreamingState,\n  resetStreamingState,\n  getStreamingState,\n  getMainStreamingState,\n  cleanupAgentStreamingState,\n} from '@utils/streamingState'\n\nimport { getMainStreamingState } from '@utils/streamingState'\nimport type { StreamingPhase } from '@utils/streamingState'\n\n// NB: The third character in this string is an emoji that\n// renders on Windows consoles with a green background\nconst CHARACTERS =\n  process.platform === 'darwin'\n    ? ['\u00B7', '\u2722', '\u2733', '\u2217', '\u273B', '\u273D']\n    : ['\u00B7', '\u2722', '*', '\u2217', '\u273B', '\u273D']\n\nconst MESSAGES = [\n  'Accomplishing',\n  'Actioning',\n  'Actualizing',\n  'Baking',\n  'Brewing',\n  'Calculating',\n  'Cerebrating',\n  'Churning',\n  'Coding',\n  'Coalescing',\n  'Cogitating',\n  'Computing',\n  'Conjuring',\n  'Considering',\n  'Cooking',\n  'Crafting',\n  'Creating',\n  'Crunching',\n  'Deliberating',\n  'Determining',\n  'Doing',\n  'Effecting',\n  'Finagling',\n  'Forging',\n  'Forming',\n  'Generating',\n  'Hatching',\n  'Herding',\n  'Honking',\n  'Hustling',\n  'Ideating',\n  'Inferring',\n  'Manifesting',\n  'Marinating',\n  'Moseying',\n  'Mulling',\n  'Mustering',\n  'Musing',\n  'Noodling',\n  'Percolating',\n  'Pondering',\n  'Processing',\n  'Puttering',\n  'Reticulating',\n  'Ruminating',\n  'Schlepping',\n  'Shucking',\n  'Simmering',\n  'Smooshing',\n  'Spinning',\n  'Stewing',\n  'Synthesizing',\n  'Thinking',\n  'Transmuting',\n  'Vibing',\n  'Working',\n]\n\ninterface SpinnerProps {\n  /** Whether the spinner should be active (animating) */\n  isActive?: boolean\n}\n\nexport function Spinner({ isActive = true }: SpinnerProps): React.ReactNode {\n  const frames = [...CHARACTERS, ...[...CHARACTERS].reverse()]\n  const message = useRef(sample(MESSAGES))\n  const startTime = useRef(Date.now())\n  const theme = getTheme()\n\n  // Use unified animation manager instead of separate setInterval timers\n  const { spinnerFrame, elapsedTime } = useUnifiedAnimation({\n    enabled: isActive,\n    startTime: startTime.current,\n    spinnerFrameCount: frames.length,\n    componentId: 'main-spinner',\n  })\n\n  // Get main streaming state on each render (updates when spinnerFrame changes)\n  // Use getMainStreamingState to avoid subagent interference\n  const streamState = useMemo(() => getMainStreamingState(), [spinnerFrame])\n\n  // Get phase-specific display\n  const getPhaseDisplay = () => {\n    switch (streamState.phase) {\n      case 'deep_thinking': {\n        // Show elapsed time and char count for thinking phase\n        const elapsed = streamState.thinkingStartTime\n          ? Math.floor((Date.now() - streamState.thinkingStartTime) / 1000)\n          : 0\n        const charInfo = streamState.tokenCount\n          ? `${formatNumber(streamState.tokenCount)} chars`\n          : ''\n\n        if (streamState.thinkingMaxTokens && streamState.tokenCount) {\n          return `Deep thinking (${elapsed}s \u00B7 ${charInfo} / ${formatNumber(streamState.thinkingMaxTokens)})`\n        }\n        return `Deep thinking (${elapsed}s${charInfo ? ' \u00B7 ' + charInfo : ''})`\n      }\n\n      case 'retrying':\n        return streamState.retryCount && streamState.maxRetries\n          ? `Retrying (${streamState.retryCount}/${streamState.maxRetries})${streamState.errorName ? ` \u00B7 ${streamState.errorName}` : ''}`\n          : streamState.errorName\n            ? `Retrying \u00B7 ${streamState.errorName}`\n            : 'Retrying...'\n\n      case 'permission':\n        return 'Waiting for permission...'\n\n      case 'compacting':\n        return 'Compacting context...'\n\n      case 'concurrent':\n        return streamState.concurrentCount\n          ? `Running ${streamState.concurrentCount} concurrent tasks...`\n          : 'Running concurrent tasks...'\n\n      case 'tool_use':\n        return streamState.toolName\n          ? `Using ${streamState.toolName}`\n          : 'Executing tool'\n\n      case 'generating':\n        return 'Receiving'\n\n      case 'waiting':\n        return 'Waiting for response'\n\n      case 'thinking':\n      default:\n        return message.current\n    }\n  }\n\n  // \u4F7F\u7528\u8BED\u4E49\u989C\u8272\u7CFB\u7EDF\uFF0C\u54C1\u724C\u8272\u7528\u4E8E\u601D\u8003\uFF0C\u72B6\u6001\u8272\u7528\u4E8E\u5404\u9636\u6BB5\n  const phaseColors: Record<StreamingPhase, string> = {\n    thinking: BRAND_GRADIENT.MIDDLE, // \u7C89\u7D2B - \u601D\u8003\u4E2D\n    deep_thinking: BRAND_GRADIENT.START, // \u7D2B\u84DD - \u6DF1\u5EA6\u601D\u8003\n    generating: SEMANTIC_COLORS.success, // \u7EFF\u8272 - \u751F\u6210\u4E2D\n    tool_use: SEMANTIC_COLORS.running, // \u7C89\u7D2B - \u5DE5\u5177\u6267\u884C\n    waiting: SEMANTIC_COLORS.dim, // \u7070\u8272 - \u7B49\u5F85\n    retrying: SEMANTIC_COLORS.error, // \u7EA2\u8272 - \u91CD\u8BD5\n    permission: SEMANTIC_COLORS.info, // \u84DD\u8272 - \u6743\u9650\n    compacting: SEMANTIC_COLORS.info, // \u84DD\u8272 - \u538B\u7F29\n    concurrent: SEMANTIC_COLORS.success, // \u7EFF\u8272 - \u5E76\u53D1\n  }\n\n  // Get token usage from streaming state (API values or approximate from chars)\n  const getTokenDisplay = () => {\n    // Prefer API-provided token counts - always show bidirectional if available\n    if (streamState.inputTokens || streamState.outputTokens) {\n      return formatTokenUsage(streamState.inputTokens, streamState.outputTokens)\n    }\n    // Fallback: approximate from received characters (~3 chars per token for mixed content)\n    if (streamState.receivedChars && streamState.receivedChars > 0) {\n      const approxOutputTokens = Math.round(streamState.receivedChars / 3)\n      // If we have sentChars, show both directions\n      if (streamState.sentChars && streamState.sentChars > 0) {\n        const approxInputTokens = Math.round(streamState.sentChars / 3)\n        return `\u2191 ~${formatNumber(approxInputTokens)} \u00B7 \u2193 ~${formatNumber(approxOutputTokens)}`\n      }\n      return `\u2193 ~${formatNumber(approxOutputTokens)}`\n    }\n    return ''\n  }\n\n  const tokenUsage = getTokenDisplay()\n\n  // Get thinking duration if available\n  const thinkingDuration = streamState.thinkingDurationMs\n    ? Math.floor(streamState.thinkingDurationMs / 1000)\n    : null\n\n  return (\n    <Box flexDirection=\"row\" marginTop={1}>\n      <Box flexWrap=\"nowrap\" height={1} width={2}>\n        <Text color={phaseColors[streamState.phase]}>\n          {frames[spinnerFrame]}\n        </Text>\n      </Box>\n      <Text color={phaseColors[streamState.phase]}>{getPhaseDisplay()}\u2026 </Text>\n      <Text color={SEMANTIC_COLORS.dim}>\n        (<Text bold>esc esc</Text> to cancel \u00B7 {elapsedTime}s\n        {tokenUsage && <Text> \u00B7 {tokenUsage}</Text>}\n        {thinkingDuration !== null && thinkingDuration > 0 && (\n          <Text> \u00B7 thinking {thinkingDuration}s</Text>\n        )}\n        )\n      </Text>\n      {getSessionState('currentError') && (\n        <Text color={SEMANTIC_COLORS.dim}>\n          \u00B7 {getSessionState('currentError')}\n        </Text>\n      )}\n    </Box>\n  )\n}\n\ninterface SimpleSpinnerProps {\n  /** Whether the spinner should be active (animating) */\n  isActive?: boolean\n  /** Optional label to display next to spinner */\n  label?: string\n}\n\nexport function SimpleSpinner({\n  isActive = true,\n  label,\n}: SimpleSpinnerProps): React.ReactNode {\n  const frames = [...CHARACTERS, ...[...CHARACTERS].reverse()]\n  const startTime = useRef(Date.now())\n\n  // Use unified animation manager\n  const { spinnerFrame } = useUnifiedAnimation({\n    enabled: isActive,\n    startTime: startTime.current,\n    spinnerFrameCount: frames.length,\n    componentId: 'simple-spinner',\n  })\n\n  return (\n    <Box flexDirection=\"row\">\n      <Box flexWrap=\"nowrap\" height={1} width={2}>\n        <Text color={BRAND_GRADIENT.MIDDLE}>{frames[spinnerFrame]}</Text>\n      </Box>\n      {label && <Text color={SEMANTIC_COLORS.dim}> {label}</Text>}\n    </Box>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Box, Text } from 'ink'\nimport * as React from 'react'\nimport { useRef, useMemo } from 'react'\nimport { getTheme } from '@utils/theme'\nimport { sample } from 'lodash-es'\nimport { getSessionState } from '@utils/sessionState'\nimport { useUnifiedAnimation } from '@utils/animationManager'\nimport { formatNumber } from '@utils/format'\nimport { getTokenDisplay } from '@utils/tokenProgress'\nimport { BRAND_GRADIENT, SEMANTIC_COLORS } from '@constants/colors'\n\n// Re-export streaming state from canonical location for backward compatibility\nexport {\n  type StreamingPhase,\n  type StreamingStateData,\n  getCurrentAgentContext,\n  pushAgentContext,\n  popAgentContext,\n  setStreamingState,\n  resetStreamingState,\n  getStreamingState,\n  getMainStreamingState,\n  cleanupAgentStreamingState,\n} from '@utils/streamingState'\n\nimport { getMainStreamingState } from '@utils/streamingState'\nimport type { StreamingPhase } from '@utils/streamingState'\n\n// NB: The third character in this string is an emoji that\n// renders on Windows consoles with a green background\nconst CHARACTERS =\n  process.platform === 'darwin'\n    ? ['\u00B7', '\u2722', '\u2733', '\u2217', '\u273B', '\u273D']\n    : ['\u00B7', '\u2722', '*', '\u2217', '\u273B', '\u273D']\n\nconst MESSAGES = [\n  'Accomplishing',\n  'Actioning',\n  'Actualizing',\n  'Baking',\n  'Brewing',\n  'Calculating',\n  'Cerebrating',\n  'Churning',\n  'Coding',\n  'Coalescing',\n  'Cogitating',\n  'Computing',\n  'Conjuring',\n  'Considering',\n  'Cooking',\n  'Crafting',\n  'Creating',\n  'Crunching',\n  'Deliberating',\n  'Determining',\n  'Doing',\n  'Effecting',\n  'Finagling',\n  'Forging',\n  'Forming',\n  'Generating',\n  'Hatching',\n  'Herding',\n  'Honking',\n  'Hustling',\n  'Ideating',\n  'Inferring',\n  'Manifesting',\n  'Marinating',\n  'Moseying',\n  'Mulling',\n  'Mustering',\n  'Musing',\n  'Noodling',\n  'Percolating',\n  'Pondering',\n  'Processing',\n  'Puttering',\n  'Reticulating',\n  'Ruminating',\n  'Schlepping',\n  'Shucking',\n  'Simmering',\n  'Smooshing',\n  'Spinning',\n  'Stewing',\n  'Synthesizing',\n  'Thinking',\n  'Transmuting',\n  'Vibing',\n  'Working',\n]\n\ninterface SpinnerProps {\n  /** Whether the spinner should be active (animating) */\n  isActive?: boolean\n}\n\nexport function Spinner({ isActive = true }: SpinnerProps): React.ReactNode {\n  const frames = [...CHARACTERS, ...[...CHARACTERS].reverse()]\n  const message = useRef(sample(MESSAGES))\n  const startTime = useRef(Date.now())\n  const theme = getTheme()\n\n  // Use unified animation manager instead of separate setInterval timers\n  const { spinnerFrame, elapsedTime, dataTick } = useUnifiedAnimation({\n    enabled: isActive,\n    startTime: startTime.current,\n    spinnerFrameCount: frames.length,\n    componentId: 'main-spinner',\n  })\n\n  // Get main streaming state on each render (updates at 100ms via dataTick)\n  // Use getMainStreamingState to avoid subagent interference\n  const streamState = useMemo(() => getMainStreamingState(), [dataTick])\n\n  // Get phase-specific display\n  const getPhaseDisplay = () => {\n    switch (streamState.phase) {\n      case 'deep_thinking': {\n        // Show elapsed time and char count for thinking phase\n        const elapsed = streamState.thinkingStartTime\n          ? Math.floor((Date.now() - streamState.thinkingStartTime) / 1000)\n          : 0\n        const charInfo = streamState.tokenCount\n          ? `${formatNumber(streamState.tokenCount)} chars`\n          : ''\n\n        if (streamState.thinkingMaxTokens && streamState.tokenCount) {\n          return `Deep thinking (${elapsed}s \u00B7 ${charInfo} / ${formatNumber(streamState.thinkingMaxTokens)})`\n        }\n        return `Deep thinking (${elapsed}s${charInfo ? ' \u00B7 ' + charInfo : ''})`\n      }\n\n      case 'retrying': {\n        const delayInfo = streamState.retryDelayMs\n          ? ` \u00B7 next in ${Math.ceil(streamState.retryDelayMs / 1000)}s`\n          : ''\n        return streamState.retryCount && streamState.maxRetries\n          ? `Retrying (${streamState.retryCount}/${streamState.maxRetries})${streamState.errorName ? ` \u00B7 ${streamState.errorName}` : ''}${delayInfo}`\n          : streamState.errorName\n            ? `Retrying \u00B7 ${streamState.errorName}${delayInfo}`\n            : `Retrying...${delayInfo}`\n      }\n\n      case 'permission':\n        return 'Waiting for permission...'\n\n      case 'compacting':\n        return 'Compacting context...'\n\n      case 'concurrent':\n        return streamState.concurrentCount\n          ? `Running ${streamState.concurrentCount} concurrent tasks...`\n          : 'Running concurrent tasks...'\n\n      case 'tool_use':\n        return streamState.toolName\n          ? `Using ${streamState.toolName}`\n          : 'Executing tool'\n\n      case 'generating':\n        return 'Receiving'\n\n      case 'waiting':\n        return 'Waiting for response'\n\n      case 'thinking':\n      default:\n        return message.current\n    }\n  }\n\n  // \u4F7F\u7528\u8BED\u4E49\u989C\u8272\u7CFB\u7EDF\uFF0C\u54C1\u724C\u8272\u7528\u4E8E\u601D\u8003\uFF0C\u72B6\u6001\u8272\u7528\u4E8E\u5404\u9636\u6BB5\n  const phaseColors: Record<StreamingPhase, string> = {\n    thinking: BRAND_GRADIENT.MIDDLE, // \u7C89\u7D2B - \u601D\u8003\u4E2D\n    deep_thinking: BRAND_GRADIENT.START, // \u7D2B\u84DD - \u6DF1\u5EA6\u601D\u8003\n    generating: SEMANTIC_COLORS.success, // \u7EFF\u8272 - \u751F\u6210\u4E2D\n    tool_use: SEMANTIC_COLORS.running, // \u7C89\u7D2B - \u5DE5\u5177\u6267\u884C\n    waiting: SEMANTIC_COLORS.dim, // \u7070\u8272 - \u7B49\u5F85\n    retrying: SEMANTIC_COLORS.error, // \u7EA2\u8272 - \u91CD\u8BD5\n    permission: SEMANTIC_COLORS.info, // \u84DD\u8272 - \u6743\u9650\n    compacting: SEMANTIC_COLORS.info, // \u84DD\u8272 - \u538B\u7F29\n    concurrent: SEMANTIC_COLORS.success, // \u7EFF\u8272 - \u5E76\u53D1\n  }\n\n  const { formatted: tokenUsage } = getTokenDisplay()\n\n  // Get thinking duration if available\n  const thinkingDuration = streamState.thinkingDurationMs\n    ? Math.floor(streamState.thinkingDurationMs / 1000)\n    : null\n\n  return (\n    <Box flexDirection=\"row\" marginTop={1}>\n      <Box flexWrap=\"nowrap\" height={1} width={2}>\n        <Text color={phaseColors[streamState.phase]}>\n          {frames[spinnerFrame]}\n        </Text>\n      </Box>\n      <Text color={phaseColors[streamState.phase]}>{getPhaseDisplay()}\u2026 </Text>\n      <Text color={SEMANTIC_COLORS.dim}>\n        (<Text bold>esc</Text> to cancel \u00B7 {elapsedTime}s\n        {tokenUsage && <Text> \u00B7 {tokenUsage}</Text>}\n        {streamState.phase === 'thinking' && <Text> \u00B7 thinking</Text>}\n        {thinkingDuration !== null && thinkingDuration > 0 && (\n          <Text> \u00B7 thinking {thinkingDuration}s</Text>\n        )}\n        )\n      </Text>\n      {getSessionState('currentError') && (\n        <Text color={SEMANTIC_COLORS.dim}>\n          \u00B7 {getSessionState('currentError')}\n        </Text>\n      )}\n    </Box>\n  )\n}\n\ninterface SimpleSpinnerProps {\n  /** Whether the spinner should be active (animating) */\n  isActive?: boolean\n  /** Optional label to display next to spinner */\n  label?: string\n}\n\nexport function SimpleSpinner({\n  isActive = true,\n  label,\n}: SimpleSpinnerProps): React.ReactNode {\n  const frames = [...CHARACTERS, ...[...CHARACTERS].reverse()]\n  const startTime = useRef(Date.now())\n\n  // Use unified animation manager\n  const { spinnerFrame } = useUnifiedAnimation({\n    enabled: isActive,\n    startTime: startTime.current,\n    spinnerFrameCount: frames.length,\n    componentId: 'simple-spinner',\n  })\n\n  return (\n    <Box flexDirection=\"row\">\n      <Box flexWrap=\"nowrap\" height={1} width={2}>\n        <Text color={BRAND_GRADIENT.MIDDLE}>{frames[spinnerFrame]}</Text>\n      </Box>\n      {label && <Text color={SEMANTIC_COLORS.dim}> {label}</Text>}\n    </Box>\n  )\n}\n"],
+  "mappings": "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",
   "names": ["getMainStreamingState"]
 }

package/dist/components/StreamingTextPreview.js

@@ -0,0 +1,29 @@
+import { Box, Text } from "ink";
+import * as React from "react";
+import { useMemo } from "react";
+import { getMainStreamingState } from "../utils/streamingState.js";
+import { applyMarkdown } from "../utils/markdown.js";
+import { useUnifiedAnimation } from "../utils/animationManager.js";
+import { useTerminalSize } from "../hooks/useTerminalSize.js";
+import { SEMANTIC_COLORS } from "../constants/colors.js";
+function StreamingTextPreview() {
+  const { columns } = useTerminalSize();
+  const { dataTick } = useUnifiedAnimation({
+    enabled: true,
+    startTime: Date.now(),
+    spinnerFrameCount: 1,
+    componentId: "streaming-text-preview"
+  });
+  const streamingText = useMemo(
+    () => getMainStreamingState().streamingText,
+    [dataTick]
+  );
+  if (!streamingText) return null;
+  const rendered = applyMarkdown(streamingText);
+  if (!rendered) return null;
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", width: columns - 6, marginLeft: 2 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.primary }, rendered));
+}
+export {
+  StreamingTextPreview
+};
+//# sourceMappingURL=StreamingTextPreview.js.map

package/dist/components/StreamingTextPreview.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/StreamingTextPreview.tsx"],
+  "sourcesContent": ["/**\n * StreamingTextPreview \u2014 Typewriter-style progressive text rendering\n *\n * Reads streaming text from the global streaming state and renders it\n * in real-time as the LLM generates content. Updates at 100ms intervals\n * via the unified animation manager's dataTick.\n *\n * Displayed in the REPL's dynamic section while the model is generating.\n * Cleared when the complete message is yielded and rendered normally.\n */\n\nimport { Box, Text } from 'ink'\nimport * as React from 'react'\nimport { useMemo } from 'react'\nimport { getMainStreamingState } from '@utils/streamingState'\nimport { applyMarkdown } from '@utils/markdown'\nimport { useUnifiedAnimation } from '@utils/animationManager'\nimport { useTerminalSize } from '@hooks/useTerminalSize'\nimport { SEMANTIC_COLORS } from '@constants/colors'\n\nexport function StreamingTextPreview(): React.ReactNode {\n  const { columns } = useTerminalSize()\n\n  // Subscribe to animation tick for 100ms refresh\n  const { dataTick } = useUnifiedAnimation({\n    enabled: true,\n    startTime: Date.now(),\n    spinnerFrameCount: 1,\n    componentId: 'streaming-text-preview',\n  })\n\n  const streamingText = useMemo(\n    () => getMainStreamingState().streamingText,\n    [dataTick],\n  )\n\n  if (!streamingText) return null\n\n  // Apply markdown formatting to the accumulated text\n  const rendered = applyMarkdown(streamingText)\n  if (!rendered) return null\n\n  return (\n    <Box flexDirection=\"column\" width={columns - 6} marginLeft={2}>\n      <Text color={SEMANTIC_COLORS.primary}>{rendered}</Text>\n    </Box>\n  )\n}\n"],
+  "mappings": "AAWA,SAAS,KAAK,YAAY;AAC1B,YAAY,WAAW;AACvB,SAAS,eAAe;AACxB,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAEzB,SAAS,uBAAwC;AACtD,QAAM,EAAE,QAAQ,IAAI,gBAAgB;AAGpC,QAAM,EAAE,SAAS,IAAI,oBAAoB;AAAA,IACvC,SAAS;AAAA,IACT,WAAW,KAAK,IAAI;AAAA,IACpB,mBAAmB;AAAA,IACnB,aAAa;AAAA,EACf,CAAC;AAED,QAAM,gBAAgB;AAAA,IACpB,MAAM,sBAAsB,EAAE;AAAA,IAC9B,CAAC,QAAQ;AAAA,EACX;AAEA,MAAI,CAAC,cAAe,QAAO;AAG3B,QAAM,WAAW,cAAc,aAAa;AAC5C,MAAI,CAAC,SAAU,QAAO;AAEtB,SACE,oCAAC,OAAI,eAAc,UAAS,OAAO,UAAU,GAAG,YAAY,KAC1D,oCAAC,QAAK,OAAO,gBAAgB,WAAU,QAAS,CAClD;AAEJ;",
+  "names": []
+}

package/dist/components/SubagentBlock.js

@@ -1,11 +1,12 @@
 import React, { useState } from "react";
 import { Box, Text } from "ink";
 import { getTheme } from "../utils/theme.js";
+import { formatNumber } from "../utils/format.js";
 import { getTodoStatusSymbol } from "../constants/symbols.js";
 import { AgentThinkingBlock } from "./AgentThinkingBlock.js";
 import { ToolExecutionBlock } from "./ToolExecutionBlock.js";
 import { AgentResponseBlock } from "./AgentResponseBlock.js";
-import { useAgentTokenStats, formatTokenCount } from "../hooks/useAgentTokenStats.js";
+import { useAgentTokenStats } from "../hooks/useAgentTokenStats.js";
 function SubagentBlock({
   subagent,
   indent = 0,
@@ -40,7 +41,7 @@ function SubagentBlock({
       indent: 0,
       isSubagent: true
     }
-  )), /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, "\u2502")), /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", marginLeft: 2 }, /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, "\u2514\u2500 "), /* @__PURE__ */ React.createElement(Text, { color: statusColor }, statusIndicator, " ", getStatusLabel(subagent.status)), subagent.status === "completed" && /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, " ", "(", duration, "s, ", formatTokenCount(tokenCount), " tokens)")), !expanded && /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", marginLeft: 4 }, /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, "Press ", /* @__PURE__ */ React.createElement(Text, { bold: true }, "Ctrl+O"), " to expand details")));
+  )), /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, "\u2502")), /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", marginLeft: 2 }, /* @__PURE__ */ React.createElement(Text, { color: theme.dimmedText }, "\u2514\u2500 "), /* @__PURE__ */ React.createElement(Text, { color: statusColor }, statusIndicator, " ", getStatusLabel(subagent.status)), subagent.status === "completed" && /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, " ", "(", duration, "s, ", formatNumber(tokenCount), " tokens)")), !expanded && /* @__PURE__ */ React.createElement(Box, { flexDirection: "row", marginLeft: 4 }, /* @__PURE__ */ React.createElement(Text, { color: theme.mutedText }, "Press ", /* @__PURE__ */ React.createElement(Text, { bold: true }, "Ctrl+O"), " to expand details")));
 }
 function SubagentTodosSection({
   todos,