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

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/components/slides/__tests__/slide.test.tsx

@@ -0,0 +1,33 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import type { CellId } from "@/core/cells/ids";
+import type { OutputMessage } from "@/core/kernel/messages";
+import type { Seconds } from "@/utils/time";
+import { Slide } from "../slide";
+
+const cellId = "cell-1" as CellId;
+
+const output: OutputMessage = {
+  channel: "output",
+  mimetype: "text/plain",
+  data: "hello",
+  timestamp: 0 as Seconds,
+};
+
+describe("Slide", () => {
+  it("does not grey out the output when stale is false", () => {
+    const { container } = render(
+      <Slide cellId={cellId} status="running" output={output} stale={false} />,
+    );
+    expect(container.querySelector(".marimo-output-stale")).toBeNull();
+  });
+
+  it("greys out the output when stale is true", () => {
+    const { container } = render(
+      <Slide cellId={cellId} status="queued" output={output} stale={true} />,
+    );
+    expect(container.querySelector(".marimo-output-stale")).not.toBeNull();
+  });
+});

package/src/components/slides/minimap.tsx

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { useDeleteCellCallback } from "@/components/editor/cell/useDeleteCell";
+import { outputIsStale } from "@/core/cells/cell";
 import { useCellActions, useCellIds } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
 import type { CellColumnId } from "@/utils/id-tree";
@@ -670,7 +671,12 @@ const SlideThumbnailCard = ({
           {isNoOutput ? (
             <MiniCodePreview code={cell.code} />
           ) : (
-            <Slide cellId={cell.id} status={cell.status} output={cell.output} />
+            <Slide
+              cellId={cell.id}
+              status={cell.status}
+              output={cell.output}
+              stale={outputIsStale(cell, false)}
+            />
           )}
         </div>
       )}

package/src/components/slides/reveal-component.tsx

@@ -16,6 +16,7 @@ import { Slide as CellOutputSlide } from "@/components/slides/slide";
 import { Button } from "@/components/ui/button";
 import { useFullScreenElement } from "@/components/ui/fullscreen";
 import { Tooltip } from "@/components/ui/tooltip";
+import { outputIsStale } from "@/core/cells/cell";
 import type { CellId } from "@/core/cells/ids";
 import type { RuntimeCell } from "@/core/cells/types";
 import type { RevealApi, RevealConfig } from "reveal.js";
@@ -333,6 +334,7 @@ const SubslideView = ({
                     cellId={cell.id}
                     status={cell.status}
                     output={cell.output}
+                    stale={outputIsStale(cell, false)}
                   />
                 );
               }
@@ -397,6 +399,7 @@ const ParkedPreviewContent = ({
       cellId={cell.id}
       status={cell.status}
       output={cell.output}
+      stale={outputIsStale(cell, false)}
     />
   );
 };

package/src/components/slides/slide-cell-view.tsx

@@ -13,6 +13,7 @@ import { StopButton } from "@/components/editor/cell/StopButton";
 import { useRunCell } from "@/components/editor/cell/useRunCells";
 import { Slide as CellOutputSlide } from "@/components/slides/slide";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
+import { outputIsStale } from "@/core/cells/cell";
 import { useCellActions } from "@/core/cells/cells";
 import { autoInstantiateAtom, useUserConfig } from "@/core/config/config";
 import {
@@ -26,7 +27,7 @@ import { connectionAtom } from "@/core/network/connection";
 import { useTheme } from "@/theme/useTheme";
 import { cn } from "@/utils/cn";
 import { ReadonlyCode } from "../editor/code/readonly-python-code";
-import { languageAdapterFromCode } from "@/core/codemirror/language/extension";
+import { getReadonlyCodeDisplay } from "@/core/cells/readonly-code-display";
 
 type RuntimeCell = CellRuntimeState & CellData;
 
@@ -96,6 +97,7 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
       cellId={cell.id}
       status={cell.status}
       output={cell.output}
+      stale={outputIsStale(cell, false)}
     />
   );
 
