@invergent/agent-chat-react 2.15.8 → 2.16.0

package/dist/index.d.cts

@@ -61,6 +61,10 @@ interface AgentChatMessage {
     status: AgentChatMessageStatus;
     toolCalls?: AgentChatToolCallInfo[];
     reasoning?: string;
+    /** Provider-reported reasoning usage for this iteration, when available. */
+    reasoningTokens?: number;
+    /** Incoming reasoning chunks counted live, before provider usage arrives. */
+    reasoningDeltaCount?: number;
     systemKind?: AgentChatSystemKind;
     systemMeta?: Record<string, unknown>;
     errorInfo?: AgentChatErrorInfo;

package/dist/index.d.ts

@@ -61,6 +61,10 @@ interface AgentChatMessage {
     status: AgentChatMessageStatus;
     toolCalls?: AgentChatToolCallInfo[];
     reasoning?: string;
+    /** Provider-reported reasoning usage for this iteration, when available. */
+    reasoningTokens?: number;
+    /** Incoming reasoning chunks counted live, before provider usage arrives. */
+    reasoningDeltaCount?: number;
     systemKind?: AgentChatSystemKind;
     systemMeta?: Record<string, unknown>;
     errorInfo?: AgentChatErrorInfo;

package/dist/index.js

@@ -10578,6 +10578,17 @@ function useSmoothStream(target, isStreaming) {
   return displayedLen >= target.length ? target : target.slice(0, displayedLen);
 }
 
+// src/runtime/reasoning-tokens.ts
+function formatReasoningTokens(tokens) {
+  if (tokens < 1e3) return String(tokens);
+  return `${(tokens / 1e3).toFixed(1).replace(/\.0$/, "")}k`;
+}
+function reasoningTokenLabel(message, live) {
+  const tokens = message.reasoningTokens ?? message.reasoningDeltaCount;
+  if (tokens === void 0) return live ? "Thinking..." : "Thought";
+  return `${live ? "Thinking..." : "Thought \xB7"} ${formatReasoningTokens(tokens)} tokens`;
+}
+
 // src/lib/next-action.ts
 var _NEXT_ACTION_RE = /<next_action([^>]*)>([\s\S]*?)<\/next_action>\s*/gi;
 var _PARTIAL_NEXT_ACTION_FOOTER_RE = /(?:^|\n)\s*<(?:n(?:e(?:x(?:t(?:_(?:a(?:c(?:t(?:i(?:o(?:n[\s\S]*)?)?)?)?)?)?)?)?)?)?)?$/i;
@@ -12133,7 +12144,7 @@ function SimpleFinalAnswer({
 function deriveIterationLabel(message) {
   const calls = visibleToolCalls(message);
   if (calls.length === 0) {
-    return message.reasoning ? "Thought through the problem" : null;
+    return message.reasoning || message.reasoningTokens ? reasoningTokenLabel(message, false) : null;
   }
   if (calls.every((tc) => tc.toolName === "skill_view")) {
     return skillViewLabel(calls);
@@ -12165,11 +12176,28 @@ function isIterationLive(message) {
   }
   return message.status === "streaming";
 }
+function hasInlineRunningIndicator(messages, viewMode) {
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const message = messages[i];
+    if (message.role === "user") return false;
+    if (message.role !== "assistant") continue;
+    if (viewMode === "simple") {
+      if (message.toolCalls?.some((tc) => tc.toolName === "ask_user_question")) {
+        return false;
+      }
+      return isIterationLive(message) && (!!message.toolCalls?.length || !message.content || message.content === message.reasoning);
+    }
+    return messageToEntries(message, i === messages.length - 1, {}).some(
+      (entry) => entry.kind === "reasoning" && entry.isStreaming
+    );
+  }
+  return false;
+}
 function liveIterationLabel(message) {
   const running = (message.toolCalls ?? []).filter(
     (tc) => tc.status === "running" && !isHiddenSimpleTool(tc)
   );
-  if (running.length === 0) return "Thinking\u2026";
+  if (running.length === 0) return reasoningTokenLabel(message, true);
   if (running.every((tc) => tc.toolName === "skill_view")) {
     return `${skillViewLabel(running)}\u2026`;
   }
@@ -12226,44 +12254,16 @@ function SimpleDetailRow({ icon: Icon, children }) {
     /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 leading-relaxed text-foreground/60", children })
   ] });
 }
-function ClampedReasoning({
-  text,
-  previewParagraphs = 2
-}) {
-  const paragraphs = splitReasoningParagraphs(text);
-  const [expanded, setExpanded] = useState(false);
-  const hasMore = paragraphs.length > previewParagraphs;
-  const visible = expanded || !hasMore ? paragraphs : paragraphs.slice(0, previewParagraphs);
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    visible.map((paragraph, i) => /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap", children: paragraph }, i)),
-    hasMore && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => setExpanded((prev) => !prev),
-        className: "text-xs font-medium text-foreground hover:text-foreground/70 cursor-pointer",
-        children: expanded ? "Show less" : "Show more..."
-      }
-    )
-  ] });
-}
-function splitReasoningParagraphs(text) {
-  const trimmed = text.trim();
-  if (!trimmed) return [];
-  const blankSplit = trimmed.split(/\n\s*\n+/).map((p) => p.trim()).filter((p) => p.length > 0);
-  if (blankSplit.length > 1) return blankSplit;
-  return trimmed.split(/\n+/).map((p) => p.trim()).filter((p) => p.length > 0);
-}
 function IterationExpanded({
   message
 }) {
   const calls = visibleToolCalls(message);
-  const reasoning = (message.reasoning ?? "").trim();
+  const hasReasoning = !!message.reasoning || !!message.reasoningTokens;
   const anyVisibleRunning = calls.some((tc) => tc.status === "running");
-  const showDone = !anyVisibleRunning && (calls.length > 0 || !!reasoning);
-  if (!reasoning && calls.length === 0) return null;
+  const showDone = !anyVisibleRunning && (calls.length > 0 || hasReasoning);
+  if (!hasReasoning && calls.length === 0) return null;
   return /* @__PURE__ */ jsxs("div", { className: "ml-2 space-y-3 border-l border-border/40 pl-4 py-1", children: [
-    reasoning && /* @__PURE__ */ jsx(SimpleDetailRow, { icon: ClockIcon, children: /* @__PURE__ */ jsx(ClampedReasoning, { text: reasoning }) }),
+    hasReasoning && /* @__PURE__ */ jsx(SimpleDetailRow, { icon: ClockIcon, children: /* @__PURE__ */ jsx("span", { children: reasoningTokenLabel(message, false) }) }),
     calls.map((tc) => {
       if (tc.toolName === "todo") {
         return /* @__PURE__ */ jsx("div", { className: "pr-1", children: /* @__PURE__ */ jsx(TodoToolBlock, { tc }) }, tc.id);
@@ -12278,6 +12278,7 @@ function IterationExpanded({
 }
 function IterationGroup({
   message,
+  isActive = true,
   sessionId,
   artifactFallbacks,
   onFileSelect
@@ -12297,7 +12298,7 @@ function IterationGroup({
       }
     ) });
   }
-  if (isIterationLive(message)) {
+  if (isActive && isIterationLive(message)) {
     return /* @__PURE__ */ jsx(
       OrbShimmerLabel,
       {
@@ -12311,6 +12312,9 @@ function IterationGroup({
   if (!label) {
     return null;
   }
+  if (!summary && visibleToolCalls(message).length === 0) {
+    return /* @__PURE__ */ jsx("p", { className: "py-0.5 text-sm text-muted-foreground", children: label });
+  }
   const labelTone = summary ? "text-muted-foreground italic" : "text-muted-foreground";
   return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
     /* @__PURE__ */ jsxs(
@@ -12404,6 +12408,7 @@ function LoopResultAffordance({ message }) {
 }
 function SimpleAssistantGroup({
   messages,
+  activeAssistantId,
   isRunning,
   sessionId,
   artifactFallbacks,
@@ -12415,7 +12420,7 @@ function SimpleAssistantGroup({
   const tail = assistantMessages[assistantMessages.length - 1];
   const tailHasTools = !!(tail?.toolCalls && tail.toolCalls.length > 0);
   const tailIsTextOnly = !!tail && !tailHasTools;
-  const finalText = tailIsTextOnly && tail.content ? tail.content : "";
+  const finalText = tailIsTextOnly && tail.content !== tail.reasoning ? tail.content : "";
   const showErrorInfo = !!tail && tail.status === "error" && !!tail.errorInfo;
   const turnComplete = !isRunning && tail?.status === "complete";
   const summaryPref = finalText !== null ? stripAndParseNextAction(finalText).action?.summary ?? "hide" : "hide";
@@ -12452,7 +12457,7 @@ function SimpleAssistantGroup({
         );
       }
       if (message === tail && tailIsTextOnly && finalText) return null;
-      const rawContent = (message.content ?? "").trim();
+      const rawContent = message.content === message.reasoning ? "" : (message.content ?? "").trim();
       const { action, inferredNarration, cleaned } = stripAndParseNextAction(rawContent);
       const narrationLine = action ? action.body.trim().toLowerCase() === "done" ? null : action.body : inferredNarration;
       const askBody = hasUserFacingAskContent(message) ? cleaned : null;
@@ -12462,6 +12467,7 @@ function SimpleAssistantGroup({
           IterationGroup,
           {
             message,
+            isActive: message.id === activeAssistantId,
             sessionId,
             artifactFallbacks,
             onFileSelect
@@ -12494,6 +12500,7 @@ function SimpleAssistantGroup({
 }
 function AssistantGroup({
   messages,
+  activeAssistantId,
   lastGlobalIndex,
   totalMessages,
   isRunning,
@@ -12509,6 +12516,7 @@ function AssistantGroup({
       SimpleAssistantGroup,
       {
         messages,
+        activeAssistantId,
         isRunning,
         sessionId,
         artifactFallbacks,
@@ -12640,6 +12648,15 @@ function ChatThread({
   onOpenIntegrations
 }) {
   const groups = useMemo(() => groupMessages(messages), [messages]);
+  const activeAssistantId = useMemo(() => {
+    if (!isRunning) return void 0;
+    for (let i = messages.length - 1; i >= 0; i--) {
+      const message = messages[i];
+      if (message.role === "user") return void 0;
+      if (message.role === "assistant") return message.id;
+    }
+    return void 0;
+  }, [messages, isRunning]);
   const pendingAsk = useMemo(() => pendingAskCall(messages), [messages]);
   const askPolicy = useMemo(
     () => askComposerPolicy(pendingAsk),
@@ -12647,13 +12664,26 @@ function ChatThread({
   );
   const awaitingInput = askPolicy !== null;
   const orbActivity = useMemo(
-    () => deriveOrbActivity(
-      messages,
-      viewMode === "simple" ? SIMPLE_MODE_ORB_OPTIONS : void 0
-    ),
+    () => {
+      const activity = deriveOrbActivity(
+        messages,
+        viewMode === "simple" ? SIMPLE_MODE_ORB_OPTIONS : void 0
+      );
+      if (viewMode === "simple" && activity.state === "solving") {
+        const latest = [...messages].reverse().find((message) => message.role === "assistant");
+        if (latest && !latest.toolCalls?.some((tc) => tc.status === "running")) {
+          return { ...activity, label: reasoningTokenLabel(latest, true) };
+        }
+      }
+      return activity;
+    },
     [messages, viewMode]
   );
-  const showWorkingOnIt = useDelayedRunningIndicator(isRunning) && !awaitingInput;
+  const inlineRunningIndicator = useMemo(
+    () => hasInlineRunningIndicator(messages, viewMode),
+    [messages, viewMode]
+  );
+  const showWorkingOnIt = useDelayedRunningIndicator(isRunning) && !awaitingInput && !inlineRunningIndicator;
   const composerLocked = askPolicy?.locked ?? false;
   const composerDisabled = disabled || composerLocked;
   const composerDisabledReason = composerLocked ? askPolicy?.reason : disabledReason;
@@ -12839,6 +12869,7 @@ function ChatThread({
             AssistantGroup,
             {
               messages: group.messages,
+              activeAssistantId,
               lastGlobalIndex: group.lastGlobalIndex,
               totalMessages: messages.length,
               isRunning,
@@ -13081,8 +13112,17 @@ function applyAgentChatEvent(state, event) {
       return collectResearchSource(withResult, toolName, event.data);
     }
     case "harness.wake":
-    case "llm.request":
       return { ...nextState, terminal: false, isRunning: true };
+    case "llm.request":
+      return {
+        ...nextState,
+        terminal: false,
+        isRunning: true,
+        hadDeltas: false,
+        messages: nextState.messages.map(
+          (message) => message.role === "assistant" && message.status === "streaming" && !message.toolCalls?.some((tc) => tc.status === "running") ? { ...message, status: "complete" } : message
+        )
+      };
     case "harness.crash":
     case "stream.timeout":
       return nextState;
@@ -13299,22 +13339,31 @@ function browserMarker(event) {
 function applyLlmDelta(state, event) {
   const deltaContent = stringValue2(event.data.content);
   const deltaReasoning = stringValue2(event.data.reasoning);
+  const reasoningTokens = typeof event.data.reasoning_tokens === "number" && Number.isInteger(event.data.reasoning_tokens) && event.data.reasoning_tokens >= 0 ? event.data.reasoning_tokens : void 0;
   const { turnId, iterationIndex } = readTurnMeta(event.data);
   const messages = [...state.messages];
   const lastIdx = findLastAssistantIndex(messages);
   const lastMsg = lastIdx >= 0 ? messages[lastIdx] : null;
   const hasUserAfter = lastIdx >= 0 && hasUserAfterIndex(messages, lastIdx);
+  const matchesIteration = (turnId === void 0 || lastMsg?.turnId === turnId) && (iterationIndex === void 0 || lastMsg?.iterationIndex === iterationIndex);
+  const sameIteration = turnId !== void 0 && iterationIndex !== void 0 && matchesIteration;
+  if (reasoningTokens !== void 0 && !deltaContent && !deltaReasoning && lastMsg && !hasUserAfter && matchesIteration) {
+    messages[lastIdx] = { ...lastMsg, reasoningTokens };
+    return { ...state, messages };
+  }
   const allToolsDone = Boolean(
     lastMsg?.toolCalls?.length && lastMsg.toolCalls.every((tc) => tc.status !== "running")
   );
   const canAppend = Boolean(
-    lastMsg && lastMsg.status === "streaming" && !allToolsDone && !hasUserAfter
+    lastMsg && lastMsg.status === "streaming" && (!allToolsDone || sameIteration) && !hasUserAfter && matchesIteration
   );
   if (canAppend && lastMsg) {
     messages[lastIdx] = {
       ...lastMsg,
       content: deltaContent ? lastMsg.content + deltaContent : lastMsg.content,
       reasoning: deltaReasoning ? (lastMsg.reasoning ?? "") + deltaReasoning : lastMsg.reasoning,
+      reasoningTokens: reasoningTokens ?? lastMsg.reasoningTokens,
+      reasoningDeltaCount: deltaReasoning ? (lastMsg.reasoningDeltaCount ?? 0) + 1 : lastMsg.reasoningDeltaCount,
       turnId: turnId ?? lastMsg.turnId,
       iterationIndex: iterationIndex ?? lastMsg.iterationIndex
     };
@@ -13324,6 +13373,8 @@ function applyLlmDelta(state, event) {
       role: "assistant",
       content: deltaContent,
       reasoning: deltaReasoning || void 0,
+      reasoningTokens,
+      reasoningDeltaCount: deltaReasoning ? 1 : void 0,
       createdAt: /* @__PURE__ */ new Date(),
       status: "streaming",
       turnId,
@@ -13399,6 +13450,11 @@ function applyLlmResponse(state, event) {
   }
   const inputTokens = numberValue(event.data.input_tokens);
   const outputTokens = numberValue(event.data.output_tokens);
+  const reasoningTokens = numberValue(event.data.reasoning_tokens);
+  if (reasoningTokens > 0) {
+    const responseIdx = findLastAssistantIndex(messages);
+    messages[responseIdx] = { ...messages[responseIdx], reasoningTokens };
+  }
   return {
     ...state,
     messages,
@@ -13407,7 +13463,7 @@ function applyLlmResponse(state, event) {
     tokenUsage: {
       inputTokens,
       outputTokens,
-      reasoningTokens: numberValue(event.data.reasoning_tokens),
+      reasoningTokens,
       cachedInputTokens: numberValue(event.data.cache_read_tokens),
       totalTokens: inputTokens + outputTokens,
       contextWindow: numberValue(event.data.context_window),
@@ -13426,6 +13482,8 @@ ${addition}`;
 }
 function applyLlmThinking(state, event) {
   const reasoningText = stringValue2(event.data.reasoning) || stringValue2(event.data.content);
+  const reasoningTokens = optionalNumberValue(event.data.reasoning_tokens);
+  const reasoningDeltaCount = optionalNumberValue(event.data.reasoning_delta_count);
   const { turnId, iterationIndex } = readTurnMeta(event.data);
   const messages = [...state.messages];
   const idx = findLastAssistantIndex(messages);
@@ -13434,12 +13492,16 @@ function applyLlmThinking(state, event) {
     prev?.toolCalls?.length && prev.toolCalls.every((tc) => tc.status !== "running")
   );
   const hasUserAfter = idx >= 0 && hasUserAfterIndex(messages, idx);
-  if (!prev || allToolsDone || hasUserAfter) {
+  const sameIteration = turnId !== void 0 && iterationIndex !== void 0 && (prev?.turnId === turnId && prev.iterationIndex === iterationIndex || prev?.turnId === void 0 && prev?.iterationIndex === void 0 && prev?.llmResponseEventId === void 0);
+  const differentIteration = !!prev && (turnId !== void 0 && prev.turnId !== void 0 && turnId !== prev.turnId || iterationIndex !== void 0 && prev.iterationIndex !== void 0 && iterationIndex !== prev.iterationIndex);
+  if (!prev || allToolsDone && !sameIteration || hasUserAfter || differentIteration) {
     messages.push({
       id: `evt-${event.eventId}`,
       role: "assistant",
       content: "",
       reasoning: reasoningText,
+      reasoningTokens: reasoningTokens ?? void 0,
+      reasoningDeltaCount: reasoningDeltaCount ?? void 0,
       createdAt: /* @__PURE__ */ new Date(),
       status: "streaming",
       turnId,
@@ -13449,6 +13511,8 @@ function applyLlmThinking(state, event) {
     messages[idx] = {
       ...prev,
       reasoning: appendText(prev.reasoning, reasoningText),
+      reasoningTokens: reasoningTokens ?? prev.reasoningTokens,
+      reasoningDeltaCount: reasoningDeltaCount ?? prev.reasoningDeltaCount,
       turnId: turnId ?? prev.turnId,
       iterationIndex: iterationIndex ?? prev.iterationIndex
     };
@@ -16347,9 +16411,10 @@ async function latexToSvg(latex, display = true) {
 }
 var FormulaCache = class {
   constructor(onReady) {
-    __publicField(this, "onReady", onReady);
     __publicField(this, "entries", /* @__PURE__ */ new Map());
     __publicField(this, "pending", /* @__PURE__ */ new Set());
+    __publicField(this, "onReady");
+    this.onReady = onReady;
   }
   get(latex, fontSize) {
     const hit = this.entries.get(latex);
@@ -16462,11 +16527,13 @@ function strokePointsFromEvent(event) {
 }
 var StrokeBuilder = class {
   constructor(color, width) {
-    __publicField(this, "color", color);
-    __publicField(this, "width", width);
     /** Flat [x0,y0,x1,y1,...], matching the ink object's `pts`. */
     __publicField(this, "pts", []);
     __publicField(this, "started", false);
+    __publicField(this, "color");
+    __publicField(this, "width");
+    this.color = color;
+    this.width = width;
   }
   begin(pt) {
     this.started = true;