@marimo-team/islands 0.25.3-dev82 → 0.25.3-dev86

package/src/components/data-table/search-highlight.tsx

@@ -0,0 +1,79 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { ReactNode } from "react";
+
+/** Half-open `[start, end)` offsets into a string. */
+export type MatchRange = readonly [start: number, end: number];
+
+/**
+ * Build the pattern that finds `query` in a display string. Returns
+ * `undefined` for an empty query. The query is matched as a literal,
+ * case-insensitive substring, which mirrors how the backend selects rows.
+ * The `u` flag selects Unicode simple case folding, the same folding the
+ * backend regex engines use.
+ */
+export function buildHighlightPattern(query?: string): RegExp | undefined {
+  if (!query) {
+    return undefined;
+  }
+  const escaped = query.replace(/[$()*+.?[\\\]^{|}]/g, "\\$&");
+  return new RegExp(escaped, "giu");
+}
+
+/** Offsets of every match of `pattern` in `text`. */
+export function findMatchRanges(text: string, pattern?: RegExp): MatchRange[] {
+  if (!pattern) {
+    return [];
+  }
+  const ranges: MatchRange[] = [];
+  for (const match of text.matchAll(pattern)) {
+    ranges.push([match.index, match.index + match[0].length]);
+  }
+  return ranges;
+}
+
+/**
+ * Wrap the parts of `text` covered by `ranges` in `<mark>` elements.
+ * `ranges` are offsets into a larger string in which `text` starts at
+ * `offset`, so one set of ranges can be shared across adjacent segments.
+ * Returns `text` unchanged when no range overlaps it.
+ */
+export function highlightRanges(
+  text: string,
+  ranges: readonly MatchRange[],
+  offset = 0,
+): ReactNode {
+  const segments: ReactNode[] = [];
+  let cursor = 0;
+  for (const [rangeStart, rangeEnd] of ranges) {
+    const start = Math.max(rangeStart - offset, cursor);
+    const end = Math.min(rangeEnd - offset, text.length);
+    if (end <= start) {
+      continue;
+    }
+    if (start > cursor) {
+      segments.push(text.slice(cursor, start));
+    }
+    segments.push(
+      <mark key={start} className="bg-search-highlight text-inherit">
+        {text.slice(start, end)}
+      </mark>,
+    );
+    cursor = end;
+  }
+  if (segments.length === 0) {
+    return text;
+  }
+  if (cursor < text.length) {
+    segments.push(text.slice(cursor));
+  }
+  return segments;
+}
+
+/**
+ * Wrap every match of `pattern` in `text` in a `<mark>` element. Returns
+ * `text` unchanged when `pattern` is absent or does not match.
+ */
+export function highlightMatches(text: string, pattern?: RegExp): ReactNode {
+  return highlightRanges(text, findMatchRanges(text, pattern));
+}

package/src/components/data-table/types.ts

@@ -6,6 +6,7 @@ import type { DataType } from "@/core/kernel/messages";
 declare module "@tanstack/react-table" {
   interface TableMeta<TData extends RowData> {
     rawData?: TData[]; // raw data for filtering/copying (present only if format_mapping is provided)
+    highlightPattern?: RegExp; // built from the committed search query that produced the current rows
   }
 }
 

