@marimo-team/islands 0.23.17-dev5 → 0.23.17-dev51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.17-dev5",
+  "version": "0.23.17-dev51",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -21,7 +21,7 @@
     "./unstable_internal/*": "./src/*"
   },
   "dependencies": {
-    "@ai-sdk/react": "^3.0.134",
+    "@ai-sdk/react": "^4.0.40",
     "@anywidget/types": "^0.4.0",
     "@codemirror/autocomplete": "^6.20.1",
     "@codemirror/commands": "^6.10.2",
@@ -92,7 +92,7 @@
     "@xterm/addon-web-links": "^0.12.0",
     "@xterm/xterm": "^5.5.0",
     "@zed-industries/agent-client-protocol": "^0.4.5",
-    "ai": "^6.0.129",
+    "ai": "^7.0.37",
     "ansi_up": "^6.0.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -195,7 +195,7 @@
     "@babel/preset-typescript": "^7.25.9",
     "@codecov/vite-plugin": "^1.9.1",
     "@csstools/postcss-light-dark-function": "^2.0.11",
-    "@playwright/test": "^1.59.1",
+    "@playwright/test": "^1.62.1",
     "@storybook/addon-docs": "^10.3.5",
     "@storybook/addon-links": "^10.3.5",
     "@storybook/react-vite": "^10.3.5",
@@ -211,7 +211,7 @@
     "@types/react-dom": "^19.2.3",
     "@types/timestring": "^6.0.5",
     "@vitejs/plugin-react": "^5.2.0",
-    "@vitest/coverage-v8": "3.2.4",
+    "@vitest/coverage-v8": "3.2.7",
     "babel-plugin-react-compiler": "19.1.0-rc.3",
     "blob-polyfill": "^7.0.20220408",
     "cross-env": "^7.0.3",
@@ -228,11 +228,11 @@
     "storybook": "^10.3.5",
     "stylelint": "^16.26.1",
     "stylelint-config-standard": "^36.0.1",
-    "tailwindcss": "^4.3.0",
+    "tailwindcss": "^4.3.3",
     "vega-typings": "^2.1.0",
     "vite": "npm:rolldown-vite@7.3.1",
     "vite-plugin-top-level-await": "^1.6.0",
     "vite-plugin-wasm": "^3.6.0",
-    "vitest": "^3.2.4"
+    "vitest": "^3.2.7"
   }
 }

package/src/__mocks__/requests.ts

@@ -72,26 +72,31 @@ export const MockRequestClient = {
             format: "html",
             dependenciesAvailable: true,
             missingPackages: [],
+            missingSetup: [],
           },
           {
             format: "markdown",
             dependenciesAvailable: true,
             missingPackages: [],
+            missingSetup: [],
           },
           {
             format: "ipynb",
             dependenciesAvailable: true,
             missingPackages: [],
+            missingSetup: [],
           },
           {
             format: "pdf",
             dependenciesAvailable: true,
             missingPackages: [],
+            missingSetup: [],
           },
           {
             format: "script",
             dependenciesAvailable: true,
             missingPackages: [],
+            missingSetup: [],
           },
         ],
       }),

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

@@ -9,7 +9,7 @@ import {
   CircleHelpIcon,
 } from "lucide-react";
 import React from "react";
