@marimo-team/frontend 0.23.14-dev0 → 0.23.14-dev10

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();
+  });
+});

package/src/core/ai/config.ts

@@ -60,7 +60,7 @@ export const useModelChange = () => {
       },
     };
 
-    saveConfig(newConfig);
+    await saveConfig(newConfig);
   };
 
   const saveModeChange = async (newMode: CopilotMode) => {
@@ -71,7 +71,7 @@ export const useModelChange = () => {
       },
     };
 
-    saveConfig(newConfig);
+    await saveConfig(newConfig);
   };
 
   return { saveModelChange, saveModeChange };

package/src/core/ai/state.ts

@@ -21,6 +21,17 @@ export interface AiCompletionCell {
 
 export const aiCompletionCellAtom = atom<AiCompletionCell | null>(null);
 
+/**
+ * A prompt queued to be delivered to the AI assistant panel.
+ * The active panel consumes this on mount/when ready, then clears it.
+ */
+export interface PendingAiPrompt {
+  prompt: string;
+  submit: boolean;
+}
+
+export const pendingAiPromptAtom = atom<PendingAiPrompt | null>(null);
+
 const INCLUDE_OTHER_CELLS_KEY = "marimo:ai:includeOtherCells";
 export const includeOtherCellsAtom = atomWithStorage<boolean>(
   INCLUDE_OTHER_CELLS_KEY,

package/src/core/codemirror/completion/__tests__/signature-hint.test.ts

@@ -0,0 +1,94 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { EditorState } from "@codemirror/state";
+import { EditorView, type Tooltip } from "@codemirror/view";
+import { describe, expect, it } from "vitest";
+import {
+  asSignatureHint,
+  setSignatureHintEffect,
+  signatureHintField,
+} from "../signature-hint";
+
+function fakeTooltip(pos: number): Tooltip {
+  return {
+    pos,
+    above: true,
+    create: () => ({ dom: document.createElement("div") }),
+  };
+}
+
+function stateWithHint(doc: string, pos: number): EditorState {
+  const state = EditorState.create({
+    doc,
+    extensions: [signatureHintField],
+  });
+  return state.update({ effects: setSignatureHintEffect.of(fakeTooltip(pos)) })
+    .state;
+}
+
+describe("signatureHintField", () => {
+  it("starts empty", () => {
+    const state = EditorState.create({ extensions: [signatureHintField] });
+    expect(state.field(signatureHintField)).toBeNull();
+  });
+
+  it("shows a tooltip when the effect is dispatched", () => {
+    const state = stateWithHint("plt.plot(", 9);
+    expect(state.field(signatureHintField)?.pos).toBe(9);
+  });
+
+  it("clears the tooltip when the effect dispatches null", () => {
+    let state = stateWithHint("plt.plot(", 9);
+    state = state.update({
+      effects: setSignatureHintEffect.of(null),
+    }).state;
+    expect(state.field(signatureHintField)).toBeNull();
+  });
+
+  it("dismisses the tooltip on a selection-only change", () => {
+    let state = stateWithHint("plt.plot(x)", 9);
+    state = state.update({ selection: { anchor: 0 } }).state;
+    expect(state.field(signatureHintField)).toBeNull();
+  });
+
+  it("keeps and re-anchors the tooltip across edits", () => {
+    let state = stateWithHint("plt.plot(", 9);
+    // Insert before the tooltip position; it should shift to stay anchored.
+    state = state.update({ changes: { from: 0, insert: "xy" } }).state;
+    expect(state.field(signatureHintField)?.pos).toBe(11);
+  });
+});
+
+describe("asSignatureHint", () => {
+  it("nests the content so descendant styling applies", () => {
+    const content = document.createElement("span");
+    content.classList.add("mo-cm-tooltip", "docs-documentation");
+    const base: Tooltip = {
+      pos: 0,
+      create: () => ({ dom: content, resize: false }),
+    };
+
+    const view = new EditorView({ state: EditorState.create({}) });
+    const { dom } = asSignatureHint(base).create(view);
+
+    // Outer wrapper carries the tooltip sizing class...
+    expect(dom.classList.contains("mo-cm-tooltip")).toBe(true);
+    // ...and the documentation content is a descendant (not the same node),
+    // so `.cm-tooltip .docs-documentation` padding/font rules match.
+    expect(dom).not.toBe(content);
+    expect(dom.querySelector(".docs-documentation")).toBe(content);
+
+    view.destroy();
+  });
+
+  it("preserves other tooltip fields", () => {
+    const base: Tooltip = {
+      pos: 5,
+      above: true,
+      create: () => ({ dom: document.createElement("span"), resize: false }),
+    };
+    const wrapped = asSignatureHint(base);
+    expect(wrapped.pos).toBe(5);
+    expect(wrapped.above).toBe(true);
+  });
+});

package/src/core/codemirror/completion/completer.ts

@@ -9,6 +9,7 @@ import { documentationAtom } from "@/core/documentation/state";
 import { store } from "@/core/state/jotai";
 import { Logger } from "../../../utils/Logger";
 import { AUTOCOMPLETER, Autocompleter } from "./Autocompleter";
+import { asSignatureHint, setSignatureHintEffect } from "./signature-hint";
 
 /**
  * Completion source for Python, using Jedi.
@@ -36,10 +37,12 @@ export const pythonCompletionSource: CompletionSource = async (
     cellId: cellId,
   });
   if (!result) {
+    context.view?.dispatch({ effects: setSignatureHintEffect.of(null) });
     return null;
   }
 
-  // If it is a tooltip, show it as a Tooltip instead of a completion
+  // If it is a tooltip (e.g. a signature after `(` or `,`), show it as a
+  // Tooltip instead of a completion.
   const tooltip = Autocompleter.asHoverTooltip({
     position: context.pos,
     message: result,
@@ -50,6 +53,14 @@ export const pythonCompletionSource: CompletionSource = async (
       documentation: tooltip.html ?? null,
     });
   }
+  // Surface the signature as a floating hint near the cursor (the LSP path has
+  // its own signature help), and clear any stale hint when we instead have a
+  // real completion list.
+  context.view?.dispatch({
+    effects: setSignatureHintEffect.of(
+      tooltip ? asSignatureHint(tooltip) : null,
+    ),
+  });
   if (tooltip) {
     return null;
   }

package/src/core/codemirror/completion/signature-hint.ts

@@ -0,0 +1,68 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { StateEffect, StateField } from "@codemirror/state";
+import { showTooltip, type Tooltip } from "@codemirror/view";
+
+/**
+ * Effect to set (or clear, with `null`) the floating signature hint.
+ */
+export const setSignatureHintEffect = StateEffect.define<Tooltip | null>();
+
+/**
+ * Wrap a tooltip so it renders like the completion popup's info box.
+ *
+ * CodeMirror adds `cm-tooltip` directly to the DOM node returned by `create`,
+ * so the documentation content ends up on the same element as `cm-tooltip`.
+ * Our styling for padding/font (`.cm-tooltip .docs-documentation`) is a
+ * descendant selector, so we nest the content one level deeper to make it
+ * apply — mirroring how CodeMirror nests completion info inside its own
+ * wrapper. The outer `mo-cm-tooltip` class picks up the shared tooltip sizing.
+ */
+export function asSignatureHint(tooltip: Tooltip): Tooltip {
+  return {
+    ...tooltip,
+    create: (view) => {
+      const { dom: content, ...rest } = tooltip.create(view);
+      const dom = document.createElement("div");
+      dom.classList.add("mo-cm-tooltip");
+      dom.append(content);
+      return { ...rest, dom };
+    },
+  };
+}
+
+/**
+ * Holds the floating "signature hint" shown after typing `(` or `,` inside a
+ * call on the non-LSP (Jedi) completion path.
+ *
+ * The LSP path has its own signature help; this fills the gap for users
+ * without a language server. The completion source (`pythonCompletionSource`)
+ * drives it: it dispatches `setSignatureHintEffect` with the tooltip when the
+ * backend returns a signature and with `null` otherwise. The hint is also
+ * cleared when the cursor moves via a selection-only change (e.g. clicking
+ * away or arrowing out of the call), and kept anchored across edits so it
+ * doesn't flicker while a fresh result is in flight.
+ */
+export const signatureHintField = StateField.define<Tooltip | null>({
+  create: () => null,
+  update(tooltip, tr) {
+    for (const effect of tr.effects) {
+      if (effect.is(setSignatureHintEffect)) {
+        return effect.value;
+      }
+    }
+    if (!tooltip) {
+      return null;
+    }
+    // Cursor moved without editing (click / arrow key): dismiss the hint.
+    if (tr.selection && !tr.docChanged) {
+      return null;
+    }
+    // Keep the hint anchored across edits; the completion source refreshes or
+    // clears it as new results arrive.
+    if (tr.docChanged) {
+      return { ...tooltip, pos: tr.changes.mapPos(tooltip.pos) };
+    }
+    return tooltip;
+  },
+  provide: (field) => showTooltip.from(field),
+});

package/src/core/codemirror/language/languages/python.ts

@@ -31,6 +31,7 @@ import { Logger } from "@/utils/Logger";
 import { once } from "@/utils/once";
 import { cellActionsState } from "../../cells/state";
 import { pythonCompletionSource } from "../../completion/completer";
+import { signatureHintField } from "../../completion/signature-hint";
 import type { PlaceholderType } from "../../config/types";
 import { FederatedLanguageServerClient } from "../../lsp/federated-lsp";
 import { createLspMarkdownRenderer } from "../../lsp/markdown-renderer";
@@ -376,10 +377,15 @@ export class PythonLanguageAdapter implements LanguageAdapter<{}> {
         ];
       }
 
-      return autocompletion({
-        ...autocompleteOptions,
-        override: [pythonCompletionSource],
-      });
+      return [
+        autocompletion({
+          ...autocompleteOptions,
+          override: [pythonCompletionSource],
+        }),
+        // The Jedi path has no built-in signature help; show a floating hint
+        // fed by `pythonCompletionSource` (the LSP path handles this itself).
+        signatureHintField,
+      ];
     };
 
     return [

package/src/core/codemirror/utils.ts

@@ -2,6 +2,7 @@
 import type { EditorState, Transaction } from "@codemirror/state";
 import type { EditorView, ViewUpdate } from "@codemirror/view";
 import { getCM } from "@replit/codemirror-vim";
+import type { ReactCodeMirrorRef } from "@uiw/react-codemirror";
 
 export function isAtStartOfEditor(ev: { state: EditorState }) {
   const main = ev.state.selection.main;
@@ -37,6 +38,20 @@ export function moveToEndOfEditor(ev: EditorView | undefined) {
   });
 }
 
