@marimo-team/frontend 0.25.3-dev13 → 0.25.3-dev134

package/src/components/editor/output/console/ConsoleOutput.tsx

@@ -6,7 +6,7 @@ import {
   ChevronsUpDownIcon,
   WrapTextIcon,
 } from "lucide-react";
-import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import React, { useEffect, useLayoutEffect, useState } from "react";
 import { ToggleButton } from "react-aria-components";
 import { DebuggerControls } from "@/components/debugger/debugger-code";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
@@ -16,8 +16,7 @@ import { Tooltip } from "@/components/ui/tooltip";
 import type { CellId } from "@/core/cells/ids";
 import { isInternalCellName } from "@/core/cells/names";
 import { useExpandedConsoleOutput } from "@/core/cells/outputs";
-import type { WithResponse } from "@/core/cells/types";
-import type { OutputMessage } from "@/core/kernel/messages";
+import type { ConsoleOutputMessage } from "@/core/cells/types";
 import {
   type UseInputHistoryReturn,
   useInputHistory,
@@ -49,31 +48,21 @@ export const CONSOLE_CLEAR_DEBOUNCE_MS = 200;
  */
 function useDebouncedConsoleOutputs<T>(outputs: T[]): T[] {
   const [debouncedOutputs, setDebouncedOutputs] = useState(outputs);
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  // Non-empty outputs: apply immediately and cancel any pending clear
+  // Non-empty outputs: apply immediately. Effect cleanup cancels pending clears.
   if (outputs.length > 0 && debouncedOutputs !== outputs) {
-    if (timerRef.current !== null) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
     setDebouncedOutputs(outputs);
   }
 
   // Empty outputs: delay the clear so new outputs can arrive first
   useEffect(() => {
-    if (outputs.length === 0 && timerRef.current === null) {
-      timerRef.current = setTimeout(() => {
-        timerRef.current = null;
-        setDebouncedOutputs([]);
-      }, CONSOLE_CLEAR_DEBOUNCE_MS);
+    if (outputs.length > 0) {
+      return;
     }
-    return () => {
-      if (timerRef.current !== null) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-    };
+    const timer = setTimeout(() => {
+      setDebouncedOutputs([]);
+    }, CONSOLE_CLEAR_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
   }, [outputs]);
 
   return debouncedOutputs;
@@ -83,7 +72,7 @@ interface Props {
   cellId: CellId;
   cellName: string;
   className?: string;
-  consoleOutputs: WithResponse<OutputMessage>[];
+  consoleOutputs: ConsoleOutputMessage[];
   stale: boolean;
   interrupted: boolean;
   debuggerActive: boolean;
@@ -251,19 +240,24 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
             return null;
           }
 
+          const originalIdx = consoleOutputs.length - idx - 1;
+          // Outputs render in reverse, so the reversed index shifts on every
+          // new line. The assigned id survives collapse and truncation. The
+          // original position is the fallback for outputs without one.
+          const key = output.id ?? `position-${originalIdx}`;
+
           if (output.channel === "stdin") {
             invariant(
               typeof output.data === "string",
               "Expected data to be a string",
             );
 
-            const originalIdx = consoleOutputs.length - idx - 1;
             const isPassword = output.mimetype === "text/password";
 
             if (output.response == null && lastStdInputIdx === idx) {
               return (
                 <StdInput
-                  key={idx}
+                  key={key}
                   output={output.data}
                   isPdb={isPdb}
                   isPassword={isPassword}
@@ -278,7 +272,7 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
 
             return (
               <StdInputWithResponse
-                key={idx}
+                key={key}
                 output={output.data}
                 response={output.response}
                 isPassword={isPassword}
@@ -288,7 +282,7 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
           }
 
           return (
-            <React.Fragment key={idx}>
+            <React.Fragment key={key}>
               <OutputRenderer
                 cellId={cellId}
                 onRefactorWithAI={onRefactorWithAI}

package/src/components/editor/package-alert.tsx

@@ -55,6 +55,7 @@ import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
+  DropdownMenuItem,
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
 import { ExternalLink } from "../ui/links";
@@ -158,6 +159,7 @@ export const PackageAlert: React.FC = () => {
               <SourceBadge source={packageAlert.source} />
             </span>
             <Button
+              aria-label="Dismiss missing packages alert"
               variant="text"
               data-testid="remove-banner-button"
               size="icon"
@@ -171,12 +173,12 @@ export const PackageAlert: React.FC = () => {
               <p>The following packages were not found:</p>
               <table className="list-disc ml-2 mt-1">
                 <tbody>
-                  {packageAlert.packages.map((pkg, index) => {
+                  {packageAlert.packages.map((pkg) => {
                     const parsed = parsePackageSpecifier(pkg);
                     const currentExtras = selectedExtras[pkg] || parsed.extras;
 
                     return (
-                      <tr className="font-mono text-sm" key={index}>
+                      <tr className="font-mono text-sm" key={pkg}>
                         <td className="pr-2 py-1 align-middle">
                           <BoxIcon size="1rem" />
                         </td>
@@ -270,6 +272,7 @@ export const PackageAlert: React.FC = () => {
               <SourceBadge source={packageAlert.source} />
             </span>
             <Button
+              aria-label={`Dismiss ${title}`}
               variant="text"
               data-testid="remove-banner-button"
               size="icon"
@@ -294,7 +297,7 @@ export const PackageAlert: React.FC = () => {
               </>
             )}
             <ul className="list-disc ml-2 mt-1">
-              {Object.entries(packageAlert.packages).map(([pkg, st], index) => (
+              {Object.entries(packageAlert.packages).map(([pkg, st]) => (
                 <li
                   className={cn(
                     "flex items-center gap-1 font-mono text-sm",
@@ -305,7 +308,7 @@ export const PackageAlert: React.FC = () => {
                       status === "failed" &&
                       "text-muted-foreground",
                   )}
-                  key={index}
+                  key={pkg}
                 >
                   <ProgressIcon status={st} />
                   {pkg}
@@ -590,14 +593,18 @@ const ExtrasSelector: React.FC<ExtrasSelectorProps> = ({
                 <div className="p-2 bg-popover border-b border-border">
                   <div className="flex flex-wrap gap-1 p-1 min-h-[24px]">
                     {selectedExtras.map((extra) => (
-                      <span
+                      <DropdownMenuItem
                         key={extra}
+                        aria-label={`Remove ${extra}`}
                         className="inline-flex items-center gap-1 px-1 py-0.5 text-sm font-mono border border-muted-foreground/30 hover:border-muted-foreground/60 rounded-sm cursor-pointer group transition-colors"
-                        onClick={() => handleExtraToggle(extra, false)}
+                        onSelect={(e) => {
+                          e.preventDefault();
+                          handleExtraToggle(extra, false);
+                        }}
                       >
                         {extra}
                         <XIcon className="w-3 h-3 opacity-60 group-hover:opacity-100" />
-                      </span>
+                      </DropdownMenuItem>
                     ))}
                   </div>
                 </div>

package/src/components/editor/renderers/grid-layout/grid-layout.tsx

@@ -190,12 +190,18 @@ export const GridLayoutRenderer: React.FC<Props> = ({
           cells: [...cellLayouts, dropped],
         });
       }}
-      onDragStart={(_layout, _oldItem, _newItem, _placeholder, event) => {
-        dragProps.onDragStart(event);
-      }}
-      onDrag={(_layout, _oldItem, _newItem, _placeholder, event) => {
-        dragProps.onDragMove(event);
-      }}
+      onDragStart={
+        // oxlint-disable-next-line marimo/prefer-object-params -- React Grid Layout supplies the event as the fifth argument.
+        (_layout, _oldItem, _newItem, _placeholder, event) => {
+          dragProps.onDragStart(event);
+        }
+      }
+      onDrag={
+        // oxlint-disable-next-line marimo/prefer-object-params -- React Grid Layout supplies the event as the fifth argument.
+        (_layout, _oldItem, _newItem, _placeholder, event) => {
+          dragProps.onDragMove(event);
+        }
+      }
       onDragStop={() => {
         dragProps.onDragStop();
       }}

package/src/components/editor/renderers/vertical-layout/sidebar/toggle.tsx

@@ -12,7 +12,13 @@ interface SidebarToggleProps {
 export const SidebarToggle = ({ isOpen, toggle }: SidebarToggleProps) => {
   return (
     <div className="invisible lg:visible absolute top-[12px] right-[16px] z-20">
-      <Button onClick={toggle} className="w-10 h-8" variant="ghost" size="icon">
+      <Button
+        aria-label={isOpen ? "Collapse sidebar" : "Expand sidebar"}
+        onClick={toggle}
+        className="w-10 h-8"
+        variant="ghost"
+        size="icon"
+      >
         <ChevronLeft
           className={cn(
             "h-5 w-5 transition-transform ease-in-out duration-700",

package/src/components/home/components.tsx

@@ -12,7 +12,6 @@ import {
   GraduationCapIcon,
   GridIcon,
   LayoutIcon,
-  LinkIcon,
   MessagesSquareIcon,
   OrbitIcon,
   PackageIcon,
@@ -82,7 +81,12 @@ export const OpenTutorialDropDown: React.FC = () => {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild={true}>
-        <Button data-testid="open-tutorial-button" size="xs" variant="outline">
+        <Button
+          data-testid="open-tutorial-button"
+          size="sm"
+          variant="outline"
+          className="border-border text-(--gray-11) shadow-none hover:border-(--gray-7) hover:bg-(--gray-3)"
+        >
           <GraduationCapIcon className="w-4 h-4 mr-2" />
           Tutorials
           <CaretDownIcon className="w-3 h-3 ml-1" />
@@ -135,7 +139,7 @@ const RESOURCES = [
     url: Constants.githubPage,
   },
   {
-    title: "Community",
+    title: "Discussion",
     description: "Join the marimo Discord community",
     icon: MessagesSquareIcon,
     url: Constants.discordLink,
@@ -162,9 +166,11 @@ const RESOURCES = [
 
 export const ResourceLinks: React.FC = () => {
   return (
-    <div className="flex flex-col gap-2">
-      <Header Icon={LinkIcon}>Resources</Header>
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+    <nav
+      aria-label="Resources"
+      className="mt-12 border-t border-border/60 pt-6"
+    >
+      <div className="flex flex-wrap items-center gap-x-6 gap-y-4">
         {RESOURCES.map((resource) => (
           <a
             key={resource.title}
@@ -172,19 +178,15 @@ export const ResourceLinks: React.FC = () => {
             target="_blank"
             rel="noreferrer"
             aria-label={`${resource.title}: ${resource.description}`}
-            className="flex items-start gap-3 py-3 px-3 rounded-lg border hover:bg-accent/20 transition-colors shadow-xs"
+            title={resource.description}
+            className="flex items-center gap-2 rounded-sm text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
           >
-            <resource.icon className="w-5 h-5 mt-1.5 text-primary" />
-            <div>
-              <h3 className="font-medium">{resource.title}</h3>
-              <p className="text-sm text-muted-foreground">
-                {resource.description}
-              </p>
-            </div>
+            <resource.icon className="h-4 w-4" />
+            <span>{resource.title}</span>
           </a>
         ))}
       </div>
-    </div>
+    </nav>
   );
 };
 
@@ -203,19 +205,3 @@ export const TruncatedWorkspaceBanner: React.FC<{
     </Banner>
   );
 };
-
-export const Header: React.FC<{
-  Icon: React.FC<React.SVGProps<SVGSVGElement>>;
-  control?: React.ReactNode;
-  children: React.ReactNode;
-}> = ({ Icon, control, children }) => {
-  return (
-    <div className="flex items-center justify-between gap-2">
-      <h2 className="flex items-center gap-2 text-xl font-semibold text-muted-foreground select-none">
-        <Icon className="h-5 w-5" />
-        {children}
-      </h2>
-      {control}
-    </div>
-  );
-};

package/src/components/icons/__tests__/large-spinner.test.tsx

@@ -0,0 +1,39 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, render, screen } from "@testing-library/react";
+import { Profiler } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { LargeSpinner } from "../large-spinner";
+
+describe("LargeSpinner", () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it("fades the old title without a second commit before the timer fires", () => {
+    const onRender = vi.fn();
+    const spinner = (title: string) => (
+      <Profiler id="spinner" onRender={onRender}>
+        <LargeSpinner title={title} />
+      </Profiler>
+    );
+    const { rerender } = render(spinner("Starting"));
+    onRender.mockClear();
+
+    rerender(spinner("Loading"));
+    expect(onRender).toHaveBeenCalledOnce();
+    expect(screen.getByText("Starting")).toHaveClass("opacity-0");
+
+    act(() => vi.advanceTimersByTime(300));
+    expect(screen.getByText("Loading")).toHaveClass("opacity-100");
+  });
+
+  it("restores visibility if the title changes back during the fade", () => {
+    const { rerender } = render(<LargeSpinner title="Starting" />);
+    rerender(<LargeSpinner title="Loading" />);
+    rerender(<LargeSpinner title="Starting" />);
+
+    expect(screen.getByText("Starting")).toHaveClass("opacity-100");
+    act(() => vi.advanceTimersByTime(300));
+    expect(screen.queryByText("Loading")).not.toBeInTheDocument();
+  });
+});

package/src/components/icons/large-spinner.tsx

@@ -1,23 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { Loader2Icon } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useDebounce } from "@/hooks/useDebounce";
 import { cn } from "@/utils/cn";
 
 export const LargeSpinner = ({ title }: { title?: string }) => {
-  const [currentTitle, setCurrentTitle] = useState(title);
-  const [isVisible, setIsVisible] = useState(true);
-
-  useEffect(() => {
-    if (title !== currentTitle) {
-      setIsVisible(false);
-      const timer = setTimeout(() => {
-        setCurrentTitle(title);
-        setIsVisible(true);
-      }, 300); // Wait for fade out animation to complete
-      return () => clearTimeout(timer);
-    }
-  }, [title, currentTitle]);
+  const currentTitle = useDebounce(title, 300);
+  const isVisible = title === currentTitle;
 
   return (
     <div className="flex flex-col h-full flex-1 items-center justify-center p-4">

package/src/components/icons/spinner.tsx

@@ -25,7 +25,7 @@ const spinnerVariants = cva("animate-spin", {
 const Spinner = React.forwardRef<
   SVGSVGElement,
   React.SVGProps<SVGSVGElement> & VariantProps<typeof spinnerVariants>
->(({ className, children, centered, size, ...props }, ref) => (
+>(({ className, children: _children, centered, size, ...props }, ref) => (
   <Loader2Icon
     ref={ref}
     className={cn(spinnerVariants({ centered, size }), className)}

package/src/components/mcp/mcp-status-indicator.tsx

@@ -41,7 +41,7 @@ export const MCPStatusIndicator: React.FC = () => {
     <Popover>
       <Tooltip content="MCP Status">
         <PopoverTrigger asChild={true}>
-          <Button variant="text" size="icon">
+          <Button aria-label="MCP status" variant="text" size="icon">
             <PlugIcon
               className={cn(
                 "h-4 w-4",

package/src/components/pages/__tests__/home-page.test.tsx

@@ -0,0 +1,116 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { CreateNewNotebook } from "../home-page";
+
+function newNotebookKey(link: HTMLElement): string | null {
+  return new URL(
+    link.getAttribute("href") ?? "",
+    window.location.href,
+  ).searchParams.get("file");
+}
+
+function activate(link: HTMLElement, type: string, init: MouseEventInit) {
+  fireEvent(link, new MouseEvent(type, { bubbles: true, ...init }));
+}
+
+describe("CreateNewNotebook", () => {
+  it("links to an untitled notebook", () => {
+    render(<CreateNewNotebook />);
+    const link = screen.getByRole("link", { name: /new notebook/i });
+
+    expect(newNotebookKey(link)).toMatch(/^__new__/);
+    expect(link).toHaveAttribute("target", "_blank");
+  });
+
+  it.each([
+    { label: "click", type: "click", init: { button: 0, detail: 1 } },
+    // Enter on a focused link fires `click` with detail 0
+    { label: "keyboard activation", type: "click", init: { detail: 0 } },
+    // ctrl/cmd-click opens a tab and still fires `click`
+    { label: "ctrl-click", type: "click", init: { ctrlKey: true } },
+    { label: "cmd-click", type: "click", init: { metaKey: true } },
+    // middle-click opens a tab without firing `click`
+    { label: "middle-click", type: "auxclick", init: { button: 1 } },
+    // "Open link in new tab" from the context menu fires no click at all
+    { label: "right-click", type: "contextmenu", init: { button: 2 } },
+  ])("uses a fresh notebook key on every $label", ({ type, init }) => {
+    render(<CreateNewNotebook />);
+    const link = screen.getByRole("link", { name: /new notebook/i });
+
+    const keys = new Set<string | null>([newNotebookKey(link)]);
+    for (let i = 0; i < 2; i++) {
+      activate(link, type, init);
+      keys.add(newNotebookKey(link));
+    }
+
+    expect(keys.size).toBe(3);
+  });
+
+  it("never hands the browser a key that an earlier activation used", () => {
+    render(<CreateNewNotebook />);
+    const link = screen.getByRole("link", { name: /new notebook/i });
+
+    // The browser reads `href` after every listener ran. Record it there.
+    const followed: Array<string | null> = [];
+    const record = () => followed.push(newNotebookKey(link));
+    document.addEventListener("click", record);
+    document.addEventListener("auxclick", record);
+    try {
+      activate(link, "contextmenu", { button: 2 });
+      activate(link, "click", { button: 0 });
+      activate(link, "click", { button: 0 });
+      activate(link, "auxclick", { button: 1 });
+      activate(link, "contextmenu", { button: 2 });
+      activate(link, "click", { button: 0, metaKey: true });
+    } finally {
+      document.removeEventListener("click", record);
+      document.removeEventListener("auxclick", record);
+    }
+
+    expect(followed).toHaveLength(4);
+    expect(new Set(followed).size).toBe(4);
+    for (const key of followed) {
+      expect(key).toMatch(/^__new__s_/);
+    }
+  });
+
+  it("puts a fresh key into the drag payload", () => {
+    render(<CreateNewNotebook />);
+    const link = screen.getByRole("link", { name: /new notebook/i });
+    const before = newNotebookKey(link);
+
+    const payload = new Map<string, string>();
+    const dataTransfer = {
+      setData: (format: string, data: string) => payload.set(format, data),
+    };
+    fireEvent.dragStart(link, { dataTransfer });
+
+    const dragged = new URL(
+      payload.get("text/uri-list") ?? "",
+      window.location.href,
+    ).searchParams.get("file");
+    expect(dragged).toMatch(/^__new__s_/);
+    expect(dragged).not.toBe(before);
+    expect(payload.get("text/plain")).toBe(payload.get("text/uri-list"));
+    // The link itself moves to the dragged key, so a later click rotates again
+    expect(newNotebookKey(link)).toBe(dragged);
+  });
+
+  it("survives a re-render without reusing a key", () => {
+    const { rerender } = render(<CreateNewNotebook />);
+    const link = screen.getByRole("link", { name: /new notebook/i });
+
+    const keys = new Set<string | null>([newNotebookKey(link)]);
+    activate(link, "click", { button: 0 });
+    keys.add(newNotebookKey(link));
+    rerender(<CreateNewNotebook />);
+    keys.add(newNotebookKey(link));
+    activate(link, "click", { button: 0 });
+    keys.add(newNotebookKey(link));
+
+    // A re-render keeps the current key; only activations rotate it
+    expect(keys.size).toBe(3);
+  });
+});