@marimo-team/islands 0.25.3-dev266 → 0.25.3-dev268

package/src/components/editor/header/status.tsx

@@ -5,7 +5,7 @@ import { HourglassIcon, UnlinkIcon } from "lucide-react";
 import React from "react";
 import { Tooltip } from "@/components/ui/tooltip";
 import { notebookScrollToRunning } from "@/core/cells/actions";
-import { onlyScratchpadIsRunningAtom } from "@/core/cells/cells";
+import { cellExecutionInputsAtom, onlyScratchRunning } from "@/core/executions";
 import { viewStateAtom } from "@/core/mode";
 import {
   type ConnectionStatus,
@@ -77,7 +77,9 @@ const DisconnectedIcon: React.FC<{ onReconnect?: () => void }> = ({
 };
 
 const RunningIcon = () => {
-  const scratchpadOnly = useAtomValue(onlyScratchpadIsRunningAtom);
+  const scratchpadOnly = onlyScratchRunning(
+    useAtomValue(cellExecutionInputsAtom).executions,
+  );
   const tooltip = scratchpadOnly
     ? "Scratchpad is running"
     : "Jump to running cell";

package/src/components/editor/links/cell-link.tsx

@@ -5,6 +5,7 @@ import { useCellIds, useCellNames } from "@/core/cells/cells";
 import { useCellActions } from "@/core/cells/actions";
 import { type CellId, HTMLCellId, SCRATCH_CELL_ID } from "@/core/cells/ids";
 import { displayCellName } from "@/core/cells/names";
+import { scrollToCell } from "@/core/cells/scrollCellIntoView";
 import { goToCellLine } from "@/core/codemirror/go-to-definition/utils";
 import { useFilename } from "@/core/saving/filename";
 import { cn } from "@/utils/cn";
@@ -106,16 +107,15 @@ export function scrollAndHighlightCell(
   skipScroll?: boolean,
 ): boolean {
   const cellHtmlId = HTMLCellId.create(cellId);
-  const cell: HTMLElement | null = document.getElementById(cellHtmlId);
+  const cell = skipScroll
+    ? document.getElementById(cellHtmlId)
+    : scrollToCell(cellId);
   const isCellErrored = cell?.classList.contains("has-error");
 
   if (cell === null) {
     Logger.error(`Cell ${cellHtmlId} not found on page.`);
     return false;
   }
-  if (!skipScroll) {
-    cell.scrollIntoView({ behavior: "smooth", block: "center" });
-  }
 
   if (variant === "destructive" || (isCellErrored && variant === undefined)) {
     cell.classList.add("error-outline");

package/src/components/editor/navigation/navigation.ts

@@ -22,6 +22,7 @@ import {
   visibleNeighbor,
 } from "@/core/cells/layout";
 import { useCellActions } from "@/core/cells/actions";
+import { cellExecutionInputsAtom, cellExecutionView } from "@/core/executions";
 import { useNotebookDocumentEdit } from "@/core/notebook/document";
 import { useCellFocusActions } from "@/core/cells/focus";
 import type { CellId } from "@/core/cells/ids";
@@ -582,9 +583,9 @@ export function useCellNavigationProps(
             selectedCells.size >= 2 ? [...selectedCells] : [cellId];
 
           // Cannot delete running cells
-          const notebook = store.get(notebookAtom);
+          const executions = store.get(cellExecutionInputsAtom);
           const hasRunningCell = cellIds.some((id) => {
-            const { status } = notebook.cellRuntime[id];
+            const { status } = cellExecutionView(executions, id);
             return status === "running" || status === "queued";
           });
 

package/src/components/editor/notebook-cell.tsx

@@ -37,10 +37,14 @@ import { isErrorMime } from "@/core/mime";
 import type { AppMode } from "@/core/mode";
 import { connectionAtom } from "@/core/network/connection";
 import { useRequestClient } from "@/core/network/requests";
-import type { CellConfig, RuntimeState } from "@/core/network/types";
+import {
+  type CellExecutionView,
+  type CellRunStatus,
+  useCellExecution,
+} from "@/core/executions";
+import type { CellConfig } from "@/core/network/types";
 import { useResizeObserver } from "@/hooks/useResizeObserver";
 import { cn } from "@/utils/cn";
-import type { Milliseconds, Seconds } from "@/utils/time";
 import {
   useCellData,
   useCellHandle,
@@ -78,10 +82,7 @@ import { CollapsedCellBanner, CollapseToggle } from "./cell/collapse";
 import { DeleteButton } from "./cell/DeleteButton";
 import { PendingDeleteConfirmation } from "./cell/PendingDeleteConfirmation";
 import { RunButton } from "./cell/RunButton";
-import {
-  StagedAICellBackground,
-  StagedAICellFooter,
-} from "./cell/StagedAICell";
+import { StagedAIDeletionMarker } from "./cell/StagedAICell";
 import { useDeleteCellCallback } from "./cell/useDeleteCell";
 import { useRunCell } from "./cell/useRunCells";
 import { cellDomProps } from "./common";
@@ -318,6 +319,10 @@ const ReadonlyCellComponent = forwardRef(
     const { cellId } = props;
     const cellData = useCellData(cellId);
     const cellRuntime = useCellRuntime(cellId);
+    const execution = useCellExecution(cellId);
+    const errored = execution.outcome === "error";
+    const interrupted = execution.outcome === "interrupted";
+    const stopped = execution.outcome === "skipped";
 
     const className = clsx("marimo-cell", "hover-actions-parent z-10", {
       published: true,
@@ -325,9 +330,9 @@ const ReadonlyCellComponent = forwardRef(
 
     // Hide the output if it's an error or stopped.
     const hidden = shouldHidePublishedCell({
-      errored: cellRuntime.errored,
-      interrupted: cellRuntime.interrupted,
-      stopped: cellRuntime.stopped,
+      errored,
+      interrupted,
+      stopped,
       output: cellRuntime.output,
       showErrorTracebacks: false,
     });
@@ -349,8 +354,12 @@ const ReadonlyCellComponent = forwardRef(
           className={CSSClasses.outputArea}
           cellId={cellId}
           output={cellRuntime.output}
-          stale={outputIsStale(cellRuntime, cellData.edited)}
-          loading={outputIsLoading(cellRuntime.status)}
+          stale={outputIsStale(
+            execution,
+            cellRuntime.staleInputs,
+            cellData.edited,
+          )}
+          loading={outputIsLoading(execution.status)}
         />
       </div>
     );
@@ -377,6 +386,10 @@ const EditableCellComponent = ({
   const cellRef = useRef<HTMLDivElement>(null);
   const cellData = useCellData(cellId);
   const cellRuntime = useCellRuntime(cellId);
+  const execution = useCellExecution(cellId);
+  const errored = execution.outcome === "error";
+  const interrupted = execution.outcome === "interrupted";
+  const stopped = execution.outcome === "skipped";
   const cellActionDropdownRef = useRef<CellActionsDropdownHandle>(null);
   // DOM node where the editorView will be mounted
   const editorViewParentRef = useRef<HTMLDivElement>(null);
@@ -392,23 +405,17 @@ const EditableCellComponent = ({
 
   const [languageAdapter, setLanguageAdapter] = useState<LanguageAdapterType>();
 
-  const uninstantiated = isUninstantiated({
-    executionTime: cellRuntime.runElapsedTimeMs ?? cellData.lastExecutionTime,
-    status: cellRuntime.status,
-    errored: cellRuntime.errored,
-    interrupted: cellRuntime.interrupted,
-    stopped: cellRuntime.stopped,
-  });
+  const uninstantiated = isUninstantiated(execution);
 
   const needsRun = cellNeedsRun({
     edited: cellData.edited,
-    interrupted: cellRuntime.interrupted,
+    interrupted,
     staleInputs: cellRuntime.staleInputs,
     disabled: cellData.config.disabled,
-    status: cellRuntime.status,
+    blocked: execution.blocked,
   });
 
-  const loading = outputIsLoading(cellRuntime.status);
+  const loading = outputIsLoading(execution.status);
 
   const isPresenting = mode === "present";
 
@@ -417,9 +424,9 @@ const EditableCellComponent = ({
   const presentHidden =
     isPresenting &&
     shouldHidePublishedCell({
-      errored: cellRuntime.errored,
-      interrupted: cellRuntime.interrupted,
-      stopped: cellRuntime.stopped,
+      errored,
+      interrupted,
+      stopped,
       output: cellRuntime.output,
       showErrorTracebacks: userConfig.runtime.show_tracebacks ?? false,
     });
@@ -435,10 +442,10 @@ const EditableCellComponent = ({
   // console output is cleared immediately on run, so check for queued instead
   // of loading to determine staleness
   const consoleOutputStale =
-    (cellRuntime.status === "queued" ||
+    (execution.status === "queued" ||
       cellData.edited ||
       cellRuntime.staleInputs) &&
-    !cellRuntime.interrupted;
+    !interrupted;
 
   // This getter is called during render, so useEvent cannot be used here.
   // oxlint-disable-next-line react/preserve-manual-memoization
@@ -475,7 +482,8 @@ const EditableCellComponent = ({
   // While presenting, pending edits do not dim the output as stale,
   // matching the read view.
   const isStaleCell = outputIsStale(
-    cellRuntime,
+    execution,
+    cellRuntime.staleInputs,
     cellData.edited && !isPresenting,
   );
   const hasConsoleOutput = cellRuntime.consoleOutputs.length > 0;
@@ -571,7 +579,7 @@ const EditableCellComponent = ({
         cellId={cellId}
         output={cellRuntime.output}
         stale={isStaleCell}
-        loading={outputIsLoading(cellRuntime.status)}
+        loading={outputIsLoading(execution.status)}
       />
     </div>
   );
@@ -582,18 +590,18 @@ const EditableCellComponent = ({
     isPresenting
       ? // Match the published styling of the read view
         publishedCellClasses({
-          errored: cellRuntime.errored,
-          stopped: cellRuntime.stopped,
+          errored,
+          stopped,
         })
       : {
           "z-10": true,
           interactive: true,
           ...cellStatusClasses({
             needsRun,
-            errored: cellRuntime.errored,
-            stopped: cellRuntime.stopped,
+            errored,
+            stopped,
             disabled: cellData.config.disabled,
-            status: cellRuntime.status,
+            blocked: execution.blocked,
           }),
           borderless:
             isMarkdownCodeHidden &&
@@ -620,7 +628,7 @@ const EditableCellComponent = ({
     if (cellData.config.disabled) {
       return "This cell is disabled";
     }
-    if (cellRuntime.status === "disabled-transitively") {
+    if (execution.blocked) {
       return "This cell has a disabled ancestor";
     }
     return undefined;
@@ -638,7 +646,7 @@ const EditableCellComponent = ({
         <SortableCell
           tabIndex={-1}
           ref={cellRef}
-          data-status={cellRuntime.status}
+          data-status={execution.status}
           onBlur={closeCompletionHandler}
           onKeyDown={resumeCompletionHandler}
           cellId={cellId}
@@ -674,11 +682,12 @@ const EditableCellComponent = ({
               data-has-output-above={hasOutputAbove}
               data-hidden={isMarkdownCodeHidden}
             >
-              <StagedAICellBackground cellId={cellId} />
+              <StagedAIDeletionMarker cellId={cellId} />
               <div className="absolute right-2 -top-4 z-10">
                 <CellToolbar
                   edited={cellData.edited}
-                  status={cellRuntime.status}
+                  status={execution.status}
+                  blocked={execution.blocked}
                   cellConfig={cellData.config}
                   needsRun={needsRun}
                   hasOutput={hasOutput}
@@ -696,7 +705,7 @@ const EditableCellComponent = ({
                 id={cellId}
                 code={cellData.code}
                 config={cellData.config}
-                status={cellRuntime.status}
+                status={execution.status}
                 runCell={runCell}
                 setEditorView={setEditorView}
                 userConfig={userConfig}
@@ -717,21 +726,17 @@ const EditableCellComponent = ({
                     isMarkdownCodeHidden && cellOutput === "below" && "top-14",
                   )}
                   edited={cellData.edited}
-                  status={cellRuntime.status}
+                  execution={execution}
                   isCellStatusInline={isCellStatusInline}
                   uninstantiated={uninstantiated}
                   disabled={cellData.config.disabled}
-                  runElapsedTimeMs={cellRuntime.runElapsedTimeMs}
-                  runStartTimestamp={cellRuntime.runStartTimestamp}
-                  lastRunStartTimestamp={cellRuntime.lastRunStartTimestamp}
                   staleInputs={cellRuntime.staleInputs}
-                  interrupted={cellRuntime.interrupted}
                 />
               )}
               <div className="shoulder-bottom hover-action">
                 {canDelete && isCellCodeShown && (
                   <DeleteButton
-                    status={cellRuntime.status}
+                    status={execution.status}
                     connectionState={connection.state}
                     onClick={() => {
                       if (
@@ -748,7 +753,7 @@ const EditableCellComponent = ({
             {!isPresenting && (
               <SqlValidationErrorBanner
                 cellId={cellId}
-                hide={cellRuntime.errored && !isStaleCell}
+                hide={errored && !isStaleCell}
               />
             )}
             {cellOutput === "below" && (outputArea || emptyMarkdownPlaceholder)}
@@ -814,7 +819,7 @@ const EditableCellComponent = ({
               <ConsoleOutput
                 consoleOutputs={cellRuntime.consoleOutputs}
                 stale={consoleOutputStale}
-                interrupted={cellRuntime.interrupted}
+                interrupted={interrupted}
                 // Empty name if serialization triggered
                 cellName={cellRuntime.serialization ? "_" : cellData.name}
                 onRefactorWithAI={handleRefactorWithAI}
@@ -837,7 +842,6 @@ const EditableCellComponent = ({
               />
             )}
             <PendingDeleteConfirmation cellId={cellId} />
-            {!isPresenting && <StagedAICellFooter cellId={cellId} />}
           </div>
           {isCollapsed && !isPresenting && (
             <CollapsedCellBanner
@@ -857,41 +861,33 @@ const CellRightSideActions = memo(
     className?: string;
     disabled: boolean | undefined;
     edited: boolean;
-    interrupted: boolean;
+    execution: CellExecutionView;
     isCellStatusInline: boolean;
-    lastRunStartTimestamp: Seconds | null;
-    runElapsedTimeMs: Milliseconds | null;
-    runStartTimestamp: Seconds | null;
     staleInputs: boolean;
-    status: RuntimeState;
     uninstantiated: boolean;
   }) => {
     const {
       className,
       disabled = false,
       edited,
-      interrupted,
+      execution,
       isCellStatusInline,
-      lastRunStartTimestamp,
-      runElapsedTimeMs,
-      runStartTimestamp,
       staleInputs,
-      status,
       uninstantiated,
     } = props;
 
     const cellStatusComponent = (
       <CellStatusComponent
-        status={status}
+        status={execution.status}
         staleInputs={staleInputs}
-        interrupted={interrupted}
+        interrupted={execution.outcome === "interrupted"}
         editing={true}
         edited={edited}
         disabled={disabled}
-        elapsedTime={runElapsedTimeMs}
-        runStartTimestamp={runStartTimestamp}
+        elapsedTime={execution.duration}
+        startedAt={execution.startedAt}
+        blocked={execution.blocked}
         uninstantiated={uninstantiated}
-        lastRunStartTimestamp={lastRunStartTimestamp}
       />
     );
 
@@ -964,7 +960,8 @@ CellLeftSideActions.displayName = "CellLeftSideActions";
 
 interface CellToolbarProps {
   edited: boolean;
-  status: RuntimeState;
+  status: CellRunStatus;
+  blocked: boolean;
   cellConfig: CellConfig;
   needsRun: boolean;
   hasOutput: boolean;
@@ -981,6 +978,7 @@ const CellToolbar = memo(
   ({
     edited,
     status,
+    blocked,
     cellConfig,
     needsRun,
     hasOutput,
@@ -1006,6 +1004,7 @@ const CellToolbar = memo(
           onClick={onRun}
           connectionState={connection.state}
           status={status}
+          blocked={blocked}
           config={cellConfig}
           needsRun={needsRun}
         />
@@ -1015,6 +1014,7 @@ const CellToolbar = memo(
             ref={cellActionDropdownRef}
             cellId={cellId}
             status={status}
+            blocked={blocked}
             getEditorView={getEditorView}
             name={name}
             config={cellConfig}
@@ -1058,6 +1058,10 @@ const SetupCellComponent = ({
   const cellRef = useRef<HTMLDivElement>(null);
   const cellData = useCellData(cellId);
   const cellRuntime = useCellRuntime(cellId);
+  const execution = useCellExecution(cellId);
+  const errored = execution.outcome === "error";
+  const interrupted = execution.outcome === "interrupted";
+  const stopped = execution.outcome === "skipped";
   const cellActionDropdownRef = useRef<CellActionsDropdownHandle>(null);
   // DOM node where the editorView will be mounted
   const editorViewParentRef = useRef<HTMLDivElement>(null);
@@ -1069,31 +1073,25 @@ const SetupCellComponent = ({
   const setAiCompletionCell = useSetAtom(aiCompletionCellAtom);
   const runCell = useRunCell(cellId);
 
-  const uninstantiated = isUninstantiated({
-    executionTime: cellRuntime.runElapsedTimeMs ?? cellData.lastExecutionTime,
-    status: cellRuntime.status,
-    errored: cellRuntime.errored,
-    interrupted: cellRuntime.interrupted,
-    stopped: cellRuntime.stopped,
-  });
+  const uninstantiated = isUninstantiated(execution);
 
   const needsRun = cellNeedsRun({
     edited: cellData.edited,
-    interrupted: cellRuntime.interrupted,
+    interrupted,
     staleInputs: cellRuntime.staleInputs,
     disabled: cellData.config.disabled,
-    status: cellRuntime.status,
+    blocked: execution.blocked,
   });
   const loading =
-    cellRuntime.status === "running" || cellRuntime.status === "queued";
+    execution.status === "running" || execution.status === "queued";
 
   // console output is cleared immediately on run, so check for queued instead
   // of loading to determine staleness
   const consoleOutputStale =
-    (cellRuntime.status === "queued" ||
+    (execution.status === "queued" ||
       cellData.edited ||
       cellRuntime.staleInputs) &&
-    !cellRuntime.interrupted;
+    !interrupted;
 
   // This getter is called during render, so useEvent cannot be used here.
   // oxlint-disable-next-line react/preserve-manual-memoization
@@ -1127,10 +1125,10 @@ const SetupCellComponent = ({
     interactive: true,
     ...cellStatusClasses({
       needsRun,
-      errored: cellRuntime.errored,
-      stopped: cellRuntime.stopped,
+      errored,
+      stopped,
       disabled: cellData.config.disabled,
-      status: cellRuntime.status,
+      blocked: execution.blocked,
     }),
   });
 
@@ -1151,7 +1149,7 @@ const SetupCellComponent = ({
     if (cellData.config.disabled) {
       return "This cell is disabled";
     }
-    if (cellRuntime.status === "disabled-transitively") {
+    if (execution.blocked) {
       return "This cell has a disabled ancestor";
     }
     return undefined;
@@ -1178,7 +1176,7 @@ const SetupCellComponent = ({
             mounted) while presenting. */}
         <div hidden={isPresenting}>
           <div
-            data-status={cellRuntime.status}
+            data-status={execution.status}
             ref={cellRef}
             {...mergeProps(navigationProps, {
               className: cn(
@@ -1198,14 +1196,12 @@ const SetupCellComponent = ({
               data-has-output-above={false}
               data-hidden={!isCellCodeShown}
             >
-              <StagedAICellBackground
-                cellId={cellId}
-                className="mo-ai-setup-cell"
-              />
+              <StagedAIDeletionMarker cellId={cellId} />
               <div className="absolute right-2 -top-4 z-10">
                 <CellToolbar
                   edited={cellData.edited}
-                  status={cellRuntime.status}
+                  status={execution.status}
+                  blocked={execution.blocked}
                   cellConfig={cellData.config}
                   needsRun={needsRun}
                   hasOutput={hasOutput}
@@ -1224,7 +1220,7 @@ const SetupCellComponent = ({
                 id={cellId}
                 code={cellData.code}
                 config={cellData.config}
-                status={cellRuntime.status}
+                status={execution.status}
                 runCell={runCell}
                 setEditorView={setEditorView}
                 userConfig={userConfig}
@@ -1242,22 +1238,18 @@ const SetupCellComponent = ({
               {!isPresenting && (
                 <CellRightSideActions
                   edited={cellData.edited}
-                  status={cellRuntime.status}
+                  execution={execution}
                   isCellStatusInline={false}
                   uninstantiated={uninstantiated}
                   disabled={cellData.config.disabled}
-                  runElapsedTimeMs={cellRuntime.runElapsedTimeMs}
-                  runStartTimestamp={cellRuntime.runStartTimestamp}
-                  lastRunStartTimestamp={cellRuntime.lastRunStartTimestamp}
                   staleInputs={cellRuntime.staleInputs}
-                  interrupted={cellRuntime.interrupted}
                 />
               )}
               <div className="shoulder-bottom hover-action">
                 {canDelete && (
                   <DeleteButton
                     connectionState={connection.state}
-                    status={cellRuntime.status}
+                    status={execution.status}
                     onClick={() => {
                       if (
                         !loading &&
@@ -1305,7 +1297,7 @@ const SetupCellComponent = ({
             <ConsoleOutput
               consoleOutputs={cellRuntime.consoleOutputs}
               stale={consoleOutputStale}
-              interrupted={cellRuntime.interrupted}
+              interrupted={interrupted}
               // Don't show name
               cellName={"_"}
               onRefactorWithAI={handleRefactorWithAI}
@@ -1326,7 +1318,6 @@ const SetupCellComponent = ({
               cellId={cellId}
               debuggerActive={cellRuntime.debuggerActive}
             />
-            <StagedAICellFooter cellId={cellId} />
           </div>
         </div>
       </CellActionsContextMenu>

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();
+    }
+  });
+});