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

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";
@@ -227,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}
             />
           );
 
@@ -294,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}
               />
             );
           })}
@@ -364,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>
           ))}
@@ -377,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,7 +15,6 @@ function makeCell(id: string, code = "print('hi')"): CellData {
     code,
     edited: false,
     lastCodeRun: null,
-    lastExecutionTime: null,
     config: { hide_code: false, disabled: false, column: null },
   };
 }

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);
 
@@ -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) {
     // 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/scratchpad/scratchpad.tsx

@@ -23,6 +23,7 @@ import { prepareCellCodeUpdate } from "@/core/codemirror/language/cell-code";
 import { getEditorCodeAsPython } from "@/core/codemirror/language/utils";
 import { useResolvedMarimoConfig } from "@/core/config/config";
 import { CSSClasses } from "@/core/constants";
+import { cellExecutionInputsAtom, scratchStatus } from "@/core/executions";
 import { useRequestClient } from "@/core/network/requests";
 import type { CellConfig } from "@/core/network/types";
 import { LazyAnyLanguageCodeMirror } from "@/plugins/impl/code/LazyAnyLanguageCodeMirror";
@@ -67,7 +68,9 @@ export const ScratchPad: React.FC = () => {
   const cellId = SCRATCH_CELL_ID;
   const cellRuntime = notebookState.cellRuntime[cellId];
   const output = cellRuntime?.output;
-  const status = cellRuntime?.status;
+  const status = scratchStatus(
+    useAtomValue(cellExecutionInputsAtom).executions,
+  );
   const consoleOutputs = cellRuntime?.consoleOutputs;
   const [code, setCode] = useAtom(scratchpadCodeAtom);
   const codeListener = useMemo(

package/src/components/slides/minimap.tsx

@@ -2,6 +2,7 @@
 
 import { useDeleteCellCallback } from "@/components/editor/cell/useDeleteCell";
 import { outputIsStale } from "@/core/cells/cell";
+import { useCellExecution } from "@/core/executions";
 import { useCellActions } from "@/core/cells/actions";
 import type { CellId } from "@/core/cells/ids";
 import { type CellColumnId, type Layout, useLayout } from "@/core/cells/layout";
@@ -627,6 +628,7 @@ const SlideThumbnailCard = ({
   ...props
 }: SlideThumbnailCardProps) => {
   const { width, height, scale } = dimensions;
+  const execution = useCellExecution(cell.id);
   const visual = isNoOutput ? NO_OUTPUT_VISUAL : getSlideTypeVisual(slideType);
   const isSkipped = isNoOutput || slideType === "skip";
 
@@ -675,9 +677,9 @@ const SlideThumbnailCard = ({
           ) : (
             <Slide
               cellId={cell.id}
-              status={cell.status}
+              status={execution.status}
               output={cell.output}
-              stale={outputIsStale(cell, false)}
+              stale={outputIsStale(execution, cell.staleInputs, false)}
             />
           )}
         </div>

package/src/components/slides/reveal-component.tsx

@@ -20,6 +20,7 @@ import { Button } from "@/components/ui/button";
 import { useFullScreenElement } from "@/components/ui/fullscreen";
 import { Tooltip } from "@/components/ui/tooltip";
 import { outputIsStale } from "@/core/cells/cell";
+import { useCellExecution } from "@/core/executions";
 import type { CellId } from "@/core/cells/ids";
 import type { RuntimeCell } from "@/core/cells/types";
 import type { RevealApi, RevealConfig } from "reveal.js";
@@ -351,16 +352,19 @@ function resolveSlideContentStyle(
  * different scheme than `HTMLCellId`) and its inner `OutputArea` uses
  * `display: contents`, which can't be targeted for background/border styling.
  */
-export const CellOutputBlock = ({ cell }: { cell: RuntimeCell }) => (
-  <div className="flex flex-col" {...cellDomProps(cell.id, cell.name)}>
-    <CellOutputSlide
-      cellId={cell.id}
-      status={cell.status}
-      output={cell.output}
-      stale={outputIsStale(cell, false)}
-    />
-  </div>
-);
+export const CellOutputBlock = ({ cell }: { cell: RuntimeCell }) => {
+  const execution = useCellExecution(cell.id);
+  return (
+    <div className="flex flex-col" {...cellDomProps(cell.id, cell.name)}>
+      <CellOutputSlide
+        cellId={cell.id}
+        status={execution.status}
+        output={cell.output}
+        stale={outputIsStale(execution, cell.staleInputs, false)}
+      />
+    </div>
+  );
+};
 
 const SubslideView = ({
   subslide,

package/src/components/slides/slide-cell-view.tsx

@@ -23,6 +23,7 @@ import {
 } from "@/core/cells/utils";
 import type { CellData, CellRuntimeState } from "@/core/cells/types";
 import type { LanguageAdapterType } from "@/core/codemirror/language/types";
+import { useCellExecution } from "@/core/executions";
 import { connectionAtom } from "@/core/network/connection";
 import { useTheme } from "@/theme/useTheme";
 import { cn } from "@/utils/cn";
@@ -62,21 +63,19 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
 
   const cellOutputPosition = userConfig.display.cell_output;
   const hasOutput = cell.output != null;
+  const execution = useCellExecution(cell.id);
+  const errored = execution.outcome === "error";
+  const interrupted = execution.outcome === "interrupted";
+  const stopped = execution.outcome === "skipped";
 
-  const uninstantiated = isUninstantiated({
-    executionTime: cell.runElapsedTimeMs ?? cell.lastExecutionTime,
-    status: cell.status,
-    errored: cell.errored,
-    interrupted: cell.interrupted,
-    stopped: cell.stopped,
-  });
+  const uninstantiated = isUninstantiated(execution);
 
   const needsRun = cellNeedsRun({
     edited: cell.edited,
-    interrupted: cell.interrupted,
+    interrupted,
     staleInputs: cell.staleInputs,
     disabled: cell.config.disabled,
-    status: cell.status,
+    blocked: execution.blocked,
   });
 
   const editorWrapperClassName = cn(
@@ -85,19 +84,19 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
     "interactive",
     cellStatusClasses({
       needsRun,
-      errored: cell.errored,
-      stopped: cell.stopped,
+      errored,
+      stopped,
       disabled: cell.config.disabled,
-      status: cell.status,
+      blocked: execution.blocked,
     }),
   );
 
   const output = (
     <CellOutputSlide
       cellId={cell.id}
-      status={cell.status}
+      status={execution.status}
       output={cell.output}
-      stale={outputIsStale(cell, false)}
+      stale={outputIsStale(execution, cell.staleInputs, false)}
     />
   );
 
@@ -105,14 +104,14 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
     <div className="absolute top-1 right-2 z-10 flex items-center gap-1.5">
       <CellStatusComponent
         editing={true}
-        status={cell.status}
+        status={execution.status}
         disabled={cell.config.disabled ?? false}
         staleInputs={cell.staleInputs}
         edited={cell.edited}
-        interrupted={cell.interrupted}
-        elapsedTime={cell.runElapsedTimeMs ?? cell.lastExecutionTime}
-        runStartTimestamp={cell.runStartTimestamp}
-        lastRunStartTimestamp={cell.lastRunStartTimestamp}
+        interrupted={interrupted}
+        elapsedTime={execution.duration}
+        startedAt={execution.startedAt}
+        blocked={execution.blocked}
         uninstantiated={uninstantiated}
       />
       <LanguageToggles
@@ -125,13 +124,17 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
       <div className="flex items-center shadow-none gap-1">
         <RunButton
           edited={cell.edited}
-          status={cell.status}
+          status={execution.status}
+          blocked={execution.blocked}
           needsRun={needsRun}
           connectionState={connection.state}
           config={cell.config}
           onClick={runCell}
         />
-        <StopButton status={cell.status} connectionState={connection.state} />
+        <StopButton
+          status={execution.status}
+          connectionState={connection.state}
+        />
       </div>
     </div>
   );
@@ -148,7 +151,7 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
         id={cell.id}
         code={cell.code}
         config={cell.config}
-        status={cell.status}
+        status={execution.status}
         runCell={runCell}
         setEditorView={(ev) => {
           editorViewRef.current = ev;
@@ -188,15 +191,16 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
 export const SlideCellReadOnlyView = ({ cell }: { cell: RuntimeCell }) => {
   const [userConfig] = useUserConfig();
   const cellOutputPosition = userConfig.display.cell_output;
+  const execution = useCellExecution(cell.id);
 
   const display = useMemo(() => getReadonlyCodeDisplay(cell.code), [cell.code]);
 
   const output = (
     <CellOutputSlide
       cellId={cell.id}
-      status={cell.status}
+      status={execution.status}
       output={cell.output}
-      stale={outputIsStale(cell, false)}
+      stale={outputIsStale(execution, cell.staleInputs, false)}
     />
   );
 

package/src/components/slides/slide.tsx

@@ -5,12 +5,11 @@ import { OutputArea } from "../editor/Output";
 import { memo } from "react";
 import type { CellId } from "@/core/cells/ids";
 import type { CellRuntimeState } from "@/core/cells/types";
+import type { CellRunStatus } from "@/core/executions";
 
-interface SlideContentProps extends Pick<
-  CellRuntimeState,
-  "output" | "status"
-> {
+interface SlideContentProps extends Pick<CellRuntimeState, "output"> {
   cellId: CellId;
+  status: CellRunStatus;
   stale: boolean;
 }
 

package/src/components/ui/toast.tsx

@@ -29,7 +29,7 @@ const VARIANT_CLASSES = {
   default:
     "bg-background border forced-colors:border-[CanvasText] forced-colors:bg-[Canvas] forced-colors:text-[CanvasText]",
   danger:
-    "group destructive text-error border-destructive bg-(--red-1) shadow-md-solid shadow-error forced-colors:border-[CanvasText] forced-colors:bg-[Canvas] forced-colors:text-[CanvasText]",
+    "group destructive text-(--red-11) border-destructive bg-(--red-1) shadow-md-solid shadow-error forced-colors:border-[CanvasText] forced-colors:bg-[Canvas] forced-colors:text-[CanvasText]",
 } as const satisfies Record<string, string>;
 
 type ToastVariant = keyof typeof VARIANT_CLASSES;