@marimo-team/frontend 0.23.14-dev2 → 0.23.14-dev21

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/output/MarimoTracebackOutput.tsx

@@ -41,7 +41,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 +72,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 +99,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 +134,7 @@ export const MarimoTracebackOutput = ({
             tooltip="Fix with AI"
             openPrompt={() => handleRefactorWithAI(false)}
             applyAutofix={() => handleRefactorWithAI(true)}
+            openChat={openAISidebar}
           />
         )}
         {showDebugger && (

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/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}
+                code={display.code}
+                language={display.language}
               />
             </div>
           )}

package/src/components/lifecycle/ProgressiveBoundary.tsx

@@ -0,0 +1,42 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { type Atom, useAtomValue } from "jotai";
+import type React from "react";
+import type { PropsWithChildren } from "react";
+import { useDelayElapsed } from "@/hooks/useDelayElapsed";
+
+interface Props {
+  /** Children render once this atom resolves true. */
+  requires: Atom<boolean>;
+  fallback?: React.ReactNode;
+  /** Suppress the fallback for this many ms; avoids spinner flashes. */
+  delay?: number;
+}
+
+/**
+ * ```tsx
+ * <ProgressiveBoundary requires={canPaintAtom} delay={2000} fallback={<Spinner />}>
+ *   <Editor />
+ * </ProgressiveBoundary>
+ * ```
+ */
+export const ProgressiveBoundary: React.FC<PropsWithChildren<Props>> = ({
+  requires,
+  fallback = null,
+  delay = 0,
+  children,
+}) => {
+  const ready = useAtomValue(requires);
+  // Key the delay off `ready` so the suppression window re-arms whenever the
+  // gate closes again — otherwise a `true → false` flip would show the
+  // fallback immediately and reintroduce the flash `delay` is meant to avoid.
+  const delayElapsed = useDelayElapsed(ready ? 0 : delay);
+
+  if (ready) {
+    return children;
+  }
+  if (!delayElapsed) {
+    return null;
+  }
+  return fallback;
+};

package/src/components/lifecycle/RuntimeStatusBadge.tsx

@@ -0,0 +1,59 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useAtomValue } from "jotai";
+import { AlertCircleIcon } from "lucide-react";
+import type React from "react";
+import { Spinner } from "@/components/icons/spinner";
+import { Tooltip } from "@/components/ui/tooltip";
+import { type AdapterState, runtimeAdapterAtom } from "@/core/runtime/adapter";
+
+/**
+ * Footer pill that surfaces the active runtime's connection/initialization
+ * status via its adapter. Hides itself once the runtime is ready.
+ */
+export const RuntimeStatusBadge: React.FC = () => {
+  const adapter = useAtomValue(runtimeAdapterAtom);
+  const state = useAtomValue(adapter.state);
+
+  if (state.kind === "ready") {
+    return null;
+  }
+
+  const icon =
+    state.kind === "failed" ? (
+      <AlertCircleIcon className="w-4 h-4 text-destructive" />
+    ) : (
+      <Spinner size="small" />
+    );
+
+  return (
+    <Tooltip
+      content={
+        <div className="text-sm whitespace-pre-line">
+          {tooltipFor(state, adapter.label)}
+        </div>
+      }
+      data-testid="footer-runtime-status"
+    >
+      <button
+        type="button"
+        className="p-1 hover:bg-accent rounded flex items-center gap-1.5 text-xs text-muted-foreground"
+        data-testid="runtime-status-footer"
+      >
+        {icon}
+        <span>{adapter.label}</span>
+      </button>
+    </Tooltip>
+  );
+};
+
+function tooltipFor(state: AdapterState, label: string): string {
+  switch (state.kind) {
+    case "failed":
+      return state.error.message;
+    case "connecting":
+      return state.progress?.label ?? `${label} starting…`;
+    case "ready":
+      return `${label} ready`;
+  }
+}

package/src/components/lifecycle/__tests__/ProgressiveBoundary.test.tsx

