@agent-native/core 0.91.2 → 0.92.0

package/corpus/core/src/client/AssistantChat.tsx

@@ -355,7 +355,7 @@ function isAssistantUiDuplicateMessageIdError(error: unknown): boolean {
 
 function cloneContentParts(content: ContentPart[]): ContentPart[] {
   return content.map((part) =>
-    part.type === "text"
+    part.type === "text" || part.type === "reasoning"
       ? { ...part }
       : {
           ...part,

package/corpus/core/src/client/HighlightedCodeBlock.tsx

@@ -8,6 +8,8 @@
  * - A content hash gate means identical re-renders never re-invoke Shiki.
  * - A final highlight is triggered immediately when streaming ends (caller
  *   passes streaming=false).
+ * - Non-streaming first paint waits for Shiki (invisible placeholder reserves
+ *   space) so the UI never snaps from plain text to highlighted HTML.
  *
  * Usage:
  *   <HighlightedCodeBlock code={code} lang="typescript" containerClass="agent-markdown-shiki" />
@@ -69,6 +71,7 @@ export function HighlightedCodeBlock({
   loadHighlighter,
 }: HighlightedCodeBlockProps): React.ReactElement {
   const [html, setHtml] = useState<string | null>(null);
+  const [failed, setFailed] = useState(false);
   // Track the content hash for which html was last rendered so identical
   // re-renders never re-invoke Shiki.
   const renderedHashRef = useRef<number | null>(null);
@@ -111,12 +114,14 @@ export function HighlightedCodeBlock({
         .then((out) => {
           if (!cancelledRef.current) {
             renderedHashRef.current = contentHash;
+            setFailed(false);
             setHtml(out as string);
           }
         })
         .catch(() => {
           if (!cancelledRef.current) {
             renderedHashRef.current = contentHash;
+            setFailed(true);
             setHtml(null);
           }
         });
@@ -148,9 +153,21 @@ export function HighlightedCodeBlock({
       />
     );
   }
+
+  // Streaming: show plain growing text (previous html already kept above when
+  // available). Non-streaming first paint: reserve space invisibly so we never
+  // flash unhighlighted → highlighted.
+  const showPlain = streaming || failed;
   return (
-    <pre>
-      <code className={lang ? `language-${lang}` : undefined}>{code}</code>
-    </pre>
+    <div className={containerClass} aria-busy={!showPlain && !failed}>
+      <pre>
+        <code
+          className={lang ? `language-${lang}` : undefined}
+          style={showPlain ? undefined : { visibility: "hidden" }}
+        >
+          {code}
+        </code>
+      </pre>
+    </div>
   );
 }

package/corpus/core/src/client/agent-chat-adapter.ts

@@ -196,6 +196,7 @@ function contentToContinuationHistory(content: ContentPart[]): string {
       if (part.text.trim()) chunks.push(part.text.trim());
       continue;
     }
+    if (part.type === "reasoning") continue;
     if (part.activity === true) continue;
     const toolSummary = [
       `Tool: ${part.toolName}`,
@@ -577,6 +578,12 @@ function contentToStructuredMessages(
       continue;
     }
 
+    // Reasoning/thinking is UI-only — do not send chain-of-thought back into
+    // model history on continuation.
+    if (part.type === "reasoning") {
+      continue;
+    }
+
     if (isToolCallContentPart(part)) {
       if (part.activity === true) continue;
       const toolCallId = nextToolCallId();
@@ -736,11 +743,11 @@ function combineContinuationHistory(fragments: string[]): string {
 }
 
 function hasContinuationProgress(content: ContentPart[]): boolean {
-  return content.some((part) =>
-    part.type === "text"
-      ? part.text.trim().length > 0
-      : part.result !== undefined,
-  );
+  return content.some((part) => {
+    if (part.type === "text") return part.text.trim().length > 0;
+    if (part.type === "reasoning") return false;
+    return part.result !== undefined;
+  });
 }
 
 const COMPLETED_TOOL_TIMEOUT_NAME_RE =
@@ -880,7 +887,9 @@ function lastUnresolvedToolActivity(
 
 function snapshotContent(content: ContentPart[]): ContentPart[] {
   return content.map((part) =>
-    part.type === "text" ? { ...part } : { ...part, args: { ...part.args } },
+    part.type === "text" || part.type === "reasoning"
+      ? { ...part }
+      : { ...part, args: { ...part.args } },
   );
 }
 
@@ -952,6 +961,22 @@ function contentAfterContinuationPrefix(
       return content.slice(contentIndex);
     }
 
+    if (prefixPart.type === "reasoning" && currentPart.type === "reasoning") {
+      if (currentPart.text === prefixPart.text) {
+        contentIndex += 1;
+        continue;
+      }
+      if (currentPart.text.startsWith(prefixPart.text)) {
+        const appendedText = currentPart.text.slice(prefixPart.text.length);
+        if (appendedText) {
+          delta.push({ type: "reasoning", text: appendedText });
+        }
+        contentIndex += 1;
+        continue;
+      }
+      return content.slice(contentIndex);
+    }
+
     if (
       prefixPart.type === "tool-call" &&
       currentPart.type === "tool-call" &&

package/corpus/core/src/client/chat/message-components.tsx

@@ -10,6 +10,7 @@ import {
   ActionBarPrimitive,
   BranchPickerPrimitive,
   ComposerPrimitive,
+  useMessagePartReasoning,
 } from "@assistant-ui/react";
 import type { Attachment } from "@assistant-ui/react";
 import {
@@ -66,6 +67,8 @@ import {
   ToolCallFallback,
   FilesChangedSummary,
   ChatRunningContext,
+  ReasoningCell,
+  WorkedForSummary,
 } from "./tool-call-display.js";
 
 // ─── Pending selection context key ───────────────────────────────────────────
@@ -793,7 +796,7 @@ function assistantMessageHasRenderableContent(message: {
   return content.some((part) => {
     if (!part || typeof part !== "object") return false;
     const type = (part as { type?: unknown }).type;
-    if (type === "text") {
+    if (type === "text" || type === "reasoning") {
       const text = (part as { text?: unknown }).text;
       return typeof text === "string" && text.trim().length > 0;
     }
@@ -837,6 +840,21 @@ export function shouldShowAssistantMessageFooter({
   return !chatRunning && statusIsTerminal;
 }
 
+function ReasoningMessagePart() {
+  const part = useMessagePartReasoning();
+  const isStreaming = part.status?.type === "running";
+  return <ReasoningCell text={part.text} isStreaming={isStreaming} />;
+}
+
+function groupAssistantWorkParts(part: {
+  type?: string;
+}): ["group-work"] | null {
+  if (part.type === "reasoning" || part.type === "tool-call") {
+    return ["group-work"];
+  }
+  return null;
+}
+
 export function AssistantMessage() {
   const [restoreState, setRestoreState] = useState<
     "idle" | "confirming" | "restoring"
@@ -860,6 +878,39 @@ export function AssistantMessage() {
   });
   const cpCtx = React.useContext(CheckpointContext);
 
+  // Capture live run duration when this message finishes streaming.
+  const runStartedAtRef = useRef<number | null>(null);
+  const [capturedDurationMs, setCapturedDurationMs] = useState<number | null>(
+    null,
+  );
+  useEffect(() => {
+    if (chatRunning && isLast) {
+      if (runStartedAtRef.current == null) {
+        runStartedAtRef.current = Date.now();
+      }
+      return;
+    }
+    if (
+      !chatRunning &&
+      isLast &&
+      runStartedAtRef.current != null &&
+      capturedDurationMs == null
+    ) {
+      setCapturedDurationMs(Date.now() - runStartedAtRef.current);
+      runStartedAtRef.current = null;
+    }
+  }, [chatRunning, isLast, capturedDurationMs]);
+
+  // Animate collapse only when this message just finished running in-session.
+  const wasRunningRef = useRef(false);
+  const [animateCollapse, setAnimateCollapse] = useState(false);
+  useEffect(() => {
+    if (wasRunningRef.current && !chatRunning && isComplete && isLast) {
+      setAnimateCollapse(true);
+    }
+    wasRunningRef.current = chatRunning && isLast;
+  }, [chatRunning, isComplete, isLast]);
+
   const handleRestore = useCallback(async () => {
     if (restoreState === "idle") {
       setRestoreState("confirming");
@@ -926,6 +977,13 @@ export function AssistantMessage() {
         (p.structuredMeta.toolKind === "edit" ||
           p.structuredMeta.toolKind === "write"),
     );
+  const hasCollapsibleWork =
+    Array.isArray(msgContent) &&
+    msgContent.some(
+      (p) =>
+        p.type === "reasoning" ||
+        (p.type === "tool-call" && p.activity !== true),
+    );
 
   if (!hasRenderableContent) return null;
 
@@ -935,14 +993,33 @@ export function AssistantMessage() {
       style={{ contentVisibility: isComplete ? "auto" : "visible" }}
     >
       <div className="w-full max-w-[95%] text-sm leading-relaxed text-foreground">
-        <MessagePrimitive.Parts
-          components={{
-            Text: MarkdownText,
-            tools: {
-              Fallback: ToolCallFallback,
-            },
+        <MessagePrimitive.GroupedParts groupBy={groupAssistantWorkParts}>
+          {({ part, children }) => {
+            switch (part.type) {
+              case "group-work": {
+                const showSummary =
+                  isComplete && !chatRunning && hasCollapsibleWork;
+                if (!showSummary) return <>{children}</>;
+                return (
+                  <WorkedForSummary
+                    durationMs={capturedDurationMs}
+                    autoCollapse={animateCollapse}
+                  >
+                    {children}
+                  </WorkedForSummary>
+                );
+              }
+              case "text":
+                return <MarkdownText />;
+              case "reasoning":
+                return <ReasoningMessagePart />;
+              case "tool-call":
+                return part.toolUI ?? <ToolCallFallback {...part} />;
+              default:
+                return null;
+            }
           }}
-        />
+        </MessagePrimitive.GroupedParts>
         {isComplete && hasCodeAgentTools && msgContent && (
           <FilesChangedSummary parts={msgContent} />
         )}