@marimo-team/islands 0.25.3-dev27 → 0.25.3-dev271

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

@@ -0,0 +1,75 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { describe, expect, it, vi } from "vitest";
+import { MockExecutions } from "@/__mocks__/executions";
+import { MockNotebook } from "@/__mocks__/notebook";
+import { cellId } from "@/__tests__/branded";
+import { parseAppConfig } from "@/core/config/config-schema";
+import { GridLayoutRenderer } from "../grid-layout";
+import type { GridLayout } from "../types";
+
+vi.mock("@/components/editor/Output", () => ({
+  OutputArea: ({ cellId }: { cellId: string }) => (
+    <div data-testid={`output-${cellId}`} />
+  ),
+}));
+
+const ERRORED = cellId("errored");
+
+function renderErroredCell(cells: GridLayout["cells"]) {
+  const store = createStore();
+  MockExecutions.seed(store, [MockExecutions.errored(ERRORED)]);
+  const notebook = MockNotebook.notebookState({
+    cellData: { [ERRORED]: { code: "raise ValueError('boom')" } },
+    cellRuntime: {
+      [ERRORED]: {
+        output: {
+          channel: "marimo-error",
+          mimetype: "application/vnd.marimo+error",
+          data: [MockNotebook.errors.exception("boom")],
+          timestamp: 1,
+        },
+      },
+    },
+  });
+  render(
+    <Provider store={store}>
+      <GridLayoutRenderer
+        appConfig={parseAppConfig({})}
+        mode="edit"
+        layout={{
+          columns: 12,
+          rowHeight: 20,
+          cells,
+          scrollableCells: new Set(),
+          cellSide: new Map(),
+        }}
+        setLayout={vi.fn()}
+        cells={[
+          { ...notebook.cellData[ERRORED], ...notebook.cellRuntime[ERRORED] },
+        ]}
+      />
+    </Provider>,
+  );
+  return screen.getAllByTestId(`output-${ERRORED}`);
+}
+
+describe("GridLayoutRenderer", () => {
+  it("hides an errored cell placed in the grid", () => {
+    const [placed] = renderErroredCell([
+      { i: ERRORED, x: 0, y: 0, w: 4, h: 4 },
+    ]);
+    expect(placed.closest(".invisible")).not.toBeNull();
+  });
+
+  it("keeps an errored cell visible in the Outputs tray", () => {
+    const outputs = renderErroredCell([]);
+    expect(screen.getByText("Outputs")).toBeTruthy();
+    expect(outputs.length).toBeGreaterThan(0);
+    for (const output of outputs) {
+      expect(output.closest(".invisible")).toBeNull();
+    }
+  });
+});

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

@@ -37,6 +37,7 @@ import { NumberField } from "@/components/ui/number-field";
 import { Switch } from "@/components/ui/switch";
 import { outputIsLoading, outputIsStale } from "@/core/cells/cell";
 import type { CellId } from "@/core/cells/ids";
+import { useCellExecution } from "@/core/executions";
 import type { AppMode } from "@/core/mode";
 import { useIsDragging } from "@/hooks/useIsDragging";
 import { cn } from "@/utils/cn";
@@ -190,12 +191,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();
       }}
@@ -221,11 +228,10 @@ export const GridLayoutRenderer: React.FC<Props> = ({
               mode={mode}
               cellId={cell.id}
               output={cell.output}
-              status={cell.status}
-              stale={outputIsStale(cell, false)}
+              staleInputs={cell.staleInputs}
+              hideWithoutValue={true}
               isScrollable={isScrollable}
               side={side}
-              hidden={cell.errored || cell.interrupted || cell.stopped}
             />
           );
 
@@ -288,10 +294,9 @@ export const GridLayoutRenderer: React.FC<Props> = ({
                 mode={mode}
                 cellId={cell.id}
                 output={cell.output}
-                status={cell.status}
-                stale={outputIsStale(cell, false)}
+                staleInputs={cell.staleInputs}
+                hideWithoutValue={false}
                 isScrollable={false}
-                hidden={false}
               />
             );
           })}
@@ -358,10 +363,9 @@ export const GridLayoutRenderer: React.FC<Props> = ({
                 mode={mode}
                 cellId={cell.id}
                 output={cell.output}
+                staleInputs={cell.staleInputs}
+                hideWithoutValue={false}
                 isScrollable={false}
-                status={cell.status}
-                stale={outputIsStale(cell, false)}
-                hidden={false}
               />
             </div>
           ))}
@@ -371,31 +375,39 @@ export const GridLayoutRenderer: React.FC<Props> = ({
   );
 };
 
