@marimo-team/islands 0.23.14-dev5 → 0.23.14-dev50

package/src/components/editor/code/readonly-python-code.tsx

@@ -1,17 +1,25 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { markdown } from "@codemirror/lang-markdown";
 import { sql } from "@codemirror/lang-sql";
+import {
+  defaultHighlightStyle,
+  syntaxHighlighting,
+} from "@codemirror/language";
 import CodeMirror, {
   EditorView,
   type ReactCodeMirrorProps,
 } from "@uiw/react-codemirror";
 import { CopyIcon, EyeIcon, EyeOffIcon, PlusIcon } from "lucide-react";
-import { memo, useState } from "react";
+import { memo, useMemo, useState } from "react";
 import { useAddCodeToNewCell } from "@/components/editor/cell/useAddCell";
 import { Button } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
+import type { LanguageAdapterType } from "@/core/codemirror/language/types";
 import { customPythonLanguageSupport } from "@/core/codemirror/language/languages/python";
+import { darkTheme } from "@/core/codemirror/theme/dark";
+import { lightTheme } from "@/core/codemirror/theme/light";
 import { useTheme } from "@/theme/useTheme";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
@@ -22,6 +30,18 @@ const pythonExtensions = [
   EditorView.lineWrapping,
 ];
 const sqlExtensions = [sql(), EditorView.lineWrapping];