-import { type SupportedRole, useModelChange } from "@/core/ai/config";
+import { type SupportedRole, useAIConfigActions } from "@/core/ai/config";
 import {
   AiModelId,
   isKnownAIProvider,
@@ -64,7 +64,7 @@ export const AIModelDropdown = ({
 
   const ai = useAtomValue(aiAtom);
   const completion = useAtomValue(completionAtom);
-  const { saveModelChange } = useModelChange();
+  const { saveModelChange } = useAIConfigActions();
   const { handleClick } = useOpenSettingsToTab();
 
   // Only include autocompleteModel if copilot is set to "custom"

package/src/components/app-config/user-config-form.tsx

@@ -985,6 +985,32 @@ export const UserConfigForm: React.FC = () => {
                   </div>
                 )}
               />
+              <OverriddenFormField
+                control={form.control}
+                name="display.code_lens"
+                render={({ field, override }) => (
+                  <div className="flex flex-col space-y-1">
+                    <FormItem className={formItemClasses}>
+                      <FormLabel>Code lens</FormLabel>
+                      <FormControl>
+                        <Checkbox
+                          data-testid="code-lens-checkbox"
+                          checked={override.value}
+                          disabled={override.isOverridden}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                      <IsOverridden override={override} />
+                    </FormItem>
+
+                    <FormDescription>
+                      Shows inline icons in cell editors for datasources and
+                      storage buckets.
+                    </FormDescription>
+                  </div>
+                )}
+              />
             </SettingGroup>
             <SettingGroup title="Outputs">
               <OverriddenFormField

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

@@ -0,0 +1,38 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { describe, expect, it } from "vitest";
+import { chatOptionsAtom } from "@/core/ai/state";
+import { CapabilitiesPopover } from "../capabilities-popover";
+
+describe("CapabilitiesPopover", () => {
+  it("updates ephemeral chat options", () => {
+    const store = createStore();
+
+    render(
+      <Provider store={store}>
+        <CapabilitiesPopover />
+      </Provider>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Capabilities" });
+    expect(trigger).not.toHaveAttribute("data-active");
+
+    fireEvent.click(trigger);
+    const webSearch = screen.getByRole("switch", { name: "Web search" });
+    expect(webSearch).not.toBeChecked();
+
+    fireEvent.click(webSearch);
+
+    expect(webSearch).toBeChecked();
+    expect(trigger).toHaveAttribute("data-active", "true");
+    expect(trigger).toHaveClass("bg-primary/15", "text-primary", "ring-1");
+    expect(trigger).toHaveAttribute(
+      "title",
+      "Capabilities (web search enabled)",
+    );
+    expect(store.get(chatOptionsAtom)).toEqual({ webSearch: true });
+    expect(createStore().get(chatOptionsAtom)).toEqual({ webSearch: false });
+  });
+});

package/src/components/chat/__tests__/chat-abort.test.ts

@@ -0,0 +1,51 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { UIMessageChunk } from "ai";
+import { describe, expect, it } from "vitest";
+import {
+  describeChatAbortReason,
+  getAbortReasonFromChunk,
+  resolveChatAbortReason,
+  USER_CANCELLED_ABORT_REASON,
+} from "../chat-abort";
+
+describe("chat-abort", () => {
+  it("reads reason from abort chunks", () => {
+    const chunk: UIMessageChunk = {
+      type: "abort",
+      reason: USER_CANCELLED_ABORT_REASON,
+    };
+    expect(getAbortReasonFromChunk(chunk)).toBe(USER_CANCELLED_ABORT_REASON);
+  });
+
+  it("returns undefined for non-abort chunks", () => {
+    expect(
+      getAbortReasonFromChunk({ type: "text-delta", id: "1", delta: "hi" }),
+    ).toBeUndefined();
+  });
+
+  it("defaults client-side aborts to user_cancelled", () => {
+    expect(resolveChatAbortReason({ isAbort: true, streamReason: null })).toBe(
+      USER_CANCELLED_ABORT_REASON,
+    );
+    expect(resolveChatAbortReason({ isAbort: false })).toBeNull();
+  });
+
+  it("preserves stream abort reasons when present", () => {
+    expect(
+      resolveChatAbortReason({ isAbort: true, streamReason: "timeout" }),
+    ).toBe("timeout");
+  });
+
+  it("describes known and unknown abort reasons", () => {
+    expect(describeChatAbortReason(USER_CANCELLED_ABORT_REASON)).toBe(
+      "Generation stopped",
+    );
+    expect(describeChatAbortReason("timeout")).toBe(
+      "Generation stopped: timed out",
+    );
+    expect(describeChatAbortReason("provider_reset")).toBe(
+      "Generation stopped: provider_reset",
+    );
+  });
+});

package/src/components/chat/__tests__/use-chat-controller-id.test.tsx

@@ -0,0 +1,39 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import type { ChatId } from "@/core/ai/state";
+import { useChatControllerId } from "../use-chat-controller-id";
+
+describe("useChatControllerId", () => {
+  it("creates a new ID when starting another unsaved chat", () => {
+    const activeChatId = "existing-chat" as ChatId;
+    const initialProps: { activeId: ChatId | undefined } = {
+      activeId: undefined,
+    };
+    const { result, rerender } = renderHook(
+      ({ activeId }: { activeId: ChatId | undefined }) =>
+        useChatControllerId(activeId),
+      { initialProps },
+    );
+
+    const initialDraftId = result.current.chatControllerId;
+    rerender({ activeId: activeChatId });
+
+    expect(result.current.chatControllerId).toBe(activeChatId);
+
+    act(() => result.current.renewDraftChatId());
+    rerender({ activeId: undefined });
+
+    expect(result.current.chatControllerId).not.toBe(initialDraftId);
+  });
+
+  it("renews the ID when the current chat is already unsaved", () => {
+    const { result } = renderHook(() => useChatControllerId(undefined));
+    const initialDraftId = result.current.chatControllerId;
+
+    act(() => result.current.renewDraftChatId());
+
+    expect(result.current.chatControllerId).not.toBe(initialDraftId);
+  });
+});

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

@@ -0,0 +1,68 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useAtom } from "jotai";
+import { SlidersHorizontalIcon } from "lucide-react";
+import type React from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  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);
+  const webSearchOn = chatOptions.webSearch;
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild={true}>
+        <Button
+          aria-label="Capabilities"
+          title={
+            webSearchOn ? "Capabilities (web search enabled)" : "Capabilities"
+          }
+          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",
+          )}
+        >
+          <SlidersHorizontalIcon className="h-3.5 w-3.5" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-76 p-3" align="start" side="top">
+        <label
+          htmlFor="web-search-toggle"
+          className="flex items-start justify-between gap-3 cursor-pointer"
+        >
+          <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>
+            </span>
+          </div>
+          <Switch
+            id="web-search-toggle"
+            aria-label="Web search"
+            size="sm"
+            checked={webSearchOn}
+            onCheckedChange={(webSearch) =>
+              setChatOptions((options) => ({ ...options, webSearch }))
+            }
+          />
+        </label>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/components/chat/chat-abort.ts

