@marimo-team/islands 0.25.2-dev0 → 0.25.2-dev100

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

@@ -0,0 +1,157 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ModalProvider } from "@/components/modal/ImperativeModal";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { type Chat, type ChatId, chatStateAtom } from "@/core/ai/state";
+import { ChatHistoryPopover } from "../chat-history-popover";
+
+const activeId = "active" as ChatId;
+const olderId = "older" as ChatId;
+
+function chat(id: ChatId): Chat {
+  return {
+    id,
+    title: `${id} conversation`,
+    messages: [
+      {
+        id: `${id}-message`,
+        role: "user",
+        parts: [{ type: "text", text: "Hello" }],
+      },
+    ],
+    createdAt: Date.now(),
+    updatedAt: Date.now(),
+  };
+}
+
+function setup(isLoading = false) {
+  const store = createStore();
+  const setActiveChat = vi.fn();
+  const onDeleteChats = vi.fn();
+
+  render(
+    <Provider store={store}>
+      <ModalProvider>
+        <TooltipProvider>
+          <ChatHistoryPopover
+            activeChatId={activeId}
+            setActiveChat={setActiveChat}
+            onDeleteChats={onDeleteChats}
+            isLoading={isLoading}
+          />
+        </TooltipProvider>
+      </ModalProvider>
+    </Provider>,
+  );
+  act(() =>
+    store.set(chatStateAtom, {
+      chats: new Map([
+        [activeId, chat(activeId)],
+        [olderId, chat(olderId)],
+      ]),
+      activeChatId: activeId,
+    }),
+  );
+
+  fireEvent.click(screen.getByRole("button", { name: "Previous chats" }));
+  return { store, setActiveChat, onDeleteChats };
+}
+
+describe("chat history management", () => {
+  beforeEach(() => window.localStorage.clear());
+  afterEach(() => vi.restoreAllMocks());
+
+  it("deletes individual chats immediately without selecting them or closing history", () => {
+    const { setActiveChat, onDeleteChats } = setup();
+    fireEvent.click(
+      screen.getByRole("button", { name: "Delete chat: older conversation" }),
+    );
+    expect(screen.queryByRole("alertdialog")).not.toBeInTheDocument();
+    expect(screen.getByPlaceholderText("Search chat history...")).toBeVisible();
+    expect(onDeleteChats).toHaveBeenCalledExactlyOnceWith(olderId);
+    expect(setActiveChat).not.toHaveBeenCalled();
+  });
+
+  it("deletes all chats only after confirmation", () => {
+    const { onDeleteChats } = setup();
+    fireEvent.change(screen.getByPlaceholderText("Search chat history..."), {
+      target: { value: "older" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Delete all chats" }));
+    expect(screen.getByRole("alertdialog")).toHaveTextContent("all notebooks");
+    expect(onDeleteChats).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByRole("button", { name: "Delete all chats" }));
+    expect(onDeleteChats).toHaveBeenCalledExactlyOnceWith(null);
+  });
+
+  it("keeps focus in history after deleting the focused chat", () => {
+    const { store, onDeleteChats } = setup();
+    onDeleteChats.mockImplementation(() => {
+      store.set(chatStateAtom, (prev) => {
+        const chats = new Map(prev.chats);
+        chats.delete(olderId);
+        return { ...prev, chats };
+      });
+    });
+    const searchInput = screen.getByPlaceholderText("Search chat history...");
+    fireEvent.change(searchInput, { target: { value: "older" } });
+    const deleteButton = screen.getByRole("button", {
+      name: "Delete chat: older conversation",
+    });
+    act(() => deleteButton.focus());
+    expect(deleteButton).toHaveFocus();
+
+    fireEvent.click(deleteButton);
+
+    expect(deleteButton).not.toBeInTheDocument();
+    expect(searchInput).toHaveFocus();
+    expect(screen.getByText("No chats found")).toBeVisible();
+  });
+
+  it("prevents deleting a streaming chat while allowing cleanup of other chats", () => {
+    setup(true);
+    expect(
+      screen.getByRole("button", { name: "Delete chat: active conversation" }),
+    ).toBeDisabled();
+    expect(
+      screen.getByRole("button", { name: "Delete all chats" }),
+    ).toBeDisabled();
+    expect(
+      screen.getByRole("button", { name: "Delete chat: older conversation" }),
+    ).toBeEnabled();
+  });
+
+  it("warns above 50 chats and clears the warning after cleanup", () => {
+    const { store } = setup();
+    const chats = new Map<ChatId, Chat>(
+      Array.from({ length: 51 }, (_, index) => {
+        const id = `chat-${index}` as ChatId;
+        return [id, chat(id)];
+      }),
+    );
+    act(() => store.set(chatStateAtom, { chats, activeChatId: null }));
+    const warning = screen.getByText(
+      /Delete old chats to free up browser storage/,
+    );
+    expect(warning).toBeVisible();
+    expect(warning).toHaveTextContent(
+      "You have over 50 chats. Delete old chats to free up browser storage.",
+    );
+
+    act(() =>
+      store.set(chatStateAtom, (prev) => ({
+        ...prev,
+        chats: new Map([...prev.chats].slice(1)),
+      })),
+    );
+    expect(
+      screen.queryByText(/Delete old chats to free up browser storage/),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.getByText("Chats are shared across notebooks."),
+    ).toBeVisible();
+  });
+});

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

@@ -1,9 +1,16 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { useAtomValue } from "jotai";
-import { BotMessageSquareIcon, ClockIcon, SearchIcon } from "lucide-react";
-import { useMemo, useState } from "react";
+import {
+  BotMessageSquareIcon,
+  ClockIcon,
+  SearchIcon,
+  Trash2Icon,
+} from "lucide-react";
+import { useMemo, useRef, useState } from "react";
 import { useLocale } from "react-aria";
+import { useImperativeModal } from "@/components/modal/ImperativeModal";
+import { AlertDialogDestructiveAction } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -19,18 +26,48 @@ import { timeAgo } from "@/utils/dates";
 import { PanelEmptyState } from "../editor/chrome/panels/empty-state";
 import { groupChatsByDate } from "./chat-history-utils";
 
+const CHAT_HISTORY_WARNING_THRESHOLD = 50;
+
 interface ChatHistoryPopoverProps {
   activeChatId: ChatId | undefined;
   setActiveChat: (id: ChatId | null) => void;
+  onDeleteChats: (id: ChatId | null) => void;
+  isLoading: boolean;
 }
 
 export const ChatHistoryPopover: React.FC<ChatHistoryPopoverProps> = ({
   activeChatId,
   setActiveChat,
+  onDeleteChats,
+  isLoading,
 }) => {
   const chatState = useAtomValue(chatStateAtom);
   const { locale } = useLocale();
   const [searchQuery, setSearchQuery] = useState("");
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const [open, setOpen] = useState(false);
+  const { openConfirm, closeModal } = useImperativeModal();
+
+  const confirmDeleteAllChats = () => {
+    // Close the popover before opening a modal so focus moves to the dialog.
+    setOpen(false);
+    openConfirm({
+      title: "Delete all chats?",
+      description:
+        "This will permanently delete all chat history for all notebooks on this site in this browser. This cannot be undone.",
+      variant: "destructive",
+      confirmAction: (
+        <AlertDialogDestructiveAction
+          onClick={() => {
+            onDeleteChats(null);
+            closeModal();
+          }}
+        >
+          Delete all chats
+        </AlertDialogDestructiveAction>
+      ),
+    });
+  };
 
   const chats = useMemo(() => {
     return [...chatState.chats.values()].toSorted(
@@ -52,10 +89,10 @@ export const ChatHistoryPopover: React.FC<ChatHistoryPopoverProps> = ({
   }, [filteredChats]);
 
   return (
-    <Popover>
+    <Popover open={open} onOpenChange={setOpen}>
       <Tooltip content="Previous chats">
         <PopoverTrigger asChild={true}>
-          <Button variant="text" size="icon">
+          <Button variant="text" size="icon" aria-label="Previous chats">
             <ClockIcon className="h-4 w-4" />
           </Button>
         </PopoverTrigger>
@@ -63,6 +100,7 @@ export const ChatHistoryPopover: React.FC<ChatHistoryPopoverProps> = ({
       <PopoverContent className="w-[480px] p-0" align="start" side="right">
         <div className="pt-3 px-3 w-full">
           <Input
+            ref={searchInputRef}
             placeholder="Search chat history..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
@@ -92,25 +130,46 @@ export const ChatHistoryPopover: React.FC<ChatHistoryPopoverProps> = ({
                 </div>
                 <div>
                   {group.chats.map((chat) => (
-                    <button
+                    <div
                       key={chat.id}
                       className={cn(
-                        "w-full p-1 rounded-md cursor-pointer text-left flex items-center justify-between",
+                        "w-full rounded-md flex items-center justify-between",
                         chat.id === activeChatId && "bg-accent",
                         chat.id !== activeChatId && "hover:bg-muted/20",
                       )}
-                      onClick={() => {
-                        setActiveChat(chat.id);
-                      }}
-                      type="button"
                     >
-                      <div className="flex-1 min-w-0">
-                        <div className="text-sm truncate">{chat.title}</div>
-                      </div>
-                      <div className="text-xs text-muted-foreground/60 ml-2 shrink-0">
-                        {timeAgo(chat.updatedAt, locale)}
-                      </div>
-                    </button>
+                      <button
+                        className="flex flex-1 min-w-0 items-center justify-between p-1 text-left cursor-pointer"
+                        onClick={() => setActiveChat(chat.id)}
+                        type="button"
+                      >
+                        <span className="text-sm truncate">{chat.title}</span>
+                        <span className="text-xs text-muted-foreground/60 ml-2 shrink-0">
+                          {timeAgo(chat.updatedAt, locale)}
+                        </span>
+                      </button>
+                      <Tooltip
+                        content={
+                          isLoading && chat.id === activeChatId
+                            ? "Stop the response before deleting this chat"
+                            : "Delete chat"
+                        }
+                      >
+                        <Button
+                          variant="text"
+                          size="icon"
+                          className="text-muted-foreground/90 hover:text-destructive transition-colors ml-px"
+                          aria-label={`Delete chat: ${chat.title}`}
+                          disabled={isLoading && chat.id === activeChatId}
+                          onClick={() => {
+                            searchInputRef.current?.focus();
+                            onDeleteChats(chat.id);
+                          }}
+                        >
+                          <Trash2Icon className="h-3.5 w-3.5" />
+                        </Button>
+                      </Tooltip>
+                    </div>
                   ))}
                 </div>
                 {/* If last group, don't show a divider */}
@@ -119,6 +178,28 @@ export const ChatHistoryPopover: React.FC<ChatHistoryPopoverProps> = ({
             ))}
           </div>
         </ScrollArea>
+        {chats.length > 0 && (
+          <div className="border-t p-2 flex items-center justify-between gap-2">
+            {chats.length > CHAT_HISTORY_WARNING_THRESHOLD ? (
+              <p className="text-xs text-muted-foreground">
+                You have over <b>{CHAT_HISTORY_WARNING_THRESHOLD}</b> chats.
+                Delete old chats to free up browser storage.
+              </p>
+            ) : (
+              <p className="text-xs text-muted-foreground">
+                Chats are shared across notebooks.
+              </p>
+            )}
+            <Button
+              variant="linkDestructive"
+              size="xs"
+              disabled={isLoading}
+              onClick={confirmDeleteAllChats}
+            >
+              Delete all chats
+            </Button>
+          </div>
+        )}
       </PopoverContent>
     </Popover>
   );

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

@@ -150,12 +150,16 @@ interface ChatHeaderProps {
   onNewChat: () => void;
   activeChatId: ChatId | undefined;
   setActiveChat: (id: ChatId | null) => void;
+  onDeleteChats: (id: ChatId | null) => void;
+  isLoading: boolean;
 }
 
 const ChatHeader: React.FC<ChatHeaderProps> = ({
   onNewChat,
   activeChatId,
   setActiveChat,
+  onDeleteChats,
+  isLoading,
 }) => {
   const { handleClick } = useOpenSettingsToTab();
 
@@ -184,6 +188,8 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
         <ChatHistoryPopover
           activeChatId={activeChatId}
           setActiveChat={setActiveChat}
+          onDeleteChats={onDeleteChats}
+          isLoading={isLoading}
         />
       </div>
     </div>
@@ -838,6 +844,27 @@ const ChatPanelBody = () => {
     clearFiles();
   });
 
+  const handleDeleteChats = useEvent((id: ChatId | null) => {
+    if (id === null || id === activeChatId) {
+      handleNewChat();
+    }
+    setChatState((prev) => {
+      const chats = new Map(prev.chats);
+      if (id === null) {
+        chats.clear();
+      } else {
+        chats.delete(id);
+      }
+      return {
+        chats,
+        activeChatId:
+          prev.activeChatId && chats.has(prev.activeChatId)
+            ? prev.activeChatId
+            : null,
+      };
+    });
+  });
+
   const handlePairWithAgent = useEvent(() => {
     openModal(<PairWithAgentModal onClose={closeModal} />);
   });
@@ -997,6 +1024,8 @@ const ChatPanelBody = () => {
           onNewChat={handleNewChat}
           activeChatId={activeChat?.id}
           setActiveChat={setActiveChat}
+          onDeleteChats={handleDeleteChats}
+          isLoading={isLoading}
         />
       </TooltipProvider>
 

package/src/components/chat/tool-call/__tests__/tool-result.test.tsx

@@ -0,0 +1,56 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { ResultRenderer } from "../tool-result";
+
+afterEach(cleanup);
+
+describe("ResultRenderer", () => {
+  it.each([
+    { status: "success", message: "No output was returned." },
+    { status: "success", next_steps: ["Run the edited cells."] },
+    {
+      status: "success",
+      action_url: null,
+      next_steps: null,
+      meta: null,
+      message: "Finished",
+    },
+    {
+      status: "success",
+      action_url: "/notebook",
+      next_steps: ["Review the output."],
+      meta: { source: "notebook" },
+      cellsToOutput: { cell: { cellOutput: "Hello", consoleOutput: "" } },
+    },
+  ])("renders structured results with optional fields: %j", (result) => {
+    render(<ResultRenderer result={result} />);
+
+    expect(screen.getByRole("heading", { name: "Tool Result" })).toBeVisible();
+    expect(screen.getByText("success")).toBeVisible();
+  });
+
+  it("displays messages and tool-specific output without metadata", () => {
+    render(
+      <ResultRenderer
+        result={{
+          status: "success",
+          message: "Cells finished running.",
+          cellsToOutput: { cell: { cellOutput: "Hello", consoleOutput: "" } },
+        }}
+      />,
+    );
+
+    expect(screen.getByText("Cells finished running.")).toBeVisible();
+    expect(screen.getByText("cellsToOutput")).toBeVisible();
+    expect(screen.getByText(/"cellOutput": "Hello"/)).toBeVisible();
+  });
+
+  it("preserves the fallback for unstructured results", () => {
+    render(<ResultRenderer result="Plain text result" />);
+
+    expect(screen.queryByRole("heading", { name: "Tool Result" })).toBeNull();
+    expect(screen.getByText("Plain text result")).toBeVisible();
+  });
+});

package/src/components/chat/tool-call/tool-result.tsx

@@ -21,9 +21,9 @@ function isUninformative(value: unknown): boolean {
 const SuccessResultSchema = z.looseObject({
   status: z.string().default("success"),
   auth_required: z.boolean().default(false),
-  action_url: z.any(),
-  next_steps: z.any(),
-  meta: z.any(),
+  action_url: z.any().optional(),
+  next_steps: z.any().optional(),
+  meta: z.any().optional(),
   message: z.string().nullish(),
 });
 

package/src/components/data-table/TableTopBar.tsx

@@ -54,6 +54,8 @@ export const TableTopBar = <TData,>({
   togglePanel,
   isAnyPanelOpen,
   downloadAs,
+  getExportMetadata,
+  metadataSource,
   sizeBytes,
   sizeBytesIsLoading,
 }: TableTopBarProps<TData>) => {
@@ -132,6 +134,8 @@ export const TableTopBar = <TData,>({
         {downloadAs && (
           <ExportActions
             downloadAs={downloadAs}
+            getExportMetadata={getExportMetadata}
+            metadataSource={metadataSource}
             sizeBytes={sizeBytes}
             sizeBytesIsLoading={sizeBytesIsLoading}
           />