@marimo-team/islands 0.15.2 → 0.15.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.15.2",
+  "version": "0.15.4",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -17,23 +17,23 @@
     "./unstable_internal/*": "./src/*"
   },
   "dependencies": {
-    "@ai-sdk/react": "^1.2.12",
+    "@ai-sdk/react": "^2.0.30",
     "@anywidget/types": "^0.2.0",
-    "@codemirror/autocomplete": "^6.18.6",
+    "@codemirror/autocomplete": "^6.18.7",
     "@codemirror/commands": "^6.8.1",
     "@codemirror/lang-markdown": "^6.3.4",
     "@codemirror/lang-python": "^6.2.1",
     "@codemirror/lang-sql": "^6.9.1",
-    "@codemirror/language": "^6.11.2",
+    "@codemirror/language": "^6.11.3",
     "@codemirror/language-data": "^6.5.1",
     "@codemirror/legacy-modes": "^6.5.1",
     "@codemirror/lint": "^6.8.5",
     "@codemirror/search": "^6.5.11",
     "@codemirror/state": "^6.5.2",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.38.1",
+    "@codemirror/view": "^6.38.2",
     "@dagrejs/dagre": "^1.1.5",
-    "@date-fns/tz": "^1.2.0",
+    "@date-fns/tz": "^1.4.1",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
@@ -43,20 +43,20 @@
     "@glideapps/glide-data-grid": "6.0.4-alpha16",
     "@hookform/resolvers": "^3.10.0",
     "@img-comparison-slider/react": "^8.0.2",
-    "@internationalized/date": "^3.8.2",
+    "@internationalized/date": "^3.9.0",
     "@lezer/common": "^1.2.3",
     "@lezer/highlight": "^1.2.1",
     "@lezer/lr": "^1.4.2",
     "@lezer/markdown": "^1.4.3",
     "@lezer/python": "^1.1.18",
     "@marimo-team/codemirror-ai": "^0.3.2",
-    "@marimo-team/codemirror-languageserver": "^1.15.24",
+    "@marimo-team/codemirror-languageserver": "1.15.24",
     "@marimo-team/codemirror-mcp": "^0.1.5",
     "@marimo-team/codemirror-sql": "^0.2.1",
     "@marimo-team/llm-info": "workspace:*",
     "@marimo-team/marimo-api": "workspace:*",
     "@marimo-team/react-slotz": "^0.2.0",
-    "@mui/material": "^6.4.12",
+    "@mui/material": "^6.5.0",
     "@open-rpc/client-js": "^1.8.1",
     "@paralleldrive/cuid2": "^2.2.2",
     "@radix-ui/colors": "^3.0.0",
@@ -86,7 +86,7 @@
     "@radix-ui/react-use-callback-ref": "~1.1.1",
     "@radix-ui/react-use-controllable-state": "~1.2.2",
     "@replit/codemirror-vim": "^6.3.0",
-    "@tailwindcss/postcss": "^4.1.11",
+    "@tailwindcss/postcss": "^4.1.12",
     "@tailwindcss/typography": "^0.5.16",
     "@tanstack/react-table": "^8.21.3",
     "@textea/json-viewer": "^4.0.1",
@@ -95,47 +95,48 @@
     "@types/jsdom": "^21.1.7",
     "@types/react-grid-layout": "^1.3.5",
     "@uidotdev/usehooks": "^2.4.1",
-    "@uiw/codemirror-extensions-langs": "^4.24.2",
-    "@uiw/react-codemirror": "4.23.14",
+    "@uiw/codemirror-extensions-langs": "^4.25.1",
+    "@uiw/react-codemirror": "4.25.1",
     "@uwdata/flechette": "^1.1.2",
     "@valtown/codemirror-codeium": "^1.1.1",
     "@xterm/addon-attach": "^0.11.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/xterm": "^5.5.0",
-    "ai": "^4.3.16",
+    "@zed-industries/agent-client-protocol": "^0.1.2",
+    "ai": "^5.0.30",
     "ansi_up": "^6.0.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "compassql": "^0.21.2",
-    "cssnano": "^7.0.7",
+    "cssnano": "^7.1.1",
     "date-fns": "^4.1.0",
     "dequal": "^2.0.3",
     "eslint-plugin-header": "^3.1.1",
     "htm": "^3.1.1",
-    "html-react-parser": "^5.2.5",
+    "html-react-parser": "^5.2.6",
     "html-to-image": "^1.11.13",
     "humanize-duration": "^3.33.0",
     "iconify-icon": "^2.3.0",
-    "jotai": "^2.12.5",
-    "jotai-scope": "^0.8.3",
+    "jotai": "^2.13.1",
+    "jotai-scope": "^0.9.3",
     "js-cookie": "^3.0.5",
     "katex": "^0.16.22",
     "lodash-es": "^4.17.21",
     "loro-codemirror": "^0.2.0",
-    "loro-crdt": "^1.5.9",
-    "lucide-react": "^0.525.0",
+    "loro-crdt": "^1.6.0",
+    "lucide-react": "^0.542.0",
     "lz-string": "^1.5.0",
     "marked": "^15.0.12",
-    "mermaid": "^11.7.0",
-    "partysocket": "1.1.4",
-    "path-to-regexp": "^8.2.0",
+    "mermaid": "^11.10.1",
+    "partysocket": "1.1.5",
+    "path-to-regexp": "^8.3.0",
     "plotly.js": "^2.35.3",
     "pyodide": "0.27.7",
     "react-arborist": "^3.4.3",
-    "react-aria": "^3.42.0",
-    "react-aria-components": "^1.11.0",
-    "react-codemirror-merge": "4.23.14",
+    "react-aria": "^3.43.1",
+    "react-aria-components": "^1.12.1",
+    "react-codemirror-merge": "4.25.1",
     "react-dropzone": "^14.3.8",
     "react-error-boundary": "^5.0.0",
     "react-grid-layout": "^1.5.2",
@@ -144,12 +145,13 @@
     "react-plotly.js": "^2.6.0",
     "react-resizable-panels": "2.1.9",
     "react-use-event-hook": "^0.9.6",
-    "react-vega": "^7.6.0",
-    "react-virtuoso": "^4.13.0",
+    "react-vega": "^7.7.1",
+    "react-virtuoso": "^4.14.0",
     "reactflow": "^11.11.4",
-    "remark-gfm": "^4.0.0",
+    "remark-gfm": "^4.0.1",
     "rpc-anywhere": "^1.7.0",
     "sql-formatter": "^15.6.6",
+    "streamdown": "^1.2.0",
     "string-dedent": "^3.0.2",
     "swiper": "^11.2.10",
     "tailwind-merge": "^2.6.0",
@@ -157,13 +159,14 @@
     "thememirror": "^2.0.1",
     "timestring": "^7.0.0",
     "typescript-memoize": "^1.1.1",
+    "use-acp": "^0.1.5",
     "use-resize-observer": "^9.1.0",
     "vega-lite": "^5.23.0",
     "vega-loader": "^4.5.3",
     "vscode-jsonrpc": "^8.2.1",
     "vscode-languageserver-protocol": "^3.17.5",
     "web-vitals": "^4.2.4",
-    "zod": "^3.25.67"
+    "zod": "^3.25.76"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -192,11 +195,11 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-decorators": "^7.27.1",
+    "@babel/plugin-proposal-decorators": "^7.28.0",
     "@babel/preset-typescript": "^7.25.9",
-    "@biomejs/biome": "2.0.6",
+    "@biomejs/biome": "2.2.2",
     "@codecov/vite-plugin": "^1.9.1",
-    "@csstools/postcss-light-dark-function": "^2.0.9",
+    "@csstools/postcss-light-dark-function": "^2.0.10",
     "@playwright/test": "^1.55.0",
     "@storybook/addon-docs": "^9.1.3",
     "@storybook/addon-links": "^9.1.3",
@@ -206,16 +209,16 @@
     "@testing-library/react": "^16.3.0",
     "@types/katex": "^0.16.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^24.0.10",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
+    "@types/node": "^24.3.0",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
     "@types/react-plotly.js": "^2.6.3",
     "@types/timestring": "^6.0.5",
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@typescript-eslint/parser": "^7.15.0",
     "@vitejs/plugin-react": "^4.7.0",
     "@vitejs/plugin-react-swc": "^3.11.0",
-    "babel-plugin-react-compiler": "19.1.0-rc.2",
+    "babel-plugin-react-compiler": "19.1.0-rc.3",
     "blob-polyfill": "^7.0.20220408",
     "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
@@ -227,15 +230,15 @@
     "eslint-plugin-unicorn": "^54.0.0",
     "eslint-plugin-vitest": "^0.4.1",
     "jsdom": "^24.1.3",
-    "msw": "^2.10.2",
+    "msw": "^2.11.1",
     "npm-run-all2": "^6.2.6",
     "postcss": "^8.5.6",
     "postcss-plugin-namespace": "^0.0.3",
-    "react": "^19.1.0",
-    "react-compiler-runtime": "19.1.0-rc.2",
-    "react-dom": "^19.1.0",
+    "react": "^19.1.1",
+    "react-compiler-runtime": "19.1.0-rc.3",
+    "react-dom": "^19.1.1",
     "storybook": "^9.1.3",
-    "stylelint": "^16.21.0",
+    "stylelint": "^16.23.1",
     "stylelint-config-standard": "^36.0.1",
     "tailwindcss": "^4.1.12",
     "vite": "^6.3.5",

package/src/__mocks__/notebook.ts

@@ -104,12 +104,14 @@ export const MockNotebook = {
       type: "exception",
       msg,
       exception_type,
+      raising_cell: null,
     }),
 
     strictException: (msg: string, ref: string): MarimoError => ({
       type: "strict-exception",
       msg,
       ref,
+      blamed_cell: null,
     }),
 
     interruption: (): MarimoError => ({
@@ -124,6 +126,7 @@ export const MockNotebook = {
     unknown: (msg: string): MarimoError => ({
       type: "unknown",
       msg,
+      error_type: null,
     }),
   },
 

package/src/__mocks__/requests.ts

@@ -44,6 +44,9 @@ export const MockRequestClient = {
       getUsageStats: vi.fn().mockResolvedValue({}),
       sendPdb: vi.fn().mockResolvedValue({}),
       sendListFiles: vi.fn().mockResolvedValue({ files: [] }),
+      sendSearchFiles: vi
+        .fn()
+        .mockResolvedValue({ files: [], query: "", total_found: 0 }),
       sendCreateFileOrFolder: vi.fn().mockResolvedValue({}),
       sendDeleteFileOrFolder: vi.fn().mockResolvedValue({}),
       sendRenameFileOrFolder: vi.fn().mockResolvedValue({}),

package/src/__tests__/__snapshots__/CellStatus.test.tsx.snap

@@ -39,14 +39,14 @@ exports[`CellStatusComponent > renders disabled and stale state 1`] = `
         width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
+        <path
+          d="M4.929 4.929 19.07 19.071"
+        />
         <circle
           cx="12"
           cy="12"
           r="10"
         />
-        <path
-          d="m4.9 4.9 14.2 14.2"
-        />
       </svg>
       <div
         class="second-icon absolute bottom-[-2px] right-[-2px] rounded-full"
@@ -104,14 +104,14 @@ exports[`CellStatusComponent > renders disabled state 1`] = `
       width="24"
       xmlns="http://www.w3.org/2000/svg"
     >
+      <path
+        d="M4.929 4.929 19.07 19.071"
+      />
       <circle
         cx="12"
         cy="12"
         r="10"
       />
-      <path
-        d="m4.9 4.9 14.2 14.2"
-      />
     </svg>
   </div>
 </div>
@@ -175,14 +175,14 @@ exports[`CellStatusComponent > renders disabled transitively state 1`] = `
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
+          <path
+            d="M4.929 4.929 19.07 19.071"
+          />
           <circle
             cx="12"
             cy="12"
             r="10"
           />
-          <path
-            d="m4.9 4.9 14.2 14.2"
-          />
         </svg>
       </div>
     </div>
@@ -403,14 +403,14 @@ exports[`CellStatusComponent > renders stale and disabled transitively state 1`]
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
+          <path
+            d="M4.929 4.929 19.07 19.071"
+          />
           <circle
             cx="12"
             cy="12"
             r="10"
           />
-          <path
-            d="m4.9 4.9 14.2 14.2"
-          />
         </svg>
       </div>
     </div>

package/src/__tests__/chat-utils.test.ts

@@ -1,22 +1,17 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
+import type { UIMessage } from "ai";
 import { describe, expect, it } from "vitest";
 import { Maps } from "@/utils/maps";
-import { addMessageToChat } from "../core/ai/chat-utils";
+import { replaceMessagesInChat } from "../core/ai/chat-utils";
 import type { Chat, ChatId, ChatState } from "../core/ai/state";
 
 const CHAT_1 = "chat-1" as ChatId;
-const CHAT_2 = "chat-2" as ChatId;
-
-function first(map: Map<ChatId, Chat>) {
-  return [...map.values()][0];
-}
 
 function asMap(list: Iterable<Chat>) {
   return Maps.keyBy(list, (c) => c.id);
 }
-
-describe("addMessageToChat", () => {
+describe("replaceMessagesInChat", () => {
   const mockChatState: ChatState = {
     chats: asMap([
       {
@@ -26,223 +21,43 @@ describe("addMessageToChat", () => {
           {
             id: "msg-1",
             role: "user",
-            content: "Hello",
-            timestamp: 1000,
-          },
-          {
-            id: "msg-2",
-            role: "assistant",
-            content: "Hi there!",
-            timestamp: 2000,
+            parts: [{ type: "text", text: "Hello" }],
+            metadata: { timestamp: 1000 },
           },
         ],
         createdAt: 1000,
         updatedAt: 2000,
       },
-      {
-        id: CHAT_2,
-        title: "Test Chat 2",
-        messages: [
-          {
-            id: "msg-3",
-            role: "user",
-            content: "How are you?",
-            timestamp: 3000,
-          },
-        ],
-        createdAt: 3000,
-        updatedAt: 3000,
-      },
     ]),
     activeChatId: CHAT_1,
   };
 
-  it("should add a new message to an existing chat", () => {
-    const result = addMessageToChat(
-      mockChatState,
-      CHAT_1,
-      "msg-4",
-      "user",
-      "New message",
-    );
-
-    expect(result.chats).toHaveLength(2);
-    const updatedChat = result.chats.get(CHAT_1);
-    expect(updatedChat?.messages).toHaveLength(3);
-    expect(updatedChat?.messages[2]).toEqual({
-      id: "msg-4",
-      role: "user",
-      content: "New message",
-      timestamp: expect.any(Number),
+  it("replaces messages in a chat", () => {
+    const newMessages: UIMessage[] = [
+      {
+        id: "msg-2",
+        role: "assistant",
+        parts: [{ type: "text", text: "Hi there!" }],
+        metadata: { timestamp: 2000 },
+      },
+    ];
+    const result = replaceMessagesInChat({
+      chatState: mockChatState,
+      chatId: CHAT_1,
+      messages: newMessages,
     });
-    expect(updatedChat?.updatedAt).toBeGreaterThan(
-      first(mockChatState.chats).updatedAt,
+    expect(result.chats.get(CHAT_1)?.messages).toEqual(newMessages);
+    expect(result.chats.get(CHAT_1)?.updatedAt).toBeGreaterThan(
+      mockChatState.chats.get(CHAT_1)?.updatedAt ?? 0,
     );
   });
 
-  it("should update an existing message", () => {
-    const result = addMessageToChat(
-      mockChatState,
-      CHAT_1,
-      "msg-1",
-      "user",
-      "Updated content",
-    );
-
-    expect(result.chats).toHaveLength(2);
-    const updatedChat = result.chats.get(CHAT_1);
-    expect(updatedChat?.messages).toHaveLength(2);
-    expect(updatedChat?.messages[0]).toEqual({
-      id: "msg-1",
-      role: "user",
-      content: "Updated content",
-      timestamp: 1000,
+  it("returns unchanged state if chatId is null", () => {
+    const result = replaceMessagesInChat({
+      chatState: mockChatState,
+      chatId: null,
+      messages: [],
     });
-    expect(updatedChat?.updatedAt).toBeGreaterThan(
-      first(mockChatState.chats).updatedAt,
-    );
-  });
-
-  it("should handle message parts", () => {
-    const parts = [{ type: "text" as const, text: "Part content" }];
-    const result = addMessageToChat(
-      mockChatState,
-      CHAT_1,
-      "msg-5",
-      "assistant",
-      "Message with parts",
-      parts,
-    );
-
-    const updatedChat = result.chats.get(CHAT_1);
-    expect(updatedChat?.messages[2].parts).toEqual(parts);
-  });
-
-  it("should update message parts", () => {
-    const originalParts = [{ type: "text" as const, text: "Original" }];
-    const updatedParts = [{ type: "text" as const, text: "Updated" }];
-    const chats = [...mockChatState.chats.values()];
-
-    const stateWithParts: ChatState = {
-      ...mockChatState,
-      chats: asMap([
-        {
-          ...chats[0],
-          messages: [
-            {
-              ...chats[0].messages[0],
-              parts: originalParts,
-            },
-            chats[0].messages[1],
-          ],
-        },
-        chats[1],
-      ]),
-    };
-
-    const result = addMessageToChat(
-      stateWithParts,
-      CHAT_1,
-      "msg-1",
-      "user",
-      "Updated content",
-      updatedParts,
-    );
-
-    const updatedChat = result.chats.get(CHAT_1);
-    expect(updatedChat?.messages[0].parts).toEqual(updatedParts);
-  });
-
-  it("should return unchanged state when chatId is null", () => {
-    const result = addMessageToChat(
-      mockChatState,
-      null,
-      "msg-4",
-      "user",
-      "New message",
-    );
-
-    expect(result).toEqual(mockChatState);
-  });
-
-  it("should return unchanged state when chatId does not exist", () => {
-    const result = addMessageToChat(
-      mockChatState,
-      "non-existent-chat" as ChatId,
-      "msg-4",
-      "user",
-      "New message",
-    );
-
     expect(result).toEqual(mockChatState);
   });
-
-  it("should not modify other chats when updating a specific chat", () => {
-    const result = addMessageToChat(
-      mockChatState,
-      CHAT_1,
-      "msg-4",
-      "user",
-      "New message",
-    );
-
-    const unchangedChat = result.chats.get(CHAT_2);
-    expect(unchangedChat).toEqual([...mockChatState.chats.values()][1]);
-  });
-
-  it("should preserve message order when adding new messages", () => {
-    const result = addMessageToChat(
-      mockChatState,
-      CHAT_1,
-      "msg-4",
-      "user",
-      "New message",
-    );
-
-    const updatedChat = result.chats.get(CHAT_1);
-    expect(updatedChat?.messages[0].id).toBe("msg-1");
-    expect(updatedChat?.messages[1].id).toBe("msg-2");
-    expect(updatedChat?.messages[2].id).toBe("msg-4");
-  });
-
-  it("should handle empty chat messages array", () => {
-    const chatId = "empty-chat" as ChatId;
-    const emptyChatState: ChatState = {
-      chats: asMap([
-        {
-          id: chatId,
-          title: "Empty Chat",
-          messages: [],
-          createdAt: 1000,
-          updatedAt: 1000,
-        },
-      ]),
-      activeChatId: chatId,
-    };
-
-    const result = addMessageToChat(
-      emptyChatState,
-      chatId,
-      "msg-1",
-      "user",
-      "First message",
-    );
-
-    const updatedChat = result.chats.get(chatId);
-    expect(updatedChat?.messages).toHaveLength(1);
-    expect(updatedChat?.messages[0].content).toBe("First message");
-  });
-
-  it("should handle different message roles", () => {
-    const result = addMessageToChat(
-      mockChatState,
-      CHAT_1,
-      "msg-4",
-      "assistant",
-      "Assistant response",
-    );
-
-    const updatedChat = result.chats.get(CHAT_1);
-    expect(updatedChat?.messages[2].role).toBe("assistant");
-  });
 });

package/src/components/ai/ai-model-dropdown.tsx

@@ -10,6 +10,7 @@ import {
   CircleHelpIcon,
 } from "lucide-react";
 import React from "react";
+import { type SupportedRole, useModelChange } from "@/core/ai/config";
 import {
   AiModelId,
   isKnownAIProvider,
@@ -36,12 +37,13 @@ import { getCurrentRoleTooltip, getTagColour } from "./display-helpers";
 interface AIModelDropdownProps {
   value?: string;
   placeholder?: string;
-  onSelect: (modelId: QualifiedModelId) => void;
+  onSelect?: (modelId: QualifiedModelId) => void;
   triggerClassName?: string;
   customDropdownContent?: React.ReactNode;
   iconSize?: "medium" | "small";
   showAddCustomModelDocs?: boolean;
-  forRole?: Role;
+  displayIconOnly?: boolean;
+  forRole: SupportedRole;
 }
 
 export const AIModelDropdown = ({
@@ -53,12 +55,13 @@ export const AIModelDropdown = ({
   iconSize = "medium",
   showAddCustomModelDocs = false,
   forRole,
+  displayIconOnly = false,
 }: AIModelDropdownProps) => {
-  const currentValue = value ? AiModelId.parse(value) : undefined;
   const [isOpen, setIsOpen] = React.useState(false);
 
   const ai = useAtomValue(aiAtom);
   const completion = useAtomValue(completionAtom);
+  const { saveModelChange } = useModelChange();
 
   // Only include autocompleteModel if copilot is set to "custom"
   const autocompleteModel =
@@ -88,6 +91,13 @@ export const AIModelDropdown = ({
           ? ai?.models?.edit_model
           : undefined;
 
+  // If value is provided, use it, otherwise use the active model
+  const currentValue = value
+    ? AiModelId.parse(value)
+    : activeModel
+      ? AiModelId.parse(activeModel)
+      : undefined;
+
   const iconSizeClass = iconSize === "medium" ? "h-4 w-4" : "h-3 w-3";
 
   const renderModelWithRole = (modelId: AiModelId, role: Role) => {
@@ -119,7 +129,11 @@ export const AIModelDropdown = ({
   };
 
   const handleSelect = (modelId: QualifiedModelId) => {
-    onSelect(modelId);
+    if (onSelect) {
+      onSelect(modelId);
+    } else {
+      saveModelChange(modelId, forRole);
+    }
     setIsOpen(false);
   };
 
@@ -136,11 +150,13 @@ export const AIModelDropdown = ({
                 provider={currentValue.providerId}
                 className={iconSizeClass}
               />
-              <span className="truncate">
-                {isKnownAIProvider(currentValue.providerId)
-                  ? currentValue.shortModelId
-                  : currentValue.id}
-              </span>
+              {displayIconOnly ? null : (
+                <span className="truncate">
+                  {isKnownAIProvider(currentValue.providerId)
+                    ? currentValue.shortModelId
+                    : currentValue.id}
+                </span>
+              )}
             </>
           ) : (
             <span className="text-muted-foreground truncate">