@@ -188,22 +190,24 @@ export const SlideCellReadOnlyView = ({ cell }: { cell: RuntimeCell }) => {
   const [userConfig] = useUserConfig();
   const cellOutputPosition = userConfig.display.cell_output;
 
-  const language = useMemo(() => {
-    const adapter = languageAdapterFromCode(cell.code.trim());
-    return adapter.type === "sql" ? "sql" : "python";
-  }, [cell.code]);
+  const display = useMemo(() => getReadonlyCodeDisplay(cell.code), [cell.code]);
 
   const output = (
     <CellOutputSlide
       cellId={cell.id}
       status={cell.status}
       output={cell.output}
+      stale={outputIsStale(cell, false)}
     />
   );
 
   const editor = (
     <div className="marimo-cell">
-      <ReadonlyCode code={cell.code} language={language} showHideCode={false} />
+      <ReadonlyCode
+        code={display.code}
+        language={display.language}
+        showHideCode={false}
+      />
     </div>
   );
 

package/src/components/slides/slide.tsx

@@ -11,19 +11,22 @@ interface SlideContentProps extends Pick<
   "output" | "status"
 > {
   cellId: CellId;
+  stale: boolean;
 }
 
-export const Slide = memo(({ output, cellId, status }: SlideContentProps) => {
-  const loading = outputIsLoading(status);
-  return (
-    <OutputArea
-      className="contents"
-      allowExpand={false}
-      output={output}
-      cellId={cellId}
-      stale={loading}
-      loading={loading}
-    />
-  );
-});
+export const Slide = memo(
+  ({ output, cellId, status, stale }: SlideContentProps) => {
+    const loading = outputIsLoading(status);
+    return (
+      <OutputArea
+        className="contents"
+        allowExpand={false}
+        output={output}
+        cellId={cellId}
+        stale={stale}
+        loading={loading}
+      />
+    );
+  },
+);
 Slide.displayName = "Slide";

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/context/__tests__/registry.test.ts

@@ -176,6 +176,33 @@ class FileContextProvider extends AIContextProvider<FileContextItem> {
   }
 }
 
+// Second mock provider with the same context type as MockContextProvider
+class SecondaryMockProvider extends AIContextProvider<MockContextItem> {
+  readonly title = "Secondary Mock Items";
+  readonly mentionPrefix = "@";
+  readonly contextType = "mock";
+
+  getItems(): MockContextItem[] {
+    return [
+      {
+        type: "mock",
+        uri: this.asURI("secondary-item"),
+        name: "Secondary Item",
+        description: "From the second mock provider",
+        data: { value: "secondary" },
+      },
+    ];
+  }
+
+  formatContext(item: MockContextItem): string {
+    return `Secondary: ${item.name}`;
+  }
+
+  formatCompletion(item: MockContextItem): Completion {
+    return this.createBasicCompletion(item);
+  }
+}
+
 describe("AIContextProvider", () => {
   let provider: MockContextProvider;
 
@@ -411,6 +438,95 @@ describe("AIContextRegistry", () => {
     });
   });
 
