From b05e280d6f0a0304574b37e99489dceaa753571e Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 18 Sep 2026 11:44:14 +0200
Subject: [PATCH 1/2] fix(app): keep multi-line query fields visible when
 unfocused

Grow SQL, Lucene, and PromQL fields in layout instead of collapsing to one line or floating an overlay. Shared editor heights keep the language switch flush with the input.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../multiline-search-bar-always-visible.md    |  13 ++
 .../src/components/HeatmapSettingsDrawer.tsx  |   2 -
 .../components/PromQLEditor/PromQLEditor.tsx  |  17 +-
 .../SQLEditor/SQLInlineEditor.module.scss     |  60 ++----
 .../components/SQLEditor/SQLInlineEditor.tsx  |  48 ++---
 .../SQLEditor/variableValidation.module.scss  |   4 +-
 .../SearchInput/AutocompleteInput.module.scss |  60 +++---
 .../SearchInput/AutocompleteInput.tsx         |  36 ++--
 .../components/SearchInput/SearchInputV2.tsx  |  14 +-
 .../SearchInput/SearchWhereInput.module.scss  |  76 +++----
 .../SearchInput/SearchWhereInput.tsx          |  44 ++--
 .../__tests__/SearchWhereInput.test.tsx       |  60 +++++-
 .../app/src/components/editorInputHeights.ts  |   5 +
 .../e2e/components/ChartEditorComponent.ts    |  62 ++----
 .../e2e/components/SidePanelComponent.ts      |   7 +
 .../e2e/components/WhereInputComponent.ts     | 178 +++++++++++++++++
 .../e2e/features/shared/multiline.spec.ts     | 188 +++++++-----------
 .../app/tests/e2e/page-objects/SearchPage.ts  | 102 ++++++++--
 packages/app/tests/e2e/utils/locators.ts      |  29 ++-
 .../app/tests/e2e/utils/multiline-input.ts    | 152 ++++++++++++++
 20 files changed, 754 insertions(+), 403 deletions(-)
 create mode 100644 .changeset/multiline-search-bar-always-visible.md
 create mode 100644 packages/app/src/components/editorInputHeights.ts
 create mode 100644 packages/app/tests/e2e/components/WhereInputComponent.ts
 create mode 100644 packages/app/tests/e2e/utils/multiline-input.ts