+const markdownExtensions = [markdown(), EditorView.lineWrapping];
+
+function readonlyCodeExtensions(language: LanguageAdapterType) {
+  switch (language) {
+    case "sql":
+      return sqlExtensions;
+    case "markdown":
+      return markdownExtensions;
+    default:
+      return pythonExtensions;
+  }
+}
 
 /**
  * A readonly code component that can be used to display code in a readonly state.
@@ -42,7 +62,7 @@ export const ReadonlyCode = memo(
       showHideCode?: boolean;
       showCopyCode?: boolean;
       insertNewCell?: boolean;
-      language?: "python" | "sql";
+      language?: LanguageAdapterType;
     } & ReactCodeMirrorProps,
   ) => {
     const { theme } = useTheme();
@@ -56,35 +76,41 @@ export const ReadonlyCode = memo(
       language = "python",
       ...rest
     } = props;
-    const [hideCode, setHideCode] = useState(initiallyHideCode);
+    const [hideCode, setHideCode] = useState(!!initiallyHideCode);
+
+    const extensions = useMemo(
+      () => [
+        theme === "dark" ? darkTheme : lightTheme,
+        syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+        ...readonlyCodeExtensions(language),
+      ],
+      [theme, language],
+    );
 
     return (
       <div
         className={cn(
-          "relative hover-actions-parent w-full overflow-hidden",
+          "relative hover-actions-parent w-full overflow-hidden pb-1",
           className,
         )}
       >
-        {showHideCode && hideCode && (
-          <HideCodeButton
-            tooltip="Show code"
-            onClick={() => setHideCode(false)}
-          />
-        )}
         <div className="absolute top-0 right-0 my-1 mx-2 z-10 hover-action flex gap-2">
           {showCopyCode && <CopyButton text={code} />}
           {insertNewCell && <InsertNewCell code={code} />}
-          {showHideCode && !hideCode && (
-            <EyeCloseButton onClick={() => setHideCode(true)} />
+          {showHideCode && (
+            <ToggleCodeButton
+              hidden={hideCode}
+              onClick={() => setHideCode((prev) => !prev)}
+            />
           )}
         </div>
         <CodeMirror
           {...rest}
           className={cn("cm", hideCode && "opacity-20 h-8 overflow-hidden")}
-          theme={theme === "dark" ? "dark" : "light"}
+          theme="none"
           height="100%"
-          editable={!hideCode}
-          extensions={language === "python" ? pythonExtensions : sqlExtensions}
+          editable={false}
+          extensions={extensions}
           value={code}
           readOnly={true}
         />
@@ -102,42 +128,42 @@ const CopyButton = (props: { text: string }) => {
 
   return (
     <Tooltip content="Copy code" usePortal={false}>
-      <Button onClick={copy} size="xs" className="py-0" variant="secondary">
+      <Button
+        onClick={copy}
+        size="xs"
+        className="py-0"
+        variant="secondary"
+        aria-label="Copy code"
+      >
         <CopyIcon size={14} strokeWidth={1.5} />
       </Button>
     </Tooltip>
   );
 };
 
-const EyeCloseButton = (props: { onClick: () => void }) => {
+const ToggleCodeButton = (props: { hidden: boolean; onClick: () => void }) => {
   return (
-    <Tooltip content="Hide code" usePortal={false}>
+    <Tooltip
+      content={props.hidden ? "Show code" : "Hide code"}
+      usePortal={false}
+    >
       <Button
         onClick={props.onClick}
+        aria-label={props.hidden ? "Show code" : "Hide code"}
         size="xs"
         className="py-0"
         variant="secondary"
       >
-        <EyeOffIcon size={14} strokeWidth={1.5} />
+        {props.hidden ? (
+          <EyeIcon size={14} strokeWidth={1.5} />
+        ) : (
+          <EyeOffIcon size={14} strokeWidth={1.5} />
+        )}
       </Button>
     </Tooltip>
   );
 };
 
-export const HideCodeButton = (props: {
-  tooltip?: string;
-  className?: string;
-  onClick: () => void;
-}) => {
-  return (
-    <div className={props.className} onClick={props.onClick}>
-      <Tooltip usePortal={false} content={props.tooltip}>
-        <EyeIcon className="hover-action w-5 h-5 text-muted-foreground cursor-pointer absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-80 hover:opacity-100 z-20" />
-      </Tooltip>
-    </div>
-  );
-};
-
 const InsertNewCell = (props: { code: string }) => {
   const addCodeToNewCell = useAddCodeToNewCell();
 
@@ -152,6 +178,7 @@ const InsertNewCell = (props: { code: string }) => {
         size="xs"
         className="py-0"
         variant="secondary"
+        aria-label="Add code to notebook"
       >
         <PlusIcon size={14} strokeWidth={1.5} />
       </Button>

package/src/components/editor/errors/__tests__/auto-fix.test.ts

@@ -0,0 +1,23 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { cellId } from "@/__tests__/branded";
+import { buildFixInChatPrompt } from "../auto-fix";
+
+describe("buildFixInChatPrompt", () => {
+  it("references the per-cell error context URI", () => {
+    expect(buildFixInChatPrompt(cellId("cell-1"))).toBe(
+      "@error://cell-1\n\nPlease fix this error.",
+    );
+  });
+
+  it("falls back to inline error text when no cell id", () => {
+    expect(buildFixInChatPrompt(undefined, "ValueError: boom")).toBe(
+      "My code gives the following error. Please fix it:\n\nValueError: boom",
+    );
+  });
+
+  it("uses a generic prompt when no cell id and no error text", () => {
+    expect(buildFixInChatPrompt(undefined)).toBe("Please fix this error.");
+  });
+});

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

@@ -1,7 +1,14 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { useAtomValue, useSetAtom, useStore } from "jotai";
-import { ChevronDownIcon, SparklesIcon, WrenchIcon } from "lucide-react";
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  HatGlasses,
+  type LucideIcon,
+  SparklesIcon,
+  WrenchIcon,
+} from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -17,8 +24,23 @@ import { aiFeaturesEnabledAtom } from "@/core/config/config";
 import { getAutoFixes } from "@/core/errors/errors";
 import type { MarimoError } from "@/core/kernel/messages";
 import { cn } from "@/utils/cn";
+import { useOpenAiAssistant } from "../chrome/wrapper/useOpenAiAssistant";
 import { type FixMode, useFixMode } from "./fix-mode";
 
+export function buildFixInChatPrompt(
+  cellId: CellId | undefined,
+  fallbackErrorText?: string,
+): string {
+  if (cellId != null) {
+    return `@error://${cellId}\n\nPlease fix this error.`;
+  }
+  const errorText = fallbackErrorText?.trim();
+  if (errorText) {
+    return `My code gives the following error. Please fix it:\n\n${errorText}`;
+  }
+  return "Please fix this error.";
+}
+
 export const AutoFixButton = ({
   errors,
   cellId,
@@ -35,6 +57,7 @@ export const AutoFixButton = ({
     getAutoFixes(error, { aiEnabled: aiFeaturesEnabled }),
   );
   const setAiCompletionCell = useSetAtom(aiCompletionCellAtom);
+  const openAiAssistant = useOpenAiAssistant();
 
   if (autoFixes.length === 0) {
     return null;
@@ -67,6 +90,12 @@ export const AutoFixButton = ({
     editorView?.focus();
   };
 
+  const openAISidebar = () => {
+    openAiAssistant({
+      prompt: buildFixInChatPrompt(cellId),
+    });
+  };
+
   return (
     <div className={cn("my-2", className)}>
       {firstFix.fixType === "ai" ? (
@@ -74,6 +103,7 @@ export const AutoFixButton = ({
           tooltip={firstFix.description}
           openPrompt={() => handleFix(false)}
           applyAutofix={() => handleFix(true)}
+          openChat={openAISidebar}
         />
       ) : (
         <Tooltip content={firstFix.description} align="start">
@@ -92,23 +122,53 @@ export const AutoFixButton = ({
   );
 };
 
-const PromptIcon = SparklesIcon;
-const AutofixIcon = WrenchIcon;
+interface FixModeConfig {
+  Icon: LucideIcon;
+  title: string;
+  description: string;
+}
 
-const PromptTitle = "Suggest a prompt";
-const AutofixTitle = "Fix with AI";
+const MODE_CONFIG: Record<FixMode, FixModeConfig> = {
+  autofix: {
+    Icon: WrenchIcon,
+    title: "Inline AI Fix",
+    description: "Apply AI fixes inline in the cell",
+  },
+  chat: {
+    Icon: HatGlasses,
+    title: "Fix with AI assistant",
+    description: "Open the AI sidebar to fix",
+  },
+  prompt: {
+    Icon: SparklesIcon,
+    title: "Suggest a prompt",
+    description: "Edit the prompt before applying",
+  },
+};
+
+const FIX_MODES: FixMode[] = ["autofix", "prompt", "chat"];
 
 export const AIFixButton = ({
   tooltip,
   openPrompt,
   applyAutofix,
+  openChat,
 }: {
   tooltip: string;
   openPrompt: () => void;
   applyAutofix: () => void;
+  openChat: () => void;
 }) => {
   const { fixMode, setFixMode } = useFixMode();
 
+  let onAction = openPrompt;
+  if (fixMode === "chat") {
+    onAction = openChat;
+  } else if (fixMode === "autofix") {
+    onAction = applyAutofix;
+  }
+  const { Icon, title } = MODE_CONFIG[fixMode];
+
   return (
     <div className="flex">
       <Tooltip content={tooltip} align="start">
@@ -116,14 +176,10 @@ export const AIFixButton = ({
           size="xs"
           variant="outline"
           className="font-normal rounded-r-none border-r-0"
-          onClick={fixMode === "prompt" ? openPrompt : applyAutofix}
+          onClick={onAction}
         >
-          {fixMode === "prompt" ? (
-            <PromptIcon className="h-3 w-3 mr-2 mb-0.5" />
-          ) : (
-            <AutofixIcon className="h-3 w-3 mr-2 mb-0.5" />
-          )}
-          {fixMode === "prompt" ? PromptTitle : AutofixTitle}
+          <Icon className="h-3 w-3 mr-2 mb-0.5" />
+          {title}
         </Button>
       </Tooltip>
       <DropdownMenu>
@@ -138,40 +194,38 @@ export const AIFixButton = ({
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" className="w-56">
-          <DropdownMenuItem
-            className="flex items-center gap-2"
-            onClick={() => {
-              setFixMode(fixMode === "prompt" ? "autofix" : "prompt");
-            }}
-          >
-            <AiModeItem mode={fixMode === "prompt" ? "autofix" : "prompt"} />
-          </DropdownMenuItem>
+          {FIX_MODES.map((mode) => (
+            <DropdownMenuItem
+              key={mode}
+              className="flex items-center gap-2"
+              onClick={() => setFixMode(mode)}
+            >
+              <AiModeItem mode={mode} selected={mode === fixMode} />
+            </DropdownMenuItem>
+          ))}
         </DropdownMenuContent>
       </DropdownMenu>
     </div>
   );
 };
 
-const AiModeItem = ({ mode }: { mode: FixMode }) => {
-  const icon =
-    mode === "prompt" ? (
-      <PromptIcon className="h-4 w-4" />
-    ) : (
-      <AutofixIcon className="h-4 w-4" />
-    );
-  const title = mode === "prompt" ? PromptTitle : AutofixTitle;
-  const description =
-    mode === "prompt"
-      ? "Edit the prompt before applying"
-      : "Apply AI fixes automatically";
+const AiModeItem = ({
+  mode,
+  selected,
+}: {
+  mode: FixMode;
+  selected: boolean;
+}) => {
+  const { Icon, title, description } = MODE_CONFIG[mode];
 
   return (
-    <div className="flex items-center gap-2">
-      {icon}
+    <div className="flex items-center gap-2 w-full">
+      <Icon className="h-4 w-4 shrink-0" />
       <div className="flex flex-col">
         <span className="font-medium">{title}</span>
         <span className="text-xs text-muted-foreground">{description}</span>
       </div>
+      {selected && <CheckIcon className="h-4 w-4 ml-auto shrink-0" />}
     </div>
   );
 };

package/src/components/editor/errors/fix-mode.ts

@@ -4,7 +4,7 @@ import { useAtom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
 import { jotaiJsonStorage } from "@/utils/storage/jotai";
 
-export type FixMode = "prompt" | "autofix";
+export type FixMode = "prompt" | "autofix" | "chat";
 
 const BASE_KEY = "marimo:ai-autofix-mode";
 

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

@@ -29,6 +29,7 @@ import { outputIsLoading, outputIsStale } from "@/core/cells/cell";
 import { isOutputEmpty } from "@/core/cells/outputs";
 import { useIsPendingCut } from "@/core/cells/pending-cut-service";
 import { autocompletionKeymap } from "@/core/codemirror/cm";
+import { clearCellBreakpoints } from "@/core/codemirror/cells/debugger-state";
 import type { LanguageAdapterType } from "@/core/codemirror/language/types";
 import { CSSClasses } from "@/core/constants";
 import { canCollapseOutline } from "@/core/dom/outline";
@@ -746,6 +747,9 @@ const EditableCellComponent = ({
               onRefactorWithAI={handleRefactorWithAI}
               onClear={() => {
                 actions.clearCellConsoleOutput({ cellId });
+                // The debugger "Clear" (trashcan) also drops this cell's
+                // breakpoints; no-op when none are set.
+                clearCellBreakpoints(cellId);
               }}
               onSubmitDebugger={(text, index) => {
                 actions.setStdinResponse({
@@ -1211,6 +1215,9 @@ const SetupCellComponent = ({
               onRefactorWithAI={handleRefactorWithAI}
               onClear={() => {
                 actions.clearCellConsoleOutput({ cellId });
+                // The debugger "Clear" (trashcan) also drops this cell's
+                // breakpoints; no-op when none are set.
+                clearCellBreakpoints(cellId);
               }}
               onSubmitDebugger={(text, index) => {
                 actions.setStdinResponse({

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

@@ -24,8 +24,10 @@ import { Tooltip } from "@/components/ui/tooltip";
 import { getCellEditorView } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
 import { SCRATCH_CELL_ID } from "@/core/cells/ids";
+import { toggleBreakpoint } from "@/core/codemirror/cells/debugger-state";
 import { insertDebuggerAtLine } from "@/core/codemirror/editing/debugging";
 import { aiFeaturesEnabledAtom } from "@/core/config/config";
+import { getFeatureFlag } from "@/core/config/feature-flag";
 import { getRequestClient } from "@/core/network/requests";
 import { isStaticNotebook } from "@/core/static/static-state";
 import { isWasm } from "@/core/wasm/utils";
@@ -41,7 +43,8 @@ import {
   extractAllTracebackInfo,
   getTracebackInfo,
 } from "@/utils/traceback";
-import { AIFixButton } from "../errors/auto-fix";
+import { useOpenAiAssistant } from "../chrome/wrapper/useOpenAiAssistant";
+import { AIFixButton, buildFixInChatPrompt } from "../errors/auto-fix";
 import { MangledSegments } from "../errors/mangled-local-chip";
 import { CellLinkTraceback } from "../links/cell-link";
 import type { OnRefactorWithAI } from "../Output";
@@ -71,6 +74,7 @@ export const MarimoTracebackOutput = ({
 
   const lastTracebackLine = lastLine(traceback);
   const aiFeaturesEnabled = useAtomValue(aiFeaturesEnabledAtom);
+  const openAiAssistant = useOpenAiAssistant();
 
   // Get last traceback info
   const tracebackInfo = extractAllTracebackInfo(traceback)?.at(0);
@@ -97,6 +101,12 @@ export const MarimoTracebackOutput = ({
     });
   };
 
+  const openAISidebar = () => {
+    openAiAssistant({
+      prompt: buildFixInChatPrompt(cellId, lastTracebackLine),
+    });
+  };
+
   return (
     <div className="flex flex-col gap-2 min-w-full w-fit">
       <button
@@ -126,6 +136,7 @@ export const MarimoTracebackOutput = ({
             tooltip="Fix with AI"
             openPrompt={() => handleRefactorWithAI(false)}
             applyAutofix={() => handleRefactorWithAI(true)}
+            openChat={openAISidebar}
           />
         )}
         {showDebugger && (
@@ -203,7 +214,14 @@ function lastLine(text: string): string {
 export const replaceTracebackFilenames = (domNode: DOMNode) => {
   const info = getTracebackInfo(domNode);
   if (info?.kind === "cell") {
-    const tooltipContent = <InsertBreakpointContent />;
+    // With the live debugger enabled, toggle a real gutter breakpoint
+    // instead of mutating the user's code with a `breakpoint()` statement.
+    const debuggerEnabled = getFeatureFlag("debugger");
+    const tooltipContent = debuggerEnabled ? (
+      <ToggleBreakpointContent />
+    ) : (
+      <InsertBreakpointContent />
+    );
     return (
       <span className="nb">
         <span className="inline-flex items-center">
@@ -219,6 +237,10 @@ export const replaceTracebackFilenames = (domNode: DOMNode) => {
               >
                 <BugPlayIcon
                   onClick={() => {
+                    if (debuggerEnabled && !isStaticNotebook()) {
+                      toggleBreakpoint(info.cellId, info.lineNumber);
+                      return;
+                    }
                     const view = getCellEditorView(info.cellId);
                     if (view) {
                       insertDebuggerAtLine(view, info.lineNumber);
@@ -285,3 +307,7 @@ const InsertBreakpointContent = () => {
     </>
   );
 };
+
+const ToggleBreakpointContent = () => {
+  return <>Toggle a breakpoint at this line</>;
+};

package/src/components/editor/output/__tests__/traceback.test.tsx

@@ -1,11 +1,14 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { render } from "@testing-library/react";
+import { Provider } from "jotai";
 import { beforeAll, beforeEach, describe, expect, test, vi } from "vitest";
+import { MockRequestClient } from "@/__mocks__/requests";
 import { Tracebacks } from "@/__mocks__/tracebacks";
 import { cellId } from "@/__tests__/branded";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { initialModeAtom } from "@/core/mode";
+import { requestClientAtom } from "@/core/network/requests";
 import { store } from "@/core/state/jotai";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import {
@@ -20,13 +23,16 @@ describe("traceback component", () => {
   beforeEach(() => {
     vi.resetAllMocks();
     store.set(initialModeAtom, "edit");
+    store.set(requestClientAtom, MockRequestClient.create());
   });
 
   test("extracts cell-link", () => {
     const traceback = (
-      <TooltipProvider>
-        <MarimoTracebackOutput traceback={Tracebacks.raw} cellId={cid} />
-      </TooltipProvider>
+      <Provider store={store}>
+        <TooltipProvider>
+          <MarimoTracebackOutput traceback={Tracebacks.raw} cellId={cid} />
+        </TooltipProvider>
+      </Provider>
     );
     const { unmount, getAllByRole } = render(traceback);
 
@@ -44,9 +50,11 @@ describe("traceback component", () => {
 
   test("renames File to Cell for relevant lines", () => {
     const traceback = (
-      <TooltipProvider>
-        <MarimoTracebackOutput traceback={Tracebacks.raw} cellId={cid} />
-      </TooltipProvider>
+      <Provider store={store}>
+        <TooltipProvider>
+          <MarimoTracebackOutput traceback={Tracebacks.raw} cellId={cid} />
+        </TooltipProvider>
+      </Provider>
     );
     const { unmount, container } = render(traceback);
 

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

@@ -35,7 +35,7 @@ import {
 import { Label } from "@/components/ui/label";
 import { NumberField } from "@/components/ui/number-field";
 import { Switch } from "@/components/ui/switch";
-import { outputIsLoading } from "@/core/cells/cell";
+import { outputIsLoading, outputIsStale } from "@/core/cells/cell";
 import type { CellId } from "@/core/cells/ids";
 import type { AppMode } from "@/core/mode";
 import { useIsDragging } from "@/hooks/useIsDragging";
@@ -222,6 +222,7 @@ export const GridLayoutRenderer: React.FC<Props> = ({
               cellId={cell.id}
               output={cell.output}
               status={cell.status}
+              stale={outputIsStale(cell, false)}
               isScrollable={isScrollable}
               side={side}
               hidden={cell.errored || cell.interrupted || cell.stopped}
@@ -288,6 +289,7 @@ export const GridLayoutRenderer: React.FC<Props> = ({
                 cellId={cell.id}
                 output={cell.output}
                 status={cell.status}
+                stale={outputIsStale(cell, false)}
                 isScrollable={false}
                 hidden={false}
               />
@@ -358,6 +360,7 @@ export const GridLayoutRenderer: React.FC<Props> = ({
                 output={cell.output}
                 isScrollable={false}
                 status={cell.status}
+                stale={outputIsStale(cell, false)}
                 hidden={false}
               />
             </div>
@@ -376,6 +379,7 @@ interface GridCellProps extends Pick<CellRuntimeState, "output" | "status"> {
   hidden: boolean;
   isScrollable: boolean;
   side?: GridLayoutCellSide;
+  stale: boolean;
 }
 
 const GridCell = memo(
@@ -389,6 +393,7 @@ const GridCell = memo(
     isScrollable,
     side,
     className,
+    stale,
   }: GridCellProps) => {
     const loading = outputIsLoading(status);
 
@@ -415,7 +420,7 @@ const GridCell = memo(
           allowExpand={false}
           output={output}
           cellId={cellId}
-          stale={loading}
+          stale={stale}
           loading={loading}
         />
       </div>

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

@@ -29,6 +29,7 @@ import { outputIsLoading, outputIsStale } from "@/core/cells/cell";
 import type { CellId } from "@/core/cells/ids";
 import { isOutputEmpty } from "@/core/cells/outputs";
 import type { CellData, CellRuntimeState } from "@/core/cells/types";
+import { getReadonlyCodeDisplay } from "@/core/cells/readonly-code-display";
 import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
 import { useResolvedMarimoConfig } from "@/core/config/config";
 import { CSSClasses, KnownQueryParams } from "@/core/constants";
@@ -384,6 +385,8 @@ const VerticalCell = memo(
 
       // Hide the code if it's pure markdown and there's an output, or if the code is empty
       const hideCode = shouldHideCode(code, output);
+      // Only unwrap SQL when the code will actually be rendered.
+      const display = hideCode ? null : getReadonlyCodeDisplay(code);
 
       return (
         <div
@@ -393,11 +396,12 @@ const VerticalCell = memo(
           {...cellDomProps(cellId, name)}
         >
           {cellOutputArea === "above" && outputArea}
-          {!hideCode && (
+          {display && (
             <div className="tray">
               <ReadonlyCode
-                initiallyHideCode={config.hide_code || kiosk}
-                code={code}
+                initiallyHideCode={config.hide_code}
+                code={display.code}
+                language={display.language}
               />
             </div>
           )}