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

package/src/components/data-table/columns.tsx

@@ -41,6 +41,7 @@ import {
   isNumericType,
 } from "./types";
 import { SentinelCell, WhitespaceMarkers } from "./sentinel-cell";
+import { highlightMatches } from "./search-highlight";
 import { detectSentinel, splitLeadingTrailingWhitespace } from "./utils";
 import { uniformSample } from "./uniformSample";
 import { MarkdownUrlDetector, UrlDetector } from "./url-detector";
@@ -278,7 +279,7 @@ export function generateColumns<T>({
       );
     },
 
-    cell: ({ column, renderValue, getValue, cell }) => {
+    cell: ({ column, renderValue, getValue, cell, table }) => {
       function selectCell() {
         if (selection !== "single-cell" && selection !== "multi-cell") {
           return;
@@ -310,6 +311,7 @@ export function generateColumns<T>({
         getValue,
         selectCell,
         cellStyles,
+        highlightPattern: table.options.meta?.highlightPattern,
       });
 
       // Row headers are bold
@@ -586,12 +588,14 @@ function renderDate({
   dtype,
   displayValue,
   locale,
+  highlightPattern,
 }: {
   value: Date;
   dataType?: DataType;
   dtype?: string;
   displayValue?: string;
   locale: string;
+  highlightPattern?: RegExp;
 }): React.ReactNode {
   const type = dataType === "date" ? "date" : "datetime";
   const timezone = extractTimezone(dtype);
@@ -600,7 +604,7 @@ function renderDate({
 
   return (
     <DatePopover date={value} type={type}>
-      {exactValue}
+      {highlightMatches(exactValue, highlightPattern)}
     </DatePopover>
   );
 }
@@ -611,12 +615,14 @@ export function renderCellValue<TData, TValue>({
   getValue,
   selectCell,
   cellStyles,
+  highlightPattern,
 }: {
   column: Column<TData, TValue>;
   renderValue: () => TValue | null;
   getValue: () => TValue;
   selectCell?: () => void;
   cellStyles?: string;
+  highlightPattern?: RegExp;
 }) {
   const value = getValue();
   const format = column.getColumnFormatting?.();
@@ -626,6 +632,28 @@ export function renderCellValue<TData, TValue>({
 
   const isWrapped = column.getColumnWrapping?.() === "wrap";
 
+  const textCell = (text: string) => (
+    <div onClick={selectCell} className={cellStyles}>
+      {highlightMatches(text, highlightPattern)}
+    </div>
+  );
+  const dateCell = (date: Date, displayValue?: string) => (
+    <div onClick={selectCell} className={cellStyles}>
+      <WithLocale>
+        {(locale) =>
+          renderDate({
+            value: date,
+            dataType,
+            dtype,
+            displayValue,
+            locale,
+            highlightPattern,
+          })
+        }
+      </WithLocale>
+    </div>
+  );
+
   // Sentinel values (null, whitespace, NaN, Infinity, NaT) rendered specially.
   // Empty strings are left as-is
   const sentinel = detectSentinel(value, dataType, dtype);
@@ -641,23 +669,10 @@ export function renderCellValue<TData, TValue>({
     try {
       const date = new Date(value);
       if (!format || !isValid(date)) {
-        return (
-          <div onClick={selectCell} className={cellStyles}>
-            {value}
-          </div>
-        );
+        return textCell(value);
       }
 
-      const displayValue = String(column.applyColumnFormatting(value));
-      return (
-        <div onClick={selectCell} className={cellStyles}>
-          <WithLocale>
-            {(locale) =>
-              renderDate({ value: date, dataType, dtype, displayValue, locale })
-            }
-          </WithLocale>
-        </div>
-      );
+      return dateCell(date, String(column.applyColumnFormatting(value)));
     } catch (error) {
       Logger.error("Error parsing datetime, fallback to string", error);
     }
@@ -673,17 +688,9 @@ export function renderCellValue<TData, TValue>({
     }
 
     // e.g. 2010-10-07 17:15:00
-    const displayValue = format
-      ? String(column.applyColumnFormatting(value))
-      : undefined;
-    return (
-      <div onClick={selectCell} className={cellStyles}>
-        <WithLocale>
-          {(locale) =>
-            renderDate({ value, dataType, dtype, displayValue, locale })
-          }
-        </WithLocale>
-      </div>
+    return dateCell(
+      value,
+      format ? String(column.applyColumnFormatting(value)) : undefined,
     );
   }
 
@@ -729,7 +736,7 @@ export function renderCellValue<TData, TValue>({
           className={cn(cellStyles, isWrapped && COLUMN_WRAPPING_STYLES)}
         >
           <WhitespaceMarkers value={leading} />
-          <UrlDetector parts={parts} />
+          <UrlDetector parts={parts} highlightPattern={highlightPattern} />
           <WhitespaceMarkers value={trailing} />
         </div>
       );
@@ -755,11 +762,7 @@ export function renderCellValue<TData, TValue>({
   }
 
   if (format) {
-    return (
-      <div onClick={selectCell} className={cellStyles}>
-        {column.applyColumnFormatting(value)}
-      </div>
-    );
+    return textCell(String(column.applyColumnFormatting(value)));
   }
 
   // Format to the correct locale
@@ -769,26 +772,19 @@ export function renderCellValue<TData, TValue>({
         <LocaleNumber
           value={value}
           minFractionDigits={column.columnDef.meta?.minFractionDigits}
+          highlightPattern={highlightPattern}
         />
       </div>
     );
   }
 
   if (typeof value === "boolean") {
-    return (
-      <div onClick={selectCell} className={cellStyles}>
-        {value ? "True" : "False"}
-      </div>
-    );
+    return textCell(value ? "True" : "False");
   }
 
   if (isPrimitiveOrNullish(value)) {
     const rendered = renderValue();
-    return (
-      <div onClick={selectCell} className={cellStyles}>
-        {rendered == null ? "" : String(rendered)}
-      </div>
-    );
+    return textCell(rendered == null ? "" : String(rendered));
   }
 
   const mimeValues = getMimeValues(value);
@@ -826,14 +822,16 @@ export function renderCellValue<TData, TValue>({
 export const LocaleNumber = ({
   value,
   minFractionDigits,
+  highlightPattern,
 }: {
   value: number;
   minFractionDigits?: number;
+  highlightPattern?: RegExp;
 }) => {
   const { locale } = useLocale();
   const format = useNumberFormatter({
     minimumFractionDigits: minFractionDigits,
     maximumFractionDigits: maxFractionalDigits(locale),
   });
-  return format.format(value);
+  return highlightMatches(format.format(value), highlightPattern);
 };

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

@@ -58,6 +58,7 @@ import { useColumnPinning } from "./hooks/use-column-pinning";
 import { useScrollContainerHeight } from "./hooks/use-scroll-container-height";
 import { CellSelectionProvider } from "./range-focus/provider";
 import { DataTableBody, renderTableHeader } from "./renderers";
+import { buildHighlightPattern } from "./search-highlight";
 import { TableBottomBar } from "./TableBottomBar";
 import { TableTopBar } from "./TableTopBar";
 import {
@@ -231,6 +232,11 @@ const DataTableInternal = <TData,>({
     return idx + offset;
   }
 
+  const highlightPattern = React.useMemo(
+    () => buildHighlightPattern(searchQuery),
+    [searchQuery],
+  );
+
   const table = useReactTable<TData>({
     _features: [
       ColumnPinning,
@@ -245,7 +251,7 @@ const DataTableInternal = <TData,>({
     ],
     data,
     columns,
-    meta: { rawData },
+    meta: { rawData, highlightPattern },
     getCoreRowModel: getCoreRowModel(),
     // pagination
     rowCount: totalRows === "too_many" ? undefined : totalRows,

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%);
   }
 }