@marimo-team/frontend 0.25.2-dev96 → 0.25.2-dev99

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/core/ai/__tests__/state.test.ts

@@ -0,0 +1,120 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { createStore } from "jotai";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { toast } from "@/components/ui/use-toast";
+import { type Chat, type ChatId, chatStateAtom } from "../state";
+
+vi.mock("@/components/ui/use-toast", () => ({ toast: vi.fn() }));
+
+const KEY = "marimo:ai:chatState:v5";
+const chatId = "saved-chat" as ChatId;
+const chat: Chat = {
+  id: chatId,
+  title: "Saved conversation",
+  messages: [
+    { id: "message", role: "user", parts: [{ type: "text", text: "Hello" }] },
+  ],
+  createdAt: 1,
+  updatedAt: 1,
+};
+
+const unsubscribers: (() => void)[] = [];
+
+function loadStore() {
+  const store = createStore();
+  unsubscribers.push(store.sub(chatStateAtom, vi.fn()));
+  return store;
+}
+
+function fillStorage() {
+  vi.spyOn(Storage.prototype, "setItem").mockImplementation(() => {
+    throw new DOMException("Storage is full", "QuotaExceededError");
+  });
+}
+
+describe("chat history storage", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    window.localStorage.setItem(
+      KEY,
+      JSON.stringify({
+        chats: [[chatId, chat]],
+        activeChatId: chatId,
+      }),
+    );
+  });
+
+  afterEach(() => {
+    for (const unsubscribe of unsubscribers.splice(0)) {
+      unsubscribe();
+    }
+    vi.restoreAllMocks();
+  });
+
+  it("loads saved history when storage is full", () => {
+    fillStorage();
+    expect(loadStore().get(chatStateAtom)).toEqual({
+      chats: new Map([[chatId, chat]]),
+      activeChatId: chatId,
+    });
+  });
+
+  it("warns on save failure without interrupting in-memory updates", () => {
+    const store = loadStore();
+    const savedHistory = window.localStorage.getItem(KEY);
+    fillStorage();
+    const updatedChat = { ...chat, title: "Unsaved conversation" };
+    expect(() =>
+      store.set(chatStateAtom, {
+        chats: new Map([[chatId, updatedChat]]),
+        activeChatId: chatId,
+      }),
+    ).not.toThrow();
+
+    expect(store.get(chatStateAtom).chats.get(chatId)).toEqual(updatedChat);
+    expect(window.localStorage.getItem(KEY)).toBe(savedHistory);
+    expect(toast).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: "chat-storage-error",
+        once: true,
+        title: "Chat history couldn't be saved",
+      }),
+    );
+  });
+
+  it("frees storage when history is cleared even if further writes fail", () => {
+    window.localStorage.setItem("unrelated-setting", "keep");
+    const store = loadStore();
+    fillStorage();
+    store.set(chatStateAtom, { chats: new Map(), activeChatId: null });
+
+    expect(window.localStorage.getItem(KEY)).toBeNull();
+    expect(window.localStorage.getItem("unrelated-setting")).toBe("keep");
+    expect(loadStore().get(chatStateAtom)).toEqual({
+      chats: new Map(),
+      activeChatId: null,
+    });
+    expect(toast).not.toHaveBeenCalled();
+  });
+
+  it("removes saved history when only an empty chat remains and writes fail", () => {
+    const store = loadStore();
+    const emptyChat = { ...chat, messages: [] };
+    const state = {
+      chats: new Map([[chatId, emptyChat]]),
+      activeChatId: chatId,
+    };
+    fillStorage();
+
+    store.set(chatStateAtom, state);
+
+    expect(window.localStorage.getItem(KEY)).toBeNull();
+    expect(store.get(chatStateAtom)).toEqual(state);
+    expect(loadStore().get(chatStateAtom)).toEqual({
+      chats: new Map(),
+      activeChatId: null,
+    });
+    expect(toast).not.toHaveBeenCalled();
+  });
+});

package/src/core/ai/state.ts

