@marimo-team/islands 0.19.12-dev1 → 0.20.0

package/src/components/editor/output/console/ConsoleOutput.tsx

@@ -167,6 +167,7 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
             );
 
             const originalIdx = consoleOutputs.length - idx - 1;
+            const isPassword = output.mimetype === "text/password";
 
             if (output.response == null && lastStdInputIdx === idx) {
               return (
@@ -174,6 +175,7 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
                   key={idx}
                   output={output.data}
                   isPdb={isPdb}
+                  isPassword={isPassword}
                   onSubmit={(text) => onSubmitDebugger(text, originalIdx)}
                   onClear={onClear}
                 />
@@ -185,6 +187,7 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
                 key={idx}
                 output={output.data}
                 response={output.response}
+                isPassword={isPassword}
               />
             );
           }
@@ -216,6 +219,7 @@ const StdInput = (props: {
   output: string;
   response?: string;
   isPdb: boolean;
+  isPassword?: boolean;
 }) => {
   const [value, setValue] = React.useState("");
 
@@ -231,7 +235,7 @@ const StdInput = (props: {
         data-testid="console-input"
         // This is used in <StdinBlockingAlert> to find the input
         data-stdin-blocking={true}
-        type="text"
+        type={props.isPassword ? "password" : "text"}
         autoComplete="off"
         autoFocus={true}
         value={value}
@@ -277,11 +281,17 @@ const StdInput = (props: {
   );
 };
 
-const StdInputWithResponse = (props: { output: string; response?: string }) => {
+const StdInputWithResponse = (props: {
+  output: string;
+  response?: string;
+  isPassword?: boolean;
+}) => {
   return (
     <div className="flex gap-2 items-center">
       {renderText(props.output)}
-      <span className="text-(--sky-11)">{props.response}</span>
+      {!props.isPassword && (
+        <span className="text-(--sky-11)">{props.response}</span>
+      )}
     </div>
   );
 };

package/src/components/pages/gallery-page.tsx

@@ -72,7 +72,7 @@ const GalleryPage: React.FC = () => {
           opengraphImage && isHttpsUrl(opengraphImage)
             ? opengraphImage
             : asURL(
-                `/og/thumbnail?file=${encodeURIComponent(relativePath)}`,
+                `og/thumbnail?file=${encodeURIComponent(relativePath)}`,
               ).toString();
         return {
           ...file,

package/src/components/pages/home-page.tsx

@@ -326,7 +326,7 @@ const Node = ({ node, style }: NodeRendererProps<FileInfo>) => {
     return (
       <a
         className={itemClassName}
-        href={asURL(`?file=${relativePath}`).toString()}
+        href={asURL(`?file=${encodeURIComponent(relativePath)}`).toString()}
         target={tabTarget(relativePath)}
       >
         {iconEl}
@@ -401,8 +401,10 @@ const MarimoFileComponent = ({ file }: { file: MarimoFile }) => {
   // We want to keep the sessionId in this case
   const isNewNotebook = isSessionId(file.path);
   const href = isNewNotebook
-    ? asURL(`?file=${file.initializationId}&session_id=${file.path}`)
-    : asURL(`?file=${file.path}`);
+    ? asURL(
+        `?file=${encodeURIComponent(file.initializationId ?? file.path)}&session_id=${file.path}`,
+      )
+    : asURL(`?file=${encodeURIComponent(file.path)}`);
 
   const isMarkdown = file.path.endsWith(".md");
 

package/src/components/tracing/tracing.tsx

@@ -32,6 +32,7 @@ import { ClearButton } from "../buttons/clear-button";
 import type { SignalListener } from "../charts/types";
 import { ElapsedTime, formatElapsedTime } from "../editor/cell/CellStatus";
 import { PanelEmptyState } from "../editor/chrome/panels/empty-state";
+import { usePanelSection } from "../editor/chrome/panels/panel-context";
 import { CellLink } from "../editor/links/cell-link";
 import {
   type ChartPosition,
@@ -50,6 +51,7 @@ export const Tracing: React.FC = () => {
 
   const { theme } = useTheme();
   const [chartPosition, setChartPosition] = useState<ChartPosition>("above");
+  const panelSection = usePanelSection();
 
   const toggleChartPosition = () => {
     if (chartPosition === "above") {
@@ -69,47 +71,56 @@ export const Tracing: React.FC = () => {
     );
   }
 
+  const tracingComponent = (
+    <div className="py-1 px-2 overflow-y-scroll h-full">
+      <div className="flex flex-row justify-start gap-3">
+        <div className="flex flex-row gap-1 items-center">
+          <label htmlFor="chartPosition" className="text-xs">
+            Inline chart
+          </label>
+          <input
+            type="checkbox"
+            name="chartPosition"
+            data-testid="chartPosition"
+            onClick={toggleChartPosition}
+            defaultChecked={chartPosition === "sideBySide"}
+            className="h-3 cursor-pointer"
+          />
+        </div>
+
+        <ClearButton dataTestId="clear-traces-button" onClick={clearRuns} />
+      </div>
+
+      <div className="flex flex-col gap-3">
+        {newestToOldestRunIds.map((runId: RunId, index: number) => {
+          const run = runMap.get(runId);
+          if (run) {
+            return (
+              <TraceBlock
+                key={run.runId}
+                run={run}
+                isExpanded={expandedRuns.get(run.runId)}
+                isMostRecentRun={index === 0}
+                chartPosition={chartPosition}
+                theme={theme}
+              />
+            );
+          }
+          return null;
+        })}
+      </div>
+    </div>
+  );
+
+  if (panelSection === "sidebar") {
+    return tracingComponent;
+  }
+
+  // Allow the panel to be resized when in the wider developer panel
   return (
     <PanelGroup direction="horizontal" className="h-full">
       <Panel defaultSize={50} minSize={30} maxSize={80}>
-        <div className="py-1 px-2 overflow-y-scroll h-full">
-          <div className="flex flex-row justify-start gap-3">
-            <div className="flex flex-row gap-1 items-center">
-              <label htmlFor="chartPosition" className="text-xs">
-                Inline chart
-              </label>
-              <input
-                type="checkbox"
-                name="chartPosition"
-                data-testid="chartPosition"
-                onClick={toggleChartPosition}
-                defaultChecked={chartPosition === "sideBySide"}
-                className="h-3 cursor-pointer"
-              />
-            </div>
-
-            <ClearButton dataTestId="clear-traces-button" onClick={clearRuns} />
-          </div>
-
-          <div className="flex flex-col gap-3">
-            {newestToOldestRunIds.map((runId: RunId, index: number) => {
-              const run = runMap.get(runId);
-              if (run) {
-                return (
-                  <TraceBlock
-                    key={run.runId}
-                    run={run}
-                    isExpanded={expandedRuns.get(run.runId)}
-                    isMostRecentRun={index === 0}
-                    chartPosition={chartPosition}
-                    theme={theme}
-                  />
-                );
-              }
-              return null;
-            })}
-          </div>
-        </div>
+        {tracingComponent}
       </Panel>
       <PanelResizeHandle className="w-1 bg-border hover:bg-primary/50 transition-colors" />
       <Panel defaultSize={50}>
@@ -381,7 +392,7 @@ const TraceRow: React.FC<TraceRowProps> = ({
       <span className="text-(--gray-10) dark:text-(--gray-11)">
         [{formatLogTimestamp(cellRun.startTime)}]
       </span>
-      <span className="text-(--gray-10) w-16">
+      <span className="text-(--gray-10) w-16 overflow-hidden">
         (<CellLink cellId={cellRun.cellId} />)
       </span>
       <span className="w-40 truncate -ml-1">{cellRun.code}</span>

package/src/core/documentation/DocHoverTarget.tsx

@@ -0,0 +1,23 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { ReactNode } from "react";
+import { useDebouncedCallback } from "@/hooks/useDebounce";
+import { requestOutputDocumentation } from "./doc-lookup";
+
+export const DocHoverTarget: React.FC<{
+  qualifiedName: string;
+  children: ReactNode;
+}> = ({ qualifiedName, children }) => {
+  const handleMouseEnter = useDebouncedCallback(() => {
+    requestOutputDocumentation(qualifiedName);
+  }, 100);
+
+  return (
+    <span
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={() => handleMouseEnter.cancel()}
+    >
+      {children}
+    </span>
+  );
+};

package/src/core/documentation/doc-lookup.ts

@@ -0,0 +1,50 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { getCells } from "@/core/cells/cells";
+import { AUTOCOMPLETER } from "@/core/codemirror/completion/Autocompleter";
+import { store } from "@/core/state/jotai";
+import { Logger } from "@/utils/Logger";
+import { documentationAtom } from "./state";
+
+/**
+ * Request documentation for a qualified Python name (e.g. "torch.nn.Linear")
+ * by piggybacking on the existing code-completion system.
+ *
+ * We send the qualified name as the "document" to the autocomplete endpoint.
+ * Jedi resolves it and returns the docstring in the completion info.
+ */
+export async function requestOutputDocumentation(
+  qualifiedName: string,
+): Promise<void> {
+  // We need any valid cell_id for the completion request.
+  const cellId = getCells().inOrderIds.at(0);
+  if (!cellId) {
+    return;
+  }
+
+  try {
+    const message = await AUTOCOMPLETER.request({
+      document: qualifiedName,
+      cellId,
+    });
+
+    if (!message || message.options.length === 0) {
+      return;
+    }
+
+    // Find the option matching the last segment of the qualified name
+    const shortName = qualifiedName.split(".").pop() ?? qualifiedName;
+
+    const defaultOption = message.options[0];
+    const match =
+      message.options.find((o) => o.name === shortName) ?? defaultOption;
+
+    if (match?.completion_info) {
+      store.set(documentationAtom, {
+        documentation: match.completion_info,
+      });
+    }
+  } catch (error) {
+    Logger.debug(`Doc lookup failed for "${qualifiedName}"`, error);
+  }
+}

package/src/core/islands/main.ts

@@ -126,6 +126,7 @@ export async function initialize() {
       case "datasets":
       case "data-source-connections":
       case "validate-sql-result":
+      case "storage-namespaces":
       case "secret-keys-result":
       case "startup-logs":
         // Unsupported

package/src/core/websocket/useMarimoKernelConnection.tsx

@@ -284,6 +284,9 @@ export function useMarimoKernelConnection(opts: {
           })),
         });
         return;
+      case "storage-namespaces":
+        // TODO: Handle storage namespaces
+        return;
 
       case "reconnected":
         return;

package/src/css/app/Cell.css

@@ -314,6 +314,11 @@
 
   &.published {
     border: none;
+
+    &:hover {
+      border: none;
+      box-shadow: none;
+    }
   }
 }
 

package/src/mount.tsx

@@ -59,9 +59,9 @@ import { reportVitals } from "./utils/vitals";
 let hasMounted = false;
 
 /**
- * Main entry point for the mairmo app.
+ * Main entry point for the marimo app.
  *
- * Sets up the mairmo app with a theme provider.
+ * Sets up the marimo app with a theme provider.
  */
 export function mount(options: unknown, el: Element): Error | undefined {
   if (hasMounted) {

package/src/plugins/core/RenderHTML.tsx

@@ -14,6 +14,7 @@ import React, {
 } from "react";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 import { QueryParamPreservingLink } from "@/components/ui/query-param-preserving-link";
+import { DocHoverTarget } from "@/core/documentation/DocHoverTarget";
 import { sanitizeHtml, useSanitizeHtml } from "./sanitize";
 
 type ReplacementFn = NonNullable<HTMLReactParserOptions["replace"]>;
@@ -146,6 +147,19 @@ const addCopyButtonToCodehilite: TransformFn = (
   }
 };
 
+// Wrap elements with data-marimo-doc attribute in a DocHoverTarget
+const wrapDocHoverTargets: TransformFn = (
+  reactNode: ReactNode,
+  domNode: DOMNode,
+): JSX.Element | undefined => {
+  if (domNode instanceof Element && domNode.attribs?.["data-marimo-doc"]) {
+    const qualifiedName = domNode.attribs["data-marimo-doc"];
+    return (
+      <DocHoverTarget qualifiedName={qualifiedName}>{reactNode}</DocHoverTarget>
+    );
+  }
+};
+
 const CopyableCode = ({ children }: { children: ReactNode }) => {
   const ref = useRef<HTMLDivElement>(null);
   return (
@@ -224,6 +238,7 @@ function parseHtml({
   const transformFunctions: TransformFn[] = [
     addCopyButtonToCodehilite,
     preserveQueryParamsInAnchorLinks,
+    wrapDocHoverTargets,
     removeWrappingBodyTags,
     removeWrappingHtmlTags,
   ];

package/src/plugins/core/__test__/registerReactComponent.test.ts

@@ -0,0 +1,204 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import ReactDOM from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { z } from "zod";
+import {
+  isCustomMarimoElement,
+  registerReactComponent,
+} from "../registerReactComponent";
+
+// Each custom element name can only be registered once per jsdom window,
+// so we use a counter to generate unique tag names across tests.
+let tagCounter = 0;
+function uniqueTag(base: string) {
+  return `marimo-test-${base}-${++tagCounter}`;
+}
+
+function makePlugin(tagName: string) {
+  return {
+    tagName,
+    validator: z.any(),
+    render: () => null as never,
+  };
+}
+
+describe("isCustomMarimoElement", () => {
+  test("returns false for null", () => {
+    expect(isCustomMarimoElement(null)).toBe(false);
+  });
+
+  test("returns false for a regular HTMLElement", () => {
+    const div = document.createElement("div");
+    expect(isCustomMarimoElement(div)).toBe(false);
+  });
+
+  test("returns false for a non-HTMLElement", () => {
+    const svg = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "circle",
+    );
+    expect(isCustomMarimoElement(svg as Element)).toBe(false);
+  });
+
+  test("returns true for a registered marimo custom element", () => {
+    const tag = uniqueTag("is-custom");
+    registerReactComponent(makePlugin(tag));
+    const el = document.createElement(tag);
+    expect(isCustomMarimoElement(el)).toBe(true);
+  });
+
+  test("returns false for an element with wrong __type__ value", () => {
+    const div = document.createElement("div") as unknown as HTMLElement & {
+      __type__: string;
+    };
+    div.__type__ = "something_else";
+    expect(isCustomMarimoElement(div)).toBe(false);
+  });
+});
+
+describe("connectedCallback - light DOM nesting detection", () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let createRootSpy: any;
+  const mockRoot = {
+    render: vi.fn(),
+    unmount: vi.fn(),
+  };
+
+  beforeEach(() => {
+    createRootSpy = vi
+      .spyOn(ReactDOM, "createRoot")
+      .mockReturnValue(mockRoot as unknown as ReactDOM.Root);
+  });
+
+  afterEach(() => {
+    createRootSpy.mockRestore();
+    mockRoot.render.mockClear();
+    mockRoot.unmount.mockClear();
+  });
+
+  test("skips mounting when element is a light DOM child of another marimo element", () => {
+    const parentTag = uniqueTag("parent");
+    const childTag = uniqueTag("child");
+    registerReactComponent(makePlugin(parentTag));
+    registerReactComponent(makePlugin(childTag));
+
+    const parent = document.createElement(parentTag);
+    const child = document.createElement(childTag);
+    parent.append(child);
+
+    createRootSpy.mockClear();
+    document.body.append(parent);
+
+    // Only the parent should mount; the child is skipped because it
+    // detects a marimo ancestor in the light DOM.
+    expect(createRootSpy).toHaveBeenCalledTimes(1);
+    expect(createRootSpy).toHaveBeenCalledWith(parent.shadowRoot);
+
+    parent.remove();
+  });
+
+  test("mounts when element is not nested inside a marimo element", () => {
+    const tag = uniqueTag("standalone");
+    registerReactComponent(makePlugin(tag));
+
+    const el = document.createElement(tag);
+    createRootSpy.mockClear();
+
+    document.body.append(el);
+
+    expect(createRootSpy).toHaveBeenCalledTimes(1);
+    expect(createRootSpy).toHaveBeenCalledWith(el.shadowRoot);
+
+    el.remove();
+  });
+
+  test("mounts when nested inside a regular (non-marimo) element", () => {
+    const tag = uniqueTag("in-div");
+    registerReactComponent(makePlugin(tag));
+
+    const wrapper = document.createElement("div");
+    const el = document.createElement(tag);
+    wrapper.append(el);
+
+    createRootSpy.mockClear();
+    document.body.append(wrapper);
+
+    expect(createRootSpy).toHaveBeenCalledTimes(1);
+    expect(createRootSpy).toHaveBeenCalledWith(el.shadowRoot);
+
+    wrapper.remove();
+  });
+
+  test("skips mounting for deeply nested marimo element through non-marimo wrappers", () => {
+    const outerTag = uniqueTag("outer");
+    const innerTag = uniqueTag("inner");
+    registerReactComponent(makePlugin(outerTag));
+    registerReactComponent(makePlugin(innerTag));
+
+    const outer = document.createElement(outerTag);
+    const div = document.createElement("div");
+    const inner = document.createElement(innerTag);
+
+    // Structure: outer > div > inner
+    outer.append(div);
+    div.append(inner);
+
+    createRootSpy.mockClear();
+    document.body.append(outer);
+
+    // Only outer mounts; inner is skipped because a marimo ancestor
+    // is found when traversing through the intermediate div.
+    expect(createRootSpy).toHaveBeenCalledTimes(1);
+    expect(createRootSpy).toHaveBeenCalledWith(outer.shadowRoot);
+
+    outer.remove();
+  });
+
+  test("mounts both sibling marimo elements (neither is a child of the other)", () => {
+    const tagA = uniqueTag("sibling-a");
+    const tagB = uniqueTag("sibling-b");
+    registerReactComponent(makePlugin(tagA));
+    registerReactComponent(makePlugin(tagB));
+
+    const wrapper = document.createElement("div");
+    const a = document.createElement(tagA);
+    const b = document.createElement(tagB);
+    wrapper.append(a);
+    wrapper.append(b);
+
+    createRootSpy.mockClear();
+    document.body.append(wrapper);
+
+    // Both siblings should mount since neither is a child of the other.
+    expect(createRootSpy).toHaveBeenCalledTimes(2);
+
+    wrapper.remove();
+  });
+
+  test("mounts when element is inside the shadow DOM of another marimo element", () => {
+    const outerTag = uniqueTag("shadow-outer");
+    const innerTag = uniqueTag("shadow-inner");
+    registerReactComponent(makePlugin(outerTag));
+    registerReactComponent(makePlugin(innerTag));
+
+    const outer = document.createElement(outerTag);
+    const inner = document.createElement(innerTag);
+
+    // Place the inner element inside the outer element's shadow root,
+    // simulating how getChildren() -> renderHTML() re-creates children
+    // in the shadow DOM. parentElement traversal stays within the
+    // shadow root boundary, so inner should NOT detect outer as an
+    // ancestor and should mount normally.
+    outer.shadowRoot?.append(inner);
+
+    createRootSpy.mockClear();
+    document.body.append(outer);
+
+    // Both elements should mount: outer in the document, inner in the
+    // shadow root (parentElement traversal doesn't cross shadow boundary).
+    expect(createRootSpy).toHaveBeenCalledTimes(2);
+
+    outer.remove();
+  });
+});

package/src/plugins/core/registerReactComponent.tsx

@@ -316,6 +316,15 @@ export function registerReactComponent<T>(plugin: IPlugin<T, unknown>): void {
     }
 
     connectedCallback() {
+      // Skip mounting if this element is in the light DOM of another
+      // marimo custom element. The parent element's shadow DOM will
+      // re-create this element via getChildren() -> renderHTML(), so
+      // this light DOM copy should remain inert to avoid duplicate
+      // side-effects (e.g., mo.lazy firing load() twice).
+      if (this.isLightDOMChildOfMarimoElement()) {
+        return;
+      }
+
       if (!this.mounted) {
         // Create a React root on the shadow root
         invariant(this.shadowRoot, "Shadow root should exist");
@@ -348,6 +357,30 @@ export function registerReactComponent<T>(plugin: IPlugin<T, unknown>): void {
       }
     }
 
+    /**
+     * Check if this element is in the light DOM of another marimo
+     * custom element. When a marimo element (e.g. marimo-tabs) has
+     * children that are also marimo elements (e.g. marimo-lazy), the
+     * browser upgrades both the light DOM originals AND the shadow DOM
+     * copies created by renderHTML(). The light DOM copies should not
+     * mount since they are not rendered (no <slot>) and would cause
+     * duplicate side-effects.
+     *
+     * parentElement traversal stays within the same DOM tree boundary
+     * (shadow root or document), so shadow DOM copies never find a
+     * marimo ancestor and correctly return false.
+     */
+    private isLightDOMChildOfMarimoElement(): boolean {
+      let parent = this.parentElement;
+      while (parent) {
+        if (isCustomMarimoElement(parent)) {
+          return true;
+        }
+        parent = parent.parentElement;
+      }
+      return false;
+    }
+
     /**
      * Reset the plugin initial value and data.
      * And then re-render the plugin.