@marimo-team/frontend 0.22.1-dev4 → 0.22.1-dev40

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

@@ -50,11 +50,11 @@ const AgentDocItem = memo<AgentDocItemProps>(
         </div>
         <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-words flex-1 whitespace-pre-wrap">
+            <TerminalIcon className="h-4 w-4 mt-0.5 text-muted-foreground shrink-0" />
+            <code className="text-xs font-mono wrap-break-word flex-1 whitespace-pre-wrap">
               {command}
             </code>
-            <div className="flex items-center gap-1 flex-shrink-0">
+            <div className="flex items-center gap-1 shrink-0">
               {showCopy && (
                 <Button size="xs" variant="outline" className="border">
                   <CopyClipboardIcon value={command} className="h-3 w-3" />

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

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { useAtom, useAtomValue } from "jotai";
+import { useAtom } from "jotai";
 import {
   BotMessageSquareIcon,
   RefreshCwIcon,
@@ -8,7 +8,7 @@ import {
 } from "lucide-react";
 import React, { memo, useEffect, useMemo, useRef, useState } from "react";
 import useEvent from "react-use-event-hook";
-import { useAcpClient } from "use-acp";
+import { JsonRpcError, useAcpClient } from "use-acp";
 import {
   ConnectionStatus,
   PermissionRequest,
@@ -207,7 +207,6 @@ interface EmptyStateProps {
 
 const EmptyState = memo<EmptyStateProps>(
   ({ currentAgentId, connectionState, onConnect, onDisconnect }) => {
-    const filename = useAtomValue(filenameAtom);
     return (
       <div className="flex flex-col h-full">
         <AgentPanelHeader
@@ -223,7 +222,7 @@ const EmptyState = memo<EmptyStateProps>(
             <PanelEmptyState
               title="No Agent Sessions"
               description="Create a new session to start a conversation"
-              action={<AgentSelector className="border-y-1 rounded" />}
+              action={<AgentSelector className="border-y rounded" />}
               icon={<BotMessageSquareIcon />}
             />
             {connectionState.status === "disconnected" && (
@@ -232,10 +231,13 @@ const EmptyState = memo<EmptyStateProps>(
                 title="Connect to an agent"
                 description={
                   <>
-                    Start agents by running these commands in your terminal:
+                    <span>
+                      Start agents by running these commands in your terminal.
+                    </span>
                     <br />
-                    Note: This must be in the directory{" "}
-                    {Paths.dirname(filename ?? "")}
+                    <span>
+                      Authenticate with the agent before starting a session.
+                    </span>
                   </>
                 }
               />
@@ -615,6 +617,15 @@ const ChatContent = memo<ChatContentProps>(
 ChatContent.displayName = "ChatContent";
 
 const NO_WS_SET = "_skip_auto_connect_";
+const AUTH_REQUIRED_CODE = -32_000;
+
+function getDataMessage(data: unknown): string | undefined {
+  if (data != null && typeof data === "object" && "message" in data) {
+    const msg = (data as Record<string, unknown>).message;
+    return typeof msg === "string" ? msg : undefined;
+  }
+  return undefined;
+}
 
 function getCwd(): string {
   const cwd = store.get(cwdAtom);
@@ -705,14 +716,31 @@ const AgentPanel: React.FC = () => {
   } = acpClient;
 
   useEffect(() => {
-    agent?.initialize({
-      protocolVersion: 1,
-      clientCapabilities: {
-        fs: {
-          readTextFile: true,
-          writeTextFile: true,
+    if (!agent) {
+      return;
+    }
+
+    const initAndAuth = async () => {
+      const response = await agent.initialize({
+        protocolVersion: 1,
+        clientCapabilities: {
+          fs: {
+            readTextFile: true,
+            writeTextFile: true,
+          },
         },
-      },
+      });
+
+      // 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 });
+      }
+    };
+
+    initAndAuth().catch((error) => {
+      logger.error("Failed to initialize/authenticate agent", { error });
     });
   }, [agent]);
 
@@ -735,7 +763,7 @@ const AgentPanel: React.FC = () => {
       // We don't want to disconnect so users can switch between different
       // panels without losing their session
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
   }, [wsUrl]);
 
   const handleNewSession = useEvent(async () => {
@@ -861,7 +889,7 @@ const AgentPanel: React.FC = () => {
     };
 
     createOrResumeSession();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
   }, [isConnected, agent, tabLastActiveSessionId, activeSessionId]);
 
   // Handler for prompt submission
@@ -1041,18 +1069,37 @@ const AgentPanel: React.FC = () => {
 
   const renderBody = () => {
     if (error) {
+      const isAuthError =
+        error instanceof JsonRpcError && error.code === AUTH_REQUIRED_CODE;
+      const dataMessage =
+        error instanceof JsonRpcError ? getDataMessage(error.data) : undefined;
+      const displayError = dataMessage ? new Error(dataMessage) : error;
+
       return (
         <ErrorBanner
           className="w-3/4 mx-auto mt-10"
-          error={error}
+          error={displayError}
           action={
-            <Button
-              variant="linkDestructive"
-              size="sm"
-              onClick={() => setError(null)}
-            >
-              Dismiss
-            </Button>
+            isAuthError ? (
+              <Button
+                variant="linkDestructive"
+                size="sm"
+                onClick={() => {
+                  setError(null);
+                  handleNewSession();
+                }}
+              >
+                Restart session
+              </Button>
+            ) : (
+              <Button
+                variant="linkDestructive"
+                size="sm"
+                onClick={() => setError(null)}
+              >
+                Dismiss
+              </Button>
+            )
           }
         />
       );

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

@@ -16,9 +16,7 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { useFilename } from "@/core/saving/filename";
 import { cn } from "@/utils/cn";
-import { Paths } from "@/utils/paths";
 import { AgentDocs } from "./agent-docs";
 import {
   type AgentSession,
@@ -55,17 +53,17 @@ const AVAILABLE_AGENTS = [
     displayName: "OpenCode",
     iconId: "opencode",
   },
+  { id: "cursor", displayName: "Cursor", iconId: "cursor" },
 ] as const;
 
 interface AgentMenuItemProps {
   agent: (typeof AVAILABLE_AGENTS)[number];
   onSelect: (agentId: ExternalAgentId) => void;
   existingSessions: AgentSession[];
-  filename: string | null;
 }
 
 const AgentMenuItem = memo<AgentMenuItemProps>(
-  ({ agent, onSelect, existingSessions, filename }) => {
+  ({ agent, onSelect, existingSessions }) => {
     const sessionSupport = getAgentSessionSupport(agent.id);
     const hasExistingSession = existingSessions.some(
       (s) => s.agentId === agent.id,
@@ -108,11 +106,6 @@ const AgentMenuItem = memo<AgentMenuItemProps>(
               <div className="text-xs font-medium text-muted-foreground mb-3">
                 To start a {agent.displayName} agent, run the following command
                 in your terminal.
-                <br />
-                Note: This must be in the directory{" "}
-                <code className="bg-muted font-mono">
-                  {Paths.dirname(filename ?? "")}
-                </code>
               </div>
               <AgentDocs agents={[agent.id]} showCopy={true} />
             </div>
@@ -126,7 +119,6 @@ AgentMenuItem.displayName = "AgentMenuItem";
 
 export const AgentSelector: React.FC<AgentSelectorProps> = memo(
   ({ onSessionCreated, className }) => {
-    const filename = useFilename();
     const [sessionState, setSessionState] = useAtom(agentSessionStateAtom);
     const setActiveTab = useSetAtom(selectedTabAtom);
     const [isOpen, setIsOpen] = useState(false);
@@ -165,7 +157,6 @@ export const AgentSelector: React.FC<AgentSelectorProps> = memo(
               agent={agent}
               onSelect={handleCreateSession}
               existingSessions={sessionState.sessions}
-              filename={filename}
             />
           ))}
         </DropdownMenuContent>

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

@@ -11,7 +11,12 @@ import type { ExternalAgentSessionId, SessionSupportType } from "./types";
 
 // Types
 export type TabId = TypedString<"TabId">;
-export type ExternalAgentId = "claude" | "gemini" | "codex" | "opencode";
+export type ExternalAgentId =
+  | "claude"
+  | "gemini"
+  | "codex"
+  | "opencode"
+  | "cursor";
 
 // No agents support loading sessions, so we limit to 1, otherwise
 // this is confusing to the user when switching between sessions
@@ -221,11 +226,11 @@ export function getSessionsByAgent(
 ): AgentSession[] {
   return sessions
     .filter((session) => session.agentId === agentId)
-    .sort((a, b) => b.lastUsedAt - a.lastUsedAt);
+    .toSorted((a, b) => b.lastUsedAt - a.lastUsedAt);
 }
 
 export function getAllAgentIds(): ExternalAgentId[] {
-  return ["claude", "gemini", "codex", "opencode"];
+  return ["claude", "gemini", "codex", "opencode", "cursor"];
 }
 
 export function getAgentDisplayName(agentId: ExternalAgentId): string {
@@ -245,6 +250,8 @@ interface AgentConfig {
   port: number;
   command: string;
   sessionSupport: SessionSupportType;
+  /** One-time setup command the user must run before starting the agent. */
+  loginHint?: string;
 }
 
 const AGENT_CONFIG: Record<ExternalAgentId, AgentConfig> = {
@@ -268,6 +275,11 @@ const AGENT_CONFIG: Record<ExternalAgentId, AgentConfig> = {
     command: "npx opencode-ai acp",
     sessionSupport: "single",
   },
+  cursor: {
+    port: 3025,
+    command: "agent acp",
+    sessionSupport: "single",
+  },
 };
 
 export function getAgentSessionSupport(

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

@@ -33,7 +33,7 @@ export const ChatHistoryPopover: React.FC<ChatHistoryPopoverProps> = ({
   const [searchQuery, setSearchQuery] = useState("");
 
   const chats = useMemo(() => {
-    return [...chatState.chats.values()].sort(
+    return [...chatState.chats.values()].toSorted(
       (a, b) => b.updatedAt - a.updatedAt,
     );
   }, [chatState.chats]);

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

@@ -465,7 +465,7 @@ const ChatPanelBody = () => {
     messages: activeChat?.messages || [], // initial messages
     transport: new DefaultChatTransport({
       api: runtimeManager.getAiURL("chat").toString(),
-      headers: runtimeManager.headers(),
+      headers: () => runtimeManager.headers(),
       prepareSendMessagesRequest: async (options) => {
         const completionBody = await buildCompletionRequestBody(
           options.messages,
@@ -476,6 +476,7 @@ const ChatPanelBody = () => {
         const tools = FRONTEND_TOOL_REGISTRY.getToolSchemas(chatMode);
 
         return {
+          api: runtimeManager.getAiURL("chat").toString(),
           body: {
             tools,
             ...options,

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

@@ -4,6 +4,7 @@
 import type { RowSelectionState, Table } from "@tanstack/react-table";
 import { useLocale } from "react-aria";
 import type { GetRowIds } from "@/plugins/impl/DataTablePlugin";
+import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
 import { prettyNumber } from "@/utils/numbers";
 import { Button } from "../ui/button";
@@ -21,6 +22,8 @@ interface TableBottomBarProps<TData> {
   getRowIds?: GetRowIds;
   showPageSizeSelector?: boolean;
   tableLoading?: boolean;
+  part?: string;
+  className?: string;
 }
 
 export const TableBottomBar = <TData,>({
@@ -32,6 +35,8 @@ export const TableBottomBar = <TData,>({
   getRowIds,
   showPageSizeSelector,
   tableLoading,
+  part,
+  className,
 }: TableBottomBarProps<TData>) => {
   const { locale } = useLocale();
   const handleSelectAllRows = (value: boolean) => {
@@ -143,7 +148,13 @@ export const TableBottomBar = <TData,>({
   };
 
   return (
-    <div className="flex lg:grid lg:grid-cols-[1fr_auto_1fr] items-center shrink-0 pt-1">
+    <div
+      part={part}
+      className={cn(
+        "flex lg:grid lg:grid-cols-[1fr_auto_1fr] items-center shrink-0",
+        className,
+      )}
+    >
       <div className="flex flex-col text-sm text-muted-foreground px-2 shrink-0">
         <div className="flex items-center gap-1">{renderTotal()}</div>
         <CellSelectionStats table={table} className="lg:hidden" />

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

@@ -69,43 +69,39 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
   }
 
   return (
-    <div className="flex items-center h-10 px-2 border-b gap-3">
-      {/* always-visible search */}
+    <div className="flex items-center h-10 px-2 border-b gap-2">
       {onSearchQueryChange && enableSearch && (
-        <div className="flex items-center">
-          <div className="flex items-center gap-1 rounded-full border px-2 w-56">
-            <SearchIcon className="w-4 h-4 text-muted-foreground shrink-0" />
-            <input
-              ref={inputRef}
-              type="text"
-              className="h-6 border-none bg-transparent focus:outline-hidden text-sm w-full min-w-0"
-              value={internalValue}
-              onKeyDown={(e) => {
-                if (e.key === "Escape") {
-                  setInternalValue("");
-                  inputRef.current?.blur();
-                }
-              }}
-              onChange={(e) => setInternalValue(e.target.value)}
-              placeholder="Search..."
-            />
-            {reloading && <Spinner size="small" />}
-            {internalValue && (
-              <Button
-                variant="text"
-                size="xs"
-                className="h-5 w-5 p-0 shrink-0"
-                onClick={() => setInternalValue("")}
-              >
-                <XIcon className="w-3 h-3 text-muted-foreground" />
-              </Button>
-            )}
-          </div>
+        <div className="flex flex-1 items-center gap-1 px-2 rounded-sm focus-within:ring-1 focus-within:ring-border transition-shadow">
+          <SearchIcon className="w-4 h-4 text-muted-foreground shrink-0" />
+          <input
+            ref={inputRef}
+            type="text"
+            className="h-6 border-none bg-transparent focus:outline-hidden text-sm w-full min-w-0"
+            value={internalValue}
+            onKeyDown={(e) => {
+              if (e.key === "Escape") {
+                setInternalValue("");
+                inputRef.current?.blur();
+              }
+            }}
+            onChange={(e) => setInternalValue(e.target.value)}
+            placeholder="Search..."
+          />
+          {reloading && <Spinner size="small" />}
+          {internalValue && (
+            <Button
+              variant="text"
+              size="xs"
+              className="h-5 w-5 p-0 shrink-0"
+              onClick={() => setInternalValue("")}
+            >
+              <XIcon className="w-3 h-3 text-muted-foreground" />
+            </Button>
+          )}
         </div>
       )}
 
-      {/* actions grouped together */}
-      <div className="flex items-center gap-1 shrink-0">
+      <div className="flex items-center shrink-0">
         {showChartBuilder && (
           <Button
             variant="text"
@@ -117,7 +113,7 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
             onClick={toggleDisplayHeader}
           >
             <ChartSplineIcon className="w-3.5 h-3.5" />
-            Chart Builder
+            Visualize
           </Button>
         )}
         {showTableExplorer && togglePanel && (
@@ -131,7 +127,7 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
             onClick={() => togglePanel(PANEL_TYPES.ROW_VIEWER)}
           >
             <PanelRightIcon className="w-3.5 h-3.5" />
-            Table Explorer
+            Explorer
           </Button>
         )}
         {downloadAs && <ExportMenu downloadAs={downloadAs} />}

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

@@ -230,7 +230,7 @@ describe("generateColumns", () => {
     });
 
     // "age" is a number column — should auto right-align
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // oxlint-disable-next-line typescript/no-explicit-any
     const cell = (columns[1].cell as any)({
       column: {
         columnDef: columns[1],
@@ -241,7 +241,7 @@ describe("generateColumns", () => {
     expect(cell?.props.className).toContain("text-right");
 
     // "name" is a string column — should remain left-aligned
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // oxlint-disable-next-line typescript/no-explicit-any
     const nameCell = (columns[0].cell as any)({
       column: {
         columnDef: columns[0],
@@ -261,7 +261,7 @@ describe("generateColumns", () => {
     });
 
     // "age" is numeric but explicitly set to left
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // oxlint-disable-next-line typescript/no-explicit-any
     const cell = (columns[1].cell as any)({
       column: {
         columnDef: columns[1],
@@ -301,7 +301,7 @@ describe("generateColumns", () => {
     });
 
     // Assuming getCellStyleClass is a function that returns a class name
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // oxlint-disable-next-line typescript/no-explicit-any
     const cell = (columns[0].cell as any)({
       column: {
         columnDef: columns[0],
@@ -333,7 +333,7 @@ describe("generateColumns", () => {
     // Right-justified: parent wrapper should have items-end, sort/filter icons should flip to the left
     const { container: rightContainer } = render(
       <TooltipProvider>
-        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+        {/* oxlint-disable-next-line typescript/no-explicit-any */}
         {(columns[0].header as any)({ column: mockColumn(columns[0]) })}
       </TooltipProvider>,
     );
@@ -347,7 +347,7 @@ describe("generateColumns", () => {
     // Center-justified: parent wrapper should have items-center, no flex-row-reverse
     const { container: centerContainer } = render(
       <TooltipProvider>
-        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+        {/* oxlint-disable-next-line typescript/no-explicit-any */}
         {(columns[1].header as any)({ column: mockColumn(columns[1]) })}
       </TooltipProvider>,
     );
@@ -572,7 +572,7 @@ describe("LocaleNumber", () => {
         <LocaleNumber value={1_234_567.89} />
       </I18nProvider>,
     );
-    // eslint-disable-next-line no-irregular-whitespace
+    // oxlint-disable-next-line no-irregular-whitespace
     expect(container.textContent).toMatchInlineSnapshot(`"1 234 567,89"`);
   });
 

package/src/components/data-table/cell-hover-template/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 
 export interface CellHoverTemplateTableState {
   cellHoverTemplate: string | null;

package/src/components/data-table/cell-hover-text/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 
 import type { RowData } from "@tanstack/react-table";
 

package/src/components/data-table/cell-selection/__tests__/feature.test.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* oxlint-disable typescript/no-explicit-any */
 
 import type { Cell, Column, Row, Table } from "@tanstack/react-table";
 import { describe, expect, it, vi } from "vitest";

package/src/components/data-table/cell-selection/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 import type { OnChangeFn, RowData, Updater } from "@tanstack/react-table";
 
 export interface CellSelectionItem {
@@ -40,8 +40,9 @@ export interface CellSelectionInstance<TData extends RowData> {
 declare module "@tanstack/react-table" {
   interface TableState extends CellSelectionTableState {}
 
-  interface TableOptionsResolved<TData extends RowData>
-    extends CellSelectionOptions {}
+  interface TableOptionsResolved<
+    TData extends RowData,
+  > extends CellSelectionOptions {}
 
   interface Table<TData extends RowData> extends CellSelectionInstance<TData> {}
 

package/src/components/data-table/cell-styling/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 import type { RowData } from "@tanstack/react-table";
 
 export type CellStyleState = Record<

package/src/components/data-table/charts/chart-spec/altair-generator.ts

@@ -78,7 +78,7 @@ export function generateAltairChart(
 
     if (encodings?.tooltip) {
       const tooltip = encodings.tooltip;
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      // oxlint-disable-next-line typescript/no-explicit-any
       const makeTooltip = (t: Record<string, any>) => {
         const kwargs = makeKwargs(t);
         return new FunctionCall("alt.Tooltip", kwargs);
@@ -149,7 +149,7 @@ ${variableName}
   `.trim();
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 function makeKwargs<T extends Record<string, any>>(obj: T) {
   const result: Record<string, PythonCode> = {};