@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+fix: Preserve multi-line SQL in search replay links
@@ -51,6 +51,10 @@ import { notifications } from '@mantine/notifications';
 
 import DateRangeIndicator from './components/charts/DateRangeIndicator';
 import { MVOptimizationExplanationResult } from './hooks/useMVOptimizationExplanation';
+import {
+  encodeJsonUrlParamValue,
+  encodeUrlParamValue,
+} from './utils/urlParamEncoding';
 import {
   DEFAULT_SERIES_LIMIT,
   MAX_RENDERED_TIME_CHART_SERIES,
@@ -1380,11 +1384,19 @@ export function buildEventsSearchUrl({
   const from = dateRange[0].getTime();
   const to = dateRange[1].getTime();
 
+  // `where`, `select` and `filters` carry the search page parsers' own encoding
+  // layer under the query string's. When the search page later writes any
+  // other param, nuqs re-renders every value from the once-decoded query string
+  // without escaping newlines, and the browser strips them — so a
+  // single-encoded multi-line `where` comes back with its lines joined.
   const params: Record<string, string> = {
     source: source?.id ?? '',
-    where: where,
+    where: encodeUrlParamValue(where),
     whereLanguage: whereLanguage,
-    filters: JSON.stringify([...(config.filters ?? []), ...additionalFilters]),
+    filters: encodeJsonUrlParamValue([
+      ...(config.filters ?? []),
+      ...additionalFilters,
+    ]),
     isLive: 'false',
     from: from.toString(),
     to: to.toString(),
@@ -1394,7 +1406,7 @@ export function buildEventsSearchUrl({
   if (isMetricChart) {
     params.where = '';
     params.whereLanguage = 'lucene';
-    params.filters = JSON.stringify([]);
+    params.filters = encodeJsonUrlParamValue([]);
     params.source =
       (source.kind === SourceKind.Metric || source.kind === SourceKind.Trace
         ? source.logSourceId
@@ -1405,7 +1417,7 @@ export function buildEventsSearchUrl({
   // eventTableSelect is used for charts that override select (like histograms with count)
   // to preserve the original table's select expression
   if (config.eventTableSelect) {
-    params.select = config.eventTableSelect;
+    params.select = encodeUrlParamValue(config.eventTableSelect);
   }
 
   return `/search?${new URLSearchParams(params).toString()}`;
 
@@ -9,6 +9,13 @@ import {
 
 import { buildDashboardReplaySearchUrl } from '@/ChartUtils';
 
+// The search page reads these params with nuqs (double-encoded). Mirror that
+// read path so the tests assert the value the destination actually recovers.
+const readWhere = (url: URL) =>
+  decodeURIComponent(url.searchParams.get('where') ?? '');
+const readFilters = (url: URL) =>
+  JSON.parse(decodeURIComponent(url.searchParams.get('filters') ?? '[]'));
+
 const dateRange: [Date, Date] = [
   new Date('2026-01-01T00:00:00.000Z'),
   new Date('2026-01-01T01:00:00.000Z'),
@@ -66,8 +73,8 @@ describe('buildDashboardReplaySearchUrl', () => {
     const url = new URL(result ?? '', 'http://localhost');
     expect(url.pathname).toBe('/search');
     expect(url.searchParams.get('source')).toBe('logs');
-    expect(url.searchParams.get('where')).toBe('service:web');
-    expect(JSON.parse(url.searchParams.get('filters') ?? '')).toEqual([
+    expect(readWhere(url)).toBe('service:web');
+    expect(readFilters(url)).toEqual([
       { type: 'sql', condition: "SeverityText = 'error'" },
     ]);
     expect(url.searchParams.get('from')).toBe(
@@ -93,9 +100,47 @@ describe('buildDashboardReplaySearchUrl', () => {
     });
 
     expect(result).not.toBeNull();
-    expect(
-      new URL(result ?? '', 'http://localhost').searchParams.get('where'),
-    ).toBe('status:error');
+    expect(readWhere(new URL(result ?? '', 'http://localhost'))).toBe(
+      'status:error',
+    );
+  });
+
+  it('double-encodes multi-line where, filters, and select', () => {
+    const multiline = (...lines: string[]) => lines.join('\n');
+    const where = multiline(
+      "ServiceName = 'receive' and",
+      "ResourceAttributes['cluster_type'] = 'data-plane' and\tNamespace = 'x'",
+    );
+    const filters = [
+      { type: 'sql' as const, condition: multiline('a = 1 and', 'b = 2\r') },
+    ];
+    const select = multiline('Timestamp,', 'Body');
+
+    const result = buildDashboardReplaySearchUrl({
+      source: logSource,
+      config: {
+        ...builderConfig,
+        where,
+        whereLanguage: 'sql',
+        filters,
+        eventTableSelect: select,
+      },
+      dateRange,
+    });
+    expect(result).not.toBeNull();
+
+    // When the search page writes any other param, nuqs re-renders these from
+    // the once-decoded query string without escaping control characters, and
+    // the browser strips them. One decode must leave none behind.
+    const url = new URL(result ?? '', 'http://localhost');
+    for (const key of ['where', 'filters', 'select']) {
+      expect(url.searchParams.get(key)).not.toMatch(/[\n\r\t]/);
+    }
+    expect(readWhere(url)).toBe(where);
+    expect(readFilters(url)).toEqual(filters);
+    expect(decodeURIComponent(url.searchParams.get('select') ?? '')).toBe(
+      select,
+    );
   });
 
   it('rejects per-series conditions that cannot be faithfully replayed', () => {
 
@@ -46,9 +46,18 @@ const builderConfig = {
   dateRange,
 } satisfies BuilderChartConfigWithDateRange;
 
+// The search page reads these params with nuqs, which double-encodes values.
+// Mirror that read (`URLSearchParams.get` decodes one layer, the parser's
+// `decodeURIComponent` the second) so assertions compare the recovered value.
 const searchParams = (url: string | null) => {
   expect(url).not.toBeNull();
-  return new URL(url ?? '', 'http://localhost').searchParams;
+  const raw = new URL(url ?? '', 'http://localhost').searchParams;
+  return {
+    get: (key: string) => {
+      const value = raw.get(key);
+      return value == null ? null : decodeURIComponent(value);
+    },
+  };
 };
 
 const buildUrl = (
@@ -171,11 +180,16 @@ describe('buildEventsSearchUrl variable expansion', () => {
   });
 
   it('leaves a config without variables untouched', () => {
-    expect(
+    const params = searchParams(
       buildUrl({ where: 'ServiceName = $svc', whereLanguage: 'sql' }),
-    ).toBe(
-      '/search?source=logs&where=ServiceName+%3D+%24svc&whereLanguage=sql&filters=%5B%5D&isLive=false&from=1767225600000&to=1767229200000',
     );
+    expect(params.get('source')).toBe('logs');
+    expect(params.get('where')).toBe('ServiceName = $svc');
+    expect(params.get('whereLanguage')).toBe('sql');
+    expect(params.get('filters')).toBe('[]');
+    expect(params.get('isLive')).toBe('false');
+    expect(params.get('from')).toBe('1767225600000');
+    expect(params.get('to')).toBe('1767229200000');
   });
 
   it('falls back to the clause as written when expansion fails', () => {
 
@@ -5,6 +5,12 @@ import {
 } from '@hyperdx/common-utils/dist/types';
 import { SortingState } from '@tanstack/react-table';
 
+import {
+  decodeUrlParamValue,
+  encodeJsonUrlParamValue,
+  encodeUrlParamValue,
+} from './urlParamEncoding';
+
 /**
  * Problem: nuqs serializes spaces as '+' (form-encoding). When
  * URLs are shared via Microsoft Teams (and some other systems), they re-encode
@@ -25,15 +31,8 @@ import { SortingState } from '@tanstack/react-table';
  * as %0A automatically).
  */
 export const parseAsStringEncoded = createParser<string>({
-  parse: value => {
-    try {
-      return decodeURIComponent(value);
-    } catch {
-      // Malformed URI sequence – return as-is for robustness.
-      return value;
-    }
-  },
-  serialize: value => encodeURIComponent(value),
+  parse: decodeUrlParamValue,
+  serialize: encodeUrlParamValue,
 });
 
 /**
@@ -80,12 +79,12 @@ export function parseAsJsonEncoded<T>(
       }
 
       try {
-        return finalize(JSON.parse(decodeURIComponent(value)));
+        return finalize(JSON.parse(decodeUrlParamValue(value)));
       } catch {
         return null;
       }
     },
-    serialize: value => encodeURIComponent(JSON.stringify(value)),
+    serialize: encodeJsonUrlParamValue,
   });
 }
 
 
@@ -0,0 +1,19 @@
+/**
+ * The inner encoding layer of `parseAsStringEncoded` / `parseAsJsonEncoded`
+ * (see `queryParsers.ts` for why it exists). Kept free of nuqs so code that
+ * builds links to those params can share it without loading nuqs at import
+ * time.
+ */
+export const encodeUrlParamValue = (value: string) => encodeURIComponent(value);
+
+export const decodeUrlParamValue = (value: string) => {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    // Malformed URI sequence – return as-is for robustness.
+    return value;
+  }
+};
+
+export const encodeJsonUrlParamValue = (value: unknown) =>
+  encodeUrlParamValue(JSON.stringify(value));
@@ -209,6 +209,24 @@ export class ChartEditorComponent {
     await dismissSqlAutocomplete(this.page);
   }
 
+  /**
+   * Type a multi-line SQL WHERE clause, one line per entry. Lines are split
+   * with Shift+Enter, since a bare Enter in the editor submits the query.
+   */
+  async setMultilineSqlWhere(
+    lines: string[],
+    scope: 'chart' | 'series' = 'chart',
+  ) {
+    const [first = '', ...rest] = lines;
+    await this.setWhereLanguage('SQL', scope);
+    await this.whereInput(scope).fillSql(first);
+    for (const line of rest) {
+      await this.page.keyboard.press('Shift+Enter');
+      await this.page.keyboard.type(line);
+    }
+    await dismissSqlAutocomplete(this.page);
+  }
+
   /**
    * Type into a WHERE input while it is in Lucene mode, where it renders as a
    * plain textarea rather than CodeMirror. Leaves the suggestion dropdown open.
 
@@ -206,8 +206,11 @@ test.describe(
         expect(url.searchParams.get('source')).toBe(logsSourceId);
         expect(url.searchParams.get('isLive')).toBe('false');
         // Default row click encodes the group-by filter as a SQL IN clause in
-        // the JSON-encoded `filters` param.
-        const filters = url.searchParams.get('filters') ?? '[]';
+        // the JSON-encoded `filters` param. The search page reads it with nuqs
+        // (double-encoded), so decode the extra layer before asserting.
+        const filters = decodeURIComponent(
+          url.searchParams.get('filters') ?? '[]',
+        );
         expect(filters).toContain(`ServiceName IN ('${serviceName}')`);
         const from = Number(url.searchParams.get('from'));
         const to = Number(url.searchParams.get('to'));
 
@@ -1422,6 +1422,85 @@ test.describe('Dashboard', { tag: ['@dashboard'] }, () => {
     },
   );
 
+  test(
+    'replay search keeps a multi-line SQL where after the search page rewrites the URL',
+    { tag: '@full-stack' },
+    async () => {
+      const chartName = `E2E Multiline Replay Tile ${Date.now()}`;
+      // The line break must be the only whitespace between the two tokens: the
+      // browser strips raw newlines from URLs but keeps spaces, so an indented
+      // second line would survive the bug as valid SQL.
+      const whereLines = ["ServiceName != '' AND", "SeverityText != ''"];
+      const multilineWhere = whereLines.join('\n');
+
+      await test.step('Save a builder tile with a multi-line SQL where', async () => {
+        await dashboardPage.createNewDashboard();
+        await dashboardPage.addTile();
+        await expect(dashboardPage.chartEditor.nameInput).toBeVisible();
+        await dashboardPage.chartEditor.waitForDataToLoad();
+        await dashboardPage.chartEditor.setChartType(DisplayType.Line);
+        await dashboardPage.chartEditor.setChartName(chartName);
+        await dashboardPage.chartEditor.selectSource(DEFAULT_LOGS_SOURCE_NAME);
+        await dashboardPage.chartEditor.setMultilineSqlWhere(whereLines);
+        await dashboardPage.chartEditor.runQuery();
+        await dashboardPage.saveTile();
+      });
+
+      const tile = dashboardPage.getTiles().filter({ hasText: chartName });
+      const replayButton = tile.locator(
+        '[data-testid^="tile-replay-search-button-"]',
+      );
+
+      await test.step('The replay link carries the where with its line break', async () => {
+        await tile.hover();
+        await expect(replayButton).toBeVisible();
+        const href = String(await replayButton.getAttribute('href'));
+        const where = String(
+          new URL(href, 'http://localhost').searchParams.get('where'),
+        );
+        expect(decodeURIComponent(where)).toBe(multilineWhere);
+      });
+
+      await test.step('Changing the time range on the search page keeps the line break', async () => {
+        const popupPromise = dashboardPage.page.waitForEvent('popup');
+        await replayButton.click();
+        const searchTab = await popupPromise;
+        const searchPage = new SearchPage(searchTab);
+        const readWhere = () =>
+          decodeURIComponent(
+            new URL(searchTab.url()).searchParams.get('where') ?? '',
+          );
+
+        await expect(searchTab).toHaveURL(/\/search\?/, { timeout: 15000 });
+        await expect(searchPage.table.firstRow).toBeVisible({
+          timeout: 30000,
+        });
+        const landedFrom = new URL(searchTab.url()).searchParams.get('from');
+
+        // A nuqs write that doesn't touch `where` rebuilds the whole query
+        // string from the decoded params. A single-encoded `where` comes back
+        // with a raw newline that the browser strips, joining the lines.
+        await searchPage.timePicker.selectRelativeTime('Last 1 days');
+        await expect
+          .poll(() => new URL(searchTab.url()).searchParams.get('from'), {
+            timeout: 10000,
+          })
+          .not.toBe(landedFrom);
+
+        expect(readWhere()).toBe(multilineWhere);
+        await expect(
+          searchPage.whereInput.sqlEditor.locator('.cm-line'),
+        ).toHaveCount(2);
+        await expect(searchPage.table.firstRow).toBeVisible({
+          timeout: 30000,
+        });
+        await expect(searchPage.chartErrorState).toHaveCount(0);
+
+        await searchTab.close();
+      });
+    },
+  );
+
   test.describe('Raw SQL Dashboard Tiles', () => {
     const LINE_SQL = `SELECT toStartOfInterval(Timestamp, INTERVAL {intervalSeconds:Int64} SECOND) AS ts, count() AS count FROM default.e2e_otel_logs WHERE Timestamp >= fromUnixTimestamp64Milli({startDateMilliseconds:Int64}) AND Timestamp < fromUnixTimestamp64Milli({endDateMilliseconds:Int64}) GROUP BY ts ORDER BY ts ASC`;
 
@@ -2289,7 +2368,11 @@ test.describe('Dashboard', { tag: ['@dashboard'] }, () => {
 
           const href = (await link.getAttribute('href')) ?? '';
           const params = new URL(href, 'http://localhost').searchParams;
-          expect(params.get('where')).toBe("(ServiceName IN ('accounting'))");
+          // The search page reads `where` with nuqs (double-encoded), so decode
+          // the extra layer before asserting on the expanded predicate.
+          expect(decodeURIComponent(params.get('where') ?? '')).toBe(
+            "(ServiceName IN ('accounting'))",
+          );
           expect(decodeURIComponent(href)).not.toContain('$svc');
         });
 
@@ -2304,9 +2387,11 @@ test.describe('Dashboard', { tag: ['@dashboard'] }, () => {
           const searchPage = new SearchPage(searchTab);
 
           await expect(searchTab).toHaveURL(/\/search\?/, { timeout: 15000 });
-          expect(new URL(searchTab.url()).searchParams.get('where')).toBe(
-            "(ServiceName IN ('accounting'))",
-          );
+          expect(
+            decodeURIComponent(
+              new URL(searchTab.url()).searchParams.get('where') ?? '',
+            ),
+          ).toBe("(ServiceName IN ('accounting'))");
 
           await expect(searchPage.table.firstRow).toBeVisible({
             timeout: 30000,
-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@hyperdx/app': patch
 +---
++
 +fix: Preserve multi-line SQL in search replay links