@marimo-team/islands 0.23.15-dev33 → 0.23.15-dev5

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

@@ -14,7 +14,6 @@ import {
   type KeyboardEvent,
   memo,
   useCallback,
-  useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
@@ -55,8 +54,6 @@ import {
   cellNeedsRun,
   cellStatusClasses,
   isUninstantiated,
-  publishedCellClasses,
-  shouldHidePublishedCell,
 } from "../../core/cells/utils";
 import type { UserConfig } from "../../core/config/config-schema";
 import { isAppInteractionDisabled } from "../../core/websocket/connection-utils";
@@ -306,9 +303,7 @@ const CellComponent = (props: CellProps) => {
     );
   }
 
-  // Present mode is handled by EditableCellComponent with the edit chrome
-  // hidden, so that the output DOM is not remounted when toggling modes.
-  if (mode === "edit" || mode === "present") {
+  if (mode === "edit") {
     return (
       <EditableCellComponent
         {...props}
@@ -334,14 +329,14 @@ const ReadonlyCellComponent = forwardRef(
       published: true,
     });
 
+    const outputIsError = isErrorMime(cellRuntime.output?.mimetype);
+
     // Hide the output if it's an error or stopped.
-    const hidden = shouldHidePublishedCell({
-      errored: cellRuntime.errored,
-      interrupted: cellRuntime.interrupted,
-      stopped: cellRuntime.stopped,
-      output: cellRuntime.output,
-      showErrorTracebacks: false,
-    });
+    const hidden =
+      cellRuntime.errored ||
+      cellRuntime.interrupted ||
+      cellRuntime.stopped ||
+      outputIsError;
 
     if (hidden) {
       return null;
@@ -373,7 +368,6 @@ const EditableCellComponent = ({
   theme,
   showPlaceholder,
   cellId,
-  mode,
   canDelete,
   userConfig,
   isCollapsed,
@@ -421,28 +415,6 @@ const EditableCellComponent = ({
 
   const loading = outputIsLoading(cellRuntime.status);
 
-  const isPresenting = mode === "present";
-
-  // While presenting, the cell may be hidden (matching the read view), but it
-  // stays mounted (CSS-hidden) so its DOM survives mode toggles.
-  const presentHidden =
-    isPresenting &&
-    shouldHidePublishedCell({
-      errored: cellRuntime.errored,
-      interrupted: cellRuntime.interrupted,
-      stopped: cellRuntime.stopped,
-      output: cellRuntime.output,
-      showErrorTracebacks: userConfig.runtime.show_tracebacks ?? false,
-    });
-
-  // CodeMirror cannot measure itself while the tray is display:none, so
-  // re-measure when returning to edit mode.
-  useEffect(() => {
-    if (!isPresenting) {
-      editorView.current?.requestMeasure();
-    }
-  }, [isPresenting, editorView]);
-
   // console output is cleared immediately on run, so check for queued instead
   // of loading to determine staleness
   const consoleOutputStale =
@@ -482,12 +454,7 @@ const EditableCellComponent = ({
   });
   const canCollapse = canCollapseOutline(cellRuntime.outline);
   const hasOutput = !isOutputEmpty(cellRuntime.output);
-  // While presenting, pending edits do not dim the output as stale,
-  // matching the read view.
-  const isStaleCell = outputIsStale(
-    cellRuntime,
-    cellData.edited && !isPresenting,
-  );
+  const isStaleCell = outputIsStale(cellRuntime, cellData.edited);
   const hasConsoleOutput = cellRuntime.consoleOutputs.length > 0;
   const cellOutput = userConfig.display.cell_output;
 
@@ -520,8 +487,7 @@ const EditableCellComponent = ({
     },
   });
 
-  const emptyMarkdownPlaceholder = !isPresenting &&
-    isMarkdownCodeHidden &&
+  const emptyMarkdownPlaceholder = isMarkdownCodeHidden &&
     isEmptyMarkdownContent &&
     !needsRun && (
       <div
@@ -543,31 +509,25 @@ const EditableCellComponent = ({
     );
 
   const outputArea = hasOutput && !isEmptyMarkdownContent && (
-    <div
-      className="relative"
-      onDoubleClick={isPresenting ? undefined : showHiddenCodeIfMarkdown}
-    >
-      {!isPresenting && (
-        <div className="absolute top-5 -left-7 z-20 print:hidden">
-          <CollapseToggle
-            isCollapsed={isCollapsed}
-            onClick={() => {
-              if (isCollapsed) {
-                actions.expandCell({ cellId });
-              } else {
-                actions.collapseCell({ cellId });
-              }
-            }}
-            canCollapse={canCollapse}
-          />
-        </div>
-      )}
+    <div className="relative" onDoubleClick={showHiddenCodeIfMarkdown}>
+      <div className="absolute top-5 -left-7 z-20 print:hidden">
+        <CollapseToggle
+          isCollapsed={isCollapsed}
+          onClick={() => {
+            if (isCollapsed) {
+              actions.expandCell({ cellId });
+            } else {
+              actions.collapseCell({ cellId });
+            }
+          }}
+          canCollapse={canCollapse}
+        />
+      </div>
       <OutputArea
-        // `allowExpand` must stay constant across modes: flipping it swaps the
-        // output's container component and would remount the output DOM.
+        // Only allow expanding in edit mode
         allowExpand={true}
-        // Force expand when markdown is hidden or when presenting
-        forceExpand={isMarkdownCodeHidden || isPresenting}
+        // Force expand when markdown is hidden
+        forceExpand={isMarkdownCodeHidden}
         className={CSSClasses.outputArea}
         cellId={cellId}
         output={cellRuntime.output}
@@ -577,32 +537,19 @@ const EditableCellComponent = ({
     </div>
   );
 
-  const className = clsx(
-    "marimo-cell",
-    "hover-actions-parent",
-    isPresenting
-      ? // Match the published styling of the read view
-        publishedCellClasses({
-          errored: cellRuntime.errored,
-          stopped: cellRuntime.stopped,
-        })
-      : {
-          "z-10": true,
-          interactive: true,
-          ...cellStatusClasses({
-            needsRun,
-            errored: cellRuntime.errored,
-            stopped: cellRuntime.stopped,
-            disabled: cellData.config.disabled,
-            status: cellRuntime.status,
-          }),
-          borderless:
-            isMarkdownCodeHidden &&
-            hasOutput &&
-            !navigationProps["data-selected"],
-          "pending-cut": isPendingCut,
-        },
-  );
+  const className = clsx("marimo-cell", "hover-actions-parent z-10", {
+    interactive: true,
+    ...cellStatusClasses({
+      needsRun,
+      errored: cellRuntime.errored,
+      stopped: cellRuntime.stopped,
+      disabled: cellData.config.disabled,
+      status: cellRuntime.status,
+    }),
+    borderless:
+      isMarkdownCodeHidden && hasOutput && !navigationProps["data-selected"],
+    "pending-cut": isPendingCut,
+  });
 
   const handleRefactorWithAI: OnRefactorWithAI = useEvent(
     (opts: { prompt: string; triggerImmediately: boolean }) => {
@@ -631,11 +578,7 @@ const EditableCellComponent = ({
 
   return (
     <TooltipProvider>
-      <CellActionsContextMenu
-        cellId={cellId}
-        getEditorView={getEditorView}
-        disabled={isPresenting}
-      >
+      <CellActionsContextMenu cellId={cellId} getEditorView={getEditorView}>
         <SortableCell
           tabIndex={-1}
           ref={cellRef}
@@ -644,34 +587,23 @@ const EditableCellComponent = ({
           onKeyDown={resumeCompletionHandler}
           cellId={cellId}
           canMoveX={canMoveX}
-          disabled={isPresenting}
-          hidden={presentHidden}
           title={renderCellTitle()}
         >
           <div
             tabIndex={-1}
-            {...(isPresenting ? undefined : navigationProps)}
+            {...navigationProps}
             className={cn(
               className,
-              !isPresenting && navigationProps.className,
-              !isPresenting &&
-                "focus:ring-1 focus:ring-(--slate-8) focus:ring-offset-2",
+              navigationProps.className,
+              "focus:ring-1 focus:ring-(--slate-8) focus:ring-offset-2",
             )}
             ref={cellContainerRef}
             {...cellDomProps(cellId, cellData.name)}
           >
-            {!isPresenting && (
-              <CellLeftSideActions cellId={cellId} actions={actions} />
-            )}
+            <CellLeftSideActions cellId={cellId} actions={actions} />
             {cellOutput === "above" && (outputArea || emptyMarkdownPlaceholder)}
-            {/* The tray is hidden-but-mounted while presenting so CodeMirror
-                state survives mode toggles. Hide via the `hidden` attribute:
-                preflight's `[hidden] { display: none !important }` beats
-                `.tray { display: flex }`, which a display class would not. */}
             <div
-              data-testid="cell-tray"
-              className="tray"
-              hidden={isPresenting}
+              className={cn("tray")}
               data-has-output-above={hasOutputAbove}
               data-hidden={isMarkdownCodeHidden}
             >
@@ -711,25 +643,21 @@ const EditableCellComponent = ({
                 setLanguageAdapter={setLanguageAdapter}
                 outputArea={cellOutput}
               />
-              {/* Unmounted while presenting: the status timer re-renders every
-                  frame for running cells. */}
-              {!isPresenting && (
-                <CellRightSideActions
-                  className={cn(
-                    isMarkdownCodeHidden && cellOutput === "below" && "top-14",
-                  )}
-                  edited={cellData.edited}
-                  status={cellRuntime.status}
-                  isCellStatusInline={isCellStatusInline}
-                  uninstantiated={uninstantiated}
-                  disabled={cellData.config.disabled}
-                  runElapsedTimeMs={cellRuntime.runElapsedTimeMs}
-                  runStartTimestamp={cellRuntime.runStartTimestamp}
-                  lastRunStartTimestamp={cellRuntime.lastRunStartTimestamp}
-                  staleInputs={cellRuntime.staleInputs}
-                  interrupted={cellRuntime.interrupted}
-                />
-              )}
+              <CellRightSideActions
+                className={cn(
+                  isMarkdownCodeHidden && cellOutput === "below" && "top-14",
+                )}
+                edited={cellData.edited}
+                status={cellRuntime.status}
+                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
@@ -747,14 +675,12 @@ const EditableCellComponent = ({
                 )}
               </div>
             </div>
-            {!isPresenting && (
-              <SqlValidationErrorBanner
-                cellId={cellId}
-                hide={cellRuntime.errored && !isStaleCell}
-              />
-            )}
+            <SqlValidationErrorBanner
+              cellId={cellId}
+              hide={cellRuntime.errored && !isStaleCell}
+            />
             {cellOutput === "below" && (outputArea || emptyMarkdownPlaceholder)}
-            {!isPresenting && cellRuntime.serialization && (
+            {cellRuntime.serialization && (
               <div className="py-1 px-2 flex items-center justify-end gap-2 last:rounded-b">
                 {isToplevel && (
                   <a
@@ -812,36 +738,34 @@ const EditableCellComponent = ({
                 </Tooltip>
               </div>
             )}
-            {!isPresenting && (
-              <ConsoleOutput
-                consoleOutputs={cellRuntime.consoleOutputs}
-                stale={consoleOutputStale}
-                interrupted={cellRuntime.interrupted}
-                // Empty name if serialization triggered
-                cellName={cellRuntime.serialization ? "_" : cellData.name}
-                onRefactorWithAI={handleRefactorWithAI}
-                onClear={() => {
-                  actions.clearCellConsoleOutput({ cellId });
-                  // The debugger "Clear" (trashcan) also drops this cell's
-                  // breakpoints; no-op when none are set.
-                  clearCellBreakpoints(cellId);
-                }}
-                onSubmitDebugger={(text, index) => {
-                  actions.setStdinResponse({
-                    cellId,
-                    response: text,
-                    outputIndex: index,
-                  });
-                  sendStdin({ text });
-                }}
-                cellId={cellId}
-                debuggerActive={cellRuntime.debuggerActive}
-              />
-            )}
+            <ConsoleOutput
+              consoleOutputs={cellRuntime.consoleOutputs}
+              stale={consoleOutputStale}
+              interrupted={cellRuntime.interrupted}
+              // Empty name if serialization triggered
+              cellName={cellRuntime.serialization ? "_" : cellData.name}
+              onRefactorWithAI={handleRefactorWithAI}
+              onClear={() => {
+                actions.clearCellConsoleOutput({ cellId });
+                // The debugger "Clear" (trashcan) also drops this cell's
+                // breakpoints; no-op when none are set.
+                clearCellBreakpoints(cellId);
+              }}
+              onSubmitDebugger={(text, index) => {
+                actions.setStdinResponse({
+                  cellId,
+                  response: text,
+                  outputIndex: index,
+                });
+                sendStdin({ text });
+              }}
+              cellId={cellId}
+              debuggerActive={cellRuntime.debuggerActive}
+            />
             <PendingDeleteConfirmation cellId={cellId} />
           </div>
-          {!isPresenting && <StagedAICellFooter cellId={cellId} />}
-          {isCollapsed && !isPresenting && (
+          <StagedAICellFooter cellId={cellId} />
+          {isCollapsed && (
             <CollapsedCellBanner
               onClick={() => actions.expandCell({ cellId })}
               count={collapseCount}
@@ -1046,7 +970,6 @@ const SetupCellComponent = ({
   theme,
   showPlaceholder,
   cellId,
-  mode,
   canDelete,
   userConfig,
   canMoveX,
@@ -1157,26 +1080,10 @@ const SetupCellComponent = ({
     return undefined;
   };
 
-  const isPresenting = mode === "present";
-
-  // CodeMirror cannot measure itself while its hidden ancestor is display:none,
-  // so re-measure when returning to edit mode. (Mirrors EditableCellComponent.)
-  useEffect(() => {
-    if (!isPresenting) {
-      editorView.current?.requestMeasure();
-    }
-  }, [isPresenting, editorView]);
-
   return (
     <TooltipProvider>
-      <CellActionsContextMenu
-        cellId={cellId}
-        getEditorView={getEditorView}
-        disabled={isPresenting}
-      >
-        {/* The setup cell has no visible output, so it is hidden (but stays
-            mounted) while presenting. */}
-        <div hidden={isPresenting}>
+      <CellActionsContextMenu cellId={cellId} getEditorView={getEditorView}>
+        <div>
           <div
             data-status={cellRuntime.status}
             ref={cellRef}
@@ -1238,22 +1145,18 @@ const SetupCellComponent = ({
                 setLanguageAdapter={Functions.NOOP}
                 showLanguageToggles={false}
               />
-              {/* Unmounted while presenting: the status timer re-renders every
-                  frame for running cells. */}
-              {!isPresenting && (
-                <CellRightSideActions
-                  edited={cellData.edited}
-                  status={cellRuntime.status}
-                  isCellStatusInline={false}
-                  uninstantiated={uninstantiated}
-                  disabled={cellData.config.disabled}
-                  runElapsedTimeMs={cellRuntime.runElapsedTimeMs}
-                  runStartTimestamp={cellRuntime.runStartTimestamp}
-                  lastRunStartTimestamp={cellRuntime.lastRunStartTimestamp}
-                  staleInputs={cellRuntime.staleInputs}
-                  interrupted={cellRuntime.interrupted}
-                />
-              )}
+              <CellRightSideActions
+                edited={cellData.edited}
+                status={cellRuntime.status}
+                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

package/src/components/editor/renderers/cell-array.tsx

@@ -89,32 +89,22 @@ const CellArrayInternal: React.FC<CellArrayProps> = ({
   const { theme } = useTheme();
   const { toggleSidebarPanel } = useChromeActions();
 
-  const isPresenting = mode === "present";
-
   // Side-effects
   useFocusFirstEditor();
 
   // HOTKEYS
-  // Cell-editing hotkeys are disabled while presenting
-  const whilePresenting = { disabled: isPresenting };
-  useHotkey("global.focusTop", actions.focusTopCell, whilePresenting);
-  useHotkey("global.focusBottom", actions.focusBottomCell, whilePresenting);
+  useHotkey("global.focusTop", actions.focusTopCell);
+  useHotkey("global.focusBottom", actions.focusBottomCell);
   useHotkey("global.toggleSidebar", toggleSidebarPanel);
-  useHotkey("global.foldCode", actions.foldAll, whilePresenting);
-  useHotkey("global.unfoldCode", actions.unfoldAll, whilePresenting);
-  useHotkey(
-    "global.formatAll",
-    () => {
-      formatAll();
-    },
-    whilePresenting,
-  );
+  useHotkey("global.foldCode", actions.foldAll);
+  useHotkey("global.unfoldCode", actions.unfoldAll);
+  useHotkey("global.formatAll", () => {
+    formatAll();
+  });
   // Catch all to avoid native OS behavior
-  // Otherwise a user might try to hide a cell and accidentally hide the OS
-  // window. While presenting, no cell editing is possible, so let the
-  // keystrokes reach the browser/OS.
-  useHotkey("cell.hideCode", Functions.NOOP, whilePresenting);
-  useHotkey("cell.format", Functions.NOOP, whilePresenting);
+  // Otherwise a user might try to hide a cell and accidentally hide the OS window
+  useHotkey("cell.hideCode", Functions.NOOP);
+  useHotkey("cell.format", Functions.NOOP);
 
   const cellIds = useCellIds();
   const scrollKey = useScrollKey();
@@ -131,11 +121,10 @@ const CellArrayInternal: React.FC<CellArrayProps> = ({
   return (
     <VerticalLayoutWrapper
       // 'pb' allows the user to put the cell in the middle of the screen
-      className={cn(!isPresenting && "pb-[40vh]")}
+      className="pb-[40vh]"
       invisible={false}
       appConfig={appConfig}
-      // 'pr' makes room for the floating actions
-      innerClassName={cn(!isPresenting && "pr-4")}
+      innerClassName="pr-4" // For the floating actions
     >
       <PackageAlert />
       <StartupLogsAlert />
@@ -197,7 +186,6 @@ const CellColumn: React.FC<{
 
   const hasOnlyOneCell = cellIds.hasOnlyOneId();
   const hasSetupCell = cellIds.inOrderIds.includes(SETUP_CELL_ID);
-  const isPresenting = mode === "present";
 
   return (
     <Column
@@ -207,9 +195,8 @@ const CellColumn: React.FC<{
       canMoveRight={index < columnsLength - 1}
       width={appConfig.width}
       canDelete={columnsLength > 1}
-      presenting={isPresenting}
       footer={
-        hideControls || isPresenting ? null : (
+        hideControls ? null : (
           <AddCellButtons
             columnId={columnId}
             className={cn(

package/src/components/editor/renderers/cells-renderer.tsx

@@ -29,14 +29,8 @@ export const CellsRenderer: React.FC<PropsWithChildren<Props>> = memo(
     const { selectedLayout, layoutData } = useLayoutState();
     const kioskMode = useAtomValue(kioskModeAtom);
 
-    // Render children (the editable notebook) in edit mode, and in present
-    // mode with the vertical layout: keeping the same tree across the
-    // edit<->present toggle preserves cell output DOM (iframes, widgets).
-    // Grid/slides layouts and kiosk mode swap to their layout renderer.
-    if (
-      !kioskMode &&
-      (mode === "edit" || (mode === "present" && selectedLayout === "vertical"))
-    ) {
+    // Just render children if we are in edit mode
+    if (mode === "edit" && !kioskMode) {
       return children;
     }
 

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

@@ -42,23 +42,6 @@ describe("SlidesLayoutPlugin validator", () => {
       }).success,
     ).toBe(false);
   });
-
-  it("accepts each valid deck vertical alignment", () => {
-    for (const verticalAlign of ["top", "center", "bottom"]) {
-      expect(
-        SlidesLayoutPlugin.validator.safeParse({ deck: { verticalAlign } })
-          .success,
-      ).toBe(true);
-    }
-  });
-
-  it("rejects an unknown deck vertical alignment", () => {
-    expect(
-      SlidesLayoutPlugin.validator.safeParse({
-        deck: { verticalAlign: "middle" },
-      }).success,
-    ).toBe(false);
-  });
 });
 
 describe("SlidesLayoutPlugin deserializeLayout", () => {
@@ -285,18 +268,6 @@ const BACKWARDS_COMPAT_SNAPSHOTS: BackwardsCompatCase[] = [
       ],
     },
   },
-  {
-    // `verticalAlign` was added to DeckConfig.
-    label: "deck.verticalAlign round-trips through validate + (de)serialize",
-    input: {
-      cells: [{}],
-      deck: { transition: "fade", verticalAlign: "top" },
-    },
-    expected: {
-      deck: { transition: "fade", verticalAlign: "top" },
-      cellIds: ["a"],
-    },
-  },
 ];
 
 describe("SlidesLayoutPlugin backwards compatibility", () => {

package/src/components/editor/renderers/slides-layout/types.ts

@@ -23,12 +23,8 @@ const DeckTransitionSchema = z.enum([
 ]);
 export type DeckTransition = z.infer<typeof DeckTransitionSchema>;
 
-const DeckVerticalAlignSchema = z.enum(["top", "center", "bottom"]);
-export type DeckVerticalAlign = z.infer<typeof DeckVerticalAlignSchema>;
-
 const DeckConfigSchema = z.looseObject({
   transition: DeckTransitionSchema.optional(),
-  verticalAlign: DeckVerticalAlignSchema.optional(),
 });
 export type DeckConfig = z.infer<typeof DeckConfigSchema>;
 

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

@@ -33,14 +33,11 @@ import { getReadonlyCodeDisplay } from "@/core/cells/readonly-code-display";
 import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
 import { useResolvedMarimoConfig } from "@/core/config/config";
 import { CSSClasses, KnownQueryParams } from "@/core/constants";
-import type { OutputMessage } from "@/core/kernel/messages";
+import type { MarimoError, OutputMessage } from "@/core/kernel/messages";
 import { kernelStateAtom } from "@/core/kernel/state";
 import { useNotebookCodeAvailable } from "@/core/meta/code-visibility";
 import { showCodeInRunModeAtom } from "@/core/meta/state";
-import {
-  publishedCellClasses,
-  shouldHidePublishedCell,
-} from "@/core/cells/utils";
+import { isErrorMime } from "@/core/mime";
 import { type AppMode, kioskModeAtom } from "@/core/mode";
 import { useRequestClient } from "@/core/network/requests";
 import type { CellConfig } from "@/core/network/types";
@@ -365,13 +362,12 @@ const VerticalCell = memo(
     const className = cn(
       "marimo-cell",
       "hover-actions-parent empty:invisible",
-      published
-        ? publishedCellClasses({ errored, stopped })
-        : {
-            "has-error": errored,
-            stopped: stopped,
-            borderless: isPureMarkdown,
-          },
+      {
+        published: published,
+        "has-error": errored,
+        stopped: stopped,
+        borderless: isPureMarkdown && !published,
+      },
     );
 
     // Read mode and show code
@@ -423,15 +419,19 @@ const VerticalCell = memo(
       );
     }
 
+    const outputIsError = isErrorMime(output?.mimetype);
     // When show_tracebacks is enabled, show error outputs inline
     // instead of hiding them
-    const hidden = shouldHidePublishedCell({
-      errored,
-      interrupted,
-      stopped,
-      output,
-      showErrorTracebacks,
-    });
+    const hasTraceback =
+      showErrorTracebacks &&
+      outputIsError &&
+      Array.isArray(output?.data) &&
+      output.data.some(
+        (e: MarimoError) =>
+          e.type === "exception" && "traceback" in e && e.traceback,
+      );
+    const hidden =
+      (errored || interrupted || stopped || outputIsError) && !hasTraceback;
     if (hidden) {
       return null;
     }