@marimo-team/islands 0.25.3-dev26 → 0.25.3-dev262

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,6 +3,7 @@
 import type {
   ChatAddToolApproveResponseFunction,
   DataUIPart,
+  DynamicToolUIPart,
   ToolUIPart,
   UIMessage,
 } from "ai";
@@ -11,9 +12,10 @@ 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 { ChatMarkdown } from "./chat-markdown";
 import { AttachmentRenderer, SourceChip } from "./chat-components";
 import { ReasoningAccordion } from "./reasoning-accordion";
+import { ToolActivityGroup } from "./tool-call/tool-activity-group";
 import { ToolCallView } from "./tool-call/tool-call-view";
 
 export const renderUIMessage = ({
@@ -30,9 +32,52 @@ export const renderUIMessage = ({
   isActive: boolean;
   addToolApprovalResponse?: ChatAddToolApproveResponseFunction;
 }) => {
-  return (
-    <>{message.parts.map((part, index) => renderUIMessagePart(part, index))}</>
-  );
+  const content: React.ReactNode[] = [];
+  let activity: { part: ToolUIPart | DynamicToolUIPart; index: number }[] = [];
+
+  const flushActivity = () => {
+    if (activity.length === 0) {
+      return;
+    }
+    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>,
+    );
+    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();
+
+  return content;
 
   function renderUIMessagePart(
     part: UIMessage["parts"][number],
@@ -46,7 +91,7 @@ export const renderUIMessage = ({
           toolName={part.type}
           result={part.output}
           errorText={part.state === "output-error" ? part.errorText : undefined}
-          className="my-2"
+          className="my-1"
           state={part.state}
           input={part.input}
           approval={part.approval}
@@ -75,7 +120,7 @@ export const renderUIMessage = ({
             </React.Fragment>
           );
         }
-        return <MarkdownRenderer key={index} content={part.text} />;
+        return <ChatMarkdown key={index} content={part.text} />;
       case "reasoning":
         return (
           <ReasoningAccordion

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"}
+    />
+  );
+}