@marimo-team/islands 0.25.3-dev15 → 0.25.3-dev151

package/src/plugins/impl/chat/__tests__/chat-prompts.test.tsx

@@ -0,0 +1,93 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import type { ComponentProps } from "react";
+import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
+import type { PopoverContent } from "@/components/ui/popover";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { Chatbot } from "../chat-ui";
+
+vi.mock("@/components/editor/ai/add-cell-with-ai", () => ({
+  PromptInput: ({ value }: { value: string }) => (
+    <textarea aria-label="Chat prompt" value={value} readOnly={true} />
+  ),
+}));
+
+vi.mock("@/components/ui/popover", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("@/components/ui/popover")>();
+  return {
+    ...actual,
+    // Keep the form mounted when the prompt menu takes focus so this tests
+    // the prompt reset rather than the overlay's incidental unmount.
+    PopoverContent: (props: ComponentProps<typeof PopoverContent>) => (
+      <actual.PopoverContent
+        {...props}
+        onInteractOutside={(event) => event.preventDefault()}
+      />
+    ),
+  };
+});
+
+describe("chat prompt variables", () => {
+  const originalScrollTo = HTMLElement.prototype.scrollTo;
+  beforeAll(() => {
+    HTMLElement.prototype.scrollTo = vi.fn();
+  });
+  afterAll(() => {
+    HTMLElement.prototype.scrollTo = originalScrollTo;
+  });
+
+  it("clears entered values and replaces the fields when selecting another prompt", async () => {
+    const firstPrompt = "Tell {{name}} about {{topic}}";
+    const secondPrompt = "Send {{name}} to {{destination}}";
+    render(
+      <TooltipProvider>
+        <Chatbot
+          prompts={[firstPrompt, secondPrompt]}
+          config={{
+            max_tokens: null,
+            temperature: null,
+            top_p: null,
+            top_k: null,
+            frequency_penalty: null,
+            presence_penalty: null,
+          }}
+          showConfigurationControls={false}
+          maxHeight={undefined}
+          allowAttachments={false}
+          disabled={false}
+          value={[]}
+          setValue={vi.fn()}
+          host={document.createElement("div")}
+          get_chat_history={vi.fn().mockResolvedValue({ messages: [] })}
+          delete_chat_history={vi.fn().mockResolvedValue(null)}
+          delete_chat_message={vi.fn().mockResolvedValue(null)}
+          send_prompt={vi.fn().mockResolvedValue(null)}
+          cancel_prompt={vi.fn().mockResolvedValue(null)}
+        />
+      </TooltipProvider>,
+    );
+
+    const promptMenu = screen.getByRole("button", { expanded: false });
+    fireEvent.keyDown(promptMenu, { key: "ArrowDown" });
+    fireEvent.click(await screen.findByRole("menuitem", { name: firstPrompt }));
+    fireEvent.change(await screen.findByLabelText("name"), {
+      target: { value: "Ada" },
+    });
+    fireEvent.change(screen.getByLabelText("topic"), {
+      target: { value: "Python" },
+    });
+    expect(screen.getByRole("button", { name: "Submit" })).toBeEnabled();
+
+    fireEvent.keyDown(promptMenu, { key: "ArrowDown" });
+    fireEvent.click(
+      await screen.findByRole("menuitem", { name: secondPrompt }),
+    );
+
+    expect(await screen.findByLabelText("destination")).toHaveValue("");
+    expect(screen.getByLabelText("name")).toHaveValue("");
+    expect(screen.queryByLabelText("topic")).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Submit" })).toBeDisabled();
+  });
+});

package/src/plugins/impl/chat/chat-ui.tsx

@@ -24,7 +24,7 @@ import {
   Trash2Icon,
   X,
 } from "lucide-react";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { z } from "zod";
 import {
   describeChatAbortReason,
@@ -163,7 +163,9 @@ export const Chatbot: React.FC<Props> = (props) => {
 
   // Use a ref to avoid stale closure in the fetch callback
   const configRef = useRef<ChatConfig>(config);
-  configRef.current = config;
+  useLayoutEffect(() => {
+    configRef.current = config;
+  }, [config]);
 
   // For frontend-managed streaming, create a controller to enqueue chunks to.
   const frontendStreamControllerRef =
@@ -411,9 +413,8 @@ export const Chatbot: React.FC<Props> = (props) => {
     });
   }, [messages.length, scrollContainerRef]);
 
