@marimo-team/islands 0.22.1-dev9 → 0.22.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.22.1-dev9",
+  "version": "0.22.1",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -66,30 +66,7 @@
     "@open-rpc/client-js": "^1.8.1",
     "@paralleldrive/cuid2": "^2.3.1",
     "@radix-ui/colors": "^3.0.0",
-    "@radix-ui/primitive": "~1.1.3",
-    "@radix-ui/react-accordion": "~1.2.12",
-    "@radix-ui/react-alert-dialog": "~1.1.15",
-    "@radix-ui/react-checkbox": "~1.3.3",
-    "@radix-ui/react-compose-refs": "~1.1.2",
-    "@radix-ui/react-context-menu": "~2.2.16",
-    "@radix-ui/react-dialog": "~1.1.15",
-    "@radix-ui/react-dropdown-menu": "~2.1.16",
     "@radix-ui/react-icons": "~1.3.2",
-    "@radix-ui/react-label": "~2.1.8",
-    "@radix-ui/react-navigation-menu": "~1.2.14",
-    "@radix-ui/react-popover": "~1.1.15",
-    "@radix-ui/react-progress": "~1.1.8",
-    "@radix-ui/react-radio-group": "~1.3.8",
-    "@radix-ui/react-scroll-area": "^1.2.10",
-    "@radix-ui/react-select": "~2.2.6",
-    "@radix-ui/react-slider": "~1.3.6",
-    "@radix-ui/react-slot": "~1.2.4",
-    "@radix-ui/react-switch": "~1.2.6",
-    "@radix-ui/react-tabs": "~1.1.13",
-    "@radix-ui/react-toast": "~1.2.15",
-    "@radix-ui/react-toggle": "~1.1.10",
-    "@radix-ui/react-tooltip": "~1.2.8",
-    "@radix-ui/react-use-callback-ref": "~1.1.1",
     "@radix-ui/react-use-controllable-state": "~1.2.2",
     "@replit/codemirror-vim": "^6.3.0",
     "@streamdown/math": "^1.0.1",
@@ -126,7 +103,6 @@
     "dequal": "^2.0.3",
     "dnd-core": "^16.0.1",
     "dompurify": "^3.3.1",
-    "eslint-plugin-header": "^3.1.1",
     "htm": "^3.1.1",
     "html-react-parser": "^5.2.14",
     "html-to-image": "1.11.13",
@@ -183,7 +159,8 @@
     "vscode-jsonrpc": "^8.2.1",
     "vscode-languageserver-protocol": "^3.17.5",
     "web-vitals": "^4.2.4",
-    "zod": "^4.3.6"
+    "zod": "^4.3.6",
+    "radix-ui": "1.4.3"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -194,9 +171,9 @@
     "build": "cross-env vite build",
     "test": "vitest",
     "typecheck": "tsgo",
-    "lint": "run-s lint:biome lint:eslint lint:stylelint",
-    "lint:biome": "biome lint --diagnostic-level=warn --write .",
-    "lint:eslint": "cross-env TIMING=1 eslint src e2e-tests --fix",
+    "format": "oxfmt --config ../.oxfmtrc.json",
+    "lint": "run-s lint:oxlint lint:stylelint",
+    "lint:oxlint": "oxlint --fix",
     "lint:stylelint": "stylelint src/**/*.css --fix",
     "preview": "vite preview",
     "dev:quarto": "VITE_MARIMO_ISLANDS=true vite",
@@ -213,7 +190,6 @@
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.28.6",
     "@babel/preset-typescript": "^7.25.9",
-    "@biomejs/biome": "2.3.13",
     "@codecov/vite-plugin": "^1.9.1",
     "@csstools/postcss-light-dark-function": "^2.0.11",
     "@playwright/test": "^1.58.2",
@@ -231,24 +207,15 @@
     "@types/react": "^19.2.10",
     "@types/react-dom": "^19.2.3",
     "@types/timestring": "^6.0.5",
-    "@typescript-eslint/eslint-plugin": "^7.15.0",
-    "@typescript-eslint/parser": "^7.15.0",
     "@vitejs/plugin-react": "^5.1.4",
     "babel-plugin-react-compiler": "19.1.0-rc.3",
     "blob-polyfill": "^7.0.20220408",
     "cross-env": "^7.0.3",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-react": "^7.34.3",
