@marimo-team/frontend 0.19.8-dev5 → 0.19.8-dev50

package/src/components/chat/__tests__/useFileState.test.tsx

@@ -0,0 +1,93 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { toast } from "@/components/ui/use-toast";
+import { useFileState } from "../chat-utils";
+
+vi.mock("@/components/ui/use-toast", () => ({
+  toast: vi.fn(),
+}));
+
+describe("useFileState", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("initializes with no files", () => {
+    const { result } = renderHook(() => useFileState());
+    expect(result.current.files).toEqual([]);
+  });
+
+  it("adds files when under size limit", () => {
+    const { result } = renderHook(() => useFileState());
+    const fileA = { name: "a.txt", size: 10 } as File;
+    const fileB = { name: "b.txt", size: 20 } as File;
+
+    act(() => result.current.addFiles([fileA, fileB]));
+
+    expect(result.current.files).toEqual([fileA, fileB]);
+    expect(toast).not.toHaveBeenCalled();
+  });
+
+  it("appends new files to existing files", () => {
+    const { result } = renderHook(() => useFileState());
+    const fileA = { name: "a.txt", size: 10 } as File;
+    const fileB = { name: "b.txt", size: 20 } as File;
+
+    act(() => result.current.addFiles([fileA]));
+    act(() => result.current.addFiles([fileB]));
+
+    expect(result.current.files).toEqual([fileA, fileB]);
+  });
+
+  it("ignores empty file list", () => {
+    const { result } = renderHook(() => useFileState());
+    const fileA = { name: "a.txt", size: 10 } as File;
+
+    act(() => result.current.addFiles([fileA]));
+    act(() => result.current.addFiles([]));
+
+    expect(result.current.files).toEqual([fileA]);
+  });
+
+  it("shows toast and skips adding when size exceeds limit", () => {
+    const { result } = renderHook(() => useFileState());
+    const bigFile = {
+      name: "big.txt",
+      size: 1024 * 1024 * 50 + 1, // > 50MB
+    } as File;
+
+    act(() => result.current.addFiles([bigFile]));
+
+    expect(result.current.files).toEqual([]);
+    expect(toast).toHaveBeenCalledWith({
+      title: "File size exceeded",
+      description: "Attachments must be under 50 MB",
+      variant: "danger",
+    });
+  });
+
+  it("removes a file", () => {
+    const { result } = renderHook(() => useFileState());
+    const fileA = { name: "a.txt", size: 10 } as File;
+    const fileB = { name: "b.txt", size: 20 } as File;
+
+    act(() => result.current.addFiles([fileA, fileB]));
+    act(() => result.current.removeFile(fileA));
+
+    expect(result.current.files).toEqual([fileB]);
+  });
+
+  it("clears all files", () => {
+    const { result } = renderHook(() => useFileState());
+    const fileA = { name: "a.txt", size: 10 } as File;
+    const fileB = { name: "b.txt", size: 20 } as File;
+
+    act(() => result.current.addFiles([fileA, fileB]));
+    expect(result.current.files).toEqual([fileA, fileB]);
+
+    act(() => result.current.clearFiles());
+    expect(result.current.files).toEqual([]);
+  });
+});

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

