@marimo-team/frontend 0.15.4 → 0.16.0-dev96986

package/src/components/chat/acp/__tests__/context-utils.test.ts

@@ -0,0 +1,222 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { beforeEach, describe, expect, it, type Mocked, vi } from "vitest";
+import {
+  convertFilesToResourceLinks,
+  parseContextFromPrompt,
+} from "../context-utils";
+
+// Mock dependencies
+vi.mock("@/utils/fileToBase64", () => ({
+  blobToString: vi.fn(),
+}));
+
+vi.mock("@/core/ai/context/context", () => ({
+  getAIContextRegistry: vi.fn(),
+}));
+
+vi.mock("@/core/state/jotai", () => ({
+  store: {},
+}));
+
+vi.mock("@/utils/Logger", () => ({
+  Logger: {
+    error: vi.fn(),
+    debug: vi.fn(),
+  },
+}));
+
+import { getAIContextRegistry } from "@/core/ai/context/context";
+import type {
+  AIContextItem,
+  AIContextRegistry,
+  ContextLocatorId,
+} from "@/core/ai/context/registry";
+import { blobToString } from "@/utils/fileToBase64";
+
+const CONTEXT_ID = "context1" as ContextLocatorId;
+
+describe("convertFilesToResourceLinks", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should convert files to resource links", async () => {
+    const mockFile = new File(["content"], "test.txt", { type: "text/plain" });
+    vi.mocked(blobToString).mockResolvedValue(
+      "data:text/plain;base64,Y29udGVudA==",
+    );
+
+    const result = await convertFilesToResourceLinks([mockFile]);
+
+    expect(result).toEqual([
+      {
+        type: "resource_link",
+        uri: "data:text/plain;base64,Y29udGVudA==",
+        mimeType: "text/plain",
+        name: "test.txt",
+      },
+    ]);
+  });
+
+  it("should handle empty file array", async () => {
+    const result = await convertFilesToResourceLinks([]);
+    expect(result).toEqual([]);
+  });
+
+  it("should handle file conversion errors gracefully", async () => {
+    const mockFile = new File(["content"], "test.txt", { type: "text/plain" });
+    vi.mocked(blobToString).mockRejectedValue(new Error("Conversion failed"));
+
+    const result = await convertFilesToResourceLinks([mockFile]);
+
+    expect(result).toEqual([]);
+  });
+
+  it("should process multiple files", async () => {
+    const file1 = new File(["content1"], "test1.txt", { type: "text/plain" });
+    const file2 = new File(["content2"], "test2.txt", { type: "text/plain" });
+
+    vi.mocked(blobToString)
+      .mockResolvedValueOnce("data:text/plain;base64,Y29udGVudDE=")
+      .mockResolvedValueOnce("data:text/plain;base64,Y29udGVudDI=");
+
+    const result = await convertFilesToResourceLinks([file1, file2]);
+
+    expect(result).toHaveLength(2);
+    expect((result[0] as { name: string }).name).toBe("test1.txt");
+    expect((result[1] as { name: string }).name).toBe("test2.txt");
+  });
+});
+
+describe("parseContextFromPrompt", () => {
+  const mockRegistry = {
+    parseAllContextIds: vi.fn(),
+    formatContextForAI: vi.fn(),
+    getAttachmentsForContext: vi.fn(),
+  } as unknown as Mocked<AIContextRegistry<AIContextItem>>;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(getAIContextRegistry).mockReturnValue(mockRegistry);
+  });
+
+  it("should return empty blocks when no @ symbol in prompt", async () => {
+    const result = await parseContextFromPrompt("simple prompt");
+
+    expect(result).toEqual({
+      contextBlocks: [],
+      attachmentBlocks: [],
+    });
+  });
+
+  it("should return empty blocks when no context IDs found", async () => {
+    mockRegistry.parseAllContextIds.mockReturnValue([]);
+
+    const result = await parseContextFromPrompt("prompt with @ but no context");
+
+    expect(result).toEqual({
+      contextBlocks: [],
+      attachmentBlocks: [],
+    });
+  });
+
+  it("should create context blocks when context IDs are found", async () => {
+    mockRegistry.parseAllContextIds.mockReturnValue([CONTEXT_ID]);
+    mockRegistry.formatContextForAI.mockReturnValue("formatted context");
+    mockRegistry.getAttachmentsForContext.mockResolvedValue([]);
+
+    const result = await parseContextFromPrompt("prompt with @context1");
+
+    expect(result.contextBlocks).toHaveLength(1);
+    expect(result.contextBlocks[0]).toEqual({
+      type: "resource",
+      resource: {
+        uri: "context.md",
+        mimeType: "text/markdown",
+        text: "formatted context",
+      },
+    });
+    expect(result.attachmentBlocks).toHaveLength(0);
+  });
+
+  it("should create attachment blocks when attachments are found", async () => {
+    mockRegistry.parseAllContextIds.mockReturnValue([CONTEXT_ID]);
+    mockRegistry.formatContextForAI.mockReturnValue("formatted context");
+    mockRegistry.getAttachmentsForContext.mockResolvedValue([
+      {
+        type: "file",
+        url: "http://example.com/file.pdf",
+        mediaType: "application/pdf",
+        filename: "file.pdf",
+      },
+    ]);
+
+    const result = await parseContextFromPrompt("prompt with @context1");
+
+    expect(result.contextBlocks).toHaveLength(1);
+    expect(result.attachmentBlocks).toHaveLength(1);
+    expect(result.attachmentBlocks[0]).toEqual({
+      type: "resource_link",
+      uri: "http://example.com/file.pdf",
+      mimeType: "application/pdf",
+      name: "file.pdf",
+    });
+  });
+
+  it("should handle empty context string gracefully", async () => {
+    mockRegistry.parseAllContextIds.mockReturnValue([CONTEXT_ID]);
+    mockRegistry.formatContextForAI.mockReturnValue("   ");
+    mockRegistry.getAttachmentsForContext.mockResolvedValue([]);
+
+    const result = await parseContextFromPrompt("prompt with @context1");
+
+    expect(result.contextBlocks).toHaveLength(0);
+    expect(result.attachmentBlocks).toHaveLength(0);
+  });
+
+  it("should handle registry errors gracefully", async () => {
+    vi.mocked(getAIContextRegistry).mockImplementation(() => {
+      throw new Error("Registry error");
+    });
+
+    const result = await parseContextFromPrompt("prompt with @context1");
+
+    expect(result).toEqual({
+      contextBlocks: [],
+      attachmentBlocks: [],
+    });
+  });
+
+  it("should handle attachment errors gracefully", async () => {
+    mockRegistry.parseAllContextIds.mockReturnValue([CONTEXT_ID]);
+    mockRegistry.formatContextForAI.mockReturnValue("formatted context");
+    mockRegistry.getAttachmentsForContext.mockRejectedValue(
+      new Error("Attachment error"),
+    );
+
+    const result = await parseContextFromPrompt("prompt with @context1");
+
+    expect(result.contextBlocks).toHaveLength(1);
+    expect(result.attachmentBlocks).toHaveLength(0);
+  });
+
+  it("should use url as name when filename is not provided", async () => {
+    mockRegistry.parseAllContextIds.mockReturnValue([CONTEXT_ID]);
+    mockRegistry.formatContextForAI.mockReturnValue("formatted context");
+    mockRegistry.getAttachmentsForContext.mockResolvedValue([
+      {
+        type: "file",
+        url: "http://example.com/file.pdf",
+        mediaType: "application/pdf",
+        filename: undefined,
+      },
+    ]);
+
+    const result = await parseContextFromPrompt("prompt with @context1");
+
+    expect((result.attachmentBlocks[0] as { name: string }).name).toBe(
+      "http://example.com/file.pdf",
+    );
+  });
+});

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