package/src/components/data-table/url-detector.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { marked } from "marked";
-import { useState } from "react";
+import { Fragment, type ReactNode, useState } from "react";
 import { MarkdownRenderer } from "@/components/markdown/markdown-renderer";
 import {
   Popover,
@@ -10,13 +10,20 @@ import {
 } from "@/components/ui/popover";
 import { Events } from "@/utils/events";
 import type { ContentPart } from "@/utils/url-parser";
+import { findMatchRanges, highlightRanges } from "./search-highlight";
 
-const ImageWithFallback = ({ url }: { url: string }) => {
+const ImageWithFallback = ({
+  url,
+  fallbackLabel,
+}: {
+  url: string;
+  fallbackLabel?: ReactNode;
+}) => {
   const [error, setError] = useState(false);
   const [open, setOpen] = useState(false);
 
   if (error) {
-    return <URLAnchor url={url} />;
+    return <URLAnchor url={url}>{fallbackLabel}</URLAnchor>;
   }
 
   return (
@@ -93,21 +100,54 @@ export const MarkdownUrlDetector = ({
   return <UrlDetector parts={parts} />;
 };
 
-export const UrlDetector = ({ parts }: { parts: ContentPart[] }) => {
+export const UrlDetector = ({
+  parts,
+  highlightPattern,
+}: {
+  parts: ContentPart[];
+  highlightPattern?: RegExp;
+}) => {
+  // Match against the whole string so a query that spans a text part and
+  // a link is still marked. Each part then takes its slice of the ranges.
+  const ranges = highlightPattern
+    ? findMatchRanges(parts.map(partText).join(""), highlightPattern)
+    : [];
+
+  let offset = 0;
   const markup = parts.map((part, idx) => {
+    const text = partText(part);
+    const label = highlightRanges(text, ranges, offset);
+    offset += text.length;
+
     if (part.type === "url") {
-      return <URLAnchor key={idx} url={part.url} />;
+      return (
+        <URLAnchor key={idx} url={part.url}>
+          {label}
+        </URLAnchor>
+      );
     }
     if (part.type === "image") {
-      return <ImageWithFallback key={idx} url={part.url} />;
+      return (
+        <ImageWithFallback key={idx} url={part.url} fallbackLabel={label} />
+      );
     }
-    return part.value;
+    return <Fragment key={idx}>{label}</Fragment>;
   });
 
   return markup;
 };
 
-const URLAnchor = ({ url }: { url: string }) => {
+function partText(part: ContentPart): string {
+  return part.type === "text" ? part.value : part.url;
+}
+
+const URLAnchor = ({
+  url,
+  children,
+}: {
+  url: string;
+  children?: ReactNode;
+}) => {
   return (
     <a
       href={url}
@@ -116,7 +156,7 @@ const URLAnchor = ({ url }: { url: string }) => {
       onClick={Events.stopPropagation()}
       className="text-link hover:underline"
     >
-      {url}
+      {children ?? url}
     </a>
   );
 };

package/src/core/runtime/__tests__/createWsUrl.test.ts

@@ -13,7 +13,9 @@ describe("RuntimeManager.getWsURL", () => {
     });
     const sessionId = "1234" as SessionId;
     const url = runtime.getWsURL(sessionId);
-    expect(url.toString()).toBe("wss://marimo.app/ws?session_id=1234");
+    expect(url.toString()).toBe(
+      "wss://marimo.app/ws?query_params=&session_id=1234",
+    );
     expect(url.searchParams.get(KnownQueryParams.sessionId)).toBe(sessionId);
   });
 
@@ -24,7 +26,9 @@ describe("RuntimeManager.getWsURL", () => {
     });
     const sessionId = "1234" as SessionId;
     const url = runtime.getWsURL(sessionId);
-    expect(url.toString()).toBe("ws://marimo.app/ws?session_id=1234");
+    expect(url.toString()).toBe(
+      "ws://marimo.app/ws?query_params=&session_id=1234",
+    );
     expect(url.searchParams.get(KnownQueryParams.sessionId)).toBe(sessionId);
   });
 
@@ -35,7 +39,9 @@ describe("RuntimeManager.getWsURL", () => {
     });
     const sessionId = "1234" as SessionId;
     const url = runtime.getWsURL(sessionId);
-    expect(url.toString()).toBe("ws://marimo.app/nested/ws?session_id=1234");
+    expect(url.toString()).toBe(
+      "ws://marimo.app/nested/ws?query_params=&session_id=1234",
+    );
     expect(url.searchParams.get(KnownQueryParams.sessionId)).toBe(sessionId);
   });
 
@@ -48,7 +54,7 @@ describe("RuntimeManager.getWsURL", () => {
     const sessionId = "1234" as SessionId;
     const url = runtime.getWsURL(sessionId);
     expect(url.toString()).toBe(
-      "ws://marimo.app/nested/ws?foo=bar&file=test.py&session_id=1234",
+      "ws://marimo.app/nested/ws?foo=bar&file=test.py&query_params=foo%3Dbar%26file%3Dtest.py&session_id=1234",
     );
     expect(url.searchParams.get(KnownQueryParams.sessionId)).toBe(sessionId);
   });
@@ -62,11 +68,75 @@ describe("RuntimeManager.getWsURL", () => {
     const sessionId = "1234" as SessionId;
     const url = runtime.getWsURL(sessionId);
     expect(url.toString()).toBe(
-      "ws://marimo.app/ws?file=test.py&search=test&other=last&session_id=1234",
+      "ws://marimo.app/ws?file=test.py&query_params=file%3Dtest.py%26search%3Dtest%26other%3Dlast&session_id=1234",
     );
     expect(url.searchParams.get("file")).toBe("test.py");
-    expect(url.searchParams.get("search")).toBe("test");
-    expect(url.searchParams.get("other")).toBe("last");
+    expect(url.searchParams.get("query_params")).toBe(
+      "file=test.py&search=test&other=last",
+    );
     expect(url.searchParams.get(KnownQueryParams.sessionId)).toBe(sessionId);
   });
 });