diff --git a/.changeset/multiline-search-bar-always-visible.md b/.changeset/multiline-search-bar-always-visible.md
new file mode 100644
index 0000000000..7eaa144c79
--- /dev/null
+++ b/.changeset/multiline-search-bar-always-visible.md
@@ -0,0 +1,13 @@
+---
+'@hyperdx/app': patch
+---
+
+fix: keep a multi-line query visible when the field is not focused
+
+Multi-line SQL fields collapsed to a single line whenever they lost focus, so everything past the first line was hidden until you clicked back into them. Focusing one expanded it into a floating overlay that covered the content underneath — and in a container sized to its content, that overlay left the layout flow and shrank the field to a sliver one character wide.
+
+Any field that allows multiple lines now simply sizes to its content, focused or not, growing the layout rather than floating over it, up to 150px before it scrolls. That covers the search WHERE, SELECT and ORDER BY, the chart editor's SQL fields, and PromQL. Lucene search fields similarly grow up to four lines. Fields with `allowMultiline={false}` remain single-line in both SQL and Lucene. The focus overlay is gone rather than made optional, so there is no longer a separate expand-on-focus state to reason about.
+
+The language switch beside the search bar stretches to match, with no divider between it and the input. A Lucene bar at the default size also no longer overhangs that switch. The Lucene input reserved a 38px row while drawing a 36px box inside it, so the switch — sized to the 36px the SQL editor uses — stood 2px proud of the input. Both languages now take their height from one shared table, so the seam is flush and the bar does not change height when you switch. Only the default size was affected; the compact bar was already consistent at 30px.
+
+Focus recolors the whole control, including the language switch, without overriding an error or warning border.
diff --git a/packages/app/src/components/HeatmapSettingsDrawer.tsx b/packages/app/src/components/HeatmapSettingsDrawer.tsx
index 8bc07138cf..975f1701f3 100644
--- a/packages/app/src/components/HeatmapSettingsDrawer.tsx
+++ b/packages/app/src/components/HeatmapSettingsDrawer.tsx
@@ -97,7 +97,6 @@ export default function HeatmapSettingsDrawer({
             size="xs"
             tooltipText="Controls the Y axis range and scale — defines the metric plotted vertically."
             placeholder="SQL expression"
-            language="sql"
             onSubmit={form.handleSubmit(onSubmit)}
             label="Value"
             error={form.formState.errors.value?.message}
@@ -111,7 +110,6 @@ export default function HeatmapSettingsDrawer({
             control={form.control}
             name="count"
             placeholder="SQL expression"
-            language="sql"
             size="xs"
             tooltipText="Controls the color intensity (Z axis) — shows how frequently or strongly each value occurs."
             onSubmit={form.handleSubmit(onSubmit)}
diff --git a/packages/app/src/components/PromQLEditor/PromQLEditor.tsx b/packages/app/src/components/PromQLEditor/PromQLEditor.tsx
index 453769e1fc..28cf3b98db 100644
--- a/packages/app/src/components/PromQLEditor/PromQLEditor.tsx
+++ b/packages/app/src/components/PromQLEditor/PromQLEditor.tsx
@@ -18,6 +18,7 @@ import CodeMirror, {
   tooltips,
 } from '@uiw/react-codemirror';
 
+import { EDITOR_INPUT_HEIGHTS } from '@/components/editorInputHeights';
 import {
   createCodeMirrorStyleTheme,
   DEFAULT_CODE_MIRROR_BASIC_SETUP,
@@ -197,36 +198,26 @@ export default function PromQLEditor({
     }
   }, []);
 
-  const isExpanded = isFocused;
   const isVariableWarningOnly =
     variableIssues.errors.length === 0 && variableIssues.warnings.length > 0;
-  const baseHeight = 36;
+  const baseHeight = EDITOR_INPUT_HEIGHTS.sm;
 
   return (
     <div
       className={styles.wrapper}
       style={{ ['--editor-base-height' as string]: `${baseHeight}px` }}
-      data-expanded={isExpanded ? 'true' : undefined}
     >
-      {isExpanded && <div className={styles.placeholder} aria-hidden="true" />}
       <Paper
         shadow="none"
         className={cx(
           styles.paper,
           variableIssues.errors.length > 0 ? styles.error : undefined,
           isVariableWarningOnly ? styles.warning : undefined,
-          isExpanded ? styles.expanded : undefined,
-          !isExpanded ? styles.collapseFade : undefined,
+          isFocused ? styles.focused : undefined,
         )}
         ps="4px"
       >
-        <div
-          className={cx(
-            styles.cmWrapper,
-            !isExpanded ? styles.collapsed : undefined,
-            isExpanded ? 'cm-editor-multiline' : undefined,
-          )}
-        >
+        <div className={cx(styles.cmWrapper, 'cm-editor-multiline')}>
           <CodeMirror
             indentWithTab={false}
             ref={ref}
diff --git a/packages/app/src/components/SQLEditor/SQLInlineEditor.module.scss b/packages/app/src/components/SQLEditor/SQLInlineEditor.module.scss
index 568228b895..b341830631 100644
--- a/packages/app/src/components/SQLEditor/SQLInlineEditor.module.scss
+++ b/packages/app/src/components/SQLEditor/SQLInlineEditor.module.scss
@@ -1,15 +1,9 @@
 .wrapper {
-  position: relative;
   flex: 1 1 0%;
   width: 100%;
   min-width: 0;
 }
 
-.placeholder {
-  min-height: var(--editor-base-height, 36px);
-  width: 100%;
-}
-
 .paper {
   background-color: var(--color-bg-field);
   border: 1px solid var(--color-border);
@@ -18,29 +12,29 @@
   min-height: var(--editor-base-height, 36px);
   box-shadow: none;
 
+  /* The Paper theme gives every Paper an inline `border`, and an inline
+     declaration outranks any selector here, so every state colour below has to
+     force its way past it. */
   &.error {
-    border-color: var(--color-bg-danger);
+    border-color: var(--color-bg-danger) !important;
   }
 
   &.warning {
-    border-color: var(--color-bg-warning);
+    border-color: var(--color-bg-warning) !important;
   }
 
-  &.expanded {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 100;
-    box-shadow: var(--mb-shadow, var(--mantine-shadow-xs));
-    border-bottom: 2px solid var(--color-bg-brand) !important;
-  }
-
-  &:not(.expanded) {
-    position: relative;
+  /* Single-line editors only: hold one row and hide the rest. */
+  &.clamped {
     max-height: var(--editor-base-height, 36px);
     overflow: hidden;
   }
+
+  /* An editor that grows with its content can't change border width on focus
+     without nudging everything below it, so recolor instead. Leave
+     error/warning borders alone so they stay visible while editing. */
+  &:not(.error, .warning).focused {
+    border-color: var(--color-bg-brand) !important;
+  }
 }
 
 .label {
@@ -65,30 +59,4 @@
     padding-top: 2.4px;
     font-size: var(--mantine-font-size-xs);
   }
-
-  &.collapsed {
-    overflow: hidden;
-  }
-}
-
-.languageSwitchWrapper {
-  display: flex;
-  align-items: center;
-  min-height: 100%;
-}
-
-/* Fade at the bottom when allowMultiline and collapsed (single-line) so text doesn't appear hard-cut */
-.collapseFade::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 12px;
-  background: linear-gradient(to bottom, transparent, var(--color-bg-field));
-  pointer-events: none;
-}
-
-.expanded {
-  /* Expanded state: no fade, full height */
 }
diff --git a/packages/app/src/components/SQLEditor/SQLInlineEditor.tsx b/packages/app/src/components/SQLEditor/SQLInlineEditor.tsx
index 5ebe042be5..44dc5f09cf 100644
--- a/packages/app/src/components/SQLEditor/SQLInlineEditor.tsx
+++ b/packages/app/src/components/SQLEditor/SQLInlineEditor.tsx
@@ -30,7 +30,7 @@ import CodeMirror, {
   tooltips,
 } from '@uiw/react-codemirror';
 
-import InputLanguageSwitch from '@/components/SearchInput/InputLanguageSwitch';
+import { EDITOR_INPUT_HEIGHTS } from '@/components/editorInputHeights';
 import { useMultipleAllFields } from '@/hooks/useMetadata';
 import { useSource } from '@/source';
 import { useQueryHistory } from '@/utils';
@@ -55,8 +55,6 @@ type SQLInlineEditorProps = {
   value: string;
   onChange: (value: string) => void;
   placeholder?: string;
-  onLanguageChange?: (language: 'sql' | 'lucene') => void;
-  language?: 'sql' | 'lucene';
   onSubmit?: () => void;
   error?: React.ReactNode;
   size?: string;
@@ -87,8 +85,6 @@ export default function SQLInlineEditor({
   filterField,
   onChange,
   placeholder,
-  onLanguageChange,
-  language,
   onSubmit,
   error,
   value,
@@ -162,9 +158,8 @@ export default function SQLInlineEditor({
     };
   }, [queryHistory, onSelectSearchHistory]);
 
-  // Dashboard variables in scope, offered alongside the column identifiers, and
-  // checked for the references that won't expand. This editor's content is
-  // always SQL — `language` only drives the switch.
+  // Dashboard variables in scope, offered alongside the column identifiers,
+  // and checked for the references that won't expand.
   const variableCompletions = useSqlVariableCompletions({
     enabled: enableVariables,
   });
@@ -337,29 +332,29 @@ export default function SQLInlineEditor({
     }
   }, []);
 
-  // Only apply expanded styling when multiline is enabled and focused
-  const isExpanded = allowMultiline && isFocused;
-
-  const isVariableWarningOnly =
-    variableIssues.errors.length === 0 && variableIssues.warnings.length > 0;
-  const baseHeight = size === 'xs' ? 30 : 36;
+  const validationState =
+    error || variableIssues.errors.length > 0
+      ? 'error'
+      : variableIssues.warnings.length > 0
+        ? 'warning'
+        : undefined;
+  const baseHeight =
+    size === 'xs' ? EDITOR_INPUT_HEIGHTS.xs : EDITOR_INPUT_HEIGHTS.sm;
 
   return (
     <div
       className={styles.wrapper}
       style={{ ['--editor-base-height' as string]: `${baseHeight}px` }}
-      data-expanded={isExpanded ? 'true' : undefined}
+      data-validation-state={validationState}
     >
-      {/* When expanded, Paper is absolute; this keeps the wrapper width stable */}
-      {isExpanded && <div className={styles.placeholder} aria-hidden="true" />}
       <Paper
         shadow="none"
         className={cx(
           styles.paper,
-          error || variableIssues.errors.length > 0 ? styles.error : undefined,
-          isVariableWarningOnly ? styles.warning : undefined,
-          isExpanded ? styles.expanded : undefined,
-          allowMultiline && !isExpanded ? styles.collapseFade : undefined,
+          validationState === 'error' ? styles.error : undefined,
+          validationState === 'warning' ? styles.warning : undefined,
+          !allowMultiline ? styles.clamped : undefined,
+          isFocused ? styles.focused : undefined,
         )}
         ps="4px"
       >
@@ -386,8 +381,7 @@ export default function SQLInlineEditor({
           className={cx(
             styles.cmWrapper,
             size === 'xs' ? styles.sizeXs : undefined,
-            !isExpanded ? styles.collapsed : undefined,
-            isExpanded ? 'cm-editor-multiline' : undefined,
+            allowMultiline ? 'cm-editor-multiline' : undefined,
           )}
         >
           <CodeMirror
@@ -410,14 +404,6 @@ export default function SQLInlineEditor({
           />
         </div>
         <VariableIssueIndicator issues={variableIssues} />
-        {onLanguageChange != null && language != null && (
-          <div className={styles.languageSwitchWrapper}>
-            <InputLanguageSwitch
-              language={language}
-              onLanguageChange={onLanguageChange}
-            />
-          </div>
-        )}
       </Paper>
     </div>
   );
diff --git a/packages/app/src/components/SQLEditor/variableValidation.module.scss b/packages/app/src/components/SQLEditor/variableValidation.module.scss
index 30db348fdd..1462c5dede 100644
--- a/packages/app/src/components/SQLEditor/variableValidation.module.scss
+++ b/packages/app/src/components/SQLEditor/variableValidation.module.scss
@@ -6,8 +6,6 @@
   line-height: 1;
   cursor: help;
 
-  /* In the SQL editor, centers the icon on the collapsed input's first line so
-     it stays put when the editor expands to multiple lines. Elsewhere (the
-     Lucene input's right section) it just fills its host. */
+  /* Keep the icon on the editor's first row as multiline content grows. */
   min-height: var(--editor-base-height, 100%);
 }
diff --git a/packages/app/src/components/SearchInput/AutocompleteInput.module.scss b/packages/app/src/components/SearchInput/AutocompleteInput.module.scss
index 2536b70f65..b26f89400d 100644
--- a/packages/app/src/components/SearchInput/AutocompleteInput.module.scss
+++ b/packages/app/src/components/SearchInput/AutocompleteInput.module.scss
@@ -1,13 +1,12 @@
 .root {
-  position: relative;
   flex: 1;
-  min-height: var(--autocomplete-base-height, 36px);
+  min-height: var(--editor-base-height, 36px);
 }
 
 /* The measured right section: an optional adornment, then the language switch */
 .rightSection {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   height: 100%;
 }
 
@@ -17,9 +16,15 @@
   border: 1px solid var(--color-border);
   border-radius: var(--mantine-radius-default);
 
+  /* !important overrides the inline min-height react-textarea-autosize sets,
+     so one line is exactly the height .root reserves for it. Without this the
+     row is taller than the bordered box and anything beside it overhangs. */
   textarea {
     border: none !important;
     word-break: break-all;
+    min-height: calc(
+      var(--editor-base-height, 36px) - var(--editor-border-inset, 2px)
+    ) !important;
   }
 
   textarea::placeholder {
@@ -27,35 +32,30 @@
   }
 
   &.focused {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 100;
-    box-shadow: var(--mb-shadow, var(--mantine-shadow-xs));
-    border-bottom: 2px solid var(--color-bg-brand) !important;
+    border-color: var(--color-bg-brand);
   }
+}
 
-  /* Fade at the bottom when collapsed (single-line, not focused); applied to textarea */
-  &.collapseFade {
-    position: relative;
-
-    &::after {
-      content: '';
-      position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      height: 12px;
-      background: linear-gradient(
-        to bottom,
-        transparent,
-        var(--color-bg-field)
-      );
-      pointer-events: none;
-      border-radius: var(--mantine-radius-default);
-    }
-  }
+/* Empty placeholders can wrap; hide the unused scrollbar that wrapping creates. */
+.root[data-empty='true'] .textarea textarea {
+  overflow: hidden;
+}
+
+/* Single-line Lucene: one visual row, like SQL without line wrapping. A long
+   query scrolls horizontally instead of wrapping under the clip. */
+.root[data-single-line='true'] .textarea textarea {
+  white-space: pre;
+  word-break: normal;
+  overflow-wrap: normal;
+  overflow: auto hidden;
+}
+
+.root[data-validation-state='error'] .textarea {
+  border-color: var(--color-bg-danger);
+}
+
+.root[data-validation-state='warning'] .textarea {
+  border-color: var(--color-bg-warning);
 }
 
 /* Dropdown content */
diff --git a/packages/app/src/components/SearchInput/AutocompleteInput.tsx b/packages/app/src/components/SearchInput/AutocompleteInput.tsx
index 91849581b3..7d298cc090 100644
--- a/packages/app/src/components/SearchInput/AutocompleteInput.tsx
+++ b/packages/app/src/components/SearchInput/AutocompleteInput.tsx
@@ -3,6 +3,7 @@ import cx from 'classnames';
 import Fuse from 'fuse.js';
 import { Loader, Popover, Textarea, UnstyledButton } from '@mantine/core';
 
+import { EDITOR_INPUT_HEIGHTS } from '@/components/editorInputHeights';
 import type { TokenInfo } from '@/hooks/useAutoCompleteOptions';
 import { useQueryHistory } from '@/utils';
 
@@ -10,6 +11,8 @@ import InputLanguageSwitch from './InputLanguageSwitch';
 
 import styles from './AutocompleteInput.module.scss';
 
+export type AutocompleteInputValidationState = 'error' | 'warning';
+
 export default function AutocompleteInput({
   inputRef,
   value,
@@ -23,6 +26,7 @@ export default function AutocompleteInput({
   aboveSuggestions,
   belowSuggestions,
   rightAdornment,
+  validationState,
   showSuggestionsOnEmpty,
   suggestionsHeader = 'Properties',
   zIndex = 999,
@@ -30,6 +34,7 @@ export default function AutocompleteInput({
   language,
   onSubmit,
   queryHistoryType,
+  allowMultiline = true,
   'data-testid': dataTestId,
 }: {
   inputRef: React.RefObject<HTMLTextAreaElement | null>;
@@ -46,15 +51,19 @@ export default function AutocompleteInput({
   belowSuggestions?: React.ReactNode;
   /** Rendered at the right edge of the input, left of the language switch. */
   rightAdornment?: React.ReactNode;
+  validationState?: AutocompleteInputValidationState;
   showSuggestionsOnEmpty?: boolean;
   suggestionsHeader?: string;
   zIndex?: number;
   onLanguageChange?: (language: 'sql' | 'lucene') => void;
   language?: 'sql' | 'lucene';
   queryHistoryType?: string;
+  allowMultiline?: boolean;
   'data-testid'?: string;
 }) {
   const suggestionsLimit = 10;
+  // Rows the query is shown across before the textarea starts scrolling.
+  const maxVisibleRows = 4;
 
   const [isSearchInputFocused, _setIsSearchInputFocused] = useState(false);
   const [isInputDropdownOpen, setIsInputDropdownOpen] = useState(false);
@@ -193,14 +202,15 @@ export default function AutocompleteInput({
     }
   }, [language, onLanguageChange, rightAdornment, inputRef]);
 
-  // Height including the 2px border from .textarea (1px top + 1px bottom)
-  const baseHeight = size === 'xs' ? 30 : size === 'lg' ? 44 : 38;
+  const baseHeight = EDITOR_INPUT_HEIGHTS[size];
 
   return (
     <div
       className={styles.root}
-      style={{ ['--autocomplete-base-height' as string]: `${baseHeight}px` }}
-      data-expanded={isSearchInputFocused ? 'true' : undefined}
+      style={{ ['--editor-base-height' as string]: `${baseHeight}px` }}
+      data-empty={value ? undefined : 'true'}
+      data-single-line={allowMultiline ? undefined : 'true'}
+      data-validation-state={validationState}
     >
       <Popover
         opened={isInputDropdownOpen}
@@ -225,14 +235,13 @@ export default function AutocompleteInput({
             placeholder={placeholder}
             className={cx(
               styles.textarea,
-              !isSearchInputFocused && styles.collapseFade,
               isSearchInputFocused && styles.focused,
             )}
             value={value}
             size={size}
             autosize
             minRows={1}
-            maxRows={isSearchInputFocused ? 4 : 1}
+            maxRows={allowMultiline ? maxVisibleRows : 1}
             data-testid={dataTestId}
             onChange={e => onChange(e.target.value)}
             onFocus={() => {
@@ -279,15 +288,14 @@ export default function AutocompleteInput({
                   e.preventDefault();
                   const selected = suggestions[selectedAutocompleteIndex];
                   onAcceptSuggestion(selected.value, selected.isVariable);
-                } else {
-                  // Allow shift+enter to still create new lines
-                  if (!e.shiftKey) {
-                    e.preventDefault();
-                    if (queryHistoryType && value) {
-                      setQueryHistory(value);
-                    }
-                    onSubmit?.();
+                } else if (!e.shiftKey) {
+                  e.preventDefault();
+                  if (queryHistoryType && value) {
+                    setQueryHistory(value);
                   }
+                  onSubmit?.();
+                } else if (!allowMultiline) {
+                  e.preventDefault();
                 }
               }
               if (
diff --git a/packages/app/src/components/SearchInput/SearchInputV2.tsx b/packages/app/src/components/SearchInput/SearchInputV2.tsx
index b5dd6d5146..d4ec866c1c 100644
--- a/packages/app/src/components/SearchInput/SearchInputV2.tsx
+++ b/packages/app/src/components/SearchInput/SearchInputV2.tsx
@@ -24,7 +24,9 @@ import {
 } from '@/hooks/useAutoCompleteOptions';
 import { useMetadataWithSettings } from '@/hooks/useMetadata';
 
-import AutocompleteInput from './AutocompleteInput';
+import AutocompleteInput, {
+  type AutocompleteInputValidationState,
+} from './AutocompleteInput';
 
 import styles from './SearchInputV2.module.scss';
 
@@ -53,6 +55,7 @@ export default function SearchInputV2({
   onSubmit,
   additionalSuggestions,
   queryHistoryType,
+  allowMultiline = true,
   dateRange,
   sourceId,
   enableVariables = false,
@@ -68,6 +71,7 @@ export default function SearchInputV2({
   onSubmit?: () => void;
   additionalSuggestions?: string[];
   queryHistoryType?: string;
+  allowMultiline?: boolean;
   dateRange?: [Date, Date];
   sourceId?: string;
   enableVariables?: boolean;
@@ -96,6 +100,12 @@ export default function SearchInputV2({
       language: 'lucene',
     },
   );
+  const validationState: AutocompleteInputValidationState | undefined =
+    variableIssues.errors.length > 0
+      ? 'error'
+      : variableIssues.warnings.length > 0
+        ? 'warning'
+        : undefined;
 
   const {
     options: autoCompleteOptions,
@@ -156,7 +166,9 @@ export default function SearchInputV2({
       onLanguageChange={onLanguageChange}
       onSubmit={onSubmit}
       queryHistoryType={queryHistoryType}
+      allowMultiline={allowMultiline}
       data-testid={dataTestId}
+      validationState={validationState}
       rightAdornment={
         hasVariableIssues(variableIssues) ? (
           <VariableIssueIndicator issues={variableIssues} />
diff --git a/packages/app/src/components/SearchInput/SearchWhereInput.module.scss b/packages/app/src/components/SearchInput/SearchWhereInput.module.scss
index 21674397ad..13e18b0818 100644
--- a/packages/app/src/components/SearchInput/SearchWhereInput.module.scss
+++ b/packages/app/src/components/SearchInput/SearchWhereInput.module.scss
@@ -1,13 +1,11 @@
 .root {
-  position: relative;
+  --editor-border-inset: 2px;
+
   flex: 1 1 0%;
   min-width: 0;
   display: flex;
   flex-direction: row;
   align-items: stretch;
-
-  /* visible so expanded SQL editor (position:absolute overlay) is not clipped */
-  overflow: visible;
 }
 
 .inputWrapper {
@@ -15,30 +13,14 @@
   flex: 1;
   min-width: 0;
 
-  /* When SQLInlineEditor is expanded, round the Paper bottom-left corner */
-  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
-  :global([data-expanded='true']) :global(.mantine-Paper-root) {
-    border-bottom-left-radius: var(--mantine-radius-default);
-    min-height: 38px;
-    border-bottom: 2px solid var(--color-bg-brand) !important;
-  }
-
-  /* When AutocompleteInput (Lucene) is expanded, round the input wrapper bottom-left corner */
-  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
-  :global([data-expanded='true']) :global(.mantine-InputWrapper-root) {
-    border-bottom-left-radius: var(--mantine-radius-default);
-    border-bottom: 2px solid var(--color-bg-brand);
-
-    textarea {
-      min-height: 38px !important;
-    }
-  }
-
   /* target only the SQLInlineEditor Paper (not the AutocompleteInput) */
   /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
   :global(.mantine-Paper-root) {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
+
+    /* The Paper theme sets `border` inline, which outranks this rule. */
+    border-left: none !important;
   }
 
   /* target only the AutocompleteInput Paper (not the SQLInlineEditor) */
@@ -46,48 +28,46 @@
   :global(.mantine-InputWrapper-root) {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
+    border-left: none;
 
     textarea {
       border-radius: 0 var(--mantine-radius-default)
         var(--mantine-radius-default) 0;
-
-      /* Prevent scrollbar when placeholder text wraps in narrow containers (maxRows=1 when unfocused) */
-      overflow: hidden;
     }
   }
-
-  /* !important overrides the inline min-height set by react-textarea-autosize.
-     Inner textarea is 2px shorter than the wrapper because the wrapper adds
-     a 1px border top/bottom, so 28px + 2px border = 30px outer (matches the
-     SQL inline editor's xs height). */
-  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
-  &.sizeXs :global(.mantine-InputWrapper-root) textarea {
-    min-height: 28px !important;
-  }
-
-  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
-  &.sizeSm :global(.mantine-InputWrapper-root) textarea {
-    min-height: 34px !important;
-  }
 }
 
+/* Stretches with the input so the seam between the two stays flush however
+   many lines the query takes. */
 .languageSwitch {
-  position: relative;
   flex-shrink: 0;
-  align-items: center;
   padding-left: 4px;
   border: 1px solid var(--color-border);
   border-right: none;
   border-radius: var(--mantine-radius-default) 0 0 var(--mantine-radius-default);
   background-color: var(--color-bg-field-addon);
+  min-height: var(--editor-base-height);
+}
 
-  &.sizeXs {
-    height: 30px;
-  }
+/* The switch and the input meet at a seam, so a focus border on only one of
+   them reads as half-focused. Keyed off focus inside the input specifically:
+   tabbing to the syntax-reference button shouldn't light up the switch alone. */
+.root:has(.inputWrapper :focus) .languageSwitch {
+  border-color: var(--color-bg-brand);
+}
 
-  &.sizeSm {
-    height: 36px;
-  }
+.root:has(.inputWrapper [data-validation-state='error']) .languageSwitch {
+  border-color: var(--color-bg-danger);
+}
+
+.root:has(.inputWrapper [data-validation-state='warning']) .languageSwitch {
+  border-color: var(--color-bg-warning);
+}
+
+/* Subtract the switch's borders so its controls align with the first row. */
+.languageSwitchRow {
+  flex-shrink: 0;
+  height: calc(var(--editor-base-height) - var(--editor-border-inset, 2px));
 }
 
 .shortcutHint {
diff --git a/packages/app/src/components/SearchInput/SearchWhereInput.tsx b/packages/app/src/components/SearchInput/SearchWhereInput.tsx
index e405c7d77d..e9df15a90c 100644
--- a/packages/app/src/components/SearchInput/SearchWhereInput.tsx
+++ b/packages/app/src/components/SearchInput/SearchWhereInput.tsx
@@ -4,6 +4,7 @@ import { ActionIcon, Box, Flex, Kbd, Tooltip } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { IconHelp } from '@tabler/icons-react';
 
+import { EDITOR_INPUT_HEIGHTS } from '@/components/editorInputHeights';
 import { SQLInlineEditorControlled } from '@/components/SQLEditor/SQLInlineEditor';
 
 import InputLanguageSwitch from './InputLanguageSwitch';
@@ -190,7 +191,8 @@ export default function SearchWhereInput({
   };
 
   const tc = tableConnection ? { tableConnection } : { tableConnections };
-  const sizeClass = size === 'xs' ? styles.sizeXs : styles.sizeSm;
+  const baseHeight =
+    size === 'xs' ? EDITOR_INPUT_HEIGHTS.xs : EDITOR_INPUT_HEIGHTS.sm;
 
   return (
     <>
@@ -205,31 +207,34 @@ export default function SearchWhereInput({
           width,
           maxWidth,
           minWidth,
+          ['--editor-base-height' as string]: `${baseHeight}px`,
         }}
       >
         <Flex
-          align="center"
-          className={`${styles.languageSwitch} ${sizeClass}`}
+          align="flex-start"
+          className={styles.languageSwitch}
           data-testid="where-language-switch"
           onMouseDown={e => e.preventDefault()}
         >
-          <InputLanguageSwitch
-            language={language}
-            onLanguageChange={handleLanguageChange}
-          />
-          <Tooltip label="Syntax reference" withArrow position="top">
-            <ActionIcon
-              variant="subtle"
-              size="xs"
-              aria-label="Open syntax reference"
-              onClick={openSyntaxRef}
-              style={{ marginRight: 4 }}
-            >
-              <IconHelp size={14} />
-            </ActionIcon>
-          </Tooltip>
+          <Flex align="center" className={styles.languageSwitchRow}>
+            <InputLanguageSwitch
+              language={language}
+              onLanguageChange={handleLanguageChange}
+            />
+            <Tooltip label="Syntax reference" withArrow position="top">
+              <ActionIcon
+                variant="subtle"
+                size="xs"
+                aria-label="Open syntax reference"
+                onClick={openSyntaxRef}
+                style={{ marginRight: 4 }}
+              >
+                <IconHelp size={14} />
+              </ActionIcon>
+            </Tooltip>
+          </Flex>
         </Flex>
-        <Box className={`${styles.inputWrapper} ${sizeClass}`}>
+        <Box className={styles.inputWrapper}>
           {isSql ? (
             <SQLInlineEditorControlled
               {...tc}
@@ -257,6 +262,7 @@ export default function SearchWhereInput({
               placeholder={lucenePlaceholder}
               queryHistoryType={luceneQueryHistoryType}
               enableHotkey={enableHotkey}
+              allowMultiline={allowMultiline}
               size={size}
               data-testid={dataTestId}
               additionalSuggestions={additionalSuggestions}
diff --git a/packages/app/src/components/SearchInput/__tests__/SearchWhereInput.test.tsx b/packages/app/src/components/SearchInput/__tests__/SearchWhereInput.test.tsx
index 059e4a064d..1dcb451e6a 100644
--- a/packages/app/src/components/SearchInput/__tests__/SearchWhereInput.test.tsx
+++ b/packages/app/src/components/SearchInput/__tests__/SearchWhereInput.test.tsx
@@ -101,24 +101,50 @@ describe('SearchWhereInput', () => {
         expect(input).toHaveValue('level:error');
       });
     });
+
+    it('does not insert a newline in Lucene when allowMultiline is false', async () => {
+      const user = userEvent.setup();
+      const onSubmit = jest.fn();
+      renderWithMantine(
+        <TestWrapper defaultLanguage="lucene">
+          {({ control }) => (
+            <SearchWhereInput
+              tableConnection={mockTableConnection}
+              control={control}
+              name="where"
+              allowMultiline={false}
+              onSubmit={onSubmit}
+            />
+          )}
+        </TestWrapper>,
+      );
+
+      const input = screen.getByPlaceholderText(
+        /Search your events w\/ Lucene/i,
+      );
+      expect(input.closest('[data-single-line]')).toHaveAttribute(
+        'data-single-line',
+        'true',
+      );
+      await user.click(input);
+      await user.keyboard('first{Shift>}{Enter}{/Shift}second');
+
+      expect(input).toHaveValue('firstsecond');
+      expect(onSubmit).not.toHaveBeenCalled();
+    });
   });
 
   describe('SQL Mode', () => {
     it('renders SQL input with WHERE label when whereLanguage is sql', () => {
       renderWithMantine(<TestWrapper defaultLanguage="sql" />);
 
-      // SQL mode shows the WHERE label
       expect(screen.getByText('WHERE')).toBeInTheDocument();
     });
 
     it('renders SQL placeholder', () => {
       renderWithMantine(<TestWrapper defaultLanguage="sql" />);
 
-      // Check for placeholder text in the CodeMirror editor
-      // Note: CodeMirror may render placeholder differently
-      screen.queryByText(/SQL WHERE clause/i);
-      // If placeholder is not directly visible, the component should still render
-      expect(screen.getByText('WHERE')).toBeInTheDocument();
+      expect(screen.getByText(/SQL WHERE clause/i)).toBeInTheDocument();
     });
   });
 
@@ -152,7 +178,7 @@ describe('SearchWhereInput', () => {
 
   describe('Component Props', () => {
     it('respects width prop in SQL mode', () => {
-      renderWithMantine(
+      const { container } = renderWithMantine(
         <TestWrapper defaultLanguage="sql">
           {({ control }) => (
             <SearchWhereInput
@@ -165,8 +191,9 @@ describe('SearchWhereInput', () => {
         </TestWrapper>,
       );
 
-      // The Box wrapper should have the width style
-      expect(screen.getByText('WHERE')).toBeInTheDocument();
+      expect(
+        container.querySelector('[style*="width: 50%"]'),
+      ).toBeInTheDocument();
     });
 
     it('hides label when showLabel is false', () => {
@@ -342,6 +369,11 @@ describe('SearchWhereInput', () => {
           'This expression references unknown variable $srvice. Available variables: svc.',
         ),
       );
+      expect(
+        screen
+          .getByTestId('variable-validation')
+          .closest('[data-validation-state]'),
+      ).toHaveAttribute('data-validation-state', 'warning');
     });
 
     it('warns that a Lucene expression references a variable that does not exist', async () => {
@@ -355,6 +387,11 @@ describe('SearchWhereInput', () => {
           'This expression references unknown variable $srvice. Available variables: svc.',
         ),
       );
+      expect(
+        screen
+          .getByTestId('variable-validation')
+          .closest('[data-validation-state]'),
+      ).toHaveAttribute('data-validation-state', 'warning');
     });
 
     it('errors when a SQL reference is wrapped in quotes', async () => {
@@ -366,6 +403,11 @@ describe('SearchWhereInput', () => {
       await waitFor(() =>
         expect(issueMessages()).toContain('is wrapped in quotes'),
       );
+      expect(
+        screen
+          .getByTestId('variable-validation')
+          .closest('[data-validation-state]'),
+      ).toHaveAttribute('data-validation-state', 'error');
     });
 
     it('leaves a quoted reference alone in Lucene, where each value is quoted anyway', async () => {
diff --git a/packages/app/src/components/editorInputHeights.ts b/packages/app/src/components/editorInputHeights.ts
new file mode 100644
index 0000000000..b78aef8d24
--- /dev/null
+++ b/packages/app/src/components/editorInputHeights.ts
@@ -0,0 +1,5 @@
+export const EDITOR_INPUT_HEIGHTS = {
+  xs: 30,
+  sm: 36,
+  lg: 44,
+} as const;
diff --git a/packages/app/tests/e2e/components/ChartEditorComponent.ts b/packages/app/tests/e2e/components/ChartEditorComponent.ts
index bd0f748526..7b726ffbf8 100644
--- a/packages/app/tests/e2e/components/ChartEditorComponent.ts
+++ b/packages/app/tests/e2e/components/ChartEditorComponent.ts
@@ -14,6 +14,7 @@ import { switchWhereToLucene } from '../utils/lucene-autocomplete';
 import { addTagViaPicker, removeTagViaPicker } from '../utils/tags';
 
 import { WebhookAlertModalComponent } from './WebhookAlertModalComponent';
+import { WhereInputComponent } from './WhereInputComponent';
 
 export class ChartEditorComponent {
   readonly page: Page;
@@ -98,30 +99,21 @@ export class ChartEditorComponent {
 
   /**
    * The editor renders one WHERE input per series (the series' agg condition)
-   * followed by the chart-level WHERE, and they share a placeholder and testid.
-   * `'series'` takes the first, `'chart'` the last — so `'series'` only
-   * addresses the first series, which is all the tests need so far.
+   * followed by the chart-level WHERE. `'series'` takes the first, `'chart'`
+   * the last — so `'series'` only addresses the first series, which is all the
+   * tests need so far.
    */
-  private whereInput(locator: Locator, scope: 'chart' | 'series'): Locator {
-    return scope === 'series' ? locator.first() : locator.last();
-  }
-
-  /**
-   * A whole WHERE input — its language switch, the SQL or Lucene editor, and
-   * anything the input renders beside them. Located from the language switch,
-   * which is the one part present in both languages and whichever state the
-   * editor is in.
-   */
-  private whereRow(scope: 'chart' | 'series' = 'chart'): Locator {
-    return this.whereInput(
-      this.editorForm().getByTestId('where-language-switch'),
-      scope,
-    ).locator('xpath=..');
+  private whereInput(scope: 'chart' | 'series' = 'chart'): WhereInputComponent {
+    return new WhereInputComponent(
+      this.page,
+      this.editorForm(),
+      scope === 'series' ? 'first' : 'last',
+    );
   }
 
   /** The warning icon a WHERE input shows about the variables it references. */
   whereVariableWarning(scope: 'chart' | 'series' = 'chart'): Locator {
-    return this.whereRow(scope).getByTestId('variable-validation');
+    return this.whereInput(scope).variableWarning;
   }
 
   /**
@@ -147,26 +139,7 @@ export class ChartEditorComponent {
   ) {
     // A completion popup left open by a prior editor can overlay the switch.
     await dismissSqlAutocomplete(this.page);
-    const select = this.whereInput(
-      this.editorForm().getByTestId('where-language-switch'),
-      scope,
-    ).getByLabel('Query language');
-    await select.click();
-    await this.page
-      .getByRole('option', { name: language, exact: true })
-      .click();
-  }
-
-  /** Focus a WHERE input and replace its contents with `expression`. */
-  private async fillWhereEditor(expression: string, scope: 'chart' | 'series') {
-    // Located through the row rather than the placeholder, which CodeMirror
-    // drops as soon as there is content — so this can refill an input it has
-    // already filled once.
-    const editor = this.whereRow(scope).locator('.cm-content');
-    await editor.click();
-    await this.page.keyboard.press('ControlOrMeta+A');
-    await this.page.keyboard.press('Delete');
-    await this.page.keyboard.type(expression);
+    await this.whereInput(scope).selectLanguage(language);
   }
 
   /**
@@ -175,7 +148,7 @@ export class ChartEditorComponent {
    */
   async setSqlWhere(expression: string, scope: 'chart' | 'series' = 'chart') {
     await this.setWhereLanguage('SQL', scope);
-    await this.fillWhereEditor(expression, scope);
+    await this.whereInput(scope).fillSql(expression);
     await dismissSqlAutocomplete(this.page);
   }
 
@@ -184,12 +157,7 @@ export class ChartEditorComponent {
    * plain textarea rather than CodeMirror. Leaves the suggestion dropdown open.
    */
   async typeLuceneWhere(text: string, scope: 'chart' | 'series' = 'chart') {
-    const input = this.whereInput(
-      this.editorForm().getByPlaceholder(/Search your events w\/ Lucene/i),
-      scope,
-    );
-    await input.click();
-    await input.fill(text);
+    await this.whereInput(scope).typeLucene(text);
   }
 
   /**
@@ -204,7 +172,7 @@ export class ChartEditorComponent {
     scope: 'chart' | 'series' = 'chart',
   ): Promise<{ labels: string[]; info: string }> {
     await this.setWhereLanguage('SQL', scope);
-    await this.fillWhereEditor(prefix, scope);
+    await this.whereInput(scope).fillSql(prefix);
 
     const popup = this.page.locator('.cm-tooltip-autocomplete');
     await popup.waitFor({ state: 'visible', timeout: 10000 });
diff --git a/packages/app/tests/e2e/components/SidePanelComponent.ts b/packages/app/tests/e2e/components/SidePanelComponent.ts
index 854111514e..b64077fb04 100644
--- a/packages/app/tests/e2e/components/SidePanelComponent.ts
+++ b/packages/app/tests/e2e/components/SidePanelComponent.ts
@@ -4,6 +4,8 @@
  */
 import { Locator, Page } from '@playwright/test';
 
+import { WhereInputComponent } from './WhereInputComponent';
+
 export class SidePanelComponent {
   readonly page: Page;
   private readonly panelContainer: Locator;
@@ -192,6 +194,11 @@ export class SidePanelComponent {
     return this.page.getByTestId('trace-logs-filter');
   }
 
+  /** The spans filter's WHERE control. Call `toggleTraceFilters` first. */
+  get traceSpansWhereInput() {
+    return new WhereInputComponent(this.page, this.traceSpansFilter);
+  }
+
   /** Expand or collapse the trace waterfall's filter inputs. */
   async toggleTraceFilters() {
     await this.page.getByTestId('trace-filters-toggle').click();
diff --git a/packages/app/tests/e2e/components/WhereInputComponent.ts b/packages/app/tests/e2e/components/WhereInputComponent.ts
new file mode 100644
index 0000000000..d17d72f32f
--- /dev/null
+++ b/packages/app/tests/e2e/components/WhereInputComponent.ts
@@ -0,0 +1,178 @@
+/**
+ * WhereInputComponent - the WHERE control rendered by `SearchWhereInput`:
+ * a language switch sitting flush against a SQL or Lucene input.
+ *
+ * Shared by every page that renders one (search, dashboards, sessions), so the
+ * traversal to the input — which carries no visible label and, in SQL, no test
+ * id — lives here rather than in each page object or spec.
+ */
+import { expect, Locator, Page } from '@playwright/test';
+
+import { borderedBox, replaceEditorText } from '../utils/locators';
+import { switchWhereLanguage } from '../utils/lucene-autocomplete';
+import type { MultilineField } from '../utils/multiline-input';
+
+export type QueryLanguage = 'SQL' | 'Lucene';
+
+/** One half of the seam, as the user sees it. */
+type SeamHalf = {
+  height: number;
+  borderColor: string;
+};
+
+export type WhereSeam = {
+  languageSwitch: SeamHalf;
+  input: SeamHalf;
+};
+
+/**
+ * Sub-pixel rounding makes exact height equality one layout change away from
+ * flaking; the overhang this guards against was 2px.
+ */
+const SEAM_TOLERANCE_PX = 1;
+
+export class WhereInputComponent {
+  readonly page: Page;
+
+  /**
+   * The control as a whole, located from its language switch — the one part
+   * present in both languages.
+   */
+  readonly row: Locator;
+
+  /**
+   * `pick` chooses among several WHERE inputs under the same `root` (a chart
+   * editor renders one per series, then the chart-level input).
+   */
+  constructor(
+    page: Page,
+    root: Page | Locator = page,
+    pick: 'first' | 'last' = 'first',
+  ) {
+    this.page = page;
+    const languageSwitch = root.getByTestId('where-language-switch');
+    this.row = (
+      pick === 'last' ? languageSwitch.last() : languageSwitch.first()
+    ).locator('xpath=..');
+  }
+
+  get languageSwitch(): Locator {
+    return this.row.getByTestId('where-language-switch');
+  }
+
+  /** The CodeMirror editor rendered in SQL mode. */
+  get sqlEditor(): Locator {
+    return this.row.locator('.cm-editor').first();
+  }
+
+  /** The autosizing textarea rendered in Lucene mode. */
+  get luceneInput(): Locator {
+    return this.row.locator('textarea').first();
+  }
+
+  async selectLanguage(language: QueryLanguage): Promise<void> {
+    await switchWhereLanguage(this.languageSwitch, language);
+    // Wait for the dropdown to close so it can't cover the input.
+    await this.page
+      .getByRole('option', { name: language, exact: true })
+      .waitFor({ state: 'hidden', timeout: 5000 });
+  }
+
+  /** Replace the SQL editor's contents. The input must already be in SQL mode. */
+  async fillSql(expression: string): Promise<void> {
+    await replaceEditorText(
+      this.page,
+      this.sqlEditor.locator('.cm-content').first(),
+      expression,
+    );
+  }
+
+  /**
+   * Type into the Lucene textarea, leaving the suggestion dropdown open.
+   * The input must already be in Lucene mode.
+   */
+  async typeLucene(text: string): Promise<void> {
+    await this.luceneInput.click();
+    await this.luceneInput.fill(text);
+  }
+
+  /** The warning icon this WHERE input shows about the variables it references. */
+  get variableWarning(): Locator {
+    return this.row.getByTestId('variable-validation');
+  }
+
+  /** The input for `language`, as the growth assertions need it. */
+  field(language: QueryLanguage): MultilineField {
+    if (language === 'Lucene') {
+      const input = this.luceneInput;
+      return { focusTarget: input, growthBox: input, visibleBox: input };
+    }
+    // `.cm-editor` can stay fixed while `.cm-content` tracks the line count,
+    // and the Paper around the editor is the box that would clip it.
+    const content = this.sqlEditor.locator('.cm-content').first();
+    return {
+      focusTarget: content,
+      growthBox: content,
+      visibleBox: borderedBox(this.sqlEditor),
+    };
+  }
+
+  /** Move focus into the input, whichever language it is rendering. */
+  async focus(): Promise<void> {
+    const sqlContent = this.sqlEditor.locator('.cm-content').first();
+    if ((await sqlContent.count()) > 0) {
+      await sqlContent.focus();
+      return;
+    }
+    await this.luceneInput.focus();
+  }
+
+  /**
+   * Heights and border colors of the two halves of the control. They sit flush
+   * against each other, so a height mismatch leaves the switch overhanging the
+   * input, and a focus color on only one reads as half-focused.
+   */
+  async readSeam(): Promise<WhereSeam> {
+    return this.row.evaluate(el => {
+      const addon = el.querySelector('[data-testid="where-language-switch"]');
+      // The box the user sees a border around: the SQL editor's Paper, or the
+      // Lucene textarea's wrapper.
+      const input = Array.from(el.querySelectorAll('*')).find(
+        node =>
+          addon?.contains(node) === false &&
+          parseFloat(getComputedStyle(node).borderTopWidth) > 0,
+      );
+      const read = (node?: Element | null) => ({
+        height: node?.getBoundingClientRect().height ?? 0,
+        borderColor: node ? getComputedStyle(node).borderTopColor : '',
+      });
+      return { languageSwitch: read(addon), input: read(input) };
+    });
+  }
+
+  /**
+   * The switch and the input are sized independently — the switch from its own
+   * SCSS, the input from whichever editor the language selects — so an editor
+   * that reserves a taller row than its bordered box leaves the switch
+   * overhanging it.
+   */
+  async expectSeamFlush(): Promise<void> {
+    await expect
+      .poll(async () => {
+        const seam = await this.readSeam();
+        if (seam.languageSwitch.height <= 0 || seam.input.height <= 0) {
+          return Number.POSITIVE_INFINITY;
+        }
+        return Math.abs(seam.languageSwitch.height - seam.input.height);
+      })
+      .toBeLessThanOrEqual(SEAM_TOLERANCE_PX);
+  }
+
+  async borderColors(): Promise<{ languageSwitch: string; input: string }> {
+    const seam = await this.readSeam();
+    return {
+      languageSwitch: seam.languageSwitch.borderColor,
+      input: seam.input.borderColor,
+    };
+  }
+}
diff --git a/packages/app/tests/e2e/features/shared/multiline.spec.ts b/packages/app/tests/e2e/features/shared/multiline.spec.ts
index 9cb2ea07d9..0696d75cef 100644
--- a/packages/app/tests/e2e/features/shared/multiline.spec.ts
+++ b/packages/app/tests/e2e/features/shared/multiline.spec.ts
@@ -1,139 +1,87 @@
-import { DashboardsListPage } from 'tests/e2e/page-objects/DashboardsListPage';
-import type { Locator, Page } from '@playwright/test';
+import type { Page } from '@playwright/test';
 
+import {
+  QueryLanguage,
+  WhereInputComponent,
+} from '../../components/WhereInputComponent';
+import { DashboardsListPage } from '../../page-objects/DashboardsListPage';
 import { SearchPage } from '../../page-objects/SearchPage';
 import { expect, test } from '../../utils/base-test';
+import {
+  expectExpandsAndStaysExpanded,
+  expectStaysOneRow,
+} from '../../utils/multiline-input';
 
 test.describe('Multiline Input', { tag: '@search' }, () => {
-  const testInputExpansion = async (
-    page: Page,
-    editor: Locator,
-    /** For CodeMirror, pass the content element that grows (e.g. .cm-content); for textarea, omit to use editor. */
-    measureLocator?: Locator,
-  ): Promise<void> => {
-    const measureEl = measureLocator ?? editor;
-    // Scroll into view then focus (more reliable than click for textarea/input in CI)
-    await editor.scrollIntoViewIfNeeded();
-    await editor.focus();
-    await page.keyboard.type('first line');
-
-    // Get initial single line height from the element that reflects content height
-    const singleLineBox = await measureEl.boundingBox();
-    const singleLineHeight = singleLineBox?.height || 0;
-
-    // Add a line break and type second line
-    await page.keyboard.press('Shift+Enter');
-    await page.keyboard.type('second line');
-
-    // Verify newline was inserted: CodeMirror has .cm-line per line; textarea value contains newline
-    const isCodeMirror = (await editor.locator('.cm-line').count()) > 0;
-    if (isCodeMirror) {
-      await expect(editor.locator('.cm-line')).toHaveCount(2, {
-        timeout: 2000,
-      });
-    } else {
-      await expect(editor).toHaveValue(/first line[\r\n]+second line/, {
-        timeout: 2000,
-      });
-    }
-
-    // Verify height did not shrink (may stay same on some layouts e.g. scrollable area)
-    const multiLineBox = await measureEl.boundingBox();
-    const multiLineHeight = multiLineBox?.height || 0;
-    expect(multiLineHeight).toBeGreaterThanOrEqual(singleLineHeight);
-  };
-
-  const getEditor = (
-    page: Page,
-    mode: 'SQL' | 'Lucene',
-    formSelector?: string,
-    whereText = 'WHERE',
-  ): Locator => {
-    if (mode === 'SQL') {
-      const container = formSelector ? page.locator(formSelector) : page;
-      const whereContainer = container.locator(
-        `div:has(div.mantine-Text-root:has-text("${whereText}"))`,
-      );
-      return whereContainer.locator('.cm-editor').first();
-    }
-    // Target the textarea so the click hits the typing area, not the Query language Select in the right section
-    return page
-      .locator('[data-testid="search-input"] textarea')
-      .or(page.locator('textarea[data-testid="search-input"]'))
-      .first();
-  };
-
-  // Test configurations
-  const tests = [
+  /** Pages that render a WHERE input, and how to get to one. */
+  const pages = [
     {
-      path: '/search',
       name: 'Search Page',
-      formSelector: '[data-testid="search-form"]',
-      whereText: 'WHERE',
+      openWhereInput: async (page: Page) => {
+        const searchPage = new SearchPage(page);
+        await searchPage.goto();
+        return searchPage.whereInput;
+      },
     },
     {
-      path: '/dashboards',
       name: 'Dashboard Page',
-      formSelector: undefined,
-      whereText: 'WHERE',
-    },
-  ];
-
-  tests.forEach(({ path, name, formSelector, whereText }) => {
-    test(`should expand SQL input on line break on ${name}`, async ({
-      page,
-    }) => {
-      // Navigate using page object
-      // eslint-disable-next-line playwright/no-conditional-in-test
-      if (path === '/search') {
-        const searchPage = new SearchPage(page);
-        await searchPage.goto();
-        await searchPage.switchToSQLMode();
-      } else {
+      openWhereInput: async (page: Page) => {
         const dashboardsListPage = new DashboardsListPage(page);
         await dashboardsListPage.goto();
         await dashboardsListPage.createNewDashboard();
-        // Dashboard uses Controller + SQL/SearchInputV2 directly (no where-language-switch wrapper)
-        await page.getByRole('combobox', { name: 'Query language' }).click();
-        await page.getByRole('option', { name: 'SQL', exact: true }).click();
-        // Wait for dropdown to close so the WHERE input is not covered
-        await page
-          .getByRole('option', { name: 'SQL', exact: true })
-          .waitFor({ state: 'hidden', timeout: 5000 });
-      }
+        return new WhereInputComponent(page);
+      },
+    },
+  ];
 
-      const editor = getEditor(page, 'SQL', formSelector, whereText);
-      await expect(editor).toBeVisible();
-      // CodeMirror: .cm-editor can stay fixed; .cm-content height reflects line count
-      const measureEl = editor.locator('.cm-content').first();
-      await testInputExpansion(page, editor, measureEl);
-    });
+  const languages: QueryLanguage[] = ['SQL', 'Lucene'];
 
-    test(`should expand Lucene input on line break on ${name}`, async ({
-      page,
-    }) => {
-      // Navigate using page object
-      // eslint-disable-next-line playwright/no-conditional-in-test
-      if (path === '/search') {
-        const searchPage = new SearchPage(page);
-        await searchPage.goto();
-        await searchPage.switchToLuceneMode();
-      } else {
-        const dashboardsListPage = new DashboardsListPage(page);
-        await dashboardsListPage.goto();
-        await dashboardsListPage.createNewDashboard();
-        // Dashboard has no where-language-switch wrapper; use Query language textbox directly
-        await page.getByRole('combobox', { name: 'Query language' }).click();
-        await page.getByRole('option', { name: 'Lucene', exact: true }).click();
-        // Wait for dropdown to close so the search input is not covered
-        await page
-          .getByRole('option', { name: 'Lucene', exact: true })
-          .waitFor({ state: 'hidden', timeout: 5000 });
-      }
+  pages.forEach(({ name, openWhereInput }) => {
+    languages.forEach(language => {
+      test(`should expand ${language} input on line break on ${name}`, async ({
+        page,
+      }) => {
+        const whereInput = await openWhereInput(page);
+        await whereInput.selectLanguage(language);
 
-      const editor = getEditor(page, 'Lucene', formSelector, whereText);
-      await expect(editor).toBeVisible();
-      await testInputExpansion(page, editor);
+        const field = whereInput.field(language);
+        await expect(field.focusTarget).toBeVisible();
+
+        await expectExpandsAndStaysExpanded(page, field, {
+          onSingleLine: () => whereInput.expectSeamFlush(),
+        });
+      });
     });
   });
+
+  test('should keep SELECT and ORDER BY expanded after blur', async ({
+    page,
+  }) => {
+    const searchPage = new SearchPage(page);
+    await searchPage.goto();
+
+    for (const field of [
+      searchPage.selectClauseField(),
+      searchPage.orderByClauseField(),
+    ]) {
+      await expect(field.focusTarget).toBeVisible();
+      await searchPage.clearClause(field);
+      await expectExpandsAndStaysExpanded(page, field);
+    }
+  });
+
+  test('should keep a single-line WHERE one row after blur', async ({
+    page,
+  }) => {
+    const searchPage = new SearchPage(page);
+    await searchPage.goto();
+    const whereInput = await searchPage.openTraceSpansFilter();
+
+    for (const language of languages) {
+      await whereInput.selectLanguage(language);
+      const field = whereInput.field(language);
+      await expect(field.focusTarget).toBeVisible();
+      await expectStaysOneRow(page, field);
+    }
+  });
 });
diff --git a/packages/app/tests/e2e/page-objects/SearchPage.ts b/packages/app/tests/e2e/page-objects/SearchPage.ts
index 611098b692..a14e0a752a 100644
--- a/packages/app/tests/e2e/page-objects/SearchPage.ts
+++ b/packages/app/tests/e2e/page-objects/SearchPage.ts
@@ -12,7 +12,10 @@ import { SearchPageAlertModalComponent } from '../components/SearchPageAlertModa
 import { SidePanelComponent } from '../components/SidePanelComponent';
 import { TableComponent } from '../components/TableComponent';
 import { TimePickerComponent } from '../components/TimePickerComponent';
-import { dismissSqlAutocomplete } from '../utils/locators';
+import { WhereInputComponent } from '../components/WhereInputComponent';
+import { DEFAULT_TRACES_SOURCE_NAME } from '../utils/constants';
+import { borderedBox, dismissSqlAutocomplete } from '../utils/locators';
+import type { MultilineField } from '../utils/multiline-input';
 
 type SaveSearchModalProps = {
   update: boolean;
@@ -25,6 +28,7 @@ export class SearchPage {
   readonly patternSidePanel: PatternSidePanelComponent;
   readonly infrastructure: InfrastructurePanelComponent;
   readonly filters: FilterComponent;
+  readonly whereInput: WhereInputComponent;
   readonly savedSearchModal: SavedSearchModalComponent;
   readonly savedSearchNameTitle: Locator;
   readonly alertModal: SearchPageAlertModalComponent;
@@ -36,10 +40,7 @@ export class SearchPage {
   private readonly searchInput: Locator;
   private readonly searchButton: Locator;
   private readonly saveSearchButton: Locator;
-  private readonly languageSelect: Locator;
   private readonly updateSearchButton: Locator;
-  private readonly luceneTab: Locator;
-  private readonly sqlTab: Locator;
   private readonly sourceSelector: Locator;
 
   constructor(page: Page, defaultTimeout: number = 3000) {
@@ -64,16 +65,11 @@ export class SearchPage {
 
     // Define page-specific locators
     this.searchForm = page.getByTestId('search-form');
+    this.whereInput = new WhereInputComponent(page, this.searchForm);
     this.searchInput = page.getByTestId('search-input');
     this.searchButton = page.getByTestId('search-submit-button');
     this.saveSearchButton = page.getByTestId('save-search-button');
     this.updateSearchButton = page.getByTestId('update-search-button');
-    const whereLanguageSwitch = page.getByTestId('where-language-switch');
-    this.languageSelect = whereLanguageSwitch.getByRole('combobox', {
-      name: 'Query language',
-    });
-    this.sqlTab = page.getByRole('option', { name: 'SQL', exact: true });
-    this.luceneTab = page.getByRole('option', { name: 'Lucene', exact: true });
     this.sourceSelector = page.getByTestId('source-selector');
   }
 
@@ -205,6 +201,27 @@ export class SearchPage {
     await expect(this.sidePanel.tabs).toBeVisible();
   }
 
+  /**
+   * Open the waterfall's spans filter — a `SearchWhereInput` with
+   * `allowMultiline={false}` in both SQL and Lucene.
+   */
+  async openTraceSpansFilter(): Promise<WhereInputComponent> {
+    await this.selectSource(DEFAULT_TRACES_SOURCE_NAME);
+    await this.timePicker.selectRelativeTime('Last 1 days');
+    await this.submitEmptySearch();
+    await expect(this.table.firstRow).toBeVisible();
+    await this.table.clickFirstRow();
+    await expect(this.sidePanel.container).toBeVisible();
+    await expect(this.sidePanel.getTab('trace')).toBeVisible({
+      timeout: 15_000,
+    });
+    await this.sidePanel.clickTab('trace');
+    await this.sidePanel.toggleTraceFilters();
+    const whereInput = this.sidePanel.traceSpansWhereInput;
+    await expect(whereInput.languageSwitch).toBeVisible();
+    return whereInput;
+  }
+
   /**
    * Clear the search input
    */
@@ -216,16 +233,14 @@ export class SearchPage {
    * Switch to SQL mode
    */
   async switchToSQLMode() {
-    await this.languageSelect.click();
-    await this.sqlTab.click();
+    await this.whereInput.selectLanguage('SQL');
   }
 
   /**
    * Switch to Lucene mode
    */
   async switchToLuceneMode() {
-    await this.languageSelect.click();
-    await this.luceneTab.click();
+    await this.whereInput.selectLanguage('Lucene');
   }
 
   /**
@@ -312,6 +327,22 @@ export class SearchPage {
     return this.page.getByText(/Error loading/i);
   }
 
+  /** Move focus into the WHERE input, whichever language it is rendering. */
+  async focusWhereInput() {
+    await this.whereInput.focus();
+  }
+
+  /**
+   * Border colors of the two halves of the WHERE control. They sit flush
+   * against each other, so a focus state on only one reads as half-focused.
+   */
+  async getWhereBorderColors(): Promise<{
+    languageSwitch: string;
+    input: string;
+  }> {
+    return this.whereInput.borderColors();
+  }
+
   /**
    * Get SELECT editor (CodeMirror)
    */
@@ -319,6 +350,45 @@ export class SearchPage {
     return this.page.locator('.cm-content').first();
   }
 
+  async getSelectBorderColor(): Promise<string> {
+    return this.selectClauseField().visibleBox.evaluate(
+      el => getComputedStyle(el).borderTopColor,
+    );
+  }
+
+  async getOrderByBorderColor(): Promise<string> {
+    return this.orderByClauseField().visibleBox.evaluate(
+      el => getComputedStyle(el).borderTopColor,
+    );
+  }
+
+  /**
+   * The SELECT / ORDER BY clause editors as growth-assertable fields.
+   *
+   * Located from their labels rather than by `.cm-content` index, which shifts
+   * with the WHERE language: in SQL mode the WHERE input is a CodeMirror editor
+   * too, and it comes first.
+   */
+  selectClauseField(): MultilineField {
+    return this.clauseField('SELECT');
+  }
+
+  orderByClauseField(): MultilineField {
+    return this.clauseField('ORDER BY');
+  }
+
+  /** Empty a clause editor so it starts from one short line. */
+  async clearClause(field: MultilineField) {
+    await field.focusTarget.press('ControlOrMeta+A');
+    await field.focusTarget.press('Backspace');
+  }
+
+  private clauseField(label: 'SELECT' | 'ORDER BY'): MultilineField {
+    const paper = borderedBox(this.page.getByText(label, { exact: true }));
+    const content = paper.locator('.cm-content').first();
+    return { focusTarget: content, growthBox: content, visibleBox: paper };
+  }
+
   /**
    * Get ORDER BY editor (CodeMirror)
    */
@@ -419,11 +489,11 @@ export class SearchPage {
   }
 
   get luceneModeTab() {
-    return this.luceneTab;
+    return this.page.getByRole('option', { name: 'Lucene', exact: true });
   }
 
   get sqlModeTab() {
-    return this.sqlTab;
+    return this.page.getByRole('option', { name: 'SQL', exact: true });
   }
 
   get sourceDropdown() {
diff --git a/packages/app/tests/e2e/utils/locators.ts b/packages/app/tests/e2e/utils/locators.ts
index 65e3c87af6..bc62158736 100644
--- a/packages/app/tests/e2e/utils/locators.ts
+++ b/packages/app/tests/e2e/utils/locators.ts
@@ -27,6 +27,30 @@ export const getSqlEditor = (page: Page, placeholder?: string) => {
   return page.locator(locator).first();
 };
 
+/**
+ * The bordered box around a query editor: the nearest Mantine Paper ancestor,
+ * which is what the user sees grow when the query wraps. Takes any node inside
+ * it — the editor itself, or the clause label beside it.
+ */
+export const borderedBox = (inner: Locator) =>
+  inner.locator(
+    'xpath=ancestor::div[contains(@class, "mantine-Paper-root")][1]',
+  );
+
+/**
+ * Move focus off whatever holds it, without pressing a key.
+ *
+ * Keyboard-driven blurs are not interchangeable here: Escape inside a Mantine
+ * Modal closes the modal (see `dismissSqlAutocomplete`), and Tab moves focus to
+ * a neighbour that may itself change the layout under test.
+ */
+export const blurActiveElement = async (page: Page) => {
+  await page.evaluate(() => {
+    const el = document.activeElement;
+    if (el instanceof HTMLElement) el.blur();
+  });
+};
+
 /**
  * Dismiss the CodeMirror autocomplete dropdown by blurring the focused editor.
  *
@@ -41,10 +65,7 @@ export const getSqlEditor = (page: Page, placeholder?: string) => {
  * intercepted by a still-animating popup.
  */
 export const dismissSqlAutocomplete = async (page: Page) => {
-  await page.evaluate(() => {
-    const el = document.activeElement;
-    if (el instanceof HTMLElement) el.blur();
-  });
+  await blurActiveElement(page);
   await page
     .locator('.cm-tooltip-autocomplete')
     .waitFor({ state: 'hidden', timeout: 2000 })
diff --git a/packages/app/tests/e2e/utils/multiline-input.ts b/packages/app/tests/e2e/utils/multiline-input.ts
new file mode 100644
index 0000000000..ecfc418369
--- /dev/null
+++ b/packages/app/tests/e2e/utils/multiline-input.ts
@@ -0,0 +1,152 @@
+/**
+ * Helpers for asserting a query input grows to fit a second line and keeps that
+ * height after focus leaves it.
+ *
+ * The regression these guard against is a field that only reserves room for
+ * extra lines while focused, so blurring it clips or overlays everything the
+ * user typed past the first line.
+ */
+import { expect, Locator, Page } from '@playwright/test';
+
+import { blurActiveElement } from './locators';
+
+/** The three elements a growth assertion needs from one input. */
+export type MultilineField = {
+  /**
+   * What the user focuses and types into: a `textarea`, or CodeMirror's
+   * contenteditable `.cm-content` — never the `.cm-editor` wrapper, which never
+   * holds focus.
+   */
+  focusTarget: Locator;
+  /** The element whose height tracks the content. */
+  growthBox: Locator;
+  /** The bordered box the user sees, which must not clip the content. */
+  visibleBox: Locator;
+};
+
+/** Consecutive equal reads before a height counts as settled. */
+const SETTLED_READS = 3;
+const SETTLE_INTERVAL_MS = 100;
+const SETTLE_TIMEOUT_MS = 5_000;
+
+const boxHeight = async (box: Locator): Promise<number> =>
+  (await box.boundingBox())?.height ?? 0;
+
+/**
+ * The height of a box once it stops changing.
+ *
+ * A single `boundingBox()` read taken right after typing or blurring can land
+ * before the re-render that follows it — `react-textarea-autosize` recomputes
+ * its rows in an effect, CodeMirror re-measures on its own schedule — so a
+ * collapse would arrive after the read and the assertion would pass on a stale
+ * value. Polling for a stable window instead of sleeping keeps that
+ * deterministic.
+ */
+export const settledHeight = async (box: Locator): Promise<number> => {
+  let height = 0;
+  let previous = -1;
+  let stableReads = 0;
+
+  await expect
+    .poll(
+      async () => {
+        height = await boxHeight(box);
+        stableReads = height === previous ? stableReads + 1 : 0;
+        previous = height;
+        return stableReads;
+      },
+      { intervals: [SETTLE_INTERVAL_MS], timeout: SETTLE_TIMEOUT_MS },
+    )
+    .toBeGreaterThanOrEqual(SETTLED_READS);
+
+  return height;
+};
+
+/** Assert the field now holds two lines, whichever editor renders it. */
+const expectTwoLines = async (focusTarget: Locator): Promise<void> => {
+  const lines = focusTarget.locator('.cm-line');
+  if ((await lines.count()) > 0) {
+    await expect(lines).toHaveCount(2, { timeout: 2000 });
+    return;
+  }
+  await expect(focusTarget).toHaveValue(/first line[\r\n]+second line/, {
+    timeout: 2000,
+  });
+};
+
+/**
+ * Type two lines into a field, assert it grows to fit them, and assert it still
+ * fits them once focus moves away.
+ *
+ * @param onSingleLine runs while the field holds one short line — its minimum
+ * height, and the only state where a row reserving more space than its bordered
+ * box shows up. An empty field is no good for that check: the placeholder wraps
+ * at narrow widths and the content then drives the height.
+ */
+export const expectExpandsAndStaysExpanded = async (
+  page: Page,
+  { focusTarget, growthBox, visibleBox }: MultilineField,
+  { onSingleLine }: { onSingleLine?: () => Promise<void> } = {},
+): Promise<void> => {
+  await focusTarget.scrollIntoViewIfNeeded();
+  await focusTarget.focus();
+  await page.keyboard.type('first line');
+
+  await onSingleLine?.();
+
+  const singleLineHeight = await settledHeight(growthBox);
+  const singleLineVisibleHeight = await settledHeight(visibleBox);
+
+  await page.keyboard.press('Shift+Enter');
+  await page.keyboard.type('second line');
+  await expectTwoLines(focusTarget);
+
+  expect(await settledHeight(growthBox)).toBeGreaterThanOrEqual(
+    singleLineHeight,
+  );
+
+  // The visible box has to actually grow, not clip the second line.
+  await expect
+    .poll(() => boxHeight(visibleBox), { timeout: SETTLE_TIMEOUT_MS })
+    .toBeGreaterThan(singleLineVisibleHeight);
+  const expandedVisibleHeight = await settledHeight(visibleBox);
+
+  await blurActiveElement(page);
+  await expect(focusTarget).not.toBeFocused();
+
+  expect(await settledHeight(visibleBox)).toBeGreaterThanOrEqual(
+    expandedVisibleHeight,
+  );
+};
+
+/**
+ * A value long enough that a wrapping editor would grow past one row at the
+ * compact (`xs`) size used by the waterfall filters.
+ */
+export const WRAPPING_SINGLE_LINE_QUERY =
+  'StatusCode:"Error" AND ServiceName:"checkout-service" AND SpanName:"GET /api/v1/checkout"';
+
+/**
+ * Type a long value with no newline and assert the field stays one row while
+ * focused and after blur. Guards `allowMultiline={false}` against growing on
+ * focus and clipping on blur.
+ */
+export const expectStaysOneRow = async (
+  page: Page,
+  { focusTarget, visibleBox }: MultilineField,
+): Promise<void> => {
+  await focusTarget.scrollIntoViewIfNeeded();
+  await focusTarget.focus();
+  await page.keyboard.type('short');
+  const oneRowHeight = await settledHeight(visibleBox);
+
+  await page.keyboard.press('ControlOrMeta+A');
+  await page.keyboard.type(WRAPPING_SINGLE_LINE_QUERY);
+
+  expect(await settledHeight(visibleBox)).toBeLessThanOrEqual(oneRowHeight + 1);
+
+  await blurActiveElement(page);
+  await expect(focusTarget).not.toBeFocused();
+
+  expect(await settledHeight(visibleBox)).toBeLessThanOrEqual(oneRowHeight + 1);
+};

From 483d5d29685cc15cbd4c15d003aedea1a0f9d1b5 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 18 Sep 2026 12:50:40 +0200
Subject: [PATCH 2/2] fix(app): drop the stale SQL editor language prop and
 cover focus borders

The dashboard filter expression editor still passed the removed `language` prop, which failed the app type-check. Removing the mirror dead switch in AutocompleteInput/SearchInputV2 too, folding the validation-state ladder into variableValidation, and moving the focus-border spec here so the recolor it asserts ships with its test.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../QueryExpressionFilterEditForm.tsx         |  1 -
 .../app/src/components/KubernetesFilters.tsx  |  1 -
 .../components/PromQLEditor/PromQLEditor.tsx  |  8 +--
 .../components/SQLEditor/SQLInlineEditor.tsx  |  8 +--
 .../SQLEditor/variableValidation.tsx          | 16 ++++++
 .../SearchInput/AutocompleteInput.tsx         | 24 ++------
 .../components/SearchInput/SearchInputV2.tsx  | 18 +-----
 .../e2e/features/shared/input-focus.spec.ts   | 56 +++++++++++++++++++
 .../app/tests/e2e/page-objects/SearchPage.ts  | 22 +++-----
 .../app/tests/e2e/utils/multiline-input.ts    | 25 ++++++++-
 10 files changed, 119 insertions(+), 60 deletions(-)
 create mode 100644 packages/app/tests/e2e/features/shared/input-focus.spec.ts

diff --git a/packages/app/src/components/DashboardFiltersModal/QueryExpressionFilterEditForm.tsx b/packages/app/src/components/DashboardFiltersModal/QueryExpressionFilterEditForm.tsx
index 0eeb04b47f..de206bde6c 100644
--- a/packages/app/src/components/DashboardFiltersModal/QueryExpressionFilterEditForm.tsx
+++ b/packages/app/src/components/DashboardFiltersModal/QueryExpressionFilterEditForm.tsx
@@ -181,7 +181,6 @@ export const QueryExpressionFilterEditForm = ({
           control={control}
           name="expression"
           placeholder="SQL column or expression"
-          language="sql"
           enableHotkey
           rules={{ required: true }}
           parentRef={TOOLTIP_PORTAL_TARGET}
diff --git a/packages/app/src/components/KubernetesFilters.tsx b/packages/app/src/components/KubernetesFilters.tsx
index c6fb19082d..8f19dd0dcb 100644
--- a/packages/app/src/components/KubernetesFilters.tsx
+++ b/packages/app/src/components/KubernetesFilters.tsx
@@ -341,7 +341,6 @@ export const KubernetesFilters: React.FC<KubernetesFiltersProps> = ({
           sourceId={metricSource.id}
           dateRange={dateRange}
           placeholder="Search your events w/ Lucene ex. column:foo"
-          language="lucene"
           name="searchQuery"
           control={control}
           size="xs"
diff --git a/packages/app/src/components/PromQLEditor/PromQLEditor.tsx b/packages/app/src/components/PromQLEditor/PromQLEditor.tsx
index 28cf3b98db..4bfc0fbb58 100644
--- a/packages/app/src/components/PromQLEditor/PromQLEditor.tsx
+++ b/packages/app/src/components/PromQLEditor/PromQLEditor.tsx
@@ -27,6 +27,7 @@ import { usePromqlVariableCompletions } from '@/components/SQLEditor/variableCom
 import {
   useVariableValidation,
   VariableIssueIndicator,
+  variableValidationState,
 } from '@/components/SQLEditor/variableValidation';
 
 import { createVariableCompletionSource } from './variableCompletionSource';
@@ -198,8 +199,7 @@ export default function PromQLEditor({
     }
   }, []);
 
-  const isVariableWarningOnly =
-    variableIssues.errors.length === 0 && variableIssues.warnings.length > 0;
+  const validationState = variableValidationState(variableIssues);
   const baseHeight = EDITOR_INPUT_HEIGHTS.sm;
 
   return (
@@ -211,8 +211,8 @@ export default function PromQLEditor({
         shadow="none"
         className={cx(
           styles.paper,
-          variableIssues.errors.length > 0 ? styles.error : undefined,
-          isVariableWarningOnly ? styles.warning : undefined,
+          validationState === 'error' ? styles.error : undefined,
+          validationState === 'warning' ? styles.warning : undefined,
           isFocused ? styles.focused : undefined,
         )}
         ps="4px"
diff --git a/packages/app/src/components/SQLEditor/SQLInlineEditor.tsx b/packages/app/src/components/SQLEditor/SQLInlineEditor.tsx
index 44dc5f09cf..1e03919ab5 100644
--- a/packages/app/src/components/SQLEditor/SQLInlineEditor.tsx
+++ b/packages/app/src/components/SQLEditor/SQLInlineEditor.tsx
@@ -46,6 +46,7 @@ import { useSqlVariableCompletions } from './variableCompletions';
 import {
   useVariableValidation,
   VariableIssueIndicator,
+  variableValidationState,
 } from './variableValidation';
 
 import styles from './SQLInlineEditor.module.scss';
@@ -332,12 +333,7 @@ export default function SQLInlineEditor({
     }
   }, []);
 
-  const validationState =
-    error || variableIssues.errors.length > 0
-      ? 'error'
-      : variableIssues.warnings.length > 0
-        ? 'warning'
-        : undefined;
+  const validationState = variableValidationState(variableIssues, !!error);
   const baseHeight =
     size === 'xs' ? EDITOR_INPUT_HEIGHTS.xs : EDITOR_INPUT_HEIGHTS.sm;
 
diff --git a/packages/app/src/components/SQLEditor/variableValidation.tsx b/packages/app/src/components/SQLEditor/variableValidation.tsx
index 7586df885a..0b98f49f09 100644
--- a/packages/app/src/components/SQLEditor/variableValidation.tsx
+++ b/packages/app/src/components/SQLEditor/variableValidation.tsx
@@ -25,6 +25,22 @@ const VALIDATION_DEBOUNCE_MS = 500;
 export const hasVariableIssues = (issues: VariableReferenceIssues) =>
   issues.errors.length > 0 || issues.warnings.length > 0;
 
+export type VariableValidationState = 'error' | 'warning';
+
+/**
+ * Which state an input paints its border with. Errors win over warnings, and
+ * `hasError` folds in an error the caller already knows about from elsewhere
+ * (an invalid expression), which outranks a variable warning.
+ */
+export const variableValidationState = (
+  issues: VariableReferenceIssues,
+  hasError = false,
+): VariableValidationState | undefined => {
+  if (hasError || issues.errors.length > 0) return 'error';
+  if (issues.warnings.length > 0) return 'warning';
+  return undefined;
+};
+
 /**
  * Returns variable-reference issues in the given template. Returns nothing when no variables are in scope.
  */
diff --git a/packages/app/src/components/SearchInput/AutocompleteInput.tsx b/packages/app/src/components/SearchInput/AutocompleteInput.tsx
index 7d298cc090..e9a2b989d5 100644
--- a/packages/app/src/components/SearchInput/AutocompleteInput.tsx
+++ b/packages/app/src/components/SearchInput/AutocompleteInput.tsx
@@ -4,15 +4,12 @@ import Fuse from 'fuse.js';
 import { Loader, Popover, Textarea, UnstyledButton } from '@mantine/core';
 
 import { EDITOR_INPUT_HEIGHTS } from '@/components/editorInputHeights';
+import type { VariableValidationState } from '@/components/SQLEditor/variableValidation';
 import type { TokenInfo } from '@/hooks/useAutoCompleteOptions';
 import { useQueryHistory } from '@/utils';
 
-import InputLanguageSwitch from './InputLanguageSwitch';
-
 import styles from './AutocompleteInput.module.scss';
 
-export type AutocompleteInputValidationState = 'error' | 'warning';
-
 export default function AutocompleteInput({
   inputRef,
   value,
@@ -30,8 +27,6 @@ export default function AutocompleteInput({
   showSuggestionsOnEmpty,
   suggestionsHeader = 'Properties',
   zIndex = 999,
-  onLanguageChange,
-  language,
   onSubmit,
   queryHistoryType,
   allowMultiline = true,
@@ -49,14 +44,12 @@ export default function AutocompleteInput({
   tokenInfo?: TokenInfo;
   aboveSuggestions?: React.ReactNode;
   belowSuggestions?: React.ReactNode;
-  /** Rendered at the right edge of the input, left of the language switch. */
+  /** Rendered at the right edge of the input. */
   rightAdornment?: React.ReactNode;
-  validationState?: AutocompleteInputValidationState;
+  validationState?: VariableValidationState;
   showSuggestionsOnEmpty?: boolean;
   suggestionsHeader?: string;
   zIndex?: number;
-  onLanguageChange?: (language: 'sql' | 'lucene') => void;
-  language?: 'sql' | 'lucene';
   queryHistoryType?: string;
   allowMultiline?: boolean;
   'data-testid'?: string;
@@ -200,7 +193,7 @@ export default function AutocompleteInput({
     if (inputRef.current) {
       setInputWidth(inputRef.current.clientWidth);
     }
-  }, [language, onLanguageChange, rightAdornment, inputRef]);
+  }, [rightAdornment, inputRef]);
 
   const baseHeight = EDITOR_INPUT_HEIGHTS[size];
 
@@ -327,16 +320,9 @@ export default function AutocompleteInput({
             }}
             rightSectionWidth={rightSectionWidth}
             rightSection={
-              rightAdornment != null ||
-              (language != null && onLanguageChange != null) ? (
+              rightAdornment != null ? (
                 <div ref={ref} className={styles.rightSection}>
                   {rightAdornment}
-                  {language != null && onLanguageChange != null && (
-                    <InputLanguageSwitch
-                      language={language}
-                      onLanguageChange={onLanguageChange}
-                    />
-                  )}
                 </div>
               ) : undefined
             }
diff --git a/packages/app/src/components/SearchInput/SearchInputV2.tsx b/packages/app/src/components/SearchInput/SearchInputV2.tsx
index d4ec866c1c..f4c8893a77 100644
--- a/packages/app/src/components/SearchInput/SearchInputV2.tsx
+++ b/packages/app/src/components/SearchInput/SearchInputV2.tsx
@@ -17,6 +17,7 @@ import {
   hasVariableIssues,
   useVariableValidation,
   VariableIssueIndicator,
+  variableValidationState,
 } from '@/components/SQLEditor/variableValidation';
 import {
   ILanguageFormatter,
@@ -24,9 +25,7 @@ import {
 } from '@/hooks/useAutoCompleteOptions';
 import { useMetadataWithSettings } from '@/hooks/useMetadata';
 
-import AutocompleteInput, {
-  type AutocompleteInputValidationState,
-} from './AutocompleteInput';
+import AutocompleteInput from './AutocompleteInput';
 
 import styles from './SearchInputV2.module.scss';
 
@@ -49,8 +48,6 @@ export default function SearchInputV2({
   placeholder = 'Search your events for anything...',
   size = 'sm',
   zIndex,
-  language,
-  onLanguageChange,
   enableHotkey,
   onSubmit,
   additionalSuggestions,
@@ -65,8 +62,6 @@ export default function SearchInputV2({
   placeholder?: string;
   size?: 'xs' | 'sm' | 'lg';
   zIndex?: number;
-  onLanguageChange?: (language: 'sql' | 'lucene') => void;
-  language?: 'sql' | 'lucene';
   enableHotkey?: boolean;
   onSubmit?: () => void;
   additionalSuggestions?: string[];
@@ -100,12 +95,7 @@ export default function SearchInputV2({
       language: 'lucene',
     },
   );
-  const validationState: AutocompleteInputValidationState | undefined =
-    variableIssues.errors.length > 0
-      ? 'error'
-      : variableIssues.warnings.length > 0
-        ? 'warning'
-        : undefined;
+  const validationState = variableValidationState(variableIssues);
 
   const {
     options: autoCompleteOptions,
@@ -162,8 +152,6 @@ export default function SearchInputV2({
       tokenInfo={tokenInfo}
       size={size}
       zIndex={zIndex}
-      language={language}
-      onLanguageChange={onLanguageChange}
       onSubmit={onSubmit}
       queryHistoryType={queryHistoryType}
       allowMultiline={allowMultiline}
diff --git a/packages/app/tests/e2e/features/shared/input-focus.spec.ts b/packages/app/tests/e2e/features/shared/input-focus.spec.ts
new file mode 100644
index 0000000000..984d80f7ea
--- /dev/null
+++ b/packages/app/tests/e2e/features/shared/input-focus.spec.ts
@@ -0,0 +1,56 @@
+import { SearchPage } from '../../page-objects/SearchPage';
+import { expect, test } from '../../utils/base-test';
+
+/**
+ * The query fields mark focus by recoloring their border. The Paper theme sets
+ * that border inline, which outranks any stylesheet rule, so these assertions
+ * read the color that actually lands on the element rather than trusting the
+ * class that asks for it.
+ */
+test.describe('Query input focus states', { tag: '@search' }, () => {
+  const languages = [
+    { name: 'Lucene', select: (p: SearchPage) => p.switchToLuceneMode() },
+    { name: 'SQL', select: (p: SearchPage) => p.switchToSQLMode() },
+  ];
+
+  test('marks the WHERE input as focused in both languages', async ({
+    page,
+  }) => {
+    const searchPage = new SearchPage(page);
+    await searchPage.goto();
+
+    for (const language of languages) {
+      await language.select(searchPage);
+
+      const blurred = await searchPage.getWhereBorderColors();
+      expect(blurred.input).not.toBe('');
+
+      await searchPage.focusWhereInput();
+
+      // Both halves take the focus color, so the control doesn't read as
+      // half-focused.
+      await expect
+        .poll(async () => (await searchPage.getWhereBorderColors()).input)
+        .not.toBe(blurred.input);
+      const focused = await searchPage.getWhereBorderColors();
+      expect(focused.languageSwitch).toBe(focused.input);
+    }
+  });
+
+  test('marks SELECT and ORDER BY as focused', async ({ page }) => {
+    const searchPage = new SearchPage(page);
+    await searchPage.goto();
+
+    const selectBlurred = await searchPage.getSelectBorderColor();
+    await searchPage.getSELECTEditor().focus();
+    await expect
+      .poll(() => searchPage.getSelectBorderColor())
+      .not.toBe(selectBlurred);
+
+    const orderByBlurred = await searchPage.getOrderByBorderColor();
+    await searchPage.getOrderByEditor().focus();
+    await expect
+      .poll(() => searchPage.getOrderByBorderColor())
+      .not.toBe(orderByBlurred);
+  });
+});
diff --git a/packages/app/tests/e2e/page-objects/SearchPage.ts b/packages/app/tests/e2e/page-objects/SearchPage.ts
index a14e0a752a..46aba7fbe9 100644
--- a/packages/app/tests/e2e/page-objects/SearchPage.ts
+++ b/packages/app/tests/e2e/page-objects/SearchPage.ts
@@ -362,19 +362,13 @@ export class SearchPage {
     );
   }
 
-  /**
-   * The SELECT / ORDER BY clause editors as growth-assertable fields.
-   *
-   * Located from their labels rather than by `.cm-content` index, which shifts
-   * with the WHERE language: in SQL mode the WHERE input is a CodeMirror editor
-   * too, and it comes first.
-   */
+  /** The SELECT / ORDER BY clause editors as growth-assertable fields. */
   selectClauseField(): MultilineField {
-    return this.clauseField('SELECT');
+    return this.clauseField(this.getSELECTEditor());
   }
 
   orderByClauseField(): MultilineField {
-    return this.clauseField('ORDER BY');
+    return this.clauseField(this.getOrderByEditor());
   }
 
   /** Empty a clause editor so it starts from one short line. */
@@ -383,10 +377,12 @@ export class SearchPage {
     await field.focusTarget.press('Backspace');
   }
 
-  private clauseField(label: 'SELECT' | 'ORDER BY'): MultilineField {
-    const paper = borderedBox(this.page.getByText(label, { exact: true }));
-    const content = paper.locator('.cm-content').first();
-    return { focusTarget: content, growthBox: content, visibleBox: paper };
+  private clauseField(content: Locator): MultilineField {
+    return {
+      focusTarget: content,
+      growthBox: content,
+      visibleBox: borderedBox(content),
+    };
   }
 
   /**
diff --git a/packages/app/tests/e2e/utils/multiline-input.ts b/packages/app/tests/e2e/utils/multiline-input.ts
index ecfc418369..093785c946 100644
--- a/packages/app/tests/e2e/utils/multiline-input.ts
+++ b/packages/app/tests/e2e/utils/multiline-input.ts
@@ -133,20 +133,43 @@ export const WRAPPING_SINGLE_LINE_QUERY =
  */
 export const expectStaysOneRow = async (
   page: Page,
-  { focusTarget, visibleBox }: MultilineField,
+  { focusTarget, growthBox, visibleBox }: MultilineField,
 ): Promise<void> => {
   await focusTarget.scrollIntoViewIfNeeded();
   await focusTarget.focus();
   await page.keyboard.type('short');
   const oneRowHeight = await settledHeight(visibleBox);
+  const oneRowContentHeight = await settledHeight(growthBox);
 
   await page.keyboard.press('ControlOrMeta+A');
   await page.keyboard.type(WRAPPING_SINGLE_LINE_QUERY);
 
+  // The bordered box alone can't carry this: a single-line SQL field clamps it
+  // to one row with `overflow: hidden`, so it would hold even if the content
+  // wrapped and the second line were clipped out of sight. Measuring the
+  // content too is what pins the value to one row.
+  await expectOneLine(focusTarget, growthBox, oneRowContentHeight);
   expect(await settledHeight(visibleBox)).toBeLessThanOrEqual(oneRowHeight + 1);
 
   await blurActiveElement(page);
   await expect(focusTarget).not.toBeFocused();
 
+  await expectOneLine(focusTarget, growthBox, oneRowContentHeight);
   expect(await settledHeight(visibleBox)).toBeLessThanOrEqual(oneRowHeight + 1);
 };
+
+/** Assert the content itself still occupies one row, whichever editor renders it. */
+const expectOneLine = async (
+  focusTarget: Locator,
+  growthBox: Locator,
+  oneRowContentHeight: number,
+): Promise<void> => {
+  const lines = focusTarget.locator('.cm-line');
+  if ((await lines.count()) > 0) {
+    await expect(lines).toHaveCount(1, { timeout: 2000 });
+    return;
+  }
+  expect(await settledHeight(growthBox)).toBeLessThanOrEqual(
+    oneRowContentHeight + 1,
+  );
+};