@marimo-team/islands 0.22.4-dev1 → 0.22.4-dev10

package/dist/{toDate-CUqpEbBS.js → toDate-D1_ZulwM.js}

@@ -3,10 +3,10 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { t as __commonJSMin } from "./chunk-BNovOVIE.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { l as createLucideIcon } from "./dist-D_UjpfOY.js";
+import { u as createLucideIcon } from "./dist-D56NKWim.js";
 import { g as Logger } from "./button-DNlNlZY_.js";
 import { r as KnownQueryParams } from "./constants-CvyfaCvs.js";
-import { f as waitFor, p as isIslands, u as store, y as atom } from "./useTheme-MWfxn4oz.js";
+import { f as waitFor, p as isIslands, u as store, y as atom } from "./useTheme-CxjbgkRc.js";
 var CircleQuestionMark = createLucideIcon("circle-question-mark", [
   ["circle", {
     cx: "12",

package/dist/{tooltip-BXEpXV3R.js → tooltip-B5EnNyok.js}

@@ -1,10 +1,10 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { a as createPopperScope, i as Root2, n as Arrow, r as Content, s as Root, t as Anchor } from "./dist-D_UjpfOY.js";
+import { a as createPopperScope, i as Root2, n as Arrow, r as Content, s as Root, t as Anchor } from "./dist-D56NKWim.js";
 import { f as createSlottable, m as useComposedRefs, y as cn } from "./button-DNlNlZY_.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
-import { $ as StyleNamespace, X as withFullScreenAsRoot, Z as withSmartCollisionBoundary, ct as useId, ft as composeEventHandlers, ht as Primitive, it as Portal, lt as Presence, mt as createContextScope, ot as DismissableLayer, ut as useControllableState } from "./zod-C6UGQ3fz.js";
+import { $ as StyleNamespace, X as withFullScreenAsRoot, Z as withSmartCollisionBoundary, _t as Primitive, dt as Presence, ft as useControllableState, gt as createContextScope, it as Portal, mt as composeEventHandlers, st as DismissableLayer, ut as useId } from "./zod-D18k8Z52.js";
 var import_react = /* @__PURE__ */ __toESM(require_react(), 1), import_jsx_runtime = /* @__PURE__ */ __toESM(require_jsx_runtime(), 1), [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [createPopperScope]), usePopperScope = createPopperScope(), PROVIDER_NAME = "TooltipProvider", DEFAULT_DELAY_DURATION = 700, TOOLTIP_OPEN = "tooltip.open", [TooltipProviderContextProvider, useTooltipProviderContext] = createTooltipContext(PROVIDER_NAME), TooltipProvider$1 = (t) => {
   let { __scopeTooltip: j, delayDuration: M = DEFAULT_DELAY_DURATION, skipDelayDuration: N = 300, disableHoverableContent: P = false, children: F } = t, I = import_react.useRef(true), L = import_react.useRef(false), R = import_react.useRef(0);
   return import_react.useEffect(() => {

package/dist/{types-D_ntCXg0.js → types-D4-TD_m0.js}

@@ -1,7 +1,7 @@
 import { s as __toESM, t as __commonJSMin } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { l as createLucideIcon } from "./dist-D_UjpfOY.js";
+import { u as createLucideIcon } from "./dist-D56NKWim.js";
 import { t as Button } from "./button-DNlNlZY_.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
 import { n as Constants } from "./constants-CvyfaCvs.js";

package/dist/{useAsyncData-rN1nzPaS.js → useAsyncData-C9ez7Ilo.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { w as useEvent_default } from "./useTheme-MWfxn4oz.js";
+import { w as useEvent_default } from "./useTheme-CxjbgkRc.js";
 import { t as invariant } from "./invariant-e8eBgdux.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1), Result = {
   error(e, s) {

package/dist/{useDeepCompareMemoize-Ch-7Rk2x.js → useDeepCompareMemoize-BvvMxigY.js}

@@ -1,10 +1,10 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { t as toDate } from "./toDate-CUqpEbBS.js";
+import { t as toDate } from "./toDate-D1_ZulwM.js";
 import { r as cva, y as cn } from "./button-DNlNlZY_.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
-import { C as dequal } from "./useTheme-MWfxn4oz.js";
+import { C as dequal } from "./useTheme-CxjbgkRc.js";
 import { i as tableFromIPC } from "./loader-Bd1kgLn7.js";
 function isDate(t) {
   return t instanceof Date || typeof t == "object" && Object.prototype.toString.call(t) === "[object Date]";

package/dist/{useLifecycle-4fA1pHoh.js → useLifecycle-2Vh-WDv6.js}

@@ -1,10 +1,10 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { l as createLucideIcon } from "./dist-D_UjpfOY.js";
+import { u as createLucideIcon } from "./dist-D56NKWim.js";
 import { g as Logger, r as cva, y as cn } from "./button-DNlNlZY_.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
-import { _ as useSetAtom, y as atom } from "./useTheme-MWfxn4oz.js";
+import { _ as useSetAtom, y as atom } from "./useTheme-CxjbgkRc.js";
 var Calendar = createLucideIcon("calendar", [
   ["path", {
     d: "M8 2v4",

package/dist/{useTheme-MWfxn4oz.js → useTheme-CxjbgkRc.js}

@@ -2,7 +2,7 @@ import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
 import { a as OverridingHotkeyProvider, g as Logger, s as resolvePlatform } from "./button-DNlNlZY_.js";
-import { A as looseObject, B as union, I as record, N as number, P as object, R as string, T as boolean, b as _enum, w as array } from "./zod-C6UGQ3fz.js";
+import { A as looseObject, B as union, I as record, N as number, P as object, R as string, T as boolean, b as _enum, w as array } from "./zod-D18k8Z52.js";
 import { t as merge_default } from "./merge-CVhG7q_o.js";
 var import_react = /* @__PURE__ */ __toESM(require_react()), useInsertionEffect = typeof window < "u" ? import_react.useInsertionEffect || import_react.useLayoutEffect : () => {
 };
@@ -585,7 +585,8 @@ const UserConfigSchema = looseObject({
     reactive_tests: boolean().prefault(true),
     watcher_on_save: _enum(["lazy", "autorun"]).prefault("lazy"),
     default_sql_output: _enum(VALID_SQL_OUTPUT_FORMATS).prefault("auto"),
-    default_auto_download: array(_enum(AUTO_DOWNLOAD_FORMATS)).prefault([])
+    default_auto_download: array(_enum(AUTO_DOWNLOAD_FORMATS)).prefault([]),
+    show_tracebacks: boolean().prefault(false)
   }).prefault({}),
   display: looseObject({
     theme: _enum([

package/dist/{vega-component-CPhNLfZZ.js → vega-component-Bzzut3-P.js}

@@ -1,20 +1,20 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { c as asRemoteURL, g as CircleQuestionMark } from "./toDate-CUqpEbBS.js";
+import { c as asRemoteURL, g as CircleQuestionMark } from "./toDate-D1_ZulwM.js";
 import { c as Objects, g as Logger, h as Events, y as cn } from "./button-DNlNlZY_.js";
 import "./react-dom-BSUuJjCR.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
-import "./zod-C6UGQ3fz.js";
-import { n as ErrorBanner } from "./error-banner-Cjf0RU9I.js";
-import { t as Tooltip } from "./tooltip-BXEpXV3R.js";
+import "./zod-D18k8Z52.js";
+import { n as ErrorBanner } from "./error-banner-DexD-5js.js";
+import { t as Tooltip } from "./tooltip-B5EnNyok.js";
 import { i as debounce_default } from "./constants-CvyfaCvs.js";
-import { n as useTheme, w as useEvent_default } from "./useTheme-MWfxn4oz.js";
+import { n as useTheme, w as useEvent_default } from "./useTheme-CxjbgkRc.js";
 import { s as uniq } from "./arrays-beUWo8RF.js";
-import { a as AlertTitle, n as arrow, o as isValid, r as Alert, t as useDeepCompareMemoize } from "./useDeepCompareMemoize-Ch-7Rk2x.js";
+import { a as AlertTitle, n as arrow, o as isValid, r as Alert, t as useDeepCompareMemoize } from "./useDeepCompareMemoize-BvvMxigY.js";
 import { n as formats } from "./vega-loader.browser-DqEcFOPD.js";
 import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-Bd1kgLn7.js";
-import { t as useAsyncData } from "./useAsyncData-rN1nzPaS.js";
+import { t as useAsyncData } from "./useAsyncData-C9ez7Ilo.js";
 import { t as j } from "./react-vega-CzRAIHrv.js";
 import "./defaultLocale-qS7DaAmi.js";
 import "./defaultLocale-Bxoo2-30.js";

package/dist/{zod-C6UGQ3fz.js → zod-D18k8Z52.js}

@@ -349,7 +349,7 @@ function handleAndDispatchCustomEvent(e, E, D, { discrete: O }) {
   });
   E && k.addEventListener(e, E, { once: true }), O ? dispatchDiscreteCustomEvent(k, A) : k.dispatchEvent(A);
 }
-var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount", AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount", EVENT_OPTIONS = {
+var Root = DismissableLayer, Branch = DismissableLayerBranch, AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount", AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount", EVENT_OPTIONS = {
   bubbles: false,
   cancelable: true
 }, FOCUS_SCOPE_NAME = "FocusScope", FocusScope = import_react.forwardRef((e, E) => {
@@ -11786,44 +11786,46 @@ export {
   MAX_HEIGHT_OFFSET as Y,
   withSmartCollisionBoundary as Z,
   ZodString as _,
+  Primitive as _t,
   ZodIssueCode as a,
   FocusScope as at,
   _enum as b,
   ZodBoolean as c,
-  useId as ct,
+  Root as ct,
   ZodDiscriminatedUnion as d,
-  useLayoutEffect2 as dt,
+  Presence as dt,
   hideOthers as et,
   ZodEnum as f,
-  composeEventHandlers as ft,
+  useControllableState as ft,
   ZodOptional as g,
-  dispatchDiscreteCustomEvent as gt,
+  createContextScope as gt,
   ZodObject as h,
-  Primitive as ht,
+  createContext2 as ht,
   string as i,
   Portal as it,
   nan as j,
   literal as k,
   ZodDate as l,
-  Presence as lt,
+  useCallbackRef$1 as lt,
   ZodNumber as m,
-  createContextScope as mt,
+  composeEventHandlers as mt,
   date as n,
   __awaiter as nt,
   ZodAny as o,
-  DismissableLayer as ot,
+  Branch as ot,
   ZodLiteral as p,
-  createContext2 as pt,
+  useLayoutEffect2 as pt,
   $ZodError as q,
   number as r,
   useFocusGuards as rt,
   ZodArray as s,
-  useCallbackRef$1 as st,
+  DismissableLayer as st,
   zod_default as t,
   Combination_default as tt,
   ZodDefault as u,
-  useControllableState as ut,
+  useId as ut,
   ZodType as v,
+  dispatchDiscreteCustomEvent as vt,
   array as w,
   _instanceof as x,
   ZodUnion as y,

package/package.json

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

package/src/components/editor/TracebackModalContainer.tsx

@@ -0,0 +1,22 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import React from "react";
+import { useAtom } from "jotai";
+import { tracebackModalAtom } from "@/core/errors/traceback-atom";
+import { TracebackModal } from "./errors/traceback-modal";
+
+export const TracebackModalContainer: React.FC = () => {
+  const [tracebackData, setTracebackData] = useAtom(tracebackModalAtom);
+
+  if (!tracebackData) {
+    return null;
+  }
+
+  return (
+    <TracebackModal
+      isOpen={true}
+      onClose={() => setTracebackData(null)}
+      traceback={tracebackData.traceback}
+      errorMessage={tracebackData.errorMessage}
+    />
+  );
+};

package/src/components/editor/errors/traceback-modal.tsx

@@ -0,0 +1,87 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import React from "react";
+import { Button } from "@/components/ui/button";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { CopyIcon } from "lucide-react";
+import { toast } from "@/components/ui/use-toast";
+
+interface TracebackModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  traceback: string;
+  errorMessage: string;
+}
+
+export const TracebackModal: React.FC<TracebackModalProps> = ({
+  isOpen,
+  onClose,
+  traceback,
+  errorMessage,
+}) => {
+  const handleCopy = async () => {
+    // Strip HTML tags for clipboard
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = traceback;
+    const textContent = tempDiv.textContent || tempDiv.innerText || "";
+
+    try {
+      await navigator.clipboard.writeText(textContent);
+      toast({
+        title: "Copied to clipboard",
+        description: "Traceback has been copied to your clipboard.",
+      });
+    } catch {
+      toast({
+        title: "Failed to copy",
+        description: "Could not copy to clipboard.",
+        variant: "danger",
+      });
+    }
+  };
+
+  return (
+    <AlertDialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <AlertDialogContent className="max-w-4xl max-h-[80vh]">
+        <AlertDialogHeader>
+          <AlertDialogTitle className="text-destructive">
+            {errorMessage}
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            Click the traceback to select and copy.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <div className="my-4 overflow-auto">
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-sm font-medium text-muted-foreground">
+              Traceback
+            </span>
+            <Button
+              variant="outline"
+              size="xs"
+              onClick={handleCopy}
+              className="flex items-center gap-1"
+            >
+              <CopyIcon className="h-3 w-3" />
+              Copy
+            </Button>
+          </div>
+          <div
+            className="font-code text-sm p-4 bg-muted rounded border overflow-auto max-h-[50vh] cursor-text select-text"
+            dangerouslySetInnerHTML={{ __html: traceback }}
+          />
+        </div>
+        <AlertDialogFooter>
+          <AlertDialogAction onClick={onClose}>Close</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};

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

@@ -477,6 +477,7 @@ export const MarimoErrorOutput = ({
               );
             }
 
+            // All other exceptions
             return (
               <li className="my-2" key={`exception-${idx}`}>
                 {error.raising_cell == null ? (
@@ -484,14 +485,33 @@ export const MarimoErrorOutput = ({
                     <p className="text-muted-foreground">
                       {processTextForUrls(error.msg, `exception-${idx}`)}
                     </p>
-                    <div className="text-muted-foreground mt-2">
-                      See the console area for a traceback.
-                    </div>
+                    {"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"
+                        // biome-ignore lint/security/noDangerouslySetInnerHtml: traceback from backend
+                        dangerouslySetInnerHTML={{
+                          __html: error.traceback,
+                        }}
+                      />
+                    ) : (
+                      <div className="text-muted-foreground mt-2">
+                        See the console area for a traceback.
+                      </div>
+                    )}
                   </div>
                 ) : (
                   <div>
                     {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"
+                        // biome-ignore lint/security/noDangerouslySetInnerHtml: traceback from backend
+                        dangerouslySetInnerHTML={{
+                          __html: error.traceback,
+                        }}
+                      />
+                    )}
                   </div>
                 )}
               </li>

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

@@ -32,7 +32,7 @@ import type { CellData, CellRuntimeState } from "@/core/cells/types";
 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 { showCodeInRunModeAtom } from "@/core/meta/state";
 import { isErrorMime } from "@/core/mime";
@@ -121,6 +121,7 @@ const VerticalLayoutRenderer: React.FC<VerticalLayoutProps> = ({
         staleInputs={cell.staleInputs}
         name={cell.name}
         kiosk={kioskMode}
+        showErrorTracebacks={userConfig.runtime.show_tracebacks ?? false}
       />
     );
   };
@@ -330,6 +331,7 @@ interface VerticalCellProps extends Pick<
   showCode: boolean;
   name: string;
   kiosk: boolean;
+  showErrorTracebacks: boolean;
 }
 
 const VerticalCell = memo(
@@ -350,6 +352,7 @@ const VerticalCell = memo(
     mode,
     name,
     kiosk,
+    showErrorTracebacks,
   }: VerticalCellProps) => {
     const cellRef = useRef<HTMLDivElement>(null);
 
@@ -427,7 +430,18 @@ const VerticalCell = memo(
     }
 
     const outputIsError = isErrorMime(output?.mimetype);
-    const hidden = errored || interrupted || stopped || outputIsError;
+    // When show_tracebacks is enabled, show error outputs inline
+    // instead of hiding them
+    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;
     }

package/src/components/ui/toast.tsx

@@ -118,7 +118,9 @@ ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
 type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
 
-type ToastActionElement = React.ReactElement<typeof ToastAction>;
+type ToastActionElement = React.ReactElement<
+  React.ComponentProps<typeof ToastAction>
+>;
 
 export {
   type ToastProps,

package/src/core/MarimoApp.tsx

@@ -13,6 +13,7 @@ import { CssVariables } from "@/theme/ThemeProvider";
 import { reactLazyWithPreload } from "@/utils/lazy";
 import { ErrorBoundary } from "../components/editor/boundary/ErrorBoundary";
 import { KernelStartupErrorModal } from "../components/editor/KernelStartupErrorModal";
+import { TracebackModalContainer } from "../components/editor/TracebackModalContainer";
 import { ModalProvider } from "../components/modal/ImperativeModal";
 import { Toaster } from "../components/ui/toaster";
 import { TooltipProvider } from "../components/ui/tooltip";
@@ -105,6 +106,7 @@ const Providers = memo(({ children }: PropsWithChildren) => {
                 <Toaster />
                 <TailwindIndicator />
                 <KernelStartupErrorModal />
+                <TracebackModalContainer />
               </ModalProvider>
             </LocaleProvider>
           </SlotzProvider>

package/src/core/cells/__tests__/apply-transaction.test.ts

@@ -267,6 +267,34 @@ describe("applyTransactionChanges edge cases", () => {
     `);
   });
 
+  it("delete-cell for nonexistent cell does not crash subsequent changes", () => {
+    setup("a", "b", "c");
+    const [, b] = state.cellIds.inOrderIds;
+    // Simulate the scenario from the bug report: a delete-cell for a cell ID
+    // that was never added to the frontend, followed by a create-cell and
+    // a set-code update.  The delete should be silently skipped, and the rest
+    // of the transaction should still apply.
+    apply([
+      { type: "delete-cell", cellId: cellId("nonexistent") },
+      {
+        type: "create-cell",
+        cellId: cellId("VrZA"),
+        code: "import altair as alt",
+        name: "",
+        config: { hide_code: true },
+      },
+      { type: "set-code", cellId: b, code: "updated" },
+    ]);
+    expect(pretty(state)).toMatchInlineSnapshot(`
+      "
+      0: 'a'
+      1: 'updated'
+      2: 'c'
+      VrZA: 'import altair as alt' [hide_code]
+      "
+    `);
+  });
+
   it("empty changes is a no-op", () => {
     setup("a", "b");
     apply([]);

package/src/core/cells/cells.ts

@@ -6,6 +6,7 @@ import { type Atom, atom, useAtom, useAtomValue } from "jotai";
 import { atomFamily, selectAtom, splitAtom } from "jotai/utils";
 import { createRef, type ReducerWithoutAction } from "react";
 import type { CellHandle } from "@/components/editor/notebook-cell";
+import type { CollapsibleTree } from "@/utils/id-tree";
 import {
   type CellColumnId,
   type CellIndex,
@@ -578,7 +579,18 @@ const {
       return state;
     }
 
-    const column = state.cellIds.findWithId(cellId);
+    let column: CollapsibleTree<CellId>;
+    try {
+      column = state.cellIds.findWithId(cellId);
+    } catch (error) {
+      // Expected for kernel-only cells or out-of-order transactions.
+      Logger.warn("Skipping delete for missing cellId", {
+        cellId,
+        error,
+      });
+      return state;
+    }
+
     const cellIndex = column.indexOfOrThrow(cellId);
     const focusIndex = cellIndex === 0 ? 1 : cellIndex - 1;
     let scrollKey: CellId | null = null;

package/src/core/cells/logs.ts

@@ -7,6 +7,10 @@ import { Strings } from "@/utils/strings";
 import type { CellMessage, OutputMessage } from "../kernel/messages";
 import { isErrorMime } from "../mime";
 import type { CellId } from "./ids";
+import { store } from "../state/jotai";
+import { tracebackModalAtom } from "../errors/traceback-atom";
+import React from "react";
+import { ToastAction } from "@/components/ui/toast";
 
 export interface CellLog {
   timestamp: number;
@@ -72,17 +76,52 @@ export function getCellLogsForMessage(cell: CellMessage): CellLog[] {
       });
     });
 
-    const shouldToast = cell.output.data.some(
-      (error) => error.type === "internal",
+    // Find exception errors and check for traceback
+    const exceptionErrors = cell.output.data.filter(
+      (error) =>
+        ("type" in error && error.type === "exception") ||
+        error.type === "internal",
     );
-    if (!didAlreadyToastError && shouldToast) {
+
+    if (exceptionErrors.length > 0 && !didAlreadyToastError) {
       didAlreadyToastError = true;
-      toast({
-        title: "An internal error occurred",
-        description: "See console for details.",
-        className:
-          "text-xs text-background bg-(--red-10) py-2 pl-3 *:flex *:gap-3",
-      });
+
+      // Find first error with a traceback
+      const errorWithTraceback = exceptionErrors.find(
+        (error) => error.traceback,
+      );
+
+      if (errorWithTraceback) {
+        // Show toast with action button to open modal
+        const handleClick = () => {
+          store.set(tracebackModalAtom, {
+            traceback: errorWithTraceback.traceback,
+            errorMessage:
+              errorWithTraceback.msg || "An internal error occurred",
+          });
+        };
+
+        toast({
+          title: "An internal error occurred",
+          description:
+            errorWithTraceback.msg || "Click 'View' to see traceback",
+          variant: "danger",
+          action: React.createElement(
+            ToastAction,
+            {
+              altText: "View traceback",
+              onClick: handleClick,
+            },
+            "View",
+          ),
+        });
+      } else {
+        toast({
+          title: "An internal error occurred",
+          description: "See console for details.",
+          variant: "danger",
+        });
+      }
     }
   }
 

package/src/core/config/__tests__/config-schema.test.ts

@@ -90,6 +90,7 @@ test("default UserConfig - empty", () => {
         "default_sql_output": "auto",
         "on_cell_change": "autorun",
         "reactive_tests": true,
+        "show_tracebacks": false,
         "watcher_on_save": "lazy",
       },
       "save": {
@@ -160,6 +161,7 @@ test("default UserConfig - one level", () => {
         "default_sql_output": "auto",
         "on_cell_change": "autorun",
         "reactive_tests": true,
+        "show_tracebacks": false,
         "watcher_on_save": "lazy",
       },
       "save": {

package/src/core/config/config-schema.ts

@@ -126,6 +126,7 @@ export const UserConfigSchema = z
         default_auto_download: z
           .array(z.enum(AUTO_DOWNLOAD_FORMATS))
           .prefault([]),
+        show_tracebacks: z.boolean().prefault(false),
       })
       .prefault({}),
     display: z

package/src/core/errors/traceback-atom.ts

@@ -0,0 +1,9 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { atom } from "jotai";
+
+export interface TracebackData {
+  traceback: string;
+  errorMessage: string;
+}
+
+export const tracebackModalAtom = atom<TracebackData | null>(null);