+
+describe.each(["getWsURL", "getSseURL"] as const)(
+  "RuntimeManager.%s",
+  (method) => {
+    it("preserves runtime parameters and repeated page values", () => {
+      window.history.pushState({}, "", "/?tag=page-one&tag=page-two");
+      const runtime = new RuntimeManager(
+        {
+          url: `${window.location.origin}/nested?proxy_token=secret&tag=base&base=one&base=two`,
+          lazy: true,
+        },
+        true,
+      );
+      const url = runtime[method]("session" as SessionId);
+      expect([...url.searchParams]).toEqual([
+        ["proxy_token", "secret"],
+        ["tag", "base"],
+        ["base", "one"],
+        ["base", "two"],
+        [
+          "query_params",
+          "proxy_token=secret&base=one&base=two&tag=page-one&tag=page-two",
+        ],
+        ["session_id", "session"],
+      ]);
+    });
+
+    it("keeps notebook parameters out of the stream options", () => {
+      const notebookParams = new URLSearchParams([
+        ["types", "scatter"],
+        ["cursor", "page-2"],
+        ["run_id", "experiment"],
+        ["query_params", "nested=value&other=1"],
+        ["tag", "one"],
+        ["tag", "two"],
+        ["empty", ""],
+        ["text", "a+b & café"],
+        ["file", "test.py"],
+        ["kiosk", "true"],
+      ]);
+      window.history.pushState(
+        {},
+        "",
+        `/?${notebookParams}&session_id=page-session`,
+      );
+      const runtime = new RuntimeManager(
+        { url: window.location.origin, lazy: true },
+        true,
+      );
+      const url = runtime[method]("actual-session" as SessionId);
+
+      expect(Object.fromEntries(url.searchParams)).toEqual({
+        file: "test.py",
+        kiosk: "true",
+        session_id: "actual-session",
+        query_params: notebookParams.toString(),
+      });
+      expect([
+        ...new URLSearchParams(url.searchParams.get("query_params") ?? ""),
+      ]).toEqual([...notebookParams]);
+    });
+  },
+);

package/src/core/runtime/__tests__/runtime.test.ts

