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

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

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

@@ -5,17 +5,13 @@ import { useAtomValue } from "jotai";
 import {
   BugPlayIcon,
   ChevronDown,
+  ChevronRight,
   CopyIcon,
   ExternalLinkIcon,
   MessageCircleIcon,
   SearchIcon,
 } from "lucide-react";
 import { type JSX, useState } from "react";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-} from "@/components/ui/accordion";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -29,7 +25,7 @@ import { getCellEditorView } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
 import { SCRATCH_CELL_ID } from "@/core/cells/ids";
 import { insertDebuggerAtLine } from "@/core/codemirror/editing/debugging";
-import { aiEnabledAtom } from "@/core/config/config";
+import { aiFeaturesEnabledAtom } from "@/core/config/config";
 import { getRequestClient } from "@/core/network/requests";
 import { isStaticNotebook } from "@/core/static/static-state";
 import { isWasm } from "@/core/wasm/utils";
@@ -45,7 +41,6 @@ import {
   extractAllTracebackInfo,
   getTracebackInfo,
 } from "@/utils/traceback";
-import { cn } from "../../../utils/cn";
 import { AIFixButton } from "../errors/auto-fix";
 import { MangledSegments } from "../errors/mangled-local-chip";
 import { CellLinkTraceback } from "../links/cell-link";
@@ -57,8 +52,6 @@ interface Props {
   onRefactorWithAI?: OnRefactorWithAI;
 }
 
-const KEY = "item";
-
 /**
  * List of errors due to violations of Marimo semantics.
  */
@@ -75,10 +68,9 @@ export const MarimoTracebackOutput = ({
       replaceMangledLocal,
     ],
   });
-  const [expanded, setExpanded] = useState(true);
 
   const lastTracebackLine = lastLine(traceback);
-  const aiEnabled = useAtomValue(aiEnabledAtom);
+  const aiFeaturesEnabled = useAtomValue(aiFeaturesEnabledAtom);
 
   // Get last traceback info
   const tracebackInfo = extractAllTracebackInfo(traceback)?.at(0);
@@ -91,10 +83,13 @@ export const MarimoTracebackOutput = ({
     !isStaticNotebook() &&
     cellId !== SCRATCH_CELL_ID;
 
-  const showAIFix = onRefactorWithAI && aiEnabled && !isStaticNotebook();
+  const showAIFix =
+    onRefactorWithAI && aiFeaturesEnabled && !isStaticNotebook();
 
   const showSearch = !isStaticNotebook();
 
+  const [isOpen, setIsOpen] = useState(true);
+
   const handleRefactorWithAI = (triggerImmediately: boolean) => {
     onRefactorWithAI?.({
       prompt: `My code gives the following error:\n\n${lastTracebackLine}`,
@@ -102,35 +97,29 @@ export const MarimoTracebackOutput = ({
     });
   };
 
-  const [error, errorMessage] = lastTracebackLine.split(":", 2);
-  const errorMessageSegments = errorMessage
-    ? splitMangledLocals(errorMessage)
-    : [];
-
   return (
     <div className="flex flex-col gap-2 min-w-full w-fit">
-      <Accordion type="single" collapsible={true} value={expanded ? KEY : ""}>
-        <AccordionItem value={KEY} className="border-none">
-          <div
-            className="flex gap-2 h-10 px-2 hover:bg-muted rounded-sm select-none items-center cursor-pointer transition-all"
-            onClick={() => setExpanded((prev) => !prev)}
-          >
-            <ChevronDown
-              className={cn(
-                "h-4 w-4 text-muted-foreground transition-transform duration-200 shrink-0",
-                expanded ? "rotate-180" : "rotate-0",
-              )}
-            />
-            <div className="text-sm inline font-mono">
-              <span className="text-destructive">{error || "Error"}:</span>{" "}
-              <MangledSegments segments={errorMessageSegments} />
-            </div>
-          </div>
-          <AccordionContent className="text-muted-foreground px-4 pt-2 text-xs overflow-auto">
-            {htmlTraceback}
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        aria-expanded={isOpen}
+        aria-label={isOpen ? "Collapse traceback" : "Expand traceback"}
+        className="self-start flex items-center gap-1 pt-2 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="text-muted-foreground pr-4 text-xs overflow-auto">
+          {htmlTraceback}
+        </div>
+      )}
       <div className="flex gap-2">
         {showAIFix && (
           <AIFixButton

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

@@ -24,7 +24,7 @@ import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
 import { SETUP_CELL_ID } from "@/core/cells/ids";
 import { LanguageAdapters } from "@/core/codemirror/language/LanguageAdapters";
 import { MARKDOWN_INITIAL_HIDE_CODE } from "@/core/codemirror/language/languages/markdown";
-import { aiEnabledAtom } from "@/core/config/config";
+import { aiEnabledAtom, aiFeaturesEnabledAtom } from "@/core/config/config";
 import { canInteractWithAppAtom } from "@/core/network/connection";
 import { useBoolean } from "@/hooks/useBoolean";
 import { cn } from "@/utils/cn";
@@ -261,6 +261,7 @@ const AddCellButtons: React.FC<{
   const { createNewCell } = useCellActions();
   const [isAiButtonOpen, isAiButtonOpenActions] = useBoolean(false);
   const aiEnabled = useAtomValue(aiEnabledAtom);
+  const aiFeaturesEnabled = useAtomValue(aiFeaturesEnabledAtom);
   const canInteractWithApp = useAtomValue(canInteractWithAppAtom);
   const { handleClick } = useOpenSettingsToTab();
 
@@ -270,7 +271,7 @@ const AddCellButtons: React.FC<{
   );
 
   const renderBody = () => {
-    if (isAiButtonOpen) {
+    if (aiEnabled && isAiButtonOpen) {
       return <AddCellWithAI onClose={isAiButtonOpenActions.toggle} />;
     }
 
@@ -328,30 +329,32 @@ const AddCellButtons: React.FC<{
           <DatabaseIcon className="mr-2 size-4 shrink-0" />
           SQL
         </Button>
-        <Tooltip
-          content={
-            aiEnabled ? null : (
-              <span>AI provider not found or Edit model not selected</span>
-            )
-          }
-          delayDuration={100}
-          asChild={false}
-        >
-          <Button
-            className={buttonClass}
-            variant="text"
-            size="sm"
-            disabled={!canInteractWithApp}
-            onClick={
-              aiEnabled
-                ? isAiButtonOpenActions.toggle
-                : () => handleClick("ai", "ai-providers")
+        {aiEnabled && (
+          <Tooltip
+            content={
+              aiFeaturesEnabled ? null : (
+                <span>AI provider not found or Edit model not selected</span>
+              )
             }
+            delayDuration={100}
+            asChild={false}
           >
-            <SparklesIcon className="mr-2 size-4 shrink-0" />
-            Generate with AI
-          </Button>
-        </Tooltip>
+            <Button
+              className={buttonClass}
+              variant="text"
+              size="sm"
+              disabled={!canInteractWithApp}
+              onClick={
+                aiFeaturesEnabled
+                  ? isAiButtonOpenActions.toggle
+                  : () => handleClick("ai", "ai-providers")
+              }
+            >
+              <SparklesIcon className="mr-2 size-4 shrink-0" />
+              Generate with AI
+            </Button>
+          </Tooltip>
+        )}
       </>
     );
   };