@marimo-team/islands 0.24.3-dev9 → 0.25.0

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

@@ -718,13 +718,28 @@ const AgentPanel: React.FC = () => {
     clearNotifications,
   } = acpClient;
 
+  const isConnected = connectionState.status === "connected";
+  const [initializedConnection, setInitializedConnection] = useState<{
+    agent: NonNullable<typeof agent>;
+    wsUrl: string;
+  } | null>(null);
+  const isAgentReady =
+    isConnected &&
+    agent !== null &&
+    initializedConnection?.agent === agent &&
+    initializedConnection.wsUrl === wsUrl;
+
   useEffect(() => {
-    if (!agent) {
+    setInitializedConnection(null);
+    setActiveSessionId(null);
+    if (!agent || !isConnected) {
       return;
     }
+    let cancelled = false;
+    setError(null);
 
-    const initAndAuth = async () => {
-      const response = await agent.initialize({
+    const initialize = async () => {
+      await agent.initialize({
         protocolVersion: 1,
         clientCapabilities: {
           fs: {
@@ -734,23 +749,26 @@ const AgentPanel: React.FC = () => {
         },
       });
 
-      // 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 });
+      // Agents use credentials from their CLI login. Advertised auth methods
+      // describe login options, not whether authentication is required.
+      if (!cancelled) {
+        setInitializedConnection({ agent, wsUrl });
       }
     };
 
-    initAndAuth().catch((error) => {
-      logger.error("Failed to initialize/authenticate agent", { error });
+    initialize().catch((error) => {
+      if (!cancelled) {
+        logger.error("Failed to initialize agent", { error });
+        setError(error instanceof Error ? error : String(error));
+      }
     });
-  }, [agent]);
+    return () => {
+      cancelled = true;
+    };
+  }, [agent, isConnected, wsUrl, setActiveSessionId]);
 
   // Auto-connect to agent when we have an active session, but only once per session
   useEffect(() => {
-    setActiveSessionId(null);
-
     if (wsUrl === NO_WS_SET) {
       return;
     }
@@ -770,7 +788,7 @@ const AgentPanel: React.FC = () => {
   }, [wsUrl]);
 
   const handleNewSession = useEvent(async () => {
-    if (!agent) {
+    if (!agent || !isAgentReady) {
       return;
     }
 
@@ -814,7 +832,7 @@ const AgentPanel: React.FC = () => {
 
   const handleResumeSession = useEvent(
     async (previousSessionId: ExternalAgentSessionId) => {
-      if (!agent) {
+      if (!agent || !isAgentReady) {
         return;
       }
       logger.debug("Resuming agent session", {
@@ -825,6 +843,8 @@ const AgentPanel: React.FC = () => {
       }
       creatingOrResumingSession.current = true;
       try {
+        // Loading replays the agent's history through session notifications.
+        clearNotifications(previousSessionId);
         const loadedSession = await agent.loadSession({
           sessionId: previousSessionId,
           cwd: getCwd(),
@@ -848,12 +868,19 @@ const AgentPanel: React.FC = () => {
     },
   );
 
-  // Create or resume a session when successfully connected
-  const isConnected = connectionState.status === "connected";
+  const handleRestartSession = useEvent(async () => {
+    setError(null);
+    try {
+      await handleNewSession();
+    } catch (error) {
+      setError(error instanceof Error ? error : String(error));
+    }
+  });
+
+  // Create or resume a session once initialization finishes.
   const tabLastActiveSessionId = selectedTab?.externalAgentSessionId;
   useEffect(() => {
-    // No need to do anything if we're not connected, don't have an agent, or don't have a selected tab
-    if (!isConnected || !selectedTab || !agent) {
+    if (!isAgentReady || !selectedTab || !agent) {
       return;
     }
 
@@ -893,12 +920,24 @@ const AgentPanel: React.FC = () => {
 
     createOrResumeSession();
     // oxlint-disable-next-line react-hooks/exhaustive-deps
-  }, [isConnected, agent, tabLastActiveSessionId, activeSessionId]);
+  }, [isAgentReady, agent, tabLastActiveSessionId, activeSessionId]);
 
   // Handler for prompt submission
   const handlePromptSubmit = useEvent(
     async (_e: KeyboardEvent | undefined, prompt: string) => {
-      if (!activeSessionId || !agent || isLoading) {
+      if (!activeSessionId || !agent || !isAgentReady || isLoading) {
+        return;
+      }
+
+      let absoluteFilename: string;
+      try {
+        absoluteFilename = getAbsoluteFilename();
+      } catch {
+        toast({
+          title: "Notebook must be named",
+          description: "Please name the notebook to use the agent",
+          variant: "danger",
+        });
         return;
       }
 
@@ -914,62 +953,51 @@ const AgentPanel: React.FC = () => {
         setSessionState((prev) => updateSessionTitle(prev, prompt));
       }
 
-      let absoluteFilename: string;
       try {
-        absoluteFilename = getAbsoluteFilename();
-      } catch {
-        toast({
-          title: "Notebook must be named",
-          description: "Please name the notebook to use the agent",
-          variant: "danger",
-        });
-        return;
-      }
-
-      const promptBlocks: ContentBlock[] = [{ type: "text", text: prompt }];
+        const promptBlocks: ContentBlock[] = [{ type: "text", text: prompt }];
 
-      // Parse context from the prompt
-      const { contextBlocks, attachmentBlocks } =
-        await parseContextFromPrompt(prompt);
-      promptBlocks.push(...contextBlocks, ...attachmentBlocks);
+        // Parse context from the prompt
+        const { contextBlocks, attachmentBlocks } =
+          await parseContextFromPrompt(prompt);
+        promptBlocks.push(...contextBlocks, ...attachmentBlocks);
 
-      // Add manually uploaded files as resource links
-      if (files && files.length > 0) {
-        const fileResourceLinks = await convertFilesToResourceLinks(files);
-        promptBlocks.push(...fileResourceLinks);
-      }
+        // Add manually uploaded files as resource links
+        if (files && files.length > 0) {
+          const fileResourceLinks = await convertFilesToResourceLinks(files);
+          promptBlocks.push(...fileResourceLinks);
+        }
 
-      const hasGivenRules = notifications.some(
-        (notification) =>
-          notification.type === "session_notification" &&
-          notification.data.update.sessionUpdate === "user_message_chunk",
-      );
-      if (!hasGivenRules) {
-        promptBlocks.push(
-          {
-            type: "resource_link",
-            uri: absoluteFilename,
-            mimeType: "text/x-python",
-            name: absoluteFilename,
-          },
-          {
-            type: "resource",
-            resource: {
-              uri: "marimo_rules.md",
-              mimeType: "text/plain",
-              text: getAgentPrompt(absoluteFilename),
-            },
-          },
+        const hasGivenRules = notifications.some(
+          (notification) =>
+            notification.type === "session_notification" &&
+            notification.data.update.sessionUpdate === "user_message_chunk",
         );
-      }
+        if (!hasGivenRules) {
+          promptBlocks.push(
+            {
+              type: "resource_link",
+              uri: absoluteFilename,
+              mimeType: "text/x-python",
+              name: absoluteFilename,
+            },
+            {
+              type: "resource",
+              resource: {
+                uri: "marimo_rules.md",
+                mimeType: "text/plain",
+                text: getAgentPrompt(absoluteFilename),
+              },
+            },
+          );
+        }
 
-      try {
         await agent.prompt({
           sessionId: activeSessionId,
           prompt: promptBlocks,
         });
       } catch (error) {
         logger.error("Failed to send prompt", { error });
+        setError(error instanceof Error ? error : String(error));
       } finally {
         setIsLoading(false);
       }
@@ -982,7 +1010,7 @@ const AgentPanel: React.FC = () => {
       !activeSessionId ||
       !agent ||
       isLoading ||
-      connectionState.status !== "connected" ||
+      !isAgentReady ||
       !pendingPrompt
     ) {
       return;
@@ -998,7 +1026,7 @@ const AgentPanel: React.FC = () => {
     activeSessionId,
     agent,
     isLoading,
-    connectionState.status,
+    isAgentReady,
     pendingPrompt,
     setPendingPrompt,
     handlePromptSubmit,
@@ -1018,7 +1046,10 @@ const AgentPanel: React.FC = () => {
     logger.debug("Manual connect requested", {
       currentStatus: connectionState.status,
     });
-    connect();
+    setError(null);
+    void connect().catch((error) => {
+      setError(error instanceof Error ? error : String(error));
+    });
   });
 
   // Handler for manual disconnect
@@ -1111,14 +1142,22 @@ const AgentPanel: React.FC = () => {
           className="w-3/4 mx-auto mt-10"
           error={displayError}
           action={
-            isAuthError ? (
+            !isAgentReady ? (
               <Button
                 variant="linkDestructive"
                 size="sm"
                 onClick={() => {
-                  setError(null);
-                  handleNewSession();
+                  disconnect();
+                  handleManualConnect();
                 }}
+              >
+                Retry connection
+              </Button>
+            ) : isAuthError ? (
+              <Button
+                variant="linkDestructive"
+                size="sm"
+                onClick={handleRestartSession}
               >
                 Restart session
               </Button>
@@ -1152,14 +1191,16 @@ const AgentPanel: React.FC = () => {
     }
 
     const isLoadingSession =
-      tabLastActiveSessionId == null && connectionState.status === "connected";
+      isConnected && (!isAgentReady || tabLastActiveSessionId == null);
     if (isLoadingSession) {
       return (
         <DelayMount milliseconds={delay}>
           <div className="flex items-center justify-center h-full min-h-[200px] flex-col">
             <Spinner size="medium" className="text-primary" />
             <span className="text-sm text-muted-foreground">
-              Creating a new session...
+              {isAgentReady
+                ? "Creating a new session..."
+                : "Initializing agent..."}
             </span>
           </div>
         </DelayMount>
@@ -1231,7 +1272,7 @@ const AgentPanel: React.FC = () => {
         currentAgentId={selectedTab?.agentId}
         onConnect={handleManualConnect}
         onDisconnect={handleManualDisconnect}
-        onRestartThread={handleNewSession}
+        onRestartThread={isAgentReady ? handleRestartSession : undefined}
         hasActiveSession={true}
         shouldShowConnectionControl={wsUrl !== NO_WS_SET}
       />

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

@@ -257,7 +257,7 @@ interface AgentConfig {
 const AGENT_CONFIG: Record<ExternalAgentId, AgentConfig> = {
   claude: {
     port: 3017,
-    command: "npx @zed-industries/claude-code-acp",
+    command: "npx @agentclientprotocol/claude-agent-acp",
     sessionSupport: "single",
   },
   gemini: {

package/src/components/data-table/__tests__/filters.test.ts

@@ -368,11 +368,10 @@ describe("schema validation", () => {
       operator: ">=",
       value: 18,
     });
-    expect(result.success).toBe(true);
-    if (result.success) {
-      expect(result.data.type).toBe("condition");
-      expect(result.data.negate).toBe(false);
-    }
+    expect(result).toMatchObject({
+      success: true,
+      data: { type: "condition", negate: false },
+    });
   });
 
   it("FilterConditionSchema defaults type and negate", () => {
@@ -381,11 +380,10 @@ describe("schema validation", () => {
       operator: "==",
       value: 5,
     });
-    expect(result.success).toBe(true);
-    if (result.success) {
-      expect(result.data.type).toBe("condition");
-      expect(result.data.negate).toBe(false);
-    }
+    expect(result).toMatchObject({
+      success: true,
+      data: { type: "condition", negate: false },
+    });
   });
 
   it("FilterConditionSchema accepts negate=true", () => {
@@ -395,10 +393,10 @@ describe("schema validation", () => {
       value: 5,
       negate: true,
     });
-    expect(result.success).toBe(true);
-    if (result.success) {
-      expect(result.data.negate).toBe(true);
-    }
+    expect(result).toMatchObject({
+      success: true,
+      data: { negate: true },
+    });
   });
 
   it("FilterGroupSchema accepts valid group", () => {
@@ -440,12 +438,14 @@ describe("schema validation", () => {
 
   it("FilterGroupSchema defaults fields", () => {
     const result = FilterGroupSchema.safeParse({});
-    expect(result.success).toBe(true);
-    if (result.success) {
-      expect(result.data.type).toBe("group");
-      expect(result.data.operator).toBe("and");
-      expect(result.data.children).toEqual([]);
-      expect(result.data.negate).toBe(false);
-    }
+    expect(result).toMatchObject({
+      success: true,
+      data: {
+        type: "group",
+        operator: "and",
+        children: [],
+        negate: false,
+      },
+    });
   });
 });

package/src/components/data-table/charts/__tests__/spec.test.ts

@@ -169,16 +169,11 @@ describe("getAxisEncoding", () => {
 
       const expectedAggregate = (result as { aggregate?: string }).aggregate;
 
-      // For aggregations that are not valid for string data types, we should return undefined
-      if (
-        agg === NONE_VALUE ||
-        agg === BIN_AGGREGATION ||
-        !STRING_AGGREGATION_FNS.includes(agg)
-      ) {
-        expect(expectedAggregate).toBeUndefined();
-      } else if (STRING_AGGREGATION_FNS.includes(agg)) {
-        expect(expectedAggregate).toEqual(agg);
-      }
+      const isStringAggregation =
+        agg !== NONE_VALUE &&
+        agg !== BIN_AGGREGATION &&
+        STRING_AGGREGATION_FNS.includes(agg);
+      expect(expectedAggregate).toBe(isStringAggregation ? agg : undefined);
     }
   });
 

package/src/components/data-table/column-explorer-panel/column-explorer.tsx

@@ -10,7 +10,7 @@ import {
   EyeIcon,
   EyeOffIcon,
 } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { useLocale } from "react-aria";
 import {
   AddDataframeChart,
@@ -98,11 +98,7 @@ export function ColumnExplorerPanel<TData>({
     hiddenColumns: hiddenColumnCount,
   } = getColumnCountForDisplay(table, totalColumns);
   const { visible: visibleColumnCount } = getUserColumnVisibilityCounts(table);
-  const columnVisibility = table.getState().columnVisibility;
-  const showOnlyColumnState = useMemo(
-    () => getShowOnlyColumnState(table),
-    [table, columnVisibility],
-  );
+  const showOnlyColumnState = getShowOnlyColumnState(table);
 
   const { rowsAndColumns, hiddenSuffix } = prettifyRowColumnCount({
     numRows: totalRows,

package/src/components/data-table/column-summary/chart-spec-model.tsx

@@ -573,7 +573,7 @@ export class ColumnChartSpecModel<T> {
         };
       }
       case "boolean": {
-        if (!stats?.true || !stats?.false) {
+        if (stats?.true == null || stats?.false == null) {
           return getLegacyBooleanSpec(column, base, MAX_BAR_HEIGHT);
         }
 

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

@@ -20,7 +20,6 @@ import { Maps } from "@/utils/maps";
 import { maxFractionalDigits } from "@/utils/numbers";
 import { Objects } from "@/utils/objects";
 import { parseContent } from "@/utils/url-parser";
-import { EmotionCacheProvider } from "../editor/output/EmotionCacheProvider";
 import { JsonOutput } from "../editor/output/JsonOutput";
 import { CopyClipboardIcon } from "../icons/copy-icon";
 import { Button } from "../ui/button";
@@ -412,76 +411,74 @@ const PopoutColumn = ({
     : rawStringValue;
 
   return (
-    <EmotionCacheProvider container={null}>
-      <Popover>
-        <PopoverTrigger
-          ref={triggerRef}
-          className={cn(cellStyles, "max-w-fit outline-hidden")}
-          onClick={selectCell}
-          onMouseDown={(e) => {
-            // Prevent cell underneath from being selected
-            e.stopPropagation();
-          }}
-        >
-          <span
-            className={cn(
-              "cursor-pointer hover:text-link",
-              wrapped && COLUMN_WRAPPING_STYLES,
-            )}
-            title={rawStringValue}
-          >
-            {edges ? <WhitespaceMarkers value={edges.leading} /> : null}
-            {displayText}
-            {edges ? <WhitespaceMarkers value={edges.trailing} /> : null}
-          </span>
-        </PopoverTrigger>
-        <PopoverContent
+    <Popover>
+      <PopoverTrigger
+        ref={triggerRef}
+        className={cn(cellStyles, "max-w-fit outline-hidden")}
+        onClick={selectCell}
+        onMouseDown={(e) => {
+          // Prevent cell underneath from being selected
+          e.stopPropagation();
+        }}
+      >
+        <span
           className={cn(
-            contentClassName,
-            scrollable && "flex flex-col overflow-hidden",
+            "cursor-pointer hover:text-link",
+            wrapped && COLUMN_WRAPPING_STYLES,
           )}
-          align="start"
-          alignOffset={10}
-          onInteractOutside={(event) => {
-            // Radix sees the shadow host as the target. Resolve the original
-            // target so pointer-down does not dismiss before click toggles.
-            const target = Events.composedTarget(event.detail.originalEvent);
-            if (triggerRef.current?.contains(target)) {
-              event.preventDefault();
-            }
-          }}
+          title={rawStringValue}
         >
-          <div
-            className={cn(
-              "flex -mt-3 -mr-2",
-              scrollable ? "shrink-0 justify-end" : "float-right",
-            )}
-          >
-            <CopyClipboardIcon
-              value={rawStringValue}
-              className="size-3 hover:text-link"
-              buttonClassName="flex size-5 items-center justify-center"
-              tooltip={false}
-            />
-            <PopoverClose asChild={true}>
-              <Button
-                variant="link"
-                size="xs"
-                className={cn("size-5 p-0", !buttonText && "ml-1.5 mr-1")}
-                aria-label="Close"
-              >
-                {buttonText ?? "Close"}
-              </Button>
-            </PopoverClose>
-          </div>
-          {scrollable ? (
-            <div className="min-h-0 overflow-auto">{children}</div>
-          ) : (
-            children
+          {edges ? <WhitespaceMarkers value={edges.leading} /> : null}
+          {displayText}
+          {edges ? <WhitespaceMarkers value={edges.trailing} /> : null}
+        </span>
+      </PopoverTrigger>
+      <PopoverContent
+        className={cn(
+          contentClassName,
+          scrollable && "flex flex-col overflow-hidden",
+        )}
+        align="start"
+        alignOffset={10}
+        onInteractOutside={(event) => {
+          // Radix sees the shadow host as the target. Resolve the original
+          // target so pointer-down does not dismiss before click toggles.
+          const target = Events.composedTarget(event.detail.originalEvent);
+          if (triggerRef.current?.contains(target)) {
+            event.preventDefault();
+          }
+        }}
+      >
+        <div
+          className={cn(
+            "flex -mt-3 -mr-2",
+            scrollable ? "shrink-0 justify-end" : "float-right",
           )}
-        </PopoverContent>
-      </Popover>
-    </EmotionCacheProvider>
+        >
+          <CopyClipboardIcon
+            value={rawStringValue}
+            className="size-3 hover:text-link"
+            buttonClassName="flex size-5 items-center justify-center"
+            tooltip={false}
+          />
+          <PopoverClose asChild={true}>
+            <Button
+              variant="link"
+              size="xs"
+              className={cn("size-5 p-0", !buttonText && "ml-1.5 mr-1")}
+              aria-label="Close"
+            >
+              {buttonText ?? "Close"}
+            </Button>
+          </PopoverClose>
+        </div>
+        {scrollable ? (
+          <div className="min-h-0 overflow-auto">{children}</div>
+        ) : (
+          children
+        )}
+      </PopoverContent>
+    </Popover>
   );
 };
 

package/src/components/editor/RecoveryButton.tsx

@@ -60,6 +60,7 @@ const RecoveryModal = (props: {
   // NB: we use markdown class to have sane styling for list, paragraph
   return (
     <DialogContent className="w-fit">
+      {/* oxlint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Handle Escape from any control within the recovery form. */}
       <form
         onSubmit={(e) => {
           e.preventDefault();