@@ -249,7 +249,8 @@ describe("RuntimeManager", () => {
         const url = runtime.getSseURL("s_123" as SessionId);
 
         expect(url.searchParams.get("access_token")).toBeNull();
-        expect(url.searchParams.get("foo")).toBe("bar");
+        expect(url.searchParams.get("query_params")).toBe("foo=bar");
+        expect(url.toString()).not.toContain("page-token");
       } finally {
         window.history.pushState({}, "", original);
       }
@@ -669,9 +670,16 @@ describe("RuntimeManager", () => {
       expect(httpUrl.searchParams.get("base_param")).toBe("existing");
 
       // Should preserve all window-level query params (including custom ones)
-      expect(wsUrl.searchParams.get("custom_param")).toBe("value123");
-      expect(wsUrl.searchParams.get("user_token")).toBe("abc");
-      expect(wsUrl.searchParams.get("theme")).toBe("dark");
+      expect(
+        Object.fromEntries(
+          new URLSearchParams(wsUrl.searchParams.get("query_params") ?? ""),
+        ),
+      ).toEqual({
+        base_param: "existing",
+        custom_param: "value123",
+        user_token: "abc",
+        theme: "dark",
+      });
       expect(httpUrl.searchParams.get("custom_param")).toBe("value123");
       expect(httpUrl.searchParams.get("user_token")).toBe("abc");
       expect(httpUrl.searchParams.get("theme")).toBe("dark");
@@ -738,7 +746,7 @@ describe("RuntimeManager", () => {
       const sessionId = "test" as SessionId;
 
       expect(runtime.getWsURL(sessionId).toString()).toMatchInlineSnapshot(
-        `"blob:https://example.com/12345678-1234-1234-1234-123456789abc?session_id=test"`,
+        `"blob:https://example.com/12345678-1234-1234-1234-123456789abc?query_params=&session_id=test"`,
       );
       expect(Logger.warn).toHaveBeenCalledOnce();
     });

package/src/core/runtime/runtime.ts

@@ -128,33 +128,32 @@ export class RuntimeManager {
     return asWsUrl(this.appendCrossOriginAuth(url).toString());
   }
 
-  /**
-   * Search params for a session connection: the base URL's params, merged
-   * with the current page's, plus the session id.
-   */
-  private getSessionSearchParams(sessionId: SessionId): URLSearchParams {
-    const baseUrl = new URL(this.config.url);
-    const searchParams = new URLSearchParams(baseUrl.search);
-
-    // Merge in current page's query parameters
-    const currentParams = new URLSearchParams(window.location.search);
-    currentParams.forEach((value, key) => {
-      // Don't override base URL params
-      if (!searchParams.has(key)) {
-        searchParams.set(key, value);
-      }
-    });
-
-    searchParams.set(KnownQueryParams.sessionId, sessionId);
-    return searchParams;
+  /** Keep notebook page parameters separate from connection options. */
+  private getSessionURL(path: string, sessionId: SessionId): URL {
+    const url = this.formatHttpURL({ path });
+    const notebookParams = new URLSearchParams(this.httpURL.search);
+    const pageParams = new URLSearchParams(window.location.search);
+    for (const key of pageParams.keys()) {
+      notebookParams.delete(key);
+    }
+    for (const [key, value] of pageParams) {
+      notebookParams.append(key, value);
+    }
+    // These parameters are internal and are not exposed by mo.query_params().
+    notebookParams.delete(KnownQueryParams.accessToken);
+    notebookParams.delete("refresh_token");
+    notebookParams.delete(KnownQueryParams.sessionId);
+    url.searchParams.set("query_params", notebookParams.toString());
+    url.searchParams.set(KnownQueryParams.sessionId, sessionId);
+    return url;
   }
 
   /**
    * The WebSocket URL of the runtime.
    */
   public getWsURL(sessionId: SessionId): URL {
-    const searchParams = this.getSessionSearchParams(sessionId);
-    return this.formatWsURL("/ws", searchParams);
+    const url = this.getSessionURL("/ws", sessionId);
+    return asWsUrl(this.appendCrossOriginAuth(url).toString());
   }
 
   /**
@@ -164,11 +163,7 @@ export class RuntimeManager {
    * (see `headers()`) instead of the URL.
    */
   public getSseURL(sessionId: SessionId): URL {
-    const url = this.formatHttpURL({
-      path: "/sse",
-      searchParams: this.getSessionSearchParams(sessionId),
-      restrictToKnownQueryParams: false,
-    });
+    const url = this.getSessionURL("/sse", sessionId);
     // The page URL can still carry access_token (merged in from the
     // current page's params, before auth cleanup strips it); never
     // forward it — a token in the URL leaks into proxy/server logs.
@@ -180,7 +175,8 @@ export class RuntimeManager {
    * The WebSocket Sync URL of the runtime, for real-time updates.
    */
   public getWsSyncURL(sessionId: SessionId): URL {
-    return this.formatWsURL("/ws_sync", this.getSessionSearchParams(sessionId));
+    const url = this.getSessionURL("/ws_sync", sessionId);
+    return asWsUrl(this.appendCrossOriginAuth(url).toString());
   }
 
   /**

package/src/css/globals.css

@@ -92,6 +92,7 @@
     --action-hover: var(--yellow-10, #ffdc00);
     --action-border: var(--yellow-11, #9e6c00);
     --action-foreground: var(--yellow-12, #473b1f);
+    --search-highlight: var(--yellow-4, #fff394);
     --link: light-dark(hsl(211deg 90% 42%), hsl(211deg 90% 62%));
     --link-visited: light-dark(hsl(272deg 51% 54%), hsl(272deg 51% 74%));
     --stale: hsl(42deg 56% 44% / 25%);
@@ -140,6 +141,7 @@
     --action-hover: var(--yellow-7, #665417);
     --action-border: var(--yellow-11, #f5e147);
     --action-foreground: var(--yellow-12, #f6eeb4);
+    --search-highlight: var(--yellow-6, #524202);
     --stale: hsl(54deg 100% 86.7% / 25%);
   }
 }