@@ -1,4 +1,4 @@
-/* Copyright 2025 Marimo. All rights reserved. */
+/* Copyright 2024 Marimo. All rights reserved. */
 
 import { describe, expect, it } from "vitest";
 import { getAgentPrompt } from "../prompt";

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

@@ -1,4 +1,4 @@
-/* Copyright 2025 Marimo. All rights reserved. */
+/* Copyright 2024 Marimo. All rights reserved. */
 
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import {
@@ -100,8 +100,8 @@ describe("state utility functions", () => {
         agentId: "gemini",
         tabId: "tab_existing" as TabId,
         title: "Existing gemini session",
-        createdAt: 1735689600000,
-        lastUsedAt: 1735689600000,
+        createdAt: 1_735_689_600_000,
+        lastUsedAt: 1_735_689_600_000,
         externalAgentSessionId: null,
       };
       const initialState: AgentSessionState = {
@@ -139,8 +139,8 @@ describe("state utility functions", () => {
         agentId: "claude",
         tabId: "tab_existing" as TabId,
         title: "Existing claude session",
-        createdAt: 1735689600000,
-        lastUsedAt: 1735689600000,
+        createdAt: 1_735_689_600_000,
+        lastUsedAt: 1_735_689_600_000,
         externalAgentSessionId: null,
       };
       const initialState: AgentSessionState = {
@@ -194,24 +194,24 @@ describe("state utility functions", () => {
           agentId: "claude",
           tabId: "tab_1" as TabId,
           title: "Claude session 1",
-          createdAt: 1735689600000,
-          lastUsedAt: 1735689600000,
+          createdAt: 1_735_689_600_000,
+          lastUsedAt: 1_735_689_600_000,
           externalAgentSessionId: null,
         },
         {
           agentId: "gemini",
           tabId: "tab_2" as TabId,
           title: "Gemini session",
-          createdAt: 1735689600000,
-          lastUsedAt: 1735689600000,
+          createdAt: 1_735_689_600_000,
+          lastUsedAt: 1_735_689_600_000,
           externalAgentSessionId: null,
         },
         {
           agentId: "claude",
           tabId: "tab_3" as TabId,
           title: "Claude session 2",
-          createdAt: 1735689600000,
-          lastUsedAt: 1735689600000,
+          createdAt: 1_735_689_600_000,
+          lastUsedAt: 1_735_689_600_000,
           externalAgentSessionId: null,
         },
       ];
@@ -264,8 +264,8 @@ describe("state utility functions", () => {
         agentId: "claude",
         tabId: "tab_single" as TabId,
         title: "Single session",
-        createdAt: 1735689600000,
-        lastUsedAt: 1735689600000,
+        createdAt: 1_735_689_600_000,
+        lastUsedAt: 1_735_689_600_000,
         externalAgentSessionId: null,
       };
       const singleSessionState: AgentSessionState = {
@@ -297,16 +297,16 @@ describe("state utility functions", () => {
           agentId: "claude",
           tabId: "tab_1" as TabId,
           title: "Original title",
-          createdAt: 1735689600000,
-          lastUsedAt: 1735689600000,
+          createdAt: 1_735_689_600_000,
+          lastUsedAt: 1_735_689_600_000,
           externalAgentSessionId: null,
         },
         {
           agentId: "gemini",
           tabId: "tab_2" as TabId,
           title: "Another title",
-          createdAt: 1735689600000,
-          lastUsedAt: 1735689600000,
+          createdAt: 1_735_689_600_000,
+          lastUsedAt: 1_735_689_600_000,
           externalAgentSessionId: null,
         },
       ];
@@ -361,16 +361,16 @@ describe("state utility functions", () => {
           agentId: "claude",
           tabId: "tab_1" as TabId,
           title: "Claude session",
-          createdAt: 1735689600000,
-          lastUsedAt: 1735689600000,
+          createdAt: 1_735_689_600_000,
+          lastUsedAt: 1_735_689_600_000,
           externalAgentSessionId: null,
         },
         {
           agentId: "gemini",
           tabId: "tab_2" as TabId,
           title: "Gemini session",
-          createdAt: 1735689600000,
-          lastUsedAt: 1735689600000,
+          createdAt: 1_735_689_600_000,
+          lastUsedAt: 1_735_689_600_000,
           externalAgentSessionId: null,
         },
       ];
@@ -384,7 +384,7 @@ describe("state utility functions", () => {
       const originalTimestamp = sessions[0].lastUsedAt;
 
       // Advance time by 1 hour
-      vi.advanceTimersByTime(3600000);
+      vi.advanceTimersByTime(3_600_000);
 
       const newState = updateSessionLastUsed(state, sessions[0].tabId);
 
@@ -405,7 +405,7 @@ describe("state utility functions", () => {
       const fakeId = "fake_session_id" as TabId;
       const originalTimestamp = sessions[0].lastUsedAt;
 
-      vi.advanceTimersByTime(3600000);
+      vi.advanceTimersByTime(3_600_000);
 
       const newState = updateSessionLastUsed(state, fakeId);
 
@@ -424,16 +424,16 @@ describe("state utility functions", () => {
           agentId: "claude",
           tabId: "tab_1" as TabId,
           title: "Claude session",
-          createdAt: 1735689600000,
-          lastUsedAt: 1735689600000,
+          createdAt: 1_735_689_600_000,
+          lastUsedAt: 1_735_689_600_000,
           externalAgentSessionId: null,
         },
         {
           agentId: "gemini",
           tabId: "tab_2" as TabId,
           title: "Gemini session",
-          createdAt: 1735689600000,
-          lastUsedAt: 1735689600000,
+          createdAt: 1_735_689_600_000,
+          lastUsedAt: 1_735_689_600_000,
           externalAgentSessionId: null,
         },
       ];
@@ -448,7 +448,7 @@ describe("state utility functions", () => {
       const agentSessionId = "agent_session_123" as ExternalAgentSessionId;
 
       // Advance time by 1 hour
-      vi.advanceTimersByTime(3600000);
+      vi.advanceTimersByTime(3_600_000);
 
       const newState = updateSessionExternalAgentSessionId(
         state,
@@ -498,32 +498,32 @@ describe("state utility functions", () => {
           agentId: "claude",
           tabId: "tab_1" as TabId,
           title: "First claude",
-          createdAt: 1735689600000, // 2025-01-01T00:00:00Z
-          lastUsedAt: 1735689600000,
+          createdAt: 1_735_689_600_000, // 2025-01-01T00:00:00Z
+          lastUsedAt: 1_735_689_600_000,
           externalAgentSessionId: null,
         },
         {
           agentId: "gemini",
           tabId: "tab_2" as TabId,
           title: "First gemini",
-          createdAt: 1735693200000, // 2025-01-01T01:00:00Z
-          lastUsedAt: 1735693200000,
+          createdAt: 1_735_693_200_000, // 2025-01-01T01:00:00Z
+          lastUsedAt: 1_735_693_200_000,
           externalAgentSessionId: null,
         },
         {
           agentId: "claude",
           tabId: "tab_3" as TabId,
           title: "Second claude",
-          createdAt: 1735696800000, // 2025-01-01T02:00:00Z
-          lastUsedAt: 1735696800000,
+          createdAt: 1_735_696_800_000, // 2025-01-01T02:00:00Z
+          lastUsedAt: 1_735_696_800_000,
           externalAgentSessionId: null,
         },
         {
           agentId: "claude",
           tabId: "tab_4" as TabId,
           title: "Third claude",
-          createdAt: 1735700400000, // 2025-01-01T03:00:00Z
-          lastUsedAt: 1735700400000,
+          createdAt: 1_735_700_400_000, // 2025-01-01T03:00:00Z
+          lastUsedAt: 1_735_700_400_000,
           externalAgentSessionId: null,
         },
       ];
@@ -604,17 +604,13 @@ describe("state utility functions", () => {
   describe("getAgentConnectionCommand", () => {
     it("should return correct command for claude", () => {
       expect(getAgentConnectionCommand("claude")).toMatchInlineSnapshot(`
-        "npx supergateway --stdio\\
-          "npx @zed-industries/claude-code-acp" \\
-           --outputTransport ws --port 3017 "
+        "npx stdio-to-ws "npx @zed-industries/claude-code-acp" --port 3017"
       `);
     });
 
     it("should return correct command for gemini", () => {
       expect(getAgentConnectionCommand("gemini")).toMatchInlineSnapshot(`
-        "npx supergateway --stdio\\
-          "npx @google/gemini-cli --experimental-acp" \\
-           --outputTransport ws --port 3019 "
+        "npx stdio-to-ws "npx @google/gemini-cli --experimental-acp" --port 3019"
       `);
     });
   });

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

@@ -1,9 +1,14 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-import { TerminalIcon } from "lucide-react";
+import { useAtomValue } from "jotai";
+import { TerminalIcon, TerminalSquareIcon } from "lucide-react";
 import { memo } from "react";
 import { AiProviderIcon } from "@/components/ai/ai-provider-icon";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
+import { useTerminalCommands } from "@/components/terminal/hooks";
+import { Button } from "@/components/ui/button";
+import { Tooltip } from "@/components/ui/tooltip";
+import { capabilitiesAtom } from "@/core/config/capabilities";
 import { cn } from "@/utils/cn";
 import {
   type ExternalAgentId,
@@ -22,6 +27,12 @@ const AgentDocItem = memo<AgentDocItemProps>(
   ({ agentId, showCopy = true, className }) => {
     const command = getAgentConnectionCommand(agentId);
     const displayName = getAgentDisplayName(agentId);
+    const capabilities = useAtomValue(capabilitiesAtom);
+    const { sendCommand } = useTerminalCommands();
+
+    const handleSendToTerminal = () => {
+      sendCommand(command);
+    };
 
     return (
       <div className={cn("space-y-2", className)}>
@@ -32,12 +43,28 @@ const AgentDocItem = memo<AgentDocItemProps>(
         <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-all flex-1 whitespace-pre-wrap">
+            <code className="text-xs font-mono break-words flex-1 whitespace-pre-wrap">
               {command}
             </code>
-            {showCopy && (
-              <CopyClipboardIcon value={command} className="h-3 w-3" />
-            )}
+            <div className="flex items-center gap-1 flex-shrink-0">
+              {showCopy && (
+                <Button size="xs" variant="outline" className="border">
+                  <CopyClipboardIcon value={command} className="h-3 w-3" />
+                </Button>
+              )}
+              {capabilities.terminal && (
+                <Tooltip content="Run in terminal" delayDuration={100}>
+                  <Button
+                    onClick={handleSendToTerminal}
+                    title="Send to terminal"
+                    size="xs"
+                    variant="outline"
+                  >
+                    <TerminalSquareIcon className="h-3 w-3" />
+                  </Button>
+                </Tooltip>
+              )}
+            </div>
           </div>
         </div>
       </div>
@@ -48,7 +75,7 @@ AgentDocItem.displayName = "AgentDocItem";
 
 interface AgentDocsProps {
   title?: string;
-  description?: string;
+  description?: React.ReactNode;
   agents?: ExternalAgentId[];
   showCopy?: boolean;
   className?: string;

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

@@ -1,23 +1,5 @@
-@source "../node_modules/streamdown/dist/index.js";
-
 .mo-agent-panel {
-  /* Make headers a bit smaller */
-  --text-2xl: 1rem;
-  --text-3xl: 1rem;
-
   pre {
     width: 100%;
   }
-
-  [data-code-block-container="true"] {
-    margin-top: 0 !important;
-  }
-
-  [data-code-block-header="true"] {
-    padding: 4px !important;
-  }
-
-  code {
-    font-size: inherit !important;
-  }
 }