@marimo-team/islands 0.25.3-dev266 → 0.25.3-dev267

package/src/components/chat/agent-activity.tsx

@@ -0,0 +1,132 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { ChevronRightIcon } from "lucide-react";
+import React from "react";
+import { cn } from "@/utils/cn";
+import { formatDuration, type TurnTiming } from "./turn-timing";
+
+interface AgentActivityProps {
+  running: boolean;
+  thinking?: boolean;
+  interrupted?: boolean;
+  defaultOpen?: boolean;
+  timing?: TurnTiming;
+  toolCount?: number;
+  failedCount?: number;
+  steps?: React.ReactNode[];
+}
+
+export const AgentActivity: React.FC<AgentActivityProps> = ({
+  running,
+  thinking = false,
+  interrupted = false,
+  defaultOpen = false,
+  timing,
+  toolCount = 0,
+  failedCount = 0,
+  steps = NO_STEPS,
+}) => {
+  const [userOpen, setUserOpen] = React.useState<boolean>();
+  const open = userOpen ?? (running || defaultOpen);
+  const now = useNow(running);
+  const hasSteps = steps.length > 0;
+
+  const header = running ? (
+    <>
+      <output className={SHIMMER_CLASS}>
+        {thinking ? "Thinking…" : "Working…"}
+      </output>
+      {timing && (
+        <span className="tabular-nums">
+          {formatDuration(now - timing.startedAt)}
+        </span>
+      )}
+    </>
+  ) : (
+    <>
+      <span>{doneLabel({ interrupted, timing, toolCount })}</span>
+      {failedCount > 0 && (
+        <span className="text-(--red-11)">· {failedCount} failed</span>
+      )}
+    </>
+  );
+
+  return (
+    <div className="my-1 w-full">
+      {hasSteps ? (
+        <button
+          type="button"
+          onClick={() => setUserOpen(!open)}
+          aria-expanded={open}
+          className="group/activity -mx-1.5 flex items-center gap-1.5 rounded-md px-1.5 py-0.5 text-xs text-muted-foreground transition-colors hover:bg-foreground/6 hover:text-foreground focus-visible:outline-1 focus-visible:outline-(--slate-8)"
+        >
+          {header}
+          <ChevronRightIcon
+            aria-hidden={true}
+            className={cn(
+              "size-3 shrink-0 opacity-60 transition-transform group-hover/activity:opacity-100",
+              open && "rotate-90",
+            )}
+          />
+        </button>
+      ) : (
+        <div className="flex items-center gap-1.5 py-0.5 text-xs text-muted-foreground">
+          {header}
+        </div>
+      )}
+      {open && hasSteps && (
+        <div className="mt-1 mb-2 ml-1.5 flex flex-col gap-1 border-l border-foreground/15 pl-3">
+          {steps}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const NO_STEPS: React.ReactNode[] = [];
+
+const SHIMMER_CLASS =
+  "animate-shimmer bg-[linear-gradient(90deg,var(--muted-foreground)_35%,var(--foreground)_50%,var(--muted-foreground)_65%)] bg-size-[200%_100%] bg-clip-text text-transparent motion-reduce:animate-none";
+
+function doneLabel({
+  interrupted,
+  timing,
+  toolCount,
+}: {
+  interrupted: boolean;
+  timing?: TurnTiming;
+  toolCount: number;
+}): string {
+  const duration =
+    timing?.finishedAt == null
+      ? undefined
+      : formatDuration(timing.finishedAt - timing.startedAt);
+  if (interrupted) {
+    return duration ? `Stopped after ${duration}` : "Stopped";
+  }
+  if (toolCount === 0) {
+    return duration ? `Thought for ${duration}` : "Thought process";
+  }
+  if (duration) {
+    return `Worked for ${duration}`;
+  }
+  return `Worked through ${toolCount} ${toolCount === 1 ? "step" : "steps"}`;
+}
+
+function useNow(ticking: boolean): number {
+  const [now, setNow] = React.useState(() => Date.now());
+  React.useEffect(() => {
+    if (!ticking) {
+      return;
+    }
+    const tick = () => setNow(Date.now());
+    // Catch up at once when resuming, e.g. after a tool approval.
+    const frame = requestAnimationFrame(tick);
+    const id = setInterval(tick, 1000);
+    return () => {
+      cancelAnimationFrame(frame);
+      clearInterval(id);
+    };
+  }, [ticking]);
+  return now;
+}

package/src/components/chat/chat-display.tsx

@@ -7,103 +7,95 @@ import type {
   ToolUIPart,
   UIMessage,
 } from "ai";
-import { ExternalLinkIcon, FileTextIcon } from "lucide-react";
+import { BrainIcon, ExternalLinkIcon, FileTextIcon } from "lucide-react";
 import React from "react";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import { logNever } from "@/utils/assertNever";
-import { Logger } from "@/utils/Logger";
-import { ChatMarkdown } from "./chat-markdown";
+import { AgentActivity } from "./agent-activity";
 import { AttachmentRenderer, SourceChip } from "./chat-components";
-import { ReasoningAccordion } from "./reasoning-accordion";
-import { ToolActivityGroup } from "./tool-call/tool-activity-group";
+import { ChatMarkdown } from "./chat-markdown";
+import { PENDING_TOOL_STATES } from "./tool-call/shared";
 import { ToolCallView } from "./tool-call/tool-call-view";
+import { getTurnTiming } from "./turn-timing";
+
+type Part = UIMessage["parts"][number];
+interface IndexedPart {
+  part: Part;
+  index: number;
+}
 
 export const renderUIMessage = ({
   message,
-  isStreamingReasoning,
   isLast,
   isActive,
+  turnStartedAt,
   addToolApprovalResponse,
 }: {
   message: UIMessage;
-  isStreamingReasoning: boolean;
   isLast: boolean;
   /** Whether the chat is currently streaming/submitting a response. */
   isActive: boolean;
+  turnStartedAt?: number | null;
   addToolApprovalResponse?: ChatAddToolApproveResponseFunction;
-}) => {
+}): React.ReactNode[] => {
+  const running = isActive && isLast;
+  const { work, rest } = splitTurn(message.parts);
   const content: React.ReactNode[] = [];
-  let activity: { part: ToolUIPart | DynamicToolUIPart; index: number }[] = [];
 
-  const flushActivity = () => {
-    if (activity.length === 0) {
-      return;
-    }
+  if (work.length > 0 || (running && rest.length === 0)) {
+    const tools = work.flatMap(({ part }) =>
+      isAnyToolPart(part) ? [part] : [],
+    );
+    const timing =
+      running && turnStartedAt != null
+        ? { startedAt: turnStartedAt }
+        : getTurnTiming(message);
     content.push(
-      <ToolActivityGroup
-        key={activity[0].index}
-        tools={activity.map(({ part }) => ({
-          toolName: part.type === "dynamic-tool" ? part.toolName : part.type,
-          state: part.state,
-        }))}
-        isActive={isActive && isLast}
-      >
-        {activity.map(({ part, index }) => renderUIMessagePart(part, index))}
-      </ToolActivityGroup>,
+      <AgentActivity
+        key="activity"
+        running={running}
+        thinking={
+          rest.length === 0 &&
+          (work.length === 0 || work.at(-1)?.part.type === "reasoning")
+        }
+        interrupted={
+          !running &&
+          (timing?.stopped === true ||
+            tools.some((part) => PENDING_TOOL_STATES.has(part.state)))
+        }
+        defaultOpen={!rest.some(({ part }) => !isPendingApproval(part))}
+        timing={timing}
+        toolCount={tools.length}
+        failedCount={
+          tools.filter((part) => part.state === "output-error").length
+        }
+        steps={work.map(({ part, index }) => renderPart(part, index, true))}
+      />,
     );
-    activity = [];
-  };
-
-  message.parts.forEach((part, index) => {
-    // SDK step boundaries and invisible parts should not split visible activity.
-    if (
-      part.type === "step-start" ||
-      isDataPart(part) ||
-      (part.type === "text" && !part.text.trim())
-    ) {
-      return;
-    }
-    if (
-      (isToolPart(part) || part.type === "dynamic-tool") &&
-      part.state !== "output-error" &&
-      part.state !== "output-denied" &&
-      part.state !== "approval-requested"
-    ) {
-      activity.push({ part, index });
-      return;
-    }
-    flushActivity();
-    content.push(renderUIMessagePart(part, index));
-  });
-  flushActivity();
-
+  }
+  for (const { part, index } of rest) {
+    content.push(renderPart(part, index, false));
+  }
   return content;
 
-  function renderUIMessagePart(
-    part: UIMessage["parts"][number],
-    index: number,
-  ) {
-    if (isToolPart(part)) {
+  function renderPart(part: Part, index: number, inActivity: boolean) {
+    if (isToolPart(part) || part.type === "dynamic-tool") {
       return (
         <ToolCallView
           key={index}
-          index={index}
-          toolName={part.type}
+          toolName={part.type === "dynamic-tool" ? part.toolName : part.type}
           result={part.output}
           errorText={part.state === "output-error" ? part.errorText : undefined}
-          className="my-1"
           state={part.state}
           input={part.input}
           approval={part.approval}
           onApprove={addToolApprovalResponse}
-          isLive={isLast}
-          isActive={isActive}
+          isActive={running}
+          className={inActivity ? undefined : "my-1"}
         />
       );
     }
-
     if (isDataPart(part)) {
-      Logger.debug("Found data part", part);
       return null;
     }
 
@@ -114,26 +106,30 @@ export const renderUIMessage = ({
         if (part.text.includes("<marimo-")) {
           return (
             <React.Fragment key={index}>
-              {renderHTML({
-                html: part.text,
-              })}
+              {renderHTML({ html: part.text })}
             </React.Fragment>
           );
         }
-        return <ChatMarkdown key={index} content={part.text} />;
+        return (
+          <div key={index} className={inActivity ? "py-1.5" : undefined}>
+            <ChatMarkdown content={part.text} />
+          </div>
+        );
       case "reasoning":
         return (
-          <ReasoningAccordion
+          <div
             key={index}
-            reasoning={part.text}
-            index={index}
-            isStreaming={
-              isStreamingReasoning &&
-              isLast &&
-              // If there are multiple reasoning parts, only stream the last one
-              index === (message.parts.length || 0) - 1
-            }
-          />
+            className="flex gap-1.5 py-1.5 text-muted-foreground"
+          >
+            <BrainIcon
+              aria-hidden={true}
+              className="-ml-px mt-1 size-3 shrink-0"
+            />
+            <div className="min-w-0 italic [&_p]:my-1 [&_p:first-child]:mt-0">
+              <span className="sr-only">Reasoning: </span>
+              <ChatMarkdown content={part.text} />
+            </div>
+          </div>
         );
       case "file":
         return <AttachmentRenderer attachment={part} key={index} />;
@@ -148,23 +144,6 @@ export const renderUIMessage = ({
             }}
           />
         );
-      case "dynamic-tool":
-        return (
-          <ToolCallView
-            key={index}
-            toolName={part.toolName}
-            result={part.output}
-            errorText={
-              part.state === "output-error" ? part.errorText : undefined
-            }
-            state={part.state}
-            input={part.input}
-            approval={part.approval}
-            onApprove={addToolApprovalResponse}
-            isLive={isLast}
-            isActive={isActive}
-          />
-        );
       case "source-document":
         return (
           <SourceChip
@@ -199,12 +178,62 @@ export const renderUIMessage = ({
   }
 };
 
-function isToolPart(part: UIMessage["parts"][number]): part is ToolUIPart {
+export function getAnswerText(message: UIMessage): string {
+  const textOf = (parts: IndexedPart[]) =>
+    parts.flatMap(({ part }) => (part.type === "text" ? [part.text] : []));
+  const { work, rest } = splitTurn(message.parts);
+  const answer = textOf(rest);
+  return (answer.length > 0 ? answer : textOf(work)).join("\n");
+}
+
+function splitTurn(parts: UIMessage["parts"]): {
+  work: IndexedPart[];
+  rest: IndexedPart[];
+} {
+  const visible = parts
+    .map((part, index) => ({ part, index }))
+    .filter(({ part }) => isVisible(part));
+  const lastWork = visible.findLastIndex(
+    ({ part }) =>
+      part.type === "reasoning" ||
+      (isAnyToolPart(part) && !isPendingApproval(part)),
+  );
+  return {
+    work: visible.filter(
+      ({ part }, i) => i <= lastWork && !isPendingApproval(part),
+    ),
+    rest: visible.filter(
+      ({ part }, i) => i > lastWork || isPendingApproval(part),
+    ),
+  };
+}
+
+function isPendingApproval(part: Part): boolean {
+  return isAnyToolPart(part) && part.state === "approval-requested";
+}
+
+function isVisible(part: Part): boolean {
+  switch (part.type) {
+    case "step-start":
+      return false;
+    case "text":
+      return part.text.trim().length > 0;
+    case "reasoning":
+      // Some models (e.g. OpenAI's o-series) emit empty reasoning parts.
+      return part.text.trim().length > 0;
+    default:
+      return !isDataPart(part);
+  }
+}
+
+function isAnyToolPart(part: Part): part is ToolUIPart | DynamicToolUIPart {
+  return isToolPart(part) || part.type === "dynamic-tool";
+}
+
+function isToolPart(part: Part): part is ToolUIPart {
   return part.type.startsWith("tool-");
 }
 
-function isDataPart(
-  part: UIMessage["parts"][number],
-): part is DataUIPart<Record<string, unknown>> {
+function isDataPart(part: Part): part is DataUIPart<Record<string, unknown>> {
   return part.type.startsWith("data-");
 }