@@ -9,6 +9,7 @@ import {
   type ExternalAgentId,
   getAgentConnectionCommand,
   getAgentDisplayName,
+  getAgentWebSocketUrl,
   getSessionsByAgent,
   removeSession,
   type TabId,
@@ -697,4 +698,72 @@ describe("state utility functions", () => {
       `);
     });
   });
+
+  describe("getAgentWebSocketUrl", () => {
+    const originalLocation = window.location;
+
+    afterEach(() => {
+      // Restore original window.location
+      Object.defineProperty(window, "location", {
+        value: originalLocation,
+        writable: true,
+      });
+    });
+
+    it("should return ws:// URL with localhost for http protocol", () => {
+      Object.defineProperty(window, "location", {
+        value: {
+          hostname: "localhost",
+          protocol: "http:",
+        },
+        writable: true,
+      });
+
+      expect(getAgentWebSocketUrl("claude")).toMatchInlineSnapshot(
+        `"ws://localhost:3017/message"`,
+      );
+    });
+
+    it("should return wss:// URL for https protocol", () => {
+      Object.defineProperty(window, "location", {
+        value: {
+          hostname: "example.com",
+          protocol: "https:",
+        },
+        writable: true,
+      });
+
+      expect(getAgentWebSocketUrl("claude")).toMatchInlineSnapshot(
+        `"wss://example.com:3017/message"`,
+      );
+    });
+
+    it("should work with IP addresses", () => {
+      Object.defineProperty(window, "location", {
+        value: {
+          hostname: "192.168.1.100",
+          protocol: "http:",
+        },
+        writable: true,
+      });
+
+      expect(getAgentWebSocketUrl("claude")).toMatchInlineSnapshot(
+        `"ws://192.168.1.100:3017/message"`,
+      );
+    });
+
+    it("should work with remote hostnames", () => {
+      Object.defineProperty(window, "location", {
+        value: {
+          hostname: "marimo.example.com",
+          protocol: "https:",
+        },
+        writable: true,
+      });
+
+      expect(getAgentWebSocketUrl("gemini")).toMatchInlineSnapshot(
+        `"wss://marimo.example.com:3019/message"`,
+      );
+    });
+  });
 });

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

@@ -3,12 +3,8 @@
 import { useAtom, useAtomValue } from "jotai";
 import { capitalize } from "lodash-es";
 import {
-  AtSignIcon,
   BotMessageSquareIcon,
-  PaperclipIcon,
   RefreshCwIcon,
-  SendIcon,
-  SquareIcon,
   StopCircleIcon,
 } from "lucide-react";
 import React, { memo, useEffect, useMemo, useRef, useState } from "react";
@@ -25,8 +21,7 @@ import {
 import { PanelEmptyState } from "@/components/editor/chrome/panels/empty-state";
 import { Spinner } from "@/components/icons/spinner";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";
+import { TooltipProvider } from "@/components/ui/tooltip";
 import { cn } from "@/utils/cn";
 import { Logger } from "@/utils/Logger";
 import { AgentDocs } from "./agent-docs";
@@ -70,7 +65,13 @@ import { store } from "@/core/state/jotai";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
 import { Functions } from "@/utils/functions";
 import { Paths } from "@/utils/paths";
-import { FileAttachmentPill } from "../chat-components";
+import {
+  AddContextButton,
+  AttachFileButton,
+  FileAttachmentPill,
+  SendButton,
+} from "../chat-components";
+import { useFileState } from "../chat-utils";
 import { ReadyToChatBlock } from "./blocks";
 import {
   convertFilesToResourceLinks,
@@ -89,9 +90,6 @@ import type {
 
 const logger = Logger.get("agents");
 
-// File attachment constants
-const SUPPORTED_ATTACHMENT_TYPES = ["image/*", "text/*"];
-
 interface AgentTitleProps {
   currentAgentId?: ExternalAgentId;
 }
@@ -392,55 +390,21 @@ const PromptArea = memo<PromptAreaProps>(
               )}
             </div>
             <div className="flex flex-row">
-              <Tooltip content="Add context">
-                <Button
-                  variant="text"
-                  size="icon"
-                  onClick={handleAddContext}
-                  disabled={isLoading}
-                >
-                  <AtSignIcon className="h-3.5 w-3.5" />
-                </Button>
-              </Tooltip>
-              <Tooltip content="Attach a file">
-                <Button
-                  variant="text"
-                  size="icon"
-                  className="cursor-pointer"
-                  onClick={() => fileInputRef.current?.click()}
-                  title="Attach a file"
-                  disabled={isLoading}
-                >
-                  <PaperclipIcon className="h-3.5 w-3.5" />
-                </Button>
-              </Tooltip>
-              <Input
-                ref={fileInputRef}
-                type="file"
-                multiple={true}
-                hidden={true}
-                onChange={(event) => {
-                  if (event.target.files) {
-                    onAddFiles([...event.target.files]);
-                  }
-                }}
-                accept={SUPPORTED_ATTACHMENT_TYPES.join(",")}
+              <AddContextButton
+                handleAddContext={handleAddContext}
+                isLoading={isLoading}
+              />
+              <AttachFileButton
+                fileInputRef={fileInputRef}
+                isLoading={isLoading}
+                onAddFiles={onAddFiles}
+              />
+              <SendButton
+                isLoading={isLoading}
+                onStop={onStop}
+                onSendClick={handleSendClick}
+                isEmpty={!promptValue.trim()}
               />
-              <Tooltip content={isLoading ? "Stop" : "Submit"}>
-                <Button
-                  variant="text"
-                  size="sm"
-                  className="h-6 w-6 p-0 hover:bg-muted/30 cursor-pointer"
-                  onClick={isLoading ? onStop : handleSendClick}
-                  disabled={isLoading ? false : !promptValue.trim()}
-                >
-                  {isLoading ? (
-                    <SquareIcon className="h-3 w-3 fill-current" />
-                  ) : (
-                    <SendIcon className="h-3 w-3" />
-                  )}
-                </Button>
-              </Tooltip>
             </div>
           </div>
         </TooltipProvider>
@@ -664,7 +628,7 @@ const AgentPanel: React.FC = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | string | null>(null);
   const [promptValue, setPromptValue] = useState("");
-  const [files, setFiles] = useState<File[]>();
+  const { files, addFiles, clearFiles, removeFile } = useFileState();
   const [sessionModels, setSessionModels] = useState<SessionModelState | null>(
     null,
   );
@@ -891,7 +855,7 @@ const AgentPanel: React.FC = () => {
       });
       setIsLoading(true);
       setPromptValue("");
-      setFiles(undefined);
+      clearFiles();
 
       // Update session title with first message if it's still the default
       if (selectedTab?.title.startsWith("New ")) {
@@ -967,21 +931,6 @@ const AgentPanel: React.FC = () => {
     setIsLoading(false);
   });
 
-  // Handler for adding files
-  const handleAddFiles = useEvent((newFiles: File[]) => {
-    if (newFiles.length === 0) {
-      return;
-    }
-    setFiles((prev) => [...(prev ?? []), ...newFiles]);
-  });
-
-  // Handler for removing files
-  const handleRemoveFile = useEvent((fileToRemove: File) => {
-    if (files) {
-      setFiles(files.filter((f) => f !== fileToRemove));
-    }
-  });
-
   // Handler for manual connect
   const handleManualConnect = useEvent(() => {
     logger.debug("Manual connect requested", {
@@ -1148,7 +1097,7 @@ const AgentPanel: React.FC = () => {
               <FileAttachmentPill
                 file={file}
                 key={file.name}
-                onRemove={() => handleRemoveFile(file)}
+                onRemove={() => removeFile(file)}
               />
             ))}
           </div>
@@ -1160,7 +1109,7 @@ const AgentPanel: React.FC = () => {
           promptValue={promptValue}
           onPromptValueChange={setPromptValue}
           onPromptSubmit={handlePromptSubmit}
-          onAddFiles={handleAddFiles}
+          onAddFiles={addFiles}
           onStop={handleStop}
           fileInputRef={fileInputRef}
           commands={availableCommands}

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

@@ -233,13 +233,17 @@ export function getAgentDisplayName(agentId: ExternalAgentId): string {
 }
 
 export function getAgentWebSocketUrl(agentId: ExternalAgentId): string {
-  return AGENT_CONFIG[agentId].webSocketUrl;
+  const port = AGENT_CONFIG[agentId].port;
+  // Use the current page's hostname so the agent is reachable when
+  // marimo is accessed remotely (e.g. via direct IP or reverse proxy).
+  const hostname = window.location.hostname;
+  const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+  return `${protocol}//${hostname}:${port}/message` as const;
 }
 
 interface AgentConfig {
   port: number;
   command: string;
-  webSocketUrl: string;
   sessionSupport: SessionSupportType;
 }
 
@@ -247,25 +251,21 @@ const AGENT_CONFIG: Record<ExternalAgentId, AgentConfig> = {
   claude: {
     port: 3017,
     command: "npx @zed-industries/claude-code-acp",
-    webSocketUrl: "ws://localhost:3017/message",
     sessionSupport: "single",
   },
   gemini: {
     port: 3019,
     command: "npx @google/gemini-cli --experimental-acp",
-    webSocketUrl: "ws://localhost:3019/message",
     sessionSupport: "single",
   },
   codex: {
     port: 3021,
     command: "npx @zed-industries/codex-acp",
-    webSocketUrl: "ws://localhost:3021/message",
     sessionSupport: "single",
   },
   opencode: {
     port: 3023,
     command: "npx opencode-ai acp",
-    webSocketUrl: "ws://localhost:3023/message",
     sessionSupport: "single",
   },
 };

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

@@ -1,9 +1,23 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type { FileUIPart } from "ai";
-import { FileIcon, FileTextIcon, ImageIcon, XIcon } from "lucide-react";
+import {
+  AtSignIcon,
+  FileIcon,
+  FileTextIcon,
+  ImageIcon,
+  PaperclipIcon,
+  SendHorizontalIcon,
+  StopCircleIcon,
+  XIcon,
+} from "lucide-react";
 import { useState } from "react";
 import { cn } from "@/utils/cn";
+import { Spinner } from "../icons/spinner";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Tooltip } from "../ui/tooltip";
+import { SUPPORTED_ATTACHMENT_TYPES } from "./chat-utils";
 
 export const AttachmentRenderer = ({
   attachment,
@@ -58,6 +72,105 @@ export const FileAttachmentPill = ({
   );
 };
 
+export const SendButton = ({
+  isLoading,
+  onStop,
+  onSendClick,
+  isEmpty,
+  showStopLabel = false, // Show a stop label and spinner instead of just the stop icon when loading
+}: {
+  isLoading: boolean;
+  onStop: () => void;
+  onSendClick: () => void;
+  isEmpty: boolean;
+  showStopLabel?: boolean;
+}) => {
+  const loadingContent = showStopLabel ? (
+    <div className="flex flex-row items-center gap-1 px-1.5">
+      <span className="text-xs text-error">Stop</span>
+      <Spinner size="small" />
+    </div>
+  ) : (
+    <StopCircleIcon className="size-4 text-error" />
+  );
+
+  return (
+    <Tooltip content={isLoading ? "Stop" : "Submit"}>
+      <Button
+        variant="text"
+        size="sm"
+        className="h-6 min-w-6 p-0 hover:bg-muted/30 cursor-pointer"
+        onClick={isLoading ? onStop : onSendClick}
+        disabled={isLoading ? false : isEmpty}
+      >
+        {isLoading ? (
+          loadingContent
+        ) : (
+          <SendHorizontalIcon className="h-3.5 w-3.5" />
+        )}
+      </Button>
+    </Tooltip>
+  );
+};
+
+export const AddContextButton = ({
+  handleAddContext,
+  isLoading,
+}: {
+  handleAddContext: () => void;
+  isLoading: boolean;
+}) => {
+  return (
+    <Tooltip content="Add context">
+      <Button
+        variant="text"
+        size="icon"
+        onClick={handleAddContext}
+        disabled={isLoading}
+      >
+        <AtSignIcon className="h-3.5 w-3.5" />
+      </Button>
+    </Tooltip>
+  );
+};
+
+export const AttachFileButton = ({
+  fileInputRef,
+  isLoading,
+  onAddFiles,
+}: {
+  fileInputRef: React.RefObject<HTMLInputElement | null>;
+  isLoading: boolean;
+  onAddFiles: (files: File[]) => void;
+}) => {
+  return (
+    <>
+      <Tooltip content="Attach a file">
+        <Button
+          variant="text"
+          size="icon"
+          onClick={() => fileInputRef.current?.click()}
+          disabled={isLoading}
+        >
+          <PaperclipIcon className="h-3.5 w-3.5" />
+        </Button>
+      </Tooltip>
+      <Input
+        ref={fileInputRef}
+        type="file"
+        multiple={true}
+        hidden={true}
+        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+          if (event.target.files) {
+            onAddFiles([...event.target.files]);
+          }
+        }}
+        accept={SUPPORTED_ATTACHMENT_TYPES.join(",")}
+      />
+    </>
+  );
+};
+
 function renderFileIcon(file: File): React.ReactNode {
   const classNames = "h-3 w-3 mt-0.5";