@@ -0,0 +1,147 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, render, screen } from "@testing-library/react";
+import { atom, createStore, Provider } from "jotai";
+import type { ReactNode } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ProgressiveBoundary } from "../ProgressiveBoundary";
+
+describe("ProgressiveBoundary", () => {
+  let store: ReturnType<typeof createStore>;
+
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <Provider store={store}>{children}</Provider>
+  );
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    store = createStore();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("renders children once the capability resolves true", () => {
+    const capability = atom(true);
+    render(
+      <ProgressiveBoundary requires={capability}>
+        <span>content</span>
+      </ProgressiveBoundary>,
+      { wrapper },
+    );
+    expect(screen.getByText("content")).toBeInTheDocument();
+  });
+
+  it("blocks children with no fallback when capability is false", () => {
+    const capability = atom(false);
+    const { container } = render(
+      <ProgressiveBoundary requires={capability}>
+        <span>content</span>
+      </ProgressiveBoundary>,
+      { wrapper },
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("renders the fallback when capability is false", () => {
+    const capability = atom(false);
+    render(
+      <ProgressiveBoundary requires={capability} fallback={<span>wait</span>}>
+        <span>content</span>
+      </ProgressiveBoundary>,
+      { wrapper },
+    );
+    expect(screen.getByText("wait")).toBeInTheDocument();
+    expect(screen.queryByText("content")).not.toBeInTheDocument();
+  });
+
+  it("renders children once a previously-false capability flips true", () => {
+    const capability = atom(false);
+    render(
+      <ProgressiveBoundary requires={capability} fallback={<span>wait</span>}>
+        <span>content</span>
+      </ProgressiveBoundary>,
+      { wrapper },
+    );
+    expect(screen.getByText("wait")).toBeInTheDocument();
+
+    act(() => store.set(capability, true));
+    expect(screen.getByText("content")).toBeInTheDocument();
+  });
+
+  it("reopens the gate when a capability flips back to false", () => {
+    const capability = atom(true);
+    render(
+      <ProgressiveBoundary requires={capability} fallback={<span>wait</span>}>
+        <span>content</span>
+      </ProgressiveBoundary>,
+      { wrapper },
+    );
+    expect(screen.getByText("content")).toBeInTheDocument();
+
+    act(() => store.set(capability, false));
+    expect(screen.queryByText("content")).not.toBeInTheDocument();
+    expect(screen.getByText("wait")).toBeInTheDocument();
+  });
+
+  it("delays the fallback by `delay` ms", () => {
+    const capability = atom(false);
+    render(
+      <ProgressiveBoundary
+        requires={capability}
+        delay={2000}
+        fallback={<span>wait</span>}
+      >
+        <span>content</span>
+      </ProgressiveBoundary>,
+      { wrapper },
+    );
+    // Before the delay elapses, no fallback.
+    expect(screen.queryByText("wait")).not.toBeInTheDocument();
+
+    act(() => vi.advanceTimersByTime(2000));
+    expect(screen.getByText("wait")).toBeInTheDocument();
+  });
+
+  it("re-arms the delay when the gate closes again", () => {
+    const capability = atom(true);
+    render(
+      <ProgressiveBoundary
+        requires={capability}
+        delay={2000}
+        fallback={<span>wait</span>}
+      >
+        <span>content</span>
+      </ProgressiveBoundary>,
+      { wrapper },
+    );
+    expect(screen.getByText("content")).toBeInTheDocument();
+
+    // Gate closes: fallback should stay suppressed until the delay re-elapses.
+    act(() => store.set(capability, false));
+    expect(screen.queryByText("wait")).not.toBeInTheDocument();
+    expect(screen.queryByText("content")).not.toBeInTheDocument();
+
+    act(() => vi.advanceTimersByTime(2000));
+    expect(screen.getByText("wait")).toBeInTheDocument();
+  });
+
+  it("skips the fallback entirely if the gate opens before the delay", () => {
+    const capability = atom(false);
+    render(
+      <ProgressiveBoundary
+        requires={capability}
+        delay={5000}
+        fallback={<span>wait</span>}
+      >
+        <span>content</span>
+      </ProgressiveBoundary>,
+      { wrapper },
+    );
+    expect(screen.queryByText("wait")).not.toBeInTheDocument();
+
+    act(() => store.set(capability, true));
+    expect(screen.getByText("content")).toBeInTheDocument();
+  });
+});

package/src/components/lifecycle/__tests__/RuntimeStatusBadge.test.tsx

@@ -0,0 +1,72 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render, screen } from "@testing-library/react";
+import { atom, createStore, Provider } from "jotai";
+import type { ReactNode } from "react";
+import { beforeEach, describe, expect, it } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import {
+  type AdapterState,
+  type RuntimeAdapter,
+  runtimeAdapterAtom,
+} from "@/core/runtime/adapter";
+import { RuntimeStatusBadge } from "../RuntimeStatusBadge";
+
+function makeAdapter(initial: AdapterState): RuntimeAdapter {
+  return {
+    kind: "remote",
+    label: "Kernel",
+    capabilities: {
+      canHealthCheck: true,
+      canShutdown: true,
+      canRestart: true,
+      supportsLsp: true,
+    },
+    state: atom<AdapterState>(initial),
+  };
+}
+
+let store: ReturnType<typeof createStore>;
+
+const wrapper = ({ children }: { children: ReactNode }) => (
+  <Provider store={store}>
+    <TooltipProvider>{children}</TooltipProvider>
+  </Provider>
+);
+
+beforeEach(() => {
+  store = createStore();
+});
+
+describe("RuntimeStatusBadge", () => {
+  it("hides itself when the runtime is ready", () => {
+    store.set(runtimeAdapterAtom, makeAdapter({ kind: "ready" }));
+    const { container } = render(<RuntimeStatusBadge />, { wrapper });
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("shows a labeled spinner pill while connecting", () => {
+    store.set(
+      runtimeAdapterAtom,
+      makeAdapter({
+        kind: "connecting",
+        progress: { label: "Loading Pyodide…" },
+      }),
+    );
+    render(<RuntimeStatusBadge />, { wrapper });
+    expect(screen.getByTestId("runtime-status-footer")).toBeInTheDocument();
+    expect(screen.getByText("Kernel")).toBeInTheDocument();
+  });
+
+  it("shows the failure icon when the runtime fails", () => {
+    store.set(
+      runtimeAdapterAtom,
+      makeAdapter({
+        kind: "failed",
+        error: { message: "Boom", errorKind: "init" },
+      }),
+    );
+    render(<RuntimeStatusBadge />, { wrapper });
+    expect(screen.getByTestId("runtime-status-footer")).toBeInTheDocument();
+  });
+});