@marimo-team/islands 0.23.9-dev9 → 0.23.10-dev0

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

@@ -26,7 +26,7 @@ import {
   connectedDocAtom,
   realTimeCollaboration,
 } from "@/core/codemirror/rtc/extension";
-import { autoInstantiateAtom, isAiEnabled } from "@/core/config/config";
+import { autoInstantiateAtom, isAiFeatureEnabled } from "@/core/config/config";
 import type { UserConfig } from "@/core/config/config-schema";
 import { OverridingHotkeyProvider } from "@/core/hotkeys/hotkeys";
 import { connectionAtom } from "@/core/network/connection";
@@ -65,6 +65,11 @@ export interface CellEditorProps
   hasOutput?: boolean;
   languageAdapter: LanguageAdapterType | undefined;
   showLanguageToggles?: boolean;
+  /**
+   * Override for the inline "Edit with AI" tooltip. Defaults to the user's
+   * `ai.inline_tooltip` config. Set to `false` to force-disable it.
+   */
+  inlineAiTooltip?: boolean;
   setLanguageAdapter: React.Dispatch<
     React.SetStateAction<LanguageAdapterType | undefined>
   >;
@@ -73,6 +78,12 @@ export interface CellEditorProps
   editorViewParentRef?: React.RefObject<HTMLDivElement | null>;
   showHiddenCode: (opts?: { focus?: boolean }) => void;
   outputArea?: "above" | "below";