+  describe("resolveItems", () => {
+    let mockGetItems: ReturnType<typeof vi.spyOn>;
+    let fileGetItems: ReturnType<typeof vi.spyOn>;
+
+    beforeEach(() => {
+      registry.register(mockProvider);
+      registry.register(fileProvider);
+      mockGetItems = vi.spyOn(mockProvider, "getItems");
+      fileGetItems = vi.spyOn(fileProvider, "getItems");
+    });
+
+    it("should resolve valid IDs from the matching providers only", () => {
+      const resolved = registry.resolveItems([
+        "mock://item1",
+        "file://config.py",
+      ] as ContextLocatorId[]);
+
+      expect(resolved).toHaveLength(2);
+      expect(resolved.map((item) => item.uri)).toEqual([
+        "mock://item1",
+        "file://config.py",
+      ]);
+      expect(mockGetItems).toHaveBeenCalledTimes(1);
+      expect(fileGetItems).toHaveBeenCalledTimes(1);
+    });
+
+    it("should not call unrelated providers", () => {
+      registry.resolveItems(["mock://item1"] as ContextLocatorId[]);
+
+      expect(mockGetItems).toHaveBeenCalledTimes(1);
+      expect(fileGetItems).not.toHaveBeenCalled();
+    });
+
+    it("should ignore unknown or invalid URIs", () => {
+      const resolved = registry.resolveItems([
+        "mock://nonexistent",
+        "unknown://item",
+        "malformed" as ContextLocatorId,
+      ] as ContextLocatorId[]);
+
+      expect(resolved).toEqual([]);
+      expect(mockGetItems).toHaveBeenCalledTimes(1);
+      expect(fileGetItems).not.toHaveBeenCalled();
+    });
+
+    it("should return empty array for empty input", () => {
+      expect(registry.resolveItems([])).toEqual([]);
+      expect(mockGetItems).not.toHaveBeenCalled();
+      expect(fileGetItems).not.toHaveBeenCalled();
+    });
+
+    it("should preserve requested order when providers are interleaved", () => {
+      const resolved = registry.resolveItems([
+        "mock://item1",
+        "file://config.py",
+        "mock://item2",
+        "file://utils/helpers.py",
+      ] as ContextLocatorId[]);
+
+      expect(resolved.map((item) => item.uri)).toEqual([
+        "mock://item1",
+        "file://config.py",
+        "mock://item2",
+        "file://utils/helpers.py",
+      ]);
+      // Each provider is still queried only once, regardless of interleaving.
+      expect(mockGetItems).toHaveBeenCalledTimes(1);
+      expect(fileGetItems).toHaveBeenCalledTimes(1);
+    });
+
+    it("should resolve items from all providers that share a context type", () => {
+      const secondaryProvider = new SecondaryMockProvider();
+      const secondaryGetItems = vi.spyOn(secondaryProvider, "getItems");
+      registry.register(secondaryProvider);
+
+      const resolved = registry.resolveItems([
+        "mock://item1",
+        "mock://secondary-item",
+      ] as ContextLocatorId[]);
+
+      expect(resolved.map((item) => item.uri)).toEqual([
+        "mock://item1",
+        "mock://secondary-item",
+      ]);
+      expect(mockGetItems).toHaveBeenCalledTimes(1);
+      expect(secondaryGetItems).toHaveBeenCalledTimes(1);
+    });
+  });
+
   describe("getContextInfo", () => {
     beforeEach(() => {
       registry.register(mockProvider);
@@ -531,6 +647,19 @@ describe("AIContextRegistry", () => {
       expect(formatted).toContain("Mock: Item 1 (value1)");
       expect(formatted.split("\n\n")).toHaveLength(1);
     });
+
+    it("should format items from the provider that owns them", () => {
+      registry.register(new SecondaryMockProvider());
+
+      const formatted = registry.formatContextForAI([
+        "mock://item1",
+        "mock://secondary-item",
+      ] as ContextLocatorId[]);
+
+      expect(formatted).toBe(
+        "Mock: Item 1 (value1)\n\nSecondary: Secondary Item",
+      );
+    });
   });
 
   describe("edge cases and error handling", () => {
@@ -621,7 +750,7 @@ describe("AIContextRegistry", () => {
       expect(provider).toBe(errorProvider);
 
       const items = registry.getAllItems();
-      expect(items).toHaveLength(1);
+      expect(items).toHaveLength(3);
       expect(items[0].type).toBe("error");
       expect(items[0].name).toBe("Errors");
     });
@@ -654,10 +783,11 @@ describe("AIContextRegistry", () => {
       expect(provider).toBeDefined();
 
       const items = provider!.getItems();
-      expect(items).toHaveLength(1);
+      expect(items).toHaveLength(3);
 
       const completion = provider!.formatCompletion(items[0]);
       expect(completion.label).toBe("@Errors");
+      expect(completion.apply).toBe("@error://all");
       expect(completion.type).toBe("error");
     });
 
@@ -690,7 +820,7 @@ describe("AIContextRegistry", () => {
       const errorItems = items.filter((item) => item.type === "error");
       const mockItems = items.filter((item) => item.type === "mock");
 
-      expect(errorItems).toHaveLength(1);
+      expect(errorItems).toHaveLength(3);
       expect(mockItems).toHaveLength(3);
     });