@marimo-team/islands 0.16.5 → 0.17.1

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

@@ -1,6 +1,7 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import * as shortcuts from "@/core/hotkeys/shortcuts";
 import {
   type AgentSession,
   type AgentSessionState,
@@ -171,6 +172,62 @@ describe("state utility functions", () => {
       `);
     });
 
+    it("should clear externalAgentSessionId when switching between different agents", () => {
+      // Start with a Claude session that has an active external session ID
+      const claudeSession: AgentSession = {
+        agentId: "claude",
+        tabId: "tab_claude" as TabId,
+        title: "Claude session",
+        createdAt: 1_735_689_600_000,
+        lastUsedAt: 1_735_689_600_000,
+        externalAgentSessionId: "claude-session-123" as ExternalAgentSessionId,
+      };
+      const initialState: AgentSessionState = {
+        sessions: [claudeSession],
+        activeTabId: claudeSession.tabId,
+      };
+
+      // Switch to Gemini
+      const newState = addSession(initialState, { agentId: "gemini" });
+
+      // Should create a new Gemini session with null externalAgentSessionId
+      // and remove the Claude session (MAX_SESSIONS = 1)
+      expect(newState.sessions).toHaveLength(1);
+      expect(newState.sessions[0].agentId).toBe("gemini");
+      expect(newState.sessions[0].externalAgentSessionId).toBe(null);
+
+      // The active tab should be the new Gemini session
+      expect(newState.activeTabId).toBe(newState.sessions[0].tabId);
+    });
+
+    it("should clear externalAgentSessionId when switching from Gemini to Claude", () => {
+      // Start with a Gemini session that has an active external session ID
+      const geminiSession: AgentSession = {
+        agentId: "gemini",
+        tabId: "tab_gemini" as TabId,
+        title: "Gemini session",
+        createdAt: 1_735_689_600_000,
+        lastUsedAt: 1_735_689_600_000,
+        externalAgentSessionId: "gemini-session-456" as ExternalAgentSessionId,
+      };
+      const initialState: AgentSessionState = {
+        sessions: [geminiSession],
+        activeTabId: geminiSession.tabId,
+      };
+
+      // Switch to Claude
+      const newState = addSession(initialState, { agentId: "claude" });
+
+      // Should create a new Claude session with null externalAgentSessionId
+      // and remove the Gemini session (MAX_SESSIONS = 1)
+      expect(newState.sessions).toHaveLength(1);
+      expect(newState.sessions[0].agentId).toBe("claude");
+      expect(newState.sessions[0].externalAgentSessionId).toBe(null);
+
+      // The active tab should be the new Claude session
+      expect(newState.activeTabId).toBe(newState.sessions[0].tabId);
+    });
+
     it("should not mutate original state", () => {
       const initialState: AgentSessionState = {
         sessions: [],
@@ -602,16 +659,32 @@ describe("state utility functions", () => {
   });
 
   describe("getAgentConnectionCommand", () => {
-    it("should return correct command for claude", () => {
+    it("should return correct command for claude on non-Windows", () => {
+      vi.spyOn(shortcuts, "isPlatformWindows").mockReturnValue(false);
       expect(getAgentConnectionCommand("claude")).toMatchInlineSnapshot(`
         "npx stdio-to-ws "npx @zed-industries/claude-code-acp" --port 3017"
       `);
     });
 
-    it("should return correct command for gemini", () => {
+    it("should return correct command for claude on Windows", () => {
+      vi.spyOn(shortcuts, "isPlatformWindows").mockReturnValue(true);
+      expect(getAgentConnectionCommand("claude")).toMatchInlineSnapshot(`
+        "npx stdio-to-ws "cmd /c npx @zed-industries/claude-code-acp" --port 3017"
+      `);
+    });
+
+    it("should return correct command for gemini on non-Windows", () => {
+      vi.spyOn(shortcuts, "isPlatformWindows").mockReturnValue(false);
       expect(getAgentConnectionCommand("gemini")).toMatchInlineSnapshot(`
         "npx stdio-to-ws "npx @google/gemini-cli --experimental-acp" --port 3019"
       `);
     });
+
+    it("should return correct command for gemini on Windows", () => {
+      vi.spyOn(shortcuts, "isPlatformWindows").mockReturnValue(true);
+      expect(getAgentConnectionCommand("gemini")).toMatchInlineSnapshot(`
+        "npx stdio-to-ws "cmd /c npx @google/gemini-cli --experimental-acp" --port 3019"
+      `);
+    });
   });
 });

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

@@ -62,12 +62,14 @@ import {
   SelectTrigger,
 } from "@/components/ui/select";
 import { toast } from "@/components/ui/use-toast";
+import { DelayMount } from "@/components/utils/delay-mount";
 import { useRequestClient } from "@/core/network/requests";
 import { filenameAtom } from "@/core/saving/file-state";
 import { store } from "@/core/state/jotai";
 import { Functions } from "@/utils/functions";
 import { Paths } from "@/utils/paths";
 import { FileAttachmentPill } from "../chat-components";
+import { ReadyToChatBlock } from "./blocks";
 import {
   convertFilesToResourceLinks,
   parseContextFromPrompt,
@@ -548,6 +550,52 @@ const ChatContent = memo<ChatContentProps>(
       }
     }, [notifications.length, isScrolledToBottom, scrollToBottom]);
 
+    const renderThread = () => {
+      if (hasNotifications) {
+        return (
+          <AgentThread
+            isConnected={connectionState.status === "connected"}
+            notifications={notifications}
+            onRetryConnection={onRetryConnection}
+            onRetryLastAction={onRetryLastAction}
+          />
+        );
+      }
+
+      const isConnected = connectionState.status === "connected";
+      if (isConnected) {
+        return <ReadyToChatBlock />;
+      }
+
+      return (
+        <div className="flex items-center justify-center h-full min-h-[200px] flex-col">
+          <PanelEmptyState
+            title="Waiting for agent"
+            description="Your AI agent will appear here when active"
+            icon={<BotMessageSquareIcon />}
+          />
+          {isDisconnected && agentId && (
+            <AgentDocs
+              className="border-t pt-6 px-5"
+              title="Make sure you're connected to an agent"
+              description="Run this command in your terminal:"
+              agents={[agentId]}
+            />
+          )}
+          {isDisconnected && (
+            <Button
+              variant="outline"
+              onClick={onRetryConnection}
+              type="button"
+              className="mt-4"
+            >
+              Retry
+            </Button>
+          )}
+        </div>
+      );
+    };
+
     return (
       <div className="flex-1 flex flex-col overflow-hidden flex-shrink-0 relative">
         {pendingPermission && (
@@ -569,43 +617,7 @@ const ChatContent = memo<ChatContentProps>(
               Session ID: {sessionId}
             </div>
           )}
-          {hasNotifications ? (
-            <div className="space-y-2">
-              <AgentThread
-                isConnected={connectionState.status === "connected"}
-                notifications={notifications}
-                onRetryConnection={onRetryConnection}
-                onRetryLastAction={onRetryLastAction}
-                onDismissError={onDismissError}
-              />
-            </div>
-          ) : (
-            <div className="flex items-center justify-center h-full min-h-[200px] flex-col">
-              <PanelEmptyState
-                title="Waiting for agent"
-                description="Your AI agent will appear here when active"
-                icon={<BotMessageSquareIcon />}
-              />
-              {isDisconnected && agentId && (
-                <AgentDocs
-                  className="border-t pt-6 px-5"
-                  title="Make sure you're connected to an agent"
-                  description="Run this command in your terminal:"
-                  agents={[agentId]}
-                />
-              )}
-              {isDisconnected && (
-                <Button
-                  variant="outline"
-                  onClick={onRetryConnection}
-                  type="button"
-                  className="mt-4"
-                >
-                  Retry
-                </Button>
-              )}
-            </div>
-          )}
+          {renderThread()}
         </div>
 
         <ScrollToBottomButton
@@ -671,6 +683,7 @@ const AgentPanel: React.FC = () => {
   const {
     connect,
     disconnect,
+    setActiveSessionId,
     connectionState,
     notifications,
     pendingPermission,
@@ -695,6 +708,8 @@ const AgentPanel: React.FC = () => {
 
   // Auto-connect to agent when we have an active session, but only once per session
   useEffect(() => {
+    setActiveSessionId(null);
+
     if (wsUrl === NO_WS_SET) {
       return;
     }
@@ -702,7 +717,9 @@ const AgentPanel: React.FC = () => {
     logger.debug("Auto-connecting to agent", {
       sessionId: activeSessionId,
     });
-    connect();
+    void connect().catch((error) => {
+      logger.error("Failed to connect to agent", { error });
+    });
 
     return () => {
       // We don't want to disconnect so users can switch between different
@@ -712,15 +729,13 @@ const AgentPanel: React.FC = () => {
   }, [wsUrl]);
 
   const handleNewSession = useEvent(async () => {
-    if (isCreatingNewSession.current) {
-      return;
-    }
     if (!agent) {
       return;
     }
 
     // If there is an active session, we should stop it
     if (activeSessionId) {
+      setActiveSessionId(null);
       await agent.cancel({ sessionId: activeSessionId }).catch((error) => {
         logger.error("Failed to cancel active session", { error });
       });
@@ -969,6 +984,92 @@ const AgentPanel: React.FC = () => {
     );
   }
 
+  const renderBody = () => {
+    const isConnecting = connectionState.status === "connecting";
+    const delay = 200; // ms
+    if (isConnecting) {
+      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">
+              Connecting to the agent...
+            </span>
+          </div>
+        </DelayMount>
+      );
+    }
+
+    const isLoadingSession =
+      tabLastActiveSessionId == null && connectionState.status === "connected";
+    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...
+            </span>
+          </div>
+        </DelayMount>
+      );
+    }
+
+    return (
+      <>
+        <ChatContent
+          key={activeSessionId}
+          agentId={selectedTab?.agentId}
+          sessionId={selectedTab?.externalAgentSessionId ?? null}
+          hasNotifications={hasNotifications}
+          connectionState={connectionState}
+          notifications={notifications}
+          pendingPermission={pendingPermission}
+          onResolvePermission={(option) => {
+            logger.debug("Resolving permission request", {
+              sessionId: activeSessionId,
+              option,
+            });
+            resolvePermission(option);
+          }}
+          onRetryConnection={handleManualConnect}
+        />
+
+        <LoadingIndicator
+          isLoading={isLoading}
+          isRequestingPermission={!!pendingPermission}
+          onStop={handleStop}
+        />
+
+        {files && files.length > 0 && (
+          <div className="flex flex-row gap-1 flex-wrap p-3 border-t">
+            {files.map((file) => (
+              <FileAttachmentPill
+                file={file}
+                key={file.name}
+                onRemove={() => handleRemoveFile(file)}
+              />
+            ))}
+          </div>
+        )}
+
+        <PromptArea
+          isLoading={isLoading}
+          activeSessionId={activeSessionId}
+          promptValue={promptValue}
+          onPromptValueChange={setPromptValue}
+          onPromptSubmit={handlePromptSubmit}
+          onAddFiles={handleAddFiles}
+          onStop={handleStop}
+          fileInputRef={fileInputRef}
+          commands={availableCommands}
+          sessionMode={sessionMode}
+          onModeChange={handleModeChange}
+        />
+      </>
+    );
+  };
+
   return (
     <div className="flex flex-col flex-1 overflow-hidden mo-agent-panel">
       <AgentPanelHeader
@@ -982,54 +1083,7 @@ const AgentPanel: React.FC = () => {
       />
       <SessionTabs />
 
-      <ChatContent
-        agentId={selectedTab?.agentId}
-        sessionId={activeSessionId}
-        hasNotifications={hasNotifications}
-        connectionState={connectionState}
-        notifications={notifications}
-        pendingPermission={pendingPermission}
-        onResolvePermission={(option) => {
-          logger.debug("Resolving permission request", {
-            sessionId: activeSessionId,
-            option,
-          });
-          resolvePermission(option);
-        }}
-        onRetryConnection={handleManualConnect}
-      />
-
-      <LoadingIndicator
-        isLoading={isLoading}
-        isRequestingPermission={!!pendingPermission}
-        onStop={handleStop}
-      />
-
-      {files && files.length > 0 && (
-        <div className="flex flex-row gap-1 flex-wrap p-3 border-t">
-          {files.map((file) => (
-            <FileAttachmentPill
-              file={file}
-              key={file.name}
-              onRemove={() => handleRemoveFile(file)}
-            />
-          ))}
-        </div>
-      )}
-
-      <PromptArea
-        isLoading={isLoading}
-        activeSessionId={activeSessionId}
-        promptValue={promptValue}
-        onPromptValueChange={setPromptValue}
-        onPromptSubmit={handlePromptSubmit}
-        onAddFiles={handleAddFiles}
-        onStop={handleStop}
-        fileInputRef={fileInputRef}
-        commands={availableCommands}
-        sessionMode={sessionMode}
-        onModeChange={handleModeChange}
-      />
+      {renderBody()}
     </div>
   );
 };

package/src/components/chat/acp/blocks.tsx

@@ -1,4 +1,5 @@
 /* Copyright 2024 Marimo. All rights reserved. */
+
 import type {
   ContentBlock,
   ToolCallContent,
@@ -6,6 +7,7 @@ import type {
 } from "@zed-industries/agent-client-protocol";
 import { capitalize } from "lodash-es";
 import {
+  BotMessageSquareIcon,
   FileAudio2Icon,
   FileIcon,
   FileImageIcon,
@@ -21,6 +23,7 @@ import {
 } from "lucide-react";
 import React from "react";
 import { mergeToolCalls } from "use-acp";
+import { ReadonlyDiff } from "@/components/editor/code/readonly-diff";
 import { JsonOutput } from "@/components/editor/output/JsonOutput";
 import { Button } from "@/components/ui/button";
 import {
@@ -54,6 +57,46 @@ import {
   isUserMessages,
 } from "./utils";
 
+/**
+ * Merges consecutive text blocks into a single text block to prevent
+ * fragmented display when agent messages are streamed in chunks.
+ */
+function mergeConsecutiveTextBlocks(
+  contentBlocks: ContentBlock[],
+): ContentBlock[] {
+  if (contentBlocks.length === 0) {
+    return contentBlocks;
+  }
+
+  const merged: ContentBlock[] = [];
+  let currentTextBlock: string | null = null;
+
+  for (const block of contentBlocks) {
+    if (block.type === "text") {
+      // Accumulate text content
+      if (currentTextBlock === null) {
+        currentTextBlock = block.text;
+      } else {
+        currentTextBlock += block.text;
+      }
+    } else {
+      // If we have accumulated text, flush it before adding non-text block
+      if (currentTextBlock !== null) {
+        merged.push({ type: "text", text: currentTextBlock });
+        currentTextBlock = null;
+      }
+      merged.push(block);
+    }
+  }
+
+  // Flush any remaining text
+  if (currentTextBlock !== null) {
+    merged.push({ type: "text", text: currentTextBlock });
+  }
+
+  return merged;
+}
+
 export const ErrorBlock = (props: {
   data: ErrorNotificationEvent["data"];
   onRetry?: () => void;
@@ -114,16 +157,37 @@ export const ErrorBlock = (props: {
   );
 };
 
+export const ReadyToChatBlock = () => {
+  return (
+    <div className="flex-1 flex items-center justify-center h-full min-h-[200px] flex-col">
+      <div className="text-center space-y-3">
+        <div className="w-12 h-12 mx-auto rounded-full bg-[var(--blue-3)] flex items-center justify-center">
+          <BotMessageSquareIcon className="h-6 w-6 text-[var(--blue-10)]" />
+        </div>
+        <div>
+          <h3 className="text-lg font-medium text-foreground mb-1">
+            Agent is connected
+          </h3>
+          <p className="text-sm text-muted-foreground">
+            You can start chatting with your agent now
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 export const ConnectionChangeBlock = (props: {
   data: ConnectionChangeNotificationEvent["data"];
   isConnected: boolean;
   onRetry?: () => void;
   timestamp?: number;
+  isOnlyBlock: boolean;
 }) => {
   const { status } = props.data;
 
-  if (props.isConnected) {
-    return null;
+  if (props.isConnected && props.isOnlyBlock) {
+    return <ReadyToChatBlock />;
   }
 
   const getStatusConfig = () => {
@@ -297,9 +361,14 @@ export const UserMessagesBlock = (props: { data: UserNotificationEvent[] }) => {
 export const AgentMessagesBlock = (props: {
   data: AgentNotificationEvent[];
 }) => {
+  // Merge consecutive text chunks to prevent fragmented display
+  const mergedContent = mergeConsecutiveTextBlocks(
+    props.data.map((item) => item.content),
+  );
+
   return (
     <div className="flex flex-col gap-2">
-      <ContentBlocks data={props.data.map((item) => item.content)} />
+      <ContentBlocks data={mergedContent} />
     </div>
   );
 };
@@ -562,42 +631,16 @@ export const DiffBlocks = (props: {
         return (
           <div
             key={item.path}
-            className="border rounded-md overflow-hidden bg-[var(--gray-2)] max-h-64 overflow-y-auto scrollbar-thin"
+            className="border rounded-md overflow-hidden bg-[var(--gray-2)] overflow-y-auto scrollbar-thin"
           >
             {/* File path header */}
             <div className="px-2 py-1 bg-[var(--gray-2)] border-b text-xs font-medium text-[var(--gray-11)]">
               {item.path}
             </div>
-
-            <div className="font-mono text-xs">
-              {/* Removed lines */}
-              {item.oldText && (
-                <div className="px-3 py-1 border-b bg-[var(--red-2)] border-b-[var(--red-6)]">
-                  <div className="flex">
-                    <span className="text-[var(--red-11)] select-none mr-2">
-                      -
-                    </span>
-                    <pre className="text-[var(--red-11)] px-1 rounded whitespace-pre-wrap break-words flex-1 line-through opacity-80">
-                      {item.oldText}
-                    </pre>
-                  </div>
-                </div>
-              )}
-
-              {/* Added lines */}
-              {item.newText && (
-                <div className="px-3 py-1 bg-[var(--grass-2)] border-b-[var(--grass-6)]">
-                  <div className="flex">
-                    <span className="text-[var(--grass-11)] select-none mr-2">
-                      +
-                    </span>
-                    <pre className="text-[var(--grass-11)] px-1 rounded whitespace-pre-wrap break-words flex-1 italic opacity-90">
-                      {item.newText}
-                    </pre>
-                  </div>
-                </div>
-              )}
-            </div>
+            <ReadonlyDiff
+              original={item.oldText || ""}
+              modified={item.newText || ""}
+            />
           </div>
         );
       })}

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

@@ -3,6 +3,8 @@
 import { atom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
 import { capitalize } from "lodash-es";
+import { isPlatformWindows } from "@/core/hotkeys/shortcuts";
+import { jotaiJsonStorage } from "@/utils/storage/jotai";
 import type { TypedString } from "@/utils/typed";
 import { generateUUID } from "@/utils/uuid";
 import type { ExternalAgentSessionId, SessionSupportType } from "./types";
@@ -40,6 +42,7 @@ export const agentSessionStateAtom = atomWithStorage<AgentSessionState>(
     sessions: [],
     activeTabId: null,
   },
+  jotaiJsonStorage,
 );
 
 export const selectedTabAtom = atom(
@@ -259,5 +262,6 @@ export function getAgentSessionSupport(
 export function getAgentConnectionCommand(agentId: ExternalAgentId): string {
   const port = AGENT_CONFIG[agentId].port;
   const command = AGENT_CONFIG[agentId].command;
-  return `npx stdio-to-ws "${command}" --port ${port}`;
+  const wrappedCommand = isPlatformWindows() ? `cmd /c ${command}` : command;
+  return `npx stdio-to-ws "${wrappedCommand}" --port ${port}`;
 }

package/src/components/chat/acp/thread.tsx

@@ -5,6 +5,7 @@ import { groupNotifications } from "use-acp";
 import {
   ConnectionChangeBlock,
   ErrorBlock,
+  ReadyToChatBlock,
   SessionNotificationsBlock,
 } from "./blocks";
 
@@ -30,7 +31,15 @@ export const AgentThread = ({
   let combinedNotifications = groupNotifications(notifications);
 
   // Filter out all connection changes unless it is the last one
+  // Filter out available_commands_update
   combinedNotifications = combinedNotifications.filter((group, index) => {
+    if (
+      isSessionNotificationGroup(group) &&
+      group[0].data.update.sessionUpdate === "available_commands_update"
+    ) {
+      return false;
+    }
+
     const isLast = index === combinedNotifications.length - 1;
     if (isLast) {
       return true;
@@ -66,6 +75,7 @@ export const AgentThread = ({
           key={lastConnectionChange.id}
           data={lastConnectionChange.data}
           isConnected={isConnected}
+          isOnlyBlock={combinedNotifications.length === 1}
           onRetry={onRetryConnection}
           timestamp={lastConnectionChange.timestamp}
         />
@@ -87,12 +97,13 @@ export const AgentThread = ({
   };
 
   return (
-    <div className="flex flex-col gap-4 px-2 pb-10">
+    <div className="flex flex-col gap-4 px-2 pb-10 flex-1">
       {combinedNotifications.map((notification) => (
         <React.Fragment key={notification[0].id}>
           {renderNotification(notification)}
         </React.Fragment>
       ))}
+      {combinedNotifications.length === 0 && <ReadyToChatBlock />}
     </div>
   );
 };