+  /**
+   * CSS selector for the element that editor tooltips (completions, hover,
+   * signature help) are appended to. Useful for fullscreen/dialog containers;
+   * defaults to `#App`.
+   */
+  tooltipParentSelector?: string;
 }
 
 const CellEditorInternal = ({
@@ -94,7 +105,9 @@ const CellEditorInternal = ({
   languageAdapter,
   setLanguageAdapter,
   showLanguageToggles = true,
+  inlineAiTooltip,
   outputArea,
+  tooltipParentSelector,
 }: CellEditorProps) => {
   const [aiCompletionCell, setAiCompletionCell] = useAtom(aiCompletionCellAtom);
   const deleteCell = useDeleteCellCallback();
@@ -173,13 +186,13 @@ const CellEditorInternal = ({
     });
   });
 
-  const aiEnabled = isAiEnabled(userConfig);
+  const aiFeaturesEnabled = isAiFeatureEnabled(userConfig);
 
   const extensions = useMemo(() => {
     const extensions = setupCodeMirror({
       cellId,
       showPlaceholder,
-      enableAI: aiEnabled,
+      enableAI: aiFeaturesEnabled,
       cellActions: {
         ...cellActions,
         afterToggleMarkdown,
@@ -201,6 +214,9 @@ const CellEditorInternal = ({
         splitCell,
         toggleHideCode,
         aiCellCompletion: () => {
+          if (!aiFeaturesEnabled) {
+            return false;
+          }
           let closed = false;
           setAiCompletionCell((v) => {
             // Toggle close
@@ -221,7 +237,9 @@ const CellEditorInternal = ({
       hotkeys: new OverridingHotkeyProvider(userConfig.keymap.overrides ?? {}),
       diagnosticsConfig: userConfig.diagnostics,
       displayConfig: userConfig.display,
-      inlineAiTooltip: userConfig.ai?.inline_tooltip ?? false,
+      inlineAiTooltip:
+        inlineAiTooltip ?? userConfig.ai?.inline_tooltip ?? false,
+      tooltipParentSelector,
     });
 
     extensions.push(
@@ -271,7 +289,9 @@ const CellEditorInternal = ({
     userConfig.display,
     userConfig.diagnostics,
     userConfig.ai?.inline_tooltip,
-    aiEnabled,
+    inlineAiTooltip,
+    tooltipParentSelector,
+    aiFeaturesEnabled,
     theme,
     showPlaceholder,
     cellActions,

package/src/components/editor/chrome/types.ts

@@ -201,16 +201,23 @@ export const PANEL_MAP = new Map<PanelType, PanelDescriptor>(
 );
 
 /**
- * Check if a panel should be hidden based on its `hidden` property
- * and `requiredCapability`.
+ * Check if a panel should be hidden based on its descriptor and runtime state.
  */
-export function isPanelHidden(
-  panel: PanelDescriptor,
-  capabilities: Capabilities,
-): boolean {
+export function isPanelHidden({
+  panel,
+  capabilities,
+  aiEnabled,
+}: {
+  panel: PanelDescriptor;
+  capabilities: Capabilities;
+  aiEnabled: boolean;
+}): boolean {
   if (panel.hidden) {
     return true;
   }
+  if (panel.type === "ai" && !aiEnabled) {
+    return true;
+  }
   if (panel.requiredCapability && !capabilities[panel.requiredCapability]) {
     return true;
   }

package/src/components/editor/chrome/wrapper/app-chrome.tsx

@@ -27,6 +27,7 @@ import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { LazyActivity } from "@/components/utils/lazy-mount";
 import { cellErrorCount } from "@/core/cells/cells";
 import { capabilitiesAtom } from "@/core/config/capabilities";
+import { aiEnabledAtom } from "@/core/config/config";
 import { getFeatureFlag } from "@/core/config/feature-flag";
 import { cn } from "@/utils/cn";
 import { ErrorBoundary } from "../../boundary/ErrorBoundary";
@@ -93,18 +94,19 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
   const [panelLayout, setPanelLayout] = useAtom(panelLayoutAtom);
   // Subscribe to capabilities to re-render when they change (e.g., terminal capability)
   const capabilities = useAtomValue(capabilitiesAtom);
+  const aiEnabled = useAtomValue(aiEnabledAtom);
 
   // Convert current developer panel items to PanelDescriptors
   // Filter out hidden panels (e.g., terminal when capability is not available)
   const devPanelItems = useMemo(() => {
     return panelLayout.developerPanel.flatMap((id) => {
       const panel = PANEL_MAP.get(id);
-      if (!panel || isPanelHidden(panel, capabilities)) {
+      if (!panel || isPanelHidden({ panel, capabilities, aiEnabled })) {
         return [];
       }
       return [panel];
     });
-  }, [panelLayout.developerPanel, capabilities]);
+  }, [panelLayout.developerPanel, capabilities, aiEnabled]);
 
   const handleSetDevPanelItems = (items: PanelDescriptor[]) => {
     setPanelLayout((prev) => ({
@@ -141,7 +143,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
   const availableDevPanels = useMemo(() => {
     const sidebarIds = new Set(panelLayout.sidebar);
     return PANELS.filter((p) => {
-      if (isPanelHidden(p, capabilities)) {
+      if (isPanelHidden({ panel: p, capabilities, aiEnabled })) {
         return false;
       }
       // Exclude panels that are in the sidebar
@@ -150,7 +152,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
       }
       return true;
     });
-  }, [panelLayout.sidebar, capabilities]);
+  }, [panelLayout.sidebar, capabilities, aiEnabled]);
 
   const emitResizeEvent = useEvent(() => {
     // HACK: Unfortunately, we have to do this twice to make sure the

package/src/components/editor/chrome/wrapper/footer-items/ai-status.tsx

@@ -4,18 +4,27 @@ import { useAtomValue } from "jotai";
 import { SparklesIcon } from "lucide-react";
 import React from "react";
 import { useOpenSettingsToTab } from "@/components/app-config/state";
-import { aiAtom, aiEnabledAtom } from "@/core/config/config";
+import {
+  aiAtom,
+  aiEnabledAtom,
+  aiModelConfiguredAtom,
+} from "@/core/config/config";
 import { DEFAULT_AI_MODEL } from "@/core/config/config-schema";
 import { FooterItem } from "../footer-item";
 
 export const AIStatusIcon: React.FC = () => {
   const ai = useAtomValue(aiAtom);
   const aiEnabled = useAtomValue(aiEnabledAtom);
+  const aiModelConfigured = useAtomValue(aiModelConfiguredAtom);
   const chatModel = ai?.models?.chat_model || DEFAULT_AI_MODEL;
   const editModel = ai?.models?.edit_model || chatModel;
   const { handleClick } = useOpenSettingsToTab();
 
   if (!aiEnabled) {
+    return null;
+  }
+
+  if (!aiModelConfigured) {
     return (
       <FooterItem
         tooltip="Assist is disabled"

package/src/components/editor/chrome/wrapper/sidebar.tsx

@@ -12,6 +12,7 @@ import {
   notebookQueuedOrRunningCountAtom,
 } from "@/core/cells/cells";
 import { capabilitiesAtom } from "@/core/config/capabilities";
+import { aiEnabledAtom } from "@/core/config/config";
 import { cn } from "@/utils/cn";
 import { FeedbackButton } from "../components/feedback-button";
 import { panelLayoutAtom, useChromeActions, useChromeState } from "../state";
@@ -30,6 +31,7 @@ export const Sidebar: React.FC = () => {
   const [panelLayout, setPanelLayout] = useAtom(panelLayoutAtom);
   // Subscribe to capabilities to re-render when they change
   const capabilities = useAtomValue(capabilitiesAtom);
+  const aiEnabled = useAtomValue(aiEnabledAtom);
 
   const renderIcon = ({ Icon }: PanelDescriptor, className?: string) => {
     return <Icon className={cn("h-5 w-5", className)} />;
@@ -40,7 +42,7 @@ export const Sidebar: React.FC = () => {
   const availableSidebarPanels = useMemo(() => {
     const devPanelIds = new Set(panelLayout.developerPanel);
     return PANELS.filter((p) => {
-      if (isPanelHidden(p, capabilities)) {
+      if (isPanelHidden({ panel: p, capabilities, aiEnabled })) {
         return false;
       }
       // Exclude panels that are in the developer panel
@@ -49,19 +51,19 @@ export const Sidebar: React.FC = () => {
       }
       return true;
     });
-  }, [panelLayout.developerPanel, capabilities]);
+  }, [panelLayout.developerPanel, capabilities, aiEnabled]);
 
   // Convert current sidebar items to PanelDescriptors
   // Filter out hidden panels (e.g., when capability is not available)
   const sidebarItems = useMemo(() => {
     return panelLayout.sidebar.flatMap((id) => {
       const panel = PANEL_MAP.get(id);
-      if (!panel || isPanelHidden(panel, capabilities)) {
+      if (!panel || isPanelHidden({ panel, capabilities, aiEnabled })) {
         return [];
       }
       return [panel];
     });
-  }, [panelLayout.sidebar, capabilities]);
+  }, [panelLayout.sidebar, capabilities, aiEnabled]);
 
   const handleSetSidebarItems = (items: PanelDescriptor[]) => {
     setPanelLayout((prev) => ({
@@ -218,7 +220,7 @@ const SidebarItem: React.FC<
   // Render as div when not clickable (e.g., inside ReorderableList)
   // This avoids nested interactive elements which break react-aria's drag behavior
   const content = onClick ? (
-    <button className={itemClassName} onClick={onClick}>
+    <button type="button" className={itemClassName} onClick={onClick}>
       {children}
     </button>
   ) : (

package/src/components/editor/errors/auto-fix.tsx

@@ -13,7 +13,7 @@ import { Tooltip } from "@/components/ui/tooltip";
 import { aiCompletionCellAtom } from "@/core/ai/state";
 import { notebookAtom, useCellActions } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
-import { aiEnabledAtom } from "@/core/config/config";
+import { aiFeaturesEnabledAtom } from "@/core/config/config";
 import { getAutoFixes } from "@/core/errors/errors";
 import type { MarimoError } from "@/core/kernel/messages";
 import { cn } from "@/utils/cn";
@@ -30,9 +30,9 @@ export const AutoFixButton = ({
 }) => {
   const store = useStore();
   const { createNewCell } = useCellActions();
-  const aiEnabled = useAtomValue(aiEnabledAtom);
+  const aiFeaturesEnabled = useAtomValue(aiFeaturesEnabledAtom);
   const autoFixes = errors.flatMap((error) =>
-    getAutoFixes(error, { aiEnabled }),
+    getAutoFixes(error, { aiEnabled: aiFeaturesEnabled }),
   );
   const setAiCompletionCell = useSetAtom(aiCompletionCellAtom);
 

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

@@ -90,19 +90,4 @@ describe("StatusOverlay disconnect indicator", () => {
       expect(onReconnect).not.toHaveBeenCalled();
     },
   );
-
-  it("does not render the disconnect icon when another tab has taken over", () => {
-    const onReconnect = vi.fn();
-    const { queryByTestId } = renderOverlay(
-      {
-        state: WebSocketState.CLOSED,
-        code: WebSocketClosedReason.ALREADY_RUNNING,
-        reason: "another browser tab is already connected to the kernel",
-        canTakeover: true,
-      },
-      onReconnect,
-    );
-
-    expect(queryByTestId("disconnected-indicator")).toBeNull();
-  });
 });

package/src/components/editor/header/app-header.tsx

@@ -18,10 +18,7 @@ export const AppHeader: React.FC<PropsWithChildren<Props>> = ({
     <div className={className}>
       {children}
       {connection.state === WebSocketState.CLOSED && (
-        <Disconnected
-          reason={connection.reason}
-          canTakeover={connection.canTakeover}
-        />
+        <Disconnected reason={connection.reason} />
       )}
     </div>
   );

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

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { useAtomValue } from "jotai";
-import { HourglassIcon, LockIcon, UnlinkIcon } from "lucide-react";
+import { HourglassIcon, UnlinkIcon } from "lucide-react";
 import React from "react";
 import { Tooltip } from "@/components/ui/tooltip";
 import { notebookScrollToRunning } from "@/core/cells/actions";
@@ -24,13 +24,13 @@ export const StatusOverlay: React.FC<{
   const isOpen = connection.state === WebSocketState.OPEN;
   // Only KERNEL_DISCONNECTED is recoverable by a retry. Other terminal
   // reasons (MALFORMED_QUERY, KERNEL_STARTUP_ERROR) would deterministically
-  // fail the same way; ALREADY_RUNNING is handled by `LockedIcon` below.
+  // fail the same way.
   const canReconnect =
     isClosed && connection.code === WebSocketClosedReason.KERNEL_DISCONNECTED;
 
   return (
     <>
-      {isClosed && !connection.canTakeover && <NoiseBackground />}
+      {isClosed && <NoiseBackground />}
       <div
         className={cn(
           "z-50 top-4 left-4",
@@ -38,12 +38,11 @@ export const StatusOverlay: React.FC<{
         )}
       >
         {isOpen && isRunning && <RunningIcon />}
-        {isClosed && !connection.canTakeover && (
+        {isClosed && (
           <DisconnectedIcon
             onReconnect={canReconnect ? onReconnect : undefined}
           />
         )}
-        {isClosed && connection.canTakeover && <LockedIcon />}
       </div>
     </>
   );
@@ -79,14 +78,6 @@ const DisconnectedIcon: React.FC<{ onReconnect?: () => void }> = ({
   );
 };
 
-const LockedIcon = () => (
-  <Tooltip content="Notebook locked">
-    <div className={topLeftStatus}>
-      <LockIcon className="w-[25px] h-[25px] text-(--blue-11)" />
-    </div>
-  </Tooltip>
-);
-
 const RunningIcon = () => {
   const scratchpadOnly = useAtomValue(onlyScratchpadIsRunningAtom);
   const tooltip = scratchpadOnly

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

@@ -1207,6 +1207,21 @@ describe("useCellNavigationProps", () => {
   });
 
   describe("AI completion functionality", () => {
+    beforeEach(() => {
+      const config = defaultUserConfig();
+      store.set(userConfigAtom, {
+        ...config,
+        ai: {
+          ...config.ai,
+          models: {
+            displayed_models: [],
+            custom_models: [],
+            edit_model: "openai/gpt-4o",
+          },
+        },
+      });
+    });
+
     it("should toggle AI completion when shortcut is pressed", () => {
       const { result } = renderWithProvider(() =>
         useCellNavigationProps(cellId1, optionsWithMockEditor),

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

@@ -24,6 +24,7 @@ import { usePendingDeleteService } from "@/core/cells/pending-delete-service";
 import { scrollCellIntoView } from "@/core/cells/scrollCellIntoView";
 import {
   hotkeysAtom,
+  isAiFeatureEnabled,
   keymapPresetAtom,
   userConfigAtom,
 } from "@/core/config/config";
@@ -195,6 +196,7 @@ export function useCellNavigationProps(
   const pendingDeleteService = usePendingDeleteService();
   const deleteCells = useDeleteManyCellsCallback();
   const userConfig = useAtomValue(userConfigAtom);
+  const aiFeaturesEnabled = isAiFeatureEnabled(userConfig);
 
   // Wrap selection actions to clear pending cells on any selection change
   const selectionActions = {
@@ -496,6 +498,9 @@ export function useCellNavigationProps(
           return true;
         }),
         "cell.aiCompletion": (cellId) => {
+          if (!aiFeaturesEnabled) {
+            return false;
+          }
           let closed = false;
           setAiCompletionCell((v) => {
             // Toggle close

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

@@ -1,12 +1,16 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { useAtomValue } from "jotai";
 import {
+  ChevronDown,
+  ChevronRight,
+  InfoIcon,
   NotebookPenIcon,
   PackageIcon,
   SquareArrowOutUpRightIcon,
   TerminalIcon,
 } from "lucide-react";
-import { Fragment, type JSX } from "react";
+import { Fragment, type JSX, useState } from "react";
 import {
   Accordion,
   AccordionContent,
@@ -16,7 +20,9 @@ import {
 import { Button } from "@/components/ui/button";
 import { Kbd } from "@/components/ui/kbd";
 import { ExternalLink } from "@/components/ui/links";
+import { Tooltip } from "@/components/ui/tooltip";
 import type { CellId } from "@/core/cells/ids";
+import { resolvedMarimoConfigAtom } from "@/core/config/config";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import { splitMangledLocals } from "@/utils/local-variables";
 import type { MarimoError } from "../../../core/kernel/messages";
@@ -29,6 +35,39 @@ import { MangledSegments } from "../errors/mangled-local-chip";
 import { CellLinkError } from "../links/cell-link";
 import { processTextForUrls } from "./console/text-rendering";
 
+const CollapsibleTraceback = ({
+  traceback,
+}: {
+  traceback: string;
+}): JSX.Element => {
+  const [isOpen, setIsOpen] = useState(true);
+  return (
+    <div className="mt-2">
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        aria-expanded={isOpen}
+        aria-label={isOpen ? "Collapse traceback" : "Expand traceback"}
+        className="flex items-center gap-1 text-muted-foreground/70 hover:text-muted-foreground transition-colors"
+      >
+        {isOpen ? (
+          <ChevronDown className="h-3 w-3" />
+        ) : (
+          <ChevronRight className="h-3 w-3" />
+        )}
+        <span className="text-[0.6875rem] uppercase tracking-wider">
+          Traceback
+        </span>
+      </button>
+      {isOpen && (
+        <div className="font-code text-sm mt-1 p-3 bg-muted rounded border overflow-auto max-h-[50vh] cursor-text select-text">
+          {renderHTML({ html: traceback })}
+        </div>
+      )}
+    </div>
+  );
+};
+
 const Tip = (props: {
   title?: string;
   className?: string;
@@ -37,10 +76,13 @@ const Tip = (props: {
   return (
     <Accordion type="single" collapsible={true} className={props.className}>
       <AccordionItem value="item-1" className="text-muted-foreground">
-        <AccordionTrigger className="pt-2 pb-2 font-normal">
+        <AccordionTrigger className="pt-2 pb-0 font-normal">
           {props.title ?? "Tip"}
         </AccordionTrigger>
-        <AccordionContent className="mr-24 text-[0.84375rem]">
+        <AccordionContent
+          className="mr-24 text-[0.84375rem]"
+          wrapperClassName="pt-0 pb-2"
+        >
           {props.children}
         </AccordionContent>
       </AccordionItem>
@@ -63,10 +105,21 @@ export const MarimoErrorOutput = ({
   className,
 }: Props): JSX.Element => {
   const chromeActions = useChromeActions();
-
-  let titleContents = "This cell wasn't run because it has errors";
+  // The console area (where tracebacks are shown) sits below the cell editor.
+  // When cell outputs are also displayed below the editor, the traceback is
+  // already adjacent, so the "See the console area" hint is redundant. It is
+  // only helpful when outputs are displayed above the editor.
+  const showConsoleHint =
+    useAtomValue(resolvedMarimoConfigAtom).display.cell_output === "above";
+
+  let titleContents: string | null =
+    "This cell wasn't run because it has errors";
   let alertVariant: "destructive" | "default" = "destructive";
   let titleColor = "text-error";
+  // A small muted overline shown above the title for static errors, where
+  // the cell genuinely never executes. These errors have no separate title:
+  // the body text already describes them, so the overline carries the status.
+  let statusOverline: string | null = null;
   const liStyle = "my-0.5 ml-8 text-muted-foreground/40";
 
   // Check for certain error types to adjust title and appearance
@@ -77,7 +130,6 @@ export const MarimoErrorOutput = ({
   } else if (errors.some((e) => e.type === "ancestor-prevented")) {
     titleContents = "Ancestor prevented from running";
     alertVariant = "default";
-    titleColor = "text-muted-foreground";
     titleColor = "text-secondary-foreground";
   } else if (errors.some((e) => e.type === "ancestor-stopped")) {
     titleContents = "Ancestor stopped";
@@ -85,6 +137,19 @@ export const MarimoErrorOutput = ({
     titleColor = "text-secondary-foreground";
   } else if (errors.some((e) => e.type === "sql-error")) {
     titleContents = "SQL error";
+  } else if (
+    errors.some(
+      (e) =>
+        e.type === "multiple-defs" ||
+        e.type === "cycle" ||
+        e.type === "setup-refs" ||
+        e.type === "import-star",
+    )
+  ) {
+    // Static errors: the body text describes the problem, so there is no
+    // separate title — only the status overline.
+    titleContents = null;
+    statusOverline = "Cell not run";
   } else {
     // Check for exception type
     const exceptionError = errors.find((e) => e.type === "exception");
@@ -475,9 +540,11 @@ export const MarimoErrorOutput = ({
                       </ExternalLink>
                       ).
                     </p>
-                    <div className="text-muted-foreground mt-2">
-                      See the console area for a traceback.
-                    </div>
+                    {showConsoleHint && (
+                      <div className="text-muted-foreground mt-2">
+                        See the console area for a traceback.
+                      </div>
+                    )}
                   </div>
                 </li>
               );
@@ -492,13 +559,13 @@ export const MarimoErrorOutput = ({
                       {processTextForUrls(error.msg, `exception-${idx}`)}
                     </p>
                     {"traceback" in error && error.traceback ? (
-                      <div className="font-code text-sm mt-2 p-3 bg-muted rounded border overflow-auto max-h-[50vh] cursor-text select-text">
-                        {renderHTML({ html: error.traceback })}
-                      </div>
+                      <CollapsibleTraceback traceback={error.traceback} />
                     ) : (
-                      <div className="text-muted-foreground mt-2">
-                        See the console area for a traceback.
-                      </div>
+                      showConsoleHint && (
+                        <div className="text-muted-foreground mt-2">
+                          See the console area for a traceback.
+                        </div>
+                      )
                     )}
                   </div>
                 ) : (
@@ -506,9 +573,7 @@ export const MarimoErrorOutput = ({
                     {processTextForUrls(error.msg, `exception-${idx}`)}
                     <CellLinkError cellId={error.raising_cell} />
                     {"traceback" in error && error.traceback && (
-                      <div className="font-code text-sm mt-2 p-3 bg-muted rounded border overflow-auto max-h-[50vh] cursor-text select-text">
-                        {renderHTML({ html: error.traceback })}
-                      </div>
+                      <CollapsibleTraceback traceback={error.traceback} />
                     )}
                   </div>
                 )}
@@ -633,23 +698,36 @@ export const MarimoErrorOutput = ({
   };
 
   const title = (
-    <AlertTitle className={`font-code font-medium tracking-wide ${titleColor}`}>
-      {titleContents}
-    </AlertTitle>
+    <div className="space-y-0.5">
+      {statusOverline && (
+        <div className="flex items-center gap-1 font-code text-[0.6875rem] uppercase tracking-wider text-muted-foreground/70">
+          {statusOverline}
+          <Tooltip
+            content="marimo didn't run this cell because it detected an error."
+            delayDuration={200}
+          >
+            <InfoIcon className="size-3 cursor-help" />
+          </Tooltip>
+        </div>
+      )}
+      {titleContents && (
+        <AlertTitle className={`font-code font-medium ${titleColor}`}>
+          {titleContents}
+        </AlertTitle>
+      )}
+    </div>
   );
 
   return (
     <Alert
       variant={alertVariant}
       className={cn(
-        "border-none font-code text-sm text-[0.84375rem] px-0 text-muted-foreground normal [&:has(svg)]:pl-0 space-y-4",
+        "border-none font-code text-sm text-[0.84375rem] p-0 text-muted-foreground normal [&:has(svg)]:pl-0 space-y-2",
         className,
       )}
     >
       {title}
-      <div>
-        <div className="flex flex-col gap-8">{renderMessages()}</div>
-      </div>
+      <div className="flex flex-col gap-4">{renderMessages()}</div>
     </Alert>
   );
 };