+/** We delay the focus and move to end of the editor until React has rendered the prefilled value. */
+export function focusInputAndMoveToEnd(
+  ref: React.RefObject<ReactCodeMirrorRef | null>,
+) {
+  requestAnimationFrame(() => {
+    const view = ref.current?.view;
+    if (!view) {
+      return;
+    }
+    view.focus();
+    moveToEndOfEditor(view);
+  });
+}
+
 export function isInVimMode(ev: EditorView): boolean {
   return getCM(ev)?.state.vim != null;
 }

package/src/core/edit-app.tsx

@@ -13,6 +13,7 @@ import { AppHeader } from "@/components/editor/header/app-header";
 import { FilenameForm } from "@/components/editor/header/filename-form";
 import { MultiCellActionToolbar } from "@/components/editor/navigation/multi-cell-action-toolbar";
 import { ViewerBanner } from "@/components/editor/viewer-banner";
+import { ProgressiveBoundary } from "@/components/lifecycle/ProgressiveBoundary";
 import { cn } from "@/utils/cn";
 import { Paths } from "@/utils/paths";
 import { AppContainer } from "../components/editor/app-container";
@@ -64,7 +65,6 @@ export const EditApp: React.FC<AppProps> = ({
     useCellActions();
   const viewState = useAtomValue(viewStateAtom);
   const numColumns = useAtomValue(numColumnsAtom);
-  const hasCells = useAtomValue(hasCellsAtom);
   const filename = useFilename();
   const setLastSavedNotebook = useSetAtom(lastSavedNotebookAtom);
   const { sendComponentValues, sendInterrupt } = useRequestClient();
@@ -181,13 +181,16 @@ export const EditApp: React.FC<AppProps> = ({
 
         <ViewerBanner />
 
-        {/* Don't render until we have a single cell */}
-        {hasCells && (
+        {/* Don't render until we have a single cell. NotStartedConnectionAlert
+            still covers the "no remote runtime started" prompt. */}
+        <ProgressiveBoundary
+          requires={hasCellsAtom}
+          fallback={<NotStartedConnectionAlert />}
+        >
           <CellsRenderer appConfig={appConfig} mode={viewState.mode}>
             {editableCellsArray}
           </CellsRenderer>
-        )}
-        {!hasCells && <NotStartedConnectionAlert />}
+        </ProgressiveBoundary>
       </AppContainer>
       <MultiCellActionToolbar />
       {!hideControls && (