@@ -0,0 +1,44 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { UIMessageChunk } from "ai";
+
+/** Matches pydantic-ai / marimo AbortChunk.reason for user Stop. */
+export const USER_CANCELLED_ABORT_REASON = "user_cancelled";
+
+/**
+ * Read an abort reason from a UI message stream chunk, if present.
+ */
+export function getAbortReasonFromChunk(
+  chunk: UIMessageChunk,
+): string | undefined {
+  if (chunk.type !== "abort") {
+    return undefined;
+  }
+  return chunk.reason;
+}
+
+/**
+ * Resolve the abort reason for logging/UI. Client-side Stop often never
+ * receives a server AbortChunk (the fetch is aborted first), so default to
+ * user_cancelled when the turn ended as an abort.
+ */
+export function resolveChatAbortReason(opts: {
+  isAbort: boolean;
+  streamReason?: string | null;
+}): string | null {
+  if (!opts.isAbort) {
+    return null;
+  }
+  return opts.streamReason || USER_CANCELLED_ABORT_REASON;
+}
+
+export function describeChatAbortReason(reason: string): string {
+  switch (reason) {
+    case USER_CANCELLED_ABORT_REASON:
+      return "Generation stopped";
+    case "timeout":
+      return "Generation stopped: timed out";
+    default:
+      return `Generation stopped: ${reason}`;
+  }
+}

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

@@ -92,6 +92,17 @@ export const renderUIMessage = ({
         );
       case "file":
         return <AttachmentRenderer attachment={part} key={index} />;
+      case "reasoning-file":
+        return (
+          <AttachmentRenderer
+            key={index}
+            attachment={{
+              type: "file",
+              mediaType: part.mediaType,
+              url: part.url,
+            }}
+          />
+        );
       case "dynamic-tool":
         return (
           <ToolCallView
@@ -128,6 +139,12 @@ export const renderUIMessage = ({
             href={part.url}
           />
         );
+      case "custom":
+        return (
+          <div key={index} className="text-sm text-muted-foreground">
+            {part.kind}
+          </div>
+        );
       case "step-start":
         return null;
       default: