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

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

@@ -16,7 +16,6 @@ import {
   useCallback,
   useEffect,
   useImperativeHandle,
-  useMemo,
   useRef,
   useState,
 } from "react";
@@ -38,18 +37,24 @@ 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 {
-  type CellActions,
-  createUntouchedCellAtom,
-  useCellActions,
   useCellData,
   useCellHandle,
   useCellRuntime,
 } from "../../core/cells/cells";
+import { type CellActions, useCellActions } from "../../core/cells/actions";
+import {
+  showHiddenCodeAtom,
+  useShowsHiddenCode,
+} from "../../core/cells/editor";
 import { type CellId, SETUP_CELL_ID } from "../../core/cells/ids";
 import {
   cellNeedsRun,
@@ -59,7 +64,7 @@ import {
   shouldHidePublishedCell,
 } from "../../core/cells/utils";
 import type { UserConfig } from "../../core/config/config-schema";
-import { isAppInteractionDisabled } from "../../core/websocket/connection-utils";
+import { isAppInteractionDisabled } from "../../core/session/connection-utils";
 import { useCellRenderCount } from "../../hooks/useCellRenderCount";
 import type { Theme } from "../../theme/useTheme";
 import { Functions } from "../../utils/functions";
@@ -77,19 +82,12 @@ 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";
 import { SqlValidationErrorBanner } from "./errors/sql-validation-errors";
 import { useCellNavigationProps } from "./navigation/navigation";
-import {
-  useTemporarilyShownCode,
-  useTemporarilyShownCodeActions,
-} from "./navigation/state";
 import { type OnRefactorWithAI, OutputArea } from "./Output";
 import { ConsoleOutput } from "./output/console/ConsoleOutput";
 import { CellDragHandle, SortableCell } from "./SortableCell";
@@ -168,15 +166,12 @@ function useCellHiddenLogic({
   editorView: React.RefObject<EditorView | null>;
   editorViewParentRef: React.RefObject<HTMLDivElement | null>;
 }) {
-  const temporarilyVisible = useTemporarilyShownCode(cellId);
-  const temporarilyShownCodeActions = useTemporarilyShownCodeActions();
-  const isUntouched = useAtomValue(
-    useMemo(() => createUntouchedCellAtom(cellId), [cellId]),
-  );
+  const showsHiddenCode = useShowsHiddenCode(cellId);
+  const showHiddenCodeNow = useSetAtom(showHiddenCodeAtom);
 
-  // The cell code is shown if the cell is not configured to be hidden or if the code is temporarily visible (i.e. when focused).
-  const isCellCodeShown =
-    !cellConfig.hide_code || temporarilyVisible || isUntouched;
+  // The code is shown unless the cell hides it, and then still while it is
+  // being edited or was just created.
+  const isCellCodeShown = !cellConfig.hide_code || showsHiddenCode;
   const isMarkdown = languageAdapter === "markdown";
   const isMarkdownCodeHidden = isMarkdown && !isCellCodeShown;
 
@@ -189,7 +184,7 @@ function useCellHiddenLogic({
 
     // Default to true
     const focus = opts?.focus ?? true;
-    temporarilyShownCodeActions.add(cellId);
+    showHiddenCodeNow({ cellId });
 
     if (focus) {
       editorView.current?.focus();
@@ -215,15 +210,10 @@ function useCellHiddenLogic({
 
 export type CellComponentActions = Pick<
   CellActions,
-  | "updateCellCode"
-  | "createNewCell"
   | "focusCell"
   | "moveCell"
   | "collapseCell"
   | "expandCell"
-  | "moveToNextCell"
-  | "updateCellConfig"
-  | "clearSerializedEditorState"
   | "setStdinResponse"
   | "clearCellConsoleOutput"
   | "sendToBottom"
@@ -329,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,
@@ -336,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,
     });
@@ -360,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>
     );
@@ -388,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);
@@ -403,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";
 
@@ -428,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,
     });
@@ -446,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
@@ -486,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;
@@ -525,13 +522,22 @@ const EditableCellComponent = ({
     isMarkdownCodeHidden &&
     isEmptyMarkdownContent &&
     !needsRun && (
+      // Preserve pointer double-click editing; keyboard and assistive clicks activate directly.
+      // react-doctor-disable-next-line react-doctor/prefer-tag-over-role
       <div
+        // eslint-disable-next-line jsx-a11y/prefer-tag-over-role
         role="button"
-        aria-label="Double-click to edit markdown"
+        aria-label="Edit markdown"
         className="relative cursor-pointer px-3 py-2"
         onDoubleClick={showHiddenCodeIfMarkdown}
+        onClick={(e) => {
+          if (e.detail === 0) {
+            showHiddenCodeIfMarkdown();
+          }
+        }}
         onKeyDown={(e) => {
-          if (e.key === "Enter") {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
             showHiddenCodeIfMarkdown();
           }
         }}
@@ -573,7 +579,7 @@ const EditableCellComponent = ({
         cellId={cellId}
         output={cellRuntime.output}
         stale={isStaleCell}
-        loading={outputIsLoading(cellRuntime.status)}
+        loading={outputIsLoading(execution.status)}
       />
     </div>
   );
@@ -584,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 &&
@@ -622,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;
@@ -640,7 +646,7 @@ const EditableCellComponent = ({
         <SortableCell
           tabIndex={-1}
           ref={cellRef}
-          data-status={cellRuntime.status}
+          data-status={execution.status}
           onBlur={closeCompletionHandler}
           onKeyDown={resumeCompletionHandler}
           cellId={cellId}
@@ -676,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}
@@ -698,8 +705,7 @@ const EditableCellComponent = ({
                 id={cellId}
                 code={cellData.code}
                 config={cellData.config}
-                status={cellRuntime.status}
-                serializedEditorState={cellData.serializedEditorState}
+                status={execution.status}
                 runCell={runCell}
                 setEditorView={setEditorView}
                 userConfig={userConfig}
@@ -720,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 (
@@ -751,7 +753,7 @@ const EditableCellComponent = ({
             {!isPresenting && (
               <SqlValidationErrorBanner
                 cellId={cellId}
-                hide={cellRuntime.errored && !isStaleCell}
+                hide={errored && !isStaleCell}
               />
             )}
             {cellOutput === "below" && (outputArea || emptyMarkdownPlaceholder)}
@@ -817,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}
@@ -840,7 +842,6 @@ const EditableCellComponent = ({
               />
             )}
             <PendingDeleteConfirmation cellId={cellId} />
-            {!isPresenting && <StagedAICellFooter cellId={cellId} />}
           </div>
           {isCollapsed && !isPresenting && (
             <CollapsedCellBanner
@@ -860,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}
       />
     );
 
@@ -919,15 +912,16 @@ const CellLeftSideActions = memo(
     actions: CellComponentActions;
   }) => {
     const connection = useAtomValue(connectionAtom);
-    const { className, actions, cellId } = props;
+    const { className, cellId } = props;
+    const { createCell } = useCellActions();
 
     const createBelow = useEvent(
-      (opts: { code?: string; hideCode?: boolean } = {}) =>
-        actions.createNewCell({ cellId, before: false, ...opts }),
+      ({ code, hideCode }: { code?: string; hideCode?: boolean } = {}) =>
+        createCell({ after: cellId, code, config: { hide_code: hideCode } }),
     );
     const createAbove = useEvent(
-      (opts: { code?: string; hideCode?: boolean } = {}) =>
-        actions.createNewCell({ cellId, before: true, ...opts }),
+      ({ code, hideCode }: { code?: string; hideCode?: boolean } = {}) =>
+        createCell({ before: cellId, code, config: { hide_code: hideCode } }),
     );
 
     const oneClickShortcut = "mod";
@@ -966,7 +960,8 @@ CellLeftSideActions.displayName = "CellLeftSideActions";
 
 interface CellToolbarProps {
   edited: boolean;
-  status: RuntimeState;
+  status: CellRunStatus;
+  blocked: boolean;
   cellConfig: CellConfig;
   needsRun: boolean;
   hasOutput: boolean;
@@ -983,6 +978,7 @@ const CellToolbar = memo(
   ({
     edited,
     status,
+    blocked,
     cellConfig,
     needsRun,
     hasOutput,
@@ -1008,6 +1004,7 @@ const CellToolbar = memo(
           onClick={onRun}
           connectionState={connection.state}
           status={status}
+          blocked={blocked}
           config={cellConfig}
           needsRun={needsRun}
         />
@@ -1017,6 +1014,7 @@ const CellToolbar = memo(
             ref={cellActionDropdownRef}
             cellId={cellId}
             status={status}
+            blocked={blocked}
             getEditorView={getEditorView}
             name={name}
             config={cellConfig}
@@ -1060,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);
@@ -1071,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
@@ -1129,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,
     }),
   });
 
@@ -1153,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;
@@ -1180,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(
@@ -1200,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}
@@ -1226,8 +1220,7 @@ const SetupCellComponent = ({
                 id={cellId}
                 code={cellData.code}
                 config={cellData.config}
-                status={cellRuntime.status}
-                serializedEditorState={cellData.serializedEditorState}
+                status={execution.status}
                 runCell={runCell}
                 setEditorView={setEditorView}
                 userConfig={userConfig}
@@ -1245,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 &&
@@ -1308,7 +1297,7 @@ const SetupCellComponent = ({
             <ConsoleOutput
               consoleOutputs={cellRuntime.consoleOutputs}
               stale={consoleOutputStale}
-              interrupted={cellRuntime.interrupted}
+              interrupted={interrupted}
               // Don't show name
               cellName={"_"}
               onRefactorWithAI={handleRefactorWithAI}
@@ -1329,7 +1318,6 @@ const SetupCellComponent = ({
               cellId={cellId}
               debuggerActive={cellRuntime.debuggerActive}
             />
-            <StagedAICellFooter cellId={cellId} />
           </div>
         </div>
       </CellActionsContextMenu>

package/src/components/editor/output/MarimoErrorOutput.tsx

@@ -207,7 +207,8 @@ export const MarimoErrorOutput = ({
       e.type === "ancestor-stopped",
   );
   const syntaxErrors = errors.filter(
-    (e): e is Extract<MarimoError, { type: "syntax" }> => e.type === "syntax",
+    (e): e is Extract<MarimoError, { type: "syntax" | "lazy-import" }> =>
+      e.type === "syntax" || e.type === "lazy-import",
   );
   const unknownErrors = errors.filter(
     (e): e is Extract<MarimoError, { type: "unknown" }> => e.type === "unknown",