@@ -4,7 +4,9 @@ import type { UIMessage } from "@ai-sdk/react";
 import type { FileUIPart } from "ai";
 import { atom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
+import { toast } from "@/components/ui/use-toast";
 import { uniqueBy } from "@/utils/arrays";
+import { Logger } from "@/utils/Logger";
 import { adaptForLocalStorage, jotaiJsonStorage } from "@/utils/storage/jotai";
 import type { TypedString } from "@/utils/typed";
 import type { CellId } from "../cells/ids";
@@ -85,22 +87,46 @@ function removeEmptyChats(chatState: Map<ChatId, Chat>): Map<ChatId, Chat> {
   return result;
 }
 
+const chatStorage = adaptForLocalStorage({
+  toSerializable: (value: ChatState) => ({
+    chats: [...removeEmptyChats(value.chats).entries()],
+    activeChatId: value.activeChatId,
+  }),
+  fromSerializable: (value) => ({
+    chats: new Map(value.chats),
+    activeChatId: value.activeChatId,
+  }),
+});
+
 export const chatStateAtom = atomWithStorage<ChatState>(
   KEY,
   {
     chats: new Map(),
     activeChatId: null,
   },
-  adaptForLocalStorage({
-    toSerializable: (value: ChatState) => ({
-      chats: [...removeEmptyChats(value.chats).entries()],
-      activeChatId: value.activeChatId,
-    }),
-    fromSerializable: (value) => ({
-      chats: new Map(value.chats),
-      activeChatId: value.activeChatId,
-    }),
-  }),
+  {
+    ...chatStorage,
+    setItem: (key, value) => {
+      try {
+        // Removing the key frees space even when no further writes can fit.
+        if (removeEmptyChats(value.chats).size === 0) {
+          chatStorage.removeItem(key);
+        } else {
+          chatStorage.setItem(key, value);
+        }
+      } catch (error) {
+        Logger.warn("Could not save chat history", error);
+        toast({
+          id: "chat-storage-error",
+          once: true,
+          title: "Chat history couldn't be saved",
+          description:
+            "Try deleting old chats. New messages may be lost when you reload.",
+          variant: "danger",
+        });
+      }
+    },
+  },
 );
 
 export const activeChatAtom = atom(

package/src/css/katex-css.test.ts

@@ -0,0 +1,166 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { readFile } from "node:fs/promises";
+import postcss from "postcss";
+import { beforeAll, describe, expect, it } from "vitest";
+import {
+  checkKatexCss,
+  generateKatexCss,
+  readUpstreamCss,
+  stylesheetPath,
+} from "../../scripts/katex-css";
+
+let upstream: string;
+let generated: string;
+
+beforeAll(async () => {
+  upstream = await readUpstreamCss();
+  generated = await generateKatexCss(upstream);
+});
+
+describe("copied KaTeX stylesheet", () => {
+  it("matches the installed package with only documented marimo overrides", async () => {
+    await expect(
+      checkKatexCss(upstream, await readFile(stylesheetPath, "utf8")),
+    ).resolves.toBeUndefined();
+  });
+
+  it.each(["added", "removed", "changed"])(
+    "detects %s upstream rule without a version change",
+    async (change) => {
+      const root = postcss.parse(upstream);
+      if (change === "added") {
+        root.append(
+          postcss.parse(
+            ".katex .reflectbox { display: inline-block; transform: scaleX(-1); }",
+          ),
+        );
+      } else {
+        root.walkRules(".katex .mspace", (rule) => {
+          if (change === "removed") {
+            rule.remove();
+          } else {
+            rule.append(postcss.decl({ prop: "color", value: "red" }));
+          }
+        });
+      }
+      await expect(checkKatexCss(root.toString(), generated)).rejects.toThrow(
+        "pnpm sync-katex-css",
+      );
+      const regenerated = await generateKatexCss(root.toString());
+      await checkKatexCss(root.toString(), regenerated);
+    },
+  );
+
+  it.each(["added", "removed", "changed"])(
+    "detects %s local rule",
+    async (change) => {
+      const root = postcss.parse(generated);
+      if (change === "added") {
+        root.append(postcss.parse(".katex .unexpected { display: none; }"));
+      } else {
+        root.walkRules(".katex .mspace", (rule) => {
+          if (change === "removed") {
+            rule.remove();
+          } else {
+            rule.append(postcss.decl({ prop: "color", value: "red" }));
+          }
+        });
+      }
+      await expect(checkKatexCss(upstream, root.toString())).rejects.toThrow(
+        "pnpm sync-katex-css",
+      );
+    },
+  );
+
+  it("preserves math sizing, tag alignment, and equation counters without bundling font faces", () => {
+    const root = postcss.parse(generated);
+    const declarations = (selector: string) => {
+      const values: Record<string, string> = {};
+      root.walkRules(selector, (rule) => {
+        rule.walkDecls((decl) => {
+          values[decl.prop] = decl.value;
+        });
+      });
+      return values;
+    };
+    expect(declarations(".katex")).toEqual({
+      "font-family": '"KaTeX_Main", "Times New Roman", serif',
+      "font-size": "110%",
+      "font-style": "normal",
+      "line-height": "inherit",
+      position: "relative",
+      "text-indent": "0",
+      "text-rendering": "auto",
+    });
+    expect(
+      declarations(".katex-display > .katex > .katex-html > .katex-tag"),
+    ).toEqual({ position: "absolute", right: "0", "text-align": "right" });
+    expect(declarations("body,\n.katex-display")).toEqual({
+      "counter-reset": "katexEqnNo mmlEqnNo",
+    });
+    expect(declarations(".katex .angl")["border-right"]).toBe("0.049em solid");
+    const fontFaces: postcss.AtRule[] = [];
+    root.walkAtRules("font-face", (rule) => {
+      fontFaces.push(rule);
+    });
+    expect(fontFaces).toEqual([]);
+  });
+
+  it.each(["root", "media"])(
+    "preserves SVG rule order and %s scope when upstream adds a competing rule",
+    async (scope) => {
+      const root = postcss.parse(upstream);
+      const svgRules: postcss.Rule[] = [];
+      root.walkRules(".katex svg", (rule) => {
+        svgRules.push(rule);
+      });
+      const secondSvg = svgRules[1];
+      secondSvg.before(postcss.parse(".katex :is(svg) { stroke-width: 3; }"));
+      if (scope === "media") {
+        const media = postcss.atRule({ name: "media", params: "print" });
+        secondSvg.before(media);
+        media.append(secondSvg);
+      }
+
+      const svgCascade = (css: string) => {
+        const rules: {
+          selector: string;
+          scope: string;
+          strokeWidth: string | undefined;
+        }[] = [];
+        postcss.parse(css).walkRules((rule) => {
+          if (
+            rule.selector !== ".katex svg" &&
+            rule.selector !== ".katex :is(svg)"
+          ) {
+            return;
+          }
+          let strokeWidth: string | undefined;
+          rule.walkDecls("stroke-width", (decl) => {
+            strokeWidth = decl.value;
+          });
+          const parent = rule.parent;
+          rules.push({
+            selector: rule.selector,
+            scope:
+              parent?.type === "atrule"
+                ? `${parent.name} ${parent.params}`
+                : "root",
+            strokeWidth,
+          });
+        });
+        return rules;
+      };
+      const regenerated = await generateKatexCss(root.toString());
+      expect(svgCascade(regenerated)).toEqual(svgCascade(root.toString()));
+      await checkKatexCss(root.toString(), regenerated);
+    },
+  );
+
+  it("requires review when an overridden upstream declaration changes", async () => {
+    await expect(
+      generateKatexCss(upstream.replace("line-height:1.2", "line-height:1.3")),
+    ).rejects.toThrow("review overrides");
+  });
+});

package/src/css/katex.min.css

@@ -1,23 +1,20 @@
 /*
- * Adapted from https://cdn.jsdelivr.net/npm/katex@0.18.5/dist/katex.min.css
+ * Generated from the installed katex/dist/katex.min.css.
+ * Run `pnpm sync-katex-css` from the repository root or frontend to regenerate.
+ * Do not edit this file directly; update scripts/katex-css.ts for local overrides.
  *
- * KaTeX's class names change between versions (0.18 prefixed most of its
- * internal classes with `katex-`), so this file must be regenerated whenever
- * the `katex` package is bumped. Steps:
- *
- * 1. Copy the upstream katex.min.css for the installed version.
- * 2. Delete every `@font-face` block. The fonts are declared in katex-fonts.css.
- * 3. Keep the upstream `em` values. KaTeX sizes scripts, rules, and spacing
- *    relative to the surrounding math, which can differ from the root size.
- * 4. Run oxfmt to expand the file, then stylelint with --fix. Merge the two
- *    `.katex svg` rules stylelint flags as duplicates.
- * 5. Re-apply the marimo edits below:
- *    - `.katex`: `font-size: 110%`, `line-height: inherit` and
- *      `font-style: normal` in place of the upstream `font` shorthand, so math
- *      follows the surrounding text size and stays upright in blockquotes.
- *    - `.katex-tag` inside `.katex-display`: `text-align: right`.
- *    - `counter-reset` on `.katex-display` as well as `body`, so equation
- *      numbers restart for each display block.
+ * Documented marimo overrides:
+ * - Remove @font-face: font declarations live in katex-fonts.css.
+ * - Preserve em units so scripts, rules, and spacing scale with surrounding math.
+ * - Replace .katex's font shorthand with its font-family, font-size: 110%,
+ *   font-style: normal, and line-height: inherit to follow surrounding text size
+ *   and keep math upright in blockquotes.
+ * - Right-align display equation tags.
+ * - Reset equation counters on each display block as well as body.
+ * - Preserve duplicate SVG rules in their upstream order and scope, with a
+ *   targeted stylelint exemption so their cascade remains intact.
+ * Formatting and syntax normalization use oxfmt and stylelint; adjacent exact
+ * duplicate declarations left by vendor-prefix normalization are removed.
  */
 
 /* stylelint-disable unit-allowed-list -- KaTeX sizes are relative to the math. */
@@ -1002,6 +999,17 @@
 .katex svg {
   fill: currentcolor;
   stroke: currentcolor;
+  display: block;
+  height: inherit;
+  position: absolute;
+  width: 100%;
+}
+
+.katex svg path {
+  stroke: none;
+}
+/* stylelint-disable no-duplicate-selectors -- Preserve the upstream SVG cascade. */
+.katex svg {
   fill-rule: nonzero;
   fill-opacity: 1;
   stroke-width: 1;
@@ -1011,16 +1019,8 @@
   stroke-dasharray: none;
   stroke-dashoffset: 0;
   stroke-opacity: 1;
-  display: block;
-  height: inherit;
-  position: absolute;
-  width: 100%;
 }
-
-.katex svg path {
-  stroke: none;
-}
-
+/* stylelint-enable no-duplicate-selectors */
 .katex img {
   border-style: none;
   max-height: none;