-    "eslint-plugin-react-hooks": "^6.0.0-rc.1",
-    "eslint-plugin-react-you-might-not-need-an-effect": "^0.5.1",
-    "eslint-plugin-ssr-friendly": "^1.3.0",
-    "eslint-plugin-storybook": "^9.0.14",
-    "eslint-plugin-unicorn": "^54.0.0",
-    "eslint-plugin-vitest": "^0.4.1",
     "jsdom": "^24.1.3",
     "msw": "^2.12.7",
     "npm-run-all2": "^6.2.6",
+    "oxfmt": "^0.42.0",
+    "oxlint": "^1.58.0",
     "postcss": "^8.5.6",
     "postcss-plugin-namespace": "^0.0.3",
     "react": "^19.2.4",

package/src/__mocks__/common.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/** biome-ignore-all lint/suspicious/noConsole: for debugging */
+/* oxlint-disable no-console -- for debugging */
 import { type Mock, vi } from "vitest";
 import { invariant } from "@/utils/invariant";
 
@@ -137,12 +137,12 @@ export const SetupMocks = {
           store[key] = value;
         }),
         removeItem: vi.fn((key: string) => {
-          // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+          // oxlint-disable-next-line typescript/no-dynamic-delete
           delete store[key];
         }),
         clear: vi.fn(() => {
           for (const key of Object.keys(store)) {
-            // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+            // oxlint-disable-next-line typescript/no-dynamic-delete
             delete store[key];
           }
         }),