-interface GridCellProps extends Pick<CellRuntimeState, "output" | "status"> {
+interface GridCellProps extends Pick<
+  CellRuntimeState,
+  "output" | "staleInputs"
+> {
   className?: string;
   code: string;
   cellId: CellId;
   mode: AppMode;
-  hidden: boolean;
+  /** Whether a cell whose last run ended without a value keeps its place but shows nothing. */
+  hideWithoutValue: boolean;
   isScrollable: boolean;
   side?: GridLayoutCellSide;
-  stale: boolean;
 }
 
 const GridCell = memo(
   ({
     output,
+    staleInputs,
     cellId,
-    status,
     mode,
     code,
-    hidden,
+    hideWithoutValue,
     isScrollable,
     side,
     className,
-    stale,
   }: GridCellProps) => {
-    const loading = outputIsLoading(status);
+    const execution = useCellExecution(cellId);
+    const loading = outputIsLoading(execution.status);
+    const stale = outputIsStale(execution, staleInputs, false);
+    const hidden =
+      hideWithoutValue &&
+      execution.outcome !== null &&
+      execution.outcome !== "value";
 
     const isOutputEmpty = output == null || output.data === "";
     // If not reading, show code when there is no output

package/src/components/editor/renderers/slides-layout/__tests__/plugin.test.ts

@@ -15,9 +15,7 @@ function makeCell(id: string, code = "print('hi')"): CellData {
     code,
     edited: false,
     lastCodeRun: null,
-    lastExecutionTime: null,
     config: { hide_code: false, disabled: false, column: null },
-    serializedEditorState: null,
   };
 }
 

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

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import React, { useMemo, useState } from "react";
 import { useAtomValue } from "jotai";
-import { numColumnsAtom } from "@/core/cells/cells";
+import { numColumnsAtom } from "@/core/cells/layout";
 import type { CellId } from "@/core/cells/ids";
 import { kioskModeAtom } from "@/core/mode";
 import type { ICellRendererProps } from "../types";

package/src/components/editor/renderers/vertical-layout/__tests__/useFocusFirstEditor.test.ts

@@ -25,7 +25,7 @@ describe("useFocusFirstEditor", () => {
     const getNotebookSpy = vi
       .spyOn(cellsModule, "getNotebook")
       .mockReturnValue({
-        cellIds: { iterateTopLevelIds: ["cell-1", "cell-2"] },
+        cellIds: ["cell-1", "cell-2"],
         cellData: {
           "cell-1": { config: { hide_code: false } },
           "cell-2": { config: { hide_code: false } },
@@ -52,7 +52,7 @@ describe("useFocusFirstEditor", () => {
     const getNotebookSpy = vi
       .spyOn(cellsModule, "getNotebook")
       .mockReturnValue({
-        cellIds: { iterateTopLevelIds: ["cell-1", "cell-2"] },
+        cellIds: ["cell-1", "cell-2"],
         cellData: {
           "cell-1": { config: { hide_code: true } }, // hidden
           "cell-2": { config: { hide_code: false } }, // visible
@@ -94,7 +94,7 @@ describe("useFocusFirstEditor", () => {
     // Mock getNotebook
     const mockEditor = { focus: vi.fn() };
     vi.spyOn(cellsModule, "getNotebook").mockReturnValue({
-      cellIds: { iterateTopLevelIds: [] },
+      cellIds: [],
       cellData: {},
       cellHandles: {
         "cell-123": { current: { editorView: mockEditor } },
@@ -129,7 +129,7 @@ describe("useFocusFirstEditor", () => {
 
     const mockEditor = { focus: vi.fn() };
     vi.spyOn(cellsModule, "getNotebook").mockReturnValue({
-      cellIds: { iterateTopLevelIds: ["cell-1"] },
+      cellIds: ["cell-1"],
       cellData: {
         "cell-1": { config: { hide_code: false } },
       },

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/editor/renderers/vertical-layout/useFocusFirstEditor.ts

@@ -52,7 +52,7 @@ function focusFirstEditor() {
   const { cellIds, cellData, cellHandles } = getNotebook();
 
   // Focus on the first cell if it's been mounted and is not hidden
-  for (const cellId of cellIds.iterateTopLevelIds) {
+  for (const cellId of cellIds) {
     const handle = cellHandles[cellId];
     const hidden = cellData[cellId]?.config.hide_code;
     if (!hidden && handle?.current?.editorView) {

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

@@ -32,7 +32,7 @@ import { getReadonlyCodeDisplay } from "@/core/cells/readonly-code-display";
 import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
 import { useResolvedMarimoConfig } from "@/core/config/config";
 import { CSSClasses } from "@/core/constants";
-import { kernelStateAtom } from "@/core/kernel/state";
+import { runtimeStatusAtom, useCellExecution } from "@/core/executions";
 import { useNotebookCodeAvailable } from "@/core/meta/code-visibility";
 import { showCodeInRunModeAtom } from "@/core/meta/state";
 import {
@@ -73,7 +73,7 @@ const VerticalLayoutRenderer: React.FC<VerticalLayoutProps> = ({
 }) => {
   const { invisible } = useDelayVisibility(cells.length, mode);
   const kioskMode = useAtomValue(kioskModeAtom);
-  const kernelState = useAtomValue(kernelStateAtom);
+  const runtimeStatus = useAtomValue(runtimeStatusAtom);
   const [userConfig] = useResolvedMarimoConfig();
   const showCodeInRunModePreference = useAtomValue(showCodeInRunModeAtom);
 
@@ -81,7 +81,7 @@ const VerticalLayoutRenderer: React.FC<VerticalLayoutProps> = ({
     getInitialShowCode({ showCodeInRunModePreference, kioskMode }),
   );
 
-  const canShowCode = useNotebookCodeAvailable(cells);
+  const canShowCode = useNotebookCodeAvailable();
 
   const handleToggleShowCode = () => {
     setShowCode((currentShowCode) => {
@@ -98,16 +98,11 @@ const VerticalLayoutRenderer: React.FC<VerticalLayoutProps> = ({
         cellId={cell.id}
         output={cell.output}
         consoleOutputs={cell.consoleOutputs}
-        status={cell.status}
         code={cell.code}
         config={cell.config}
         cellOutputArea={userConfig.display.cell_output}
-        stopped={cell.stopped}
         showCode={showCode && canShowCode}
-        errored={cell.errored}
         mode={mode}
-        runStartTimestamp={cell.runStartTimestamp}
-        interrupted={cell.interrupted}
         staleInputs={cell.staleInputs}
         name={cell.name}
         kiosk={kioskMode}
@@ -134,8 +129,9 @@ const VerticalLayoutRenderer: React.FC<VerticalLayoutProps> = ({
     }
 
     if (cells.length === 0 && !invisible) {
-      // If kernel is not yet instantiated, show loading state
-      if (!kernelState.isInstantiated) {
+      // Until the host reports the runtime running, show loading state.
+      // A static notebook has no runtime to wait for.
+      if (runtimeStatus !== "running" && !isStaticNotebook()) {
         return (
           <div className="flex-1 flex flex-col items-center justify-center py-8">
             <Loader2Icon className="w-8 h-8 animate-spin text-muted-foreground" />
@@ -304,14 +300,7 @@ const ActionButtons: React.FC<{
 
 interface VerticalCellProps extends Pick<
   CellRuntimeState,
-  | "output"
-  | "consoleOutputs"
-  | "status"
-  | "stopped"
-  | "errored"
-  | "interrupted"
-  | "staleInputs"
-  | "runStartTimestamp"
+  "output" | "consoleOutputs" | "staleInputs"
 > {
   cellOutputArea: "above" | "below";
   cellId: CellId;
@@ -330,13 +319,8 @@ const VerticalCell = memo(
     consoleOutputs,
     cellOutputArea,
     cellId,
-    status,
-    stopped,
-    errored,
     config,
-    interrupted,
     staleInputs,
-    runStartTimestamp,
     code,
     showCode,
     mode,
@@ -345,18 +329,13 @@ const VerticalCell = memo(
     showErrorTracebacks,
   }: VerticalCellProps) => {
     const cellRef = useRef<HTMLDivElement>(null);
+    const execution = useCellExecution(cellId);
+    const errored = execution.outcome === "error";
+    const interrupted = execution.outcome === "interrupted";
+    const stopped = execution.outcome === "skipped";
 
-    const outputStale = outputIsStale(
-      {
-        status,
-        output,
-        interrupted,
-        runStartTimestamp,
-        staleInputs,
-      },
-      false,
-    );
-    const loading = outputIsLoading(status);
+    const outputStale = outputIsStale(execution, staleInputs, false);
+    const loading = outputIsLoading(execution.status);
 
     // Kiosk and not presenting
     const kioskFull = kiosk && mode !== "present";

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

@@ -2,6 +2,7 @@
 
 import { atom, useAtomValue } from "jotai";
 import { notebookAtom } from "@/core/cells/cells";
+import { cellExecutionInputsAtom, cellExecutionView } from "@/core/executions";
 import { Banner } from "@/plugins/impl/common/error-banner";
 import { Logger } from "@/utils/Logger";
 import { Button } from "../ui/button";
@@ -11,12 +12,13 @@ import { DelayMount } from "../utils/delay-mount";
 // Atom to check if there is a cell with unresolved stdin
 const hasBlockingStdinAtom = atom((get) => {
   const notebook = get(notebookAtom);
+  const executions = get(cellExecutionInputsAtom);
 
   // Check each cell in order
-  for (const cellId of notebook.cellIds.inOrderIds) {
+  for (const cellId of notebook.cellIds) {
     // Check if the cell is idle and has unresolved stdin
     const runtime = notebook.cellRuntime[cellId];
-    if (runtime.status === "idle") {
+    if (cellExecutionView(executions, cellId).status === "idle") {
       const hasUnresolvedStdin = runtime.consoleOutputs.some(
         (output) => output.channel === "stdin" && output.response === undefined,
       );

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)}