@marimo-team/islands 0.23.14-dev6 → 0.23.14-dev61

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

@@ -0,0 +1,79 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeAll, describe, expect, it } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { ReadonlyCode } from "../readonly-python-code";
+
+beforeAll(() => {
+  SetupMocks.resizeObserver();
+});
+
+/**
+ * The only button is the show/hide toggle: copy is disabled and the
+ * insert-cell button is off by default.
+ */
+function renderReadonly(props: { initiallyHideCode?: boolean }) {
+  return render(
+    <TooltipProvider>
+      <ReadonlyCode code="x = 1" showCopyCode={false} {...props} />
+    </TooltipProvider>,
+  );
+}
+
+function isCollapsed(root: ParentNode) {
+  return root.querySelector(".cm")?.classList.contains("opacity-20") ?? false;
+}
+
+describe("ReadonlyCode", () => {
+  it("starts collapsed when initiallyHideCode is true", () => {
+    const { container } = renderReadonly({ initiallyHideCode: true });
+    expect(isCollapsed(container)).toBe(true);
+  });
+
+  it("starts expanded when initiallyHideCode is false", () => {
+    const { container } = renderReadonly({ initiallyHideCode: false });
+    expect(isCollapsed(container)).toBe(false);
+  });
+
+  it("starts expanded when initiallyHideCode is unset", () => {
+    const { container } = renderReadonly({});
+    expect(isCollapsed(container)).toBe(false);
+  });
+
+  it("toggles visibility locally on click", () => {
+    const { container } = renderReadonly({ initiallyHideCode: true });
+    const toggle = screen.getByRole("button");
+
+    fireEvent.click(toggle);
+    expect(isCollapsed(container)).toBe(false);
+
+    fireEvent.click(toggle);
+    expect(isCollapsed(container)).toBe(true);
+  });
+
+  it("keeps each instance's visibility independent", () => {
+    const { container } = render(
+      <TooltipProvider>
+        <ReadonlyCode
+          code="a = 1"
+          showCopyCode={false}
+          initiallyHideCode={true}
+        />
+        <ReadonlyCode
+          code="b = 2"
+          showCopyCode={false}
+          initiallyHideCode={true}
+        />
+      </TooltipProvider>,
+    );
+    const [firstToggle] = screen.getAllByRole("button");
+    const [first, second] = container.querySelectorAll(".cm");
+
+    fireEvent.click(firstToggle);
+
+    expect(first.classList.contains("opacity-20")).toBe(false);
+    expect(second.classList.contains("opacity-20")).toBe(true);
+  });
+});

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/ImageOutput.tsx

@@ -17,18 +17,32 @@ export const ImageOutput = ({
   height,
   className,
 }: Props): JSX.Element => {
-  // Convert numeric values to pixel strings, pass string values (like "100%") as-is
+  // Numeric dimensions are set as HTML attributes rather than inline styles.
+  // Attributes give the browser the image's intrinsic size and aspect ratio,
+  // but can still be overridden by stylesheet rules (`max-width: 100%;
+  // height: auto` from preflight), so images shrink proportionally in
+  // width-constrained containers like mo.hstack. Inline styles would win
+  // over `height: auto` and distort the aspect ratio.
+  //
+  // String values like "100%" are only valid in CSS, so they go in the
+  // style attribute.
   const style: React.CSSProperties = {};
-  if (width !== undefined) {
-    style.width = typeof width === "number" ? `${width}px` : width;
+  if (typeof width === "string") {
+    style.width = width;
   }
-  if (height !== undefined) {
-    style.height = typeof height === "number" ? `${height}px` : height;
+  if (typeof height === "string") {
+    style.height = height;
   }
 
   return (
     <span className={className}>
-      <img src={src} alt={alt} style={style} />
+      <img
+        src={src}
+        alt={alt}
+        width={typeof width === "number" ? width : undefined}
+        height={typeof height === "number" ? height : undefined}
+        style={style}
+      />
     </span>
   );
 };

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</>;
+};