-  const codemirrorView = codeMirrorInputRef.current?.view;
-
   const resetInput = () => {
+    const codemirrorView = codeMirrorInputRef.current?.view;
     // Clear input immediately by directly manipulating the editor
     // There is some delay if we use setInput("") only
     if (codemirrorView) {
@@ -440,6 +441,7 @@ export const Chatbot: React.FC<Props> = (props) => {
     >
       <div className="absolute top-0 right-0 flex justify-end z-10 border border-(--slate-6) bg-inherit rounded-bl-lg">
         <Button
+          aria-label="Reset chat"
           variant="text"
           size="icon"
           disabled={messages.length === 0}
@@ -470,7 +472,7 @@ export const Chatbot: React.FC<Props> = (props) => {
 
           return (
             <div
-              key={`${message.id}-${index}`}
+              key={message.id}
               className={cn(
                 "flex flex-col group gap-2",
                 message.role === "user" ? "items-end" : "items-start",
@@ -493,7 +495,7 @@ export const Chatbot: React.FC<Props> = (props) => {
                     : undefined,
                 })}
               </div>
-              <div className="flex justify-end text-xs gap-2 invisible group-hover:visible">
+              <div className="flex justify-end text-xs gap-2 opacity-0 group-hover:opacity-100 focus-within:opacity-100">
                 <CopyClipboardIcon
                   value={textContent}
                   className="h-3 w-3"
@@ -501,6 +503,7 @@ export const Chatbot: React.FC<Props> = (props) => {
                 />
                 <button
                   type="button"
+                  aria-label="Delete message"
                   onClick={() => handleDelete(message.id)}
                   className="text-xs text-(--slate-9) hover:text-(--slate-11)"
                 >
@@ -566,6 +569,7 @@ export const Chatbot: React.FC<Props> = (props) => {
             onSelect={(prompt) => {
               setInput(prompt);
               requestAnimationFrame(() => {
+                const codemirrorView = codeMirrorInputRef.current?.view;
                 codemirrorView?.focus();
                 moveToEndOfEditor(codemirrorView);
               });
@@ -862,6 +866,7 @@ const PromptsPopover: React.FC<{
 
       <PopoverContent side="right" align="end" className="min-w-80 px-2">
         <PromptVariablesForm
+          key={selectedPrompt}
           prompt={selectedPrompt}
           onClose={() => setIsPopoverOpen(false)}
           onSelect={onSelect}
@@ -876,9 +881,7 @@ const PromptVariablesForm: React.FC<{
   onClose: () => void;
   onSelect: (prompt: string) => void;
 }> = ({ prompt, onClose, onSelect }) => {
-  const [variables, setVariables] = useState<{ [key: string]: string }>({});
-
-  useEffect(() => {
+  const [variables, setVariables] = useState<{ [key: string]: string }>(() => {
     const variableRegex = /{{(\w+)}}/g;
     const matches = [...prompt.matchAll(variableRegex)];
     const initialVariables = matches.reduce<{ [key: string]: string }>(
@@ -888,8 +891,8 @@ const PromptVariablesForm: React.FC<{
       },
       {},
     );
-    setVariables(initialVariables);
-  }, [prompt]);
+    return initialVariables;
+  });
 
   const handleVariableChange = (variable: string, value: string) => {
     setVariables((prev) => ({ ...prev, [variable]: value }));

package/src/plugins/impl/code/any-language-editor.tsx

@@ -53,14 +53,14 @@ const AnyLanguageCodeMirror: React.FC<
     extensions?: readonly Extension[];
   }
 > = ({
-  language,
+  language: requestedLanguage,
   hideUnsupportedLanguageErrors,
   showCopyButton,
   extensions = EMPTY_EXTENSIONS,
   ...props
 }) => {
   // Maybe normalize the language to the extension
-  language = LANGUAGE_MAP[language || ""] || language;
+  const language = LANGUAGE_MAP[requestedLanguage || ""] || requestedLanguage;
 
   const isSupported = isSupportedLanguage(language);
   if (!isSupported) {

package/src/plugins/impl/data-editor/glide-data-editor.tsx

@@ -73,12 +73,16 @@ export const GlideDataEditor = ({
   });
 
   const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
+  const editableColumnSet = useMemo(
+    () => (editableColumns === "all" ? null : new Set(editableColumns)),
+    [editableColumns],
+  );
 
   const columns: ModifiedGridColumn[] = useMemo(() => {
     const columns: ModifiedGridColumn[] = [];
     for (const [columnName, fieldType] of columnFields) {
       const editable =
-        editableColumns === "all" || editableColumns.includes(columnName);
+        editableColumnSet === null || editableColumnSet.has(columnName);
 
       columns.push({
         id: columnName,
@@ -100,7 +104,7 @@ export const GlideDataEditor = ({
     }
 
     return columns;
-  }, [columnFields, columnWidths, editableColumns, theme]);
+  }, [columnFields, columnWidths, editableColumnSet, theme]);
 
   const getCellContent = useCallback(
     (cell: Item): GridCell => {
@@ -110,8 +114,7 @@ export const GlideDataEditor = ({
       const dataItem = dataRow[columns[col].title];
       const columnKind = columns[col].kind;
       const editable =
-        editableColumns === "all" ||
-        editableColumns.includes(columns[col].title);
+        editableColumnSet === null || editableColumnSet.has(columns[col].title);
 
       if (columnKind === GridCellKind.Boolean) {
         const value = Boolean(dataItem);
@@ -141,7 +144,7 @@ export const GlideDataEditor = ({
         data: String(dataItem),
       };
     },
-    [columns, data, editableColumns],
+    [columns, data, editableColumnSet],
   );
 
   const onCellEdited = useCallback(

package/src/plugins/impl/data-editor/glide-utils.ts

@@ -147,6 +147,8 @@ export function pasteCells(options: {
       }
 
       const edits: Edits["edits"] = [];
+      const editableColumnSet =
+        editableColumns === "all" ? null : new Set(editableColumns);
 
       for (const [rowIndex, dataRow] of parsedData.entries()) {
         if (!dataRow) {
@@ -175,7 +177,7 @@ export function pasteCells(options: {
           const column = columns[targetColIdx];
           const columnType = column.dataType;
           const editable =
-            editableColumns === "all" || editableColumns.includes(column.title);
+            editableColumnSet === null || editableColumnSet.has(column.title);
 
           if (!editable) {
             continue;

package/src/plugins/impl/data-explorer/ConnectedDataExplorerComponent.tsx

@@ -47,7 +47,7 @@ const ConnectedDataExplorerComponent = (props: DataTableProps): JSX.Element => {
     // Subscribe to the store
     const unsub = store.sub(chartSpecAtom, () => {
       const value = store.get(chartSpecAtom);
-      const { schema, ...withoutSchema } = value;
+      const { schema: _schema, ...withoutSchema } = value;
       props.setValue(withoutSchema);
     });
 

package/src/plugins/impl/data-explorer/components/column-summary.tsx

@@ -60,7 +60,9 @@ export const ColumnSummary: React.FC<Props> = ({ schema }) => {
             field: field,
           });
           return (
-            <span
+            <button
+              type="button"
+              aria-pressed={selectedField === field}
               key={field}
               className={cn(
                 "hover:bg-muted self-start px-2 py-2 rounded flex flex-row gap-1 items-center cursor-pointer lg:justify-center text-sm truncate shrink-0 overflow-hidden",
@@ -81,7 +83,7 @@ export const ColumnSummary: React.FC<Props> = ({ schema }) => {
                   ({cardinality})
                 </span>
               )}
-            </span>
+            </button>
           );
         })}
         {hasMore && (

package/src/plugins/impl/data-explorer/state/reducer.ts

@@ -47,7 +47,7 @@ const { valueAtom: chartSpecAtom, useActions } = createReducerAndAtoms(
     },
     set: (state, next: ChartSpec) => {
       // remove schema
-      const { schema, ...rest } = next;
+      const { schema: _schema, ...rest } = next;
       return { ...state, ...rest };
     },
   },

package/src/plugins/impl/data-frames/DataFramePlugin.tsx

@@ -154,7 +154,7 @@ export const DataFramePlugin = createPlugin<S>("marimo-dataframe")
       )
       .output(
         z.object({
-          data: z.union([z.string(), z.array(z.object({}).passthrough())]),
+          data: z.union([z.string(), z.array(z.looseObject({}))]),
           total_rows: z.number(),
         }),
       ),
@@ -192,7 +192,6 @@ const EMPTY: Transformations = {
 export const DataFrameComponent = memo(
   ({
     columns,
-    dataframeName,
     pageSize,
     showDownload,
     lazy,

package/src/plugins/impl/data-frames/__tests__/sidebar.test.tsx

@@ -0,0 +1,160 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { useState } from "react";
+import { expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { Sidebar, TransformPanel } from "../panel";
+import { type TransformType, TransformTypeSchema } from "../schema";
+
+const transform: TransformType = { type: "select_columns", column_ids: [] };
+
+it("selects and deletes transforms through independent buttons", () => {
+  const onSelect = vi.fn();
+  const onDelete = vi.fn();
+  render(
+    <Sidebar
+      items={[{ id: "first", transform }]}
+      selected={0}
+      onSelect={onSelect}
+      onDelete={onDelete}
+      onAdd={vi.fn()}
+    />,
+  );
+  const select = screen.getByRole("button", { name: "Select Columns" });
+  expect(select).toHaveAttribute("aria-pressed", "true");
+  fireEvent.click(select);
+  expect(onSelect).toHaveBeenCalledExactlyOnceWith(0);
+  const remove = screen.getByRole("button", {
+    name: "Delete Select Columns transform 1",
+  });
+  remove.focus();
+  expect(remove).toHaveFocus();
+  fireEvent.click(remove);
+  expect(onDelete).toHaveBeenCalledExactlyOnceWith(0);
+  expect(onSelect).toHaveBeenCalledOnce();
+});
+
+it("preserves focused rows across value edits and removal of earlier duplicates", () => {
+  const first = { id: "first", transform };
+  const second = { id: "second", transform };
+  const props = {
+    selected: 1,
+    onSelect: vi.fn(),
+    onDelete: vi.fn(),
+    onAdd: vi.fn(),
+  };
+  const { rerender } = render(<Sidebar {...props} items={[first, second]} />);
+  const focused = screen.getAllByRole("button", { name: "Select Columns" })[1];
+  act(() => focused.focus());
+  const edited = {
+    ...second,
+    transform: TransformTypeSchema.parse({
+      ...transform,
+      column_ids: ["name"],
+    }),
+  };
+  rerender(<Sidebar {...props} items={[first, edited]} />);
+  expect(screen.getAllByRole("button", { name: "Select Columns" })[1]).toBe(
+    focused,
+  );
+  expect(focused).toHaveFocus();
+
+  rerender(<Sidebar {...props} items={[edited]} selected={0} />);
+  expect(screen.getByRole("button", { name: "Select Columns" })).toBe(focused);
+  expect(focused).toHaveFocus();
+  fireEvent.click(focused);
+  expect(props.onSelect).toHaveBeenLastCalledWith(0);
+});
+
+it.each([
+  { count: 3, removed: 0, destination: 1 },
+  { count: 3, removed: 1, destination: 0 },
+  { count: 3, removed: 2, destination: 1 },
+  { count: 1, removed: 0, destination: undefined },
+])(
+  "moves focus after deleting row $removed of $count",
+  ({ count, removed, destination }) => {
+    function Example() {
+      const [items, setItems] = useState(
+        Array.from({ length: count }, (_, index) => ({
+          id: `transform-${index}`,
+          transform,
+        })),
+      );
+      return (
+        <Sidebar
+          items={items}
+          selected={undefined}
+          onSelect={vi.fn()}
+          onDelete={(index) =>
+            setItems((current) => current.filter((_, i) => i !== index))
+          }
+          onAdd={vi.fn()}
+        />
+      );
+    }
+    render(<Example />);
+    const selectButtons = screen.getAllByRole("button", {
+      name: "Select Columns",
+    });
+    const target =
+      destination === undefined
+        ? screen.getByRole("button", { name: "Add" })
+        : selectButtons[destination];
+    const remove = screen.getByRole("button", {
+      name: `Delete Select Columns transform ${removed + 1}`,
+    });
+    act(() => remove.focus());
+    fireEvent.click(remove, { detail: 0 });
+    expect(remove).not.toBeInTheDocument();
+    expect(target).toHaveFocus();
+  },
+);
+
+it("uses persistent field-array IDs in the transformation panel", () => {
+  render(
+    <TooltipProvider>
+      <TransformPanel
+        initialValue={{ transforms: [transform, transform] }}
+        columns={new Map()}
+        lazy={true}
+        onChange={vi.fn()}
+        onInvalidChange={vi.fn()}
+        getColumnValues={async () => ({ values: [], too_many_values: false })}
+      />
+    </TooltipProvider>,
+  );
+  const survivor = screen.getAllByRole("button", { name: "Select Columns" })[1];
+  const remove = screen.getByRole("button", {
+    name: "Delete Select Columns transform 1",
+  });
+  act(() => remove.focus());
+  fireEvent.click(remove, { detail: 0 });
+  expect(screen.getByRole("button", { name: "Select Columns" })).toBe(survivor);
+  expect(survivor).toHaveFocus();
+  expect(survivor).toHaveAttribute("aria-pressed", "true");
+});
+
+it("does not move focus when deletion starts outside the focused row", () => {
+  render(
+    <>
+      <input aria-label="Transform setting" />
+      <Sidebar
+        items={[{ id: "first", transform }]}
+        selected={0}
+        onSelect={vi.fn()}
+        onDelete={vi.fn()}
+        onAdd={vi.fn()}
+      />
+    </>,
+  );
+  const input = screen.getByRole("textbox", { name: "Transform setting" });
+  act(() => input.focus());
+  fireEvent.click(
+    screen.getByRole("button", {
+      name: "Delete Select Columns transform 1",
+    }),
+  );
+  expect(input).toHaveFocus();
+});