@@ -179,7 +179,7 @@ export const SetupMocks = {
   },
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 export function asMock<T extends (...args: any[]) => unknown>(fn: T): Mock<T> {
   invariant(
     "mock" in fn,

package/src/__tests__/main.test.tsx

@@ -45,20 +45,18 @@ describe("main", () => {
     store.set(configOverridesAtom, {});
   });
 
-  it.each([
-    "edit",
-    "read",
-    "home",
-    "run",
-  ])("should mount with mode %s", (_mode) => {
-    const el = document.createElement("div");
-    mount({ mode: "edit" }, el);
-
-    expect(store.get(viewStateAtom).mode).toBe("edit");
-    expect(store.get(filenameAtom)).toBeDefined();
-    expect(store.get(marimoVersionAtom)).toBe("unknown");
-    expect(store.get(showCodeInRunModeAtom)).toBe(true);
-  });
+  it.each(["edit", "read", "home", "run"])(
+    "should mount with mode %s",
+    (_mode) => {
+      const el = document.createElement("div");
+      mount({ mode: "edit" }, el);
+
+      expect(store.get(viewStateAtom).mode).toBe("edit");
+      expect(store.get(filenameAtom)).toBeDefined();
+      expect(store.get(marimoVersionAtom)).toBe("unknown");
+      expect(store.get(showCodeInRunModeAtom)).toBe(true);
+    },
+  );
 
   it("should not mount with invalid mode", () => {
     const el = document.createElement("div");

package/src/components/ai/ai-provider-icon.tsx

@@ -3,6 +3,7 @@
 import AnthropicIcon from "@marimo-team/llm-info/icons/anthropic.svg?inline";
 import BedrockIcon from "@marimo-team/llm-info/icons/aws.svg?inline";
 import AzureIcon from "@marimo-team/llm-info/icons/azure.svg?inline";
+import CursorIcon from "@marimo-team/llm-info/icons/cursor.svg?inline";
 import DeepseekIcon from "@marimo-team/llm-info/icons/deepseek.svg?inline";
 import GitHubIcon from "@marimo-team/llm-info/icons/github.svg?inline";
 import GeminiIcon from "@marimo-team/llm-info/icons/googlegemini.svg?inline";
@@ -34,10 +35,10 @@ const icons: Record<ProviderId | ExternalAgentId, string> = {
   wandb: WandbIcon,
   marimo: marimoIcon,
   opencode: OpencodeIcon,
+  cursor: CursorIcon,
 };
 
-export interface AiProviderIconProps
-  extends React.HTMLAttributes<HTMLImageElement> {
+export interface AiProviderIconProps extends React.HTMLAttributes<HTMLImageElement> {
   provider: keyof typeof icons | "openai-compatible";
   className?: string;
 }

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

@@ -1276,33 +1276,6 @@ export const UserConfigForm: React.FC = () => {
                 </div>
               )}
             />
-            <FormField
-              control={form.control}
-              name="experimental.storage_inspector"
-              render={({ field }) => (
-                <div className="flex flex-col gap-y-1">
-                  <FormItem className={formItemClasses}>
-                    <FormLabel className="font-normal">
-                      Storage Inspector
-                    </FormLabel>
-                    <FormControl>
-                      <Checkbox
-                        data-testid="storage-inspector-checkbox"
-                        checked={field.value === true}
-                        onCheckedChange={field.onChange}
-                      />
-                    </FormControl>
-                  </FormItem>
-                  <IsOverridden
-                    userConfig={config}
-                    name="experimental.storage_inspector"
-                  />
-                  <FormDescription>
-                    Enable experimental storage inspector.
-                  </FormDescription>
-                </div>
-              )}
-            />
           </SettingGroup>
         );
     }

package/src/components/chat/acp/agent-docs.tsx

@@ -50,11 +50,11 @@ const AgentDocItem = memo<AgentDocItemProps>(
         </div>
         <div className="bg-muted/50 rounded-md p-2 border">
           <div className="flex items-start gap-2 text-xs">
-            <TerminalIcon className="h-4 w-4 mt-0.5 text-muted-foreground flex-shrink-0" />
-            <code className="text-xs font-mono break-words flex-1 whitespace-pre-wrap">
+            <TerminalIcon className="h-4 w-4 mt-0.5 text-muted-foreground shrink-0" />
+            <code className="text-xs font-mono wrap-break-word flex-1 whitespace-pre-wrap">
               {command}
             </code>
-            <div className="flex items-center gap-1 flex-shrink-0">
+            <div className="flex items-center gap-1 shrink-0">
               {showCopy && (
                 <Button size="xs" variant="outline" className="border">
                   <CopyClipboardIcon value={command} className="h-3 w-3" />

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

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { useAtom, useAtomValue } from "jotai";
+import { useAtom } from "jotai";
 import {
   BotMessageSquareIcon,
   RefreshCwIcon,
@@ -8,7 +8,7 @@ import {
 } from "lucide-react";
 import React, { memo, useEffect, useMemo, useRef, useState } from "react";
 import useEvent from "react-use-event-hook";
-import { useAcpClient } from "use-acp";
+import { JsonRpcError, useAcpClient } from "use-acp";
 import {
   ConnectionStatus,
   PermissionRequest,
@@ -207,7 +207,6 @@ interface EmptyStateProps {
 
 const EmptyState = memo<EmptyStateProps>(
   ({ currentAgentId, connectionState, onConnect, onDisconnect }) => {
-    const filename = useAtomValue(filenameAtom);
     return (
       <div className="flex flex-col h-full">
         <AgentPanelHeader
@@ -223,7 +222,7 @@ const EmptyState = memo<EmptyStateProps>(
             <PanelEmptyState
               title="No Agent Sessions"
               description="Create a new session to start a conversation"
-              action={<AgentSelector className="border-y-1 rounded" />}
+              action={<AgentSelector className="border-y rounded" />}
               icon={<BotMessageSquareIcon />}
             />
             {connectionState.status === "disconnected" && (
@@ -232,10 +231,13 @@ const EmptyState = memo<EmptyStateProps>(
                 title="Connect to an agent"
                 description={
                   <>
-                    Start agents by running these commands in your terminal:
+                    <span>
+                      Start agents by running these commands in your terminal.
+                    </span>
                     <br />
-                    Note: This must be in the directory{" "}
-                    {Paths.dirname(filename ?? "")}
+                    <span>
+                      Authenticate with the agent before starting a session.
+                    </span>
                   </>
                 }
               />
@@ -615,6 +617,15 @@ const ChatContent = memo<ChatContentProps>(
 ChatContent.displayName = "ChatContent";
 
 const NO_WS_SET = "_skip_auto_connect_";
+const AUTH_REQUIRED_CODE = -32_000;
+
+function getDataMessage(data: unknown): string | undefined {
+  if (data != null && typeof data === "object" && "message" in data) {
+    const msg = (data as Record<string, unknown>).message;
+    return typeof msg === "string" ? msg : undefined;
+  }
+  return undefined;
+}
 
 function getCwd(): string {
   const cwd = store.get(cwdAtom);
@@ -705,14 +716,31 @@ const AgentPanel: React.FC = () => {
   } = acpClient;
 
   useEffect(() => {
-    agent?.initialize({
-      protocolVersion: 1,
-      clientCapabilities: {
-        fs: {
-          readTextFile: true,
-          writeTextFile: true,
+    if (!agent) {
+      return;
+    }
+
+    const initAndAuth = async () => {
+      const response = await agent.initialize({
+        protocolVersion: 1,
+        clientCapabilities: {
+          fs: {
+            readTextFile: true,
+            writeTextFile: true,
+          },
         },
-      },
+      });
+
+      // We try to authenticate with the agent if it supports it.
+      // The user must then restart the session
+      const authMethods = response?.authMethods;
+      if (authMethods && authMethods.length > 0) {
+        await agent.authenticate({ methodId: authMethods[0].id });
+      }
+    };
+
+    initAndAuth().catch((error) => {
+      logger.error("Failed to initialize/authenticate agent", { error });
     });
   }, [agent]);
 
@@ -735,7 +763,7 @@ const AgentPanel: React.FC = () => {
       // We don't want to disconnect so users can switch between different
       // panels without losing their session
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
   }, [wsUrl]);
 
   const handleNewSession = useEvent(async () => {
@@ -861,7 +889,7 @@ const AgentPanel: React.FC = () => {
     };
 
     createOrResumeSession();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
   }, [isConnected, agent, tabLastActiveSessionId, activeSessionId]);
 
   // Handler for prompt submission
@@ -1041,18 +1069,37 @@ const AgentPanel: React.FC = () => {
 
   const renderBody = () => {
     if (error) {
+      const isAuthError =
+        error instanceof JsonRpcError && error.code === AUTH_REQUIRED_CODE;
+      const dataMessage =
+        error instanceof JsonRpcError ? getDataMessage(error.data) : undefined;
+      const displayError = dataMessage ? new Error(dataMessage) : error;
+
       return (
         <ErrorBanner
           className="w-3/4 mx-auto mt-10"
-          error={error}
+          error={displayError}
           action={
-            <Button
-              variant="linkDestructive"
-              size="sm"
-              onClick={() => setError(null)}
-            >
-              Dismiss
-            </Button>
+            isAuthError ? (
+              <Button
+                variant="linkDestructive"
+                size="sm"
+                onClick={() => {
+                  setError(null);
+                  handleNewSession();
+                }}
+              >
+                Restart session
+              </Button>
+            ) : (
+              <Button
+                variant="linkDestructive"
+                size="sm"
+                onClick={() => setError(null)}
+              >
+                Dismiss
+              </Button>
+            )
           }
         />
       );

package/src/components/chat/acp/agent-selector.tsx

@@ -16,9 +16,7 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { useFilename } from "@/core/saving/filename";
 import { cn } from "@/utils/cn";
-import { Paths } from "@/utils/paths";
 import { AgentDocs } from "./agent-docs";
 import {
   type AgentSession,
@@ -55,17 +53,17 @@ const AVAILABLE_AGENTS = [
     displayName: "OpenCode",
     iconId: "opencode",
   },
+  { id: "cursor", displayName: "Cursor", iconId: "cursor" },
 ] as const;
 
 interface AgentMenuItemProps {
   agent: (typeof AVAILABLE_AGENTS)[number];
   onSelect: (agentId: ExternalAgentId) => void;
   existingSessions: AgentSession[];
-  filename: string | null;
 }
 
 const AgentMenuItem = memo<AgentMenuItemProps>(
-  ({ agent, onSelect, existingSessions, filename }) => {
+  ({ agent, onSelect, existingSessions }) => {
     const sessionSupport = getAgentSessionSupport(agent.id);
     const hasExistingSession = existingSessions.some(
       (s) => s.agentId === agent.id,
@@ -108,11 +106,6 @@ const AgentMenuItem = memo<AgentMenuItemProps>(
               <div className="text-xs font-medium text-muted-foreground mb-3">
                 To start a {agent.displayName} agent, run the following command
                 in your terminal.
-                <br />
-                Note: This must be in the directory{" "}
-                <code className="bg-muted font-mono">
-                  {Paths.dirname(filename ?? "")}
-                </code>
               </div>
               <AgentDocs agents={[agent.id]} showCopy={true} />
             </div>
@@ -126,7 +119,6 @@ AgentMenuItem.displayName = "AgentMenuItem";
 
 export const AgentSelector: React.FC<AgentSelectorProps> = memo(
   ({ onSessionCreated, className }) => {
-    const filename = useFilename();
     const [sessionState, setSessionState] = useAtom(agentSessionStateAtom);
     const setActiveTab = useSetAtom(selectedTabAtom);
     const [isOpen, setIsOpen] = useState(false);
@@ -165,7 +157,6 @@ export const AgentSelector: React.FC<AgentSelectorProps> = memo(
               agent={agent}
               onSelect={handleCreateSession}
               existingSessions={sessionState.sessions}
-              filename={filename}
             />
           ))}
         </DropdownMenuContent>

package/src/components/chat/acp/state.ts

@@ -11,7 +11,12 @@ import type { ExternalAgentSessionId, SessionSupportType } from "./types";
 
 // Types
 export type TabId = TypedString<"TabId">;
-export type ExternalAgentId = "claude" | "gemini" | "codex" | "opencode";
+export type ExternalAgentId =
+  | "claude"
+  | "gemini"
+  | "codex"
+  | "opencode"
+  | "cursor";
 
 // No agents support loading sessions, so we limit to 1, otherwise
 // this is confusing to the user when switching between sessions
@@ -221,11 +226,11 @@ export function getSessionsByAgent(
 ): AgentSession[] {
   return sessions
     .filter((session) => session.agentId === agentId)
-    .sort((a, b) => b.lastUsedAt - a.lastUsedAt);
+    .toSorted((a, b) => b.lastUsedAt - a.lastUsedAt);
 }
 
 export function getAllAgentIds(): ExternalAgentId[] {
-  return ["claude", "gemini", "codex", "opencode"];
+  return ["claude", "gemini", "codex", "opencode", "cursor"];
 }
 
 export function getAgentDisplayName(agentId: ExternalAgentId): string {
@@ -245,6 +250,8 @@ interface AgentConfig {
   port: number;
   command: string;
   sessionSupport: SessionSupportType;
+  /** One-time setup command the user must run before starting the agent. */
+  loginHint?: string;
 }
 
 const AGENT_CONFIG: Record<ExternalAgentId, AgentConfig> = {
@@ -268,6 +275,11 @@ const AGENT_CONFIG: Record<ExternalAgentId, AgentConfig> = {
     command: "npx opencode-ai acp",
     sessionSupport: "single",
   },
+  cursor: {
+    port: 3025,
+    command: "agent acp",
+    sessionSupport: "single",
+  },
 };
 
 export function getAgentSessionSupport(

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

@@ -33,7 +33,7 @@ export const ChatHistoryPopover: React.FC<ChatHistoryPopoverProps> = ({
   const [searchQuery, setSearchQuery] = useState("");
 
   const chats = useMemo(() => {
-    return [...chatState.chats.values()].sort(
+    return [...chatState.chats.values()].toSorted(
       (a, b) => b.updatedAt - a.updatedAt,
     );
   }, [chatState.chats]);

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

@@ -465,7 +465,7 @@ const ChatPanelBody = () => {
     messages: activeChat?.messages || [], // initial messages
     transport: new DefaultChatTransport({
       api: runtimeManager.getAiURL("chat").toString(),
-      headers: runtimeManager.headers(),
+      headers: () => runtimeManager.headers(),
       prepareSendMessagesRequest: async (options) => {
         const completionBody = await buildCompletionRequestBody(
           options.messages,
@@ -476,6 +476,7 @@ const ChatPanelBody = () => {
         const tools = FRONTEND_TOOL_REGISTRY.getToolSchemas(chatMode);
 
         return {
+          api: runtimeManager.getAiURL("chat").toString(),
           body: {
             tools,
             ...options,

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

@@ -4,6 +4,7 @@
 import type { RowSelectionState, Table } from "@tanstack/react-table";
 import { useLocale } from "react-aria";
 import type { GetRowIds } from "@/plugins/impl/DataTablePlugin";
+import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
 import { prettyNumber } from "@/utils/numbers";
 import { Button } from "../ui/button";
@@ -22,6 +23,7 @@ interface TableBottomBarProps<TData> {
   showPageSizeSelector?: boolean;
   tableLoading?: boolean;
   part?: string;
+  className?: string;
 }
 
 export const TableBottomBar = <TData,>({
@@ -34,6 +36,7 @@ export const TableBottomBar = <TData,>({
   showPageSizeSelector,
   tableLoading,
   part,
+  className,
 }: TableBottomBarProps<TData>) => {
   const { locale } = useLocale();
   const handleSelectAllRows = (value: boolean) => {
@@ -147,7 +150,10 @@ export const TableBottomBar = <TData,>({
   return (
     <div
       part={part}
-      className="flex lg:grid lg:grid-cols-[1fr_auto_1fr] items-center shrink-0 pt-1"
+      className={cn(
+        "flex lg:grid lg:grid-cols-[1fr_auto_1fr] items-center shrink-0",
+        className,
+      )}
     >
       <div className="flex flex-col text-sm text-muted-foreground px-2 shrink-0">
         <div className="flex items-center gap-1">{renderTotal()}</div>