@marimo-team/islands 0.25.3-dev34 → 0.25.3-dev349

package/src/components/chat/capabilities-popover.tsx

@@ -9,10 +9,8 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { ExternalLink } from "@/components/ui/links";
 import { Switch } from "@/components/ui/switch";
 import { chatOptionsAtom } from "@/core/ai/state";
-import { cn } from "@/utils/cn";
 
 export const CapabilitiesPopover: React.FC = () => {
   const [chatOptions, setChatOptions] = useAtom(chatOptionsAtom);
@@ -29,11 +27,7 @@ export const CapabilitiesPopover: React.FC = () => {
           data-active={webSearchOn || undefined}
           variant="text"
           size="icon"
-          className={cn(
-            "h-6 w-6 shrink-0 bg-muted hover:bg-muted/30",
-            webSearchOn &&
-              "bg-primary/15 text-primary ring-1 ring-primary/30 opacity-100 hover:bg-primary/20",
-          )}
+          className="chat-control h-6 w-6 shrink-0"
         >
           <SlidersHorizontalIcon className="h-3.5 w-3.5" />
         </Button>
@@ -46,10 +40,7 @@ export const CapabilitiesPopover: React.FC = () => {
           <div className="flex flex-col gap-0.5">
             <span className="text-sm font-semibold">Web search</span>
             <span className="text-xs text-muted-foreground">
-              Search the web when the model supports it.{" "}
-              <ExternalLink href="https://docs.marimo.io/guides/editor_features/tools#web-search-and-fetch">
-                Learn more
-              </ExternalLink>
+              Search the web when the model supports it.
             </span>
           </div>
           <Switch

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

@@ -8,7 +8,7 @@ import {
   ImageIcon,
   PaperclipIcon,
   SendHorizontalIcon,
-  StopCircleIcon,
+  SquareIcon,
   XIcon,
 } from "lucide-react";
 import { useState } from "react";
@@ -88,19 +88,20 @@ export const SendButton = ({
 }) => {
   const loadingContent = showStopLabel ? (
     <div className="flex flex-row items-center gap-1 px-1.5">
-      <span className="text-xs text-error">Stop</span>
+      <span className="text-xs">Stop</span>
       <Spinner size="small" />
     </div>
   ) : (
-    <StopCircleIcon className="size-4 text-error" />
+    <SquareIcon className="size-3.5" aria-hidden={true} />
   );
 
   return (
     <Tooltip content={isLoading ? "Stop" : "Submit"}>
       <Button
+        aria-label={isLoading ? "Stop" : "Submit"}
         variant="text"
         size="sm"
-        className="h-6 min-w-6 p-0 hover:bg-muted/30 cursor-pointer"
+        className="chat-control h-6 min-w-6 p-0 hover:bg-muted/30 cursor-pointer"
         onClick={isLoading ? onStop : onSendClick}
         disabled={isLoading ? false : isEmpty}
       >
@@ -124,6 +125,8 @@ export const AddContextButton = ({
   return (
     <Tooltip content="Add context">
       <Button
+        className="chat-control"
+        aria-label="Add context"
         variant="text"
         size="icon"
         onClick={handleAddContext}
@@ -148,6 +151,8 @@ export const AttachFileButton = ({
     <>
       <Tooltip content="Attach a file">
         <Button
+          className="chat-control"
+          aria-label="Attach a file"
           variant="text"
           size="icon"
           onClick={() => fileInputRef.current?.click()}

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

@@ -3,62 +3,99 @@
 import type {
   ChatAddToolApproveResponseFunction,
   DataUIPart,
+  DynamicToolUIPart,
   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 { MarkdownRenderer } from "../markdown/markdown-renderer";
+import { AgentActivity } from "./agent-activity";
 import { AttachmentRenderer, SourceChip } from "./chat-components";
-import { ReasoningAccordion } from "./reasoning-accordion";
+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;
-}) => {
-  return (
-    <>{message.parts.map((part, index) => renderUIMessagePart(part, index))}</>
-  );
+}): React.ReactNode[] => {
+  const running = isActive && isLast;
+  const { work, rest } = splitTurn(message.parts);
+  const content: React.ReactNode[] = [];
+
+  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(
+      <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))}
+      />,
+    );
+  }
+  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-2"
           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;
     }
 
@@ -69,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 <MarkdownRenderer 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} />;
@@ -103,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
@@ -154,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-");
 }

package/src/components/chat/chat-history-popover.tsx

@@ -92,7 +92,12 @@ export const ChatHistoryPopover: React.FC<ChatHistoryPopoverProps> = ({
     <Popover open={open} onOpenChange={setOpen}>
       <Tooltip content="Previous chats">
         <PopoverTrigger asChild={true}>
-          <Button variant="text" size="icon" aria-label="Previous chats">
+          <Button
+            className="chat-control"
+            variant="text"
+            size="icon"
+            aria-label="Previous chats"
+          >
             <ClockIcon className="h-4 w-4" />
           </Button>
         </PopoverTrigger>

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

@@ -0,0 +1,15 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useAtomValue } from "jotai";
+import { MarkdownRenderer } from "@/components/markdown/markdown-renderer";
+import { aiAtom } from "@/core/config/config";
+
+export function ChatMarkdown({ content }: { content: string }) {
+  const mode = useAtomValue(aiAtom)?.mode;
+  return (
+    <MarkdownRenderer
+      content={content}
+      allowNotebookInsertion={mode !== "agent" && mode !== "code_mode"}
+    />
+  );
+}