@marimo-team/islands 0.23.9-dev10 → 0.23.9-dev11

package/dist/{toDate-ZVVIBmdk.js → toDate-DqrFDZlc.js}

@@ -6,7 +6,7 @@ import { _ as Logger } from "./button-C5K9fIPF.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { u as createLucideIcon } from "./dist-C1BYNeCR.js";
 import { r as KnownQueryParams } from "./constants-T20xxyNf.js";
-import { f as waitFor, p as isIslands, u as store, y as atom } from "./useTheme-7O0YWlE5.js";
+import { b as atom, d as store, m as isIslands, p as waitFor } from "./useTheme-u3PW8S24.js";
 import { t as invariant } from "./invariant-wRzNXIsJ.js";
 var CircleQuestionMark = createLucideIcon("circle-question-mark", [
   ["circle", {

package/dist/{useAsyncData-C008zUPi.js → useAsyncData-4lY05iWF.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { w as useEvent_default } from "./useTheme-7O0YWlE5.js";
+import { T as useEvent_default } from "./useTheme-u3PW8S24.js";
 import { t as invariant } from "./invariant-wRzNXIsJ.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1), Result = {
   error(e, s) {

package/dist/{useDeepCompareMemoize-BrA3_n61.js → useDeepCompareMemoize-C5Zu9gK6.js}

@@ -1,6 +1,6 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
-import { C as dequal } from "./useTheme-7O0YWlE5.js";
+import { w as dequal } from "./useTheme-u3PW8S24.js";
 var import_react = /* @__PURE__ */ __toESM(require_react(), 1);
 function useDeepCompareMemoize(e) {
   let i = import_react.useRef(e);

package/dist/{useLifecycle-BNaoJ5a4.js → useLifecycle-YLdDriVo.js}

@@ -4,7 +4,7 @@ import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { u as createLucideIcon } from "./dist-C1BYNeCR.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";
-import { _ as useSetAtom, y as atom } from "./useTheme-7O0YWlE5.js";
+import { b as atom, v as useSetAtom } from "./useTheme-u3PW8S24.js";
 var Calendar = createLucideIcon("calendar", [
   ["path", {
     d: "M8 2v4",

package/dist/{useTheme-7O0YWlE5.js → useTheme-u3PW8S24.js}

@@ -777,28 +777,29 @@ function useTheme() {
   return e[1] === j ? M = e[2] : (M = { theme: j }, e[1] = j, e[2] = M), M;
 }
 export {
-  dequal as C,
-  getBuildingBlocks as S,
-  useSetAtom as _,
+  getBuildingBlocks as C,
+  buildStore as S,
+  useEvent_default as T,
+  useAtomValue as _,
   getResolvedMarimoConfig as a,
-  createStore as b,
-  AppConfigSchema as c,
-  useJotaiEffect as d,
-  waitFor as f,
-  useAtomValue as g,
-  useAtom as h,
+  atom as b,
+  useResolvedMarimoConfig as c,
+  store as d,
+  useJotaiEffect as f,
+  useAtom as g,
+  Provider as h,
   autoInstantiateAtom as i,
-  createDeepEqualAtom as l,
-  Provider as m,
+  AppConfigSchema as l,
+  isIslands as m,
   useTheme as n,
   localeAtom as o,
-  isIslands as p,
+  waitFor as p,
   aiEnabledAtom as r,
-  useResolvedMarimoConfig as s,
+  resolvedMarimoConfigAtom as s,
   resolvedThemeAtom as t,
-  store as u,
-  useStore as v,
-  useEvent_default as w,
-  buildStore as x,
-  atom as y
+  createDeepEqualAtom as u,
+  useSetAtom as v,
+  dequal as w,
+  createStore as x,
+  useStore as y
 };

package/dist/{vega-component-DJNmOdUj.js → vega-component-CdQu2ErN.js}

@@ -2,23 +2,23 @@ import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { _ as Logger, c as Objects, g as cn, h as Events } from "./button-C5K9fIPF.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { c as asRemoteURL, v as CircleQuestionMark } from "./toDate-ZVVIBmdk.js";
+import { c as asRemoteURL, v as CircleQuestionMark } from "./toDate-DqrFDZlc.js";
 import "./react-dom-BTJzcVJ9.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";
 import "./zod-CoBiJ5v4.js";
 import { n as ErrorBanner } from "./error-banner-5bz0L9hS.js";
 import { t as Tooltip } from "./tooltip-C5FYOpQc.js";
 import { i as debounce_default } from "./constants-T20xxyNf.js";
-import { n as useTheme, w as useEvent_default } from "./useTheme-7O0YWlE5.js";
+import { T as useEvent_default, n as useTheme } from "./useTheme-u3PW8S24.js";
 import { s as uniq } from "./arrays-sEtDRoG4.js";
-import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats-DQ5qjo_Q.js";
+import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats-BHOojBDG.js";
 import { n as formats } from "./vega-loader.browser-CZ-J8Py3.js";
 import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-BWLPpjKK.js";
 import { t as j } from "./react-vega-B0sAlDTL.js";
 import "./defaultLocale-u-3osm0P.js";
 import "./defaultLocale-BoHTsDG6.js";
-import { t as useAsyncData } from "./useAsyncData-C008zUPi.js";
-import { t as useDeepCompareMemoize } from "./useDeepCompareMemoize-BrA3_n61.js";
+import { t as useAsyncData } from "./useAsyncData-4lY05iWF.js";
+import { t as useDeepCompareMemoize } from "./useDeepCompareMemoize-C5Zu9gK6.js";
 import { t as Semaphore } from "./semaphore-CNDGTzkX.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1);
 function fixRelativeUrl(e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.9-dev10",
+  "version": "0.23.9-dev11",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

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,
@@ -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,7 +68,6 @@ export const MarimoTracebackOutput = ({
       replaceMangledLocal,
     ],
   });
-  const [expanded, setExpanded] = useState(true);
 
   const lastTracebackLine = lastLine(traceback);
   const aiEnabled = useAtomValue(aiEnabledAtom);
@@ -95,6 +87,8 @@ export const MarimoTracebackOutput = ({
 
   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 +96,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/core/codemirror/cells/traceback-decorations.ts

@@ -147,7 +147,7 @@ export function errorLineHighlighter(
         backgroundColor: "color-mix(in srgb, var(--red-4) 40%, transparent)",
       },
       "&.cm-focused .cm-error-line.cm-activeLine": {
-        backgroundColor: "color-mix(in srgb, var(--red-6) 40%, transparent)",
+        backgroundColor: "color-mix(in srgb, var(--red-5) 40%, transparent)",
       },
     }),
   ];

package/src/css/app/Cell.css

@@ -214,7 +214,6 @@
   &.error-outline,
   &.error-outline:focus-within {
     box-shadow: 8px 8px 0 0 color-mix(in srgb, var(--error), transparent 80%);
-    background-color: var(--red-2);
   }
 
   /* Needs Run */