@marimo-team/islands 0.19.8-dev41 → 0.19.8-dev49

package/dist/{useDeepCompareMemoize-CMGprt3H.js → useDeepCompareMemoize-BhZZsis0.js}

@@ -33,15 +33,19 @@ function isWasm() {
 var Deferred = class {
   constructor() {
     __publicField(this, "status", "pending");
+    __publicField(this, "value");
     this.promise = new Promise((e, x) => {
       this.reject = (e2) => {
         this.status = "rejected", x(e2);
       }, this.resolve = (x2) => {
-        this.status = "resolved", e(x2);
+        this.status = "resolved", isPromiseLike(x2) || (this.value = x2), e(x2);
       };
     });
   }
 };
+function isPromiseLike(e) {
+  return typeof e == "object" && !!e && "then" in e && typeof e.then == "function";
+}
 const WebSocketState = {
   NOT_STARTED: "NOT_STARTED",
   CONNECTING: "CONNECTING",
@@ -147,7 +151,7 @@ var require__u64 = /* @__PURE__ */ __commonJSMin(((e) => {
 })), require_crypto = /* @__PURE__ */ __commonJSMin(((e) => {
   Object.defineProperty(e, "__esModule", { value: true }), e.crypto = void 0, e.crypto = typeof globalThis == "object" && "crypto" in globalThis ? globalThis.crypto : void 0;
 })), require_utils = /* @__PURE__ */ __commonJSMin(((e) => {
-  Object.defineProperty(e, "__esModule", { value: true }), e.wrapXOFConstructorWithOpts = e.wrapConstructorWithOpts = e.wrapConstructor = e.Hash = e.nextTick = e.swap32IfBE = e.byteSwapIfBE = e.swap8IfBE = e.isLE = void 0, e.isBytes = S, e.anumber = C, e.abytes = w, e.ahash = T, e.aexists = E, e.aoutput = D, e.u8 = O, e.u32 = k, e.clean = A, e.createView = j, e.rotr = M, e.rotl = N, e.byteSwap = P, e.byteSwap32 = F, e.bytesToHex = R, e.hexToBytes = V, e.asyncLoop = U, e.utf8ToBytes = W, e.bytesToUtf8 = G, e.toBytes = K, e.kdfInputToBytes = q, e.concatBytes = J, e.checkOpts = Y, e.createHasher = X, e.createOptHasher = Z, e.createXOFer = Q, e.randomBytes = $;
+  Object.defineProperty(e, "__esModule", { value: true }), e.wrapXOFConstructorWithOpts = e.wrapConstructorWithOpts = e.wrapConstructor = e.Hash = e.nextTick = e.swap32IfBE = e.byteSwapIfBE = e.swap8IfBE = e.isLE = void 0, e.isBytes = S, e.anumber = C, e.abytes = w, e.ahash = T, e.aexists = E, e.aoutput = D, e.u8 = O, e.u32 = k, e.clean = A, e.createView = j, e.rotr = M, e.rotl = N, e.byteSwap = P, e.byteSwap32 = F, e.bytesToHex = R, e.hexToBytes = V, e.asyncLoop = H, e.utf8ToBytes = W, e.bytesToUtf8 = G, e.toBytes = K, e.kdfInputToBytes = q, e.concatBytes = J, e.checkOpts = Y, e.createHasher = X, e.createOptHasher = Z, e.createXOFer = Q, e.randomBytes = $;
   var x = require_crypto();
   function S(e2) {
     return e2 instanceof Uint8Array || ArrayBuffer.isView(e2) && e2.constructor.name === "Uint8Array";
@@ -238,7 +242,7 @@ var require__u64 = /* @__PURE__ */ __commonJSMin(((e) => {
   }
   e.nextTick = async () => {
   };
-  async function U(x2, S2, C2) {
+  async function H(x2, S2, C2) {
     let w2 = Date.now();
     for (let T2 = 0; T2 < x2; T2++) {
       C2(T2);

package/dist/{vega-component-DU3aSp4m.js → vega-component-DCxUyPnb.js}

@@ -2,7 +2,7 @@ import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
 import "./Combination-BTMrlhzT.js";
-import { S as CircleQuestionMark, a as AlertTitle, m as asRemoteURL, n as arrow, o as isValid, r as Alert, t as useDeepCompareMemoize } from "./useDeepCompareMemoize-CMGprt3H.js";
+import { S as CircleQuestionMark, a as AlertTitle, m as asRemoteURL, n as arrow, o as isValid, r as Alert, t as useDeepCompareMemoize } from "./useDeepCompareMemoize-BhZZsis0.js";
 import { l as Events } from "./button-Cy0ElmIm.js";
 import { o as Objects, s as Logger } from "./hotkeys-B5WnGZXF.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.19.8-dev41",
+  "version": "0.19.8-dev49",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/app-config/optional-features.tsx

@@ -211,7 +211,7 @@ const InstallButton: React.FC<{
           return pkg.name;
         })
         .join(" ");
-      const response = await addPackage({ package: packageSpec, dev: true });
+      const response = await addPackage({ package: packageSpec, group: "dev" });
       if (response.success) {
         onSuccess();
         toast({

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/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/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";